@navikt/ds-react 0.16.19 → 0.16.20

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 (8) hide show
  1. package/cjs/modal/Modal.js +2 -2
  2. package/esm/modal/Modal.d.ts +5 -0
  3. package/esm/modal/Modal.js +2 -2
  4. package/esm/modal/Modal.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/modal/Modal.tsx +7 -0
  7. package/src/modal/{stories/modal.stories.tsx → modal.stories.tsx} +9 -5
  8. package/src/modal/stories/modal.stories.mdx +0 -32
package/cjs/modal/Modal.js CHANGED
@@ -41,7 +41,7 @@ const ds_icons_1 = require("@navikt/ds-icons");
41
41
  const __1 = require("..");
42
42
  const ModalContent_1 = __importDefault(require("./ModalContent"));
43
43
  const Modal = (0, react_1.forwardRef)((_a, ref) => {
44
- var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
44
+ var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
45
45
  const modalRef = (0, react_1.useRef)(null);
46
46
  const mergedRef = (0, react_merge_refs_1.default)([modalRef, ref]);
47
47
  const buttonRef = (0, react_1.useRef)(null);
@@ -57,7 +57,7 @@ const Modal = (0, react_1.forwardRef)((_a, ref) => {
57
57
  describedby: ariaDescribedBy,
58
58
  labelledby: ariaLabelledBy,
59
59
  modal: ariaModal,
60
- } }),
60
+ }, contentLabel: contentLabel }),
61
61
  children,
