@youcan/celeste 0.6.3

package/src/components/alert/alert.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { uid } from '@/utils/crypto';
+import clsx from 'clsx';
+
+const props = withDefaults(
+  defineProps<AlertProps>(),
+  { size: 'xs', variant: 'fill', state: 'information', dismissable: false },
+);
+
+defineEmits(['dismiss']);
+
+const labelledby = uid();
+const describedby = uid();
+
+const ICON_MAP: Record<NonNullable<AlertProps['state']>, string> = {
+  warning: 'i-celeste-alert-fill',
+  feature: 'i-celeste-magic-fill',
+  error: 'i-celeste-error-warning-fill',
+  success: 'i-celeste-checkbox-circle-fill',
+  information: 'i-celeste-information-fill',
+};
+</script>
+
+<script lang="ts">
+export interface AlertProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'lg';
+  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
+  state?: 'information' | 'success' | 'warning' | 'error' | 'feature';
+  dismissable?: boolean;
+}
+</script>
+
+<template>
+  <div
+    :aria-labelledby="labelledby"
+    :aria-describedby="describedby"
+    :role="$slots.primary || $slots.secondary ? 'alert-dialog' : 'alert'"
+    class="celeste-alert"
+    :class="clsx(
+      `celeste-alert--${size}`,
+      `celeste-alert--${variant}--${state}`,
+      props.class,
+    )"
+  >
+    <i
+      class="celeste-alert-icon"
+      :class="[`celeste-alert-icon--${variant}--${state}`, ICON_MAP[props.state]]"
+    />
+
+    <div class="celeste-alert-inner" role="presentation">
+      <div role="presentation" class="celeste-alert-content">
+        <slot>
+          <h5 :id="labelledby" class="celeste-alert-title">
+            <slot name="title" />
+          </h5>
+          <div
+            v-if="size === 'lg' && $slots.description"
+            :id="describedby"
+            class="celeste-alert-description"
+          >
+            <slot name="description" />
+          </div>
+        </slot>
+      </div>
+
+      <div
+        v-if="$slots.primary || $slots.secondary"
+        class="celeste-alert-actions"
+        role="presentation"
+      >
+        <div v-if="$slots.primary" class="celeste-alert-action-primary">
+          <slot name="primary" />
+        </div>
+
+        <div v-if="$slots.primary && $slots.secondary && size === 'lg'" class="celeste-alert-action-divider">
+          ∙
+        </div>
+
+        <div v-if="$slots.secondary && size === 'lg'" class="celeste-alert-action-secondary">
+          <slot name="secondary" />
+        </div>
+      </div>
+    </div>
+
+    <a
+      v-if="dismissable"
+      href="#"
+      aria-label="close"
+      class="celeste-alert-close"
+      :class="[`celeste-alert-close--${variant}`]"
+      @click.prevent="$emit('dismiss')"
+    >
+      <i i-celeste-close-line />
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+
+$alert-sizes: (
+  'xs': (
+    height: 32px,
+    padding: var(--spacing-8),
+    gap: var(--spacing-8),
+    border-radius: var(--radius-8),
+    font: var(--label-xs),
+  ),
+  'sm': (
+    height: 36px,
+    padding: var(--spacing-8) var(--spacing-10),
+    gap: var(--spacing-8),
+    border-radius: var(--radius-8),
+    font: var(--label-sm),
+  ),
+  'lg': (
+    height: fit-content,
+    padding: 14px,
+    gap: var(--spacing-12),
+    border-radius: var(--radius-12),
+    font: var(--label-sm),
+  ),
+);
+$alert-style-map: (
+  'fill': 'base',
+  'light': 'light',
+  'lighter': 'lighter',
+);
+$alert-styles: ('fill', 'light', 'lighter', 'stroke');
+$alert-states: ('error' 'feature' 'warning' 'success' 'information');
+
+@mixin alert-size($size) {
+  $size-props: map.get($alert-sizes, $size);
+
+  height: map.get($size-props, height);
+  padding: map.get($size-props, padding);
+  gap: map.get($size-props, gap);
+  border-radius: map.get($size-props, border-radius);
+}
+
+@mixin alert-style($style, $state) {
+  @if $style == 'stroke' {
+    border: 1px solid var(--color-stroke-soft-200);
+    background-color: var(--color-bg-white-0);
+    box-shadow: var(--shadow-regular-md);
+    color: var(--color-text-strong-950);
+
+    & .celeste-alert-description {
+      color: var(--color-text-sub-600);
+    }
+
+    & .celeste-alert-action-primary,
+    & .celeste-alert-action-secondary,
+    & .celeste-alert-action-divider {
+      color: var(--color-text-strong-950);
+    }
+  } @else {
+    border: 1px solid transparent;
+    background-color: var(
+      --color-state-#{if($state == 'feature', 'faded', $state)}-#{map.get($alert-style-map, $style)}
+    );
+    color: if($style == 'fill', var(--color-static-white), var(--color-text-strong-950));
+
+    & .celeste-alert-description {
+      opacity: if($style == 'fill', 1, 0.72);
+      color: if($style == 'fill', var(--color-static-white), var(--color-text-strong-950));
+    }
+
+    & .celeste-alert-action-primary,
+    & .celeste-alert-action-secondary,
+    & .celeste-alert-action-divider {
+      color: if($style == 'fill', var(--color-static-white), var(--color-text-strong-950));
+    }
+  }
+}
+
+@mixin icon-style($style, $state) {
+  @if $style == 'fill' {
+    color: var(--color-static-white);
+  } @else {
+    color: var(--color-state-#{if($state == 'feature', 'faded', $state)}-base);
+  }
+}
+
+@mixin close-style($style) {
+  @if $style == 'fill' {
+    opacity: 0.72;
+    color: var(--color-static-white);
+  } @else {
+    opacity: 0.4;
+    color: var(--color-icon-strong-950);
+  }
+}
+
+.celeste-alert {
+  display: flex;
+  box-sizing: border-box;
+  align-items: start;
+  width: 100%;
+
+  &-inner {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  &-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &-icon {
+    flex-shrink: 0;
+    width: var(--icon-size);
+    height: var(--icon-size);
+
+    @each $style in $alert-styles {
+      @each $state in $alert-states {
+        &--#{$style}--#{$state} {
+          @include icon-style($style, $state);
+        }
+      }
+    }
+  }
+
+  &-close {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+
+    i {
+      width: var(--icon-size);
+      height: var(--icon-size);
+    }
+
+    @each $style in $alert-styles {
+      &--#{$style} {
+        @include close-style($style);
+      }
+    }
+  }
+
+  &-title {
+    margin: 0;
+    overflow: hidden;
+    font: var(--title-font);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-description {
+    font: var(--paragraph-sm);
+  }
+
+  &-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: flex-start;
+    align-self: stretch;
+    gap: var(--spacing-8);
+  }
+
+  &-action-divider {
+    opacity: 0.48;
+    font: var(--paragraph-sm);
+    text-align: center;
+  }
+
+  &--xs {
+    @include alert-size('xs');
+
+    align-items: center;
+
+    --icon-size: 16px;
+    --action-font: var(--label-xs);
+    --title-font: var(--paragraph-xs);
+  }
+
+  &--sm {
+    @include alert-size('sm');
+
+    align-items: center;
+
+    --icon-size: 20px;
+    --title-font: var(--paragraph-sm);
+    --action-font: var(--label-sm);
+  }
+
+  &--lg {
+    @include alert-size('lg');
+
+    --icon-size: 20px;
+    --action-font: var(--label-sm);
+    --title-font: var(--label-sm);
+
+    & .celeste-alert-inner {
+      flex-direction: column;
+      gap: var(--spacing-10);
+    }
+  }
+
+  @each $style in ('fill', 'light', 'lighter', 'stroke') {
+    @each $state in $alert-states {
+      &--#{$style}--#{$state} {
+        @include alert-style($style, $state);
+      }
+    }
+  }
+}
+</style>

