npm - @scania/tegel - Versions diffs - 0.0.5 → 0.0.6 - Mend

@scania/tegel 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1107) hide show

package/dist/collection/components/textfield/textfield.css CHANGED Viewed

@@ -125,12 +125,6 @@
   width: 100%;
 }
-/* slot[name="sdds-label"]::slotted(*) {
-  @include type-style("detail-05");
-  display: block;
-  margin-bottom: var(--sdds-spacing-element-8);
-  color: var(--sdds-textfield-label-color);
-} */
 .textfield-label-outside > * {
   font: var(--sdds-detail-05);
   letter-spacing: var(--sdds-detail-05-ls);
@@ -166,12 +160,6 @@
 .form-textfield.textfield-container-label-inside .textfield-input-lg::placeholder {
   color: transparent;
 }
-.form-textfield.textfield-container-label-inside .textfield-input-lg::input-placeholder {
-  color: transparent;
-}
-.form-textfield.textfield-container-label-inside .textfield-input-lg:placeholder {
-  color: transparent;
-}
 .form-textfield.textfield-container-label-inside .textfield-input-lg ::placeholder {
   color: transparent;
 }
@@ -189,12 +177,6 @@
 .form-textfield.textfield-container-label-inside .textfield-input-md::placeholder {
   color: transparent;
 }
-.form-textfield.textfield-container-label-inside .textfield-input-md::input-placeholder {
-  color: transparent;
-}
-.form-textfield.textfield-container-label-inside .textfield-input-md:placeholder {
-  color: transparent;
-}
 .form-textfield.textfield-container-label-inside .textfield-input-md ::placeholder {
   color: transparent;
 }
@@ -212,12 +194,6 @@
 .form-textfield.textfield-container-label-inside .textfield-input-sm::placeholder {
   color: transparent;
 }
-.form-textfield.textfield-container-label-inside .textfield-input-sm::input-placeholder {
-  color: transparent;
-}
-.form-textfield.textfield-container-label-inside .textfield-input-sm:placeholder {
-  color: transparent;
-}
 .form-textfield.textfield-container-label-inside .textfield-input-sm ::placeholder {
   color: transparent;
 }
@@ -345,10 +321,6 @@
 .form-textfield-error .textfield-bar::before, .form-textfield-error .textfield-bar::after {
   background: var(--sdds-textfield-bar-error);
 }
-.form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),
-.form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon) {
-  color: var(--sdds-textfield-icon-error);
-}
 .textfield-helper-error-state {
   display: flex;
@@ -366,53 +338,26 @@
   color: var(--sdds-textfield-textcounter-divider);
 }
-/* slot[name="sdds-prefix"]::slotted(*),
-slot[name="sdds-suffix"]::slotted(*) {
-  @include type-style("detail-02");
-  align-self: center;
-  color: var(--sdds-textfield-ps-color);
-} */
-.textfield-slot-wrap-prefix {
-  align-self: center;
-}
-.textfield-slot-wrap-prefix > * {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  margin-left: 16px;
-  color: var(--sdds-textfield-ps-color);
-}
-.textfield-slot-wrap-prefix.textfield-error sdds-icon,
-.textfield-slot-wrap-prefix.textfield-error .icon {
-  color: var(--sdds-negative);
-}
+.textfield-slot-wrap-prefix,
 .textfield-slot-wrap-suffix {
   align-self: center;
-}
-.textfield-slot-wrap-suffix > * {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  margin-right: 16px;
+  margin: 0 0 0 14px;
   color: var(--sdds-textfield-ps-color);
 }
