@designcrowd/fe-shared-lib 1.5.7-eng-3522 → 1.5.7-fix-icon

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

@@ -1,174 +1,174 @@
-import { defineComponent } from 'vue';
-import Notice from './Notice.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  title: 'Components/Notice',
-  component: Notice,
-};
-
-const generateNoticeVariant = (direction, isVisibleProp, onClick) => {
-  return {
-    notice: {
-      direction,
-      isVisible: isVisibleProp,
-    },
-    button: {
-      label: 'Click me',
-      variant: 'primary',
-      size: 'small-wide',
-      onClick,
-    },
-  };
-};
-
-const StorybookNoticeBodyComponent = defineComponent('StorybookNoticeBody', {
-  components: {
-    Button,
-  },
-  template: `
-    <div class="tw-p-4">
-      <input type="text" class="tw-mb-2" />
-      <Button
-        label="Submit"
-        variant="primary"
-        size="small-wide"
-        :full-width="true"
-      />
-    </div>
-  `,
-});
-
-export const Sample = () => {
-  return {
-    components: { Notice, Button, StorybookNoticeBodyComponent },
-    data() {
-      return {
-        isTopNoticeVisible: false,
-        isRightNoticeVisible: false,
-        isBottomNoticeVisible: false,
-        isLeftNoticeVisible: false,
-        directions: ['Top', 'Right', 'Bottom', 'Left'],
-      };
-    },
-    computed: {
-      onClickFunctions() {
-        return {
-          top: () => {
-            this.isTopNoticeVisible = !this.isTopNoticeVisible;
-          },
-          right: () => {
-            this.isRightNoticeVisible = !this.isRightNoticeVisible;
-          },
-          bottom: () => {
-            this.isBottomNoticeVisible = !this.isBottomNoticeVisible;
-          },
-          left: () => {
-            this.isLeftNoticeVisible = !this.isLeftNoticeVisible;
-          },
-        };
-      },
-      variants() {
-        return this.directions.map((direction) => {
-          const directionLowerCase = direction.toLowerCase();
-          return generateNoticeVariant(
-            directionLowerCase,
-            this[`is${direction}NoticeVisible`],
-            this.onClickFunctions[directionLowerCase],
-          );
-        });
-      },
-    },
-    template: `
-      <div class="tw-flex tw-justify-center tw-mt-40">
-        <div class="tw-container tw-max-w-300">
-          <table class="tw-w-full">
-            <thead>
-            <tr>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
-              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-            </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(variant, index) in variants"
-                :key="index"
-                class="tw-bg-grayscale-200"
-              >
-                <td class="tw-p-4">
-                  <Notice
-                    :direction="variant.notice.direction"
-                    :is-visible="variant.notice.isVisible"
-                  >
-                    <template #target>
-                      <Button
-                        :label="variant.button.label"
-                        :variant="variant.button.variant"
-                        :size="variant.button.size"
-                        @on-click="variant.button.onClick"
-                      />
-                    </template>
-                    <template #body>
-                      <StorybookNoticeBodyComponent />
-                    </template>
-                  </Notice>
-                </td>
-                <td class="tw-p-4">
-                  <code
-                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
-                  >
-                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
-
-                    &lt;template #target&gt;...&lt;/template&gt;
-
-                    &lt;template #body&gt;...&lt;/template&gt;
-                    &lt;/Notice&gt;
-                  </code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    `,
-  };
-};
-
-export const Mobile = () => {
-  return {
-    components: { Notice, Button },
-    data() {
-      return {
-        isNoticeVisible: false,
-      };
-    },
-    template: `
-      <Notice
-        direction="bottom"
-        :is-visible="isNoticeVisible"
-        size="md"
-      >
-        <template #target>
-          <Button
-            :full-width="true"
-            label="Click me"
-            variant="primary"
-            size="small-wide"
-            @on-click="isNoticeVisible = !isNoticeVisible"
-          />
-        </template>
-        <template #body>
-          <div class="tw-p-4">
-            <input type="text" class="tw-mb-2 tw-w-full" />
-            <Button
-              label="Submit"
-              variant="primary"
-              size="small-wide"
-              :full-width="true"
-            />
-          </div>
-        </template>
-      </Notice>
-    `,
-  };
-};
+import { defineComponent } from 'vue';
+import Notice from './Notice.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Notice',
+  component: Notice,
+};
+
+const generateNoticeVariant = (direction, isVisibleProp, onClick) => {
+  return {
+    notice: {
+      direction,
+      isVisible: isVisibleProp,
+    },
+    button: {
+      label: 'Click me',
+      variant: 'primary',
+      size: 'small-wide',
+      onClick,
+    },
+  };
+};
+
+const StorybookNoticeBodyComponent = defineComponent('StorybookNoticeBody', {
+  components: {
+    Button,
+  },
+  template: `
+    <div class="tw-p-4">
+      <input type="text" class="tw-mb-2" />
+      <Button
+        label="Submit"
+        variant="primary"
+        size="small-wide"
+        :full-width="true"
+      />
+    </div>
+  `,
+});
+
+export const Sample = () => {
+  return {
+    components: { Notice, Button, StorybookNoticeBodyComponent },
+    data() {
+      return {
+        isTopNoticeVisible: false,
+        isRightNoticeVisible: false,
+        isBottomNoticeVisible: false,
+        isLeftNoticeVisible: false,
+        directions: ['Top', 'Right', 'Bottom', 'Left'],
+      };
+    },
+    computed: {
+      onClickFunctions() {
+        return {
+          top: () => {
+            this.isTopNoticeVisible = !this.isTopNoticeVisible;
+          },
+          right: () => {
+            this.isRightNoticeVisible = !this.isRightNoticeVisible;
+          },
+          bottom: () => {
+            this.isBottomNoticeVisible = !this.isBottomNoticeVisible;
+          },
+          left: () => {
+            this.isLeftNoticeVisible = !this.isLeftNoticeVisible;
+          },
+        };
+      },
+      variants() {
+        return this.directions.map((direction) => {
+          const directionLowerCase = direction.toLowerCase();
+          return generateNoticeVariant(
+            directionLowerCase,
+            this[`is${direction}NoticeVisible`],
+            this.onClickFunctions[directionLowerCase],
+          );
+        });
+      },
+    },
+    template: `
+      <div class="tw-flex tw-justify-center tw-mt-40">
+        <div class="tw-container tw-max-w-300">
+          <table class="tw-w-full">
+            <thead>
+            <tr>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Notice</th>
+              <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+            </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(variant, index) in variants"
+                :key="index"
+                class="tw-bg-grayscale-200"
+              >
+                <td class="tw-p-4">
+                  <Notice
+                    :direction="variant.notice.direction"
+                    :is-visible="variant.notice.isVisible"
+                  >
+                    <template #target>
+                      <Button
+                        :label="variant.button.label"
+                        :variant="variant.button.variant"
+                        :size="variant.button.size"
+                        @on-click="variant.button.onClick"
+                      />
+                    </template>
+                    <template #body>
+                      <StorybookNoticeBodyComponent />
+                    </template>
+                  </Notice>
+                </td>
+                <td class="tw-p-4">
+                  <code
+                    class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900"
+                  >
+                    &lt;Notice direction="{{ variant.notice.direction }}" is-visible="{{ variant.notice.isVisible }}"&gt;
+
+                    &lt;template #target&gt;...&lt;/template&gt;
+
+                    &lt;template #body&gt;...&lt;/template&gt;
+                    &lt;/Notice&gt;
+                  </code>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `,
+  };
+};
+
+export const Mobile = () => {
+  return {
+    components: { Notice, Button },
+    data() {
+      return {
+        isNoticeVisible: false,
+      };
+    },
+    template: `
+      <Notice
+        direction="bottom"
+        :is-visible="isNoticeVisible"
+        size="md"
+      >
+        <template #target>
+          <Button
+            :full-width="true"
+            label="Click me"
+            variant="primary"
+            size="small-wide"
+            @on-click="isNoticeVisible = !isNoticeVisible"
+          />
+        </template>
+        <template #body>
+          <div class="tw-p-4">
+            <input type="text" class="tw-mb-2 tw-w-full" />
+            <Button
+              label="Submit"
+              variant="primary"
+              size="small-wide"
+              :full-width="true"
+            />
+          </div>
+        </template>
+      </Notice>
+    `,
+  };
+};

package/src/atoms/components/Notice/Notice.vue

@@ -1,71 +1,71 @@
-<template>
-  <div
-    :class="{
-      'tw-relative tw-inline-flex tw-flex-col sm:tw-flex-row tw-w-full sm:tw-w-auto': true,
-      'tw-justify-center': alignment === 'center',
-      'tw-justify-end': alignment === 'right',
-      'tw-justify-start': alignment === 'left',
-    }"
-  >
-    <slot name="target"></slot>
-    <div
-      :class="{
-        'sm:tw-absolute tw-static tw-w-full tw-z-10 tw-border tw-border-solid tw-border-grayscale-500 tw-rounded tw-bg-white tw-top-full tw-mt-4': true,
-        'sm:tw-top-auto sm:tw-mt-0': direction !== 'bottom',
-        'sm:tw-bottom-full sm:tw-mb-4': direction === 'top',
-        'sm:tw-left-full sm:tw-ml-4': direction === 'right',
-        'sm:tw-right-full sm:tw-mr-4': direction === 'left',
-        'tw-right-0': alignment === 'right',
-        'tw-left-0': alignment === 'left',
-        'sm:tw-w-64': size === 'sm',
-        'sm:tw-w-72': size === 'md',
-        'sm:tw-w-96': size === 'lg',
-        'tw-hidden': !isVisible,
-      }"
-    >
-      <slot name="body"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    // Color can be primary (blue), secondary (dark gray), warning (yellow), alert (red)
-    // or success (green)
-    color: {
-      type: String,
-      required: false,
-      default: 'primary',
-    },
-    // The placement of the tooltip. Can be top, right, bottom, top right, top left, bottom right or bottom left
-    direction: {
-      type: String,
-      required: false,
-      default: 'top',
-    },
-    alignment: {
-      type: String,
-      required: false,
-      default: 'left',
-    },
-    size: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    // Whether the notice can be dismissed or not
-    closable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    // Whether the notice tooltip should be visible or not
-    isVisible: {
-      type: Boolean,
-      required: false,
-      default: undefined,
-    },
-  },
-};
-</script>
+<template>
+  <div
+    :class="{
+      'tw-relative tw-inline-flex tw-flex-col sm:tw-flex-row tw-w-full sm:tw-w-auto': true,
+      'tw-justify-center': alignment === 'center',
+      'tw-justify-end': alignment === 'right',
+      'tw-justify-start': alignment === 'left',
+    }"
+  >
+    <slot name="target"></slot>
+    <div
+      :class="{
+        'sm:tw-absolute tw-static tw-w-full tw-z-10 tw-border tw-border-solid tw-border-grayscale-500 tw-rounded tw-bg-white tw-top-full tw-mt-4': true,
+        'sm:tw-top-auto sm:tw-mt-0': direction !== 'bottom',
+        'sm:tw-bottom-full sm:tw-mb-4': direction === 'top',
+        'sm:tw-left-full sm:tw-ml-4': direction === 'right',
+        'sm:tw-right-full sm:tw-mr-4': direction === 'left',
+        'tw-right-0': alignment === 'right',
+        'tw-left-0': alignment === 'left',
+        'sm:tw-w-64': size === 'sm',
+        'sm:tw-w-72': size === 'md',
+        'sm:tw-w-96': size === 'lg',
+        'tw-hidden': !isVisible,
+      }"
+    >
+      <slot name="body"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // Color can be primary (blue), secondary (dark gray), warning (yellow), alert (red)
+    // or success (green)
+    color: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    // The placement of the tooltip. Can be top, right, bottom, top right, top left, bottom right or bottom left
+    direction: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    alignment: {
+      type: String,
+      required: false,
+      default: 'left',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    // Whether the notice can be dismissed or not
+    closable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // Whether the notice tooltip should be visible or not
+    isVisible: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
+  },
+};
+</script>

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

