@returnless/focus-ui 0.0.1

package/src/components/Badge/README.md

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { Badge, BadgeContent, BadgeIcon } from '../../src/components'; 
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
+import api from '../component-meta/Badge.json';
+</script>
+
+# Badge
+
+Badges are used to inform users of the tone of an object or of an action that's been taken.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <ComponentGrid>
+    <Badge color="slate">Fulfilled</Badge>
+    <Badge color="blue">Draft</Badge>
+    <Badge color="green">Active</Badge>
+    <Badge color="yellow">Open</Badge>
+    <Badge color="red">Action required</Badge>
+  </ComponentGrid>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Badge } from 'focus-ui';
+</script>
+
+<template>
+  <Badge color="slate">Fulfilled</Badge>
+  <Badge color="blue">Draft</Badge>
+  <Badge color="green">Active</Badge>
+  <Badge color="yellow">Open</Badge>
+  <Badge color="red">Action required</Badge>
+</template>
+```
+
+### Badges with icons
+
+Badges can include icons to help users quickly identify the tone of an object or action.
+
+<ComponentWrapper>
+  <ComponentGrid>
+    <Badge color="green">
+      <BadgetContent>+ 25%</BadgetContent>
+      <BadgeIcon>
+        <ArrowTrendingUpIcon />
+      </BadgeIcon>
+    </Badge>
+    <Badge color="red">
+      <BadgeIcon>
+        <ArrowTrendingDownIcon />
+      </BadgeIcon>
+      <BadgetContent>- 25%</BadgetContent>
+    </Badge>
+  </ComponentGrid>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Badge, BadgetContent, BadgeIcon } from 'focus-ui';
+import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
+</script>
+
+<template>
+  <Badge color="green">
+    <BadgetContent>+ 25%</BadgetContent>
+    <BadgeIcon>
+      <ArrowTrendingUpIcon />
+    </BadgeIcon>
+  </Badge>
+  <Badge color="red">
+    <BadgeIcon>
+      <ArrowTrendingDownIcon />
+    </BadgeIcon>
+    <BadgetContent>- 25%</BadgetContent>
+  </Badge>
+</template>
+```
+
+### Badge sizes
+
+Badges come in three sizes: small, medium, and large.
+
+<ComponentWrapper>
+  <ComponentGrid>
+    <Badge color="slate" size="sm">sm badge</Badge>
+    <Badge color="slate" size="md">md badge</Badge>
+    <Badge color="slate" size="lg">lg badge</Badge>
+    <Badge color="green">
+      <BadgeIcon>
+        <ArrowTrendingUpIcon />
+      </BadgeIcon>
+      <BadgetContent>sm with icon</BadgetContent>
+    </Badge>
+    <Badge color="blue" size="md">
+      <BadgeIcon>
+        <ArrowTrendingUpIcon />
+      </BadgeIcon>
+      <BadgetContent>md with icon</BadgetContent>
+    </Badge>
+    <Badge color="red" size="lg">
+      <BadgeIcon>
+        <ArrowTrendingDownIcon />
+      </BadgeIcon>
+      <BadgetContent>lg with icon</BadgetContent>
+    </Badge>
+  </ComponentGrid>
+</ComponentWrapper>
+
+## Best practices
+
+Badges benefit users by:
+
+- Using established color patterns so that users can quickly identify their tone or importance level.
+- Being clearly labeled with short, scannable text.
+- Being positioned to clearly identify the object they're informing or labelling.
+
+## Content guidelines
+
+Badge labels should:
+
+- Use a single word to describe the tone of an object.
+- Only use two words if you need to describe a complex state. For example "Partially refunded" and "Partially paid".
+- Always describe the tone in the past tense. For example, refunded not refund.
+
+## Accessibility
+
+Badges that convey information with icons or color include text provided by the `visually hidden component`. The text is
+read out by assistive technologies so that users with vision issues can access meaning of the badge in context.

package/src/components/Badge/index.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from './Badge.vue';
+export { default as BadgeContent } from './BadgeContent.vue';
+export { default as BadgeIcon } from './BadgeIcon.vue';

package/src/components/Button/Button.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { Spinner } from '../';
+import { useTheme } from '../../composables';
+
+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';
+}>(), {
+  disabled: false,
+  external: false,
+  href: null,
+  loading: false,
+  variant: 'primary',
+});
+
+const classList = computed(() => {
+  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' },
+
+    { 'opacity-50 cursor-not-allowed': props.disabled },
+    { 'pointer-events-none opacity-75': props.loading },
+
+    ...useTheme('focus'),
+  ];
+});
+</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 }"
+    >
+      <slot />
+    </span>
+
+    <Spinner
+      v-if="loading"
+      class="absolute"
+    />
+  </button>
+</template>

package/src/components/Button/ButtonContent.vue

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

package/src/components/Button/ButtonIcon.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="h-4 w-4 -mt-0.5 -mb-0.5">
+    <slot />
+  </div>
+</template>

package/src/components/Button/README.md

