Skip to content

Add the Checklist component - #867

Open
aatuvai wants to merge 5 commits into
mainfrom
aatuvai/2026-10-28-production-checklist
Open

aatuvai wants to merge 5 commits into
mainfrom
aatuvai/2026-10-28-production-checklist

Conversation

@aatuvai

@aatuvai aatuvai commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor

This PR adds a Checklist component for guiding readers through multi-step processes, such as the Teleport Production Checklist.

Each step is a collapsible card with a walkthrough video, a progress bar, and a list of tasks with checkboxes. Each task includes a button that can be used to jump the video to the part that covers it. Progress is saved in the browser, so returning users can pick up where they left off.

Changes

  • src/components/Checklist/: The new component, its styles, and Storybook interaction tests
  • src/components/YouTubeEmbed/YouTubeEmbed.tsx, src/utils/index.ts: Add support for timestamp buttons to jump the progress of the embed video. Embeds also load from youtube-nocookie.com to prevent the timestamp buttons from not working if the user rejects cookies.
  • src/theme/MDXComponents/index.tsx: Expose the Checklist component for usage in the MDX pages.
  • src/styles/variables.css: Add the --color-background-depth-4 variable, which is used by the timestamp buttons.

Example usage

<Checklist id="checklist">
  <ChecklistStep
    title="Step title"
    videoId="fjP5c3Y77BY"
  >
    <ChecklistItem timestamp={0}>Establish the connection</ChecklistItem>
    <ChecklistItem timestamp={45}>Confirm access</ChecklistItem>
  </ChecklistStep>
</Checklist>

Preview link: https://aatuvai-2026-10-28-production-checklist.d2mrezcly5gcqm.amplifyapp.com/docs/get-started/production-checklist/

@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 10:38 — with GitHub Actions Active
@github-actions

github-actions Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Amplify deployment status

Branch Commit Job ID Status Preview Updated (UTC)
aatuvai/2026-10-28-production-checklist 8fbf48f 22 ✅SUCCEED aatuvai-2026-10-28-production-checklist 2026-11-04 13:30:29

@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 10:49 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 12:08 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 12:46 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 13:15 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 13:22 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify October 29, 2026 13:44 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify October 30, 2026 12:38 — with GitHub Actions Active
@rishibarbhaya-design

Copy link
Copy Markdown
  1. Remove the descriptions from each section, as we're moving forward with verb-based titles rather than noun-based titles.
  2. Replace the checkmark icons with filled versions:
    Grey for incomplete items.
    Green for completed items.
  3. Update the accordion buttons from filled neutral styling to text-style buttons.
  4. The Table of Contents design should follow the existing Docs patterns. The revised design is just a proposal and requires further discussion and a decision before implementation.

@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 08:16 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 09:50 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 12:14 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 13:02 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 13:04 — with GitHub Actions Active
@aatuvai
aatuvai force-pushed the aatuvai/2026-10-28-production-checklist branch from 2b840b7 to ee06487 Compare November 3, 2026 13:07
@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 13:07 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify November 3, 2026 13:48 — with GitHub Actions Active
@aatuvai
aatuvai force-pushed the aatuvai/2026-10-28-production-checklist branch from 19544ed to 306f7b0 Compare November 4, 2026 07:42
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 07:42 — with GitHub Actions Active
Comment thread config.json
Comment on lines +9 to +10
"branch": "aatuvai/2026-10-28-production-checklist",
"repo_path": "aatuvai/teleport",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert before merge to main

@aatuvai
aatuvai force-pushed the aatuvai/2026-10-28-production-checklist branch from 306f7b0 to f8ff9ca Compare November 4, 2026 07:45
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 07:46 — with GitHub Actions Active
@aatuvai
aatuvai marked this pull request as ready for review November 4, 2026 07:47
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 4, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-04T10:24:47.270583Z e7f5168 Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f8ff9ca92b

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread config.json Resolved
Comment thread src/components/Checklist/Checklist.tsx Resolved
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 08:40 — with GitHub Actions Active
@aatuvai
aatuvai marked this pull request as draft November 4, 2026 08:53
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 09:01 — with GitHub Actions Active
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 09:25 — with GitHub Actions Active
@aatuvai
aatuvai force-pushed the aatuvai/2026-10-28-production-checklist branch from 363b127 to e7f5168 Compare November 4, 2026 10:12
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 10:12 — with GitHub Actions Active
@aatuvai
aatuvai requested review from rodgtr1 and roraback November 4, 2026 10:21
@aatuvai
aatuvai marked this pull request as ready for review November 4, 2026 10:21

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e7f51687ed

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/components/Checklist/Checklist.tsx Resolved
Comment thread src/components/Checklist/Checklist.tsx Resolved
Previously, the wrong checklist item would be flagged as pressed if a new step was added
before the one that had checked items originally. itemKey function is changed so that getStepId
is used to populate the prefix of the item key, so that the checked item status persists
even though the position of the step changes.
@aatuvai
aatuvai deployed to docs-amplify November 4, 2026 13:06 — with GitHub Actions Active

This branch was successfully deployed

1 active deployment
docs-amplify — 8fbf48fb Deployed Nov 4, 2026 by aatuvai via Amplify Preview #2304
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants