@citizenplane/pimp 9.14.0 → 9.15.0

package/package.json

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

package/src/assets/{styles/base/_base.scss → css/base.css}

@@ -1,11 +1,4 @@
-@use '../variables/colors' as colors;
-@use '../helpers/functions' as fn;
-
-:root {
-  --pimp-font-monospace: 'Azeret Mono';
-}
-
-// Primary Elements
+/* Primary Elements */
 
 html {
   /* border-box box model allows us to add padding and border to our elements without increasing their size */
@@ -15,7 +8,7 @@ html {
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol';
   font-size: 100%;
-  color: colors.$neutral-dark;
+  color: var(--pimp-text-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -ms-text-size-adjust: 100%;
@@ -39,7 +32,7 @@ body {
   background-color: transparent;
 }
 
-// Secondary Elements
+/* Secondary Elements */
 button {
   border-style: none;
   padding: 0;

package/src/assets/css/colors.css

@@ -0,0 +1,123 @@
+:root {
+  --pimp-colors-black: #000000;
+
+  --pimp-colors-blue-100: #e5efff;
+  --pimp-colors-blue-1000: #00133a;
+  --pimp-colors-blue-200: #bdd6ff;
+  --pimp-colors-blue-300: #90baff;
+  --pimp-colors-blue-400: #4c8dfa;
+  --pimp-colors-blue-50: #f6faff;
+  --pimp-colors-blue-500: #1564de;
+  --pimp-colors-blue-600: #0049b1;
+  --pimp-colors-blue-700: #003382;
+  --pimp-colors-blue-800: #00286a;
+  --pimp-colors-blue-900: #001e53;
+
+  --pimp-colors-green-100: #dcf9e8;
+  --pimp-colors-green-1000: #001c0f;
+  --pimp-colors-green-200: #98eabe;
+  --pimp-colors-green-300: #54d599;
+  --pimp-colors-green-400: #00ac71;
+  --pimp-colors-green-50: #ecfff4;
+  --pimp-colors-green-500: #008254;
+  --pimp-colors-green-600: #00623e;
+  --pimp-colors-green-700: #00462b;
+  --pimp-colors-green-800: #003822;
+  --pimp-colors-green-900: #002b19;
+
+  --pimp-colors-grey-100: #f2f3fa;
+  --pimp-colors-grey-1000: #20212f;
+  --pimp-colors-grey-200: #e9eaf6;
+  --pimp-colors-grey-300: #d1d3e6;
+  --pimp-colors-grey-400: #b4b7d3;
+  --pimp-colors-grey-50: #f9f9fd;
+  --pimp-colors-grey-500: #989bba;
+  --pimp-colors-grey-600: #717496;
+  --pimp-colors-grey-700: #525470;
+  --pimp-colors-grey-800: #36384d;
+  --pimp-colors-grey-900: #2b2c3e;
+
+  --pimp-colors-grey-shadow-color-10: rgba(108, 110, 181, 0.1);
+  --pimp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 0.125);
+  --pimp-colors-grey-shadow-color-15: rgba(108, 110, 181, 0.15);
+  --pimp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 0.175);
+  --pimp-colors-grey-shadow-color-20: rgba(108, 110, 181, 0.2);
+  --pimp-colors-grey-shadow-color-3: rgba(108, 110, 181, 0.03);
+  --pimp-colors-grey-shadow-color-4: rgba(108, 110, 181, 0.04);
+  --pimp-colors-grey-shadow-color-5: rgba(108, 110, 181, 0.05);
+  --pimp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 0.075);
+
+  --pimp-colors-magenta-100: #ffe7ed;
+  --pimp-colors-magenta-1000: #300015;
+  --pimp-colors-magenta-200: #ffc1d2;
+  --pimp-colors-magenta-300: #ff92b5;
+  --pimp-colors-magenta-400: #e8528c;
+  --pimp-colors-magenta-50: #fff7f9;
+  --pimp-colors-magenta-500: #c40d68;
+  --pimp-colors-magenta-600: #97004e;
+  --pimp-colors-magenta-700: #6e0037;
+  --pimp-colors-magenta-800: #59002c;
+  --pimp-colors-magenta-900: #450020;
+
+  --pimp-colors-orange-100: #ffeddf;
+  --pimp-colors-orange-1000: #251000;
+  --pimp-colors-orange-200: #fec89e;
+  --pimp-colors-orange-300: #f9a255;
+  --pimp-colors-orange-400: #de7c00;
+  --pimp-colors-orange-50: #fff8f2;
+  --pimp-colors-orange-500: #a05800;
+  --pimp-colors-orange-600: #7a4100;
+  --pimp-colors-orange-700: #582e00;
+  --pimp-colors-orange-800: #472400;
+  --pimp-colors-orange-900: #371a00;
+
+  --pimp-colors-pink-100: #fce6fd;
+  --pimp-colors-pink-1000: #29002d;
+  --pimp-colors-pink-200: #f8bdfb;
+  --pimp-colors-pink-300: #f08ef6;
+  --pimp-colors-pink-400: #d054d8;
+  --pimp-colors-pink-50: #fff6ff;
+  --pimp-colors-pink-500: #a825b1;
+  --pimp-colors-pink-600: #84068c;
+  --pimp-colors-pink-700: #600067;
+  --pimp-colors-pink-800: #4e0054;
+  --pimp-colors-pink-900: #3c0040;
+
+  --pimp-colors-red-100: #fce9e8;
+  --pimp-colors-red-1000: #320006;
+  --pimp-colors-red-200: #ffc3c2;
+  --pimp-colors-red-300: #ff9798;
+  --pimp-colors-red-400: #f24e5c;
+  --pimp-colors-red-50: #fff7f7;
+  --pimp-colors-red-500: #d52841;
+  --pimp-colors-red-600: #9c0025;
+  --pimp-colors-red-700: #710019;
+  --pimp-colors-red-800: #5d0012;
+  --pimp-colors-red-900: #48000c;
+
+  --pimp-colors-violet-100: #eaecff;
+  --pimp-colors-violet-1000: #13004a;
+  --pimp-colors-violet-200: #ccd0ff;
+  --pimp-colors-violet-300: #acb1ff;
+  --pimp-colors-violet-400: #807dff;
+  --pimp-colors-violet-50: #f8f9ff;
+  --pimp-colors-violet-500: #603dfd;
+  --pimp-colors-violet-600: #4a00da;
+  --pimp-colors-violet-700: #3400a0;
+  --pimp-colors-violet-800: #2a0084;
+  --pimp-colors-violet-900: #1f0067;
+
+  --pimp-colors-white: #ffffff;
+
+  --pimp-colors-yellow-100: #fcfacc;
+  --pimp-colors-yellow-1000: #211300;
+  --pimp-colors-yellow-200: #f0df80;
+  --pimp-colors-yellow-300: #dfbb35;
+  --pimp-colors-yellow-400: #b68900;
+  --pimp-colors-yellow-50: #fefeea;
+  --pimp-colors-yellow-500: #906300;
+  --pimp-colors-yellow-600: #724700;
+  --pimp-colors-yellow-700: #553000;
+  --pimp-colors-yellow-800: #452600;
+  --pimp-colors-yellow-900: #351c00;
+}

package/src/assets/css/easings.css

@@ -0,0 +1,3 @@
+:root {
+  --pimp-easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);
+}

