@ilo-org/react 0.10.0 → 0.10.1

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 (16) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/lib/cjs/components/Button/Button.js +2 -2
  3. package/lib/cjs/components/Button/index.js +12 -3
  4. package/lib/cjs/components/Card/Card.js +1 -1
  5. package/lib/cjs/components/Dropdown/Dropdown.js +1 -1
  6. package/lib/esm/components/Button/Button.js +2 -2
  7. package/lib/esm/components/Button/index.js +12 -3
  8. package/lib/esm/components/Card/Card.js +1 -1
  9. package/lib/esm/components/Dropdown/Dropdown.js +1 -1
  10. package/lib/types/react/src/components/Button/Button.props.d.ts +4 -0
  11. package/package.json +2 -2
  12. package/src/components/Button/Button.args.ts +12 -3
  13. package/src/components/Button/Button.props.ts +5 -0
  14. package/src/components/Button/Button.tsx +2 -0
  15. package/src/components/Card/Card.tsx +1 -1
  16. package/src/components/Dropdown/Dropdown.tsx +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @ilo-org/react
2
2
 
3
+ ## 0.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 67ac66a79: Refactor option label to be a child component instead of an attribute to improve screen reader experience
8
+ - e34e17292: Add optional name paramater that will pass a string to the button element's underlying name attribute
9
+ - d74d0161f: Refactor card heading from h5 to h3 to ensure headings are in sequential order to improve accessibility
10
+ - Updated dependencies [16dea2974]
11
+ - Updated dependencies [0d0341a3c]
12
+ - @ilo-org/styles@0.13.2
13
+
3
14
  ## 0.10.0
4
15
 
5
16
  ### Minor Changes
package/lib/cjs/components/Button/Button.js CHANGED
@@ -10,7 +10,7 @@ require('react');
10
10
  require('../../GlobalCtx-97e4b433.js');
11
11
  require('@ilo-org/icons-react');
12
12
 
13
- const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, }) => {
13
+ const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, name, }) => {
14
14
  const { prefix } = hooks_useGlobalSettings();
15
15
  const baseClass = `${prefix}--button`;
16
16
  const hasURL = !!url;
@@ -30,7 +30,7 @@ const Button = ({ callback, className, disabled = false, icon, icononly, iconPos
30
30
  callback(e);
31
31
  }
32
32
  };
33
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasURL ? (jsxRuntime.jsx(components_Link_Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true }) }))) : (jsxRuntime.jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style }, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true })] }))) }));
33
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasURL ? (jsxRuntime.jsx(components_Link_Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true }) }))) : (jsxRuntime.jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style, name: name }, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true })] }))) }));
34
34
  };
35
35
 
36
36
  module.exports = Button;
package/lib/cjs/components/Button/index.js CHANGED
@@ -15,10 +15,19 @@ const primary = {
15
15
  type: "primary",
16
16
  label: "Primary",
17
17
  size: "medium",
18
+ name: "primary",
18
19
  };
19
- const secondary = { type: "secondary", label: "Secondary" };
20
- const tertiary = { type: "tertiary", label: "Tertiary" };
21
- const alert = { type: "alert", label: "Alert" };
20
+ const secondary = {
21
+ type: "secondary",
22
+ label: "Secondary",
23
+ name: "secondary",
24
+ };
25
+ const tertiary = {
26
+ type: "tertiary",
27
+ label: "Tertiary",
28
+ name: "tertiary",
29
+ };
30
+ const alert = { type: "alert", label: "Alert", name: "alert" };
22
31
  const icon = { type: "primary", label: "Icon", icon: "close" };
23
32
  const disabled = {
24
33
  type: "primary",
package/lib/cjs/components/Card/Card.js CHANGED
@@ -28,7 +28,7 @@ const Card = ({ isvideo, eyebrow, title, color, theme, variant, size, cornercut,
28
28
  return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
29
29
  variant != "data" &&
30
30
  variant != "factlist" &&
31
- variant != "stat" && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
31
+ variant != "stat" && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
32
32
  variant != "stat" &&
33
33
  variant != "data" &&
34
34
  variant != "graphicpromo" &&
package/lib/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -28,7 +28,7 @@ const Dropdown = require$$0.forwardRef((props, ref) => {
28
28
  }
29
29
  };
30
30
  return (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsxRuntime.jsx("select", Object.assign({ ref: ref, id: id ? id : name, autoComplete: autocomplete, name: name, required: required, onChange: handleChange, onBlur: onBlur, disabled: disabled, className: dropdownClasses, value: currentvalue, form: form, multiple: multiple, size: selectSize, "aria-describedby": ariaDescribedBy }, { children: options &&
31
- options.map((option, i) => (jsxRuntime.jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })));
31
+ options.map((option, i) => (jsxRuntime.jsx("option", Object.assign({ disabled: option.disabled, label: option.label, value: option.value }, { children: option.label }), `${baseClass}--option--${i}`))) })) })));
32
32
  });
