@codecademy/styleguide 79.1.3-alpha.973330.0 → 79.1.3-alpha.9c9696.0

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.
Files changed (6) hide show
  1. package/.storybook/components/ImageWrapper.tsx +4 -2
  2. package/CHANGELOG.md +1 -1
  3. package/package.json +2 -2
  4. package/src/lib/Organisms/BarChart/BarChart.mdx +10 -5
  5. package/src/lib/Organisms/BarChart/BarChart.stories.tsx +30 -30
  6. package/src/static/organisms/barchart.png +0 -0
package/.storybook/components/ImageWrapper.tsx CHANGED
@@ -3,8 +3,9 @@ import * as React from 'react';
3
3
  import styled from '@emotion/styled';
4
4
 
5
5
  interface ImageWrapperProps {
6
- src: string;
7
6
  alt: string;
7
+ height: number | string;
8
+ src: string;
8
9
  }
9
10
 
10
11
  const StyledImage = styled.img`
@@ -15,12 +16,13 @@ const StyledImage = styled.img`
15
16
  export const ImageWrapper: React.FC<ImageWrapperProps & BoxProps> = ({
16
17
  src,
17
18
  alt,
19
+ height = '216px',
18
20
  ...props
19
21
  }) => {
20
22
  return (
21
23
  <Box
22
24
  width={'100%'}
23
- height="216px"
25
+ height={height}
24
26
  display="flex"
25
27
  justifyContent={'center'}
26
28
  alignItems="center"
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.1.3-alpha.973330.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.973330.0) (2026-02-25)
6
+ ### [79.1.3-alpha.9c9696.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.9c9696.0) (2026-03-10)
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.1.3-alpha.973330.0",
4
+ "version": "79.1.3-alpha.9c9696.0",
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": "57f7b9a8905a64c59fbae688572430f634327506"
11
+ "gitHead": "7599aa0d84008c03fe15e73fc35bb753f4800b8c"
12
12
  }
package/src/lib/Organisms/BarChart/BarChart.mdx CHANGED
@@ -47,8 +47,9 @@ Use BarChart to display comparative data across categories, such as skills progr
47
47
  ## Anatomy
48
48
 
49
49
  <ImageWrapper
50
- src="./organisms/barchart.png"
51
50
  alt="The anatomy of the BarChart component, detailed below."
51
+ height="auto"
52
+ src="./organisms/barchart.png"
52
53
  />
53
54
 
54
55
  1. **Bar row**
@@ -191,9 +192,13 @@ TypeScript automatically infers the bar type from your `barValues` prop. This me
191
192
 
