# Goal row

A goal's title and count over a bar of how much is done, with a line of details and its status in words.

A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Meter.

## Examples

### Usage

A list of goals, one in each status, so a reader finds the one at risk.

```html
<ul class="site-goal-list" role="list" aria-label="Goals this quarter">
  <li class="site-goal-row site-goal-row--status-on-track">
    <span class="site-goal-row__top">
      <span class="site-goal-row__title" id="goal-signup">Ship the new sign-up flow</span>
      <span class="site-goal-row__count" aria-hidden="true">18 of 24</span>
    </span>
    <div class="smbk-meter smbk-meter--tone-series smbk-progress site-goal-row__meter">
      <div
        class="smbk-progress__track"
        role="meter"
        aria-valuemin="0"
        aria-valuemax="24"
        aria-valuenow="18"
        aria-valuetext="18 of 24 tasks done"
        aria-labelledby="goal-signup"
      >
        <span class="smbk-progress__fill" style="width:75%"></span>
      </div>
    </div>
    <span class="site-goal-row__bottom">
      <span class="site-goal-row__meta">Due Nov 2 · 3 people</span>
      <span class="site-goal-row__status">On track</span>
    </span>
  </li>
  <li class="site-goal-row site-goal-row--status-at-risk">
    <span class="site-goal-row__top">
      <span class="site-goal-row__title" id="goal-docs">Move the docs to the new site</span>
      <span class="site-goal-row__count" aria-hidden="true">9 of 20</span>
    </span>
    <div class="smbk-meter smbk-meter--tone-warning smbk-progress site-goal-row__meter">
      <div
        class="smbk-progress__track"
        role="meter"
        aria-valuemin="0"
        aria-valuemax="20"
        aria-valuenow="9"
        aria-valuetext="9 of 20 pages moved"
        aria-labelledby="goal-docs"
      >
        <span class="smbk-progress__fill" style="width:45%"></span>
      </div>
    </div>
    <span class="site-goal-row__bottom">
      <span class="site-goal-row__meta">Due Oct 18 · 2 people</span>
      <span class="site-goal-row__status">At risk</span>
    </span>
  </li>
  <li class="site-goal-row site-goal-row--status-done">
    <span class="site-goal-row__top">
      <span class="site-goal-row__title" id="goal-help">Translate the help pages</span>
      <span class="site-goal-row__count" aria-hidden="true">46 of 46</span>
    </span>
    <div class="smbk-meter smbk-meter--tone-success smbk-progress site-goal-row__meter">
      <div
        class="smbk-progress__track"
        role="meter"
        aria-valuemin="0"
        aria-valuemax="46"
        aria-valuenow="46"
        aria-valuetext="46 of 46 pages translated"
        aria-labelledby="goal-help"
      >
        <span class="smbk-progress__fill" style="width:100%"></span>
      </div>
    </div>
    <span class="site-goal-row__bottom">
      <span class="site-goal-row__meta">Finished Oct 9 · 3 people</span>
      <span class="site-goal-row__status">Done</span>
    </span>
  </li>
</ul>
```

```tsx
import { Meter } from './design-system/components/meter/meter.js';

<ul className="site-goal-list" role="list" aria-label="Goals this quarter">
  <li className="site-goal-row site-goal-row--status-on-track">
    <span className="site-goal-row__top">
      <span className="site-goal-row__title" id="goal-signup">Ship the new sign-up flow</span>
      <span className="site-goal-row__count" aria-hidden="true">18 of 24</span>
    </span>
    <Meter className="site-goal-row__meter" tone="series" value={18} max={24} aria-labelledby="goal-signup" aria-valuetext="18 of 24 tasks done" />
    <span className="site-goal-row__bottom">
      <span className="site-goal-row__meta">Due Nov 2 · 3 people</span>
      <span className="site-goal-row__status">On track</span>
    </span>
  </li>
  <li className="site-goal-row site-goal-row--status-at-risk">
    <span className="site-goal-row__top">
      <span className="site-goal-row__title" id="goal-docs">Move the docs to the new site</span>
      <span className="site-goal-row__count" aria-hidden="true">9 of 20</span>
    </span>
    <Meter className="site-goal-row__meter" tone="warning" value={9} max={20} aria-labelledby="goal-docs" aria-valuetext="9 of 20 pages moved" />
    <span className="site-goal-row__bottom">
      <span className="site-goal-row__meta">Due Oct 18 · 2 people</span>
      <span className="site-goal-row__status">At risk</span>
    </span>
  </li>
  <li className="site-goal-row site-goal-row--status-done">
    <span className="site-goal-row__top">
      <span className="site-goal-row__title" id="goal-help">Translate the help pages</span>
      <span className="site-goal-row__count" aria-hidden="true">46 of 46</span>
    </span>
    <Meter className="site-goal-row__meter" tone="success" value={46} max={46} aria-labelledby="goal-help" aria-valuetext="46 of 46 pages translated" />
    <span className="site-goal-row__bottom">
      <span className="site-goal-row__meta">Finished Oct 9 · 3 people</span>
      <span className="site-goal-row__status">Done</span>
    </span>
  </li>
</ul>
```

