@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/packages/assets/README.md

@@ -0,0 +1,78 @@
+# @synergy-design-system/assets
+
+This package provides assets like:
+
+- **logos:** a collection of various logos (such as the variants of the SICK brand logo)
+- **icons:** the standard icons based on [Material Icons](https://fonts.google.com/icons)
+- **system-icons:** a small subset of icons, that are internally used by the Synergy components
+
+The source of the assets can be found at [Figma](https://www.figma.com/file/bZFqk9urD3NlghGUKrkKCR/Synergy-Digital-Design-System?type=design&node-id=104-233&mode=design&t=GPu4VVd9yffLLAaS-0)
+
+### Installation
+
+Please make sure to install the assets package as a dependency:
+
+```bash
+npm install --save @synergy-design-system/assets
+```
+
+### Usage
+
+All assets are provided as svg's.
+
+The recommended way of using the icons is using the [<syn-icon> Synergy component](https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs). Here you will also get more information about how setting up the assets package on bundlers like vite.
+
+```html
+<syn-icon name="warning"></syn-icon>
+```
+
+But the assets could also be used like following:
+
+```html
+<img src="assets/icons/warning.svg" />
+```
+
+---
+
+## Development
+
+This package is taking care about getting assets (like logos, system icons and default icons) from Figma.
+The folder structure of the assets corresponds to the structure of the Figma page.
+
+- **src/component-thumbnails** contains thumbnails from figma components used in Storybook
+- **src/icons:** contains the standard icons based on [Material Icons](https://fonts.google.com/icons)
+- **src/logos:** contains the variants of the SICK brand logo
+- **src/system-icons:** contains a small subset of icons, that are internally used by the Synergy components
+
+> **Note:** All assets from figma, which should not appear in this package (e.g. documentation), will start with an underscore (e.g. \_my-doc-for-an-asset). This assets are getting filtered and ignored by this package.
+
+### Setup
+
+To update the assets from Figma, first of all a personal access token in Figma needs to be created.
+The documentation how this can be achieved can be found [here](https://www.figma.com/developers/api#access-tokens).
+The only needed scope is "File content" set to readonly.
+
+After the creation of the personal access token, it needs to be saved in a **_.env_** file with the variable **_"FIGMA_TOKEN"_**.
+It should look like following:
+
+```bash
+FIGMA_TOKEN = "my-personal-access-token"
+```
+
+### Update assets from Figma
+
+If something in the Figma assets got changed, the assets of this package also needs to be updated.
+To update the assets run following in the terminal of the assets package folder:
+
+```bash
+pnpm build:all
+```
+
+This will:
+
+- Clean up the `src` directory
+- download all icons from figma
+- download all thumbnails for docs
+- Recreate all default icons
+- Recreate the license files in the different folders
+- Create [code connect files](https://www.figma.com/code-connect-docs/html) for all icons. Please be aware you have to call `pnpm figma-export:icons` in the components package to publish the icons!

package/metadata/packages/components/components/syn-accordion/component.angular.ts

@@ -0,0 +1,80 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynAccordion } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/accordion/accordion.js';
+
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+@Component({
+  selector: 'syn-accordion',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynAccordionComponent {
+  public nativeElement: SynAccordion;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
+   */
+  @Input()
+  set closeOthers(v: '' | SynAccordion['closeOthers']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.closeOthers = v === '' || v),
+    );
+  }
+  get closeOthers(): SynAccordion['closeOthers'] {
+    return this.nativeElement.closeOthers;
+  }
+
+  /**
+   * Draws the accordion and the slotted `<syn-details>` as contained elements.
+   */
+  @Input()
+  set contained(v: '' | SynAccordion['contained']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.contained = v === '' || v),
+    );
+  }
+  get contained(): SynAccordion['contained'] {
+    return this.nativeElement.contained;
+  }
+
+  /**
+   * The size that should be applied to all slotted `<syn-details>` elements
+   */
+  @Input()
+  set size(v: SynAccordion['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynAccordion['size'] {
+    return this.nativeElement.size;
+  }
+}

package/metadata/packages/components/components/syn-accordion/component.react.ts

@@ -0,0 +1,30 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/accordion/accordion.component.js';
+
+const tagName = 'syn-accordion';
+Component.define('syn-accordion');
+
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export const SynAccordion = createComponent({
+  displayName: 'SynAccordion',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/metadata/packages/components/components/syn-accordion/component.styles.ts

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .accordion--contained ::slotted(syn-details) {
+    margin-bottom: var(--syn-spacing-x-small);
+  }
+
+  .accordion--contained ::slotted(syn-details:last-of-type){
+    margin-bottom: 0;
+  }
+`;

package/metadata/packages/components/components/syn-accordion/component.ts

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import type { CSSResultGroup } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import styles from './accordion.styles.js';
+import type SynDetails from '../details/details.component.js';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
+
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+@enableDefaultSettings('SynAccordion')
+export default class SynAccordion extends SynergyElement {
+  static styles: CSSResultGroup = [
+    componentStyles,
+    styles,
+  ];
+
+  @queryAssignedElements({ selector: 'syn-details' }) detailsInDefaultSlot!: SynDetails[];
+
+  /**
+   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
+   */
+  @property({ attribute: 'close-others', type: Boolean }) closeOthers = false;
+
+  /** Draws the accordion and the slotted `<syn-details>` as contained elements. */
+  @property({ reflect: true, type: Boolean }) contained = false;
+
+  /** The size that should be applied to all slotted `<syn-details>` elements */
+  @property({ reflect: true }) size: 'medium' | 'large' = 'medium';
+
+  private adjustDetailsSize() {
+    this.detailsInDefaultSlot.forEach(detail => {
+      detail.setAttribute('size', this.size);
+    });
+  }
+
+  private adjustDetailsContained() {
+    this.detailsInDefaultSlot.forEach(detail => {
+      // eslint-disable-next-line no-param-reassign
+      detail.contained = this.contained;
+    });
+  }
+
+  @watch('size', { waitUntilFirstUpdate: true })
+  handleSizeChange() {
+    this.adjustDetailsSize();
+  }
+
+  @watch('contained', { waitUntilFirstUpdate: true })
+  handleContainedChange() {
+    this.adjustDetailsContained();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('syn-show', this.handleAccordionShow);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('syn-show', this.handleAccordionShow);
+  }
+
+  handleSlotChange() {
+    this.adjustDetailsSize();
+    this.adjustDetailsContained();
+  }
+
+  private handleAccordionShow = (event: Event) => {
+    if (this.closeOthers) {
+      this.detailsInDefaultSlot.forEach(detailsElement => {
+        // Break if detailsElement sent the event
+        if (detailsElement === event.target) {
+          return;
+        }
+        // Break if detailsElement is outside this group
+        if (detailsElement.parentNode !== (event.target as HTMLUnknownElement).parentNode) {
+          return;
+        }
+        detailsElement.removeAttribute('open');
+      });
+    }
+  };
+
+  render() {
+    /* eslint-disable @typescript-eslint/unbound-method */
+    return html`
+      <div 
+        part="base"
+        class=${classMap({
+          accordion: true,
+          'accordion--contained': this.contained,
+        })}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    /* eslint-enable @typescript-eslint/unbound-method */
+  }
+}

package/metadata/packages/components/components/syn-accordion/component.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/accordion/accordion.js';
+
+import type { SynAccordion } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynAccordion>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
+   */
+  closeOthers?: SynAccordion['closeOthers'];
+
+  /**
+   * Draws the accordion and the slotted `<syn-details>` as contained elements.
+   */
+  contained?: SynAccordion['contained'];
+
+  /**
+   * The size that should be applied to all slotted `<syn-details>` elements
+   */
+  size?: SynAccordion['size'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+</script>
+
+<template>
+  <syn-accordion v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-accordion>
+</template>

package/metadata/packages/components/components/syn-alert/component.angular.ts

@@ -0,0 +1,158 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynAlert } from '@synergy-design-system/components';
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/alert/alert.js';
+
+/**
+ * @summary Alerts are used to display important messages inline or as toast notifications.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The alert's main content.
+ * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the alert opens.
+ * @event syn-after-show - Emitted after the alert opens and all animations are complete.
+ * @event syn-hide - Emitted when the alert closes.
+ * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The container that wraps the optional icon.
+ * @csspart message - The container that wraps the alert's main content.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @animation alert.show - The animation to use when showing the alert.
+ * @animation alert.hide - The animation to use when hiding the alert.
+ */
+@Component({
+  selector: 'syn-alert',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynAlertComponent {
+  public nativeElement: SynAlert;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener('syn-show', (e: SynShowEvent) => {
+      this.synShowEvent.emit(e);
+    });
+    this.nativeElement.addEventListener(
+      'syn-after-show',
+      (e: SynAfterShowEvent) => {
+        this.synAfterShowEvent.emit(e);
+      },
+    );
+    this.nativeElement.addEventListener('syn-hide', (e: SynHideEvent) => {
+      this.synHideEvent.emit(e);
+    });
+    this.nativeElement.addEventListener(
+      'syn-after-hide',
+      (e: SynAfterHideEvent) => {
+        this.synAfterHideEvent.emit(e);
+      },
+    );
+  }
+
+  /**
+* Indicates whether or not the alert is open.
+* You can toggle this attribute to show and hide the alert, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
+ */
+  @Input()
+  set open(v: '' | SynAlert['open']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.open = v === '' || v),
+    );
+  }
+  get open(): SynAlert['open'] {
+    return this.nativeElement.open;
+  }
+
+  /**
+   * Enables a close button that allows the user to dismiss the alert.
+   */
+  @Input()
+  set closable(v: '' | SynAlert['closable']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.closable = v === '' || v),
+    );
+  }
+  get closable(): SynAlert['closable'] {
+    return this.nativeElement.closable;
+  }
+
+  /**
+   * The alert's theme variant.
+   */
+  @Input()
+  set variant(v: SynAlert['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynAlert['variant'] {
+    return this.nativeElement.variant;
+  }
+
+  /**
+* The length of time, in milliseconds, the alert will show before closing itself.
+* If the user interacts with
+the alert before it closes (e.g.
+* moves the mouse over it), the timer will restart.
+* Defaults to `Infinity`, meaning
+the alert will not close on its own.
+ */
+  @Input()
+  set duration(v: SynAlert['duration']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.duration = v));
+  }
+  get duration(): SynAlert['duration'] {
+    return this.nativeElement.duration;
+  }
+
+  /**
+   * Emitted when the alert opens.
+   */
+  @Output() synShowEvent = new EventEmitter<SynShowEvent>();
+
+  /**
+   * Emitted after the alert opens and all animations are complete.
+   */
+  @Output() synAfterShowEvent = new EventEmitter<SynAfterShowEvent>();
+
+  /**
+   * Emitted when the alert closes.
+   */
+  @Output() synHideEvent = new EventEmitter<SynHideEvent>();
+
+  /**
+   * Emitted after the alert closes and all animations are complete.
+   */
+  @Output() synAfterHideEvent = new EventEmitter<SynAfterHideEvent>();
+}
+
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-alert/component.custom.styles.ts

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+
+export default css`
+  .alert {
+    /* Defines the used border and icon color for variants */
+    --variant-accent-color: var(--syn-panel-border-color);
+
+    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);
+    border-left: 0;
+    border-radius: var(--syn-border-radius-none);
+    color: var(--syn-typography-color-text);
+    font-size: var(--syn-font-size-medium);
+    line-height: var(--syn-line-height-normal);
+    min-height: 56px;
+  }
+
+  /**
+   * Add back the items left borders
+   * This is done to prevent border clipping with the large border-left needed on .alert
+   * Note we also need to adjust our paddings to add the border width here
+   */
+  .alert::before {
+    background: var(--variant-accent-color);
+    bottom: -1px;
+    content: "";
+    left: 0;
+    position: absolute;
+    top: -1px;
+    width: var(--syn-spacing-2x-small);
+  }
+
+  .alert :first-child {
+    margin-inline-start: var(--syn-spacing-2x-small);
+  }
+
+  /**
+   * Make sure everything is aligned to top
+   */
+  .alert__icon,
+  .alert__close-button {
+    align-items: flex-start;
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  .alert__message {
+    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-medium) var(--syn-spacing-medium);
+  }
+
+  /**
+   * Alert Icon
+   */
+  .alert__icon {
+    color: var(--variant-accent-color);
+    padding-block: var(--syn-spacing-medium);
+    padding-inline-start: var(--syn-spacing-medium);
+  }
+
+  /**
+   * Close Icon
+   */
+  .alert__close-button {
+    align-self: start;
+    color: var(--syn-typography-color-text);
+    margin-block: calc(var(--syn-spacing-x-small) - var(--syn-panel-border-width));
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  /**
+   * Variants should highlight the left border instead of top
+   */
+  .alert--primary {
+    --variant-accent-color: var(--syn-color-primary-600);
+  }
+
+  .alert--success {
+    --variant-accent-color: var(--syn-color-success-500);
+  }
+
+  .alert--neutral {
+    --variant-accent-color: var(--syn-color-neutral-800);
+  }
+
+  .alert--warning {
+    --variant-accent-color: var(--syn-color-warning-400);
+  }
+
+  .alert--danger {
+    --variant-accent-color: var(--syn-color-error-600);
+  }
+`;

package/metadata/packages/components/components/syn-alert/component.react.ts

@@ -0,0 +1,60 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/alert/alert.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-alert';
+Component.define('syn-alert');
+
+/**
+ * @summary Alerts are used to display important messages inline or as toast notifications.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The alert's main content.
+ * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the alert opens.
+ * @event syn-after-show - Emitted after the alert opens and all animations are complete.
+ * @event syn-hide - Emitted when the alert closes.
+ * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The container that wraps the optional icon.
+ * @csspart message - The container that wraps the alert's main content.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @animation alert.show - The animation to use when showing the alert.
+ * @animation alert.hide - The animation to use when hiding the alert.
+ */
+export const SynAlert = createComponent({
+  displayName: 'SynAlert',
+  elementClass: Component,
+  events: {
+    onSynShow: 'syn-show' as EventName<SynShowEvent>,
+    onSynAfterShow: 'syn-after-show' as EventName<SynAfterShowEvent>,
+    onSynHide: 'syn-hide' as EventName<SynHideEvent>,
+    onSynAfterHide: 'syn-after-hide' as EventName<SynAfterHideEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';