@ebay/skin 17.5.0 → 18.0.0

package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss}

@@ -1,11 +1,11 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
-@import "../mixins/public/utility-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
 
-@ebay-carousel-transition-time: 0.45s;
-@ebay-carousel-transition-function: ease-in-out;
+$ebay-carousel-transition-time: 0.45s;
+$ebay-carousel-transition-function: ease-in-out;
 
-.show-control() {
+@mixin show-control() {
     opacity: 0.92;
 
     &[aria-disabled="true"] {
@@ -13,28 +13,29 @@
     }
 }
 
-.carousel-paddle-mixin-base() {
-    .background-color-token(carousel-paddle-background-color, color-background-primary);
+@mixin carousel-paddle-mixin-base() {
+    @include background-color-token(
+        carousel-paddle-background-color,
+        color-background-primary
+    );
 
     &--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;
-    .border-color-token(carousel-paddle-border-color, color-stroke-subtle);
+    @include border-color-token(
+        carousel-paddle-border-color,
+        color-stroke-subtle
+    );
+
     border-radius: 16px;
     box-shadow:
         0 2px 2px 0 rgba(0, 0, 0, 0.24),
@@ -44,45 +45,48 @@
     height: 32px;
     justify-content: center;
     opacity: 0;
-    padding: 0; // override browser default
+    padding: 0; /* override browser default */
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    transition: opacity @ebay-carousel-transition-time
-        @ebay-carousel-transition-function;
+    transition: opacity $ebay-carousel-transition-time
+        $ebay-carousel-transition-function;
     width: 32px;
     z-index: 1;
 
     svg {
-        .color-token(carousel-paddle-foreground-color, color-foreground-primary);
+        @include color-token(
+            carousel-paddle-foreground-color,
+            color-foreground-primary
+        );
     }
 
-    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    /* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
     &:focus:not(:focus-visible) {
         outline: none;
     }
 
-    // progressive enhancement for browsers with support
-    // :focus-within and :hover cannot be combined as
-    // IE/Edge will discard the entire rule
-    @media (min-width: @_screen-size-SM) {
+    /* progressive enhancement for browsers with support */
+    /* :focus-within and :hover cannot be combined as */
+    /* IE/Edge will discard the entire rule */
+    @media (min-width: $_screen-size-SM) {
         .carousel:focus-within & {
-            .show-control();
+            @include show-control();
         }
 
-        // This is needed for some touch devices like Ipad
-        // When clicking a link in the carousel it forces a focus on :hover elements
-        // This removes hover elements on Ipad
+        /* This is needed for some touch devices like Ipad */
+        /* When clicking a link in the carousel it forces a focus on :hover elements */
+        /* This removes hover elements on Ipad */
         @media (hover: hover) {
             .carousel:hover & {
-                .show-control();
+                @include show-control();
             }
         }
     }
 
     &--show,
     &:focus {
-        .show-control();
+        @include show-control();
     }
 
     &:hover {
@@ -90,7 +94,10 @@
         border-color: var(--color-state-primary-hover);
 
         svg {
-            .color-token(carousel-paddle-hover-foreground-color, color-foreground-primary);
+            @include color-token(
+                carousel-paddle-hover-foreground-color,
+                color-foreground-primary
+            );
         }
     }
 
@@ -108,8 +115,8 @@
         width: 100%;
 
         &--controls-disabled .carousel__control.carousel__control {
-            // When controls are disabled, should hide them
-            // If we set opacity to 0, this is removed when we :hover
+            /* When controls are disabled, should hide them */
+            /* If we set opacity to 0, this is removed when we :hover */
 
             display: none;
         }
@@ -120,8 +127,8 @@
         margin: 0;
         padding: 0;
         position: relative;
-        transition: transform @ebay-carousel-transition-time
-            @ebay-carousel-transition-function;
+        transition: transform $ebay-carousel-transition-time
+            $ebay-carousel-transition-function;
         width: 100%;
 
         > li {
@@ -135,9 +142,13 @@
         background-color: rgba(0, 0, 0, 0.45);
         border: 0;
         border-radius: 50%;
-        bottom: 16px; // accounts for padding.
+        bottom: 16px; /* accounts for padding. */
         box-sizing: border-box;
-        .color-token(carousel-playback-foreground-color, color-foreground-on-inverse);
+        @include color-token(
+            carousel-playback-foreground-color,
+            color-foreground-on-inverse
+        );
+
         height: 40px;
         margin-bottom: 19px;
         margin-right: 19px;
@@ -153,18 +164,18 @@
         }
     }
 
-    // slight adjustment needed for play icon
+    /* slight adjustment needed for play icon */
     &__playback .icon--play {
         padding-left: 1px;
     }
 }
 
 .carousel__list--image-treatment > li {
-    .imageTreatment();
+    @include image-treatment();
 }
 
 .carousel__list--image-treatment-large > li {
-    .imageTreatment(16px);
+    @include image-treatment(16px);
 }
 
 div.carousel {
@@ -172,7 +183,7 @@ div.carousel {
 }
 
 .carousel__control {
-    .carousel-paddle-mixin-base();
+    @include carousel-paddle-mixin-base();
 }
 
 .carousel__playback:focus:not(:focus-visible) {
@@ -203,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);
     }
 }
