@designcrowd/fe-shared-lib 1.0.9 → 1.0.10

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

@@ -1,303 +1,303 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useArgs } from '@storybook/preview-api';
-import Modal from './Modal.vue';
-import Button from '../Button/Button.vue';
-
-export default {
-  title: 'Components/Modal',
-  component: Modal,
-};
-
-export const Sample = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
-        Your component goes here
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const OpenWithButton = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-        Button,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <div>
-        <Button size="medium" variant="primary" label="Click Me" @on-click="onButtonClick" />
-        <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal" :disable-body-scroll-on-visible="true">
-        Your component goes here
-        </Modal>
-      </div>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-        onButtonClick() {
-          setArgs({ ...args, visible: true });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const Simple = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal v-bind="args" :simple="true" @close-modal="closeLoginModal">
-      <div class="tw-px-8">
-        <div>
-          <h2 class="tw-text-2xl tw-text-center tw-mb-4">Hello World</h2>
-        </div>
-      </div>
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const MandatorySample = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
-      I'm a mandatory modal
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const InnerOverflowSample = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal v-bind="args" @close-modal="closeLoginModal">
-      <div>
-        <div>Heading</div>
-        <div style="height: 150px;">Contents 1</div>
-        <div style="height: 250px;">Contents 2</div>
-        <div style="height: 300px;">Contents 3</div>
-        <button>Save</button>
-      </div>
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const HeaderFooterSample = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal v-bind="args" @close-modal="closeLoginModal">
-      <template v-slot:header>
-        <div style="text-align: center; font-weight: 600; font-size: 20px;">
-          <span>Header</span>
-        </div>
-        <div>
-          <span>Sticky content here which does not overflow</span>
-        </div>
-      </template>
-      <div class="sm:tw-h-96">
-        <div style="height: 150px;">Over flowing Contents 1</div>
-        <div style="height: 200px;">Over flowing Contents 2</div>
-        <div style="height: 350px;">Over flowing Contents 3</div>
-        <div style="height: 350px;">Over flowing Contents 4</div>
-        <div style="height: 350px;">Over flowing Contents 5</div>
-        <button>Save</button>
-      </div>
-      <template v-slot:footer>
-        <div style="text-align: center; font-weight: 600; font-size: 20px;">
-          <span>Footer</span>
-        </div>
-      </template>
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const FullscreenBreakpointSample = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal v-bind="args" @close-modal="closeLoginModal" fullScreenBreakpoint="sm">
-      <template v-slot:header>
-        <div style="text-align: center; font-weight: 600; font-size: 20px;">
-          <span>Try resizing browser</span>
-        </div>
-      </template>
-      <div class="sm:tw-h-96">
-        <div style="height: 150px;">Over flowing Contents 1</div>
-        <div style="height: 200px;">Over flowing Contents 2</div>
-        <div style="height: 350px;">Over flowing Contents 3</div>
-        <div style="height: 350px;">Over flowing Contents 4</div>
-        <div style="height: 350px;">Over flowing Contents 5</div>
-        <button>Save</button>
-      </div>
-      <template v-slot:footer>
-        <div style="text-align: center; font-weight: 600; font-size: 20px;">
-          <span>Footer</span>
-        </div>
-      </template>
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-export const Image = {
-  render: (args) => {
-    const [, setArgs] = useArgs();
-    return {
-      components: {
-        Modal,
-      },
-      setup() {
-        return { args };
-      },
-      template: `
-      <Modal mode="image" v-bind="args" @close-modal="closeLoginModal">
-      <img alt="modal-img" src="https://source.unsplash.com/random/1200x1200"/>
-      </Modal>
-    `,
-      methods: {
-        closeLoginModal() {
-          setArgs({ ...args, visible: false });
-        },
-      },
-    };
-  },
-  args: {
-    visible: true,
-  },
-};
-
-Image.story = {
-  name: 'Modal — Image',
-};
-
-Sample.story = {
-  name: 'Modal',
-};
-
-MandatorySample.story = {
-  name: 'Modal — Mandatory',
-};
-
-InnerOverflowSample.story = {
-  name: 'Modal — Overflow Height',
-};
-
-HeaderFooterSample.story = {
-  name: 'Modal — Header and Footer',
-};
-
-FullscreenBreakpointSample.story = {
-  name: 'Modal — Fullscreen breakpoint',
-};
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useArgs } from '@storybook/preview-api';
+import Modal from './Modal.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+};
+
+export const Sample = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal">
+        Your component goes here
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const OpenWithButton = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+        Button,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <div>
+        <Button size="medium" variant="primary" label="Click Me" @on-click="onButtonClick" />
+        <Modal v-bind="args" close-on-esc @close-modal="closeLoginModal" :disable-body-scroll-on-visible="true">
+        Your component goes here
+        </Modal>
+      </div>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+        onButtonClick() {
+          setArgs({ ...args, visible: true });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const Simple = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal v-bind="args" :simple="true" @close-modal="closeLoginModal">
+      <div class="tw-px-8">
+        <div>
+          <h2 class="tw-text-2xl tw-text-center tw-mb-4">Hello World</h2>
+        </div>
+      </div>
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const MandatorySample = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal v-bind="args" :mandatory="true" @close-modal="closeLoginModal">
+      I'm a mandatory modal
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const InnerOverflowSample = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <div>
+        <div>Heading</div>
+        <div style="height: 150px;">Contents 1</div>
+        <div style="height: 250px;">Contents 2</div>
+        <div style="height: 300px;">Contents 3</div>
+        <button>Save</button>
+      </div>
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const HeaderFooterSample = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal v-bind="args" @close-modal="closeLoginModal">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Header</span>
+        </div>
+        <div>
+          <span>Sticky content here which does not overflow</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const FullscreenBreakpointSample = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal v-bind="args" @close-modal="closeLoginModal" fullScreenBreakpoint="sm">
+      <template v-slot:header>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Try resizing browser</span>
+        </div>
+      </template>
+      <div class="sm:tw-h-96">
+        <div style="height: 150px;">Over flowing Contents 1</div>
+        <div style="height: 200px;">Over flowing Contents 2</div>
+        <div style="height: 350px;">Over flowing Contents 3</div>
+        <div style="height: 350px;">Over flowing Contents 4</div>
+        <div style="height: 350px;">Over flowing Contents 5</div>
+        <button>Save</button>
+      </div>
+      <template v-slot:footer>
+        <div style="text-align: center; font-weight: 600; font-size: 20px;">
+          <span>Footer</span>
+        </div>
+      </template>
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+export const Image = {
+  render: (args) => {
+    const [, setArgs] = useArgs();
+    return {
+      components: {
+        Modal,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+      <Modal mode="image" v-bind="args" @close-modal="closeLoginModal">
+      <img alt="modal-img" src="https://source.unsplash.com/random/1200x1200"/>
+      </Modal>
+    `,
+      methods: {
+        closeLoginModal() {
+          setArgs({ ...args, visible: false });
+        },
+      },
+    };
+  },
+  args: {
+    visible: true,
+  },
+};
+
+Image.story = {
+  name: 'Modal — Image',
+};
+
+Sample.story = {
+  name: 'Modal',
+};
+
+MandatorySample.story = {
+  name: 'Modal — Mandatory',
+};
+
+InnerOverflowSample.story = {
+  name: 'Modal — Overflow Height',
+};
+
+HeaderFooterSample.story = {
+  name: 'Modal — Header and Footer',
+};
+
+FullscreenBreakpointSample.story = {
+  name: 'Modal — Fullscreen breakpoint',
+};