@citizenplane/pimp 18.2.0 → 18.3.0

package/package.json

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

package/src/assets/css/dimensions.css

@@ -10,6 +10,7 @@
   --cp-dimensions-3: 0.75rem;
   --cp-dimensions-3_5: 0.875rem;
   --cp-dimensions-4: 1rem;
+  --cp-dimensions-4_5: 1.125rem;
   --cp-dimensions-5: 1.25rem;
   --cp-dimensions-6: 1.5rem;
   --cp-dimensions-8: 2rem;

package/src/components/CpBadge.vue

@@ -27,7 +27,7 @@ interface Props {
   isSquare?: boolean
   label?: string
   leadingIcon?: string
-  size?: '2xs' | 'xs' | 'sm' | 'md'
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
   trailingIcon?: string
   variant?: 'outline' | 'soft' | 'solid'
 }
@@ -128,6 +128,17 @@ const componentDynamicClasses = computed(() => [
     white-space: nowrap;
   }
 
+  @include cp-badge-sized(
+    'lg',
+    var(--cp-text-size-md),
+    var(--cp-line-height-md),
+    var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-radius-md),
+    var(--cp-spacing-sm-md),
+    var(--cp-dimensions-5),
+    var(--cp-dimensions-4_5)
+  );
+
   @include cp-badge-sized(
     'md',
     var(--cp-text-size-sm),

package/src/components/CpMenu.vue

@@ -86,6 +86,11 @@ const props = withDefaults(defineProps<Props>(), {
   keepOpenOnClick: false,
 })
 
+const emits = defineEmits<{
+  hide: []
+  show: []
+}>()
+
 const MOBILE_BREAKPOINT_PX = 640
 
 const trigger = ref<HTMLElement | null>(null)
@@ -122,11 +127,13 @@ const drawerPt = {
 const show = (event: Event) => {
   if (isDrawer.value) isOpen.value = true
   else popover.value?.show(event, trigger.value)
+  emits('show')
 }
 
 const hide = () => {
   if (isDrawer.value) isOpen.value = false
   else popover.value?.hide()
+  emits('hide')
 }
 
 const onItemClick = () => {
@@ -167,7 +174,7 @@ defineExpose({ show, hide, toggle })
 
   &__overlay {
     position: absolute;
-    margin-top: var(--cp-spacing-lg);
+    margin-top: var(--cp-spacing-sm-md);
     min-width: calc(var(--cp-dimensions-1) * 62.5);
     border-radius: var(--cp-radius-md);
     background-color: var(--cp-background-primary);

package/src/components/icons/IconAirportAlt.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      clip-rule="evenodd"
+      d="M6 4.00048C6.55228 4.00048 7 4.4482 7 5.00048V6.00048H9.53223C10.1392 6.00059 10.606 6.53699 10.5225 7.13818L9.9668 11.1382C9.89903 11.6244 9.48847 11.987 9 11.9985V15.0005H18C19.6569 15.0005 21 16.3436 21 18.0005V21.0005H22C22.5523 21.0005 23 21.4482 23 22.0005C22.9998 22.5526 22.5522 23.0005 22 23.0005H2C1.44785 23.0005 1.00021 22.5526 1 22.0005C1 21.4482 1.44772 21.0005 2 21.0005H3V11.9985C2.51153 11.987 2.10097 11.6244 2.0332 11.1382L1.47754 7.13818C1.39398 6.53699 1.86083 6.00059 2.46777 6.00048H5V5.00048C5 4.4482 5.44772 4.00048 6 4.00048ZM5 21.0005H7V12.0005H5V21.0005ZM9 21.0005H19V18.0005C19 17.4482 18.5523 17.0005 18 17.0005H9V21.0005ZM3.84668 10.0005H8.15332L8.31934 8.00048H3.68066L3.84668 10.0005Z"
+      fill-rule="evenodd"
+    />
+    <path
+      d="M20.3838 3.40673C20.8472 2.83472 21.6865 2.74644 22.2588 3.20947C22.5451 3.4411 22.5891 3.86071 22.3574 4.14697L20.3018 6.68506L21.0781 10.9546C21.2096 11.6789 20.7293 12.3728 20.0049 12.5044C19.6427 12.5701 19.2963 12.3294 19.2305 11.9673L18.6426 8.73388L16.5342 11.3394C16.0223 11.9715 15.1779 12.2305 14.3994 11.9946L12.3477 11.3735C11.9954 11.2667 11.7965 10.8938 11.9033 10.5415C12.117 9.83688 12.8617 9.43837 13.5664 9.65185L14.9785 10.0806L17.4102 7.07763L14.1006 6.34326C13.7413 6.26336 13.5151 5.90767 13.5947 5.54834C13.7544 4.82919 14.4664 4.37581 15.1855 4.53564L18.8154 5.34131L20.3838 3.40673Z"
+    />
+  </svg>
+</template>

package/src/constants/CpCustomIcons.ts

@@ -5,6 +5,7 @@ import IconAddReceipt from '@/components/icons/IconAddReceipt.vue'
 import IconAerosol from '@/components/icons/IconAerosol.vue'
 import IconAggregator from '@/components/icons/IconAggregator.vue'
 import IconAirline from '@/components/icons/IconAirline.vue'
+import IconAirportAlt from '@/components/icons/IconAirportAlt.vue'
 import IconAirportTerminal from '@/components/icons/IconAirportTerminal.vue'
 import IconAllFlightAlt from '@/components/icons/IconAllFlightAlt.vue'
 import IconArrival from '@/components/icons/IconArrival.vue'
@@ -138,6 +139,7 @@ export const CustomCpIcons = {
   aerosol: IconAerosol,
   aggregator: IconAggregator,
   airline: IconAirline,
+  'airport-alt': IconAirportAlt,
   'airport-terminal': IconAirportTerminal,
   'all-flight-alt': IconAllFlightAlt,
   arrival: IconArrival,

package/src/stories/CpBadge.stories.ts

@@ -17,7 +17,7 @@ const badgeColors = [
   'white',
 ] as const
 
-const badgeSizes = ['2xs', 'xs', 'sm', 'md'] as const
+const badgeSizes = ['2xs', 'xs', 'sm', 'md', 'lg'] as const
 
 const badgeVariants = ['outline', 'soft', 'solid'] as const