@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/Card/README.md

@@ -1,156 +0,0 @@
-<script lang="ts" setup>
-import {
-  AspectRatio,
-  Button, 
-  ButtonIcon,
-  ButtonContent,
-  ButtonGroup,
-  Card, 
-  CardDescription, 
-  CardFooter,
-  CardHeader, 
-  CardHelp, 
-  CardSection, 
-  CardTitle,
-  Heading,
-} from '../../src/components'; 
-import api from '../component-meta/Card.json';
-import { ArrowDownTrayIcon } from '@heroicons/vue/16/solid'; 
-</script>
-
-# Card
-
-Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays
-content in a familiar and recognizable style.
-
-<ComponentApi :api="api" />
-
-## Variants
-
-<ComponentWrapper>
-  <Card>
-    <CardHeader>
-      <CardTitle>
-        Notifications
-        <CardHelp href="/help">Learn more</CardHelp>
-      </CardTitle>
-      <CardDescription>You have 3 unread messages.</CardDescription>
-    </CardHeader>
-    <CardSection>
-      <div>Card content</div>
-    </CardSection>
-    <CardFooter>
-      <Button variant="primary">Button</Button>
-    </CardFooter>
-  </Card>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Button, 
-  Card, 
-  CardDescription, 
-  CardFooter, 
-  CardHeader, 
-  CardHelp, 
-  CardSection, 
-  CardTitle,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Card>
-    <CardHeader>
-      <CardTitle>
-        Notifications
-        <CardHelp href="/help">Learn more</CardHelp>
-      </CardTitle>
-      <CardDescription>You have 3 unread messages.</CardDescription>
-    </CardHeader>
-    <CardSection>
-      <div>Card content</div>
-    </CardSection>
-    <CardFooter>
-      <Button variant="primary">Button</Button>
-    </CardFooter>
-  </Card>
-</template>
-```
-
-### Example with media image
-
-<ComponentWrapper>
-  <div style="width: 400px;">
-    <Card>
-      <AspectRatio :ratio="16 / 9">
-        <img
-          src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg"
-          class="h-full w-full object-cover"
-        >
-      </AspectRatio>
-      <CardHeader>
-        <CardTitle>Focus-UI return form</CardTitle>
-        <CardDescription>Returnless webshop</CardDescription>
-      </CardHeader>
-      <CardSection>
-        <ButtonGroup>
-          <Button variant="secondary">Settings</Button>
-          <Button variant="ghost">Preview</Button>
-        </ButtonGroup>
-      </CardSection>
-    </Card>
-  </div>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  AspectRatio,
-  Button, 
-  ButtonGroup,
-  Card, 
-  CardDescription, 
-  CardFooter, 
-  CardHeader, 
-  CardHelp, 
-  CardSection, 
-  CardTitle,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <div style="width: 400px;">
-    <Card>
-      <AspectRatio :ratio="16 / 9">
-        <img
-          src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg"
-          class="h-full w-full object-cover"
-        >
-      </AspectRatio>
-      <CardHeader>
-        <CardTitle>Focus-UI return form</CardTitle>
-        <CardDescription>Returnless webshop</CardDescription>
-      </CardHeader>
-      <CardSection>
-        <ButtonGroup>
-          <Button variant="secondary">Settings</Button>
-          <Button variant="ghost">Preview</Button>
-        </ButtonGroup>
-      </CardSection>
-    </Card>
-  </div>
-</template>
-```
-
-## Best practices
-
-Cards should:
-
-- Group related information.
-- Display information in a way that prioritizes what the user needs to know most first.
-- Use headings that set clear expectations about the card's purpose.
-- Stick to single user flows or break more complicated flows into multiple sections.
-- Avoid too many call-to-action buttons or links and only one primary call to action per card.
-- Use calls to action on bottom of the card for next steps and use the space in the upper right corner of the card
-  for persistent, option actions (such as Edit).

package/src/components/Card/index.ts

