@returnless/focus-ui 0.0.2 → 0.0.4

package/src/components/Breadcrumbs/BreadcrumbLink.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { InertiaLink } from '../InertiaLink';
+</script>
+
+<template>
+  <InertiaLink
+    class="hover:underline hover:text-black"
+    href="/"
+    role="link"
+  >
+    <slot />
+  </InertiaLink>
+</template>

package/src/components/Breadcrumbs/BreadcrumbList.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <ol class="flex flex-wrap items-center gap-2 break-words">
+    <slot />
+  </ol>
+</template>

package/src/components/Breadcrumbs/BreadcrumbPage.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <span
+    aria-current="page"
+    aria-disabled="true"
+    class="text-black"
+    role="link"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/Breadcrumbs/BreadcrumbSeparator.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { ChevronRightIcon } from '@heroicons/vue/16/solid';
+</script>
+
+<template>
+  <li
+    aria-hidden="true"
+    role="presentation"
+  >
+    <ChevronRightIcon class="w-4 h-4" />
+  </li>
+</template>

package/src/components/Breadcrumbs/README.md

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../../src/components'; 
+import api from '../component-meta/Breadcrumb.json';
+</script>
+
+# Breadcrumbs
+
+Breadcrumbs are a secondary navigation aid that helps users understand where they are in the application and how to
+navigate back to a previous page.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">
+          Home
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbEllipsis />
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">
+          Components
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>
+          Breadcrumb
+        </BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@returnless/focus-ui';
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">
+          Home
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbEllipsis />
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">
+          Components
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>
+          Breadcrumb
+        </BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
+```

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';

package/src/components/Button/Button.vue

@@ -1,63 +1,75 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { Spinner } from '../';
-import { useTheme } from '../../composables';
+import { useTheme, useUniqueId } from '../../composables';
+import { ChevronDownIcon } from '@heroicons/vue/16/solid';
+import { ButtonProps } from './types';
 
-const props = withDefaults(defineProps<{
-  /** Whether the button is disabled. */
-  disabled?: boolean;
-
-  /** Whether the button should open the link in a new tab. */
-  external?: boolean;
-
-  /** The URL the button should navigate to. */
-  href?: string | null;
-
-  /** Whether the button is in a loading state. */
-  loading?: boolean;
-
-  /** The variant of the button. */
-  variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
-}>(), {
+const props = withDefaults(defineProps<ButtonProps>(), {
   disabled: false,
+  disclosure: false,
   external: false,
+  fullWidth: false,
   href: null,
   loading: false,
+  size: 'normal',
+  type: 'button',
   variant: 'primary',
 });
 
-const classList = computed(() => {
+const buttonLabelId = useUniqueId('buttonLabel');
+
+const classList = computed((): (Record<string, boolean> | string)[] => {
   return [
-    { 'bg-brand-500 hover:bg-brand-600 text-white border-brand-500': props.variant === 'primary' },
-    { 'bg-slate-200 hover:bg-slate-300 border-slate-100': props.variant === 'secondary' },
-    { 'bg-red-500 hover:bg-red-600 text-white border-red-500': props.variant === 'destructive' },
-    { 'border-slate-300 hover:bg-slate-100': props.variant === 'outline' },
-    { 'border-transparent hover:bg-slate-200': props.variant === 'ghost' },
+    { 'bg-brand-500 hover:bg-brand-600 text-white': props.variant === 'primary' },
+    { 'bg-slate-200 hover:bg-slate-300': props.variant === 'secondary' },
+    { 'bg-red-500/20 hover:bg-red-500/30 text-red-600': props.variant === 'destructive' },
+    { 'hover:bg-slate-200': props.variant === 'ghost' },
+
+    { 'px-4 py-3': props.size === 'normal' },
+    { 'px-3 py-2': props.size === 'small' },
 
     { 'opacity-50 cursor-not-allowed': props.disabled },
-    { 'pointer-events-none opacity-75': props.loading },
+    { 'pointer-events-none opacity-75 justify-center': props.loading },
+
+    { 'w-full': props.fullWidth },
 
-    ...useTheme('focus'),
+    ...useTheme('focus', props.variant === 'destructive' ? 'destructive' : 'default'),
   ];
 });
 </script>
 
 <template>
-  <button
-    class="inline-flex items-center justify-center rounded border px-4 py-3 text-sm font-medium leading-none active:opacity-80 active:shadow-inner"
-    :class="classList"
-    :disabled="disabled || loading"
-  >
-    <span
-      class="inline-flex items-center justify-center space-x-4"
-      :class="{ 'invisible': loading }"
+  <span>
+    <button
+      :aria-busy="loading"
+      :aria-disabled="disabled || loading"
+      :aria-labelledby="buttonLabelId"
+      :class="classList"
+      :disabled="disabled || loading"
+      :type="type"
+      class="inline-flex items-center rounded text-sm font-medium leading-none active:opacity-80 active:shadow-inner"
+      role="button"
     >
-      <slot />
-    </span>
-
-    <Spinner
-      v-if="loading"
-      class="absolute"
-    />
-  </button>
+      <span
+        :id="buttonLabelId"
+        :class="{ 'invisible': loading }"
+        class="inline-flex items-center justify-center space-x-4"
+      >
+        <slot />
+
+        <span
+          v-if="disclosure"
+          class="ml-2"
+        >
+          <ChevronDownIcon class="h-4 w-4" />
+        </span>
+      </span>
+
+      <Spinner
+        v-if="loading"
+        class="absolute"
+      />
+    </button>
+  </span>
 </template>

package/src/components/Button/ButtonContent.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <span>
+  <span class="text-sm leading-none">
     <slot />
   </span>
 </template>

package/src/components/Button/ButtonIcon.vue

@@ -1,7 +1,32 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { Image } from '../Image';
+
+withDefaults(defineProps<{
+  /** The alt text for the icon */
+  alt?: string | undefined;
+
+  /** The name of the icon to display */
+  name?: (() => void) | null;
+
+  /** The source of the icon to display */
+  source?: string | null;
+}>(), {
+  alt: undefined,
+  name: null,
+  source: null,
+});
+</script>
 
 <template>
-  <div class="h-4 w-4 -mt-0.5 -mb-0.5">
-    <slot />
+  <div class="flex-shrink-0 h-4 w-4 -mt-0.5 -mb-0.5">
+    <component
+      :is="name"
+      v-if="name"
+    />
+    <Image
+      v-if="source"
+      :alt="alt!"
+      :source="source"
+    />
   </div>
 </template>

package/src/components/Button/README.md

@@ -24,7 +24,7 @@ screen to avoid overwhelming users.
 
 ```js-vue
 <script lang="ts" setup>
