@citizenplane/pimp 11.0.5 → 12.0.1

package/src/constants/colors/Colors.ts

@@ -1,20 +1,16 @@
-export enum Colors {
-  NEUTRAL = 'neutral',
-  ACCENT = 'accent',
-  ERROR = 'error',
-  WARNING = 'warning',
-  SUCCESS = 'success',
-
-  BLUE = 'blue',
-  PINK = 'pink',
-  MAGENTA = 'magenta',
-  YELLOW = 'yellow',
-
-  WHITE = 'white',
-
-  GRAY = 'gray', // TODO: Should be replace by NEUTRAL
-  GREEN = 'green', // TODO: Should be replace by SUCCESS
-  ORANGE = 'orange', // TODO: Should be replace by WARNING
-  PURPLE = 'purple', // TODO: Should be replace by ACCENT
-  RED = 'red', // TODO: Should be replace by ERROR
-}
+export type Colors =
+  | 'neutral'
+  | 'accent'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'blue'
+  | 'pink'
+  | 'magenta'
+  | 'yellow'
+  | 'white'
+  | 'gray' // TODO: Should be replace by NEUTRAL
+  | 'green' // TODO: Should be replace by SUCCESS
+  | 'orange' // TODO: Should be replace by WARNING
+  | 'purple' // TODO: Should be replace by ACCENT
+  | 'red' // TODO: Should be replace by ERROR

package/src/constants/colors/ToggleColors.ts

@@ -1,7 +1,4 @@
 import { Colors } from './Colors'
 
-export enum ToggleColors {
-  ACCENT = Colors.ACCENT,
-  BLUE = Colors.BLUE,
-  PURPLE = Colors.PURPLE, // TODO: Should be replace by ACCENT
-}
+// TODO: purple should be replace by ACCENT
+export type ToggleColors = Extract<Colors, 'accent' | 'blue' | 'purple'>

package/src/constants/index.ts

@@ -1,6 +1,6 @@
-export { Colors } from './colors/Colors'
+export type { Colors } from './colors/Colors'
 export { Position } from './Position'
-export { ToggleColors } from './colors/ToggleColors'
+export type { ToggleColors } from './colors/ToggleColors'
 export { HeadingLevels } from './Heading'
 export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export { Sizes } from './Sizes'

package/src/stories/CpBadge.stories.ts