-.textfield-slot-wrap-suffix.textfield-error sdds-icon,
-.textfield-slot-wrap-suffix.textfield-error .icon {
-  color: var(--sdds-negative);
+.textfield-slot-wrap-prefix::slotted(:not(sdds-icon)),
+.textfield-slot-wrap-suffix::slotted(:not(sdds-icon)) {
+  margin: 0 0 0 2px;
 }
-slot[name=sdds-prefix]::slotted(sdds-icon),
-slot[name=sdds-suffix]::slotted(sdds-icon) {
-  font-size: 24px;
-  line-height: 0;
+.textfield-slot-wrap-prefix.textfield-error,
+.textfield-slot-wrap-suffix.textfield-error {
+  color: var(--sdds-textfield-ps-color-error);
 }
-slot[name=sdds-prefix]::slotted(*) {
-  padding-left: var(--sdds-spacing-element-20);
-}
-slot[name=sdds-prefix]::slotted(*) ~ .textfield-input {
-  padding-left: var(--sdds-spacing-element-12);
+.textfield-slot-wrap-suffix {
+  margin: 0 14px 0 0;
 }
-slot[name=sdds-suffix]::slotted(*) {
-  padding-right: var(--sdds-spacing-element-20);
+.textfield-slot-wrap-suffix::slotted(:not(sdds-icon)) {
+  margin: 0 2px 0 0;
 }

package/dist/collection/components/textfield/textfield.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textfield.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-textfield',\n styleUrl: 'textfield.scss',\n shadow: false,\n scoped: true,\n})\nexport class Textfield {\n /** Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'text' \| 'password' = 'text';\n\n /* Position of the label for the textfield. /\n @Prop() labelPosition: 'inside' \| 'outside' \| 'no-label' = 'no-label';\n\n /* Label text /\n @Prop() label: string = '';\n\n /* Helper text /\n @Prop() helper: string;\n\n /* Placeholder text /\n @Prop() placeholder: string = '';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value: string = '';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Set input in readonly state /\n @Prop() readOnly: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Mode variant of the textfield /\n\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* With setting /\n @Prop() noMinWidth: boolean = false;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: 'error' \| 'success' \| 'default' = 'default';\n\n /* Max length of input /\n @Prop() maxLength: number;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Listen to the focus state of the input /\n @State() focusInput;\n\n /* Change event for the textfield /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsChange: EventEmitter;\n\n handleChange(event): void {\n this.sddsChange.emit(event);\n }\n\n /* Input event for the textfield /\n @Event({\n eventName: 'sddsInput',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsInput: EventEmitter<InputEvent>;\n\n // Data input event in value prop\n handleInput(event): void {\n this.sddsInput.emit(event);\n this.value = event.target.value;\n }\n\n /* Focus event for the textfield /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix /\n handleFocus(event): void {\n this.textInput.focus();\n this.focusInput = true;\n this.sddsFocus.emit(event);\n }\n\n /* Blur event for the textfield /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.focusInput = false;\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div\n class={`\n ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n ${this.value ? 'textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'form-textfield-disabled' : ''}\n ${this.readOnly ? 'form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'form-textfield-md' : ''}\n ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n ${this.state === 'error' \|\| this.state === 'success' ? `form-textfield-${this.state}` : ''}\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n <slot name=\"prefix\" />\n </div>\n\n <div class=\"textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={`textfield-input textfield-input-${this.size}`}\n type={this.type}\n disabled={this.disabled}\n readonly={this.readOnly}\n placeholder={this.placeholder}\n value={this.value}\n autofocus={this.autofocus}\n maxlength={this.maxLength}\n name={this.name}\n onInput={(event) => this.handleInput(event)}\n onChange={(event) => this.handleChange(event)}\n onFocus={(event) => {\n if (!this.readOnly) {\n this.handleFocus(event);\n }\n }}\n onBlur={(event) => {\n if (!this.readOnly) {\n this.handleBlur(event);\n }\n }}\n />\n\n {this.labelPosition === 'inside' && this.size !== 'sm' && (\n <label class=\"textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"textfield-bar\"></div>\n\n <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n <slot name=\"suffix\" />\n </div>\n <span class=\"textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"textfield-helper\">\n {this.state === 'error' && (\n <div class=\"textfield-helper-error-state\">\n <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n {this.helper}\n </div>\n )}\n {this.state !== 'error' && this.helper}\n\n {this.maxLength > 0 && (\n <div class=\"textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"textfield.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-textfield',\n styleUrl: 'textfield.scss',\n shadow: false,\n scoped: true,\n})\nexport class Textfield {\n /** Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'text' \| 'password' = 'text';\n\n /* Position of the label for the textfield. /\n @Prop() labelPosition: 'inside' \| 'outside' \| 'no-label' = 'no-label';\n\n /* Label text /\n @Prop() label: string = '';\n\n /* Helper text /\n @Prop() helper: string;\n\n /* Placeholder text /\n @Prop() placeholder: string = '';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value: string = '';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Set input in readonly state /\n @Prop() readOnly: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Mode variant of the textfield /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* With setting /\n @Prop() noMinWidth: boolean = false;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: 'error' \| 'success' \| 'default' = 'default';\n\n /* Max length of input /\n @Prop() maxLength: number;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Listen to the focus state of the input /\n @State() focusInput;\n\n /* Change event for the textfield /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsChange: EventEmitter;\n\n handleChange(event): void {\n this.sddsChange.emit(event);\n }\n\n /* Input event for the textfield /\n @Event({\n eventName: 'sddsInput',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsInput: EventEmitter<InputEvent>;\n\n // Data input event in value prop\n handleInput(event): void {\n this.sddsInput.emit(event);\n this.value = event.target.value;\n }\n\n /* Focus event for the textfield /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix /\n handleFocus(event): void {\n this.textInput.focus();\n this.focusInput = true;\n this.sddsFocus.emit(event);\n }\n\n /* Blur event for the textfield /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.focusInput = false;\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div\n class={`\n ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n ${this.value ? 'textfield-data' : ''}\n ${\n this.labelPosition === 'inside' && this.size !== 'sm'\n ? 'textfield-container-label-inside'\n : ''\n }\n ${this.disabled ? 'form-textfield-disabled' : ''}\n ${this.readOnly ? 'form-textfield-readonly' : ''}\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n ${this.size === 'md' ? 'form-textfield-md' : ''}\n ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n ${this.state === 'error' \|\| this.state === 'success' ? `form-textfield-${this.state}` : ''}\n `}\n >\n {this.labelPosition === 'outside' && (\n <div class=\"textfield-label-outside\">\n <div>{this.label}</div>\n </div>\n )}\n <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n <slot name=\"prefix\" />\n </div>\n\n <div class=\"textfield-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={`textfield-input textfield-input-${this.size}`}\n type={this.type}\n disabled={this.disabled}\n readonly={this.readOnly}\n placeholder={this.placeholder}\n value={this.value}\n autofocus={this.autofocus}\n maxlength={this.maxLength}\n name={this.name}\n onInput={(event) => this.handleInput(event)}\n onChange={(event) => this.handleChange(event)}\n onFocus={(event) => {\n if (!this.readOnly) {\n this.handleFocus(event);\n }\n }}\n onBlur={(event) => {\n if (!this.readOnly) {\n this.handleBlur(event);\n }\n }}\n />\n\n {this.labelPosition === 'inside' && this.size !== 'sm' && (\n <label class=\"textfield-label-inside\">{this.label}</label>\n )}\n </div>\n <div class=\"textfield-bar\"></div>\n\n <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n <slot name=\"suffix\" />\n </div>\n <span class=\"textfield-icon__readonly\">\n <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n </span>\n <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n </div>\n\n <div class=\"textfield-helper\">\n {this.state === 'error' && (\n <div class=\"textfield-helper-error-state\">\n <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n {this.helper}\n </div>\n )}\n {this.state !== 'error' && this.helper}\n\n {this.maxLength > 0 && (\n <div class=\"textfield-textcounter\">\n {this.value === null ? 0 : this.value?.length}\n <span class=\"textfield-textcounter-divider\"> / </span>\n {this.maxLength}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/textfield/textfield.stories.js CHANGED Viewed

@@ -217,15 +217,16 @@ const Template = ({ modeVariant, state, type, size, label, labelPosition, placeh
       placeholder="${placeholderText}" >
         ${prefix
     ? `
-        <span slot="sdds-prefix">
-          ${prefixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
-        </span>`
+          ${prefixType === 'Text'
+      ? '<span slot="prefix">$</span>'
+      : '<sdds-icon slot="prefix" name="truck" size="20px"></sdds-icon>'}
+        `
     : ''}
         ${suffix
     ? `
-        <span slot="sdds-suffix">
-          ${suffixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
-        </span>`
+          ${suffixType === 'Text'
+      ? '<span slot="suffix">$</span>'
+      : '<sdds-icon slot="suffix" name="truck" size="20px"></sdds-icon>'}        `
     : ''}
         </sdds-textfield>
   </div>

package/dist/collection/components/textfield/textfield.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textfield.stories.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Textfield',\n parameters: {\n notes: readme,\n layout: 'centered',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n state: {\n name: 'State',\n description: 'Switches between success and error state.',\n control: {\n type: 'radio',\n },\n options: ['Default', 'Success', 'Error'],\n table: {\n defaultValue: { summary: 'default' },\n },\n },\n type: {\n name: 'Type',\n description: 'Which type of textfield',\n control: {\n type: 'radio',\n },\n options: ['Text', 'Password'],\n table: {\n defaultValue: { summary: 'text' },\n },\n },\n size: {\n name: 'Size',\n description: 'Switches between different sizes.',\n control: {\n type: 'radio',\n },\n options: ['Large', 'Medium', 'Small'],\n table: {\n defaultValue: { summary: 'lg' },\n },\n },\n label: {\n name: 'Label text',\n description: 'Sets the label text.',\n control: {\n type: 'text',\n },\n },\n labelPosition: {\n name: 'Label position',\n description: 'Sets the label text position.',\n control: {\n type: 'radio',\n },\n options: ['No label', 'Inside', 'Outside'],\n table: {\n defaultValue: { summary: 'no-label' },\n },\n },\n placeholderText: {\n name: 'Placeholder',\n description: 'Sets the placeholder text.',\n control: {\n type: 'text',\n },\n },\n helper: {\n name: 'Helper text',\n description: 'Sets the helper text.',\n control: {\n type: 'text',\n },\n },\n prefix: {\n name: 'Prefix',\n description: 'Adds a prefix symbol or text before the textfield.',\n control: {\n type: 'boolean',\n },\n },\n prefixType: {\n name: 'Prefix type',\n description: 'Switches between icon and text for the prefix.',\n control: {\n type: 'radio',\n },\n options: ['Icon', 'Text'],\n if: { arg: 'prefix', eq: true },\n },\n suffix: {\n name: 'Suffix',\n description: 'Adds a suffix symbol or text after the textfield.',\n control: {\n type: 'boolean',\n },\n },\n suffixType: {\n name: 'Suffix type',\n description: 'Swithces between icon or text for the suffix.',\n control: {\n type: 'radio',\n },\n options: ['Icon', 'Text'],\n if: { arg: 'suffix', eq: true },\n },\n maxLength: {\n name: 'Max length',\n description: 'Sets a maximum value of how long the text can be.',\n control: {\n type: 'number',\n },\n },\n noMinWidth: {\n name: 'No minimum width',\n description: 'Enables component to shrink below 208px which is the default width.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n readonly: {\n description: 'Sets the textfield to read-only state.',\n name: 'Read Only',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n disabled: {\n description: 'Disables the textfield.',\n name: 'Disabled',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n state: 'Default',\n type: 'Text',\n size: 'Large',\n label: 'Label',\n labelPosition: 'No label',\n placeholderText: 'Placeholder',\n helper: '',\n prefix: false,\n prefixType: 'Icon',\n suffix: false,\n suffixType: 'Icon',\n maxLength: 0,\n noMinWidth: 'Default',\n readonly: false,\n disabled: false,\n },\n};\n\nconst Template = ({\n modeVariant,\n state,\n type,\n size,\n label,\n labelPosition,\n placeholderText,\n helper,\n prefix,\n prefixType,\n suffix,\n suffixType,\n maxLength,\n noMinWidth,\n readonly,\n disabled,\n}) => {\n const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n const stateValue = state.toLowerCase();\n const sizeLookUp = {\n Large: 'lg',\n Medium: 'md',\n Small: 'sm',\n };\n return formatHtmlPreview(\n `\n <style>\n /* demo-wrapper is for demonstration purposes only*/\n .demo-wrapper {\n width: 200px;\n height: 150px;\n }\n </style>\n\n <div class=\"demo-wrapper\">\n <sdds-textfield\n type=\"${type}\"\n size=\"${sizeLookUp[size]}\"\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n state=\"${stateValue}\"\n label=\"${label}\"\n label-position=\"${labelPosition.toLowerCase()}\"\n ${helper ? `helper=\"${helper}\"` : ''}\n ${maxlength}\n ${disabled ? 'disabled' : ''}\n ${readonly ? 'read-only' : ''}\n ${noMinWidth ? 'no-min-width' : ''}\n placeholder=\"${placeholderText}\" >\n ${\n prefix\n ? `\n <span slot=\"sdds-prefix\">\n ${prefixType === 'Text' ? '$' : '<sdds-icon name=\"truck\" size=\"20px\"></sdds-icon> '}\n </span>`\n : ''\n }\n ${\n suffix\n ? `\n <span slot=\"sdds-suffix\">\n ${suffixType === 'Text' ? '$' : '<sdds-icon name=\"truck\" size=\"20px\"></sdds-icon> '}\n </span>`\n : ''\n }\n </sdds-textfield>\n </div>\n <!-- Script tag for demo purposes -->\n <script>\n textElement = document.querySelector('sdds-textfield')\n textElement.addEventListener('sddsFocus',(event) => {\n console.log(event)\n })\n textElement.addEventListener('sddsBlur',(event) => {\n console.log(event)\n })\n textElement.addEventListener('sddsInput',(event) => {\n console.log(event)\n })\n textElement.addEventListener('sddsChange',(event) => {\n console.log(event)\n })\n </script>\n `,\n );\n};\n\n// ${true ? '<sdds-icon name=\"cross\" slot=\"sdds-prefix\"></sdds-icon>' : ''}\n\nexport const Default = Template.bind({});\n\nDefault.args = {};\n"]}
1	+ {"version":3,"file":"textfield.stories.js","sourceRoot":"","sources":["../../../src/components/textfield/textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Textfield',\n parameters: {\n notes: readme,\n layout: 'centered',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description:\n 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n state: {\n name: 'State',\n description: 'Switches between success and error state.',\n control: {\n type: 'radio',\n },\n options: ['Default', 'Success', 'Error'],\n table: {\n defaultValue: { summary: 'default' },\n },\n },\n type: {\n name: 'Type',\n description: 'Which type of textfield',\n control: {\n type: 'radio',\n },\n options: ['Text', 'Password'],\n table: {\n defaultValue: { summary: 'text' },\n },\n },\n size: {\n name: 'Size',\n description: 'Switches between different sizes.',\n control: {\n type: 'radio',\n },\n options: ['Large', 'Medium', 'Small'],\n table: {\n defaultValue: { summary: 'lg' },\n },\n },\n label: {\n name: 'Label text',\n description: 'Sets the label text.',\n control: {\n type: 'text',\n },\n },\n labelPosition: {\n name: 'Label position',\n description: 'Sets the label text position.',\n control: {\n type: 'radio',\n },\n options: ['No label', 'Inside', 'Outside'],\n table: {\n defaultValue: { summary: 'no-label' },\n },\n },\n placeholderText: {\n name: 'Placeholder',\n description: 'Sets the placeholder text.',\n control: {\n type: 'text',\n },\n },\n helper: {\n name: 'Helper text',\n description: 'Sets the helper text.',\n control: {\n type: 'text',\n },\n },\n prefix: {\n name: 'Prefix',\n description: 'Adds a prefix symbol or text before the textfield.',\n control: {\n type: 'boolean',\n },\n },\n prefixType: {\n name: 'Prefix type',\n description: 'Switches between icon and text for the prefix.',\n control: {\n type: 'radio',\n },\n options: ['Icon', 'Text'],\n if: { arg: 'prefix', eq: true },\n },\n suffix: {\n name: 'Suffix',\n description: 'Adds a suffix symbol or text after the textfield.',\n control: {\n type: 'boolean',\n },\n },\n suffixType: {\n name: 'Suffix type',\n description: 'Swithces between icon or text for the suffix.',\n control: {\n type: 'radio',\n },\n options: ['Icon', 'Text'],\n if: { arg: 'suffix', eq: true },\n },\n maxLength: {\n name: 'Max length',\n description: 'Sets a maximum value of how long the text can be.',\n control: {\n type: 'number',\n },\n },\n noMinWidth: {\n name: 'No minimum width',\n description: 'Enables component to shrink below 208px which is the default width.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n readonly: {\n description: 'Sets the textfield to read-only state.',\n name: 'Read Only',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n disabled: {\n description: 'Disables the textfield.',\n name: 'Disabled',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n state: 'Default',\n type: 'Text',\n size: 'Large',\n label: 'Label',\n labelPosition: 'No label',\n placeholderText: 'Placeholder',\n helper: '',\n prefix: false,\n prefixType: 'Icon',\n suffix: false,\n suffixType: 'Icon',\n maxLength: 0,\n noMinWidth: 'Default',\n readonly: false,\n disabled: false,\n },\n};\n\nconst Template = ({\n modeVariant,\n state,\n type,\n size,\n label,\n labelPosition,\n placeholderText,\n helper,\n prefix,\n prefixType,\n suffix,\n suffixType,\n maxLength,\n noMinWidth,\n readonly,\n disabled,\n}) => {\n const maxlength = maxLength > 0 ? `max-length=\"${maxLength}\"` : '';\n const stateValue = state.toLowerCase();\n const sizeLookUp = {\n Large: 'lg',\n Medium: 'md',\n Small: 'sm',\n };\n return formatHtmlPreview(\n `\n <style>\n /* demo-wrapper is for demonstration purposes only*/\n .demo-wrapper {\n width: 200px;\n height: 150px;\n }\n </style>\n\n <div class=\"demo-wrapper\">\n <sdds-textfield\n type=\"${type}\"\n size=\"${sizeLookUp[size]}\"\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n state=\"${stateValue}\"\n label=\"${label}\"\n label-position=\"${labelPosition.toLowerCase()}\"\n ${helper ? `helper=\"${helper}\"` : ''}\n ${maxlength}\n ${disabled ? 'disabled' : ''}\n ${readonly ? 'read-only' : ''}\n ${noMinWidth ? 'no-min-width' : ''}\n placeholder=\"${placeholderText}\" >\n ${\n prefix\n ? `\n ${\n prefixType === 'Text'\n ? '<span slot=\"prefix\">$</span>'\n : '<sdds-icon slot=\"prefix\" name=\"truck\" size=\"20px\"></sdds-icon>'\n }\n `\n : ''\n }\n ${\n suffix\n ? `\n ${\n suffixType === 'Text'\n ? '<span slot=\"suffix\">$</span>'\n : '<sdds-icon slot=\"suffix\" name=\"truck\" size=\"20px\"></sdds-icon>'\n } `\n : ''\n }\n </sdds-textfield>\n </div>\n <!-- Script tag for demo purposes -->\n <script>\n textElement = document.querySelector('sdds-textfield')\n textElement.addEventListener('sddsFocus',(event) => {\n console.log(event)\n })\n textElement.addEventListener('sddsBlur',(event) => {\n console.log(event)\n })\n textElement.addEventListener('sddsInput',(event) => {\n console.log(event)\n })\n textElement.addEventListener('sddsChange',(event) => {\n console.log(event)\n })\n </script>\n `,\n );\n};\n\n// ${true ? '<sdds-icon name=\"cross\" slot=\"sdds-prefix\"></sdds-icon>' : ''}\n\nexport const Default = Template.bind({});\n\nDefault.args = {};\n"]}

package/dist/collection/components/toast/sdds-toast.js CHANGED Viewed

@@ -23,6 +23,14 @@ export class SddsToast {
         this.hidden = true;
       }
     };