33
33
  const LabelledDropdown = require$$0.forwardRef((props, ref) => {
34
34
  const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
package/lib/esm/components/Button/Button.js CHANGED
@@ -8,7 +8,7 @@ import 'react';
8
8
  import '../../GlobalCtx-7fb23cfa.js';
9
9
  import '@ilo-org/icons-react';
10
10
 
11
- const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, }) => {
11
+ const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, name, }) => {
12
12
  const { prefix } = useGlobalSettings();
13
13
  const baseClass = `${prefix}--button`;
14
14
  const hasURL = !!url;
@@ -28,7 +28,7 @@ const Button = ({ callback, className, disabled = false, icon, icononly, iconPos
28
28
  callback(e);
29
29
  }
30
30
  };
31
- return (jsx(Fragment, { children: hasURL ? (jsx(Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsx(Icon, { name: icon, hidden: true }) }))) : (jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style }, { children: [label && jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsx(Icon, { name: icon, hidden: true })] }))) }));
31
+ return (jsx(Fragment, { children: hasURL ? (jsx(Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsx(Icon, { name: icon, hidden: true }) }))) : (jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style, name: name }, { children: [label && jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsx(Icon, { name: icon, hidden: true })] }))) }));
32
32
  };
33
33
 
34
34
  export { Button as default };
package/lib/esm/components/Button/index.js CHANGED
@@ -13,10 +13,19 @@ const primary = {
13
13
  type: "primary",
14
14
  label: "Primary",
15
15
  size: "medium",
16
+ name: "primary",
16
17
  };
17
- const secondary = { type: "secondary", label: "Secondary" };
18
- const tertiary = { type: "tertiary", label: "Tertiary" };
19
- const alert = { type: "alert", label: "Alert" };
18
+ const secondary = {
19
+ type: "secondary",
20
+ label: "Secondary",
21
+ name: "secondary",
22
+ };
23
+ const tertiary = {
24
+ type: "tertiary",
25
+ label: "Tertiary",
26
+ name: "tertiary",
27
+ };
28
+ const alert = { type: "alert", label: "Alert", name: "alert" };
20
29
  const icon = { type: "primary", label: "Icon", icon: "close" };
21
30
  const disabled = {
22
31
  type: "primary",
package/lib/esm/components/Card/Card.js CHANGED
@@ -26,7 +26,7 @@ const Card = ({ isvideo, eyebrow, title, color, theme, variant, size, cornercut,
26
26
  return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
27
27
  variant != "data" &&
28
28
  variant != "factlist" &&
29
- variant != "stat" && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
29
+ variant != "stat" && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h3", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
30
30
  variant != "stat" &&
31
31
  variant != "data" &&
32
32
  variant != "graphicpromo" &&
package/lib/esm/components/Dropdown/Dropdown.js CHANGED
@@ -26,7 +26,7 @@ const Dropdown = forwardRef((props, ref) => {
26
26
  }
27
27
  };
28
28
  return (jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsx("select", Object.assign({ ref: ref, id: id ? id : name, autoComplete: autocomplete, name: name, required: required, onChange: handleChange, onBlur: onBlur, disabled: disabled, className: dropdownClasses, value: currentvalue, form: form, multiple: multiple, size: selectSize, "aria-describedby": ariaDescribedBy }, { children: options &&
29
- options.map((option, i) => (jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })));
29
+ options.map((option, i) => (jsx("option", Object.assign({ disabled: option.disabled, label: option.label, value: option.value }, { children: option.label }), `${baseClass}--option--${i}`))) })) })));
30
30
  });
