Skip to content

Commit cc797eb

Browse files
BarsnesBarsnes
authored
chore(storefront): parsing and ks logo (#3309)
* chore(storefront): move <style> to head * fix deduplication * add ks digital logo * remove ks class * fix color props * version * remove all style tags * aria-hidden to missed icons * blue card
1 parent 6fe6a19 commit cc797eb

File tree

24 files changed

+236
-138
lines changed

24 files changed

+236
-138
lines changed

‎apps/_components/src/Container/Container.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@ import classes from './Container.module.css';
55
type ContainerProps = {
66
children: React.ReactNode;
77
className?: string;
8+
id?: string;
89
};
910

10-
export const Container = ({ children, className }: ContainerProps) => {
11-
return <div className={cl(classes.container, className)}>{children}</div>;
11+
export const Container = ({ children, className, id }: ContainerProps) => {
12+
return (
13+
<div id={id} className={cl(classes.container, className)}>
14+
{children}
15+
</div>
16+
);
1217
};

‎apps/_components/src/Footer/Footer.module.css

+6
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@
1919
align-items: flex-start;
2020
gap: var(--ds-size-8);
2121
margin-top: var(--ds-size-8);
22+
23+
& svg {
24+
& * {
25+
fill: var(--ds-color-neutral-text-default);
26+
}
27+
}
2228
}
2329

2430
.links {

‎apps/_components/src/Footer/Footer.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Container } from '../';
66

77
import { Bronnoysund } from '../logos/Bronnoysund';
88
import { Digdir } from '../logos/Digdir';
9+
import { KsDigital } from '../logos/KsDigital';
910
import { Mattilsynet } from '../logos/Mattilsynet';
1011
import { Udir } from '../logos/Udir';
1112
import classes from './Footer.module.css';
@@ -37,7 +38,6 @@ const LinkList = (links: LinkListItemProps[]) => {
3738
</ul>
3839
);
3940
};
40-
4141
type FooterProps = {
4242
centerLinks: LinkListItemProps[];
4343
rightLinks: LinkListItemProps[];
@@ -65,6 +65,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
6565
<Bronnoysund />
6666
<Mattilsynet />
6767
<Udir className={classes.udir} />
68+
<KsDigital />
6869
</div>
6970
<Button
7071
asChild

‎apps/_components/src/logos/Bronnoysund.tsx

+126-26
Large diffs are not rendered by default.

‎apps/_components/src/logos/KsDigital.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
type KsDigitalProps = React.HTMLAttributes<SVGElement>;
2+
3+
export function KsDigital({ ...rest }: KsDigitalProps) {
4+
return (
5+
<svg
6+
xmlns='http://www.w3.org/2000/svg'
7+
version='1.1'
8+
viewBox='0 0 1035 244'
9+
width='1035'
10+
height='244'
11+
{...rest}
12+
>
13+
<title>KS digital logo</title>
14+
<path d='m163.6 82.1h80.5v80.5h-80.5zm-161.1 0c0 44.5 36.1 80.5 80.5 80.5v-80.5zm80.6 161c44.5 0 80.5-36.1 80.5-80.5h-80.5zm80.5-241.6c-44.5 0-80.5 36.1-80.5 80.5h80.5z' />
15+
<path d='m318 66.9h20.4v46.9c1.7-2.7 4.1-5.4 7.3-8.7l35.9-38.2h26.4l-45 46.6 51.3 64.3h-27.4l-37.7-49.9-10.9 11.4v38.5h-20.4v-110.9zm100.8 72.9h21.5c1.1 15.4 13.6 23.3 28.3 23.3 14.7 0 22.2-4.4 22.2-15.2 0-10.8-6-13-18.2-15.4l-18.8-3.6c-17.4-3.3-31-13.6-31-31.4 0-17.8 18.2-33.4 43.2-33.4 25 0 43.2 14.9 44.5 36.4h-21.5c-0.5-10.3-7.8-19-23.9-19-16.1 0-21.5 5.1-21.5 14.3 0 9.2 7.4 11.6 18.7 13.8l18.7 3.6c17.3 3.3 30.9 13.1 30.9 31.7 0 18.6-15.5 35.8-44 35.8-28.5 0-47.2-16.2-48.9-40.9zm148.8-72.9h39.3c37.4 0 58.8 19.5 58.8 55.6 0 36.1-20.1 55.3-58.3 55.3h-39.7v-110.9zm76.8 55.6c0-23.9-13.1-38-38.6-38h-17.4v75.7h17.6c23.3 0 38.5-12 38.5-37.7zm38.5-54h20.1v20.3h-20.1zm0.3 32h19.3v77.3h-19.3zm39.9 82.6h19.6c0.3 9.2 6.2 14.6 16.6 14.6 10.4 0 18.7-6 18.7-17.6v-8.4c0-3.5 0.2-6.7 0.6-9.7-4.6 7-12 12.8-24.1 12.8-20.1 0-34.7-14.1-34.7-38.5 0-24.4 16.8-38.5 33.7-38.5 16.9 0 20.4 5.5 25 13.6-0.5-2.7-0.6-4.8-0.6-7.6v-3.5h19.3v74.9c0 25.3-15.7 37.5-38.5 37.5-22.8 0-35.8-12.2-35.8-29.8zm56.1-46.7c0-13.5-8.2-23.1-19.6-23.1-11.4 0-20 9.7-20 23.1 0 13.4 8.2 23.1 20 23.1 11.8 0 19.6-9.7 19.6-23.1zm39.4-67.9h20.1v20.3h-20.1zm0.3 32h19.3v77.3h-19.3zm51.7 53.2v-37.8h-17.6v-15.4h17.6v-27.9h19.3v27.9h19v15.4h-19v35c0 8.1 3.2 12.8 11.4 12.8 8.2 0 4-0.2 5.9-0.5v14.6c-1.9 0.6-6.5 1.4-11.4 1.4-16.5 0-25.2-8.2-25.2-25.5zm52.5 2.8c0-17.4 13.5-23.4 30.1-25.7l11.1-1.4c6.3-0.8 8.6-3.2 8.6-7 0-5.4-4.4-10.1-12.7-10.1-8.3 0-14.7 5.1-15.5 13.1h-20c1.3-16.2 14.4-27.6 34.4-27.6 20 0 33.1 12.7 33.1 34.4v45.4h-17.9v-3.2c0-2.5 0.3-4.9 0.8-7.4-4.1 7.6-12 13.5-25.3 13.5-13.3 0-26.6-8.9-26.6-24.1zm50.3-8.7v-8.4c-1.7 1.6-4.4 2.4-9.2 3.3l-6.3 1.3c-9 1.7-15.2 4.8-15.2 11.7 0 6.9 5.4 10.6 12.2 10.6 10.3 0 18.5-7.6 18.5-18.5zm39.3-80.9h19.3v110.9h-19.3z' />
16+
</svg>
17+
);
18+
}

‎apps/_components/src/logos/Udir.tsx

-12
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,6 @@ export function Udir(rest: UdirProps) {
99
{...rest}
1010
>
1111
<title>Utdanningsdirektoratet logo</title>
12-
<defs>
13-
<style suppressHydrationWarning>
14-
{`
15-
.cls-1 {
16-
fill: #fdfeff;
17-
}
18-
.cls-2 {
19-
fill: #fff;
20-
}
21-
`}
22-
</style>
23-
</defs>
2412
<g>
2513
<g>
2614
<path

‎apps/storefront/app/(frontpage)/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
1414

1515
return (
1616
<main id='main'>
17-
<div>
17+
<div id='frontpage'>
1818
<img
1919
src='/img/elements/first.svg'
2020
alt=''

‎apps/storefront/app/(frontpage)/page.mdx

-12
Original file line numberDiff line numberDiff line change
@@ -107,15 +107,3 @@ export const metadata = {
107107
},
108108
]}
109109
/>
110-
111-
<style>
112-
{`
113-
header:first-of-type {
114-
background-color: transparent;
115-
}
116-
117-
.ds-logo-image img {
118-
width: 85%;
119-
}
120-
`}
121-
</style>

‎apps/storefront/app/bloggen/(frontpage)/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
1212

1313
const Layout = ({ children }: { children: React.ReactNode }) => {
1414
return (
15-
<div>
15+
<div id='bloggen'>
1616
<Banner color='red'>
1717
<BannerIcon>
1818
<PencilIcon fontSize={34} aria-hidden='true' />

‎apps/storefront/app/bloggen/(frontpage)/page.mdx

-13
Original file line numberDiff line numberDiff line change
@@ -104,16 +104,3 @@ export const metadata = {
104104
featured={false}
105105
level={2}
106106
/>
107-
108-
<style>
109-
{`
110-
body {
111-
background-color: var(--ds-color-neutral-background-subtle);
112-
113-
[data-color-scheme='dark'] &,
114-
[data-color-scheme='auto'] & {
115-
background-color: var(--ds-color-neutral-backround-default);
116-
}
117-
}
118-
`}
119-
</style>

‎apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css

-16
Original file line numberDiff line numberDiff line change
@@ -64,22 +64,6 @@
6464
width: 100%;
6565
}
6666

67-
/* .content img {
68-
display: block;
69-
width: 860px;
70-
margin: var(--ds-size-12) 0;
71-
margin-left: calc((100% - 860px) / 2) !important;
72-
background-color: var(--ds-color-neutral-background-subtle);
73-
}
74-
75-
.content video,
76-
.content [data-iframe-video] {
77-
display: block;
78-
width: 860px;
79-
margin-left: calc((100% - 860px) / 2) !important;
80-
background-color: var(--ds-color-neutral-background-subtle);
81-
} */
82-
8367
.main > figure {
8468
margin: auto;
8569
width: 100%;

‎apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx

+2-12
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function PostLayout({
3333
figureCount = FIGURE_COUNT,
3434
}: BlogArticleLayoutProps) {
3535
return (
36-
<div className={classes.wrapper}>
36+
<div className={classes.wrapper} id='post-layout'>
3737
<Container className={classes.page}>
3838
{Array.from({ length: figureCount }).map((_, index) => (
3939
<Figures
@@ -68,7 +68,7 @@ function PostLayout({
6868
/>
6969
<MdxContent className={classes.content}>
7070
{content}
71-
<div className={classes.wantToWrite} data-color='brand1'>
71+
<div className={classes.wantToWrite} data-color='brand3'>
7272
<Heading level={3} data-size='xs'>
7373
Ønsker du å skrive for bloggen?
7474
</Heading>
@@ -87,16 +87,6 @@ function PostLayout({
8787
</MdxContent>
8888
</main>
8989
</Container>
90-
<style suppressHydrationWarning>
91-
{`
92-
header {
93-
[data-color-scheme='dark'] &,
94-
[data-color-scheme='auto'] & {
95-
background-color: var(--ds-color-neutral-background-default) !important;
96-
}
97-
}
98-
`}
99-
</style>
10090
</div>
10191
);
10292
}

‎apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ I variant B er teksten svart, og bakgrunnen er farge #6D7879. Teksten er noe min
175175

176176
<br />
177177
<br />
178-
<Card data-color='brand1' variant="tinted" data-unstyled>
178+
<Card data-color='brand3' variant="tinted" data-unstyled>
179179
**Bidra til artikkelen?** <br />
180180
Vi vil gjerne ha dine innspill og tilbakemeldinger på artikkelen. Send oss en
181181
e-post på: [email protected] eller [kontakt oss i Github](https://github.com/digdir/designsystemet/issues/new).

‎apps/storefront/app/grunnleggende/introduksjon/verdier/page.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default ({ children }) => (
1313
data={{
1414
title: 'Verdier',
1515
date: '26. april 2023',
16-
icon: <LightBulbIcon />,
16+
icon: <LightBulbIcon aria-hidden />,
1717
color: 'yellow',
1818
}}
1919
/>

‎apps/storefront/app/grunnleggende/page.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ Designsystemet inneholder grunnleggende designelementer, mønstre, god praksis o
4040
<NavigationCard
4141
title='Om designsystemet'
4242
color='blue'
43-
icon={<ComponentIcon fontSize={34} />}
43+
icon={<ComponentIcon fontSize={34} aria-hidden />}
4444
url='grunnleggende/introduksjon/om-designsystemet'
4545
description='Hva er Designsystemet, hvorfor trenger vi det, hvordan gjør vi det og hvem er med?'
4646
backgroundColor='white'
4747
/>
4848
<NavigationCard
4949
title='Verdier'
5050
color='yellow'
51-
icon={<LightBulbIcon fontSize={34} />}
51+
icon={<LightBulbIcon fontSize={34} aria-hidden />}
5252
url='grunnleggende/introduksjon/verdier'
5353
description='Verdier vi ønsker at designsystemet skal bygges på'
5454
backgroundColor='white'

‎apps/storefront/app/komponenter/layout.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
2727
sammen på mange ulike måter og i forskjellige mønstre.
2828
</BannerIngress>
2929
</Banner>
30-
<Container className={classes.grid}>{children}</Container>
30+
<Container className={classes.grid} id='komponenter'>
31+
{children}
32+
</Container>
3133
</main>
3234
);
3335
};

‎apps/storefront/app/komponenter/page.tsx

-12
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,6 @@ export default function page() {
2323
{sortedData.map((component) => (
2424
<ComponentCard key={component.title} {...component} />
2525
))}
26-
<style suppressHydrationWarning>
27-
{`
28-
body {
29-
background-color: var(--ds-color-neutral-background-subtle);
30-
31-
[data-color-scheme='dark'] &,
32-
[data-color-scheme='auto'] & {
33-
background-color: var(--ds-color-neutral-background-default);
34-
}
35-
}
36-
`}
37-
</style>
3826
</>
3927
);
4028
}

‎apps/storefront/app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default function RootLayout({
9696
children: React.ReactNode;
9797
}) {
9898
return (
99-
<html lang='en' data-color-scheme='auto'>
99+
<html lang='no' data-color-scheme='auto'>
100100
<body>
101101
<div className='root'>
102102
<SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>

‎apps/storefront/app/monstre/page.mdx

-10
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,3 @@ Alle som ønsker kan påvirke arbeidet gjennom åpne diskusjoner i [Slack](https
7171
dataUnstyled
7272
caption='Digdir, Nav, Skatteetaten, Oslo kommune og Brønnøysundregistren er blant dem som deltar i arbeidet om å etablere felles mønstre på tvers'
7373
/>
74-
75-
76-
77-
<style>
78-
{`
79-
body {
80-
background-color: var(--ds-color-neutral-background-subtle);
81-
}
82-
`}
83-
</style>

‎apps/storefront/components/ImageBanner/ImageBanner.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const ImageBanner = ({
9696
{description && <Paragraph data-size='lg'>{description}</Paragraph>}
9797
{content && content}
9898
{link && (
99-
<Link className={classes.link} color='neutral' asChild>
99+
<Link className={classes.link} data-color='neutral' asChild>
100100
<NextLink href={link.href}>
101101
{link.prefix} {link.text}
102102
</NextLink>
@@ -106,10 +106,11 @@ const ImageBanner = ({
106106
{buttons && (
107107
<div className={classes.buttons}>
108108
{buttons.map((item, index) => (
109+
/* @ts-ignore */
109110
<Button
110111
key={index}
111112
variant={item.variant ?? 'secondary'}
112-
color={item.color ?? 'accent'}
113+
data-color={item.color ?? 'accent'}
113114
asChild
114115
>
115116
<a href={item.href} className={classes.button}>

‎apps/storefront/globals.css

+47
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,53 @@
1616

1717
body {
1818
font-family: 'Inter', sans-serif;
19+
background-color: var(--ds-color-neutral-background-default);
20+
21+
&:has(#bloggen) {
22+
background-color: var(--ds-color-neutral-background-tinted);
23+
24+
[data-color-scheme='dark'] &,
25+
[data-color-scheme='auto'] & {
26+
background-color: var(--ds-color-neutral-background-default);
27+
}
28+
}
29+
30+
&:has(#komponenter) {
31+
background-color: var(--ds-color-neutral-background-tinted);
32+
33+
[data-color-scheme='dark'] &,
34+
[data-color-scheme='auto'] & {
35+
background-color: var(--ds-color-neutral-background-default);
36+
}
37+
}
38+
39+
&:has(#menu-page-layout) {
40+
& header {
41+
[data-color-scheme='dark'] &,
42+
[data-color-scheme='auto'] & {
43+
background-color: var(--ds-color-neutral-background-default) !important;
44+
}
45+
}
46+
}
47+
48+
&:has(#frontpage) {
49+
header:first-of-type {
50+
background-color: transparent;
51+
}
52+
53+
.ds-logo-image img {
54+
width: 85%;
55+
}
56+
}
57+
58+
&:has(#post-layout) {
59+
header {
60+
[data-color-scheme='dark'] &,
61+
[data-color-scheme='auto'] & {
62+
background-color: var(--ds-color-neutral-background-default) !important;
63+
}
64+
}
65+
}
1966
}
2067

2168
* {

‎apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
4646
{banner.ingress && <BannerIngress>{banner.ingress}</BannerIngress>}
4747
</Banner>
4848
)}
49-
<Container className={classes.page}>
49+
<Container className={classes.page} id='menu-page-layout'>
5050
<div className={classes.left}>
5151
<SidebarMenu routerPath={pathname ?? ''} />
5252
</div>
@@ -79,16 +79,6 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
7979
</div>
8080
</main>
8181
</Container>
82-
<style suppressHydrationWarning>
83-
{`
84-
header {
85-
[data-color-scheme='dark'] &,
86-
[data-color-scheme='auto'] & {
87-
background-color: var(--ds-color-neutral-background-default) !important;
88-
}
89-
}
90-
`}
91-
</style>
9282
</div>
9383
);
9484
};

‎apps/storefront/layouts/PageLayout/PageLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
2727
<div className={classes.header}>
2828
<Container>
2929
<div className={classes.headerContent}>
30-
<Link asChild className={classes.backBtn} color='neutral'>
30+
<Link asChild className={classes.backBtn} data-color='neutral'>
3131
<NextLink href={'/' + data.backUrl} prefetch={false}>
3232
<ArrowLeftIcon title='Tilbake' fontSize={28} />
3333
{data.backText}

0 commit comments

Comments
 (0)