@mackin.com/styleguide 11.0.0 → 11.0.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 (4) hide show
  1. package/index.d.ts +2 -0
  2. package/index.esm.js +27 -23
  3. package/index.js +27 -23
  4. package/package.json +1 -1
package/index.d.ts CHANGED
@@ -4,6 +4,8 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
4
4
 
5
5
  type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
6
6
  interface AccordianProps {
7
+ /** Required for ARIA. */
8
+ id: string;
7
9
  header: JSX.Element | string;
8
10
  children: React.ReactNode;
9
11
  variant?: HeaderVariant;
package/index.esm.js CHANGED
@@ -292,7 +292,6 @@ const Text = (props) => {
292
292
  }, props.children);
293
293
  };
294
294
 
295
- //TB: FUTURE de-dup these styles. create individual styles and compose them manually.
296
295
  const Button = React.forwardRef((props, ref) => {
297
296
  var _a;
298
297
  const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -551,26 +550,33 @@ const Accordian = (props) => {
551
550
  }
552
551
  setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
553
552
  }, [props.open]);
554
- return (React.createElement("div", { className: "accordian", "aria-expanded": open },
555
- React.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: cx(css({
556
- display: 'flex',
557
- alignItems: 'center',
558
- justifyContent: 'space-between',
559
- height: 'auto',
560
- minHeight: theme.controls.height,
561
- width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
562
- }, props.className)), onClick: e => {
563
- e.stopPropagation();
564
- if (props.onChange) {
565
- props.onChange(!open);
566
- }
567
- else {
568
- setOpen(!open);
569
- }
570
- }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
571
- React.createElement("span", null, props.header)),
553
+ const expandedPanelId = `${props.id}_expanded`;
554
+ return (React.createElement("div", { id: props.id, className: "accordian" },
555
+ React.createElement("h3", { className: css({
556
+ // required for ARIA
557
+ margin: 0,
558
+ padding: 0,
559
+ fontSize: 'inherit'
560
+ }) },
561
+ React.createElement(Button, { "aria-controls": expandedPanelId, "aria-expanded": open, "aria-disabled": props.disabled, readOnly: props.disabled, variant: props.variant, className: cx(css({
562
+ display: 'flex',
563
+ alignItems: 'center',
564
+ justifyContent: 'space-between',
565
+ height: 'auto',
566
+ minHeight: theme.controls.height,
567
+ width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
568
+ }, props.className)), onClick: e => {
569
+ e.stopPropagation();
570
+ if (props.onChange) {
571
+ props.onChange(!open);
572
+ }
573
+ else {
574
+ setOpen(!open);
575
+ }
576
+ }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
577
+ React.createElement("span", null, props.header))),
572
578
  React.createElement("div", { ref: content, className: cx('accordian__body', contentStyles) },
573
- React.createElement("div", { className: expandedContentWrapperStyles }, children))));
579
+ React.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId }, children))));
574
580
  };
575
581
  const useAccordianState = (count, openIndex) => {
576
582
  const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -983,7 +989,7 @@ const defaultOnPickFocusMs = 100;
983
989
  const Autocomplete = (p) => {
984
990
  var _a;
985
991
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
986
- const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
992
+ const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs", "ariaLabel"]);
987
993
  const theme = useThemeSafely();
988
994
  const element = React.useRef(null);
989
995
  const input = React.useRef(null);
@@ -2892,7 +2898,6 @@ const LinkContent = (props) => {
2892
2898
  }) }, props.rightIcon)));
2893
2899
  };
2894
2900
 
