@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/DescriptionList/DescriptionListTerm.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-</script>
-
-<template>
-  <dt>
-    <TextStyle variant="strong">
-      <slot />
-    </TextStyle>
-  </dt>
-</template>

package/src/components/DescriptionList/README.md

@@ -1,159 +0,0 @@
-<script lang="ts" setup>
-import {
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListItem,
-  DescriptionListTerm,
-} from '../../src/components'; 
-import api from '../component-meta/DescriptionList.json';
-</script>
-
-# Description list
-
-Description lists are a way to organize and explain related information. They're particularly useful when you need to
-list and define terms.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <DescriptionList>
-    <DescriptionListItem>
-      <DescriptionListTerm>Logistics</DescriptionListTerm>
-      <DescriptionListDescription>
-        The management of products or other resources as they travel between a point of origin and a destination.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
-      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Discount code</DescriptionListTerm>
-      <DescriptionListDescription>
-        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-  </DescriptionList>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListItem,
-  DescriptionListTerm,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <DescriptionList>
-    <DescriptionListItem>
-      <DescriptionListTerm>Logistics</DescriptionListTerm>
-      <DescriptionListDescription>
-        The management of products or other resources as they travel between a point of origin and a destination.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
-      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Discount code</DescriptionListTerm>
-      <DescriptionListDescription>
-        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-  </DescriptionList>
-</template>
-```
-
-### Description list with vertical alignment
-
-<ComponentWrapper>
-  <DescriptionList align="vertical">
-    <DescriptionListItem>
-      <DescriptionListTerm>Logistics</DescriptionListTerm>
-      <DescriptionListDescription>
-        The management of products or other resources as they travel between a point of origin and a destination.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
-      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Discount code</DescriptionListTerm>
-      <DescriptionListDescription>
-        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-  </DescriptionList>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  DescriptionList,
-  DescriptionListDescription,
-  DescriptionListItem,
-  DescriptionListTerm,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <DescriptionList align="vertical">
-    <DescriptionListItem>
-      <DescriptionListTerm>Logistics</DescriptionListTerm>
-      <DescriptionListDescription>
-        The management of products or other resources as they travel between a point of origin and a destination.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Sole proprietorship</DescriptionListTerm>
-      <DescriptionListDescription>A business structure where a single individual both owns and runs the company.</DescriptionListDescription>
-    </DescriptionListItem>
-    <DescriptionListItem>
-      <DescriptionListTerm>Discount code</DescriptionListTerm>
-      <DescriptionListDescription>
-        A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.
-      </DescriptionListDescription>
-    </DescriptionListItem>
-  </DescriptionList>
-</template>
-```
-
-## Best practices
-
-Description lists should:
-
-- Contain terms and associated explanations, or descriptions for each term.
-- Provide information that isn't action-oriented.
-- Not be an excuse for using unnecessarily complicated or jargon-filled language. Generally, if users need a description
-  list to understand the language in your application, you should look for opportunities to simplify the language.
-- Not be used to upsell users on a feature or service.
-
-## Content guidelines
-
-### Terms
-
-Terms should be:
-
-- Written in sentence case (the first word capitalized, the rest lowercase).
-
-### Term description
-
-Thems descriptions should be:
-
-- Directly related to the term they're describing.
-- Written to describe the users benefit or utility.
-- Written in sentence case with all appropriate punctuation, including ending each sentence with a period.
-- Conversational by using articles ("the", "a", "an").
-- Written in plain language.
-
-## Accessibility
-
-The description list component produces a description list wrapper (`<dl>`), terms (`<dt>`), and definitions (`<dd>`)
-to convey the relationships between the list items to assistive technology users.

package/src/components/DescriptionList/index.ts

@@ -1,4 +0,0 @@
-export { default as DescriptionList } from './DescriptionList.vue';
-export { default as DescriptionListDescription } from './DescriptionListDescription.vue';
-export { default as DescriptionListItem } from './DescriptionListItem.vue';
-export { default as DescriptionListTerm } from './DescriptionListTerm.vue';

package/src/components/Dialog/README.md

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

package/src/components/DropZone/DropZone.vue

@@ -1,105 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-# 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

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

package/src/components/EmptyState/EmptyState.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import { Card, CardSection } from '../Card';
-</script>
-
-<template>
-  <Card>
-    <CardSection>
-      <div class="text-center my-12">
-        <slot />
-      </div>
-    </CardSection>
-  </Card>
-</template>

package/src/components/EmptyState/EmptyStateActions.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { ButtonGroup } from '../ButtonGroup';
-</script>
-
-<template>
-  <div class="mt-12">
-    <ButtonGroup>
-      <slot />
-    </ButtonGroup>
-  </div>
-</template>

package/src/components/EmptyState/EmptyStateContent.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="space-y-1.5">
-    <slot />
-  </div>
-</template>

package/src/components/EmptyState/EmptyStateDescription.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-</script>
-
-<template>
-  <p>
-    <TextStyle variant="subdued">
-      <slot />
-    </TextStyle>
-  </p>
-</template>

