docs: Update story for color swatches (#488)

* Update story for color swatches with example where label is different than value

* lint

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: bjarnef

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

@@ -4,22 +4,21 @@ import { Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 
 const swatches = [
-  '#d0021b',
-  '#f5a623',
-  '#f8e71c',
-  '#8b572a',
-  '#7ed321',
-  '#417505',
-  '#bd10e0',
-  '#9013fe',
-  '#4a90e2',
-  '#50e3c2',
-  '#b8e986',
-  '#000000',
-  '#444',
-  '#888',
-  '#ccc',
-  '#fff',
+  { label: 'Blood Orange', value: '#d0021b' },
+  { label: 'Marigold', value: '#f5a623' },
+  { label: 'Yellow Sun', value: '#f8e71c' },
+  { label: 'Milk Chocolate', value: '#8b572a' },
+  { label: 'Lemon Lime', value: '#7ed321' },
+  { label: 'Avocado', value: '#417505' },
+  { label: 'Vivid Mulberry', value: '#bd10e0' },
+  { label: 'Electric Violet', value: '#9013fe' },
+  { label: 'Tufts Blue', value: '#4a90e2' },
+  { label: 'Crayola', value: '#b8e986' },
+  { label: 'Black', value: '#000000' },
+  { label: 'Grey', value: '#888' },
+  { label: 'Outer Space', value: '#444' },
+  { label: 'Chinese Silver', value: '#ccc' },
+  { label: 'White', value: '#fff' },
 ];
 
 const swatchesTransparent = [
@@ -56,12 +55,16 @@ export default {
 
 const Template: Story = props => html`
   <uui-color-swatches .value=${props.value ?? ''} label="my color pallette">
-    ${props.swatches.map(
-      (swatch: string) =>
-        html`<uui-color-swatch label="${swatch}" .showLabel=${props.showLabel}
-          >${swatch}</uui-color-swatch
-        >`
-    )}
+    ${props.swatches.map((swatch: any) => {
+      const label = typeof swatch === 'string' ? swatch : swatch.label;
+      const value = typeof swatch === 'string' ? swatch : swatch.value;
+
+      return html`<uui-color-swatch
+        label="${label}"
+        .showLabel=${props.showLabel}
+        >${value}</uui-color-swatch
+      >`;
+    })}
   </uui-color-swatches>
 `;