@citizenplane/pimp 8.14.1 → 8.15.1

package/src/stories/CpPartnerBadge.stories.ts

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpPartnerBadge from '@/components/atomic-elements/CpPartnerBadge.vue'
+
+import { PartnerTypes, Sizes } from '@/utils/constants'
+
+const meta = {
+  title: 'CpPartnerBadge',
+  component: CpPartnerBadge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A badge component that displays partner type icons with different background colors based on the partner type. Supports OTA, Airline, Supplier, and Third Party partner types.',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.values(PartnerTypes),
+      description: 'The type of partner (determines icon and background color)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'ota' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: Object.values(Sizes),
+      description: 'The size of the badge',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CpPartnerBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = '<CpPartnerBadge v-bind="args" />'
+const defaultRender = (args) => ({
+  components: { CpPartnerBadge },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
+export const Default: Story = {
+  args: {
+    type: PartnerTypes.OTA,
+  },
+  render: defaultRender,
+}
+
+export const OTA: Story = {
+  args: {
+    type: PartnerTypes.OTA,
+  },
+  render: defaultRender,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Partner badge for Online Travel Agencies (OTA) with orange background and OTA icon.',
+      },
+    },
+  },
+}
+
+export const Airline: Story = {
+  args: {
+    type: PartnerTypes.AIRLINE,
+  },
+  render: defaultRender,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Partner badge for Airlines with blue background and airline icon.',
+      },
+    },
+  },
+}
+
+export const Supplier: Story = {
+  args: {
+    type: PartnerTypes.SUPPLIER,
+  },
+  render: defaultRender,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Partner badge for Suppliers with purple background and supplier icon.',
+      },
+    },
+  },
+}
+
+export const ThirdParty: Story = {
+  args: {
+    type: PartnerTypes.THIRDPARTY,
+  },
+  render: defaultRender,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Partner badge for Third Party partners with pink background and share icon.',
+      },
+    },
+  },
+}
+
+export const AllTypes: Story = {
+  render: () => ({
+    components: { CpPartnerBadge },
+    setup() {
+      return { PartnerTypes }
+    },
+    template: `
+      <div style="display: flex; gap: 16px; align-items: center;">
+        <CpPartnerBadge :type="PartnerTypes.OTA" />
+        <CpPartnerBadge :type="PartnerTypes.AIRLINE" />
+        <CpPartnerBadge :type="PartnerTypes.SUPPLIER" />
+        <CpPartnerBadge :type="PartnerTypes.THIRDPARTY" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All partner badge types displayed together for comparison.',
+      },
+    },
+  },
+}
+
+export const WithCustomIcon: Story = {
+  render: () => ({
+    components: { CpPartnerBadge },
+    setup() {
+      return { PartnerTypes }
+    },
+    template: `
+      <CpPartnerBadge :type="PartnerTypes.OTA">
+        <template #icon>
+          <cp-icon type="plus" />
+        </template>
+      </CpPartnerBadge>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Partner badge with a custom icon using the icon slot.',
+      },
+    },
+  },
+}

package/src/utils/constants/index.js

@@ -1 +1,3 @@
 export { default as Intent } from './src/Intent'
+export { default as Sizes } from './src/Sizes'
+export { default as PartnerTypes } from './src/PartnerTypes'

package/src/utils/constants/src/PartnerTypes.js

@@ -0,0 +1,6 @@
+export default {
+  OTA: 'ota',
+  AIRLINE: 'airline',
+  SUPPLIER: 'supplier',
+  THIRDPARTY: 'thirdParty',
+}

package/src/utils/constants/src/Sizes.js

@@ -0,0 +1,5 @@
+export default {
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+}