+    this.handleShow = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
     this.getHeaderClasses = () => {
       if (!this.hasSubheader && !this.hasLink) {
         return 'only-header';
@@ -43,17 +51,11 @@ export class SddsToast {
   }
   /** Hides the toast. */
   async hideToast() {
-    this.hidden = true;
-    return {
-      toastId: this.toastId,
-    };
+    this.handleClose();
   }
   /** Shows the toast. */
   async showToast() {
-    this.hidden = false;
-    return {
-      toastId: this.toastId,
-    };
+    this.handleShow();
   }
   connectedCallback() {
     const children = Array.from(this.host.children);
@@ -220,14 +222,14 @@ export class SddsToast {
     return {
       "hideToast": {
         "complexType": {
-          "signature": "() => Promise<{ toastId: string; }>",
+          "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<{ toastId: string; }>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "Hides the toast.",
@@ -236,14 +238,14 @@ export class SddsToast {
       },
       "showToast": {
         "complexType": {
-          "signature": "() => Promise<{ toastId: string; }>",
+          "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<{ toastId: string; }>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "Shows the toast.",

package/dist/collection/components/toast/sdds-toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdds-toast.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAe,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAOpE,MAAM,OAAO,SAAS;;~~IAsDpB~~,gBAAW,GAAG,GAAG,EAAE;MACjB,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;IACH,CAAC,CAAC;IAEF,gBAAW,GAAG,GAAG,EAAE;MACjB,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;IACH,CAAC,CAAC;IAQF,qBAAgB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;~~mBA1FwB~~,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;EAQvD,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,~~MAAM~~,~~GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,~~EAAE,~~IAAI,~~CAAC~~,OAAO~~;~~KACtB~~,CAAC;~~EACJ,CAAC;~~EAED,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,~~MAAM~~,~~GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,~~EAAE,~~IAAI,~~CAAC~~,OAAO~~;~~KACtB~~,CAAC;~~EACJ~~,~~CAAC;EAqCD,~~iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;EACrF,CAAC;EAYD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE;MAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV;QAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa;QAC7D,WAAK,KAAK,EAAE,eAAe;UACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR;UACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;YAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC;UACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;QACN,cACE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;UACrB,CAAC,EACD,KAAK,EAAE,aAAa;UAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toast',\n styleUrl: 'sdds-toast.scss',\n shadow: true,\n})\nexport class SddsToast {\n /** ID for the toast. Randomly generated if not specified. /\n @Prop() toastId: string = crypto.randomUUID();\n\n /* Header text for the component. /\n @Prop() header: string;\n\n /* Subheader text for the component. /\n @Prop() subheader: string;\n\n /* Type of toast. /\n @Prop() type: 'information' \| 'error' \| 'warning' \| 'success' = 'information';\n\n /* Hides the toast. /\n @Prop() hidden: boolean = false;\n\n /* ARIA role for the toast. /\n @Prop() toastRole: 'alert' \| 'log' \| 'status' = 'alert';\n\n @Element() host: HostElement;\n\n @State() hasSubheader: boolean;\n\n @State() hasLink: boolean;\n\n /* Hides the toast. /\n @Method()\n async hideToast() {\n this.~~hidden = true~~;\n ~~return {\n toastId: this.toastId,\n };\n~~ }\n\n /* Shows the toast. /\n @Method()\n async showToast() {\n this.~~hidden = false~~;\n ~~return {\n toastId: this.toastId,\n };\n~~ }\n\n /* Sends unique toast identifier component is closed. */\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n toastId: string;\n }>;\n\n getIconName = () => {\n switch (this.type) {\n case 'information':\n return 'info';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'success':\n return 'tick';\n default:\n return 'info';\n }\n };\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n connectedCallback() {\n const children = Array.from(this.host.children);\n this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n }\n\n getHeaderClasses = () => {\n if (!this.hasSubheader && !this.hasLink) {\n return 'only-header';\n }\n if (!this.hasSubheader) {\n return 'no-subheader';\n }\n return '';\n };\n\n render() {\n return (\n <Host\n toastRole={this.toastRole}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n class={`${this.hidden ? 'hide' : 'show'}`}\n >\n <div\n class={`\n toast-wrapper\n ${this.type}\n `}\n >\n <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n <div class={`toast-content`}>\n <div\n class={`toast-header\n ${this.getHeaderClasses()}\n `}\n >\n {this.header}\n </div>\n <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n <slot name=\"toast-subheader\"></slot>\n </div>\n <slot name=\"toast-link\"></slot>\n </div>\n <button\n onClick={() => {\n this.handleClose();\n }}\n class={`toast-close`}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"sdds-toast.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-toast',\n styleUrl: 'sdds-toast.scss',\n shadow: true,\n})\nexport class SddsToast {\n /** ID for the toast. Randomly generated if not specified. /\n @Prop() toastId: string = crypto.randomUUID();\n\n /* Header text for the component. /\n @Prop() header: string;\n\n /* Subheader text for the component. /\n @Prop() subheader: string;\n\n /* Type of toast. /\n @Prop() type: 'information' \| 'error' \| 'warning' \| 'success' = 'information';\n\n /* Hides the toast. /\n @Prop() hidden: boolean = false;\n\n /* ARIA role for the toast. /\n @Prop() toastRole: 'alert' \| 'log' \| 'status' = 'alert';\n\n @Element() host: HostElement;\n\n @State() hasSubheader: boolean;\n\n @State() hasLink: boolean;\n\n /* Hides the toast. /\n @Method()\n async hideToast() {\n this.handleClose();\n }\n\n /* Shows the toast. /\n @Method()\n async showToast() {\n this.handleShow();\n }\n\n /* Sends unique toast identifier component is closed. */\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n toastId: string;\n }>;\n\n getIconName = () => {\n switch (this.type) {\n case 'information':\n return 'info';\n case 'error':\n return 'error';\n case 'warning':\n return 'warning';\n case 'success':\n return 'tick';\n default:\n return 'info';\n }\n };\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n handleShow = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n toastId: this.toastId,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = false;\n }\n };\n\n connectedCallback() {\n const children = Array.from(this.host.children);\n this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n }\n\n getHeaderClasses = () => {\n if (!this.hasSubheader && !this.hasLink) {\n return 'only-header';\n }\n if (!this.hasSubheader) {\n return 'no-subheader';\n }\n return '';\n };\n\n render() {\n return (\n <Host\n toastRole={this.toastRole}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n class={`${this.hidden ? 'hide' : 'show'}`}\n >\n <div\n class={`\n toast-wrapper\n ${this.type}\n `}\n >\n <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n <div class={`toast-content`}>\n <div\n class={`toast-header\n ${this.getHeaderClasses()}\n `}\n >\n {this.header}\n </div>\n <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n <slot name=\"toast-subheader\"></slot>\n </div>\n <slot name=\"toast-link\"></slot>\n </div>\n <button\n onClick={() => {\n this.handleClose();\n }}\n class={`toast-close`}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/toast/sdds-toast.stories.js CHANGED Viewed

@@ -79,7 +79,7 @@ const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds
     </sdds-toast>
         <script>
         document.addEventListener('sddsClose', (event) => {
-            console.log('Toast with id: ', event.detail.toastId, ' was closed.')
+            console.log(event)
         })
     </script>
   `);

package/dist/collection/components/toast/sdds-toast.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Toast',\n parameters: {\n layout: 'centered',\n notes: readme,\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n type: {\n name: 'Message type',\n description: 'Changes the type of message.',\n control: {\n type: 'radio',\n },\n options: ['Information', 'Success', 'Warning', 'Error'],\n table: {\n defaultValue: {\n summary: 'information',\n },\n },\n },\n header: {\n name: 'Header',\n description: 'Adds a header text.',\n control: {\n type: 'text',\n },\n },\n subheader: {\n name: 'Subheader',\n description: 'Adds a subheader text.',\n control: {\n type: 'text',\n },\n },\n link: {\n name: 'Link',\n description: 'Adds a CTA link.',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n type: 'Information',\n header: 'Header',\n subheader: '',\n link: false,\n },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n formatHtmlPreview(\n `<sdds-toast\n type=\"${type.toLowerCase()}\"\n header=\"${header}\"\n >\n ${\n subheader\n ? `\n <div slot=\"toast-subheader\">\n ${subheader}\n </div>\n `\n : ''\n }\n ${\n link\n ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n `\n : ''\n }\n </sdds-toast>\n <script>\n document.addEventListener('sddsClose', (event) => {\n console.log(~~'Toast with id: ',~~ event~~.detail.toastId, ' was closed.'~~)\n })\n </script>\n `,\n );\nexport const WebComponent = Template.bind({});\n"]}
1	+ {"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Toast',\n parameters: {\n layout: 'centered',\n notes: readme,\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n type: {\n name: 'Message type',\n description: 'Changes the type of message.',\n control: {\n type: 'radio',\n },\n options: ['Information', 'Success', 'Warning', 'Error'],\n table: {\n defaultValue: {\n summary: 'information',\n },\n },\n },\n header: {\n name: 'Header',\n description: 'Adds a header text.',\n control: {\n type: 'text',\n },\n },\n subheader: {\n name: 'Subheader',\n description: 'Adds a subheader text.',\n control: {\n type: 'text',\n },\n },\n link: {\n name: 'Link',\n description: 'Adds a CTA link.',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n type: 'Information',\n header: 'Header',\n subheader: '',\n link: false,\n },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n formatHtmlPreview(\n `<sdds-toast\n type=\"${type.toLowerCase()}\"\n header=\"${header}\"\n >\n ${\n subheader\n ? `\n <div slot=\"toast-subheader\">\n ${subheader}\n </div>\n `\n : ''\n }\n ${\n link\n ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n `\n : ''\n }\n </sdds-toast>\n <script>\n document.addEventListener('sddsClose', (event) => {\n console.log(event)\n })\n </script>\n `,\n );\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <sdds-header>
+    <sdds-header-title>
+      Example: default
+    </sdds-header-title>
+    <sdds-header-launcher slot="end" aria-label="Application launcher">
+      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+    </sdds-header-launcher>
+    <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+    </sdds-header-brand-symbol>
+  </sdds-header>
+  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
+    <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>
+  </main>
+  `);
+export const Basic = Template.bind({});
+//# sourceMappingURL=navigation-basic.stories.js.map

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"navigation-basic.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-basic.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Patterns/Navigation',\n parameters: {\n notes: {\n Readme: readme,\n },\n layout: 'fullscreen',\n docs: {\n source: {\n state: 'closed',\n },\n },\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {},\n args: {},\n};\n\nconst Template = () =>\n formatHtmlPreview(\n `\n <sdds-header>\n <sdds-header-title>\n Example: default\n </sdds-header-title>\n <sdds-header-launcher slot=\"end\" aria-label=\"Application launcher\">\n <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>\n <sdds-header-launcher-list>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n </sdds-header-launcher-list>\n <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>\n <sdds-header-launcher-list>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n <sdds-header-launcher-list-item>\n <a href=\"https://tegel.scania.com\">Button</a>\n </sdds-header-launcher-list-item>\n </sdds-header-launcher-list>\n </sdds-header-launcher>\n \n <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n </sdds-header-brand-symbol>\n\n </sdds-header>\n \n <main class=\"sdds-u-w-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>\n </main>\n `,\n );\n\nexport const Basic = Template.bind({});\n"]}