@returnless/focus-ui 0.0.2 → 0.0.4

package/src/components/Heading/Heading.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { HeadingLevel, HeadingSize } from './types';
+
+const props = withDefaults(defineProps<{
+  /** The heading level. */
+  level?: HeadingLevel;
+
+  /** The heading size. */
+  size?: HeadingSize;
+}>(), {
+  level: 'h2',
+  size: 'xl',
+});
+
+const classList = computed((): Record<string, boolean> => {
+  return {
+    'text-xl': props.size === 'xl',
+    'text-2xl': props.size === '2xl',
+  };
+});
+</script>
+
+<template>
+  <component
+    :is="level"
+    :class="classList"
+    class="font-semibold leading-none"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/Heading/index.ts

@@ -0,0 +1,3 @@
+export { type HeadingLevel, type HeadingSize } from './types';
+
+export { default as Heading } from './Heading.vue';

package/src/components/Heading/types.ts

@@ -0,0 +1,3 @@
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type HeadingSize = 'xl' | '2xl';

package/src/components/Image/Image.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  /** The alt text for the image. */
+  alt: string;
+
+  /** The source URL of the image. */
+  source: string;
+
+  /** The cross-origin attribute of the image. */
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
+}>(), {
+  crossOrigin: undefined,
+});
+
+defineEmits<{
+  load: [];
+  error: [];
+}>();
+</script>
+
+<template>
+  <img
+    :alt="alt"
+    :crossorigin="crossOrigin"
+    :src="source"
+    v-bind="$attrs"
+    @error="$emit('error')"
+    @load="$emit('load')"
+  >
+</template>

package/src/components/Image/index.ts

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

package/src/components/InertiaLink/InertiaLink.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { type InertiaLinkProps } from '@inertiajs/vue3';
+
+defineProps<InertiaLinkProps>();
+</script>
+
+<template>
+  <InertiaLink v-bind="$props">
+    <slot />
+  </InertiaLink>
+</template>

package/src/components/InertiaLink/index.ts

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

package/src/components/InlineError/InlineError.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { ExclamationCircleIcon } from '@heroicons/vue/24/outline';
+
+defineProps<{
+  /** The id of the element */
+  id: string;
+
+  /** The message to display */
+  message: string;
+}>();
+</script>
+
+<template>
+  <div
+    :id="id"
+    class="flex items-center text-red-600 space-x-2"
+  >
+    <ExclamationCircleIcon class="h-4 w-4" />
+    <span>{{ message }}</span>
+  </div>
+</template>

