@scania/tegel 0.0.51 → 0.0.52

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -1,45 +1,45 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Radio Button',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label',
-      description: 'Sets the label for the radio button.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the radio button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    label: 'Label text',
-    disabled: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Radio Button',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      description: 'Sets the label for the radio button.',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the radio button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+  },
+};
 const Template = ({ label, disabled }) => formatHtmlPreview(`
   <style>
     .demo-fieldset-reset { 
@@ -67,6 +67,6 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
       </div>
     </div>
   </fieldset>
-  `);
-export const Native = Template.bind({});
-//# sourceMappingURL=radio-button.stories.js.map
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=radio-button.stories.js.map

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -1,50 +1,50 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Side Menu',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    collapsed: {
-      name: 'Collapsed',
-      description: 'Toggle the side menus collapsed state.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    showIcons: {
-      name: 'Show icons',
-      description: 'Toggle if icons for side menu options are displayed.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'collapsed', neq: true },
-    },
-  },
-  args: {
-    collapsed: false,
-    showIcons: false,
-  },
-};
-const Template = ({ showIcons, collapsed }) => {
-  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Side Menu',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    collapsed: {
+      name: 'Collapsed',
+      description: 'Toggle the side menus collapsed state.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    showIcons: {
+      name: 'Show icons',
+      description: 'Toggle if icons for side menu options are displayed.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'collapsed', neq: true },
+    },
+  },
+  args: {
+    collapsed: false,
+    showIcons: false,
+  },
+};
+const Template = ({ showIcons, collapsed }) => {
+  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
   return formatHtmlPreview(`
   <style>
   /* demo-wrapper is for demonstration purposes only*/
@@ -177,7 +177,7 @@ const Template = ({ showIcons, collapsed }) => {
     });
   }
 </script>
-  `);
-};
-export const Default = Template.bind({});
-//# sourceMappingURL=side-menu.stories.js.map
+  `);
+};
+export const Default = Template.bind({});
+//# sourceMappingURL=side-menu.stories.js.map

package/dist/collection/components/slider/slider.css

@@ -1,7 +1,6 @@
 :root,
 .sdds-mode-light {
   --sdds-slider-label-color: var(--sdds-grey-958);
-  --sdds-slider-label-color-disabled: var(--sdds-grey-400);
   --sdds-slider-thumb-color: var(--sdds-blue-800);
   --sdds-slider-divider-color: var(--sdds-grey-400);
   --sdds-slider-track-color: var(--sdds-grey-400);
@@ -12,11 +11,13 @@
   --sdds-slider-inputfield-background: var(--sdds-white);
   --sdds-slider-inputfield-box-shadow: var(--sdds-grey-400);
   --sdds-slider-divider-values-color: var(--sdds-grey-958);
+  --sdds-slider-disabled: var(--sdds-grey-400);
+  --sdds-slider-value-tooltip-background: var(--sdds-grey-800);
+  --sdds-slider-value-tooltip-color: var(--sdds-white);
 }
 
 .sdds-mode-dark {
   --sdds-slider-label-color: var(--sdds-grey-100);
-  --sdds-slider-label-color-disabled: var(--sdds-grey-700);
   --sdds-slider-thumb-color: var(--sdds-grey-100);
   --sdds-slider-divider-color: var(--sdds-grey-700);
   --sdds-slider-track-color: var(--sdds-grey-700);
@@ -27,6 +28,9 @@
   --sdds-slider-inputfield-background: var(--sdds-grey-900);
   --sdds-slider-inputfield-box-shadow: var(--sdds-grey-800);
   --sdds-slider-divider-values-color: var(--sdds-grey-100);
+  --sdds-slider-disabled: var(--sdds-grey-700);
+  --sdds-slider-value-tooltip-background: var(--sdds-grey-200);
+  --sdds-slider-value-tooltip-color: var(--sdds-grey-958);
 }
 
 sdds-slider {
@@ -130,10 +134,11 @@ sdds-slider input[type=range].sdds-slider-native-element {
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
-  background-color: var(--sdds-grey-800);
-  color: var(--sdds-white);
+  background-color: var(--sdds-slider-value-tooltip-background);
+  color: var(--sdds-slider-value-tooltip-color);
 }
 .sdds-slider .sdds-slider__value svg {
+  color: var(--sdds-slider-value-tooltip-background);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -242,38 +247,38 @@ sdds-slider input[type=range].sdds-slider-native-element {
   pointer-events: none;
 }
 .sdds-slider.disabled label {
-  color: var(--sdds-slider-label-color-disabled);
+  color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
   cursor: default;
 }
 .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
-  fill: var(--sdds-slider-controls-color);
+  fill: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
-  color: var(--sdds-slider-controls-color);
+  color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  color: var(--sdds-slider-controls-color);
+  color: var(--sdds-slider-disabled);
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__value {
   display: none;
 }
 .sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-slider-track-fill-color);
+  background-color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
-  color: var(--sdds-slider-track-fill-color);
+  color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__scrubber {
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  background: var(--sdds-slider-track-color);
+  background-color: var(--sdds-slider-disabled);
   cursor: default;
 }
 .sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
@@ -289,9 +294,15 @@ sdds-slider input[type=range].sdds-slider-native-element {
   height: 20px;
 }
 
-.sdds-slider__controls .sdds-slider__control {
+.sdds-slider .sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon, .sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon {
+  color: var(--sdds-slider-controls-color);
+}
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
   cursor: default;
 }
-.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
-  fill: var(--sdds-slider-controls-color);
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon {
+  color: var(--sdds-slider-disabled);
 }