@@ -1,7 +0,0 @@
-export { default as Card } from './Card.vue';
-export { default as CardDescription } from './CardDescription.vue';
-export { default as CardFooter } from './CardFooter.vue';
-export { default as CardHeader } from './CardHeader.vue';
-export { default as CardHelp } from './CardHelp.vue';
-export { default as CardSection } from './CardSection.vue';
-export { default as CardTitle } from './CardTitle.vue';

package/src/components/Checkbox/Checkbox.vue

@@ -1,73 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { InputLabel } from '../InputLabel';
-import { useUniqueId, useTheme } from '../../composables';
-import { TextStyle } from '../TextStyle';
-
-const props = withDefaults(defineProps<{
-  /** The help text to display with the checkbox. */
-  helpText?: string | null;
-
-  /** The ID of the checkbox. */
-  id?: string | null;
-
-  /** The label for the checkbox. */
-  label: string;
-
-  /** Whether the label is hidden. */
-  labelHidden?: boolean;
-
-  /** The value of the checkbox. */
-  value: any;
-}>(), {
-  id: null,
-  helpText: null,
-  labelHidden: false,
-});
-
-const $checkboxElement = ref<HTMLInputElement | null>(null);
-
-const model = defineModel<boolean | boolean[]>();
-
-const elementId = props.id || useUniqueId('checkbox');
-
-const elementIsChecked = computed((): boolean | undefined => {
-  if (Array.isArray(model.value)) {
-    return model.value.includes(props.value);
-  }
-
-  return model.value;
-});
-</script>
-
-<template>
-  <div
-    :aria-checked="elementIsChecked"
-    :aria-labelledby="elementId"
-    class="flex items-start space-x-2"
-    role="checkbox"
-  >
-    <input
-      :id="elementId"
-      ref="$checkboxElement"
-      v-model="model"
-      :class="useTheme('focus')"
-      :value="value"
-      class="h-4 w-4 flex-shrink-0 appearance-none rounded border border-slate-400 bg-white shadow-sm text-brand-500"
-      type="checkbox"
-    >
-    <div
-      v-if="!labelHidden"
-      class="-mt-[2px] space-y-1"
-    >
-      <InputLabel
-        :label="label"
-        :label-for="elementId"
-      />
-
-      <TextStyle variant="subdued">
-        {{ helpText }}
-      </TextStyle>
-    </div>
-  </div>
-</template>

package/src/components/Checkbox/README.md

