@codecademy/gamut 70.0.1-alpha.cbad11.0 → 70.0.1-alpha.f3bbea.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/agent-tools/DESIGN.Codecademy.md +1 -1
- package/agent-tools/rules/accessibility.mdc +1 -1
- package/dist/ConnectedForm/ConnectedFormGroup.js +3 -4
- package/dist/ConnectedForm/SubmitButton.js +2 -3
- package/dist/GridForm/GridFormInputGroup/index.js +3 -4
- package/dist/HiddenText/index.d.ts +7 -0
- package/dist/HiddenText/index.js +16 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +6 -6
|
@@ -481,7 +481,7 @@ Components are organized into three tiers:
|
|
|
481
481
|
|
|
482
482
|
### Atoms — foundational, single-purpose
|
|
483
483
|
|
|
484
|
-
Badge, Button (FillButton, StrokeButton, CTAButton, TextButton, IconButton), ButtonBase, Card, Checkbox, CodeBlock, ColorMode, Drawer, FlexBox, FormGroup, GridBox, Icon, Input, Label, Loader, Radio, Select, Spinner, Tag, TextArea, Toggle, Tooltip
|
|
484
|
+
Badge, Button (FillButton, StrokeButton, CTAButton, TextButton, IconButton), ButtonBase, Card, Checkbox, CodeBlock, ColorMode, Drawer, FlexBox, FormGroup, GridBox, HiddenText, Icon, Input, Label, Loader, Radio, Select, Spinner, Tag, TextArea, Toggle, Tooltip
|
|
485
485
|
|
|
486
486
|
### Molecules — composed of atoms, handle a discrete task
|
|
487
487
|
|
|
@@ -56,7 +56,7 @@ Match `htmlFor` on `<FormGroupLabel>` with the `id` on the control. Base `<FormG
|
|
|
56
56
|
|
|
57
57
|
## Screen-reader-only text
|
|
58
58
|
|
|
59
|
-
Use `<Text screenreader>` for visually hidden but announced content.
|
|
59
|
+
Use `<Text screenreader>` for visually hidden but announced content. `<HiddenText>` is deprecated.
|
|
60
60
|
|
|
61
61
|
## Color and contrast
|
|
62
62
|
|
|
@@ -4,8 +4,8 @@ import { useEffect } from 'react';
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { FormError, FormGroup, FormGroupLabel } from '..';
|
|
6
6
|
import { Anchor } from '../Anchor';
|
|
7
|
+
import { HiddenText } from '../HiddenText';
|
|
7
8
|
import { Markdown } from '../Markdown';
|
|
8
|
-
import { Text } from '../Typography';
|
|
9
9
|
import { getErrorMessage, useField } from './utils';
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
11
|
const ErrorAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
@@ -13,7 +13,7 @@ const ErrorAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
|
13
13
|
label: "ErrorAnchor"
|
|
14
14
|
})(css({
|
|
15
15
|
color: 'feedback-error'
|
|
16
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
16
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYW9CIiwiZmlsZSI6Ii4uLy4uL3NyYy9Db25uZWN0ZWRGb3JtL0Nvbm5lY3RlZEZvcm1Hcm91cC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBGb3JtRXJyb3IsIEZvcm1Hcm91cCwgRm9ybUdyb3VwTGFiZWwsIEZvcm1Hcm91cFByb3BzIH0gZnJvbSAnLi4nO1xuaW1wb3J0IHsgQW5jaG9yIH0gZnJvbSAnLi4vQW5jaG9yJztcbmltcG9ydCB7IEhpZGRlblRleHQgfSBmcm9tICcuLi9IaWRkZW5UZXh0JztcbmltcG9ydCB7IE1hcmtkb3duIH0gZnJvbSAnLi4vTWFya2Rvd24nO1xuaW1wb3J0IHsgSW5mb1RpcFN1YkNvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vVGlwL0luZm9UaXAvdHlwZS11dGlscyc7XG5pbXBvcnQgeyBDb25uZWN0ZWRGaWVsZCwgRmllbGRQcm9wcywgU3VibWl0Q29udGV4dFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRFcnJvck1lc3NhZ2UsIHVzZUZpZWxkIH0gZnJvbSAnLi91dGlscyc7XG5cbmNvbnN0IEVycm9yQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RlZEZvcm1Hcm91cEJhc2VQcm9wc1xuICBleHRlbmRzIE9taXQ8XG4gICAgRm9ybUdyb3VwUHJvcHMsXG4gICAgJ2xhYmVsJyB8ICdkaXNhYmxlZCcgfCAnZGVzY3JpcHRpb24nIHwgJ2h0bWxGb3InXG4gID4ge1xuICBjdXN0b21FcnJvcj86IHN0cmluZztcbiAgZXJyb3JUeXBlPzogJ2luaXRpYWwnIHwgJ2Fic29sdXRlJztcbiAgaGlkZUxhYmVsPzogYm9vbGVhbjtcbiAgbmFtZTogc3RyaW5nO1xuICBsYWJlbDogUmVhY3QuUmVhY3ROb2RlO1xuICByZXF1aXJlZD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJbmZvVGlwIHRvIGRpc3BsYXkgbmV4dCB0byB0aGUgZmllbGQgbGFiZWwuIFRoZSBJbmZvVGlwIGJ1dHRvbiBpc1xuICAgKiBhdXRvbWF0aWNhbGx5IGxhYmVsbGVkIGJ5IHRoZSBmaWVsZCBsYWJlbC4gVG8gb3ZlcnJpZGUgdGhpcyBiZWhhdmlvcixcbiAgICogcHJvdmlkZSBgYXJpYUxhYmVsYCBvciBgYXJpYUxhYmVsbGVkYnlgLlxuICAgKi9cbiAgaW5mb3RpcD86IEluZm9UaXBTdWJDb21wb25lbnRQcm9wcztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBDb25uZWN0ZWRGb3JtR3JvdXBQcm9wczxUIGV4dGVuZHMgQ29ubmVjdGVkRmllbGQ+XG4gIGV4dGVuZHMgU3VibWl0Q29udGV4dFByb3BzLFxuICAgIENvbm5lY3RlZEZvcm1Hcm91cEJhc2VQcm9wcyB7XG4gIC8qKlxuICAgKiBBbiBvYmplY3QgY29uc2lzdGluZyBvZiBhIGBjb21wb25lbnRgIGtleSB0byBzcGVjaWZ5IHdoYXQgQ29ubmVjdGVkRm9ybUlucHV0IHRvIHJlbmRlciAtIHRoZSByZW1haW5pbmcga2V5L3ZhbHVlIHBhaXJzIGFyZSB0aGF0IGNvbXBvbmVudHMgZGVzaXJlZCBwcm9wcy5cbiAgICovXG4gIGZpZWxkOiBPbWl0PFJlYWN0LkNvbXBvbmVudFByb3BzPFQ+LCAnbmFtZScgfCAnZGlzYWJsZWQnPiAmIEZpZWxkUHJvcHM8VD47XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBDb25uZWN0ZWRGb3JtR3JvdXA8VCBleHRlbmRzIENvbm5lY3RlZEZpZWxkPih7XG4gIGN1c3RvbUVycm9yLFxuICBjaGlsZHJlbixcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgZXJyb3JUeXBlID0gJ2Fic29sdXRlJyxcbiAgZmllbGQsXG4gIGhpZGVMYWJlbCxcbiAgaWQsXG4gIGxhYmVsLFxuICBuYW1lLFxuICBsYWJlbFNpemUsXG4gIHNwYWNpbmcgPSAnZml0JyxcbiAgaXNTb2xvRmllbGQsXG4gIGluZm90aXAsXG59OiBDb25uZWN0ZWRGb3JtR3JvdXBQcm9wczxUPikge1xuICBjb25zdCB7IGVycm9yLCBpc0ZpcnN0RXJyb3IsIGlzRGlzYWJsZWQsIHNldEVycm9yLCB2YWxpZGF0aW9uIH0gPSB1c2VGaWVsZCh7XG4gICAgbmFtZSxcbiAgICBkaXNhYmxlZCxcbiAgfSk7XG4gIGNvbnN0IHsgY29tcG9uZW50OiBDb21wb25lbnQsIC4uLnJlc3QgfSA9IGZpZWxkO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGN1c3RvbUVycm9yKSB7XG4gICAgICBzZXRFcnJvcihuYW1lLCB7XG4gICAgICAgIHR5cGU6ICdtYW51YWwnLFxuICAgICAgICBtZXNzYWdlOiBjdXN0b21FcnJvcixcbiAgICAgIH0pO1xuICAgIH1cbiAgfSwgW2N1c3RvbUVycm9yLCBuYW1lLCBzZXRFcnJvcl0pO1xuXG4gIGNvbnN0IHJlbmRlcmVkTGFiZWwgPSAoXG4gICAgPEZvcm1Hcm91cExhYmVsXG4gICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgIGh0bWxGb3I9e2lkIHx8IG5hbWV9XG4gICAgICBpbmZvdGlwPXtpbmZvdGlwfVxuICAgICAgaXNTb2xvRmllbGQ9e2lzU29sb0ZpZWxkfVxuICAgICAgcmVxdWlyZWQ9eyEhdmFsaWRhdGlvbj8ucmVxdWlyZWR9XG4gICAgICBzaXplPXtsYWJlbFNpemV9XG4gICAgPlxuICAgICAge2xhYmVsfVxuICAgIDwvRm9ybUdyb3VwTGFiZWw+XG4gICk7XG5cbiAgY29uc3QgdGV4dEVycm9yID0gY3VzdG9tRXJyb3IgfHwgZ2V0RXJyb3JNZXNzYWdlKGVycm9yKTtcbiAgY29uc3Qgc2hvd0Vycm9yID0gISEodGV4dEVycm9yICYmICFoaWRlTGFiZWwpO1xuICBjb25zdCBlcnJvcklkID0gc2hvd0Vycm9yID8gYCR7aWQgfHwgbmFtZX1fZXJyb3JgIDogdW5kZWZpbmVkO1xuXG4gIHJldHVybiAoXG4gICAgPEZvcm1Hcm91cCBzcGFjaW5nPXtoaWRlTGFiZWwgPyAndGlnaHQnIDogc3BhY2luZ30+XG4gICAgICB7aGlkZUxhYmVsID8gPEhpZGRlblRleHQ+e3JlbmRlcmVkTGFiZWx9PC9IaWRkZW5UZXh0PiA6IHJlbmRlcmVkTGFiZWx9XG4gICAgICA8Q29tcG9uZW50XG4gICAgICAgIHsuLi4ocmVzdCBhcyBhbnkpfVxuICAgICAgICBhcmlhLWRlc2NyaWJlZGJ5PXtlcnJvcklkfVxuICAgICAgICBhcmlhLWludmFsaWQ9e3Nob3dFcnJvcn1cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICBuYW1lPXtuYW1lfVxuICAgICAgLz5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtzaG93RXJyb3IgJiYgKFxuICAgICAgICA8Rm9ybUVycm9yXG4gICAgICAgICAgYXJpYS1saXZlPXtpc0ZpcnN0RXJyb3IgPyAnYXNzZXJ0aXZlJyA6ICdvZmYnfVxuICAgICAgICAgIGlkPXtlcnJvcklkfVxuICAgICAgICAgIHJvbGU9e2lzRmlyc3RFcnJvciA/ICdhbGVydCcgOiAnc3RhdHVzJ31cbiAgICAgICAgICB2YXJpYW50PXtlcnJvclR5cGV9XG4gICAgICAgID5cbiAgICAgICAgICA8TWFya2Rvd25cbiAgICAgICAgICAgIGlubGluZVxuICAgICAgICAgICAgb3ZlcnJpZGVzPXt7XG4gICAgICAgICAgICAgIGE6IHtcbiAgICAgICAgICAgICAgICBhbGxvd2VkQXR0cmlidXRlczogWydocmVmJywgJ3RhcmdldCddLFxuICAgICAgICAgICAgICAgIGNvbXBvbmVudDogRXJyb3JBbmNob3IsXG4gICAgICAgICAgICAgICAgcHJvY2Vzc05vZGU6IChcbiAgICAgICAgICAgICAgICAgIG5vZGU6IHVua25vd24sXG4gICAgICAgICAgICAgICAgICBwcm9wczogeyBvbkNsaWNrPzogKCkgPT4gdm9pZCB9XG4gICAgICAgICAgICAgICAgKSA9PiB7XG4gICAgICAgICAgICAgICAgICBjb25zdCB7IGtleTogZWxlbWVudEtleSwgLi4ucmVzdCB9ID1cbiAgICAgICAgICAgICAgICAgICAgcHJvcHMgYXMgUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEVycm9yQW5jaG9yPiAmIHtcbiAgICAgICAgICAgICAgICAgICAgICBrZXk/OiBSZWFjdC5LZXk7XG4gICAgICAgICAgICAgICAgICAgIH07XG4gICAgICAgICAgICAgICAgICByZXR1cm4gPEVycm9yQW5jaG9yIGtleT17ZWxlbWVudEtleX0gey4uLnJlc3R9IC8+O1xuICAgICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICAgIH0sXG4gICAgICAgICAgICB9fVxuICAgICAgICAgICAgc2tpcERlZmF1bHRPdmVycmlkZXM9e3sgYTogdHJ1ZSB9fVxuICAgICAgICAgICAgc3BhY2luZz1cIm5vbmVcIlxuICAgICAgICAgICAgdGV4dD17dGV4dEVycm9yfVxuICAgICAgICAgIC8+XG4gICAgICAgIDwvRm9ybUVycm9yPlxuICAgICAgKX1cbiAgICA8L0Zvcm1Hcm91cD5cbiAgKTtcbn1cbiJdfQ== */");
|
|
17
17
|
export function ConnectedFormGroup({
|
|
18
18
|
customError,
|
|
19
19
|
children,
|
|
@@ -65,8 +65,7 @@ export function ConnectedFormGroup({
|
|
|
65
65
|
const errorId = showError ? `${id || name}_error` : undefined;
|
|
66
66
|
return /*#__PURE__*/_jsxs(FormGroup, {
|
|
67
67
|
spacing: hideLabel ? 'tight' : spacing,
|
|
68
|
-
children: [hideLabel ? /*#__PURE__*/_jsx(
|
|
69
|
-
screenreader: true,
|
|
68
|
+
children: [hideLabel ? /*#__PURE__*/_jsx(HiddenText, {
|
|
70
69
|
children: renderedLabel
|
|
71
70
|
}) : renderedLabel, /*#__PURE__*/_jsx(Component, {
|
|
72
71
|
...rest,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Box, FlexBox } from '../Box';
|
|
3
3
|
import { FillButton } from '../Button';
|
|
4
|
+
import { HiddenText } from '../HiddenText';
|
|
4
5
|
import { Spinner } from '../Loading/Spinner';
|
|
5
|
-
import { Text } from '../Typography';
|
|
6
6
|
import { useSubmitState } from './utils';
|
|
7
7
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
8
|
export const SubmitButton = ({
|
|
@@ -36,9 +36,8 @@ export const SubmitButton = ({
|
|
|
36
36
|
position: "absolute",
|
|
37
37
|
children: [/*#__PURE__*/_jsx(Spinner, {
|
|
38
38
|
size: 16
|
|
39
|
-
}), /*#__PURE__*/_jsx(
|
|
39
|
+
}), /*#__PURE__*/_jsx(HiddenText, {
|
|
40
40
|
"aria-live": "polite",
|
|
41
|
-
screenreader: true,
|
|
42
41
|
children: "Loading"
|
|
43
42
|
})]
|
|
44
43
|
})]
|
|
@@ -3,9 +3,9 @@ import { css } from '@codecademy/gamut-styles';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { Anchor } from '../../Anchor';
|
|
5
5
|
import { FormError, FormGroup, FormGroupLabel } from '../../Form';
|
|
6
|
+
import { HiddenText } from '../../HiddenText';
|
|
6
7
|
import { Column } from '../../Layout';
|
|
7
8
|
import { Markdown } from '../../Markdown';
|
|
8
|
-
import { Text } from '../../Typography';
|
|
9
9
|
import { GridFormCheckboxInput } from './GridFormCheckboxInput';
|
|
10
10
|
import { GridFormCustomInput } from './GridFormCustomInput';
|
|
11
11
|
import { GridFormFileInput } from './GridFormFileInput';
|
|
@@ -22,7 +22,7 @@ const ErrorAnchor = /*#__PURE__*/_styled(Anchor, {
|
|
|
22
22
|
label: "ErrorAnchor"
|
|
23
23
|
})(css({
|
|
24
24
|
color: 'feedback-error'
|
|
25
|
-
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
25
|
+
}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9HcmlkRm9ybS9HcmlkRm9ybUlucHV0R3JvdXAvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCb0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0dyaWRGb3JtL0dyaWRGb3JtSW5wdXRHcm91cC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgVXNlRm9ybVJldHVybiB9IGZyb20gJ3JlYWN0LWhvb2stZm9ybSc7XG5cbmltcG9ydCB7IEFuY2hvciB9IGZyb20gJy4uLy4uL0FuY2hvcic7XG5pbXBvcnQgeyBGb3JtRXJyb3IsIEZvcm1Hcm91cCwgRm9ybUdyb3VwTGFiZWwgfSBmcm9tICcuLi8uLi9Gb3JtJztcbmltcG9ydCB7IEhpZGRlblRleHQgfSBmcm9tICcuLi8uLi9IaWRkZW5UZXh0JztcbmltcG9ydCB7IENvbHVtbiB9IGZyb20gJy4uLy4uL0xheW91dCc7XG5pbXBvcnQgeyBNYXJrZG93biB9IGZyb20gJy4uLy4uL01hcmtkb3duJztcbmltcG9ydCB7XG4gIEdyaWRGb3JtRmllbGQsXG4gIEdyaWRGb3JtSGlkZGVuRmllbGQsXG4gIEdyaWRGb3JtU3dlZXRDb250YWluZXJGaWVsZCxcbn0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgR3JpZEZvcm1DaGVja2JveElucHV0IH0gZnJvbSAnLi9HcmlkRm9ybUNoZWNrYm94SW5wdXQnO1xuaW1wb3J0IHsgR3JpZEZvcm1DdXN0b21JbnB1dCB9IGZyb20gJy4vR3JpZEZvcm1DdXN0b21JbnB1dCc7XG5pbXBvcnQgeyBHcmlkRm9ybUZpbGVJbnB1dCB9IGZyb20gJy4vR3JpZEZvcm1GaWxlSW5wdXQnO1xuaW1wb3J0IHsgR3JpZEZvcm1IaWRkZW5JbnB1dCB9IGZyb20gJy4vR3JpZEZvcm1IaWRkZW5JbnB1dCc7XG5pbXBvcnQgeyBHcmlkRm9ybU5lc3RlZENoZWNrYm94SW5wdXQgfSBmcm9tICcuL0dyaWRGb3JtTmVzdGVkQ2hlY2tib3hJbnB1dCc7XG5pbXBvcnQgeyBHcmlkRm9ybVJhZGlvR3JvdXBJbnB1dCB9IGZyb20gJy4vR3JpZEZvcm1SYWRpb0dyb3VwSW5wdXQnO1xuaW1wb3J0IHsgR3JpZEZvcm1TZWxlY3RJbnB1dCB9IGZyb20gJy4vR3JpZEZvcm1TZWxlY3RJbnB1dCc7XG5pbXBvcnQgeyBHcmlkRm9ybVN3ZWV0Q29udGFpbmVySW5wdXQgfSBmcm9tICcuL0dyaWRGb3JtU3dlZXRDb250YWluZXJJbnB1dCc7XG5pbXBvcnQgeyBHcmlkRm9ybVRleHRBcmVhIH0gZnJvbSAnLi9HcmlkRm9ybVRleHRBcmVhJztcbmltcG9ydCB7IEdyaWRGb3JtVGV4dElucHV0IH0gZnJvbSAnLi9HcmlkRm9ybVRleHRJbnB1dCc7XG5cbmNvbnN0IEVycm9yQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgY29sb3I6ICdmZWVkYmFjay1lcnJvcicsXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBHcmlkRm9ybUlucHV0R3JvdXBQcm9wcyA9IHtcbiAgZXJyb3I/OiBzdHJpbmc7XG4gIGZpZWxkOiBHcmlkRm9ybUZpZWxkO1xuICBpc0Rpc2FibGVkPzogYm9vbGVhbjtcbiAgaXNGaXJzdEVycm9yPzogYm9vbGVhbjtcbiAgaXNTb2xvRmllbGQ/OiBib29sZWFuO1xuICByZWdpc3RlcjogVXNlRm9ybVJldHVyblsncmVnaXN0ZXInXTtcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xuICBzZXRWYWx1ZTogVXNlRm9ybVJldHVyblsnc2V0VmFsdWUnXTtcbn07XG5cbmV4cG9ydCBjb25zdCBHcmlkRm9ybUlucHV0R3JvdXA6IFJlYWN0LkZDPEdyaWRGb3JtSW5wdXRHcm91cFByb3BzPiA9ICh7XG4gIGVycm9yLFxuICBmaWVsZCxcbiAgaXNGaXJzdEVycm9yLFxuICBpc0Rpc2FibGVkLFxuICAuLi5yZXN0XG59KSA9PiB7XG4gIGNvbnN0IGRpc2FibGVkID0gaXNEaXNhYmxlZCB8fCBmaWVsZC5kaXNhYmxlZDtcbiAgY29uc3QgZXJyb3JNZXNzYWdlID0gZXJyb3IgfHwgZmllbGQuY3VzdG9tRXJyb3I7XG4gIGNvbnN0IGRlZmF1bHRQcm9wcyA9IHsgZGlzYWJsZWQsIC4uLnJlc3QgfTtcbiAgY29uc3QgaXNUaWdodENoZWNrYm94ID1cbiAgICAoZmllbGQudHlwZSA9PT0gJ2NoZWNrYm94JyB8fCBmaWVsZC50eXBlID09PSAnbmVzdGVkLWNoZWNrYm94ZXMnKSAmJlxuICAgIGZpZWxkPy5zcGFjaW5nID09PSAndGlnaHQnO1xuXG4gIGNvbnN0IGdldElucHV0ID0gKCkgPT4ge1xuICAgIHN3aXRjaCAoZmllbGQudHlwZSkge1xuICAgICAgY2FzZSAnY2hlY2tib3gnOlxuICAgICAgICByZXR1cm4gPEdyaWRGb3JtQ2hlY2tib3hJbnB1dCBmaWVsZD17ZmllbGR9IHsuLi5kZWZhdWx0UHJvcHN9IC8+O1xuXG4gICAgICBjYXNlICduZXN0ZWQtY2hlY2tib3hlcyc6XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPEdyaWRGb3JtTmVzdGVkQ2hlY2tib3hJbnB1dFxuICAgICAgICAgICAgZXJyb3I9eyEhZXJyb3JNZXNzYWdlfVxuICAgICAgICAgICAgZmllbGQ9e2ZpZWxkfVxuICAgICAgICAgICAgey4uLmRlZmF1bHRQcm9wc31cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuXG4gICAgICBjYXNlICdjdXN0b20nOlxuICAgICAgY2FzZSAnY3VzdG9tLWdyb3VwJzpcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8R3JpZEZvcm1DdXN0b21JbnB1dFxuICAgICAgICAgICAgZXJyb3I9e2Vycm9yTWVzc2FnZX1cbiAgICAgICAgICAgIGZpZWxkPXtmaWVsZH1cbiAgICAgICAgICAgIHsuLi5kZWZhdWx0UHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgKTtcblxuICAgICAgY2FzZSAncmFkaW8tZ3JvdXAnOlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxHcmlkRm9ybVJhZGlvR3JvdXBJbnB1dFxuICAgICAgICAgICAgZXJyb3I9eyEhZXJyb3JNZXNzYWdlfVxuICAgICAgICAgICAgZmllbGQ9e2ZpZWxkfVxuICAgICAgICAgICAgey4uLmRlZmF1bHRQcm9wc31cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuXG4gICAgICBjYXNlICdzZWxlY3QnOlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxHcmlkRm9ybVNlbGVjdElucHV0XG4gICAgICAgICAgICBlcnJvcj17ISFlcnJvck1lc3NhZ2V9XG4gICAgICAgICAgICBmaWVsZD17ZmllbGR9XG4gICAgICAgICAgICB7Li4uZGVmYXVsdFByb3BzfVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG5cbiAgICAgIGNhc2UgJ2ZpbGUnOlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxHcmlkRm9ybUZpbGVJbnB1dFxuICAgICAgICAgICAgZXJyb3I9eyEhZXJyb3JNZXNzYWdlfVxuICAgICAgICAgICAgZmllbGQ9e2ZpZWxkfVxuICAgICAgICAgICAgey4uLmRlZmF1bHRQcm9wc31cbiAgICAgICAgICAvPlxuICAgICAgICApO1xuXG4gICAgICBjYXNlICd0ZXh0YXJlYSc6XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPEdyaWRGb3JtVGV4dEFyZWFcbiAgICAgICAgICAgIGVycm9yPXshIWVycm9yTWVzc2FnZX1cbiAgICAgICAgICAgIGZpZWxkPXtmaWVsZH1cbiAgICAgICAgICAgIHsuLi5kZWZhdWx0UHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgKTtcbiAgICAgIGNhc2UgJ2hpZGRlbic6XG4gICAgICAgIHJldHVybiA8R3JpZEZvcm1IaWRkZW5JbnB1dCBmaWVsZD17ZmllbGR9IHsuLi5kZWZhdWx0UHJvcHN9IC8+O1xuXG4gICAgICBjYXNlICdzd2VldC1jb250YWluZXInOlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxHcmlkRm9ybVN3ZWV0Q29udGFpbmVySW5wdXRcbiAgICAgICAgICAgIGZpZWxkPXtmaWVsZH1cbiAgICAgICAgICAgIGxhYmVsPXtmaWVsZC5sYWJlbH1cbiAgICAgICAgICAgIHsuLi5kZWZhdWx0UHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgKTtcblxuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8R3JpZEZvcm1UZXh0SW5wdXRcbiAgICAgICAgICAgIGVycm9yPXshIWVycm9yTWVzc2FnZX1cbiAgICAgICAgICAgIGZpZWxkPXtmaWVsZH1cbiAgICAgICAgICAgIHsuLi5kZWZhdWx0UHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgdW53cmFwcGVkSW5wdXQgPSAoXG4gICAgZmllbGQ6IEdyaWRGb3JtRmllbGRcbiAgKTogZmllbGQgaXMgR3JpZEZvcm1IaWRkZW5GaWVsZCB8IEdyaWRGb3JtU3dlZXRDb250YWluZXJGaWVsZCA9PlxuICAgIFsnaGlkZGVuJywgJ3N3ZWV0LWNvbnRhaW5lciddLmluY2x1ZGVzKGZpZWxkLnR5cGUpO1xuXG4gIGlmICh1bndyYXBwZWRJbnB1dChmaWVsZCkpIHtcbiAgICByZXR1cm4gZ2V0SW5wdXQoKTtcbiAgfVxuXG4gIGlmIChmaWVsZC50eXBlID09PSAnY3VzdG9tLWdyb3VwJykge1xuICAgIHJldHVybiAoXG4gICAgICA8Q29sdW1uIHJvd3NwYW49e2ZpZWxkPy5yb3dzcGFuID8/IDF9IHNpemU9e2ZpZWxkPy5zaXplfT5cbiAgICAgICAge2dldElucHV0KCl9XG4gICAgICA8L0NvbHVtbj5cbiAgICApO1xuICB9XG5cbiAgY29uc3QgbGFiZWwgPSAoXG4gICAgPEZvcm1Hcm91cExhYmVsXG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICBodG1sRm9yPXtmaWVsZC5pZCB8fCBmaWVsZC5uYW1lfVxuICAgICAgaW5mb3RpcD17ZmllbGQuaW5mb3RpcH1cbiAgICAgIGlzU29sb0ZpZWxkPXtyZXN0Py5pc1NvbG9GaWVsZCB8fCBmaWVsZD8uaXNTb2xvRmllbGR9XG4gICAgICByZXF1aXJlZD17cmVzdD8ucmVxdWlyZWR9XG4gICAgPlxuICAgICAge2ZpZWxkLmxhYmVsfVxuICAgIDwvRm9ybUdyb3VwTGFiZWw+XG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q29sdW1uIHJvd3NwYW49e2ZpZWxkPy5yb3dzcGFuID8/IDF9IHNpemU9e2ZpZWxkPy5zaXplfT5cbiAgICAgIDxGb3JtR3JvdXAgc3BhY2luZz17aXNUaWdodENoZWNrYm94ID8gJ3RpZ2h0JyA6ICdwYWRkZWQnfT5cbiAgICAgICAge2ZpZWxkLmhpZGVMYWJlbCA/IDxIaWRkZW5UZXh0PntsYWJlbH08L0hpZGRlblRleHQ+IDogbGFiZWx9XG4gICAgICAgIHtnZXRJbnB1dCgpfVxuICAgICAgICB7ZXJyb3JNZXNzYWdlICYmIChcbiAgICAgICAgICA8Rm9ybUVycm9yXG4gICAgICAgICAgICBhcmlhLWxpdmU9e2lzRmlyc3RFcnJvciA/ICdhc3NlcnRpdmUnIDogJ29mZid9XG4gICAgICAgICAgICByb2xlPXtpc0ZpcnN0RXJyb3IgPyAnYWxlcnQnIDogJ3N0YXR1cyd9XG4gICAgICAgICAgICB2YXJpYW50PXtpc1RpZ2h0Q2hlY2tib3ggPyAnaW5pdGlhbCcgOiAnYWJzb2x1dGUnfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxNYXJrZG93blxuICAgICAgICAgICAgICBpbmxpbmVcbiAgICAgICAgICAgICAgb3ZlcnJpZGVzPXt7XG4gICAgICAgICAgICAgICAgYToge1xuICAgICAgICAgICAgICAgICAgYWxsb3dlZEF0dHJpYnV0ZXM6IFsnaHJlZicsICd0YXJnZXQnXSxcbiAgICAgICAgICAgICAgICAgIGNvbXBvbmVudDogRXJyb3JBbmNob3IsXG4gICAgICAgICAgICAgICAgICBwcm9jZXNzTm9kZTogKFxuICAgICAgICAgICAgICAgICAgICBub2RlOiB1bmtub3duLFxuICAgICAgICAgICAgICAgICAgICBwcm9wczogeyBvbkNsaWNrPzogKCkgPT4gdm9pZCB9XG4gICAgICAgICAgICAgICAgICApID0+IHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgeyBrZXk6IGVsZW1lbnRLZXksIC4uLnJlc3QgfSA9XG4gICAgICAgICAgICAgICAgICAgICAgcHJvcHMgYXMgUmVhY3QuQ29tcG9uZW50UHJvcHM8dHlwZW9mIEVycm9yQW5jaG9yPiAmIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGtleT86IFJlYWN0LktleTtcbiAgICAgICAgICAgICAgICAgICAgICB9O1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gPEVycm9yQW5jaG9yIGtleT17ZWxlbWVudEtleX0gey4uLnJlc3R9IC8+O1xuICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICBza2lwRGVmYXVsdE92ZXJyaWRlcz17eyBhOiB0cnVlIH19XG4gICAgICAgICAgICAgIHNwYWNpbmc9XCJub25lXCJcbiAgICAgICAgICAgICAgdGV4dD17ZXJyb3JNZXNzYWdlfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L0Zvcm1FcnJvcj5cbiAgICAgICAgKX1cbiAgICAgIDwvRm9ybUdyb3VwPlxuICAgIDwvQ29sdW1uPlxuICApO1xufTtcbiJdfQ== */");
|
|
26
26
|
export const GridFormInputGroup = ({
|
|
27
27
|
error,
|
|
28
28
|
field,
|
|
@@ -124,8 +124,7 @@ export const GridFormInputGroup = ({
|
|
|
124
124
|
size: field?.size,
|
|
125
125
|
children: /*#__PURE__*/_jsxs(FormGroup, {
|
|
126
126
|
spacing: isTightCheckbox ? 'tight' : 'padded',
|
|
127
|
-
children: [field.hideLabel ? /*#__PURE__*/_jsx(
|
|
128
|
-
screenreader: true,
|
|
127
|
+
children: [field.hideLabel ? /*#__PURE__*/_jsx(HiddenText, {
|
|
129
128
|
children: label
|
|
130
129
|
}) : label, getInput(), errorMessage && /*#__PURE__*/_jsx(FormError, {
|
|
131
130
|
"aria-live": isFirstError ? 'assertive' : 'off',
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated Use `<Text>` instead with `screenreader='true'`
|
|
3
|
+
*/
|
|
4
|
+
export declare const HiddenText: import("@emotion/styled").StyledComponent<{
|
|
5
|
+
theme?: import("@emotion/react").Theme;
|
|
6
|
+
as?: React.ElementType;
|
|
7
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `<Text>` instead with `screenreader='true'`
|
|
5
|
+
*/
|
|
6
|
+
export const HiddenText = /*#__PURE__*/_styled("span", {
|
|
7
|
+
target: "e88fw8k0",
|
|
8
|
+
label: "HiddenText"
|
|
9
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
10
|
+
name: "3a43ku",
|
|
11
|
+
styles: "display:inline-block;font-size:0;height:1px;overflow:hidden;position:absolute;width:1px"
|
|
12
|
+
} : {
|
|
13
|
+
name: "3a43ku",
|
|
14
|
+
styles: "display:inline-block;font-size:0;height:1px;overflow:hidden;position:absolute;width:1px/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9IaWRkZW5UZXh0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLcUMiLCJmaWxlIjoiLi4vLi4vc3JjL0hpZGRlblRleHQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkIFVzZSBgPFRleHQ+YCBpbnN0ZWFkIHdpdGggYHNjcmVlbnJlYWRlcj0ndHJ1ZSdgXG4gKi9cbmV4cG9ydCBjb25zdCBIaWRkZW5UZXh0ID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgZm9udC1zaXplOiAwO1xuICBoZWlnaHQ6IDFweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuYDtcbiJdfQ== */",
|
|
15
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
16
|
+
});
|
package/dist/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ export * from './FocusTrap';
|
|
|
27
27
|
export * from './Form';
|
|
28
28
|
export type { OptionStrict, ExtendedOption, SelectDropdownGroup, } from './Form/SelectDropdown';
|
|
29
29
|
export * from './GridForm';
|
|
30
|
+
export * from './HiddenText';
|
|
30
31
|
export * from './Layout/Column';
|
|
31
32
|
export * from './Layout/LayoutGrid';
|
|
32
33
|
export * from './List';
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "70.0.1-alpha.
|
|
4
|
+
"version": "70.0.1-alpha.f3bbea.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"bin": "./bin/gamut.mjs",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@codecademy/gamut-icons": "9.57.8-alpha.
|
|
9
|
-
"@codecademy/gamut-illustrations": "0.58.14-alpha.
|
|
10
|
-
"@codecademy/gamut-patterns": "0.10.33-alpha.
|
|
11
|
-
"@codecademy/gamut-styles": "20.0.1-alpha.
|
|
12
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
8
|
+
"@codecademy/gamut-icons": "9.57.8-alpha.f3bbea.0",
|
|
9
|
+
"@codecademy/gamut-illustrations": "0.58.14-alpha.f3bbea.0",
|
|
10
|
+
"@codecademy/gamut-patterns": "0.10.33-alpha.f3bbea.0",
|
|
11
|
+
"@codecademy/gamut-styles": "20.0.1-alpha.f3bbea.0",
|
|
12
|
+
"@codecademy/variance": "0.26.2-alpha.f3bbea.0",
|
|
13
13
|
"@formatjs/intl-locale": "5.3.1",
|
|
14
14
|
"@react-aria/interactions": "3.25.0",
|
|
15
15
|
"@types/marked": "^4.0.8",
|