@navikt/ds-react 0.19.2 → 0.19.3

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 (7) hide show
  1. package/cjs/accordion/AccordionContent.js +1 -1
  2. package/esm/accordion/AccordionContent.js +1 -1
  3. package/esm/accordion/AccordionContent.js.map +1 -1
  4. package/package.json +10 -8
  5. package/src/accordion/AccordionContent.tsx +1 -1
  6. package/src/accordion/accordion.stories.tsx +33 -27
  7. package/src/link-panel/stories/link-panel.stories.tsx +10 -12
package/cjs/accordion/AccordionContent.js CHANGED
@@ -51,7 +51,7 @@ const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
51
51
  const CollapseComponent = context.renderContentWhenClosed
52
52
  ? react_collapse_1.Collapse
53
53
  : react_collapse_1.UnmountClosed;
54
- return (react_1.default.createElement("div", Object.assign({ ref: ref, role: "region", "aria-labelledby": context.buttonId }, rest),
54
+ return (react_1.default.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
55
55
  react_1.default.createElement(CollapseComponent, { isOpened: context.open },
56
56
  react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-accordion__content", className) }, children))));
57
57
  });
package/esm/accordion/AccordionContent.js CHANGED
@@ -23,7 +23,7 @@ const AccordionContent = forwardRef((_a, ref) => {
23
23
  const CollapseComponent = context.renderContentWhenClosed
24
24
  ? Collapse
25
25
  : UnmountClosed;
26
- return (React.createElement("div", Object.assign({ ref: ref, role: "region", "aria-labelledby": context.buttonId }, rest),
26
+ return (React.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
27
27
  React.createElement(CollapseComponent, { isOpened: context.open },
28
28
  React.createElement("div", { className: cl("navds-accordion__content", className) }, children))));
29
29
  });
package/esm/accordion/AccordionContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAoC,EAAE,GAAG,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAAlC,+BAAoC,CAAF;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,uBAAuB;QACvD,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,QAAQ,qBAAkB,OAAO,CAAC,QAAQ,IAAM,IAAI;QACtE,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,OAAO,CAAC,IAAI;YACvC,6BAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,IACtD,QAAQ,CACL,CACY,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAoC,EAAE,GAAG,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAAlC,+BAAoC,CAAF;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,uBAAuB;QACvD,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,qBAAmB,OAAO,CAAC,QAAQ,IAAM,IAAI;QACxD,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,OAAO,CAAC,IAAI;YACvC,6BAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,IACtD,QAAQ,CACL,CACY,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.19.2",
4
- "private": false,
3
+ "version": "0.19.3",
5
4
  "description": "NAV designsystem react components",
6
5
  "author": "NAV Designsystem team",
7
6
  "license": "MIT",
@@ -31,14 +30,14 @@
31
30
  "docgen": "yarn ts-node ../../../scripts/docgen.ts",
32
31
  "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
33
32
  "clean": "rimraf cjs esm",
34
- "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn docgen",
33
+ "build": "yarn run clean && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
35
34
  "watch": "tsc --watch -p tsconfig.esm.json",
36
35
  "test": "jest"
37
36
  },
38
37
  "dependencies": {
39
38
  "@floating-ui/react-dom": "0.6.0",
40
39
  "@material-ui/core": "^4.12.3",
41
- "@navikt/ds-icons": "^0.8.14",
40
+ "@navikt/ds-icons": "^0.8.15",
42
41
  "@popperjs/core": "^2.10.1",
43
42
  "@radix-ui/react-tabs": "0.1.5",
44
43
  "@radix-ui/react-toggle-group": "0.1.5",
@@ -50,29 +49,32 @@
50
49
  "uuid": "^8.3.2"
51
50
  },
52
51
  "devDependencies": {
52
+ "@testing-library/dom": "8.13.0",
53
53
  "@testing-library/jest-dom": "^5.16.0",
54
54
  "@testing-library/react": "^13.0.0",
55
55
  "@testing-library/user-event": "^14.0.0",
56
56
  "@types/faker": "5.5.8",
57
57
  "@types/jest": "^27.0.1",
58
+ "@types/node": "^17.0.35",
58
59
  "@types/react-collapse": "^5.0.1",
59
60
  "@types/react-modal": "^3.13.1",
60
- "@types/styled-components": "^5.1.14",
61
+ "concurrently": "7.2.1",
61
62
  "copyfiles": "^2.4.1",
62
63
  "faker": "5.5.3",
63
64
  "fast-glob": "3.2.11",
64
65
  "jest": "^27.5.0",
65
66
  "react-docgen-typescript": "2.2.2",
67
+ "react-dom": "^18.0.0",
66
68
  "react-router-dom": "^6.3.0",
67
69
  "rimraf": "3.0.2",
68
- "styled-components": "^5.3.1",
69
70
  "swr": "^1.1.2",
70
71
  "ts-jest": "^27.1.0",
71
- "ts-node": "10.7.0"
72
+ "ts-node": "10.7.0",
73
+ "typescript": "^4.7.2"
72
74
  },
73
75
  "peerDependencies": {
74
76
  "@types/react": "^17.0.30 || ^18.0.0",
75
77
  "react": "^17.0.0 || ^18.0.0"
76
78
  },
77
- "gitHead": "44a4ab61fe94ba5e54ed3ab556eca408b4198314"
79
+ "gitHead": "035f4e937ada8a9f8ed9836116024596a271ab4f"
78
80
  }
package/src/accordion/AccordionContent.tsx CHANGED
@@ -33,7 +33,7 @@ const AccordionContent: AccordionContentType = forwardRef(
33
33
  : UnmountClosed;
34
34
 
35
35
  return (
36
- <div ref={ref} role="region" aria-labelledby={context.buttonId} {...rest}>
36
+ <div ref={ref} aria-labelledby={context.buttonId} {...rest}>
37
37
  <CollapseComponent isOpened={context.open}>
38
38
  <div className={cl("navds-accordion__content", className)}>
39
39
  {children}
package/src/accordion/accordion.stories.tsx CHANGED
@@ -52,11 +52,13 @@ export const Default = (props) => {
52
52
  </Accordion.Item>
53
53
  );
54
54
  return (
55
- <Accordion>
56
- {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
57
- <Item key={y} />
58
- ))}
59
- </Accordion>
55
+ <div style={{ width: 500 }}>
56
+ <Accordion>
57
+ {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
58
+ <Item key={y} />
59
+ ))}
60
+ </Accordion>
61
+ </div>
60
62
  );
