@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/static/components/syn-button/docs.md

@@ -0,0 +1,402 @@
+## Default
+
+Buttons represent actions that are available to the user.
+
+```html
+<syn-button title="" variant="outline" size="medium"> Button </syn-button>
+```
+
+---
+
+## Variants
+
+Use the variant attribute to set the button’s variant. Variants can be Filled, Outline and Text Buttons. Use the outline attribute to draw outlined buttons with transparent backgrounds. Use the text variant to create text buttons that share the same size as regular buttons but don’t have backgrounds or borders.
+
+```html
+<syn-button variant="filled" title="" size="medium">Filled</syn-button>
+<syn-button variant="outline" title="" size="medium">Outline</syn-button>
+<syn-button variant="text" title="" size="medium">Text</syn-button>
+<style>
+  syn-button {
+    margin: 0.2rem;
+  }
+</style>
+```
+
+---
+
+## Sizes
+
+Use the size attribute to change a button’s size.
+
+```html
+<syn-button size="small" title="" variant="outline">Small</syn-button>
+<syn-button size="medium" title="" variant="outline">Medium</syn-button>
+<syn-button size="large" title="" variant="outline">Large</syn-button>
+<style>
+  syn-button {
+    margin: 0.2rem;
+  }
+</style>
+```
+
+---
+
+## Focus
+
+The focus event gives the user feedback that the Button has been focused by the keyboard interaction and that the button component is ready for use.
+
+```html
+<div style="padding: 5px">
+  <syn-button title="" variant="outline" size="medium">Default</syn-button>
+</div>
+```
+
+---
+
+## Link Buttons
+
+It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.
+
+```html
+<syn-button href="https://example.com/" title="" variant="outline" size="medium"
+  >Link</syn-button
+>
+<syn-button
+  href="https://example.com/"
+  target="_blank"
+  title=""
+  variant="outline"
+  size="medium"
+  >New Window</syn-button
+>
+<syn-button
+  href="/assets/images/wordmark.svg"
+  download="synergy.svg"
+  title=""
+  variant="outline"
+  size="medium"
+  >Download</syn-button
+>
+<syn-button
+  href="https://example.com/"
+  disabled=""
+  title=""
+  variant="outline"
+  size="medium"
+  >Disabled</syn-button
+>
+<style>
+  syn-button {
+    margin: 0.2rem;
+  }
+</style>
+```
+
+---
+
+## Setting A Custom Width
+
+As expected, buttons can be given a custom width by setting the width attribute. This is useful for making buttons span the full width of their container on smaller screens.
+
+```html
+<syn-button
+  size="small"
+  style="width: 100%; margin-bottom: 1rem"
+  title=""
+  variant="outline"
+  >Small</syn-button
+>
+<syn-button
+  size="medium"
+  style="width: 100%; margin-bottom: 1rem"
+  title=""
+  variant="outline"
+  >Medium</syn-button
+>
+<syn-button size="large" style="width: 100%" title="" variant="outline"
+  >Large</syn-button
+>
+```
+
+---
+
+## Icon Only
+
+Insert just a single icon to use the same button style.
+
+```html
+<syn-button size="small" variant="filled" title="">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<syn-button size="small" title="" variant="outline">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<syn-button size="small" variant="text" title="">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+
+<br />
+
+<syn-button size="medium" variant="filled" title="">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<syn-button size="medium" title="" variant="outline">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<syn-button size="medium" variant="text" title="">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+
+<br />
+
+<syn-button size="large" variant="filled" title="">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<syn-button size="large" title="" variant="outline">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<syn-button size="large" variant="text" title="">
+  <syn-icon
+    name="settings"
+    label="Settings"
+    role="img"
+    aria-label="Settings"
+    library="default"
+  ></syn-icon>
+</syn-button>
+<style>
+  syn-button {
+    margin: 10px 10px 0 0;
+  }
+</style>
+```
+
+---
+
+## Prefix And Suffix Icons
+
+Use the prefix and suffix slots to add icons.
+
+```html
+<syn-button size="small" title="" variant="outline">
+  <syn-icon
+    slot="prefix"
+    name="settings"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Settings
+</syn-button>
+
+<syn-button size="small" title="" variant="outline">
+  <syn-icon
+    slot="suffix"
+    name="refresh"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Refresh
+</syn-button>
+
+<syn-button size="small" title="" variant="outline">
+  <syn-icon
+    slot="prefix"
+    name="link"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  <syn-icon
+    slot="suffix"
+    name="launch"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Open
+</syn-button>
+
+<br /><br />
+
+<syn-button title="" variant="outline" size="medium">
+  <syn-icon
+    slot="prefix"
+    name="settings"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Settings
+</syn-button>
+
+<syn-button title="" variant="outline" size="medium">
+  <syn-icon
+    slot="suffix"
+    name="refresh"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Refresh
+</syn-button>
+
+<syn-button title="" variant="outline" size="medium">
+  <syn-icon
+    slot="prefix"
+    name="link"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  <syn-icon
+    slot="suffix"
+    name="launch"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Open
+</syn-button>
+
+<br /><br />
+
+<syn-button size="large" title="" variant="outline">
+  <syn-icon
+    slot="prefix"
+    name="settings"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Settings
+</syn-button>
+
+<syn-button size="large" title="" variant="outline">
+  <syn-icon
+    slot="suffix"
+    name="refresh"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Refresh
+</syn-button>
+
+<syn-button size="large" title="" variant="outline">
+  <syn-icon
+    slot="prefix"
+    name="link"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  <syn-icon
+    slot="suffix"
+    name="launch"
+    aria-hidden="true"
+    library="default"
+  ></syn-icon>
+  Open
+</syn-button>
+<style>
+  syn-button {
+    margin: 0.2rem;
+  }
+</style>
+```
+
+---
+
+## Caret
+
+Use the caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
+
+```html
+<syn-button size="small" caret="" title="" variant="outline">Small</syn-button>
+<syn-button size="medium" caret="" title="" variant="outline"
+  >Medium</syn-button
+>
+<syn-button size="large" caret="" title="" variant="outline">Large</syn-button>
+<style>
+  syn-button {
+    margin: 0.2rem;
+  }
+</style>
+```
+
+---
+
+## Loading
+
+Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
+
+```html
+<syn-button variant="filled" loading="" title="" size="medium"
+  >Filled</syn-button
+>
+<syn-button variant="outline" loading="" title="" size="medium"
+  >Outline</syn-button
+>
+<syn-button variant="text" loading="" title="" size="medium">Text</syn-button>
+<style>
+  syn-button {
+    margin: 0.2rem;
+  }
+</style>
+```
+
+---
+
+## Disabled
+
+Use the disabled attribute to disable a button.
+
+```html
+<syn-button variant="filled" disabled="" title="" size="medium"
+  >Filled</syn-button
+>
+<syn-button variant="outline" disabled="" title="" size="medium"
+  >Outline</syn-button
+>
+<syn-button variant="text" disabled="" title="" size="medium">Text</syn-button>
+```

