@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/TextStyle/README.md

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-import { TextStyle }  from '../../src/components';
-import api from '../component-meta/TextStyle.json';
-</script>
-
-# Test style
-
-Text style enhances text with additional visual meaning. For example, using subdued text to de-emphasize it from its
-surrounding text.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <ComponentGrid>
-    <TextStyle variant="strong">Strong text</TextStyle>
-    <TextStyle variant="subdued">Subdued text</TextStyle>
-  </ComponentGrid>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { TextStyle } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <TextStyle variant="strong">Strong text</TextStyle>
-  <TextStyle variant="subdued">Subdued text</TextStyle>
-</template>
-```
-
-## Best practices
-
-Text style should be:
-
-- Used when enhancing the text to help users understand its meaning.
-- Subdued if the text is less important than its surrounding text.
-- Strong for input fields, or for a row total in a table.

package/src/components/TextStyle/TextStyle.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-const props = defineProps<{
-  /** The text style variant. */
-  variant: 'subdued' | 'strong';
-}>();
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'text-slate-500': props.variant === 'subdued' },
-    { 'font-medium': props.variant === 'strong' },
-  ];
-});
-</script>
-
-<template>
-  <span
-    :class="classList"
-    class="inline-block"
-  >
-    <slot />
-  </span>
-</template>

package/src/components/TextStyle/index.ts

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

package/src/components/Toast/DismissToastAction.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import { XMarkIcon } from '@heroicons/vue/16/solid';
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  /** The variant of the alert. */
-  variant?: 'default' | 'destructive';
-}>(), {
-  variant: 'default',
-});
-
-defineEmits<{
-  dismiss: [];
-}>();
-
-const classList = computed((): Record<string, boolean> => {
-  return {
-    'hover:bg-red-200': props.variant === 'destructive',
-    'hover:bg-slate-200': props.variant === 'default',
-  };
-});
-</script>
-
-<template>
-  <button
-    aria-label="Dismiss notification"
-    class="flex h-5 w-5 items-center justify-center rounded"
-    :class="classList"
-    type="button"
-    @click="$emit('dismiss')"
-  >
-    <XMarkIcon class="h-4 w-4" />
-  </button>
-</template>

package/src/components/Toast/README.md

@@ -1,167 +0,0 @@
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch } from "vue"; 
-import { Button, Toast, ToastGroup } from '../../src/components';
-import { useToastNotifications } from '../../src/composables/useToastNotifications'; 
-import api from '../component-meta/Toast.json'; 
-
-const {
-  initializeNotificationHandlers,
-  emitToastNotificationEvent,
-  emitToastNotificationEvents,
-  toastNotifications,
-  closeToastNotification,
-} = useToastNotifications();
-
-const notifications = ref([{
-  message: 'This is a toast message',
-  duration: 5_000,
-}]);
-
-onMounted(() => {
-  initializeNotificationHandlers();
-});
-
-watch(notifications, (newValue): void => {
-  if (newValue) {
-    setTimeout(() => {
-      emitToastNotificationEvents(newValue);
-    });
-  }
-}, { immediate: true });
-
-function closeToast(toastNotification: ToastNotification): void {
-  closeToastNotification(toastNotification);
-}
-
-function addToast(): void {
-  emitToastNotificationEvent({
-    message: 'This is a new toast message',
-    duration: 5_000,
-  });
-}
-</script>
-
-# Toast
-
-The toast component is a non-disruptive message that appears at the top of the interface to provide a quick, at-a-glance
-feedback on the outcome of an action. Toasts are often used to confirm that an action has been completed
-successfully or to inform users of a change in state.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Button @click="addToast">Add toast notification</Button>
-  <ToastGroup>
-    <Toast
-      v-for="toastNotification in toastNotifications"
-      :key="toastNotification.id"
-      open
-      :duration="toastNotification.duration"
-      @close="() => closeToast(toastNotification)"
-    >
-      {{ toastNotification.message }}
-    </Toast>
-  </ToastGroup>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { useToastNotifications } from '@returnless/focus-ui';
-
-const {
-  initializeNotificationHandlers,
-  emitToastNotificationEvent,
-  emitToastNotificationEvents,
-  toastNotifications,
-  closeToastNotification,
-} = useToastNotifications();
-
-const TOAST_MESSAGE_DURATION = 5_000;
-
-const notifications = ref([{
-  message: 'This is a toast message',
-  duration: TOAST_MESSAGE_DURATION,
-}]);
-
-onMounted(() => {
-  initializeNotificationHandlers();
-});
-
-watch(notifications, (newValue): void => {
-  if (newValue) {
-    setTimeout(() => {
-      emitToastNotificationEvents(newValue);
-    });
-  }
-}, { immediate: true });
-
-function closeToast(toastNotification: ToastNotification): void {
-  closeToastNotification(toastNotification);
-}
-
-function addToast(): void {
-  emitToastNotificationEvent({
-    message: 'This is a new toast message',
-    duration: TOAST_MESSAGE_DURATION,
-  });
-}
-</script>
-```
-
-## Best practices
-
-Toast should:
-
-- Be used for short messages to confirm an action.
-- Not go over 3 words.
-- Rarely be used for error messages.
-- Be used for success messages.
-- Be used only for non-critical errors that are relevant at the moment and can be explained in 3 words. For example,
-  if there's an internet connection issue, the toast would say, "No internet connection."
-- Avoid using toasts for error messages. Always try to use a banner to prominently inform users about persistent errors.
-
-## Content guidelines
-
-Toast messages should be:
-
-- Short and affirmative.
-- Written in the pattern of {noun + verb}.
-
-### Toast with action
-
-Only include an action in toast if the same action is available elsewhere o n the page. For example:
-
-- If users need to reload a section, offer the call to action [Reload] in the toast. If they miss the toast message,
-  they can also refresh the entire page.
-- If users delete an image, offer the option to [Undo] the deletion. If they miss it in the toast message, they can
-  still retrieve it from somewhere else.
-
-Actions should:
-
-- Keep the action label short, preferably 1 verb.
-- Not have actions, like `Cancel`, for dismissing toast. The `X` to dismiss is already included in the component.
-- Be used with a duration of at least 10,000 milliseconds for accessibility. This gives users enough time to read the
-  message and take action.
-
-## Accessibility
-
-The content of the toast component is implemented as an ARIA live region using `aria-live"assertive"`. When the
-toast appears, screen readers will interrupt any announcement a screen reader is currently making.
-
-Avoid using toast for critical information that users need to act on immediately. Toast might be difficult for users
-with low vision or low dexterity to access because it:
-
-- Disappears automatically.
-- Can't be easily accessed with the keyboard.
-- Might appear outside the proximity of the user's current focus.
-
-### Toast with action
-
-Make sure that users can also accomplish the action in the toast another way, since the toast action may be
-difficult to access for some users. If the toast action is not available somewhere else on the page, for example a
-retry action that reloads a section, it should have a fallback action, for example a browser refresh.
-
-Toast with action should persist for at least 10,000 milliseconds to give users enough time to read the message and
-act on it.

