@citizenplane/pimp 18.16.3 → 18.17.0

package/package.json

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

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/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>
+    `,
+  }),
+}