@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,156 +0,0 @@
-## 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

@@ -1,127 +0,0 @@
-## 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" style="width: 200px">
-  <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" style="width: 200px">
-  <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" style="width: 200px">
-  <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" style="width: 200px">
-  <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 Bottom
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
-
----
-
-## Scrolling Behavior
-
-If the table contains a scrolling behavior the table cell gets a shadow.
-
-```html
-<table class="syn-table" style="width: 400px">
-  <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>
-```

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

@@ -1,201 +0,0 @@
-## Default
-
-It is possible to achieve different table stylings (default, with border, alternating, ...)
-either via multiple classes on the table, td and th elements or as a convenient alternative
-as auto styling class, which is applied on a table element. These auto styling classes will
-style the td and th elements correctly, without the need to apply further classes.
-Note: The auto styling table classes work for simple table layouts. For more complex ones or advanced use cases, the table cell classes should be used.
-
-```html
-<table class="syn-table--default">
-  <thead>
-    <tr>
-      <th>Header content</th>
-      <th>Header content</th>
-      <th>Header content</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-  </tbody>
-</table>
-```
-
----
-
-## Atomic Table
-
-Create table styles using multiple classes attached to table, td and th elements.
-
-```html
-<table class="syn-table">
-  <thead>
-    <tr>
-      <th class="syn-table-cell--header">Header content</th>
-      <th class="syn-table-cell--header">Header content</th>
-      <th class="syn-table-cell--header">Header content</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-    </tr>
-    <tr>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-    </tr>
-    <tr>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-    </tr>
-    <tr>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-      <td class="syn-table-cell">Cell content</td>
-    </tr>
-  </tbody>
-</table>
-```
-
----
-
-## Auto Default Table
-
-Use default table style with the auto styling class syn-table--default.
-
-```html
-<table class="syn-table--default">
-  <thead>
-    <tr>
-      <th>Header content</th>
-      <th>Header content</th>
-      <th>Header content</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-  </tbody>
-</table>
-```
-
----
-
-## Auto Alternating Table
-
-Use alternating table style with the auto styling class syn-table--alternating.
-
-```html
-<table class="syn-table--alternating">
-  <thead>
-    <tr>
-      <th>Header content</th>
-      <th>Header content</th>
-      <th>Header content</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-  </tbody>
-</table>
-```
-
----
-
-## Auto Border Table
-
-Use border table style with the auto styling class syn-table--border.
-
-```html
-<table class="syn-table--border">
-  <thead>
-    <tr>
-      <th>Header content</th>
-      <th>Header content</th>
-      <th>Header content</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-    <tr>
-      <td>Cell content</td>
-      <td>Cell content</td>
-      <td>Cell content</td>
-    </tr>
-  </tbody>
-</table>
-```

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

@@ -1,5 +0,0 @@
-## Default
-
-```html
-<span class="syn-weight--normal"> This is a default body text </span>
-```