package/src/components/InlineError/README.md

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { FormLayout, TextField, InlineError } from '../../src/components'; 
+import api from '../component-meta/InlineError.json';
+</script>
+
+# Inline error
+
+Inline errors are brief, in-context messages that tell users something went wrong with a single or group of inputs in a
+form. Use inline errors to help users understand why a form input may not be valid en how to fix it.
+
+## Usage
+
+<ComponentWrapper>
+  <InlineError
+    message="Store name is required"
+    field-id="my-field-id"
+  />
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { InlineError } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <InlineError
+    message="Store name is required"
+    field-id="my-field-id"
+  />
+</template>
+```
+
+## Best practices
+
+Inline errors should:
+
+- Be brief.
+- Be written in sentence case.
+- Be visible immediately upon a form input that is not valid.
+- Be removed as soon as the input is valid so users can immediately tell they fixed the issue.
+- Describe specific solutions so users can successfully complete their task in the form.
+- Not be placed out of context of the input or group of inputs they describe.
+
+## Content guidelines
+
+### Inline error messages
+
+Since the error message is directly below the source of the problem, the copy only needs to explain why the error
+happened. Optionally, the message can clarify what to do next or offer a one-click fix.
+
+Inline error messages should:
+
+- Clearly explain what went wrong, give a next step, or offer a one-click fix.
+- Be short and concise, no more than a single sentence.
+- Use passive voice so users don't feel like they're being blamed for the error.
+
+## Accessibility
+
+- Use the required `fieldId` prop to give the inline error a unique `id`. This ties the error to a form field using
+  `aria-describedby` so that it's conveyed to screen reader users.
+- Use the required `message` prop to provide the text that describes the error.
+- The inline error icon helps visually identify the error message for users who have difficulty seeing colors or who
+  use settings that remove color from the page.

package/src/components/InlineError/index.ts

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

package/src/components/KPICard/KPICard.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { Card } from '../Card';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  orientation?: 'horizontal' | 'vertical';
+}>(), {
+  orientation: 'horizontal',
+});
+
+const classList = computed(() => {
+  return {
+    'flex flex-col divide-y': props.orientation === 'vertical',
+    'flex flex-row divide-x': props.orientation === 'horizontal',
+  };
+});
+</script>
+
+<template>
+  <Card>
+    <div
+      :class="classList"
+      class="[&>*]:flex-1"
+    >
+      <slot />
+    </div>
+  </Card>
+</template>

package/src/components/KPICard/KPICardSection.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { CardSection } from '../Card';
+import { Heading } from '../Heading';
+import { TextStyle } from '../TextStyle';
+
+defineProps<{
+  title: string;
+  value: string;
+}>();
+</script>
+
+<template>
+  <CardSection>
+    <div class="space-y-0.5">
+      <TextStyle variant="subdued">
+        {{ title }}
+      </TextStyle>
+      <Heading size="2xl">
+        {{ value }}
+      </Heading>
+    </div>
+
+    <div
+      v-if="!!$slots.default"
+      class="mt-6"
+    >
+      <slot />
+    </div>
+  </CardSection>
+</template>

package/src/components/KPICard/README.md

@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { Badge, BadgeContent, BadgeIcon, KPICard, KPICardSection } from '../../src/components'; 
+import api from '../component-meta/KPICard.json';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
+</script>
+
+# KPI Card
+
+KPI Card is a component that displays a key performance indicator in a card format. It is used to display a single
+metric or a set of metrics that are important to the user.
+
+## Usage
+
+<ComponentWrapper>
+  <KPICard>
+    <KPICardSection title="Total returns today" value="952">
+      <Badge color="green">
+        <BadgeContent>+ 25%</BadgeContent>
+        <BadgeIcon>
+          <ArrowTrendingUpIcon />
+        </BadgeIcon>
+      </Badge>
+    </KPICardSection>
+    <KPICardSection title="Total returns last 30 days" value="10,483">
+      <Badge color="red">
+        <BadgeIcon>
+          <ArrowTrendingDownIcon />
+        </BadgeIcon>
+        <BadgeContent>- 25%</BadgeContent>
+      </Badge>
+    </KPICardSection>
+  </KPICard>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  Badge,
+  BadgeContent,
+  BadgeIcon,
+  KPICard,
+  KPICardSection,
+} from '@returnless/focus-ui';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
+</script>
+
+<template>
+  <KPICard>
+    <KPICardSection title="Total returns today" value="952">
+      <Badge color="green">
+        <BadgeContent>+ 25%</BadgeContent>
+        <BadgeIcon>
+          <ArrowTrendingUpIcon />
+        </BadgeIcon>
+      </Badge>
+    </KPICardSection>
+    <KPICardSection title="Total returns last 30 days" value="10,483">
+      <Badge color="red">
+        <BadgeIcon>
+          <ArrowTrendingDownIcon />
+        </BadgeIcon>
+        <BadgeContent>- 25%</BadgeContent>
+      </Badge>
+    </KPICardSection>
+  </KPICard>
+</template>
+```
+
+### Vertical KPI Card
+
+<ComponentWrapper>
+  <KPICard orientation="vertical">
+    <KPICardSection title="Total returns today" value="952">
+      <Badge color="green">
+        <BadgeContent>+ 25%</BadgeContent>
+        <BadgeIcon>
+          <ArrowTrendingUpIcon />
+        </BadgeIcon>
+      </Badge>
+    </KPICardSection>
+    <KPICardSection title="Total returns last 30 days" value="10,483">
+      <Badge color="red">
+        <BadgeIcon>
+          <ArrowTrendingDownIcon />
+        </BadgeIcon>
+        <BadgeContent>- 25%</BadgeContent>
+      </Badge>
+    </KPICardSection>
+  </KPICard>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  Badge,
+  BadgeContent,
+  BadgeIcon,
+  KPICard,
+  KPICardSection,
+} from '@returnless/focus-ui';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
+</script>
+
+<template>
+  <KPICard orientation="vertical">
+    <KPICardSection title="Total returns today" value="952">
+      <Badge color="green">
+        <BadgeContent>+ 25%</BadgeContent>
+        <BadgeIcon>
+          <ArrowTrendingUpIcon />
+        </BadgeIcon>
+      </Badge>
+    </KPICardSection>
+    <KPICardSection title="Total returns last 30 days" value="10,483">
+      <Badge color="red">
+        <BadgeIcon>
+          <ArrowTrendingDownIcon />
+        </BadgeIcon>
+        <BadgeContent>- 25%</BadgeContent>
+      </Badge>
+    </KPICardSection>
+  </KPICard>
+</template>
+```

package/src/components/KPICard/index.ts

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

package/src/components/Legend/Legend.vue

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

package/src/components/Legend/LegendItem.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { TailwindColor, useTailwindColor, useTheme, useUniqueId } from '../../composables';
+import { TextStyle } from '../TextStyle';
+
+const props = defineProps<{
+  color: TailwindColor;
+}>();
+
+const legendItemId = useUniqueId('legendItem');
+
+const colorValue = useTailwindColor(props.color, '500');
+</script>
+
+<template>
+  <li :aria-labelledby="legendItemId">
+    <button
+      :class="useTheme('focus')"
+      class="flex items-center rounded border border-transparent px-2 space-x-2 py-0.5 hover:bg-slate-100"
+      role="button"
+    >
+      <span
+        class="h-2 w-2 rounded-full flex-shrink-0"
+        :style="{ backgroundColor: colorValue }"
+      />
+      <TextStyle
+        :id="legendItemId"
+        variant="strong"
+        class="whitespace-nowrap"
+      >
+        <slot />
+      </TextStyle>
+    </button>
+  </li>
+</template>

package/src/components/Legend/README.md

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { Legend, LegendItem } from '../../src/components'; 
+import api from '../component-meta/Legend.json';
+</script>
+
+# Legend
+
+The `Legend` component is used to display a legend for a chart.
+
+## Usage
+
+<ComponentWrapper>
+  <Legend>
+    <LegendItem color="green">Category 1</LegendItem>
+    <LegendItem color="blue">Category 2</LegendItem>
+    <LegendItem color="red">Category 3</LegendItem>
+  </Legend>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Legend, LegendItem } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <Legend>
+    <LegendItem color="green">Category 1</LegendItem>
+    <LegendItem color="blue">Category 2</LegendItem>
+    <LegendItem color="red">Category 3</LegendItem>
+  </Legend>
+</template>
+```