31
31
  const LabelledDropdown = forwardRef((props, ref) => {
32
32
  const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);
package/lib/types/react/src/components/Button/Button.props.d.ts CHANGED
@@ -13,6 +13,10 @@ export interface ButtonProps {
13
13
  * Specify an optional className to be added to your Button.
14
14
  */
15
15
  className?: string;
16
+ /**
17
+ * Specify the name for the Button.
18
+ */
19
+ name?: string;
16
20
  /**
17
21
  * Specify whether or not the button is disabled.
18
22
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/react",
3
- "version": "0.10.0",
3
+ "version": "0.10.1",
4
4
  "description": "React components for the ILO's Design System",
5
5
  "keywords": [
6
6
  "ui_patterns",
@@ -77,7 +77,7 @@
77
77
  "@ilo-org/brand-assets": "0.2.0",
78
78
  "@ilo-org/fonts": "0.1.2",
79
79
  "@ilo-org/icons-react": "0.0.21",
80
- "@ilo-org/styles": "0.13.1",
80
+ "@ilo-org/styles": "0.13.2",
81
81
  "@ilo-org/themes": "0.7.0",
82
82
  "@ilo-org/utils": "0.0.11"
83
83
  },
package/src/components/Button/Button.args.ts CHANGED
@@ -4,10 +4,19 @@ const primary: ButtonProps = {
4
4
  type: "primary",
5
5
  label: "Primary",
6
6
  size: "medium",
7
+ name: "primary",
7
8
  };
8
- const secondary: ButtonProps = { type: "secondary", label: "Secondary" };
9
- const tertiary: ButtonProps = { type: "tertiary", label: "Tertiary" };
10
- const alert: ButtonProps = { type: "alert", label: "Alert" };
9
+ const secondary: ButtonProps = {
10
+ type: "secondary",
11
+ label: "Secondary",
12
+ name: "secondary",
13
+ };
14
+ const tertiary: ButtonProps = {
15
+ type: "tertiary",
16
+ label: "Tertiary",
17
+ name: "tertiary",
18
+ };
19
+ const alert: ButtonProps = { type: "alert", label: "Alert", name: "alert" };
11
20
  const icon: ButtonProps = { type: "primary", label: "Icon", icon: "close" };
12
21
  const disabled: ButtonProps = {
13
22
  type: "primary",
package/src/components/Button/Button.props.ts CHANGED
@@ -22,6 +22,11 @@ export interface ButtonProps {
22
22
  */
23
23
  className?: string;
24
24
 
25
+ /**
26
+ * Specify the name for the Button.
27
+ */
28
+ name?: string;
29
+
25
30
  /**
26
31
  * Specify whether or not the button is disabled.
27
32
  */
package/src/components/Button/Button.tsx CHANGED
@@ -20,6 +20,7 @@ const Button: FC<ButtonProps> = ({
20
20
  type = "primary",
21
21
  url,
22
22
  style,
23
+ name,
23
24
  }) => {
24
25
  const { prefix } = useGlobalSettings();
25
26
  const baseClass = `${prefix}--button`;
@@ -63,6 +64,7 @@ const Button: FC<ButtonProps> = ({
63
64
  type={kind}
64
65
  aria-haspopup={opensmodal ? `dialog` : false}
65
66
  style={style}
67
+ name={name}
66
68
  >
67
69
  {label && <span className="button__label">{label}</span>}
68
70
  {icon && <Icon name={icon} hidden={true} />}
package/src/components/Card/Card.tsx CHANGED
@@ -67,7 +67,7 @@ const Card: FC<CardProps> = ({
67
67
  )}
68
68
  <div className={`${baseClass}--content`}>
69
69
  {eyebrow && <p className={`${baseClass}--eyebrow`}>{eyebrow}</p>}
70
- {title && <h5 className={`${baseClass}--title`}>{title}</h5>}
70
+ {title && <h3 className={`${baseClass}--title`}>{title}</h3>}
71
71
  {(variant == "multilink" || (variant == "data" && image)) && (
72
72
  <div className={`${baseClass}--image--wrapper`}>
73
73
  <picture>
package/src/components/Dropdown/Dropdown.tsx CHANGED
@@ -65,7 +65,9 @@ const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>((props, ref) => {
65
65
  label={option.label}
66
66
  value={option.value}
67
67
  key={`${baseClass}--option--${i}`}
68
- />
68
+ >
69
+ {option.label}
70
+ </option>
69
71
  ))}
70
72
  </select>
71
73
  </div>