@khanacademy/wonder-blocks-labeled-field 3.0.4 → 3.0.6

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 +22 -0
  2. package/dist/es/index.js +2 -113
  3. package/dist/index.js +2 -113
  4. package/package.json +5 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @khanacademy/wonder-blocks-labeled-field
2
2
 
3
+ ## 3.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b9e4946]
8
+ - Updated dependencies [b9e4946]
9
+ - @khanacademy/wonder-blocks-tokens@10.0.0
10
+ - @khanacademy/wonder-blocks-typography@3.2.0
11
+ - @khanacademy/wonder-blocks-layout@3.1.10
12
+ - @khanacademy/wonder-blocks-core@12.2.1
13
+
14
+ ## 3.0.5
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies [2656fd4]
19
+ - Updated dependencies [6018552]
20
+ - Updated dependencies [7bbf311]
21
+ - Updated dependencies [7f79943]
22
+ - @khanacademy/wonder-blocks-tokens@9.0.0
23
+ - @khanacademy/wonder-blocks-layout@3.1.9
24
+
3
25
  ## 3.0.4
4
26
 
5
27
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { StyleSheet } from 'aphrodite';
3
4
  import WarningCircle from '@phosphor-icons/core/bold/warning-circle-bold.svg';
@@ -6,118 +7,6 @@ import { semanticColor, sizing } from '@khanacademy/wonder-blocks-tokens';
6
7
  import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
7
8
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
8
9
 
