@citizenplane/pimp 8.14.1 → 8.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "8.14.1",
+  "version": "8.15.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/atomic-elements/CpAirlineLogo.vue

@@ -0,0 +1,41 @@
+<template>
+  <figure :style="dynamicStyle" class="cpAirlineLogo" :title="dynamicTitle" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  iataCode: {
+    type: String,
+    default: '1L',
+  },
+  size: {
+    type: [Number, String],
+    default: 32,
+  },
+})
+
+const airlineLogoUrl = computed(() => `https://images.kiwi.com/airlines/64/${props.iataCode}.png?default=airline.png`)
+
+const dynamicStyle = computed(() => {
+  const size = props.size === '100%' ? props.size : `${props.size}px`
+
+  return {
+    backgroundImage: `url('${airlineLogoUrl.value}')`,
+    width: size,
+    height: size,
+  }
+})
+
+const dynamicTitle = computed(() => `${props.iataCode} airline logo`)
+</script>
+
+<style lang="scss">
+.cpAirlineLogo {
+  overflow: hidden;
+  border-radius: fn.px-to-rem(4);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+</style>

package/src/components/atomic-elements/CpPartnerBadge.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="cpPartnerBadge" :class="componentDynamicClasses">
+    <slot name="icon">
+      <component :is="dynamicBadgeProps.icon" class="cpPartnerBadge__icon" />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { PartnerTypes, Sizes } from '@/utils/constants'
+
+import IconOta from '@/components/icons/IconOta.vue'
+import IconAirline from '@/components/icons/IconAirline.vue'
+import IconSupplier from '@/components/icons/IconSupplier.vue'
+import IconThirdParty from '@/components/icons/IconThirdParty.vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    required: false,
+    default: 'md',
+    validator(value) {
+      return Object.values(Sizes).includes(value)
+    },
+  },
+  type: {
+    type: String,
+    required: true,
+    validator(value) {
+      return Object.values(PartnerTypes).includes(value)
+    },
+  },
+})
+
+const dynamicBadgeProps = computed(() => {
+  switch (props.type) {
+    case PartnerTypes.OTA:
+      return { classModifier: 'isOta', icon: IconOta }
+    case PartnerTypes.AIRLINE:
+      return { classModifier: 'isAirline', icon: IconAirline }
+    case PartnerTypes.SUPPLIER:
+      return { classModifier: 'isSupplier', icon: IconSupplier }
+    case PartnerTypes.THIRDPARTY:
+    default:
+      return { classModifier: 'isThirdParty', icon: IconThirdParty }
+  }
+})
+
+const componentDynamicClasses = computed(() => {
+  return [`cpPartnerBadge--${props.size}`, `cpPartnerBadge--${dynamicBadgeProps.value.classModifier}`]
+})
+</script>
+
+<style lang="scss">
+.cpPartnerBadge {
+  display: inline-flex;
+  padding: sp.$space-xs;
+  align-items: center;
+  justify-content: center;
+  border-radius: fn.px-to-rem(4);
+  color: colors.$neutral-light;
+
+  &--isOta {
+    background-color: colors.$orange;
+  }
+
+  &--isAirline {
+    background-color: colors.$blue-1;
+  }
+
+  &--isSupplier {
+    background-color: colors.$purple;
+  }
+
+  &--isThirdParty {
+    background-color: colors.$pink;
+  }
+
+  > * {
+    width: fn.px-to-rem(20);
+    height: fn.px-to-rem(20);
+    aspect-ratio: 1/1;
+  }
+
+  &--sm > * {
+    width: fn.px-to-rem(16);
+    height: fn.px-to-rem(16);
+  }
+
+  &--xs > * {
+    width: fn.px-to-rem(12);
+    height: fn.px-to-rem(12);
+  }
+}
+</style>

