@citizenplane/pimp 10.6.1 → 10.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.6.1",
+  "version": "10.7.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/CpMenuItem.vue

@@ -92,6 +92,7 @@ const handleItemClick = async (event: Event) => {
     }
 
     position: relative;
+    color: var(--cp-text-primary);
     display: flex;
     width: 100%;
     align-items: center;

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/CpTable.vue

@@ -695,75 +695,15 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   }
 
   &__row {
-    &--body:not(:last-of-type):not(#{&}--isFullWidth) {
-      box-shadow: inset 0 calc(var(--cp-dimensions-0_25) * -1) 0 var(--cp-border-soft);
-    }
-
-    &--body:has(+ #{&}--isFullWidth),
-    &--isFullWidth:has(+ .cpTable__row:hover) {
-      box-shadow: none !important;
-    }
-
-    &--isFullWidth:has(+ .cpTable__row:is(:hover, :focus, :focus-within), + .cpTable__row--isSelected)
-      + .cpTable__row::after {
-      box-shadow: none !important;
-    }
-
-    &--isFullWidth {
-      border-top: none;
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
-      position: relative;
-      transition: background-color 100ms ease-in-out;
+    &--body:not(:last-of-type) {
+      border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     }
 
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) td {
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
       background-color: var(--cp-background-primary-hover);
-    }
-
-    &--body:not(#{&}--isFullWidth):not(
-        :has(+ #{&}--isSelected),
-        :has(+ .cpTable__row:is(:hover, :focus, :focus-within))
-      ):is(:hover, :focus, :focus-within)::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-      pointer-events: none;
-    }
-
-    &--body:not(#{&}--isFullWidth):hover td:first-child,
-    &--body:not(#{&}--isFullWidth):focus td:first-child,
-    &--body:not(#{&}--isFullWidth):focus-within td:first-child {
-      border-top-left-radius: var(--cp-radius-md);
-      border-bottom-left-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):hover td:last-child,
-    &--body:not(#{&}--isFullWidth):focus td:last-child,
-    &--body:not(#{&}--isFullWidth):focus-within td:last-child {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):hover
-      td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus
-      td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus-within
-      td:nth-last-child(2) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):hover td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus-within
-      td:nth-last-child(2) {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
+      transition: background-color 100ms ease-in-out;
     }
 
     &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
@@ -774,8 +714,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     &--isFullWidth td {
       padding: var(--cp-spacing-md);
       background-color: var(--cp-background-secondary);
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     }
 
     &--isClickable {
@@ -787,49 +725,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       color: var(--cp-text-accent-primary);
     }
 
-    &--isSelected {
-      position: relative;
-    }
-
-    &--isSelected:not(:has(+ #{&}--isFullWidth))::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-utility-accent-100);
-      pointer-events: none;
-    }
-
-    &--isSelected td:first-child {
-      border-top-left-radius: var(--cp-radius-md);
-      border-bottom-left-radius: var(--cp-radius-md);
-    }
-
-    &--isSelected td:last-child {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--isSelected:has(.cpTable__cell--isOptions:not([style*='display: none'])) td:nth-last-child(2) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--isSelected:has(.cpTable__cell--isOptions[style*='display: none']) td:nth-last-child(2) {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within),
-    &--body:not(#{&}--isFullWidth).cpTable__row--isSelected {
-      box-shadow: none !important;
-    }
-
-    &--body:not(#{&}--isFullWidth):has(+ #{&}--isSelected),
-    &--body:not(#{&}--isFullWidth):has(+ #{&}:is(:hover, :focus, :focus-within)) {
-      box-shadow: none !important;
-    }
-
     &--body td {
       font-size: var(--cp-text-size-sm);
     }
@@ -873,28 +768,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
   }
 
-  &:has(
-    .cpTable__row--body:first-of-type:is(:hover, :focus, :focus-within),
-    .cpTable__row--body:first-of-type.cpTable__row--isSelected
-  ) {
-    .cpTable__column:after {
-      background-color: transparent;
-    }
-  }
-
-  &:has(
-    .cpTable__row--body:last-of-type:is(:hover, :focus, :focus-within),
-    .cpTable__row--body:last-of-type.cpTable__row--isSelected
-  ) {
-    .cpTable__container--hasPagination {
-      border-bottom-color: transparent;
-    }
-  }
-
-  &__table:has(.cpTable__row--body:first-of-type.cpTable__row--isFullWidth) &__column:after {
-    background-color: transparent;
-  }
-
   &__columnEditor {
     padding-right: calc(var(--cp-spacing-lg) + var(--cp-dimensions-0_5));
 

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/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 })