9
- const defaultLabeledFieldLabels = {
10
- errorIconAriaLabel: "Error:"
11
- };
12
- const StyledSpan = addStyle("span");
13
- function LabeledField(props) {
14
- const {
15
- field,
16
- styles: stylesProp,
17
- label,
18
- id,
19
- required,
20
- testId,
21
- description,
22
- errorMessage,
23
- labels = defaultLabeledFieldLabels
24
- } = props;
25
- const generatedUniqueId = React.useId();
26
- const uniqueId = id != null ? id : `${generatedUniqueId}-labeled-field`;
27
- const labelId = `${uniqueId}-label`;
28
- const descriptionId = `${uniqueId}-description`;
29
- const fieldId = `${uniqueId}-field`;
30
- const errorId = `${uniqueId}-error`;
31
- const isRequired = !!required || !!field.props.required;
32
- const hasError = !!errorMessage || !!field.props.error;
33
- function renderLabel() {
34
- const requiredIcon = React.createElement(StyledSpan, {
35
- style: [styles.textWordBreak, styles.required],
36
- "aria-hidden": true
37
- }, " ", "*");
38
- return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
39
- style: [styles.textWordBreak, styles.label, description ? styles.labelWithDescription : styles.labelWithNoDescription, stylesProp == null ? void 0 : stylesProp.label],
40
- tag: "label",
41
- htmlFor: fieldId,
42
- testId: testId && `${testId}-label`,
43
- id: labelId
44
- }, label, isRequired && requiredIcon));
45
- }
46
- function maybeRenderDescription() {
47
- if (!description) {
48
- return null;
49
- }
50
- return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
51
- style: [styles.textWordBreak, styles.description, stylesProp == null ? void 0 : stylesProp.description],
52
- testId: testId && `${testId}-description`,
53
- id: descriptionId
54
- }, description));
55
- }
56
- function maybeRenderError() {
57
- return React.createElement(React.Fragment, null, React.createElement(View, {
58
- style: [styles.errorSection, errorMessage ? styles.errorSectionWithContent : undefined, stylesProp == null ? void 0 : stylesProp.error],
59
- id: errorId,
60
- testId: testId && `${testId}-error`,
61
- "aria-live": "assertive",
62
- "aria-atomic": "true"
63
- }, errorMessage && React.createElement(React.Fragment, null, React.createElement(PhosphorIcon, {
64
- icon: WarningCircle,
65
- style: [styles.errorIcon, styles.error],
66
- role: "img",
67
- "aria-label": labels.errorIconAriaLabel
68
- }), React.createElement(LabelSmall, {
69
- style: [styles.textWordBreak, styles.errorMessage, styles.error]
70
- }, errorMessage))));
71
- }
72
- function renderField() {
73
- return React.cloneElement(field, {
74
- id: fieldId,
75
- "aria-describedby": [errorMessage && errorId, description && descriptionId].filter(Boolean).join(" "),
76
- required: required || field.props.required,
77
- error: hasError,
78
- testId: testId ? `${testId}-field` : undefined
79
- });
80
- }
81
- return React.createElement(View, {
82
- style: stylesProp == null ? void 0 : stylesProp.root
83
- }, renderLabel(), maybeRenderDescription(), renderField(), maybeRenderError());
84
- }
85
- const styles = StyleSheet.create({
86
- label: {
87
- color: semanticColor.text.primary
88
- },
89
- labelWithDescription: {
90
- paddingBlockEnd: sizing.size_040
91
- },
92
- labelWithNoDescription: {
93
- paddingBlockEnd: sizing.size_120
94
- },
95
- description: {
96
- color: semanticColor.text.secondary,
97
- paddingBlockEnd: sizing.size_120
98
- },
99
- errorSection: {
100
- flexDirection: "row",
101
- gap: sizing.size_080
102
- },
103
- errorSectionWithContent: {
104
- paddingBlockStart: sizing.size_120
105
- },
106
- error: {
107
- color: semanticColor.status.critical.foreground
108
- },
109
- errorIcon: {
110
- marginTop: "1px"
111
- },
112
- errorMessage: {
113
- minWidth: "0"
114
- },
115
- required: {
116
- color: semanticColor.status.critical.foreground
117
- },
118
- textWordBreak: {
119
- overflowWrap: "break-word"
120
- }
121
- });
10
+ const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;function renderLabel(){const requiredIcon=jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required],"aria-hidden":true,children:[" ","*"]});return jsx(React.Fragment,{children:jsxs(LabelMedium,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsx(React.Fragment,{children:jsx(LabelSmall,{style:[styles.textWordBreak,styles.description,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsx(React.Fragment,{children:jsx(View,{style:[styles.errorSection,errorMessage?styles.errorSectionWithContent:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxs(Fragment,{children:[jsx(PhosphorIcon,{icon:WarningCircle,style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsx(LabelSmall,{style:[styles.textWordBreak,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React.cloneElement(field,{id:fieldId,"aria-describedby":[errorMessage&&errorId,description&&descriptionId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined})}return jsxs(View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderError()]})}const styles=StyleSheet.create({label:{color:semanticColor.text.primary},labelWithDescription:{paddingBlockEnd:sizing.size_040},labelWithNoDescription:{paddingBlockEnd:sizing.size_120},description:{color:semanticColor.text.secondary,paddingBlockEnd:sizing.size_120},errorSection:{flexDirection:"row",gap:sizing.size_080},errorSectionWithContent:{paddingBlockStart:sizing.size_120},error:{color:semanticColor.status.critical.foreground},errorIcon:{marginTop:"1px"},errorMessage:{minWidth:"0"},required:{color:semanticColor.status.critical.foreground},textWordBreak:{overflowWrap:"break-word"}});
122
11
 
123
12
  export { LabeledField };
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var React = require('react');
6
7
  var aphrodite = require('aphrodite');
7
8
  var WarningCircle = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
@@ -33,118 +34,6 @@ function _interopNamespace(e) {
33
34
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
34
35
  var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
35
36
 
36
- const defaultLabeledFieldLabels = {
37
- errorIconAriaLabel: "Error:"
38
- };
39
- const StyledSpan = wonderBlocksCore.addStyle("span");
40
- function LabeledField(props) {
41
- const {
42
- field,
43
- styles: stylesProp,
44
- label,
45
- id,
46
- required,
47
- testId,
48
- description,
49
- errorMessage,
50
- labels = defaultLabeledFieldLabels
51
- } = props;
52
- const generatedUniqueId = React__namespace.useId();
53
- const uniqueId = id != null ? id : `${generatedUniqueId}-labeled-field`;
54
- const labelId = `${uniqueId}-label`;
55
- const descriptionId = `${uniqueId}-description`;
56
- const fieldId = `${uniqueId}-field`;
57
- const errorId = `${uniqueId}-error`;
58
- const isRequired = !!required || !!field.props.required;
59
- const hasError = !!errorMessage || !!field.props.error;
60
- function renderLabel() {
61
- const requiredIcon = React__namespace.createElement(StyledSpan, {
62
- style: [styles.textWordBreak, styles.required],
63
- "aria-hidden": true
64
- }, " ", "*");
65
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
66
- style: [styles.textWordBreak, styles.label, description ? styles.labelWithDescription : styles.labelWithNoDescription, stylesProp == null ? void 0 : stylesProp.label],
67
- tag: "label",
68
- htmlFor: fieldId,
69
- testId: testId && `${testId}-label`,
70
- id: labelId
71
- }, label, isRequired && requiredIcon));
72
- }
73
- function maybeRenderDescription() {
74
- if (!description) {
75
- return null;
76
- }
77
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
78
- style: [styles.textWordBreak, styles.description, stylesProp == null ? void 0 : stylesProp.description],
79
- testId: testId && `${testId}-description`,
80
- id: descriptionId
81
- }, description));
82
- }
83
- function maybeRenderError() {
84
- return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
85
- style: [styles.errorSection, errorMessage ? styles.errorSectionWithContent : undefined, stylesProp == null ? void 0 : stylesProp.error],
86
- id: errorId,
87
- testId: testId && `${testId}-error`,
88
- "aria-live": "assertive",
89
- "aria-atomic": "true"
90
- }, errorMessage && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
91
- icon: WarningCircle__default["default"],
92
- style: [styles.errorIcon, styles.error],
93
- role: "img",
94
- "aria-label": labels.errorIconAriaLabel
95
- }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
96
- style: [styles.textWordBreak, styles.errorMessage, styles.error]
97
- }, errorMessage))));
98
- }
99
- function renderField() {
100
- return React__namespace.cloneElement(field, {
101
- id: fieldId,
102
- "aria-describedby": [errorMessage && errorId, description && descriptionId].filter(Boolean).join(" "),
103
- required: required || field.props.required,
104
- error: hasError,
105
- testId: testId ? `${testId}-field` : undefined
106
- });
107
- }
108
- return React__namespace.createElement(wonderBlocksCore.View, {
109
- style: stylesProp == null ? void 0 : stylesProp.root
110
- }, renderLabel(), maybeRenderDescription(), renderField(), maybeRenderError());
111
- }
112
- const styles = aphrodite.StyleSheet.create({
113
- label: {
114
- color: wonderBlocksTokens.semanticColor.text.primary
115
- },
116
- labelWithDescription: {
117
- paddingBlockEnd: wonderBlocksTokens.sizing.size_040
118
- },
119
- labelWithNoDescription: {
120
- paddingBlockEnd: wonderBlocksTokens.sizing.size_120
121
- },
122
- description: {
123
- color: wonderBlocksTokens.semanticColor.text.secondary,
124
- paddingBlockEnd: wonderBlocksTokens.sizing.size_120
125
- },
126
- errorSection: {
127
- flexDirection: "row",
128
- gap: wonderBlocksTokens.sizing.size_080
129
- },
130
- errorSectionWithContent: {
131
- paddingBlockStart: wonderBlocksTokens.sizing.size_120
132
- },
133
- error: {
134
- color: wonderBlocksTokens.semanticColor.status.critical.foreground
135
- },
136
- errorIcon: {
137
- marginTop: "1px"
138
- },
139
- errorMessage: {
140
- minWidth: "0"
141
- },
142
- required: {
143
- color: wonderBlocksTokens.semanticColor.status.critical.foreground
144
- },
145
- textWordBreak: {
146
- overflowWrap: "break-word"
147
- }
148
- });
37
+ const defaultLabeledFieldLabels={errorIconAriaLabel:"Error:"};const StyledSpan=wonderBlocksCore.addStyle("span");function LabeledField(props){const{field,styles:stylesProp,label,id,required,testId,description,errorMessage,labels=defaultLabeledFieldLabels}=props;const generatedUniqueId=React__namespace.useId();const uniqueId=id??`${generatedUniqueId}-labeled-field`;const labelId=`${uniqueId}-label`;const descriptionId=`${uniqueId}-description`;const fieldId=`${uniqueId}-field`;const errorId=`${uniqueId}-error`;const isRequired=!!required||!!field.props.required;const hasError=!!errorMessage||!!field.props.error;function renderLabel(){const requiredIcon=jsxRuntime.jsxs(StyledSpan,{style:[styles.textWordBreak,styles.required],"aria-hidden":true,children:[" ","*"]});return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsxs(wonderBlocksTypography.LabelMedium,{style:[styles.textWordBreak,styles.label,description?styles.labelWithDescription:styles.labelWithNoDescription,stylesProp?.label],tag:"label",htmlFor:fieldId,testId:testId&&`${testId}-label`,id:labelId,children:[label,isRequired&&requiredIcon]})})}function maybeRenderDescription(){if(!description){return null}return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:[styles.textWordBreak,styles.description,stylesProp?.description],testId:testId&&`${testId}-description`,id:descriptionId,children:description})})}function maybeRenderError(){return jsxRuntime.jsx(React__namespace.Fragment,{children:jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles.errorSection,errorMessage?styles.errorSectionWithContent:undefined,stylesProp?.error],id:errorId,testId:testId&&`${testId}-error`,"aria-live":"assertive","aria-atomic":"true",children:errorMessage&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:WarningCircle__default["default"],style:[styles.errorIcon,styles.error],role:"img","aria-label":labels.errorIconAriaLabel}),jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:[styles.textWordBreak,styles.errorMessage,styles.error],children:errorMessage})]})})})}function renderField(){return React__namespace.cloneElement(field,{id:fieldId,"aria-describedby":[errorMessage&&errorId,description&&descriptionId].filter(Boolean).join(" "),required:required||field.props.required,error:hasError,testId:testId?`${testId}-field`:undefined})}return jsxRuntime.jsxs(wonderBlocksCore.View,{style:stylesProp?.root,children:[renderLabel(),maybeRenderDescription(),renderField(),maybeRenderError()]})}const styles=aphrodite.StyleSheet.create({label:{color:wonderBlocksTokens.semanticColor.text.primary},labelWithDescription:{paddingBlockEnd:wonderBlocksTokens.sizing.size_040},labelWithNoDescription:{paddingBlockEnd:wonderBlocksTokens.sizing.size_120},description:{color:wonderBlocksTokens.semanticColor.text.secondary,paddingBlockEnd:wonderBlocksTokens.sizing.size_120},errorSection:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080},errorSectionWithContent:{paddingBlockStart:wonderBlocksTokens.sizing.size_120},error:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},errorIcon:{marginTop:"1px"},errorMessage:{minWidth:"0"},required:{color:wonderBlocksTokens.semanticColor.status.critical.foreground},textWordBreak:{overflowWrap:"break-word"}});
149
38
 
