@returnless/focus-ui 0.0.2 → 0.0.4

package/src/components/AlertDialog/AlertDialogTitle.vue

@@ -1,7 +1,15 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { Heading } from '../Heading';
+import { inject } from 'vue';
+
+const alertDialogLabelledBy = inject<string>('alertDialogLabelledBy')!;
+</script>
 
 <template>
-  <h2 class="text-xl font-semibold leading-none">
+  <Heading
+    :id="alertDialogLabelledBy"
+    level="h2"
+  >
     <slot />
-  </h2>
+  </Heading>
 </template>

package/src/components/AlertDialog/README.md

@@ -28,21 +28,20 @@ A modal dialog that interrupts the user with important content and expects a res
   <Button @click="alertDialogOpen = true">
     Open Dialog
   </Button>
-
-<AlertDialog :open="alertDialogOpen" @cancel="alertDialogOpen = false">
-<AlertDialogContent>
-<AlertDialogHeader>
-<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-<AlertDialogDescription>
-This action cannot be undone. This will permanently delete your account and remove your data from our servers.
-</AlertDialogDescription>
-</AlertDialogHeader>
-<AlertDialogFooter>
-<AlertDialogCancelButton>Cancel</AlertDialogCancelButton>
-<AlertDialogActionButton>Continue</AlertDialogActionButton>
-</AlertDialogFooter>
-</AlertDialogContent>
-</AlertDialog>
+  <AlertDialog :open="alertDialogOpen" @cancel="alertDialogOpen = false">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancelButton>Cancel</AlertDialogCancelButton>
+        <AlertDialogActionButton>Continue</AlertDialogActionButton>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
 </ComponentWrapper>
 
 ```js-vue
@@ -57,7 +56,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   Button,
-} from 'focus-ui';
+} from '@returnless/focus-ui';
 
 const alertDialogOpen = ref(false);
 </script>

package/src/components/AspectRatio/AspectRatio.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  /** The aspect ratio of the element. */
+  ratio?: number;
+}>(), {
+  ratio: 1,
+});
+</script>
+
+<template>
+  <div
+    :style="{ paddingBottom: `${100 / ratio}%` }"
+    class="relative w-full"
+  >
+    <div class="absolute inset-0 [&>*]:object-cover [&>*]:w-full [&>*]:h-full">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/AspectRatio/README.md

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { AspectRatio } from '../../src/components'; 
+import api from '../component-meta/AspectRatio.json';
+</script>
+
+# Aspect Ratio
+
+The AspectRatio component is a layout component that enforces a fixed aspect ratio on its children. This is useful when
+you want to ensure that a child component maintains a specific aspect ratio, regardless of the size of the parent
+component.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <div style="width: 400px;">
+    <AspectRatio :ratio="16 / 9">
+      <img src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg">
+    </AspectRatio>
+  </div>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { AspectRatio } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <div style="width: 400px;">
+    <AspectRatio :ratio="16 / 9">
+      <img src="https://www.retourneren.nl/media/catalog/product/cache/8d4d2075b1a30681853bef5bdc41b164/r/e/returnless_afbeelding.jpg">
+    </AspectRatio>
+  </div>
+</template>
+```

package/src/components/AspectRatio/index.ts

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

package/src/components/Avatar/Avatar.vue

@@ -1,47 +1,59 @@
 <script lang="ts" setup>
 import { UserIcon } from '@heroicons/vue/16/solid';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { AspectRatio } from '../AspectRatio';
+import { Image } from '../Image';
 
 const props = withDefaults(defineProps<{
   /** The size of the avatar */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /** The name of the person, company or entity */
-  name?: string | null;
+  name?: string | undefined;
 
   /** Initials of person to display. */
   initials?: string | null;
 
   /** URL of the avatar image which falls back to initials if the image fails to load. */
-  source?: string | null;
+  source?: string | undefined;
 
   /** Accessible label for the avatar image. */
   accessibilityLabel?: string | null;
 }>(), {
   size: 'md',
-  name: null,
+  name: undefined,
   initials: null,
-  source: null,
+  source: undefined,
   accessibilityLabel: null,
 });
 
