@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/examples/component/component:syn-side-nav.md

@@ -0,0 +1,627 @@
+## Default
+
+Side navigation lets the user navigate through the entire content of a product. It supports single or nested navigation levels.
+
+```html
+<syn-header label="Side Navigation"></syn-header>
+<main
+  style="
+    position: relative;
+    height: 500px;
+    background-color: var(--syn-color-neutral-200);
+  "
+  class="side-nav-default"
+>
+  <syn-side-nav open="">
+    <syn-nav-item current="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+  </syn-side-nav>
+</main>
+<script type="module">
+  const mainContents = document.querySelectorAll(".side-nav-default");
+
+  Array.from(mainContents).forEach((mainContent, index) => {
+    const selector = "story-loaded-".concat(index);
+    if (!mainContent.classList.contains(selector)) {
+      const header = mainContent.previousElementSibling;
+      const sideNav = mainContent.querySelector("syn-side-nav");
+      header.connectSideNavigation(sideNav);
+      mainContent.classList.add(selector);
+    }
+  });
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-default")).forEach((nav) => {
+    nav.addEventListener("click", (e) => {
+      const target = e.target.closest("syn-nav-item");
+
+      if (!target) {
+        return;
+      }
+
+      // Update the current indicator
+      nav.querySelectorAll("syn-nav-item").forEach((item) => {
+        item.removeAttribute("current");
+        if (item === target) {
+          item.setAttribute("current", "");
+        }
+      });
+    });
+  });
+</script>
+```
+
+---
+
+## Rail
+
+Set the variant attribute to rail to only show a small navigation stripe at the left side using only the prefix-icons of the navigation items. This will open on hover on the rail navigation, therefore the header doesn't have an burger-menu-icon.On touch devices the navigation opens on click and shows an overlay to be closable.Note: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation.
+
+```html
+<syn-header class="header-rail" label="Side Navigation"></syn-header>
+<main class="main-rail">
+  <syn-side-nav class="side-nav-rail" variant="rail">
+    <syn-nav-item current="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+  </syn-side-nav>
+  <div class="content-rail">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet.
+  </div>
+</main>
+<script type="module">
+  // Only needed to have correct behavior in our documentation "Docs" page
+  const header =
+    document.querySelector("#storybook-docs .header-rail") ||
+    document.querySelector(".header-rail");
+  const sideNav =
+    document.querySelector("#storybook-docs .side-nav-rail") ||
+    document.querySelector(".side-nav-rail");
+  if (sideNav && header) {
+    header.connectSideNavigation(sideNav);
+  }
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-rail")).forEach((nav) => {
+    nav.addEventListener("click", (e) => {
+      const target = e.target.closest("syn-nav-item");
+
+      if (!target) {
+        return;
+      }
+
+      // Update the current indicator
+      nav.querySelectorAll("syn-nav-item").forEach((item) => {
+        item.removeAttribute("current");
+        if (item === target) {
+          item.setAttribute("current", "");
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .main-rail {
+    position: relative;
+    height: 500px;
+    display: flex;
+    overflow: hidden;
+    background-color: var(--syn-color-neutral-200);
+  }
+
+  .content-rail {
+    padding: var(--syn-spacing-large);
+    margin: var(--syn-spacing-large);
+    border-radius: var(--syn-border-radius-medium);
+    background-color: var(--syn-color-neutral-0);
+    overflow-y: auto;
+  }
+</style>
+```
+
+---
+
+## Sticky
+
+Use the sticky variant when you need a persistent, toggleable side navigation that alternates between a compact “rail” (icon‐only) state and a full‐width state. Note: This pattern is only possible for flat navigation structures (no nesting) where every first‐level item has an icon.
+
+```html
+<syn-header class="header-sticky" label="Side Navigation"></syn-header>
+<main class="main-sticky">
+  <syn-side-nav class="side-nav-sticky" variant="sticky">
+    <syn-nav-item current="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+  </syn-side-nav>
+  <div class="content-sticky">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet.
+  </div>
+</main>
+<script type="module">
+  // Only needed to have correct behavior in our documentation "Docs" page
+  const header =
+    document.querySelector("#storybook-docs .header-sticky") ||
+    document.querySelector(".header-sticky");
+  const sideNav =
+    document.querySelector("#storybook-docs .side-nav-sticky") ||
+    document.querySelector(".side-nav-sticky");
+  if (sideNav && header) {
+    header.connectSideNavigation(sideNav);
+  }
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-sticky")).forEach((nav) => {
+    nav.addEventListener("click", (e) => {
+      const target = e.target.closest("syn-nav-item");
+
+      if (!target) {
+        return;
+      }
+
+      // Update the current indicator
+      nav.querySelectorAll("syn-nav-item").forEach((item) => {
+        item.removeAttribute("current");
+        if (item === target) {
+          item.setAttribute("current", "");
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .main-sticky {
+    position: relative;
+    height: 500px;
+    display: flex;
+    overflow: hidden;
+    background-color: var(--syn-color-neutral-200);
+  }
+
+  .content-sticky {
+    padding: var(--syn-spacing-large);
+    margin: var(--syn-spacing-large);
+    border-radius: var(--syn-border-radius-medium);
+    background-color: var(--syn-color-neutral-0);
+    overflow-y: auto;
+  }
+</style>
+```
+
+---
+
+## Footer
+
+The Side navigation can have an optional bottom navigation "slot" to split up the navigation entries.Please avoid having to many navigation entries (at the bottom) as it can massively influence the user experience.
+
+```html
+<syn-header class="header-footer" label="Side Navigation"></syn-header>
+<main class="main-footer">
+  <syn-side-nav class="side-nav-footer" open="">
+    <syn-nav-item current="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+
+    <syn-nav-item slot="footer">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Footer Item
+    </syn-nav-item>
+    <syn-nav-item divider="" slot="footer">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Footer Item
+    </syn-nav-item>
+  </syn-side-nav>
+</main>
+<script type="module">
+  // Only needed to have correct behavior in our documentation "Docs" page
+  const header =
+    document.querySelector("#storybook-docs .header-footer") ||
+    document.querySelector(".header-footer");
+  const sideNav =
+    document.querySelector("#storybook-docs .side-nav-footer") ||
+    document.querySelector(".side-nav-footer");
+  if (sideNav && header) {
+    header.connectSideNavigation(sideNav);
+  }
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-footer")).forEach((nav) => {
+    nav.addEventListener("click", (e) => {
+      const target = e.target.closest("syn-nav-item");
+
+      if (!target) {
+        return;
+      }
+
+      // Update the current indicator
+      nav.querySelectorAll("syn-nav-item").forEach((item) => {
+        item.removeAttribute("current");
+        if (item === target) {
+          item.setAttribute("current", "");
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .main-footer {
+    position: relative;
+    height: 500px;
+    background-color: var(--syn-color-neutral-200);
+  }
+</style>
+```
+
+---
+
+## Fixed
+
+Per default, the side navigation shows an overlay. This should always be the case, if the content of the app is not shrinking. This makes especially sense for applications, where you navigate to a place and stay there for a longer time.
+
+```html
+<div class="container-fixed">
+  <syn-header class="header-fixed" label="Side Navigation"></syn-header>
+  <main class="main-fixed">
+    <syn-side-nav class="side-nav-fixed" open="">
+      <syn-nav-item current="">
+        <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+        Navigation Item
+      </syn-nav-item>
+      <syn-nav-item divider="">
+        <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+        Navigation Item
+      </syn-nav-item>
+      <syn-nav-item divider="">
+        <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+        Navigation Item
+      </syn-nav-item>
+      <syn-nav-item divider="">
+        <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+        Navigation Item
+      </syn-nav-item>
+      <syn-nav-item divider="">
+        <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+        Navigation Item
+      </syn-nav-item>
+    </syn-side-nav>
+    <div class="content-fixed">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </div>
+  </main>
+</div>
+<script type="module">
+  // Only needed to have correct behavior in our documentation "Docs" page
+  const header =
+    document.querySelector("#storybook-docs .header-fixed") ||
+    document.querySelector(".header-fixed");
+  const sideNav =
+    document.querySelector("#storybook-docs .side-nav-fixed") ||
+    document.querySelector(".side-nav-fixed");
+  if (sideNav && header) {
+    header.connectSideNavigation(sideNav);
+  }
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-fixed")).forEach((nav) => {
+    nav.addEventListener("click", (e) => {
+      const target = e.target.closest("syn-nav-item");
+
+      if (!target) {
+        return;
+      }
+
+      // Update the current indicator
+      nav.querySelectorAll("syn-nav-item").forEach((item) => {
+        item.removeAttribute("current");
+        if (item === target) {
+          item.setAttribute("current", "");
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .container-fixed {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-fixed {
+    position: relative;
+    height: 500px;
+    background-color: var(--syn-color-neutral-200);
+  }
+
+  .content-fixed {
+    padding: var(--syn-spacing-large);
+    margin: var(--syn-spacing-large);
+    border-radius: var(--syn-border-radius-medium);
+    background-color: var(--syn-color-neutral-0);
+  }
+</style>
+```
+
+---
+
+## Shrink
+
+For specific cases it might make sense to have the navigation open while still being able to interact with the app. This especially makes sense for cases where you switch a lot between areas to interact with an app.You can decide yourself depending on your app and screen size, when it makes sense to omit the overlay and shrink the content.This should never be used in combination with a Rail navigation, as this would lead to too much friction on hover.
+
+```html
+<syn-header class="header-shrink" label="Side Navigation"></syn-header>
+<main class="main-shrink">
+  <syn-side-nav open="" class="side-nav-shrink" no-focus-trapping="">
+    <syn-nav-item current="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+  </syn-side-nav>
+  <div class="content-shrink">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet.
+  </div>
+</main>
+<script type="module">
+  // Only needed to have correct behavior in our documentation "Docs" page
+  const header =
+    document.querySelector("#storybook-docs .header-shrink") ||
+    document.querySelector(".header-shrink");
+  const sideNav =
+    document.querySelector("#storybook-docs .side-nav-shrink") ||
+    document.querySelector(".side-nav-shrink");
+  if (sideNav && header) {
+    header.connectSideNavigation(sideNav);
+  }
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-shrink")).forEach((nav) => {
+    nav.addEventListener("click", (e) => {
+      const target = e.target.closest("syn-nav-item");
+
+      if (!target) {
+        return;
+      }
+
+      // Update the current indicator
+      nav.querySelectorAll("syn-nav-item").forEach((item) => {
+        item.removeAttribute("current");
+        if (item === target) {
+          item.setAttribute("current", "");
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .main-shrink {
+    position: relative;
+    height: 500px;
+    display: flex;
+    overflow: hidden;
+    background-color: var(--syn-color-neutral-200);
+  }
+
+  .side-nav-shrink::part(overlay) {
+    display: none;
+  }
+
+  .content-shrink {
+    padding: var(--syn-spacing-large);
+    margin: var(--syn-spacing-large);
+    border-radius: var(--syn-border-radius-medium);
+    background-color: var(--syn-color-neutral-0);
+    overflow-y: auto;
+  }
+</style>
+```
+
+---
+
+## Indentation
+
+The different levels of navigation can be organized using the indention. The current status of a page shows the user directly which page they are browsing.
+
+```html
+<syn-header class="header-indentation" label="Side Navigation"></syn-header>
+<main class="main-indentation">
+  <syn-side-nav class="side-nav-indentation" open="">
+    <syn-nav-item open="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+      <!-- second-level -->
+      <syn-nav-item slot="children" open="">
+        <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+        Navigation Item
+        <!-- third-level -->
+        <syn-nav-item slot="children" current="">
+          <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+          Navigation Item
+        </syn-nav-item>
+        <!-- /third-level -->
+      </syn-nav-item>
+      <!-- /second-level -->
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+    <syn-nav-item divider="">
+      <syn-icon name="wallpaper" slot="prefix"></syn-icon>
+      Navigation Item
+    </syn-nav-item>
+  </syn-side-nav>
+</main>
+<script type="module">
+  // Only needed to have correct behavior in our documentation "Docs" page
+  const header =
+    document.querySelector("#storybook-docs .header-indentation") ||
+    document.querySelector(".header-indentation");
+  const sideNav =
+    document.querySelector("#storybook-docs .side-nav-indentation") ||
+    document.querySelector(".side-nav-indentation");
+  if (sideNav && header) {
+    header.connectSideNavigation(sideNav);
+  }
+</script>
+
+<script type="module">
+  // This emulates a click on the side-nav and updates the main content
+  // This will usually be provided by the application itself, e.g. via
+  // built in routing functions like angular-router, react-router or vue-router
+  Array.from(document.querySelectorAll(".side-nav-indentation")).forEach(
+    (nav) => {
+      nav.addEventListener("click", (e) => {
+        const target = e.target.closest("syn-nav-item");
+
+        if (!target) {
+          return;
+        }
+
+        // Update the current indicator
+        nav.querySelectorAll("syn-nav-item").forEach((item) => {
+          item.removeAttribute("current");
+          if (item === target) {
+            item.setAttribute("current", "");
+          }
+        });
+      });
+    },
+  );
+</script>
+
+<style>
+  .main-indentation {
+    position: relative;
+    height: 500px;
+    background-color: var(--syn-color-neutral-200);
+  }
+</style>
+```

package/data/layers/examples/component/component:syn-spinner.md

@@ -0,0 +1,45 @@
+## Default
+
+Spinners are used to show the progress of an indeterminate operation.
+
+```html
+<syn-spinner></syn-spinner>
+```
+
+---
+
+## Size
+
+Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.
+
+```html
+<div
+  style="align-items: baseline; display: flex; gap: var(--syn-spacing-large)"
+>
+  <syn-spinner style="font-size: var(--syn-font-size-medium)"></syn-spinner>
+  <syn-spinner style="font-size: var(--syn-font-size-2x-large)"></syn-spinner>
+  <syn-spinner style="font-size: 40px"></syn-spinner>
+</div>
+```
+
+---
+
+## Track Width
+
+The width of the spinner’s track can be changed by setting the --track-width custom property.
+
+```html
+<syn-spinner style="font-size: 48px; --track-width: 8px"></syn-spinner>
+```
+
+---
+
+## Color
+
+The spinner’s colors can be changed by setting the --indicator-color and --track-color custom properties.
+
+```html
+<syn-spinner
+  style="font-size: 48px; --indicator-color: var(--syn-color-error-600)"
+></syn-spinner>
+```