150
39
  exports.LabeledField = LabeledField;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-labeled-field",
3
- "version": "3.0.4",
3
+ "version": "3.0.6",
4
4
  "design": "v1",
5
5
  "description": "LabeledField handles accessibility and layout for associating labels with form components.",
6
6
  "main": "dist/index.js",
@@ -12,11 +12,10 @@
12
12
  "access": "public"
13
13
  },
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.24.5",
16
15
  "@khanacademy/wonder-blocks-core": "12.2.1",
17
- "@khanacademy/wonder-blocks-layout": "3.1.8",
18
- "@khanacademy/wonder-blocks-tokens": "8.0.0",
19
- "@khanacademy/wonder-blocks-typography": "3.1.3"
16
+ "@khanacademy/wonder-blocks-layout": "3.1.10",
17
+ "@khanacademy/wonder-blocks-tokens": "10.0.0",
18
+ "@khanacademy/wonder-blocks-typography": "3.2.0"
20
19
  },
21
20
  "peerDependencies": {
22
21
  "@phosphor-icons/core": "^2.0.2",
@@ -24,7 +23,7 @@
24
23
  "react": "18.2.0"
25
24
  },
26
25
  "devDependencies": {
27
- "@khanacademy/wb-dev-build-settings": "2.1.1"
26
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
28
27
  },
29
28
  "scripts": {
30
29
  "test": "echo \"Error: no test specified\" && exit 1"