package/src/assets/css/spacing.css

@@ -0,0 +1,43 @@
+:root {
+  --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-letter-spacing-lg: 0;
+  --pimp-letter-spacing-md: 0;
+  --pimp-letter-spacing-sm: 0;
+  --pimp-letter-spacing-xl: 0;
+  --pimp-letter-spacing-xs: 0;
+
+  --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-line-height-lg: 28;
+  --pimp-line-height-md: 24;
+  --pimp-line-height-sm: 20;
+  --pimp-line-height-xl: 30;
+  --pimp-line-height-xs: 16;
+
+  --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;
+  --pimp-size-lg: 18;
+  --pimp-size-md: 16;
+  --pimp-size-sm: 14;
+  --pimp-size-xl: 20;
+  --pimp-size-xs: 12;
+}

package/src/assets/{styles/variables/_tokens.scss → css/tokens.css}

@@ -1,10 +1,3 @@
-@use './colors';
-@use './dimensions';
-@use './easings';
-@use './shadows';
-@use './sizing';
-@use './spacing';
-
 :root {
   /**
   * COLORS
@@ -277,7 +270,7 @@
   --pimp-utility-yellow-800: var(--pimp-colors-yellow-800);
   --pimp-utility-yellow-900: var(--pimp-colors-yellow-900);
 
-  /** 
+  /**
   * DIMENSIONS
   */
 
@@ -288,7 +281,7 @@
   --pimp-breakpoint-xl: var(--pimp-dimensions-320);
 
   --pimp-radius-2xl: var(--pimp-dimensions-6);
-  --pimp-radius-full: 2147483648; // BIGINT
+  --pimp-radius-full: 10000;
   --pimp-radius-lg: var(--pimp-dimensions-3);
   --pimp-radius-md: var(--pimp-dimensions-2);
   --pimp-radius-md-lg: var(--pimp-dimensions-2_5);

package/src/assets/main.css

@@ -0,0 +1,7 @@
+@import './css/base.css';
+@import './css/colors.css';
+@import './css/dimensions.css';
+@import './css/shadows.css';
+@import './css/spacing.css';
+@import './css/easings.css';
+@import './css/tokens.css';

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

@@ -8,19 +8,25 @@ $gray-5: #ececef;
 $gray-500: #b2b2bd;
 
 $red: #eb0505;
+$red-50: #fff7f7;
 $red-100: #ffe5e5;
 $red-200: #ffb3b3;
-$red-500: #fc5959;
+$red-500: #d52841;
+$red-700: #710019;
 
 $blue: #144dc2;
+$blue-50: #f6faff;
 $blue-100: #e3f2ff;
 $blue-200: #b3d4ff;
-$blue-500: #144dc2;
+$blue-500: #1564de;
+$blue-700: #003382;
 
 $green: #00895c;
+$green-50: #ecfff4;
 $green-100: #e6fff4;
 $green-200: #b8ffdf;
-$green-500: #00895c;
+$green-500: #008254;
+$green-700: #00462b;
 
 $yellow: #ffd00b;
 $yellow-100: #fff9e3;
@@ -29,16 +35,19 @@ $yellow-300: #ffea82;
 $yellow-500: #998700;
 
 $orange: #ffa800;
+$orange-50: #fff8f2;
 $orange-100: #fff4e3;
 $orange-200: #ffe0a3;
-$orange-500: #ffa800;
+$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;
@@ -78,127 +87,3 @@ $neutral-light-1: #f9fafc;
 
 // Border colors
 $border-color: $neutral-dark-4;
-
-:root {
-  --pimp-colors-black: #000000;
-
-  --pimp-colors-blue-100: #e5efff;
-  --pimp-colors-blue-1000: #00133a;
-  --pimp-colors-blue-200: #bdd6ff;
-  --pimp-colors-blue-300: #90baff;
-  --pimp-colors-blue-400: #4c8dfa;
-  --pimp-colors-blue-50: #f6faff;
-  --pimp-colors-blue-500: #1564de;
-  --pimp-colors-blue-600: #0049b1;
-  --pimp-colors-blue-700: #003382;
-  --pimp-colors-blue-800: #00286a;
-  --pimp-colors-blue-900: #001e53;
-
-  --pimp-colors-green-100: #dcf9e8;
-  --pimp-colors-green-1000: #001c0f;
-  --pimp-colors-green-200: #98eabe;
-  --pimp-colors-green-300: #54d599;
-  --pimp-colors-green-400: #00ac71;
-  --pimp-colors-green-50: #ecfff4;
-  --pimp-colors-green-500: #008254;
-  --pimp-colors-green-600: #00623e;
-  --pimp-colors-green-700: #00462b;
-  --pimp-colors-green-800: #003822;
-  --pimp-colors-green-900: #002b19;
-
-  --pimp-colors-grey-100: #f2f3fa;
-  --pimp-colors-grey-1000: #20212f;
-  --pimp-colors-grey-200: #e9eaf6;
-  --pimp-colors-grey-300: #d1d3e6;
-  --pimp-colors-grey-400: #b4b7d3;
-  --pimp-colors-grey-50: #f9f9fd;
-  --pimp-colors-grey-500: #989bba;
-  --pimp-colors-grey-600: #717496;
-  --pimp-colors-grey-700: #525470;
-  --pimp-colors-grey-800: #36384d;
-  --pimp-colors-grey-900: #2b2c3e;
-
-  --pimp-colors-grey-shadow-color-10: rgba(108, 110, 181, 0.1);
-  --pimp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 0.125);
-  --pimp-colors-grey-shadow-color-15: rgba(108, 110, 181, 0.15);
-  --pimp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 0.175);
-  --pimp-colors-grey-shadow-color-20: rgba(108, 110, 181, 0.2);
-  --pimp-colors-grey-shadow-color-3: rgba(108, 110, 181, 0.03);
-  --pimp-colors-grey-shadow-color-4: rgba(108, 110, 181, 0.04);
-  --pimp-colors-grey-shadow-color-5: rgba(108, 110, 181, 0.05);
-  --pimp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 0.075);
-
-  --pimp-colors-magenta-100: #ffe7ed;
-  --pimp-colors-magenta-1000: #300015;
-  --pimp-colors-magenta-200: #ffc1d2;
-  --pimp-colors-magenta-300: #ff92b5;
-  --pimp-colors-magenta-400: #e8528c;
-  --pimp-colors-magenta-50: #fff7f9;
-  --pimp-colors-magenta-500: #c40d68;
-  --pimp-colors-magenta-600: #97004e;
-  --pimp-colors-magenta-700: #6e0037;
-  --pimp-colors-magenta-800: #59002c;
-  --pimp-colors-magenta-900: #450020;
-
-  --pimp-colors-orange-100: #ffeddf;
-  --pimp-colors-orange-1000: #251000;
-  --pimp-colors-orange-200: #fec89e;
-  --pimp-colors-orange-300: #f9a255;
-  --pimp-colors-orange-400: #de7c00;
-  --pimp-colors-orange-50: #fff8f2;
-  --pimp-colors-orange-500: #a05800;
-  --pimp-colors-orange-600: #7a4100;
-  --pimp-colors-orange-700: #582e00;
-  --pimp-colors-orange-800: #472400;
-  --pimp-colors-orange-900: #371a00;
-
-  --pimp-colors-pink-100: #fce6fd;
-  --pimp-colors-pink-1000: #29002d;
-  --pimp-colors-pink-200: #f8bdfb;
-  --pimp-colors-pink-300: #f08ef6;
-  --pimp-colors-pink-400: #d054d8;
-  --pimp-colors-pink-50: #fff6ff;
-  --pimp-colors-pink-500: #a825b1;
-  --pimp-colors-pink-600: #84068c;
-  --pimp-colors-pink-700: #600067;
-  --pimp-colors-pink-800: #4e0054;
-  --pimp-colors-pink-900: #3c0040;
-
-  --pimp-colors-red-100: #fce9e8;
-  --pimp-colors-red-1000: #320006;
-  --pimp-colors-red-200: #ffc3c2;
-  --pimp-colors-red-300: #ff9798;
-  --pimp-colors-red-400: #f24e5c;
-  --pimp-colors-red-50: #fff7f7;
-  --pimp-colors-red-500: #d52841;
-  --pimp-colors-red-600: #9c0025;
-  --pimp-colors-red-700: #710019;
-  --pimp-colors-red-800: #5d0012;
-  --pimp-colors-red-900: #48000c;
-
-  --pimp-colors-violet-100: #eaecff;
-  --pimp-colors-violet-1000: #13004a;
-  --pimp-colors-violet-200: #ccd0ff;
-  --pimp-colors-violet-300: #acb1ff;
-  --pimp-colors-violet-400: #807dff;
-  --pimp-colors-violet-50: #f8f9ff;
-  --pimp-colors-violet-500: #603dfd;
-  --pimp-colors-violet-600: #4a00da;
-  --pimp-colors-violet-700: #3400a0;
-  --pimp-colors-violet-800: #2a0084;
-  --pimp-colors-violet-900: #1f0067;
-
-  --pimp-colors-white: #ffffff;
-
-  --pimp-colors-yellow-100: #fcfacc;
-  --pimp-colors-yellow-1000: #211300;
-  --pimp-colors-yellow-200: #f0df80;
-  --pimp-colors-yellow-300: #dfbb35;
-  --pimp-colors-yellow-400: #b68900;
-  --pimp-colors-yellow-50: #fefeea;
-  --pimp-colors-yellow-500: #906300;
-  --pimp-colors-yellow-600: #724700;
-  --pimp-colors-yellow-700: #553000;
-  --pimp-colors-yellow-800: #452600;
-  --pimp-colors-yellow-900: #351c00;
-}

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

@@ -8,47 +8,3 @@ $space-sm: math.div($space, 2);
 $space-md: $space * 1.5;
 $space-lg: $space * 2;
 $space-xl: $space * 3;
-
-:root {
-  --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-letter-spacing-lg: 0;
-  --pimp-letter-spacing-md: 0;
-  --pimp-letter-spacing-sm: 0;
-  --pimp-letter-spacing-xl: 0;
-  --pimp-letter-spacing-xs: 0;
-
-  --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-line-height-lg: 28;
-  --pimp-line-height-md: 24;
-  --pimp-line-height-sm: 20;
-  --pimp-line-height-xl: 30;
-  --pimp-line-height-xs: 16;
-
-  --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;
-  --pimp-size-lg: 18;
-  --pimp-size-md: 16;
-  --pimp-size-sm: 14;
-  --pimp-size-xl: 20;
-  --pimp-size-xs: 12;
-}

package/src/components/CpButton.vue

@@ -1,13 +1,13 @@
 <template>
   <component
     :is="tag"
-    :type="type"
     :aria-disabled="isButtonDisabled"
-    :disabled="isButtonDisabled"
-    :class="dynamicClasses"
     class="cpButton"
+    :class="dynamicClasses"
+    :disabled="isButtonDisabled"
     role="button"
     tabindex="0"
+    :type="type"
   >
     <span class="cpButton__body">
       <span v-if="isLoading" class="cpButton__loader"><cp-loader color="#B2B2BD" /></span>

package/src/components/CpTable.vue

@@ -17,10 +17,10 @@
         <thead class="cpTable__header">
           <tr class="cpTable__row cpTable__row--header">
             <th
-              v-for="column in visibleColumns"
+              v-for="(column, index) in visibleColumns"
               :key="column.id"
               class="cpTable__column"
-              :style="getColumnStyle(column)"
+              :style="getColumnStyle(column, index)"
             >
               <slot :column="column" name="column">
                 {{ column.name }}
@@ -200,6 +200,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const FULL_WIDTH_SIZE = 1000
+
 const LoaderColor = '#5341F9'
 
 const uniqueId = useId()
@@ -262,10 +264,25 @@ const getVisibleColumnsIds = () => {
   return normalizedColumns.value.filter(({ isHidden, isProtected }) => !isHidden || isProtected).map(({ id }) => id)
 }
 
+const fullWidthColumn = computed(() => normalizedColumns.value.find(({ isFull }) => isFull))
+
+const hasAFullWidthColumnVisible = computed(() => {
+  if (!fullWidthColumn.value) return false
+  return columnsModel.value.includes(fullWidthColumn.value.id)
+})
+
+const isLastColumn = (idx: number) => idx === visibleColumns.value.length - 1
+
 const columnsModel = ref<string[]>(getVisibleColumnsIds())
 
 watch(columnsModel, (newColumnsModel) => {
-  const newColumns = normalizedColumns.value.map((col) => ({ ...col, isHidden: !newColumnsModel.includes(col.id) }))
+  const newColumns = normalizedColumns.value.map((col) => {
+    return {
+      ...col,
+      isHidden: !newColumnsModel.includes(col.id),
+    }
+  })
+
   emit('onColumnsChanged', newColumns)
 })
 
@@ -481,12 +498,18 @@ const resetScrollPosition = () => {
   }
 }
 
-const getColumnStyle = (columnPayload: CpTableColumnObject) => {
-  const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
+const getColumnStyle = (column: CpTableColumnObject, idx: number) => {
+  let width: string | undefined
+
+  if (!hasAFullWidthColumnVisible.value && isLastColumn(idx)) {
+    width = `${FULL_WIDTH_SIZE}px`
+  } else if (column.width) {
+    width = `${column.width}px`
+  }
 
   return {
-    width: formattedWidth,
-    textAlign: columnPayload.textAlign,
+    width,
+    textAlign: column.textAlign,
   }
 }