@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-import { FormLayout, Checkbox } from '../../src/components'; 
-import api from '../component-meta/Checkbox.json'; 
-import { ref } from "vue"; 
-
-const checkboxValues = ref([]);
-</script>
-
-# Checkbox
-
-Checkboxes are most commonly used to give users a way to make a range of sections (zero, one, or multiple). They may
-also be used as a way to have users indicate they agree to specific terms and services.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <FormLayout>
-    <Checkbox
-      v-model="checkboxValues"
-      value="comments"
-      label="Comments"
-      help-text="Get notified when someones posts a comment on a posting." />
-    <Checkbox
-      v-model="checkboxValues"
-      value="candidates"
-      label="Candidates"
-      help-text="Get notified when a candidate applies for a job." />
-    <Checkbox
-      v-model="checkboxValues"
-      value="offers"
-      label="Offers"
-      help-text="Get notified when a candidate accepts or rejects an offer." />
-  </FormLayout>
-  <pre class="mt-4">{{ checkboxValues }}</pre>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { ref } from 'vue'; 
-import { FormLayout, Checkbox } from '@returnless/focus-ui';
-
-const checkboxValues = ref([]);  
-</script>
-
-<template>
-  <FormLayout>
-    <Checkbox
-      v-model="checkboxValues"
-      value="comments"
-      label="Comments"
-      help-text="Get notified when someones posts a comment on a posting." />
-    <Checkbox
-      v-model="checkboxValues"
-      value="candidates"
-      label="Candidates"
-      help-text="Get notified when a candidate applies for a job." />
-    <Checkbox
-      v-model="checkboxValues"
-      value="offers"
-      label="Offers"
-      help-text="Get notified when a candidate accepts or rejects an offer." />
-  </FormLayout>
-</template>
-```
-
-## Best practices
-
-Checkboxes should:
-
-- Work independently of each other. Selecting one checkbox shouldn't change the selection status of another
-  checkbox in the list The exception is when a checkbox is used to make a bulk selection of multiple items.
-- Be framed positively. For example, say "Publish form" instead of "Hide form".
-- Always have a label when used to activate or deactivate a setting.
-- Be listed according to logical order, whether it's alphabetical, numerical, time-based, or some other clear system.
-- Link to more information or include a subtitle as required to provide more explanation. Don't rely on tooltips to
-  explain a checkbox.
-
-## Content guidelines
-
-List that use checkboxes should:
-
-- Start with a capital letter.
-- Not use commas or semicolons at the end of each item.
-- In the rare case where the checkbox is asking users to agree to terms or services, use the first person.
-
-## Accessibility
-
-Screen readers convey the state of the checkboxes automatically.
-
-- Use the `disabled` prop to apply the HTML `disabled` attribute to the checkbox `<input>`. This prevents users from
-  being able to interact with the checkbox, and conveys its inactive state to assistive technologies.
-- Use the `id` prop to provide a unique `id` attribute value for the checkbox. If an `id` isn't provide, the component
-  generates one automatically. All checkboxes must have a unique `id` value to work correctly with assistive
-  technologies.
-- Setting `checked="ideterminate"` conveys the state of the checkbox as `aria-checked="mixed"`.
-- Setting the `ariaControls` prop conveys the ID of the element whose contents or presence are controlled by the
-  checkbox to screen reader users with the `aria-controls` attribute.
-
-### Labeling
-
-- The required `label` prop conveys the purpose of the checkbox to all users.
-- Use the `labelHidden` prop to visually hide the label but make it available to assistive technologies.
-- When you provide help text via the `helpText` prop or an inline error message via the `error` prop, the help or
-  error content is conveyed to screen reader users with the `aria-describedby` attribute.
-
-### Keyboard support
-
-- Move focus to each checkbox using the tab key (or shift + tab when tabbing backwards).
-- To interact with the checkbox when it has keyboard focus, press the space key.

package/src/components/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox.vue';

package/src/components/Collapsible/README.md

@@ -1,25 +0,0 @@
-# Collapsible
-
-The collapsible component is used to put long sections of information under a block that users can expand or collapse.
-
-## Best practices
-
-The collapsible component should:
-
-- Be used for information that is lower priority or that users don't need to see all the time.
-- Not be used to hide error messages or other critical information that requires an immediate action.
-
-## Content guidelines
-
-Collapsible containers are cards with expanded and collapsible functionality, and should follow the content guidelines
-for cards.
-
-## Accessibility
-
-Use the collapsible component in conjunction with a button. Place the collapsible content immediately after the
-button that controls it, so users with vision or attention issues can easily discover what content is being affected.
-
-- Use the required `id` prop of the collapsible component to give the content a unique `id` value.
-- Use the `ariaExpanded` prop on the button component to add an `aria-expanded` attribute, which conveys the
-  expanded or collapsed state to screen reader users.
-- Use the `ariaControls` prop on the button component, and set its value to the `id` value of the collapsible component.

package/src/components/DataTable/README.md

@@ -1,56 +0,0 @@
-# Data table
-
-Data tables are used to organize and display all information from a data set. While a data visualization represents part
-of a data set, a data table lets users view details from the entire set. This helps users compare and analyze the data.
-
-## Best practices
-
-Data tables should:
-
-- Show values across multiple categories and measures.
-- Allow for filtering and ordering when comparison is not a priority.
-- Help users visualize and scan many values from an entire data set.
-- Help users find other values in the data hierarchy through use of links.
-- Minimize clutter by only including values that supports the data's purpose.
-- Include a summary row to surface the column totals.
-- Not include calculations within the summary row.
-- Wrap instead of truncate content. This is because if row titles start with the same word, they'll all appear the
-  same when truncated.
-- Not be used for an actionable list of items that link to detail pages.
-
-### Alignment
-
-Column content types are build into the component props so the following alignment rules are followed:
-
-- Numerical: right-aligned
-- Textual data: left-aligned
-- Align headers with their related data.
-- Don't center align.
-
-## Content guidelines
-
-Headers should:
-
-- Be informative and descriptive.
-- Concise and scannable.
-- Include units of measurement symbols sy they aren't repeated throughout the columns.
-- Use sentence case (first word capitalized, the rest lowercase).
-
-Columns should:
-
-- Be concise and scannable.
-- Not include units of measurement symbols (put those in the headers).
-- Use sentence case (first word capitalized, the rest lowercase).
-
-### Decimals
-
-Keep decimals consistent. For example, don't use 3 decimals in one row and 2 in others.
-
-## Accessibility
-
-Native HTML tables provide a large amount of structural information to screen reader users. Users who rely on screen
-readers can navigate tables and identify relationships between data cells (`<td>`) and header cells (`<th>`) using
-keys specific to their screen reader.
-
-Sortable tables use the `aria-sort` attribute to convey which columns are sortable (and in what direction). They
-also use `aria-label` on sorting buttons to convey what activating the button will do.

package/src/components/DatePicker/DatePicker.vue

@@ -1,120 +0,0 @@
-<script lang="ts" setup>
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
-import dayjs, { Dayjs } from 'dayjs';
-import { TextStyle } from '../TextStyle';
-import { computed, ref } from 'vue';
-
-type Day = {
-  dimmed: boolean;
-  value: Dayjs;
-};
-
-withDefaults(defineProps<{
-  locale?: string;
-}>(), {
-  locale: 'en',
-});
-
-function getCalendarMonthDays(input: Dayjs): Day[] {
-  const startOfMonth = input.startOf('month');
-  const days = [];
-  const rows = 42;
-
-  const amountOfPreviousDays = startOfMonth.day() === 0
-    ? 6
-    : startOfMonth.day() - 1;
-
-  const startOfCalendar = startOfMonth.clone().subtract(amountOfPreviousDays, 'day');
-
-  for (let i = 0; i < rows; i++) {
-    const currentDay = startOfCalendar.clone().add(i, 'day');
-
-    days.push({
-      dimmed: currentDay.month() !== startOfMonth.month(),
-      value: currentDay,
-    } as Day);
-  }
-
-  return days;
-}
-
-const selectedDate = defineModel<string>({
-  required: true,
-});
-
-const currentDate = ref(dayjs(selectedDate.value));
-
-const days = computed(() => {
-  return getCalendarMonthDays(dayjs(currentDate.value));
-});
-
-function selectDate(date: Day): void {
-  selectedDate.value = date.value.format('YYYY-MM-DD');
-}
-
-function selectPreviousMonth(): void {
-  currentDate.value = dayjs(currentDate.value).subtract(1, 'month');
-}
-function selectNextMonth(): void {
-  currentDate.value = dayjs(currentDate.value).add(1, 'month');
-}
-
-function isSelected(date: Day): boolean {
-  return dayjs(selectedDate.value).format('YYYY-MM-DD') === date.value.format('YYYY-MM-DD');
-}
-
-function isToday(date: Day): boolean {
-  return dayjs().format('YYYY-MM-DD') === date.value.format('YYYY-MM-DD');
-}
-</script>
-
-<template>
-  <div class="w-full space-y-4">
-    <div class="flex items-center justify-between">
-      <button
-        class="cursor-pointer"
-        @click="selectPreviousMonth"
-      >
-        <ChevronLeftIcon class="h-4 w-4" />
-      </button>
-
-      <TextStyle variant="strong">
-        {{ currentDate.format('MMM YYYY') }}
-      </TextStyle>
-
-      <button
-        class="cursor-pointer"
-        @click="selectNextMonth"
-      >
-        <ChevronRightIcon class="h-4 w-4" />
-      </button>
-    </div>
-
-    <div class="grid grid-cols-7 [&>*]:text-center [&>*]:font-medium [&>*]:text-slate-500">
-      <div>Mo</div>
-      <div>Tu</div>
-      <div>We</div>
-      <div>Tu</div>
-      <div>Fr</div>
-      <div>Sat</div>
-      <div>Su</div>
-    </div>
-
-    <div class="grid grid-cols-7 gap-0.5">
-      <div
-        v-for="day in days"
-        :key="day.value.toString()"
-        :class="{
-          'hover:bg-slate-200': !isSelected(day),
-          'text-slate-400': day.dimmed && !isSelected(day),
-          'border-transparant bg-brand-500 text-white': isSelected(day),
-          'ring-2 border border-brand-500': isToday(day),
-        }"
-        class="flex h-8 cursor-pointer items-center justify-center rounded"
-        @click="selectDate(day)"
-      >
-        {{ day.value.date() }}
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/DatePicker/DatePickerCard.vue

@@ -1,9 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="w-[300px]">
-    <div class="flex overflow-hidden rounded border bg-white px-4 py-3 text-sm shadow-sm space-x-4">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/DatePicker/README.md

@@ -1,59 +0,0 @@
-<script lang="ts" setup>
-import { DatePicker, DatePickerCard } from '../../src/components'; 
-import api from '../component-meta/DatePicker.json'; 
-import { ref } from "vue"; 
-
-const selectedDate = ref('2024-01-01');
-</script>
-
-# Date picker
-
-Date pickers let users choose dates from a visual calendar that's consistently applied wherever dates need to be
-selected across the interface.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <DatePickerCard>
-    <DatePicker v-model="selectedDate" />
-  </DatePickerCard>
-  <pre class="mt-4">selected-date: {{ selectedDate }}</pre>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { DatePicker, DatePickerCard } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <DatePickerCard>
-    <DatePicker />
-  </DatePickerCard>
-</template>
-```
-
-## Best practices
-
-Date pickers should:
-
-- Use smart defaults and highlight common selections.
-- Close after a single date is selected unless a range with a start and end date is required.
-- Set the start date on first click or tap and the end date on second click or tap if a range is required.
-- Not be used to enter date that is many years in the future or past.
-
-## Accessibility
-
-Some users might find interacting with date pickers to be challenging. When you use the date picker component,
-always give users the option to enter the date using a text field component as well.
-
-If you use the date picker within a popover component, then use a button to trigger the popover instead of
-displaying the popover when the text input gets focus. This gives users more control over their experience.
-
-### Keyboard support
-
-- Press the tab key or move forward and shift + tab to move backwards through the previous button, next button, and
-  the calendar.
-- When focus is in the calendar, move keyboard focus between the dates using the arrow keys.
-- To select a date that has focus, press the enter/return key.

