@citizenplane/pimp 8.9.5 → 8.11.0

package/src/components/toggles/CpRadio.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <label
+      v-for="({ label, value, description, additionalData, disabled }, index) in options"
+      :key="getRadioId(index)"
+      :class="computedClasses({ value, disabled })"
+      class="cpRadio"
+      :for="getRadioId(index)"
+    >
+      <input
+        :id="getRadioId(index)"
+        :checked="isActive(value)"
+        :value="value"
+        :disabled="disabled"
+        type="radio"
+        :autofocus="autofocus"
+        :name="groupName"
+        @input="onChange(value)"
+      />
+      <span class="cpRadio__content">
+        <span class="cpRadio__information">
+          <span class="cpRadio__label">{{ label }}</span>
+          <span v-if="description" class="cpRadio__description">{{ description }}</span>
+        </span>
+        <span v-if="additionalData" class="cpRadio__additionalData">{{ additionalData }}</span>
+      </span>
+    </label>
+  </div>
+</template>
+
+<script>
+import { capitalizeFirstLetter, randomString } from '@/helpers'
+import { ToggleColors } from '@/constants'
+
+export default {
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    groupName: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    color: {
+      type: String,
+      required: false,
+      default: ToggleColors.BLUE,
+      validator: (value) => Object.values(ToggleColors).includes(value),
+    },
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      radioUniqueId: '',
+    }
+  },
+  mounted() {
+    this.radioUniqueId = randomString()
+  },
+  methods: {
+    onChange(value) {
+      this.$emit('update:modelValue', value)
+    },
+    getRadioId(index) {
+      return `${this.radioUniqueId}${index}`
+    },
+    isActive(value) {
+      return value === this.modelValue
+    },
+    computedClasses({ value, disabled }) {
+      return [
+        {
+          'cpRadio--isActive': this.isActive(value),
+          'cpRadio--isDisabled': disabled,
+        },
+        `cpRadio--is${capitalizeFirstLetter(this.color)}`,
+      ]
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@mixin cp-radio-style($color, $className) {
+  &--is#{$className}#{&}--isActive {
+    border-color: $color;
+  }
+
+  &--is#{$className} input:checked {
+    background-color: $color;
+    border-color: $color;
+
+    & ~ span .cpRadio {
+      &__label,
+      &__additionalData {
+        color: $color;
+      }
+    }
+  }
+
+  &--is#{$className}:hover,
+  &--is#{$className}:focus-within {
+    border-color: $color;
+  }
+
+  &--is#{$className}:focus-within {
+    box-shadow: 0 0 0 fn.px-to-rem(4) rgba($color, 0.1);
+  }
+}
+
+.cpRadio {
+  $cp-radio-base-width: fn.px-to-em(20);
+
+  position: relative;
+  border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+  border-radius: fn.px-to-rem(10);
+  padding: sp.$space-lg sp.$space-md;
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-gap: sp.$space-md;
+  align-items: center;
+  width: 100%;
+
+  &:not(#{&}--isDisabled),
+  &:not(#{&}--isDisabled) * {
+    cursor: pointer;
+  }
+
+  @include cp-radio-style(colors.$secondary-color, 'Blue');
+  @include cp-radio-style(colors.$primary-color, 'Purple');
+
+  &--isDisabled {
+    background-color: colors.$neutral-light-1;
+    color: colors.$neutral-dark-1;
+
+    &,
+    * {
+      cursor: not-allowed;
+    }
+
+    &:hover,
+    &:focus {
+      box-shadow: none;
+      border-color: colors.$neutral-dark-4;
+    }
+  }
+
+  &--isActive#{&}--isDisabled,
+  &--isActive#{&}--isDisabled:hover {
+    border-color: colors.$neutral-dark-4;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: sp.$space-md;
+  }
+
+  input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: 100%;
+    padding: 25%;
+    width: $cp-radio-base-width;
+    height: $cp-radio-base-width;
+    transition: transform 0.1s linear;
+
+    &:before {
+      content: '';
+      display: flex;
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+      background-color: colors.$neutral-light;
+      transition: transform 0.15s linear;
+      transform: scale(0);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.8);
+    }
+
+    &:checked:before {
+      transform: scale(1);
+    }
+
+    &:checked:disabled {
+      border-color: colors.$neutral-dark-1;
+      background-color: colors.$neutral-dark-1;
+    }
+
+    &:checked:disabled ~ span .cpRadio {
+      &__label,
+      &__additionalData {
+        color: colors.$neutral-dark-1;
+      }
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    line-height: 1.3;
+  }
+
+  &__information {
+    flex-grow: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-transform: capitalize;
+    margin: 0 (-(sp.$space));
+  }
+
+  &__label,
+  &__description {
+    margin: 0 sp.$space;
+    flex-grow: 1;
+  }
+
+  &__label,
+  &__additionalData {
+    font-weight: 500;
+  }
+
+  &__description,
+  &__additionalData {
+    color: colors.$neutral-dark-1;
+  }
+
+  &__label {
+    white-space: nowrap;
+  }
+
+  &__additionalData {
+    text-align: right;
+    margin-left: sp.$space-lg;
+  }
+}
+</style>

