@codecademy/styleguide 79.1.2 → 79.1.3-alpha.bbcee7.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 (4) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +2 -2
  3. package/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx +3 -69
  4. package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts +67 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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.bbcee7.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3-alpha.bbcee7.0) (2026-02-19)
7
+
8
+ **Note:** Version bump only for package @codecademy/styleguide
9
+
6
10
  ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
7
11
 
8
12
  **Note:** Version bump only for package @codecademy/styleguide
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.2",
4
+ "version": "79.1.3-alpha.bbcee7.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": "bbc4cf8da76ebc754ed05b11acd9d2e81bb8683e"
11
+ "gitHead": "223adaa2693af668e6e511c88428a1012229f2ee"
12
12
  }
package/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx CHANGED
@@ -1,8 +1,10 @@
1
+ import { DetailedCode } from '@codecademy/gamut';
1
2
  import { Canvas, Controls, Meta } from '@storybook/blocks';
2
3
 
3
4
  import { ComponentHeader, LinkTo } from '~styleguide/blocks';
4
5
 
5
6
  import * as ConnectedFormStories from './ConnectedForm.stories';
7
+ import { example } from './example';
6
8
 
7
9
  export const parameters = {
8
10
  title: 'ConnectedForm',
@@ -40,75 +42,7 @@ This hook also returns the `FormRequiredText` component - include this before yo
40
42
 
41
43
  ### Example code
42
44
 
43
- ```tsx
44
- import {
45
- ConnectedCheckbox,
46
- ConnectedInput,
47
- ConnectedSelect,
48
- useConnectedForm,
49
- } from '@codecademy/gamut';
50
-
51
- import { TerminalIcon } from '@codecademy/gamut-icons';
52
-
53
- export const GoodForm = () => {
54
- const {
55
- ConnectedFormGroup,
56
- ConnectedForm,
57
- connectedFormProps,
58
- FormRequiredText,
59
- } = useConnectedForm({
60
- defaultValues: {
61
- thisField: true,
62
- thatField: 'zero',
63
- anotherField: 'state your name.',
64
- },
65
- validationRules: {
66
- thisField: { required: 'you need to check this.' },
67
- thatField: {
68
- pattern: {
69
- value: /^(?:(?!zero).)*$/,
70
- message: 'literally anything but zero',
71
- },
72
- },
73
- },
74
- });
75
-
76
- return (
77
- <ConnectedForm
78
- onSubmit={({ thisField }) => console.log(thisField)}
79
- resetOnSubmit
80
- {...connectedFormProps}
81
- >
82
- <SubmitButton>submit this form.</SubmitButton>
83
- <ConnectedFormGroup
84
- name="thisField"
85
- label="cool checkbox bruh"
86
- field={{
87
- component: ConnectedCheckbox,
88
- label: 'check it ouuut',
89
- }}
90
- />
91
- <ConnectedFormGroup
92
- name="thatField"
93
- label="cool select dude"
94
- field={{
95
- component: ConnectedSelect,
96
- options: ['one', 'two', 'zero'],
97
- }}
98
- />
99
- <ConnectedFormGroup
100
- name="anotherField"
101
- label="cool input"
102
- field={{
103
- component: ConnectedInput,
104
- icon: TerminalIcon,
105
- }}
106
- />
107
- <FormRequiredText />
108
- </ConnectedForm>
109
- );
110
- };
111
- ```
45
+ <DetailedCode code={example} preview />
112
46
 
113
47
  ## Variants
114
48
 
package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts ADDED
@@ -0,0 +1,67 @@
1
+ export const example = `import {
2
+ ConnectedCheckbox,
3
+ ConnectedInput,
4
+ ConnectedSelect,
5
+ useConnectedForm,
6
+ } from '@codecademy/gamut';
7
+
8
+ import { TerminalIcon } from '@codecademy/gamut-icons';
9
+
10
+ export const GoodForm = () => {
11
+ const {
12
+ ConnectedFormGroup,
13
+ ConnectedForm,
14
+ connectedFormProps,
15
+ FormRequiredText,
16
+ } = useConnectedForm({
17
+ defaultValues: {
18
+ thisField: true,
19
+ thatField: 'zero',
20
+ anotherField: 'state your name.',
21
+ },
22
+ validationRules: {
23
+ thisField: { required: 'you need to check this.' },
24
+ thatField: {
25
+ pattern: {
26
+ value: /^(?:(?!zero).)*$/,
27
+ message: 'literally anything but zero',
28
+ },
29
+ },
30
+ },
31
+ });
32
+
33
+ return (
34
+ <ConnectedForm
35
+ onSubmit={({ thisField }) => console.log(thisField)}
36
+ resetOnSubmit
37
+ {...connectedFormProps}
38
+ >
39
+ <SubmitButton>submit this form.</SubmitButton>
40
+ <ConnectedFormGroup
41
+ name="thisField"
42
+ label="cool checkbox bruh"
43
+ field={{
44
+ component: ConnectedCheckbox,
45
+ label: 'check it ouuut',
46
+ }}
47
+ />
48
+ <ConnectedFormGroup
49
+ name="thatField"
50
+ label="cool select dude"
51
+ field={{
52
+ component: ConnectedSelect,
53
+ options: ['one', 'two', 'zero'],
54
+ }}
55
+ />
56
+ <ConnectedFormGroup
57
+ name="anotherField"
58
+ label="cool input"
59
+ field={{
60
+ component: ConnectedInput,
61
+ icon: TerminalIcon,
62
+ }}
63
+ />
64
+ <FormRequiredText />
65
+ </ConnectedForm>
66
+ );
67
+ };`;