Skip to content

Commit b48695e

Browse files
oddvernesoddvernes
authored
chore: new layout - round of fixes (#4278)
1 parent b555dcd commit b48695e

File tree

40 files changed

+336
-377
lines changed

40 files changed

+336
-377
lines changed

‎apps/themebuilder/app/routes/home/home.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,12 @@ div[data-color-scheme='dark'][data-theme='two'] .main {
2121
width: 600px;
2222
margin: 0 auto;
2323
text-align: center;
24-
margin-top: var(--ds-size-8);
24+
margin-top: var(--ds-size-14);
2525

2626
@media screen and (max-width: 768px) {
2727
width: 100%;
2828
padding: 0 var(--ds-size-6);
29+
margin-top: var(--ds-size-8);
2930
}
3031
}
3132

‎apps/www/app/_components/avatar-stack/avatar-stack.tsx‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,40 @@ import classes from './avatar-stack.module.css';
44
type AvatarStackProps = {
55
authors: string;
66
};
7-
const avatars = [
8-
'ardoq',
9-
'avinor',
10-
'brønnøysundregistrene',
11-
'digdir',
12-
'designsystemet',
13-
'ksdigital',
14-
'ks',
15-
'mattilsynet',
16-
'nav',
17-
'oslokommune',
18-
'skatteetaten',
19-
];
7+
8+
const avatarMap = {
9+
ardoq: 'ardoq.svg',
10+
avinor: 'avinor.svg',
11+
brønnøysundregistrene: 'brønnøysundregistrene.svg',
12+
digdir: 'digdir.svg',
13+
designsystemet: 'designsystemet.svg',
14+
'ks digital': 'ksdigital.svg',
15+
ks: 'ks.png',
16+
mattilsynet: 'mattilsynet.svg',
17+
nav: 'nav.svg',
18+
'oslo kommune': 'oslokommune.svg',
19+
skatteetaten: 'skatteetaten.svg',
20+
} as const;
21+
22+
type AvatarKey = keyof typeof avatarMap;
2023

2124
export const AvatarStack = ({ authors }: AvatarStackProps) => {
2225
const authorsLowercase = authors.toLowerCase();
23-
const matchedAvatars = avatars.filter((avatar) =>
24-
authorsLowercase.includes(avatar),
26+
27+
// Split authors string on common delimiters
28+
const authorWords = authorsLowercase.split(/[\s,/-]+/).filter(Boolean);
29+
30+
const matchedAvatars = (Object.keys(avatarMap) as AvatarKey[]).filter(
31+
(key) => {
32+
// Split key on delimiters
33+
const keyWords = key.split(/[\s-]+/).filter(Boolean);
34+
// Check if all words in the key match words in the authors string
35+
return keyWords.every((word) =>
36+
authorWords.some((authorWord) => authorWord.includes(word)),
37+
);
38+
},
2539
);
40+
2641
if (matchedAvatars.length === 0) {
2742
return null;
2843
}
@@ -33,8 +48,12 @@ export const AvatarStack = ({ authors }: AvatarStackProps) => {
3348
style={{ '--n': matchedAvatars.length } as CSSProperties}
3449
aria-hidden
3550
>
36-
{matchedAvatars.map((avatar) => (
37-
<img key={avatar} src={`/img/avatars/${avatar}.svg`} alt='' />
51+
{matchedAvatars.map((avatarKey) => (
52+
<img
53+
key={avatarKey}
54+
src={`/img/avatars/${avatarMap[avatarKey]}`}
55+
alt=''
56+
/>
3857
))}
3958
</span>
4059
);

‎apps/www/app/_components/blog-card/blog-card.module.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,22 @@
44
}
55
.card {
66
background-color: var(--ds-color-surface-default);
7-
@media (prefers-reduced-motion: no-preference) {
8-
transition:
9-
0.2s border-color ease-in-out,
10-
0.2s outline ease-in-out;
11-
}
7+
transition: 0.2s ease;
8+
transition-property: border-color, outline;
9+
outline: 1px solid transparent;
10+
1211
&:hover {
1312
border-color: var(--ds-color-border-strong);
1413
outline: 1px solid var(--ds-color-border-strong);
1514
}
15+
&:has(:focus-visible) {
16+
box-shadow: var(--dsc-focus-boxShadow);
17+
outline: var(--dsc-focus-outline);
18+
outline-offset: var(--ds-border-width-focus);
19+
}
20+
:has(:focus-visible) & {
21+
transition: none;
22+
}
1623
}
1724
.heading a {
1825
text-decoration-thickness: 1px;

‎apps/www/app/_components/component-card/component-card.module.css‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
.card {
2-
--border-color: var(--ds-color-neutral-border-subtle);
32
display: grid;
43
grid-template-rows: 1fr auto;
54
background-color: var(--ds-color-neutral-surface-default);
6-
border: 1px solid var(--border-color);
5+
border: 1px solid var(--ds-color-neutral-border-subtle);
6+
outline: 1px solid transparent;
77
color: var(--ds-color-neutral-text-default);
88
border-radius: var(--ds-border-radius-lg);
99
text-decoration: none;
10-
11-
@media (prefers-reduced-motion: no-preference) {
12-
transition:
13-
0.2s border-color ease-in-out,
14-
0.2s outline ease-in-out;
10+
transition: 0.2s ease;
11+
transition-property: border-color, outline;
12+
&:hover {
13+
border-color: var(--ds-color-neutral-border-strong);
14+
outline: 1px solid var(--ds-color-neutral-border-strong);
15+
}
16+
&:focus-visible {
17+
box-shadow: var(--dsc-focus-boxShadow);
18+
outline: var(--dsc-focus-outline);
19+
outline-offset: var(--ds-border-width-focus);
20+
}
21+
:has(:focus-visible) & {
22+
transition: none;
1523
}
16-
}
17-
18-
.card:hover {
19-
--border-color: var(--ds-color-neutral-border-strong);
20-
outline: 1px solid var(--ds-color-neutral-border-strong);
2124
}
2225

2326
.title {

‎apps/www/app/_components/fundamentals-card/fundamentals-card.module.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@
33
grid-template-columns: auto 1fr;
44
background-color: var(--ds-color-neutral-surface-default);
55
border: 1px solid var(--ds-color-neutral-border-subtle);
6+
outline: 1px solid transparent;
67
color: var(--ds-color-neutral-text-default);
78
border-radius: var(--ds-border-radius-lg);
89
padding: var(--ds-size-4);
910
padding-bottom: var(--ds-size-6);
1011
gap: var(--ds-size-4);
11-
@media (prefers-reduced-motion: no-preference) {
12-
transition: 0.2s all;
12+
transition: 0.2s ease;
13+
transition-property: border-color, outline;
14+
&:hover {
15+
border-color: var(--ds-color-neutral-border-strong);
16+
outline: 1px solid var(--ds-color-neutral-border-strong);
17+
}
18+
&:has(:focus-visible) {
19+
box-shadow: var(--dsc-focus-boxShadow);
20+
outline: var(--dsc-focus-outline);
21+
outline-offset: var(--ds-border-width-focus);
22+
}
23+
:has(:focus-visible) & {
24+
transition: none;
1325
}
14-
}
15-
16-
.card:hover {
17-
border-color: var(--ds-color-neutral-border-strong);
18-
outline: 1px solid var(--ds-color-neutral-border-strong);
19-
}
20-
21-
.card:focus-visible {
22-
transition: none;
23-
box-shadow: var(--dsc-focus-boxShadow);
24-
outline: var(--dsc-focus-outline);
25-
outline-offset: var(--ds-border-width-focus);
2626
}
2727

2828
.iconContainer {

‎apps/www/app/_components/grid/grid.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.grid {
22
display: grid;
33
grid-template-columns: repeat(3, 1fr);
4-
gap: var(--grid-gap);
4+
gap: var(--grid-gap, var(--ds-size-8));
55
margin: var(--ds-size-7) 0;
66
}
77

‎apps/www/app/_components/live-component/live-component.module.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
background-color: var(--ds-color-neutral-background-tinted);
6363
display: grid;
6464
grid-template-columns: 1fr auto auto auto;
65-
margin-block-end: var(--ds-size-4);
6665

6766
&[hidden] {
6867
display: none;

‎apps/www/app/_components/react-component-props/react-component-props.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
:is(h3, .ds-heading) {
1414
margin-top: 0;
1515
margin-bottom: var(--ds-size-3);
16+
grid-column: 1 / -1;
1617
}
1718
&:last-child {
1819
margin-bottom: 0;

‎apps/www/app/_components/sidebar/sidebar.module.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
.sidebar {
2+
display: flex;
3+
flex-direction: column;
4+
position: sticky;
5+
border-right: 1px solid var(--ds-color-neutral-border-subtle);
6+
top: var(--header-height);
7+
overflow-y: auto;
8+
max-height: calc(100vh - var(--header-height));
9+
padding-top: var(--ds-size-7);
10+
scrollbar-color: var(--ds-color-neutral-border-subtle) transparent;
11+
/*counter the padding to align with logo while not breaking the active style*/
12+
margin-left: calc(var(--ds-size-4) * -1);
13+
14+
overscroll-behavior: contain;
15+
> nav {
16+
margin-bottom: var(--header-height);
17+
}
18+
@media screen and (max-width: 958px) {
19+
border-right: initial;
20+
position: static;
21+
}
22+
}
23+
124
.title {
225
font-weight: 600;
326
margin-bottom: var(--ds-size-5);

‎apps/www/app/_components/sidebar/sidebar.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@ export const Sidebar = ({
3535
const closeMenuRef = useRef<HTMLButtonElement>(null);
3636

3737
return (
38-
<div className={cl(className, 'l-sidebar-left')} {...props}>
38+
<div
39+
className={cl(className, 'l-sidebar-left', classes.sidebar)}
40+
{...props}
41+
>
3942
<Button
4043
className={classes.toggleBtn}
4144
data-size='md'

0 commit comments

Comments
 (0)