package/src/components/Toast/Toast.vue

@@ -1,39 +0,0 @@
-<script lang="ts" setup>
-import DismissToastAction from './DismissToastAction.vue';
-import { watch } from 'vue';
-
-const props = withDefaults(defineProps<{
-  /** Whether the toast is open or not */
-  open?: boolean;
-
-  /** The duration in milliseconds before the toast is automatically closed */
-  duration?: number;
-}>(), {
-  open: false,
-  duration: 5_000,
-});
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-function closeToast(): void {
-  emit('close');
-}
-
-watch(() => props.open, async (newValue: boolean): Promise<void> => {
-  if (newValue) {
-    setTimeout(() => closeToast(), props.duration);
-  }
-}, { immediate: true });
-</script>
-
-<template>
-  <div class="w-auto flex relative rounded border bg-white px-4 py-3 shadow-lg">
-    <div class="mr-2">
-      <slot />
-    </div>
-
-    <DismissToastAction @dismiss="closeToast" />
-  </div>
-</template>

package/src/components/Toast/ToastGroup.vue

@@ -1,9 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <div class="fixed top-4 right-4 flex flex-col-reverse items-end space-y-3 space-y-reverse z-[999]">
-    <slot />
-  </div>
-</template>

package/src/components/Toast/index.ts

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

package/src/components/Toggle/README.md