package/src/components/EmptyState/EmptyStateTitle.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <h3 class="text-xl font-semibold leading-none">
-    <slot />
-  </h3>
-</template>

package/src/components/EmptyState/README.md

@@ -1,102 +0,0 @@
-<script lang="ts" setup>
-import {
-  Button,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateContent,
-  EmptyStateDescription,
-  EmptyStateTitle,
-} from '../../src/components'; 
-import api from '../component-meta/EmptyState.json';
-</script>
-
-# Empty state
-
-Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide
-explanation or guidance to help users progress. The empty state component is intended for use when a full page is
-empty, and not for individual elements or areas in the interface.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <EmptyState>
-    <EmptyStateContent>
-      <EmptyStateTitle>Manage your inventory transfers</EmptyStateTitle>
-      <EmptyStateDescription>Track and receive your incoming inventory from suppliers.</EmptyStateDescription>
-    </EmptyStateContent>
-    <EmptyStateActions>
-      <Button variant="secondary">Learn more</Button>
-      <Button>Add transfer</Button>
-    </EmptyStateActions>
-  </EmptyState>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Button,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateContent,
-  EmptyStateDescription,
-  EmptyStateTitle,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <EmptyState>
-    <EmptyStateContent>
-      <EmptyStateTitle>Manage your inventory transfers</EmptyStateTitle>
-      <EmptyStateDescription>Track and receive your incoming inventory from suppliers.</EmptyStateDescription>
-    </EmptyStateContent>
-    <EmptyStateActions>
-      <Button variant="secondary">Learn more</Button>
-      <Button>Add transfer</Button>
-    </EmptyStateActions>
-  </EmptyState>
-</template>
-```
-
-## Best practices
-
-Empty states should:
-
-- Orient users by clearly explaining the benefit and utility of a product or feature.
-- Simplify a complicated experience by focusing on a few key features and benefits.
-- Use simple and clear language that empowers users to move their business forward.
-- Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature.
-- Explain the steps users need to take to activate a product or feature.
-- Use only one primary call-to-action button.
-
-## Content guidelines
-
-### Title
-
-Empty state titles should:
-
-- Be action-oriented: encourage users to take the step required to activate the product or feature.
-
-### Subtitle
-
-Empty state subtitles act like body content. They should:
-
-- Describe or explain what's in the empty state title or item title.
-- Be conversational: include articles such as "the", "a", and "an".
-
-### Primary action
-
-Buttons are used for the most important actions you want users to take. They should be:
-
-- Clear and predictable: users should be able to anticipate what will happen when they click a button. Never deceive
-  users by misleading titles.
-- Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to
-  users use the {verb + noun} format on buttons except in the case of common actions like "Save", "Close", "Cancel",
-  or "Ok".
-- Scannable: avoid unnecessary words and articles such as "the", "an", or "a".
-
-### Secondary action
-
-Secondary actions are used for less important actions such as "Learn more" or "Close" buttons. They should follow
-all the other content rules outlined for primary buttons.

package/src/components/EmptyState/index.ts

@@ -1,5 +0,0 @@
-export { default as EmptyState } from './EmptyState.vue';
-export { default as EmptyStateActions } from './EmptyStateActions.vue';
-export { default as EmptyStateContent } from './EmptyStateContent.vue';
-export { default as EmptyStateDescription } from './EmptyStateDescription.vue';
-export { default as EmptyStateTitle } from './EmptyStateTitle.vue';

package/src/components/Feed/Feed.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <ul role="list">
-    <slot />
-  </ul>
-</template>

package/src/components/Feed/FeedItem.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <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>
-
-    <div class="relative flex h-5 w-6 flex-none items-center justify-center">
-      <div class="h-1 w-1 rounded-full bg-slate-100 ring-1 ring-slate-400" />
-    </div>
-
-    <slot />
-  </li>
-</template>

package/src/components/Feed/FeedItemBlock.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <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/FeedItemDateIndicator.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-</script>
-
-<template>
-  <div class="block">
-    <TextStyle variant="subdued">
-      <slot />
-    </TextStyle>
-  </div>
-</template>

package/src/components/Feed/FeedItemIcon.vue

@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-import { computed, CSSProperties } from 'vue';
-import { TailwindColor, useTailwindColor } from '../../composables';
-
-const props = withDefaults(defineProps<{
-  /** The color of the badge. */
-  color: TailwindColor;
-}>(), {});
-
-const colorValue = computed((): CSSProperties => {
-  return {
-    backgroundColor: useTailwindColor(props.color, '500'),
-  };
-});
-</script>
-
-<template>
-  <div
-    class="absolute flex h-5 w-5 items-center justify-center rounded bg-green-400 ml-0.5"
-    :style="colorValue"
-  >
-    <div class="h-4 w-4 text-white">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/Feed/FeedItemSimple.vue

@@ -1,8 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="flex-auto py-0 text-xs leading-5">
-    <slot />
-  </div>
-</template>