docs(redesign): new color table

packages/documentation-redesign/package.json

@@ -22,7 +22,6 @@
     "@mdx-js/react": "^3.0.0",
     "@siemens/ix-icons": "^2.2.0",
     "@stackblitz/sdk": "^1.11.0",
-    "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,6 +40,7 @@
     "angular-test-app": "workspace:*",
     "autoprefixer": "10.4.5",
     "axios": "^1.5.0",
+    "clsx": "^2.1.0",
     "docusaurus-plugin-sass": "^0.2.5",
     "figma-plugin": "workspace:*",
     "fs-extra": "^11.2.0",

packages/documentation-redesign/scripts/templates/event-table.mustache

@@ -1,5 +1,5 @@
 {{#events}}
-<ApiTable>
+<ApiTable id="event-{{event}}">
   <ApiTable.EventHeader name="{{event}}">
     {{#docsTags}}
       {{{ rTag }}}

packages/documentation-redesign/scripts/templates/property-table.mustache

@@ -1,5 +1,5 @@
 {{#props}}
-<ApiTable>
+<ApiTable id="property-{{name}}">
   <ApiTable.PropertyHeader name="{{name}}">
     {{#docsTags}}
       {{{ rTag }}}
@@ -10,17 +10,21 @@
     { `{{ docs }}` }
   </ApiTable.Text>
 
+  {{#attr}}
   <ApiTable.Code name="Attribute">
     {`{{{ attr }}}`}
   </ApiTable.Code>
+  {{/attr}}
 
   <ApiTable.Code name="Type">
    {`{{{ type }}}`}
   </ApiTable.Code>
 
+  {{#default}}
   <ApiTable.Code name="Default">
     {`{{{ default }}}`}
   </ApiTable.Code>
+  {{/default}}
 
 </ApiTable>
 {{/props}}

packages/documentation-redesign/scripts/templates/slot-table.mustache

@@ -1,5 +1,5 @@
 {{#slots}}
-<ApiTable>
+<ApiTable id="slot-{{name}}">
   <ApiTable.SlotHeader name="{{name}}">
     {{#docsTags}}
       {{{ rTag }}}

packages/documentation-redesign/src/components/ApiTable/ApiTable.module.css

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+.AnchorButton {
+  all: unset;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.AnchorButton:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+}
+
+.AnchorHeader {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: nowrap;
+  padding: 1rem;
+  border-bottom: 1px solid var(--theme-color-soft-bdr);
+  background-color: var(--theme-color-2);
+  color: var(--theme-color-std-text);
+}
+
+.AnchorHeader.NoButtonBorder {
+  border-bottom: none;
+}
+
+.ApiTableText {
+  display: grid;
+  grid-template-columns: minmax(100px, 20%) 1fr;
+  border-bottom: 1px solid var(--theme-color-soft-bdr);
+}
+
+.ApiTableText:last-child {
+  border-bottom: none;
+}

packages/documentation-redesign/src/components/ApiTable/index.tsx

@@ -6,14 +6,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import { useFramework } from '@site/src/hooks/use-framework';
+import clsx from 'clsx';
 import FrameworkSelection from '../UI/FrameworkSelection';
-import BrowserOnly from '@docusaurus/BrowserOnly';
+import styles from './ApiTable.module.css';
 
 export type ApiTableProps = {
-  children?: React.ReactNode;
-  name: string;
-  type?: 'event' | 'property' | 'slot';
+  readonly children?: React.ReactNode;
+  readonly name: string;
+  readonly type?: 'event' | 'property' | 'slot';
 };
 
 const toKebabCase = (str: string) => {
@@ -27,11 +29,11 @@ const toKebabCase = (str: string) => {
     .join('');
 };
 
-function ApiTable({ children }) {
+function ApiTable({ children, id }) {
   return (
     <BrowserOnly>
       {() => (
-        <div className="api-table container mx-auto mb-8">
+        <div className="api-table container ml-0 mb-8" id={id}>
           <div className="bg-[transparent] rounded-lg overflow-hidden border-solid border-[1px] border-[var(--theme-color-soft-bdr)]">
             {children}
           </div>
@@ -51,7 +53,7 @@ function PropertyHeader({ children, name, type }: ApiTableProps) {
   }
 
   return (
-    <div className="flex bg-[var(--theme-color-2)] text-[var(--theme-color-std-text)] p-4 border-solid border-0 border-b border-[var(--theme-color-soft-bdr)]">
+    <div className="flex bg-[var(--theme-color-2)] text-[var(--theme-color-std-text)] p-4 border-solid border-0 border-b border-[var(--theme-color-soft-bdr)] anchor">
       <div className="flex items-center font-bold">
         {propertyName}
         <a
@@ -95,11 +97,11 @@ function SlotHeader({ children, name }: ApiTableProps) {
 
 function Text({ children, name }: ApiTableProps) {
   return (
-    <div className="grid grid-cols-[minmax(100px,20%)_1fr] gap-2 border-solid border-0 border-b border-[var(--theme-color-soft-bdr)]">
+    <div className={styles.ApiTableText}>
       <div className="px-8 py-4 font-bold w-auto border-solid border-0 border-r border-[var(--theme-color-soft-bdr)]">
         {name}
       </div>
-      <div className="p-4 w-auto">{children}</div>
+      <div className="w-auto p-4">{children}</div>
     </div>
   );
 }
@@ -119,3 +121,40 @@ ApiTable.Text = Text;
 ApiTable.Code = Code;
 
 export default ApiTable;
+
+export function AnchorHeader({
+  children,
+  right,
+  anchorName,
+  anchorLabel,
+  noBottomBorder,
+  onClick,
+}: {
+  readonly children: React.ReactNode;
+  readonly right?: React.ReactNode;
+  readonly anchorName: string;
+  readonly anchorLabel: string;
+  readonly noBottomBorder?: boolean;
+  readonly onClick?: () => void;
+}) {
+  return (
+    <div
+      className={clsx(styles.AnchorHeader, {
+        [styles.NoButtonBorder]: noBottomBorder,
+      })}
+    >
+      <div className="flex items-center font-bold w-full">
+        <button onClick={onClick} className={styles.AnchorButton} tabIndex={0}>
+          {children}
+          <a
+            href={`#${anchorName}`}
+            className="hash-link"
+            aria-label={anchorLabel}
+            title={anchorLabel}
+          ></a>
+        </button>
+      </div>
+      <div className="flex items-center ml-auto gap-2">{right}</div>
+    </div>
+  );
+}

packages/documentation-redesign/src/components/ColorTable/ColorTable.module.css

@@ -0,0 +1,89 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.colorCircle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 100px;
+  border-width: 0.125rem;
+  border-color: var(--theme-color-soft-bdr);
+  border-style: solid;
+  overflow: hidden;
+}
+
+.colorCircleInner {
+  width: 29px;
+  height: 29px;
+}
+
+.colorRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+}
+
+.headColorName {
+  padding-left: 0.5rem;
+}
+
+.colorChildRow {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.colorColumn {
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: row;
+  gap: 0.5rem;
+  width: auto;
+  height: 100%;
+
+  padding-right: 1rem;
+  border-right: 1px solid var(--theme-color-soft-bdr);
+}
+
+.colorColumnChildName {
+  padding-left: 1rem;
+  width: 100%;
+}
+
+.colorColumnHex {
+  display: flex;
+  justify-content: flex-end;
+  border-right: none;
+  min-width: 7rem;
+}
+
+.colorTextRow {
+  display: grid;
+  grid-template-columns: minmax(100px, 20%) 1fr;
+  border: 0;
+  border-bottom: 1px solid var(--theme-color-soft-bdr);
+}
+
+.colorTextRow:last-child {
+  border-bottom: 0;
+}
+
+.DesktopOnly {
+  display: inherit;
+}
+
+@media screen and (max-width: 700px) {
+  .DesktopOnly {
+    display: none;
+  }
+}