@ebay/skin 18.0.0-next.0 → 18.0.1

package/dist/button/button.css

@@ -254,8 +254,8 @@ button.btn--primary.btn--destructive .progress-spinner {
     --color-spinner-icon-foreground: #ec7089;
 }
 
-a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12,
-button.btn[aria-expanded="true"] svg.icon--chevron-down-12 {
+a.fake-btn[aria-expanded="true"] svg.icon--12,
+button.btn[aria-expanded="true"] svg.icon--12 {
     transform: rotate(180deg);
 }
 

package/dist/carousel/carousel.css

@@ -135,18 +135,14 @@ div.carousel {
 }
 .carousel__control--prev {
     left: calc(var(--spacing-200) * -1);
+    -webkit-margin-end: 1px;
+    margin-inline-end: 1px;
 }
 .carousel__control--next {
     right: calc(var(--spacing-200) * -1);
-}
-.carousel__control .icon--chevron-right-12 {
     -webkit-margin-start: 1px;
     margin-inline-start: 1px;
 }
-.carousel__control .icon--chevron-left-12 {
-    -webkit-margin-end: 1px;
-    margin-inline-end: 1px;
-}
 .carousel__control svg {
     color: var(
         --carousel-paddle-foreground-color,
@@ -224,8 +220,7 @@ span.carousel__container {
     left: calc(var(--spacing-200) * -1);
     right: unset;
 }
-[dir="rtl"] .carousel__control .icon--chevron-left-12,
-[dir="rtl"] .carousel__control .icon--chevron-right-12 {
+[dir="rtl"] .carousel__control .icon--12 {
     transform: rotate(180deg);
 }
 @supports not (

package/dist/carousel/carousel.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/sass/carousel/carousel.scss","carousel.css","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"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","file":"carousel.css"}
+{"version":3,"sources":["../../src/sass/carousel/carousel.scss","carousel.css","../../src/sass/mixins/private/_token-mixins.scss","../../src/sass/mixins/public/_utility-mixins.scss"],"names":[],"mappings":"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","file":"carousel.css"}

package/dist/combobox/combobox.css

@@ -169,11 +169,11 @@ span.combobox {
     display: block;
 }
 
-.combobox--expanded svg.icon--chevron-down-12 {
+.combobox--expanded svg.icon--12 {
     transform: rotate(180deg);
 }
 
-.combobox__control > svg.icon--chevron-down-12 {
+.combobox__control > svg.icon--12 {
     color: var(--combobox-textbox-icon-color, var(--color-foreground-primary));
     pointer-events: none;
     position: absolute;

package/dist/filter-menu/filter-menu.css

@@ -180,27 +180,27 @@ button.filter-menu__footer:hover {
     margin-left: 8px;
 }
 
-.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked-18,
-.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked-18 {
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--checked,
+.filter-menu__item[role="menuitemradio"] svg.icon--checked {
     display: none;
 }
 
-.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked-18,
-.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked-18 {
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--unchecked,
+.filter-menu__item[role="menuitemradio"] svg.icon--unchecked {
     display: block;
 }
 
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
-    svg.icon--checkbox-unchecked-18,
+    svg.icon--unchecked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]
-    svg.icon--radio-unchecked-18 {
+    svg.icon--unchecked {
     display: none;
 }
 
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
-    svg.icon--checkbox-checked-18,
+    svg.icon--checked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]
-    svg.icon--radio-checked-18 {
+    svg.icon--checked {
     display: block;
 }
 div.filter-menu__item[role^="menuitem"]:focus:not(:focus-visible) {

package/dist/filter-menu/filter-menu.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/sass/filter-menu/filter-menu.scss","../../src/sass/mixins/private/_token-mixins.scss","filter-menu.css","../../src/sass/mixins/private/_filter-menu-mixins.scss"],"names":[],"mappings":"AAIA;ECFQ,0FAAA;EDSJ,eAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,cAAA;EACA,cAAA;EACA,iBAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,aAAA;EACA,aAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;AEAJ;AFEI;ECrCI,yEAAA;ED2CA,WAAA;EACA,UAAA;AEHR;;AFOA;EAEI,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AEJJ;AFMI;ECvDI,4EAAA;ACqDR;;AFUA;EAEI,aAAA;AEPJ;;AFUA;ECpEQ,2FAAA;EEIJ,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH0DA,gBAAA;EGzDA,UAAA;ADyDJ;ACvDI;EACI,4EAAA;AD0DR;ACpDI;EFxBI,yFAAA;ACiFR;AClDQ;EF/BA,mFAAA;ACsFR;AChDQ;EACI,wBAAA;ADoDZ;AFjBI;EACI,iBAAA;AEoBR;;AFhBA;EC/EQ,2FAAA;EDmFJ,WAAA;ECnFI,wEAAA;EDsFJ,sBAAA;EACA,oBAAA;EACA,QAAA;EGpFA,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH2EA,YAAA;EG1EA,UAAA;ADmGJ;ACjGI;EACI,4EAAA;ADoGR;AC9FI;EFxBI,yFAAA;AC2HR;AC5FQ;EF/BA,mFAAA;ACgIR;AC1FQ;EACI,wBAAA;AD8FZ;AF1CI;EACI,iDAAA;AE6CR;;AFzCA;EAEI,WAAA;EACA,eAAA;AE4CJ;;AFzCA;EAEI,YAAA;AE4CJ;;AFzCA;EAEI,aAAA;AE4CJ;;AFzCA;EAII,YAAA;AE0CJ;;AFvCA;EAII,aAAA;AEwCJ;AFpCA;EACI,YAAA;AEwCJ","file":"filter-menu.css"}
+{"version":3,"sources":["../../src/sass/filter-menu/filter-menu.scss","../../src/sass/mixins/private/_token-mixins.scss","filter-menu.css","../../src/sass/mixins/private/_filter-menu-mixins.scss"],"names":[],"mappings":"AAIA;ECFQ,0FAAA;EDSJ,eAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,cAAA;EACA,cAAA;EACA,iBAAA;AEAJ;;AFGA;EAEI,oBAAA;AEAJ;;AFGA;EAEI,aAAA;EACA,aAAA;EACA,WAAA;EACA,cAAA;EACA,UAAA;AEAJ;AFEI;ECrCI,yEAAA;ED2CA,WAAA;EACA,UAAA;AEHR;;AFOA;EAEI,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AEJJ;AFMI;ECvDI,4EAAA;ACqDR;;AFUA;EAEI,aAAA;AEPJ;;AFUA;ECpEQ,2FAAA;EEIJ,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH0DA,gBAAA;EGzDA,UAAA;ADyDJ;ACvDI;EACI,4EAAA;AD0DR;ACpDI;EFxBI,yFAAA;ACiFR;AClDQ;EF/BA,mFAAA;ACsFR;AChDQ;EACI,wBAAA;ADoDZ;AFjBI;EACI,iBAAA;AEoBR;;AFhBA;EC/EQ,2FAAA;EDmFJ,WAAA;ECnFI,wEAAA;EDsFJ,sBAAA;EACA,oBAAA;EACA,QAAA;EGpFA,qBAAA;EFJI,+EAAA;EEUJ,YAAA;EACA,kCAAA;EACA,6BAAA;EACA,iBAAA;EACA,QAAA;EH2EA,YAAA;EG1EA,UAAA;ADmGJ;ACjGI;EACI,4EAAA;ADoGR;AC9FI;EFxBI,yFAAA;AC2HR;AC5FQ;EF/BA,mFAAA;ACgIR;AC1FQ;EACI,wBAAA;AD8FZ;AF1CI;EACI,iDAAA;AE6CR;;AFzCA;EAEI,WAAA;EACA,eAAA;AE4CJ;;AFzCA;EAEI,YAAA;AE4CJ;;AFzCA;EAEI,aAAA;AE4CJ;;AFzCA;EAII,YAAA;AE0CJ;;AFxCA;EAII,aAAA;AEyCJ;AFrCA;EACI,YAAA;AEyCJ","file":"filter-menu.css"}

package/dist/filter-menu-button/filter-menu-button.css

@@ -62,7 +62,7 @@ button.filter-menu-button__button:hover {
 .filter-menu-button__button-cell {
     display: flex;
 }
-.filter-menu-button__button-cell svg.icon--chevron-down-12 {
+.filter-menu-button__button-cell svg.icon--12 {
     align-self: center;
     color: var(
         --filter-menu-button-icon-color,
@@ -189,7 +189,7 @@ span.filter-menu-button__radio {
     width: 18px;
 }
 
-span.filter-menu-button__checkbox svg.icon--checkbox-unchecked-18 {
+span.filter-menu-button__checkbox svg.icon--unchecked {
     color: var(
         --filter-menu-item-unchecked-color,
         var(--color-foreground-secondary)
@@ -198,7 +198,7 @@ span.filter-menu-button__checkbox svg.icon--checkbox-unchecked-18 {
     height: 18px;
     width: 18px;
 }
-span.filter-menu-button__checkbox svg.icon--checkbox-checked-18 {
+span.filter-menu-button__checkbox svg.icon--checked {
     color: var(
         --filter-menu-item-checked-color,
         var(--color-foreground-primary)
@@ -208,7 +208,7 @@ span.filter-menu-button__checkbox svg.icon--checkbox-checked-18 {
     width: 18px;
 }
 
-span.filter-menu-button__radio svg.icon--radio-unchecked-18 {
+span.filter-menu-button__radio svg.icon--unchecked {
     color: var(
         --filter-menu-item-unchecked-color,
         var(--color-foreground-primary)
@@ -217,7 +217,7 @@ span.filter-menu-button__radio svg.icon--radio-unchecked-18 {
     height: 18px;
     width: 18px;
 }
-span.filter-menu-button__radio svg.icon--radio-checked-18 {
+span.filter-menu-button__radio svg.icon--checked {
     color: var(
         --filter-menu-item-checked-color,
         var(--color-foreground-primary)
@@ -372,20 +372,20 @@ button.filter-menu-button__footer:hover {
 }
 
 .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
-    svg.icon--checkbox-unchecked-18 {
+    svg.icon--unchecked {
     display: none;
 }
 .filter-menu-button__item[role="menuitemcheckbox"][aria-checked="true"]
-    svg.icon--checkbox-checked-18 {
+    svg.icon--checked {
     display: block;
 }
 
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"]
-    svg.icon--radio-unchecked-18 {
+    svg.icon--unchecked {
     display: none;
 }
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"]
-    svg.icon--radio-checked-18 {
+    svg.icon--checked {
     display: block;
 }
 div.filter-menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {

package/dist/icon/icon.css

@@ -65,5 +65,14 @@ svg.icon--64-colored {
 svg.icon--disabled {
     filter: var(--color-icon-disabled-filter);
 }
+svg.icon--attention-filled {
+    color: var(--color-foreground-attention);
+}
+svg.icon--confirmation-filled {
+    color: var(--color-foreground-confirmation);
+}
+svg.icon--information-filled {
+    color: var(--color-foreground-information);
+}
 
 /*# sourceMappingURL=icon.css.map */

package/dist/icon/icon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/sass/icon/icon.scss","../../src/sass/mixins/private/_icon-mixins.scss","icon.css"],"names":[],"mappings":"AAII;ECCA,oBAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,qBAAA;ACFJ;AFDI;EACI,WAAA;EACA,UAAA;AEGR;AFAI;EACI,WAAA;EACA,UAAA;AEER;AFCI;EACI,WAAA;EACA,UAAA;AECR;AFEI;EACI,WAAA;EACA,UAAA;AEAR;AFGI;EACI,WAAA;EACA,UAAA;AEDR;AFII;EACI,WAAA;EACA,UAAA;AEFR;AFKI;EACI,WAAA;EACA,UAAA;AEHR;AFMI;EACI,WAAA;EACA,UAAA;AEJR;AFOI;EACI,WAAA;AELR;AFQI;EACI,WAAA;AENR;AFSI;EACI,WAAA;AEPR;AFUI;EACI,WAAA;AERR;AFWI;EACI,WAAA;AETR;AFYI;EACI,WAAA;AEVR;AFaI;EACI,WAAA;AEXR;AFcI;EACI,WAAA;AEZR;AFeI;EACI,wCAAA;AEbR","file":"icon.css"}
+{"version":3,"sources":["../../src/sass/icon/icon.scss","../../src/sass/mixins/private/_icon-mixins.scss","icon.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAII;ECCA,oBAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;EACA,qBAAA;ACFJ;AFDI;EACI,WAAA;EACA,UAAA;AEGR;AFAI;EACI,WAAA;EACA,UAAA;AEER;AFCI;EACI,WAAA;EACA,UAAA;AECR;AFEI;EACI,WAAA;EACA,UAAA;AEAR;AFGI;EACI,WAAA;EACA,UAAA;AEDR;AFII;EACI,WAAA;EACA,UAAA;AEFR;AFKI;EACI,WAAA;EACA,UAAA;AEHR;AFMI;EACI,WAAA;EACA,UAAA;AEJR;AFOI;EACI,WAAA;AELR;AFQI;EACI,WAAA;AENR;AFSI;EACI,WAAA;AEPR;AFUI;EACI,WAAA;AERR;AFWI;EACI,WAAA;AETR;AFYI;EACI,WAAA;AEVR;AFaI;EACI,WAAA;AEXR;AFcI;EACI,WAAA;AEZR;AFeI;EACI,wCAAA;AEbR;AFeI;EG9EI,uCAAA;ADkER;AFeI;EGjFI,0CAAA;ADqER;AFeI;EGpFI,yCAAA;ADwER","file":"icon.css"}

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -237,7 +237,7 @@ button.icon-btn.lightbox-dialog__prev {
     max-height: 95%;
 }
 
-[dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--chevron-left-16 {
+[dir="rtl"] button.icon-btn.lightbox-dialog__prev .icon--16 {
     transform: rotate(180deg);
 }
 

package/dist/select/select.css

@@ -28,7 +28,7 @@ span.select {
     vertical-align: middle;
 }
 
-.select svg.icon--chevron-down-12 {
+.select svg.icon--12 {
     height: 100%;
     pointer-events: none;
     position: absolute;

package/dist/toggle-button/toggle-button.css

@@ -159,7 +159,7 @@
     min-width: var(--toggle-button-list-width-min);
 }
 
-.toggle-button--list-layout .toggle-button__content,
+.toggle-button--list-layout .toggle-button__content:not(:only-child),
 .toggle-button--list-layout .toggle-button__image-container {
     align-self: self-start;
 }

package/dist/toggle-button-group/toggle-button-group.css

@@ -59,7 +59,7 @@
     min-width: auto;
 }
 
-.toggle-button-group--list-layout .toggle-button__content,
+.toggle-button-group--list-layout .toggle-button__content:not(:only-child),
 .toggle-button-group--list-layout .toggle-button__image-container {
     align-self: flex-start;
 }

package/dist/variables/variables.less

@@ -0,0 +1,70 @@
+// Responsive Breakpoints
+// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
+// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
+// most mobile devices would be higher in screen width than the smallest viewport width.
+
+// The variables with underscores are to be considered constants. They can be read, but should not be modified.
+@_screen-size-XS: 320px;
+@_screen-size-SM: 512px;
+@_screen-size-MD: 768px;
+@_screen-size-LG: 1024px;
+@_screen-size-XL: 1280px;
+@_screen-size-XL2: 1440px;
+@_screen-size-XL3: 1680px;
+@_screen-size-XL4: 1920px;
+
+@_page-grid-max-width: 1584px;
+@_page-grid-number-cols-small: 8;
+@_page-grid-number-cols-large: 16;
+@_page-grid-outside-margins-small: 16px;
+@_page-grid-outside-margins-large: 32px;
+@_page-grid-outside-margins-max: 48px;
+@_page-grid-column-gaps-small: var(--spacing-100);
+@_page-grid-column-gaps-large: var(--spacing-200);
+@_page-grid-row-gaps-small: var(--spacing-100);
+@_page-grid-row-gaps-large: var(--spacing-200);
+
+@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
+@marketsans-fontname: "Market Sans";
+@marketsans-filename-regular: "MarketSans-Regular-WebS";
+@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
+
+@font-family-default: @marketsans-fontname, Arial, sans-serif;
+// TODO: remove these in next major version
+@font-weight-regular: 500;
+@font-weight-bold: 700;
+
+@font-size-12: 0.75rem;
+@font-size-14: 0.875rem;
+@font-size-16: 1rem;
+@font-size-18: 1.125rem; // secret size
+@font-size-20: 1.25rem;
+@font-size-24: 1.5rem;
+@font-size-30: 1.875rem;
+@font-size-36: 2.25rem;
+@font-size-46: 2.875rem;
+@font-size-64: 4rem;
+
+@spacing-25: @spacing-100 * 0.25;
+@spacing-50: @spacing-100 * 0.5;
+@spacing-75: @spacing-100 * 0.75;
+@spacing-100: 8px;
+@spacing-125: @spacing-100 * 1.25;
+@spacing-150: @spacing-100 * 1.5;
+@spacing-200: @spacing-100 * 2;
+@spacing-250: @spacing-100 * 2.5;
+@spacing-300: @spacing-100 * 3;
+@spacing-400: @spacing-100 * 4;
+@spacing-450: @spacing-100 * 4.5;
+@spacing-600: @spacing-100 * 6;
+@spacing-700: @spacing-100 * 7;
+@spacing-800: @spacing-100 * 8;
+
+@font-size-giant-3: @font-size-46;
+@font-size-giant-2: @font-size-36;
+@font-size-giant-1: @font-size-30;
+@font-size-large-2: @font-size-24;
+@font-size-large-1: @font-size-20;
+@font-size-medium: @font-size-16;
+@font-size-regular: @font-size-14;
+@font-size-small: @font-size-12;

package/lint.log

@@ -1,9 +1,9 @@
 
 /home/runner/work/skin/skin/docs/src/js/main.js
     1:1   warning  Unused eslint-disable directive (no problems were reported from 'no-console')
-   43:56  warning  Unused eslint-disable directive (no problems were reported from 'no-console')
-  293:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
-  295:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
+   41:56  warning  Unused eslint-disable directive (no problems were reported from 'no-console')
+  287:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
+  289:25  warning  Unused eslint-disable directive (no problems were reported from 'eqeqeq')
 
 ✖ 4 problems (0 errors, 4 warnings)
   0 errors and 4 warnings potentially fixable with the `--fix` option.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "18.0.0-next.0",
+    "version": "18.0.1",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

package/src/sass/breadcrumbs/breadcrumbs.scss

@@ -42,7 +42,7 @@ nav.breadcrumbs > ul > li svg {
     margin-right: 3px;
 }
 
-nav.breadcrumbs > ul > li svg.icon--chevron-right-12 {
+nav.breadcrumbs > ul > li svg.icon--12 {
     margin-left: var(--spacing-75);
     margin-right: var(--spacing-75);
 }
@@ -125,7 +125,7 @@ nav.breadcrumbs .menu-button__menu {
     font-size: var(--font-size-default);
 }
 
-[dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
+[dir="rtl"] nav.breadcrumbs svg.icon--12 {
     transform: rotate(180deg);
 }
 

package/src/sass/button/button.scss

@@ -208,8 +208,8 @@ button.btn--primary.btn--destructive .progress-spinner {
     --color-spinner-icon-foreground: #ec7089;
 }
 
-button.btn[aria-expanded="true"] svg.icon--chevron-down-12,
-a.fake-btn[aria-expanded="true"] svg.icon--chevron-down-12 {
+button.btn[aria-expanded="true"] svg.icon--12,
+a.fake-btn[aria-expanded="true"] svg.icon--12 {
     transform: rotate(180deg);
 }
 

package/src/sass/carousel/carousel.scss

@@ -21,20 +21,14 @@ $ebay-carousel-transition-function: ease-in-out;
 
     &--prev {
         left: calc(var(--spacing-200) * -1);
+        margin-inline-end: 1px;
     }
 
     &--next {
         right: calc(var(--spacing-200) * -1);
-    }
-
-    .icon--chevron-right-12 {
         margin-inline-start: 1px;
     }
 
-    .icon--chevron-left-12 {
-        margin-inline-end: 1px;
-    }
-
     align-items: center;
     border: 1px solid;
     @include border-color-token(
@@ -220,8 +214,7 @@ span.carousel__container {
         right: unset;
     }
 
-    .carousel__control .icon--chevron-left-12,
-    .carousel__control .icon--chevron-right-12 {
+    .carousel__control .icon--12 {
         transform: rotate(180deg);
     }
 }

package/src/sass/combobox/combobox.scss

@@ -87,11 +87,11 @@ span.combobox {
     display: block;
 }
 
-.combobox--expanded svg.icon--chevron-down-12 {
+.combobox--expanded svg.icon--12 {
     transform: rotate(180deg);
 }
 
-.combobox__control > svg.icon--chevron-down-12 {
+.combobox__control > svg.icon--12 {
     @include color-token(combobox-textbox-icon-color, color-foreground-primary);
 
     pointer-events: none;

package/src/sass/drawer-dialog/stories/drawer-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: "Skin/Drawer Dialog" };
+export default { title: "Skin/Drawer Dialog (DEPRECATED)" };
 
 export const empty = () => `
 <div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">

package/src/sass/filter-menu/filter-menu.scss

@@ -102,27 +102,26 @@ button.filter-menu-form__footer[type="submit"] {
     margin-left: 8px;
 }
 
-.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked-18,
-.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked-18 {
+.filter-menu__item[role="menuitemradio"] svg.icon--checked,
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--checked {
     display: none;
 }
 
-.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked-18,
-.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked-18 {
+.filter-menu__item[role="menuitemradio"] svg.icon--unchecked,
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--unchecked {
     display: block;
 }
 
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
-    svg.icon--checkbox-unchecked-18,
+    svg.icon--unchecked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]
-    svg.icon--radio-unchecked-18 {
+    svg.icon--unchecked {
     display: none;
 }
-
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
-    svg.icon--checkbox-checked-18,
+    svg.icon--checked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"]
-    svg.icon--radio-checked-18 {
+    svg.icon--checked {
     display: block;
 }
 

package/src/sass/filter-menu/stories/filter-menu.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -16,10 +16,10 @@ export const base = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -27,10 +27,10 @@ export const base = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -45,10 +45,10 @@ export const withDisabled = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false" aria-disabled="true">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -56,10 +56,10 @@ export const withDisabled = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -67,10 +67,10 @@ export const withDisabled = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -85,10 +85,10 @@ export const withFooterButton = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -96,10 +96,10 @@ export const withFooterButton = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -107,10 +107,10 @@ export const withFooterButton = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -126,10 +126,10 @@ export const textSpacing = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -137,10 +137,10 @@ export const textSpacing = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -148,10 +148,10 @@ export const textSpacing = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--18" height="18" width="18">
+                <svg class="icon icon--18 icon--checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>