docs: Specific control types in storybook controls (#537)

* Specific control types in storybook controls

* Set initial value on opacity story to 50% opacity

* Run formatting

* Update support for HSV

---------

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

Author: bjarnef

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

@@ -34,6 +34,9 @@ const defaultSwatches = [
   '#fff',
 ];
 
+const formats = ['hex', 'rgb', 'hsl', 'hsv'];
+const sizes = ['small', 'medium', 'large'];
+
 const meta: Meta<UUIColorPickerElement> = {
   id: 'uui-color-picker',
   title: 'Inputs/Color/Color Picker',
@@ -42,6 +45,20 @@ const meta: Meta<UUIColorPickerElement> = {
     inline: false,
     swatches: defaultSwatches,
     format: 'hex',
+    size: 'medium',
+  },
+  argTypes: {
+    format: {
+      options: formats,
+      control: { type: 'select' },
+    },
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+    value: {
+      control: { type: 'color' },
+    },
   },
   parameters: {
     readme: {
@@ -91,6 +108,7 @@ export const Disabled: Story = {
 export const WithOpacity: Story = {
   args: {
     opacity: true,
+    value: 'rgba(0, 0, 0, 0.5)',
   },
   parameters: {
     docs: {
@@ -101,8 +119,6 @@ export const WithOpacity: Story = {
   },
 };
 
-const formats = ['hex', 'rgb', 'hsl'];
-
 export const Formats: Story = {
   args: {
     format: 'hex',
@@ -115,12 +131,6 @@ export const Formats: Story = {
         ${story()}
       </div> `,
   ],
-  argTypes: {
-    format: {
-      options: formats,
-      control: { type: 'select' },
-    },
-  },
   parameters: {
     docs: {
       source: {

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

@@ -4,6 +4,8 @@ import readme from '../README.md?raw';
 
 import './uui-color-slider.element';
 
+const types = ['hue', 'opacity'];
+
 const meta: Meta<UUIColorSliderElement> = {
   id: 'uui-color-slider',
   title: 'Inputs/Color/Color Slider',
@@ -19,6 +21,12 @@ const meta: Meta<UUIColorSliderElement> = {
     type: 'hue',
     color: '',
   },
+  argTypes: {
+    type: {
+      options: types,
+      control: { type: 'select' },
+    },
+  },
   parameters: {
     readme: {
       markdown: readme,