@returnless/focus-ui 0.0.2 → 0.0.4

package/src/components/ResourceList/README.md

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

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

package/src/components/ResourceList/ResourceListItem.vue

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

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

package/src/components/ResourceList/index.ts

@@ -0,0 +1,3 @@
+export { default as ResourceList } from './ResourceList.vue';
+export { default as ResourceListItem } from './ResourceListItem.vue';
+export { default as ResourceListItemContent } from './ResourceListItemContent.vue';

package/src/components/Select/README.md

@@ -26,7 +26,7 @@ cluttering the interface.
 
 ```js-vue
 <script lang="ts" setup>
-import { Select, SelectGroup, SelectOption } from 'focus-ui';
+import { Select, SelectGroup, SelectOption } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Select/Select.vue

@@ -66,7 +66,7 @@ const elementId = props.id || useUniqueId('select');
         :disabled="disabled"
         :name="name"
         :readonly="readonly"
-        class="inline-flex w-full appearance-none rounded-md border px-4 py-3 leading-none"
+        class="inline-flex w-full appearance-none rounded-md border bg-white px-4 py-3 leading-none"
         v-bind="$attrs"
       >
         <option

package/src/components/Separator/README.md

@@ -15,13 +15,15 @@ Use to separate or group content.
       Card section content
       <Separator />
       Card section content
+      <Separator label="With separator label" />
+      Card section content
     </CardSection>
   </Card>
 </ComponentWrapper>
 
 ```js-vue
 <script lang="ts" setup>
-import { Card, CardSection, Separator } from 'focus-ui';
+import { Card, CardSection, Separator } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -30,6 +32,8 @@ import { Card, CardSection, Separator } from 'focus-ui';
       Card section content
       <Separator />
       Card section content
+      <Separator label="With separator label" />
+      Card section content
     </CardSection>
   </Card>
 </template>

package/src/components/Separator/Separator.vue

@@ -1,7 +1,24 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { TextStyle } from '../TextStyle';
+
+withDefaults(defineProps<{
+  /** The label to display in the separator. */
+  label?: string | null;
+}>(), {
+  label: null,
+});
+</script>
 
 <template>
-  <div class="h-12 flex items-center">
-    <div class="h-[1px] w-full shrink-0 bg-border" />
+  <div class="relative flex h-12 items-center">
+    <div class="w-full shrink-0 h-[1px] bg-border" />
+    <span
+      v-if="label"
+      class="absolute left-1/2 -translate-x-1/2 bg-white px-4"
+    >
+      <TextStyle variant="subdued">
+        {{ label }}
+      </TextStyle>
+    </span>
   </div>
 </template>

package/src/components/Spinner/README.md

@@ -20,7 +20,7 @@ for content that can't be represented with skeleton loading components, like for
 
 ```js-vue
 <script lang="ts" setup>
-import { Spinner } from 'focus-ui';
+import { Spinner } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Spinner/Spinner.vue

@@ -1,20 +1,26 @@
 <script lang="ts" setup>
-withDefaults(defineProps<{
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
   /** Accessible label for the spinner. */
-  accessibilityLabel?: string | null;
+  accessibilityLabel?: string;
 
   /** Allows the component to apply the correct accessibility roles based on focus. */
   hasFocusableParent?: boolean;
 }>(), {
-  accessibilityLabel: null,
+  accessibilityLabel: undefined,
   hasFocusableParent: false,
 });
+
+const accessibilityRole = computed((): string | undefined => {
+  return props.hasFocusableParent ? 'status' : undefined;
+});
 </script>
 
 <template>
   <div
     :aria-label="accessibilityLabel"
-    :role="(!hasFocusableParent && 'status')"
+    :role="accessibilityRole"
     class="spinner"
   >
     <svg

package/src/components/StatusIndicator/README.md

@@ -14,7 +14,7 @@ services, shipment, a user, etc.
 
 <ComponentWrapper>
   <ComponentGrid>
-    <StatusIndicator>In transit</StatusIndicator>
+    <StatusIndicator color="yellow">In transit</StatusIndicator>
     <StatusIndicator color="red">Request rejected</StatusIndicator>
     <StatusIndicator color="blue">Announced</StatusIndicator>
     <StatusIndicator color="green">Return approved</StatusIndicator>
@@ -23,7 +23,7 @@ services, shipment, a user, etc.
 
 ```js-vue
 <script lang="ts" setup>