package/src/components/alert/index.ts

@@ -0,0 +1,2 @@
+export * from './alert.vue';
+export { default as Alert } from './alert.vue';

package/src/components/alert/stories/alert.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import LinkButton from '../../button/link-button.vue';
+import Alert from '../alert.vue';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    dismissable: true,
+    size: 'lg',
+    state: 'success',
+    variant: 'stroke',
+  },
+
+  render: args => ({
+    components: { Alert, LinkButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Alert v-bind="args">
+        <template #title>Payment received</template>
+        <template #description>You have received a new payment from your-mom@gmail.com, don't spend it all in one place.</template>
+        <template #primary>
+          <LinkButton :underline="true" type="black" size="md">View transaction</LinkButton>
+        </template>
+        <template #secondary>
+          <LinkButton type="gray" size="md">Ignore</LinkButton>
+        </template>
+      </Alert>
+    `,
+  }),
+};
+
+export const Information: Story = {
+  args: {
+    size: 'sm',
+    state: 'information',
+    variant: 'fill',
+  },
+
+  render: args => ({
+    components: { Alert, LinkButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Alert v-bind="args">
+        <template #title>Information</template>
+        <template #primary>
+          <LinkButton type="white" size="md">Got it</LinkButton>
+        </template>
+      </Alert>
+    `,
+  }),
+};
+
+export const Error: Story = {
+  args: {
+    dismissable: true,
+    size: 'lg',
+    state: 'error',
+    variant: 'lighter',
+  },
+
+  render: args => ({
+    components: { Alert, LinkButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Alert v-bind="args">
+        <template #title>Error occurred</template>
+        <template #description>Something went wrong while processing your request. Please try again.</template>
+        <template #primary>
+          <LinkButton type="error" size="md">Retry</LinkButton>
+        </template>
+        <template #secondary>
+          <LinkButton type="gray" size="md">Cancel</LinkButton>
+        </template>
+      </Alert>
+    `,
+  }),
+};

package/src/components/badge/badge.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  size: 'md',
+  color: 'faded',
+  variant: 'fill',
+  type: 'basic',
+});
+</script>
+
+<script lang="ts">
+export interface BadgeProps {
+  size?: 'sm' | 'md';
+  variant?: 'fill' | 'light' | 'lighter' | 'stroke';
+  type?: 'basic' | 'dot' | 'leading-icon' | 'trailing-icon';
+  state?: 'faded' | 'information' | 'warning' | 'error' | 'success' | 'away' | 'feature' | 'verified' | 'highlighted' | 'stable';
+  disabled?: boolean;
+  icon?: string;
+  label?: string;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx(
+      'celeste-badge',
+      `celeste-badge-${size}`,
+      `celeste-badge-${type}`,
+      `celeste-badge-${state}`,
+      `celeste-badge-${variant}`,
+      disabled && 'celeste-badge-disabled',
+      props.class,
+    )"
+    :aria-label="label"
+    :aria-disabled="disabled || undefined"
+    role="badge"
+  >
+    <i v-if="type === 'dot'" class="dot i-celeste-dot" />
+    <i v-if="type === 'leading-icon'" :class="icon" />
+    <span v-if="label">{{ label }}</span>
+    <i v-if="type === 'trailing-icon'" :class="icon" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+$states: faded, information, warning, error, success, away, feature, verified, highlighted, stable;
+
+.celeste-badge {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-8);
+  transition-property: background-color, color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  pointer-events: none;
+  user-select: none;
+  gap: 2px;
+
+  i.dot {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+  }
+
+  i:not(.dot) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:has(i.dot) {
+    gap: 0;
+    padding-inline-start: var(--spacing-2);
+  }
+
+  &-leading-icon {
+    padding-inline-start: var(--spacing-2);
+  }
+
+  &-trailing-icon {
+    padding-inline-end: var(--spacing-2);
+  }
+
+  &-disabled {
+    border-color: var(--color-stroke-soft-200);
+    background-color: transparent;
+    color: var(--color-text-disabled-300);
+  }
+
+  &-sm {
+    height: 16px;
+    font: var(--subheading-xxs);
+    text-transform: uppercase;
+  }
+
+  &-md {
+    height: 20px;
+    font: var(--label-xs);
+  }
+
+  @each $state in $states {
+    &-fill.celeste-badge-#{$state}:not(&-disabled) {
+      background-color: var(--color-state-#{$state}-base);
+      color: var(--color-text-white-0);
+    }
+
+    &-light.celeste-badge-#{$state}:not(&-disabled) {
+      background-color: var(--color-state-#{$state}-light);
+      color: var(--color-state-#{$state}-dark);
+    }
+
+    &-lighter.celeste-badge-#{$state}:not(&-disabled) {
+      background-color: var(--color-state-#{$state}-lighter);
+      color: var(--color-state-#{$state}-base);
+    }
+
+    &-stroke.celeste-badge-#{$state}:not(&-disabled) {
+      border-color: var(--color-state-#{$state}-base);
+      background-color: var(--color-bg-white-0);
+      color: var(--color-state-#{$state}-base);
+    }
+  }
+}
+</style>

package/src/components/badge/index.ts

@@ -0,0 +1,5 @@
+export * from './badge.vue';
+export { default as Badge } from './badge.vue';
+
+export * from './status-badge.vue';
+export { default as StatusBadge } from './status-badge.vue';

package/src/components/badge/status-badge.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import clsx from 'clsx';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<StatusBadgeProps>(), {
+  size: 'md',
+  variant: 'light',
+  state: 'faded',
+});
+
+const ICON_MAP: Record<NonNullable<StatusBadgeProps['state']>, string> = {
+  success: 'i-celeste-checkbox-circle-fill',
+  warning: 'i-celeste-alert-fill',
+  error: 'i-celeste-error-warning-fill',
+  faded: 'i-celeste-forbid-fill',
+};
+
+const icon = computed(() => ICON_MAP[props.state]);
+</script>
+
+<script lang="ts">
+export interface StatusBadgeProps {
+  variant?: 'stroke' | 'light';
+  dotted?: boolean;
+  state?: 'success' | 'warning' | 'error' | 'faded';
+  label: string;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div
+    :class="clsx(
+      'celeste-badge',
+      `celeste-badge-${state}`,
+      `celeste-badge-${variant}`,
+      props.class,
+    )"
+    :aria-label="label"
+    role="status"
+  >
+    <i v-if="dotted" class="dot i-celeste-dot" />
+    <i v-else :class="icon" />
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$states: success, warning, error, faded;
+
+.celeste-badge {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-4);
+  transition-property: background-color, color, border-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  border: 1px solid transparent;
+  border-radius: var(--radius-6);
+  font: var(--label-xs);
+  pointer-events: none;
+  user-select: none;
+  gap: 4px;
+
+  i.dot {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+  }
+
+  i:not(.dot) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:has(i.dot) {
+    gap: 0;
+    padding-inline-start: var(--spacing-2);
+  }
+
+  &-disabled {
+    border-color: var(--color-stroke-soft-200);
+    background-color: transparent;
+    color: var(--color-text-disabled-300);
+  }
+
+  &-sm {
+    height: 16px;
+    font: var(--subheading-xxs);
+    text-transform: uppercase;
+  }
+
+  @each $state in $states {
+    &-light.celeste-badge-#{$state}:not(&-disabled) {
+      background-color: var(--color-state-#{$state}-lighter);
+      color: if($state == 'faded', var(--color-text-sub-600), var(--color-state-#{$state}-base));
+    }
+
+    &-stroke.celeste-badge-#{$state}:not(&-disabled) {
+      border-color: var(--color-stroke-soft-200);
+      background-color: var(--color-bg-white-0);
+      color: var(--color-state-#{$state}-base);
+    }
+  }
+}
+</style>

package/src/components/badge/stories/badge.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '../badge.vue';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    variant: 'fill',
+    label: 'Badge',
+    state: 'information',
+    type: 'leading-icon',
+    icon: 'i-celeste-information-fill',
+  },
+
+  render: args => ({
+    components: { Badge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Badge v-bind="args">
+      </Badge>
+    `,
+  }),
+};