192
193
  ```typescript
193
194
  const barsWithDates = [
194
- { yLabel: 'Python', seriesOneValue: 1500, dateAdded: new Date('2023-01-15') },
195
195
  {
196
- yLabel: 'JavaScript',
196
+ categoryLabel: 'Python',
197
+ seriesOneValue: 1500,
198
+ dateAdded: new Date('2023-01-15'),
199
+ },
200
+ {
201
+ categoryLabel: 'JavaScript',
197
202
  seriesOneValue: 2000,
198
203
  dateAdded: new Date('2023-03-20'),
199
204
  },
@@ -395,9 +400,9 @@ translations={{
395
400
 
396
401
  ### Accessibility: strings vs functions
397
402
 
398
- **Strings** — Use when the built-in template order fits your language. Fragments are plugged into the default pattern (e.g. `"{value} {unit} {inLabel} {yLabel}"`).
403
+ **Strings** — Use when the built-in template order fits your language. Fragments are plugged into the default pattern (e.g. `"{value} {unit} {inLabel} {categoryLabel}"`).
399
404
 
400
- **Functions** — Use when you need full control. Each function receives context (`yLabel`, values, `unit`, `locale`) and returns the complete summary string.
405
+ **Functions** — Use when you need full control. Each function receives context (`categoryLabel`, values, `unit`, `locale`) and returns the complete summary string.
401
406
 
402
407
  <Canvas of={BarChartStories.WithFunctionTranslations} />
403
408
 
package/src/lib/Organisms/BarChart/BarChart.stories.tsx CHANGED
@@ -26,45 +26,45 @@ export default meta;
26
26
  type Story = StoryObj<typeof BarChart>;
27
27
 
28
28
  const simpleBarData: BarProps[] = [
29
- { yLabel: 'Python', seriesOneValue: 1500 },
30
- { yLabel: 'JavaScript', seriesOneValue: 2000 },
31
- { yLabel: 'HTML/CSS', seriesOneValue: 800 },
32
- { yLabel: 'SQL', seriesOneValue: 600 },
33
- { yLabel: 'React', seriesOneValue: 450 },
29
+ { categoryLabel: 'Python', seriesOneValue: 1500 },
30
+ { categoryLabel: 'JavaScript', seriesOneValue: 2000 },
31
+ { categoryLabel: 'HTML/CSS', seriesOneValue: 800 },
32
+ { categoryLabel: 'SQL', seriesOneValue: 600 },
33
+ { categoryLabel: 'React', seriesOneValue: 450 },
34
34
  ];
35
35
 
36
36
  const stackedBarData: BarProps[] = [
37
- { yLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
37
+ { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
38
38
  {
39
- yLabel: 'JavaScript',
39
+ categoryLabel: 'JavaScript',
40
40
  icon: TerminalIcon,
41
41
  seriesOneValue: 1800,
42
42
  seriesTwoValue: 2000,
43
43
  },
44
- { yLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
45
- { yLabel: 'SQL', seriesOneValue: 550, seriesTwoValue: 600 },
46
- { yLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
44
+ { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
45
+ { categoryLabel: 'SQL', seriesOneValue: 550, seriesTwoValue: 600 },
46
+ { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
47
47
  ];
48
48
 
49
49
  const accessibilityBarData: BarProps[] = [
50
- { yLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
50
+ { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
51
51
  {
52
- yLabel: 'JavaScript',
52
+ categoryLabel: 'JavaScript',
53
53
  seriesOneValue: 1800,
54
54
  seriesTwoValue: 2000,
55
55
  href: '/javascript',
56
56
  },
57
- { yLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
58
- { yLabel: 'SQL', seriesOneValue: 550, href: '/sql' },
59
- { yLabel: 'Rust', seriesOneValue: 400 },
60
- { yLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
57
+ { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
58
+ { categoryLabel: 'SQL', seriesOneValue: 550, href: '/sql' },
59
+ { categoryLabel: 'Rust', seriesOneValue: 400 },
60
+ { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
61
61
  ];
62
62
 
63
63
  const accessibilityTranslations: PartialBarChartTranslations = {
64
64
  accessibility: {
65
65
  gainedNowAt: (ctx) =>
66
- `${ctx.seriesOneValue} ${ctx.unit} gained — now at ${ctx.seriesTwoValue} ${ctx.unit} in ${ctx.yLabel}`,
67
- inLabel: (ctx) => `${ctx.value} ${ctx.unit} in ${ctx.yLabel}`,
66
+ `${ctx.seriesOneValue} ${ctx.unit} gained — now at ${ctx.seriesTwoValue} ${ctx.unit} in ${ctx.categoryLabel}`,
67
+ inLabel: (ctx) => `${ctx.value} ${ctx.unit} in ${ctx.categoryLabel}`,
68
68
  inOnly: (ctx) => `${ctx.value} ${ctx.unit}`.trim(),
69
69
  },
70
70
  locale: 'en',
@@ -72,31 +72,31 @@ const accessibilityTranslations: PartialBarChartTranslations = {
72
72
 
73
73
  const barDataWithIcons: BarProps[] = [
74
74
  {
75
- yLabel: 'Python',
75
+ categoryLabel: 'Python',
76
76
  seriesOneValue: 200,
77
77
  seriesTwoValue: 1500,
78
78
  icon: TerminalIcon,
79
79
  },
80
80
  {
81
- yLabel: 'JavaScript',
81
+ categoryLabel: 'JavaScript',
82
82
  seriesOneValue: 150,
83
83
  seriesTwoValue: 2000,
84
84
  icon: TerminalIcon,
85
85
  },
86
86
  {
87
- yLabel: 'Data Science',
87
+ categoryLabel: 'Data Science',
88
88
  seriesOneValue: 100,
89
89
  seriesTwoValue: 800,
90
90
  icon: DataScienceIcon,
91
91
  },
92
92
  {
93
- yLabel: 'Backend',
93
+ categoryLabel: 'Backend',
94
94
  seriesOneValue: 50,
95
95
  seriesTwoValue: 600,
96
96
  icon: TerminalIcon,
97
97
  },
98
98
  {
99
- yLabel: 'Reading',
99
+ categoryLabel: 'Reading',
100
100
  seriesOneValue: 75,
101
101
  seriesTwoValue: 450,
102
102
  icon: BookFlipPageIcon,
@@ -140,7 +140,7 @@ export const Interactive: Story = {
140
140
  args: {
141
141
  barValues: simpleBarData.map((bar) => ({
142
142
  ...bar,
143
- onClick: action(`Clicked ${bar.yLabel}`),
143
+ onClick: action(`Clicked ${bar.categoryLabel}`),
144
144
  })),
145
145
  title: 'Interactive skills chart',
146
146
  description: 'Click on any row to view detailed course information',
@@ -151,7 +151,7 @@ export const WithLinks: Story = {
151
151
  args: {
152
152
  barValues: simpleBarData.map((bar) => ({
153
153
  ...bar,
154
- href: `#${bar.yLabel.toLowerCase().replace(/\s+/g, '-')}`,
154
+ href: `#${bar.categoryLabel.toLowerCase().replace(/\s+/g, '-')}`,
155
155
  })),
156
156
  title: 'Skills chart with links',
157
157
  description: 'Each row links to its corresponding course page',
@@ -222,27 +222,27 @@ export const WithSorting: Story = {
222
222
 
223
223
  const customSortingBarValues = [
224
224
  {
225
- yLabel: 'Python',
225
+ categoryLabel: 'Python',
226
226
  seriesOneValue: 1500,
227
227
  dateAdded: new Date('2023-01-15'),
228
228
  },
229
229
  {
230
- yLabel: 'JavaScript',
230
+ categoryLabel: 'JavaScript',
231
231
  seriesOneValue: 2000,
232
232
  dateAdded: new Date('2023-03-20'),
233
233
  },
234
234
  {
235
- yLabel: 'React',
235
+ categoryLabel: 'React',
236
236
  seriesOneValue: 450,
237
237
  dateAdded: new Date('2023-06-10'),
238
238
  },
239
239
  {
240
- yLabel: 'TypeScript',
240
+ categoryLabel: 'TypeScript',
241
241
  seriesOneValue: 300,
242
242
  dateAdded: new Date('2023-08-05'),
243
243
  },
244
244
  {
245
- yLabel: 'SQL',
245
+ categoryLabel: 'SQL',
246
246
  seriesOneValue: 600,
247
247
  dateAdded: new Date('2023-02-28'),
248
248
  },