package/src/components/Legend/index.ts

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

package/src/components/Link/Link.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Link } from '@inertiajs/vue3';
+import { InertiaLink } from '../InertiaLink';
 
 const props = withDefaults(defineProps<{
   /** The aria-label attribute to be applied to the link */
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
 });
 
 const componentType = computed(() => {
-  return props.native ? 'a' : Link;
+  return props.native ? 'a' : InertiaLink;
 });
 </script>
 
@@ -25,13 +25,13 @@ const componentType = computed(() => {
   <component
     :is="componentType"
     :aria-label="accessibilityLabel"
-    :href="href"
-    v-bind="$attrs"
     :class="[
       'text-brand-500',
       'cursor-pointer',
       'hover:underline'
     ]"
+    :href="href"
+    v-bind="$attrs"
   >
     <slot />
   </component>

package/src/components/Link/README.md

@@ -19,7 +19,7 @@ Use for text links inside a paragraph or for standalone text. Default links open
 
 ```js-vue
 <script lang="ts" setup>
-import { Link } from 'focus-ui';
+import { Link } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Navigation/Navigation.vue

@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <div>
+  <aside role="complementary">
     <slot />
-  </div>
+  </aside>
 </template>

package/src/components/Navigation/NavigationItem.vue

@@ -1,20 +1,24 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { Link } from '@inertiajs/vue3';
+import { InertiaLink } from '../InertiaLink';
 
 const props = withDefaults(defineProps<{
+  /** Whether the navigation item is active. */
+  active?: boolean;
+
   /** The URL to navigate to. */
   href: string;
 
-  /** Whether the navigation item is active. */
-  active?: boolean;
+  /** The icon to display to the left of the navigation item. */
+  icon?: (() => void) | null;
 }>(), {
   active: false,
+  icon: null,
 });
 
-const classList = computed(() => {
+const classList = computed((): Record<string, boolean>[] => {
   return [
-    { 'relative bg-white shadow-sm text-brand-500': props.active },
+    { 'relative bg-slate-200': props.active },
     { 'text-slate-500 hover:bg-slate-100': !props.active },
   ];
 });
@@ -22,22 +26,22 @@ const classList = computed(() => {
 
 <template>
   <div class="block">
-    <Link :href="href">
+    <InertiaLink :href="href">
       <div
         class="flex items-center rounded px-3 py-2 space-x-3"
         :class="classList"
       >
         <span
-          v-if="!!$slots.icon"
+          v-if="!!icon"
           class="h-4 w-4 opacity-75"
         >
-          <slot name="icon" />
+          <component :is="icon" />
         </span>
 
-        <span class="font-medium">
+        <span :class="{ 'font-medium': active }">
           <slot />
         </span>
       </div>
-    </Link>
+    </InertiaLink>
   </div>
 </template>

package/src/components/Navigation/NavigationSecondarySection.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="relative pl-0.5">
+    <div class="absolute top-0 bottom-0 border-l border-slate-300 w-10 ml-[17px]" />
+
+    <div class="ml-6 pl-0.5 space-y-0.5">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/Navigation/NavigationSection.vue

@@ -3,7 +3,7 @@ import { TextStyle } from '../TextStyle';
 
 withDefaults(defineProps<{
   /** The label for the navigation section. */
-  label: string | null;
+  label?: string | null;
 }>(), {
   label: null,
 });

package/src/components/Navigation/README.md

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Navigation, NavigationItem, NavigationSection } from '../../src/components'; 
+import { Navigation, NavigationItem, NavigationSecondarySection, NavigationSection } from '../../src/components'; 
 import api from '../component-meta/Navigation.json';
 import { UserIcon, HandThumbDownIcon, QuestionMarkCircleIcon, BoltIcon } from '@heroicons/vue/16/solid';
 </script>
@@ -16,34 +16,29 @@ Navigation includes a list of links that users use to move between sections of t
 <ComponentWrapper>
   <Navigation>
     <NavigationSection>
-      <NavigationItem>General</NavigationItem>
+      <NavigationItem href="#">General</NavigationItem>
     </NavigationSection>
     <NavigationSection label="Workflow management">
-      <NavigationItem>
-        <template #icon>
-          <HandThumbDownIcon />
-        </template>
+      <NavigationItem :icon="HandThumbDownIcon" href="#">
         Return reasons
       </NavigationItem>
-      <NavigationItem active>
-        <template #icon>
-          <QuestionMarkCircleIcon />
-        </template>
+      <NavigationItem active :icon="QuestionMarkCircleIcon" href="#">
         Return questions
       </NavigationItem>
-      <NavigationItem>
-        <template #icon>
-          <BoltIcon />
-        </template>
+      <NavigationItem :icon="BoltIcon" href="#">
         Automations
       </NavigationItem>
+      <NavigationSecondarySection>
+        <NavigationItem href="#">Sub item 1</NavigationItem>
+        <NavigationItem href="#">Sub item 2</NavigationItem>
+      </NavigationSecondarySection>
     </NavigationSection>
   </Navigation>
 </ComponentWrapper>
 
 ```js-vue
 <script lang="ts" setup>
-import { Navigation, NavigationItem, NavigationSection } from 'focus-ui';
+import { Navigation, NavigationItem, NavigationSection } from '@returnless/focus-ui';
 import { UserIcon, HandThumbDownIcon, QuestionMarkCircleIcon, BoltIcon } from '@heroicons/vue/16/solid';
 </script>
 

package/src/components/Navigation/index.ts

@@ -1,3 +1,4 @@
 export { default as Navigation } from './Navigation.vue';
 export { default as NavigationItem } from './NavigationItem.vue';
+export { default as NavigationSecondarySection } from './NavigationSecondarySection.vue';
 export { default as NavigationSection } from './NavigationSection.vue';