@@ -1,66 +0,0 @@
-<script lang="ts" setup>
-import { Card, CardSection, Separator, Toggle, FormLayout, TextField } from '../../src/components'; 
-import api from '../component-meta/Toggle.json';
-</script>
-
-# Toggle
-
-Use toggle switches to present each option as an on/off switch. Toggles are best used for changing the state of system
-features.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Card>
-    <CardSection>
-      <FormLayout>
-        <Toggle label="Toggle element" help-text="Customers will only be able to check out as guests." />
-        <Toggle label="Toggle element" help-text="Customers will be able to check out with a customer account or as a guest." />
-      </FormLayout>
-    </CardSection>
-  </Card>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Toggle } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Toggle help-text="gaaf" />
-</template>
-```
-
-## Best practices
-
-Toggles should:
-
-- Always be used with an associated label component.
-- Be part of a one or more switches that:
-  - List options in a rational order that makes logical sense.
-  - Have a default option selected whenever possible.
-
-## Accessibility
-
-Screen readers convey the state of the toggle automatically. The toggle is read as "on" or "off" when the user navigates
-to it.
-
-- Use the `disabled` prop to apply the HTML `disabled` attribute to the toggle. This prevents users from being able
-  to interact with the toggle, and conveys its inactive state to assistive technologies.
-- Use the `id` prop to provide a unique `id` attribute value for the toggle. If an `id` isn't provided, then the
-  component generates one. All toggle switches must have a unique `id` attribute value to work correctly with
-  assistive technologies.
-
-### Labeling
-
-- The required `label` prop conveys the purpose of the toggle to all users.
-- Use the `labelHidden` prop to visually hide the label while still making it accessible 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 the toggle using the tab key (or shift + tab when tabbing backwards)
-- Use the up and down arrow keys to change which toggle is selected.

package/src/components/Toggle/Toggle.vue

@@ -1,89 +0,0 @@
-<script lang="ts" setup>
-import { InputLabel } from '../InputLabel';
-import { computed, onMounted, ref, watch } from 'vue';
-import { TextStyle } from '../TextStyle';
-import { useUniqueId } from '../../composables';
-
-const props = withDefaults(defineProps<{
-  /** The ID of the toggle. */
-  id?: string | null;
-
-  /** The label for the toggle. */
-  label: string;
-
-  /** The help text to be displayed below the toggle. */
-  helpText?: string | null;
-
-  /** The value of the toggle. */
-  value?: any;
-}>(), {
-  id: null,
-  helpText: null,
-  value: null,
-});
-
-const model = defineModel<boolean>();
-
-const internalValue = ref<boolean>(false);
-const $input = ref<HTMLInputElement | null>(null);
-const elementId = props.id || useUniqueId('toggle');
-
-onMounted((): void => {
-  watch(model, (): void => {
-    internalValue.value = $input.value!.checked;
-  }, { immediate: true });
-});
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'bg-brand-500 border-brand-700': internalValue.value },
-    { 'bg-slate-200 border-slate-300': !internalValue.value },
-  ];
-});
-
-const toggleClass = computed((): Record<string, boolean>[] => {
-  return [
-    { 'translate-x-4 border-brand-600': internalValue.value },
-    { 'translate-x-0 border-slate-300': !internalValue.value },
-  ];
-});
-</script>
-
-<template>
-  <div class="flex items-start">
-    <label>
-      <input
-        :id="elementId"
-        ref="$input"
-        v-model="model"
-        type="checkbox"
-        :value="value"
-        class="hidden"
-      >
-
-      <span
-        class="relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full transition-colors ease-in-out duration-50"
-        :class="classList"
-      >
-        <span
-          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white ring-0 transition ease-in-out mt-[4px] ml-[4px] duration-50"
-          :class="toggleClass"
-        />
-      </span>
-    </label>
-
-    <span class="ml-4 font-normal pt-0.5 space-y-1">
-      <InputLabel
-        :label="label"
-        :label-for="elementId"
-      />
-
-      <TextStyle
-        v-if="helpText"
-        variant="subdued"
-      >
-        {{ helpText }}
-      </TextStyle>
-    </span>
-  </div>
-</template>

package/src/components/Toggle/index.ts

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

package/src/components/Tooltip/README.md

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-import { Button, Tooltip } from '../../src/components'; 
-import api from '../component-meta/Tooltip.json'; 
-</script>
-
-# Tooltip
-
-Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when
-users hover, focus, tap, or click.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Tooltip content="Tooltip contents">
-    <Button>Trigger button for tooltip</Button>
-  </Tooltip>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button, Tooltip } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Tooltip content="Tooltip contents">
-    <Button>Trigger button for tooltip</Button>
-  </Tooltip>
-</template>
-```
-
-## Best practices
-
-Tooltips should:
-
-- Provide useful, additional information or clarification.
-- Succinctly describe or expand on the element they point to.
-- Be provided for icon-only buttons or a button with an associated keyboard shortcut.
-- Not be used to communicate critical information, including errors in forms or other interaction feedback.
-- Not contain any links or buttons.
-- Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and
-  the language in experience.
-
-## Content guidelines
-
-Tooltips should:
-
-- Be written in sentence case.
-- Be concise and scannable.
-- Not be used to communicate error messages or important account information.

