@citizenplane/pimp 9.16.2 → 10.0.0

package/src/stories/CpToaster.stories.ts

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-import CpToaster from '@/components/CpToaster.vue'
-
-const meta = {
-  title: 'CpToaster',
-  component: CpToaster,
-  argTypes: {
-    actionAs: {
-      control: 'select',
-      options: ['link', 'button'],
-      description: 'Determines if the action is a link or a button',
-    },
-    actionLinkProperties: {
-      control: 'object',
-      description: 'Properties for the action link when actionAs is "link"',
-    },
-    title: {
-      control: 'text',
-      description: 'The title of the toast',
-    },
-    description: {
-      control: 'text',
-      description: 'The description of the toast',
-    },
-    type: {
-      control: 'select',
-      options: ['info', 'warning', 'success', 'critical'],
-      description: 'The type of the toast',
-    },
-    delayBeforeCloseInMs: {
-      control: 'number',
-      description: 'Duration in milliseconds before the toast disappears',
-    },
-    actionLabel: {
-      control: 'text',
-      description: 'Label for the action button',
-    },
-    isUnique: {
-      control: 'boolean',
-      description: 'Whether the toast should be unique',
-    },
-  },
-} satisfies Meta<typeof CpToaster>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const defaultArgs = {
-  title: 'Default Toast',
-  description: 'This is a default toast message',
-  type: 'info',
-  delayBeforeCloseInMs: 3000,
-  actionLabel: '',
-  isUnique: false,
-}
-
-export const Default: Story = {
-  args: defaultArgs,
-  render: (args) => ({
-    template: `
-      <div style="padding: 20px;">
-        <cp-button @click="addInfoToaster">Show Info Toast</cp-button>
-      </div>
-    `,
-    methods: {
-      addInfoToaster() {
-        this.$toaster.info({ ...args })
-      },
-    },
-  }),
-}
-
-export const DifferentTypes: Story = {
-  args: defaultArgs,
-  render: () => ({
-    template: `
-      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
-        <cp-button @click="addInfoToaster">Show Info Toast</cp-button>
-        <cp-button @click="addSuccessToaster">Show Success Toast</cp-button>
-        <cp-button @click="addWarningToaster">Show Warning Toast</cp-button>
-        <cp-button @click="addCriticalToaster">Show Critical Toast</cp-button>
-      </div>
-    `,
-    methods: {
-      addInfoToaster() {
-        this.$toaster.info({
-          title: 'This is an info toaster',
-          description: 'This a description of a toaster',
-          isUnique: true,
-        })
-      },
-      addSuccessToaster() {
-        this.$toaster.success({
-          title: 'This is a success toaster',
-          description: 'This a description of a toaster',
-          isUnique: true,
-        })
-      },
-      addWarningToaster() {
-        this.$toaster.warning({
-          title: 'This is a warning toaster',
-          description: 'This a description of a toaster',
-          isUnique: true,
-        })
-      },
-      addCriticalToaster() {
-        this.$toaster.critical({
-          title: 'This is a critical toaster',
-          description: 'This a description of a toaster',
-          isUnique: true,
-        })
-      },
-    },
-  }),
-}
-
-export const WithActionAsLink: Story = {
-  args: defaultArgs,
-  render: () => ({
-    template: `
-      <div style="padding: 20px;">
-        <cp-button @click="addLinkToaster">Show Toast with Action</cp-button>
-      </div>
-    `,
-    methods: {
-      addLinkToaster() {
-        this.$toaster.success({
-          title: 'This is a success toaster',
-          description: 'Description of a toaster with a link',
-          actionAs: 'link',
-          actionLabel: 'See flight information',
-          actionLinkProperties: {
-            href: 'http://app.citizenplane.com',
-            target: '_blank',
-            rel: 'noopener noreferrer',
-          },
-          isUnique: true,
-        })
-      },
-    },
-  }),
-}
-
-export const WithActionAsButton: Story = {
-  args: defaultArgs,
-  render: () => ({
-    template: `
-      <div style="padding: 20px;">
-        <cp-button @click="addLinkToaster">Show Toast with Action</cp-button>
-      </div>
-    `,
-    methods: {
-      addLinkToaster() {
-        this.$toaster.success({
-          title: 'This is a success toaster',
-          description: 'Description of a toaster with a link',
-          actionLabel: 'See flight information',
-          isUnique: true,
-          actionMethod: () => {
-            alert('Action button clicked!')
-          },
-        })
-      },
-    },
-  }),
-}
-
-export const CustomDuration: Story = {
-  args: defaultArgs,
-  render: () => ({
-    template: `
-      <div style="padding: 20px;">
-        <cp-button @click="addLongDurationToaster">Show Long Duration Toast</cp-button>
-      </div>
-    `,
-    methods: {
-      addLongDurationToaster() {
-        this.$toaster.info({
-          title: 'Long Duration Toast',
-          description: 'This toast will stay for 10 seconds',
-          delayBeforeCloseInMs: 10000,
-          isUnique: true,
-        })
-      },
-    },
-  }),
-}