@citizenplane/pimp 10.0.7 → 10.1.0

package/src/stories/CpLoader.stories.ts

@@ -14,7 +14,7 @@ const meta = {
     },
     color: {
       control: 'select',
-      options: ['Blue', 'Purple', 'Green', 'Orange', 'Red'],
+      options: ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'yellow'],
       description: 'The color variant of the loader',
     },
   },
@@ -25,6 +25,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    color: Colors.PURPLE,
+    color: Colors.NEUTRAL,
   },
 }

package/src/stories/CpMenuItem.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpMenuItem from '@/components/CpMenuItem.vue'
+
+const meta = {
+  title: 'CpMenuItem',
+  component: CpMenuItem,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label text for the menu item',
+    },
+    icon: {
+      control: 'text',
+      description: 'Icon name',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the menu item is disabled',
+    },
+    isCritical: {
+      control: 'boolean',
+      description: 'Whether the menu item is critical',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the menu item is loading',
+    },
+    isAsync: {
+      control: 'boolean',
+      description: 'Whether the command is async',
+    },
+    reverseLabel: {
+      control: 'boolean',
+      description: 'Whether to reverse icon/label order',
+    },
+    hideLabel: {
+      control: 'boolean',
+      description: 'Whether to hide the label',
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CpMenuItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Edit',
+    icon: 'edit-3',
+    isDisabled: false,
+    isCritical: false,
+    isLoading: false,
+    isAsync: false,
+    reverseLabel: false,
+    hideLabel: false,
+    tooltip: '',
+    command: () => alert('Edit clicked'),
+  },
+  render: (args) => ({
+    components: { CpMenuItem },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="width: 260px; border: 1px solid #e5e5e5; border-radius: 8px;">
+        <CpMenuItem v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const Critical: Story = {
+  args: {
+    ...Default.args,
+    label: 'Delete',
+    icon: 'trash-2',
+    isCritical: true,
+    command: () => alert('Delete clicked'),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    label: 'Archive',
+    icon: 'archive',
+    isDisabled: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    label: 'Download',
+    icon: 'download',
+    isLoading: true,
+  },
+}

package/src/stories/CpRadio.stories.ts

@@ -22,7 +22,7 @@ const meta = {
     },
     color: {
       control: 'select',
-      options: ['blue', 'purple'],
+      options: ['accent', 'blue'],
       description: 'Color variant of the radio',
     },
     autofocus: {
@@ -46,7 +46,7 @@ export const Default: Story = {
     modelValue: 'option1',
     options: sampleOptions,
     groupName: 'radio-group',
-    color: 'blue',
+    color: 'accent',
     autofocus: false,
   },
   render: (args) => ({
@@ -114,6 +114,33 @@ export const WithDisabledOptions: Story = {
   }),
 }
 
+export const CheckedDisabled: Story = {
+  args: {
+    ...Default.args,
+    options: [
+      { value: 'option1', label: 'Option 1', disabled: true },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3' },
+    ],
+    modelValue: 'option1',
+  },
+  render: (args) => ({
+    components: { CpRadio },
+    setup() {
+      const value = ref(args.modelValue)
+      return { args, value }
+    },
+    template: `
+      <div style="min-width: 400px; padding: 20px;">
+        <CpRadio
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
 export const ComplexOptions: Story = {
   args: {
     ...Default.args,

package/src/stories/CpSwitch.stories.ts

@@ -247,3 +247,30 @@ export const SwitchGroup: Story = {
     `,
   }),
 }
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { CpSwitch },
+    setup() {
+      const values = ref({
+        sm: false,
+        md: true,
+        lg: false,
+      })
+      return { values }
+    },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 20px;">
+        <div style="transform: scale(0.8); transform-origin: left center;">
+          <CpSwitch v-model="values.sm" label="Height 16px" />
+        </div>
+        <div>
+          <CpSwitch v-model="values.md" label="Height 20px" />
+        </div>
+        <div style="transform: scale(1.2); transform-origin: left center;">
+          <CpSwitch v-model="values.lg" label="Height 24px" />
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTable.stories.ts

@@ -272,3 +272,97 @@ export const WithOnlyDefaultAction: Story = {
     `,
   }),
 }
+
+export const ScrollCue: Story = {
+  args: {
+    ...Default.args,
+    columns: ['name', 'age', 'email', 'status', 'company', 'role', 'city', 'country'],
+    data: [
+      {
+        name: 'John Doe',
+        age: 30,
+        email: 'john@example.com',
+        status: 'Active',
+        company: 'CitizenPlane',
+        role: 'Analyst',
+        city: 'Paris',
+        country: 'France',
+      },
+      {
+        name: 'Jane Smith',
+        age: 25,
+        email: 'jane@example.com',
+        status: 'Inactive',
+        company: 'Kiwi',
+        role: 'Manager',
+        city: 'Prague',
+        country: 'Czechia',
+      },
+      {
+        name: 'Bob Johnson',
+        age: 35,
+        email: 'bob@example.com',
+        status: 'Active',
+        company: 'Atlas',
+        role: 'Engineer',
+        city: 'Berlin',
+        country: 'Germany',
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="max-width: 520px; padding: 20px;">
+        <CpTable v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const FullWidthRow: Story = {
+  args: {
+    ...Default.args,
+    data: [
+      { name: 'John Doe', age: 30, email: 'john@example.com', status: 'Active' },
+      { fullWidth: 'Full-width row content (e.g. summary or note)' },
+      { name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive' },
+    ],
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpTable v-bind="args" />
+      </div>
+    `,
+  }),
+}
+
+export const SelectedRow: Story = {
+  args: {
+    ...Default.args,
+    data: [
+      { name: 'John Doe', age: 30, email: 'john@example.com', status: 'Active' },
+      { name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive', isSelected: true },
+      { name: 'Bob Johnson', age: 35, email: 'bob@example.com', status: 'Active' },
+    ],
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpTable v-bind="args" />
+      </div>
+    `,
+  }),
+}

package/src/assets/css/spacing.css

@@ -1,43 +0,0 @@
-:root {
-  --pimp-letter-spacing-xs: 0;
-  --pimp-letter-spacing-sm: 0;
-  --pimp-letter-spacing-md: 0;
-  --pimp-letter-spacing-lg: 0;
-  --pimp-letter-spacing-xl: 0;
-  --pimp-letter-spacing-2xl: 0;
-  --pimp-letter-spacing-3xl: 0;
-  --pimp-letter-spacing-4xl: 0;
-  --pimp-letter-spacing-5xl: 0;
-  --pimp-letter-spacing-6xl: 0;
-  --pimp-letter-spacing-7xl: 0;
-  --pimp-letter-spacing-8xl: 0;
-  --pimp-letter-spacing-9xl: 0;
-
-  --pimp-line-height-xs: 16;
-  --pimp-line-height-sm: 20;
-  --pimp-line-height-md: 24;
-  --pimp-line-height-lg: 28;
-  --pimp-line-height-xl: 30;
-  --pimp-line-height-2xl: 32;
-  --pimp-line-height-3xl: 36;
-  --pimp-line-height-4xl: 40;
-  --pimp-line-height-5xl: 56;
-  --pimp-line-height-6xl: 72;
-  --pimp-line-height-7xl: 80;
-  --pimp-line-height-8xl: 96;
-  --pimp-line-height-9xl: 128;
-
-  --pimp-size-xs: 12;
-  --pimp-size-sm: 14;
-  --pimp-size-md: 16;
-  --pimp-size-lg: 18;
-  --pimp-size-xl: 20;
-  --pimp-size-2xl: 24;
-  --pimp-size-3xl: 30;
-  --pimp-size-4xl: 36;
-  --pimp-size-5xl: 48;
-  --pimp-size-6xl: 60;
-  --pimp-size-7xl: 72;
-  --pimp-size-8xl: 96;
-  --pimp-size-9xl: 128;
-}

package/src/assets/styles/helpers/_keyframes.scss

@@ -1,48 +0,0 @@
-@use '../variables/easings' as easings;
-
-// Fade in
-.fade-in-enter-active,
-.fade-in-leave-active {
-  transition: all 150ms ease-in-out;
-}
-
-.fade-in-enter-from,
-.fade-in-leave-to {
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-.scale-elastic-enter-active,
-.scale-elastic-leave-active {
-  transition:
-    opacity 300ms easings.$easing-elastic,
-    transform 200ms easings.$easing-elastic;
-}
-
-.scale-elastic-enter-from,
-.scale-elastic-leave-to {
-  transform: scale(0.9);
-  opacity: 0;
-}
-
-// Components
-// cp-select-menu
-@keyframes cp-select-menu-dropdown-enter {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes cp-select-menu-dropdown-leave {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

package/src/assets/styles/variables/_sizing.scss

@@ -1,4 +0,0 @@
-@use '../helpers/functions' as fn;
-
-$component-size-default: fn.px-to-em(40);
-$component-size-large: fn.px-to-em(54);