package/src/components/icons/IconAirline.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      d="M10.1152 8.42326L10.1404 3.98405C10.1464 2.93184 11.0042 2.07886 12.0564 2.07886C13.1087 2.07886 13.9568 2.93184 13.9508 3.98405L13.9256 8.42326L19.7937 12.7402C20.0805 12.9512 20.2487 13.2867 20.2467 13.6437L20.2364 15.4465C20.2342 15.8357 19.8455 16.1062 19.4808 15.9723L13.8944 13.9217L13.8715 17.9399L15.1113 18.8728C15.3924 19.0843 15.5567 19.4164 15.5546 19.7691L15.5462 21.2515C15.5443 21.5964 15.2019 21.8378 14.8773 21.7231L11.9507 20.6891L9.01229 21.7231C8.68636 21.8378 8.34675 21.5964 8.34871 21.2515L8.35714 19.7691C8.35914 19.4164 8.52718 19.0843 8.81065 18.8728L10.0611 17.9399L10.0839 13.9217L4.47412 15.9723C4.10792 16.1062 3.72228 15.8357 3.72449 15.4465L3.73474 13.6437C3.73676 13.2867 3.90882 12.9512 4.19797 12.7402L10.1152 8.42326Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconOta.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    class="iconOta"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.5185 19.4762C14.4808 19.4317 14.4345 19.3951 14.3825 19.3684C14.3303 19.3418 14.2735 19.3257 14.215 19.3211H10.7464C10.6837 19.3233 10.6221 19.3382 10.5655 19.3649C10.5088 19.3915 10.4581 19.4294 10.4168 19.4762L8.59576 21.6558C8.55345 21.723 8.53101 21.8006 8.53101 21.8798C8.53101 21.9591 8.55345 22.0367 8.59576 22.1038C8.63272 22.1804 8.6925 22.2438 8.76696 22.2853C8.84143 22.327 8.92698 22.3447 9.01201 22.3364H15.9494C16.028 22.334 16.1044 22.3107 16.1711 22.2691C16.2376 22.2275 16.2917 22.169 16.328 22.0996C16.3642 22.0303 16.3811 21.9526 16.3771 21.8746C16.373 21.7966 16.3481 21.7211 16.3049 21.6558L14.5185 19.4762Z"
+    />
+    <path
+      d="M21.5838 1.66168H3.37509C3.03013 1.66168 2.69932 1.79782 2.45541 2.04014C2.21149 2.28245 2.07446 2.6111 2.07446 2.9538V16.7364C2.07446 17.079 2.21149 17.4077 2.45541 17.65C2.69932 17.8923 3.03013 18.0285 3.37509 18.0285H21.5838C21.9287 18.0285 22.2596 17.8923 22.5034 17.65C22.7474 17.4077 22.8844 17.079 22.8844 16.7364V2.9538C22.8844 2.6111 22.7474 2.28245 22.5034 2.04014C22.2596 1.79782 21.9287 1.66168 21.5838 1.66168ZM21.1503 14.1521C21.1503 14.2663 21.1045 14.3759 21.0233 14.4567C20.9419 14.5374 20.8317 14.5828 20.7167 14.5828H4.24217C4.12719 14.5828 4.01691 14.5374 3.93561 14.4567C3.8543 14.3759 3.80863 14.2663 3.80863 14.1521V3.81521C3.80863 3.70098 3.8543 3.59143 3.93561 3.51065C4.01691 3.42988 4.12719 3.3845 4.24217 3.3845H20.7167C20.8317 3.3845 20.9419 3.42988 21.0233 3.51065C21.1045 3.59143 21.1503 3.70098 21.1503 3.81521V14.1521Z"
+    />
+    <path
+      d="M13.3937 7.3024L15.0225 6.36819C15.4085 6.14676 15.9028 6.27919 16.1264 6.66398C16.35 7.04877 16.2184 7.54022 15.8323 7.76165L14.2035 8.69585L13.9059 11.4457C13.8684 11.7925 13.6669 12.1002 13.3635 12.2742C13.0328 12.4639 12.6122 12.2678 12.5461 11.893L12.1862 9.85298L10.7119 10.6986L10.6867 10.91C10.6361 11.3348 10.3872 11.7106 10.015 11.924C9.81121 12.0409 9.5519 11.9219 9.50833 11.6914L9.2983 10.5804L8.43479 9.84418C8.25568 9.69147 8.28157 9.40886 8.48538 9.29196C8.85756 9.07849 9.30954 9.05223 9.70523 9.2211L9.90209 9.30512L11.3763 8.45953L9.77799 7.12983C9.48431 6.88552 9.52361 6.42565 9.85438 6.23592C10.1578 6.06191 10.5267 6.04246 10.8478 6.18355L13.3937 7.3024Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconSupplier.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      d="M13.8299 2C15.8212 2 17.4369 3.60517 17.4369 5.58345V9.20768H17.42C16.1002 9.20768 15.0302 10.2706 15.0302 11.5807V13.319C15.0302 13.6981 14.7211 14.0064 14.3383 14.0064H9.66617C9.28457 14.0064 8.97422 13.6981 8.97422 13.319V11.5807C8.97422 10.2706 7.90431 9.20768 6.58442 9.20768H6.56873V5.58345C6.56873 3.60517 8.18326 2 10.1746 2H13.8299Z"
+    />
+    <path
+      d="M17.4343 10.3981C16.7665 10.3981 16.2267 10.9355 16.2267 11.5978V14.5178C16.2267 14.8933 15.92 15.1968 15.542 15.1968H8.45714C8.07917 15.1968 7.77365 14.8933 7.77365 14.5178V11.5978C7.77365 10.9355 7.23265 10.3981 6.56607 10.3981C5.89828 10.3981 5.35849 10.9355 5.35849 11.5978V15.7175C5.35849 16.7552 6.205 17.5962 7.24956 17.5962H9.50411C9.88208 17.5962 10.1888 17.9009 10.1888 18.2764V19.6596C10.1888 19.8456 10.0367 19.9955 9.84948 19.9955H8.78198C8.22528 19.9955 7.77365 20.4442 7.77365 20.9973C7.77365 21.5515 8.22528 22.0002 8.78198 22.0002H15.2184C15.7751 22.0002 16.2267 21.5515 16.2267 20.9973C16.2267 20.4442 15.7751 19.9955 15.2184 19.9955H14.1497C13.9625 19.9955 13.8116 19.8456 13.8116 19.6596V18.2764C13.8116 17.9009 14.1171 17.5962 14.495 17.5962H17.4343C17.7676 17.5962 18.0695 17.463 18.288 17.2459C18.5066 17.0275 18.6419 16.7276 18.6419 16.3965V11.5978C18.6419 10.9355 18.1009 10.3981 17.4343 10.3981Z"
+    />
+  </svg>
+</template>