-import { Button } from 'focus-ui';
+import { Button } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -42,7 +42,7 @@ Used most in the interface. Only use another style if a button requires more or
 
 ```js-vue
 <script lang="ts" setup>
-import { Button } from 'focus-ui';
+import { Button } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -62,7 +62,7 @@ they can feel stressful for users.
 
 ```js-vue
 <script lang="ts" setup>
-import { Button } from 'focus-ui';
+import { Button } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -70,24 +70,6 @@ import { Button } from 'focus-ui';
 </template>
 ```
 
-### Outline
-
-Used for actions that are less important than primary or secondary actions.
-
-<ComponentWrapper>
-  <Button variant="outline">Outline</Button>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Button } from 'focus-ui';
-</script>
-
-<template>
-  <Button variant="outline">Outline</Button>
-</template>
-```
-
 ### Ghost
 
 Used for less important or less commonly used actions. Ghost buttons are less prominent than other button styles,
@@ -98,7 +80,7 @@ Used for less important or less commonly used actions. Ghost buttons are less pr
 
 ```js-vue
 <script lang="ts" setup>
-import { Button } from 'focus-ui';
+import { Button } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -118,7 +100,7 @@ Use when a button has been pressed and the associated action is in progress.
 
 ```js-vue
 <script lang="ts" setup>
-import { Button } from 'focus-ui';
+import { Button } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -133,12 +115,33 @@ import { Button } from 'focus-ui';
 Use when a button needs to be paired with an icon to help convey its purpose.
 
 <ComponentWrapper>
