@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/Popper/Popper.vue

@@ -1,91 +0,0 @@
-<script lang="ts" setup>
-import { useUniqueId } from '../../composables';
-import { onMounted, provide, ref } from 'vue';
-import { type ReferenceElement, computePosition, flip, shift, offset, Placement } from '@floating-ui/vue';
-import { onClickOutside } from '@vueuse/core';
-
-const props = defineProps<{
-  /** The trigger event of the popper */
-  trigger: 'click' | 'hover';
-
-  /** The placement of the popper */
-  placement: Placement;
-}>();
-
-const popperBodyId = useUniqueId('popperBody');
-const popperTriggerId = useUniqueId('popperTrigger');
-
-const popperBodyVisible = ref(false);
-
-const $popperWrapper = ref<HTMLElement>()!;
-const $popperTrigger = ref<HTMLElement>();
-const $popperBody = ref<HTMLElement>();
-
-provide('popperBodyId', popperBodyId);
-provide('popperTriggerId', popperTriggerId);
-provide('popperBodyVisible', popperBodyVisible);
-
-function computePopperPosition(): void {
-  computePosition($popperTrigger.value as ReferenceElement, $popperBody.value!, {
-    placement: props.placement,
-    middleware: [
-      offset(6),
-      flip(),
-      shift({
-        padding: 5,
-      }),
-    ],
-  }).then(({ x, y }: { x: number; y: number }): void => {
-    Object.assign($popperBody.value!.style, {
-      left: `${x}px`,
-      top: `${y}px`,
-    });
-  });
-}
-
-function showPopperContent(): void {
-  popperBodyVisible.value = true;
-
-  computePopperPosition();
-}
-
-function hidePopperContent(): void {
-  popperBodyVisible.value = false;
-}
-
-function handleHoverPopper(): void {
-  $popperTrigger.value!.addEventListener('mouseenter', showPopperContent);
-  $popperTrigger.value!.addEventListener('mouseleave', hidePopperContent);
-}
-
-function handleClickPopper(): void {
-  $popperTrigger.value!.addEventListener('click', (): void => {
-    popperBodyVisible.value
-      ? hidePopperContent()
-      : showPopperContent();
-  });
-}
-
-onMounted((): void => {
-  $popperTrigger.value = document.getElementById(popperTriggerId)!;
-  $popperBody.value = document.getElementById(popperBodyId)!;
-
-  onClickOutside($popperWrapper, (): void => {
-    hidePopperContent();
-  });
-
-  if (props.trigger === 'hover') {
-    handleHoverPopper();
-  }
-
-  if (props.trigger === 'click') {
-    handleClickPopper();
-  }
-});
-</script>
-
-<template>
-  <span ref="$popperWrapper">
-    <slot />
-  </span>
-</template>

package/src/components/Popper/PopperBody.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import { inject } from 'vue';
-
-const popperBodyId = inject<string>('popperBodyId');
-const popperBodyVisible = inject<boolean>('popperBodyVisible');
-</script>
-
-<template>
-  <div
-    :id="popperBodyId"
-    class="absolute"
-    :class="{
-      'hidden': !popperBodyVisible,
-      'block': popperBodyVisible,
-    }"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/Popper/PopperTrigger.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { inject } from 'vue';
-
-const popperTriggerId = inject<string>('popperTriggerId');
-</script>
-
-<template>
-  <span
-    :id="popperTriggerId"
-    class="inline-block"
-  >
-    <slot />
-  </span>
-</template>

package/src/components/Popper/README.md

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import {
-  Button,
-  PopperBody,
-  Popper,
-  PopperTrigger,
-} from '../../src/components'; 
-import api from '../component-meta/Popper.json';
-</script>
-
-# Popper (internal)
-
-This component is used to create a popper component that can be triggered by a click or hover event. The popper component
-is used for components like tooltips, dropdowns, and popovers.
-
-<ComponentApi :api="api" />
-
-## Click
-
-<ComponentWrapper>
-  <Popper trigger="click">
-    <PopperTrigger>
-      <Button>Popper trigger</Button>
-    </PopperTrigger>
-    <PopperBody>
-      Tooltip
-    </PopperBody>
-  </Popper>
-</ComponentWrapper>
-
-## Hover
-
-<ComponentWrapper>
-  <Popper trigger="hover">
-    <PopperTrigger>
-      <Button>Popper trigger</Button>
-    </PopperTrigger>
-    <PopperBody>
-      Tooltip
-    </PopperBody>
-  </Popper>
-</ComponentWrapper>

package/src/components/Popper/index.ts

