@youcan/celeste 0.6.28 → 0.6.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.28",
+  "version": "0.6.29",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -32,8 +32,8 @@
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
-    "@youcan/celeste-icons": "0.6.28",
-    "@youcan/celeste-tokens": "0.6.28"
+    "@youcan/celeste-icons": "0.6.29",
+    "@youcan/celeste-tokens": "0.6.29"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/checkbox/checkbox-label.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { Label, type LabelProps, Primitive } from 'radix-vue';
+
+const props = defineProps<LabelProps & {
+  sublabel?: string;
+  information?: string;
+  required?: boolean;
+  description?: string;
+  disabled?: boolean;
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = useDelegatedProps(props, 'class');
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :aria-required="required"
+    :aria-disabcled="disabled"
+    :class="clsx('celeste-checkbox-label', props.class)"
+  >
+
+    <Primitive as-child class="celeste-checkbox-label-checkbox">
+      <slot />
+    </Primitive>
+
+    <div role="presentation">
+      <div role="presentation" class="celeste-checkbox-label-row">
+        <div>
+          <Primitive as="span" class="celeste-checkbox-label-label">
+            <slot name="label" />
+          </Primitive>
+
+          <Primitive
+            v-if="$slots.sublabel"
+            as="span"
+            class="celeste-checkbox-label-sublabel"
+          >
+            <slot name="sublabel" />
+          </Primitive>
+        </div>
+
+        <Primitive
+          v-if="$slots.badge"
+          as-child
+          class="celeste-checkbox-label-badge"
+        >
+          <slot name="badge" />
+        </Primitive>
+      </div>
+
+      <div role="presentation" class="celeste-checkbox-label-content">
+        <Primitive
+          v-if="$slots.description"
+          as="span"
+          class="celeste-checkbox-label-description"
+        >
+          <slot name="description" />
+        </Primitive>
+
+        <Primitive
+          v-if="$slots.linkButton"
+          as-child
+          class="celeste-checkbox-label-link-button"
+        >
+          <slot name="linkButton" />
+        </Primitive>
+      </div>
+    </div>
+  </Label>
+</template>
+
+<style scoped lang="scss">
+.celeste-checkbox-label {
+  display: flex;
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  gap: var(--spacing-8);
+}
+
+:deep(.celeste-checkbox-label-checkbox) {
+  margin-top: var(--spacing-2);
+}
+
+.celeste-checkbox-label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.celeste-checkbox-label-sublabel {
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-checkbox-label-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--spacing-4);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-xs);
+}
+
+.celeste-checkbox-label-link-button {
+  margin-top: var(--spacing-10);
+}
+</style>

package/src/components/checkbox/index.ts

@@ -1,2 +1,5 @@
+export * from './checkbox-label.vue';
+export { default as CheckboxLabel } from './checkbox-label.vue';
+
 export * from './checkbox.vue';
 export { default as Checkbox } from './checkbox.vue';

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '@/components/badge/badge.vue';
+import LinkButton from '@/components/button/link-button.vue';
+import CheckboxLabel from '../checkbox-label.vue';
 import Checkbox from '../checkbox.vue';
 
 const meta: Meta<typeof Checkbox> = {
@@ -67,34 +70,48 @@ export const Disabled: Story = {
   }),
 };
 
-export const WithLabel: Story = {
-  args: {
-  },
+export const WithCheckboxLabel: Story = {
+  args: {},
 
   render: args => ({
-    components: { Checkbox },
+    components: { Checkbox, CheckboxLabel, Badge, LinkButton },
     setup() {
       return { args };
     },
     template: `
       <div style="display: flex; justify-content: center;">
-        <div style="display: grid; gap: 1em;">
-          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
+        <div style="max-width: 400px;">
+          <CheckboxLabel>
             <Checkbox v-bind="args" />
-            SMS Verification
-          </label>
-          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-            <Checkbox v-bind="args" />
-            Authenticator App
-          </label>
-          <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-            <Checkbox v-bind="args" disabled />
-            Disabled
-          </label>
-         <label style="display: flex; align-items: center; gap: 0.5em; font: var(--paragraph-sm); cursor: pointer; user-select: none;">
-            <Checkbox v-bind="args" checked disabled />
-            Disabled but default checked
-          </label>
+
+            <template #label>
+              Label
+            </template>
+
+            <template #badge>
+              <Badge 
+                label="NEW" 
+                state="information" 
+                variant="light" 
+                size="sm" 
+              />
+            </template>
+            <template #sublabel>
+                (Sublabel)
+            </template>
+            <template #description>
+                Insert the checkbox description here.
+            </template>
+            <template #linkButton>
+              <LinkButton 
+                href="#" 
+                intent="primary" 
+                size="sm"
+              >
+                Learn More
+              </LinkButton>
+            </template>
+          </CheckboxLabel>
         </div>
       </div>
     `,