-  <Button variant="primary">
-    <ButtonIcon>
-      <ArrowDownTrayIcon />
-    </ButtonIcon>
-    <ButtonContent>Button with icon</ButtonContent>
-  </Button>
+  <ComponentGrid>
+    <Button variant="primary">
+      <ButtonIcon :name="ArrowDownTrayIcon" />
+      <ButtonContent>Button with icon on the left</ButtonContent>
+    </Button>
+    <Button variant="primary">
+      <ButtonContent>Button with icon on the right</ButtonContent>
+      <ButtonIcon :name="ArrowDownTrayIcon" />
+    </Button>
+  </ComponentGrid>
+</ComponentWrapper>
+
+### Button with image
+
+Use when a button needs to be paired with an image to help convey its purpose.
+
+<ComponentWrapper>
+  <ComponentGrid>
+    <Button variant="secondary">
+      <ButtonIcon source="https://panel.returnless.test/img/integrations/demo-logo.svg" />
+      <ButtonContent>Create coupon</ButtonContent>
+    </Button>
+    <Button variant="secondary">
+      <ButtonContent>Button with icon on the right</ButtonContent>
+      <ButtonIcon source="https://panel.returnless.test/img/integrations/demo-logo.svg" />
+    </Button>
+  </ComponentGrid>
 </ComponentWrapper>
 
 ## Best practices

package/src/components/Button/index.ts

@@ -1,3 +1,5 @@
+export { type ButtonVariant, type ButtonProps } from './types';
+
 export { default as Button } from './Button.vue';
 export { default as ButtonContent } from './ButtonContent.vue';
 export { default as ButtonIcon } from './ButtonIcon.vue';

package/src/components/Button/types.ts

@@ -0,0 +1,30 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost';
+
+export interface ButtonProps {
+  /** Whether the button is disabled. */
+  disabled?: boolean;
+
+  /** Displays the button with a disclosure icon. Defaults to `down` when set to true. */
+  disclosure?: boolean;
+
+  /** Whether the button should open the link in a new tab. */
+  external?: boolean;
+
+  /** Whether the button should span the full width of its parent. (INTERNAL USE ONLY) */
+  fullWidth?: boolean;
+
+  /** The URL the button should navigate to. */
+  href?: string | null;
+
+  /** Whether the button is in a loading state. */
+  loading?: boolean;
+
+  /** The button size. (INTERNAL USE ONLY) */
+  size?: 'small' | 'normal';
+
+  /** The type of the button. */
+  type?: 'button' | 'reset' | 'submit';
+
+  /** The variant of the button. */
+  variant?: ButtonVariant;
+}

package/src/components/ButtonGroup/README.md

