@returnless/focus-ui 0.0.5 → 0.0.7

package/src/components/KPICard/KPICardSection.vue

@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { CardSection } from '../Card';
-import { Heading } from '../Heading';
-import { TextStyle } from '../TextStyle';
-
-defineProps<{
-  title: string;
-  value: string;
-}>();
-</script>
-
-<template>
-  <CardSection>
-    <div class="space-y-0.5">
-      <TextStyle variant="subdued">
-        {{ title }}
-      </TextStyle>
-      <Heading size="2xl">
-        {{ value }}
-      </Heading>
-    </div>
-
-    <div
-      v-if="!!$slots.default"
-      class="mt-6"
-    >
-      <slot />
-    </div>
-  </CardSection>
-</template>

package/src/components/KPICard/README.md

@@ -1,124 +0,0 @@
-<script lang="ts" setup>
-import { Badge, BadgeContent, BadgeIcon, KPICard, KPICardSection } from '../../src/components'; 
-import api from '../component-meta/KPICard.json';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
-</script>
-
-# KPI Card
-
-KPI Card is a component that displays a key performance indicator in a card format. It is used to display a single
-metric or a set of metrics that are important to the user.
-
-## Usage
-
-<ComponentWrapper>
-  <KPICard>
-    <KPICardSection title="Total returns today" value="952">
-      <Badge color="green">
-        <BadgeContent>+ 25%</BadgeContent>
-        <BadgeIcon>
-          <ArrowTrendingUpIcon />
-        </BadgeIcon>
-      </Badge>
-    </KPICardSection>
-    <KPICardSection title="Total returns last 30 days" value="10,483">
-      <Badge color="red">
-        <BadgeIcon>
-          <ArrowTrendingDownIcon />
-        </BadgeIcon>
-        <BadgeContent>- 25%</BadgeContent>
-      </Badge>
-    </KPICardSection>
-  </KPICard>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Badge,
-  BadgeContent,
-  BadgeIcon,
-  KPICard,
-  KPICardSection,
-} from '@returnless/focus-ui';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <KPICard>
-    <KPICardSection title="Total returns today" value="952">
-      <Badge color="green">
-        <BadgeContent>+ 25%</BadgeContent>
-        <BadgeIcon>
-          <ArrowTrendingUpIcon />
-        </BadgeIcon>
-      </Badge>
-    </KPICardSection>
-    <KPICardSection title="Total returns last 30 days" value="10,483">
-      <Badge color="red">
-        <BadgeIcon>
-          <ArrowTrendingDownIcon />
-        </BadgeIcon>
-        <BadgeContent>- 25%</BadgeContent>
-      </Badge>
-    </KPICardSection>
-  </KPICard>
-</template>
-```
-
-### Vertical KPI Card
-
-<ComponentWrapper>
-  <KPICard orientation="vertical">
-    <KPICardSection title="Total returns today" value="952">
-      <Badge color="green">
-        <BadgeContent>+ 25%</BadgeContent>
-        <BadgeIcon>
-          <ArrowTrendingUpIcon />
-        </BadgeIcon>
-      </Badge>
-    </KPICardSection>
-    <KPICardSection title="Total returns last 30 days" value="10,483">
-      <Badge color="red">
-        <BadgeIcon>
-          <ArrowTrendingDownIcon />
-        </BadgeIcon>
-        <BadgeContent>- 25%</BadgeContent>
-      </Badge>
-    </KPICardSection>
-  </KPICard>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Badge,
-  BadgeContent,
-  BadgeIcon,
-  KPICard,
-  KPICardSection,
-} from '@returnless/focus-ui';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <KPICard orientation="vertical">
-    <KPICardSection title="Total returns today" value="952">
-      <Badge color="green">
-        <BadgeContent>+ 25%</BadgeContent>
-        <BadgeIcon>
-          <ArrowTrendingUpIcon />
-        </BadgeIcon>
-      </Badge>
-    </KPICardSection>
-    <KPICardSection title="Total returns last 30 days" value="10,483">
-      <Badge color="red">
-        <BadgeIcon>
-          <ArrowTrendingDownIcon />
-        </BadgeIcon>
-        <BadgeContent>- 25%</BadgeContent>
-      </Badge>
-    </KPICardSection>
-  </KPICard>
-</template>
-```

package/src/components/KPICard/index.ts

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

package/src/components/Legend/Legend.vue

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

package/src/components/Legend/LegendItem.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import { TailwindColor, useTailwindColor, useTheme, useUniqueId } from '../../composables';
-import { TextStyle } from '../TextStyle';
-
-const props = defineProps<{
-  color: TailwindColor;
-}>();
-
-const legendItemId = useUniqueId('legendItem');
-
-const colorValue = useTailwindColor(props.color, '500');
-</script>
-
-<template>
-  <li :aria-labelledby="legendItemId">
-    <button
-      :class="useTheme('focus')"
-      class="flex items-center rounded border border-transparent px-2 space-x-2 py-0.5 hover:bg-slate-100"
-      role="button"
-    >
-      <span
-        class="h-2 w-2 rounded-full flex-shrink-0"
-        :style="{ backgroundColor: colorValue }"
-      />
-      <TextStyle
-        :id="legendItemId"
-        variant="strong"
-        class="whitespace-nowrap"
-      >
-        <slot />
-      </TextStyle>
-    </button>
-  </li>
-</template>