### On track

On track: the series color, and the status in green words.

```html
<div class="site-goal-row site-goal-row--status-on-track">
  <span class="site-goal-row__top">
    <span class="site-goal-row__title" id="goal-checkout">Speed up the checkout</span>
    <span class="site-goal-row__count" aria-hidden="true">7 of 10</span>
  </span>
  <div class="smbk-meter smbk-meter--tone-series smbk-progress site-goal-row__meter">
    <div
      class="smbk-progress__track"
      role="meter"
      aria-valuemin="0"
      aria-valuemax="10"
      aria-valuenow="7"
      aria-valuetext="7 of 10 tasks done"
      aria-labelledby="goal-checkout"
    >
      <span class="smbk-progress__fill" style="width:70%"></span>
    </div>
  </div>
  <span class="site-goal-row__bottom">
    <span class="site-goal-row__meta">Due Nov 15 · 4 people</span>
    <span class="site-goal-row__status">On track</span>
  </span>
</div>
```

```tsx
import { Meter } from './design-system/components/meter/meter.js';

<div className="site-goal-row site-goal-row--status-on-track">
  <span className="site-goal-row__top">
    <span className="site-goal-row__title" id="goal-checkout">Speed up the checkout</span>
    <span className="site-goal-row__count" aria-hidden="true">7 of 10</span>
  </span>
  <Meter className="site-goal-row__meter" tone="series" value={7} max={10} aria-labelledby="goal-checkout" aria-valuetext="7 of 10 tasks done" />
  <span className="site-goal-row__bottom">
    <span className="site-goal-row__meta">Due Nov 15 · 4 people</span>
    <span className="site-goal-row__status">On track</span>
  </span>
</div>
```

### At risk

At risk: the warning color, and the status in amber words.

```html
<div class="site-goal-row site-goal-row--status-at-risk">
  <span class="site-goal-row__top">
    <span class="site-goal-row__title" id="goal-audit">Finish the accessibility audit</span>
    <span class="site-goal-row__count" aria-hidden="true">5 of 12</span>
  </span>
  <div class="smbk-meter smbk-meter--tone-warning smbk-progress site-goal-row__meter">
    <div
      class="smbk-progress__track"
      role="meter"
      aria-valuemin="0"
      aria-valuemax="12"
      aria-valuenow="5"
      aria-valuetext="5 of 12 pages checked"
      aria-labelledby="goal-audit"
    >
      <span class="smbk-progress__fill" style="width:41.66666666666667%"></span>
    </div>
  </div>
  <span class="site-goal-row__bottom">
    <span class="site-goal-row__meta">Due Oct 21 · 1 person</span>
    <span class="site-goal-row__status">At risk</span>
  </span>
</div>
```

```tsx
import { Meter } from './design-system/components/meter/meter.js';

<div className="site-goal-row site-goal-row--status-at-risk">
  <span className="site-goal-row__top">
    <span className="site-goal-row__title" id="goal-audit">Finish the accessibility audit</span>
    <span className="site-goal-row__count" aria-hidden="true">5 of 12</span>
  </span>
  <Meter className="site-goal-row__meter" tone="warning" value={5} max={12} aria-labelledby="goal-audit" aria-valuetext="5 of 12 pages checked" />
  <span className="site-goal-row__bottom">
    <span className="site-goal-row__meta">Due Oct 21 · 1 person</span>
    <span className="site-goal-row__status">At risk</span>
  </span>
</div>
```

### Done

Done: the bar full in the success color, and the status in quiet words.

```html
<div class="site-goal-row site-goal-row--status-done">
  <span class="site-goal-row__top">
    <span class="site-goal-row__title" id="goal-invoices">Send invoices by email</span>
    <span class="site-goal-row__count" aria-hidden="true">6 of 6</span>
  </span>
  <div class="smbk-meter smbk-meter--tone-success smbk-progress site-goal-row__meter">
    <div
      class="smbk-progress__track"
      role="meter"
      aria-valuemin="0"
      aria-valuemax="6"
      aria-valuenow="6"
      aria-valuetext="6 of 6 tasks done"
      aria-labelledby="goal-invoices"
    >
      <span class="smbk-progress__fill" style="width:100%"></span>
    </div>
  </div>
  <span class="site-goal-row__bottom">
    <span class="site-goal-row__meta">Finished Oct 3 · 2 people</span>
    <span class="site-goal-row__status">Done</span>
  </span>
</div>
```

