@ebay/skin 14.1.3 → 14.2.1

package/src/less/page-notice/stories/page-notice.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Page Notice/Page Notice' };
+export default { title: 'Page Notice' };
 
 export const general = () => `
 <section class="page-notice page-notice--general" role="region" aria-label="Information">
@@ -33,8 +33,8 @@ export const generalWithLink = () => `
 export const confirmationWithButton = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -49,8 +49,8 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -65,8 +65,8 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -81,8 +81,8 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -97,8 +97,8 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -113,8 +113,8 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -129,8 +129,8 @@ export const informationWithLink = () => `
 export const dismissableWithTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -140,8 +140,8 @@ export const dismissableWithTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
-                <use xlink:href="#icon-close"></use>
+            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
+                <use href="#icon-close-small"></use>
             </svg>
         </a>
     </div>
@@ -151,8 +151,8 @@ export const dismissableWithTitle = () => `
 export const dismissableWithoutTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled" focusable="false" height="24" width="24" role="img" aria-label="Information">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -161,8 +161,8 @@ export const dismissableWithoutTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="10" width="10">
-                <use xlink:href="#icon-close"></use>
+            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
+                <use href="#icon-close-small"></use>
             </svg>
         </a>
     </div>
@@ -172,8 +172,8 @@ export const dismissableWithoutTitle = () => `
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled" focusable="false" height="24" width="24" role="img" aria-label="Attention">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">

package/src/less/page-notice/stories/test.stories.js

@@ -1,11 +1,11 @@
-export default { title: 'Page Notice/Page Notice/Tests' };
+export default { title: 'Page Notice/Tests' };
 
 export const RTL = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -22,8 +22,8 @@ export const RTL = () => `
 export const longText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -38,8 +38,8 @@ export const longText = () => `
 export const legacy = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -52,8 +52,8 @@ export const legacy = () => `
 export const legacyLongText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -66,8 +66,8 @@ export const legacyLongText = () => `
 export const legacyLongTextAndCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -83,8 +83,8 @@ export const legacyLongTextAndCTA = () => `
 export const legacyMultiParagraph = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -98,8 +98,8 @@ export const legacyMultiParagraph = () => `
 export const legacyMultiParagraphWithCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </div>
         <div class="page-notice__main">

package/src/less/pagination/stories/button-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Pagination/Buttons/Cascade' };
+export default { title: 'Pagination/Buttons/Cascade' };
 
 export const fontSize = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation" style="font-size: 200%">

package/src/less/pagination/stories/buttons.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Pagination/Buttons' };
+export default { title: 'Pagination/Buttons' };
 
 export const base = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

package/src/less/pagination/stories/link-cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Pagination/Links/Cascade' };
+export default { title: 'Pagination/Links/Cascade' };
 
 export const fontSize = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation" style="font-size: 200%">

package/src/less/pagination/stories/links.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Pagination/Links' };
+export default { title: 'Pagination/Links' };
 
 export const base = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

package/src/less/pagination/stories/overflow.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Pagination/Pagination/Overflow' };
+export default { title: 'Pagination/Overflow' };
 
 export const start = () => `
 <nav class="pagination" aria-labelledby="pagination-heading" role="navigation">

package/src/less/panel-dialog/stories/panel-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Panel Dialog/Panel Dialog' };
+export default { title: 'Panel Dialog' };
 
 export const panelStart = () => `
 <div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">

package/src/less/program-badge/program-badge.less

@@ -1,7 +1,7 @@
 @import "../variables/variables.less";
 @import "../mixins/private/program-badge-mixins.less";
 @import "../mixins/private/token-mixins.less";
-@import "../icon/generated/program-badges.less";
+@import "../icon/generated/icon.less";
 
 svg {
     &.program-badge {

package/src/less/progress-bar/stories/progress-bar.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Progress Bar/Progress Bar' };
+export default { title: 'Progress Bar' };
 
 export const empty = () => `<progress class="progress" value=1 max=100>0%</progress>`;
 

package/src/less/progress-spinner/stories/progress-spinner.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Progress Spinner/Progress Spinner' };
+export default { title: 'Progress Spinner' };
 
 export const base = () =>
     `<span class="progress-spinner" aria-label="Busy animation" role="img">

package/src/less/progress-stepper/stories/progress-stepper.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Progress Stepper/Progress Stepper' };
+export default { title: 'Progress Stepper' };
 
 export const base = () => `
 <div class="progress-stepper">

package/src/less/radio/stories/checked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Radio/Radio/Checked' };
+export default { title: 'Radio/Checked' };
 
 export const base = () => `
 <span class="radio">

package/src/less/radio/stories/unchecked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Radio/Radio/Unchecked' };
+export default { title: 'Radio/Unchecked' };
 
 export const base = () => `
 <span class="radio">

package/src/less/section-notice/section-notice.less

@@ -54,7 +54,7 @@ span[role="region"].section-notice {
     align-items: center;
     display: flex;
     justify-content: center;
-    padding-right: @spacing-200;
+    padding-right: @spacing-150;
 }
 
 .section-notice__main,

package/src/less/section-notice/stories/section-notice.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Section Notice/Section Notice' };
+export default { title: 'Section Notice' };
 
 export const general = () => `
 <div class="section-notice" role="region">
@@ -33,8 +33,8 @@ export const generalWithLink = () => `
 export const confirmationWithButton = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -49,8 +49,8 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -65,8 +65,8 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <div class="section-notice section-notice--attention" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--attention-filled">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-small">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -81,8 +81,8 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <div class="section-notice section-notice--attention" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--attention-filled">
-            <use xlink:href="#icon-attention-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--attention-filled-small">
+            <use href="#icon-attention-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -97,8 +97,8 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <div class="section-notice section-notice--information" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--information-filled">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--information-filled-small">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -113,8 +113,8 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <div class="section-notice section-notice--information" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--information-filled">
-            <use xlink:href="#icon-information-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--information-filled-small">
+            <use href="#icon-information-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">

package/src/less/section-notice/stories/test.stories.js

@@ -1,11 +1,11 @@
-export default { title: 'Section Notice/Section Notice/Tests' };
+export default { title: 'Section Notice/Tests' };
 
 export const RTL = () => `
 <div dir="rtl">
     <div class="section-notice section-notice--confirmation" role="region">
         <div class="section-notice__header" role="region" aria-roledescription="Notice">
-            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-                <use xlink:href="#icon-confirmation-filled"></use>
+            <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+                <use href="#icon-confirmation-filled-small"></use>
             </svg>
         </div>
         <div class="section-notice__main">
@@ -21,8 +21,8 @@ export const RTL = () => `
 export const longText = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -34,8 +34,8 @@ export const longText = () => `
 export const longTextWithCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -50,8 +50,8 @@ export const longTextWithCTA = () => `
 export const legacy = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -64,8 +64,8 @@ export const legacy = () => `
 export const legacyWithCTA = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled">
-            <use xlink:href="#icon-confirmation-filled"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
         </svg>
     </div>
     <div class="section-notice__main">

package/src/less/section-title/stories/rtl.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Section Title/Section Title/RTL' };
+export default { title: 'Section Title/RTL' };
 
 export const heading = () => `
 <div dir="rtl">

package/src/less/section-title/stories/section-title.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Section Title/Section Title' };
+export default { title: 'Section Title' };
 
 export const heading = () => `
 <div class="section-title">

package/src/less/select/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Select/Select/Cascade' };
+export default { title: 'Select/Cascade' };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/select/stories/default.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Select/Select' };
+export default { title: 'Select' };
 
 export const defaultSelection = () => `
 <span class="select">

package/src/less/signal/stories/signal.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Hotness Signals/Hotness Signals' };
+export default { title: 'Hotness Signals' };
 
 export const trustWorthy = () => `
 <span class="signal signal--trustworthy">

