@citizenplane/pimp 12.0.3 → 13.0.0

package/package.json

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

package/src/components/CpLoader.vue

@@ -4,10 +4,10 @@
     class="cpLoader"
     :class="dynamicClasses"
     enable-background="new 0 0 40 40"
-    :height="sizeAttrs.height"
+    :height="40"
     version="1.1"
     viewBox="0 0 40 40"
-    :width="sizeAttrs.width"
+    :width="40"
     x="0px"
     xml:space="preserve"
     xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +25,7 @@
       <animateTransform
         attributeName="transform"
         attributeType="xml"
-        dur="0.5s"
+        :dur="formatedDuration"
         from="0 20 20"
         repeatCount="indefinite"
         to="360 20 20"
@@ -41,23 +41,22 @@ import { computed } from 'vue'
 import { Colors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
+type LoaderColor = Extract<Colors, 'neutral' | 'accent' | 'error' | 'warning' | 'success'>
+type LoaderSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+
 interface Props {
-  color?: Colors
-  size?: number | string
+  color?: LoaderColor
+  duration?: number
+  size?: LoaderSize
 }
 
-const props = withDefaults(defineProps<Props>(), { color: 'accent', size: 24 })
+const props = withDefaults(defineProps<Props>(), { color: 'accent', duration: 700, size: 'sm' })
 
-const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
+const formatedDuration = computed(() => `${props.duration}ms`)
 
 const dynamicClasses = computed(() => {
-  return [`cpLoader--is${capitalizedColor.value}`, `cpLoader--${props.size}`]
+  return [`cpLoader--is${capitalizeFirstLetter(props.color)}`, `cpLoader--${props.size}`]
 })
-
-const sizeAttrs = computed(() => ({
-  height: props.size,
-  width: props.size,
-}))
 </script>
 
 <style lang="scss">
@@ -74,12 +73,36 @@ const sizeAttrs = computed(() => ({
   @include cp-loader-themed('Warning', var(--cp-foreground-warning-secondary));
   @include cp-loader-themed('Success', var(--cp-foreground-success-secondary));
 
-  @include cp-loader-themed('Blue', var(--cp-foreground-blue-secondary));
-  @include cp-loader-themed('Yellow', var(--cp-utility-yellow-300));
+  &--2xs {
+    @include mx.square-sizing(16);
+  }
+
+  &--xs {
+    @include mx.square-sizing(20);
+  }
+
+  &--sm {
+    @include mx.square-sizing(24);
+  }
+
+  &--md {
+    @include mx.square-sizing(32);
+  }
+
+  &--lg {
+    @include mx.square-sizing(40);
+  }
+
+  &--xl {
+    @include mx.square-sizing(48);
+  }
+
+  &--2xl {
+    @include mx.square-sizing(64);
+  }
 
-  @include cp-loader-themed('Purple', var(--cp-text-accent-primary)); // TODO: Should be replace by ACCENT
-  @include cp-loader-themed('Green', var(--cp-text-success-primary)); // TODO: Should be replace by SUCCESS
-  @include cp-loader-themed('Orange', var(--cp-text-warning-primary)); // TODO: Should be replace by WARNING
-  @include cp-loader-themed('Red', var(--cp-text-error-primary)); // TODO: Should be replace by ERROR
+  &--3xl {
+    @include mx.square-sizing(96);
+  }
 }
 </style>

package/src/stories/CpLoader.stories.ts

@@ -7,14 +7,19 @@ const meta = {
   component: CpLoader,
   argTypes: {
     size: {
-      control: 'number',
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
       description: 'Size of the loader in pixels',
     },
     color: {
       control: 'select',
-      options: ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'yellow'],
+      options: ['neutral', 'accent', 'error', 'warning', 'success'],
       description: 'The color variant of the loader',
     },
+    duration: {
+      control: 'number',
+      description: 'The duration of the loader in ms (700ms by default)',
+    },
   },
 } satisfies Meta<typeof CpLoader>