62
62
  closeButton && (react_1.default.createElement(__1.Button, { className: (0, classnames_1.default)("navds-modal__button", {
63
63
  "navds-modal__button--shake": shouldCloseOnOverlayClick,
package/esm/modal/Modal.d.ts CHANGED
@@ -31,6 +31,11 @@ export interface ModalProps {
31
31
  "aria-labelledby"?: string;
32
32
  "aria-describedby"?: string;
33
33
  "aria-modal"?: boolean;
34
+ /**
35
+ * Sets aria-label on modal
36
+ * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
37
+ */
38
+ "aria-label"?: string;
34
39
  }
35
40
  interface ModalComponent extends ModalLifecycle, React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>> {
36
41
  Content: ModalContentType;
package/esm/modal/Modal.js CHANGED
@@ -17,7 +17,7 @@ import { Close } from "@navikt/ds-icons";
17
17
  import { Button } from "..";
18
18
  import ModalContent from "./ModalContent";
19
19
  const Modal = forwardRef((_a, ref) => {
20
- var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
20
+ var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
21
21
  const modalRef = useRef(null);
22
22
  const mergedRef = mergeRefs([modalRef, ref]);
23
23
  const buttonRef = useRef(null);
@@ -33,7 +33,7 @@ const Modal = forwardRef((_a, ref) => {
33
33
  describedby: ariaDescribedBy,
34
34
  labelledby: ariaLabelledBy,
35
35
  modal: ariaModal,
36
- } }),
36
+ }, contentLabel: contentLabel }),
37
37
  children,
38
38
  closeButton && (React.createElement(Button, { className: cl("navds-modal__button", {
39
39
  "navds-modal__button--shake": shouldCloseOnOverlayClick,
package/esm/modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA8ChE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,OAExB,EADI,IAAI,cAVT,6IAWC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,SAAS;SACjB;QAEA,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAmDhE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE,YAAY,OAE3B,EADI,IAAI,cAXT,2JAYC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,SAAS;SACjB,EACD,YAAY,EAAE,YAAY;QAEzB,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.16.19",
3
+ "version": "0.16.20",
4
4
  "private": false,
5
5
  "description": "NAV designsystem react components",
6
6
  "author": "NAV Designsystem team",
@@ -66,5 +66,5 @@
66
66
  "@types/react": "^17.0.30",
67
67
  "react": "^17.0.0"
68
68
  },
69
- "gitHead": "f1c2c718e53324d18efb1c03483d0c75be2b386d"
69
+ "gitHead": "7e8899df34bc6b7dbbb20cf0558210ba6db3e23d"
70
70
  }
package/src/modal/Modal.tsx CHANGED
@@ -36,6 +36,11 @@ export interface ModalProps {
36
36
  "aria-labelledby"?: string;
37
37
  "aria-describedby"?: string;
38
38
  "aria-modal"?: boolean;
39
+ /**
40
+ * Sets aria-label on modal
41
+ * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
42
+ */
43
+ "aria-label"?: string;
39
44
  }
40
45
 
41
46
  interface ModalComponent
@@ -62,6 +67,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
62
67
  "aria-describedby": ariaDescribedBy,
63
68
  "aria-labelledby": ariaLabelledBy,
64
69
  "aria-modal": ariaModal,
70
+ "aria-label": contentLabel,
65
71
  ...rest
66
72
  },
67
73
  ref
@@ -92,6 +98,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
92
98
  labelledby: ariaLabelledBy,
93
99
  modal: ariaModal,
94
100
  }}
101
+ contentLabel={contentLabel}
95
102
  >
96
103
  {children}
97
104
  {closeButton && (
package/src/modal/{stories/modal.stories.tsx → modal.stories.tsx} RENAMED
@@ -16,9 +16,13 @@ export const All = () => {
16
16
  return (
17
17
  <>
18
18
  <button onClick={() => setOpen(true)}>Open modal</button>
19
- <Modal open={open} onClose={() => setOpen(false)}>
19
+ <Modal
20
+ open={open}
21
+ onClose={() => setOpen(false)}
22
+ aria-labelledby="header123"
23
+ >
20
24
  <Modal.Content>
21
- <h1>Header</h1>
25
+ <h1 id="header123">Header</h1>
22
26
  <h2>subheader</h2>
23
27
  <p>Cupidatat irure ipsum veniam ad in esse.</p>
24
28
  <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
@@ -32,9 +36,10 @@ export const All = () => {
32
36
  shouldCloseOnOverlayClick={false}
33
37
  open={openTwo}
34
38
  onClose={() => setOpenTwo(false)}
39
+ aria-labelledby="header123"
35
40
  >
36
41
  <Modal.Content>
37
- <h1>Header</h1>
42
+ <h1 id="header123">Header</h1>
38
43
  <h2>subheader</h2>
39
44
  <p>
40
45
  Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
@@ -54,10 +59,9 @@ export const All = () => {
54
59
  open={openThree}
55
60
  closeButton={false}
56
61
  onClose={() => setOpenThree(false)}
62
+ aria-label="Min modal"
57
63
  >
58
64
  <Modal.Content>
59
- <h1>Header</h1>
60
- <h2>subheader</h2>
61
65
  <p>Cupidatat irure ipsum veniam ad in esse.</p>
62
66
  <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
63
67
  </Modal.Content>
package/src/modal/stories/modal.stories.mdx DELETED
@@ -1,32 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/addon-docs";
2
- import { Modal } from "../../index";
3
-
4
- <Meta title="ds-react/modal/intro" />
5
-
6
- # Hvordan ta i bruk Modal
7
-
8
- NOTE: For at modalen skal mountes riktig må man kjøre
9
- `Modal.setAppElement("#root");` før man bruke modalen, da i eks useEffect/useLayoutEffect.
10
- `#root` kan da her erstattes med andre elementer, men root er relativt vanlig.
11
- Dette er nødvendig for at skjermlesere ikke skal lese opp innholdet feil i open/closed state
12
-
13
- Modalen styres med `open`-proppen som triggrer modal-staten til å endre. Når bruker ønsker å lukke modalen
14
- vil `onClose`-triggre og det er opp til systemet å håndtere det.
15
-
16
- ```jsx
17
- <Modal open={open} onClose={() => setOpen(false)}>
18
- <Modal.Content>
19
- <h2>Heading</h2>
20
- <p>
21
- Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
22
- laboriselit sit dolor aliquip velit esse. Excepteur sint non minim nulla
23
- excepteur labore non magna eu.
24
- </p>
25
- </Modal.Content>
26
- </Modal>
27
- ```
28
-
29
- ## shouldCloseOnOverlayClick
30
-
31
- Proppen `shouldCloseOnOverlayClick` toggler om `onClose` skal triggres
32
- når bruker trykker utenfor modalen (overlayet). Er default: true .