@navikt/ds-react 0.19.10 → 0.19.11

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 (6) hide show
  1. package/cjs/form/error-summary/ErrorSummary.js +4 -2
  2. package/esm/form/error-summary/ErrorSummary.js +4 -2
  3. package/esm/form/error-summary/ErrorSummary.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/form/error-summary/ErrorSummary.tsx +9 -3
  6. package/src/toggle-group/ToggleGroup.stories.tsx +63 -81
package/cjs/form/error-summary/ErrorSummary.js CHANGED
@@ -42,10 +42,12 @@ const react_1 = __importStar(require("react"));
42
42
  const classnames_1 = __importDefault(require("classnames"));
43
43
  const __1 = require("../..");
44
44
  const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
45
+ const util_1 = require("../../util");
45
46
  exports.ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
46
47
  var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
47
- return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { className: (0, classnames_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, role: "region" }),
48
- react_1.default.createElement(__1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small" }, heading),
48
+ const headingId = (0, util_1.useId)();
49
+ return (react_1.default.createElement("section", Object.assign({ ref: ref }, rest, { className: (0, classnames_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": `error-summary-${headingId}` }),
50
+ react_1.default.createElement(__1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: `error-summary-${headingId}` }, heading),
49
51
  react_1.default.createElement(__1.BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, react_1.default.Children.map(children, (child) => {
50
52
  return react_1.default.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
51
53
  }))));
package/esm/form/error-summary/ErrorSummary.js CHANGED
@@ -13,10 +13,12 @@ import React, { forwardRef } from "react";
13
13
  import cl from "classnames";
14
14
  import { Heading, BodyShort } from "../..";
15
15
  import ErrorSummaryItem from "./ErrorSummaryItem";
16
+ import { useId } from "../../util";
16
17
  export const ErrorSummary = forwardRef((_a, ref) => {
17
18
  var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
18
- return (React.createElement("div", Object.assign({ ref: ref }, rest, { className: cl(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, role: "region" }),
19
- React.createElement(Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small" }, heading),
19
+ const headingId = useId();
20
+ return (React.createElement("section", Object.assign({ ref: ref }, rest, { className: cl(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": `error-summary-${headingId}` }),
21
+ React.createElement(Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: `error-summary-${headingId}` }, heading),
20
22
  React.createElement(BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, React.Children.map(children, (child) => {
21
23
  return React.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
22
24
  }))));
package/esm/form/error-summary/ErrorSummary.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AA8B5E,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ;QAEb,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,IAEX,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACR,CACP,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA8BnC,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,iBAAiB,SAAS,EAAE;QAE7C,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,iBAAiB,SAAS,EAAE,IAE/B,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.19.10",
3
+ "version": "0.19.11",
4
4
  "description": "NAV designsystem react components",
5
5
  "author": "NAV Designsystem team",
6
6
  "license": "MIT",
@@ -76,5 +76,5 @@
76
76
  "@types/react": "^17.0.30 || ^18.0.0",
77
77
  "react": "^17.0.0 || ^18.0.0"
78
78
  },
79
- "gitHead": "3e0e9ad15c93d9a3cd82d6d9a353cb0c4da0d8b6"
79
+ "gitHead": "bf41d8f1812acb47ec960edc85f3841123ef4b33"
80
80
  }
package/src/form/error-summary/ErrorSummary.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { forwardRef, HTMLAttributes } from "react";
2
2
  import cl from "classnames";
3
3
  import { Heading, BodyShort } from "../..";
4
4
  import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
5
+ import { useId } from "../../util";
5
6
 
6
7
  export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
7
8
  /**
@@ -43,8 +44,10 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
43
44
  },
44
45
  ref
45
46
  ) => {
47
+ const headingId = useId();
48
+
46
49
  return (
47
- <div
50
+ <section
48
51
  ref={ref}
49
52
  {...rest}
50
53
  className={cl(
@@ -53,12 +56,15 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
53
56
  `navds-error-summary--${size}`
54
57
  )}
55
58
  tabIndex={-1}
56
- role="region"
59
+ aria-live="polite"
60
+ aria-relevant="all"
61
+ aria-labelledby={`error-summary-${headingId}`}
57
62
  >
58
63
  <Heading
59
64
  className="navds-error-summary__heading"
60
65
  as={headingTag}
61
66
  size="small"
67
+ id={`error-summary-${headingId}`}
62
68
  >
63
69
  {heading}
64
70
  </Heading>
@@ -67,7 +73,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
67
73
  return <li key={child?.toString()}>{child}</li>;
68
74
  })}
69
75
  </BodyShort>
70
- </div>
76
+ </section>
71
77
  );
72
78
  }
73
79
  ) as ErrorSummaryComponent;
package/src/toggle-group/ToggleGroup.stories.tsx CHANGED
@@ -1,122 +1,104 @@
1
+ import { Email, EmailOpened, Send } from "@navikt/ds-icons";
2
+ import { Meta } from "@storybook/react/types-6-0";
1
3
  import React, { useState } from "react";
2
- import { Attachment, Hamburger, Star, System } from "@navikt/ds-icons";
3
4
  import { ToggleGroup } from "../index";
4
- import { Meta } from "@storybook/react/types-6-0";
5
5
  export default {
6
- title: "ds-react/toggle-group",
6
+ title: "ds-react/ToggleGroup",
7
7
  component: ToggleGroup,
8
- parameters: {
9
- chromatic: { disable: true },
8
+ argTypes: {
9
+ size: {
10
+ control: {
11
+ type: "radio",
12
+ options: ["medium", "small"],
13
+ },
14
+ },
10
15
  },
11
16
  } as Meta;
12
17
 
13
18
  const Items = (icon?: boolean, both?: boolean) => (
14
19
  <>
15
- <ToggleGroup.Item value="first">
20
+ <ToggleGroup.Item value="ulest">
16
21
  {both ? (
17
22
  <>
18
- <Hamburger /> First
23
+ <Email /> Uleste
19
24
  </>
20
25
  ) : (
21
- <>{icon ? <Hamburger /> : "First"}</>
26
+ <>{icon ? <Email /> : "Uleste"}</>
22
27
  )}
23
28
  </ToggleGroup.Item>
24
- <ToggleGroup.Item value="second">
29
+ <ToggleGroup.Item value="lest">
25
30
  {both ? (
26
31
  <>
27
- <Star /> Second more txt
32
+ <EmailOpened /> Leste
28
33
  </>
29
34
  ) : (
30
- <>{icon ? <Star /> : "Second more txt"}</>
35
+ <>{icon ? <EmailOpened /> : "Leste"}</>
31
36
  )}
32
37
  </ToggleGroup.Item>
33
- <ToggleGroup.Item value="third">
38
+ <ToggleGroup.Item value="sendt">
34
39
  {both ? (
35
40
  <>
36
- <Attachment /> Thrid
41
+ <Send /> Sendte
37
42
  </>
38
43
  ) : (
39
- <>{icon ? <Attachment /> : "Third"}</>
40
- )}
41
- </ToggleGroup.Item>
42
- <ToggleGroup.Item value="fourth">
43
- {both ? (
44
- <>
45
- <System /> Fourth
46
- </>
47
- ) : (
48
- <>{icon ? <System /> : "Fourth"}</>
44
+ <>{icon ? <Send /> : "Sendte"}</>
49
45
  )}
50
46
  </ToggleGroup.Item>
51
47
  </>
52
48
  );
53
49
 
54
- export const UUDemo = () => {
50
+ export const Default = (props) => {
55
51
  const [activeValue, setActiveValue] = useState("ulest");
56
52
  return (
57
- <ToggleGroup value={activeValue} onChange={setActiveValue}>
58
- <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
59
- <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
60
- <ToggleGroup.Item value="sendt">Sendte</ToggleGroup.Item>
53
+ <ToggleGroup
54
+ size={props?.size}
55
+ value={activeValue}
56
+ onChange={setActiveValue}
57
+ label={props.label ? "Proident minim dolor pariatur." : undefined}
58
+ >
59
+ {Items(!!props?.icon, !!props?.text && props.icon)}
61
60
  </ToggleGroup>
62
61
  );
63
62
  };
64
63
 
65
- export const All = () => {
66
- const [activeValue, setActiveValue] = useState("first");
64
+ Default.args = {
65
+ icon: true,
66
+ text: true,
67
+ label: false,
68
+ };
69
+
70
+ export const Compositions = () => {
71
+ const [activeValue, setActiveValue] = useState("ulest");
72
+
73
+ return (
74
+ <div className="colgap">
75
+ <ToggleGroup value={activeValue} onChange={setActiveValue}>
76
+ {Items()}
77
+ </ToggleGroup>
78
+ <ToggleGroup value={activeValue} onChange={setActiveValue}>
79
+ {Items(true, true)}
80
+ </ToggleGroup>
81
+ <ToggleGroup value={activeValue} onChange={setActiveValue}>
82
+ {Items(true)}
83
+ </ToggleGroup>
84
+ </div>
85
+ );
86
+ };
87
+
88
+ export const Small = () => {
89
+ const [activeValue, setActiveValue] = useState("ulest");
67
90
 
68
91
  return (
69
- <div>
70
- <h2>ToggleGroup</h2>
71
- <h3>{activeValue}</h3>
72
- <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
73
- <ToggleGroup value={activeValue} onChange={setActiveValue}>
74
- {Items()}
75
- </ToggleGroup>
76
- <ToggleGroup value={activeValue} onChange={setActiveValue}>
77
- {Items(true)}
78
- </ToggleGroup>
79
- <ToggleGroup value={activeValue} onChange={setActiveValue}>
80
- {Items(true, true)}
81
- </ToggleGroup>
82
- </div>
83
- <h2>ToggleGroup Small</h2>
84
- <h3>{activeValue}</h3>
85
- <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
86
- <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
87
- {Items()}
88
- </ToggleGroup>
89
- <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
90
- {Items(true)}
91
- </ToggleGroup>
92
- <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
93
- {Items(true, true)}
94
- </ToggleGroup>
95
- </div>
96
- <h2>ToggleGroup label</h2>
97
- <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
98
- <ToggleGroup
99
- label="Label msg"
100
- value={activeValue}
101
- onChange={setActiveValue}
102
- >
103
- {Items()}
104
- </ToggleGroup>
105
- <ToggleGroup
106
- label="Label msg"
107
- value={activeValue}
108
- onChange={setActiveValue}
109
- aria-describedby="demo-id"
110
- >
111
- {Items()}
112
- </ToggleGroup>
113
- </div>
114
- <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
115
- <h2>Uncontrolled</h2>
116
- <ToggleGroup onChange={setActiveValue} defaultValue="second">
117
- {Items()}
118
- </ToggleGroup>
119
- </div>
92
+ <div className="colgap">
93
+ <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
94
+ {Items()}
95
+ </ToggleGroup>
96
+ <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
97
+ {Items(true, true)}
98
+ </ToggleGroup>
99
+ <ToggleGroup size="small" value={activeValue} onChange={setActiveValue}>
100
+ {Items(true)}
101
+ </ToggleGroup>
120
102
  </div>
121
103
  );
122
104
  };