@citizenplane/pimp 18.0.6 → 18.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.0.6",
+  "version": "18.1.0",
   "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/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>
+    `,
+  }),
+}