From cf8343a872d4f19ca136f868a7e1bbebf01bee18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Thune?= Date: Mon, 25 Sep 2023 14:14:35 +0200 Subject: [PATCH] chore(storefront): add CSS tokens and clean code for layouts (#796) --- .../MdxContent/MdxContent.module.css | 102 ++++++------- storefront/globals.css | 1 + .../FrontpageLayout.module.css | 23 --- .../FrontpageLayout/FrontpageLayout.tsx | 67 +-------- .../MenuPageLayout/MenuPageLayout.module.css | 54 +++---- .../layouts/MenuPageLayout/MenuPageLayout.tsx | 5 +- .../NavMenuPageLayout.module.css | 18 +++ .../NavMenuPageLayout.tsx} | 19 +-- .../NavPageLayout/NavPageLayout.module.css | 70 +-------- .../NavigationPageLayout.module.css | 66 --------- .../NotFoundLayout/NotFoundLayout.module.css | 31 ++-- .../layouts/NotFoundLayout/NotFoundLayout.tsx | 15 +- .../layouts/PageLayout/PageLayout.module.css | 38 ++--- storefront/layouts/PageLayout/PageLayout.tsx | 8 +- storefront/layouts/index.tsx | 4 +- storefront/pages/grunnleggende/index.mdx | 6 +- storefront/pages/index.mdx | 136 +++++++++--------- storefront/pages/monstre/index.mdx | 6 +- 18 files changed, 220 insertions(+), 449 deletions(-) delete mode 100644 storefront/layouts/FrontpageLayout/FrontpageLayout.module.css create mode 100644 storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css rename storefront/layouts/{NavigationPageLayout/NavigationPageLayout.tsx => NavMenuPageLayout/NavMenuPageLayout.tsx} (60%) delete mode 100644 storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css diff --git a/storefront/components/MdxContent/MdxContent.module.css b/storefront/components/MdxContent/MdxContent.module.css index 5d3e325886..591f234dcb 100644 --- a/storefront/components/MdxContent/MdxContent.module.css +++ b/storefront/components/MdxContent/MdxContent.module.css @@ -11,36 +11,15 @@ } .content > p { - font-size: 18px; - line-height: 1.55em; - margin-bottom: 20px; + font: var(--fds-typography-paragraph-medium); + margin-bottom: var(--fds-spacing-5); } +/* A

tag that comes directly after

will be treated as an ingress */ .content h1 + p { - font-size: 24px; - line-height: 1.7em; - margin-bottom: 36px; -} - -.content > h2 { - margin-top: 40px; - margin-bottom: 16px; - line-height: 1.3em; - font-size: 28px; -} - -.content > h3 { - margin-top: 40px; - margin-bottom: 16px; - line-height: 1.3em; - font-size: 24px; -} - -.content > h4 { - margin-top: 40px; - margin-bottom: 16px; - line-height: 1.3em; - font-size: 20px; + font: var(--fds-typography-ingress-medium); + margin-top: 0; + margin-bottom: var(--fds-spacing-8); } /* Heading styling with anchor link */ @@ -53,6 +32,32 @@ margin-left: -26px; } +.content > h2, +.content > h3, +.content > h4 { + margin-top: var(--fds-spacing-10); + margin-bottom: var(--fds-spacing-3); +} + +.content > h1 { + margin-top: 0; + margin-bottom: var(--fds-spacing-4); + font: var(--fds-typography-heading-xlarge); +} + +.content > h2 { + font: var(--fds-typography-heading-large); +} + +.content > h3 { + font: var(--fds-typography-heading-medium); +} + +.content > h4 { + font: var(--fds-typography-heading-small); +} + +/* Anchor link styling */ .content > h1 a, .content > h2 a, .content > h3 a, @@ -65,6 +70,7 @@ transition: 0.08s all; } +/* Anchor link styling for

*/ .content > h1 a { height: 24px; width: 24px; @@ -72,13 +78,15 @@ left: -4px; } +/* Styling for links */ .content > p > a, .content > ul > li a, .content > ol > li a { - color: #0062ba; + color: var(--fds-semantic-text-action-default); text-underline-offset: 4px; } +/* Anchor links appear on heading hover */ .content > h1:hover a, .content > h2:hover a, .content > h3:hover a, @@ -88,26 +96,26 @@ .content img { width: 100%; - margin: 24px 0; - border-radius: 2px; - box-shadow: 0 2px 4px rgba(0 0 0 / 0.1); + margin: var(--fds-spacing-5) 0; + border-radius: var(--fds-border_radius-medium); + box-shadow: var(--fds-shadow-medium); } .content strong { - margin-top: 8px; display: inline-block; + margin-top: var(--fds-spacing-1); font-weight: 500; } .content > ul > li, .content > ol > li { - font-size: 18px; + font: var(--fds-typography-paragraph-medium); line-height: 1.9em; } .content > ul > li > ol, .content > ol > li > ul { - margin-top: 8px; + margin-top: var(--fds-spacing-1); } .content > p > a:hover, @@ -117,35 +125,33 @@ } .content pre { - background-color: #f4f4f4; - padding: 20px; - border-radius: 4px; - margin: 32px 0; + background-color: var(--fds-semantic-background-subtle); + padding: var(--fds-spacing-5); + margin: var(--fds-spacing-7) 0; + border-radius: var(--fds-border_radius-medium); } .content > iframe { - box-shadow: 0 2px 4px rgba(0 0 0 / 0.2); - border-radius: 4px; - margin: 24px 0; + box-shadow: var(--fds-shadow-medium); + margin: var(--fds-spacing-5); + border-radius: var(--fds-border_radius-medium); } .content > table { - border-collapse: collapse; width: 100%; - margin: 32px 0; + margin: var(--fds-spacing-7) 0; + border-collapse: collapse; } .content > table td, .content > table th { - border: 1px solid #ddd; - padding: 16px; + padding: var(--fds-spacing-4); + border: 1px solid var(--fds-semantic-border-neutral-subtle); } .content > table th { - padding-top: 12px; - padding-bottom: 12px; text-align: left; - background-color: #f4f4f4; + background-color: var(--fds-semantic-background-subtle); font-weight: 600; } diff --git a/storefront/globals.css b/storefront/globals.css index 7157771312..a4c7c93978 100644 --- a/storefront/globals.css +++ b/storefront/globals.css @@ -28,6 +28,7 @@ --grid-gap: var(--spacing-5); --page-spacing-top: var(--spacing-7); --page-spacing-bottom: var(--spacing-7); + --page-gap: var(--fds-spacing-7); --preview-min-height: 81px; } diff --git a/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css b/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css deleted file mode 100644 index ab49ccd7aa..0000000000 --- a/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.link { - color: inherit; - text-decoration: none; - font-weight: 500; - display: flex; - align-items: center; - margin-top: 24px; - transition: 0.15s all; -} - -.link:hover { - cursor: pointer; -} - -.link span { - text-decoration: underline; - text-underline-offset: 6px; - font-size: 18px; -} - -.link svg { - margin-right: 12px; -} diff --git a/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx b/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx index 54551cd967..c4d73cbbba 100644 --- a/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx +++ b/storefront/layouts/FrontpageLayout/FrontpageLayout.tsx @@ -1,68 +1,11 @@ import React from 'react'; -import { - Section, - NavigationCard, - Banner, - ImageSection, -} from '../../components'; -import type { NavigationCardProps, ImageSectionProps } from '../../components'; - -interface FrontpageLayoutProps { - Content: React.ReactNode; - data: FrontpageData; -} - -interface FrontpageData { - title: string; - description: string; - navigationCards: { - title: string; - description: string; - items: []; - }; - contributeSection: ImageSectionProps; -} - -const FrontpageLayout = ({ Content, data }: FrontpageLayoutProps) => { - return ( -
- {Content} -
- - -
- {data.navigationCards.items.map( - (item: NavigationCardProps, index: number) => ( - - ), - )} -
+type FrontpageLayoutProps = { + content: React.ReactNode; +}; - -
-
- ); +const FrontpageLayout = ({ content }: FrontpageLayoutProps) => { + return
{content}
; }; export { FrontpageLayout }; -export type { FrontpageData }; diff --git a/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css index 01125202f1..a37d865fe5 100644 --- a/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css +++ b/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css @@ -1,10 +1,10 @@ .page { - margin-top: var(--page-spacing-top); - margin-bottom: var(--page-spacing-bottom); display: flex; justify-content: space-between; flex-wrap: wrap; - gap: var(--spacing-5); + gap: var(--page-gap); + margin-top: var(--page-spacing-top); + margin-bottom: var(--page-spacing-bottom); } .left { @@ -17,56 +17,40 @@ flex-grow: 500; } -.title { - font-size: 36px; - margin-bottom: 0; - line-height: 1.3em; -} - -.desc { - font-size: 18px; - line-height: 1.6em; - margin-bottom: -10px; -} - .header { - padding: 32px; - margin-bottom: 32px; - background-color: #f4f4f4; - border-radius: 8px; - width: 100%; position: relative; overflow: hidden; + margin-bottom: var(--fds-spacing-6); + padding: var(--fds-spacing-7); + width: 100%; + border-radius: var(--fds-border_radius-large); + background-color: var(--fds-semantic-background-subtle); } .header::after { + content: ''; position: absolute; right: -0; bottom: -200px; transform: rotate(25deg); - content: ''; + opacity: 0.2; height: 250px; width: 250px; - border-radius: 8px; - border: 8px solid #1e98f5; - opacity: 0.15; + border-radius: var(--fds-border_radius-large); + border: 8px solid var(--fds-brand-tertiary-600); } -.date { - margin-top: 12px; - font-size: 16px; +.title { + margin-bottom: 0; + font: var(--fds-typography-heading-xlarge); } -.content { - position: relative; - display: flex; - width: 100%; +.date { + margin-top: var(--fds-spacing-3); } -.content aside { - position: sticky; - top: 0; - height: 400px; +.content { + padding: var(--fds-spacing-4) var(--fds-spacing-7) 0 var(--fds-spacing-7); } @media (max-width: 576px) { diff --git a/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx index ee12a22891..605a9c6817 100644 --- a/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx +++ b/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx @@ -5,15 +5,14 @@ import { Container, SidebarMenu, MdxContent } from '../../components'; import classes from './MenuPageLayout.module.css'; -interface PageLayoutProps { +type PageLayoutProps = { content: React.ReactNode; data: PageLayoutData; -} +}; type PageLayoutData = { title: string; date: string; - showMenu: boolean; }; const MenuPageLayout = ({ content, data }: PageLayoutProps) => { diff --git a/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css new file mode 100644 index 0000000000..45a5f01f51 --- /dev/null +++ b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css @@ -0,0 +1,18 @@ +.page { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--fds-spacing-8); + margin-top: var(--page-spacing-top); + margin-bottom: var(--page-spacing-bottom); +} + +.left { + flex-basis: 220px; + flex-grow: 1; +} + +.right { + flex-basis: 600px; + flex-grow: 500; +} diff --git a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.tsx b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx similarity index 60% rename from storefront/layouts/NavigationPageLayout/NavigationPageLayout.tsx rename to storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx index 92d9e5ed32..c2c0ac0d62 100644 --- a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.tsx +++ b/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.tsx @@ -2,23 +2,14 @@ import React from 'react'; import { useRouter } from 'next/router'; import { Container, SidebarMenu, MdxContent } from '../../components'; -import type { NavigationCardProps } from '../../components/NavigationCard/NavigationCard'; -import classes from './NavigationPageLayout.module.css'; +import classes from './NavMenuPageLayout.module.css'; -type PageItem = NavigationCardProps; - -type PageSection = { - title: string; - description: string; - items: PageItem[]; -}; - -interface PageLandingLayoutProps { +type NavMenuPageLayoutProps = { content: React.ReactNode; -} +}; -const NavigationPageLayout = ({ content }: PageLandingLayoutProps) => { +const NavMenuPageLayout = ({ content }: NavMenuPageLayoutProps) => { const router = useRouter(); return ( @@ -40,4 +31,4 @@ const NavigationPageLayout = ({ content }: PageLandingLayoutProps) => { ); }; -export { NavigationPageLayout }; +export { NavMenuPageLayout }; diff --git a/storefront/layouts/NavPageLayout/NavPageLayout.module.css b/storefront/layouts/NavPageLayout/NavPageLayout.module.css index 593b334fe1..17fe152652 100644 --- a/storefront/layouts/NavPageLayout/NavPageLayout.module.css +++ b/storefront/layouts/NavPageLayout/NavPageLayout.module.css @@ -1,70 +1,4 @@ -.box { - position: relative; - z-index: 2; - max-width: 700px; - padding: 82px 0; - display: flex; - flex-wrap: wrap; - align-items: center; -} - -.title { - margin-bottom: var(--spacing-3); - font-size: var(--font-800); -} - -.desc { - font-size: var(--font-300); - line-height: 1.6em; - margin-bottom: 0; -} - .content { - margin-bottom: 56px; - margin-top: 48px; -} - -.content > div > h2 { - margin-top: 48px; - margin-bottom: 16px; - font-size: 28px; -} - -.content > div > p > a { - text-underline-offset: 5px; - color: #0062ba; -} - -.content > div > p { - margin-bottom: 16px; - max-width: 900px; - line-height: 1.7em; - font-size: 18px; -} - -.element { - position: absolute; - top: -20px; - right: -20px; - height: 550px; - width: 550px; - border: 8px solid #f45f63; - border-top-color: #68707c; - border-left-color: #e5aa20; - border-bottom-color: #1e98f5; - border-radius: 10px; - opacity: 0.09; - z-index: 1; - animation: rotate 150s linear infinite; - pointer-events: none; -} - -@keyframes rotate { - 0% { - transform: rotate(45deg); - } - - 100% { - transform: rotate(360deg); - } + margin-bottom: var(--fds-spacing-12); + margin-top: var(--fds-spacing-12); } diff --git a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css b/storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css deleted file mode 100644 index 571c5f3b43..0000000000 --- a/storefront/layouts/NavigationPageLayout/NavigationPageLayout.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.page { - margin-top: var(--page-spacing-top); - margin-bottom: var(--page-spacing-bottom); - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--spacing-5); -} - -.left { - flex-basis: 220px; - flex-grow: 1; -} - -.right { - flex-basis: 600px; - flex-grow: 500; -} - -.content h1 { - font-size: var(--font-800); - margin-bottom: var(--spacing-3); -} - -.content h2 { - margin-top: var(--spacing-6); -} - -.content p { - margin-top: 16px; - margin-bottom: 24px; - font-size: var(--font-300); - line-height: 1.5em; -} - -.content > h1 + p { - font-size: var(--font-400); - line-height: 1.6em; -} - -.list { - margin-bottom: 32px; - color: #4d4d4d; -} - -.list ul { - margin: 0; - padding: 0; -} - -.list h3 { - font-size: 19px; - margin-bottom: 10px; -} - -.list li { - list-style: none; -} - -.list li a { - text-decoration: none; - color: inherit; - font-size: 15px; - display: block; - margin-bottom: 10px; -} diff --git a/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css b/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css index d2ebfa7f7c..db703698a0 100644 --- a/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css +++ b/storefront/layouts/NotFoundLayout/NotFoundLayout.module.css @@ -1,44 +1,35 @@ .content { height: 100%; + padding: var(--fds-spacing-14) 0; } .container { display: flex; align-items: center; justify-content: center; - margin: 0 auto; flex-wrap: wrap; - gap: var(--spacing-7); - margin-top: var(--spacing-8); + gap: var(--fds-spacing-14); + margin: 0 auto; } .imgContainer { flex-basis: 290px; } -.textContainer { - flex-basis: 380px; +.img { + max-width: 100%; + display: block; } -.imgContainer img { - max-width: 100%; +.textContainer { + flex-basis: 380px; } .title { - font-size: var(--font-700); - margin-bottom: var(--spacing-3); + font: var(--fds-typography-heading-large); + margin-bottom: var(--fds-spacing-4); } .desc { - font-size: var(--font-300); - line-height: 1.6em; -} - -.link { - text-underline-offset: 5px; - font-size: var(--font-300); -} - -.link:hover { - text-decoration-thickness: 2px; + font: var(--fds-typography-paragraph-medium); } diff --git a/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx b/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx index 5628d5e278..e77686f350 100644 --- a/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx +++ b/storefront/layouts/NotFoundLayout/NotFoundLayout.tsx @@ -1,5 +1,7 @@ import React from 'react'; -import Link from 'next/link'; +import NextLink from 'next/link'; +import { Link } from '@digdir/design-system-react'; +import Image from 'next/image'; import { Container } from '../../components/Container/Container'; @@ -18,17 +20,19 @@ const NotFoundLayout = ({ content, data }: NotFoundLayoutProps) => {
- Mann med kikkert
-

- {data.title} -

+

{data.title}

{data.description}

{ Gå til forsiden
+ {content} ;
diff --git a/storefront/layouts/PageLayout/PageLayout.module.css b/storefront/layouts/PageLayout/PageLayout.module.css index fdbdcaa5be..91e7889d54 100644 --- a/storefront/layouts/PageLayout/PageLayout.module.css +++ b/storefront/layouts/PageLayout/PageLayout.module.css @@ -1,60 +1,48 @@ .container { margin-top: var(--page-spacing-top); margin-bottom: var(--page-spacing-bottom); - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--spacing-5); } .header { - background-color: #c2e4fe; - padding-top: 32px; + background-color: var(--fds-brand-tertiary-300); + padding-top: var(--fds-spacing-7); } .headerContent { max-width: 780px; margin: 0 auto; - padding-bottom: 72px; + padding-bottom: var(--fds-spacing-18); } .title { - font-size: 36px; margin-bottom: 0; - line-height: 1.3em; text-align: center; + font: var(--fds-typography-heading-xlarge); } -.back { - margin-bottom: 40px; - display: flex; - align-items: center; +.backBtn { + margin-bottom: var(--fds-spacing-10); color: inherit; - text-underline-offset: 5px; } -.back:hover { - text-decoration-thickness: 2px; +.backBtn:visited { + color: inherit !important; } -.back svg { - margin-right: 8px; -} - -.date { - font-size: 18px; - text-align: center; +.backBtn svg { + margin-right: var(--fds-spacing-2); } .separator { - margin: 0 8px; + margin: 0 var(--fds-spacing-2); } .meta { display: flex; text-align: center; justify-content: center; - margin-bottom: 14px; + margin-bottom: var(--fds-spacing-3); + font: var(--fds-typography-paragraph-short-large); } .content { diff --git a/storefront/layouts/PageLayout/PageLayout.tsx b/storefront/layouts/PageLayout/PageLayout.tsx index 826b514e38..72b64ee199 100644 --- a/storefront/layouts/PageLayout/PageLayout.tsx +++ b/storefront/layouts/PageLayout/PageLayout.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import Link from 'next/link'; +import NextLink from 'next/link'; +import { Link } from '@digdir/design-system-react'; import { ArrowLeftIcon } from '@navikt/aksel-icons'; import { Container, MdxContent } from '../../components'; @@ -26,11 +27,12 @@ const PageLayout = ({ content, data }: PageLayoutProps) => { className={classes.page} >
- +
( - -); +export default ({ children, menu }) => ; ; + -export default ({ children }) => ( - , - }, - { - title: 'For utviklere', - description: - 'Lær hvordan du kommer i gang med designsystemet som utvikler.', - color: 'yellow', - url: '/grunnleggende/for-utviklere/kom-i-gang', - icon: , - }, - { - title: 'Komponenter', - description: - 'Se oversikten over UI-komponentene som er laget i react.', - color: 'red', - url: 'https://digdir.github.io/designsystem', - icon: , - }, - ], - }, - contributeSection: { - title: 'Bli med på samarbeidet?', - description: - 'Et samarbeid om designsystem kan bidra til mer helhetlige brukeropplevelser på tvers av offentlig sektor og samtidig spare oss for å gjøre de samme oppgavene flere ganger. Vi ønsker at dette skal bli et felles hjem for gjenbrukbare komponenter, god praksis, interaksjonsmønstre, brukerdialog, innsikt og mer. Vil du høre mer om dette, eller bli med på samarbeidet?', - imgSrc: '/img/people-holding-figures.svg', - imgWidth: 1195, - imgHeight: 270, - headingLevel: 'h2', - imgAlt: 'Bilde av 2 personer som går bortover med byggeklosser under armene', - buttons: [ - { - text: 'Ta kontakt', - href: 'mailto:designsystem@digdir.no', - prefix: , - }, - { - text: 'Bli med i Slack-kanalen', - href: 'https://join.slack.com/t/designsystemet/shared_invite/zt-22v5yui1f-XlDpD9FKhWT7dyUy6NVCHA', - prefix: ( - ), - }, - { - text: 'Github', - href: 'https://github.com/digdir/designsystem', - prefix: , - }, - ] - }, - }} + + +
+ } + > + +} +> + + } + > +
+, + }, + { + text: 'Bli med i Slack-kanalen', + href: 'https://join.slack.com/t/designsystemet/shared_invite/zt-22v5yui1f-XlDpD9FKhWT7dyUy6NVCHA', + prefix: ( + + ), + }, + { + text: 'Github', + href: 'https://github.com/digdir/designsystem', + prefix: , + }, + ]} /> -); diff --git a/storefront/pages/monstre/index.mdx b/storefront/pages/monstre/index.mdx index f5eb5f8127..116d516c92 100644 --- a/storefront/pages/monstre/index.mdx +++ b/storefront/pages/monstre/index.mdx @@ -1,9 +1,7 @@ import { Meta, NavigationCard, Grid } from '@components'; -import { NavigationPageLayout } from '@layouts'; +import { NavMenuPageLayout } from '@layouts'; import { ImageIcon } from '@navikt/aksel-icons'; -export default ({ children, menu }) => ( - -); +export default ({ children, menu }) => ;