@designcrowd/fe-shared-lib 1.5.6-mason-1 → 1.5.7-eng-3522

package/src/atoms/components/Textarea/Textarea.stories.js

@@ -1,209 +1,209 @@
-import Textarea from './Textarea.vue';
-
-export default {
-  title: 'Components/Textarea',
-  component: Textarea,
-};
-
-const data = {
-  components: {
-    Textarea,
-  },
-  data() {
-    return {
-      value: 'Hello world',
-      attrs: {
-        'data-test-tag': 'test',
-      },
-    };
-  },
-};
-
-export const Small = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Medium = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" size="md" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Large = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" size="lg" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Icon = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" icon="message" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Placeholder = () => {
-  return {
-    components: {
-      Textarea,
-    },
-    data() {
-      return {
-        value: '',
-      };
-    },
-    template: `
-      <Textarea v-model="value" placeholder="Start typing..." :attrs="attrs"/>
-    `,
-  };
-};
-
-export const Disabled = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :disabled="true" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Readonly = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :readonly="true" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Label = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" label="Message" :attrs="attrs" />
-    `,
-  };
-};
-
-export const LabelRequired = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" label="Message" :required="true" :attrs="attrs" />
-    `,
-  };
-};
-
-export const LabelIcon = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" label="Your Name" icon="message" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Warning = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :warning="true" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Error = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :error="true" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Success = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :success="true" :attrs="attrs" />
-    `,
-  };
-};
-
-export const NoResize = () => {
-  return {
-    ...data,
-    template: `
-      <Textarea v-model="value" :resize="false" :attrs="attrs" />
-    `,
-  };
-};
-
-export const Events = () => {
-  return {
-    components: {
-      Textarea,
-    },
-    data() {
-      return {
-        blurCalled: 0,
-        focusCalled: 0,
-        keyDownCalled: 0,
-        keyUpCalled: 0,
-      };
-    },
-    template: `
-      <div>
-        <Textarea placeholder="Start typing..." @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" />
-        <table border="1" class="tw-font-sans tw-mt-8">
-          <tr>
-            <td>blurCalled</td>
-            <td>{{ blurCalled }}</td>
-          </tr>
-          <tr>
-            <td>focusCalled</td>
-            <td>{{ focusCalled }}</td>
-          </tr>
-          <tr>
-            <td>keyDownCalled</td>
-            <td>{{ keyDownCalled }}</td>
-          </tr>
-          <tr>
-            <td>keyUpCalled</td>
-            <td>{{ keyUpCalled }}</td>
-          </tr>
-        </table>
-      </div>
-    `,
-    methods: {
-      onBlur() {
-        this.blurCalled += 1;
-      },
-
-      onFocus() {
-        this.focusCalled += 1;
-      },
-
-      onKeyDown() {
-        this.keyDownCalled += 1;
-      },
-
-      onKeyUp() {
-        this.keyUpCalled += 1;
-      },
-    },
-  };
-};
+import Textarea from './Textarea.vue';
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+};
+
+const data = {
+  components: {
+    Textarea,
+  },
+  data() {
+    return {
+      value: 'Hello world',
+      attrs: {
+        'data-test-tag': 'test',
+      },
+    };
+  },
+};
+
+export const Small = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Medium = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" size="md" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Large = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" size="lg" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Icon = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" icon="message" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Placeholder = () => {
+  return {
+    components: {
+      Textarea,
+    },
+    data() {
+      return {
+        value: '',
+      };
+    },
+    template: `
+      <Textarea v-model="value" placeholder="Start typing..." :attrs="attrs"/>
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :disabled="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Readonly = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :readonly="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Label = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" label="Message" :attrs="attrs" />
+    `,
+  };
+};
+
+export const LabelRequired = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" label="Message" :required="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const LabelIcon = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" label="Your Name" icon="message" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Warning = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :warning="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Error = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :error="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Success = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :success="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const NoResize = () => {
+  return {
+    ...data,
+    template: `
+      <Textarea v-model="value" :resize="false" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Events = () => {
+  return {
+    components: {
+      Textarea,
+    },
+    data() {
+      return {
+        blurCalled: 0,
+        focusCalled: 0,
+        keyDownCalled: 0,
+        keyUpCalled: 0,
+      };
+    },
+    template: `
+      <div>
+        <Textarea placeholder="Start typing..." @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" />
+        <table border="1" class="tw-font-sans tw-mt-8">
+          <tr>
+            <td>blurCalled</td>
+            <td>{{ blurCalled }}</td>
+          </tr>
+          <tr>
+            <td>focusCalled</td>
+            <td>{{ focusCalled }}</td>
+          </tr>
+          <tr>
+            <td>keyDownCalled</td>
+            <td>{{ keyDownCalled }}</td>
+          </tr>
+          <tr>
+            <td>keyUpCalled</td>
+            <td>{{ keyUpCalled }}</td>
+          </tr>
+        </table>
+      </div>
+    `,
+    methods: {
+      onBlur() {
+        this.blurCalled += 1;
+      },
+
+      onFocus() {
+        this.focusCalled += 1;
+      },
+
+      onKeyDown() {
+        this.keyDownCalled += 1;
+      },
+
+      onKeyUp() {
+        this.keyUpCalled += 1;
+      },
+    },
+  };
+};

package/src/atoms/components/Textarea/Textarea.vue

