From 1a894829f0b41935d133ca62b7d239586c1dd2db Mon Sep 17 00:00:00 2001 From: Ken Date: Fri, 26 May 2023 14:04:59 +0200 Subject: [PATCH 01/36] :art: Search: Custom-button eksempel for aksel --- .../pages/eksempler/search/custom-button.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 aksel.nav.no/website/pages/eksempler/search/custom-button.tsx diff --git a/aksel.nav.no/website/pages/eksempler/search/custom-button.tsx b/aksel.nav.no/website/pages/eksempler/search/custom-button.tsx new file mode 100644 index 0000000000..87645f7aba --- /dev/null +++ b/aksel.nav.no/website/pages/eksempler/search/custom-button.tsx @@ -0,0 +1,24 @@ +import { Search } from "@navikt/ds-react"; +import { withDsExample } from "components/website-modules/examples/withDsExample"; + +const Example = () => { + return ( +
+ + + +
+ ); +}; + +export default withDsExample(Example); + +/* Storybook story */ +export const Demo = { + render: Example, + desc: "Children kan erstatte knapp hvis man trenger eget ikon eller 'type'-prop", +}; + +export const args = { + index: 8, +}; From 784d17165d80e9cb2aadfd07c8a6fe342fb9ea0e Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 30 May 2023 15:07:18 +0200 Subject: [PATCH 02/36] =?UTF-8?q?:recycle:=20Ikonside=20bruker=20n=C3=A5?= =?UTF-8?q?=20CopyButton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../website-modules/icon-page/Sidebar.tsx | 83 ++++--------------- 1 file changed, 17 insertions(+), 66 deletions(-) diff --git a/aksel.nav.no/website/components/website-modules/icon-page/Sidebar.tsx b/aksel.nav.no/website/components/website-modules/icon-page/Sidebar.tsx index db742c1528..ca4dd96296 100644 --- a/aksel.nav.no/website/components/website-modules/icon-page/Sidebar.tsx +++ b/aksel.nav.no/website/components/website-modules/icon-page/Sidebar.tsx @@ -1,12 +1,11 @@ import * as Icons from "@navikt/aksel-icons"; import meta from "@navikt/aksel-icons/metadata"; -import { Button, Heading, Tooltip } from "@navikt/ds-react"; +import { Button, CopyButton, Heading, Tooltip } from "@navikt/ds-react"; import { SuggestionBlock } from "components/website-modules/suggestionblock"; import { AmplitudeEvents, logAmplitudeEvent, } from "components/website-modules/utils/amplitude"; -import copy from "copy-to-clipboard"; import Link from "next/link"; import { useRouter } from "next/router"; import Highlight, { defaultProps } from "prism-react-renderer"; @@ -21,8 +20,6 @@ export const IconSidebar = ({ focusRef: any; }) => { const SelectedIcon = Icons[`${name}Icon`]; - const [resentCopy, setResentCopy] = useState<"svg" | "react" | "import">(); - const timeoutRef = useRef(); const wrapperRef = useRef(null); const [blob, setBlob]: any = useState(); const router = useRouter(); @@ -48,19 +45,6 @@ export const IconSidebar = ({ }); } - const handleCopy = (copyStr: string, src: "svg" | "react" | "import") => { - copy(copyStr); - timeoutRef.current && clearTimeout(timeoutRef.current); - setResentCopy(src); - timeoutRef.current = setTimeout(() => { - setResentCopy(undefined); - }, 2000); - }; - - useEffect(() => { - return () => timeoutRef.current && clearTimeout(timeoutRef.current); - }, []); - useEffect(() => { if (wrapperRef.current) { wrapperRef.current.focus({ preventScroll: true }); @@ -149,25 +133,13 @@ export const IconSidebar = ({
Import - - +} from '@navikt/aksel-icons';`} + />
React - - + + `} + />
SVG - - + + )} + />
Date: Tue, 30 May 2023 15:18:26 +0200 Subject: [PATCH 03/36] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5ff3ad847c..fe7337a3bc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- -
Aksel + +

Aksel

@@ -14,8 +14,8 @@ + npm
-
npm

Nettside | Issues
From 812a2347a05ae1976b325f5f562a82e531f29800 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 31 May 2023 10:18:15 +0200 Subject: [PATCH 04/36] :wheelchair: Mindre uu-fiks for ikonside --- .../website/components/website-modules/icon-page/Page.tsx | 7 ++++--- .../components/website-modules/suggestionblock/index.tsx | 8 +++++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/aksel.nav.no/website/components/website-modules/icon-page/Page.tsx b/aksel.nav.no/website/components/website-modules/icon-page/Page.tsx index 5a1d833cf3..60b6b99e12 100644 --- a/aksel.nav.no/website/components/website-modules/icon-page/Page.tsx +++ b/aksel.nav.no/website/components/website-modules/icon-page/Page.tsx @@ -120,17 +120,18 @@ export const IconPage = ({ name }: { name: string }) => {
-
+
e.preventDefault()} - className="flex h-fit w-full items-center gap-4 py-2 px-4" + className="flex h-fit w-full items-center gap-4 px-4 py-2" >
setToggle(v as any)} variant="neutral" + aria-label="Velg ikonvariant" > Stroke Fill @@ -250,7 +251,7 @@ export const IconPage = ({ name }: { name: string }) => { closeButton={false} aria-modal aria-label={`${name} ikon`} - className="bg-surface-default focus-visible:shadow-focus z-modal absolute block h-full overflow-y-auto rounded py-6 px-2 focus:outline-none sm:px-6" + className="bg-surface-default focus-visible:shadow-focus z-modal absolute block h-full overflow-y-auto rounded px-2 py-6 focus:outline-none sm:px-6" > {name && } diff --git a/aksel.nav.no/website/components/website-modules/suggestionblock/index.tsx b/aksel.nav.no/website/components/website-modules/suggestionblock/index.tsx index c2964e9e10..f8b045635b 100644 --- a/aksel.nav.no/website/components/website-modules/suggestionblock/index.tsx +++ b/aksel.nav.no/website/components/website-modules/suggestionblock/index.tsx @@ -55,9 +55,11 @@ const SuggestionBlockIcon = ({
{options[variant]?.icon}
- - {options[variant]?.heading} - + {options[variant]?.heading && ( + + {options[variant]?.heading} + + )} {options[variant]?.text} ); diff --git a/aksel.nav.no/website/pages/eksempler/button/icon.tsx b/aksel.nav.no/website/pages/eksempler/button/icon.tsx index ffe214ff1c..8239d2e69b 100644 --- a/aksel.nav.no/website/pages/eksempler/button/icon.tsx +++ b/aksel.nav.no/website/pages/eksempler/button/icon.tsx @@ -1,9 +1,9 @@ -import { Edit } from "@navikt/ds-icons"; +import { PencilIcon } from "@navikt/aksel-icons"; import { Button } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { - return ; + return ; }; export default withDsExample(Example); diff --git a/aksel.nav.no/website/pages/eksempler/chat/avatar.tsx b/aksel.nav.no/website/pages/eksempler/chat/avatar.tsx index 259bb6b311..d23d730d15 100644 --- a/aksel.nav.no/website/pages/eksempler/chat/avatar.tsx +++ b/aksel.nav.no/website/pages/eksempler/chat/avatar.tsx @@ -1,16 +1,20 @@ -import { PeopleFilled, Service } from "@navikt/ds-icons"; +import { PersonIcon, PersonHeadsetIcon } from "@navikt/aksel-icons"; import { Chat } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { return (
- } name="EVA" timestamp="01.01.21 14:00"> + } + name="EVA" + timestamp="01.01.21 14:00" + > Hei! Mitt navn er Eva. Hva kan jeg hjelpe deg med? } + avatar={} name="Ola Normann" timestamp="01.01.21 14:00" position="right" diff --git a/aksel.nav.no/website/pages/eksempler/chat/colors.tsx b/aksel.nav.no/website/pages/eksempler/chat/colors.tsx index e17e519627..9dd285462d 100644 --- a/aksel.nav.no/website/pages/eksempler/chat/colors.tsx +++ b/aksel.nav.no/website/pages/eksempler/chat/colors.tsx @@ -8,8 +8,8 @@ const Example = () => { avatar="EVA" name="EVA" timestamp="01.01.21 14:00" - avatarBgColor="rgba(255, 236, 204, 1)" - backgroundColor="rgba(255, 249, 240, 1)" + avatarBgColor="rgba(204, 225, 255, 1)" + backgroundColor="rgba(230, 240, 255, 1)" > Hei! Mitt navn er Eva. Hva kan jeg hjelpe deg med? @@ -19,8 +19,8 @@ const Example = () => { name="Ola Normann" timestamp="01.01.21 14:00" position="right" - avatarBgColor="rgba(204, 225, 255, 1)" - backgroundColor="rgba(230, 240, 255, 1)" + avatarBgColor="rgba(255, 236, 204, 1)" + backgroundColor="rgba(255, 249, 240, 1)" > Hei Eva. diff --git a/aksel.nav.no/website/pages/eksempler/copytoclipboard/icon.tsx b/aksel.nav.no/website/pages/eksempler/copytoclipboard/icon.tsx index 6e276682eb..4b9a81b9ce 100644 --- a/aksel.nav.no/website/pages/eksempler/copytoclipboard/icon.tsx +++ b/aksel.nav.no/website/pages/eksempler/copytoclipboard/icon.tsx @@ -1,11 +1,11 @@ -import { Link } from "@navikt/ds-icons"; +import { LinkIcon } from "@navikt/aksel-icons"; import { CopyToClipboard } from "@navikt/ds-react-internal"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { return ( } + icon={} copyText="#lenke" popoverText="Kopierte lenke" /> diff --git a/aksel.nav.no/website/pages/eksempler/header/system.tsx b/aksel.nav.no/website/pages/eksempler/header/system.tsx index 37b97393c8..0f601ea6f4 100644 --- a/aksel.nav.no/website/pages/eksempler/header/system.tsx +++ b/aksel.nav.no/website/pages/eksempler/header/system.tsx @@ -1,4 +1,4 @@ -import { System } from "@navikt/ds-icons"; +import { MenuGridIcon } from "@navikt/aksel-icons"; import { Dropdown, Header } from "@navikt/ds-react-internal"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -8,7 +8,7 @@ const Example = () => { Sykepenger - diff --git a/aksel.nav.no/website/pages/eksempler/link/icon.tsx b/aksel.nav.no/website/pages/eksempler/link/icon.tsx index 25c7e8a1a0..5b2b8639d7 100644 --- a/aksel.nav.no/website/pages/eksempler/link/icon.tsx +++ b/aksel.nav.no/website/pages/eksempler/link/icon.tsx @@ -1,4 +1,4 @@ -import { Print } from "@navikt/ds-icons"; +import { PrinterSmallIcon } from "@navikt/aksel-icons"; import { BodyLong, Link } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -8,7 +8,7 @@ const Example = () => { Officia incididunt{" "} lenke til ny side - + {" "} occaecat commodo id ad aliquip. diff --git a/aksel.nav.no/website/pages/eksempler/list/icons.tsx b/aksel.nav.no/website/pages/eksempler/list/icons.tsx index a7a225f1e9..32926b8633 100644 --- a/aksel.nav.no/website/pages/eksempler/list/icons.tsx +++ b/aksel.nav.no/website/pages/eksempler/list/icons.tsx @@ -1,26 +1,26 @@ import { - BabyChangingRoom, - Braille, - Cognition, - Refresh, -} from "@navikt/ds-icons"; + ArrowCirclepathIcon, + BrailleIcon, + ChangingRoomIcon, + HeadHeartIcon, +} from "@navikt/aksel-icons"; import { List } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { return ( - }> + }> Blinkende innhold. Vi vil ikke gi brukerne våre anfall. - }> + }> Kritiske problemer og problemer med høye barrierer på innhold med høy effekt. - }> + }> Middels barrierer på innhold med høy effekt. - }> + }> Middels barrierer på innhold med middels effekt. diff --git a/aksel.nav.no/website/pages/eksempler/tabs/controlled.tsx b/aksel.nav.no/website/pages/eksempler/tabs/controlled.tsx index 9fd3c354b5..aace96cd21 100644 --- a/aksel.nav.no/website/pages/eksempler/tabs/controlled.tsx +++ b/aksel.nav.no/website/pages/eksempler/tabs/controlled.tsx @@ -1,4 +1,9 @@ -import { Email, Historic, Send } from "@navikt/ds-icons"; +import { + ClockDashedIcon, + InboxDownIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; + import { Tabs } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; import { useState } from "react"; @@ -12,10 +17,18 @@ const Example = () => { } + icon={} + /> + } + /> + } /> - } /> - } /> Logg-tab @@ -38,5 +51,5 @@ export const Demo = { }; export const args = { - index: 0, + index: 2, }; diff --git a/aksel.nav.no/website/pages/eksempler/tabs/default.tsx b/aksel.nav.no/website/pages/eksempler/tabs/default.tsx index 7dd9e359e1..a856dd48f2 100644 --- a/aksel.nav.no/website/pages/eksempler/tabs/default.tsx +++ b/aksel.nav.no/website/pages/eksempler/tabs/default.tsx @@ -1,4 +1,8 @@ -import { Email, Historic, Send } from "@navikt/ds-icons"; +import { + ClockDashedIcon, + InboxDownIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { Tabs } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -9,10 +13,18 @@ const Example = () => { } + icon={} + /> + } + /> + } /> - } /> - } /> Logg-tab diff --git a/aksel.nav.no/website/pages/eksempler/tabs/follow-focus.tsx b/aksel.nav.no/website/pages/eksempler/tabs/follow-focus.tsx index ec64c9c916..2f756d7c36 100644 --- a/aksel.nav.no/website/pages/eksempler/tabs/follow-focus.tsx +++ b/aksel.nav.no/website/pages/eksempler/tabs/follow-focus.tsx @@ -1,4 +1,8 @@ -import { Email, Historic, Send } from "@navikt/ds-icons"; +import { + ClockDashedIcon, + InboxDownIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { Tabs } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -9,10 +13,18 @@ const Example = () => { } + icon={} + /> + } + /> + } /> - } /> - } /> Logg-tab diff --git a/aksel.nav.no/website/pages/eksempler/tabs/icon-top.tsx b/aksel.nav.no/website/pages/eksempler/tabs/icon-top.tsx index cb79572413..1b9a8b020d 100644 --- a/aksel.nav.no/website/pages/eksempler/tabs/icon-top.tsx +++ b/aksel.nav.no/website/pages/eksempler/tabs/icon-top.tsx @@ -1,4 +1,8 @@ -import { Email, Historic, Send } from "@navikt/ds-icons"; +import { + ClockDashedIcon, + InboxDownIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { Tabs } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -9,10 +13,18 @@ const Example = () => { } + icon={} + /> + } + /> + } /> - } /> - } /> Logg-tab diff --git a/aksel.nav.no/website/pages/eksempler/tabs/loop.tsx b/aksel.nav.no/website/pages/eksempler/tabs/loop.tsx index dd18d46f26..de9d38a80d 100644 --- a/aksel.nav.no/website/pages/eksempler/tabs/loop.tsx +++ b/aksel.nav.no/website/pages/eksempler/tabs/loop.tsx @@ -1,4 +1,8 @@ -import { Email, Historic, Send } from "@navikt/ds-icons"; +import { + ClockDashedIcon, + InboxDownIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { Tabs } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -9,10 +13,18 @@ const Example = () => { } + icon={} + /> + } + /> + } /> - } /> - } /> Logg-tab diff --git a/aksel.nav.no/website/pages/eksempler/tabs/small.tsx b/aksel.nav.no/website/pages/eksempler/tabs/small.tsx index 4cc843e64a..8e6dd7e157 100644 --- a/aksel.nav.no/website/pages/eksempler/tabs/small.tsx +++ b/aksel.nav.no/website/pages/eksempler/tabs/small.tsx @@ -1,4 +1,8 @@ -import { Email, Historic, Send } from "@navikt/ds-icons"; +import { + ClockDashedIcon, + InboxDownIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { Tabs } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -9,10 +13,18 @@ const Example = () => { } + icon={} + /> + } + /> + } /> - } /> - } /> Logg-tab diff --git a/aksel.nav.no/website/pages/eksempler/timeline-intern/active-periods.tsx b/aksel.nav.no/website/pages/eksempler/timeline-intern/active-periods.tsx index 911ee7fbb6..62058692e8 100644 --- a/aksel.nav.no/website/pages/eksempler/timeline-intern/active-periods.tsx +++ b/aksel.nav.no/website/pages/eksempler/timeline-intern/active-periods.tsx @@ -1,11 +1,11 @@ import { - Coronavirus, - Edit, - Hospital, - Money, - People, - Vacation, -} from "@navikt/ds-icons"; + VirusIcon, + PencilIcon, + HospitalIcon, + PiggybankIcon, + PersonIcon, + ParasolBeachIcon, +} from "@navikt/aksel-icons"; import { Timeline } from "@navikt/ds-react-internal"; import { withDsExample } from "components/website-modules/examples/withDsExample"; import { useState } from "react"; @@ -16,7 +16,7 @@ const Example = () => { return (
- }> + }> {person.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( , + icon: , statusLabel: "Sykemeldt", }, { @@ -78,7 +78,7 @@ const person = [ start: new Date("Apr 1 2022"), end: new Date("Apr 30 2022"), status: "neutral", - icon: , + icon: , label: "test", statusLabel: "Ferie", }, @@ -87,7 +87,7 @@ const person = [ start: new Date("Jul 1 2022"), end: new Date("Jul 31 2022"), status: "warning", - icon: , + icon: , statusLabel: "Sykemeldt", }, { @@ -95,7 +95,7 @@ const person = [ start: new Date("Aug 1 2022"), end: new Date("Aug 30 2022"), status: "warning", - icon: , + icon: , statusLabel: "Stønad korona", }, ]; @@ -107,7 +107,7 @@ const jobb = [ end: new Date("Mar 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { id: 6, @@ -115,7 +115,7 @@ const jobb = [ end: new Date("Apr 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { id: 7, @@ -123,7 +123,7 @@ const jobb = [ end: new Date("June 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { id: 8, @@ -131,7 +131,7 @@ const jobb = [ end: new Date("July 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, ]; diff --git a/aksel.nav.no/website/pages/eksempler/timeline-intern/pins.tsx b/aksel.nav.no/website/pages/eksempler/timeline-intern/pins.tsx index c5afa7cd93..6129b38563 100644 --- a/aksel.nav.no/website/pages/eksempler/timeline-intern/pins.tsx +++ b/aksel.nav.no/website/pages/eksempler/timeline-intern/pins.tsx @@ -1,11 +1,11 @@ import { - Coronavirus, - Edit, - Hospital, - Money, - People, - Vacation, -} from "@navikt/ds-icons"; + VirusIcon, + PencilIcon, + HospitalIcon, + PiggybankIcon, + PersonIcon, + ParasolBeachIcon, +} from "@navikt/aksel-icons"; import { Timeline } from "@navikt/ds-react-internal"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -28,7 +28,7 @@ const Example = () => {

Utbetalt: 11 245,00 kr

Dager igjen: 1

- }> + }> {person.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( , - statusLabel: "Sykemeldt", + icon: , + statusLabel: "SyIconkemeldt", }, { start: new Date("Apr 1 2022"), end: new Date("Apr 30 2022"), status: "neutral", - icon: , + icon: , label: "test", statusLabel: "Ferie", }, @@ -92,14 +92,14 @@ const person = [ start: new Date("Jul 1 2022"), end: new Date("Jul 31 2022"), status: "warning", - icon: , - statusLabel: "Sykemeldt", + icon: , + statusLabel: "SyIconkemeldt", }, { start: new Date("Aug 1 2022"), end: new Date("Aug 30 2022"), status: "warning", - icon: , + icon: , statusLabel: "Stønad korona", }, ]; @@ -110,28 +110,28 @@ const jobb = [ end: new Date("Mar 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { start: new Date("Mar 2 2022"), end: new Date("Apr 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { start: new Date("May 2 2022"), end: new Date("June 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { start: new Date("June 2 2022"), end: new Date("July 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, ]; diff --git a/aksel.nav.no/website/pages/eksempler/timeline-intern/timeline.tsx b/aksel.nav.no/website/pages/eksempler/timeline-intern/timeline.tsx index 1c7cc047d7..d26fe9a73c 100644 --- a/aksel.nav.no/website/pages/eksempler/timeline-intern/timeline.tsx +++ b/aksel.nav.no/website/pages/eksempler/timeline-intern/timeline.tsx @@ -1,11 +1,11 @@ import { - Coronavirus, - Edit, - Hospital, - Money, - People, - Vacation, -} from "@navikt/ds-icons"; + VirusIcon, + PencilIcon, + HospitalIcon, + PiggybankIcon, + PersonIcon, + ParasolBeachIcon, +} from "@navikt/aksel-icons"; import { Timeline } from "@navikt/ds-react-internal"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -13,7 +13,7 @@ const Example = () => { return (
- }> + }> {person.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( , + icon: , statusLabel: "Sykemeldt", children:
50% sykemeldt
, }, @@ -74,7 +74,7 @@ const person = [ start: new Date("Apr 1 2022"), end: new Date("Apr 30 2022"), status: "neutral", - icon: , + icon: , label: "test", statusLabel: "Ferie", }, @@ -82,14 +82,14 @@ const person = [ start: new Date("Jul 1 2022"), end: new Date("Jul 31 2022"), status: "warning", - icon: , + icon: , statusLabel: "Sykemeldt", }, { start: new Date("Aug 1 2022"), end: new Date("Aug 30 2022"), status: "warning", - icon: , + icon: , statusLabel: "Stønad korona", }, ]; @@ -100,7 +100,7 @@ const jobb = [ end: new Date("Mar 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , children:
100% utbetaling
, }, { @@ -108,7 +108,7 @@ const jobb = [ end: new Date("Apr 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , children:
100% utbetaling
, }, { @@ -116,7 +116,7 @@ const jobb = [ end: new Date("June 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , children:
100% utbetaling
, }, { @@ -124,7 +124,7 @@ const jobb = [ end: new Date("July 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, ]; diff --git a/aksel.nav.no/website/pages/eksempler/timeline-intern/zoom.tsx b/aksel.nav.no/website/pages/eksempler/timeline-intern/zoom.tsx index b88b602147..3bb8a6c273 100644 --- a/aksel.nav.no/website/pages/eksempler/timeline-intern/zoom.tsx +++ b/aksel.nav.no/website/pages/eksempler/timeline-intern/zoom.tsx @@ -1,11 +1,11 @@ import { - Coronavirus, - Edit, - Hospital, - Money, - People, - Vacation, -} from "@navikt/ds-icons"; + VirusIcon, + PencilIcon, + HospitalIcon, + PiggybankIcon, + PersonIcon, + ParasolBeachIcon, +} from "@navikt/aksel-icons"; import { Timeline } from "@navikt/ds-react-internal"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -13,7 +13,7 @@ const Example = () => { return (
- }> + }> {person.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( { ); })} - }> + }> {jobb.map((p: any, i) => { return ( , + icon: , statusLabel: "Sykemeldt", }, { start: new Date("Apr 1 2022"), end: new Date("Apr 30 2022"), status: "neutral", - icon: , + icon: , label: "test", statusLabel: "Ferie", }, @@ -83,14 +83,14 @@ const person = [ start: new Date("Jul 1 2022"), end: new Date("Jul 31 2022"), status: "warning", - icon: , + icon: , statusLabel: "Sykemeldt", }, { start: new Date("Aug 1 2022"), end: new Date("Aug 30 2022"), status: "warning", - icon: , + icon: , statusLabel: "Stønad korona", }, ]; @@ -101,28 +101,28 @@ const jobb = [ end: new Date("Mar 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { start: new Date("Mar 2 2022"), end: new Date("Apr 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { start: new Date("May 2 2022"), end: new Date("June 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, { start: new Date("June 2 2022"), end: new Date("July 1 2022"), status: "success", statusLabel: "Utbetaling", - icon: , + icon: , }, ]; diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx index e312075df0..d2f5283c71 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx @@ -1,4 +1,8 @@ -import { Email, EmailOpened, Send } from "@navikt/ds-icons"; +import { + EnvelopeClosedIcon, + EnvelopeOpenIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { ToggleGroup } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -7,29 +11,29 @@ const Example = () => {
- + Ulest - + Leste - + Sendt - + Ulest - + Leste - + Sendt diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx index 351844f525..feb10a24d2 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx @@ -1,4 +1,8 @@ -import { Email, EmailOpened, Send } from "@navikt/ds-icons"; +import { + EnvelopeClosedIcon, + EnvelopeOpenIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { ToggleGroup } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -7,24 +11,24 @@ const Example = () => {
- + - + - + - + - + - +
diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/label.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/label.tsx index be462c7838..532217617d 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/label.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/label.tsx @@ -1,4 +1,8 @@ -import { Email, EmailOpened, Send } from "@navikt/ds-icons"; +import { + EnvelopeClosedIcon, + EnvelopeOpenIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { ToggleGroup } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -6,15 +10,15 @@ const Example = () => { return ( - + Ulest - + Leste - + Sendt diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/small.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/small.tsx index 8aa4aeda97..2157e1e3c4 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/small.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/small.tsx @@ -1,4 +1,8 @@ -import { Email, EmailOpened, Send } from "@navikt/ds-icons"; +import { + EnvelopeClosedIcon, + EnvelopeOpenIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { ToggleGroup } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -6,15 +10,15 @@ const Example = () => { return ( - + Ulest - + Leste - + Sendt diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx index 0976e0a1a6..a7d747d321 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx @@ -1,4 +1,8 @@ -import { Email, EmailOpened, Send } from "@navikt/ds-icons"; +import { + EnvelopeClosedIcon, + EnvelopeOpenIcon, + PaperplaneIcon, +} from "@navikt/aksel-icons"; import { ToggleGroup, Tooltip } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; @@ -7,17 +11,17 @@ const Example = () => { - + - + - + diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/default.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/default.tsx index af43ee5bb2..96cdcb46f7 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/default.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/default.tsx @@ -1,11 +1,11 @@ -import { Print } from "@navikt/ds-icons"; +import { PrinterLargeIcon } from "@navikt/aksel-icons"; import { Button, Tooltip } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { return ( -
); diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/with-shortcuts.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/with-shortcuts.tsx index 650dd4d734..1cb77e1aa3 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/with-shortcuts.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/with-shortcuts.tsx @@ -1,11 +1,11 @@ -import { Print } from "@navikt/ds-icons"; +import { PrinterLargeIcon } from "@navikt/aksel-icons"; import { Button, Tooltip } from "@navikt/ds-react"; import { withDsExample } from "components/website-modules/examples/withDsExample"; const Example = () => { return ( - + + + + + + {loading && ( + + + + + + + + + + )} +