@citizenplane/pimp 10.6.2 → 10.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.6.2",
+  "version": "10.8.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -41,7 +41,8 @@
     "primevue": "^4.5.4",
     "vue": "^3.5.27",
     "vue-bind-once": "^0.2.1",
-    "vue-tel-input": "^9.5.0"
+    "vue-tel-input": "^9.5.0",
+    "web-haptics": "^0.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.28.6",

package/src/components/CpButton.vue

@@ -8,6 +8,7 @@
     role="button"
     tabindex="0"
     :type="type"
+    @click="handleClick"
   >
     <span class="cpButton__body">
       <span v-if="isLoading" class="cpButton__loader"><cp-loader :color="Colors.NEUTRAL" /></span>
@@ -24,8 +25,10 @@
 
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
+import { useWebHaptics } from 'web-haptics/vue'
 
 import { ButtonAppearances, ButtonTags, ButtonTypes } from '@/constants/Button'
+import { Haptics } from '@/constants/Hapitcs'
 
 import CpLoader from '@/components/CpLoader.vue'
 
@@ -36,6 +39,7 @@ interface Props {
   appearance?: ButtonAppearances
   color?: Colors
   disabled?: boolean
+  enableHaptics?: boolean
   isLoading?: boolean
   isSquare?: boolean
   size?: Sizes
@@ -46,15 +50,13 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   appearance: ButtonAppearances.DEFAULT,
   color: undefined,
-  disabled: false,
   tag: ButtonTags.BUTTON,
   type: ButtonTypes.BUTTON,
-  isLoading: false,
-  isSquare: false,
   size: Sizes.MD,
 })
 
 const slots = useSlots()
+const { trigger } = useWebHaptics()
 
 const capitalizedAppearance = computed(() => capitalizeFirstLetter(props.appearance))
 
@@ -81,6 +83,12 @@ const dynamicClasses = computed(() => {
     },
   ]
 })
