From 010f132c0a5d8074b1e8cdcd133a86340cdb3035 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <jessica.wittig@accenture.com>
Date: Thu, 14 Dec 2023 12:01:54 +0100
Subject: [PATCH 1/2] feat(storybook): added Counter Stories

---
 .../counter/index.stories.ts                  | 120 ++++++++++++++++--
 1 file changed, 110 insertions(+), 10 deletions(-)

diff --git a/packages/ui-library/src/components/internal-components/counter/index.stories.ts b/packages/ui-library/src/components/internal-components/counter/index.stories.ts
index ec0ab062c..60deb0c0c 100644
--- a/packages/ui-library/src/components/internal-components/counter/index.stories.ts
+++ b/packages/ui-library/src/components/internal-components/counter/index.stories.ts
@@ -2,38 +2,138 @@
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { CounterVariants, FormSizes } from '../../../globals/constants';
 import { BlrCounterRenderFunction, BlrCounterType } from './index';
+import { html } from 'lit-html';
+
+// Shared Style inside the Stories
+const sharedStyles = html`
+  <style>
+    .wrapper {
+      padding: 1.25em;
+    }
+  </style>
+`;
 
 export default {
   title: 'Design System/Web Components/Internal Components/Counter',
   argTypes: {
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
+    },
     variant: {
+      description: 'Select variant of the component.',
       options: CounterVariants,
       control: { type: 'select' },
+      table: {
+        category: 'Appearance',
+      },
     },
     size: {
+      name: 'sizeVariant',
+      description: 'Choose size of the component.',
       options: FormSizes,
-      control: { type: 'select' },
+      control: { type: 'radio' },
+      table: {
+        category: 'Appearance',
+      },
     },
-    theme: {
-      options: Themes,
-      control: { type: 'select' },
+    current: {
+      name: 'value',
+      description: 'Enter the value the component should hold.',
+      table: {
+        category: 'Content / Settings',
+      },
+    },
+    max: {
+      name: 'maxValue',
+      description: 'Enter the max value the component should be able to hold.',
+      table: {
+        category: 'Content / Settings',
+      },
+    },
+    arialabel: {
+      name: 'ariaLabel',
+      description:
+        'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.',
+      table: {
+        disable: true,
+      },
     },
   },
   parameters: {
-    viewMode: 'docs',
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `<Markdown>
+Counter provides a visual representation of a numeric quantity and typically includes buttons or controls that allow users to increment or decrement the value.
+- [**Appearance**](#appearance)
+ - [**Variant**](#variant) 
+ - [**Size Variant**](#size-variant) 
+</Markdown>`,
+      },
+    },
   },
 };
 
 export const BlrCounter = (params: BlrCounterType) => BlrCounterRenderFunction(params);
-
 BlrCounter.storyName = 'Counter';
-
-const args: BlrCounterType = {
+const defaultParams: BlrCounterType = {
   theme: 'Light',
   variant: 'default',
+  size: 'md',
   current: 3,
   max: 100,
-  size: 'md',
 };
+BlrCounter.args = defaultParams;
 
-BlrCounter.args = args;
+/**
+ * ## Appearance
+ *
+ * ### Variant
+ * The Counter component comes in 3 variants: default, warning and error.
+ */
+export const Variant = () => {
+  return html`
+    ${sharedStyles}
+    <div class="wrapper">
+      <div class="wrapper">
+        ${BlrCounterRenderFunction({
+          ...defaultParams,
+        })}
+      </div>
+      <div class="wrapper">
+        ${BlrCounterRenderFunction({
+          ...defaultParams,
+          variant: 'warn',
+        })}
+      </div>
+      <div class="wrapper">
+        ${BlrCounterRenderFunction({
+          ...defaultParams,
+          variant: 'error',
+        })}
+      </div>
+    </div>
+  `;
+};
+Variant.story = { name: ' ' };
+/**
+ * The Counter component comes in 3 sizes: SM, MD and LG.
+ */
+export const SizeVariant = () => {
+  return html`
+    ${sharedStyles}
+    ${FormSizes.map(
+      (size) =>
+        html`<div class="wrapper">
+          ${BlrCounterRenderFunction({
+            ...defaultParams,
+            size: size,
+          })}
+        </div>`
+    )}
+  `;
+};

From 52a2266dd58134b024c020c1afa727e635d74409 Mon Sep 17 00:00:00 2001
From: JpunktWpunkt <jessica.wittig@accenture.com>
Date: Fri, 5 Jan 2024 10:58:55 +0100
Subject: [PATCH 2/2] fix(storybook): fixed some textissues after review

---
 .../components/internal-components/counter/index.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-library/src/components/internal-components/counter/index.stories.ts b/packages/ui-library/src/components/internal-components/counter/index.stories.ts
index 416279490..e576451b1 100644
--- a/packages/ui-library/src/components/internal-components/counter/index.stories.ts
+++ b/packages/ui-library/src/components/internal-components/counter/index.stories.ts
@@ -24,9 +24,9 @@ export default {
       },
     },
     variant: {
-      description: 'Select variant of the component.',
+      description: 'Choose variant of the component.',
       options: CounterVariants,
-      control: { type: 'select' },
+      control: { type: 'radio' },
       table: {
         category: 'Appearance',
       },
@@ -98,7 +98,7 @@ BlrCounter.args = defaultParams;
  * ## Appearance
  *
  * ### Variant
- * The Counter component comes in 3 variants: default, warning and error.
+ * The Counter component comes in 3 variants: default, warn and error.
  */
 export const Variant = () => {
   return html`