@citizenplane/pimp 18.9.36 → 18.10.0

package/package.json

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

package/src/components/CpTabs.vue

@@ -1,31 +1,38 @@
 <template>
-  <div ref="cpTabsElement" class="cpTabs" role="tablist">
+  <div ref="cpTabsElement" class="cpTabs" :class="dynamicTabsClass" role="tablist">
     <button
       v-for="(tab, index) in tabs"
       :key="tab.title"
       class="cpTabs__tab"
       :class="getTabClass(index)"
+      :aria-selected="isActiveTab(index)"
       role="tab"
-      tabindex="0"
+      :tabindex="getTabIndex(index)"
       type="button"
       @click="handleTabClick(index)"
+      @keydown="handleTabKeydown($event, index)"
     >
-      <cp-icon v-if="tab.icon" class="cpTabs__icon" size="16" :type="tab.icon" />
-      <cp-heading class="cpTabs__title" heading-level="h4">
+      <cp-icon v-if="tab.leadingIcon" class="cpTabs__icon" :class="dynamicIconClass" :type="tab.leadingIcon" />
+      <cp-text class="cpTabs__label" tag="span" :size="textSize">
         {{ tab.title }}
-      </cp-heading>
+      </cp-text>
       <div v-if="hasTabCount(tab.count)" class="cpTabs__count">
-        <cp-badge :color="dynamicBadgeColor(index)" size="xs">
+        <cp-badge :color="dynamicBadgeColor(index)" :variant="dynamicBadgeVariant(index)" :size="badgeSize">
           {{ tab.count }}
         </cp-badge>
       </div>
+      <cp-icon v-if="tab.trailingIcon" class="cpTabs__icon" :class="dynamicIconClass" :type="tab.trailingIcon" />
     </button>
