@scania/tegel 0.0.51 → 0.0.61

package/dist/collection/components/card/sdds-card.stories.js

@@ -1,125 +1,125 @@
-import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Card',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    header: {
-      name: 'Header text',
-      description: 'Sets the header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader text',
-      description: 'Sets the subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    headerImg: {
-      name: 'Header image',
-      description: 'Toggles an image in the header.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    headerPlacement: {
-      name: 'Header placement',
-      description: 'Sets the placement of the header, above or below the body image.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Above', 'Below'],
-      table: {
-        defaultValue: { summary: 'above' },
-      },
-    },
-    bodyImg: {
-      name: 'Body image',
-      description: 'Toggles an image in the card body. Cannot be combined with divider.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'bodyDivider', eq: false },
-    },
-    bodyContent: {
-      name: 'Body text',
-      description: 'Sets the body text for the card.',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyDivider: {
-      name: 'Body divider',
-      description: 'Adds a divider above the body content. Cannot be combined with body image.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'bodyImg', eq: false },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    cardBottom: {
-      name: 'Content of the bottom of the card',
-      description: 'Slot to add custom HTML elements to the bottom of the card.',
-      control: {
-        type: 'text',
-      },
-    },
-    clickable: {
-      name: 'Clickable',
-      description: 'Toggles if the card is clickable or not.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    header: 'Header text',
-    subheader: 'Subheader text',
-    headerImg: true,
-    headerPlacement: 'Above',
-    bodyImg: false,
-    bodyContent: '',
-    bodyDivider: false,
-    cardBottom: `<div slot="card-bottom"><sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon></div>`,
-    clickable: false,
-  },
-};
+import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Card',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    header: {
+      name: 'Header text',
+      description: 'Sets the header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader text',
+      description: 'Sets the subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    headerImg: {
+      name: 'Header image',
+      description: 'Toggles an image in the header.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    headerPlacement: {
+      name: 'Header placement',
+      description: 'Sets the placement of the header, above or below the body image.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'above' },
+      },
+    },
+    bodyImg: {
+      name: 'Body image',
+      description: 'Toggles an image in the card body. Cannot be combined with divider.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyDivider', eq: false },
+    },
+    bodyContent: {
+      name: 'Body text',
+      description: 'Sets the body text for the card.',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Adds a divider above the body content. Cannot be combined with body image.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyImg', eq: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    cardBottom: {
+      name: 'Content of the bottom of the card',
+      description: 'Slot to add custom HTML elements to the bottom of the card.',
+      control: {
+        type: 'text',
+      },
+    },
+    clickable: {
+      name: 'Clickable',
+      description: 'Toggles if the card is clickable or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    header: 'Header text',
+    subheader: 'Subheader text',
+    headerImg: true,
+    headerPlacement: 'Above',
+    bodyImg: false,
+    bodyContent: '',
+    bodyDivider: false,
+    cardBottom: `<div slot="card-bottom"><sdds-icon style="font-size: 20px;" name="arrow_right"></sdds-icon></div>`,
+    clickable: false,
+  },
+};
 const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement, bodyImg, bodyContent, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`<style>
     /* demo-wrapper is for demonstration purposes only*/
     .demo-wrapper {
@@ -137,24 +137,24 @@ const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement,
     ${clickable ? 'clickable' : ''}
     ${bodyDivider ? 'body-divider' : ''}
   >
-  ${bodyContent
+  ${bodyContent
   ? `
     <div slot="card-body">
         ${bodyContent}
-    </div>`
+    </div>`
   : ''}
     ${cardBottom ? `${cardBottom}` : ''}
     </sdds-card>
     </div>
-    ${clickable
+    ${clickable
   ? `
     <script>
         document.addEventListener('sddsClick', (event)=>{
             console.log('Card with id: ', event.detail.cardId, ' was clicked.')
         })
     </script>
-    `
+    `
   : ''}
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-card.stories.js.map
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-card.stories.js.map

package/dist/collection/components/checkbox/checkbox.stories.js

@@ -1,63 +1,63 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Checkbox',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label text',
-      description: 'Sets the label of the component.',
-      control: {
-        type: 'text',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'Checks the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the checkbox.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    label: 'Label',
-    checked: false,
-    disabled: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Checkbox',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Checks the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    checked: false,
+    disabled: false,
+  },
+};
 const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
     <div class="sdds-checkbox-item">
       <input class="sdds-form-input" type="checkbox" id="unique-id" ${checked ? 'checked="checked"' : ''}  ${disabled ? 'disabled' : ''}>
-      ${label
-  ? `<label class="sdds-form-label" for="unique-id" ${disabled ? 'disabled' : ''}>  ${label} </label>`
+      ${label
+  ? `<label class="sdds-form-label" for="unique-id" ${disabled ? 'disabled' : ''}>  ${label} </label>`
   : ''}
     </div>
-  `);
-export const Native = Template.bind({});
-//# sourceMappingURL=checkbox.stories.js.map
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=checkbox.stories.js.map

package/dist/collection/components/checkbox/sdds-checkbox.css

@@ -32,13 +32,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
+  border-radius: 4px;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]::after {
   border: 1px solid var(--sdds-checkbox-interaction-01);
@@ -47,14 +47,15 @@
   height: 16px;
   left: 4px;
   top: 4px;
+  border-radius: 2px;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:focus::before {
   background-color: var(--sdds-checkbox-background-focus);
-  opacity: 0.24;
+  opacity: var(--sdds-checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:disabled, .sdds-checkbox-webcomponent input[type=checkbox].disabled {
@@ -78,7 +79,7 @@
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:checked:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled::before {
   display: block;