@citizenplane/pimp 8.32.5 → 9.0.0

package/src/components/CpSwitch.vue

@@ -11,20 +11,28 @@
         :autofocus="autofocus"
         @change="handleClick(modelValue)"
       />
-      <span class="cpSwitch__icon">
-        <cp-icon type="check" />
-      </span>
       <span class="cpSwitch__knobContainer">
         <span class="cpSwitch__knob" />
       </span>
     </span>
-    <span v-if="label" class="cpSwitch__label">{{ label }}</span>
+    <div class="cpSwitch__content">
+      <div class="cpSwitch__labelContainer">
+        <span v-if="label" class="cpSwitch__label">{{ label }}</span>
+        <span v-if="isRequired" class="u-asterisk">*</span>
+        <cp-tooltip v-if="tooltip" :content="tooltip">
+          <cp-icon type="tooltip" size="16" class="cpSwitch__tooltip" />
+        </cp-tooltip>
+      </div>
+      <span v-if="helper" class="cpSwitch__helper">{{ helper }}</span>
+    </div>
   </label>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 
+import CpTooltip from '@/components/CpTooltip.vue'
+
 import { ToggleColors } from '@/constants'
 import { capitalizeFirstLetter, randomString } from '@/helpers'
 
@@ -33,9 +41,12 @@ interface Props {
   color?: string
   disabled?: boolean
   groupName?: string
+  helper?: string
+  isRequired?: boolean
   label?: string
   modelValue?: boolean
   reverseLabel?: boolean
+  tooltip?: string
 }
 
 interface Emits {
@@ -45,11 +56,14 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   label: '',
+  helper: '',
   disabled: false,
   groupName: '',
-  color: ToggleColors.BLUE,
+  color: ToggleColors.PURPLE,
   reverseLabel: false,
   autofocus: false,
+  isRequired: false,
+  tooltip: '',
 })
 
 const emit = defineEmits<Emits>()
