@citizenplane/pimp 16.2.1 → 16.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "16.2.1",
+  "version": "16.3.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpTable.vue

@@ -20,6 +20,7 @@
               v-for="column in visibleColumns"
               :key="column.id"
               class="cpTable__column"
+              :class="getColumnClasses(column.id)"
               :style="getColumnStyle(column)"
             >
               <slot :column="column" name="column">
@@ -49,12 +50,11 @@
           >
             <slot name="row" :row="rowData">
               <td
-                v-for="(cellValue, cellKey, cellIndex) in rowData"
+                v-for="(cellValue, cellKey) in rowData"
                 :key="`${cellKey}_${rowIndex}`"
                 class="cpTable__cell"
                 :class="getCellClasses(cellKey)"
                 :colspan="getColspan(cellKey)"
-                :style="getCellStyle(cellKey, cellIndex)"
               >
                 <slot :cell="cellValue" :name="cellKey">
                   <span v-if="isFullWidthRow(rowData)">{{ cellValue }}</span>
@@ -136,6 +136,7 @@ import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 import { camelize, decamelize } from '@/helpers/string'
 
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (evt: 'onRowClick', data: Record<string, unknown>): void
@@ -544,6 +545,8 @@ const resetScrollPosition = () => {
   }
 }
 
+const getColumnClasses = (columnId: string) => `cpTable__column--is${capitalizeFirstLetter(columnId)}`
+
 const getColumnStyle = (column: CpTableColumnObject) => {
   let width: string | undefined
 
@@ -555,17 +558,7 @@ const getColumnStyle = (column: CpTableColumnObject) => {
     width = `${column.width}px`
   }
 
-  return {
-    width,
-    textAlign: column.textAlign,
-  }
-}
-
-const getCellStyle = (cellKey: RESERVED_KEYS, cellIndex: number) => {
-  if (isFullWidthCell(cellKey)) return null
-  return {
-    textAlign: visibleColumns.value[cellIndex]?.textAlign,
-  }
+  return { width }
 }
 
 const getRowClasses = (rowData: Record<string, unknown>, rowIndex: number) => {

package/src/components/index.ts

@@ -34,7 +34,6 @@ import CpItemActions from './CpItemActions.vue'
 import CpLoader from './CpLoader.vue'
 import CpMenuItem from './CpMenuItem.vue'
 import CpMultiselect from './CpMultiselect.vue'
-import CpPartnerBadge from './CpPartnerBadge.vue'
 import CpRadio from './CpRadio.vue'
 import CpRadioGroup from './CpRadioGroup.vue'
 import CpRadioNew from './CpRadioNew.vue'
@@ -103,7 +102,6 @@ const Components = {
   CpIcon,
   CpTelInput,
   CpTooltip,
-  CpPartnerBadge,
   CpAirlineLogo,
   IconAirline,
   IconOta,

package/src/constants/CpTableColumn.ts

@@ -4,7 +4,6 @@ export interface CpTableColumnObject {
   isHidden?: boolean
   isProtected?: boolean
   name: string
-  textAlign?: 'left' | 'center' | 'right'
   width?: number
 }
 

package/src/constants/index.ts

@@ -4,7 +4,6 @@ export type { ToggleColors } from './colors/ToggleColors'
 export { HeadingLevels } from './Heading'
 export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export type { Sizes } from './Sizes'
-export { PartnerTypes } from './PartnerTypes'
 
 export { CustomCpIcons } from './CpCustomIcons'
 export { Intent } from './Intent'

package/src/components/CpPartnerBadge.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="cpPartnerBadge" :class="componentDynamicClasses">
-    <slot name="icon">
-      <component :is="dynamicBadgeProps.icon" class="cpPartnerBadge__icon" />
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import IconAirline from '@/components/icons/IconAirline.vue'
-import IconOta from '@/components/icons/IconOta.vue'
-import IconSupplier from '@/components/icons/IconSupplier.vue'
-import IconThirdParty from '@/components/icons/IconThirdParty.vue'
-
-import { PartnerTypes } from '@/constants'
-import type { Sizes } from '@/constants'
-
-interface Props {
-  size?: Sizes
-  type?: PartnerTypes
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  type: PartnerTypes.THIRDPARTY,
-})
-
-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: var(--cp-spacing-xs);
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--cp-radius-sm);
-  color: var(--cp-text-white);
-
-  &--isOta {
-    background-color: var(--cp-background-warning-solid);
-  }
-
-  &--isAirline {
-    background-color: var(--cp-background-blue-solid);
-  }
-
-  &--isSupplier {
-    background-color: var(--cp-background-magenta-solid);
-  }
-
-  &--isThirdParty {
-    background-color: var(--cp-background-pink-solid);
-  }
-
-  > * {
-    width: var(--cp-dimensions-5);
-    height: var(--cp-dimensions-5);
-    aspect-ratio: 1/1;
-  }
-
-  &--sm > * {
-    width: var(--cp-dimensions-4);
-    height: var(--cp-dimensions-4);
-  }
-
-  &--xs > * {
-    width: var(--cp-dimensions-3);
-    height: var(--cp-dimensions-3);
-  }
-}
-</style>

