updated stories, removed bloat

Author: JesmoDev

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -215,15 +215,10 @@ export class UUITextareaElement extends LabelMixin('input label', LitElement) {
     }
   }
 
-  getMaxLengthClasses() {
-    if (this.maxLength && this.value) {
-      return this.value.length >= this.maxLength ? 'maxed' : '';
-    }
-    return '';
-  }
-
   renderMaxLength() {
-    return html`<span id="char-count" class=${this.getMaxLengthClasses()}
+    return html`<span
+      id="char-count"
+      class=${this.value.length >= this.maxLength! ? 'maxed' : ''}
       >${this.value ? this.value.length : 0}/${this.maxLength}</span
     >`;
   }

packages/uui-textarea/lib/uui-textarea.story.ts

@@ -6,13 +6,6 @@ export default {
   id: 'uui-textarea',
   title: 'Inputs/Textarea',
   component: 'uui-textarea',
-  parameters: {
-    docs: {
-      source: {
-        code: `<uui-textarea></uui-textarea>`,
-      },
-    },
-  },
   args: {
     value: '',
   },
@@ -35,37 +28,120 @@ export const AAAOverview: Story = props =>
 AAAOverview.storyName = 'Overview';
 AAAOverview.args = {
   label: 'Label',
-  autoHeight: true,
   maxLength: 200,
   minHeight: '100px',
   maxHeight: '200px',
 };
+AAAOverview.parameters = {
+  docs: {
+    source: {
+      code: `<uui-textarea label="Label"></uui-textarea>`,
+    },
+  },
+};
 
 export const MaxLength: Story = props =>
-  html`<uui-textarea label="textarea" maxLength="20"></uui-textarea>`;
+  html`<uui-textarea
+    label="textarea"
+    maxLength=${props.maxLength}></uui-textarea>`;
+
+MaxLength.args = { maxLength: 20 };
+MaxLength.parameters = {
+  controls: { include: ['maxLength'] },
+  docs: {
+    source: {
+      code: `<uui-textarea label="textarea" maxLength="20"></uui-textarea>`,
+    },
+  },
+};
 
 export const Disabled: Story = props =>
-  html`<uui-textarea label="textarea" disabled></uui-textarea>`;
+  html`<uui-textarea label="Label" ?disabled=${props.disabled}></uui-textarea>`;
+
+Disabled.args = { disabled: true };
+Disabled.parameters = {
+  controls: { include: ['disabled'] },
+  docs: {
+    source: {
+      code: `<uui-textarea label="Label" disabled></uui-textarea>`,
+    },
+  },
+};
 
 export const Placeholder: Story = props =>
   html`<uui-textarea
-    label="textarea"
-    placeholder="I am a placeholder..."></uui-textarea>`;
+    label="Label"
+    placeholder=${props.placeholder}></uui-textarea>`;
+
+Placeholder.args = { placeholder: 'I am a placeholder...' };
+Placeholder.parameters = {
+  controls: { include: ['placeholder'] },
+  docs: {
+    source: {
+      code: `<uui-textarea
+      label="Label"
+      placeholder="I am a placeholder..."></uui-textarea>`,
+    },
+  },
+};
 
 export const MaxAndMinHeight: Story = props =>
   html`<uui-textarea
-    label="textarea"
-    minHeight="100px"
-    maxHeight="200px"></uui-textarea>`;
+    label="Label"
+    minHeight=${props.minHeight}
+    maxHeight=${props.maxHeight}></uui-textarea>`;
+
+MaxAndMinHeight.args = { minHeight: '100px', maxHeight: '200px' };
+MaxAndMinHeight.parameters = {
+  controls: { include: ['minHeight', 'maxHeight'] },
+  docs: {
+    source: {
+      code: `<uui-textarea
+      label="Label"
+      minHeight="100px"
+      maxHeight="200px"></uui-textarea>`,
+    },
+  },
+};
 
 export const AutomaticHeightAdjustment: Story = props =>
   html` the height wil confine itself within the max and min height if defined.
-    <uui-textarea label="textarea" auto-height></uui-textarea>`;
+    <uui-textarea
+      label="Label"
+      ?auto-height=${props.autoHeight}></uui-textarea>`;
+
+AutomaticHeightAdjustment.args = { autoHeight: true };
+AutomaticHeightAdjustment.parameters = {
+  controls: { include: ['autoHeight'] },
+  docs: {
+    source: {
+      code: `<uui-textarea label="Label" auto-height></uui-textarea>`,
+    },
+  },
+};
 
 export const AutomaticHeightAdjustmentWithHeightLimits: Story = props =>
   html` the height wil confine itself within the max and min height if defined.
     <uui-textarea
-      label="textarea"
+      label="Label"
       auto-height
       minHeight="100px"
       maxHeight="200px"></uui-textarea>`;
+
+AutomaticHeightAdjustmentWithHeightLimits.args = {
+  minHeight: '100px',
+  maxHeight: '200px',
+  autoHeight: true,
+};
+AutomaticHeightAdjustmentWithHeightLimits.parameters = {
+  controls: { include: ['minHeight', 'maxHeight', 'autoHeight'] },
+  docs: {
+    source: {
+      code: `<uui-textarea
+      label="Label"
+      auto-height
+      minHeight="100px"
+      maxHeight="200px"></uui-textarea>`,
+    },
+  },
+};