package/src/less/snackbar-dialog/stories/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Snackbar Dialog/Snackbar Dialog/Base' };
+export default { title: 'Snackbar Dialog/Base' };
 
 export const noAction = () => `
     <aside aria-label="Notification" aria-live="polite" aria-modal="false" class="snackbar-dialog" role="dialog">

package/src/less/snackbar-dialog/stories/font-size.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Snackbar Dialog/Snackbar Dialog/Font-Size' };
+export default { title: 'Snackbar Dialog/Font-Size' };
 
 export const noAction = () => `
     <div style="font-size: 200%">

package/src/less/snackbar-dialog/stories/rtl.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Snackbar Dialog/Snackbar Dialog/RTL' };
+export default { title: 'Snackbar Dialog/RTL' };
 
 export const noAction = () => `
     <div dir="rtl">

package/src/less/split-button/stories/base.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Split Button/Split Button/Base' };
+export default { title: 'Split Button/Base' };
 export const primaryCollapsed = () => `
 <span class="split-button">
     <button class="btn btn--primary btn--split-start" type="button">

package/src/less/split-button/stories/rtl.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Split Button/Split Button/RTL' };
+export default { title: 'Split Button/RTL' };
 
 export const primaryCollapsed = () => `
 <div dir="rtl">

package/src/less/split-button/stories/size.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Split Button/Split Button/Size' };
+export default { title: 'Split Button/Size' };
 export const longTextCollapsed = () => `
 <span class="split-button">
     <button class="btn btn--primary btn--split-start btn--truncated" aria-haspopup="true" type="button">

package/src/less/star-rating-select/stories/star-rating-select.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Star Rating Select/Star Rating Select' };
+export default { title: 'Star Rating Select' };
 
 export const base = () => `
 <div role="radiogroup" aria-label="Rate this product" class="star-rating-select">

package/src/less/switch/stories/form.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Switch/Switch/Form' };
+export default { title: 'Switch/Form' };
 
 export const on = () => `
 <div class="switch">

package/src/less/switch/stories/script.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Switch/Switch/Script' };
+export default { title: 'Switch/Script' };
 
 export const on = () => `
 <div class="switch">

package/src/less/tabs/stories/fake-tabs/block.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Tabs/Tabs/Fake Tabs/Block' };
+export default { title: 'Tabs/Fake Tabs/Block' };
 
 export const two = () => `
 <div class="fake-tabs">

package/src/less/tabs/stories/fake-tabs/inlineBlock.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Tabs/Tabs/Fake Tabs/Inline-Block' };
+export default { title: 'Tabs/Fake Tabs/Inline-Block' };
 
 export const two = () => `
 <span class="fake-tabs">

package/src/less/tabs/stories/tabs/block.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Tabs/Tabs/Block' };
+export default { title: 'Tabs/Block' };
 
 export const two = () => `
 <div class="tabs">

package/src/less/tabs/stories/tabs/inlineBlock.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Tabs/Tabs/Inline-Block' };
+export default { title: 'Tabs/Inline-Block' };
 
 export const two = () => `
 <span class="tabs">

package/src/less/textbox/stories/icon.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Textbox/Textbox/Icon' };
+export default { title: 'Textbox/Icon' };
 
 export const base = () => `
 <span class="textbox">

package/src/less/textbox/stories/rtl/icon.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Textbox/Textbox/RTL/Icon' };
+export default { title: 'Textbox/RTL/Icon' };
 
 export const base = () => `
 <div dir="rtl">

package/src/less/textbox/stories/rtl/textbox.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Textbox/Textbox/RTL' };
+export default { title: 'Textbox/RTL' };
 
 export const singleLine = () => `
 <div dir="rtl">

package/src/less/textbox/stories/textbox.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Textbox/Textbox' };
+export default { title: 'Textbox' };
 
 export const singleLine = () => `
 <span class="textbox">

package/src/less/toast-dialog/stories/toast-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Toast Dialog/Toast Dialog' };
+export default { title: 'Toast Dialog' };
 
 export const primaryAction = () => `
 <aside class="toast-dialog" aria-label="Notification" aria-live="polite" aria-modal="false" role="dialog">