Merge pull request #916 from bjarnef/feature/color-swatch-readonly

Feat: Readonly state for uui-color-swatch

Author: julczka

packages/uui-color-swatch/lib/uui-color-swatch.element.ts

@@ -9,7 +9,7 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 
 /**
- * Color swatch, can have label and be selectable.
+ * Color swatch, can have label and be selectable, disabled or readonly.
  *
  * @element uui-color-swatch
  * @cssprop --uui-swatch-size - The size of the swatch.
@@ -51,13 +51,23 @@ export class UUIColorSwatchElement extends LabelMixin(
   private _color?: string;
 
   /**
-   * Determines if the options is disabled. If true the option can't be selected
-   *
+   * Sets the swatch to disabled.
+   * @type {boolean}
    * @attr
+   * @default false
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Sets the swatch to readonly mode.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly: boolean = false;
+
   /**
    * When true shows element label below the color checkbox
    *
@@ -82,10 +92,13 @@ export class UUIColorSwatchElement extends LabelMixin(
   }
 
   willUpdate(changedProperties: Map<string, any>) {
-    if (changedProperties.has('disabled')) {
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('readonly')
+    ) {
       if (this.selectable) {
-        this.selectable = !this.disabled;
-        this.deselectable = !this.disabled;
+        this.selectable = !this.disabled && !this.readonly;
+        this.deselectable = !this.disabled && !this.readonly;
       }
     }
     if (
@@ -101,7 +114,7 @@ export class UUIColorSwatchElement extends LabelMixin(
       <button
         id="swatch"
         aria-label=${this.label}
-        aria-disabled="${this.disabled}"
+        ?disabled="${this.disabled}"
         title="${this.label}">
         <div class="color-swatch color-swatch--transparent-bg">
           <div
@@ -166,6 +179,10 @@ export class UUIColorSwatchElement extends LabelMixin(
         opacity: 0.5;
       }
 
+      :host([readonly]) {
+        cursor: default;
+      }
+
       #swatch {
         cursor: inherit;
         outline: none;

packages/uui-color-swatch/lib/uui-color-swatch.story.ts

@@ -48,6 +48,14 @@ export const InvalidValue: Story = {
 export const Disabled: Story = {
   args: {
     disabled: true,
+    selectable: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-color-swatch disabled selectable></uui-color-swatch>`,
+      },
+    },
   },
 };
 
@@ -58,7 +66,36 @@ export const DisabledSelected: Story = {
   },
 };
 
-export const Label: Story = {
+export const Readonly: Story = {
+  args: {
+    readonly: true,
+    selectable: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-color-swatch readonly selectable></uui-color-swatch>`,
+      },
+    },
+  },
+};
+
+export const ReadonlySelected: Story = {
+  args: {
+    readonly: true,
+    selectable: true,
+    selected: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-color-swatch readonly selectable selected></uui-color-swatch>`,
+      },
+    },
+  },
+};
+
+export const WithLabel: Story = {
   args: {
     label: 'Label',
     showLabel: true,