package/src/components/DatePicker/index.ts

@@ -1,2 +0,0 @@
-export { default as DatePicker } from './DatePicker.vue';
-export { default as DatePickerCard } from './DatePickerCard.vue';

package/src/components/DescriptionList/DescriptionList.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { provide } from 'vue';
-
-const props = withDefaults(defineProps<{
-  /** The alignment of the description list. */
-  align?: 'horizontal' | 'vertical';
-}>(), {
-  align: 'horizontal',
-});
-
-provide('descriptionListAlignment', props.align);
-</script>
-
-<template>
-  <dl>
-    <slot />
-  </dl>
-</template>

package/src/components/DescriptionList/DescriptionListDescription.vue

@@ -1,8 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <dd class="col-span-3 text-slate-500">
-    <slot />
-  </dd>
-</template>

package/src/components/DescriptionList/DescriptionListItem.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-
-const descriptionListAlignment = inject<'horizontal' | 'vertical'>('descriptionListAlignment');
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'grid-cols-4 gap-4 py-3': descriptionListAlignment === 'horizontal' },
-    { 'py-2': descriptionListAlignment === 'vertical' },
-  ];
-});
-</script>
-
-<template>
-  <div
-    class="grid"
-    :class="classList"
-  >
-    <slot />
-  </div>
-</template>