package/src/components/icons/IconThirdParty.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M17.4 21C18.8912 21 20.1 19.7912 20.1 18.3C20.1 16.8088 18.8912 15.6 17.4 15.6C15.9088 15.6 14.7 16.8088 14.7 18.3C14.7 19.7912 15.9088 21 17.4 21Z"
+    />
+    <path
+      d="M6.59999 14.7C8.09116 14.7 9.29999 13.4912 9.29999 12C9.29999 10.5088 8.09116 9.3 6.59999 9.3C5.10883 9.3 3.89999 10.5088 3.89999 12C3.89999 13.4912 5.10883 14.7 6.59999 14.7Z"
+    />
+    <path d="M8.931 13.359L15.078 16.941" />
+    <path
+      d="M17.4 8.4C18.8912 8.4 20.1 7.19117 20.1 5.7C20.1 4.20883 18.8912 3 17.4 3C15.9088 3 14.7 4.20883 14.7 5.7C14.7 7.19117 15.9088 8.4 17.4 8.4Z"
+    />
+    <path d="M15.069 7.05901L8.931 10.641" />
+  </svg>
+</template>

package/src/stories/CpAirlineLogo.stories.ts

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpAirlineLogo from '@/components/atomic-elements/CpAirlineLogo.vue'
+
+const meta = {
+  title: 'CpAirlineLogo',
+  component: CpAirlineLogo,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component that displays airline logos using IATA codes. Fetches logos from Kiwi.com CDN and displays them with customizable sizes.',
+      },
+    },
+  },
+  argTypes: {
+    iataCode: {
+      control: 'text',
+      description: 'The IATA airline code (e.g., "LH" for Lufthansa, "BA" for British Airways)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '1L' },
+      },
+    },
+    size: {
+      control: 'number',
+      description: 'The size of the logo in pixels',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '32' },
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CpAirlineLogo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = '<CpAirlineLogo v-bind="args" />'
+const defaultRender = (args) => ({
+  components: { CpAirlineLogo },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
+export const Default: Story = {
+  args: {
+    iataCode: 'AF',
+    size: 32,
+  },
+  render: defaultRender,
+}
+
+export const MultipleAirlines: Story = {
+  render: () => ({
+    components: { CpAirlineLogo },
+    template: `
+      <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+        <CpAirlineLogo iataCode="1L" :size="32" />
+        <CpAirlineLogo iataCode="BA" :size="32" />
+        <CpAirlineLogo iataCode="EK" :size="32" />
+        <CpAirlineLogo iataCode="AA" :size="32" />
+        <CpAirlineLogo iataCode="AF" :size="32" />
+        <CpAirlineLogo iataCode="KL" :size="32" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple airline logos displayed together.',
+      },
+    },
+  },
+}
+
+export const EmptyIATACode: Story = {
+  args: {
+    iataCode: '',
+    size: 32,
+  },
+  render: defaultRender,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the component with an empty IATA code.',
+      },
+    },
+  },
+}

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',
+}