package/metadata/static/components/syn-card/docs.md

@@ -0,0 +1,273 @@
+## Headline
+
+```html
+<syn-card>
+  <h3>Headline</h3>
+  This are some happy employees, but not just any employees. These are SICK
+  employees.
+
+  <span slot="footer"> </span>
+  <footer slot="footer">
+    <small>Optional information</small>
+    <nav>
+      <syn-button variant="filled" size="small" title="">More Info</syn-button>
+    </nav>
+  </footer>
+  <span slot="footer"> </span>
+  <style slot="footer">
+    syn-card {
+      max-width: 400px;
+    }
+
+    syn-card footer {
+      align-items: center;
+      color: var(--syn-color-neutral-800);
+      display: flex;
+      gap: var(--syn-spacing-x-small);
+    }
+
+    syn-card h3 {
+      font: var(--syn-body-medium-bold) !important;
+      margin: 0 0 var(--syn-spacing-x-small) !important;
+    }
+
+    syn-card small {
+      font: var(--syn-body-x-small-regular);
+    }
+
+    syn-card footer nav {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      gap: var(--syn-spacing-x-small);
+      justify-content: flex-end;
+    }
+  </style>
+  <span slot="footer"> </span>
+  <img
+    slot="image"
+    src="https://synergy-design-system.github.io/card-example.jpg"
+    alt="Multiple persons having lunch in SICK Academy"
+  />
+</syn-card>
+```
+
+---
+
+## Default
+
+Cards can be used to group related subjects in a container.
+
+```html
+<syn-card>
+  <h3>Headline</h3>
+  This are some happy employees, but not just any employees. These are SICK
+  employees.
+
+  <span slot="footer"> </span>
+  <footer slot="footer">
+    <small>Optional information</small>
+    <nav>
+      <syn-button variant="filled" size="small" title="">More Info</syn-button>
+    </nav>
+  </footer>
+  <span slot="footer"> </span>
+  <style slot="footer">
+    syn-card {
+      max-width: 400px;
+    }
+
+    syn-card footer {
+      align-items: center;
+      color: var(--syn-color-neutral-800);
+      display: flex;
+      gap: var(--syn-spacing-x-small);
+    }
+
+    syn-card h3 {
+      font: var(--syn-body-medium-bold) !important;
+      margin: 0 0 var(--syn-spacing-x-small) !important;
+    }
+
+    syn-card small {
+      font: var(--syn-body-x-small-regular);
+    }
+
+    syn-card footer nav {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      gap: var(--syn-spacing-x-small);
+      justify-content: flex-end;
+    }
+  </style>
+  <span slot="footer"> </span>
+  <img
+    slot="image"
+    src="https://synergy-design-system.github.io/card-example.jpg"
+    alt="Multiple persons having lunch in SICK Academy"
+  />
+</syn-card>
+```
+
+---
+
+## Basic Card
+
+Basic cards aren’t very exciting, but they can display any content you want them to.
+
+```html
+<syn-card class="card-basic">
+  This is just a basic card. No image, no header, and no footer. Just your
+  content.
+</syn-card>
+<style>
+  .card-basic {
+    max-width: 400px;
+  }
+</style>
+```
+
+---
+
+## Card With Header
+
+Headers can be used to display titles and more.
+
+```html
+<syn-card class="card-header">
+  <div slot="header">
+    Header Title
+    <syn-icon-button
+      color="neutral"
+      name="share"
+      label="Share"
+      size="inherit"
+    ></syn-icon-button>
+  </div>
+
+  This card has a header. You can put all sorts of things in it!
+</syn-card>
+
+<style>
+  .card-header {
+    max-width: 400px;
+  }
+
+  .card-header [slot="header"] {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .card-header h3 {
+    margin: 0;
+  }
+
+  .card-header syn-icon-button {
+    font-size: var(--syn-font-size-x-large);
+  }
+</style>
+```
+
+---
+
+## Card With Footer
+
+Footers can be used to display actions, summaries, or other relevant content.
+
+```html
+<syn-card class="card-footer">
+  This card has a footer. You can put all sorts of things in it!
+
+  <footer slot="footer">
+    <small>Optional information</small>
+    <nav>
+      <syn-button variant="filled" size="small" title="">Preview</syn-button>
+    </nav>
+  </footer>
+  <style>
+    syn-card {
+      max-width: 400px;
+    }
+
+    syn-card footer {
+      align-items: center;
+      color: var(--syn-color-neutral-800);
+      display: flex;
+      gap: var(--syn-spacing-x-small);
+    }
+
+    syn-card h3 {
+      font: var(--syn-body-medium-bold) !important;
+      margin: 0 0 var(--syn-spacing-x-small) !important;
+    }
+
+    syn-card small {
+      font: var(--syn-body-x-small-regular);
+    }
+
+    syn-card footer nav {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      gap: var(--syn-spacing-x-small);
+      justify-content: flex-end;
+    }
+  </style>
+</syn-card>
+
+<style>
+  .card-footer {
+    max-width: 400px;
+  }
+</style>
+```
+
+---
+
+## Images
+
+Cards accept an image slot. The image is displayed atop the card and stretches to fit.
+
+```html
+<syn-card class="card-image">
+  <img
+    slot="image"
+    src="https://synergy-design-system.github.io/card-example.jpg"
+    alt="Multiple persons having lunch in SICK Academy"
+  />
+  This are some happy employees, but not just any employees. These are SICK
+  employees.
+</syn-card>
+
+<style>
+  .card-image {
+    max-width: 400px;
+  }
+</style>
+```
+
+---
+
+## Sharp Card
+
+Use the sharp variant attribute for the Card to Use a different style.
+
+```html
+<syn-card class="sharp-card" sharp="">
+  <img
+    slot="image"
+    src="https://synergy-design-system.github.io/card-example.jpg"
+    alt="Multiple persons having lunch in SICK Academy"
+  />
+  This are some happy employees, but not just any employees. These are SICK
+  employees.
+</syn-card>
+
+<style>
+  .sharp-card {
+    max-width: 400px;
+  }
+</style>
+```