@citizenplane/pimp 18.16.2 → 18.17.0

package/package.json

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

package/src/components/CpButtonToggle.vue

@@ -10,7 +10,7 @@
   >
     <span class="cpToggleButton__leading">
       <slot name="leading">
-        <cp-icon size="16" :type="leadingIcon" />
+        <cp-icon :size="dynamicIconSize" :type="leadingIcon" />
       </slot>
     </span>
     <span v-if="showLabel" class="cpToggleButton__label">
@@ -29,6 +29,7 @@ interface Props {
   isSelected?: boolean
   label?: string
   leadingIcon?: string
+  size?: 'sm' | 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   label: '',
   leadingIcon: 'dashed-circle',
+  size: 'md',
 })
 
 const emit = defineEmits<{
@@ -46,13 +48,25 @@ const slots = useSlots()
 
 const showLabel = computed(() => !!props.label || !!slots.default)
 
-const dynamicClasses = computed(() => ({
-  'cpToggleButton--isSelected': props.isSelected,
-}))
+const dynamicClasses = computed(() => {
+  return {
+    [`cpToggleButton--${props.size}`]: true,
+    'cpToggleButton--isSelected': props.isSelected,
+  }
+})
 
-const handleClick = (event: MouseEvent) => {
-  emit('click', event)
-}
+const dynamicIconSize = computed(() => {
+  switch (props.size) {
+    case 'lg':
+      return '20'
+    case 'md':
+    case 'sm':
+    default:
+      return '16'
+  }
+})
+
+const handleClick = (event: MouseEvent) => emit('click', event)
 </script>
 
 <style lang="scss">
@@ -60,7 +74,6 @@ const handleClick = (event: MouseEvent) => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--cp-spacing-lg);
   border-radius: var(--cp-radius-md);
   background-color: var(--cp-background-primary);
   box-shadow:
@@ -71,8 +84,7 @@ const handleClick = (event: MouseEvent) => {
   transition:
     background-color 100ms ease-out,
     box-shadow 100ms ease-out,
-    color 100ms ease-out,
-    transform 100ms ease;
+    color 100ms ease-out;
 
   &:focus-visible {
     box-shadow:
@@ -97,10 +109,6 @@ const handleClick = (event: MouseEvent) => {
     color: var(--cp-text-secondary-hover);
   }
 
-  &:active:not(:disabled) {
-    transform: scale3d(0.97, 0.97, 1);
-  }
-
   &__leading {
     display: flex;
     align-items: center;
@@ -117,6 +125,23 @@ const handleClick = (event: MouseEvent) => {
     pointer-events: none;
   }
 
+  &--sm {
+    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
+  }
+
+  &--md {
+    padding: var(--cp-dimensions-2_5) var(--cp-spacing-lg);
+  }
+
+  &--lg {
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+
+    .cpToggleButton__label {
+      font-size: var(--cp-text-size-md);
+      line-height: var(--cp-line-height-md);
+    }
+  }
+
   &--isSelected:not(:disabled) {
     background-color: var(--cp-background-accent-secondary);
     box-shadow:

package/src/components/CpQuantityCounter.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="cpQuantityCounter">
+    <button
+      :aria-label="decreaseLabel"
+      class="cpQuantityCounter__button"
+      :disabled="isDecrementDisabled"
+      type="button"
+      @click="decrement"
+    >
+      <cp-icon size="16" type="minus" />
+    </button>
+    <cp-transition-counter v-if="!disableAnimation" class="cpQuantityCounter__count" :counter-number="modelValue">
+      <span>{{ modelValue }}</span>
+    </cp-transition-counter>
+    <span v-else class="cpQuantityCounter__count">{{ modelValue }}</span>
+    <button
+      :aria-label="increaseLabel"
+      class="cpQuantityCounter__button cpQuantityCounter__button--isAccent"
+      :disabled="isIncrementDisabled"
+      type="button"
+      @click="increment"
+    >
+      <cp-icon size="16" type="plus" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import CpIcon from '@/components/CpIcon.vue'
+import CpTransitionCounter from '@/components/CpTransitionCounter.vue'
+
+interface Props {
+  decreaseLabel: string
+  disableAnimation?: boolean
+  increaseLabel: string
+  max?: number | null
+  min?: number
+}
+
+const props = withDefaults(defineProps<Props>(), { disableAnimation: false, max: null, min: 0 })
+
+const modelValue = defineModel<number>({ required: true })
+
+const isDecrementDisabled = computed(() => modelValue.value <= props.min)
+const isIncrementDisabled = computed(() => props.max !== null && modelValue.value >= props.max)
+
+const decrement = () => {
+  if (isDecrementDisabled.value) return
+  modelValue.value -= 1
+}
+
+const increment = () => {
+  if (isIncrementDisabled.value) return
+  modelValue.value += 1
+}
+</script>
+
+<style lang="scss">
+.cpQuantityCounter {
+  display: flex;
+  align-items: center;
+  padding: var(--cp-spacing-xs);
+  border-radius: var(--cp-radius-md-lg);
+  background: var(--cp-background-accent-primary);
+  gap: var(--cp-spacing-sm);
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--cp-spacing-sm-md);
+    border: fn.px-to-rem(1) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md);
+    background: var(--cp-background-primary);
+    box-shadow: var(--cp-shadows-3xs);
+    color: var(--cp-text-primary);
+
+    @include mx.square-sizing(28);
+    @extend %u-focus-outline;
+
+    &:disabled {
+      border-color: transparent;
+      background: var(--cp-background-secondary);
+      box-shadow: none;
+      color: var(--cp-text-disabled);
+    }
+
+    &--isAccent {
+      color: var(--cp-text-accent-primary);
+    }
+  }
+
+  &__count {
+    display: flex;
+    width: fn.px-to-rem(24);
+    justify-content: center;
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-sm);
+    font-weight: 500;
+    line-height: var(--cp-text-sm-line-height);
+    text-align: center;
+  }
+}
+</style>