@@ -1,3 +0,0 @@
-export { default as PopperBody } from './PopperBody.vue';
-export { default as Popper } from './Popper.vue';
-export { default as PopperTrigger } from './PopperTrigger.vue';

package/src/components/ProgressBar/ProgressBar.vue

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-import { VisuallyHidden } from '../VisuallyHidden';
-import { TailwindColor, useTailwindColor } from '../../composables';
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  /** The color of the progress-bar. */
-  color?: TailwindColor;
-
-  /** The value of the progress bar. */
-  value: number;
-
-  /** The position of the indicator relative to the progress bar. */
-  indicatorPosition?: 'above' | 'below' | null;
-}>(), {
-  color: 'slate',
-  indicatorPosition: null,
-});
-
-const foregroundColor = computed((): string => {
-  return useTailwindColor(props.color, '500');
-});
-</script>
-
-<template>
-  <div
-    class="space-y-2"
-    role="progressbar"
-  >
-    <slot v-if="!!$slots.default && indicatorPosition === 'above'" />
-
-    <VisuallyHidden>
-      <progress
-        :value="value"
-        max="100"
-      />
-    </VisuallyHidden>
-
-    <div class="bg-slate-300 rounded h-2 overflow-hidden">
-      <div
-        class="h-full rounded"
-        :style="{
-          width: `${value}%`,
-          backgroundColor: foregroundColor,
-        }"
-      />
-    </div>
-
-    <slot v-if="!!$slots.default && indicatorPosition === 'below'" />
-  </div>
-</template>

package/src/components/ProgressBar/ProgressBarIndicator.vue

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

package/src/components/ProgressBar/README.md

@@ -1,98 +0,0 @@
-<script lang="ts" setup>
-import { ProgressBar, ProgressBarIndicator } from '../../src/components'; 
-import api from '../component-meta/ProgressBar.json';
-</script>
-
-# Progress bar
-
-The progress component is used to visually represent the completion of a task or operation. It shows how much of the
-task has been completed and how much is still left.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <ProgressBar :value="33" />
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { ProgressBar } from 'focus-ui';
-</script>
-
-<template>
-  <ProgressBar :value="33" />
-</template>
-```
-
-### With progress indicator above
-
-Using the `indicator-position` prop, you can position the progress indicator above or below the progress bar.
-
-<ComponentWrapper>
-  <ProgressBar :value="33" indicator-position="above">
-    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
-  </ProgressBar>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
-</script>
-
-<template>
-  <ProgressBar :value="33" indicator-position="above">
-    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
-  </ProgressBar>
-</template>
-```
-
-### With progress indicator below
-
-<ComponentWrapper>
-  <ProgressBar :value="33" indicator-position="below">
-    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
-  </ProgressBar>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
-</script>
-
-<template>
-  <ProgressBar :value="33" indicator-position="below">
-    <ProgressBarIndicator align="right">33% completed</ProgressBarIndicator>
-  </ProgressBar>
-</template>
-```
-
-### Progress indicator alignment
-
-Using the `align` prop, you can align the progress indicator to the left, center, or right.
-
-<ComponentWrapper>
-  <ProgressBar :value="33" indicator-position="below">
-    <ProgressBarIndicator align="left">33% completed</ProgressBarIndicator>
-  </ProgressBar>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { ProgressBar, ProgressBarIndicator } from 'focus-ui';
-</script>
-
-<template>
-  <ProgressBar :value="33" indicator-position="below">
-    <ProgressBarIndicator align="left">33% completed</ProgressBarIndicator>
-  </ProgressBar>
-</template>
-```
-
-## Best practices
-
-Progress components should:
-
-- Give users an indication of how much of the task has completed and how much is left.
-- Not be used for entire page loads. In this case, use the `Skeleton page` component.

package/src/components/ProgressBar/index.ts

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

package/src/components/RadioButton/README.md