package/src/constants/PartnerTypes.ts

@@ -1,6 +0,0 @@
-export enum PartnerTypes {
-  OTA = 'ota',
-  AIRLINE = 'airline',
-  SUPPLIER = 'supplier',
-  THIRDPARTY = 'thirdParty',
-}

package/src/stories/CpPartnerBadge.stories.ts

@@ -1,143 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import CpPartnerBadge from '@/components/CpPartnerBadge.vue'
-
-import { PartnerTypes } from '@/constants'
-import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
-
-const partnerSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] as const
-
-const meta = {
-  title: 'Atoms/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: partnerSizes,
-      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>
-
-type PartnerBadgeStoryArgs = NonNullable<Story['args']>
-
-const defaultTemplate = '<CpPartnerBadge v-bind="args" />'
-const defaultRender = (args: PartnerBadgeStoryArgs) => ({
-  components: { CpPartnerBadge },
-  setup() {
-    return { args }
-  },
-  template: defaultTemplate,
-})
-
-/**
- * Default partner badge. Use the controls to experiment with each prop in
- * isolation.
- */
-export const Default: Story = {
-  args: {
-    type: PartnerTypes.OTA,
-  },
-  render: defaultRender,
-}
-
-/* -------------------------------------------------------------------------- */
-/* Types                                                                      */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Every partner type rendered side by side. Each type gets its own icon and
- * background color.
- */
-export const Types: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => ({
-    components: { CpPartnerBadge },
-    setup() {
-      const entries = Object.entries(PartnerTypes)
-      return { entries, docCellStyle, docLabelStyle, docRowWrapStyle }
-    },
-    template: `
-      <div :style="docRowWrapStyle">
-        <div v-for="[name, type] in entries" :key="type" :style="docCellStyle">
-          <span :style="docLabelStyle">{{ name.toLowerCase() }}</span>
-          <CpPartnerBadge :type="type" />
-        </div>
-      </div>
-    `,
-  }),
-}
-
-/* -------------------------------------------------------------------------- */
-/* Sizes                                                                      */
-/* -------------------------------------------------------------------------- */
-
-/**
- * All sizes rendered side by side, from `2xs` to `4xl`.
- */
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => ({
-    components: { CpPartnerBadge },
-    setup() {
-      return { partnerSizes, PartnerTypes, docCellStyle, docLabelStyle, docRowWrapStyle }
-    },
-    template: `
-      <div :style="docRowWrapStyle">
-        <div v-for="size in partnerSizes" :key="size" :style="docCellStyle">
-          <span :style="docLabelStyle">{{ size }}</span>
-          <CpPartnerBadge :type="PartnerTypes.OTA" :size="size" />
-        </div>
-      </div>
-    `,
-  }),
-}
-
-/* -------------------------------------------------------------------------- */
-/* Slots                                                                      */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Override the default icon through the `#icon` slot.
- */
-export const WithCustomIcon: Story = {
-  render: () => ({
-    components: { CpPartnerBadge },
-    setup() {
-      return { PartnerTypes }
-    },
-    template: `
-      <CpPartnerBadge :type="PartnerTypes.OTA">
-        <template #icon>
-          <cp-icon type="plus" />
-        </template>
-      </CpPartnerBadge>
-    `,
-  }),
-}