Add readonly for color swatch component

umbraco · Sep 22, 2024 · bd19c13 · bd19c13
1 parent fc19b5d
commit bd19c13
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 7 deletions.
diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -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 = 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,8 @@ export class UUIColorSwatchElement extends LabelMixin(
       <button
         id="swatch"
         aria-label=${this.label}
-        aria-disabled="${this.disabled}"
+        aria-readonly="${this.readonly}"
+        ?disabled="${this.disabled}"
         title="${this.label}">
         <div class="color-swatch color-swatch--transparent-bg">
           <div
@@ -166,6 +180,10 @@ export class UUIColorSwatchElement extends LabelMixin(
         opacity: 0.5;
       }
 
+      :host([readonly]) {
+        cursor: default;
+      }
+
       #swatch {
         cursor: inherit;
         outline: none;

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.story.ts b/packages/uui-color-swatch/lib/uui-color-swatch.story.ts
@@ -57,7 +57,7 @@ export const Disabled: Story = {
   parameters: {
     docs: {
       source: {
-        code: `<uui-color-swatch disabled></uui-color-swatch>`,
+        code: `<uui-color-swatch disabled selectable></uui-color-swatch>`,
       },
     },
   },
@@ -78,6 +78,35 @@ export const DisabledSelected: 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: "This is the most beautiful color I've ever seen",