-const classList = computed(() => {
+enum ImageLoadingState {
+  Pending = 'PENDING',
+  Loaded = 'LOADED',
+  Errored = 'ERRORED',
+}
+
+const imageLoadingState = ref<ImageLoadingState>(ImageLoadingState.Pending);
+
+const classList = computed((): Record<string, boolean>[] => {
   return [
     { 'w-4 h-4': props.size === 'xs' },
     { 'w-6 h-6': props.size === 'sm' },
     { 'w-8 h-8': props.size === 'md' },
     { 'w-10 h-10': props.size === 'lg' },
     { 'w-12 h-12': props.size === 'xl' },
+
+    { 'bg-slate-200': imageLoadingState.value !== ImageLoadingState.Loaded },
   ];
 });
 
-const iconSize = computed(() => {
+const iconSize = computed((): Record<string, boolean>[] => {
   return [
     { 'w-3 h-3': props.size === 'xs' },
   ];
 });
 
-const textSize = computed(() => {
+const textSize = computed((): Record<string, boolean>[] => {
   return [
     { 'text-xs': props.size === 'xs' },
     { 'text-xs': props.size === 'sm' },
@@ -56,23 +68,55 @@ function renderInitials(initials: string): string {
     ? initials?.slice(0, 1)
     : initials;
 }
+
+function handleImageError(): void {
+  imageLoadingState.value = ImageLoadingState.Errored;
+}
+
+function handleImageLoad(): void {
+  imageLoadingState.value = ImageLoadingState.Loaded;
+}
+
+const accessibilityLabelValue = computed((): string | undefined => {
+  const accessibilityLabel = props.accessibilityLabel || props.name;
+
+  return accessibilityLabel
+    ? accessibilityLabel
+    : undefined;
+});
 </script>
 
 <template>
-  <div
-    class="relative flex items-center justify-center rounded bg-slate-200"
+  <span
+    :aria-label="accessibilityLabelValue"
     :class="classList"
+    class="relative flex items-center justify-center overflow-hidden rounded"
   >
     <UserIcon
       v-if="!initials"
-      role="img"
       :class="iconSize"
+      role="img"
     />
     <span
-      class="font-semibold"
+      v-if="source"
+      class="absolute h-full w-full"
+    >
+      <AspectRatio>
+        <Image
+          :alt="name!"
+          :class="{ 'hidden': imageLoadingState !== ImageLoadingState.Loaded}"
+          :source="source"
+          @error="handleImageError"
+          @load="handleImageLoad"
+        />
+      </AspectRatio>
+    </span>
+    <span
+      v-if="initials && imageLoadingState !== ImageLoadingState.Loaded"
       :class="textSize"
+      class="font-semibold"
     >
       {{ renderInitials(initials) }}
     </span>
-  </div>
+  </span>
 </template>

package/src/components/Avatar/README.md

@@ -17,7 +17,7 @@ Avatars are used to show a thumbnail representation of an individual or business
 
 ```js-vue
 <script lang="ts" setup>
-import { Avatar } from 'focus-ui';
+import { Avatar } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -35,7 +35,7 @@ import { Avatar } from 'focus-ui';
 
 ```js-vue
 <script lang="ts" setup>
-import { Avatar } from 'focus-ui';
+import { Avatar } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -66,7 +66,7 @@ import { Avatar } from 'focus-ui';
 
 ```js-vue
 <script lang="ts" setup>
-import { Avatar } from 'focus-ui';
+import { Avatar } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -109,12 +109,6 @@ For avatars, we recommend using a format that describes what will show in the im
 
 ## Accessibility
 
-### Structure
-
-The avatar component uses a generated scalable vector graphics (SVG) file, which can cause challenges for users that
-use assistive technologies. To create a standard experience, the `<img>` is hidden from assistive technologies by
-using an empty `alt` attribute, and replaced with a `<span>` that has `role="img"`.
-
 ### Labeling
 
 The avatar component represents content, and should have a text equivalent for users using assistive technologies.

package/src/components/Badge/Badge.vue

@@ -25,7 +25,7 @@ const colorValues = computed((): CSSProperties => {
   };
 });
 
-const classList = computed(() => {
+const classList = computed((): Record<string, any> => {
   return [
     { 'text-xs px-2 py-1': props.size === 'sm' },
     { 'text-sm px-3 py-1.5': props.size === 'md' },

package/src/components/Badge/README.md

@@ -24,7 +24,7 @@ Badges are used to inform users of the tone of an object or of an action that's
 
 ```js-vue
 <script lang="ts" setup>
-import { Badge } from 'focus-ui';
+import { Badge } from '@returnless/focus-ui';
 </script>
 
 <template>
@@ -43,7 +43,7 @@ Badges can include icons to help users quickly identify the tone of an object or
 <ComponentWrapper>
   <ComponentGrid>
     <Badge color="green">
-      <BadgetContent>+ 25%</BadgetContent>
+      <BadgeContent>+ 25%</BadgeContent>
       <BadgeIcon>
         <ArrowTrendingUpIcon />
       </BadgeIcon>
@@ -52,20 +52,20 @@ Badges can include icons to help users quickly identify the tone of an object or
       <BadgeIcon>
         <ArrowTrendingDownIcon />
       </BadgeIcon>
-      <BadgetContent>- 25%</BadgetContent>
+      <BadgeContent>- 25%</BadgeContent>
     </Badge>
   </ComponentGrid>
 </ComponentWrapper>
 
 ```js-vue
 <script lang="ts" setup>
-import { Badge, BadgetContent, BadgeIcon } from 'focus-ui';
+import { Badge, BadgeContent, BadgeIcon } from '@returnless/focus-ui';
 import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
 </script>
 
 <template>
   <Badge color="green">
-    <BadgetContent>+ 25%</BadgetContent>
+    <BadgeContent>+ 25%</BadgeContent>
     <BadgeIcon>
       <ArrowTrendingUpIcon />
     </BadgeIcon>
@@ -74,7 +74,7 @@ import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/so
     <BadgeIcon>
       <ArrowTrendingDownIcon />
     </BadgeIcon>
-    <BadgetContent>- 25%</BadgetContent>
+    <BadgeContent>- 25%</BadgeContent>
   </Badge>
 </template>
 ```
@@ -92,19 +92,19 @@ Badges come in three sizes: small, medium, and large.
       <BadgeIcon>
         <ArrowTrendingUpIcon />
       </BadgeIcon>
-      <BadgetContent>sm with icon</BadgetContent>
+      <BadgeContent>sm with icon</BadgeContent>
     </Badge>
     <Badge color="blue" size="md">
       <BadgeIcon>
         <ArrowTrendingUpIcon />
       </BadgeIcon>
-      <BadgetContent>md with icon</BadgetContent>
+      <BadgeContent>md with icon</BadgeContent>
     </Badge>
     <Badge color="red" size="lg">
       <BadgeIcon>
         <ArrowTrendingDownIcon />
       </BadgeIcon>
-      <BadgetContent>lg with icon</BadgetContent>
+      <BadgeContent>lg with icon</BadgeContent>
     </Badge>
   </ComponentGrid>
 </ComponentWrapper>

package/src/components/BarChart/BarChart.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import collect, { Collection } from 'collect.js';
+import { computed } from 'vue';
+import { TailwindColor, useTailwindColor } from '../../composables';
+import { BarChartContainer } from './';
+import { Legend, LegendItem } from '../Legend';
+
+type DataPoint = {
+  label: string;
+  value: number;
+  color: TailwindColor;
+};
+
+const props = defineProps<{
+  /** The data points to display */
+  dataPoints: DataPoint[];
+
+  /** The height of the chart */
+  height: number;
+}>();
+
+const dataPointCollection = computed((): Collection<DataPoint> => {
+  return collect(props.dataPoints);
+});
+
+const max = computed((): number => {
+  return dataPointCollection.value.max('value');
+});
+
+function dataPointHeight(dataPoint: DataPoint): number {
+  return dataPoint.value / max.value * 100;
+}
+
+function getColorValue(dataPoint: DataPoint): string {
+  return useTailwindColor(dataPoint.color, '400');
+}
+
+const axisLabels = computed(() => {
+  return [
+    props.dataPoints[0].label,
+    props.dataPoints[props.dataPoints.length - 1].label,
+  ];
+});
+</script>
+
+<template>
+  <BarChartContainer>
+    <Legend>
+      <LegendItem color="blue">
+        En-route
+      </LegendItem>
+    </Legend>
+
+    <div class="space-y-2">
+      <div
+        class="flex space-x-1"
+        :style="{ height: `${height}px` }"
+      >
+        <div
+          v-for="(dataPoint, dataPointIndex) in dataPoints"
+          :key="dataPointIndex"
+          :style="{ width: `${100 / dataPoints.length}%` }"
+          class="flex h-full items-end rounded-sm bg-slate-100"
+        >
+          <div
+            class="w-full rounded-sm"
+            :style="{
+              height: `${dataPointHeight(dataPoint)}%`,
+              backgroundColor: getColorValue(dataPoint),
+            }"
+          />
+        </div>
+      </div>
+      <div class="flex justify-between">
+        <div>{{ axisLabels[0] }}</div>
+        <div>{{ axisLabels[1] }}</div>
+      </div>
+    </div>
+  </BarChartContainer>
+</template>

package/src/components/{MetricCard/MetricCardHeader.vue → BarChart/BarChartContainer.vue}

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="relative space-y-2">
+  <div class="space-y-4">
     <slot />
   </div>
 </template>

package/src/components/BarChart/BarChartStacked.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import collect from 'collect.js';
+import { computed } from 'vue';
+import { TailwindColor, useTailwindColor } from '../../composables';
+import { Legend, LegendItem } from '../Legend';
+import { BarChartContainer } from './index';
+
+type DataPointStack = {
+  label: string;
+  dataPoints: DataPoint[];
+};
+
+type DataPoint = {
+  label: string;
+  value: number;
+  color: TailwindColor;
+};
+
+const props = defineProps<{
+  dataPoints: DataPointStack[];
+  height: number;
+}>();
+
+const max = computed((): number => {
+  return collect(props.dataPoints)
+    .map((dataPointStack: DataPointStack) => collect(dataPointStack.dataPoints).sum('value'))
+    .max();
+});
+
+function getDataPointHeight(dataPoint: DataPoint): number {
+  return dataPoint.value / max.value * 100;
+}
+
+function getColorValue(dataPoint: DataPoint): string {
+  return useTailwindColor(dataPoint.color, '400');
+}
+
+const axisLabels = computed((): string[] => {
+  return [
+    props.dataPoints[0].label,
+    props.dataPoints[props.dataPoints.length - 1].label,
+  ];
+});
+</script>
+
+<template>
+  <BarChartContainer>
+    <Legend>
+      <LegendItem color="teal">
+        Announced
+      </LegendItem>
+      <LegendItem color="green">
+        Sent
+      </LegendItem>
+      <LegendItem color="lime">
+        En-route
+      </LegendItem>
+      <LegendItem color="yellow">
+        Delivered
+      </LegendItem>
+      <LegendItem color="amber">
+        En-route
+      </LegendItem>
+    </Legend>
+    <div class="space-y-2">
+      <div
+        class="flex space-x-1"
+        :style="{ height: `${height}px` }"
+      >
+        <div
+          v-for="(dataStack, dataStackIndex) in dataPoints"
+          :key="dataStackIndex"
+          :style="{ width: `${100 / dataPoints.length}%` }"
+          class="flex flex-col-reverse h-full items-end rounded-sm bg-slate-100 overflow-hidden"
+        >
+          <div
+            v-for="(dataPoint, dataPointIndex) in dataStack.dataPoints"
+            :key="dataPointIndex"
+            class="w-full"
+            :style="{
+              height: `${getDataPointHeight(dataPoint)}%`,
+              backgroundColor: getColorValue(dataPoint),
+            }"
+          />
+        </div>
+      </div>
+      <div class="flex justify-between">
+        <div>{{ axisLabels[0] }}</div>
+        <div>{{ axisLabels[1] }}</div>
+      </div>
+    </div>
+  </BarChartContainer>
+</template>

package/src/components/BarChart/README.md

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { BarChart, BarChartStacked, Card, CardSection, Legend, LegendItem } from '../../src/components'; 
+import api from '../component-meta/BarChart.json';
+
+const dataPoints = Array.from({ length: 30 }).map((_, index) => {
+  return {
+    value: Math.floor(Math.random() * 200),
+    label: `data-point ${index}`,
+    color: 'blue',
+  };
+});
+
+const stackedDataPoints = Array.from({ length: 30 }).map((_, index) => {
+  return {
+    label: `data-point ${index}`,
+    dataPoints: Array.from({ length: 5 }).map((_, index) => {
+      return {
+        value: Math.floor(Math.random() * 200),
+        label: `data-point ${index}`,
+        color: ['teal', 'green', 'lime', 'yellow', 'amber'][index],
+      };
+    }),
+  };
+});
+</script>
+
+# Bar Chart
+
+<ComponentApi :api="api" />
+
+## Usage
+
+Use the `BarChart` component to display a single data point in a bar.
+
+<ComponentWrapper>
+  <Card>
+    <CardSection>
+      <BarChart :data-points="dataPoints" height="150" />
+    </CardSection>
+  </Card>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { BarChart, Card, CardSection } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <Card>
+    <CardSection>
+      <BarChart :data-points="dataPoints" height="200" />
+    </CardSection>
+  </Card>
+</template>
+```
+
+### Stacked Bar Chart
+
+Use the `BarChartStacked` component to display multiple data points in a single bar.
+
+<ComponentWrapper>
+  <Card>
+    <CardSection>
+      <BarChartStacked :data-points="stackedDataPoints" height="150">
+        test
+      </BarChartStacked>
+    </CardSection>
+  </Card>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { BarChartStacked, Card, CardSection } from '@returnless/focus-ui';
+</script>
+
+<template>
+  <Card>
+    <CardSection>
+      <BarChartStacked :data-points="dataPoints" height="200" />
+    </CardSection>
+  </Card>
+</template>
+```

package/src/components/BarChart/index.ts

@@ -0,0 +1,3 @@
+export { default as BarChart } from './BarChart.vue';
+export { default as BarChartContainer } from './BarChartContainer.vue';
+export { default as BarChartStacked } from './BarChartStacked.vue';

package/src/components/Breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <nav aria-label="breadcrumb">
+    <slot />
+  </nav>
+</template>

package/src/components/Breadcrumbs/BreadcrumbEllipsis.vue

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

package/src/components/{MetricCard/MetricCardValue.vue → Breadcrumbs/BreadcrumbItem.vue}

@@ -2,7 +2,7 @@
 </script>
 
 <template>
-  <div class="text-xl font-bold leading-none">
+  <li class="inline-flex items-center text-slate-500">
     <slot />
-  </div>
+  </li>
 </template>