package/src/components/Tooltip/Tooltip.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { PopperBody, Popper, PopperTrigger } from '../Popper';
-
-defineProps<{
-  /** The content of the tooltip. */
-  content: string;
-}>();
-</script>
-
-<template>
-  <Popper
-    trigger="hover"
-    placement="top"
-  >
-    <PopperTrigger>
-      <slot />
-    </PopperTrigger>
-    <PopperBody>
-      <div class="rounded bg-black px-2 py-1 text-sm text-white">
-        {{ content }}
-      </div>
-    </PopperBody>
-  </Popper>
-</template>

package/src/components/Tooltip/index.ts

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

package/src/components/TopBar/README.md

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import {
-  TopBar,
-  TopBarLogo,
-  TopBarNavigation,
-  TopBarNavigationItem,
-  TopBarSearch,
-  TopBarUserMenu,
-} from '../../src/components'; 
-import api from '../component-meta/TopBar.json';
-</script>
-
-# Top bar
-
-The top bar is a header component that allows users to search, access menus, and navigate by clicking the logo. It's
-always visible at the top of the interface.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <TopBar>
-    <TopBarLogo />
-    <TopBarNavigation>
-      <TopBarNavigationItem>Item 1</TopBarNavigationItem>
-      <TopBarNavigationItem>Item 2</TopBarNavigationItem>
-      <TopBarNavigationItem>Item 3</TopBarNavigationItem>
-    </TopBarNavigation>
-    <TopBarSearch />
-    <TopBarUserMenu />
-  </TopBar>
-</ComponentWrapper>
-
-## Best practices
-
-The top bar component should:
-
-- Not provide global navigation for an application. Use the navigation component instead.
-- Include search to help users find resources and navigate an application.
-- Include a user menu component to indicate the logged-in user and provide them with global actions.
-- Use an SVG file for the logo.
-- Show a navigation toggle, so it appears on small screens.

package/src/components/TopBar/TopBar.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="flex h-16 items-center border-b bg-white px-4 shadow-sm space-x-4">
-    <slot />
-  </div>
-</template>

package/src/components/TopBar/TopBarLogo.vue

@@ -1,8 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="flex h-10 w-10 items-center justify-center rounded text-white bg-brand-500">
-    logo
-  </div>
-</template>

package/src/components/TopBar/TopBarNavigation.vue

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

package/src/components/TopBar/TopBarNavigationItem.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import { useTheme } from '../../composables';
-</script>
-
-<template>
-  <a
-    class="hover:bg-slate-100 px-3 py-2 rounded border border-transparent"
-    :class="useTheme('focus')"
-    href="#"
-  >
-    <slot />
-  </a>
-</template>

package/src/components/TopBar/TopBarSearch.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import { TextField } from '../TextField';
-</script>
-
-<template>
-  <form role="search">
-    <TextField
-      label="Search"
-      label-hidden
-      name="search"
-      type="search"
-      placeholder="Search"
-    />
-  </form>
-</template>

package/src/components/TopBar/TopBarUserMenu.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { Avatar } from '../Avatar';
-import { ChevronDownIcon } from '@heroicons/vue/16/solid';
-import { useTheme } from '../../composables';
-</script>
-
-<template>
-  <button
-    class="flex items-center rounded border px-3 py-2 shadow-sm space-x-2 hover:bg-slate-100"
-    :class="useTheme('focus')"
-  >
-    <Avatar
-      size="xs"
-      name="demo user"
-      initials="DU"
-    />
-    <p>demo@app.com</p>
-    <ChevronDownIcon class="h-4 w-4" />
-  </button>
-</template>