@returnless/focus-ui 0.0.1

package/src/components/TopBar/TopBarUserMenu.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { Avatar } from '../Avatar';
+import { ChevronDownIcon } from '@heroicons/vue/16/solid';
+import { useTheme } from '../../composables';
+</script>
+
+<template>
+  <button
+    class="flex items-center rounded border px-3 py-2 shadow-sm space-x-2 hover:bg-slate-100"
+    :class="useTheme('focus')"
+  >
+    <Avatar
+      size="xs"
+      name="demo user"
+      initials="DU"
+    />
+    <p>demo@app.com</p>
+    <ChevronDownIcon class="h-4 w-4" />
+  </button>
+</template>

package/src/components/TopBar/index.ts

@@ -0,0 +1,6 @@
+export { default as TopBar } from './TopBar.vue';
+export { default as TopBarLogo } from './TopBarLogo.vue';
+export { default as TopBarNavigation } from './TopBarNavigation.vue';
+export { default as TopBarNavigationItem } from './TopBarNavigationItem.vue';
+export { default as TopBarSearch } from './TopBarSearch.vue';
+export { default as TopBarUserMenu } from './TopBarUserMenu.vue';

package/src/components/VisuallyHidden/README.md

@@ -0,0 +1,19 @@
+# Visually Hidden
+
+Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.
+
+## Best practices
+
+Visually hidden should:
+
+- Not be used if semantic markup can make content understandable to people using assistive technologies.
+- Be used to provide extra context when semantic markup isn't enough.
+- Be used on any content that is normally present but is being omitted.
+- Make sense in context when used with a screen reader.
+
+## Accessibility
+
+The visually hidden component styles text so that it’s not visible, but it is available to assistive technologies like
+screen readers and other text to speech programs.
+
+The component shouldn’t be used to hide interactive content.

package/src/components/VisuallyHidden/VisuallyHidden.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup></script>
+
+<template>
+  <span :class="$style.visuallyHidden">
+    <slot />
+  </span>
+</template>
+
+<style lang="css" module>
+/**
+ * styles referenced from GOV.UK design system
+ * https://github.com/h5bp/main.css/issues/12#issuecomment-451965809
+ */
+.visuallyHidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}
+</style>