package/src/components/toggles/{CpSwitch/index.vue → CpSwitch.vue}

@@ -102,25 +102,25 @@ export default {
   }
 
   &--is#{$className} &__switch:focus-within {
-    box-shadow: 0 0 0 px-to-em(3) scale-color($color, $lightness: 70%);
+    box-shadow: 0 0 0 fn.px-to-em(3) color.scale($color, $lightness: 70%);
   }
 
   &--is#{$className}:hover:not(#{&}--isDisabled) &__switch {
-    background-color: scale-color($color, $lightness: 50%);
+    background-color: color.scale($color, $lightness: 50%);
   }
 
   &--is#{$className}#{&}--isActive:hover &__switch {
-    background-color: darken($color, 10%);
+    background-color: color.adjust($color, $lightness: -10%);
   }
 
   &--is#{$className}#{&}--isActive#{&}--isDisabled &__switch,
   &--is#{$className}#{&}--isActive#{&}--isDisabled:hover &__swtich {
-    background-color: scale-color($color, $lightness: 65%);
+    background-color: color.scale($color, $lightness: 65%);
   }
 }
 
 .cpSwitch {
-  $cp-switch-base-height: px-to-em(24);
+  $cp-switch-base-height: fn.px-to-em(24);
   align-items: center;
 
   &,
@@ -131,7 +131,7 @@ export default {
   &--hasLabel {
     display: grid;
     grid-template-columns: min-content 1fr;
-    grid-gap: px-to-rem(12);
+    grid-gap: fn.px-to-rem(12);
     align-items: center;
   }
 
@@ -143,7 +143,7 @@ export default {
     }
 
     .cpSwitch__switch {
-      background-color: $neutral-dark-4;
+      background-color: colors.$neutral-dark-4;
     }
   }
 
@@ -156,12 +156,12 @@ export default {
   }
 
   &--isDisabled &__label {
-    color: $neutral-dark-1;
+    color: colors.$neutral-dark-1;
   }
 
   &--isDisabled &__switch,
   &--isDisabled:hover &__switch {
-    background-color: $neutral-dark-5;
+    background-color: colors.$neutral-dark-5;
   }
 
   &--isActive .cpSwitch {
@@ -175,13 +175,13 @@ export default {
     }
   }
 
-  @include cp-switch-style($primary-color, 'Purple');
-  @include cp-switch-style($secondary-color, 'Blue');
+  @include cp-switch-style(colors.$primary-color, 'Purple');
+  @include cp-switch-style(colors.$secondary-color, 'Blue');
 
   &__switch {
     position: relative;
     border-radius: 1000px;
-    background-color: $neutral-dark-1;
+    background-color: colors.$neutral-dark-1;
     overflow: hidden;
     transition: background-color 0.1s ease-out;
     display: flex;
@@ -189,7 +189,7 @@ export default {
     width: $cp-switch-base-height * 2;
 
     &:hover {
-      background-color: $neutral-dark-3;
+      background-color: colors.$neutral-dark-3;
     }
   }
 
@@ -209,7 +209,7 @@ export default {
     top: 50%;
     transform: translateY(-50%);
     opacity: 0;
-    padding-left: px-to-rem(4);
+    padding-left: fn.px-to-rem(4);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -224,23 +224,23 @@ export default {
 
     svg {
       stroke-width: 3;
-      color: $neutral-light;
+      color: colors.$neutral-light;
     }
   }
 
   &__knobContainer {
     width: 100%;
-    padding: px-to-rem(2);
+    padding: fn.px-to-rem(2);
     display: flex;
     align-items: center;
     transition: transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
   }
 
   &__knob {
-    background-color: $neutral-light;
+    background-color: colors.$neutral-light;
     border-radius: 100%;
-    width: calc(#{$cp-switch-base-height} - #{px-to-rem(4)});
-    height: calc(#{$cp-switch-base-height} - #{px-to-rem(4)});
+    width: calc(#{$cp-switch-base-height} - #{fn.px-to-rem(4)});
+    height: calc(#{$cp-switch-base-height} - #{fn.px-to-rem(4)});
   }
 }
 </style>

package/src/components/typography/{CpHeading/index.vue → CpHeading.vue}

@@ -38,71 +38,71 @@ export default {
 
 <style lang="scss">
 .cpHeading {
-  color: $neutral-dark;
+  color: colors.$neutral-dark;
 
   &:first-letter {
     text-transform: capitalize;
   }
 
   &--100 {
-    font-size: px-to-rem(11);
+    font-size: fn.px-to-rem(11);
     font-weight: 400;
-    line-height: px-to-rem(16);
-    letter-spacing: px-to-em(0.6);
-    color: $neutral-dark-1;
+    line-height: fn.px-to-rem(16);
+    letter-spacing: fn.px-to-em(0.6);
+    color: colors.$neutral-dark-1;
   }
 
   &--200 {
-    font-size: px-to-rem(12);
+    font-size: fn.px-to-rem(12);
     font-weight: 600;
-    line-height: px-to-rem(16);
-    color: $neutral-dark-1;
+    line-height: fn.px-to-rem(16);
+    color: colors.$neutral-dark-1;
   }
 
   &--300 {
-    font-size: px-to-rem(12);
+    font-size: fn.px-to-rem(12);
     font-weight: 600;
-    line-height: px-to-rem(16);
+    line-height: fn.px-to-rem(16);
   }
 
   &--400 {
-    font-size: px-to-rem(14);
+    font-size: fn.px-to-rem(14);
     font-weight: 500;
-    line-height: px-to-rem(18);
+    line-height: fn.px-to-rem(18);
   }
 
   &--500 {
-    font-size: px-to-rem(16);
+    font-size: fn.px-to-rem(16);
     font-weight: 500;
-    line-height: px-to-rem(20);
+    line-height: fn.px-to-rem(20);
   }
 
   &--600 {
-    font-size: px-to-rem(18);
+    font-size: fn.px-to-rem(18);
     font-weight: 500;
-    line-height: px-to-rem(23);
-    letter-spacing: px-to-em(0.4);
+    line-height: fn.px-to-rem(23);
+    letter-spacing: fn.px-to-em(0.4);
   }
 
   &--700 {
-    font-size: px-to-rem(20);
+    font-size: fn.px-to-rem(20);
     font-weight: 500;
-    line-height: px-to-rem(25);
-    letter-spacing: px-to-em(0.4);
+    line-height: fn.px-to-rem(25);
+    letter-spacing: fn.px-to-em(0.4);
   }
 
   &--800 {
-    font-size: px-to-rem(29);
+    font-size: fn.px-to-rem(29);
     font-weight: 500;
-    line-height: px-to-rem(32);
-    letter-spacing: px-to-em(0.4);
+    line-height: fn.px-to-rem(32);
+    letter-spacing: fn.px-to-em(0.4);
   }
 
   &--900 {
-    font-size: px-to-rem(35);
+    font-size: fn.px-to-rem(35);
     font-weight: 500;
-    line-height: px-to-rem(40);
-    letter-spacing: px-to-em(0.4);
+    line-height: fn.px-to-rem(40);
+    letter-spacing: fn.px-to-em(0.4);
   }
 }
 </style>

package/src/constants/index.js

@@ -1,3 +1,4 @@
 export { default as Colors } from './src/colors/Colors'
 export { default as ToggleColors } from './src/colors/ToggleColors'
 export { default as Position } from './src/Position'
+export { default as CpTableConfig } from './src/CpTableConfig'

package/src/constants/src/CpTableConfig.js

@@ -0,0 +1,14 @@
+const VISIBLE_ROWS_MAX = 100
+
+const RESERVED_KEYS = {
+  GROUP_BY: 'groupBy',
+  FULL_WIDTH: 'fullWidth',
+  IS_SELECTED: 'isSelected',
+}
+
+const PAGINATION_FORMATS = {
+  RESULTS: 'results',
+  PAGES: 'pages',
+}
+
+export default { VISIBLE_ROWS_MAX, RESERVED_KEYS, PAGINATION_FORMATS }