@returnless/focus-ui 0.0.1

package/src/components/FormLayout/README.md

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { FormLayout, TextField } from '../../src/components'; 
+import api from '../component-meta/Form.json';
+</script>
+
+# Form layout
+
+Use form layout to arrange fields with a form using standard spacing. By default, it stacks fields vertically but also
+support horizontal groups of fields.
+
+## Usage
+
+<ComponentWrapper>
+  <FormLayout>
+    <TextField label="Name" />
+    <TextField label="Email" />
+  </FormLayout>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { FormLayout, TextField } from 'focus-ui';
+</script>
+
+<template>
+  <FormLayout>
+    <TextField label="Name" />
+    <TextField label="Email" type="email" />
+  </FormLayout>
+</template>
+```
+
+## Best practices
+
+Forms should:
+
+- Be considerate of users’ time and privacy by only asking for information that’s required
+- Group related tasks under section titles to provide more context and make the interface easier to scan
+- Follow a logical, predictable order—for example, always ask for first-name first, and last-name second on forms
+
+## Content guidelines
+
+### Form section title
+
+Form section titles should follow the content guidelines for headings and subheadings.
+
+### Field label
+
+A label is a short description of a field. Labels are not help text, and they shouldn’t be used to provide instruction,
+but they should be meaningful and clearly indicate what is expected. Labels should be:
+
+- Placed above or beside the form field
+- Short and succinct (1–3 words)
+- Written in sentence case (the first word capitalized, the rest lowercase)
+
+### Help text
+
+Help text provides extra guidance to people filling out a form field. This text is easy for people to ignore, so users
+should not need to depend on it to fill out a form. As with all forms, help text should be succinct and easy to read.

package/src/components/FormLayout/index.ts

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

package/src/components/InputLabel/InputLabel.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { TextStyle } from '../TextStyle';
+
+const props = withDefaults(defineProps<{
+  /** The label text. */
+  label: string;
+
+  /** The ID of the input the label is associated with. */
+  labelFor: string;
+
+  /** Whether the label should be hidden. */
+  labelHidden?: boolean;
+}>(), {
+  labelHidden: false,
+});
+
+const componentType = computed(() => props.labelHidden ? VisuallyHidden : 'label');
+</script>
+
+<template>
+  <component
+    :is="componentType"
+    :for="labelFor"
+    class="block w-fit cursor-pointer truncate text-sm leading-0 align-baseline"
+  >
+    <TextStyle variant="strong">
+      {{ label }}
+    </TextStyle>
+  </component>
+</template>

package/src/components/InputLabel/index.ts

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

package/src/components/Link/Link.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+
+const props = withDefaults(defineProps<{
+  /** The aria-label attribute to be applied to the link */
+  accessibilityLabel?: string | null;
+
+  /** The href attribute to be applied to the link */
+  href: string;
+
+  /** Whether the link should be rendered as a native anchor element */
+  native?: boolean;
+}>(), {
+  accessibilityLabel: null,
+  native: false,
+});
+
+const componentType = computed(() => {
+  return props.native ? 'a' : Link;
+});
+</script>
+
+<template>
+  <component
+    :is="componentType"
+    :aria-label="accessibilityLabel"
+    :href="href"
+    v-bind="$attrs"
+    :class="[
+      'text-brand-500',
+      'cursor-pointer',
+      'hover:underline'
+    ]"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/Link/README.md

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import { Link } from '../../src/components'; 
+import api from '../component-meta/Link.json';
+</script>
+
+# Link
+
+Links take users to another place, and usually appear within or directly following a sentence.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+Use for text links inside a paragraph or for standalone text. Default links open in the same browser tab.
+
+<ComponentWrapper>
+  <Link href="my-page">A link</Link>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Link } from 'focus-ui';
+</script>
+
+<template>
+  <Link href="my-page">A link</Link>
+</template>
+```
+
+## Best practices
+
+### Buttons versus links
+
+Links are used primarily for navigation, and usually appear within or directly following a sentence.
+
+Buttons are used primarily for actions, such as "Add", "Close", "Cancel", or "Save". The HTML that renders for
+the `Button` and `Link` components carriers meaning. Using these components intentionally and consistently results in:
+
+- A more inclusive experience for assistive technology users.
+- A more cohesive visual experience for sighted users.
+- Products that are easier to maintain at scale.
+
+### Open a new tap only when necessary
+
+Use default links whenever possible to avoid disorienting users and causing accessibility problems by opening a new tab.
+
+External links should be used when users are:
+
+- Performing a task or workflow, link creating a product.
+- Navigating to a page outside the application.
+
+### No icon
+
+Avoid using the `external icon`, as it can add unnecessary visual load inside a sentence or when accompanied by 
+other content. Instead, add clarity to external links through clear link text and predictable placement of the link 
+in a user's workflow.
+
+Edge cases: External icons should not be used to indicate a new tab or window is being opened. However, they may be 
+used sparingly in features where symbols help users scan and pick from a list of several kinds of navigation options.
+
+## Content guidelines
+
+Links need to be clear and predictable. Users should be able to anticipate what will happen when they select a link. 
+Never mislead someone by mislabeling a link.
+
+Links should never use "click here" or "here" as link text.
+
+### Links in sentences
+
+Links in full sentences shouldn't link the entire sentence, only the text that describes where users go when they 
+select a link.
+
+It's better for internationalization to have only single terms or small parts of phrases linked. Linking a full 
+phrase is problematic because the word order might change, which would break the link into two parts.
+
+### Links outside of sentences
+
+Links that aren't in full sentences should use the {verb + noun} pattern and not be punctuated, except question marks.
+
+### "Learn more" links
+
+When linking out to documentation from help text in the admin, link the relevant keywords. In general, don't add 
+another sentence starting with "Learn more...", because it's repetitive and takes up unnecessary space.
+
+Only add a "Learn more..." sentence if the help text addresses more than one concept, each of which could be linked 
+to their own help doc. In that situation, pick the most appropriate link and contextualize it with "Learn more...".
+
+## Accessibility
+
+Use the `href` prop to give the link component a valid `href` value. This allows the element to be identified as a 
+link to assistive technologies and gives it default keyboard support.
+
+The Link component is underlined to give interactive elements a shape. This allows links to not rely on color from 
+being the only way users can tell if an element is interactive.
+
+### Submitting data
+
+Users generally expect links to navigate, and not to submit data or take action. If you need a component that 
+doesn't have a URL associated with it, then use the `button component` instead.
+
+### Labeling
+
+Give text links text that clearly describes their purpose.
+
+The `accessibilityLabel` prop adds an `aria-label` attribute to the link, which can be accessed by assistive 
+technologies like screen readers. Typically, this label text replaces the visual text on the link for users who use 
+assistive technology.
+
+To provide consistence and clarity:
+
+- Use the same text for links that navigate to the same content.
+- Use different text for links that navigate to different content.
+
+### Keyboard support
+
+Links use browser defaults for keyboard interaction.
+
+- Give links keyboard focus with the tab key (or shift + tab when tabbing backwards).
+- Activate links with the enter/return key.