@@ -20,7 +20,7 @@ Button group displays multiple related actions stacked or in a horizontal row to
 
 ```js-vue
 <script lang="ts" setup>
-import { Button, ButtonGroup } from 'focus-ui';
+import { Button, ButtonGroup } from '@returnless/focus-ui';
 </script>
 
 <template>

package/src/components/Card/CardHelp.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { Link } from '@inertiajs/vue3';
+import { InformationCircleIcon } from '@heroicons/vue/16/solid';
+
+defineProps<{
+  href: string;
+}>();
+</script>
+
+<template>
+  <Link
+    :href="href"
+    class="ml-2 flex items-center rounded-full border border-transparent px-1 py-1 pr-2 text-xs font-normal leading-none text-slate-500 group hover:border-slate-300 hover:bg-slate-100"
+    native
+    target="_blank"
+    v-bind="$attrs"
+  >
+    <InformationCircleIcon class="h-4 w-4 group-hover:text-brand-500" />
+    <span class="ml-1 hidden text-black group-hover:block">
+      <slot />
+    </span>
+  </Link>
+</template>

package/src/components/Card/CardSection.vue

@@ -1,7 +1,22 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  flush?: boolean;
+}>(), {
+  flush: false,
+});
+
+const classList = computed((): Record<string, boolean> => {
+  return {
+    'py-6': props.flush,
+    'p-6': !props.flush,
+  };
+});
+</script>
 
 <template>
-  <div class="p-6">
+  <div :class="classList">
     <slot />
   </div>
 </template>

package/src/components/Card/CardTitle.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
+import { Heading } from '../Heading';
 </script>
 
 <template>
-  <div class="text-xl font-semibold leading-none">
-    <slot />
-  </div>
+  <Heading level="h2">
+    <div class="flex items-center">
+      <slot />
+    </div>
+  </Heading>
 </template>

package/src/components/Card/README.md

@@ -1,6 +1,21 @@
 <script lang="ts" setup>
-import { Button, Card, CardSection, CardDescription, CardFooter, CardHeader, CardTitle } from '../../src/components'; 
+import {
+  AspectRatio,
+  Button, 
+  ButtonIcon,
+  ButtonContent,
+  ButtonGroup,
+  Card, 
+  CardDescription, 
+  CardFooter,
+  CardHeader, 
+  CardHelp, 
+  CardSection, 
+  CardTitle,
+  Heading,
+} from '../../src/components'; 
 import api from '../component-meta/Card.json';
+import { ArrowDownTrayIcon } from '@heroicons/vue/16/solid'; 
 </script>
 
 # Card
@@ -15,7 +30,10 @@ content in a familiar and recognizable style.
 <ComponentWrapper>
   <Card>
     <CardHeader>
-      <CardTitle>Notifications</CardTitle>
+      <CardTitle>
+        Notifications
+        <CardHelp href="/help">Learn more</CardHelp>
+      </CardTitle>
       <CardDescription>You have 3 unread messages.</CardDescription>
     </CardHeader>
     <CardSection>
@@ -30,20 +48,24 @@ content in a familiar and recognizable style.
 ```js-vue
 <script lang="ts" setup>
 import {
-  Button,
-  Card,
-  CardSection,
-  CardDescription,
-  CardFooter,
-  CardHeader,
+  Button, 
+  Card, 
+  CardDescription, 
+  CardFooter, 
+  CardHeader, 
+  CardHelp, 
+  CardSection, 
   CardTitle,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 </script>
 
 <template>
   <Card>
     <CardHeader>
-      <CardTitle>Notifications</CardTitle>
+      <CardTitle>
+        Notifications
+        <CardHelp href="/help">Learn more</CardHelp>
+      </CardTitle>
       <CardDescription>You have 3 unread messages.</CardDescription>
     </CardHeader>
     <CardSection>
@@ -56,6 +78,71 @@ import {
 </template>
 ```
 
+### Example with media image
+
+<ComponentWrapper>
+  <div style="width: 400px;">
+    <Card>
+      <AspectRatio :ratio="16 / 9">
+        <img
+          src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg"
+          class="h-full w-full object-cover"
+        >
+      </AspectRatio>
+      <CardHeader>
+        <CardTitle>Focus-UI return form</CardTitle>
+        <CardDescription>Returnless webshop</CardDescription>
+      </CardHeader>
+      <CardSection>
+        <ButtonGroup>
+          <Button variant="secondary">Settings</Button>
+          <Button variant="ghost">Preview</Button>
+        </ButtonGroup>
+      </CardSection>
+    </Card>
+  </div>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  AspectRatio,
+  Button, 
+  ButtonGroup,
+  Card, 
+  CardDescription, 
+  CardFooter, 
+  CardHeader, 
+  CardHelp, 
+  CardSection, 
+  CardTitle,
+} from '@returnless/focus-ui';
+</script>
+
+<template>
+  <div style="width: 400px;">
+    <Card>
+      <AspectRatio :ratio="16 / 9">
+        <img
+          src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg"
+          class="h-full w-full object-cover"
+        >
+      </AspectRatio>
+      <CardHeader>
+        <CardTitle>Focus-UI return form</CardTitle>
+        <CardDescription>Returnless webshop</CardDescription>
+      </CardHeader>
+      <CardSection>
+        <ButtonGroup>
+          <Button variant="secondary">Settings</Button>
+          <Button variant="ghost">Preview</Button>
+        </ButtonGroup>
+      </CardSection>
+    </Card>
+  </div>
+</template>
+```
+
 ## Best practices
 
 Cards should: