@citizenplane/pimp 18.0.6 → 18.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.0.6",
+  "version": "18.1.1",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpButtonToggle.vue

@@ -0,0 +1,137 @@
+<template>
+  <button
+    :aria-disabled="disabled"
+    :aria-pressed="isSelected"
+    class="cpToggleButton"
+    :class="dynamicClasses"
+    :disabled="disabled"
+    type="button"
+    @click="handleClick"
+  >
+    <span class="cpToggleButton__leading">
+      <slot name="leading">
+        <cp-icon size="16" :type="leadingIcon" />
+      </slot>
+    </span>
+    <span v-if="showLabel" class="cpToggleButton__label">
+      <slot>
+        {{ label }}
+      </slot>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  disabled?: boolean
+  isSelected?: boolean
+  label?: string
+  leadingIcon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSelected: false,
+  disabled: false,
+  label: '',
+  leadingIcon: 'dashed-circle',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const slots = useSlots()
+
+const showLabel = computed(() => !!props.label || !!slots.default)
+
+const dynamicClasses = computed(() => ({
+  'cpToggleButton--isSelected': props.isSelected,
+}))
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss">
+.cpToggleButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cp-spacing-md);
+  padding: var(--cp-spacing-lg);
+  border-radius: var(--cp-radius-md);
+  box-shadow:
+    var(--cp-shadows-3xs-inset),
+    0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+  background-color: var(--cp-background-primary);
+  color: var(--cp-text-secondary);
+  transition:
+    background-color 100ms ease-out,
+    box-shadow 100ms ease-out,
+    color 100ms ease-out;
+
+  &:hover:not(:disabled) {
+    background-color: var(--cp-background-primary-hover);
+    color: var(--cp-text-secondary-hover);
+    box-shadow:
+      var(--cp-shadows-3xs-inset),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
+  }
+
+  &:focus-visible {
+    box-shadow:
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover),
+      var(--cp-shadow-focus-ring-accent);
+  }
+
+  &__leading {
+    display: flex;
+    align-items: center;
+  }
+
+  &__label {
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+    font-weight: 500;
+  }
+
+  &__defaultLeading,
+  &__defaultLeading * {
+    pointer-events: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--cp-background-disabled);
+    color: var(--cp-text-disabled);
+    box-shadow:
+      var(--cp-shadows-3xs-inset),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
+  }
+
+  &--isSelected:not(:disabled) {
+    background-color: var(--cp-background-accent-secondary);
+    color: var(--cp-text-accent-primary);
+    box-shadow:
+      var(--cp-shadows-3xs-inset),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid);
+
+    &:hover {
+      background-color: var(--cp-background-accent-secondary-hover);
+      color: var(--cp-text-accent-primary-hover);
+      box-shadow:
+        var(--cp-shadows-3xs-inset),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid);
+    }
+
+    &:focus-visible {
+      box-shadow:
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid),
+        var(--cp-shadow-focus-ring-accent);
+    }
+  }
+}
+</style>

package/src/components/CpDate.vue

@@ -4,33 +4,36 @@
       {{ capitalizedLabel }}
     </base-input-label>
     <div class="cpDate__inputs">
-      <input
-        v-model="day"
-        v-maska
-        :autocomplete="autocompleteFields.day"
-        class="cpDate__day"
-        data-maska="##"
-        :disabled="disabled"
-        inputmode="numeric"
-        maxlength="2"
-        :placeholder="dayInputPlaceholder"
-        :required="required"
-      />
-      <div class="cpDate__divider" />
-      <div class="cpDate__month" :class="selectDynamicClass">
-        <select
-          :id="cpDateId"
-          v-model="month"
-          :autocomplete="autocompleteFields.month"
+      <template v-for="(field, index) in orderedDateFields" :key="field">
+        <input
+          v-if="isDayField(field)"
+          v-model="day"
+          v-maska
+          :autocomplete="autocompleteFields.day"
+          class="cpDate__day"
+          data-maska="##"
           :disabled="disabled"
+          inputmode="numeric"
+          maxlength="2"
+          :placeholder="dayInputPlaceholder"
           :required="required"
