@designcrowd/fe-shared-lib 1.0.0-test-publish

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

@@ -0,0 +1,232 @@
+import TextInput from './TextInput.vue';
+
+export default {
+  title: 'Components/Text Input',
+  component: TextInput,
+};
+
+const data = {
+  components: {
+    TextInput,
+  },
+  data() {
+    return {
+      value: 'Hello world',
+      attrs: {
+        'data-test-tag': 'test',
+      },
+    };
+  },
+};
+
+export const Sample = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Small = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" size="sm" :attrs="attrs" />
+    `,
+  };
+};
+
+export const SmallWithIcon = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" size="sm" icon="message" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Icon = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" icon="message" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Label = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" label="Your Name" :attrs="attrs" />
+    `,
+  };
+};
+
+export const LabelRequired = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" label="Your Name" :required="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const LabelIcon = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" label="Your Name" icon="message" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Warning = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :warning="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Error = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :error="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Success = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :success="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :disabled="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Readonly = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :readonly="true" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Placeholder = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput placeholder="Start typing..." :attrs="attrs" />
+    `,
+  };
+};
+
+export const TextClearButton = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <TextInput v-model="value" :enable-clear="true" @on-clear="value = ''" :attrs="attrs" />
+        <span>Current Text Value: {{value}}</span>
+      </div>
+    `,
+  };
+};
+
+export const PrefixText = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput placeholder="your-brand-name" prefix-text="https://www.brand.page/" :attrs="attrs" />
+    `,
+  };
+};
+
+export const NoLeftBorder = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :border-left="false" :attrs="attrs" />
+    `,
+  };
+};
+
+export const NoRightBorder = () => {
+  return {
+    ...data,
+    template: `
+      <TextInput v-model="value" :border-right="false" :attrs="attrs" />
+    `,
+  };
+};
+
+export const Events = () => {
+  return {
+    components: {
+      TextInput,
+    },
+    data() {
+      return {
+        blurCalled: 0,
+        focusCalled: 0,
+        keyDownCalled: 0,
+        keyUpCalled: 0,
+      };
+    },
+    template: `
+      <div>
+        <TextInput 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/TextInput/TextInput.vue

@@ -0,0 +1,156 @@
+<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-flex': !!prefixText,
+      }"
+    >
+      <span
+        v-if="!!prefixText"
+        class="tw-font-sans tw-bg-grayscale-200 tw-text-grayscale-600 tw-text-sm tw-px-2 tw-inline-flex tw-items-center tw-border tw-border-solid tw-shadow-inner tw-border-grayscale-500 tw-rounded-l tw-border-r-0"
+      >
+        {{ prefixText }}
+      </span>
+      <div
+        :class="{
+          'tw-relative': icon || enableInput,
+        }"
+        class="tw-w-full"
+      >
+        <div
+          v-if="icon"
+          class="tw-absolute tw-top-0 tw-left-0 tw-transform tw-translate-x-4 tw-text-grayscale-500"
+          :class="{
+            'tw-translate-y-2.5': size === 'sm',
+            'tw-translate-y-1/2': size !== 'sm',
+          }"
+        >
+          <Icon :name="icon" size="md" />
+        </div>
+        <input
+          :id="id ? `scl-input-${id}` : null"
+          v-bind="attrs"
+          :type="type"
+          :value="modelValue"
+          :name="name"
+          :required="required"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readonly="readonly"
+          :minlength="minlength"
+          :maxlength="maxlength"
+          :class="[
+            elementClasses,
+            {
+              'tw-bg-white': !readonly,
+              'tw-bg-grayscale-200': readonly,
+              '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-pr-12': enableClear,
+              'tw-py-2': size === 'sm',
+              'tw-py-3.5': size !== 'sm',
+              'tw-rounded-r': borderRight,
+              'tw-rounded-l': borderLeft && !prefixText,
+              'tw-border-l-0': !borderLeft,
+              'tw-border-r-0': !borderRight,
+              '!tw-rounded-l-none': borderRight && !borderLeft,
+              '!tw-rounded-r-none': borderLeft && !borderRight,
+            },
+          ]"
+          class="tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 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)"
+          @focus="focus($event.target.value)"
+          @blur="blur($event.target.value)"
+          @keyup.enter="enterKeyUp($event.target.value)"
+        />
+        <div
+          v-if="enableInput && modelValue !== ''"
+          class="tw-absolute tw-top-0 tw-right-0 tw-transform tw--translate-x-4 tw-text-grayscale-500 tw-cursor-pointer"
+          :class="{
+            'tw-translate-y-2.5': size === 'sm',
+            'tw-translate-y-1/2': size !== 'sm',
+          }"
+          @click="onClearInput"
+        >
+          <Icon name="close" size="md" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import FormControlMixin from '../FormControl/FormControl.mixin';
+
+export default {
+  mixins: [FormControlMixin],
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'text',
+    },
+    enableClear: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    enableClearConfirmation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    borderLeft: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    borderRight: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    prefixText: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    elementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    enableInput() {
+      return this.enableClear || this.enableClearConfirmation;
+    },
+  },
+  methods: {
+    onClearInput() {
+      if (this.enableClear) {
+        this.$emit('on-clear');
+        this.input('');
+      } else if (this.enableClearConfirmation) {
+        this.$emit('on-clear-confirmation');
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +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;
+      },
+    },
+  };
+};

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

@@ -0,0 +1,109 @@
+<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)"
+        @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 = document.getElementById(`scl-input-${this.id}`);
+        if (textarea) {
+          textarea.style.height = 'auto';
+          textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+      }, 1000);
+    },
+  },
+};
+</script>