```tsx
import { Meter } from './design-system/components/meter/meter.js';

<div className="site-goal-row site-goal-row--status-done">
  <span className="site-goal-row__top">
    <span className="site-goal-row__title" id="goal-invoices">Send invoices by email</span>
    <span className="site-goal-row__count" aria-hidden="true">6 of 6</span>
  </span>
  <Meter className="site-goal-row__meter" tone="success" value={6} max={6} aria-labelledby="goal-invoices" aria-valuetext="6 of 6 tasks done" />
  <span className="site-goal-row__bottom">
    <span className="site-goal-row__meta">Finished Oct 3 · 2 people</span>
    <span className="site-goal-row__status">Done</span>
  </span>
</div>
```

## Purpose

Shows where a goal stands in a list of goals: its title and how many of its parts are done, a bar of the same, and a line of details, such as when it is due and who works on it, with its status in words: on track, at risk or done.

## Anatomy

- The block, a list item, with the goal list around a set of them.
- The top line: the title in the small body style's medium weight and the count in the extra small body style.
- The bar, the Meter component, in the series color on track, the warning color at risk and the success color once done.
- The bottom line: the details in the extra small body style and the status in the small label style, green on track, amber at risk and quiet once done.

## When to use

- In a list of goals, milestones or projects, where a reader checks which need attention.

## When not to use

- For a task that is running now. Use a progress bar.
- For a single figure. Use a stat.

## Behavior

The status is the page's to choose: it sets the class on the row, the bar's tone and the words. Done fills the bar.

## Accessibility

### What it does for you

- The bar is a meter named by the goal's title, its value the count in words, such as "18 of 24 tasks done".
- The drawn count is hidden from assistive technology, so it is not read twice.
- The status is written in words as well as shown by color.

### What you must do

- Give each goal's title an id of its own for its meter to point at, and write the meter's value in words.
- Name the goal list for what it holds, such as "Goals this quarter", and keep `role="list"` on it, as the examples do: some screen readers stop reading a list as a list once its markers are hidden.

### How to test

- With a screen reader, each bar is read by its goal's title with its count in words, and the count is read once.
- In a forced-color mode, each goal's status still reads in words.

## Usage rules

### Do

- Say the status in words a reader knows: on track, at risk, done.
- Put the date and the people in the details line.

### Don't

- Show the status by the bar's color alone.
- Use a status the bar's tone does not match.

## Stylesheet

```css
/* site-goal-row — Goal row, a block: a goal's title and count, a bar of how much is done, and a line of details
 * with its status in words. Copy it into your project and rename site- to your project's own prefix. The bar is
 * the Meter component, its tone following the status; the block draws only the lines around it. */

.site-goal-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-goal-row {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-6);
  padding-block: var(--smbk-space-inset-sm);
}

.site-goal-row__top,
.site-goal-row__bottom {
  display: flex;
  align-items: center;
}

.site-goal-row__top {
  gap: var(--smbk-space-inline-md);
}

.site-goal-row__bottom {
  align-items: flex-start;
  gap: var(--smbk-space-inline-sm);
}

.site-goal-row__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-body-sm-medium-font-family);
  font-size: var(--smbk-typography-body-sm-medium-font-size);
  font-weight: var(--smbk-typography-body-sm-medium-font-weight);
  line-height: var(--smbk-typography-body-sm-medium-line-height);
  letter-spacing: var(--smbk-typography-body-sm-medium-letter-spacing);
}

.site-goal-row__count,
.site-goal-row__meta {
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-xs-font-family);
  font-size: var(--smbk-typography-body-xs-font-size);
  font-weight: var(--smbk-typography-body-xs-font-weight);
  line-height: var(--smbk-typography-body-xs-line-height);
  letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}

.site-goal-row__count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.site-goal-row__meta {
  flex: 1 1 auto;
  min-width: 0;
}

/* The status in words, so it never rests on the bar's color: green on track, amber at risk, quiet once done. */
.site-goal-row__status {
  flex: none;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.site-goal-row--status-on-track .site-goal-row__status {
  color: var(--smbk-color-feedback-success-text-on-subtle);
}

.site-goal-row--status-at-risk .site-goal-row__status {
  color: var(--smbk-color-feedback-warning-text-on-subtle);
}
```