+
+const handleClick = () => {
+  if (props.enableHaptics) {
+    trigger(Haptics.RIGID)
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/CpSelectableButton.vue

@@ -110,6 +110,7 @@ const dynamicClasses = computed(() => {
   &__body {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     padding: var(--cp-selectable-body-padding);
     gap: var(--cp-selectable-body-gap);
     background-color: var(--cp-selectable-body-background-color);
@@ -118,6 +119,7 @@ const dynamicClasses = computed(() => {
       background-color 0.1s ease-out,
       box-shadow 0.1s ease-out,
       color 0.1s ease-out;
+    width: 100%;
   }
 
   &__icon i,

package/src/components/CpSwitch.vue

@@ -30,6 +30,9 @@
 
 <script setup lang="ts">
 import { computed, useId } from 'vue'
+import { useWebHaptics } from 'web-haptics/vue'
+
+import { Haptics } from '@/constants/Hapitcs'
 
 import CpTooltip from '@/components/CpTooltip.vue'
 
@@ -40,6 +43,7 @@ interface Props {
   autofocus?: boolean
   color?: string
   disabled?: boolean
+  enableHaptics?: boolean
   groupName?: string
   helper?: string
   isRequired?: boolean
@@ -68,6 +72,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const { trigger } = useWebHaptics()
+
 const switchUniqueId = useId()
 
 const capitalizedColor = computed(() => {
@@ -87,6 +93,10 @@ const computedClasses = computed(() => {
 })
 
 const handleClick = (value: boolean): void => {
+  if (props.enableHaptics) {
+    trigger(Haptics.SOFT)
+  }
+
   emit('update:modelValue', !value)
 }
 </script>

package/src/components/CpToast.vue

@@ -62,13 +62,18 @@
 
 <script setup lang="ts">
 import Toast from 'primevue/toast'
+import ToastEventBus from 'primevue/toasteventbus'
+import { onMounted } from 'vue'
+import { useWebHaptics } from 'web-haptics/vue'
 
 import { CpToastTypes } from '@/constants/CpToastTypes'
+import { Haptics } from '@/constants/Hapitcs'
 
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Message {
   detail?: string
+  enableHaptics?: boolean
   life?: number
   primaryAction?: {
     label: string
@@ -87,6 +92,8 @@ interface Message {
   summary: string
 }
 
+onMounted(() => ToastEventBus.on('add', handleToastAdded))
+
 const displayTimer = (message: Message) => message.showTimer && message.life !== undefined
 
 const getDynamicClass = (severity: string) => `cpToast--is${capitalizeFirstLetter(severity)}`
@@ -129,6 +136,28 @@ const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) =
 }
 
 const handleMouse = () => true
+
+const { trigger } = useWebHaptics()
+
+const resolveHapticLevel = (severity: CpToastTypes) => {
+  switch (severity) {
+    case CpToastTypes.SUCCESS:
+      return Haptics.SUCCESS
+    case CpToastTypes.WARNING:
+      return Haptics.WARNING
+    case CpToastTypes.ERROR:
+      return Haptics.ERROR
+    case CpToastTypes.INFO:
+    default:
+      return Haptics.SOFT
+  }
+}
+
+const handleToastAdded = (message: Message) => {
+  if (message.enableHaptics) {
+    trigger(resolveHapticLevel(message.severity))
+  }
+}
 </script>
 
 <style lang="scss">

package/src/constants/Hapitcs.ts

@@ -0,0 +1,13 @@
+export const Haptics = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  LIGHT: 'light',
+  MEDIUM: 'medium',
+  HEAVY: 'heavy',
+  SOFT: 'soft',
+  RIGID: 'rigid',
+  SELECTION: 'selection',
+  NUDGE: 'nudge',
+  BUZZ: 'buzz',
+}

package/src/stories/CpButton.stories.ts

@@ -112,6 +112,24 @@ export const WithIcons: Story = {
   }),
 }
 
+export const WithHaptics: Story = {
+  args: { ...Default.args, enableHaptics: true },
+  render: (args) => ({
+    components: { CpButton },
+    setup() {
+      const onClick = () => {
+        console.log('Button clicked')
+      }
+      return { args, onClick }
+    },
+    template: `
+      <CpButton v-bind="args" @click="onClick">
+        Button with haptics
+      </CpButton>
+    `,
+  }),
+}
+
 export const Loading: Story = {
   args: { ...Default.args, isLoading: true },
   render: defaultRender,

package/src/stories/CpSelectableButton.stories.ts

@@ -97,6 +97,38 @@ export const WithIcons: Story = {
   }),
 }
 
+export const FullWidth: Story = {
+  args: {
+    appearance: 'secondary',
+    size: Sizes.MD,
+    disabled: false,
+    label: 'Label',
+    isSelected: true,
+    isExpanded: false,
+  },
+  render: (args) => ({
+    components: { CpSelectableButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 240px; width:500px;">
+        <CpSelectableButton
+          style="width: 100%;"
+          v-bind="args"
+        >
+          <template #leading-icon>
+            <CpIcon type="circle" />
+          </template>
+          <template #trailing-icon>
+            <CpIcon type="circle" />
+          </template>
+        </CpSelectableButton>
+      </div>
+    `,
+  }),
+}
+
 export const Sizing: Story = {
   args: {
     disabled: false,

package/src/stories/CpSwitch.stories.ts

@@ -83,6 +83,28 @@ export const Default: Story = {
   }),
 }
 
+export const WithHaptics: Story = {
+  args: {
+    ...Default.args,
+    enableHaptics: true,
+  },
+  render: (args) => ({
+    components: { CpSwitch },
+    setup() {
+      const value = ref(false)
+      return { args, value }
+    },
+    template: `
+      <div style="padding: 20px;">
+        <CpSwitch
+          v-model="value"
+          v-bind="args"
+        />
+      </div>
+    `,
+  }),
+}
+
 export const Disabled: Story = {
   args: {
     ...Default.args,

package/src/stories/CpToast.stories.ts

@@ -19,6 +19,7 @@ const meta: Meta<typeof CpToast> = {
   args: {
     position: 'top-right',
     group: undefined,
+    enableHaptics: false,
   },
 }
 
@@ -36,6 +37,7 @@ export const Default: Story = {
         severity: CpToastTypes.SECONDARY,
         summary: `Hello i'm a cpToast !`,
         detail: 'This is a cpToast description.',
+        enableHaptics: true,
       }
 
       const notifySecondary = () => toast.add({ ...baseOptions })