package/src/components/index.ts

@@ -40,6 +40,7 @@ import CpMenu from './CpMenu.vue'
 import CpMenuItem from './CpMenuItem.vue'
 import CpMenuList from './CpMenuList.vue'
 import CpMultiselect from './CpMultiselect.vue'
+import CpQuantityCounter from './CpQuantityCounter.vue'
 import CpRadio from './CpRadio.vue'
 import CpRadioGroup from './CpRadioGroup.vue'
 import CpRadioNew from './CpRadioNew.vue'
@@ -120,6 +121,7 @@ const Components = {
   CpSelect,
   CpSelectMenu,
   CpMultiselect,
+  CpQuantityCounter,
   CpCheckbox,
   CpRadio,
   CpRadioGroup,
@@ -244,6 +246,7 @@ export {
   CpMenuItem,
   CpMenuList,
   CpMultiselect,
+  CpQuantityCounter,
   CpRadio,
   CpRadioGroup,
   CpRadioNew,

package/src/stories/CpButtonToggle.stories.ts

@@ -6,10 +6,17 @@ import CpSwitch from '@/components/CpSwitch.vue'
 
 import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
 
+const buttonToggleSizes = ['sm', 'md', 'lg'] as const
+
 const meta = {
   title: 'Atoms/CpButtonToggle',
   component: CpButtonToggle,
   argTypes: {
+    size: {
+      control: 'select',
+      options: buttonToggleSizes,
+      description: 'The size of the toggle button.',
+    },
     isSelected: {
       control: 'boolean',
       description: 'Whether the toggle button is selected.',
@@ -48,10 +55,29 @@ export const Default: Story = {
     isSelected: false,
     disabled: false,
     leadingIcon: 'dashed-circle',
+    size: 'md',
   },
   render: defaultRender,
 }
 
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpButtonToggle },
+    setup() {
+      return { buttonToggleSizes, docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div v-for="size in buttonToggleSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}</span>
+          <CpButtonToggle label="Title" :size="size" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
 export const States: Story = {
   parameters: { controls: { disable: true } },
   render: () => ({

package/src/stories/CpQuantityCounter.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CpQuantityCounter from '@/components/CpQuantityCounter.vue'
+
+const meta = {
+  title: 'Atoms/CpQuantityCounter',
+  component: CpQuantityCounter,
+  argTypes: {
+    decreaseLabel: {
+      control: 'text',
+      description: 'Aria-label for the decrease button',
+    },
+    disableAnimation: {
+      control: 'boolean',
+      description: 'Whether to render the count as a plain span instead of animating it',
+    },
+    increaseLabel: {
+      control: 'text',
+      description: 'Aria-label for the increase button',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum allowed value',
+    },
+    min: {
+      control: 'number',
+      description: 'Minimum allowed value',
+    },
+    modelValue: {
+      control: 'number',
+      description: 'The counter value',
+    },
+  },
+} satisfies Meta<typeof CpQuantityCounter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default counter. Use the controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    modelValue: 1,
+    min: 0,
+    max: 5,
+    decreaseLabel: 'Decrease',
+    increaseLabel: 'Increase',
+  },
+  render: (args) => ({
+    components: { CpQuantityCounter },
+    setup() {
+      const value = ref(1)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpQuantityCounter v-bind="args" v-model="value" />
+      </div>
+    `,
+  }),
+}