@returnless/focus-ui 0.0.2 → 0.0.3

package/src/components/Card/index.ts

@@ -1,6 +1,7 @@
 export { default as Card } from './Card.vue';
-export { default as CardSection } from './CardSection.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,4 +1,5 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
 import { InputLabel } from '../InputLabel';
 import { useUniqueId, useTheme } from '../../composables';
 import { TextStyle } from '../TextStyle';
@@ -13,29 +14,52 @@ const props = withDefaults(defineProps<{
   /** 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 model = defineModel<boolean>();
+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 class="flex items-start space-x-2">
+  <div
+    :aria-checked="elementIsChecked"
+    :aria-labelledby="elementId"
+    class="flex items-start space-x-2"
+    role="checkbox"
+  >
     <input
       :id="elementId"
+      ref="$checkboxElement"
       v-model="model"
-      :value="value"
-      class="appearance-none border-slate-400 shadow-sm border bg-white h-4 w-4 rounded text-brand-500 focus:ring-indigo-600"
       :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 class="-mt-[2px] space-y-1">
+    <div
+      v-if="!labelHidden"
+      class="-mt-[2px] space-y-1"
+    >
       <InputLabel
         :label="label"
         :label-for="elementId"

package/src/components/Checkbox/README.md

@@ -3,7 +3,7 @@ import { FormLayout, Checkbox } from '../../src/components';
 import api from '../component-meta/Checkbox.json'; 
 import { ref } from "vue"; 
 
-const test = ref([]);
+const checkboxValues = ref([]);
 </script>
 
 # Checkbox
@@ -18,24 +18,53 @@ also be used as a way to have users indicate they agree to specific terms and se
 <ComponentWrapper>
   <FormLayout>
     <Checkbox
-      v-model="test"
+      v-model="checkboxValues"
       value="comments"
       label="Comments"
       help-text="Get notified when someones posts a comment on a posting." />
     <Checkbox
-      v-model="test"
+      v-model="checkboxValues"
       value="candidates"
       label="Candidates"
       help-text="Get notified when a candidate applies for a job." />
     <Checkbox
-      v-model="test"
+      v-model="checkboxValues"
       value="offers"
       label="Offers"
       help-text="Get notified when a candidate accepts or rejects an offer." />
   </FormLayout>
-  <pre class="mt-4">{{ test }}</pre>
+  <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:

package/src/components/DatePicker/DatePicker.vue

@@ -9,14 +9,12 @@ type Day = {
   value: Dayjs;
 };
 
-const props = withDefaults(defineProps<{
-  rangePicker?: boolean;
+withDefaults(defineProps<{
+  locale?: string;
 }>(), {
-  rangePicker: false,
+  locale: 'en',
 });
 
-const activeRangePick = ref<0 | 1>(0);
-
 function getCalendarMonthDays(input: Dayjs): Day[] {
   const startOfMonth = input.startOf('month');
   const days = [];
@@ -40,32 +38,18 @@ function getCalendarMonthDays(input: Dayjs): Day[] {
   return days;
 }
 
-const selectedDate = defineModel<string | string[]>({
+const selectedDate = defineModel<string>({
   required: true,
 });
 
-const currentDate = ref(dayjs(new Date()));
+const currentDate = ref(dayjs(selectedDate.value));
 
 const days = computed(() => {
   return getCalendarMonthDays(dayjs(currentDate.value));
 });
 
-function isRangePicker(): boolean {
-  return props.rangePicker;
-}
-
 function selectDate(date: Day): void {
-  if (isRangePicker()) {
-    const temporarySelectedDate = selectedDate.value as string[];
-
-    temporarySelectedDate[activeRangePick.value] = date.value.format('YYYY-MM-DD');
-
-    activeRangePick.value = activeRangePick.value === 0 ? 1 : 0;
-
-    selectedDate.value = temporarySelectedDate;
-  } else {
-    selectedDate.value = date.value.format('YYYY-MM-DD');
-  }
+  selectedDate.value = date.value.format('YYYY-MM-DD');
 }
 
 function selectPreviousMonth(): void {
@@ -76,11 +60,7 @@ function selectNextMonth(): void {
 }
 
 function isSelected(date: Day): boolean {
-  return isRangePicker()
-    ? selectedDate.value.includes(date.value.format('YYYY-MM-DD'))
-    : selectedDate.value === date.value.format('YYYY-MM-DD');
-
-  // return dayjs(selectedDate.value).format('YYYY-MM-DD') === date.value.format('YYYY-MM-DD');
+  return dayjs(selectedDate.value).format('YYYY-MM-DD') === date.value.format('YYYY-MM-DD');
 }
 
 function isToday(date: Day): boolean {

package/src/components/DatePicker/README.md

@@ -24,7 +24,7 @@ selected across the interface.
 
 ```js-vue
 <script lang="ts" setup>
-import { DatePicker, DatePickerCard } from 'focus-ui';
+import { DatePicker, DatePickerCard } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/DescriptionList/DescriptionList.vue

@@ -3,7 +3,7 @@ import { provide } from 'vue';
 
 const props = withDefaults(defineProps<{
   /** The alignment of the description list. */
-  align: 'horizontal' | 'vertical';
+  align?: 'horizontal' | 'vertical';
 }>(), {
   align: 'horizontal',
 });

