Add story with transparent swatches in color picker

Author: bjarnef

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

@@ -17,6 +17,25 @@ import '@umbraco-ui/uui-popover-container/lib';
 const formats = ['hex', 'rgb', 'hsl', 'hsv'];
 const sizes = ['small', 'medium', 'large'];
 
+const swatchesTransparent = [
+  'rgba(208, 2, 27, 0.5)',
+  'rgba(245, 166, 35, 0.5)',
+  'rgba(248, 231, 28, 0.5)',
+  'rgba(139, 87, 42, 0.5)',
+  'rgba(126, 211, 33, 0.5)',
+  'rgba(65, 117, 5, 0.5)',
+  'rgba(189, 16, 224, 0.5)',
+  'rgba(144, 19, 254, 0.5)',
+  'rgba(74, 144, 226, 0.5)',
+  'rgba(80, 227, 194, 0.5)',
+  'rgba(184, 233, 134, 0.5)',
+  'rgba(0, 0, 0, 0.5)',
+  'rgba(68, 68, 68, 0.5)',
+  'rgba(136, 136, 136, 0.5)',
+  'rgba(204, 204, 204, 0.5)',
+  'rgba(255, 255, 255, 0.5)',
+];
+
 const meta: Meta = {
   id: 'uui-color-picker',
   component: 'uui-color-picker',
@@ -89,3 +108,10 @@ export const NoSwatches: Story = {
     swatches: [],
   },
 };
+
+export const TransparentSwatches: Story = {
+  args: {
+    opacity: true,
+    swatches: swatchesTransparent,
+  },
+};