@citizenplane/pimp 17.0.5 → 17.0.7

package/package.json

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

package/src/components/CpButton.vue

@@ -5,6 +5,7 @@
     class="cpButton"
     :class="dynamicClasses"
     :disabled="isButtonDisabled"
+    :href="hrefValue"
     role="button"
     tabindex="0"
     :type="type"
@@ -44,6 +45,7 @@ export interface Props {
   color?: 'neutral' | 'accent' | 'error' | 'warning' | 'success'
   disabled?: boolean
   enableHaptics?: boolean
+  href?: string
   isLoading?: boolean
   isSquare?: boolean
   size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
@@ -54,6 +56,7 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   appearance: 'primary',
   color: 'neutral',
+  href: undefined,
   tag: 'button',
   type: 'button',
   size: 'md',
@@ -78,6 +81,8 @@ const hasIconAfter = computed(() => !!slots['trailing-icon'])
 
 const isButtonDisabled = computed(() => props.disabled || props.isLoading)
 
+const hrefValue = computed(() => (props.tag === 'a' ? props.href : undefined))
+
 const dynamicClasses = computed(() => {
   return [
     `cpButton--is${capitalizedAppearance.value}`,

package/src/components/CpTable.vue

@@ -135,7 +135,8 @@ import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 
 import { camelize, decamelize } from '@/helpers/string'
 
-import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
+import { RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
+import type { PAGINATION_FORMATS } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -151,7 +152,7 @@ interface PaginationServer {
 
 interface Pagination {
   enabled?: boolean
-  format?: (typeof PAGINATION_FORMATS)[keyof typeof PAGINATION_FORMATS]
+  format?: PAGINATION_FORMATS
   limit?: number
   server?: PaginationServer
 }
@@ -397,7 +398,7 @@ const paginationState = computed(() => {
 const hasPagination = computed(() => paginationState.value || numberOfResults.value > VISIBLE_ROWS_MAX)
 const paginationFormat = computed(() => {
   if (typeof props.pagination === 'object' && props.pagination.format) return props.pagination.format
-  return PAGINATION_FORMATS.PAGES
+  return 'pages'
 })
 const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
 const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
@@ -433,7 +434,7 @@ const pageLastResultIndex = computed(() => {
 })
 
 const paginationLabel = computed(() => {
-  if (paginationFormat.value === PAGINATION_FORMATS.PAGES) {
+  if (paginationFormat.value === 'pages') {
     const pluralizedCount = numberOfPages.value > 1 ? 'pages' : 'page'
     return `${activePage.value}/${numberOfPages.value} ${pluralizedCount}`
   }

package/src/constants/CpTableConfig.ts

@@ -6,7 +6,4 @@ export enum RESERVED_KEYS {
   IS_SELECTED = 'isSelected',
 }
 
-export enum PAGINATION_FORMATS {
-  RESULTS = 'results',
-  PAGES = 'pages',
-}
+export type PAGINATION_FORMATS = 'results' | 'pages'

package/src/constants/index.ts

@@ -1,7 +1,8 @@
 export type { Colors } from './colors/Colors'
 export { Position } from './Position'
 export type { ToggleColors } from './colors/ToggleColors'
-export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
+export type { PAGINATION_FORMATS } from './CpTableConfig'
+export { RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export type { Sizes } from './Sizes'
 
 export { CustomCpIcons } from './CpCustomIcons'

package/src/stories/CpButton.stories.ts

@@ -34,7 +34,7 @@ const meta = {
     },
     tag: {
       control: 'select',
-      options: ['button', 'a'],
+      options: ['a', 'button', 'label'],
       description: 'The HTML element to render',
     },
     type: {

package/src/stories/CpTable.stories.ts

@@ -5,8 +5,6 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTable from '@/components/CpTable.vue'
 
-import { PAGINATION_FORMATS } from '@/constants'
-
 const meta = {
   title: 'Organisms/CpTable',
   component: CpTable,
@@ -133,7 +131,7 @@ export const WithPagination: Story = {
     pagination: {
       enabled: true,
       limit: 3,
-      format: PAGINATION_FORMATS.PAGES,
+      format: 'pages',
     },
   },
 }