@navikt/ds-react 0.19.15 → 0.19.16
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.
- package/_docs.json +31 -10
- package/cjs/stepper/Step.js +8 -8
- package/cjs/stepper/Stepper.js +10 -5
- package/cjs/tooltip/Tooltip.js +1 -4
- package/esm/accordion/AccordionItem.js.map +1 -1
- package/esm/button/Button.js.map +1 -1
- package/esm/form/radio/RadioGroup.js.map +1 -1
- package/esm/link/Link.js.map +1 -1
- package/esm/stepper/Step.d.ts +2 -2
- package/esm/stepper/Step.js +8 -8
- package/esm/stepper/Step.js.map +1 -1
- package/esm/stepper/Stepper.d.ts +8 -4
- package/esm/stepper/Stepper.js +10 -5
- package/esm/stepper/Stepper.js.map +1 -1
- package/esm/tooltip/Tooltip.js +1 -4
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/typography/Heading.js.map +1 -1
- package/esm/typography/Ingress.js.map +1 -1
- package/esm/typography/Label.js.map +1 -1
- package/package.json +2 -2
- package/src/accordion/AccordionItem.tsx +2 -3
- package/src/button/Button.tsx +62 -62
- package/src/form/radio/RadioGroup.tsx +2 -3
- package/src/link/Link.tsx +4 -6
- package/src/stepper/Step.tsx +16 -13
- package/src/stepper/Stepper.tsx +34 -8
- package/src/stepper/stepper.stories.tsx +133 -0
- package/src/tooltip/Tooltip.tsx +4 -4
- package/src/typography/Heading.tsx +15 -17
- package/src/typography/Ingress.tsx +10 -12
- package/src/typography/Label.tsx +16 -18
- package/src/stepper/stories/Example.tsx +0 -28
- package/src/stepper/stories/stepper.stories.mdx +0 -61
- package/src/stepper/stories/stepper.stories.tsx +0 -54
package/_docs.json
CHANGED
|
@@ -4903,12 +4903,12 @@
|
|
|
4903
4903
|
"name": "string"
|
|
4904
4904
|
}
|
|
4905
4905
|
},
|
|
4906
|
-
"
|
|
4906
|
+
"unsafe_index": {
|
|
4907
4907
|
"defaultValue": {
|
|
4908
4908
|
"value": "0"
|
|
4909
4909
|
},
|
|
4910
|
-
"description": "Handled by Stepper\n@private",
|
|
4911
|
-
"name": "
|
|
4910
|
+
"description": "Handled by Stepper, overwriting may break component logic\n@private",
|
|
4911
|
+
"name": "unsafe_index",
|
|
4912
4912
|
"parent": {
|
|
4913
4913
|
"fileName": "src/stepper/Step.tsx",
|
|
4914
4914
|
"name": "StepperStepProps"
|
|
@@ -4987,10 +4987,12 @@
|
|
|
4987
4987
|
"name": "ReactNode"
|
|
4988
4988
|
}
|
|
4989
4989
|
},
|
|
4990
|
-
"
|
|
4991
|
-
"defaultValue":
|
|
4992
|
-
|
|
4993
|
-
|
|
4990
|
+
"orientation": {
|
|
4991
|
+
"defaultValue": {
|
|
4992
|
+
"value": "\"vertical\""
|
|
4993
|
+
},
|
|
4994
|
+
"description": "The direction the component grows.",
|
|
4995
|
+
"name": "orientation",
|
|
4994
4996
|
"parent": {
|
|
4995
4997
|
"fileName": "src/stepper/Stepper.tsx",
|
|
4996
4998
|
"name": "StepperProps"
|
|
@@ -5003,12 +5005,12 @@
|
|
|
5003
5005
|
],
|
|
5004
5006
|
"required": false,
|
|
5005
5007
|
"type": {
|
|
5006
|
-
"name": "
|
|
5008
|
+
"name": "\"horizontal\" | \"vertical\""
|
|
5007
5009
|
}
|
|
5008
5010
|
},
|
|
5009
5011
|
"activeStep": {
|
|
5010
5012
|
"defaultValue": null,
|
|
5011
|
-
"description": "Current active step index",
|
|
5013
|
+
"description": "Current active step.\n@note Stepper index starts at 1, not 0",
|
|
5012
5014
|
"name": "activeStep",
|
|
5013
5015
|
"parent": {
|
|
5014
5016
|
"fileName": "src/stepper/Stepper.tsx",
|
|
@@ -5027,7 +5029,7 @@
|
|
|
5027
5029
|
},
|
|
5028
5030
|
"onStepChange": {
|
|
5029
5031
|
"defaultValue": null,
|
|
5030
|
-
"description": "Callback for
|
|
5032
|
+
"description": "Callback for next activeStep\n@note Stepper index starts at 1, not 0",
|
|
5031
5033
|
"name": "onStepChange",
|
|
5032
5034
|
"parent": {
|
|
5033
5035
|
"fileName": "src/stepper/Stepper.tsx",
|
|
@@ -5044,6 +5046,25 @@
|
|
|
5044
5046
|
"name": "((step: number) => void)"
|
|
5045
5047
|
}
|
|
5046
5048
|
},
|
|
5049
|
+
"className": {
|
|
5050
|
+
"defaultValue": null,
|
|
5051
|
+
"description": "",
|
|
5052
|
+
"name": "className",
|
|
5053
|
+
"parent": {
|
|
5054
|
+
"fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
|
|
5055
|
+
"name": "HTMLAttributes"
|
|
5056
|
+
},
|
|
5057
|
+
"declarations": [
|
|
5058
|
+
{
|
|
5059
|
+
"fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
|
|
5060
|
+
"name": "HTMLAttributes"
|
|
5061
|
+
}
|
|
5062
|
+
],
|
|
5063
|
+
"required": false,
|
|
5064
|
+
"type": {
|
|
5065
|
+
"name": "string"
|
|
5066
|
+
}
|
|
5067
|
+
},
|
|
5047
5068
|
"ref": {
|
|
5048
5069
|
"defaultValue": null,
|
|
5049
5070
|
"description": "",
|
package/cjs/stepper/Step.js
CHANGED
|
@@ -43,22 +43,22 @@ const react_1 = __importStar(require("react"));
|
|
|
43
43
|
const Stepper_1 = require("./Stepper");
|
|
44
44
|
const __1 = require("..");
|
|
45
45
|
exports.StepComponent = (0, react_1.forwardRef)((_a, ref) => {
|
|
46
|
-
var { className, children, as: Component = "a",
|
|
46
|
+
var { className, children, as: Component = "a", unsafe_index = 0 } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index"]);
|
|
47
47
|
const context = (0, react_1.useContext)(Stepper_1.StepperContext);
|
|
48
48
|
if (context === null) {
|
|
49
|
-
console.error("<
|
|
49
|
+
console.error("<Stepper.Step> has to be used within <Stepper>");
|
|
50
50
|
return null;
|
|
51
51
|
}
|
|
52
|
-
const activeStep = context
|
|
53
|
-
return (react_1.default.createElement(Component, Object.assign({}, rest, { "aria-current":
|
|
54
|
-
"navds-stepper__step--active": activeStep,
|
|
52
|
+
const { activeStep } = context;
|
|
53
|
+
return (react_1.default.createElement(Component, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: (0, classnames_1.default)("navds-stepper__step", className, {
|
|
54
|
+
"navds-stepper__step--active": activeStep === unsafe_index,
|
|
55
55
|
}), onClick: (e) => {
|
|
56
56
|
var _a;
|
|
57
|
-
context.onStepChange(
|
|
57
|
+
context.onStepChange(unsafe_index + 1);
|
|
58
58
|
(_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
|
|
59
59
|
} }),
|
|
60
|
-
react_1.default.createElement(__1.Label, { className: "navds-
|
|
61
|
-
react_1.default.createElement(__1.Label, { className: "navds-
|
|
60
|
+
react_1.default.createElement(__1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1),
|
|
61
|
+
react_1.default.createElement(__1.Label, { as: "span", className: "navds-stepper__content" }, children)));
|
|
62
62
|
});
|
|
63
63
|
const Step = exports.StepComponent;
|
|
64
64
|
exports.default = Step;
|
package/cjs/stepper/Stepper.js
CHANGED
|
@@ -43,17 +43,22 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
43
43
|
const Step_1 = __importDefault(require("./Step"));
|
|
44
44
|
exports.StepperContext = (0, react_1.createContext)(null);
|
|
45
45
|
exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
|
|
46
|
-
var { children, className, activeStep, onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "onStepChange"]);
|
|
47
|
-
|
|
46
|
+
var { children, className, activeStep, orientation = "vertical", onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange"]);
|
|
47
|
+
activeStep = activeStep - 1;
|
|
48
|
+
return (react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
|
|
48
49
|
react_1.default.createElement(exports.StepperContext.Provider, { value: {
|
|
49
50
|
activeStep,
|
|
50
51
|
onStepChange,
|
|
51
52
|
lastIndex: react_1.default.Children.count(children),
|
|
53
|
+
orientation,
|
|
52
54
|
} }, react_1.default.Children.map(children, (step, index) => {
|
|
53
55
|
var _a, _b;
|
|
54
|
-
return (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
return (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },
|
|
57
|
+
react_1.default.createElement("span", { className: "navds-stepper__line navds-stepper__line--1" }),
|
|
58
|
+
react_1.default.isValidElement(step)
|
|
59
|
+
? react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { unsafe_index: index }))
|
|
60
|
+
: step,
|
|
61
|
+
react_1.default.createElement("span", { className: "navds-stepper__line navds-stepper__line--2" })));
|
|
57
62
|
}))));
|
|
58
63
|
});
|
|
59
64
|
exports.Stepper.Step = Step_1.default;
|
package/cjs/tooltip/Tooltip.js
CHANGED
|
@@ -98,10 +98,7 @@ exports.Tooltip = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
98
98
|
}, [handleMouseUp]);
|
|
99
99
|
(0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => e.key === "Escape" && handleClose(), [handleClose]));
|
|
100
100
|
/* https://floating-ui.com/docs/react-dom#stable-ref-prop */
|
|
101
|
-
const stableRef = (0, react_1.useMemo)(() => (0, react_merge_refs_1.default)([ref, refs.floating]), [
|
|
102
|
-
ref,
|
|
103
|
-
refs.floating,
|
|
104
|
-
]);
|
|
101
|
+
const stableRef = (0, react_1.useMemo)(() => (0, react_merge_refs_1.default)([ref, refs.floating]), [ref, refs.floating]);
|
|
105
102
|
if (!children ||
|
|
106
103
|
(children === null || children === void 0 ? void 0 : children.type) === react_1.default.Fragment ||
|
|
107
104
|
children === react_1.default.Fragment) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAsCnE,MAAM,CAAC,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAsCnE,MAAM,CAAC,MAAM,oBAAoB,GAC/B,aAAa,CAAmC,IAAI,CAAC,CAAC;AAExD,MAAM,aAAa,GAAsB,UAAU,CACjD,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,uBAAuB,GAAG,KAAK,EAC/B,OAAO,EACP,EAAE,OAEH,EADI,IAAI,cART,4FASC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,OAAO,CACL,2CACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;YAChD,6BAA6B,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY;SACpD,CAAC,EACF,GAAG,EAAE,GAAG,IACJ,IAAI;QAER,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY;gBAC1B,UAAU,EAAE,GAAG,EAAE;oBACf,IAAI,IAAI,KAAK,SAAS,EAAE;wBACtB,eAAe,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;qBACpC;gBACH,CAAC;gBACD,uBAAuB;gBACvB,WAAW;gBACX,QAAQ;aACT,IAEA,QAAQ,CACqB,CAC5B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
package/esm/button/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8BhD,MAAM,CAAC,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8BhD,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,OAEN,EADI,IAAI,cATT,kFAUC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CACd,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CACnD,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;SACvC,CACF,EACD,KAAK,kCACA,KAAK,KACR,KAAK,EAAE,aAAa,KAEtB,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,aAAa,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,QAAQ,CACxC,CACF,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/form/radio/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAiB,MAAM,IAAI,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAU9B,MAAM,CAAC,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/form/radio/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAiB,MAAM,IAAI,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAU9B,MAAM,CAAC,MAAM,iBAAiB,GAC5B,KAAK,CAAC,aAAa,CAAgC,IAAI,CAAC,CAAC;AAiC3D,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EASC,EACD,GAAG,EACH,EAAE;;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,QAAQ,OAET,EADI,IAAI,cART,kFASC,CADQ;IAIT,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,mBAAmB,EACnB,sBAAsB,MAAA,MAAA,IAAI,CAAC,IAAI,mCAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ,EAAE,CAChE;QAED,oBAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,kBAAkB,MAAM,EAAE;gBACxC,YAAY;gBACZ,KAAK;gBACL,QAAQ;gBACR,QAAQ;aACT;YAED,6BAAK,SAAS,EAAC,qBAAqB,IAAE,QAAQ,CAAO,CAC1B,CACpB,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
package/esm/link/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/link/Link.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAW5B,MAAM,CAAC,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/link/Link.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAW5B,MAAM,CAAC,MAAM,IAAI,GACf,UAAU,CAAC,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAzC,mBAA2C,CAAF;IAAY,OAAA,CAC/D,oBAAC,SAAS,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAC1E,CAAA;CAAA,CAAC,CAAC;AAEL,eAAe,IAAI,CAAC"}
|
package/esm/stepper/Step.d.ts
CHANGED
|
@@ -6,10 +6,10 @@ export interface StepperStepProps extends React.AnchorHTMLAttributes<HTMLAnchorE
|
|
|
6
6
|
*/
|
|
7
7
|
children: string;
|
|
8
8
|
/**
|
|
9
|
-
* Handled by Stepper
|
|
9
|
+
* Handled by Stepper, overwriting may break component logic
|
|
10
10
|
* @private
|
|
11
11
|
*/
|
|
12
|
-
|
|
12
|
+
unsafe_index?: number;
|
|
13
13
|
}
|
|
14
14
|
export interface StepperStepType extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {
|
|
15
15
|
}
|
package/esm/stepper/Step.js
CHANGED
|
@@ -14,22 +14,22 @@ import React, { forwardRef, useContext } from "react";
|
|
|
14
14
|
import { StepperContext } from "./Stepper";
|
|
15
15
|
import { Label } from "..";
|
|
16
16
|
export const StepComponent = forwardRef((_a, ref) => {
|
|
17
|
-
var { className, children, as: Component = "a",
|
|
17
|
+
var { className, children, as: Component = "a", unsafe_index = 0 } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index"]);
|
|
18
18
|
const context = useContext(StepperContext);
|
|
19
19
|
if (context === null) {
|
|
20
|
-
console.error("<
|
|
20
|
+
console.error("<Stepper.Step> has to be used within <Stepper>");
|
|
21
21
|
return null;
|
|
22
22
|
}
|
|
23
|
-
const activeStep = context
|
|
24
|
-
return (React.createElement(Component, Object.assign({}, rest, { "aria-current":
|
|
25
|
-
"navds-stepper__step--active": activeStep,
|
|
23
|
+
const { activeStep } = context;
|
|
24
|
+
return (React.createElement(Component, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: cl("navds-stepper__step", className, {
|
|
25
|
+
"navds-stepper__step--active": activeStep === unsafe_index,
|
|
26
26
|
}), onClick: (e) => {
|
|
27
27
|
var _a;
|
|
28
|
-
context.onStepChange(
|
|
28
|
+
context.onStepChange(unsafe_index + 1);
|
|
29
29
|
(_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
|
|
30
30
|
} }),
|
|
31
|
-
React.createElement(Label, { className: "navds-
|
|
32
|
-
React.createElement(Label, { className: "navds-
|
|
31
|
+
React.createElement(Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1),
|
|
32
|
+
React.createElement(Label, { as: "span", className: "navds-stepper__content" }, children)));
|
|
33
33
|
});
|
|
34
34
|
const Step = StepComponent;
|
|
35
35
|
export default Step;
|
package/esm/stepper/Step.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAkBjD,MAAM,CAAC,MAAM,aAAa,GAGtB,UAAU,CACZ,
|
|
1
|
+
{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAkBjD,MAAM,CAAC,MAAM,aAAa,GAGtB,UAAU,CACZ,CACE,EAAuE,EACvE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,CAAC,OAAW,EAAN,IAAI,cAArE,+CAAuE,CAAF;IAGrE,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,gDAAgD,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC;KACb;IACD,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAE/B,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,oBACM,UAAU,KAAK,YAAY,EACzC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE;YAC9C,6BAA6B,EAAE,UAAU,KAAK,YAAY;SAC3D,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,OAAO,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YACvC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,oBAAC,KAAK,IAAC,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAC,MAAM,iBAAa,MAAM,IAClE,YAAY,GAAG,CAAC,CACX;QACR,oBAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAC,wBAAwB,IAChD,QAAQ,CACH,CACE,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAgC,CAAC;AAE9C,eAAe,IAAI,CAAC"}
|
package/esm/stepper/Stepper.d.ts
CHANGED
|
@@ -6,15 +6,18 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
|
6
6
|
*/
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* The direction the component grows.
|
|
10
|
+
* @default "vertical"
|
|
10
11
|
*/
|
|
11
|
-
|
|
12
|
+
orientation?: "horizontal" | "vertical";
|
|
12
13
|
/**
|
|
13
|
-
* Current active step
|
|
14
|
+
* Current active step.
|
|
15
|
+
* @note Stepper index starts at 1, not 0
|
|
14
16
|
*/
|
|
15
17
|
activeStep: number;
|
|
16
18
|
/**
|
|
17
|
-
* Callback for
|
|
19
|
+
* Callback for next activeStep
|
|
20
|
+
* @note Stepper index starts at 1, not 0
|
|
18
21
|
*/
|
|
19
22
|
onStepChange?: (step: number) => void;
|
|
20
23
|
}
|
|
@@ -25,6 +28,7 @@ interface StepperContextProps {
|
|
|
25
28
|
activeStep: number;
|
|
26
29
|
onStepChange: (step: number) => void;
|
|
27
30
|
lastIndex: number;
|
|
31
|
+
orientation: "horizontal" | "vertical";
|
|
28
32
|
}
|
|
29
33
|
export declare const StepperContext: React.Context<StepperContextProps | null>;
|
|
30
34
|
export declare const Stepper: StepperComponent;
|
package/esm/stepper/Stepper.js
CHANGED
|
@@ -14,17 +14,22 @@ import cl from "classnames";
|
|
|
14
14
|
import Step from "./Step";
|
|
15
15
|
export const StepperContext = createContext(null);
|
|
16
16
|
export const Stepper = forwardRef((_a, ref) => {
|
|
17
|
-
var { children, className, activeStep, onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "onStepChange"]);
|
|
18
|
-
|
|
17
|
+
var { children, className, activeStep, orientation = "vertical", onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange"]);
|
|
18
|
+
activeStep = activeStep - 1;
|
|
19
|
+
return (React.createElement("ol", Object.assign({}, rest, { ref: ref, className: cl("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
|
|
19
20
|
React.createElement(StepperContext.Provider, { value: {
|
|
20
21
|
activeStep,
|
|
21
22
|
onStepChange,
|
|
22
23
|
lastIndex: React.Children.count(children),
|
|
24
|
+
orientation,
|
|
23
25
|
} }, React.Children.map(children, (step, index) => {
|
|
24
26
|
var _a, _b;
|
|
25
|
-
return (React.createElement("li", { className: cl("navds-
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
return (React.createElement("li", { className: cl("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },
|
|
28
|
+
React.createElement("span", { className: "navds-stepper__line navds-stepper__line--1" }),
|
|
29
|
+
React.isValidElement(step)
|
|
30
|
+
? React.cloneElement(step, Object.assign(Object.assign({}, step.props), { unsafe_index: index }))
|
|
31
|
+
: step,
|
|
32
|
+
React.createElement("span", { className: "navds-stepper__line navds-stepper__line--2" })));
|
|
28
33
|
}))));
|
|
29
34
|
});
|
|
30
35
|
Stepper.Step = Step;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,IAA2C,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,IAA2C,MAAM,QAAQ,CAAC;AAsCjE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAqB,UAAU,CAIjD,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,OAExB,EADI,IAAI,cANT,sEAOC,CADQ;IAIT,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;IAC5B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAC/D,SAAS,CACV;QAED,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;gBACzC,WAAW;aACZ,IAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5C,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,EACpC,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,wDAAI,mCAAI,EAAE,CAAC;gBAE3C,8BAAM,SAAS,EAAC,4CAA4C,GAAG;gBAC9D,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;oBAC3C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,kCAClB,IAAI,CAAC,KAAK,KACb,YAAY,EAAE,KAAK,IACnB;oBACJ,CAAC,CAAC,IAAI;gBACR,8BAAM,SAAS,EAAC,4CAA4C,GAAG,CAC5D,CACN,CAAC;QACJ,CAAC,CAAC,CACsB,CACvB,CACN,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;AAEpB,eAAe,OAAO,CAAC"}
|
package/esm/tooltip/Tooltip.js
CHANGED
|
@@ -69,10 +69,7 @@ export const Tooltip = forwardRef((_a, ref) => {
|
|
|
69
69
|
}, [handleMouseUp]);
|
|
70
70
|
useEventListener("keydown", useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]));
|
|
71
71
|
/* https://floating-ui.com/docs/react-dom#stable-ref-prop */
|
|
72
|
-
const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
|
|
73
|
-
ref,
|
|
74
|
-
refs.floating,
|
|
75
|
-
]);
|
|
72
|
+
const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [ref, refs.floating]);
|
|
76
73
|
if (!children ||
|
|
77
74
|
(children === null || children === void 0 ? void 0 : children.type) === React.Fragment ||
|
|
78
75
|
children === React.Fragment) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAwB5B,MAAM,CAAC,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAwB5B,MAAM,CAAC,MAAM,OAAO,GAClB,UAAU,CACR,CAAC,EAA8D,EAAE,GAAG,EAAE,EAAE;QAAvE,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAA5D,+CAA8D,CAAF;IAC3D,IAAI,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAK,IAAI,KAAK,EAAwB,CAAC;IAE1D,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,kBAAkB,IAAI,EAAE,EAAE;YAClE,qBAAqB,EAAE,OAAO;SAC/B,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,MAAM,CAAC,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,MAAM,CAAC,MAAM,OAAO,GAClB,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAlD,8BAAoD,CAAF;IAAY,OAAA,CACxE,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CAAC,CAAC;AAEL,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAmB5B,MAAM,CAAC,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAmB5B,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.16",
|
|
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": "
|
|
79
|
+
"gitHead": "4f437d4e15befce3aef21440141ad7d36138219d"
|
|
80
80
|
}
|
|
@@ -37,9 +37,8 @@ export interface AccordionItemContextProps {
|
|
|
37
37
|
renderContentWhenClosed: boolean;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
export const AccordionItemContext =
|
|
41
|
-
null
|
|
42
|
-
);
|
|
40
|
+
export const AccordionItemContext =
|
|
41
|
+
createContext<AccordionItemContextProps | null>(null);
|
|
43
42
|
|
|
44
43
|
const AccordionItem: AccordionItemType = forwardRef(
|
|
45
44
|
(
|
package/src/button/Button.tsx
CHANGED
|
@@ -32,70 +32,70 @@ export interface ButtonProps
|
|
|
32
32
|
loading?: boolean;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
export const Button: OverridableComponent<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const mergedRef = mergeRefs([buttonRef, ref]);
|
|
55
|
-
const [widthOverride, setWidthOverride] = useState<number>();
|
|
35
|
+
export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
|
|
36
|
+
forwardRef(
|
|
37
|
+
(
|
|
38
|
+
{
|
|
39
|
+
as: Component = "button",
|
|
40
|
+
variant = "primary",
|
|
41
|
+
className,
|
|
42
|
+
children,
|
|
43
|
+
size = "medium",
|
|
44
|
+
loading = false,
|
|
45
|
+
disabled,
|
|
46
|
+
style,
|
|
47
|
+
...rest
|
|
48
|
+
},
|
|
49
|
+
ref
|
|
50
|
+
) => {
|
|
51
|
+
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
|
52
|
+
const mergedRef = mergeRefs([buttonRef, ref]);
|
|
53
|
+
const [widthOverride, setWidthOverride] = useState<number>();
|
|
56
54
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
55
|
+
useClientLayoutEffect(() => {
|
|
56
|
+
if (loading) {
|
|
57
|
+
const requestID = window.requestAnimationFrame(() => {
|
|
58
|
+
setWidthOverride(
|
|
59
|
+
buttonRef?.current?.getBoundingClientRect()?.width
|
|
60
|
+
);
|
|
61
|
+
});
|
|
62
|
+
return () => {
|
|
63
|
+
setWidthOverride(undefined);
|
|
64
|
+
cancelAnimationFrame(requestID);
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
}, [loading, children]);
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
>
|
|
88
|
-
<BodyShort
|
|
89
|
-
as="span"
|
|
90
|
-
className="navds-button__inner"
|
|
91
|
-
size={size === "medium" ? "medium" : "small"}
|
|
92
|
-
aria-live="polite"
|
|
69
|
+
return (
|
|
70
|
+
<Component
|
|
71
|
+
{...rest}
|
|
72
|
+
ref={mergedRef}
|
|
73
|
+
className={cl(
|
|
74
|
+
className,
|
|
75
|
+
"navds-button",
|
|
76
|
+
`navds-button--${variant}`,
|
|
77
|
+
`navds-button--${size}`,
|
|
78
|
+
{
|
|
79
|
+
"navds-button--loading": widthOverride,
|
|
80
|
+
}
|
|
81
|
+
)}
|
|
82
|
+
style={{
|
|
83
|
+
...style,
|
|
84
|
+
width: widthOverride,
|
|
85
|
+
}}
|
|
86
|
+
disabled={disabled ?? widthOverride ? true : undefined}
|
|
93
87
|
>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
88
|
+
<BodyShort
|
|
89
|
+
as="span"
|
|
90
|
+
className="navds-button__inner"
|
|
91
|
+
size={size === "medium" ? "medium" : "small"}
|
|
92
|
+
aria-live="polite"
|
|
93
|
+
>
|
|
94
|
+
{widthOverride ? <Loader size={size} /> : children}
|
|
95
|
+
</BodyShort>
|
|
96
|
+
</Component>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
100
|
|
|
101
101
|
export default Button;
|
|
@@ -11,9 +11,8 @@ export interface RadioGroupContextProps {
|
|
|
11
11
|
required?: boolean;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
export const RadioGroupContext =
|
|
15
|
-
null
|
|
16
|
-
);
|
|
14
|
+
export const RadioGroupContext =
|
|
15
|
+
React.createContext<RadioGroupContextProps | null>(null);
|
|
17
16
|
|
|
18
17
|
export interface RadioGroupProps
|
|
19
18
|
extends Omit<
|
package/src/link/Link.tsx
CHANGED
|
@@ -10,11 +10,9 @@ export interface LinkProps
|
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export const Link: OverridableComponent<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<Component {...rest} ref={ref} className={cl("navds-link", className)} />
|
|
18
|
-
));
|
|
13
|
+
export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
|
|
14
|
+
forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
|
|
15
|
+
<Component {...rest} ref={ref} className={cl("navds-link", className)} />
|
|
16
|
+
));
|
|
19
17
|
|
|
20
18
|
export default Link;
|
package/src/stepper/Step.tsx
CHANGED
|
@@ -10,10 +10,10 @@ export interface StepperStepProps
|
|
|
10
10
|
*/
|
|
11
11
|
children: string;
|
|
12
12
|
/**
|
|
13
|
-
* Handled by Stepper
|
|
13
|
+
* Handled by Stepper, overwriting may break component logic
|
|
14
14
|
* @private
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
unsafe_index?: number;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export interface StepperStepType
|
|
@@ -23,33 +23,36 @@ export const StepComponent: OverridableComponent<
|
|
|
23
23
|
StepperStepProps,
|
|
24
24
|
HTMLAnchorElement
|
|
25
25
|
> = forwardRef(
|
|
26
|
-
(
|
|
26
|
+
(
|
|
27
|
+
{ className, children, as: Component = "a", unsafe_index = 0, ...rest },
|
|
28
|
+
ref
|
|
29
|
+
) => {
|
|
27
30
|
const context = useContext(StepperContext);
|
|
28
31
|
if (context === null) {
|
|
29
|
-
console.error(
|
|
30
|
-
"<StepIndicator.Step> has to be used within an <StepIndicator>"
|
|
31
|
-
);
|
|
32
|
+
console.error("<Stepper.Step> has to be used within <Stepper>");
|
|
32
33
|
return null;
|
|
33
34
|
}
|
|
34
|
-
const activeStep = context
|
|
35
|
+
const { activeStep } = context;
|
|
35
36
|
|
|
36
37
|
return (
|
|
37
38
|
<Component
|
|
38
39
|
{...rest}
|
|
39
|
-
aria-current={
|
|
40
|
+
aria-current={activeStep === unsafe_index}
|
|
40
41
|
ref={ref}
|
|
41
42
|
className={cl("navds-stepper__step", className, {
|
|
42
|
-
"navds-stepper__step--active": activeStep,
|
|
43
|
+
"navds-stepper__step--active": activeStep === unsafe_index,
|
|
43
44
|
})}
|
|
44
45
|
onClick={(e) => {
|
|
45
|
-
context.onStepChange(
|
|
46
|
+
context.onStepChange(unsafe_index + 1);
|
|
46
47
|
rest?.onClick?.(e);
|
|
47
48
|
}}
|
|
48
49
|
>
|
|
49
|
-
<Label className="navds-
|
|
50
|
-
{
|
|
50
|
+
<Label className="navds-stepper__circle" as="span" aria-hidden="true">
|
|
51
|
+
{unsafe_index + 1}
|
|
52
|
+
</Label>
|
|
53
|
+
<Label as="span" className="navds-stepper__content">
|
|
54
|
+
{children}
|
|
51
55
|
</Label>
|
|
52
|
-
<Label className="navds-stepper__step-label">{children}</Label>
|
|
53
56
|
</Component>
|
|
54
57
|
);
|
|
55
58
|
}
|
package/src/stepper/Stepper.tsx
CHANGED
|
@@ -8,15 +8,18 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
|
8
8
|
*/
|
|
9
9
|
children: React.ReactNode;
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* The direction the component grows.
|
|
12
|
+
* @default "vertical"
|
|
12
13
|
*/
|
|
13
|
-
|
|
14
|
+
orientation?: "horizontal" | "vertical";
|
|
14
15
|
/**
|
|
15
|
-
* Current active step
|
|
16
|
+
* Current active step.
|
|
17
|
+
* @note Stepper index starts at 1, not 0
|
|
16
18
|
*/
|
|
17
19
|
activeStep: number;
|
|
18
20
|
/**
|
|
19
|
-
* Callback for
|
|
21
|
+
* Callback for next activeStep
|
|
22
|
+
* @note Stepper index starts at 1, not 0
|
|
20
23
|
*/
|
|
21
24
|
onStepChange?: (step: number) => void;
|
|
22
25
|
}
|
|
@@ -32,6 +35,7 @@ interface StepperContextProps {
|
|
|
32
35
|
activeStep: number;
|
|
33
36
|
onStepChange: (step: number) => void;
|
|
34
37
|
lastIndex: number;
|
|
38
|
+
orientation: "horizontal" | "vertical";
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
export const StepperContext = createContext<StepperContextProps | null>(null);
|
|
@@ -41,27 +45,49 @@ export const Stepper: StepperComponent = forwardRef<
|
|
|
41
45
|
StepperProps
|
|
42
46
|
>(
|
|
43
47
|
(
|
|
44
|
-
{
|
|
48
|
+
{
|
|
49
|
+
children,
|
|
50
|
+
className,
|
|
51
|
+
activeStep,
|
|
52
|
+
orientation = "vertical",
|
|
53
|
+
onStepChange = () => {},
|
|
54
|
+
...rest
|
|
55
|
+
},
|
|
45
56
|
ref
|
|
46
57
|
) => {
|
|
58
|
+
activeStep = activeStep - 1;
|
|
47
59
|
return (
|
|
48
|
-
<ol
|
|
60
|
+
<ol
|
|
61
|
+
{...rest}
|
|
62
|
+
ref={ref}
|
|
63
|
+
className={cl(
|
|
64
|
+
"navds-stepper",
|
|
65
|
+
orientation === "horizontal" ? "navds-stepper--horizontal" : "",
|
|
66
|
+
className
|
|
67
|
+
)}
|
|
68
|
+
>
|
|
49
69
|
<StepperContext.Provider
|
|
50
70
|
value={{
|
|
51
71
|
activeStep,
|
|
52
72
|
onStepChange,
|
|
53
73
|
lastIndex: React.Children.count(children),
|
|
74
|
+
orientation,
|
|
54
75
|
}}
|
|
55
76
|
>
|
|
56
77
|
{React.Children.map(children, (step, index) => {
|
|
57
78
|
return (
|
|
58
79
|
<li
|
|
59
|
-
className={cl("navds-
|
|
80
|
+
className={cl("navds-stepper__item")}
|
|
60
81
|
key={index + (children?.toString?.() ?? "")}
|
|
61
82
|
>
|
|
83
|
+
<span className="navds-stepper__line navds-stepper__line--1" />
|
|
62
84
|
{React.isValidElement<StepperStepProps>(step)
|
|
63
|
-
? React.cloneElement(step, {
|
|
85
|
+
? React.cloneElement(step, {
|
|
86
|
+
...step.props,
|
|
87
|
+
unsafe_index: index,
|
|
88
|
+
})
|
|
64
89
|
: step}
|
|
90
|
+
<span className="navds-stepper__line navds-stepper__line--2" />
|
|
65
91
|
</li>
|
|
66
92
|
);
|
|
67
93
|
})}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { Meta } from "@storybook/react/types-6-0";
|
|
2
|
+
import React, { useState } from "react";
|
|
3
|
+
import Stepper from "./Stepper";
|
|
4
|
+
import { BodyLong } from "..";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "ds-react/Stepper",
|
|
8
|
+
component: Stepper,
|
|
9
|
+
argTypes: {
|
|
10
|
+
orientation: {
|
|
11
|
+
control: {
|
|
12
|
+
type: "radio",
|
|
13
|
+
options: ["horizontal", "vertical"],
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
} as Meta;
|
|
18
|
+
|
|
19
|
+
const storyTexts = [
|
|
20
|
+
"Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
|
|
21
|
+
"Customer centric sorry i didn't get your email proceduralize, and first-order optimal strategies. I dont care if you got some copy, why you dont use officeipsumcom or something like that ? wheelhouse. Viral engagement new economy, this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables Bob called an all-hands this afternoon. Fire up your browser touch base innovation is hot right now so this medium needs to be more dynamic.",
|
|
22
|
+
"Touch base define the underlying principles that drive decisions and strategy for your design language. I have zero cycles for this. Cadence social currency, for low engagement execute . Deliverables rehydrate the team or let's circle back to that those options are already baked in with this model teams were able to drive adoption and awareness we need to start advertising on social media circle back. Through the lens of face time.",
|
|
23
|
+
"Take five, punch the tree, and come back in here with a clear head those options are already baked in with this model ultimate measure of success and we need to crystallize a plan yet open door policy who's responsible for the ask for this request? what do you feel you would bring to the table if you were hired for this position. Wiggle room guerrilla marketing shelfware. Code feature creep can we parallel path lose client to 10:00 meeting hire the best manage expectations root-and-branch review.",
|
|
24
|
+
"Curate downselect tread it daily cc me on that due diligence, or close the loop. All hands on deck my supervisor didn't like the latest revision you gave me can you switch back to the first revision? ping me or game-plan, yet make it a priority, on this journey win-win. Our competitors are jumping the shark we need to build it so that it scales post launch future-proof can we align on lunch orders. Deliverables message the initiative.",
|
|
25
|
+
"Out of scope poop, so pre launch. I just wanted to give you a heads-up wiggle room cc me on that I have been doing some research this morning and we need to better, nor dog and pony show prioritize these line items so UX. Big data upstream selling circle back, in an ideal world. Get all your ducks in a row land it in region so code so one-sheet. Action item we need to think big start small and scale fast to energize our clients. Cta due diligence, for this vendor is incompetent nor forcing function and circle back and low engagement.",
|
|
26
|
+
"Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
export const Default = ({ asButton, ...props }) => {
|
|
30
|
+
const [activeStep, setActiveStep] = useState(1);
|
|
31
|
+
|
|
32
|
+
const newProps = {
|
|
33
|
+
onClick: (e) => e.preventDefault(),
|
|
34
|
+
...(asButton ? { as: "button" } : { href: "#" }),
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
|
|
39
|
+
<Stepper
|
|
40
|
+
aria-labelledby="stepper-heading"
|
|
41
|
+
activeStep={activeStep}
|
|
42
|
+
onStepChange={setActiveStep}
|
|
43
|
+
orientation="horizontal"
|
|
44
|
+
{...props}
|
|
45
|
+
>
|
|
46
|
+
<Stepper.Step {...newProps}>Start søknad</Stepper.Step>
|
|
47
|
+
<Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
|
|
48
|
+
<Stepper.Step {...newProps}>Saksopplysninger</Stepper.Step>
|
|
49
|
+
<Stepper.Step {...newProps}>
|
|
50
|
+
Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og
|
|
51
|
+
forklares i sitt fulle i denne labelen
|
|
52
|
+
</Stepper.Step>
|
|
53
|
+
<Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
|
|
54
|
+
<Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
|
|
55
|
+
<Stepper.Step {...newProps}>Innsending</Stepper.Step>
|
|
56
|
+
</Stepper>
|
|
57
|
+
<BodyLong style={{ marginTop: "5rem" }}>
|
|
58
|
+
{storyTexts[activeStep]}
|
|
59
|
+
</BodyLong>
|
|
60
|
+
</div>
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
Default.args = {
|
|
65
|
+
asButton: false,
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export const Horizontal = () => {
|
|
69
|
+
const [activeStep, setActiveStep] = useState(2);
|
|
70
|
+
const props = { onClick: (e) => e.preventDefault(), href: "#" };
|
|
71
|
+
return (
|
|
72
|
+
<Stepper
|
|
73
|
+
aria-labelledby="stepper-heading"
|
|
74
|
+
activeStep={activeStep}
|
|
75
|
+
onStepChange={setActiveStep}
|
|
76
|
+
orientation="horizontal"
|
|
77
|
+
>
|
|
78
|
+
<Stepper.Step {...props}>Start søknad</Stepper.Step>
|
|
79
|
+
<Stepper.Step {...props}>Personopplysninger</Stepper.Step>
|
|
80
|
+
<Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
|
|
81
|
+
<Stepper.Step {...props}>
|
|
82
|
+
Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
|
|
83
|
+
</Stepper.Step>
|
|
84
|
+
<Stepper.Step {...props}>Vedlegg</Stepper.Step>
|
|
85
|
+
<Stepper.Step {...props}>Oppsummering</Stepper.Step>
|
|
86
|
+
<Stepper.Step {...props}>Innsending</Stepper.Step>
|
|
87
|
+
</Stepper>
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export const Vertical = () => {
|
|
92
|
+
const [activeStep, setActiveStep] = useState(2);
|
|
93
|
+
const props = { onClick: (e) => e.preventDefault(), href: "#" };
|
|
94
|
+
return (
|
|
95
|
+
<Stepper
|
|
96
|
+
aria-labelledby="stepper-heading"
|
|
97
|
+
activeStep={activeStep}
|
|
98
|
+
onStepChange={setActiveStep}
|
|
99
|
+
orientation="vertical"
|
|
100
|
+
>
|
|
101
|
+
<Stepper.Step {...props}>Start søknad</Stepper.Step>
|
|
102
|
+
<Stepper.Step {...props}>Personopplysninger</Stepper.Step>
|
|
103
|
+
<Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
|
|
104
|
+
<Stepper.Step {...props}>
|
|
105
|
+
Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
|
|
106
|
+
</Stepper.Step>
|
|
107
|
+
<Stepper.Step {...props}>Vedlegg</Stepper.Step>
|
|
108
|
+
<Stepper.Step {...props}>Oppsummering</Stepper.Step>
|
|
109
|
+
<Stepper.Step {...props}>Innsending</Stepper.Step>
|
|
110
|
+
</Stepper>
|
|
111
|
+
);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
export const DisplayOnly = () => {
|
|
115
|
+
const props = { as: "div" };
|
|
116
|
+
return (
|
|
117
|
+
<Stepper
|
|
118
|
+
aria-labelledby="stepper-heading"
|
|
119
|
+
activeStep={2}
|
|
120
|
+
orientation="vertical"
|
|
121
|
+
>
|
|
122
|
+
<Stepper.Step {...props}>Start søknad</Stepper.Step>
|
|
123
|
+
<Stepper.Step {...props}>Personopplysninger</Stepper.Step>
|
|
124
|
+
<Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
|
|
125
|
+
<Stepper.Step {...props}>
|
|
126
|
+
Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
|
|
127
|
+
</Stepper.Step>
|
|
128
|
+
<Stepper.Step {...props}>Vedlegg</Stepper.Step>
|
|
129
|
+
<Stepper.Step {...props}>Oppsummering</Stepper.Step>
|
|
130
|
+
<Stepper.Step {...props}>Innsending</Stepper.Step>
|
|
131
|
+
</Stepper>
|
|
132
|
+
);
|
|
133
|
+
};
|
package/src/tooltip/Tooltip.tsx
CHANGED
|
@@ -171,10 +171,10 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
|
|
|
171
171
|
);
|
|
172
172
|
|
|
173
173
|
/* https://floating-ui.com/docs/react-dom#stable-ref-prop */
|
|
174
|
-
const stableRef = useMemo(
|
|
175
|
-
ref,
|
|
176
|
-
refs.floating
|
|
177
|
-
|
|
174
|
+
const stableRef = useMemo(
|
|
175
|
+
() => mergeRefs([ref, refs.floating]),
|
|
176
|
+
[ref, refs.floating]
|
|
177
|
+
);
|
|
178
178
|
|
|
179
179
|
if (
|
|
180
180
|
!children ||
|
|
@@ -23,23 +23,21 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
|
23
23
|
spacing?: boolean;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
export const Heading: OverridableComponent<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
|
|
31
|
-
let HeadingTag = as ?? (`h${level}` as React.ElementType);
|
|
26
|
+
export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
|
|
27
|
+
forwardRef(
|
|
28
|
+
({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
|
|
29
|
+
let HeadingTag = as ?? (`h${level}` as React.ElementType);
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
);
|
|
31
|
+
return (
|
|
32
|
+
<HeadingTag
|
|
33
|
+
{...rest}
|
|
34
|
+
ref={ref}
|
|
35
|
+
className={cl(className, "navds-heading", `navds-heading--${size}`, {
|
|
36
|
+
"navds-typo--spacing": spacing,
|
|
37
|
+
})}
|
|
38
|
+
/>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
);
|
|
44
42
|
|
|
45
43
|
export default Heading;
|
|
@@ -14,17 +14,15 @@ export interface IngressProps
|
|
|
14
14
|
spacing?: boolean;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
export const Ingress: OverridableComponent<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
/>
|
|
28
|
-
));
|
|
17
|
+
export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
|
|
18
|
+
forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (
|
|
19
|
+
<Component
|
|
20
|
+
{...rest}
|
|
21
|
+
ref={ref}
|
|
22
|
+
className={cl(className, "navds-ingress", {
|
|
23
|
+
"navds-typo--spacing": !!spacing,
|
|
24
|
+
})}
|
|
25
|
+
/>
|
|
26
|
+
));
|
|
29
27
|
|
|
30
28
|
export default Ingress;
|
package/src/typography/Label.tsx
CHANGED
|
@@ -18,23 +18,21 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
|
18
18
|
spacing?: boolean;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export const Label: OverridableComponent<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
)
|
|
38
|
-
);
|
|
21
|
+
export const Label: OverridableComponent<LabelProps, HTMLParagraphElement> =
|
|
22
|
+
forwardRef(
|
|
23
|
+
(
|
|
24
|
+
{ className, size = "medium", spacing, as: Component = "p", ...rest },
|
|
25
|
+
ref
|
|
26
|
+
) => (
|
|
27
|
+
<Component
|
|
28
|
+
{...rest}
|
|
29
|
+
ref={ref}
|
|
30
|
+
className={cl(className, "navds-label", {
|
|
31
|
+
"navds-label--small": size === "small",
|
|
32
|
+
"navds-typo--spacing": !!spacing,
|
|
33
|
+
})}
|
|
34
|
+
/>
|
|
35
|
+
)
|
|
36
|
+
);
|
|
39
37
|
|
|
40
38
|
export default Label;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Stepper } from "..";
|
|
3
|
-
|
|
4
|
-
export const Example = (props) => {
|
|
5
|
-
const [activeStep, setActiveStep] = useState(
|
|
6
|
-
props.initialStep ? props.initialStep : 1
|
|
7
|
-
);
|
|
8
|
-
|
|
9
|
-
const anchorProps = {
|
|
10
|
-
href: "",
|
|
11
|
-
onClick: (e) => e.preventDefault(),
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<Stepper {...props} activeStep={activeStep} onStepChange={setActiveStep}>
|
|
16
|
-
<Stepper.Step {...anchorProps}>Start</Stepper.Step>
|
|
17
|
-
<Stepper.Step {...anchorProps}>
|
|
18
|
-
Sunt deserunt qui sit sunt culpa nisi
|
|
19
|
-
</Stepper.Step>
|
|
20
|
-
<Stepper.Step {...anchorProps}>
|
|
21
|
-
Nulla nisi pariatur nulla cupidatat elit.
|
|
22
|
-
</Stepper.Step>
|
|
23
|
-
<Stepper.Step {...anchorProps}>
|
|
24
|
-
Nulla laborum proident consequat laborum elit et dolore ut sunt.
|
|
25
|
-
</Stepper.Step>
|
|
26
|
-
</Stepper>
|
|
27
|
-
);
|
|
28
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas } from "@storybook/addon-docs";
|
|
2
|
-
import { Stepper } from "..";
|
|
3
|
-
import { Example } from "./Example";
|
|
4
|
-
|
|
5
|
-
<Meta title="ds-react/stepper/intro" />
|
|
6
|
-
|
|
7
|
-
# Hvordan ta i bruk Stepper
|
|
8
|
-
|
|
9
|
-
Stepper er det vertikale søskenet til step-indicator/stegindikator.
|
|
10
|
-
Du må nå selv styre state med `activeStep` og `onStepChange`.
|
|
11
|
-
|
|
12
|
-
## Eksempel
|
|
13
|
-
|
|
14
|
-
```jsx
|
|
15
|
-
<Stepper activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
|
|
16
|
-
<Stepper.Step href="" onClick={(e) => e.preventDefault()}>
|
|
17
|
-
Start
|
|
18
|
-
</Stepper.Step>
|
|
19
|
-
<Stepper.Step href="" onClick={(e) => e.preventDefault()}>
|
|
20
|
-
Sunt deserunt qui sit sunt culpa nisi
|
|
21
|
-
</Stepper.Step>
|
|
22
|
-
<Stepper.Step href="" onClick={(e) => e.preventDefault()}>
|
|
23
|
-
Nulla nisi pariatur nulla cupidatat elit.
|
|
24
|
-
</Stepper.Step>
|
|
25
|
-
<Stepper.Step href="" onClick={(e) => e.preventDefault()}>
|
|
26
|
-
Nulla laborum proident consequat laborum elit et dolore ut sunt.
|
|
27
|
-
</Stepper.Step>
|
|
28
|
-
</Stepper>
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
<Canvas>
|
|
32
|
-
<Example />
|
|
33
|
-
</Canvas>
|
|
34
|
-
|
|
35
|
-
## Override tags
|
|
36
|
-
|
|
37
|
-
`Stepper.Step` er implementert med Overridable-component noe som gjør at du kan endre taggen til
|
|
38
|
-
det du vil med `as`-prop. Merk at Step åakkes inn i en `<li>`-wrapper for tilgjengelighet.
|
|
39
|
-
|
|
40
|
-
```jsx
|
|
41
|
-
<Stepper activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
|
|
42
|
-
{/* <button> er default */}
|
|
43
|
-
<Stepper.Step
|
|
44
|
-
href=""
|
|
45
|
-
onClick={(e) => e.preventDefault()}
|
|
46
|
-
>{`Dette er default, et <a>-element`}</Stepper.Step>
|
|
47
|
-
<Stepper.Step as="button">{`Dette er et <button>-element`}</Stepper.Step>
|
|
48
|
-
<Stepper.Step as="span">{`Dette er et <span>-element`}</Stepper.Step>
|
|
49
|
-
</Stepper>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
<Canvas>
|
|
53
|
-
<Stepper activeStep={1} onStepChange={console.log}>
|
|
54
|
-
<Stepper.Step
|
|
55
|
-
href=""
|
|
56
|
-
onClick={(e) => e.preventDefault()}
|
|
57
|
-
>{`Dette er default, et <a>-element`}</Stepper.Step>
|
|
58
|
-
<Stepper.Step as="button">{`Dette er et <button>-element`}</Stepper.Step>
|
|
59
|
-
<Stepper.Step as="span">{`Dette er et <span>-element`}</Stepper.Step>
|
|
60
|
-
</Stepper>
|
|
61
|
-
</Canvas>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { Meta } from "@storybook/react/types-6-0";
|
|
2
|
-
import React, { useState } from "react";
|
|
3
|
-
import Stepper from "../Stepper";
|
|
4
|
-
import { BodyLong } from "../../typography";
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: "ds-react/stepper",
|
|
8
|
-
component: Stepper,
|
|
9
|
-
} as Meta;
|
|
10
|
-
|
|
11
|
-
export const All = () => {
|
|
12
|
-
const storyTexts = [
|
|
13
|
-
"Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
|
|
14
|
-
"Customer centric sorry i didn't get your email proceduralize, and first-order optimal strategies. I dont care if you got some copy, why you dont use officeipsumcom or something like that ? wheelhouse. Viral engagement new economy, this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables Bob called an all-hands this afternoon. Fire up your browser touch base innovation is hot right now so this medium needs to be more dynamic.",
|
|
15
|
-
"Touch base define the underlying principles that drive decisions and strategy for your design language. I have zero cycles for this. Cadence social currency, for low engagement execute . Deliverables rehydrate the team or let's circle back to that those options are already baked in with this model teams were able to drive adoption and awareness we need to start advertising on social media circle back. Through the lens of face time.",
|
|
16
|
-
"Take five, punch the tree, and come back in here with a clear head those options are already baked in with this model ultimate measure of success and we need to crystallize a plan yet open door policy who's responsible for the ask for this request? what do you feel you would bring to the table if you were hired for this position. Wiggle room guerrilla marketing shelfware. Code feature creep can we parallel path lose client to 10:00 meeting hire the best manage expectations root-and-branch review.",
|
|
17
|
-
"Curate downselect tread it daily cc me on that due diligence, or close the loop. All hands on deck my supervisor didn't like the latest revision you gave me can you switch back to the first revision? ping me or game-plan, yet make it a priority, on this journey win-win. Our competitors are jumping the shark we need to build it so that it scales post launch future-proof can we align on lunch orders. Deliverables message the initiative.",
|
|
18
|
-
"Out of scope poop, so pre launch. I just wanted to give you a heads-up wiggle room cc me on that I have been doing some research this morning and we need to better, nor dog and pony show prioritize these line items so UX. Big data upstream selling circle back, in an ideal world. Get all your ducks in a row land it in region so code so one-sheet. Action item we need to think big start small and scale fast to energize our clients. Cta due diligence, for this vendor is incompetent nor forcing function and circle back and low engagement.",
|
|
19
|
-
"Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
|
|
20
|
-
];
|
|
21
|
-
const [activeStep, setActiveStep] = useState(1);
|
|
22
|
-
|
|
23
|
-
const anchorProps = {
|
|
24
|
-
href: "",
|
|
25
|
-
onClick: (e) => e.preventDefault(),
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<div style={{ display: "flex", gap: "10rem" }}>
|
|
30
|
-
<div>
|
|
31
|
-
<h2 id="stepper-heading">Stepper</h2>
|
|
32
|
-
<Stepper
|
|
33
|
-
aria-labelledby="stepper-heading"
|
|
34
|
-
activeStep={activeStep}
|
|
35
|
-
onStepChange={setActiveStep}
|
|
36
|
-
>
|
|
37
|
-
<Stepper.Step {...anchorProps}>Start søknad</Stepper.Step>
|
|
38
|
-
<Stepper.Step {...anchorProps}>Personopplysninger</Stepper.Step>
|
|
39
|
-
<Stepper.Step {...anchorProps}>Saksopplysninger</Stepper.Step>
|
|
40
|
-
<Stepper.Step {...anchorProps}>
|
|
41
|
-
Søknadstekst for en veldig spesifikk prosess i NAV som jeg må skrive
|
|
42
|
-
om her i denne labelen
|
|
43
|
-
</Stepper.Step>
|
|
44
|
-
<Stepper.Step {...anchorProps}>Vedlegg</Stepper.Step>
|
|
45
|
-
<Stepper.Step {...anchorProps}>Oppsummering</Stepper.Step>
|
|
46
|
-
<Stepper.Step {...anchorProps}>Innsending</Stepper.Step>
|
|
47
|
-
</Stepper>
|
|
48
|
-
</div>
|
|
49
|
-
<BodyLong style={{ marginTop: "5rem" }}>
|
|
50
|
-
{storyTexts[activeStep]}
|
|
51
|
-
</BodyLong>
|
|
52
|
-
</div>
|
|
53
|
-
);
|
|
54
|
-
};
|