-    <div ref="activeUnderline" class="cpTabs__activeUnderline" />
+    <div ref="activeUnderline" class="cpTabs__activeUnderline" :class="dynamicUnderlineClass" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import CpText from '@/components/CpText.vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
 
 type EmitType = {
   (e: 'onTabClick', index: number): void
@@ -34,38 +41,130 @@ type EmitType = {
 interface Props {
   defaultActiveIndex?: number
   isLoading?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   tabs: {
     count?: number
-    icon?: string
+    leadingIcon?: string
     title: string
+    trailingIcon?: string
   }[]
+  variant?: 'brand' | 'underline'
 }
 
-const props = withDefaults(defineProps<Props>(), { defaultActiveIndex: 0 })
+const props = withDefaults(defineProps<Props>(), {
+  defaultActiveIndex: 0,
+  size: 'md',
+  variant: 'underline'
+})
 
 const emit = defineEmits<EmitType>()
 
 const cpTabsElement = ref<HTMLElement | null>(null)
 const activeUnderline = ref<HTMLElement | null>(null)
 const activeTabIndex = ref<number | null>(props.defaultActiveIndex)
+const suppressUnderlineTransition = ref(false)
+
+const textSize = computed(() => {
+  switch (props.size) {
+    case 'xs':
+    case 'sm':
+      return 'xs'
+    case 'md':
+    case 'lg':
+    default:
+      return 'md'
+  }
+})
+
+const badgeSize = computed(() => {
+  switch (props.size) {
+    case 'xs':
+    case 'sm':
+      return '2xs'
+    case 'md':
+    case 'lg':
+    default:
+      return 'xs'
+  }
+})
 
 const hasTabCount = (count?: number) => typeof count === 'number'
 
-const handleTabClick = (index: number) => {
+const isActiveTab = (index: number) => activeTabIndex.value === index
+
+const getTabIndex = (index: number) => isActiveTab(index) ? 0 : -1
+
+const activateTab = async (index: number, { focus = false } = {}) => {
   if (props.isLoading) return
+  if (index < 0 || index >= props.tabs.length) return
+
+  if (focus) suppressUnderlineTransition.value = true
 
   activeTabIndex.value = index
   emit('onTabClick', index)
-  scrollToActiveElement()
+  scrollToActiveElement(focus ? 'instant' : 'smooth')
+
+  if (!focus) return
+
+  await nextTick()
+  getActiveTabElement()?.focus()
+  requestAnimationFrame(() => (suppressUnderlineTransition.value = false))
+}
+
+const handleTabClick = (index: number) => activateTab(index)
+
+const handleTabKeydown = (event: KeyboardEvent, index: number) => {
+  if (props.isLoading) return
+
+  const lastIndex = props.tabs.length - 1
+  let nextIndex: number | null = null
+
+  switch (event.key) {
+    case 'ArrowRight':
+      nextIndex = index === lastIndex ? 0 : index + 1
+      break
+    case 'ArrowLeft':
+      nextIndex = index === 0 ? lastIndex : index - 1
+      break
+    default:
+      return
+  }
+
+  event.preventDefault()
+  activateTab(nextIndex, { focus: true })
 }
 
+const dynamicIconClass = computed(() => {
+  return { [`cpTabs__icon--${props.size}`]: true }
+})
+
+const dynamicTabsClass = computed(() => {
+  return {
+    [`cpTabs--${props.size}`]: true,
+    [`cpTabs--is${capitalizeFirstLetter(props.variant)}`]: true,
+  }
+})
+
 const getTabClass = (tabIndex: number) => {
   if (!props.tabs[tabIndex]) return
 
-  return [{ 'cpTabs__tab--isActive': activeTabIndex.value === tabIndex }, { 'cpTabs__tab--isLoading': props.isLoading }]
+  return {
+    'cpTabs__tab--isActive': activeTabIndex.value === tabIndex,
+    'cpTabs__tab--isLoading': props.isLoading,
+    [`cpTabs__tab--${props.size}`]: true,
+  }
 }
 
-const dynamicBadgeColor = (index: number) => (index === activeTabIndex.value ? 'accent' : 'neutral')
+const dynamicUnderlineClass = computed(() => {
+  return {
+    [`cpTabs__activeUnderline--is${capitalizeFirstLetter(props.variant)}`]: true,
+    'cpTabs__activeUnderline--noTransition': suppressUnderlineTransition.value
+  }
+})
+
+const dynamicBadgeColor = (index: number) => index === activeTabIndex.value ? 'accent' : 'neutral'
+
+const dynamicBadgeVariant = (index: number) => index === activeTabIndex.value ? 'solid' : 'soft'
 
 const getActiveTabElement = () => {
   const componentElement = cpTabsElement.value
@@ -83,6 +182,17 @@ const getUnderlineElement = () => {
   return underlineElement
 }
 
+// NOTE: fix mimatch width between active underline & focus outline of active tab
+const getUnderlineInset = () => {
+  if (props.variant !== 'underline') return 0
+
+  const rootStyle = getComputedStyle(document.documentElement)
+  const rootFontSize = Number.parseFloat(rootStyle.fontSize)
+  const insetRem = Number.parseFloat(rootStyle.getPropertyValue('--cp-dimensions-0_5'))
+
+  return rootFontSize * insetRem
+}
+
 const setUnderlineStyle = () => {
   const activeTabElement = getActiveTabElement()
   const underlineElement = getUnderlineElement()
@@ -90,15 +200,17 @@ const setUnderlineStyle = () => {
 
   if (!activeTabElement || !underlineElement || !containerElement) return
 
-  underlineElement.style.width = `${activeTabElement.offsetWidth}px`
-  underlineElement.style.transform = `translate3d(${activeTabElement.offsetLeft}px, 0, 0)`
+  const inset = getUnderlineInset()
+
+  underlineElement.style.width = `${activeTabElement.offsetWidth - inset * 2}px`
+  underlineElement.style.transform = `translate3d(${activeTabElement.offsetLeft + inset}px, 0, 0)`
 }
 
-const scrollToActiveElement = () => {
+const scrollToActiveElement = (behavior: ScrollBehavior = 'smooth') => {
   const activeTabElement = getActiveTabElement()
   if (!activeTabElement) return
 
-  return activeTabElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  return activeTabElement.scrollIntoView({ block: 'nearest', behavior })
 }
 
 onBeforeUnmount(() => window.removeEventListener('resize', setUnderlineStyle))
@@ -123,29 +235,61 @@ watch(
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--cp-spacing-md);
+
+  &--xs {
+    gap: var(--cp-spacing-xs);
+  }
+
+  &--sm {
+    gap: var(--cp-spacing-sm);
+  }
+
+  &--md {
+    gap: var(--cp-spacing-lg);
+  }
+
+  &--lg {
+    gap: var(--cp-spacing-lg);
+  }
 
   &__activeUnderline {
     position: absolute;
-    bottom: 0;
-    left: 0;
-    height: var(--cp-dimensions-0_5);
+    z-index: 0;
     transition:
       background-color 300ms ease,
       transform 300ms cubic-bezier(0.34, 1.26, 0.64, 1),
       width 300ms cubic-bezier(0.34, 1.26, 0.64, 1);
+
+    &--noTransition {
+      transition: none;
+    }
+
+    &--isBrand {
+      top: auto;
+      bottom: auto;
+      height: 100%;
+      border-radius: var(--cp-radius-md);
+    }
+
+    &--isUnderline {
+      bottom: 0;
+      left: 0;
+      height: var(--cp-dimensions-0_5);
+      margin-bottom: -1px;
+    }
   }
 
   &__tab {
     @extend %u-focus-outline;
 
     position: relative;
+    z-index: 1;
     display: flex;
+    flex: 1;
     align-items: center;
-    padding: var(--cp-spacing-md);
+    justify-content: center;
     border-radius: var(--cp-radius-md);
     color: var(--cp-text-secondary);
-    gap: var(--cp-spacing-sm);
     -webkit-tap-highlight-color: transparent;
     transition:
       box-shadow 300ms ease,
@@ -164,20 +308,73 @@ watch(
       color: var(--cp-text-accent-primary);
     }
 
-    &--isActive ~ .cpTabs__activeUnderline {
-      background-color: var(--cp-border-accent-solid);
+    &--isActive ~ .cpTabs__activeUnderline--isBrand {
+      background-color: var(--cp-background-accent-secondary);
+    }
+
+    &--isActive ~ .cpTabs__activeUnderline--isUnderline {
+      background-color: var(--cp-background-accent-solid);
+    }
+
+    &--xs {
+      padding: var(--cp-spacing-sm-md);
+      gap: var(--cp-spacing-xs);
+    }
+
+    &--sm {
+      padding: var(--cp-spacing-md);
+      gap: var(--cp-spacing-sm);
+    }
+
+    &--md {
+      padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+      gap: var(--cp-spacing-sm-md);
+    }
+
+    &--lg {
+      padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+      gap: var(--cp-spacing-sm-md);
     }
   }
 
-  &__title {
-    font-size: var(--cp-text-size-sm);
-    font-weight: 500;
-    line-height: var(--cp-line-height-md);
-    padding-inline: var(--cp-spacing-sm);
+  &--isUnderline {
+    border-bottom: 1px solid var(--cp-border-soft);
+
+    .cpTabs__tab {
+      margin-bottom: -1px;
+    }
+
+    .cpTabs__tab:focus-visible {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  &__label {
     transition: color 300ms ease;
     white-space: nowrap;
   }
 
+  &__label--xs {
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &__label--sm {
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &__label--md {
+    font-size: var(--cp-text-size-md);
+    line-height: var(--cp-line-height-md);
+  }
+
+  &__label--lg {
+    font-size: var(--cp-text-size-lg);
+    line-height: var(--cp-line-height-lg);
+  }
+
   &__count {
     font-variant: tabular-nums;
   }
@@ -186,26 +383,15 @@ watch(
     position: relative;
     display: flex;
     border-radius: var(--cp-radius-sm);
-  }
-}
 
-@include mx.media-query-min(769px) {
-  .cpTabs {
-    &__tab--isActive {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    &--xs,
+    &--sm {
+      @include mx.square-sizing(16);
     }
-  }
-}
 
-@include mx.media-query-max(768px) {
-  .cpTabs {
-    &__activeUnderline {
-      top: auto;
-      bottom: auto;
-      height: 100%;
-      border-radius: var(--cp-radius-md);
-      opacity: 0.14;
+    &--md,
+    &--lg {
+      @include mx.square-sizing(20);
     }
   }
 }

package/src/stories/CpTabs.stories.ts

@@ -20,6 +20,16 @@ const meta = {
       control: 'object',
       description: 'Array of tab objects with title, optional icon, and optional count',
     },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'The size of the tabs',
+    },
+    variant: {
+      control: 'select',
+      options: ['brand', 'underline'],
+      description: 'The variant of the tabs',
+    },
   },
 } satisfies Meta<typeof CpTabs>
 
@@ -32,7 +42,10 @@ const defaultRender = (args: Args) => ({
   setup() {
     return { args }
   },
-  template: '<CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" />',
+  template: `
+    <CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" variant="underline" /><br />
+    <CpTabs v-bind="args" @on-tab-click="args.onOnTabClick" variant="brand" />
+  `,
 })
 
 /**
@@ -57,9 +70,9 @@ export const WithIcons: Story = {
   args: {
     ...Default.args,
     tabs: [
-      { title: 'Home', icon: 'home' },
-      { title: 'Settings', icon: 'settings' },
-      { title: 'User', icon: 'user' },
+      { title: 'Home', leadingIcon: 'circle', trailingIcon: 'circle' },
+      { title: 'Settings', leadingIcon: 'circle', trailingIcon: 'circle' },
+      { title: 'User', leadingIcon: 'circle', trailingIcon: 'circle' },
     ],
   },
   render: defaultRender,
@@ -88,9 +101,9 @@ export const WithIconsAndCounts: Story = {
   args: {
     ...Default.args,
     tabs: [
-      { title: 'Notifications', icon: 'bell', count: 8 },
-      { title: 'Messages', icon: 'user', count: 3 },
-      { title: 'Tasks', icon: 'check', count: 15 },
+      { title: 'Notifications', leadingIcon: 'circle', trailingIcon: 'circle', count: 8 },
+      { title: 'Messages', leadingIcon: 'circle', trailingIcon: 'circle', count: 3 },
+      { title: 'Tasks', leadingIcon: 'circle', trailingIcon: 'circle', count: 15 },
     ],
   },
   render: defaultRender,
@@ -105,9 +118,9 @@ export const InDialog: Story = {
     ...Default.args,
     defaultActiveIndex: 1,
     tabs: [
-      { title: 'Notifications', icon: 'bell', count: 8 },
-      { title: 'Messages', icon: 'user', count: 3 },
-      { title: 'Tasks', icon: 'check', count: 15 },
+      { title: 'Notifications', leadingIcon: 'circle', trailingIcon: 'circle', count: 8 },
+      { title: 'Messages', leadingIcon: 'circle', trailingIcon: 'circle', count: 3 },
+      { title: 'Tasks', leadingIcon: 'circle', trailingIcon: 'circle', count: 15 },
     ],
   },
   render: (args) => ({