feat(slider): add name prop (#894)

telekom · Feb 23, 2022 · b1ad291 · b1ad291
1 parent caef11f
commit b1ad291
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 91 deletions.
diff --git a/packages/components/src/components/slider/__snapshots__/slider.spec.ts.snap b/packages/components/src/components/slider/__snapshots__/slider.spec.ts.snap
@@ -11,6 +11,7 @@ exports[`Slider should match snapshot 1`] = `
             <div aria-labelledby="slider-0-label" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuetext="undefined" class="slider__thumb" id="slider-0" part="thumb" role="slider" tabindex="0"></div>
           </div>
         </div>
+        <input type="hidden">
         <div class="slider__display-value" part="display-value"></div>
       </div>
     </div>
@@ -30,6 +31,7 @@ exports[`Slider should match snapshot 2`] = `
             <div aria-labelledby="slider-1-label" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" class="slider__thumb" id="slider-1" part="thumb" role="slider" tabindex="0"></div>
           </div>
         </div>
+        <input type="hidden" value="10">
         <div class="slider__display-value" part="display-value">
           10%
         </div>

diff --git a/packages/components/src/components/slider/readme.md b/packages/components/src/components/slider/readme.md
@@ -15,6 +15,7 @@
 | `label`       | `label`        | (optional) slider label                                                                   | `string`      | `undefined` |
 | `max`         | `max`          | (optional) the maximal value of the slider                                                | `number`      | `100`       |
 | `min`         | `min`          | t(optional) he minimal value of the slider                                                | `number`      | `0`         |
+| `name`        | `name`         | (optional) the name of the slider                                                         | `string`      | `undefined` |
 | `showValue`   | `show-value`   | (optional) slider display value                                                           | `boolean`     | `true`      |
 | `sliderId`    | `slider-id`    | (optional) Slider id                                                                      | `string`      | `undefined` |
 | `step`        | `step`         | (optional) the step size to increase or decrease when dragging slider                     | `number`      | `1`         |

diff --git a/packages/components/src/components/slider/slider.tsx b/packages/components/src/components/slider/slider.tsx
@@ -37,6 +37,8 @@ export class Slider {
   sliderTrack?: HTMLDivElement;
   /* Host HTML Element */
   @Element() hostElement: HTMLElement;
+  /** (optional) the name of the slider */
+  @Prop() name?: string;
   /** (optional) the display value of the slider */
   @Prop() value?: number;
   /** t(optional) he minimal value of the slider */
@@ -249,6 +251,7 @@ export class Slider {
                 />
               </div>
             </div>
+            <input type="hidden" value={this.value} name={this.name} />
             {this.showValue && (
               <div part="display-value" class="slider__display-value">
                 {this.value != null && this.value.toFixed(this.decimals)}

diff --git a/packages/storybook-vue/stories/3_components/slider/ScaleSlider.vue b/packages/storybook-vue/stories/3_components/slider/ScaleSlider.vue
@@ -2,6 +2,7 @@
   <scale-slider
     :custom-color="customColor"
     :disabled="disabled"
+    :name="name"
     :label="label"
     :max="max"
     :min="min"
@@ -23,6 +24,7 @@ export default {
     customColor: String,
     disabled: { type: Boolean, default: false },
     label: String,
+    name: String,
     max: { type: Number, default: 100 },
     min: { type: Number, default: 0 },
     showValue: { type: Boolean, default: true },

diff --git a/packages/storybook-vue/stories/3_components/slider/Slider.stories.mdx b/packages/storybook-vue/stories/3_components/slider/Slider.stories.mdx
@@ -1,26 +1,33 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import {
+  Meta,
+  Story,
+  ArgsTable,
+  Canvas,
+  Description,
+} from '@storybook/addon-docs/blocks';
 import ScaleSlider from './ScaleSlider.vue';
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions';
 
 <Meta
-    title="Components/Slider"
-    component={ScaleSlider}
-    argTypes={{
-        styles: {
-            control: {disable: true}
-        }
-    }}
+  title="Components/Slider"
+  component={ScaleSlider}
+  argTypes={{
+    styles: {
+      control: { disable: true },
+    },
+  }}
 />
 
-export const Template = (args, {argTypes}) => ({
-    components:{ScaleSlider},
-    props: {
-        ...ScaleSlider.props
-    },
-    template: `
+export const Template = (args, { argTypes }) => ({
+  components: { ScaleSlider },
+  props: {
+    ...ScaleSlider.props,
+  },
+  template: `
     <scale-slider
         :custom-color="customColor"
         :disabled="disabled"
+        :name="name"
         :label="label"
         :max="max"
         :min="min"
@@ -38,25 +45,26 @@ export const Template = (args, {argTypes}) => ({
         >
     </scale-slider>
     `,
-    methods: {
-        scaleButtonDown: action('scaleButtonDown'),
-        scaleDragStart: action('scaleDragStart'),
-        scaleDragging: action('scaleDragging'),
-        scaleDragEnd: action('scaleDragEnd'),
-        scaleSetPosition: action('scaleSetPosition'),
-        scaleCurrentPosition: action('scaleCurrentPosition')
-    }
-})
-
-export const TemplateCustomColor = (args, {argTypes}) => ({
-    components:{ScaleSlider},
-    props: {
-        ...ScaleSlider.props
-    },
-    template: `
+  methods: {
+    scaleButtonDown: action('scaleButtonDown'),
+    scaleDragStart: action('scaleDragStart'),
+    scaleDragging: action('scaleDragging'),
+    scaleDragEnd: action('scaleDragEnd'),
+    scaleSetPosition: action('scaleSetPosition'),
+    scaleCurrentPosition: action('scaleCurrentPosition'),
+  },
+});
+
+export const TemplateCustomColor = (args, { argTypes }) => ({
+  components: { ScaleSlider },
+  props: {
+    ...ScaleSlider.props,
+  },
+  template: `
     <scale-slider style="--background-bar: green"
         :custom-color="customColor"
         :disabled="disabled"
+        :name="name"
         :label="label"
         :max="max"
         :min="min"
@@ -74,36 +82,43 @@ export const TemplateCustomColor = (args, {argTypes}) => ({
         >
     </scale-slider>
     `,
-    methods: {
-        scaleButtonDown: action('scaleButtonDown'),
-        scaleDragStart: action('scaleDragStart'),
-        scaleDragging: action('scaleDragging'),
-        scaleDragEnd: action('scaleDragEnd'),
-        scaleSetPosition: action('scaleSetPosition'),
-        scaleCurrentPosition: action('scaleCurrentPosition')
-    }
-})
-
-<div style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
-    <h1>Slider</h1>
-    <img src="assets/aa.png" alt="Accessible AA" />
+  methods: {
+    scaleButtonDown: action('scaleButtonDown'),
+    scaleDragStart: action('scaleDragStart'),
+    scaleDragging: action('scaleDragging'),
+    scaleDragEnd: action('scaleDragEnd'),
+    scaleSetPosition: action('scaleSetPosition'),
+    scaleCurrentPosition: action('scaleCurrentPosition'),
+  },
+});
+
+<div
+  style={{
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  }}
+>
+  <h1>Slider</h1>
+  <img src="assets/aa.png" alt="Accessible AA" />
 </div>
 
 ## Standard
 
 <Canvas withSource="none">
-    <Story
-        name="Standard"
-        args={{
-            label: 'Standard',
-            value: 20,
-        }}
-        >
-        {Template.bind({})}
-    </Story>
+  <Story
+    name="Standard"
+    args={{
+      label: 'Standard',
+      value: 20,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
-<ArgsTable story='Standard' />
+<ArgsTable story="Standard" />
 
 ### Scoped CSS variables
 
@@ -130,15 +145,16 @@ For Shadow Parts, please inspect the element's #shadow.
 ## Slider track small
 
 <Canvas withSource="none">
-    <Story
-        name="Slider track small"
-        args={{
-            label: 'Slider track small',
-            value: 20,
-            trackSmall: true,
-        }}>
-        {Template.bind({})}
-    </Story>
+  <Story
+    name="Slider track small"
+    args={{
+      label: 'Slider track small',
+      value: 20,
+      trackSmall: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
 ```html
@@ -148,15 +164,16 @@ For Shadow Parts, please inspect the element's #shadow.
 ## Slider thumb large
 
 <Canvas withSource="none">
-    <Story
-        name="Slider thumb large"
-        args={{
-            label: 'Slider thumb large',
-            value: 20,
-            thumbLarge: true,
-        }}>
-        {Template.bind({})}
-    </Story>
+  <Story
+    name="Slider thumb large"
+    args={{
+      label: 'Slider thumb large',
+      value: 20,
+      thumbLarge: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
 ```html
@@ -166,33 +183,38 @@ For Shadow Parts, please inspect the element's #shadow.
 ## Slider with custom color
 
 <Canvas withSource="none">
-    <Story
-        name="Slider with custom color"
-        args={{
-            label: 'Slider with custom color',
-            value: 20,
-        }}
-        >
-        {TemplateCustomColor.bind({})}
-    </Story>
+  <Story
+    name="Slider with custom color"
+    args={{
+      label: 'Slider with custom color',
+      value: 20,
+    }}
+  >
+    {TemplateCustomColor.bind({})}
+  </Story>
 </Canvas>
 
 ```html
-<scale-slider label="Slider with custom color" value="20" style="--background-bar: green"></scale-slider>
+<scale-slider
+  label="Slider with custom color"
+  value="20"
+  style="--background-bar: green"
+></scale-slider>
 ```
 
 ## Disabled slider
 
 <Canvas withSource="none">
-    <Story
-        name="Disabled Slider"
-        args={{
-            label: 'Disabled Slider',
-            value: 40,
-            disabled: true
-        }}>
-        {Template.bind({})}
-    </Story>
+  <Story
+    name="Disabled Slider"
+    args={{
+      label: 'Disabled Slider',
+      value: 40,
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
 </Canvas>
 
 ```html