@returnless/focus-ui 0.0.5 → 0.0.7

package/src/components/Tabs/TabTrigger.vue

@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle } from '../TextStyle';
-import { computed, inject, onMounted, Ref } from 'vue';
-import { useUniqueId } from '../../composables';
-
-const props = withDefaults(defineProps<{
-  /** Whether the tab item is active */
-  active?: boolean;
-}>(), {
-  active: false,
-});
-
-const tabItemId = useUniqueId('tabItem');
-const activeTabItem = inject<Ref<string>>('activeTabItem')!;
-
-onMounted((): void => {
-  if (props.active) {
-    activeTabItem.value = tabItemId;
-  }
-});
-
-function toggleTabItem(): void {
-  activeTabItem.value = tabItemId;
-}
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'bg-white shadow': activeTabItem.value === tabItemId },
-  ];
-});
-</script>
-
-<template>
-  <button
-    :class="classList"
-    class="rounded px-3 py-2"
-    role="tab"
-    @click="toggleTabItem"
-  >
-    <TextStyle variant="strong">
-      <slot />
-    </TextStyle>
-  </button>
-</template>

package/src/components/Tabs/Tabs.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import { provide, ref } from 'vue';
-
-const activeTabItem = ref<string | null>(null);
-
-provide('activeTabItem', activeTabItem);
-</script>
-
-<template>
-  <div
-    class="inline-flex rounded-md bg-slate-200 p-1"
-    role="tablist"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/Tabs/index.ts

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

package/src/components/Tag/README.md

@@ -1,27 +0,0 @@
-# Tag
-
-Tags represent a set of interactive, user-supplied keywords that help label, organize, and categorize objects. Tags can
-be added or removed from an object by users.
-
-## Best practices
-
-Tags should:
-
-- Be presented close to or within the input control that allows users to add and remove tags.
-
-## Accessibility
-
-### Labeling
-
-The button to remove a tag is automatically given a label using `aria-label` so that screen reader users can 
-distinguish which tag will be removed.
-
-### Keyboard support
-
-The control to remove a tag is implemented as a button with standard keyboard support.
-
-- Give buttons keyboard focus with the tab key (or shift + tab when navigating backwards).
-- To activate a button, press the enter/return or space key.
-
-When a user uses the button to remove a tag, it is important to make sure that keyboard focus is managed. Moving 
-focus to the next element in the page is recommended.

package/src/components/Tag/Tag.vue

@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import { TailwindColor, useTailwindColor } from '../../composables';
-import { computed, CSSProperties } from 'vue';
-import { TextStyle } from '../TextStyle';
-import { VisuallyHidden } from '../VisuallyHidden';
-import { XMarkIcon } from '@heroicons/vue/16/solid';
-
-const props = withDefaults(defineProps<{
-  /** Accessible label for the avatar image. */
-  accessibilityLabel?: string | null;
-
-  /** The color of the badge. */
-  color: TailwindColor;
-}>(), {
-  accessibilityLabel: null,
-});
-
-const colorValues = computed((): CSSProperties => {
-  return {
-    backgroundColor: useTailwindColor(props.color, '200'),
-    color: useTailwindColor(props.color, '900'),
-  };
-});
-</script>
-
-<template>
-  <span
-    class="text-xs px-2 py-1 inline-flex items-center rounded bg-slate-200"
-    :style="colorValues"
-  >
-    <TextStyle variant="strong">
-      <div class="flex items-center space-x-2">
-        <slot />
-      </div>
-    </TextStyle>
-
-    <span
-      class="rounded flex items-center cursor-pointer ml-1"
-    >
-      <XMarkIcon class="w-4 h-4" />
-    </span>
-
-    <VisuallyHidden v-if="accessibilityLabel">{{ accessibilityLabel }}</VisuallyHidden>
-  </span>
-</template>

package/src/components/Tag/index.ts

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

package/src/components/TextField/README.md

