feat: add segmented-button (#1429)

* fix: ts, a11y, story
telekom · Jan 25, 2023 · 5c454ee · 5c454ee
1 parent a95f917
commit 5c454ee
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 75 deletions.
diff --git a/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap b/packages/components/src/components/segment/__snapshots__/segment.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Segment should match standard snapshot 1`] = `
     <button aria-description="deselected" class="segment segment--small" id="segment-0" part="segment small" type="button">
       <div class="segment--mask">
         <div class="success-icon-container">
-          <scale-icon-action-success accessibility-title="success" class="scale-icon-action-success" selected="" size="14"></scale-icon-action-success>
+          <scale-icon-action-success aria-hidden="true" class="scale-icon-action-success" selected="" size="14"></scale-icon-action-success>
         </div>
         <div class="icon-container">
           <slot name="segment-icon"></slot>

diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
@@ -197,7 +197,7 @@ export class Segment {
                 <scale-icon-action-success
                   size={this.size === 'small' ? 14 : 16}
                   class="scale-icon-action-success"
-                  accessibility-title="success"
+                  aria-hidden="true"
                   selected
                 />
               </div>

diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -167,7 +167,9 @@ export class SegmentedButton {
       return -1;
     } else {
       const allSegments = this.getAllSegments();
-      const selectedIndex = allSegments.findIndex((el) => el.selected === true);
+      const selectedIndex = allSegments.findIndex(
+        (el: HTMLScaleSegmentElement) => el.selected === true
+      );
       return selectedIndex;
     }
   }

diff --git a/...s/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx b/...s/storybook-vue/stories/components/segmented-button/SegmentedButton.stories.mdx
@@ -203,10 +203,10 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 </Canvas>
 
 ```html
-<scale-segmented-button multi-select disabled>
-  <scale-segment>Apple</scale-segment>
-  <scale-segment>One+</scale-segment>
-  <scale-segment selected>Samsung</scale-segment>
+<scale-segmented-button multi-select>
+  <scale-segment selected>Apple</scale-segment>
+  <scale-segment selected>One+</scale-segment>
+  <scale-segment>Samsung</scale-segment>
   <scale-segment>Huawei</scale-segment>
 </scale-segmented-button>
 ```
@@ -257,26 +257,22 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 
 ```html
 <scale-segmented-button>
-  <scale-segment selected
-    ><scale-icon-weather-cloudy
-      slot="segment-icon"
-    ></scale-icon-weather-cloudy
-  ></scale-segment>
-  <scale-segmented-button
-    ><scale-icon-weather-rain
-      slot="segment-icon"
-    ></scale-icon-weather-rain
-  ></scale-segment>
-  <scale-segmented-button
-    ><scale-icon-weather-sunny
-      slot="segment-icon"
-    ></scale-icon-weather-sunny
-  ></scale-segment>
-  <scale-segmented-button
-    ><scale-icon-weahter-heavy-snow
-      slot="segment-icon"
-    ></scale-icon-weahter-heavy-snow
-  ></scale-segment>
+  <scale-segment selected>
+    <scale-icon-weather-cloudy slot="segment-icon">
+    </scale-icon-weather-cloudy>
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-weather-rain slot="segment-icon">
+    </scale-icon-weather-rain>
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-weather-sunny slot="segment-icon">
+    </scale-icon-weather-sunny>
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-weahter-heavy-snow slot="segment-icon">
+    </scale-icon-weahter-heavy-snow>
+  </scale-segment>
 </scale-segmented-button>
 ```
 
@@ -290,30 +286,26 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 
 ```html
 <scale-segmented-button>
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Apple</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >One+</scale-segmented-button
-  >
-  <scale-segment selected
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Samsung</scale-segmented-button
-  >
-  <scale-segment selected
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Huawei</scale-segmented-button
-  >
+  <scale-segment selected>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Apple
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    One+
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Samsung
+    </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Huawei
+    </scale-segment>
 </scale-segmented-button>
 ```
 
@@ -332,29 +324,25 @@ export const InvalidTemplate = (args, { argTypes }) => ({
 
 ```html
 <scale-segmented-button invalid>
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Apple</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >One+</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Samsung</scale-segmented-button
-  >
-  <scale-segmented-button
-    ><scale-icon-device-device-phone
-      slot="segment-icon"
-    ></scale-icon-device-device-phone
-    >Huawei</scale-segmented-button
-  >
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Apple
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    One+
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Samsung
+  </scale-segment>
+  <scale-segment>
+    <scale-icon-device-device-phone slot="segment-icon">
+    </scale-icon-device-device-phone>
+    Huawei
+  </scale-segment>
 </scale-segmented-button>
 ```