package/src/components/Link/index.ts

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

package/src/components/MetricCard/MetricCard.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { Card } from '../Card';
+</script>
+
+<template>
+  <Card>
+    <div class="divide-y">
+      <slot />
+    </div>
+  </Card>
+</template>

package/src/components/MetricCard/MetricCardHeader.vue

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

package/src/components/MetricCard/MetricCardLabel.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { TextStyle } from '../TextStyle';
+</script>
+
+<template>
+  <TextStyle variant="subdued">
+    <slot />
+  </TextStyle>
+</template>

package/src/components/MetricCard/MetricCardSection.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CardSection } from '../Card';
+</script>
+
+<template>
+  <CardSection>
+    <div class="space-y-8">
+      <slot />
+    </div>
+  </CardSection>
+</template>

package/src/components/MetricCard/MetricCardValue.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="text-xl font-bold leading-none">
+    <slot />
+  </div>
+</template>

package/src/components/MetricCard/README.md

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import {
+  Badge,
+  BadgeContent,
+  BadgeIcon,
+  MetricCard,
+  MetricCardHeader,
+  MetricCardLabel,
+  MetricCardSection,
+  MetricCardValue,
+} from '../../src/components'; 
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
+import api from '../component-meta/MetricCard.json'; 
+</script>
+
+# Metric Card
+
+The Metric Card component is used to display a metric value with a label and an optional icon.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <div style="max-width: 350px;">
+    <MetricCard>
+      <MetricCardSection>
+        <MetricCardHeader>
+          <MetricCardLabel>Missed Revenue</MetricCardLabel>
+          <MetricCardValue>&euro; 325,44</MetricCardValue>
+        </MetricCardHeader>
+        <Badge color="green">
+          <BadgetContent>+ 25%</BadgetContent>
+          <BadgeIcon>
+            <ArrowTrendingUpIcon />
+          </BadgeIcon>
+        </Badge>
+      </MetricCardSection>
+      <MetricCardSection>
+        <MetricCardHeader>
+          <MetricCardLabel>Product Costs</MetricCardLabel>
+          <MetricCardValue>&euro; 204,00</MetricCardValue>
+        </MetricCardHeader>
+      </MetricCardSection>
+      <MetricCardSection>
+        <MetricCardHeader>
+          <MetricCardLabel>Estimated Lost Margin</MetricCardLabel>
+          <MetricCardValue>&euro; 121,44</MetricCardValue>
+        </MetricCardHeader>
+      </MetricCardSection>
+    </MetricCard>
+  </div>
+</ComponentWrapper>

package/src/components/MetricCard/index.ts

@@ -0,0 +1,5 @@
+export { default as MetricCard } from './MetricCard.vue';
+export { default as MetricCardHeader } from './MetricCardHeader.vue';
+export { default as MetricCardLabel } from './MetricCardLabel.vue';
+export { default as MetricCardSection } from './MetricCardSection.vue';
+export { default as MetricCardValue } from './MetricCardValue.vue';

package/src/components/Navigation/Navigation.vue

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

package/src/components/Navigation/NavigationItem.vue

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

package/src/components/Navigation/NavigationSection.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { TextStyle } from '../TextStyle';
+
+withDefaults(defineProps<{
+  /** The label for the navigation section. */
+  label: string | null;
+}>(), {
+  label: null,
+});
+</script>
+
+<template>
+  <div class="pb-8">
+    <TextStyle
+      v-if="label"
+      variant="strong"
+    >
+      <p class="px-3 py-2">
+        {{ label }}
+      </p>
+    </TextStyle>
+
+    <div class="space-y-0.5">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/Navigation/README.md

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { Navigation, NavigationItem, NavigationSection } from '../../src/components'; 
+import api from '../component-meta/Navigation.json';
+import { UserIcon, HandThumbDownIcon, QuestionMarkCircleIcon, BoltIcon } from '@heroicons/vue/16/solid';
+</script>
+
+# Navigation
+
+The navigation component is used to display the primary navigation in the sidebar of the interface of an application.
+Navigation includes a list of links that users use to move between sections of the application.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <Navigation>
+    <NavigationSection>
+      <NavigationItem>General</NavigationItem>
+    </NavigationSection>
+    <NavigationSection label="Workflow management">
+      <NavigationItem>
+        <template #icon>
+          <HandThumbDownIcon />
+        </template>
+        Return reasons
+      </NavigationItem>
+      <NavigationItem active>
+        <template #icon>
+          <QuestionMarkCircleIcon />
+        </template>
+        Return questions
+      </NavigationItem>
+      <NavigationItem>
+        <template #icon>
+          <BoltIcon />
+        </template>
+        Automations
+      </NavigationItem>
+    </NavigationSection>
+  </Navigation>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Navigation, NavigationItem, NavigationSection } from 'focus-ui';
+import { UserIcon, HandThumbDownIcon, QuestionMarkCircleIcon, BoltIcon } from '@heroicons/vue/16/solid';
+</script>
+
+<template>
+  <Navigation>
+    <NavigationSection>
+      <NavigationItem>General</NavigationItem>
+    </NavigationSection>
+    <NavigationSection label="Workflow management">
+      <NavigationItem>
+        <template #icon>
+          <HandThumbDownIcon />
+        </template>
+        Return reasons
+      </NavigationItem>
+      <NavigationItem active>
+        <template #icon>
+          <QuestionMarkCircleIcon />
+        </template>
+        Return questions
+      </NavigationItem>
+      <NavigationItem>
+        <template #icon>
+          <BoltIcon />
+        </template>
+        Automations
+      </NavigationItem>
+    </NavigationSection>
+  </Navigation>
+</template>
+```
+
+## Best practices
+
+The navigation component should:
+
+- Contain primary navigation items that perform an action when clicked. Each action should navigate to a URL or
+  trigger another action like a modal overlay.
+- Only use secondary actions for supplementary actions to the primary actions.
+- Provide a non-primary link or action as a secondary action to the section or an item.
+- Group navigation items into sections based on related categories.
+- Use a section title to clarify the category of a section.

package/src/components/Navigation/index.ts

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

package/src/components/Page/Page.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { Component, computed, h, useSlots } from 'vue';
+
+const props = defineProps<{
+  /** Navigation component to render in the left column */
+  navigation?: Component;
+}>();
+
+const slots = useSlots();
+
+const hasNavigation = computed(() => props.navigation || !!slots['page-navigation']);
+
+const PageNavigation = props.navigation
+  ? h(props.navigation)
+  : h('div');
+
+const contentClassList = computed(() => {
+  return hasNavigation.value ? 'col-span-9' : 'col-span-12';
+});
+</script>
+
+<template>
+  <div class="mx-auto max-w-8xl p-8">
+    <div class="grid grid-cols-12 gap-x-4">
+      <div
+        v-if="hasNavigation"
+        class="col-span-3"
+      >
+        <PageNavigation />
+        <slot name="page-navigation" />
+      </div>
+
+      <div :class="contentClassList">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Page/PageDescription.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { TextStyle } from '../TextStyle';
+</script>
+
+<template>
+  <p>
+    <TextStyle variant="subdued">
+      <slot />
+    </TextStyle>
+  </p>
+</template>

package/src/components/Page/PageHeader.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ArrowLeftIcon } from '@heroicons/vue/16/solid';
+
+type BackAction = {
+  content: string;
+  href: string;
+};
+
+withDefaults(defineProps<{
+  /** The back action to display in the header. */
+  backAction?: BackAction | null;
+}>(), {
+  backAction: null,
+});
+</script>
+
+<template>
+  <div class="mb-12 flex">
+    <div
+      v-if="backAction"
+      class="mr-4 mt-0.5"
+    >
+      <button class="rounded bg-slate-200 p-1 hover:bg-slate-300">
+        <ArrowLeftIcon class="h-4 w-4" />
+      </button>
+    </div>
+
+    <div class="flex flex-grow flex-col space-y-1.5">
+      <slot />
+    </div>
+
+    <slot name="page-header-actions" />
+  </div>
+</template>

package/src/components/Page/PageTitle.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <h1 class="text-2xl font-semibold leading-none">
+    <slot />
+  </h1>
+</template>