@@ -66,6 +80,7 @@ const computedClasses = computed(() => {
   return [
     {
       'cpSwitch--hasLabel': props.label,
+      'cpSwitch--hasHelper': props.helper,
       'cpSwitch--isActive': props.modelValue,
       'cpSwitch--isDisabled': props.disabled,
       'cpSwitch--isReversed': props.reverseLabel,
@@ -86,25 +101,21 @@ const handleClick = (value: boolean): void => {
   }
 
   &--is#{$className} &__switch:focus-within {
-    box-shadow: 0 0 0 fn.px-to-em(3) color.scale($color, $lightness: 70%);
+    outline: $color solid fn.px-to-rem(3);
+    outline-offset: fn.px-to-rem(3);
   }
 
   &--is#{$className}:hover:not(#{&}--isDisabled) &__switch {
-    background-color: color.scale($color, $lightness: 50%);
+    background-color: colors.$neutral-dark-1;
   }
 
   &--is#{$className}#{&}--isActive:hover &__switch {
-    background-color: color.adjust($color, $lightness: -10%);
-  }
-
-  &--is#{$className}#{&}--isActive#{&}--isDisabled &__switch,
-  &--is#{$className}#{&}--isActive#{&}--isDisabled:hover &__swtich {
-    background-color: color.scale($color, $lightness: 65%);
+    background-color: colors.$purple-600;
   }
 }
 
 .cpSwitch {
-  $cp-switch-base-height: fn.px-to-em(24);
+  $cp-switch-base-height: fn.px-to-em(20);
   align-items: center;
 
   &,
@@ -112,11 +123,32 @@ const handleClick = (value: boolean): void => {
     cursor: pointer;
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: fn.px-to-rem(4);
+  }
+
+  &__helper {
+    color: colors.$neutral-dark-1;
+  }
+
+  &__labelContainer {
+    display: flex;
+    align-items: center;
+    gap: sp.$space-sm;
+  }
+
+  &__tooltip {
+    color: colors.$neutral-dark-3;
+    padding: sp.$space-sm;
+  }
+
   &--hasLabel {
     display: grid;
     grid-template-columns: min-content 1fr;
     grid-gap: fn.px-to-rem(12);
-    align-items: center;
+    align-items: flex-start;
   }
 
   &--isDisabled,
@@ -134,7 +166,7 @@ const handleClick = (value: boolean): void => {
   &--isReversed {
     grid-template-columns: 1fr min-content;
 
-    .cpSwitch__label {
+    .cpSwitch__content {
       grid-row: 1;
     }
   }
@@ -149,32 +181,22 @@ const handleClick = (value: boolean): void => {
   }
 
   &--isActive .cpSwitch {
-    &__icon {
-      transform: translateY(-50%);
-      opacity: 1;
-    }
-
     &__knobContainer {
       transform: translateX(50%);
     }
   }
 
   @include cp-switch-style(colors.$primary-color, 'Purple');
-  @include cp-switch-style(colors.$secondary-color, 'Blue');
 
   &__switch {
     position: relative;
     border-radius: 1000px;
-    background-color: colors.$neutral-dark-1;
+    background-color: colors.$gray-3;
     overflow: hidden;
     transition: background-color 0.1s ease-out;
     display: flex;
     height: $cp-switch-base-height;
     width: $cp-switch-base-height * 2;
-
-    &:hover {
-      background-color: colors.$neutral-dark-3;
-    }
   }
 
   input {
@@ -187,31 +209,6 @@ const handleClick = (value: boolean): void => {
     height: 100%;
   }
 
-  &__icon {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    opacity: 0;
-    padding-left: fn.px-to-rem(4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: opacity 0.12s ease-in;
-    width: $cp-switch-base-height;
-    height: $cp-switch-base-height;
-
-    i {
-      width: 80%;
-      height: 100%;
-    }
-
-    svg {
-      stroke-width: 3;
-      color: colors.$neutral-light;
-    }
-  }
-
   &__knobContainer {
     width: 100%;
     padding: fn.px-to-rem(2);

package/src/stories/CpButton.stories.ts

@@ -101,11 +101,11 @@ export const WithIcons: Story = {
     setup: () => ({ args }),
     template: `
       <CpButton v-bind="args">
-        <template #icon-before>
+        <template #leading-icon>
           <CpIcon type="arrow-left" />
         </template>
         Button with Icon
-        <template #icon-after>
+        <template #trailing-icon>
           <CpIcon type="arrow-right" />
         </template>
       </CpButton>

package/src/stories/CpSwitch.stories.ts

@@ -8,13 +8,14 @@ const meta = {
   title: 'CpSwitch',
   component: CpSwitch,
   argTypes: {
-    modelValue: {
+    autofocus: {
       control: 'boolean',
-      description: 'The switch state',
+      description: 'Whether to autofocus the switch',
     },
-    label: {
-      control: 'text',
-      description: 'Label text for the switch',
+    color: {
+      control: 'select',
+      options: ['blue', 'purple'],
+      description: 'Color variant of the switch',
     },
     disabled: {
       control: 'boolean',
@@ -24,18 +25,29 @@ const meta = {
       control: 'text',
       description: 'Name attribute for the switch',
     },
-    color: {
-      control: 'select',
-      options: ['blue', 'purple'],
-      description: 'Color variant of the switch',
+    helper: {
+      control: 'text',
+      description: 'Helper text to display below the label',
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Whether the switch is required',
+    },
+    label: {
+      control: 'text',
+      description: 'Label text for the switch',
+    },
+    modelValue: {
+      control: 'boolean',
+      description: 'The switch state',
     },
     reverseLabel: {
       control: 'boolean',
       description: 'Whether to show label before the switch',
     },
-    autofocus: {
-      control: 'boolean',
-      description: 'Whether to autofocus the switch',
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text to display',
     },
   },
 } satisfies Meta<typeof CpSwitch>
@@ -45,11 +57,14 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    label: 'Switch Label',
+    label: 'Label',
+    helper: 'This is a helper text that provides additional information',
     disabled: false,
     color: 'purple',
     reverseLabel: false,
     autofocus: false,
+    isRequired: true,
+    tooltip: 'This is a tooltip text',
   },
   render: (args) => ({
     components: { CpSwitch },
@@ -83,6 +98,13 @@ export const DisabledChecked: Story = {
   },
 }
 
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    isRequired: true,
+  },
+}
+
 export const Reversed: Story = {
   args: {
     ...Default.args,
@@ -105,6 +127,20 @@ export const Reversed: Story = {
   }),
 }
 
+export const WithHelper: Story = {
+  args: {
+    ...Default.args,
+    helper: 'This is a helper text that provides additional information',
+  },
+}
+
+export const WithTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltip: 'This is a tooltip text',
+  },
+}
+
 export const SwitchGroup: Story = {
   render: () => ({
     components: { CpSwitch },
@@ -132,6 +168,12 @@ export const SwitchGroup: Story = {
           v-model="switches.switch3"
           label="Third Switch"
           group-name="switch-group"
+          disabled
+        />
+        <CpSwitch
+          v-model="switches.switch4"
+          label="Fourth Switch"
+          group-name="switch-group"
         />
       </div>
     `,