@citizenplane/pimp 16.0.2 → 16.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "16.0.2",
+  "version": "16.1.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -48,6 +48,7 @@
     "@commitlint/cli": "20.4.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
+    "@storybook/addon-docs": "^9.1.20",
     "@storybook/addon-onboarding": "^9.1.17",
     "@storybook/addon-vitest": "^9.0.18",
     "@storybook/preset-scss": "^1.0.3",

package/src/components/CpAlert.vue

@@ -98,37 +98,39 @@ const emit = defineEmits<{
 
 const slots = useSlots()
 
-const colorProps = {
-  neutral: {
-    icon: 'dashed-circle',
-    primaryActionAppearance: 'secondary',
-    secondaryActionAppearance: 'tertiary',
-  },
-  accent: {
-    icon: 'info',
-    primaryActionAppearance: 'primary',
+const colorProps = computed(() => {
+  const defaultProps = {
+    primaryActionAppearance: isExpanded.value ? 'primary' : 'secondary',
     secondaryActionAppearance: 'secondary',
-  },
-  success: {
-    icon: 'check',
-    primaryActionAppearance: 'primary',
-    secondaryActionAppearance: 'secondary',
-  },
-  warning: {
-    icon: 'alert-triangle',
-    primaryActionAppearance: 'primary',
-    secondaryActionAppearance: 'secondary',
-  },
-  error: {
-    icon: 'x-octagon',
-    primaryActionAppearance: 'primary',
-    secondaryActionAppearance: 'secondary',
-  },
-}
+  }
+  return {
+    neutral: {
+      icon: 'dashed-circle',
+      primaryActionAppearance: isExpanded.value ? 'secondary' : 'tertiary',
+      secondaryActionAppearance: 'tertiary',
+    },
+    accent: {
+      ...defaultProps,
+      icon: 'info',
+    },
+    success: {
+      ...defaultProps,
+      icon: 'check',
+    },
+    warning: {
+      ...defaultProps,
+      icon: 'alert-triangle',
+    },
+    error: {
+      ...defaultProps,
+      icon: 'x-octagon',
+    },
+  }
+})
 
 const alertIcon = computed(() => {
   if (props.icon) return props.icon
-  return colorProps[props.color].icon
+  return colorProps.value[props.color].icon
 })
 
 const isExpanded = computed(() => props.type === 'expanded')
@@ -136,9 +138,11 @@ const hasTitle = computed(() => !!props.title || !!slots.title)
 const hasContent = computed(() => isExpanded.value && (!!props.content || !!slots.default))
 const hasActions = computed(() => hasPrimaryAction.value || hasSecondaryAction.value)
 const hasPrimaryAction = computed(() => !!props.primaryActionLabel || !!slots['primary-action'])
-const hasSecondaryAction = computed(() => !!props.secondaryActionLabel || !!slots['secondary-action'])
-const primaryActionAppearance = computed(() => colorProps[props.color].primaryActionAppearance)
-const secondaryActionAppearance = computed(() => colorProps[props.color].secondaryActionAppearance)
+const hasSecondaryAction = computed(
+  () => isExpanded.value && (!!props.secondaryActionLabel || !!slots['secondary-action']),
+)
+const primaryActionAppearance = computed(() => colorProps.value[props.color].primaryActionAppearance)
+const secondaryActionAppearance = computed(() => colorProps.value[props.color].secondaryActionAppearance)
 const actionsSize = computed(() => (isExpanded.value ? 'sm' : 'xs'))
 
 const dynamicClasses = computed(() => [
@@ -197,6 +201,10 @@ const dynamicClasses = computed(() => [
     gap: var(--cp-spacing-md);
   }
 
+  &__close {
+    align-self: flex-start;
+  }
+
   &__title {
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);

package/src/components/CpHeading.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="$props.headingLevel" v-bind="$attrs" :class="`cpHeading--${size}`" class="cpHeading">
+  <component :is="$props.headingLevel" class="cpHeading" :class="`cpHeading--${size}`" v-bind="$attrs">
     <slot />
   </component>
 </template>
@@ -7,12 +7,11 @@
 <script setup lang="ts">
 import { HeadingLevels } from '@/constants'
 
-/**
- * @deprecated This component is deprecated. Please use directly CSS variables instead.
- */
-
 type HeadingSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 
+/**
+ * @deprecated `CpHeading` is deprecated. Use CpText instead.
+ */
 interface Props {
   headingLevel?: HeadingLevels
   size?: HeadingSize

package/src/components/CpText.vue

@@ -0,0 +1,141 @@
+<template>
+  <component :is="tag" class="cpText" :class="dynamicClasses" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+export type CpTextSize =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl'
+  | '7xl'
+  | '8xl'
+  | '9xl'
+
+export type CpTextWeight = 400 | 500 | 600 | 700
+
+interface Props {
+  size?: CpTextSize
+  tag?: string
+  weight?: CpTextWeight
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  tag: 'p',
+  weight: 400,
+})
+
+const weightList = {
+  400: 'normal',
+  500: 'medium',
+  600: 'semibold',
+  700: 'bold',
+}
+
+const dynamicClasses = computed(() => [
+  `cpText--${props.size}`,
+  `cpText--is${capitalizeFirstLetter(weightList[props.weight])}`,
+])
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<style lang="scss">
+.cpText {
+  &--xs {
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &--sm {
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &--md {
+    font-size: var(--cp-text-size-md);
+    line-height: var(--cp-line-height-md);
+  }
+
+  &--lg {
+    font-size: var(--cp-text-size-lg);
+    line-height: var(--cp-line-height-lg);
+  }
+
+  &--xl {
+    font-size: var(--cp-text-size-xl);
+    line-height: var(--cp-line-height-xl);
+  }
+
+  &--2xl {
+    font-size: var(--cp-text-size-2xl);
+    line-height: var(--cp-line-height-2xl);
+  }
+
+  &--3xl {
+    font-size: var(--cp-text-size-3xl);
+    line-height: var(--cp-line-height-3xl);
+  }
+
+  &--4xl {
+    font-size: var(--cp-text-size-4xl);
+    line-height: var(--cp-line-height-4xl);
+  }
+
+  &--5xl {
+    font-size: var(--cp-text-size-5xl);
+    line-height: var(--cp-line-height-5xl);
+  }
+
+  &--6xl {
+    font-size: var(--cp-text-size-6xl);
+    line-height: var(--cp-line-height-6xl);
+  }
+
+  &--7xl {
+    font-size: var(--cp-text-size-7xl);
+    line-height: var(--cp-line-height-7xl);
+  }
+
+  &--8xl {
+    font-size: var(--cp-text-size-8xl);
+    line-height: var(--cp-line-height-8xl);
+  }
+
+  &--9xl {
+    font-size: var(--cp-text-size-9xl);
+    line-height: var(--cp-line-height-9xl);
+  }
+
+  &--isNormal {
+    font-weight: 400;
+  }
+
+  &--isMedium {
+    font-weight: 500;
+  }
+
+  &--isSemibold {
+    font-weight: 600;
+  }
+
+  &--isBold {
+    font-weight: 700;
+  }
+}
+</style>

package/src/components/index.ts

@@ -46,6 +46,7 @@ import CpTable from './CpTable.vue'
 import CpTableColumnEditor from './CpTableColumnEditor.vue'
 import CpTabs from './CpTabs.vue'
 import CpTelInput from './CpTelInput.vue'
+import CpText from './CpText.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToast from './CpToast.vue'
 import CpTooltip from './CpTooltip.vue'
@@ -87,6 +88,7 @@ const Components = {
   CpAlert,
   CpLoader,
   CpInput,
+  CpText,
   CpTextarea,
   CpSelect,
   CpSelectMenu,

package/src/stories/BaseInputLabel.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
 const meta = {
-  title: 'Form/BaseInputLabel',
+  title: 'Atoms/BaseInputLabel',
   component: BaseInputLabel,
   argTypes: {
     isInvalid: {
@@ -16,20 +18,45 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+/**
+ * Default label used above form controls. Use the controls to experiment
+ * with each prop in isolation.
+ */
 export const Default: Story = {
-  args: {
-    isInvalid: false,
-  },
-  render: (args) => ({
+  args: { isInvalid: false },
+  render: (args: Args) => ({
     components: { BaseInputLabel },
     setup() {
       return { args }
     },
     template: `
       <div class="baseInputLabel-story">
-        <BaseInputLabel v-bind="args">
-          Default Label
-        </BaseInputLabel>
+        <BaseInputLabel v-bind="args">Default Label</BaseInputLabel>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Default and invalid states side by side.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { BaseInputLabel },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Default</span>
+          <BaseInputLabel>Default Label</BaseInputLabel>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Invalid</span>
+          <BaseInputLabel :is-invalid="true">Invalid Label</BaseInputLabel>
+        </div>
       </div>
     `,
   }),

package/src/stories/Colors.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as ColorsStories from './Colors.stories'
+
+<Meta of={ColorsStories} />
+
+<Title />
+<Description />
+<Stories />

package/src/stories/Colors.stories.ts

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+import type { Token } from '@/stories/tokenUtils'
+import { copyableClass, copyableCopiedClass, readTokens, useCopier } from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Colors',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+const FAMILIES = ['accent', 'blue', 'error', 'magenta', 'neutral', 'pink', 'success', 'warning', 'yellow'] as const
+
+const FAMILY_ORDER: readonly string[] = [
+  'base',
+  'accent',
+  'error',
+  'warning',
+  'success',
+  'blue',
+  'pink',
+  'magenta',
+  'yellow',
+  'neutral',
+]
+
+const FAMILY_LABEL: Record<string, string> = {
+  base: 'Base',
+  accent: 'Accent',
+  error: 'Error',
+  warning: 'Warning',
+  success: 'Success',
+  blue: 'Blue',
+  pink: 'Pink',
+  magenta: 'Magenta',
+  yellow: 'Yellow',
+  neutral: 'Neutral',
+}
+
+const gridStyle = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;'
+
+const cardStyle =
+  'display: flex; flex-direction: column; border: 1px solid #e9eaf6; border-radius: 8px; overflow: hidden; background: #ffffff;'
+
+const swatchStyle = (tokenName: string) =>
+  `height: 72px; background: var(${tokenName}); border-bottom: 1px solid rgba(0, 0, 0, 0.06);`
+
+const cardBodyStyle = 'display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;'
+
+const cardNameStyle =
+  'font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #111; word-break: break-all;'
+
+const cardValueStyle =
+  'font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #6b7280; word-break: break-all;'
+
+const familyGroupStyle = 'display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;'
+
+type Family = { label: string; tokens: Token[] }
+
+const familyOf = (name: string, prefix: string): string => {
+  const rest = name.startsWith(prefix) ? name.slice(prefix.length) : name
+  const first = rest.split('-')[0]
+  return (FAMILIES as readonly string[]).includes(first) ? first : 'base'
+}
+
+const groupByFamily = (tokens: Token[], prefix: string): Family[] => {
+  const byFamily = new Map<string, Token[]>()
+  for (const token of tokens) {
+    const key = familyOf(token.name, prefix)
+    const bucket = byFamily.get(key) ?? []
+    bucket.push(token)
+    byFamily.set(key, bucket)
+  }
+  return FAMILY_ORDER.filter((key) => byFamily.has(key)).map((key) => ({
+    label: FAMILY_LABEL[key] ?? key,
+    tokens: byFamily.get(key) ?? [],
+  }))
+}
+
+type SectionArgs = { exclude?: (RegExp | string)[]; prefix: string }
+
+const makeSectionStory = (section: SectionArgs): Story => ({
+  render: () => ({
+    setup() {
+      const tokens = readTokens([section.prefix], section.exclude ?? [])
+      const { copiedKey, copy } = useCopier()
+      return {
+        count: tokens.length,
+        families: groupByFamily(tokens, section.prefix),
+        copiedKey,
+        copy,
+        labelStyle: docLabelStyle,
+        groupStyle: familyGroupStyle,
+        grid: gridStyle,
+        card: cardStyle,
+        body: cardBodyStyle,
+        nameText: cardNameStyle,
+        valueText: cardValueStyle,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        swatch: (tokenName: string) => swatchStyle(tokenName),
+      }
+    },
+    template: `
+      <div v-if="count > 0">
+        <div v-for="family in families" :key="family.label" :style="groupStyle">
+          <span :style="labelStyle">{{ family.label }} ({{ family.tokens.length }})</span>
+          <div :style="grid">
+            <div v-for="token in family.tokens" :key="token.name" :style="card">
+              <div :style="swatch(token.name)"></div>
+              <div :style="body">
+                <span
+                  :style="nameText"
+                  :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                  role="button"
+                  tabindex="0"
+                  :title="'Click to copy ' + token.name"
+                  @click="copy(token.name)"
+                  @keydown.enter.prevent="copy(token.name)"
+                  @keydown.space.prevent="copy(token.name)"
+                >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+                <span :style="valueText">{{ token.value }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+})
+
+/**
+ * Surface colors used for page, card and control backgrounds.
+ */
+export const Background: Story = makeSectionStory({ prefix: '--cp-background-' })
+
+/**
+ * Border colors for dividers, card outlines and control edges.
+ */
+export const Border: Story = makeSectionStory({ prefix: '--cp-border-' })
+
+/**
+ * Foreground colors used for icons, illustrations and decorative surfaces
+ * that sit on top of the background.
+ */
+export const Foreground: Story = makeSectionStory({ prefix: '--cp-foreground-' })
+
+/**
+ * Text colors. Typography size, line-height and letter-spacing tokens live
+ * under the Typography section.
+ */
+export const Text: Story = makeSectionStory({
+  prefix: '--cp-text-',
+  exclude: [/-line-height$/, /-letter-spacing$/, /^--cp-text-size-/],
+})
+
+/**
+ * Utility colors for transient UI surfaces such as overlays, shadows or
+ * state indicators.
+ */
+export const Utility: Story = makeSectionStory({ prefix: '--cp-utility-' })
+
+/**
+ * Dedicated colors used by focus rings. See the Focus Rings section for
+ * composite ring tokens.
+ */
+export const Focus: Story = makeSectionStory({ prefix: '--cp-focus' })