@@ -2,7 +2,7 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
-import { Colors, Sizes } from '@/constants'
+import { Sizes } from '@/constants'
 
 const meta = {
   title: 'CpBadge',
@@ -62,7 +62,7 @@ const defaultRender = (args: Args) => ({
 
 export const Default: Story = {
   args: {
-    color: Colors.NEUTRAL,
+    color: 'neutral',
     size: Sizes.MD,
     isStroked: false,
     isSquare: false,
@@ -214,7 +214,7 @@ export const IsDisabledWithIcon: Story = {
     ...Default.args,
     isDisabled: true,
     label: 'Disabled',
-    color: Colors.RED,
+    color: 'red',
     leadingIcon: 'check',
     trailingIcon: 'arrow-right',
   },

package/src/stories/CpButton.stories.ts

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
+import { ButtonAppearances } from '@/constants/Button'
+import { Sizes } from '@/constants/Sizes'
+
 import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
 
 const meta = {
   title: 'CpButton',
@@ -8,7 +12,7 @@ const meta = {
   argTypes: {
     appearance: {
       control: 'select',
-      options: ['default', 'primary', 'minimal'],
+      options: ['primary', 'secondary', 'tertiary'],
       description: 'The visual style of the button',
     },
     size: {
@@ -18,7 +22,7 @@ const meta = {
     },
     color: {
       control: 'select',
-      options: ['Blue', 'Purple', 'Green', 'Orange', 'Red'],
+      options: ['Neutral', 'Accent', 'Success', 'Warning', 'Error'],
       description: 'The color variant of the button',
     },
     disabled: {
@@ -43,7 +47,6 @@ const meta = {
       control: 'boolean',
       description: 'Whether the button has square corners',
     },
-    onClick: { action: 'clicked' },
   },
 } satisfies Meta<typeof CpButton>
 
@@ -51,7 +54,8 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 const defaultTemplate = '<CpButton v-bind="args">Button</CpButton>'
-const defaultRender = (args) => ({
+
+const defaultRender = (args: (typeof CpButton)['props']) => ({
   components: { CpButton },
   setup() {
     return { args }
@@ -59,67 +63,334 @@ const defaultRender = (args) => ({
   template: defaultTemplate,
 })
 
-export const Default: Story = {
-  args: {
-    appearance: 'default',
-    disabled: false,
-    tag: 'button',
-    type: 'button',
-    isLoading: false,
-    isSquare: false,
+const docSectionStyle =
+  'background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);'
+const docTitleStyle =
+  'margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;'
+const docRowStyle = 'display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;'
+const docCellStyle = 'display: flex; flex-direction: column; gap: 8px; align-items: flex-start;'
+const docLabelStyle = 'font-size: 12px; color: #6b7280;'
+
+export const Documentation: Story = {
+  args: {},
+  render: () => ({
+    components: { CpButton, CpIcon },
+    setup: () => ({}),
+    template: `
+      <div>
+        <div style="padding: 24px; background: #f3f4f6; min-height: 100vh;">
+          <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">Button</h1>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Size</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">2xs</span>
+              <CpButton color="accent" size="${Sizes.XXS}">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">xs</span>
+              <CpButton color="accent" size="${Sizes.XS}">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">sm</span>
+              <CpButton color="accent" size="${Sizes.SM}">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">md</span>
+              <CpButton color="accent" size="${Sizes.MD}">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">lg</span>
+              <CpButton color="accent" size="${Sizes.LG}">Default button</CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Color</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">neutral</span>
+              <CpButton color="neutral">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">accent</span>
+              <CpButton color="accent">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">error</span>
+              <CpButton color="error">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">warning</span>
+              <CpButton color="warning">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">success</span>
+              <CpButton color="success">Default button</CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">State</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">default</span>
+              <CpButton color="accent">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">disabled</span>
+              <CpButton color="accent" :disabled="true">Default button</CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Squared</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">false</span>
+              <CpButton color="accent" :is-square="false">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">true</span>
+              <CpButton color="accent" :is-square="true">Default button</CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Style</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">primary</span>
+              <CpButton color="accent">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">secondary</span>
+              <CpButton appearance="secondary" color="accent">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">tertiary</span>
+              <CpButton appearance="tertiary" color="accent">Default button</CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Icon</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">—</span>
+              <CpButton color="accent">Default button</CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">leading</span>
+              <CpButton color="accent">
+                <template #leading-icon><CpIcon type="plus" /></template>
+                Default button
+              </CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">leading + trailing</span>
+              <CpButton color="accent">
+                <template #leading-icon><CpIcon type="plus" /></template>
+                Default button
+                <template #trailing-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">trailing</span>
+              <CpButton color="accent">
+                Default button
+                <template #trailing-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+          </div>
+        </section>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: null,
+      },
+    },
   },
-  render: defaultRender,
 }
 
-export const Primary: Story = {
-  args: {
-    ...Default.args,
-    appearance: 'primary',
-    color: 'Purple',
-  },
+export const Default: Story = {
+  args: {},
   render: defaultRender,
 }
 
-export const Minimal: Story = {
-  args: {
-    ...Default.args,
-    appearance: 'minimal',
-    color: 'Blue',
+/** Semantic colors shown in appearance variant stories (primary, secondary, etc.). */
+const semanticButtonColors = [
+  { value: 'neutral', label: 'neutral' },
+  { value: 'accent', label: 'accent' },
+  { value: 'error', label: 'error' },
+  { value: 'warning', label: 'warning' },
+  { value: 'success', label: 'success' },
+] as const
+
+const appearanceVariantsStoryParameters = {
+  docs: {
+    source: {
+      code: null,
+    },
   },
-  render: defaultRender,
+} as const
+
+function createAppearanceVariantsStory(appearance: ButtonAppearances): Story {
+  return {
+    args: {
+      ...Default.args,
+      appearance,
+    },
+    render: (args) => ({
+      components: { CpButton },
+      setup: () => ({
+        args,
+        semanticButtonColors,
+        storyAppearance: appearance,
+      }),
+      template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px;">
+        <div
+          v-for="c in semanticButtonColors"
+          :key="c.value"
+          style="display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);"
+        >
+          <h4 style="margin: 0; font-size: 14px; font-weight: 600; color: #333; text-transform: capitalize;">{{ c.label }}</h4>
+          <div style="display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;">
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+              <span style="font-size: 12px; color: #6b7280; font-weight: 500;">Square</span>
+              <div style="display: flex; gap: 16px; align-items: flex-end;">
+                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                  <span style="font-size: 12px; color: #9ca3af;">Normal</span>
+                  <CpButton
+                    v-bind="args"
+                    :appearance="storyAppearance"
+                    :color="c.value"
+                    :is-square="true"
+                    :disabled="false"
+                  >
+                    Default button
+                  </CpButton>
+                </div>
+                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                  <span style="font-size: 12px; color: #9ca3af;">Disabled</span>
+                  <CpButton
+                    v-bind="args"
+                    :appearance="storyAppearance"
+                    :color="c.value"
+                    :is-square="true"
+                    :disabled="true"
+                  >
+                    Default button
+                  </CpButton>
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 12px;">
+              <span style="font-size: 12px; color: #6b7280; font-weight: 500;">Not square</span>
+              <div style="display: flex; gap: 16px; align-items: flex-end;">
+                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                  <span style="font-size: 12px; color: #9ca3af;">Normal</span>
+                  <CpButton
+                    v-bind="args"
+                    :appearance="storyAppearance"
+                    :color="c.value"
+                    :is-square="false"
+                    :disabled="false"
+                  >
+                    Default button
+                  </CpButton>
+                </div>
+                <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                  <span style="font-size: 12px; color: #9ca3af;">Disabled</span>
+                  <CpButton
+                    v-bind="args"
+                    :appearance="storyAppearance"
+                    :color="c.value"
+                    :is-square="false"
+                    :disabled="true"
+                  >
+                    Default button
+                  </CpButton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+    }),
+    parameters: appearanceVariantsStoryParameters,
+  }
 }
 
+export const Primary = createAppearanceVariantsStory('primary')
+export const Secondary = createAppearanceVariantsStory('secondary')
+export const Tertiary = createAppearanceVariantsStory('tertiary')
+
+const withIconsSizes = [
+  { value: Sizes.XXS, label: '2xs' },
+  { value: Sizes.XS, label: 'xs' },
+  { value: Sizes.SM, label: 'sm' },
+  { value: Sizes.MD, label: 'md' },
+  { value: Sizes.LG, label: 'lg' },
+] as const
+
 export const WithIcons: Story = {
   args: {
     ...Default.args,
     appearance: 'primary',
-    color: 'Purple',
+    color: 'accent',
   },
   render: (args) => ({
-    components: { CpButton },
-    setup: () => ({ args }),
+    components: { CpButton, CpIcon },
+    setup: () => ({ args, withIconsSizes }),
     template: `
-      <CpButton v-bind="args">
-        <template #leading-icon>
-          <CpIcon type="arrow-left" />
-        </template>
-        Button with Icon
-        <template #trailing-icon>
-          <CpIcon type="arrow-right" />
-        </template>
-      </CpButton>
+      <div style="display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end; padding: 24px;">
+        <div
+          v-for="s in withIconsSizes"
+          :key="s.value"
+          style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;"
+        >
+          <span style="font-size: 12px; color: #6b7280;">{{ s.label }}</span>
+          <CpButton v-bind="args" :size="s.value">
+            <template #leading-icon>
+              <CpIcon type="arrow-left" />
+            </template>
+            Button with Icon
+            <template #trailing-icon>
+              <CpIcon type="arrow-right" />
+            </template>
+          </CpButton>
+        </div>
+      </div>
     `,
   }),
 }
 
 export const WithHaptics: Story = {
-  args: { ...Default.args, enableHaptics: true },
+  args: {
+    ...Default.args,
+    enableHaptics: true,
+    color: 'accent',
+  },
   render: (args) => ({
     components: { CpButton },
     setup() {
       const onClick = () => {
         console.log('Button clicked')
       }
+
       return { args, onClick }
     },
     template: `
@@ -131,48 +402,126 @@ export const WithHaptics: Story = {
 }
 
 export const Loading: Story = {
-  args: { ...Default.args, isLoading: true },
-  render: defaultRender,
-}
-
-export const Disabled: Story = {
-  args: { ...Default.args, disabled: true },
+  args: {
+    ...Default.args,
+    isLoading: true,
+    color: 'accent',
+  },
   render: defaultRender,
 }
 
-export const DifferentSizes: Story = {
-  args: { ...Default.args },
-  render: (args) => ({
-    components: { CpButton },
-    setup: () => ({ args }),
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpButton v-bind="args" color="purple" size="2xs">Extra Extra Small</CpButton>
-        <CpButton v-bind="args" color="blue" size="xs">Extra Small</CpButton>
-        <CpButton v-bind="args" color="green" size="sm">Small</CpButton>
-        <CpButton v-bind="args" color="orange" size="md">Medium</CpButton>
-        <CpButton v-bind="args" color="red" size="lg">Large</CpButton>
-      </div>
-    `,
-  }),
-}
+const iconOnlySizes = [
+  { value: Sizes.XXS, label: '2xs' },
+  { value: Sizes.XS, label: 'xs' },
+  { value: Sizes.SM, label: 'sm' },
+  { value: Sizes.MD, label: 'md' },
+  { value: Sizes.LG, label: 'lg' },
+] as const
 
-export const Square: Story = {
-  args: { ...Default.args, isSquare: true },
-  render: defaultRender,
-}
+/** Icon-only appearances (inverse excluded for this story). */
+const iconOnlyAppearances = [
+  { value: 'primary', label: 'primary' },
+  { value: 'secondary', label: 'secondary' },
+  { value: 'tertiary', label: 'tertiary' },
+] as const
 
 export const IconOnly: Story = {
-  args: { ...Default.args },
+  args: {
+    ...Default.args,
+    appearance: 'primary',
+    color: 'accent',
+    isSquare: true,
+  },
   render: (args) => ({
-    components: { CpButton },
-    setup: () => ({ args }),
+    components: { CpButton, CpIcon },
+    setup: () => ({
+      args,
+      iconOnlySizes,
+      iconOnlyAppearances,
+      semanticButtonColors,
+      docSectionStyle,
+      docTitleStyle,
+      docRowStyle,
+      docCellStyle,
+      docLabelStyle,
+    }),
     template: `
-      <CpButton v-bind="args">
-        <template #leading-icon>
-          <CpIcon type="arrow-left" />
-        </template>
-      </CpButton>
+      <div style="padding: 24px; background: #f3f4f6; min-height: 100vh;">
+        <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">Icon Button</h1>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Size</h2>
+          <div style="${docRowStyle}">
+            <div
+              v-for="s in iconOnlySizes"
+              :key="s.value"
+              style="${docCellStyle}"
+            >
+              <span style="${docLabelStyle}">{{ s.label }}</span>
+              <CpButton v-bind="args" :size="s.value">
+                <template #leading-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Color</h2>
+          <div style="${docRowStyle}">
+            <div
+              v-for="c in semanticButtonColors"
+              :key="c.value"
+              style="${docCellStyle}"
+            >
+              <span style="${docLabelStyle}">{{ c.label }}</span>
+              <CpButton v-bind="args" :color="c.value">
+                <template #leading-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Squared</h2>
+          <div style="${docRowStyle}">
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">false</span>
+              <CpButton v-bind="args" :is-square="false">
+                <template #leading-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+            <div style="${docCellStyle}">
+              <span style="${docLabelStyle}">true</span>
+              <CpButton v-bind="args" :is-square="true">
+                <template #leading-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+          </div>
+        </section>
+
+        <section style="${docSectionStyle}">
+          <h2 style="${docTitleStyle}">Style</h2>
+          <div style="${docRowStyle}">
+            <div
+              v-for="a in iconOnlyAppearances"
+              :key="a.value"
+              style="${docCellStyle}"
+            >
+              <span style="${docLabelStyle}">{{ a.label }}</span>
+              <CpButton v-bind="args" :appearance="a.value">
+                <template #leading-icon><CpIcon type="plus" /></template>
+              </CpButton>
+            </div>
+          </div>
+        </section>
+      </div>
     `,
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
 }

package/src/stories/CpLoader.stories.ts

@@ -2,8 +2,6 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpLoader from '@/components/CpLoader.vue'
 
-import { Colors } from '@/constants'
-
 const meta = {
   title: 'CpLoader',
   component: CpLoader,
@@ -25,6 +23,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    color: Colors.NEUTRAL,
+    color: 'neutral',
   },
 }