@codecademy/gamut 68.7.2-alpha.59524a.0 → 69.0.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/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss +5 -5
- package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss +5 -5
- package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss +23 -22
- package/dist/AccordionButtonDeprecated/styles.module.scss +6 -8
- 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/Video/styles/vds_base_theme.scss +1 -3
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +6 -6
- package/dist/Typography/styles/_variables.scss +0 -54
|
@@ -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
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
2
|
@use "variables";
|
|
3
3
|
@use "mixins";
|
|
4
|
-
@use "~@codecademy/gamut-styles/utils" as *;
|
|
5
4
|
//
|
|
6
5
|
// Base styles
|
|
7
6
|
//
|
|
@@ -11,7 +10,8 @@
|
|
|
11
10
|
display: inline-flex;
|
|
12
11
|
justify-content: center;
|
|
13
12
|
font-weight: variables.$btn-font-weight;
|
|
14
|
-
|
|
13
|
+
-webkit-font-smoothing: antialiased;
|
|
14
|
+
-moz-osx-font-smoothing: grayscale;
|
|
15
15
|
border: 1px solid transparent;
|
|
16
16
|
border-radius: variables.$btn-border-radius;
|
|
17
17
|
user-select: none;
|
|
@@ -33,11 +33,11 @@ fieldset[disabled] a.btn {
|
|
|
33
33
|
|
|
34
34
|
@each $name, $color in variables.$btn-swatches {
|
|
35
35
|
@if $name == "brand-yellow" {
|
|
36
|
-
@include mixins.button-variants($name,
|
|
36
|
+
@include mixins.button-variants($name, variables.$color-black, $color);
|
|
37
37
|
} @else if color.channel(color.to-space($color, hsl), "lightness") > 68 {
|
|
38
|
-
@include mixins.button-variants($name,
|
|
38
|
+
@include mixins.button-variants($name, variables.$color-black, $color);
|
|
39
39
|
} @else {
|
|
40
|
-
@include mixins.button-variants($name,
|
|
40
|
+
@include mixins.button-variants($name, variables.$color-white, $color);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use "sass:color";
|
|
2
|
-
@use "~@codecademy/gamut-styles/utils" as *;
|
|
3
2
|
@use "variables";
|
|
4
3
|
|
|
5
4
|
// Button variants
|
|
@@ -8,7 +7,7 @@
|
|
|
8
7
|
// and disabled options for all buttons
|
|
9
8
|
|
|
10
9
|
@mixin button-variant($color, $background, $border: transparent) {
|
|
11
|
-
$active-background: color.mix(
|
|
10
|
+
$active-background: color.mix(variables.$color-black, $background);
|
|
12
11
|
|
|
13
12
|
@if $border == transparent {
|
|
14
13
|
$active-border: transparent;
|
|
@@ -24,7 +23,7 @@
|
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
&:focus-visible {
|
|
27
|
-
box-shadow: 0 0 0 2px
|
|
26
|
+
box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $background;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
29
|
&:focus-visible,
|
|
@@ -60,7 +59,7 @@
|
|
|
60
59
|
}
|
|
61
60
|
|
|
62
61
|
&:focus-visible {
|
|
63
|
-
box-shadow: 0 0 0 2px
|
|
62
|
+
box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $color;
|
|
64
63
|
}
|
|
65
64
|
|
|
66
65
|
&:disabled {
|
|
@@ -98,7 +97,8 @@
|
|
|
98
97
|
}
|
|
99
98
|
.link-#{$name} {
|
|
100
99
|
font-weight: bold;
|
|
101
|
-
|
|
100
|
+
-webkit-font-smoothing: antialiased;
|
|
101
|
+
-moz-osx-font-smoothing: grayscale;
|
|
102
102
|
color: $background;
|
|
103
103
|
text-decoration: underline;
|
|
104
104
|
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
$btn-padding-x: px-rem(16) !default;
|
|
1
|
+
$btn-padding-x: 1rem !default;
|
|
4
2
|
$btn-padding-y: 0.375rem !default;
|
|
5
3
|
$btn-font-weight: bold !default;
|
|
6
4
|
|
|
@@ -8,18 +6,18 @@ $btn-line-height: 1.5 !default;
|
|
|
8
6
|
$btn-line-height-lg: calc(4 / 3) !default;
|
|
9
7
|
$btn-line-height-sm: 1.5 !default;
|
|
10
8
|
|
|
11
|
-
$btn-font-size-base:
|
|
12
|
-
$btn-font-size-lg:
|
|
13
|
-
$btn-font-size-sm:
|
|
9
|
+
$btn-font-size-base: 1rem !default;
|
|
10
|
+
$btn-font-size-lg: 1.25rem !default;
|
|
11
|
+
$btn-font-size-sm: 1rem !default;
|
|
14
12
|
$btn-font-size-xs: 0.75rem !default;
|
|
15
13
|
|
|
16
14
|
$btn-padding-x-sm: 0.75rem !default;
|
|
17
15
|
$btn-padding-y-sm: 0.25rem !default;
|
|
18
|
-
$btn-min-width-sm:
|
|
16
|
+
$btn-min-width-sm: 8rem !default;
|
|
19
17
|
|
|
20
18
|
$btn-padding-x-lg: 1.25rem !default;
|
|
21
19
|
$btn-padding-y-lg: 0.75rem !default;
|
|
22
|
-
$btn-min-width-lg:
|
|
20
|
+
$btn-min-width-lg: 10rem !default;
|
|
23
21
|
|
|
24
22
|
$btn-border-radius: 2px !default;
|
|
25
23
|
$btn-round-border-radius: 50px !default;
|
|
@@ -30,24 +28,27 @@ $btn-outline-hover-state-modifier: 0.9 !default;
|
|
|
30
28
|
$btn-outline-active-state-modifier: 0.6 !default;
|
|
31
29
|
$btn-box-shadow-focus-modifier: 0.5 !default;
|
|
32
30
|
|
|
33
|
-
$btn-disabled-color:
|
|
31
|
+
$btn-disabled-color: #646466;
|
|
34
32
|
$btn-box-shadow-color: rgba(0, 0, 0, 0.3);
|
|
35
33
|
|
|
36
34
|
$btn-swatches: (
|
|
37
35
|
// Gamut Next
|
|
38
|
-
"hyper":
|
|
39
|
-
"red":
|
|
40
|
-
"navy":
|
|
41
|
-
"white":
|
|
42
|
-
"grey":
|
|
36
|
+
"hyper": #3a10e5,
|
|
37
|
+
"red": #e91c11,
|
|
38
|
+
"navy": #10162f,
|
|
39
|
+
"white": #ffffff,
|
|
40
|
+
"grey": #c4c3c7,
|
|
43
41
|
// Gamut Classic
|
|
44
|
-
"brand-blue":
|
|
45
|
-
"brand-red":
|
|
46
|
-
"brand-yellow":
|
|
47
|
-
"brand-purple":
|
|
48
|
-
"brand-dark-blue":
|
|
42
|
+
"brand-blue": #3069f0,
|
|
43
|
+
"brand-red": #fd4d3f,
|
|
44
|
+
"brand-yellow": #ffd500,
|
|
45
|
+
"brand-purple": #6400e4,
|
|
46
|
+
"brand-dark-blue": #141c3a,
|
|
49
47
|
// Editor
|
|
50
|
-
"mint":
|
|
51
|
-
"darkmint":
|
|
52
|
-
"greyblue":
|
|
48
|
+
"mint": #34b3a0,
|
|
49
|
+
"darkmint": #1a7b72,
|
|
50
|
+
"greyblue": #354551
|
|
53
51
|
);
|
|
52
|
+
|
|
53
|
+
$color-black: #000000;
|
|
54
|
+
$color-white: #ffffff;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@use "~@codecademy/gamut-styles/utils" as *;
|
|
2
|
-
|
|
3
1
|
.accordionButton {
|
|
4
2
|
align-items: center;
|
|
5
3
|
display: flex;
|
|
@@ -8,23 +6,23 @@
|
|
|
8
6
|
width: 100%;
|
|
9
7
|
|
|
10
8
|
&.blue {
|
|
11
|
-
color:
|
|
9
|
+
color: #a5befa;
|
|
12
10
|
}
|
|
13
11
|
|
|
14
12
|
&.yellow {
|
|
15
|
-
background-color:
|
|
16
|
-
border: solid
|
|
13
|
+
background-color: #fff2b3;
|
|
14
|
+
border: solid #ffe359;
|
|
17
15
|
border-width: 1px 0;
|
|
18
16
|
font-weight: normal;
|
|
19
17
|
transition: background-color 0.15s ease-in-out;
|
|
20
18
|
|
|
21
19
|
&:focus-visible {
|
|
22
|
-
border-color:
|
|
20
|
+
border-color: #b37620;
|
|
23
21
|
}
|
|
24
22
|
|
|
25
23
|
&:focus,
|
|
26
24
|
&:hover {
|
|
27
|
-
background-color:
|
|
25
|
+
background-color: #ffec8c;
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
28
|
|
|
@@ -40,7 +38,7 @@
|
|
|
40
38
|
margin-left: 1rem;
|
|
41
39
|
}
|
|
42
40
|
|
|
43
|
-
@
|
|
41
|
+
@media only screen and (min-width: 64rem) {
|
|
44
42
|
font-size: 1.75rem;
|
|
45
43
|
}
|
|
46
44
|
}
|
|
@@ -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
|
+
});
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@use "~@codecademy/gamut-styles/utils" as *;
|
|
2
|
-
|
|
3
1
|
@import "~@vidstack/react/player/styles/default/theme.css";
|
|
4
2
|
@import "~@vidstack/react/player/styles/default/layouts/video.css";
|
|
5
3
|
@import "~@vidstack/react/player/styles/default/layouts/audio.css";
|
|
@@ -26,7 +24,7 @@ iframe.vds-youtube[data-no-controls] {
|
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
:where(.vds-video-layout[data-sm]) :where(.vds-button) {
|
|
29
|
-
padding: 0px
|
|
27
|
+
padding: 0px 4px !important;
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
// Small layout volume / time slider
|
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": "
|
|
4
|
+
"version": "69.0.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"bin": "./bin/gamut.mjs",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@codecademy/gamut-icons": "9.57.6
|
|
9
|
-
"@codecademy/gamut-illustrations": "0.58.12
|
|
10
|
-
"@codecademy/gamut-patterns": "0.10.31
|
|
11
|
-
"@codecademy/gamut-styles": "
|
|
12
|
-
"@codecademy/variance": "0.26.
|
|
8
|
+
"@codecademy/gamut-icons": "9.57.6",
|
|
9
|
+
"@codecademy/gamut-illustrations": "0.58.12",
|
|
10
|
+
"@codecademy/gamut-patterns": "0.10.31",
|
|
11
|
+
"@codecademy/gamut-styles": "19.0.0",
|
|
12
|
+
"@codecademy/variance": "0.26.1",
|
|
13
13
|
"@formatjs/intl-locale": "5.3.1",
|
|
14
14
|
"@react-aria/interactions": "3.25.0",
|
|
15
15
|
"@types/marked": "^4.0.8",
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
@use "~@codecademy/gamut-styles/utils";
|
|
2
|
-
|
|
3
|
-
$headingSizes: (
|
|
4
|
-
"xxs": (
|
|
5
|
-
"size": 16,
|
|
6
|
-
"margin": 16,
|
|
7
|
-
"font": $font-family-base
|
|
8
|
-
),
|
|
9
|
-
"xs": (
|
|
10
|
-
"size": 20,
|
|
11
|
-
"margin": 16,
|
|
12
|
-
"font": $font-family-base
|
|
13
|
-
),
|
|
14
|
-
"sm": (
|
|
15
|
-
"size": 22,
|
|
16
|
-
"margin": 16,
|
|
17
|
-
"font": $font-family-base
|
|
18
|
-
),
|
|
19
|
-
"md": (
|
|
20
|
-
"size": 26,
|
|
21
|
-
"margin": 20,
|
|
22
|
-
"font": $font-family-base
|
|
23
|
-
),
|
|
24
|
-
"lg": (
|
|
25
|
-
"size": 34,
|
|
26
|
-
"margin": 24,
|
|
27
|
-
"font": $font-family-base
|
|
28
|
-
),
|
|
29
|
-
"xl": (
|
|
30
|
-
"size": 44,
|
|
31
|
-
"margin": 24,
|
|
32
|
-
"font": $font-family-base
|
|
33
|
-
),
|
|
34
|
-
"xxl": (
|
|
35
|
-
"size": 64,
|
|
36
|
-
"margin": 32,
|
|
37
|
-
"font": $font-family-base
|
|
38
|
-
)
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
$textSizes: (
|
|
42
|
-
"sm": (
|
|
43
|
-
"size": 14,
|
|
44
|
-
"font": $font-family-base
|
|
45
|
-
),
|
|
46
|
-
"md": (
|
|
47
|
-
"size": 16,
|
|
48
|
-
"font": $font-family-base
|
|
49
|
-
),
|
|
50
|
-
"lg": (
|
|
51
|
-
"size": 20,
|
|
52
|
-
"font": $font-family-base
|
|
53
|
-
)
|
|
54
|
-
);
|