-import { StatusIndicator } from 'focus-ui';
+import { StatusIndicator } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/StatusIndicator/StatusIndicator.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, CSSProperties } from 'vue';
-import { TailwindColor, useTailwindColor } from '../../composables';
+import { TailwindColor, useTailwindColor, useUniqueId } from '../../composables';
 import { TextStyle } from '../TextStyle';
 
 const props = withDefaults(defineProps<{
@@ -11,9 +11,10 @@ const props = withDefaults(defineProps<{
   color: TailwindColor;
 }>(), {
   accessibilityLabel: null,
-  color: 'yellow',
 });
 
+const statusLabelId = useUniqueId('statusLabel');
+
 const colorValues = computed((): CSSProperties => {
   return {
     backgroundColor: useTailwindColor(props.color, '300'),
@@ -24,15 +25,20 @@ const colorValues = computed((): CSSProperties => {
 
 <template>
   <div
-    class="px-3 py-1 inline-flex items-center space-x-2"
+    :aria-labelledby="statusLabelId"
     :style="{ color: colorValues.color }"
+    aria-live="polite"
+    class="inline-flex items-center space-x-2"
+    role="status"
   >
     <div
-      class="w-4 h-4 rounded-full"
+      class="w-3 h-3 rounded-full"
       :style="{ backgroundColor: colorValues.backgroundColor }"
     />
     <TextStyle variant="strong">
-      <slot />
+      <span :id="statusLabelId">
+        <slot />
+      </span>
     </TextStyle>
   </div>
 </template>

package/src/components/Stepper/README.md

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { Stepper } from '../../src/components'; 
+import api from '../component-meta/Stepper.json'; 
+import { ref } from "vue"; 
+
+const stepperNumber = ref(0);
+</script>
+
+# Stepper
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Stepper
+    v-model="stepperNumber"
+    :min="0"
+    :max="5"
+    label="QTY Received"
+  />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Stepper } from '@returnless/focus-ui';
+
+const stepperNumber = ref(0);
+</script>
+
+<template>
+  <Stepper
+    v-model="stepperNumber"
+    :max="5"
+    label="QTY Received"
+  />
+</template>
+```

package/src/components/Stepper/Stepper.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/16/solid';
+import { TextStyle } from '../TextStyle';
+import { useTheme } from '../../composables';
+
+const props = withDefaults(defineProps<{
+  /** The label for the stepper. */
+  label: string;
+
+  /** The maximum value of the stepper. */
+  max: number;
+
+  /** The minimum value of the stepper. */
+  min: number;
+}>(), {
+  min: undefined,
+  max: undefined,
+});
+
+const model = defineModel<number>();
+
+function decrement(): void {
+  if (model.value! <= props.min) {
+    return;
+  }
+
+  model.value!--;
+}
+
+function increment(): void {
+  if (model.value! >= props.max) {
+    return;
+  }
+
+  model.value!++;
+}
+
+function handleFocus(event: Event): void {
+  (event.target as HTMLInputElement).select();
+}
+
+function handleInput(event: InputEvent | Event): void {
+  const target = event.target as HTMLInputElement;
+  let value = Number(target.value);
+
+  if (value > props.max) {
+    value = props.max;
+  }
+
+  if (value < props.min) {
+    value = props.min;
+  }
+
+  model.value = value;
+  target.valueAsNumber = value;
+}
+</script>
+
+<template>
+  <div class="inline-flex select-none flex-col space-y-2">
+    <div class="inline-flex items-stretch rounded border shadow-sm">
+      <button
+        :class="useTheme('focus')"
+        :disabled="model === props.min"
+        class="rounded-l bg-white px-3 hover:bg-slate-100 focus:z-10 disabled:pointer-events-none disabled:opacity-20"
+        type="button"
+        @click="decrement"
+      >
+        <ChevronLeftIcon class="h-4 w-4" />
+      </button>
+      <input
+        :class="useTheme('focus')"
+        :value="model"
+        class="relative w-12 appearance-none border-x bg-slate-100 py-2 text-center"
+        inputmode="numeric"
+        type="number"
+        @focus="handleFocus"
+        @input="handleInput"
+      >
+      <button
+        :class="useTheme('focus')"
+        :disabled="model === props.max"
+        class="rounded-r bg-white px-3 hover:bg-slate-100 focus:z-10 disabled:pointer-events-none disabled:opacity-20"
+        type="button"
+        @click="increment"
+      >
+        <ChevronRightIcon class="h-4 w-4" />
+      </button>
+    </div>
+    <div class="select-text text-center text-xs">
+      <TextStyle variant="subdued">
+        {{ label }}
+      </TextStyle>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

package/src/components/Stepper/index.ts

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

package/src/components/Tabs/README.md

@@ -21,7 +21,7 @@ Use to alternate among related views within the same context.
 
 ```js-vue
 <script lang="ts" setup>
-import { Tabs, TabTrigger } from 'focus-ui';
+import { Tabs, TabTrigger } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Tabs/TabTrigger.vue

@@ -10,10 +10,10 @@ const props = withDefaults(defineProps<{
   active: false,
 });
 
-const tabItemId = useUniqueId('tab-item');
+const tabItemId = useUniqueId('tabItem');
 const activeTabItem = inject<Ref<string>>('activeTabItem')!;
 
-onMounted(() => {
+onMounted((): void => {
   if (props.active) {
     activeTabItem.value = tabItemId;
   }
@@ -23,7 +23,7 @@ function toggleTabItem(): void {
   activeTabItem.value = tabItemId;
 }
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean>[] => {
   return [
     { 'bg-white shadow': activeTabItem.value === tabItemId },
   ];
@@ -32,8 +32,9 @@ const classList = computed(() => {
 
 <template>
   <button
-    class="rounded px-3 py-2"
     :class="classList"
+    class="rounded px-3 py-2"
+    role="tab"
     @click="toggleTabItem"
   >
     <TextStyle variant="strong">

package/src/components/Tabs/Tabs.vue

@@ -7,7 +7,10 @@ provide('activeTabItem', activeTabItem);
 </script>
 
 <template>
-  <div class="inline-flex rounded-md bg-slate-200 p-1">
+  <div
+    class="inline-flex rounded-md bg-slate-200 p-1"
+    role="tablist"
+  >
     <slot />
   </div>
 </template>

package/src/components/Tag/Tag.vue

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

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