package/src/components/DescriptionList/DescriptionListItem.vue

@@ -3,7 +3,7 @@ import { computed, inject } from 'vue';
 
 const descriptionListAlignment = inject<'horizontal' | 'vertical'>('descriptionListAlignment');
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean>[] => {
   return [
     { 'grid-cols-4 gap-4 py-3': descriptionListAlignment === 'horizontal' },
     { 'py-2': descriptionListAlignment === 'vertical' },

package/src/components/DescriptionList/README.md

@@ -45,7 +45,7 @@ import {
   DescriptionListDescription,
   DescriptionListItem,
   DescriptionListTerm,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -100,7 +100,7 @@ import {
   DescriptionListDescription,
   DescriptionListItem,
   DescriptionListTerm,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Dialog/README.md

@@ -0,0 +1,2 @@
+# Dialog
+

package/src/components/DropZone/DropZone.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { useFileDialog, useDropZone } from '@vueuse/core';
+import { Button } from '../Button';
+import { computed, ref } from 'vue';
+import { FileAccepts } from '../types';
+
+const props = withDefaults(defineProps<{
+  /** The file types to accept. */
+  accepts: FileAccepts;
+
+  label: string;
+
+  /** The label for the action button. */
+  actionLabel: string;
+
+  /** Whether to accept multiple files. */
+  multiple?: boolean;
+}>(), {
+  accepts: '*',
+  multiple: false,
+});
+
+const model = defineModel<File[]>({
+  default: [],
+});
+
+const dropZoneRef = ref<HTMLDivElement>();
+
+const acceptTypes = computed(() => {
+  switch (props.accepts) {
+    case 'image':
+      return 'image/*';
+    case 'pdf':
+      return 'application/pdf';
+    default:
+      return '*';
+  }
+});
+
+const { open, onChange } = useFileDialog({
+  accept: acceptTypes.value,
+  multiple: props.multiple,
+});
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop: onFileUpload,
+  // specify the types of data to be received.
+  dataTypes: (types: readonly string[]) => {
+    if (props.accepts === '*') {
+      return true;
+    }
+
+    if (props.accepts === 'image') {
+      return types.some((type) => type.startsWith('image'));
+    }
+
+    return types.includes(props.accepts);
+  },
+});
+
+onChange((files: FileList | null): void => {
+  const listOfFiles: File[] = Array.from(files || []);
+
+  onFileUpload(listOfFiles);
+});
+
+function onFileUpload(files: File[] | null): void {
+  if (files === null) {
+    return;
+  }
+
+  model.value = props.multiple
+    ? [...model.value, ...files]
+    : [files[0]];
+}
+
+const classList = computed((): Record<string, boolean>[] => {
+  return [
+    { 'bg-blue-500': isOverDropZone.value },
+  ];
+});
+</script>
+
+<template>
+  <button
+    ref="dropZoneRef"
+    :class="classList"
+    class="block w-full cursor-pointer rounded border border-dashed bg-white hover:border-solid hover:bg-slate-50"
+    @click="() => open()"
+  >
+    <span class="flex flex-col justify-center px-4 py-12 space-y-4">
+      <span>
+        <Button variant="secondary">
+          {{ actionLabel }}
+        </Button>
+      </span>
+      <span
+        v-if="label"
+        class="block"
+      >
+        {{ label }}
+      </span>
+    </span>
+  </button>
+</template>

package/src/components/DropZone/README.md

@@ -0,0 +1,48 @@
+# Drop zone
+
+The drop zone component lets users upload files by dragging and dropping the files into an area on a page, or activating
+a button.
+
+## Usage
+
+## Best practices
+
+Drop zones should:
+
+- Inform users when the file(s) can't be uploaded.
+  - When possible, use validation errors on drag to detect and explain things like file size limits or file types
+    accepted.
+  - Use the banner component with a critical status to communicate errors that happen on the server.
+- Provide feedback once the file(s) have been dropped and uploading begins.
+- Provide a file upload button to allow users to select files for upload in traditional way.
+
+### Validation errors
+
+The drop zone component validates file type by default. File types you wish to accept can be defined by editing the
+`accept` property. This component also accepts custom validations using the `customValidator` property. When
+validation fails, the components sets itself to error mode.
+
+## Content guidelines
+
+### Client-side validation error messages
+
+Validation error messages should be:
+
+- Explicit: help users understand why their file can't be uploaded and what they should change to successfully upload
+  their file
+- In sentence case: capitalize only the first word in a message
+- Concise: use simple, clear language that can be read at a glance: For example:
+  - `File size must be less than 20MB`
+  - `File type must be .pdf, .doc, or .docx`
+
+## Accessibility
+
+The drop zone component builds on the native HTML `<input type="upload" />` element. It includes a visual `<button>` 
+as well as a drag and drop area that can receive keyboard focus.
+
+## Keyboard support
+
+To upload a file with the keyboard, users can interact with the drag-and-drop region.
+
+- To give the input keyboard focus, use the tab key (or shift + tab when tabbing backwards)
+- To activate the input, use the enter/return or space keys

package/src/components/DropZone/index.ts

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

package/src/components/EmptyState/README.md

@@ -42,7 +42,7 @@ import {
   EmptyStateContent,
   EmptyStateDescription,
   EmptyStateTitle,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Feed/FeedItem.vue

@@ -2,7 +2,10 @@
 </script>
 
 <template>
-  <li class="relative flex gap-x-2 [&:not(:last-child)]:pb-4">
+  <li
+    class="relative flex gap-x-2 [&:not(:last-child)]:pb-4"
+    role="listitem"
+  >
     <div class="absolute top-0 -bottom-0 left-0 flex w-6 justify-center">
       <div class="w-px bg-slate-200" />
     </div>

package/src/components/Feed/FeedItemBlock.vue

@@ -2,7 +2,10 @@
 </script>
 
 <template>
-  <div class="flex-auto rounded border bg-white/50 px-3 py-2 text-xs leading-5 shadow-sm">
+  <div
+    class="flex-auto rounded border bg-white/50 px-3 py-2 text-xs leading-5 shadow-sm"
+    role="note"
+  >
     <slot />
   </div>
 </template>

package/src/components/Feed/README.md

@@ -66,7 +66,7 @@ import {
   FeedItemDateIndicator,
   FeedItemIcon,
   TextStyle,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/FileUploadButton/FileUploadButton.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useFileDialog } from '@vueuse/core';
+import { Button, ButtonProps } from '../Button';
+import { FileAccepts } from '../types';
+
+const props = withDefaults(defineProps<ButtonProps & {
+  /** The file types to accept. */
+  accepts: FileAccepts;
+
+  /** Whether to accept multiple files. */
+  multiple?: boolean;
+}>(), {
+  accepts: '*',
+  multiple: false,
+});
+
+const model = defineModel<File[]>({
+  default: [],
+});
+
+const acceptTypes = computed(() => {
+  switch (props.accepts) {
+    case 'image':
+      return 'image/*';
+    case 'pdf':
+      return 'application/pdf';
+    default:
+      return '*';
+  }
+});
+
+const { open, onChange } = useFileDialog({
+  accept: acceptTypes.value,
+  multiple: props.multiple,
+});
+
+onChange((files: FileList | null): void => {
+  const listOfFiles: File[] = Array.from(files || []);
+
+  onFileUpload(listOfFiles);
+});
+
+function onFileUpload(files: File[] | null): void {
+  if (files === null) {
+    return;
+  }
+
+  model.value = props.multiple
+    ? [...model.value, ...files]
+    : [files[0]];
+}
+</script>
+
+<template>
+  <Button
+    v-bind="$props"
+    @click="open"
+  >
+    <slot />
+  </Button>
+</template>

package/src/components/FileUploadButton/index.ts

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

package/src/components/Form/Form.vue

@@ -2,13 +2,17 @@
 import { useUniqueId } from '../../composables';
 
 const props = withDefaults(defineProps<{
+  /** The aria-label attribute to be applied to the link */
+  accessibilityLabel?: string;
+
   /** The encoding type for the form. */
-  enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null;
+  enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
 
   /** The ID of the form. */
   id?: string | null;
 }>(), {
-  enctype: null,
+  accessibilityLabel: undefined,
+  enctype: undefined,
   id: null,
 });
 
@@ -22,6 +26,7 @@ const elementId = props.id || useUniqueId('form');
 <template>
   <form
     :id="elementId"
+    :aria-label="accessibilityLabel"
     :enctype="enctype"
     @submit.prevent="$emit('submit')"
   >

package/src/components/Form/README.md

@@ -21,7 +21,7 @@ A wrapper component that handles the submission of forms.
 
 ```js-vue
 <script lang="ts" setup>
-import { Form, FormLayout, TextField, Button } from 'focus-ui';
+import { Form, FormLayout, TextField, Button } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/FormLayout/FormLayout.vue

@@ -1,7 +1,25 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  columns: number;
+}>(), {
+  columns: 1,
+});
+
+const classList = computed((): Record<string, boolean>[] => {
+  return [
+    { 'md:grid-cols-1': props.columns === 1 },
+    { 'md:grid-cols-2': props.columns === 2 },
+  ];
+});
+</script>
 
 <template>
-  <div class="space-y-4">
+  <div
+    class="grid grid-cols-1 gap-4"
+    :class="classList"
+  >
     <slot />
   </div>
 </template>

package/src/components/FormLayout/README.md

@@ -19,7 +19,7 @@ support horizontal groups of fields.
 
 ```js-vue
 <script lang="ts" setup>
-import { FormLayout, TextField } from 'focus-ui';
+import { FormLayout, TextField } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -30,6 +30,44 @@ import { FormLayout, TextField } from 'focus-ui';
 </template>
 ```
 
+### Horizontal form layout
+
+<ComponentWrapper>
+  <FormLayout :columns="2">
+    <TextField label="Company name" />
+    <TextField label="Invoice email" />
+    <TextField label="Street + house number" />
+    <FormLayout :columns="2">
+      <TextField label="Postcode" />
+      <TextField label="City" />
+    </FormLayout>
+    <TextField label="Country" />
+    <TextField label="VAT number" />
+    <TextField label="P.O. number / reference" />
+  </FormLayout>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { FormLayout, TextField } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <FormLayout :columns="2">
+    <TextField label="Company name" />
+    <TextField label="Invoice email" />
+    <TextField label="Street + house number" />
+    <FormLayout :columns="2">
+      <TextField label="Postcode" />
+      <TextField label="City" />
+    </FormLayout>
+    <TextField label="Country" />
+    <TextField label="VAT number" />
+    <TextField label="P.O. number / reference" />
+  </FormLayout>
+</template>
+```
+
 ## Best practices
 
 Forms should: