AutoLayout storybook improvements

[nkanigsberg]

Changes

• Updated all AutoLayout stories using new designs
  • Made each story interactive
  • Added descriptions to each property and linked to Figma documentation
• Added a few new stories
• Cleaned up configs
• updated all components to beta
• removed addon-mdx-gfm as it was only installed as part of storybook 7 migration (was giving warnings on startup)

TODO

• Alignment stories being handled separately in this PR: Overhaul AutoLayout Alignment property #95

[codesandbox]

This branch is running in CodeSandbox. Use the links below to review this PR faster.


  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview

[github-actions]

Demo App Preview: https://d11mwnosflssyy.cloudfront.net/

[github-actions]

Code Coverage Report

Coverage after merging AutoLayout-storybook-improvements into main

96.72%

Coverage Report

File	Branches	Funcs	Lines	Uncovered Lines
../foundations/generated
design-tokens.constants.ts	100%	100%	100%
../foundations/generated/icons
account-circle.tsx	100%	100%	100%
arrow-left.tsx	100%	0%	75%	4
arrow-right.tsx	100%	100%	100%
chevron-right.tsx	100%	0%	75%	4
close.tsx	100%	0%	75%	4
event-note.tsx	100%	0%	75%	4
figma.tsx	100%	100%	100%
github.tsx	100%	100%	100%
index.ts	100%	46.67%	100%
instagram.tsx	100%	100%	100%
linked-in.tsx	100%	100%	100%
menu.tsx	100%	100%	100%
schedule.tsx	100%	0%	75%	4
settings.tsx	100%	0%	75%	4
twitter.tsx	100%	0%	75%	4
youtube.tsx	100%	0%	75%	4
components/auto-layout
auto-layout.styles.ts	69.44%	100%	100%	..., 28, 62, 63, 64
auto-layout.tsx	100%	100%	100%
auto-layout.types.ts	100%	100%	100%
index.ts	100%	100%	100%
components/button
button.styles.ts	0%	100%	100%	13
button.tsx	100%	100%	100%
index.ts	100%	100%	100%
components/footer
footer.styles.ts	100%	100%	100%
footer.tsx	100%	100%	100%
index.ts	100%	100%	100%
components/hero
hero.styles.ts	50%	100%	100%	10
hero.tsx	100%	100%	100%
index.ts	100%	100%	100%
components/icon
icon.styles.ts	100%	100%	100%
icon.tsx	50%	100%	100%	33
index.ts	100%	100%	100%
components/icon/utils
index.ts	100%	100%	100%
with-icon.tsx	100%	0%	40%	10, 11, 23
components/image-text-item
image-text-item.styles.ts	100%	100%	100%
image-text-item.tsx	100%	100%	100%
index.ts	100%	100%	100%
components/image-text-list
image-text-list.tsx	100%	100%	100%
index.ts	100%	100%	100%
components/inline-link
index.ts	100%	100%	100%
inline-link.styles.ts	50%	100%	100%	13, 19, 9
inline-link.tsx	66.67%	100%	100%	44, 51
components/link-button
index.ts	100%	100%	100%
link-button.styles.ts	50%	100%	100%	14, 19, 8, 9
link-button.tsx	83.33%	100%	100%	43
components/link-icon
index.ts	100%	100%	100%
link-icon.styles.ts	50%	100%	100%	14, 18, 24
link-icon.tsx	66.67%	100%	100%	43, 52
components/nav
index.ts	100%	100%	100%
nav.styles.ts	50%	100%	100%	33, 50
nav.tsx	66.67%	80%	95%	85, 87, 89
components/nav-item
index.ts	100%	100%	100%
nav-item.styles.ts	100%	100%	100%
nav-item.tsx	100%	100%	100%
components/typography
index.ts	100%	100%	100%
typography.styles.ts	100%	100%	100%
typography.tsx	100%	100%	100%
utils
design-tokens.utils.ts	100%	100%	100%
flatten.utils.ts	100%	100%	100%
index.ts	100%	100%	100%
styles.utils.ts	100%	100%	100%

[github-actions]

🎨 Chromatic Results 🎨
Chromatic URL	https://www.chromatic.com/build?appId=63cabc3ddcbcfa97ebf8e624&number=158
Storybook Preview	https://63cabc3ddcbcfa97ebf8e624-xhjflmfkhj.chromatic.com/
Component Count	16

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2fe6c8a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 3 targets

• nx run demo:build
• nx affected --parallel=2 --target=test --coverage
• nx affected --parallel=2 --target=build

---

Sent with 💌 from NxCloud.