@codecademy/styleguide 79.2.4-alpha.be71e3.0 → 79.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/package.json +2 -2
- package/src/lib/Meta/Gamut writing guide/Documentation in code.mdx +1 -1
- package/src/lib/Meta/Gamut writing guide/Referencing code.mdx +6 -6
- package/src/lib/Meta/Gamut writing guide/Stories/About pages.mdx +1 -1
- package/src/lib/Meta/Gamut writing guide/Stories/About.mdx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
### [79.2.4
|
|
6
|
+
### [79.2.4](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.3...@codecademy/styleguide@79.2.4) (2026-03-23)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @codecademy/styleguide
|
|
9
9
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/styleguide",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "79.2.4
|
|
4
|
+
"version": "79.2.4",
|
|
5
5
|
"author": "Codecademy Engineering",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"repository": "git@github.com:Codecademy/gamut.git",
|
|
11
|
-
"gitHead": "
|
|
11
|
+
"gitHead": "63b39d43192ec941e8e5e502ce558cf1135b48a7"
|
|
12
12
|
}
|
|
@@ -17,10 +17,10 @@ This guide covers how to reference code elements, UI components, file paths, and
|
|
|
17
17
|
|
|
18
18
|
## Code in Text
|
|
19
19
|
|
|
20
|
-
- Use backticks for inline code: `onClick`, `flex-direction`, `Box`, `StrokeButton`, `variant`, backgroundColor`, etc.
|
|
20
|
+
- Use backticks for inline code: `onClick`, `flex-direction`, `Box`, `StrokeButton`, `variant`, `backgroundColor`, etc.
|
|
21
21
|
- File and package names: `Button.tsx`, `package.json`, `@codecademy/gamut`
|
|
22
|
-
- When linking to
|
|
23
|
-
- Values assigned for props or variables: `true`, `
|
|
22
|
+
- When linking to stories, use Storybook's `<LinkTo />` component
|
|
23
|
+
- Values assigned for props or variables: `true`, `16px`, `null`
|
|
24
24
|
- "The `Box` component" (first mention) → "the component" (subsequent mentions)
|
|
25
25
|
- When plural, the component should stay singular and the “component” is the pluralized, e.g
|
|
26
26
|
- ✅ “These `Box` components are…”
|
|
@@ -33,9 +33,9 @@ Code samples help developers understand how to implement components and patterns
|
|
|
33
33
|
### Format:
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
|
-
import {
|
|
37
|
-
export const
|
|
38
|
-
<
|
|
36
|
+
import { StrokeButton } from '@codecademy/gamut';
|
|
37
|
+
export const SimpleButtonExample: React.FC = () => (
|
|
38
|
+
<StrokeButton variant="primary">Click me</StrokeButton>
|
|
39
39
|
);
|
|
40
40
|
```
|
|
41
41
|
|
|
@@ -17,7 +17,7 @@ An `About.mdx` file serves as a landing page for folders containing multiple rel
|
|
|
17
17
|
|
|
18
18
|
## When to create an About page
|
|
19
19
|
|
|
20
|
-
Create an `About.mdx` file when multiple stories are presented in a folder. For example, the <LinkTo id="Atoms/
|
|
20
|
+
Create an `About.mdx` file when multiple stories are presented in a folder. For example, the <LinkTo id="Atoms/Icons/About">Icons</LinkTo> folder contains an `About.mdx` file with a table of contents that links to more specific information about the icons — in this case, <LinkTo id="Atoms/Icons/Mini">Mini icons</LinkTo> and <LinkTo id="Atoms/Icons/Regular">Regular icons</LinkTo>.
|
|
21
21
|
|
|
22
22
|
## Basic structure
|
|
23
23
|
|
|
@@ -41,7 +41,7 @@ When making a new story, there are a few things to keep in mind:
|
|
|
41
41
|
- Example: `General principles.mdx`
|
|
42
42
|
- Component-related files should use kebab-case: `RadialProgress.mdx`
|
|
43
43
|
|
|
44
|
-
First find the right folder for the story in `packages/styleguide/stories` (e.g. `Atoms
|
|
44
|
+
First find the right folder for the story in `packages/styleguide/stories` (e.g. `Atoms`, `Molecules`, `Organisms`, etc...).
|
|
45
45
|
After finding it, create a new folder with two new files `#{COMPONENT_NAME}.stories.tsx` and `#{COMPONENT_NAME}.mdx`. This folder can also contain examples or other associated utility files.
|
|
46
46
|
|
|
47
47
|
## Learn more
|