@uh-design-system/component-library 0.5.3 → 0.6.0

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.css

@@ -6,28 +6,26 @@ body {
   font-size: 1rem;
 }
 
-/* Font Family */
+/* Font */
+.ds-font {
+  /* Font Family */
+  /* Font Weights */
+}
 .ds-font--heading {
   font-family: var(--ds-fontFamily-heading);
 }
-
 .ds-font--body {
   font-family: var(--ds-fontFamily-body);
 }
-
-/* Font Weights */
 .ds-font--regular {
   font-weight: var(--ds-fontWeight-regular);
 }
-
 .ds-font--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-
 .ds-font--semibold-plus {
   font-weight: var(--ds-fontWeight-semiboldPlus);
 }
-
 .ds-font--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
@@ -36,19 +34,15 @@ body {
 .ds-tracking--xtight {
   letter-spacing: var(--ds-letterSpacing-xTight);
 }
-
 .ds-tracking--tight {
   letter-spacing: var(--ds-letterSpacing-tight);
 }
-
 .ds-tracking--normal {
   letter-spacing: var(--ds-letterSpacing-normal);
 }
-
 .ds-tracking--wide {
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-
 .ds-tracking--xwide {
   letter-spacing: var(--ds-letterSpacing-xWide);
 }
@@ -57,15 +51,12 @@ body {
 .ds-leading--small {
   line-height: var(--ds-lineHeight-small);
 }
-
 .ds-leading--medium {
   line-height: var(--ds-lineHeight-medium);
 }
-
 .ds-leading--large {
   line-height: var(--ds-lineHeight-large);
 }
-
 .ds-leading--xlarge {
   line-height: var(--ds-lineHeight-xLarge);
 }
@@ -74,7 +65,6 @@ body {
 .ds-width--normal {
   font-stretch: var(--ds-fontWidth-normal);
 }
-
 .ds-width--condense {
   font-stretch: var(--ds-fontWidth-condense);
 }
@@ -84,15 +74,15 @@ body {
   font-variant-numeric: var(--ds-number-style);
 }
 
-/* Paragraph and List Spacing */
+/* Paragraph */
 .ds-paragraph--16 {
   margin-bottom: var(--ds-fontSize-16);
 }
-
 .ds-paragraph--20 {
   margin-bottom: var(--ds-fontSize-20);
 }
 
+/* List */
 .ds-list--spacing {
   gap: 4px;
 }
@@ -102,146 +92,131 @@ body {
   color: var(--ds-palette-black-95);
 }
 
-/* Regular Text Sizes */
+/* Text Sizes */
+.ds-text {
+  /* Regular Text Sizes */
+  /* Semibold Text Sizes */
+  /* Bold Text Sizes */
+}
 .ds-text--2xl-regular {
   font-size: var(--ds-fontSize-22);
   font-weight: var(--ds-fontWeight-regular);
 }
-
 .ds-text--xl-regular {
   font-size: var(--ds-fontSize-20);
   font-weight: var(--ds-fontWeight-regular);
 }
-
 .ds-text--lg-regular {
   font-size: var(--ds-fontSize-18);
   font-weight: var(--ds-fontWeight-regular);
 }
-
 .ds-text--md-regular {
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
 }
-
 .ds-text--sm-regular {
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
 }
-
 .ds-text--xs-regular {
   font-size: var(--ds-fontSize-12);
   font-weight: var(--ds-fontWeight-regular);
 }
-
-/* Semibold Text Sizes */
 .ds-text--2xl-semibold {
   font-size: var(--ds-fontSize-22);
   font-weight: var(--ds-fontWeight-semibold);
 }
-
 .ds-text--xl-semibold {
   font-size: var(--ds-fontSize-20);
   font-weight: var(--ds-fontWeight-semibold);
 }
-
 .ds-text--lg-semibold {
   font-size: var(--ds-fontSize-18);
   font-weight: var(--ds-fontWeight-semibold);
 }
-
 .ds-text--md-semibold {
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
 }
-
 .ds-text--sm-semibold {
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-semibold);
 }
-
 .ds-text--xs-semibold {
   font-size: var(--ds-fontSize-12);
   font-weight: var(--ds-fontWeight-semibold);
 }
-
-/* Bold Text Sizes */
 .ds-text--2xl-bold {
   font-size: var(--ds-fontSize-22);
   font-weight: var(--ds-fontWeight-bold);
 }
-
 .ds-text--xl-bold {
   font-size: var(--ds-fontSize-20);
   font-weight: var(--ds-fontWeight-bold);
 }
-
 .ds-text--lg-bold {
   font-size: var(--ds-fontSize-18);
   font-weight: var(--ds-fontWeight-bold);
 }
-
 .ds-text--md-bold {
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-bold);
 }
-
 .ds-text--sm-bold {
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-bold);
 }
-
 .ds-text--xs-bold {
   font-size: var(--ds-fontSize-12);
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__container {
+.ds-spinner {
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Size */
+  /* Position */
 }
-.ds-spinner__container__size--small {
+.ds-spinner--small {
   padding: 1.5px;
 }
-.ds-spinner__container__size--small:has(.ds-spinner__text) {
+.ds-spinner--small:has(.ds-spinner__text) {
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-spinner__container__size--medium {
+.ds-spinner--medium {
   padding: 3px;
 }
-.ds-spinner__container__size--medium:has(.ds-spinner__text) {
+.ds-spinner--medium:has(.ds-spinner__text) {
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-spinner__container__size--large {
+.ds-spinner--large {
   padding: 3px;
 }
-.ds-spinner__container__size--large:has(.ds-spinner__text) {
+.ds-spinner--large:has(.ds-spinner__text) {
   gap: var(--ds-spacing-xSmall);
 }
-.ds-spinner__container__size--xLarge {
+.ds-spinner--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__container__size--xLarge:has(.ds-spinner__text) {
+.ds-spinner--xLarge:has(.ds-spinner__text) {
   gap: 10px;
 }
-.ds-spinner__container__size--2xLarge {
+.ds-spinner--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__container__size--2xLarge:has(.ds-spinner__text) {
+.ds-spinner--2xLarge:has(.ds-spinner__text) {
   gap: var(--ds-spacing-small);
 }
-
-.ds-spinner__container--below {
+.ds-spinner--below {
   flex-direction: column;
   align-items: center;
 }
-
-.ds-spinner__container--right {
+.ds-spinner--right {
   flex-direction: row;
   align-items: center;
 }
-
-.ds-spinner {
+.ds-spinner__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -251,39 +226,34 @@ body {
   align-items: center;
   justify-content: center;
 }
-
 .ds-spinner__text {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-palette-black-95);
 }
-.ds-spinner__text__color--white {
+.ds-spinner__text--white {
   color: var(--ds-palette-white);
 }
-
 .ds-spinner__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
-  border: calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005A94);
+  border: calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);
   border-radius: 50%;
-  animation: ds-spinner__rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
-  border-color: var(--spinner-color, #005A94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
+  animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
+  border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
 }
-
 .ds-spinner__segment--1 {
   animation-delay: -0.3s;
 }
-
 .ds-spinner__segment--2 {
   animation-delay: -0.2s;
 }
-
 .ds-spinner__segment--3 {
   animation-delay: -0.1s;
 }
 
-@keyframes ds-spinner__rotate {
+@keyframes ds-spinner-rotate {
   0% {
     transform: rotate(0deg);
   }

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.js

@@ -6,7 +6,7 @@ const SPINNER_SIZES = {
     'medium': 14,
     'large': 20,
     'xLarge': 28,
-    '2xLarge': 40
+    '2xLarge': 40,
 };
 const SPINNER_TEXT_SIZES = {
     'small': 'ds-text--xs-regular',
@@ -16,37 +16,37 @@ const SPINNER_TEXT_SIZES = {
     '2xLarge': 'ds-text--xl-regular',
 };
 const SPINNER_COLORS = {
-    'blue': 'var(--ds-palette-mainBlue-70)',
-    'black': 'var(--ds-palette-black-95)',
-    'white': 'var(--ds-palette-white)',
+    blue: 'var(--ds-palette-mainBlue-70)',
+    black: 'var(--ds-palette-black-95)',
+    white: 'var(--ds-palette-white)',
 };
 export class DsSpinner {
     inheritedAttributes = {};
     el;
-    text;
-    size = 'medium';
-    spinnerTextPosition = 'below';
-    spinnerColor = 'blue';
-    useRoleAlert = false;
-    useAriaLive = false;
-    hiddenAssistiveText;
+    dsText;
+    dsSize = 'medium';
+    dsSpinnerTextPosition = 'below';
+    dsSpinnerColor = 'blue';
+    dsUseRoleAlert = false;
+    dsUseAriaLive = false;
+    dsHiddenAssistiveText;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     render() {
-        const sizeInPixels = SPINNER_SIZES[this.size];
-        const textSizeClass = SPINNER_TEXT_SIZES[this.size];
-        const spinnerColorVariable = SPINNER_COLORS[this.spinnerColor];
-        const containerClasses = classNames('ds-spinner__container', `ds-spinner__container__size--${this.size}`, {
-            [`ds-spinner__container--${this.spinnerTextPosition}`]: !!this.text
+        const sizeInPixels = SPINNER_SIZES[this.dsSize];
+        const textSizeClass = SPINNER_TEXT_SIZES[this.dsSize];
+        const spinnerColorVariable = SPINNER_COLORS[this.dsSpinnerColor];
+        const classes = classNames('ds-spinner', `ds-spinner--${this.dsSize}`, {
+            [`ds-spinner--${this.dsSpinnerTextPosition}`]: !!this.dsText,
         });
-        const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text__color--${this.spinnerColor}`);
-        const segmentClasses = (index) => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
-        return (h("div", { key: '84577c89a692d5e6757776b65908ae871e06b8fd', role: this.useRoleAlert ? 'alert' : null, "aria-live": this.useAriaLive ? 'polite' : null, class: containerClasses, style: {
+        const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
+        const segmentClasses = index => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        return (h("div", { key: '3d312dd8883b903bb59c8ceface626444ac0df44', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
-                '--spinner-border-color': this.spinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: 'ea78336e6d44772e3acf74a9ff2f1406505bcd2e', class: "ds-spinner" }, h("div", { key: 'a51be13c025d62fd36de80cd377dea6db97b1ae7', class: segmentClasses(1) }), h("div", { key: 'd519fd07f69b78f124367ecf1681a2361eed4f9f', class: segmentClasses(2) }), h("div", { key: '7ffd7b032f8753c0e182e37a8ca5f4db11a6701b', class: segmentClasses(3) })), this.hiddenAssistiveText && (h("ds-visually-hidden", { key: '162421ae07e134b0bcfb14e00719130c893cadfb' }, h("span", { key: '9d9d00b855542f63c9ebf34e507a65bf092dcce8' }, this.hiddenAssistiveText))), this.text && (h("span", { key: 'e50d5028875294acd54828e1217d03213148ee58', class: textClasses }, this.text))));
+                '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
+            }, ...this.inheritedAttributes }, h("div", { key: '81d04de4de327d4b8be4a03a4b0f97d56214547e', class: "ds-spinner__spinner" }, h("div", { key: 'f7136c4637d17bc796d2e69df8aae51244d1d97e', class: segmentClasses(1) }), h("div", { key: 'd839ca7f1aae71616062b82af2d5b7610299bf25', class: segmentClasses(2) }), h("div", { key: 'bcbd84559e7fd2204320f4788837df61aed6208a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '8b3f758381d1623f84e0c237ec17b97a81a85983' }, h("span", { key: '52930b05b2b868c38f785b09d6bb86dddfde828b' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '91677c1f685820bc32f6c8557df98c1c37cdbf8e', class: textClasses }, this.dsText)));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -62,8 +62,9 @@ export class DsSpinner {
     }
     static get properties() {
         return {
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -74,15 +75,15 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text to display alongside spinner"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
-            "size": {
+            "dsSize": {
                 "type": "string",
+                "attribute": "ds-size",
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerSize",
@@ -98,16 +99,16 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size of the spinner"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
-            "spinnerTextPosition": {
+            "dsSpinnerTextPosition": {
                 "type": "string",
+                "attribute": "ds-spinner-text-position",
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerTextPosition",
@@ -123,16 +124,16 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Where to display the `dsText` property"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spinner-text-position",
                 "reflect": false,
                 "defaultValue": "'below'"
             },
-            "spinnerColor": {
+            "dsSpinnerColor": {
                 "type": "string",
+                "attribute": "ds-spinner-color",
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerColor",
@@ -148,16 +149,16 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Color of the spinner"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spinner-color",
                 "reflect": false,
                 "defaultValue": "'blue'"
             },
-            "useRoleAlert": {
+            "dsUseRoleAlert": {
                 "type": "boolean",
+                "attribute": "ds-use-role-alert",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -168,16 +169,16 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Sets `role=\"alert\"` attribute to the spinner element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "use-role-alert",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "useAriaLive": {
+            "dsUseAriaLive": {
                 "type": "boolean",
+                "attribute": "ds-use-aria-live",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,16 +189,16 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Sets `aria-live=\"polite\"` attribute to the spinner element"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "use-aria-live",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "hiddenAssistiveText": {
+            "dsHiddenAssistiveText": {
                 "type": "string",
+                "attribute": "ds-hidden-assistive-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -208,11 +209,10 @@ export class DsSpinner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visually hidden information for screen readers"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hidden-assistive-text",
                 "reflect": false
             }
         };

package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.examples.stories.js

@@ -10,34 +10,34 @@ const spinnerTextExamplesDom = html `
   <div>
     <div class="ds-sp-container">
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="blue" size="small" text="Getting things ready..."></ds-spinner>
+        <ds-spinner ds-spinner-color="blue" ds-size="small" ds-text="Getting things ready..."></ds-spinner>
       </div>
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="blue" size="small" text="Getting things ready..." spinner-text-position="side"></ds-spinner>
+        <ds-spinner ds-spinner-color="blue" ds-size="small" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
       </div>
     </div>
     <div class="ds-sp-container">
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="black" size="medium" text="Getting things ready..."></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="medium" ds-text="Getting things ready..."></ds-spinner>
       </div>
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="black" size="medium" text="Getting things ready..." spinner-text-position="side"></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="medium" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
       </div>
     </div>
     <div class="ds-sp-container">
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="black" size="large" text="Getting things ready..."></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="large" ds-text="Getting things ready..."></ds-spinner>
       </div>
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="black" size="large" text="Getting things ready..." spinner-text-position="side"></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="large" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
       </div>
     </div>
     <div class="ds-sp-container">
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="black" size="xLarge" text="Getting things ready..."></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="xLarge" ds-text="Getting things ready..."></ds-spinner>
       </div>
       <div class="ds-sp-item">
-        <ds-spinner spinner-color="black" size="xLarge" text="Getting things ready..." spinner-text-position="side"></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="xLarge" ds-text="Getting things ready..." ds-spinner-text-position="side"></ds-spinner>
       </div>
     </div>
   </div>
@@ -74,13 +74,11 @@ export const WithText = {
 };
 export const SpinnerLoadExample = {
     args: {
-        useRole: false,
-        useAriaLive: false,
+        dsUseRoleAlert: false,
+        dsUseAriaLive: false,
         useAriaLiveContainer: false,
     },
     argTypes: {
-        useRole: { name: 'Use role="alert" in spinner', control: 'boolean' },
-        useAriaLive: { name: 'Use aria-live: polite in spinner', control: 'boolean' },
         useAriaLiveContainer: { name: 'Set aria-live: polite to the container', control: 'boolean' }
     },
     render: (args) => html `
@@ -105,12 +103,12 @@ export const SpinnerLoadExample = {
     </style>
     <div class="ds-sb-example-load" aria-live="${args.useAriaLiveContainer ? 'polite' : 'off'}">
       <span class="ds-sb-box">Ready to send</span>
-      <ds-spinner id="load-example" use-role-alert="${args.useRole}" use-aria-live="${args.useAriaLive}" class="ds-sb-hidden" text="Sending..." size="large" hidden-assistive-text="This is hidden Send text"></ds-spinner>
-      <ds-button 
+      <ds-spinner id="load-example" ds-use-role-alert="${args.dsUseRoleAlert}" ds-use-aria-live="${args.dsUseAriaLive}" class="ds-sb-hidden" ds-text="Sending..." ds-size="large" ds-hidden-assistive-text="This is hidden Send text"></ds-spinner>
+      <ds-button
         id="loading-button"
-        variant="primary" 
-        value="Send" 
-        is-loading="false"
+        ds-variant="primary"
+        ds-value="Send"
+        ds-is-loading="false"
         @click=${(e) => {
         const button = e.currentTarget;
         const spinner = document.querySelector('ds-spinner#load-example');

package/dist/collection/components/01-base-components/ds-spinner/stories/ds-spinner.features.stories.js

@@ -9,15 +9,15 @@ const spinnerColorsDom = html `
     <div class="ds-sp-container">
       <div class="ds-sp-item">
         <span>Blue</span>
-        <ds-spinner spinner-color="blue" size="large"></ds-spinner>
+        <ds-spinner ds-spinner-color="blue" ds-size="large"></ds-spinner>
       </div>
       <div class="ds-sp-item">
         <span>Black</span>
-        <ds-spinner spinner-color="black" size="large"></ds-spinner>
+        <ds-spinner ds-spinner-color="black" ds-size="large"></ds-spinner>
       </div>
       <div class="ds-sp-item white">
         <span>White</span>
-        <ds-spinner spinner-color="white" size="large"></ds-spinner>
+        <ds-spinner ds-spinner-color="white" ds-size="large"></ds-spinner>
       </div>
     </div>
 `;
@@ -55,23 +55,23 @@ const spinnerSizesDom = html `
   <div class="ds-sp-container">
     <div class="ds-sp-item">
       <span>Small</span>
-      <ds-spinner size="small"></ds-spinner>
+      <ds-spinner ds-size="small"></ds-spinner>
     </div>
     <div class="ds-sp-item">
       <span>Medium</span>
-      <ds-spinner size="medium"></ds-spinner>
+      <ds-spinner ds-size="medium"></ds-spinner>
     </div>
     <div class="ds-sp-item">
       <span>Large</span>
-      <ds-spinner size="large"></ds-spinner>
+      <ds-spinner ds-size="large"></ds-spinner>
     </div>
     <div class="ds-sp-item">
       <span>xLarge</span>
-      <ds-spinner size="xLarge"></ds-spinner>
+      <ds-spinner ds-size="xLarge"></ds-spinner>
     </div>
     <div class="ds-sp-item">
       <span>2xLarge</span>
-      <ds-spinner size="2xLarge"></ds-spinner>
+      <ds-spinner ds-size="2xLarge"></ds-spinner>
     </div>
   </div>
 `;