@codecademy/styleguide 78.5.6-alpha.dca0ab.0 → 78.5.6-alpha.e58773.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.
- package/CHANGELOG.md +1 -1
- package/package.json +2 -2
- package/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx +3 -69
- package/src/lib/Organisms/ConnectedForm/ConnectedForm/example.ts +67 -0
- package/src/lib/Organisms/Lists & Tables/DataList/DataList.mdx +2 -0
- package/src/lib/Organisms/Lists & Tables/DataList/DataList.stories.tsx +4 -9
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
|
-
### [78.5.6-alpha.
|
|
6
|
+
### [78.5.6-alpha.e58773.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.e58773.0) (2026-02-03)
|
|
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": "78.5.6-alpha.
|
|
4
|
+
"version": "78.5.6-alpha.e58773.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": "
|
|
11
|
+
"gitHead": "03522c12753a56a10eb8561f6988674d928c0e28"
|
|
12
12
|
}
|
|
@@ -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
|
-
|
|
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
|
|
|
@@ -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
|
+
};`;
|
|
@@ -85,6 +85,8 @@ const DataTown = () => {
|
|
|
85
85
|
|
|
86
86
|
Rows in a DataList can be expanded to show more information. You can set the `expanded` prop to an array of row keys to expand them by default.
|
|
87
87
|
|
|
88
|
+
<Canvas of={DataListStories.Expanded} />
|
|
89
|
+
|
|
88
90
|
### Selected
|
|
89
91
|
|
|
90
92
|
Rows in a DataList can also be selected. You can set the `selected` prop to an array of row keys to select them by default.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Added because SB and TS don't play nice with each other at the moment
|
|
2
2
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
3
3
|
// @ts-nocheck
|
|
4
|
-
import { DataList, DataTable, FlexBox
|
|
4
|
+
import { DataList, DataTable, FlexBox } from '@codecademy/gamut';
|
|
5
5
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
6
6
|
|
|
7
7
|
import {
|
|
@@ -21,13 +21,8 @@ const meta: Meta<typeof DataList> = {
|
|
|
21
21
|
query: { sort: { name: 'desc', role: 'asc' } },
|
|
22
22
|
rows: [
|
|
23
23
|
{
|
|
24
|
-
name:
|
|
25
|
-
|
|
26
|
-
Some Project <Text color="danger"> Error Publishing</Text>
|
|
27
|
-
<InfoTip info="Extra info here" placement="floating" />
|
|
28
|
-
</>
|
|
29
|
-
),
|
|
30
|
-
role: 'something else',
|
|
24
|
+
name: 'Jean Luc Picard',
|
|
25
|
+
role: 'Captain',
|
|
31
26
|
ship: 'USS Enterprise',
|
|
32
27
|
age: '59',
|
|
33
28
|
species: 'Human',
|
|
@@ -78,7 +73,7 @@ const meta: Meta<typeof DataList> = {
|
|
|
78
73
|
{
|
|
79
74
|
header: 'Name',
|
|
80
75
|
key: 'name',
|
|
81
|
-
size: '
|
|
76
|
+
size: 'lg',
|
|
82
77
|
type: 'header',
|
|
83
78
|
sortable: true,
|
|
84
79
|
},
|