@citizenplane/pimp 10.0.8 → 10.1.1

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/_colors.scss

@@ -1,89 +0,0 @@
-// CitizenPlane colors
-$astronaut: #3e3e5b;
-
-$gray-1: #8b8b9d;
-$gray-3: #c6c6ce;
-$gray-4: #d8d8de;
-$gray-5: #ececef;
-$gray-500: #b2b2bd;
-
-$red: #eb0505;
-$red-50: #fff7f7;
-$red-100: #ffe5e5;
-$red-200: #ffb3b3;
-$red-500: #d52841;
-$red-700: #710019;
-
-$blue: #144dc2;
-$blue-50: #f6faff;
-$blue-100: #e3f2ff;
-$blue-200: #b3d4ff;
-$blue-500: #1564de;
-$blue-700: #003382;
-
-$green: #00895c;
-$green-50: #ecfff4;
-$green-100: #e6fff4;
-$green-200: #b8ffdf;
-$green-500: #008254;
-$green-700: #00462b;
-
-$yellow: #ffd00b;
-$yellow-100: #fff9e3;
-$yellow-200: #ffea82;
-$yellow-300: #ffea82;
-$yellow-500: #998700;
-
-$orange: #ffa800;
-$orange-50: #fff8f2;
-$orange-100: #fff4e3;
-$orange-200: #ffe0a3;
-$orange-500: #a05800;
-$orange-600: #d17a00;
-$orange-700: #582e00;
-
-$purple: #5341f9;
-$purple-100: #e5e3ff;
-$purple-200: #c8c4ff;
-$purple-500: #5341f9;
-$purple-600: #4b3ad0;
-$purple-700: #3400a0;
-
-$pink: #ff7dc1;
-$pink-100: #ffe6f2;
-$pink-200: #ffcce6;
-$pink-500: #ff7dc1;
-
-$green-2: #00c582;
-$green-1: #00f8a4;
-
-$blue-1: #56c1fe;
-
-// Main colors
-$primary-color: $purple;
-$secondary-color: $blue;
-$tertiary-color: $pink;
-
-// Accent colors
-$error-color: $red;
-$warning-color: $orange;
-$success-color: $green-2;
-$success-color-light: $green-1;
-$accent-color-1: $blue-1;
-
-// Neutral colors
-$neutral-dark: $astronaut;
-
-// Gray
-$neutral-dark-1: $gray-1;
-$neutral-dark-2: $gray-500;
-$neutral-dark-3: $gray-3;
-$neutral-dark-4: $gray-4;
-$neutral-dark-5: $gray-5;
-
-// White
-$neutral-light: #ffffff;
-$neutral-light-1: #f9fafc;
-
-// Border colors
-$border-color: $neutral-dark-4;

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

@@ -1 +0,0 @@
-$easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);

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);

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

@@ -1,10 +0,0 @@
-@use 'sass:math';
-@use '../helpers/functions' as fn;
-
-$space: fn.px-to-rem(8);
-
-$space-xs: math.div($space, 4);
-$space-sm: math.div($space, 2);
-$space-md: $space * 1.5;
-$space-lg: $space * 2;
-$space-xl: $space * 3;