@youcan/celeste 0.22.0 → 0.23.0

package/src/components/breadcrumb/breadcrumb-arrow.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive } from 'reka-ui';
+
+export interface BreadcrumbArrowProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<BreadcrumbArrowProps>();
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    aria-hidden="true"
+    data-slot="breadcrumb-arrow"
+    :class="clsx('celeste-breadcrumb-arrow', props.class)"
+  >
+    <slot>
+      <i class="i-celeste-arrow-right-s-line" />
+    </slot>
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+.celeste-breadcrumb-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-disabled-300);
+  font: var(--paragraph-md);
+  user-select: none;
+
+  &:deep(i) {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:dir(rtl):deep(i) {
+    transform: scaleX(-1);
+  }
+}
+</style>

package/src/components/breadcrumb/breadcrumb-item.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive } from 'reka-ui';
+
+export interface BreadcrumbItemProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  active?: boolean;
+}
+
+const props = defineProps<BreadcrumbItemProps>();
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    :aria-current="active ? 'page' : undefined"
+    data-slot="breadcrumb-item"
+    :class="clsx('celeste-breadcrumb-item', active && 'celeste-breadcrumb-item-active', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+.celeste-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  transition-property: color, text-decoration-color;
+  transition-duration: var(--animation-fast);
+  transition-timing-function: ease-out;
+  color: var(--color-text-sub-600);
+  font: var(--label-sm);
+  text-decoration: underline transparent;
+  gap: var(--spacing-6);
+
+  &:deep(i) {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    color: var(--color-text-strong-950);
+    text-decoration-color: currentcolor;
+  }
+
+  &-active,
+  &-active:hover {
+    color: var(--color-text-strong-950);
+    text-decoration-color: transparent;
+  }
+}
+</style>

package/src/components/breadcrumb/breadcrumb.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive } from 'reka-ui';
+
+export interface BreadcrumbProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<BreadcrumbProps>(), { as: 'nav' });
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    aria-label="Breadcrumb"
+    data-slot="breadcrumb"
+    :class="clsx('celeste-breadcrumb', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style scoped>
+.celeste-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-6);
+}
+</style>

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,8 @@
+export * from './breadcrumb-arrow.vue';
+export { default as BreadcrumbArrow } from './breadcrumb-arrow.vue';
+
+export * from './breadcrumb-item.vue';
+export { default as BreadcrumbItem } from './breadcrumb-item.vue';
+
+export * from './breadcrumb.vue';
+export { default as Breadcrumb } from './breadcrumb.vue';

package/src/components/breadcrumb/stories/breadcrumb.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import BreadcrumbArrow from '../breadcrumb-arrow.vue';
+import BreadcrumbItem from '../breadcrumb-item.vue';
+import Breadcrumb from '../breadcrumb.vue';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {
+  render: () => ({
+    components: { Breadcrumb, BreadcrumbItem, BreadcrumbArrow },
+    template: `
+      <Breadcrumb>
+        <BreadcrumbItem>
+          <i class="i-celeste-home-6-line" />
+        </BreadcrumbItem>
+        <BreadcrumbArrow />
+        <BreadcrumbItem>Blogs</BreadcrumbItem>
+        <BreadcrumbArrow />
+        <BreadcrumbItem active>The Power of Minimalism in Design</BreadcrumbItem>
+      </Breadcrumb>
+    `,
+  }),
+};
+
+export const AsLink: Story = {
+  render: () => ({
+    components: { Breadcrumb, BreadcrumbItem, BreadcrumbArrow },
+    template: `
+      <Breadcrumb>
+        <BreadcrumbItem as="a" href="#">
+          <i class="i-celeste-settings-2-line" />
+          Settings
+        </BreadcrumbItem>
+        <BreadcrumbArrow />
+        <BreadcrumbItem as="a" href="#">
+          <i class="i-celeste-notification-3-line" />
+          Notifications
+        </BreadcrumbItem>
+        <BreadcrumbArrow />
+        <BreadcrumbItem as="a" href="#" active>
+          <i class="i-celeste-mail-open-line" />
+          Email Notifications
+        </BreadcrumbItem>
+      </Breadcrumb>
+    `,
+  }),
+};
+
+export const SlashSeparator: Story = {
+  render: () => ({
+    components: { Breadcrumb, BreadcrumbItem, BreadcrumbArrow },
+    template: `
+      <Breadcrumb>
+        <BreadcrumbItem as="a" href="#">
+          <i class="i-celeste-settings-2-line" />
+          Settings
+        </BreadcrumbItem>
+        <BreadcrumbArrow>/</BreadcrumbArrow>
+        <BreadcrumbItem as="a" href="#">
+          <i class="i-celeste-notification-3-line" />
+          Notifications
+        </BreadcrumbItem>
+        <BreadcrumbArrow>/</BreadcrumbArrow>
+        <BreadcrumbItem as="a" href="#" active>
+          <i class="i-celeste-mail-open-line" />
+          Email Notifications
+        </BreadcrumbItem>
+      </Breadcrumb>
+    `,
+  }),
+};

package/src/components/button/button.vue

@@ -227,6 +227,7 @@ $hover-map: (
   background-color: transparent;
   font: var(--label-sm);
   text-decoration: none;
+  white-space: nowrap;
   cursor: pointer;
 
   &:disabled {

package/src/components/button/fancy-button.vue

@@ -93,6 +93,7 @@ $intent-map: (
   background-color: transparent;
   font: var(--label-sm);
   text-decoration: none;
+  white-space: nowrap;
   cursor: pointer;
 
   &:disabled {

package/src/components/button/link-button.vue

@@ -47,6 +47,7 @@ const props = withDefaults(defineProps<LinkButtonProps>(), {
   transition-duration: var(--animation-fast);
   transition-timing-function: ease-out;
   text-decoration: none;
+  white-space: nowrap;
   cursor: pointer;
 
   &:disabled,

package/src/components/button/social-button.vue

@@ -80,6 +80,7 @@ $brand-map: (
   border-radius: var(--radius-10);
   font: var(--label-sm);
   text-decoration: none;
+  white-space: nowrap;
   cursor: pointer;
   gap: var(--spacing-8);
 

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './badge';
+export * from './breadcrumb';
 export * from './button';
 export * from './calendar';
 export * from './chart';