@fremtind/jokul 0.19.0 → 0.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/accordion/documentation/Example.js +1 -1
- package/build/cjs/components/button/documentation/Example.js +2 -0
- package/build/cjs/components/button/documentation/Example.js.map +1 -0
- package/build/cjs/components/button/documentation/main.js +2 -0
- package/build/cjs/components/button/documentation/main.js.map +1 -0
- package/build/cjs/components/button/documentation/vite.dev.config.js +2 -0
- package/build/cjs/components/button/documentation/vite.dev.config.js.map +1 -0
- package/build/cjs/components/link/documentation/Example.js +1 -1
- package/build/cjs/components/loader/documentation/Example.js +1 -1
- package/build/cjs/components/toggle-switch/documentation/Example.js +1 -1
- package/build/cjs/components/tooltip/documentation/Example.js +1 -1
- package/build/cjs/components/tooltip/documentation/Example.js.map +1 -1
- package/build/es/components/accordion/documentation/Example.js +1 -1
- package/build/es/components/button/documentation/Example.js +2 -0
- package/build/es/components/button/documentation/Example.js.map +1 -0
- package/build/es/components/button/documentation/main.js +2 -0
- package/build/es/components/button/documentation/main.js.map +1 -0
- package/build/es/components/button/documentation/vite.dev.config.js +2 -0
- package/build/es/components/button/documentation/vite.dev.config.js.map +1 -0
- package/build/es/components/link/documentation/Example.js +1 -1
- package/build/es/components/loader/documentation/Example.js +1 -1
- package/build/es/components/toggle-switch/documentation/Example.js +1 -1
- package/build/es/components/tooltip/documentation/Example.js +1 -1
- package/build/es/components/tooltip/documentation/Example.js.map +1 -1
- package/build/{formatCode-Cr-qlO_l.cjs → formatCode-BWsrUMWq.cjs} +2 -2
- package/build/{formatCode-Cr-qlO_l.cjs.map → formatCode-BWsrUMWq.cjs.map} +1 -1
- package/build/{formatCode-BT20TgSH.js → formatCode-DzuWIQfw.js} +2 -2
- package/build/{formatCode-BT20TgSH.js.map → formatCode-DzuWIQfw.js.map} +1 -1
- package/build/packages/jokul/src/components/button/documentation/Example.d.ts +2 -0
- package/build/packages/jokul/src/components/button/documentation/main.d.ts +1 -0
- package/build/packages/jokul/src/components/button/documentation/vite.dev.config.d.ts +2 -0
- package/build/style.css +1 -1
- package/package.json +2 -2
- package/src/components/button/styles/button.css +2 -2
- package/src/components/button/styles/button.min.css +1 -1
- package/src/components/checkbox/styles/checkbox.css +4 -4
- package/src/components/checkbox/styles/checkbox.min.css +1 -1
- package/src/components/feedback/styles/feedback.css +2 -2
- package/src/components/feedback/styles/feedback.min.css +1 -1
- package/src/components/input-group/styles/input-group.css +2 -2
- package/src/components/input-group/styles/input-group.min.css +1 -1
- package/src/components/loader/styles/loader.css +6 -6
- package/src/components/loader/styles/loader.min.css +1 -1
- package/src/components/loader/styles/skeleton-loader.css +5 -5
- package/src/components/loader/styles/skeleton-loader.min.css +1 -1
- package/src/components/message/styles/message.css +2 -2
- package/src/components/message/styles/message.min.css +1 -1
- package/src/components/progress-bar/styles/progress-bar.css +2 -2
- package/src/components/progress-bar/styles/progress-bar.min.css +1 -1
- package/src/components/radio-button/styles/radio-button.css +2 -2
- package/src/components/radio-button/styles/radio-button.min.css +1 -1
- package/src/components/system-message/styles/system-message.css +2 -2
- package/src/components/system-message/styles/system-message.min.css +1 -1
- package/src/components/toast/styles/toast.css +4 -4
- package/src/components/toast/styles/toast.min.css +1 -1
- package/src/styles/styles.css +33 -33
- package/src/styles/styles.min.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const n=require("react/jsx-runtime"),e=require("../../../../formatCode-
|
|
1
|
+
"use strict";const n=require("react/jsx-runtime"),e=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../../list/List.js"),require("../../list/ListItem.js");const o=[],r=e.formatCode('import React, { useId } from "react";\nimport { Accordion, AccordionItem } from "..";\nimport { UnorderedList, ListItem } from "../../list";\n\nexport const knobs = [];\n\nexport const AccordionExample = () => {\n /* -- EXAMPLE CODE START -- */\n const id = useId();\n return (\n <>\n <h2\n className="jkl-portal-heading-medium"\n id={id}\n style={{ textAlign: "center", marginBottom: 24, width: "100%" }}\n >\n Noen spørsmål\n </h2>\n <Accordion aria-labelledby={id}>\n <AccordionItem\n title="Hvem kan kjøpe livsforsikring?"\n onClick={(e, isOpen) => {\n isOpen\n ? console.log("Opening first accordion item")\n : console.log("Closing first accordion item");\n }}\n >\n <UnorderedList>\n <ListItem>Personer med et norsk fødselsnummer.</ListItem>\n <ListItem>\n Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.\n </ListItem>\n <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>\n </UnorderedList>\n Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må\n du ta kontakt med banken din.\n </AccordionItem>\n <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">\n Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en\n forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta\n kontakt med banken din.\n </AccordionItem>\n <AccordionItem title="Hvem kan kjøpe uførepensjon?">\n Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en\n forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med\n banken din.\n </AccordionItem>\n </Accordion>\n </>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const i=e.useInteractiveCodeControls(r,o);return n.jsx("div",{className:"jkl",children:n.jsx(e.InteractiveCode,{title:"Accordion",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:i})})};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const n=require("react/jsx-runtime"),o=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../Button.js");const e=[{type:"bool",label:"label",boolOptions:{trueValue:!0,falseValue:!1},defaultValue:!0},{type:"bool",label:"icon",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"iconPlacement",choiceOptions:[{label:"left",value:"left"},{label:"right",value:"right"}],defaultValue:0}],r=o.formatCode('import React, { useCallback, useState } from "react";\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from "../../icon";\nimport { Button } from "../Button";\n\nexport const knobs = [\n {\n type: "bool",\n label: "label",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n defaultValue: true,\n },\n {\n type: "bool",\n label: "icon",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n },\n {\n type: "choice",\n label: "iconPlacement",\n choiceOptions: [\n { label: "left", value: "left" },\n { label: "right", value: "right" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const ButtonExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [showLoader, setShowLoader] = useState(false);\n\n const simulateLoading = useCallback(() => {\n setShowLoader(true);\n setTimeout(() => {\n setShowLoader(false);\n }, 2200);\n }, []);\n\n return (\n <div className="flex flex-column gap-32 justify-between items-center">\n <Button\n variant="primary"\n loader={{\n showLoader,\n textDescription: "Laster innhold",\n }}\n onClick={simulateLoading}\n icon={boolKnob("icon") && <CheckIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Lagre og send inn" : null}\n </Button>\n <Button\n variant="secondary"\n loader={{\n showLoader,\n textDescription: "Laster innhold",\n }}\n onClick={simulateLoading}\n icon={boolKnob("icon") && <CheckIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Lagre" : null}\n </Button>\n <Button\n variant="tertiary"\n loader={{\n showLoader,\n textDescription: "Laster innhold",\n }}\n onClick={simulateLoading}\n icon={boolKnob("icon") && <CloseIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Avbryt" : null}\n </Button>\n <Button\n variant="ghost"\n icon={boolKnob("icon") && <ChevronDownIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Ola Nordmann" : null}\n </Button>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n'),i=o.formatCode('import React from "react";\nimport { Button } from "../Button";\nimport "./style.scss";\n\nexport const AnchorsExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <div className="flex flex-column gap-32 justify-between items-center">\n <Button as="a" variant="primary" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Send inn\n </Button>\n <Button variant="secondary" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Lagre\n </Button>\n <Button variant="tertiary" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Avbryt\n </Button>\n <Button variant="ghost" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Vis mer\n </Button>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const t=o.useInteractiveCodeControls(r,e),c=o.useInteractiveCodeControls(i,[]);return n.jsxs("div",{className:"jkl",children:[n.jsx(o.InteractiveCode,{title:"Button",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:t}),n.jsx(o.InteractiveCode,{title:"Button som lenke",defaultCode:i,defaultShowEditor:!0,noInline:!0,controls:c})]})};
|
|
2
|
+
//# sourceMappingURL=Example.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Example.js","sources":["../../../../../src/components/button/documentation/AnchorsExample.jsx?raw","../../../../../src/components/button/documentation/ButtonExample.jsx","../../../../../src/components/button/documentation/Example.tsx","../../../../../src/components/button/documentation/ButtonExample.jsx?raw"],"sourcesContent":["export default \"import React from \\\"react\\\";\\nimport { Button } from \\\"../Button\\\";\\nimport \\\"./style.scss\\\";\\n\\nexport const AnchorsExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n return (\\n <div className=\\\"flex flex-column gap-32 justify-between items-center\\\">\\n <Button as=\\\"a\\\" variant=\\\"primary\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Send inn\\n </Button>\\n <Button variant=\\\"secondary\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Lagre\\n </Button>\\n <Button variant=\\\"tertiary\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Avbryt\\n </Button>\\n <Button variant=\\\"ghost\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Vis mer\\n </Button>\\n </div>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\"","import React, { useCallback, useState } from \"react\";\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icon\";\nimport { Button } from \"../Button\";\n\nexport const knobs = [\n {\n type: \"bool\",\n label: \"label\",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n defaultValue: true,\n },\n {\n type: \"bool\",\n label: \"icon\",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n },\n {\n type: \"choice\",\n label: \"iconPlacement\",\n choiceOptions: [\n { label: \"left\", value: \"left\" },\n { label: \"right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const ButtonExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [showLoader, setShowLoader] = useState(false);\n\n const simulateLoading = useCallback(() => {\n setShowLoader(true);\n setTimeout(() => {\n setShowLoader(false);\n }, 2200);\n }, []);\n\n return (\n <div className=\"flex flex-column gap-32 justify-between items-center\">\n <Button\n variant=\"primary\"\n loader={{\n showLoader,\n textDescription: \"Laster innhold\",\n }}\n onClick={simulateLoading}\n icon={boolKnob(\"icon\") && <CheckIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Lagre og send inn\" : null}\n </Button>\n <Button\n variant=\"secondary\"\n loader={{\n showLoader,\n textDescription: \"Laster innhold\",\n }}\n onClick={simulateLoading}\n icon={boolKnob(\"icon\") && <CheckIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Lagre\" : null}\n </Button>\n <Button\n variant=\"tertiary\"\n loader={{\n showLoader,\n textDescription: \"Laster innhold\",\n }}\n onClick={simulateLoading}\n icon={boolKnob(\"icon\") && <CloseIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Avbryt\" : null}\n </Button>\n <Button\n variant=\"ghost\"\n icon={boolKnob(\"icon\") && <ChevronDownIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Ola Nordmann\" : null}\n </Button>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\nimport AnchorsExample from \"./AnchorsExample?raw\";\n// @ts-ignore\nimport { knobs } from \"./ButtonExample\";\nimport ButtonExample from \"./ButtonExample?raw\";\n\nimport \"../styles/_index.scss\";\n\nconst code = formatCode(ButtonExample);\nconst anchorsCode = formatCode(AnchorsExample);\n\nexport default function Example() {\n const controls = useInteractiveCodeControls(code, knobs);\n const anchorsControls = useInteractiveCodeControls(anchorsCode, []);\n return (\n <div className={\"jkl\"}>\n <InteractiveCode\n title={\"Button\"}\n defaultCode={code}\n defaultShowEditor={true}\n noInline={true}\n controls={controls}\n />\n <InteractiveCode\n title={\"Button som lenke\"}\n defaultCode={anchorsCode}\n defaultShowEditor={true}\n noInline={true}\n controls={anchorsControls}\n />\n </div>\n );\n}\n","export default \"import React, { useCallback, useState } from \\\"react\\\";\\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \\\"../../icon\\\";\\nimport { Button } from \\\"../Button\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"bool\\\",\\n label: \\\"label\\\",\\n boolOptions: {\\n trueValue: true,\\n falseValue: false,\\n },\\n defaultValue: true,\\n },\\n {\\n type: \\\"bool\\\",\\n label: \\\"icon\\\",\\n boolOptions: {\\n trueValue: true,\\n falseValue: false,\\n },\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"iconPlacement\\\",\\n choiceOptions: [\\n { label: \\\"left\\\", value: \\\"left\\\" },\\n { label: \\\"right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const ButtonExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n const [showLoader, setShowLoader] = useState(false);\\n\\n const simulateLoading = useCallback(() => {\\n setShowLoader(true);\\n setTimeout(() => {\\n setShowLoader(false);\\n }, 2200);\\n }, []);\\n\\n return (\\n <div className=\\\"flex flex-column gap-32 justify-between items-center\\\">\\n <Button\\n variant=\\\"primary\\\"\\n loader={{\\n showLoader,\\n textDescription: \\\"Laster innhold\\\",\\n }}\\n onClick={simulateLoading}\\n icon={boolKnob(\\\"icon\\\") && <CheckIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Lagre og send inn\\\" : null}\\n </Button>\\n <Button\\n variant=\\\"secondary\\\"\\n loader={{\\n showLoader,\\n textDescription: \\\"Laster innhold\\\",\\n }}\\n onClick={simulateLoading}\\n icon={boolKnob(\\\"icon\\\") && <CheckIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Lagre\\\" : null}\\n </Button>\\n <Button\\n variant=\\\"tertiary\\\"\\n loader={{\\n showLoader,\\n textDescription: \\\"Laster innhold\\\",\\n }}\\n onClick={simulateLoading}\\n icon={boolKnob(\\\"icon\\\") && <CloseIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Avbryt\\\" : null}\\n </Button>\\n <Button\\n variant=\\\"ghost\\\"\\n icon={boolKnob(\\\"icon\\\") && <ChevronDownIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Ola Nordmann\\\" : null}\\n </Button>\\n </div>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","boolOptions","trueValue","falseValue","defaultValue","choiceOptions","value","code","formatCode","anchorsCode","controls","useInteractiveCodeControls","anchorsControls","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline"],"mappings":"iqDAAA,MCIaA,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,QACPC,YAAa,CACTC,WAAW,EACXC,YAAY,GAEhBC,cAAc,GAElB,CACIL,KAAM,OACNC,MAAO,OACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,gBACPK,cAAe,CACX,CAAEL,MAAO,OAAQM,MAAO,QACxB,CAAEN,MAAO,QAASM,MAAO,UAE7BF,aAAc,ICpBhBG,EAAOC,EAAAA,WCTE,0zFDUTC,EAAcD,EAAAA,WFVL,g9BEYf,WACU,MAAAE,EAAWC,EAAAA,2BAA2BJ,EAAMT,GAC5Cc,EAAkBD,EAAAA,2BAA2BF,EAAa,IAE5D,OAAAI,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,SACPC,YAAaZ,EACba,mBAAmB,EACnBC,UAAU,EACVX,SAAAA,IAEJM,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,mBACPC,YAAaV,EACbW,mBAAmB,EACnBC,UAAU,EACVX,SAAUE,MAI1B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),r=require("react-dom/client");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../Button.js"),require("../../card/Card.js"),require("../../card/CardImage.js"),require("../../card/NavCard.js"),require("../../checkbox/Checkbox.js"),require("../../combobox/Combobox.js"),require("../../cookie-consent/CookieConsentContext.js"),require("react-dom"),require("../../modal/Modal.js"),require("react-a11y-dialog"),require("../../list/List.js"),require("../../list/ListItem.js"),require("../../datepicker/DatePicker.js"),require("../../feedback/feedbackContext.js"),require("../../message/Message.js"),require("../../message/FormErrorMessage.js"),require("../../tooltip/Tooltip.js"),require("../../tooltip/TooltipContent.js"),require("../../tooltip/TooltipTrigger.js"),require("../../input-group/InputGroup.js"),require("../../feedback/followup/followupContext.js"),require("../../feedback/main-question/mainQuestionContext.js"),require("../../radio-button/RadioButton.js"),require("../../radio-button/radioGroupContext.js"),require("../../radio-button/BaseRadioButton.js"),require("../../text-input/BaseTextArea.js"),require("../../text-input/BaseTextInput.js"),require("../../text-input/TextArea.js"),require("../../text-input/TextInput.js"),require("../../../utilities/polymorphism/SlotComponent.js");const i=require("../../../utilities/tabListener.js");require("../../../../ExpandableTableRow-Bkqt-qP5.cjs"),require("../../icon-button/IconButton.js"),require("../../link/Link.js"),require("../../link/NavLink.js"),require("../../link-list/LinkList.js"),require("../../logo/text-paths/ForsikringLevertAvFremtind.js"),require("../../logo/text-paths/FraSB1ogDNB.js"),require("../../logo/text-paths/InnovasjonFraFremtind.js"),require("../../logo/text-paths/TeknologiFraFremtind.js"),require("../../logo/text-paths/VartEgetForsikringsselskap.js"),require("../../logo/text-paths/VartForsikringsselskap.js"),require("../../menu/MenuItem.js"),require("../../menu/MenuItemCheckbox.js"),require("../../popover/Popover.js"),require("../../system-message/SystemMessage.js"),require("../../table/DataTable.js"),require("../../table/Table.js"),require("../../table/TableBody.js"),require("../../table/TableCaption.js"),require("../../table/TableCell.js"),require("../../table/TableColumn.js"),require("../../table/TableColumnGroup.js"),require("../../table/tableContext.js"),require("../../table/tableSectionContext.js"),require("../../table/TableFooter.js"),require("../../table/TableHead.js"),require("../../table/TableHeader.js"),require("../../table/TableRow.js"),require("../../tabs/NavTab.js"),require("../../tabs/tabsContext.js"),require("../../tabs/Tab.js"),require("../../tag/Tag.js"),require("../../toast/toastContext.js"),require("../../toggle-switch/ToggleSwitch.js");const o=require("./Example.js");i.initTabListener(),r.createRoot(document.getElementById("root")).render(e.jsx(o,{}));
|
|
2
|
+
//# sourceMappingURL=main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../../../../../src/components/button/documentation/main.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { initTabListener } from \"../../..\";\nimport Example from \"./Example\";\n\ninitTabListener();\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(<Example />);\n"],"names":["initTabListener","ReactDOM","createRoot","document","getElementById","render","jsx","Example"],"mappings":"m3IAKAA,EAAAA,kBAEAC,EAASC,WAAWC,SAASC,eAAe,SAAUC,OAAQC,EAAAA,IAAAC,EAAA,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("node:path"),i=require("@vitejs/plugin-react-swc"),r=require("vite"),s=require("../../../../copy-jkl-fonts-BEH11kbT.cjs"),o=r.defineConfig({plugins:[i(),s.copyJklFonts(e.resolve(__dirname,"public","fonts"))]});module.exports=o;
|
|
2
|
+
//# sourceMappingURL=vite.dev.config.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vite.dev.config.js","sources":["../../../../../src/components/button/documentation/vite.dev.config.ts"],"sourcesContent":["import { resolve } from \"path\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport { copyJklFonts } from \"../../../../../../utils/vite\";\n\nexport default defineConfig({\n plugins: [react(), copyJklFonts(resolve(__dirname, \"public\", \"fonts\"))],\n});\n"],"names":["vite_dev_config","defineConfig","plugins","react","copyJklFonts","resolve","__dirname"],"mappings":"uJAKAA,EAAeC,eAAa,CACxBC,QAAS,CAACC,IAASC,EAAAA,aAAaC,UAAQC,UAAW,SAAU"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../Link.js"),require("../NavLink.js");const r=[],t=n.formatCode('import React, { FC } from "react";\nimport { Link } from "..";\n\nexport const knobs = [];\n\nexport const LinkExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <div>\n <Link href="#">Lenke</Link>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const o=n.useInteractiveCodeControls(t,r);return e.jsx("div",{className:"jkl",children:e.jsx(n.InteractiveCode,{title:"Link",defaultCode:t,defaultShowEditor:!0,noInline:!0,controls:o})})};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react");const t=[{type:"choice",label:"Variant",choiceOptions:[{label:"Large",value:"large"},{label:"Medium",value:"medium"},{label:"Small",value:"small"}],defaultValue:0}],o=[],l=n.formatCode('import React, { FC } from "react";\nimport { Loader } from "..";\nimport "./styles.scss";\n\nexport const knobs = [\n {\n type: "choice",\n label: "Variant",\n choiceOptions: [\n { label: "Large", value: "large" },\n { label: "Medium", value: "medium" },\n { label: "Small", value: "small" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const LoaderExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <div className="jkl-loader-example">\n <div>\n <Loader variant={choiceKnob("Variant")} textDescription="Laster innhold" />\n </div>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n'),a=n.formatCode('import React, { FC } from "react";\nimport {\n SkeletonAnimation,\n SkeletonButton,\n SkeletonCheckboxGroup,\n SkeletonElement,\n SkeletonInput,\n SkeletonRadioButtonGroup,\n SkeletonTable,\n SkeletonTableHeader,\n SkeletonTableRow,\n SkeletonTextArea,\n} from "..";\n\nexport const knobs = [];\n\nexport const SkeletonLoaderExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <SkeletonAnimation role="none presentation">\n <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>\n <SkeletonElement width={350} height={32} />\n <SkeletonInput />\n <SkeletonTextArea />\n <SkeletonCheckboxGroup checkboxes={3} />\n <SkeletonRadioButtonGroup radioButtons={3} />\n <SkeletonButton width={225} />\n <SkeletonTable>\n <SkeletonTableHeader>\n <div style={{ width: 215 }}>\n <SkeletonElement width={115} height={16} />\n </div>\n <div style={{ width: 115 }}>\n <SkeletonElement width={115} height={16} />\n </div>\n </SkeletonTableHeader>\n {Array.from(Array(5)).map((_, index) => (\n <SkeletonTableRow key={index}>\n <div style={{ width: 215 }}>\n <SkeletonElement width={index % 2 ? 115 : 185} height={19} />\n </div>\n <div style={{ width: 115 }}>\n <SkeletonElement width={24} height={24} shape="circle" />\n </div>\n </SkeletonTableRow>\n ))}\n </SkeletonTable>\n </div>\n </SkeletonAnimation>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const i=n.useInteractiveCodeControls(l,t),r=n.useInteractiveCodeControls(a,o);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Loader",defaultCode:l,defaultShowEditor:!0,noInline:!0,controls:i}),e.jsx(n.InteractiveCode,{title:"SkeletonLoader",defaultCode:a,defaultShowEditor:!0,noInline:!0,controls:r})]})};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),o=require("../../../../formatCode-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),o=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../ToggleSwitch.js"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../button/Button.js");const t=[{type:"bool",label:"Deaktivert",boolOptions:{trueValue:!0,falseValue:!1}}],n=o.formatCode('import React from "react";\nimport { ToggleSwitch } from "..";\nimport { PrimaryButton } from "../../button";\n\nexport const knobs = [\n {\n type: "bool",\n label: "Deaktivert",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n },\n];\n\nexport const ToggleSwitchExample = () => {\n /* -- EXAMPLE CODE START -- */\n const isDisabled = boolKnob("Deaktivert");\n\n const handleToggle = (event, pressed) => console.log("Mørk modus satt til: ", pressed, event);\n\n return (\n <ToggleSwitch disabled={isDisabled} onChange={handleToggle}>\n Mørk modus\n </ToggleSwitch>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const r=o.useInteractiveCodeControls(n,t);return e.jsx("div",{className:"jkl",children:e.jsx(o.InteractiveCode,{title:"Loader",defaultCode:n,defaultShowEditor:!0,noInline:!0,controls:r})})};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../Tooltip.js"),require("../TooltipContent.js"),require("../TooltipTrigger.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js");const o=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{label:"0",value:"0"},{label:"150",value:"150"},{label:"250",value:"250"},{label:"500",value:"500"},{label:"1000",value:"1000"}],defaultValue:0}],i=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{label:"0",value:"0"},{label:"150",value:"150"},{label:"250",value:"250"},{label:"500",value:"500"},{label:"1000",value:"1000"}],defaultValue:0}],l=n.formatCode('import React, { useState } from "react";\nimport { Tooltip, TooltipContent, TooltipTrigger } from "..";\nimport { formatKontonummer } from "../../../utilities/formatters";\n\nexport const knobs = [\n {\n type: "choice",\n label: "Plassering",\n choiceOptions: [\n { label: "Top", value: "top" },\n { label: "Top start", value: "top-start" },\n { label: "Top end", value: "top-end" },\n { label: "Left", value: "left" },\n { label: "Right", value: "right" },\n ],\n defaultValue: 0,\n },\n {\n type: "choice",\n label: "Forsinkelse (ms)",\n choiceOptions: [\n { label: "0", value: "0" },\n { label: "150", value: "150" },\n { label: "250", value: "250" },\n { label: "500", value: "500" },\n { label: "1000", value: "1000" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const TooltipExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [copied, setCopied] = useState(false);\n const kontonummer = "16024454979";\n\n function copyToClipboard() {\n navigator.clipboard.writeText(kontonummer);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n\n return (\n <p>\n Kontonummer:{" "}\n <Tooltip placement={choiceKnob("Plassering")} delay={choiceKnob("Forsinkelse (ms)")}>\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n <TooltipContent>\n {copied ? <span aria-live="assertive">Kopiert</span> : "Klikk for å kopiere til utklippstavlen"}\n </TooltipContent>\n </Tooltip>\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n'),r=n.formatCode('import React from "react";\nimport { PopupTip } from "..";\nimport { formatValuta } from "../../../utilities/formatters";\n\nexport const knobs = [\n {\n type: "choice",\n label: "Plassering",\n choiceOptions: [\n { label: "Top", value: "top" },\n { label: "Top start", value: "top-start" },\n { label: "Top end", value: "top-end" },\n { label: "Left", value: "left" },\n { label: "Right", value: "right" },\n ],\n defaultValue: 0,\n },\n {\n type: "choice",\n label: "Forsinkelse (ms)",\n choiceOptions: [\n { label: "0", value: "0" },\n { label: "150", value: "150" },\n { label: "250", value: "250" },\n { label: "500", value: "500" },\n { label: "1000", value: "1000" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const PopupTipExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <p>\n Du betaler 348 kr/mnd{" "}\n <PopupTip\n placement={choiceKnob("Plassering")}\n delay={choiceKnob("Forsinkelse (ms)")}\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n triggerProps={{\n onClick: () => console.log("PopupTip clicked"),\n }}\n />\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const t=n.useInteractiveCodeControls(l,i),a=n.useInteractiveCodeControls(r,o);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Tooltip",defaultCode:l,defaultShowEditor:!0,noInline:!0,controls:t}),e.jsx(n.InteractiveCode,{title:"PopupTip",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:a})]})};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Example.js","sources":["../../../../../src/components/tooltip/documentation/PopupTipExample.jsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx","../../../../../src/components/tooltip/documentation/Example.tsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx?raw","../../../../../src/components/tooltip/documentation/PopupTipExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { PopupTip } from \"..\";\nimport { formatValuta } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { laber: \"0\", value: \"0\" },\n { laber: \"150\", value: \"150\" },\n { laber: \"250\", value: \"250\" },\n { laber: \"500\", value: \"500\" },\n { laber: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const PopupTipExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <p>\n Du betaler 348 kr/mnd{\" \"}\n <PopupTip\n placement={choiceKnob(\"Plassering\")}\n delay={choiceKnob(\"Forsinkelse (ms)\")}\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n triggerProps={{\n onClick: () => console.log(\"PopupTip clicked\"),\n }}\n />\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"..\";\nimport { formatKontonummer } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { laber: \"0\", value: \"0\" },\n { laber: \"150\", value: \"150\" },\n { laber: \"250\", value: \"250\" },\n { laber: \"500\", value: \"500\" },\n { laber: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const TooltipExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [copied, setCopied] = useState(false);\n const kontonummer = \"16024454979\";\n\n function copyToClipboard() {\n navigator.clipboard.writeText(kontonummer);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n\n return (\n <p>\n Kontonummer:{\" \"}\n <Tooltip placement={choiceKnob(\"Plassering\")} delay={choiceKnob(\"Forsinkelse (ms)\")}>\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n <TooltipContent>\n {copied ? <span aria-live=\"assertive\">Kopiert</span> : \"Klikk for å kopiere til utklippstavlen\"}\n </TooltipContent>\n </Tooltip>\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as popupTipKnobs } from \"./PopupTipExample\";\n// @ts-ignore\nimport PopupTipExample from \"./PopupTipExample?raw\";\n// @ts-ignore\nimport { knobs as tooltipKnobs } from \"./TooltipExample\";\n// @ts-ignore\nimport TooltipExample from \"./TooltipExample?raw\";\n\nimport \"../styles/tooltip.scss\";\n\nconst tooltipCode = formatCode(TooltipExample);\nconst popupTipCode = formatCode(PopupTipExample);\n\nexport default function Example() {\n const tooltipControls = useInteractiveCodeControls(tooltipCode, tooltipKnobs);\n const popupTipControls = useInteractiveCodeControls(popupTipCode, popupTipKnobs);\n\n return (\n <div className={\"jkl\"}>\n <InteractiveCode\n title={\"Tooltip\"}\n defaultCode={tooltipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={tooltipControls}\n />\n <InteractiveCode\n title={\"PopupTip\"}\n defaultCode={popupTipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={popupTipControls}\n />\n </div>\n );\n}\n","export default \"import React, { useState } from \\\"react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"..\\\";\\nimport { formatKontonummer } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { laber: \\\"0\\\", value: \\\"0\\\" },\\n { laber: \\\"150\\\", value: \\\"150\\\" },\\n { laber: \\\"250\\\", value: \\\"250\\\" },\\n { laber: \\\"500\\\", value: \\\"500\\\" },\\n { laber: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const TooltipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n const [copied, setCopied] = useState(false);\\n const kontonummer = \\\"16024454979\\\";\\n\\n function copyToClipboard() {\\n navigator.clipboard.writeText(kontonummer);\\n setCopied(true);\\n setTimeout(() => setCopied(false), 2000);\\n }\\n\\n return (\\n <p>\\n Kontonummer:{\\\" \\\"}\\n <Tooltip placement={choiceKnob(\\\"Plassering\\\")} delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}>\\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\\n <TooltipContent>\\n {copied ? <span aria-live=\\\"assertive\\\">Kopiert</span> : \\\"Klikk for å kopiere til utklippstavlen\\\"}\\n </TooltipContent>\\n </Tooltip>\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { PopupTip } from \\\"..\\\";\\nimport { formatValuta } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { laber: \\\"0\\\", value: \\\"0\\\" },\\n { laber: \\\"150\\\", value: \\\"150\\\" },\\n { laber: \\\"250\\\", value: \\\"250\\\" },\\n { laber: \\\"500\\\", value: \\\"500\\\" },\\n { laber: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const PopupTipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n return (\\n <p>\\n Du betaler 348 kr/mnd{\\\" \\\"}\\n <PopupTip\\n placement={choiceKnob(\\\"Plassering\\\")}\\n delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}\\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\\n triggerProps={{\\n onClick: () => console.log(\\\"PopupTip clicked\\\"),\\n }}\\n />\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","choiceOptions","value","defaultValue","laber","tooltipCode","formatCode","popupTipCode","tooltipControls","useInteractiveCodeControls","tooltipKnobs","popupTipControls","popupTipKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"kuDAIO,MAAMA,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAEG,MAAO,IAAKF,MAAO,KACrB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,OAAQF,MAAO,SAE5BC,aAAc,ICvBTL,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAEG,MAAO,IAAKF,MAAO,KACrB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,OAAQF,MAAO,SAE5BC,aAAc,ICdhBE,EAAcC,EAAAA,WCbL,0yDDcTC,EAAeD,EAAAA,WEdN,6+CFgBf,WACU,MAAAE,EAAkBC,EAAAA,2BAA2BJ,EAAaK,GAC1DC,EAAmBF,EAAAA,2BAA2BF,EAAcK,GAG9D,OAAAC,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,UACPC,YAAad,EACbe,mBAAmB,EACnBC,UAAU,EACVC,SAAUd,IAEdQ,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,WACPC,YAAaZ,EACba,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAI1B"}
|
|
1
|
+
{"version":3,"file":"Example.js","sources":["../../../../../src/components/tooltip/documentation/PopupTipExample.jsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx","../../../../../src/components/tooltip/documentation/Example.tsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx?raw","../../../../../src/components/tooltip/documentation/PopupTipExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { PopupTip } from \"..\";\nimport { formatValuta } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { label: \"0\", value: \"0\" },\n { label: \"150\", value: \"150\" },\n { label: \"250\", value: \"250\" },\n { label: \"500\", value: \"500\" },\n { label: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const PopupTipExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <p>\n Du betaler 348 kr/mnd{\" \"}\n <PopupTip\n placement={choiceKnob(\"Plassering\")}\n delay={choiceKnob(\"Forsinkelse (ms)\")}\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n triggerProps={{\n onClick: () => console.log(\"PopupTip clicked\"),\n }}\n />\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"..\";\nimport { formatKontonummer } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { label: \"0\", value: \"0\" },\n { label: \"150\", value: \"150\" },\n { label: \"250\", value: \"250\" },\n { label: \"500\", value: \"500\" },\n { label: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const TooltipExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [copied, setCopied] = useState(false);\n const kontonummer = \"16024454979\";\n\n function copyToClipboard() {\n navigator.clipboard.writeText(kontonummer);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n\n return (\n <p>\n Kontonummer:{\" \"}\n <Tooltip placement={choiceKnob(\"Plassering\")} delay={choiceKnob(\"Forsinkelse (ms)\")}>\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n <TooltipContent>\n {copied ? <span aria-live=\"assertive\">Kopiert</span> : \"Klikk for å kopiere til utklippstavlen\"}\n </TooltipContent>\n </Tooltip>\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as popupTipKnobs } from \"./PopupTipExample\";\n// @ts-ignore\nimport PopupTipExample from \"./PopupTipExample?raw\";\n// @ts-ignore\nimport { knobs as tooltipKnobs } from \"./TooltipExample\";\n// @ts-ignore\nimport TooltipExample from \"./TooltipExample?raw\";\n\nimport \"../styles/tooltip.scss\";\n\nconst tooltipCode = formatCode(TooltipExample);\nconst popupTipCode = formatCode(PopupTipExample);\n\nexport default function Example() {\n const tooltipControls = useInteractiveCodeControls(tooltipCode, tooltipKnobs);\n const popupTipControls = useInteractiveCodeControls(popupTipCode, popupTipKnobs);\n\n return (\n <div className={\"jkl\"}>\n <InteractiveCode\n title={\"Tooltip\"}\n defaultCode={tooltipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={tooltipControls}\n />\n <InteractiveCode\n title={\"PopupTip\"}\n defaultCode={popupTipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={popupTipControls}\n />\n </div>\n );\n}\n","export default \"import React, { useState } from \\\"react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"..\\\";\\nimport { formatKontonummer } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { label: \\\"0\\\", value: \\\"0\\\" },\\n { label: \\\"150\\\", value: \\\"150\\\" },\\n { label: \\\"250\\\", value: \\\"250\\\" },\\n { label: \\\"500\\\", value: \\\"500\\\" },\\n { label: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const TooltipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n const [copied, setCopied] = useState(false);\\n const kontonummer = \\\"16024454979\\\";\\n\\n function copyToClipboard() {\\n navigator.clipboard.writeText(kontonummer);\\n setCopied(true);\\n setTimeout(() => setCopied(false), 2000);\\n }\\n\\n return (\\n <p>\\n Kontonummer:{\\\" \\\"}\\n <Tooltip placement={choiceKnob(\\\"Plassering\\\")} delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}>\\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\\n <TooltipContent>\\n {copied ? <span aria-live=\\\"assertive\\\">Kopiert</span> : \\\"Klikk for å kopiere til utklippstavlen\\\"}\\n </TooltipContent>\\n </Tooltip>\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { PopupTip } from \\\"..\\\";\\nimport { formatValuta } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { label: \\\"0\\\", value: \\\"0\\\" },\\n { label: \\\"150\\\", value: \\\"150\\\" },\\n { label: \\\"250\\\", value: \\\"250\\\" },\\n { label: \\\"500\\\", value: \\\"500\\\" },\\n { label: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const PopupTipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n return (\\n <p>\\n Du betaler 348 kr/mnd{\\\" \\\"}\\n <PopupTip\\n placement={choiceKnob(\\\"Plassering\\\")}\\n delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}\\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\\n triggerProps={{\\n onClick: () => console.log(\\\"PopupTip clicked\\\"),\\n }}\\n />\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","choiceOptions","value","defaultValue","tooltipCode","formatCode","popupTipCode","tooltipControls","useInteractiveCodeControls","tooltipKnobs","popupTipControls","popupTipKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"kuDAIO,MAAMA,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAED,MAAO,IAAKE,MAAO,KACrB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,OAAQE,MAAO,SAE5BC,aAAc,ICvBTL,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAED,MAAO,IAAKE,MAAO,KACrB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,OAAQE,MAAO,SAE5BC,aAAc,ICdhBC,EAAcC,EAAAA,WCbL,0yDDcTC,EAAeD,EAAAA,WEdN,6+CFgBf,WACU,MAAAE,EAAkBC,EAAAA,2BAA2BJ,EAAaK,GAC1DC,EAAmBF,EAAAA,2BAA2BF,EAAcK,GAG9D,OAAAC,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,UACPC,YAAad,EACbe,mBAAmB,EACnBC,UAAU,EACVC,SAAUd,IAEdQ,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,WACPC,YAAaZ,EACba,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAI1B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n}from"react/jsx-runtime";import{f as o,u as i,I as s}from"../../../../formatCode-
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{f as o,u as i,I as s}from"../../../../formatCode-DzuWIQfw.js";import"react";import"../../../hooks/useScreen/useScreen.js";import"../../../hooks/useId/useId.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";import"../../list/List.js";import"../../list/ListItem.js";const e=[],r=o('import React, { useId } from "react";\nimport { Accordion, AccordionItem } from "..";\nimport { UnorderedList, ListItem } from "../../list";\n\nexport const knobs = [];\n\nexport const AccordionExample = () => {\n /* -- EXAMPLE CODE START -- */\n const id = useId();\n return (\n <>\n <h2\n className="jkl-portal-heading-medium"\n id={id}\n style={{ textAlign: "center", marginBottom: 24, width: "100%" }}\n >\n Noen spørsmål\n </h2>\n <Accordion aria-labelledby={id}>\n <AccordionItem\n title="Hvem kan kjøpe livsforsikring?"\n onClick={(e, isOpen) => {\n isOpen\n ? console.log("Opening first accordion item")\n : console.log("Closing first accordion item");\n }}\n >\n <UnorderedList>\n <ListItem>Personer med et norsk fødselsnummer.</ListItem>\n <ListItem>\n Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.\n </ListItem>\n <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>\n </UnorderedList>\n Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må\n du ta kontakt med banken din.\n </AccordionItem>\n <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">\n Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en\n forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta\n kontakt med banken din.\n </AccordionItem>\n <AccordionItem title="Hvem kan kjøpe uførepensjon?">\n Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en\n forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med\n banken din.\n </AccordionItem>\n </Accordion>\n </>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');function t(){const o=i(r,e);return n("div",{className:"jkl",children:n(s,{title:"Accordion",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:o})})}export{t as default};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsxs as n,jsx as o}from"react/jsx-runtime";import{f as t,u as e,I as i}from"../../../../formatCode-DzuWIQfw.js";import"react";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";import"../Button.js";const c=[{type:"bool",label:"label",boolOptions:{trueValue:!0,falseValue:!1},defaultValue:!0},{type:"bool",label:"icon",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"iconPlacement",choiceOptions:[{label:"left",value:"left"},{label:"right",value:"right"}],defaultValue:0}],r=t('import React, { useCallback, useState } from "react";\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from "../../icon";\nimport { Button } from "../Button";\n\nexport const knobs = [\n {\n type: "bool",\n label: "label",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n defaultValue: true,\n },\n {\n type: "bool",\n label: "icon",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n },\n {\n type: "choice",\n label: "iconPlacement",\n choiceOptions: [\n { label: "left", value: "left" },\n { label: "right", value: "right" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const ButtonExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [showLoader, setShowLoader] = useState(false);\n\n const simulateLoading = useCallback(() => {\n setShowLoader(true);\n setTimeout(() => {\n setShowLoader(false);\n }, 2200);\n }, []);\n\n return (\n <div className="flex flex-column gap-32 justify-between items-center">\n <Button\n variant="primary"\n loader={{\n showLoader,\n textDescription: "Laster innhold",\n }}\n onClick={simulateLoading}\n icon={boolKnob("icon") && <CheckIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Lagre og send inn" : null}\n </Button>\n <Button\n variant="secondary"\n loader={{\n showLoader,\n textDescription: "Laster innhold",\n }}\n onClick={simulateLoading}\n icon={boolKnob("icon") && <CheckIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Lagre" : null}\n </Button>\n <Button\n variant="tertiary"\n loader={{\n showLoader,\n textDescription: "Laster innhold",\n }}\n onClick={simulateLoading}\n icon={boolKnob("icon") && <CloseIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Avbryt" : null}\n </Button>\n <Button\n variant="ghost"\n icon={boolKnob("icon") && <ChevronDownIcon />}\n iconPosition={choiceKnob("iconPlacement")}\n >\n {boolKnob("label") ? "Ola Nordmann" : null}\n </Button>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n'),s=t('import React from "react";\nimport { Button } from "../Button";\nimport "./style.scss";\n\nexport const AnchorsExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <div className="flex flex-column gap-32 justify-between items-center">\n <Button as="a" variant="primary" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Send inn\n </Button>\n <Button variant="secondary" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Lagre\n </Button>\n <Button variant="tertiary" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Avbryt\n </Button>\n <Button variant="ghost" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n Vis mer\n </Button>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');function a(){const t=e(r,c),a=e(s,[]);return n("div",{className:"jkl",children:[o(i,{title:"Button",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:t}),o(i,{title:"Button som lenke",defaultCode:s,defaultShowEditor:!0,noInline:!0,controls:a})]})}export{a as default};
|
|
2
|
+
//# sourceMappingURL=Example.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Example.js","sources":["../../../../../src/components/button/documentation/AnchorsExample.jsx?raw","../../../../../src/components/button/documentation/ButtonExample.jsx","../../../../../src/components/button/documentation/Example.tsx","../../../../../src/components/button/documentation/ButtonExample.jsx?raw"],"sourcesContent":["export default \"import React from \\\"react\\\";\\nimport { Button } from \\\"../Button\\\";\\nimport \\\"./style.scss\\\";\\n\\nexport const AnchorsExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n return (\\n <div className=\\\"flex flex-column gap-32 justify-between items-center\\\">\\n <Button as=\\\"a\\\" variant=\\\"primary\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Send inn\\n </Button>\\n <Button variant=\\\"secondary\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Lagre\\n </Button>\\n <Button variant=\\\"tertiary\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Avbryt\\n </Button>\\n <Button variant=\\\"ghost\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n Vis mer\\n </Button>\\n </div>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\"","import React, { useCallback, useState } from \"react\";\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icon\";\nimport { Button } from \"../Button\";\n\nexport const knobs = [\n {\n type: \"bool\",\n label: \"label\",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n defaultValue: true,\n },\n {\n type: \"bool\",\n label: \"icon\",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n },\n {\n type: \"choice\",\n label: \"iconPlacement\",\n choiceOptions: [\n { label: \"left\", value: \"left\" },\n { label: \"right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const ButtonExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [showLoader, setShowLoader] = useState(false);\n\n const simulateLoading = useCallback(() => {\n setShowLoader(true);\n setTimeout(() => {\n setShowLoader(false);\n }, 2200);\n }, []);\n\n return (\n <div className=\"flex flex-column gap-32 justify-between items-center\">\n <Button\n variant=\"primary\"\n loader={{\n showLoader,\n textDescription: \"Laster innhold\",\n }}\n onClick={simulateLoading}\n icon={boolKnob(\"icon\") && <CheckIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Lagre og send inn\" : null}\n </Button>\n <Button\n variant=\"secondary\"\n loader={{\n showLoader,\n textDescription: \"Laster innhold\",\n }}\n onClick={simulateLoading}\n icon={boolKnob(\"icon\") && <CheckIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Lagre\" : null}\n </Button>\n <Button\n variant=\"tertiary\"\n loader={{\n showLoader,\n textDescription: \"Laster innhold\",\n }}\n onClick={simulateLoading}\n icon={boolKnob(\"icon\") && <CloseIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Avbryt\" : null}\n </Button>\n <Button\n variant=\"ghost\"\n icon={boolKnob(\"icon\") && <ChevronDownIcon />}\n iconPosition={choiceKnob(\"iconPlacement\")}\n >\n {boolKnob(\"label\") ? \"Ola Nordmann\" : null}\n </Button>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\nimport AnchorsExample from \"./AnchorsExample?raw\";\n// @ts-ignore\nimport { knobs } from \"./ButtonExample\";\nimport ButtonExample from \"./ButtonExample?raw\";\n\nimport \"../styles/_index.scss\";\n\nconst code = formatCode(ButtonExample);\nconst anchorsCode = formatCode(AnchorsExample);\n\nexport default function Example() {\n const controls = useInteractiveCodeControls(code, knobs);\n const anchorsControls = useInteractiveCodeControls(anchorsCode, []);\n return (\n <div className={\"jkl\"}>\n <InteractiveCode\n title={\"Button\"}\n defaultCode={code}\n defaultShowEditor={true}\n noInline={true}\n controls={controls}\n />\n <InteractiveCode\n title={\"Button som lenke\"}\n defaultCode={anchorsCode}\n defaultShowEditor={true}\n noInline={true}\n controls={anchorsControls}\n />\n </div>\n );\n}\n","export default \"import React, { useCallback, useState } from \\\"react\\\";\\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \\\"../../icon\\\";\\nimport { Button } from \\\"../Button\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"bool\\\",\\n label: \\\"label\\\",\\n boolOptions: {\\n trueValue: true,\\n falseValue: false,\\n },\\n defaultValue: true,\\n },\\n {\\n type: \\\"bool\\\",\\n label: \\\"icon\\\",\\n boolOptions: {\\n trueValue: true,\\n falseValue: false,\\n },\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"iconPlacement\\\",\\n choiceOptions: [\\n { label: \\\"left\\\", value: \\\"left\\\" },\\n { label: \\\"right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const ButtonExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n const [showLoader, setShowLoader] = useState(false);\\n\\n const simulateLoading = useCallback(() => {\\n setShowLoader(true);\\n setTimeout(() => {\\n setShowLoader(false);\\n }, 2200);\\n }, []);\\n\\n return (\\n <div className=\\\"flex flex-column gap-32 justify-between items-center\\\">\\n <Button\\n variant=\\\"primary\\\"\\n loader={{\\n showLoader,\\n textDescription: \\\"Laster innhold\\\",\\n }}\\n onClick={simulateLoading}\\n icon={boolKnob(\\\"icon\\\") && <CheckIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Lagre og send inn\\\" : null}\\n </Button>\\n <Button\\n variant=\\\"secondary\\\"\\n loader={{\\n showLoader,\\n textDescription: \\\"Laster innhold\\\",\\n }}\\n onClick={simulateLoading}\\n icon={boolKnob(\\\"icon\\\") && <CheckIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Lagre\\\" : null}\\n </Button>\\n <Button\\n variant=\\\"tertiary\\\"\\n loader={{\\n showLoader,\\n textDescription: \\\"Laster innhold\\\",\\n }}\\n onClick={simulateLoading}\\n icon={boolKnob(\\\"icon\\\") && <CloseIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Avbryt\\\" : null}\\n </Button>\\n <Button\\n variant=\\\"ghost\\\"\\n icon={boolKnob(\\\"icon\\\") && <ChevronDownIcon />}\\n iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n >\\n {boolKnob(\\\"label\\\") ? \\\"Ola Nordmann\\\" : null}\\n </Button>\\n </div>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","boolOptions","trueValue","falseValue","defaultValue","choiceOptions","value","code","formatCode","anchorsCode","Example","controls","useInteractiveCodeControls","anchorsControls","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline"],"mappings":"skDAAA,MCIaA,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,QACPC,YAAa,CACTC,WAAW,EACXC,YAAY,GAEhBC,cAAc,GAElB,CACIL,KAAM,OACNC,MAAO,OACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,gBACPK,cAAe,CACX,CAAEL,MAAO,OAAQM,MAAO,QACxB,CAAEN,MAAO,QAASM,MAAO,UAE7BF,aAAc,ICpBhBG,EAAOC,ECTE,0zFDUTC,EAAcD,EFVL,i8BEYf,SAAwBE,IACdC,MAAAA,EAAWC,EAA2BL,EAAMT,GAC5Ce,EAAkBD,EAA2BH,EAAa,IAE5D,OAAAK,EAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAACC,EAAA,CACGC,MAAO,SACPC,YAAab,EACbc,mBAAmB,EACnBC,UAAU,EACVX,SAAAA,IAEJM,EAACC,EAAA,CACGC,MAAO,mBACPC,YAAaX,EACbY,mBAAmB,EACnBC,UAAU,EACVX,SAAUE,MAI1B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import t from"react-dom/client";import"react";import"../../../hooks/useScreen/useScreen.js";import"../../../hooks/useId/useId.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";import"../Button.js";import"../../card/Card.js";import"../../card/CardImage.js";import"../../card/NavCard.js";import"../../checkbox/Checkbox.js";import"../../combobox/Combobox.js";import"../../cookie-consent/CookieConsentContext.js";import"react-dom";import"../../modal/Modal.js";import"react-a11y-dialog";import"../../list/List.js";import"../../list/ListItem.js";import"../../datepicker/DatePicker.js";import"../../feedback/feedbackContext.js";import"../../message/Message.js";import"../../message/FormErrorMessage.js";import"../../tooltip/Tooltip.js";import"../../tooltip/TooltipContent.js";import"../../tooltip/TooltipTrigger.js";import"../../input-group/InputGroup.js";import"../../feedback/followup/followupContext.js";import"../../feedback/main-question/mainQuestionContext.js";import"../../radio-button/RadioButton.js";import"../../radio-button/radioGroupContext.js";import"../../radio-button/BaseRadioButton.js";import"../../text-input/BaseTextArea.js";import"../../text-input/BaseTextInput.js";import"../../text-input/TextArea.js";import"../../text-input/TextInput.js";import"../../../utilities/polymorphism/SlotComponent.js";import{initTabListener as i}from"../../../utilities/tabListener.js";import"../../../../ExpandableTableRow-vzoCcN_v.js";import"../../icon-button/IconButton.js";import"../../link/Link.js";import"../../link/NavLink.js";import"../../link-list/LinkList.js";import"../../logo/text-paths/ForsikringLevertAvFremtind.js";import"../../logo/text-paths/FraSB1ogDNB.js";import"../../logo/text-paths/InnovasjonFraFremtind.js";import"../../logo/text-paths/TeknologiFraFremtind.js";import"../../logo/text-paths/VartEgetForsikringsselskap.js";import"../../logo/text-paths/VartForsikringsselskap.js";import"../../menu/MenuItem.js";import"../../menu/MenuItemCheckbox.js";import"../../popover/Popover.js";import"../../system-message/SystemMessage.js";import"../../table/DataTable.js";import"../../table/Table.js";import"../../table/TableBody.js";import"../../table/TableCaption.js";import"../../table/TableCell.js";import"../../table/TableColumn.js";import"../../table/TableColumnGroup.js";import"../../table/tableContext.js";import"../../table/tableSectionContext.js";import"../../table/TableFooter.js";import"../../table/TableHead.js";import"../../table/TableHeader.js";import"../../table/TableRow.js";import"../../tabs/NavTab.js";import"../../tabs/tabsContext.js";import"../../tabs/Tab.js";import"../../tag/Tag.js";import"../../toast/toastContext.js";import"../../toggle-switch/ToggleSwitch.js";import s from"./Example.js";i(),t.createRoot(document.getElementById("root")).render(o(s,{}));
|
|
2
|
+
//# sourceMappingURL=main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../../../../../src/components/button/documentation/main.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { initTabListener } from \"../../..\";\nimport Example from \"./Example\";\n\ninitTabListener();\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(<Example />);\n"],"names":["initTabListener","ReactDOM","createRoot","document","getElementById","render","jsx","Example"],"mappings":"mkIAKAA,IAEAC,EAASC,WAAWC,SAASC,eAAe,SAAUC,OAAQC,EAAAC,EAAA,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{resolve as o}from"node:path";import t from"@vitejs/plugin-react-swc";import{defineConfig as i}from"vite";import{c as r}from"../../../../copy-jkl-fonts-Yd-mZnP9.js";const s=i({plugins:[t(),r(o(__dirname,"public","fonts"))]});export{s as default};
|
|
2
|
+
//# sourceMappingURL=vite.dev.config.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vite.dev.config.js","sources":["../../../../../src/components/button/documentation/vite.dev.config.ts"],"sourcesContent":["import { resolve } from \"path\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport { copyJklFonts } from \"../../../../../../utils/vite\";\n\nexport default defineConfig({\n plugins: [react(), copyJklFonts(resolve(__dirname, \"public\", \"fonts\"))],\n});\n"],"names":["vite_dev_config","defineConfig","plugins","react","copyJklFonts","resolve","__dirname"],"mappings":"2KAKA,MAAAA,EAAeC,EAAa,CACxBC,QAAS,CAACC,IAASC,EAAaC,EAAQC,UAAW,SAAU"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as n}from"react/jsx-runtime";import{f as t,u as o,I as r}from"../../../../formatCode-
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{f as t,u as o,I as r}from"../../../../formatCode-DzuWIQfw.js";import"react";import"../Link.js";import"../NavLink.js";const e=[],i=t('import React, { FC } from "react";\nimport { Link } from "..";\n\nexport const knobs = [];\n\nexport const LinkExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <div>\n <Link href="#">Lenke</Link>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');function s(){const t=o(i,e);return n("div",{className:"jkl",children:n(r,{title:"Link",defaultCode:i,defaultShowEditor:!0,noInline:!0,controls:t})})}export{s as default};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{f as t,u as o,I as l}from"../../../../formatCode-
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{f as t,u as o,I as l}from"../../../../formatCode-DzuWIQfw.js";import"react";const a=[{type:"choice",label:"Variant",choiceOptions:[{label:"Large",value:"large"},{label:"Medium",value:"medium"},{label:"Small",value:"small"}],defaultValue:0}],i=[],r=t('import React, { FC } from "react";\nimport { Loader } from "..";\nimport "./styles.scss";\n\nexport const knobs = [\n {\n type: "choice",\n label: "Variant",\n choiceOptions: [\n { label: "Large", value: "large" },\n { label: "Medium", value: "medium" },\n { label: "Small", value: "small" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const LoaderExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <div className="jkl-loader-example">\n <div>\n <Loader variant={choiceKnob("Variant")} textDescription="Laster innhold" />\n </div>\n </div>\n );\n /* -- EXAMPLE CODE END -- */\n};\n'),d=t('import React, { FC } from "react";\nimport {\n SkeletonAnimation,\n SkeletonButton,\n SkeletonCheckboxGroup,\n SkeletonElement,\n SkeletonInput,\n SkeletonRadioButtonGroup,\n SkeletonTable,\n SkeletonTableHeader,\n SkeletonTableRow,\n SkeletonTextArea,\n} from "..";\n\nexport const knobs = [];\n\nexport const SkeletonLoaderExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <SkeletonAnimation role="none presentation">\n <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>\n <SkeletonElement width={350} height={32} />\n <SkeletonInput />\n <SkeletonTextArea />\n <SkeletonCheckboxGroup checkboxes={3} />\n <SkeletonRadioButtonGroup radioButtons={3} />\n <SkeletonButton width={225} />\n <SkeletonTable>\n <SkeletonTableHeader>\n <div style={{ width: 215 }}>\n <SkeletonElement width={115} height={16} />\n </div>\n <div style={{ width: 115 }}>\n <SkeletonElement width={115} height={16} />\n </div>\n </SkeletonTableHeader>\n {Array.from(Array(5)).map((_, index) => (\n <SkeletonTableRow key={index}>\n <div style={{ width: 215 }}>\n <SkeletonElement width={index % 2 ? 115 : 185} height={19} />\n </div>\n <div style={{ width: 115 }}>\n <SkeletonElement width={24} height={24} shape="circle" />\n </div>\n </SkeletonTableRow>\n ))}\n </SkeletonTable>\n </div>\n </SkeletonAnimation>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');function s(){const t=o(r,a),s=o(d,i);return e("div",{className:"jkl",children:[n(l,{title:"Loader",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:t}),n(l,{title:"SkeletonLoader",defaultCode:d,defaultShowEditor:!0,noInline:!0,controls:s})]})}export{s as default};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{f as o,u as t,I as n}from"../../../../formatCode-
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{f as o,u as t,I as n}from"../../../../formatCode-DzuWIQfw.js";import"react";import"../ToggleSwitch.js";import"../../../hooks/useScreen/useScreen.js";import"../../../hooks/useId/useId.js";import"../../button/Button.js";const s=[{type:"bool",label:"Deaktivert",boolOptions:{trueValue:!0,falseValue:!1}}],r=o('import React from "react";\nimport { ToggleSwitch } from "..";\nimport { PrimaryButton } from "../../button";\n\nexport const knobs = [\n {\n type: "bool",\n label: "Deaktivert",\n boolOptions: {\n trueValue: true,\n falseValue: false,\n },\n },\n];\n\nexport const ToggleSwitchExample = () => {\n /* -- EXAMPLE CODE START -- */\n const isDisabled = boolKnob("Deaktivert");\n\n const handleToggle = (event, pressed) => console.log("Mørk modus satt til: ", pressed, event);\n\n return (\n <ToggleSwitch disabled={isDisabled} onChange={handleToggle}>\n Mørk modus\n </ToggleSwitch>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');function l(){const o=t(r,s);return e("div",{className:"jkl",children:e(n,{title:"Loader",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:o})})}export{l as default};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{f as e,u as i,I as t}from"../../../../formatCode-
|
|
1
|
+
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{f as e,u as i,I as t}from"../../../../formatCode-DzuWIQfw.js";import"react";import"../Tooltip.js";import"../TooltipContent.js";import"../TooltipTrigger.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";const l=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{label:"0",value:"0"},{label:"150",value:"150"},{label:"250",value:"250"},{label:"500",value:"500"},{label:"1000",value:"1000"}],defaultValue:0}],a=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{label:"0",value:"0"},{label:"150",value:"150"},{label:"250",value:"250"},{label:"500",value:"500"},{label:"1000",value:"1000"}],defaultValue:0}],c=e('import React, { useState } from "react";\nimport { Tooltip, TooltipContent, TooltipTrigger } from "..";\nimport { formatKontonummer } from "../../../utilities/formatters";\n\nexport const knobs = [\n {\n type: "choice",\n label: "Plassering",\n choiceOptions: [\n { label: "Top", value: "top" },\n { label: "Top start", value: "top-start" },\n { label: "Top end", value: "top-end" },\n { label: "Left", value: "left" },\n { label: "Right", value: "right" },\n ],\n defaultValue: 0,\n },\n {\n type: "choice",\n label: "Forsinkelse (ms)",\n choiceOptions: [\n { label: "0", value: "0" },\n { label: "150", value: "150" },\n { label: "250", value: "250" },\n { label: "500", value: "500" },\n { label: "1000", value: "1000" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const TooltipExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [copied, setCopied] = useState(false);\n const kontonummer = "16024454979";\n\n function copyToClipboard() {\n navigator.clipboard.writeText(kontonummer);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n\n return (\n <p>\n Kontonummer:{" "}\n <Tooltip placement={choiceKnob("Plassering")} delay={choiceKnob("Forsinkelse (ms)")}>\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n <TooltipContent>\n {copied ? <span aria-live="assertive">Kopiert</span> : "Klikk for å kopiere til utklippstavlen"}\n </TooltipContent>\n </Tooltip>\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n'),r=e('import React from "react";\nimport { PopupTip } from "..";\nimport { formatValuta } from "../../../utilities/formatters";\n\nexport const knobs = [\n {\n type: "choice",\n label: "Plassering",\n choiceOptions: [\n { label: "Top", value: "top" },\n { label: "Top start", value: "top-start" },\n { label: "Top end", value: "top-end" },\n { label: "Left", value: "left" },\n { label: "Right", value: "right" },\n ],\n defaultValue: 0,\n },\n {\n type: "choice",\n label: "Forsinkelse (ms)",\n choiceOptions: [\n { label: "0", value: "0" },\n { label: "150", value: "150" },\n { label: "250", value: "250" },\n { label: "500", value: "500" },\n { label: "1000", value: "1000" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const PopupTipExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <p>\n Du betaler 348 kr/mnd{" "}\n <PopupTip\n placement={choiceKnob("Plassering")}\n delay={choiceKnob("Forsinkelse (ms)")}\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n triggerProps={{\n onClick: () => console.log("PopupTip clicked"),\n }}\n />\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n');function s(){const e=i(c,a),s=i(r,l);return o("div",{className:"jkl",children:[n(t,{title:"Tooltip",defaultCode:c,defaultShowEditor:!0,noInline:!0,controls:e}),n(t,{title:"PopupTip",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:s})]})}export{s as default};
|
|
2
2
|
//# sourceMappingURL=Example.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Example.js","sources":["../../../../../src/components/tooltip/documentation/PopupTipExample.jsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx","../../../../../src/components/tooltip/documentation/Example.tsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx?raw","../../../../../src/components/tooltip/documentation/PopupTipExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { PopupTip } from \"..\";\nimport { formatValuta } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { laber: \"0\", value: \"0\" },\n { laber: \"150\", value: \"150\" },\n { laber: \"250\", value: \"250\" },\n { laber: \"500\", value: \"500\" },\n { laber: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const PopupTipExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <p>\n Du betaler 348 kr/mnd{\" \"}\n <PopupTip\n placement={choiceKnob(\"Plassering\")}\n delay={choiceKnob(\"Forsinkelse (ms)\")}\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n triggerProps={{\n onClick: () => console.log(\"PopupTip clicked\"),\n }}\n />\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"..\";\nimport { formatKontonummer } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { laber: \"0\", value: \"0\" },\n { laber: \"150\", value: \"150\" },\n { laber: \"250\", value: \"250\" },\n { laber: \"500\", value: \"500\" },\n { laber: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const TooltipExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [copied, setCopied] = useState(false);\n const kontonummer = \"16024454979\";\n\n function copyToClipboard() {\n navigator.clipboard.writeText(kontonummer);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n\n return (\n <p>\n Kontonummer:{\" \"}\n <Tooltip placement={choiceKnob(\"Plassering\")} delay={choiceKnob(\"Forsinkelse (ms)\")}>\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n <TooltipContent>\n {copied ? <span aria-live=\"assertive\">Kopiert</span> : \"Klikk for å kopiere til utklippstavlen\"}\n </TooltipContent>\n </Tooltip>\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as popupTipKnobs } from \"./PopupTipExample\";\n// @ts-ignore\nimport PopupTipExample from \"./PopupTipExample?raw\";\n// @ts-ignore\nimport { knobs as tooltipKnobs } from \"./TooltipExample\";\n// @ts-ignore\nimport TooltipExample from \"./TooltipExample?raw\";\n\nimport \"../styles/tooltip.scss\";\n\nconst tooltipCode = formatCode(TooltipExample);\nconst popupTipCode = formatCode(PopupTipExample);\n\nexport default function Example() {\n const tooltipControls = useInteractiveCodeControls(tooltipCode, tooltipKnobs);\n const popupTipControls = useInteractiveCodeControls(popupTipCode, popupTipKnobs);\n\n return (\n <div className={\"jkl\"}>\n <InteractiveCode\n title={\"Tooltip\"}\n defaultCode={tooltipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={tooltipControls}\n />\n <InteractiveCode\n title={\"PopupTip\"}\n defaultCode={popupTipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={popupTipControls}\n />\n </div>\n );\n}\n","export default \"import React, { useState } from \\\"react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"..\\\";\\nimport { formatKontonummer } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { laber: \\\"0\\\", value: \\\"0\\\" },\\n { laber: \\\"150\\\", value: \\\"150\\\" },\\n { laber: \\\"250\\\", value: \\\"250\\\" },\\n { laber: \\\"500\\\", value: \\\"500\\\" },\\n { laber: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const TooltipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n const [copied, setCopied] = useState(false);\\n const kontonummer = \\\"16024454979\\\";\\n\\n function copyToClipboard() {\\n navigator.clipboard.writeText(kontonummer);\\n setCopied(true);\\n setTimeout(() => setCopied(false), 2000);\\n }\\n\\n return (\\n <p>\\n Kontonummer:{\\\" \\\"}\\n <Tooltip placement={choiceKnob(\\\"Plassering\\\")} delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}>\\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\\n <TooltipContent>\\n {copied ? <span aria-live=\\\"assertive\\\">Kopiert</span> : \\\"Klikk for å kopiere til utklippstavlen\\\"}\\n </TooltipContent>\\n </Tooltip>\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { PopupTip } from \\\"..\\\";\\nimport { formatValuta } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { laber: \\\"0\\\", value: \\\"0\\\" },\\n { laber: \\\"150\\\", value: \\\"150\\\" },\\n { laber: \\\"250\\\", value: \\\"250\\\" },\\n { laber: \\\"500\\\", value: \\\"500\\\" },\\n { laber: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const PopupTipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n return (\\n <p>\\n Du betaler 348 kr/mnd{\\\" \\\"}\\n <PopupTip\\n placement={choiceKnob(\\\"Plassering\\\")}\\n delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}\\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\\n triggerProps={{\\n onClick: () => console.log(\\\"PopupTip clicked\\\"),\\n }}\\n />\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","choiceOptions","value","defaultValue","laber","tooltipCode","formatCode","popupTipCode","Example","tooltipControls","useInteractiveCodeControls","tooltipKnobs","popupTipControls","popupTipKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"ioDAIO,MAAMA,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAEG,MAAO,IAAKF,MAAO,KACrB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,OAAQF,MAAO,SAE5BC,aAAc,ICvBTL,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAEG,MAAO,IAAKF,MAAO,KACrB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,OAAQF,MAAO,SAE5BC,aAAc,ICdhBE,EAAcC,ECbL,0yDDcTC,EAAeD,EEdN,89CFgBf,SAAwBE,IACdC,MAAAA,EAAkBC,EAA2BL,EAAaM,GAC1DC,EAAmBF,EAA2BH,EAAcM,GAG9D,OAAAC,EAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAACC,EAAA,CACGC,MAAO,UACPC,YAAaf,EACbgB,mBAAmB,EACnBC,UAAU,EACVC,SAAUd,IAEdQ,EAACC,EAAA,CACGC,MAAO,WACPC,YAAab,EACbc,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAI1B"}
|
|
1
|
+
{"version":3,"file":"Example.js","sources":["../../../../../src/components/tooltip/documentation/PopupTipExample.jsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx","../../../../../src/components/tooltip/documentation/Example.tsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx?raw","../../../../../src/components/tooltip/documentation/PopupTipExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { PopupTip } from \"..\";\nimport { formatValuta } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { label: \"0\", value: \"0\" },\n { label: \"150\", value: \"150\" },\n { label: \"250\", value: \"250\" },\n { label: \"500\", value: \"500\" },\n { label: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const PopupTipExample = () => {\n /* -- EXAMPLE CODE START -- */\n return (\n <p>\n Du betaler 348 kr/mnd{\" \"}\n <PopupTip\n placement={choiceKnob(\"Plassering\")}\n delay={choiceKnob(\"Forsinkelse (ms)\")}\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n triggerProps={{\n onClick: () => console.log(\"PopupTip clicked\"),\n }}\n />\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"..\";\nimport { formatKontonummer } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n {\n type: \"choice\",\n label: \"Plassering\",\n choiceOptions: [\n { label: \"Top\", value: \"top\" },\n { label: \"Top start\", value: \"top-start\" },\n { label: \"Top end\", value: \"top-end\" },\n { label: \"Left\", value: \"left\" },\n { label: \"Right\", value: \"right\" },\n ],\n defaultValue: 0,\n },\n {\n type: \"choice\",\n label: \"Forsinkelse (ms)\",\n choiceOptions: [\n { label: \"0\", value: \"0\" },\n { label: \"150\", value: \"150\" },\n { label: \"250\", value: \"250\" },\n { label: \"500\", value: \"500\" },\n { label: \"1000\", value: \"1000\" },\n ],\n defaultValue: 0,\n },\n];\n\nexport const TooltipExample = () => {\n /* -- EXAMPLE CODE START -- */\n const [copied, setCopied] = useState(false);\n const kontonummer = \"16024454979\";\n\n function copyToClipboard() {\n navigator.clipboard.writeText(kontonummer);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n }\n\n return (\n <p>\n Kontonummer:{\" \"}\n <Tooltip placement={choiceKnob(\"Plassering\")} delay={choiceKnob(\"Forsinkelse (ms)\")}>\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n <TooltipContent>\n {copied ? <span aria-live=\"assertive\">Kopiert</span> : \"Klikk for å kopiere til utklippstavlen\"}\n </TooltipContent>\n </Tooltip>\n </p>\n );\n /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as popupTipKnobs } from \"./PopupTipExample\";\n// @ts-ignore\nimport PopupTipExample from \"./PopupTipExample?raw\";\n// @ts-ignore\nimport { knobs as tooltipKnobs } from \"./TooltipExample\";\n// @ts-ignore\nimport TooltipExample from \"./TooltipExample?raw\";\n\nimport \"../styles/tooltip.scss\";\n\nconst tooltipCode = formatCode(TooltipExample);\nconst popupTipCode = formatCode(PopupTipExample);\n\nexport default function Example() {\n const tooltipControls = useInteractiveCodeControls(tooltipCode, tooltipKnobs);\n const popupTipControls = useInteractiveCodeControls(popupTipCode, popupTipKnobs);\n\n return (\n <div className={\"jkl\"}>\n <InteractiveCode\n title={\"Tooltip\"}\n defaultCode={tooltipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={tooltipControls}\n />\n <InteractiveCode\n title={\"PopupTip\"}\n defaultCode={popupTipCode}\n defaultShowEditor={true}\n noInline={true}\n controls={popupTipControls}\n />\n </div>\n );\n}\n","export default \"import React, { useState } from \\\"react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"..\\\";\\nimport { formatKontonummer } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { label: \\\"0\\\", value: \\\"0\\\" },\\n { label: \\\"150\\\", value: \\\"150\\\" },\\n { label: \\\"250\\\", value: \\\"250\\\" },\\n { label: \\\"500\\\", value: \\\"500\\\" },\\n { label: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const TooltipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n const [copied, setCopied] = useState(false);\\n const kontonummer = \\\"16024454979\\\";\\n\\n function copyToClipboard() {\\n navigator.clipboard.writeText(kontonummer);\\n setCopied(true);\\n setTimeout(() => setCopied(false), 2000);\\n }\\n\\n return (\\n <p>\\n Kontonummer:{\\\" \\\"}\\n <Tooltip placement={choiceKnob(\\\"Plassering\\\")} delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}>\\n <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\\n <TooltipContent>\\n {copied ? <span aria-live=\\\"assertive\\\">Kopiert</span> : \\\"Klikk for å kopiere til utklippstavlen\\\"}\\n </TooltipContent>\\n </Tooltip>\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { PopupTip } from \\\"..\\\";\\nimport { formatValuta } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n {\\n type: \\\"choice\\\",\\n label: \\\"Plassering\\\",\\n choiceOptions: [\\n { label: \\\"Top\\\", value: \\\"top\\\" },\\n { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n { label: \\\"Left\\\", value: \\\"left\\\" },\\n { label: \\\"Right\\\", value: \\\"right\\\" },\\n ],\\n defaultValue: 0,\\n },\\n {\\n type: \\\"choice\\\",\\n label: \\\"Forsinkelse (ms)\\\",\\n choiceOptions: [\\n { label: \\\"0\\\", value: \\\"0\\\" },\\n { label: \\\"150\\\", value: \\\"150\\\" },\\n { label: \\\"250\\\", value: \\\"250\\\" },\\n { label: \\\"500\\\", value: \\\"500\\\" },\\n { label: \\\"1000\\\", value: \\\"1000\\\" },\\n ],\\n defaultValue: 0,\\n },\\n];\\n\\nexport const PopupTipExample = () => {\\n /* -- EXAMPLE CODE START -- */\\n return (\\n <p>\\n Du betaler 348 kr/mnd{\\\" \\\"}\\n <PopupTip\\n placement={choiceKnob(\\\"Plassering\\\")}\\n delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}\\n content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\\n triggerProps={{\\n onClick: () => console.log(\\\"PopupTip clicked\\\"),\\n }}\\n />\\n </p>\\n );\\n /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","choiceOptions","value","defaultValue","tooltipCode","formatCode","popupTipCode","Example","tooltipControls","useInteractiveCodeControls","tooltipKnobs","popupTipControls","popupTipKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"ioDAIO,MAAMA,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAED,MAAO,IAAKE,MAAO,KACrB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,OAAQE,MAAO,SAE5BC,aAAc,ICvBTL,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAED,MAAO,IAAKE,MAAO,KACrB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,OAAQE,MAAO,SAE5BC,aAAc,ICdhBC,EAAcC,ECbL,0yDDcTC,EAAeD,EEdN,89CFgBf,SAAwBE,IACdC,MAAAA,EAAkBC,EAA2BL,EAAaM,GAC1DC,EAAmBF,EAA2BH,EAAcM,GAG9D,OAAAC,EAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAACC,EAAA,CACGC,MAAO,UACPC,YAAaf,EACbgB,mBAAmB,EACnBC,UAAU,EACVC,SAAUd,IAEdQ,EAACC,EAAA,CACGC,MAAO,WACPC,YAAab,EACbc,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAI1B"}
|