-        >
-          <option value>{{ monthInputPlaceholder }}</option>
-          <option v-for="(monthItem, index) in months" :key="index" :value="monthItem.value">
-            {{ monthItem.label }}
-          </option>
-        </select>
-      </div>
+        />
+        <div v-else class="cpDate__month" :class="selectDynamicClass">
+          <select
+            :id="cpDateId"
+            v-model="month"
+            :autocomplete="autocompleteFields.month"
+            :disabled="disabled"
+            :required="required"
+          >
+            <option value>{{ monthInputPlaceholder }}</option>
+            <option v-for="(monthItem, monthIndex) in months" :key="monthIndex" :value="monthItem.value">
+              {{ monthItem.label }}
+            </option>
+          </select>
+        </div>
+        <div v-if="shouldShowDivider(index)" class="cpDate__divider" />
+      </template>
       <div class="cpDate__divider" />
       <input
         v-model="year"
@@ -71,6 +74,7 @@ interface InputsOptions {
   monthInputPlaceholder?: string
   yearInputPlaceholder?: string
 }
+type DateField = 'day' | 'month'
 
 interface Props {
   autocompleteBirthday?: boolean
@@ -265,6 +269,24 @@ const monthInputPlaceholder = computed(() => {
   return props.inputsOptions?.monthInputPlaceholder || 'Months'
 })
 
+const isDayFirst = computed(() => {
+  const parts = new Intl.DateTimeFormat(props.locale, {
+    day: '2-digit',
+    month: '2-digit',
+  }).formatToParts(new Date(2024, 0, 31))
+
+  const dayIndex = parts.findIndex((part) => part.type === 'day')
+  const monthIndex = parts.findIndex((part) => part.type === 'month')
+
+  if (dayIndex === -1 || monthIndex === -1) return false
+
+  return dayIndex < monthIndex
+})
+
+const orderedDateFields = computed<DateField[]>(() => {
+  return isDayFirst.value ? ['day', 'month'] : ['month', 'day']
+})
+
 const yearInputPlaceholder = computed(() => {
   return props.inputsOptions?.yearInputPlaceholder || 'YYYY'
 })
@@ -274,6 +296,10 @@ const handleUpdate = (): void => {
   emit('onValidation', isDateValid.value)
 }
 
+const isDayField = (field: DateField): boolean => field === 'day'
+
+const shouldShowDivider = (index: number): boolean => index < orderedDateFields.value.length - 1
+
 watch(day, handleUpdate)
 watch(month, handleUpdate)
 watch(year, handleUpdate)
@@ -296,6 +322,7 @@ watch(year, handleUpdate)
   }
 
   input[type='number'] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 

package/src/components/CpSwitch.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="cpSwitch" :class="computedClasses" :for="switchUniqueId">
+  <label class="cpSwitch" :class="computedClasses" :for="switchUniqueId" v-bind="inertProps">
     <span class="cpSwitch__switch">
       <input
         :id="switchUniqueId"
@@ -46,6 +46,7 @@ interface Props {
   enableHaptics?: boolean
   groupName?: string
   helper?: string
+  inert?: boolean
   isRequired?: boolean
   label?: string
   modelValue?: boolean
@@ -68,6 +69,7 @@ const props = withDefaults(defineProps<Props>(), {
   autofocus: false,
   isRequired: false,
   tooltip: '',
+  inert: false,
 })
 
 const emit = defineEmits<Emits>()
@@ -80,6 +82,16 @@ const capitalizedColor = computed(() => {
   return capitalizeFirstLetter(props.color)
 })
 
+const inertProps = computed(() => {
+  if (!props.inert) return
+
+  return {
+    'aria-hidden': true,
+    tabindex: -1,
+    inert: true,
+  }
+})
+
 const computedClasses = computed(() => {
   return [
     {

package/src/components/index.ts

@@ -22,6 +22,7 @@ import CpAlert from './CpAlert.vue'
 import CpBadge from './CpBadge.vue'
 import CpButton from './CpButton.vue'
 import CpButtonGroup from './CpButtonGroup.vue'
+import CpButtonToggle from './CpButtonToggle.vue'
 import CpCalendar from './CpCalendar.vue'
 import CpCheckbox from './CpCheckbox.vue'
 import CpContextualMenu from './CpContextualMenu.vue'
@@ -73,6 +74,7 @@ const Components = {
   CpAccordion,
   CpAccordionGroup,
   CpToast,
+  CpButtonToggle,
   CpBadge,
   CpTabs,
   CpHeading,
@@ -148,6 +150,7 @@ export {
   CpAccordion,
   CpAccordionGroup,
   CpToast,
+  CpButtonToggle,
   CpBadge,
   CpTabs,
   CpHeading,

package/src/stories/CpButtonToggle.stories.ts

@@ -0,0 +1,137 @@
+import { ref } from 'vue'
+
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpButtonToggle from '@/components/CpButtonToggle.vue'
+import CpSwitch from '@/components/CpSwitch.vue'
+
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
+const meta = {
+  title: 'Atoms/CpButtonToggle',
+  component: CpButtonToggle,
+  argTypes: {
+    isSelected: {
+      control: 'boolean',
+      description: 'Whether the toggle button is selected.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether interactions are disabled.',
+    },
+    label: {
+      control: 'text',
+      description: 'Text displayed in the button.',
+    },
+    leadingIcon: {
+      control: 'text',
+      description: 'Icon displayed in the button.',
+    },
+  },
+} satisfies Meta<typeof CpButtonToggle>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpButtonToggle },
+  setup() {
+    return { args }
+  },
+  template: `
+    <CpButtonToggle v-bind="args"  />
+  `,
+})
+
+export const Default: Story = {
+  args: {
+    label: 'Title',
+    isSelected: false,
+    disabled: false,
+    leadingIcon: 'dashed-circle',
+  },
+  render: defaultRender,
+}
+
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButtonToggle },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Default</span>
+          <CpButtonToggle label="Title" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Selected</span>
+          <CpButtonToggle label="Title" :is-selected="true" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Disabled</span>
+          <CpButtonToggle label="Title" :disabled="true" />
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Disabled selected</span>
+          <CpButtonToggle label="Title" :is-selected="true" :disabled="true" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const withInertSwitch: Story = {
+  args: {
+    ...Default.args,
+    isSelected: undefined,
+  },
+  render: (args: Args) => ({
+    components: { CpButtonToggle, CpSwitch },
+    setup() {
+      const isSelected = ref(false)
+      return { docCellStyle, docLabelStyle, docRowWrapStyle, isSelected, args }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Selected</span>
+          <CpButtonToggle v-bind="args" :is-selected="isSelected" @click="isSelected = !isSelected">
+            <template #leading>
+                <CpSwitch v-model="isSelected" inert :disabled="args.disabled" />
+            </template>
+          </CpButtonToggle>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const CustomLeadingSlot: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButtonToggle },
+    template: `
+      <div>
+        <CpButtonToggle label="Title" :is-selected="true">
+          <template #leading>
+            <span style="
+              width: 16px;
+              height: 16px;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 4px;
+              background: var(--cp-background-accent-solid);
+              color: var(--cp-foreground-white);
+              font-size: 11px;
+              line-height: 1;
+            ">✓</span>
+          </template>
+        </CpButtonToggle>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpDate.stories.ts

@@ -140,6 +140,33 @@ export const States: Story = {
   }),
 }
 
+/**
+ * Compares input ordering by locale (day/month in French, month/day in US English).
+ */
+export const LocaleOrdering: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpDate },
+    setup() {
+      const frenchDate = ref('')
+      const usDate = ref('')
+      return { frenchDate, usDate, docRowColumnStyle, dateStackStyle, docLabelStyle }
+    },
+    template: `
+      <div :style="docRowColumnStyle">
+        <div :style="dateStackStyle">
+          <span :style="docLabelStyle">fr-FR (day / month / year)</span>
+          <CpDate v-model="frenchDate" label="Date" locale="fr-FR" />
+        </div>
+        <div :style="dateStackStyle">
+          <span :style="docLabelStyle">en-US (month / day / year)</span>
+          <CpDate v-model="usDate" label="Date" locale="en-US" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
 /**
  * Combines a date input with a text input on the same line.
  */