@citizenplane/pimp 16.0.2 → 16.0.3

package/package.json

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

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/stories/CpAlert.stories.ts

@@ -217,11 +217,11 @@ export const Documentation: Story = {
 
 export const Default: Story = {
   args: {
-    color: 'accent',
+    color: 'neutral',
     type: 'expanded',
     title: 'Alert title',
     content: 'This is an informational alert message.',
-    isClosable: true,
+    isClosable: false,
     icon: undefined,
     primaryActionLabel: undefined,
     secondaryActionLabel: undefined,