Merge remote-tracking branch 'origin/main' into release-3.0.0

siemens · Aug 23, 2024 · 637dcdf · 637dcdf
2 parents a3bc335 + fbd0b25
commit 637dcdf
Show file tree

Hide file tree

Showing 15 changed files with 1,231 additions and 753 deletions.
diff --git a/packages/documentation/docs/controls/_avatar_code.md b/packages/documentation/docs/controls/_avatar_code.md
@@ -3,7 +3,7 @@ import Events from './../auto-generated/ix-avatar/events.md';
 
 import Playground from '@site/src/components/PlaygroundV2';
 
-## Examples
+## Development
 
 ### Basic
 
@@ -37,12 +37,12 @@ You can also add the avatar to the header, which will turn it into a clickable b
   height="21rem">
 </Playground>
 
-## API
+### API
 
-### Properties
+#### Properties
 
 <Props />
 
-### Events 
+#### Events
 
 <Events />
diff --git a/packages/documentation/docs/controls/_avatar_styleguide.md b/packages/documentation/docs/controls/_avatar_styleguide.md
@@ -1,21 +1,23 @@
-Avatars are visual or textual representations of individual identities and they are most often used to represent users logged into a system. Identity providers or user management systems usually provide identity information, and the amount of information provided varies from system to system. The avatar component offers different options to handle this.
+## Guidelines
 
+Avatars are visual or textual representations of individual identities, most often used to represent users logged into a system. Identity providers or user management systems usually provide identity information, and the amount of information provided varies from system to system. The avatar component offers different options to handle this.
 
-## Options
+### Options
 
 ![Avatar overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=963-565&mode=design&t=M9CowfOcGyqnSycV-4)
 
-| Option                    | Description and usage                                                                                        |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| Default (1)  | Without any set option the visual is just a predefined placeholder graphic, it can be used when identity information is unavailable or cannot be used for other reasons.|
-| Initials (2) | Shows a string of one or two characters, can be used when only textual information is available. Examples: a user’s initials (JD for John Doe), the first character from the username (J for johndoe)|
-| Image (3)    | Shows an image, can be used when identity information includes an image|
-
-## Behavior
+| Option       | Description and usage |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Default (1)  | Without any option set, the visual is just a predefined placeholder graphic. It can be used when identity information is unavailable or cannot be used for other reasons. |
+| Initials (2) | Shows a string of one or two characters. Can be used when only textual information is available. Examples: A user’s initials (JD for John Doe) or the first character from the username (J for johndoe) |
+| Image (3)    | Shows an image. Can be used when identity information includes an image |
+
+### Behavior
+
 The avatar is a display-only component with no further interactions. Images provided are proportionally scaled to fill the content. A circle shape clips the image. All image formats that browser engines support can be used.
 
-## Dos and Don’ts
+### Dos and Don’ts
 
-![Avatar dos and Don‘ts](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=975-13&mode=design&t=SxUA6AcHswBAiIzi-4)
+![Avatar dos and don‘ts](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=975-13&mode=design&t=SxUA6AcHswBAiIzi-4)
 
 - Don't use more than 2 characters when using the "Initials" option
diff --git a/packages/documentation/docs/controls/avatar.md b/packages/documentation/docs/controls/avatar.md
@@ -1,4 +1,4 @@
-import DocsTabs from '@site/src/components/DocsTabs';
+import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';
 
 import DocsUx from './\_avatar_styleguide.md'
 import DocsCode from './\_avatar_code.md'
@@ -12,4 +12,7 @@ import Tags from './../auto-generated/ix-avatar/tags.md';
 <br/>
 <br/>
 
-<DocsTabs styleguide={DocsUx} code={DocsCode} />
+<LinkableDocsTabs>
+  <DocsUx />
+  <DocsCode />
+</LinkableDocsTabs>
diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md
@@ -3,6 +3,8 @@ import Events from './../auto-generated/ix-message-bar/events.md';
 
 import Playground from '@site/src/components/PlaygroundV2';
 
+# Message-bar
+
 ## Examples
 
 <Playground

diff --git a/packages/documentation/src/components/DocsTabs/index.tsx b/packages/documentation/src/components/DocsTabs/index.tsx
@@ -104,7 +104,7 @@ export default (props) => {
   return <BrowserOnly>{() => <DocsTabs {...props} />}</BrowserOnly>;
 };
 
-function DocTab(
+export function DocTab(
   props: React.PropsWithChildren<{
     name: string;
     active: boolean;

diff --git a/packages/documentation/src/components/LinkableDocsTabs/index.tsx b/packages/documentation/src/components/LinkableDocsTabs/index.tsx
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { iconCode, iconNavigation } from '@siemens/ix-icons/icons';
+
+export const docsTabQueryString = 'current-tab';
+export const guidelinesTabValue = 'guidelines';
+export const developmentTabValue = 'development';
+
+export default function LinkableDocsTabs(props: { children: [any, any] }) {
+  return (
+    <Tabs queryString={docsTabQueryString}>
+      <TabItem
+        value={guidelinesTabValue}
+        label="Guidelines"
+        attributes={{
+          icon: iconNavigation,
+        }}
+      >
+        {props.children[0]}
+      </TabItem>
+
+      <TabItem
+        value={developmentTabValue}
+        label="Development"
+        attributes={{
+          icon: iconCode,
+        }}
+      >
+        {props.children[1]}
+      </TabItem>
+    </Tabs>
+  );
+}
diff --git a/packages/documentation/src/css/custom.scss b/packages/documentation/src/css/custom.scss
@@ -415,3 +415,46 @@ p > img {
 .Accordion__Last {
   margin-block-end: 2rem;
 }
+
+.tabs__item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  background-color: var(--theme-color-component-1);
+  border-radius: 0px;
+  color: var(--theme-color-std-text);
+  height: 2.75rem;
+  max-height: 2.75rem;
+  padding: 0;
+  border: none;
+
+  &:hover {
+    background-color: var(--theme-color-component-1);
+  }
+}
+
+.tabs__item--active {
+  background-color: var(--theme-color-dynamic);
+  color: var(--theme-color-primary--contrast);
+  border: none;
+
+  &:hover {
+    background-color: var(--theme-color-dynamic);
+  }
+}
+
+[id]::before {
+  content: '';
+  display: block;
+  height: 1rem;
+  margin-top: -1rem;
+  visibility: hidden;
+}
+
+// Hide the development and guidelines sections because they are shown via tabs
+h2#development,
+h2#guidelines {
+  visibility: hidden;
+  height: 0px;
+}