@citizenplane/pimp 10.2.0 → 10.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.2.0",
+  "version": "10.2.1",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/css/tokens.css

@@ -17,6 +17,7 @@
   --cp-background-solid: var(--cp-colors-grey-900);
   --cp-background-disabled: var(--cp-colors-grey-50);
   --cp-background-overlay: rgba(62, 62, 91, 0.86);
+  --cp-background-black: var(--cp-colors-black);
 
   --cp-background-accent-primary: var(--cp-colors-accent-50);
   --cp-background-accent-primary-hover: var(--cp-colors-accent-100);

package/src/components/CpTooltip.vue

@@ -1,31 +1,67 @@
 <template>
-  <v-tooltip :aria-id="ariaId" class="cpTooltip" :container="false" :disabled :distance>
+  <v-tooltip
+    :aria-id="ariaId"
+    class="cpTooltip"
+    :class="dynamicTooltipClasses"
+    :container="false"
+    :disabled
+    :distance
+    :placement
+  >
     <slot />
     <template #popper>
-      <span v-if="content">
-        {{ content }}
-      </span>
-      <slot v-else name="content" />
+      <div class="cpTooltip__wrapper">
+        <div class="cpTooltip__content">
+          <span v-if="content">
+            {{ content }}
+          </span>
+          <slot v-else name="content" />
+        </div>
+        <template v-if="hasSubcontent">
+          <hr class="cpTooltip__separator" />
+          <div class="cpTooltip__subcontent">
+            <span v-if="subcontent">{{ subcontent }}</span>
+            <slot v-else name="subcontent" />
+          </div>
+        </template>
+      </div>
     </template>
   </v-tooltip>
 </template>
 
 <script setup lang="ts">
 import { Tooltip as VTooltip } from 'floating-vue'
-import { useId } from 'vue'
+import { useId, useSlots, computed } from 'vue'
+
+import { Colors } from '@/constants'
+import { capitalizeFirstLetter } from '@/helpers'
+
+type TooltipColors = Colors.ACCENT | Colors.NEUTRAL
+type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 interface Props {
+  color?: TooltipColors
   content?: string
   disabled?: boolean
   distance?: number
+  placement?: Placement
+  subcontent?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   content: '',
   distance: 8,
+  color: Colors.ACCENT,
+  placement: undefined,
+  subcontent: '',
 })
 
 const ariaId = useId()
+const slots = useSlots()
+
+const hasSubcontent = computed(() => !!(props.subcontent || slots.subcontent))
+
+const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLetter(props.color)}`])
 </script>
 
 <style lang="scss">
@@ -36,13 +72,51 @@ const ariaId = useId()
   .v-popper__inner {
     padding: var(--cp-spacing-md) var(--cp-spacing-lg);
     border-radius: var(--cp-radius-md);
-    background-color: var(--cp-background-accent-solid);
+    background-color: var(--cp-tooltip-bg);
     font-size: var(--cp-text-size-xs);
     line-height: var(--cp-line-height-xs);
+    max-width: fn.px-to-rem(300);
+    text-align: left;
+    font-weight: 400;
+  }
+
+  .cpTooltip__content {
+    color: var(--cp-tooltip-content-text);
+  }
+
+  .cpTooltip__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .cpTooltip__separator {
+    border: none;
+    border-top: 1px solid var(--cp-colors-white);
+    opacity: 0.5;
+    width: 100%;
+    margin: var(--cp-spacing-md) 0;
+  }
+
+  .cpTooltip__subcontent {
+    font-style: italic;
+    color: var(--cp-tooltip-subcontent-text);
   }
 
   .v-popper__arrow-outer {
-    border-color: var(--cp-background-accent-solid);
+    border-color: var(--cp-tooltip-bg);
+  }
+
+  &.cpTooltip--isAccent {
+    --cp-tooltip-bg: var(--cp-background-accent-solid);
+    --cp-tooltip-content-text: var(--cp-foreground-white);
+    --cp-tooltip-subcontent-text: var(--cp-foreground-white);
+  }
+
+  &.cpTooltip--isNeutral {
+    --cp-tooltip-bg: color-mix(in srgb, var(--cp-background-black) 80%, transparent);
+    --cp-tooltip-content-text: var(--cp-foreground-white);
+    --cp-tooltip-subcontent-text: color-mix(in srgb, var(--cp-foreground-white) 70%, transparent);
   }
 }
 </style>

package/src/stories/CpTooltip.stories.ts

@@ -10,6 +10,15 @@ const meta = {
       control: 'text',
       description: 'The content to display in the tooltip',
     },
+    subcontent: {
+      control: 'text',
+      description: 'Optional secondary content',
+    },
+    color: {
+      control: 'select',
+      options: ['accent', 'neutral'],
+      description: 'The color variant',
+    },
     placement: {
       control: 'select',
       options: ['top', 'right', 'bottom', 'left'],
@@ -101,6 +110,50 @@ export const WithHTMLContent: Story = {
   }),
 }
 
+export const WithSubcontentSlot: Story = {
+  args: {
+    content: 'Main content',
+    placement: 'top',
+  },
+  render: (args) => ({
+    components: { CpTooltip },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 100px; text-align: center;">
+        <CpTooltip v-bind="args">
+          <button type="button">Hover me</button>
+          <template #subcontent>
+            <p>Optional subcontent via slot, it can be a long text to see how it works and includes <b>HTML</b> <u>tags</u></p>
+          </template>
+        </CpTooltip>
+      </div>
+    `,
+  }),
+}
+
+export const WithSubcontentProp: Story = {
+  args: {
+    content: 'Main content',
+    subcontent: 'Optional subcontent via prop',
+    placement: 'top',
+  },
+  render: (args) => ({
+    components: { CpTooltip },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="padding: 100px; text-align: center;">
+        <CpTooltip v-bind="args">
+          <button type="button">Hover me</button>
+        </CpTooltip>
+      </div>
+    `,
+  }),
+}
+
 export const Disabled: Story = {
   args: {
     disabled: true,