@@ -216,10 +226,10 @@ span.carousel__container {
             (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
             (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
     ) {
-    // always show paddles when scroll snapping and hover is not supported.
-    // todo: rename to .carousel--autoplay
+    /* always show paddles when scroll snapping and hover is not supported. */
+    /* todo: rename to .carousel--autoplay */
     .carousel:not(.carousel__autoplay) .carousel__control {
-        .show-control();
+        @include show-control();
     }
 }
 
@@ -239,7 +249,7 @@ span.carousel__container {
         (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
 ) {
     /* autoprefixer: off */
-    // todo: rename to .carousel--autoplay
+    /* todo: rename to .carousel--autoplay */
     .carousel:not(.carousel__autoplay) {
         overflow: visible;
 
@@ -248,10 +258,10 @@ span.carousel__container {
         }
 
         .carousel__list {
-            // Add transition on border-color in order to support fade in/out of scrollbar
+            /* Add transition on border-color in order to support fade in/out of scrollbar */
             border-color: rgba(0, 0, 0, 0);
             -webkit-overflow-scrolling: touch;
-            overflow-x: auto; // also used in js to determine scroll behavior
+            overflow-x: auto; /* also used in js to determine scroll behavior */
             overflow-y: hidden;
             padding-bottom: 10px;
             scroll-behavior: smooth;
@@ -264,12 +274,12 @@ span.carousel__container {
             scroll-snap-type: x proximity;
             /* stylelint-enable declaration-block-no-duplicate-properties */
             scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
-            scrollbar-width: thin; // Firefox scrollbar
+            scrollbar-width: thin; /* Firefox scrollbar */
             transition:
                 border-color 0.5s,
                 scrollbar-color 0.5s,
-                transform @ebay-carousel-transition-time
-                    @ebay-carousel-transition-function;
+                transform $ebay-carousel-transition-time
+                    $ebay-carousel-transition-function;
 
             &:hover {
                 border-color: rgba(0, 0, 0, 0.4);
@@ -281,7 +291,7 @@ span.carousel__container {
             }
 
             &::-webkit-scrollbar-thumb {
-                // This creates a scrollbar to be colored by border
+                /* This creates a scrollbar to be colored by border */
                 border-color: inherit;
                 border-radius: 4px;
                 border-right-style: inset;
@@ -297,14 +307,14 @@ span.carousel__container {
         scroll-snap-coordinate: 0 0;
     }
     /* autoprefixer: on */
-    @media (min-width: @_screen-size-SM) {
+    @media (min-width: $_screen-size-SM) {
         div.carousel {
             margin: 16px 0;
         }
     }
 }
 
-// todo: rename to .carousel--autoplay
+/* todo: rename to .carousel--autoplay */
 .carousel.carousel--hidden-scrollbar:not(.carousel__autoplay) {
     overflow: hidden;
 }
@@ -321,12 +331,12 @@ span.carousel__container {
     padding-bottom: 80px;
 }
 
-// hidden-scrollbar must have inner paddle position due to overflow: hidden
+/* hidden-scrollbar must have inner paddle position due to overflow: hidden */
 .carousel--hidden-scrollbar .carousel__control--prev {
     left: 0;
 }
 
-// hidden-scrollbar must have inner paddle position due to overflow: hidden
+/* hidden-scrollbar must have inner paddle position due to overflow: hidden */
 .carousel--hidden-scrollbar .carousel__control--next {
     right: 0;
 }

package/src/{less → sass}/carousel/stories/carousel.stories.js

@@ -4,7 +4,7 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -21,7 +21,7 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -33,7 +33,7 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -50,7 +50,7 @@ export const imageTreatment = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -62,7 +62,7 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -79,7 +79,7 @@ export const imageTreatmentLarge = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -94,7 +94,7 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+            <svg aria-hidden="true" class="icon icon--16" >
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -111,7 +111,7 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -126,7 +126,7 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+            <svg aria-hidden="true" class="icon icon--16" >
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -139,13 +139,13 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
     <button class="carousel__playback" aria-label="Play - Top Products">
-        <svg class="icon icon--play-24" aria-hidden="true">
+        <svg class="icon icon--24" aria-hidden="true">
             <use href="#icon-play-24"></use>
         </svg>
     </button>
@@ -160,7 +160,7 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-left-16">
+                <svg aria-hidden="true" class="icon icon--16">
                     <use href="#icon-chevron-left-16"></use>
                 </svg>
             </button>
@@ -173,13 +173,13 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-right-16" >
+                <svg aria-hidden="true" class="icon icon--16" >
                     <use href="#icon-chevron-right-16"></use>
                 </svg>
             </button>
         </div>
         <button class="carousel__playback" aria-label="Play - Top Products">
-            <svg class="icon icon--play-24" aria-hidden="true">
+            <svg class="icon icon--24" aria-hidden="true">
                 <use href="#icon-play-24"></use>
             </svg>
         </button>
@@ -191,7 +191,7 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -208,7 +208,7 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -221,7 +221,7 @@ export const continuousWithPaddlesVisible = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -238,7 +238,7 @@ export const continuousWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -254,7 +254,7 @@ export const slidesWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+            <svg aria-hidden="true" class="icon icon--16" >
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -271,7 +271,7 @@ export const slidesWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
@@ -287,7 +287,7 @@ export const slideshowWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16" >
+            <svg aria-hidden="true" class="icon icon--16" >
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -300,13 +300,13 @@ export const slideshowWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>
     </div>
     <button class="carousel__playback" aria-label="Play - Top Products">
-        <svg class="icon icon--play-24" aria-hidden="true">
+        <svg class="icon icon--24" aria-hidden="true">
             <use href="#icon-play-24"></use>
         </svg>
     </button>
@@ -318,7 +318,7 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-left-16"></use>
             </svg>
         </button>
@@ -335,7 +335,7 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-16">
+            <svg aria-hidden="true" class="icon icon--16">
                 <use href="#icon-chevron-right-16"></use>
             </svg>
         </button>

package/src/sass/chart-legend/chart-legend.scss

@@ -0,0 +1,74 @@
+.chart-legend {
+    width: 100%;
+}
+
+.chart-legend dl {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    row-gap: var(--spacing-200);
+}
+
+.chart-legend__item {
+    align-items: center;
+    display: flex;
+    font-size: var(--font-size-small);
+    width: 100%;
+}
+
+.chart-legend__item::before {
+    border: 1px solid;
+    border-radius: 2px;
+    box-sizing: border-box;
+    content: "";
+    display: inline-block;
+    height: 10px;
+    margin-inline-end: var(--spacing-100);
+    width: 10px;
+}
+
+.chart-legend dl > .chart-legend__item:nth-child(1)::before {
+    background: var(--color-data-viz-chart-primary);
+    border-color: var(--color-data-viz-chart-primary);
+}
+
+.chart-legend dl > .chart-legend__item:nth-child(2)::before {
+    background: var(--color-data-viz-chart-secondary);
+    border-color: var(--color-data-viz-chart-secondary);
+}
+
+.chart-legend dl > .chart-legend__item:nth-child(3)::before {
+    background: repeating-linear-gradient(
+        30deg,
+        var(--color-data-viz-chart-tertiary-background),
+        var(--color-data-viz-chart-tertiary-background) 2px,
+        var(--color-data-viz-chart-tertiary-stroke) 2px,
+        var(--color-data-viz-chart-tertiary-stroke) 3px,
+        var(--color-data-viz-chart-tertiary-background) 3px,
+        var(--color-data-viz-chart-tertiary-background) 4px
+    );
+    border: 1px solid var(--color-data-viz-chart-tertiary-stroke);
+}
+
+.chart-legend dl > .chart-legend__item:nth-child(4)::before {
+    background: repeating-linear-gradient(
+        0deg,
+        var(--color-data-viz-chart-quaternary-background),
+        var(--color-data-viz-chart-quaternary-background) 2px,
+        var(--color-data-viz-chart-quaternary-stroke) 2px,
+        var(--color-data-viz-chart-quaternary-stroke) 3px,
+        var(--color-data-viz-chart-quaternary-background) 3px,
+        var(--color-data-viz-chart-quaternary-background) 4px
+    );
+    border: 1px solid var(--color-data-viz-chart-quaternary-stroke);
+}
+
+.chart-legend dl > .chart-legend__item:nth-child(5)::before {
+    background: var(--color-data-viz-chart-quinary-background);
+    border-color: var(--color-data-viz-chart-quinary-stroke);
+}
+
+.chart-legend__label {
+    flex: 1;
+}

package/src/sass/chart-legend/stories/chart-legend.stories.js

@@ -0,0 +1,65 @@
+export default { title: "Skin/Charts/Chart Legend" };
+
+export const base = () => `
+<div style="width:250px;">
+    <div class="chart-legend">
+        <dl>
+            <div class="chart-legend__item chart-legend__item--primary">
+                <dt class="chart-legend__label">Portion 1</dt>
+                <dd class="chart-legend__value">10%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--secondary">
+                <dt class="chart-legend__label">Portion 2</dt>
+                <dd class="chart-legend__value">20%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--tertiary">
+                <dt class="chart-legend__label">Portion 3</dt>
+                <dd class="chart-legend__value">30%</dd>
+            </div>
+        </dl>
+    </div>
+</div>`;
+
+export const twoValues = () => `
+<div style="width:250px;">
+    <div class="chart-legend">
+        <dl>
+            <div class="chart-legend__item chart-legend__item--primary">
+                <dt class="chart-legend__label">Portion 1</dt>
+                <dd class="chart-legend__value">30%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--secondary">
+                <dt class="chart-legend__label">Portion 2</dt>
+                <dd class="chart-legend__value">70%</dd>
+            </div>
+        </dl>
+    </div>
+</div>`;
+
+export const fiveValues = () => `
+<div style="width:250px;">
+    <div class="chart-legend">
+        <dl>
+            <div class="chart-legend__item chart-legend__item--primary">
+                <dt class="chart-legend__label">Portion 1</dt>
+                <dd class="chart-legend__value">10%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--secondary">
+                <dt class="chart-legend__label">Portion 2</dt>
+                <dd class="chart-legend__value">20%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--tertiary">
+                <dt class="chart-legend__label">Portion 3</dt>
+                <dd class="chart-legend__value">30%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--quaternary">
+                <dt class="chart-legend__label">Portion 4</dt>
+                <dd class="chart-legend__value">30%</dd>
+            </div>
+            <div class="chart-legend__item chart-legend__item--quinary">
+                <dt class="chart-legend__label">Portion 5</dt>
+                <dd class="chart-legend__value">10%</dd>
+            </div>
+        </dl>
+    </div>
+</div>`;