@@ -1,111 +0,0 @@
-<script lang="ts" setup>
-import { FormLayout, RadioButton } from '../../src/components'; 
-import api from '../component-meta/RadioButton.json'; 
-import { ref } from "vue";
-
-const test = ref<string | null>(null);
-</script>
-
-# Radio button
-
-Use radio buttons to present each item in a list of options where users must make a single selection.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <FormLayout>
-    <RadioButton
-      v-model="test"
-      value="comments"
-      label="Comments"
-      help-text="Get notified when someones posts a comment on a posting." />
-    <RadioButton
-      v-model="test"
-      value="candidates"
-      label="Candidates"
-      help-text="Get notified when a candidate applies for a job." />
-    <RadioButton
-      v-model="test"
-      value="offers"
-      label="Offers"
-      help-text="Get notified when a candidate accepts or rejects an offer." />
-  </FormLayout>
-  <pre class="mt-4">{{ test }}</pre>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { RadioButton } from '@returnless/focus-ui';
-
-const radioButtonModel = ref<string | null>(null);
-</script>
-
-<template>
-<FormLayout>
-    <RadioButton
-      v-model="radioButtonModel"
-      value="comments"
-      label="Comments"
-      help-text="Get notified when someones posts a comment on a posting." />
-    <RadioButton
-      v-model="radioButtonModel"
-      value="candidates"
-      label="Candidates"
-      help-text="Get notified when a candidate applies for a job." />
-    <RadioButton
-      v-model="radioButtonModel"
-      value="offers"
-      label="Offers"
-      help-text="Get notified when a candidate accepts or rejects an offer." />
-  </FormLayout>
-  <pre class="mt-4">{{ radioButtonModel }}</pre>
-</template>
-```
-
-## Best practices
-
-Radio buttons should:
-
-- Always be used with an associated label component.
-- Be part of list of radio buttons that:
-  - Include at least two or more choices.
-  - Are used to have users select only one option from a list of options.
-  - Include mutually exclusive options - this means that each option must be independent of every other option in the
-    list. For example: Red, Blue, Green, and Yellow are mutually exclusive. Read, blue, yellow, red/blue are not
-    mutually exclusive.
-- List options in a rational order that makes logical sense.
-- Have a default option selected whenever possible.
-
-## Content guidelines
-
-### Radio button labels
-
-Radio button labels should:
-
-- Be introduced with a colon or a heading.
-- Start with a capital letter.
-- Not end in punctuation if it's a single sentence, word, or a fragment.
-
-## Accessibility
-
-Screen readers convey the state of the radio button automatically.
-
-- Use the `disabled` prop to apply the HTML `disabled` attribute to the radio button `<input>`. This prevents users
-  from being able to interact with the radio button, and conveys its inactive state to assistive technologies.
-- Use the `id` prop to provide a unique `id` attribute value for the radio button. If an `id` isn't provided, then
-  the component generates one. All radio buttons must have unique `id` values to work correctly with assistive
-  technologies.
-
-### Labelling
-
-- The required `label` prop conveys the purpose of the radio button 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 the radio button group using the tab key (or shift + tab when tabbing backwards).
-- Use the up and down arrow keys to change which radio button is selected.

package/src/components/RadioButton/RadioButton.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import { InputLabel } from '../InputLabel';
-import { useTheme, useUniqueId } from '../../composables';
-import { TextStyle } from '../TextStyle';
-
-const props = withDefaults(defineProps<{
-  /** The help text to display with the radioButton. */
-  helpText?: string | null;
-
-  /** The ID of the radioButton. */
-  id?: string | null;
-
-  /** The label for the radioButton. */
-  label: string;
-
-  /** The value of the radioButton. */
-  value: any;
-}>(), {
-  id: null,
-  helpText: null,
-});
-
-const model = defineModel<boolean>();
-
-const elementId = props.id || useUniqueId('radioButton');
-</script>
-
-<template>
-  <div class="flex items-start space-x-2">
-    <input
-      :id="elementId"
-      v-model="model"
-      :class="useTheme('focus')"
-      :value="value"
-      class="h-4 w-4 flex-shrink-0 appearance-none rounded-full border border-slate-400 bg-white shadow-sm text-brand-500"
-      type="radio"
-    >
-    <div class="-mt-[2px] space-y-1">
-      <InputLabel
-        :label="label"
-        :label-for="elementId"
-      />
-
-      <TextStyle variant="subdued">
-        {{ helpText }}
-      </TextStyle>
-    </div>
-  </div>
-</template>

package/src/components/RadioButton/index.ts

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

package/src/components/ResourceList/README.md

@@ -1,160 +0,0 @@
-<script lang="ts" setup>
-import {
-  Avatar,
-  Button,
-  Card,
-  CardSection,
-  CardHelp,
-  CardHeader,
-  CardTitle,
-  CardFooter,
-  CardDescription,
-  ResourceList,
-  ResourceListItem,
-  ResourceListItemContent,
-  TextStyle,
-  StatusIndicator,
-} from '../../src/components'; 
-import api from '../component-meta/ResourceList.json';
-</script>
-
-# Resource List
-
-A resource list displays a collection of objects of the same type, like products or customers. The main job of a
-resource list is to help users find an object and navigate to a full-page representation of it or open a modal to
-view more details.
-
-<ComponentApi :api="api" />
-
-## Examples
-
-### List of available orders
-
-<ComponentWrapper>
-  <div style="width: 400px;">
-  <Card>
-    <CardHeader>
-      <CardTitle>
-        Orders
-        <CardHelp href="/help">Learn more</CardHelp>
-      </CardTitle>
-    </CardHeader>
-    <CardSection flush>
-      <ResourceList>
-        <ResourceListItem>
-          <Avatar
-            initials="Shopify"
-            size="md"
-            source="https://assets.returnless.co/f905e00c-366c-45be-9114-65d29e832027/img/integrations/shopify-plus-logo.svg"
-          />
-          <ResourceListItemContent>
-            <TextStyle variant="strong">
-              6246980452684
-            </TextStyle>
-            <p>
-              <TextStyle variant="subdued">
-                2024-06-23 10:11:12
-              </TextStyle>
-            </p>
-          </ResourceListItemContent>
-        </ResourceListItem>
-        <ResourceListItem>
-          <Avatar
-            initials="WICS"
-            size="md"
-            source="https://assets.returnless.co/f905e00c-366c-45be-9114-65d29e832027/img/integrations/shopify-logo.svg"
-          />
-          <ResourceListItemContent>
-            <TextStyle variant="strong">
-              1273329
-            </TextStyle>
-            <p>
-              <TextStyle variant="subdued">
-                2024-06-23 10:11:12
-              </TextStyle>
-            </p>
-          </ResourceListItemContent>
-        </ResourceListItem>
-      </ResourceList>
-    </CardSection>
-  </Card>
-</div>
-</ComponentWrapper>
-
-### List of active shipments
-
-<ComponentWrapper>
-  <div style="width: 400px;">
-  <Card>
-    <CardHeader>
-      <CardTitle>
-        Shipments
-        <CardHelp href="/help">Learn more</CardHelp>
-      </CardTitle>
-    </CardHeader>
-    <CardSection flush>
-    <ResourceList>
-      <ResourceListItem>
-        <Avatar
-          initials="DHL"
-          size="md"
-          source="https://assets.returnless.co/f905e00c-366c-45be-9114-65d29e832027/img/carriers/dhl.svg"
-        />
-        <ResourceListItemContent>
-          <StatusIndicator color="slate">Announced</StatusIndicator>
-          <p class="text-xs">
-            <TextStyle variant="subdued">
-              DHLForYou Drop Off
-            </TextStyle>
-          </p>
-        </ResourceListItemContent>
-      </ResourceListItem>
-      <ResourceListItem>
-        <Avatar
-          initials="DHL"
-          size="md"
-          source="https://assets.returnless.co/f905e00c-366c-45be-9114-65d29e832027/img/carriers/dhl.svg"
-        />
-        <ResourceListItemContent>
-          <StatusIndicator color="blue">En-route</StatusIndicator>
-          <p class="text-xs">
-            <TextStyle variant="subdued">
-              DHLForYou Drop Off
-            </TextStyle>
-          </p>
-        </ResourceListItemContent>
-      </ResourceListItem>
-      <ResourceListItem>
-        <Avatar
-          initials="DHL"
-          size="md"
-          source="https://assets.returnless.co/f905e00c-366c-45be-9114-65d29e832027/img/carriers/dhl.svg"
-        />
-        <ResourceListItemContent>
-          <StatusIndicator color="green">Dropped-off</StatusIndicator>
-          <p class="text-xs">
-            <TextStyle variant="subdued">
-              DHLForYou Drop Off
-            </TextStyle>
-          </p>
-        </ResourceListItemContent>
-      </ResourceListItem>
-    </ResourceList>
-    </CardSection>
-    <CardFooter>
-      <Button variant="secondary">Create new shipment</Button>
-    </CardFooter>
-  </Card>
-</div>
-</ComponentWrapper>
-
-## Best practices
-
-Resource list can live in many places in Returnless. You could include a short resource list in a card summarizing
-recent orders, or you could also dedicate a full page to a resource list of all orders. Here are some best practices:
-
-Resource lists should:
-
-- Have items that perform an action when clicked. The action should navigate to the resource's details page or
-  otherwise provide more detail about the item.
-- Customize the content and layout of their ist items to support users' needs.

package/src/components/ResourceList/ResourceList.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <ul aria-live="polite">
-    <slot />
-  </ul>
-</template>

package/src/components/ResourceList/ResourceListItem.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <li class="flex items-center space-x-4 hover:bg-slate-100 px-6 py-3 cursor-pointer">
-    <slot />
-  </li>
-</template>

package/src/components/ResourceList/ResourceListItemContent.vue

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