61
63
  };
62
64
 
@@ -71,32 +73,36 @@ export const Controlled = () => {
71
73
  const [open2, setOpen2] = useState(false);
72
74
 
73
75
  return (
76
+ <div style={{ width: 500 }}>
77
+ <Accordion>
78
+ <Accordion.Item open={open}>
79
+ <Accordion.Header onClick={() => setOpen(!open)}>
80
+ Accordion header text
81
+ </Accordion.Header>
82
+ <Content />
83
+ </Accordion.Item>
84
+ <Accordion.Item open={open2}>
85
+ <Accordion.Header onClick={() => setOpen2(!open2)}>
86
+ Accordion header text
87
+ </Accordion.Header>
88
+ <Content />
89
+ </Accordion.Item>
90
+ </Accordion>
91
+ </div>
92
+ );
93
+ };
94
+
95
+ export const Uncontrolled = () => (
96
+ <div style={{ width: 500 }}>
74
97
  <Accordion>
75
- <Accordion.Item open={open}>
76
- <Accordion.Header onClick={() => setOpen(!open)}>
77
- Accordion header text
78
- </Accordion.Header>
98
+ <Accordion.Item>
99
+ <Accordion.Header>Accordion header text</Accordion.Header>
79
100
  <Content />
80
101
  </Accordion.Item>
81
- <Accordion.Item open={open2}>
82
- <Accordion.Header onClick={() => setOpen2(!open2)}>
83
- Accordion header text
84
- </Accordion.Header>
102
+ <Accordion.Item>
103
+ <Accordion.Header>Accordion header text</Accordion.Header>
85
104
  <Content />
86
105
  </Accordion.Item>
87
106
  </Accordion>
88
- );
89
- };
90
-
91
- export const Uncontrolled = () => (
92
- <Accordion>
93
- <Accordion.Item>
94
- <Accordion.Header>Accordion header text</Accordion.Header>
95
- <Content />
96
- </Accordion.Item>
97
- <Accordion.Item>
98
- <Accordion.Header>Accordion header text</Accordion.Header>
99
- <Content />
100
- </Accordion.Item>
101
- </Accordion>
107
+ </div>
102
108
  );
package/src/link-panel/stories/link-panel.stories.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import styled from "styled-components";
3
2
  import { LinkPanel } from "..";
4
3
  import { Illustration } from "./illustration";
5
4
 
@@ -8,15 +7,6 @@ export default {
8
7
  component: LinkPanel,
9
8
  };
10
9
 
11
- const StyledLinkPanel = styled(LinkPanel)`
12
- .navds-link-panel__content {
13
- display: grid;
14
- grid-auto-flow: column;
15
- gap: var(--navds-spacing-8);
16
- align-items: center;
17
- }
18
- `;
19
-
20
10
  export const All = () => (
21
11
  <>
22
12
  <h1>Link panel</h1>
@@ -37,7 +27,7 @@ export const All = () => (
37
27
  </LinkPanel>
38
28
 
39
29
  <h1>Custom styling</h1>
40
- <StyledLinkPanel href="#">
30
+ <LinkPanel href="#" className="linkpanel">
41
31
  {Illustration}
42
32
  <div>
43
33
  <LinkPanel.Title>
@@ -48,6 +38,14 @@ export const All = () => (
48
38
  magna veniam consequat. id aliquip Lorem esse
49
39
  </LinkPanel.Description>
50
40
  </div>
51
- </StyledLinkPanel>
41
+ </LinkPanel>
42
+ <style>{`
43
+ .linkpanel .navds-link-panel__content {
44
+ display: grid;
45
+ grid-auto-flow: column;
46
+ gap: var(--navds-spacing-8);
47
+ align-items: center;
48
+ }
49
+ `}</style>
52
50
  </>
53
51
  );