package/src/components/Legend/README.md

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { Legend, LegendItem } from '../../src/components'; 
-import api from '../component-meta/Legend.json';
-</script>
-
-# Legend
-
-The `Legend` component is used to display a legend for a chart.
-
-## Usage
-
-<ComponentWrapper>
-  <Legend>
-    <LegendItem color="green">Category 1</LegendItem>
-    <LegendItem color="blue">Category 2</LegendItem>
-    <LegendItem color="red">Category 3</LegendItem>
-  </Legend>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Legend, LegendItem } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Legend>
-    <LegendItem color="green">Category 1</LegendItem>
-    <LegendItem color="blue">Category 2</LegendItem>
-    <LegendItem color="red">Category 3</LegendItem>
-  </Legend>
-</template>
-```

package/src/components/Legend/index.ts

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

package/src/components/Link/Link.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { InertiaLink } from '../InertiaLink';
-
-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' : InertiaLink;
-});
-</script>
-
-<template>
-  <component
-    :is="componentType"
-    :aria-label="accessibilityLabel"
-    :class="[
-      'text-brand-500',
-      'cursor-pointer',
-      'hover:underline'
-    ]"
-    :href="href"
-    v-bind="$attrs"
-  >
-    <slot />
-  </component>
-</template>

package/src/components/Link/README.md

@@ -1,119 +0,0 @@
-<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 '@returnless/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

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

package/src/components/Navigation/Navigation.vue

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

package/src/components/Navigation/NavigationItem.vue

@@ -1,47 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { InertiaLink } from '../InertiaLink';
-
-const props = withDefaults(defineProps<{
-  /** Whether the navigation item is active. */
-  active?: boolean;
-
-  /** The URL to navigate to. */
-  href: string;
-
-  /** The icon to display to the left of the navigation item. */
-  icon?: (() => void) | null;
-}>(), {
-  active: false,
-  icon: null,
-});
-
-const classList = computed((): Record<string, boolean>[] => {
-  return [
-    { 'relative bg-slate-200': props.active },
-    { 'text-slate-500 hover:bg-slate-100': !props.active },
-  ];
-});
-</script>
-
-<template>
-  <div class="block">
-    <InertiaLink :href="href">
-      <div
-        class="flex items-center rounded px-3 py-2 space-x-3"
-        :class="classList"
-      >
-        <span
-          v-if="!!icon"
-          class="h-4 w-4 opacity-75"
-        >
-          <component :is="icon" />
-        </span>
-
-        <span :class="{ 'font-medium': active }">
-          <slot />
-        </span>
-      </div>
-    </InertiaLink>
-  </div>
-</template>

package/src/components/Navigation/NavigationSecondarySection.vue

@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="relative pl-0.5">
-    <div class="absolute top-0 bottom-0 border-l border-slate-300 w-10 ml-[17px]" />
-
-    <div class="ml-6 pl-0.5 space-y-0.5">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/Navigation/NavigationSection.vue

@@ -1,27 +0,0 @@
-<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

@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-import { Navigation, NavigationItem, NavigationSecondarySection, 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 href="#">General</NavigationItem>
-    </NavigationSection>
-    <NavigationSection label="Workflow management">
-      <NavigationItem :icon="HandThumbDownIcon" href="#">
-        Return reasons
-      </NavigationItem>
-      <NavigationItem active :icon="QuestionMarkCircleIcon" href="#">
-        Return questions
-      </NavigationItem>
-      <NavigationItem :icon="BoltIcon" href="#">
-        Automations
-      </NavigationItem>
-      <NavigationSecondarySection>
-        <NavigationItem href="#">Sub item 1</NavigationItem>
-        <NavigationItem href="#">Sub item 2</NavigationItem>
-      </NavigationSecondarySection>
-    </NavigationSection>
-  </Navigation>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { Navigation, NavigationItem, NavigationSection } from '@returnless/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

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

package/src/components/Page/Page.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="mx-auto max-w-8xl p-8">
-    <slot />
-  </div>
-</template>

package/src/components/Page/PageBody.vue

@@ -1,36 +0,0 @@
-<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((): boolean | Component => props.navigation || !!slots['page-navigation']);
-
-const PageNavigation = props.navigation
-  ? h(props.navigation)
-  : h('div');
-
-const contentClassList = computed((): string => {
-  return hasNavigation.value ? 'col-span-9' : 'col-span-12';
-});
-</script>
-
-<template>
-  <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>
-</template>

package/src/components/Page/PageDescription.vue

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

package/src/components/Page/PageHeader.vue

@@ -1,34 +0,0 @@
-<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>