@@ -1,112 +1,112 @@
-<template>
-  <div class="tw-box-border">
-    <label
-      v-if="label"
-      :for="`scl-input-${id}`"
-      class="tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold"
-      :class="{
-        'tw-sr-only': showLabelScreenReaderOnly,
-      }"
-    >
-      {{ label }}
-      <span v-if="required" class="tw-text-error-500">*</span>
-    </label>
-    <div
-      :class="{
-        'tw-relative': icon,
-      }"
-    >
-      <div
-        v-if="icon"
-        class="tw-absolute tw-top-0 tw-left-0 tw-transform tw-translate-y-4 tw-translate-x-4 tw-text-grayscale-500"
-      >
-        <Icon :name="icon" size="md" />
-      </div>
-      <textarea
-        :id="id ? `scl-input-${id}` : null"
-        v-bind="attrs"
-        type="text"
-        :value="modelValue"
-        :required="required"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :class="[
-          elementClasses,
-          {
-            'tw-border-error-500 focus:tw-border-error-600': error,
-            'tw-border-warning-500 focus:tw-border-warning-600': warning,
-            'tw-border-success-500 focus:tw-border-success-600': success,
-            'tw-border-grayscale-500 focus:tw-border-grayscale-600': !error && !warning && !success,
-            'tw-opacity-50': disabled,
-            'tw-pl-12': icon,
-            'tw-h-20': size === 'sm',
-            'tw-h-40': size === 'md',
-            'tw-h-80': size === 'lg',
-            'tw-resize-none': resize === false,
-          },
-        ]"
-        class="tw-font-sans tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-py-3.5 tw-text-base tw-px-4 tw-rounded tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
-        @input.stop="input($event.target.value)"
-        @keyup.stop="keyup($event.target.value)"
-        @keydown.stop="keydown($event.target.value, $event)"
-        @focus="focus($event.target.value)"
-        @blur="blur($event.target.value)"
-      ></textarea>
-    </div>
-  </div>
-</template>
-<script>
-import FormControlMixin from '../FormControl/FormControl.mixin';
-
-export default {
-  mixins: [FormControlMixin],
-  props: {
-    resize: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    shouldAutoFitContent: {
-      type: Boolean,
-      default: false,
-    },
-    elementClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  watch: {
-    modelValue() {
-      this.$emit('value-changed');
-      this.resizeIfRequired();
-    },
-  },
-  mounted() {
-    this.$emit('value-changed');
-    this.resizeIfRequired();
-  },
-  methods: {
-    resizeIfRequired() {
-      if (this.shouldAutoFitContent) {
-        this.autoFitToContent();
-      }
-    },
-    autoFitToContent() {
-      setTimeout(() => {
-        const textarea =
-          typeof document !== 'undefined' &&
-          typeof window !== 'undefined' &&
-          document.getElementById(`scl-input-${this.id}`);
-        if (textarea) {
-          textarea.style.height = 'auto';
-          textarea.style.height = `${textarea.scrollHeight}px`;
-        }
-      }, 1000);
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-box-border">
+    <label
+      v-if="label"
+      :for="`scl-input-${id}`"
+      class="tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold"
+      :class="{
+        'tw-sr-only': showLabelScreenReaderOnly,
+      }"
+    >
+      {{ label }}
+      <span v-if="required" class="tw-text-error-500">*</span>
+    </label>
+    <div
+      :class="{
+        'tw-relative': icon,
+      }"
+    >
+      <div
+        v-if="icon"
+        class="tw-absolute tw-top-0 tw-left-0 tw-transform tw-translate-y-4 tw-translate-x-4 tw-text-grayscale-500"
+      >
+        <Icon :name="icon" size="md" />
+      </div>
+      <textarea
+        :id="id ? `scl-input-${id}` : null"
+        v-bind="attrs"
+        type="text"
+        :value="modelValue"
+        :required="required"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :class="[
+          elementClasses,
+          {
+            'tw-border-error-500 focus:tw-border-error-600': error,
+            'tw-border-warning-500 focus:tw-border-warning-600': warning,
+            'tw-border-success-500 focus:tw-border-success-600': success,
+            'tw-border-grayscale-500 focus:tw-border-grayscale-600': !error && !warning && !success,
+            'tw-opacity-50': disabled,
+            'tw-pl-12': icon,
+            'tw-h-20': size === 'sm',
+            'tw-h-40': size === 'md',
+            'tw-h-80': size === 'lg',
+            'tw-resize-none': resize === false,
+          },
+        ]"
+        class="tw-font-sans tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-py-3.5 tw-text-base tw-px-4 tw-rounded tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
+        @input.stop="input($event.target.value)"
+        @keyup.stop="keyup($event.target.value)"
+        @keydown.stop="keydown($event.target.value, $event)"
+        @focus="focus($event.target.value)"
+        @blur="blur($event.target.value)"
+      ></textarea>
+    </div>
+  </div>
+</template>
+<script>
+import FormControlMixin from '../FormControl/FormControl.mixin';
+
+export default {
+  mixins: [FormControlMixin],
+  props: {
+    resize: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    shouldAutoFitContent: {
+      type: Boolean,
+      default: false,
+    },
+    elementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  watch: {
+    modelValue() {
+      this.$emit('value-changed');
+      this.resizeIfRequired();
+    },
+  },
+  mounted() {
+    this.$emit('value-changed');
+    this.resizeIfRequired();
+  },
+  methods: {
+    resizeIfRequired() {
+      if (this.shouldAutoFitContent) {
+        this.autoFitToContent();
+      }
+    },
+    autoFitToContent() {
+      setTimeout(() => {
+        const textarea =
+          typeof document !== 'undefined' &&
+          typeof window !== 'undefined' &&
+          document.getElementById(`scl-input-${this.id}`);
+        if (textarea) {
+          textarea.style.height = 'auto';
+          textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+      }, 1000);
+    },
+  },
+};
+</script>