fix(ui-library): harmonised property names (#980)

* fix(ui-library): harmonized property names * fix(ui-library): added changes after review * fix(storybook): changed values after review * fix(ui-library): removed lit Types --------- Co-authored-by: Christian Hoffmann <[email protected]> Co-authored-by: Thorben Hartmann <[email protected]>
deven-org · Mar 26, 2024 · d9d8773 · d9d8773
1 parent 2579111
commit d9d8773
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 26 deletions.
diff --git a/packages/ui-library/src/components/counter/index.stories.ts b/packages/ui-library/src/components/counter/index.stories.ts
@@ -35,24 +35,21 @@ export default {
         category: 'Appearance',
       },
     },
-    size: {
-      name: 'sizeVariant',
+    sizeVariant: {
       description: 'Choose size of the component.',
       options: FormSizes,
       control: { type: 'radio' },
       table: {
         category: 'Appearance',
       },
     },
-    current: {
-      name: 'value',
+    value: {
       description: 'Enter the value the component should hold.',
       table: {
         category: 'Content / Settings',
       },
     },
-    max: {
-      name: 'maxValue',
+    maxValue: {
       description: 'Enter the max value the component should be able to hold.',
       table: {
         category: 'Content / Settings',
@@ -99,17 +96,17 @@ BlrCounter.storyName = 'Counter';
 const defaultParams: BlrCounterType = {
   theme: 'Light',
   variant: 'neutral',
-  size: 'md',
-  current: 3,
-  max: 100,
+  sizeVariant: 'md',
+  value: 3,
+  maxValue: 100,
 };
 BlrCounter.args = defaultParams;
 
 /**
  * ## Appearance
  *
  * ### Variant
- * The Counter component comes in 3 variants: default, warn and error.
+ * The Counter component comes in 3 variants: neutral, warn and error.
  */
 export const Variant = () => {
   return html`
@@ -147,7 +144,7 @@ export const SizeVariant = () => {
         html`<div class="wrapper">
           ${BlrCounterRenderFunction({
             ...defaultParams,
-            size: size,
+            sizeVariant: size,
           })}
         </div>`
     )}

diff --git a/packages/ui-library/src/components/counter/index.test.ts b/packages/ui-library/src/components/counter/index.test.ts
@@ -9,8 +9,8 @@ import { querySelectorDeep } from 'query-selector-shadow-dom';
 const sampleParams: BlrCounterType = {
   theme: 'Light',
   variant: 'neutral',
-  current: 3,
-  max: 100,
+  value: 3,
+  maxValue: 100,
 };
 
 describe('blr-counter', () => {
@@ -24,18 +24,18 @@ describe('blr-counter', () => {
     const element = await fixture(BlrCounterRenderFunction(sampleParams));
     const blrCounter = querySelectorDeep('div.blr-counter', element.getRootNode() as HTMLElement);
     const blrText = blrCounter?.textContent;
-    expect(blrText).to.include(sampleParams.max);
+    expect(blrText).to.include(sampleParams.maxValue);
   });
 
   it('renders a blr-counter element includes current value', async () => {
     const element = await fixture(BlrCounterRenderFunction(sampleParams));
     const blrCounter = querySelectorDeep('div.blr-counter', element.getRootNode() as HTMLElement);
     const blrText = blrCounter?.textContent;
-    expect(blrText).to.include(sampleParams.current);
+    expect(blrText).to.include(sampleParams.value);
   });
 
   it('renders a blr-counter element includes max & current value', async () => {
-    const value = `${sampleParams.current} / ${sampleParams.max}`;
+    const value = `${sampleParams.value} / ${sampleParams.maxValue}`;
     const element = await fixture(BlrCounterRenderFunction(sampleParams));
     const blrCounter = querySelectorDeep('div.blr-counter', element.getRootNode() as HTMLElement);
     const blrText = blrCounter?.textContent;
@@ -64,7 +64,7 @@ describe('blr-counter', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrCounterRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrCounterRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const blrCounter = querySelectorDeep('div.blr-counter', element.getRootNode() as HTMLElement);
     const className = blrCounter?.className;

diff --git a/packages/ui-library/src/components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts
@@ -10,26 +10,26 @@ export class BlrCounter extends LitElement {
   static styles = [];
 
   @property() variant: CounterVariantType = 'neutral';
-  @property() current = 0;
-  @property() max = 0;
-  @property() size?: FormSizesType = 'md';
+  @property() value = 0;
+  @property() maxValue = 0;
+  @property() sizeVariant?: FormSizesType = 'md';
   @property() theme: ThemeType = 'Light';
 
   protected render() {
-    if (this.size) {
+    if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [counterLight] : [counterDark];
 
       const classes = classMap({
         'blr-counter': true,
         [this.variant]: this.variant,
-        [`${this.size}`]: this.size,
+        [this.sizeVariant]: this.sizeVariant,
       });
 
       return html`
         <style>
           ${dynamicStyles}
         </style>
-        <div class=${classes}>${this.current} / ${this.max}</div>
+        <div class=${classes}>${this.value} / ${this.maxValue}</div>
       `;
     }
   }

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -237,9 +237,9 @@ export class BlrTextarea extends LitElement {
             ${this.hasCounter
               ? BlrCounterRenderFunction({
                   variant: counterVariant,
-                  current: this.count,
-                  max: this.maxLength || 0,
-                  size: this.sizeVariant,
+                  value: this.count,
+                  maxValue: this.maxLength || 0,
+                  sizeVariant: this.sizeVariant,
                   theme: this.theme,
                 })
               : nothing}