package/src/components/VisuallyHidden/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,141 @@
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './Accordion';
+
+export { Alert, AlertDescription, AlertTitle } from './Alert';
+
+export {
+  AlertDialog,
+  AlertDialogActionButton,
+  AlertDialogCancelButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './AlertDialog';
+
+export { Avatar } from './Avatar';
+
+export { Badge, BadgeContent, BadgeIcon } from './Badge';
+
+export { Button, ButtonContent, ButtonIcon } from './Button';
+
+export { ButtonGroup } from './ButtonGroup';
+
+export {
+  Card,
+  CardSection,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from './Card';
+
+export { CategoryBar, CategoryBarItem } from './CategoryBar';
+
+export { Checkbox } from './Checkbox';
+
+export {
+  DatePicker,
+  DatePickerCard,
+} from './DatePicker';
+
+export {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListItem,
+  DescriptionListTerm,
+} from './DescriptionList';
+
+export {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateContent,
+  EmptyStateDescription,
+  EmptyStateTitle,
+} from './EmptyState';
+
+export {
+  Feed,
+  FeedItem,
+  FeedItemBlock,
+  FeedItemDateIndicator,
+  FeedItemIcon,
+  FeedItemSimple,
+} from './Feed';
+
+export { Form } from './Form';
+
+export { FormLayout } from './FormLayout';
+
+export { InputLabel } from './InputLabel';
+
+export { Link } from './Link';
+
+export {
+  MetricCard,
+  MetricCardHeader,
+  MetricCardLabel,
+  MetricCardSection,
+  MetricCardValue,
+} from './MetricCard';
+
+export {
+  Navigation,
+  NavigationItem,
+  NavigationSection,
+} from './Navigation';
+
+export {
+  Page,
+  PageDescription,
+  PageHeader,
+  PageTitle,
+} from './Page';
+
+export {
+  Pagination,
+  PaginationNextButton,
+  PaginationPreviousButton,
+} from './Pagination';
+
+export { PinInput } from './PinInput';
+
+export { ProgressBar, ProgressBarIndicator } from './ProgressBar';
+
+export { RadioButton } from './RadioButton';
+
+export { Select, SelectGroup, SelectOption } from './Select';
+
+export { Separator } from './Separator';
+
+export { Spinner } from './Spinner';
+
+export { StatusIndicator } from './StatusIndicator';
+
+export { Tabs, TabTrigger } from './Tabs';
+
+export { TextField } from './TextField';
+
+export { TextStyle } from './TextStyle';
+
+export { Toast, ToastGroup } from './Toast';
+
+export { Toggle } from './Toggle';
+
+export { Tooltip } from './Tooltip';
+
+export {
+  TopBar,
+  TopBarLogo,
+  TopBarNavigation,
+  TopBarNavigationItem,
+  TopBarSearch,
+  TopBarUserMenu,
+} from './TopBar';
+
+export { VisuallyHidden } from './VisuallyHidden';

package/src/composables/index.ts

@@ -0,0 +1,7 @@
+export { type TailwindColor, useTailwindColor } from './useTailwindColor';
+
+export { useTheme } from './useTheme';
+
+export { useToastNotifications } from './useToastNotifications';
+
+export { useUniqueId } from './useUniqueId';

package/src/composables/useTailwindColor.ts

@@ -0,0 +1,17 @@
+import colors from 'tailwindcss/colors';
+
+type TailwindColorMap = typeof colors;
+
+export type TailwindColor = keyof {
+  [K in keyof TailwindColorMap as TailwindColorMap[K] extends object ? K : never]: TailwindColorMap[K];
+};
+
+type TailwindVariant<T extends TailwindColor> = keyof TailwindColorMap[T];
+
+export function useTailwindColor<T extends TailwindColor>(color: T, variant: TailwindVariant<T> & string): TailwindColorMap[T][TailwindVariant<T>] {
+  if (!colors[color]) {
+    throw new Error(`Color '${color}' does not exist in the Tailwind CSS color palette.`);
+  }
+
+  return colors[color][variant];
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,29 @@
+const themeValues = {
+  focus: {
+    default: [
+      'focus:border-brand-500',
+      'focus:ring-brand-100',
+      'focus:ring-2',
+    ],
+  },
+
+  focusWithin: {
+    default: [
+      'focus-within:border-brand-500',
+      'focus-within:ring-brand-100',
+      'focus-within:ring-2',
+    ],
+  },
+};
+
+type ThemeValues = typeof themeValues;
+
+export function useTheme<T extends keyof ThemeValues>(value: T | Array<T>, variant: keyof ThemeValues[T] = 'default'): string | string[] {
+  if (Array.isArray(value)) {
+    return value
+      .map((v) => useTheme(v, variant))
+      .join(' ');
+  }
+
+  return themeValues[value][variant] as string[];
+}

package/src/composables/useToastNotifications.ts

@@ -0,0 +1,55 @@
+import { ref } from 'vue';
+import { useEventBus } from '@vueuse/core';
+import { useUniqueId } from './useUniqueId';
+
+export interface ToastNotification {
+  id: string;
+  message: string;
+}
+
+interface useToastNotification {
+  toastNotifications: any;
+  initializeNotificationHandlers: any;
+  closeToastNotification: any;
+  emitToastNotificationEvent: any;
+  emitToastNotificationEvents: any;
+}
+
+export function useToastNotifications(): useToastNotification {
+  const toastNotifications = ref<ToastNotification[]>([]);
+  const eventBus = useEventBus<ToastNotification>('toastNotifications');
+
+  function initializeNotificationHandlers(): void {
+    eventBus.on(function (event: ToastNotification): void {
+      toastNotifications.value.push(event);
+    });
+  }
+
+  function closeToastNotification(toastNotification: ToastNotification): void {
+    toastNotifications.value = toastNotifications.value.filter((notification: ToastNotification): boolean => {
+      return notification.id !== toastNotification.id;
+    });
+  }
+
+  function emitToastNotificationEvent(toastNotification: Omit<ToastNotification, 'id'>): void {
+    (toastNotification as ToastNotification).id = useUniqueId('toast-notification');
+
+    eventBus.emit(toastNotification as ToastNotification);
+  }
+
+  function emitToastNotificationEvents(toastNotifications: Omit<ToastNotification, 'id'>[]): void {
+    toastNotifications.forEach((toastNotification: ToastNotification): void => {
+      (toastNotification as ToastNotification).id = useUniqueId('toast');
+
+      emitToastNotificationEvent(toastNotification);
+    });
+  }
+
+  return {
+    toastNotifications,
+    initializeNotificationHandlers,
+    closeToastNotification,
+    emitToastNotificationEvent,
+    emitToastNotificationEvents,
+  };
+}

package/src/composables/useUniqueId.ts

@@ -0,0 +1,5 @@
+let id = 0;
+
+export function useUniqueId(prefix = 'id'): string {
+  return `${prefix}-${++id}`;
+}

package/src/index.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+[type="checkbox"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+[type="radio"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+[type="checkbox"]:checked,
+[type="radio"]:checked {
+  background-color: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  border-color: transparent;
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import * as components from './components';
+
+function install(app: App) {
+  for (const key in components) {
+    app.component(key, components[key]);
+  }
+}
+
+export default { install };
+
+export * from './components';