@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/static/styles/syn-link-list.md

@@ -0,0 +1,325 @@
+## Default
+
+```html
+<ul class="syn-link-list syn-link-list--medium">
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+</ul>
+```
+
+---
+
+## Horizontal
+
+Use the horizontal attribute to indicate that it is used as a horizontal link list.
+
+```html
+<ul class="syn-link-list syn-link-list--horizontal">
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+</ul>
+```
+
+---
+
+## Multiline
+
+The horizontal link list automatically wraps into a new line if there is not enough space available.
+
+```html
+<ul class="syn-link-list syn-link-list--horizontal" style="width: 480px">
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+  <li>
+    <a href="javascript:void()" class="syn-link syn-link--medium">
+      <syn-icon
+        name="keyboard_arrow_right"
+        aria-hidden="true"
+        library="default"
+      ></syn-icon>
+      Link
+    </a>
+  </li>
+</ul>
+```
+
+---
+
+## Size
+
+Use the size attribute to change the link list size.
+
+```html
+<div style="display: flex; flex-direction: column; gap: 24px">
+  <ul class="syn-link-list syn-link-list--small syn-link-list--horizontal">
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--small">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--small">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--small">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--small">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+  </ul>
+  <ul class="syn-link-list syn-link-list--medium syn-link-list--horizontal">
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--medium">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--medium">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--medium">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--medium">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+  </ul>
+  <ul class="syn-link-list syn-link-list--large syn-link-list--horizontal">
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--large">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--large">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--large">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+    <li>
+      <a href="javascript:void()" class="syn-link syn-link--large">
+        <syn-icon
+          name="keyboard_arrow_right"
+          aria-hidden="true"
+          library="default"
+        ></syn-icon>
+        Link
+      </a>
+    </li>
+  </ul>
+</div>
+```

package/metadata/static/styles/syn-link.md

@@ -0,0 +1,156 @@
+## Default
+
+```html
+<a class="syn-link syn-link--medium" href="javascript:void(0)"> Link label </a>
+```
+
+---
+
+## Inline
+
+If a link is placed within body text, it only breaks if variant without icon is used. If an icon is needed, a line break applies, and the body text is placed above and below the link.
+
+```html
+<p style="width: 266px">
+  This is some random text that contains
+  <a href="javascript:void(0)" class="syn-link"
+    >a link that spans over several lines</a
+  >
+  to imply how it works in real life.
+</p>
+```
+
+---
+
+## Prefix Suffix Icons
+
+Use the prefix and suffix slots to add icons.
+
+```html
+<nav class="storybook-demo-syn-link">
+  <a href="javascript:void(0)" class="syn-link syn-link--medium">
+    Open link in new window
+    <syn-icon
+      name="arrow_outward"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+  </a>
+  <a href="javascript:void(0)" class="syn-link syn-link--medium">
+    <syn-icon
+      name="picture_as_pdf"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Download PDF
+  </a>
+  <a href="javascript:void(0)" class="syn-link syn-link--medium">
+    <syn-icon
+      name="picture_as_pdf"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Open PDF in new window
+    <syn-icon
+      name="arrow_outward"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+  </a>
+</nav>
+<style>
+  .storybook-demo-syn-link {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-large);
+  }
+</style>
+```
+
+---
+
+## Quiet
+
+Use the Quiet attribute to have a low emphasis variant of a Link. This can be used if the link should not attract too much attention.
+
+```html
+<a href="javascript:void(0)" class="syn-link syn-link--quiet">
+  <syn-icon
+    name="keyboard_arrow_right"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Silence is gold
+</a>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable a Link.
+
+```html
+<a class="syn-link syn-link--disabled">
+  <syn-icon
+    name="keyboard_arrow_right"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Disabled
+</a>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the Link has been focused by the keyboard interaction.
+
+```html
+<div style="padding: 5px">
+  <a href="javascript:void(0)" class="syn-link syn-link--medium">
+    <syn-icon
+      name="keyboard_arrow_right"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Link
+  </a>
+</div>
+```
+
+---
+
+## Size
+
+Use the size attribute to change the Link size.
+
+```html
+<div style="display: flex; gap: var(--syn-spacing-large)">
+  <a href="javascript:void(0)" class="syn-link syn-link--small">
+    <syn-icon
+      name="keyboard_arrow_right"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Small
+  </a>
+  <a href="javascript:void(0)" class="syn-link syn-link--medium">
+    <syn-icon
+      name="keyboard_arrow_right"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Medium
+  </a>
+  <a href="javascript:void(0)" class="syn-link syn-link--large">
+    <syn-icon
+      name="keyboard_arrow_right"
+      aria-hidden="true"
+      library="default"
+    ></syn-icon>
+    Large
+  </a>
+</div>
+```

package/metadata/static/styles/syn-table-cell.md

@@ -0,0 +1,125 @@
+## Default
+
+The syn-table-cell component offers basic styling for table cells. A table can be created by combining several cell components into columns and rows. DEV: Instead of a component we have multiple classes, to apply the table styling. More complex tables, such as applying the shadow styling and adding scrolling behavior, require additional CSS and JavaScript Code. See the table templates for examples.
+
+```html
+<table class="syn-table">
+  <tbody>
+    <tr>
+      <td class="syn-table-cell sticky">Cell content</td>
+    </tr>
+  </tbody>
+</table>
+<style>
+  .sticky {
+    position: sticky;
+  }
+</style>
+```
+
+---
+
+## Header
+
+Use the cell header attribute to help the user identify the top of the table. Table header can be used as column header and row Header, but not at the same time.
+
+```html
+<table class="syn-table">
+  <thead>
+    <tr>
+      <th class="syn-table-cell--header">Cell header</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Alternating
+
+The alternating attribute helps the user to visually separate the rows, even when scrolling horizontally, and helps to compare the data.
+
+```html
+<table class="syn-table">
+  <tbody>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell syn-table-cell--alternating">Cell content</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell syn-table-cell--alternating">Cell content</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Border
+
+Use the border attribute to define different borders in a cell. Borders can also be combined.
+
+```html
+<table class="syn-table">
+  <tbody>
+    <tr>
+      <td class="syn-table-cell syn-table-cell--border-top">Border Top</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell syn-table-cell--border-start">Border Start</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell syn-table-cell--border-end">Border End</td>
+    </tr>
+    <tr>
+      <td class="syn-table-cell syn-table-cell--border-bottom">Border Left</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Scrolling Behavior
+
+If the table contains a scrolling behavior the table cell gets a shadow.
+
+```html
+<table class="syn-table">
+  <thead>
+    <tr>
+      <th
+        class="syn-table-cell--header syn-table-cell--shadow-bottom syn-table-cell--shadow-active sticky"
+      >
+        Cell header
+      </th>
+      <th
+        class="syn-table-cell--header syn-table-cell--shadow-bottom syn-table-cell--shadow-active sticky"
+      >
+        Cell header
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="syn-table-cell">Cell content</td>
+      <td class="syn-table-cell">Cell content</td>
+    </tr>
+  </tbody>
+</table>
+<style>
+  .sticky {
+    position: sticky;
+  }
+</style>
+```