Add the `ProgressIndicator` component.

[techanvil]

Feature Description

Add the ProgressIndicator component.

For reference, see the progress bar in the Figma design (and its wide viewport variant), and the Progress indicator section in the Design Doc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The ProgressIndicator component is created as a component in Storybook, and matches the Figma design for the progress bar.
• As per the design, the component displays a light green bar for the background with a dark green bar overlaid to indicate progress.
• The dark green bar starts at the left of the component, and its width is proportional to the number of visible segments.
• The segments are demarcated by a white dot toward the end of each segment.
• The component should accept props for the number of segments and the current segment.
• When these props are not provided, the dark green bar is rendered in its initial state, a short stub with no white dot.

Implementation Brief

Please note, this IB is out of sync with the AC which was revised to specify the creation of a new ProgressIndicator component, see this comment for further details.

• Update the ProgressSegments component
  • Add a default small segment before the loop.
    • It should have both the googlesitekit-progress-segments__segment class and the googlesitekit-progress-segments__segment--active modifier.
  • To support the initial state (before the number of segments is known), update the Array constructor to fall back to 0 segments when totalSegments is undefined:
    • Array.from( Array( totalSegments ?? 0 ) )
• Update the styles of the existing ProgressSegments component in assets/sass/components/global/_googlesitekit-progress-segments.scss
  • Update the .googlesitekit-progress-segments class styles:
    • Change the background from white to the Figma green $c-site-kit-sk-100.
    • Remove the border-radius and gap properties.
    • Set the height to 14px (per the Figma design).
  • Update the .googlesitekit-progress-segments__segment class styles:
    • Set the height to 100%.
    • Set position: relative; (to help position the white dot).
    • Target the --active modifier:
      • Set the background color to $c-site-kit-sk-400.
      • Set the right border radius to 7px in the following cases:
        • When the initial stub is the only segment present (&:only-child).
        • When the segment is the last of the active segments but not the very last segment overall (so there is no radius when everything is complete). You can use this selector &:not(:last-child):nth-last-child(1 of &)
      • Add a white dot to active segments when they are not :only-child.
        • The dot should match the Figma design: 6px diameter, positioned 5px from the right and 4px from the top.
  • Remove any unused :nth-child selectors.
• Update the ProgressSegments stories
  • Create a story for the initial state (totalSegments is undefined).
  • Create a “started” story (currentSegment = 0, totalSegments > 0).
  • Create a “progressing” story.
  • Create a “completed” story.

Test Coverage

• No tests are needed.

QA Brief

• Navigate to the ProgressIndicator component in Storybook and verify that it matches the Figma design.

Changelog entry

• Add a ProgressIndicator component to display progressions in user flows.

[techanvil]

IB ✅