@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiCheckbox/UiCheckbox.stories.ts

@@ -1,231 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import UiCheckbox from './UiCheckbox.vue';
-import { ref } from 'vue';
-
-const meta: Meta<typeof UiCheckbox> = {
-  title: 'Primitives/UiCheckbox',
-  component: UiCheckbox,
-  tags: ['autodocs'],
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-      description: 'Set component as disabled',
-    },
-    required: {
-      control: 'boolean',
-      description: 'Set component as required',
-    },
-  },
-  args: {
-    name: 'checkbox',
-    disabled: false,
-    required: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiCheckbox>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiCheckbox } from '@aleph-alpha/ui-library'
-
-const checked = ref(false)
-</script>
-
-<template>
-  <div class="flex items-center gap-3">
-    <UiCheckbox id="terms" name="terms" v-model="checked" />
-    <label for="terms" class="text-sm font-medium">
-      Accept terms and conditions
-    </label>
-  </div>
-</template>`;
-
-/**
- * Simple checkbox with label.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      const checked = ref(false);
-      return { args, checked };
-    },
-    template: `<div class="flex items-center gap-3">
-      <UiCheckbox id="terms" name="terms" v-model="checked" :disabled="args.disabled" :required="args.required" />
-      <label for="terms" class="text-sm font-medium">
-        Accept terms and conditions
-      </label>
-    </div>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const withDescriptionTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiCheckbox } from '@aleph-alpha/ui-library'
-
-const checked = ref(true)
-</script>
-
-<template>
-  <div class="flex items-start gap-3">
-    <UiCheckbox id="terms-2" name="terms-2" v-model="checked" />
-    <div class="grid gap-2">
-      <label for="terms-2" class="text-sm font-medium">
-        Accept terms and conditions
-      </label>
-      <p class="text-muted-foreground text-sm">
-        By clicking this checkbox, you agree to the terms and conditions.
-      </p>
-    </div>
-  </div>
-</template>`;
-
-/**
- * Checkbox with label and description text.
- */
-export const WithDescription: Story = {
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      const checked = ref(true);
-      return { args, checked };
-    },
-    template: `<div class="flex items-start gap-3">
-      <UiCheckbox id="terms-2" name="terms-2" v-model="checked" :disabled="args.disabled" :required="args.required" />
-      <div class="grid gap-2">
-        <label for="terms-2" class="text-sm font-medium">
-          Accept terms and conditions
-        </label>
-        <p class="text-muted-foreground text-sm">
-          By clicking this checkbox, you agree to the terms and conditions.
-        </p>
-      </div>
-    </div>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: withDescriptionTemplateSource,
-      },
-    },
-  },
-};
-
-const disabledTemplateSource = `<script setup lang="ts">
-import { UiCheckbox } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <div class="flex items-start gap-3">
-    <UiCheckbox id="toggle" name="toggle" disabled />
-    <label for="toggle" class="text-sm font-medium">
-      Enable notifications
-    </label>
-  </div>
-</template>`;
-
-/**
- * Disabled checkbox.
- */
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      return { args };
-    },
-    template: `<div class="flex items-start gap-3">
-      <UiCheckbox id="toggle" name="toggle" :disabled="args.disabled" />
-      <label for="toggle" class="text-sm font-medium">
-        Enable notifications
-      </label>
-    </div>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: disabledTemplateSource,
-      },
-    },
-  },
-};
-
-const cardTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiCheckbox } from '@aleph-alpha/ui-library'
-
-const enabled = ref(true)
-</script>
-
-<template>
-  <label
-    class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
-  >
-    <UiCheckbox
-      id="notifications"
-      name="notifications"
-      v-model="enabled"
-      class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-    />
-    <div class="grid gap-1.5 font-normal">
-      <p class="text-sm font-medium leading-none">
-        Enable notifications
-      </p>
-      <p class="text-muted-foreground text-sm">
-        You can enable or disable notifications at any time.
-      </p>
-    </div>
-  </label>
-</template>`;
-
-/**
- * Styled card checkbox with custom colors.
- * The label wraps the checkbox for better click target.
- */
-export const Card: Story = {
-  render: (args) => ({
-    components: { UiCheckbox },
-    setup() {
-      const enabled = ref(true);
-      return { args, enabled };
-    },
-    template: `<label
-      class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
-    >
-      <UiCheckbox
-        id="notifications"
-        name="notifications"
-        v-model="enabled"
-        :disabled="args.disabled"
-        class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-      />
-      <div class="grid gap-1.5 font-normal">
-        <p class="text-sm font-medium leading-none">
-          Enable notifications
-        </p>
-        <p class="text-muted-foreground text-sm">
-          You can enable or disable notifications at any time.
-        </p>
-      </div>
-    </label>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: cardTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiCheckbox/UiCheckbox.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-  import { Checkbox as ShadcnCheckbox } from '@/primitives/shadcn/checkbox';
-  import type { UiCheckboxModelValue, UiCheckboxProps } from './types';
-
-  defineOptions({
-    name: 'UiCheckbox',
-  });
-
-  const props = withDefaults(defineProps<UiCheckboxProps>(), {
-    disabled: false,
-    required: false,
-  });
-
-  const model = defineModel<UiCheckboxModelValue>();
-</script>
-
-<template>
-  <ShadcnCheckbox v-model="model" v-bind="props" />
-</template>

package/src/primitives/UiCheckbox/types.ts

@@ -1,30 +0,0 @@
-/**
- * Type for the accepted values for the component.
- */
-export type UiCheckboxModelValue = boolean | 'indeterminate';
-
-/**
- * A checkbox input for boolean or indeterminate selections. Use for
- * toggling options, accepting terms, or multi-select lists.
- *
- * @category Form Inputs
- * @useCases toggle option, accept terms, multi-select, settings, preferences
- * @keywords checkbox, check, toggle, boolean, tick, select, form
- * @related UiSwitch, UiRadioGroup
- */
-export type UiCheckboxProps = {
-  /**
-   * Prop to name the element
-   */
-  name: string;
-  /**
-   * Prop to define the Checkbox as disabled, therefore blocking all user interaction with it.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Define the element as required on a Form.
-   * @default false
-   */
-  required?: boolean;
-};