@@ -1,55 +1,55 @@
-import NumberStepper from './NumberStepper.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  title: 'Components/Number Stepper',
-  component: NumberStepper,
-};
-
-const data = {
-  components: {
-    NumberStepper,
-    Button,
-  },
-  data() {
-    return {
-      numberValue: 20,
-    };
-  },
-};
-
-export const Primary = () => {
-  return {
-    ...data,
-    template: `
-      <div>
-        <div>Full width min 12 max 128</div>
-        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" :timer-to-minimum="750" />
-        <div class="tw-mt-4 tw-w-64">
-          <div>Fixed container width</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Disabled</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Disable Manual Input but allow step down and up button</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disableManualInput="true" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Normal size</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-mt-4 tw-w-64">
-          <div>Bigger size</div>
-          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-        <div class="tw-h-8 tw-mt-4 tw-w-64">
-          <div> Outer size dependent</div>
-          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
-        </div>
-      </div>
-    `,
-  };
-};
+import NumberStepper from './NumberStepper.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Number Stepper',
+  component: NumberStepper,
+};
+
+const data = {
+  components: {
+    NumberStepper,
+    Button,
+  },
+  data() {
+    return {
+      numberValue: 20,
+    };
+  },
+};
+
+export const Primary = () => {
+  return {
+    ...data,
+    template: `
+      <div>
+        <div>Full width min 12 max 128</div>
+        <NumberStepper v-model="numberValue" id="id1" :min="12" :max="128" :disabled="false" :timer-to-minimum="750" />
+        <div class="tw-mt-4 tw-w-64">
+          <div>Fixed container width</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disabled</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Disable Manual Input but allow step down and up button</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disableManualInput="true" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Normal size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-mt-4 tw-w-64">
+          <div>Bigger size</div>
+          <NumberStepper v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+        <div class="tw-h-8 tw-mt-4 tw-w-64">
+          <div> Outer size dependent</div>
+          <NumberStepper size="xs" :full-height="true" :input-classes="'tw-min-w-12'" v-model="numberValue" id="id2" :min="18" :max="25" :disabled="false" />
+        </div>
+      </div>
+    `,
+  };
+};