feat(ui-library): adds dark theme to storybook storie, not yet completed

deven-org · Sep 13, 2023 · 71c09a5 · 71c09a5
1 parent 73b3abe
commit 71c09a5
Showing 1 changed file with 65 additions and 9 deletions.
diff --git a/packages/ui-library/src/components/textarea/examples.stories.ts b/packages/ui-library/src/components/textarea/examples.stories.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import { BlrTextareaRenderFunction, BlrTextareaType } from './index';
 import './index';
+import { nothing } from 'lit';
 
 const defaultParams: BlrTextareaType = {
   theme: 'Light',
@@ -48,6 +49,17 @@ export default {
       },
     },
   },
+  argTypes: {
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Defines a short hint intended to aid the user with data entry when the component has no value.',
+      defaultValue: '',
+      control: {
+        type: 'text',
+        label: 'Enter Text',
+      },
+    },
+  },
 };
 
 export const Example1 = () => {
@@ -57,12 +69,51 @@ export const Example1 = () => {
       .stories-textarea {
         font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
       }
+      .container {
+        width: 377px;
+        height: 64px;
+      }
     </style>
     <div class="stories-textarea">
       <h3>Default</h3>
+      <div class="container">
+        ${BlrTextareaRenderFunction({
+          ...defaultParams,
+          theme: 'Light',
+        })}
+      </div>
+      <h3>Disabled</h3>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        disabled: true,
+      })}
+      <h3>HasError</h3>
       ${BlrTextareaRenderFunction({
         ...defaultParams,
-        theme: 'Light',
+        hasError: true,
+      })}
+    </div>
+  `;
+};
+Example1.storyName = 'Textarea Examples Light Theme';
+
+export const Example2 = () =>
+  html`
+    ${fontStyle}
+    <style>
+      .stories-textarea {
+        font-family: 'Source Sans Pro', 'Source Code Pro', sans-serif;
+        background-color: black;
+        color: white;
+        width: 377px;
+        height: 64px;
+      }
+    </style>
+    <div class="stories-textarea">
+      <h3>Default</h3>
+      ${BlrTextareaRenderFunction({
+        ...defaultParams,
+        theme: 'Dark',
       })}
       <h3>Disabled</h3>
       ${BlrTextareaRenderFunction({
@@ -76,23 +127,28 @@ export const Example1 = () => {
       })}
     </div>
   `;
-};
-Example1.storyName = 'Default';
+Example2.storyName = 'Textarea Examples Dark Theme';
 
-export const Example2 = () =>
+export const Example3 = () =>
   html`
     ${BlrTextareaRenderFunction({
       ...defaultParams,
-      disabled: true,
+      hasError: true,
     })}
   `;
-Example2.storyName = 'Disabled';
+Example3.storyName = 'hasError';
 
-export const Example3 = () =>
+export const InteractivePlaceholder = ({ placeholder }) =>
   html`
+    ${fontStyle}
     ${BlrTextareaRenderFunction({
       ...defaultParams,
-      hasError: true,
+      placeholder: placeholder,
+      value: '',
     })}
   `;
-Example3.storyName = 'hasError';
+
+InteractivePlaceholder.storyName = 'Interaktiver Placeholder';
+InteractivePlaceholder.args = {
+  placeholder: defaultParams.placeholder,
+};