Skip to content

Commit db002d3

Browse files
LinKCodingLinKCoding
committed
next batch
1 parent 32470fd commit db002d3

File tree

8 files changed

+115
-94
lines changed

8 files changed

+115
-94
lines changed

‎packages/styleguide/src/lib/About.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,42 +31,42 @@ Its organization roughly aligns with variations of [Atomic Design](https://bradf
3131
<TableOfContents
3232
links={[
3333
{
34-
id: 'Meta/About',
34+
id: `${metaParameters.title}/About`,
3535
subtitle: metaParameters.subtitle,
3636
title: metaParameters.title,
3737
},
3838
{
39-
id: 'Foundations/About',
39+
id: `${foundationsParameters.title}/About`,
4040
subtitle: foundationsParameters.subtitle,
4141
title: foundationsParameters.title,
4242
},
4343
{
44-
id: 'Layouts/About',
44+
id: `${layoutsParameters.title}/About`,
4545
subtitle: layoutsParameters.subtitle,
4646
title: layoutsParameters.title,
4747
},
4848
{
49-
id: 'Typography/About',
49+
id: `${typographyParameters.title}/About`,
5050
subtitle: typographyParameters.subtitle,
5151
title: typographyParameters.title,
5252
},
5353
{
54-
id: 'Atoms/About',
54+
id: `${atomsParameters.title}/About`,
5555
subtitle: atomsParameters.subtitle,
5656
title: atomsParameters.title,
5757
},
5858
{
59-
id: 'Molecules/About',
59+
id: `${moleculesParameters.title}/About`,
6060
subtitle: moleculesParameters.subtitle,
6161
title: moleculesParameters.title,
6262
},
6363
{
64-
id: 'Organisms/About',
64+
id: `${organismsParameters.title}/About`,
6565
subtitle: organismsParameters.subtitle,
6666
title: organismsParameters.title,
6767
},
6868
{
69-
id: 'UX Writing/About',
69+
id: `${uxWritingParameters.title}/About`,
7070
subtitle: uxWritingParameters.subtitle,
7171
title: uxWritingParameters.title,
7272
},

‎packages/styleguide/src/lib/Atoms/About.mdx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,115 +40,115 @@ export const parameters = {
4040
<TableOfContents
4141
links={[
4242
{
43-
id: 'Atoms/Animations',
43+
id: `${parameters.title}/${animationsParameters.title}`,
4444
subtitle: animationsParameters.subtitle,
4545
title: animationsParameters.title,
4646
status: animationsParameters.status,
4747
},
4848
{
49-
id: 'Atoms/Badge',
49+
id: `${parameters.title}/${badgeParameters.title}`,
5050
subtitle: badgeParameters.subtitle,
5151
title: badgeParameters.title,
5252
status: badgeParameters.status,
5353
},
5454
{
55-
id: 'Atoms/Buttons',
55+
id: `${parameters.title}/${buttonsParameters.title}`,
5656
subtitle: buttonsParameters.subtitle,
5757
title: buttonsParameters.title,
5858
status: buttonsParameters.status,
5959
},
6060
{
61-
id: 'Atoms/Card',
61+
id: `${parameters.title}/${cardParameters.title}`,
6262
subtitle: cardParameters.subtitle,
6363
title: cardParameters.title,
6464
status: cardParameters.status,
6565
},
6666
{
67-
id: 'Atoms/Drawer',
67+
id: `${parameters.title}/${drawerParameters.title}`,
6868
subtitle: drawerParameters.subtitle,
6969
title: drawerParameters.title,
7070
status: drawerParameters.status,
7171
},
7272
{
73-
id: 'Atoms/FocusTrap',
73+
id: `${parameters.title}/${focusTrapParameters.title}`,
7474
subtitle: focusTrapParameters.subtitle,
7575
title: focusTrapParameters.title,
7676
status: focusTrapParameters.status,
7777
},
7878
{
79-
id: 'Atoms/FormElements',
79+
id: `${parameters.title}/${formElementsParameters.title}`,
8080
subtitle: formElementsParameters.subtitle,
8181
title: formElementsParameters.title,
8282
status: formElementsParameters.status,
8383
},
8484
{
85-
id: 'Atoms/FormInputs',
85+
id: `${parameters.title}/${formInputsParameters.title}`,
8686
subtitle: formInputsParameters.subtitle,
8787
title: formInputsParameters.title,
8888
status: formInputsParameters.status,
8989
},
9090
{
91-
id: 'Atoms/Icons',
91+
id: `${parameters.title}/${iconsParameters.title}`,
9292
subtitle: iconsParameters.subtitle,
9393
title: iconsParameters.title,
9494
status: iconsParameters.status,
9595
},
9696
{
97-
id: 'Atoms/Illustrations',
97+
id: `${parameters.title}/${illustrationsParameters.title}`,
9898
subtitle: illustrationsParameters.subtitle,
9999
title: illustrationsParameters.title,
100100
status: illustrationsParameters.status,
101101
},
102102
{
103-
id: 'Atoms/InternalFloatingCard',
103+
id: `${parameters.title}/${internalFloatingCardParameters.title}`,
104104
subtitle: internalFloatingCardParameters.subtitle,
105105
title: internalFloatingCardParameters.title,
106106
status: internalFloatingCardParameters.status,
107107
},
108108
{
109-
id: 'Atoms/Loaders',
109+
id: `${parameters.title}/${loadersParameters.title}`,
110110
subtitle: loadersParameters.subtitle,
111111
title: loadersParameters.title,
112112
status: loadersParameters.status,
113113
},
114114
{
115-
id: 'Atoms/Patterns',
115+
id: `${parameters.title}/${patternsParameters.title}`,
116116
subtitle: patternsParameters.subtitle,
117117
title: patternsParameters.title,
118118
status: patternsParameters.status,
119119
},
120120
{
121-
id: 'Atoms/PopoverContainer',
121+
id: `${parameters.title}/${popoverContainerParameters.title}`,
122122
subtitle: popoverContainerParameters.subtitle,
123123
title: popoverContainerParameters.title,
124124
status: popoverContainerParameters.status,
125125
},
126126
{
127-
id: 'Atoms/ProgressBar',
127+
id: `${parameters.title}/${progressBarParameters.title}`,
128128
subtitle: progressBarParameters.subtitle,
129129
title: progressBarParameters.title,
130130
status: progressBarParameters.status,
131131
},
132132
{
133-
id: 'Atoms/RadialProgress',
133+
id: `${parameters.title}/${radialProgressParameters.title}`,
134134
subtitle: radialProgressParameters.subtitle,
135135
title: radialProgressParameters.title,
136136
status: radialProgressParameters.status,
137137
},
138138
{
139-
id: 'Atoms/SkipToContent',
139+
id: `${parameters.title}/${skipToContentParameters.title}`,
140140
subtitle: skipToContentParameters.subtitle,
141141
title: skipToContentParameters.title,
142142
status: skipToContentParameters.status,
143143
},
144144
{
145-
id: 'Atoms/Tag',
145+
id: `${parameters.title}/${tagParameters.title}`,
146146
subtitle: tagParameters.subtitle,
147147
title: tagParameters.title,
148148
status: tagParameters.status,
149149
},
150150
{
151-
id: 'Atoms/Toggle',
151+
id: `${parameters.title}/${toggleParameters.title}`,
152152
subtitle: toggleParameters.subtitle,
153153
title: toggleParameters.title,
154154
status: toggleParameters.status,

‎packages/styleguide/src/lib/Foundations/About.mdx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import { Meta } from '@storybook/blocks';
22

33
import { AboutHeader, TableOfContents } from '~styleguide/blocks';
44

5+
import { parameters as colorModeParameters } from './ColorMode/ColorMode.mdx';
6+
import { parameters as layoutParameters } from './Layout.mdx';
7+
import { parameters as systemParameters } from './System/About.mdx';
8+
import { parameters as themeParameters } from './Theme/About.mdx';
9+
import { parameters as typographyParameters } from './Typography.mdx';
10+
import { parameters as utilitiesParameters } from './Utilities/Utilities.mdx';
11+
512
export const parameters = {
613
id: 'Foundations',
714
title: 'Foundations',
@@ -19,34 +26,34 @@ Sometimes referred to elsewhere as "tokens", they are the abstract units that co
1926
<TableOfContents
2027
links={[
2128
{
22-
id: 'Foundations/ColorMode',
23-
subtitle: 'Semantic color palette configuration.',
24-
title: 'ColorMode',
29+
id: `${parameters.title}/${colorModeParameters.title}`,
30+
subtitle: colorModeParameters.subtitle,
31+
title: colorModeParameters.title,
2532
},
2633
{
27-
id: 'Foundations/Layout',
28-
subtitle: 'Design guidelines for overall page layout.',
29-
title: 'Layout',
34+
id: `${parameters.title}/${layoutParameters.title}`,
35+
subtitle: layoutParameters.subtitle,
36+
title: layoutParameters.title,
3037
},
3138
{
32-
id: 'Foundations/System',
33-
subtitle: 'System properties and style functions',
34-
title: 'System',
39+
id: `${parameters.title}/${systemParameters.title}`,
40+
subtitle: systemParameters.subtitle,
41+
title: systemParameters.title,
3542
},
3643
{
37-
id: 'Foundations/Theme',
38-
subtitle: 'The Emotion theme for codecademy.',
39-
title: 'Theme',
44+
id: `${parameters.title}/${themeParameters.title}`,
45+
subtitle: themeParameters.subtitle,
46+
title: themeParameters.title,
4047
},
4148
{
42-
id: 'Foundations/Typography',
43-
subtitle: 'Typography design guidelines and token scales.',
44-
title: 'Typography',
49+
id: `${parameters.title}/${typographyParameters.title}`,
50+
subtitle: typographyParameters.subtitle,
51+
title: typographyParameters.title,
4552
},
4653
{
47-
id: 'Foundations/Utilities',
48-
subtitle: 'Style utilities for both SCSS and Emotion.',
49-
title: 'Utilities',
54+
id: `${parameters.title}/${utilitiesParameters.title}`,
55+
subtitle: utilitiesParameters.subtitle,
56+
title: utilitiesParameters.title,
5057
},
5158
]}
5259
/>

‎packages/styleguide/src/lib/Layouts/About.mdx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { Meta } from '@storybook/blocks';
22

33
import { AboutHeader, TableOfContents } from '~styleguide/blocks';
44

5+
import { parameters as boxesParameters } from './Boxes/About.mdx';
6+
import { parameters as contentContainerParameters } from './ContentContainer/ContentContainer.mdx';
7+
import { parameters as layoutGridParameters } from './LayoutGrid/LayoutGrid.mdx';
8+
59
export const parameters = {
610
id: 'Layouts',
711
title: 'Layouts',
@@ -18,23 +22,22 @@ Pure sizing and padding containers. These position our elements on pages in stan
1822
<TableOfContents
1923
links={[
2024
{
21-
id: 'Layouts/Boxes/About',
22-
subtitle: 'Flexible container component with all system props available.',
23-
title: 'Boxes',
24-
status: 'current',
25+
id: `${parameters.title}/${boxesParameters.title}`,
26+
subtitle: boxesParameters.subtitle,
27+
title: boxesParameters.title,
28+
status: boxesParameters.status,
2529
},
2630
{
27-
id: 'Layouts/ContentContainer',
28-
subtitle:
29-
'A container element meant to hold all content on the page, and provide the correct horizontal padding.',
30-
status: 'current',
31-
title: 'ContentContainer',
31+
id: `${parameters.title}/${contentContainerParameters.title}`,
32+
subtitle: contentContainerParameters.subtitle,
33+
status: contentContainerParameters.status,
34+
title: contentContainerParameters.title,
3235
},
3336
{
34-
id: 'Layouts/LayoutGrid',
35-
subtitle: 'A CSS grid based 12 Column grid system using just grid items.',
36-
status: 'current',
37-
title: 'LayoutGrid',
37+
id: `${parameters.title}/${layoutGridParameters.title}`,
38+
subtitle: layoutGridParameters.subtitle,
39+
status: layoutGridParameters.status,
40+
title: layoutGridParameters.title,
3841
},
3942
]}
4043
/>

‎packages/styleguide/src/lib/Layouts/ContentContainer/ContentContainer.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
55
import * as ContentContainerStories from './ContentContainer.stories';
66

77
export const parameters = {
8+
title: 'ContentContainer',
89
subtitle:
910
'A container element meant to hold all content on the page, and provide the correct horizontal padding.',
1011
status: 'current',

‎packages/styleguide/src/lib/Layouts/LayoutGrid/LayoutGrid.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ComponentHeader } from '~styleguide/blocks';
55
import * as LayoutGridStories from './LayoutGrid.stories';
66

77
export const parameters = {
8+
title: 'LayoutGrid',
89
subtitle: 'A CSS grid based 12 Column grid system using just grid items.',
910
status: 'current',
1011
source: {

‎packages/styleguide/src/lib/Meta/About.mdx‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ import { Meta } from '@storybook/blocks';
22

33
import { AboutHeader, TableOfContents } from '~styleguide/blocks';
44

5+
import { parameters as bestPracticesParameters } from './Best Practices.mdx';
6+
import { parameters as brandParameters } from './Brand.mdx';
7+
import { parameters as contributingParameters } from './Contributing.mdx';
8+
import { parameters as faqsParameters } from './FAQs.mdx';
9+
import { parameters as installationParameters } from './Installation.mdx';
10+
import { parameters as storiesParameters } from './Stories.mdx';
11+
import { parameters as usageGuideParameters } from './Usage Guide.mdx';
12+
513
export const parameters = {
614
id: 'Meta',
715
title: 'Meta',
@@ -16,39 +24,39 @@ export const parameters = {
1624
<TableOfContents
1725
links={[
1826
{
19-
id: 'Meta/Best Practices',
20-
subtitle: 'Current best practices for using the Gamut Design System.',
21-
title: 'Best Practices',
27+
id: `${parameters.title}/${bestPracticesParameters.title}`,
28+
subtitle: bestPracticesParameters.subtitle,
29+
title: bestPracticesParameters.title,
2230
},
2331
{
24-
id: 'Meta/Contributing',
25-
subtitle: `Thanks so much for being interested in contributing to Gamut! We love working with Codecademy employees across all our teams.`,
26-
title: 'Contributing',
32+
id: `${parameters.title}/${contributingParameters.title}`,
33+
subtitle: contributingParameters.subtitle,
34+
title: contributingParameters.title,
2735
},
2836
{
29-
id: 'Meta/FAQs',
30-
subtitle: `Please let us know if there are questions you'd like answered here!`,
31-
title: 'FAQ',
37+
id: `${parameters.title}/${faqsParameters.title}`,
38+
subtitle: faqsParameters.subtitle,
39+
title: faqsParameters.title,
3240
},
3341
{
34-
id: 'Meta/Stories',
35-
subtitle: `Learn how to create stories for the styleguide.`,
36-
title: 'Stories',
42+
id: `${parameters.title}/${storiesParameters.title}`,
43+
subtitle: storiesParameters.subtitle,
44+
title: storiesParameters.title,
3745
},
3846
{
39-
id: 'Meta/Brand',
40-
subtitle: `Information about the Brand library in the Codecademy monorepo.`,
41-
title: 'Brand',
47+
id: `${parameters.title}/${brandParameters.title}`,
48+
subtitle: brandParameters.subtitle,
49+
title: brandParameters.title,
4250
},
4351
{
44-
id: 'Meta/Installation',
45-
subtitle: `How to install Gamut in your project.`,
46-
title: 'Installation',
52+
id: `${parameters.title}/${installationParameters.title}`,
53+
subtitle: installationParameters.subtitle,
54+
title: installationParameters.title,
4755
},
4856
{
49-
id: 'Meta/Usage Guide',
50-
subtitle: `Tips and tricks to using the Gamut Storybook as a user and developer.`,
51-
title: 'Usage Guide',
57+
id: `${parameters.title}/${usageGuideParameters.title}`,
58+
subtitle: usageGuideParameters.subtitle,
59+
title: usageGuideParameters.title,
5260
},
5361
]}
5462
/>

0 commit comments

Comments
 (0)