@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import { Button, ButtonIcon, ButtonContent } from '../../src/components'; 
+import api from '../component-meta/Button.json';
+import { ArrowDownTrayIcon } from '@heroicons/vue/16/solid'; 
+</script>
+
+# Button
+
+Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar
+to links, are used for less important or less commonly used actions, such as “view shipping settings”.
+
+<ComponentApi :api="api" />
+
+## Variants
+
+### Primary
+
+Use to highlight the most important actions in any experience. Don’t use more than one primary button in a section or
+screen to avoid overwhelming users.
+
+<ComponentWrapper>
+  <Button variant="primary">Primary</Button>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Button } from 'focus-ui';
+</script>
+
+<template>
+  <Button variant="primary">Primary</Button>
+</template>
+```
+
+### Secondary
+
+Used most in the interface. Only use another style if a button requires more or less visual weight.
+
+<ComponentWrapper>
+  <Button variant="secondary">Secondary</Button>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Button } from 'focus-ui';
+</script>
+
+<template>
+  <Button variant="secondary">Primary</Button>
+</template>
+```
+
+### Destructive
+
+Used when the action will delete user data or be otherwise difficult to recover from. Destructive buttons should
+trigger a confirmation dialog before the action is completed. Be thoughtful about using destructive buttons because
+they can feel stressful for users.
+
+<ComponentWrapper>
+  <Button variant="destructive">Destructive</Button>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Button } from 'focus-ui';
+</script>
+
+<template>
+  <Button variant="destructive">Destructive</Button>
+</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,
+
+<ComponentWrapper>
+  <Button variant="ghost">Ghost</Button>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Button } from 'focus-ui';
+</script>
+
+<template>
+  <Button variant="ghost">Ghost</Button>
+</template>
+```
+
+### Loading
+
+Use when a button has been pressed and the associated action is in progress.
+
+<ComponentWrapper>
+  <Button variant="secondary" loading>
+    Loading button
+  </Button>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Button } from 'focus-ui';
+</script>
+
+<template>
+  <Button variant="secondary" loading>
+    Loading button
+  </Button>
+</template>
+```
+
+### Button with icon
+
+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>
+</ComponentWrapper>
+
+## Best practices
+
+Buttons should:
+
+- Be clearly and accurately labeled.
+- Lead with a strong, actionable verb.
+- Use established button colors appropriately. For example, only use a red button for an action that's difficult or
+  impossible to undo.
+- Prioritize the most important actions. Too many calls to action can cause confusion and make users unsure of what
+  to do next.
+- Be positioned in consistent locations in the interface.
+
+### Buttons versus links
+
+Buttons are used primarily for actions, such as "Add", "Close", "Cancel", or "Save". Plain buttons, which look
+similar to links, are used for less important or less commonly used actions, such as "view shipping settings".
+
+Links are used primarily for navigation, and usually appear within or directly following a sentence.
+
+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.
+
+## Content guidelines
+
+Buttons need to be clear and predictable. Users should be able to anticipate what will happen when they select a
+button. Never mislead someone by mislabeling a button.
+
+Buttons should always lead with a strong verb that encourages action. To provide enough context to users, use the
+{verb} + {noun} content formula on buttons except in the case of common actions like "Done", "Close", "Cancel", or "OK".
+
+Always write button text in sentence case, which means the first word is capitalized and the rest are lowercase
+(unless a term is a proper noun).
+
+Avoid unnecessary words and articles such as "the", "an", or "a" to keep button text short and actionable.
+
+## Accessibility
+
+Buttons can have different states that are visually and programmatically conveyed to users.
+
+- Use the `ariaControls` prop to add an `aria-controls` attribute to the button. Use the attribute to point to the
+  unique `id` of the content that the button manages.
+- If a button expands or collapses adjacent content, then use the `ariaExpanded` prop to add the `aria-expanded`
+  attribute to the button. Set the value to convey the current expanded (`true`) or collapsed (`false`) state of the
+  content.
+- Use the `disabled` prop to set the `disabled` state of the button. This prevents users from being able to interact
+  with the button, and conveys its inactive state to assistive technologies.
+- Use the `pressed` prop to add an `aria-pressed` attribute to the button.
+
+### Navigation
+
+Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required
+for the button component, use the `href` prop. The control will output an anchor styled as a button, instead of a
+button in HTML, to help convey this difference.
+
+### Labeling
+
+THe `accessibilityLabel` prop adds an `aria-label` attribute to the button, which can be accessed by assistive
+technologies like screen readers. Typically, this label text replaces the visible text on the button for users who
+use assistive technologies.
+
+Use `accessibilityLabel` for a button if:
+
+- The button's visible text does not adequately convey the purpose of the button to non-visual users.
+- The button has no text and relies on an icon alone to convey its purpose.
+
+To help support users who use speech activation software as well as sighted screen reader users, make sure that the
+`aria-label` text includes any button text that's visible. Mismatches between visible and programmatic labeling can
+cause confusion, and might prevent voice recognition commands from working.
+
+When possible, give the button visible text that clearly conveys its purpose without the user of
+`accessibilityLabel`. When no additional content is needed, duplication the button text with `accessibilityLabel`
+isn't necessary.
+
+### External links
+
+When you use the button component to create a link to an external resource:
+
+- Use the `external` prop to make the link open in a new tab (or window, depending on the user's browser settings).
+- Use the `icon` prop to add the `external` icon to the button.
+- Use the `accessibilityLabel` prop to include the warning about opening a new tab in the button text for non-visual
+  screen reader users.

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './Button.vue';
+export { default as ButtonContent } from './ButtonContent.vue';
+export { default as ButtonIcon } from './ButtonIcon.vue';

package/src/components/ButtonGroup/ButtonGroup.vue

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

package/src/components/ButtonGroup/README.md

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Button, ButtonGroup } from '../../src/components'; 
+import api from '../component-meta/ButtonGroup.json';
+</script>
+
+# Button Group
+
+Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
+
+<ComponentApi :api="api" />
+
+## Usage
+
+<ComponentWrapper>
+  <ButtonGroup>
+    <Button variant="secondary">Cancel</Button>
+    <Button variant="primary">Save</Button>
+  </ButtonGroup>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import { Button, ButtonGroup } from 'focus-ui';
+</script>
+
+<template>
+  <ButtonGroup>
+    <Button variant="secondary">Cancel</Button>
+    <Button variant="primary">Save</Button>
+  </ButtonGroup>
+</template>
+```
+
+## Best practices
+
+Button groups should:
+
+- Only use buttons that follow the best practices outlined in the button component.
+- Group together calls to action that have a relationship.
+- Be used with consideration that too many calls to action can cause users to be unsure of what to do next.
+- Be thoughtful about how multiple buttons will look and work on small screens.
+- Only be used in groups of up to six buttons if the buttons contain an icon with no text.

package/src/components/ButtonGroup/index.ts

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

package/src/components/Card/Card.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="border bg-white rounded-lg overflow-auto shadow-sm">
+    <slot />
+  </div>
+</template>

package/src/components/Card/CardDescription.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/Card/CardFooter.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="flex items-center justify-end bg-slate-100 px-4 py-3">
+    <slot />
+  </div>
+</template>

package/src/components/Card/CardHeader.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="flex flex-col space-y-1.5 p-6 pb-0">
+    <slot />
+  </div>
+</template>

package/src/components/Card/CardSection.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="p-6">
+    <slot />
+  </div>
+</template>

package/src/components/Card/CardTitle.vue

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

package/src/components/Card/README.md

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { Button, Card, CardSection, CardDescription, CardFooter, CardHeader, CardTitle } from '../../src/components'; 
+import api from '../component-meta/Card.json';
+</script>
+
+# Card
+
+Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays
+content in a familiar and recognizable style.
+
+<ComponentApi :api="api" />
+
+## Variants
+
+<ComponentWrapper>
+  <Card>
+    <CardHeader>
+      <CardTitle>Notifications</CardTitle>
+      <CardDescription>You have 3 unread messages.</CardDescription>
+    </CardHeader>
+    <CardSection>
+      <div>Card content</div>
+    </CardSection>
+    <CardFooter>
+      <Button variant="primary">Button</Button>
+    </CardFooter>
+  </Card>
+</ComponentWrapper>
+
+```js-vue
+<script lang="ts" setup>
+import {
+  Button,
+  Card,
+  CardSection,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from 'focus-ui';
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Notifications</CardTitle>
+      <CardDescription>You have 3 unread messages.</CardDescription>
+    </CardHeader>
+    <CardSection>
+      <div>Card content</div>
+    </CardSection>
+    <CardFooter>
+      <Button variant="primary">Button</Button>
+    </CardFooter>
+  </Card>
+</template>
+```
+
+## Best practices
+
+Cards should:
+
+- Group related information.
+- Display information in a way that prioritizes what the user needs to know most first.
+- Use headings that set clear expectations about the card's purpose.
+- Stick to single user flows or break more complicated flows into multiple sections.
+- Avoid too many call-to-action buttons or links and only one primary call to action per card.
+- Use calls to action on bottom of the card for next steps and use the space in the upper right corner of the card
+  for persistent, option actions (such as Edit).

package/src/components/Card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue';
+export { default as CardSection } from './CardSection.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';

package/src/components/CategoryBar/CategoryBar.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { computed, provide, useSlots, VNode } from 'vue';
+
+const slots = useSlots();
+
+const totalCategoryBarWidth = computed((): number => {
+  if (!slots.default) {
+    return 0;
+  }
+
+  const slotValues = slots.default().map((slot: VNode) => {
+    return slot.props!.value;
+  });
+
+  return slotValues.reduce((acc: number, value: number) => acc + value, 0);
+});
+
+provide('totalCategoryBarWidth', totalCategoryBarWidth);
+</script>
+
+<template>
+  <div class="flex w-full space-x-0.5">
+    <slot />
+  </div>
+</template>