2895
- //TB: FUTURE de-dup these styles. create individual styles and compose them manually.
2896
2901
  const generateLinkStyles = (props, theme) => {
2897
2902
  const disabled = props.disabled || props.waiting;
2898
2903
  let color = props.colorOverride;
@@ -4261,7 +4266,6 @@ const TextArea = React.forwardRef((props, ref) => {
4261
4266
  }
4262
4267
  else {
4263
4268
  if (reportValueOnError) {
4264
- //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
4265
4269
  onValueChange(localValue);
4266
4270
  }
4267
4271
  else {
package/index.js CHANGED
@@ -310,7 +310,6 @@ const Text = (props) => {
310
310
  }, props.children);
311
311
  };
312
312
 
313
- //TB: FUTURE de-dup these styles. create individual styles and compose them manually.
314
313
  const Button = React__namespace.forwardRef((props, ref) => {
315
314
  var _a;
316
315
  const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -569,26 +568,33 @@ const Accordian = (props) => {
569
568
  }
570
569
  setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
571
570
  }, [props.open]);
572
- return (React__namespace.createElement("div", { className: "accordian", "aria-expanded": open },
573
- React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
574
- display: 'flex',
575
- alignItems: 'center',
576
- justifyContent: 'space-between',
577
- height: 'auto',
578
- minHeight: theme.controls.height,
579
- width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
580
- }, props.className)), onClick: e => {
581
- e.stopPropagation();
582
- if (props.onChange) {
583
- props.onChange(!open);
584
- }
585
- else {
586
- setOpen(!open);
587
- }
588
- }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
589
- React__namespace.createElement("span", null, props.header)),
571
+ const expandedPanelId = `${props.id}_expanded`;
572
+ return (React__namespace.createElement("div", { id: props.id, className: "accordian" },
573
+ React__namespace.createElement("h3", { className: css.css({
574
+ // required for ARIA
575
+ margin: 0,
576
+ padding: 0,
577
+ fontSize: 'inherit'
578
+ }) },
579
+ React__namespace.createElement(Button, { "aria-controls": expandedPanelId, "aria-expanded": open, "aria-disabled": props.disabled, readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
580
+ display: 'flex',
581
+ alignItems: 'center',
582
+ justifyContent: 'space-between',
583
+ height: 'auto',
584
+ minHeight: theme.controls.height,
585
+ width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
586
+ }, props.className)), onClick: e => {
587
+ e.stopPropagation();
588
+ if (props.onChange) {
589
+ props.onChange(!open);
590
+ }
591
+ else {
592
+ setOpen(!open);
593
+ }
594
+ }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
595
+ React__namespace.createElement("span", null, props.header))),
590
596
  React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
591
- React__namespace.createElement("div", { className: expandedContentWrapperStyles }, children))));
597
+ React__namespace.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId }, children))));
592
598
  };
593
599
  const useAccordianState = (count, openIndex) => {
594
600
  const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -1001,7 +1007,7 @@ const defaultOnPickFocusMs = 100;
1001
1007
  const Autocomplete = (p) => {
1002
1008
  var _a;
1003
1009
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
1004
- const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
1010
+ const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs", "ariaLabel"]);
1005
1011
  const theme = useThemeSafely();
1006
1012
  const element = React__namespace.useRef(null);
1007
1013
  const input = React__namespace.useRef(null);
@@ -2910,7 +2916,6 @@ const LinkContent = (props) => {
2910
2916
  }) }, props.rightIcon)));
2911
2917
  };
2912
2918
 
2913
- //TB: FUTURE de-dup these styles. create individual styles and compose them manually.
2914
2919
  const generateLinkStyles = (props, theme) => {
2915
2920
  const disabled = props.disabled || props.waiting;
2916
2921
  let color = props.colorOverride;
@@ -4279,7 +4284,6 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
4279
4284
  }
4280
4285
  else {
4281
4286
  if (reportValueOnError) {
4282
- //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
4283
4287
  onValueChange(localValue);
4284
4288
  }
4285
4289
  else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mackin.com/styleguide",
3
- "version": "11.0.0",
3
+ "version": "11.0.1",
4
4
  "description": "",
5
5
  "main": "./index.js",
6
6
  "module": "./index.esm.js",