@@ -1,335 +0,0 @@
-<script lang="ts" setup>
-import { TextField } from '../../src/components'; 
-import api from '../component-meta/TextField.json';
-</script>
-
-# Text field
-
-a text field is an input field that users can type into. It has a range of options and supports several text formats
-including numbers.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-Use to allow users to provide text input when the expected input is short. For longer input, use the auto grow or
-multiline options.
-
-<ComponentWrapper>
-  <TextField name="first_name" label="First name" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField label="First name" />
-</template>
-```
-
-### Field with help-text
-
-Use to provide additional information about the expected input. Help text is always visible, so don’t rely on it for
-important information.
-
-<ComponentWrapper>
-  <TextField name="first_name" label="First name" help-text="Fill in your first name" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField label="First name" />
-</template>
-```
-
-### Field with placeholder
-
-Use to provide a short, non-essential hint about the expected input. Placeholder text is low-contrast, so don’t rely on
-it for important information.
-
-<ComponentWrapper>
-  <TextField name="shipping_zone" label="Shipping zone" placeholder="Example: North America, Europe" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField label="Shipping zone" placeholder="Example: North America, Europe" />
-</template>
-```
-
-### Search field
-
-Use to allow users to search for a specific item or category. Search fields are typically used in the header of an
-application.
-
-<ComponentWrapper>
-  <TextField name="search" type="search" label="Search" placeholder="Search…" label-hidden />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField type="password" label="Password" />
-</template>
-```
-
-### Password field
-
-<ComponentWrapper>
-  <TextField name="password" type="password" label="Password" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField type="password" label="Password" />
-</template>
-```
-
-### Textarea
-
-<ComponentWrapper>
-  <TextField multiline name="textarea" label="Textarea" rows="5" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField multiline name="textarea" label="Textarea" rows="5" />
-</template>
-```
-
-### With error
-
-Use to indicate that there is a problem with the input. Error messages should be concise and helpful.
-
-<ComponentWrapper>
-  <TextField name="element_with_error" label="Store name" error="Store name is required" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextField } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextField multiline name="textarea" label="Textarea" rows="5" />
-</template>
-```
-
-## Best practices
-
-Text fields should:
-
-- Be clearly labeled, so it's obvious to users what they should enter into a field.
-- Be labeled as "Optional" when you need to request input that's not request.
-- Only ask for information that's really needed.
-- Validate input as soon as users have finished interacting with a field (but not before).
-
-### Autocomplete
-
-The autocomplete attribute in an `input` field controls two types of browser behaviour:
-
-1. **Browser autofill**: a feature that automatically populates form fields with previously-saved information, such
-   as passwords, addresses, and credit card data.
-
-- Autofill is an important feature for users. Google has found
-  that [users complete forms 30% faster](https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en)
-  when using autofill.
-- The WHATWG has a list of supported autofill values for the `autocomplete` attribute. [Review the section "4.10.
-  18.7 Autofill](https://polaris.shopify.com/components/selection-and-input/text-field#:~:text=Review%20the%20section%20%224.10.18.7%20Autofill%22)
-  for all the input types and their corresponding autocomplete attribute values.
-
-2. Browser autocomplete: a feature that displays previously submitted values for that field.
-
-- When this is on for a field, a user is presented with a list of previously submitted values for the input.
-
-Always add an autocomplete attribute and value to inputs if the type is: color, date, datetime-local, email, month,
-number, password, range, search, tel, text, time, url, or week.
-
-### Turning autofill/autocomplete off
-
-Even if you do not want the browser to autofill a user's information, it is recommended you still have an
-autocomplete attribute with the value "off" or "nope".
-
-Unfortunately, [not all browsers support](https://polaris.shopify.com/components/selection-and-input/text-field#:~:text=not%20all%20browsers%20support)
-or respect autocomplete="off". This makes things challenging. Chrome, for
-example, [has a long outstanding bug](https://polaris.shopify.com/components/selection-and-input/text-field#:~:text=has%20a%20long%20outstanding%20bug)
-and won't add support for "off" for now.
-
-Chrome does seem to turn autocomplete off when using the value nope (or any non-valid string). However, we have seen
-some inconsistencies even with that support.
-
-## Content guidelines
-
-Text fields can be grouped in a form or placed individually in the UI. Placeholder text should generally be avoided
-in text fields. Help text can be used below the text input area to guide the user on acceptable inputs.
-
-### Field labels
-
-Field labels act as a title for the text field. Labels should typically be short and in noun form. For example, "Name".
-
-### Placeholder text
-
-In general, avoid using placeholder text in text fields. It can pose a range of accessibility problems, like:
-
-- Low color contrast, making the text hard to read.
-- Inconsistent behaviour between browsers and screen readers.
-- Text disappearing when the user starts typing, which can be confusing to people with cognitive impairments.
-- Limited space available for additional content, due to field size.
-
-Exception: read the guidelines on [search fields].
-
-### Help text
-
-Help text provides extra guidance or instructions to people filling out a form field. It and also be used to clarify
-how the information will be used.
-
-Use help text:
-
-- When the text field label doesn't clearly explain the purpose of the text input.
-- To provide guidance or instructions on the type of information needed.
-- To show examples of the required format for modeled text inputs.
-
-Best practices for help text:
-
-- Avoid repeating the field label. If the field label provides sufficient context for completing the action, then
-  you likely don't need to add help text.
-- If there's not enough room to include both instructions and an example, then only include the example.
-
-### Text input types
-
-There are three types of text inputs:
-
-1. **Modeled text inputs**: These are fields that require a specific format to be valid. They're often used for tags,
-   dates, and some tracking numbers. Modeled text is highly structured, so providing examples is useful.
-2. **Free text inputs**: These are fields that accept short strings of text. They're often used for SKU's, barcodes,
-   and titles. Only provide example text if you know how the text should be structured, such as a tracking number of
-   discount code.
-3. Multiline text inputs: These are fields that are rendered as multiline textarea elements, as well as text input
-   elements that accept long strings of text. They're often used for product descriptions, order comments, and
-   customer notes. Users can write whatever they want, so providing example text is less useful.
-
-### Modeled text inputs
-
-Modeled text inputs are text field inputs that require text to be formatted in a specific way. For instance, tags
-need to be separated by commas, and dates need to be typed in YYYY-MM-DD format. Because modeled text inputs
-require a particular structure, always include examples that demonstrate how the user should enter the information.
-
-- Use help text to include an instructional call to action and an example that shows the required text format.
-- If there's not enough room to include both an instructional call to action and an example, then include only the
-  example.
-- Use the word "Example" followed by a colon to introduce the example.
-
-### Free text inputs
-
-Free text inputs accept a single string of text, without any particular structure. Use the field label to clearly
-indicate what should go in the text field.
-
-Don't provide an example for free text inputs. The text doesn't follow a specific format, and we shouldn't assume
-what belongs in the field. If more context is needed, use help text.
-
-#### Avoid redundancy
-
-If a text field label has a call to action, there's no need to repeat it in the help text. Instead, add a sentence
-that provides extra context.
-
-For example, when a free text input is located independent of a form and has no surrounding context, you can make
-the field label a call to action.
-
-#### Point in the right direction
-
-If the text field label isn't clear about where the user can find the information, use help text to guide them.
-
-### Titles, names, and descriptions
-
-Don't use placeholder text for free input titles, names, and descriptions; use help text instead.
-
-### Codes and tracking numbers
-
-Don't use placeholder text for codes or tracking numbers; use help text instead. If the code follows a standardized
-format, include an example, using the same format as help text for modeled content. If not, omit the example since
-the field's content can vary.
-
-Choose clear names for the field label, and don't repeat it in the help text if possible. Instead, offer context
-that will help the user understand and complete the task quickly.
-
-### Multiline text inputs
-
-Multiline fields let users type long blocks of text. There are a few different versions:
-
-- Plain textarea elements with no formatting options.
-- Formatted textarea elements with what-you-see-is-what-you-get (WYSIWYG) menus.
-- Plain text input elements that accept long strings of text.
-- Plain text input elements that accept long strings of text and expand as the user types.
-
-Multiline inputs hold things like product and collection descriptions, notes about an order, and anything else the
-user wants to type into them.
-
-We usually don't know what will go in multiline fields, so providing example text isn't helpful. Instead, include
-help text that explains how the text will be used and who can view it.
-
-## Accessibility
-
-### Structure
-
-Screen readers convey information about text fields automatically through native HTML.
-
-- Use the `disabled` prop to add the HTML `disabled` attribute to the text field.
-- Use the `readOnly` prop to add the HTML `readonly` attribute to the text field.
-- If you use the `type` prop, then some assistive technologies will adept the software keyboard to the current task.
-  This helps users with mobility, vision, and cognitive issues to enter information more easily.
-
-Use the `id` prop to provide a unique `id` attribute value for the text field. If you don't provide an `id`, then
-the component generates one automatically. All text fields need to have unique `id` values.
-
-### Labeling
-
-The `label` prop is required to convey the purpose of the checkbox to all users.
-
-If there are separate visual cues that convey the purpose of the text field to sighted users, then the label can be
-visually hidden with the `labelHidden` prop.
-
-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. This attribute causes the
-content to be read along with the label, either immediately or after a short delay.
-
-Use the `placeholder` prop to provide additional instructions. However, don't rely on placeholders alon since the
-content isn't always conveyed.
-
-### Keyboard support
-
-Text fields have standard keyboard support.
-
-- Users who rely on the keyboard expect to move focus to each text field using the tab key (or shift + tab when
-  tabbing backwards).
-- If the `type` is set to `number`, then users can use the up and down arrow keys to adjust the value typed into the
-  field when hovering over or focusing the field to make the arrows appear.
-- Using the `disabled` prop will prevent the text field from receiving focus, and users won't be able to interact
-  with it using the keyboard.
-- The `readOnly` prop allows focus on the text field but prevents input or editing.
-
-### Automatically focusing
-
-Although you can use the `autoFocus` prop to automatically move focus to the text field, it's generally best to
-avoid focusing on fields automatically. The `autoFocus` prop is set to `false` by default and should only be used in
-cases where it won't force focus to skip other controls or content of equal or greater importance.

package/src/components/TextField/TextField.vue

@@ -1,135 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide, ref } from 'vue';
-import { InputLabel } from '../InputLabel';
-import { InlineError } from '../InlineError';
-import { useTheme, useUniqueId } from '../../composables';
-import TextFieldIcon from './TextFieldIcon.vue';
-import TextFieldPasswordIcon from './TextFieldPasswordIcon.vue';
-import TextFieldSearchIcon from './TextFieldSearchIcon.vue';
-
-const props = withDefaults(defineProps<{
-  /** Enable automatic completion by the browser. Set to "off" when you do not want the browser to fill in info */
-  autoComplete?: string | null;
-
-  /** Whether the input is disabled. */
-  disabled?: boolean;
-
-  /** The error to display below the input. */
-  error?: string | null;
-
-  /** The help text to display below the input. */
-  helpText?: string | null;
-
-  /** The icon to display inside the input. */
-  icon?: (() => void) | string | undefined;
-
-  /** The ID of the input the label is associated with. */
-  id?: string | null;
-
-  /** The label text. */
-  label: string;
-
-  /** Whether the label is hidden. */
-  labelHidden?: boolean;
-
-  /** Whether the input is a textarea. */
-  multiline?: boolean;
-
-  /** The name of the input. */
-  name: string;
-
-  /** The placeholder text. */
-  placeholder?: string | null;
-
-  /** Whether the input is read-only. */
-  readonly?: boolean;
-
-  /** Whether the input is required. */
-  required?: boolean;
-
-  /** The type of the input. */
-  type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'currency';
-}>(), {
-  autoComplete: null,
-  disabled: false,
-  error: null,
-  helpText: null,
-  icon: undefined,
-  id: null,
-  labelHidden: false,
-  multiline: false,
-  placeholder: null,
-  readonly: false,
-  required: false,
-  type: 'text',
-});
-
-const model = defineModel<string>();
-
-const internalInputType = ref(props.type);
-
-const elementId = props.id || useUniqueId('textField');
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'pl-10': props.type === 'search' || props.icon !== undefined },
-  ];
-});
-
-const componentType = computed((): string => {
-  return props.multiline ? 'textarea' : 'input';
-});
-
-provide('internalInputType', internalInputType);
-</script>
-
-<template>
-  <div class="w-full space-y-1">
-    <InputLabel
-      :id="`${elementId}-label`"
-      :label="label"
-      :label-for="elementId"
-      :label-hidden="labelHidden"
-    />
-
-    <div
-      :class="[useTheme('focusWithin'), { 'border-red-500': error }]"
-      class="relative flex w-full items-center overflow-hidden rounded border bg-white shadow-sm"
-    >
-      <component
-        :is="componentType"
-        :id="elementId"
-        :aria-disabled="disabled"
-        :aria-labelledby="`${elementId}-label`"
-        :aria-readonly="readonly"
-        :aria-required="required"
-        :autocomplete="autoComplete"
-        :class="classList"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :type="internalInputType"
-        :value="model"
-        class="block w-full appearance-none border-none px-3 py-2 placeholder:text-slate-400 text-slate-700 outline-none placeholder-slate-400 disabled:cursor-not-allowed disabled:bg-slate-50"
-        v-bind="$attrs"
-        @input="model = $event.target.value"
-      />
-      <TextFieldIcon
-        v-if="icon"
-        :icon="icon"
-      />
-      <TextFieldSearchIcon v-if="type === 'search'" />
-      <TextFieldPasswordIcon v-if="type === 'password' && model" />
-    </div>
-
-    <InlineError
-      v-if="error"
-      id="test"
-      :message="error"
-    />
-
-    <p class="text-sm text-slate-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>

package/src/components/TextField/TextFieldIcon.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  icon: (() => void) | string;
-}>();
-</script>
-
-<template>
-  <span
-    v-if="icon"
-    class="w-4 h-4 absolute left-4 text-slate-500 leading-4"
-  >
-    <component
-      :is="icon"
-      v-if="icon && typeof icon === 'function'"
-      class=""
-    />
-    <span v-if="icon && typeof icon === 'string'">{{ icon }}</span>
-  </span>
-</template>

package/src/components/TextField/TextFieldPasswordIcon.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/16/solid';
-import { inject, Ref } from 'vue';
-
-const internalInputType = inject<Ref<string>>('internalInputType')!;
-
-function toggleInternalPasswordType(): void {
-  internalInputType.value = internalInputType.value === 'password'
-    ? 'text'
-    : 'password';
-}
-</script>
-
-<template>
-  <div
-    class="cursor-pointer rounded bg-slate-200 p-1 text-xs font-medium leading-none mr-1.5 hover:opacity-80"
-    @click="toggleInternalPasswordType()"
-  >
-    <EyeSlashIcon
-      v-if="internalInputType !== 'password'"
-      class="h-4 w-4"
-    />
-    <EyeIcon
-      v-if="internalInputType === 'password'"
-      class="h-4 w-4"
-    />
-  </div>
-</template>

package/src/components/TextField/TextFieldSearchIcon.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { MagnifyingGlassIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <div
-    class="w-4 h-4 absolute left-4"
-  >
-    <MagnifyingGlassIcon />
-  </div>
-</template>

package/src/components/TextField/index.ts

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