@citizenplane/pimp 8.9.4 → 8.10.0

package/src/components/toggles/CpRadio/index.scss

@@ -1,160 +0,0 @@
-@use 'sass:math';
-@import '/src/assets/styles/main';
-
-$cp-radio-base-width: px-to-em(20);
-
-@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 px-to-rem(4) rgba($color, 0.1);
-  }
-}
-
-.cpRadio {
-  position: relative;
-  border: px-to-rem(1) solid $neutral-dark-4;
-  border-radius: px-to-rem(10);
-  padding: $space-lg $space-md;
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-gap: $space-md;
-  align-items: center;
-  width: 100%;
-
-  &:not(#{&}--isDisabled),
-  &:not(#{&}--isDisabled) * {
-    cursor: pointer;
-  }
-
-  @include cp-radio-style($secondary-color, 'Blue');
-  @include cp-radio-style($primary-color, 'Purple');
-
-  &--isDisabled {
-    background-color: $neutral-light-1;
-    color: $neutral-dark-1;
-
-    &,
-    * {
-      cursor: not-allowed;
-    }
-
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      border-color: $neutral-dark-4;
-    }
-  }
-
-  &--isActive#{&}--isDisabled,
-  &--isActive#{&}--isDisabled:hover {
-    border-color: $neutral-dark-4;
-  }
-
-  &:not(:last-of-type) {
-    margin-bottom: $space-md;
-  }
-
-  input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: px-to-rem(1) solid $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: $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: $neutral-dark-1;
-      background-color: $neutral-dark-1;
-    }
-
-    &:checked:disabled ~ span .cpRadio {
-      &__label,
-      &__additionalData {
-        color: $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 (-$space);
-  }
-
-  &__label,
-  &__description {
-    margin: 0 $space;
-    flex-grow: 1;
-  }
-
-  &__label,
-  &__additionalData {
-    font-weight: 500;
-  }
-
-  &__description,
-  &__additionalData {
-    color: $neutral-dark-1;
-  }
-
-  &__label {
-    white-space: nowrap;
-  }
-
-  &__additionalData {
-    text-align: right;
-    margin-left: $space-lg;
-  }
-}

package/src/components/toggles/CpRadio/index.vue

@@ -1,97 +0,0 @@
-<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">
-@import 'index';
-</style>