Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: article about data-size #2940

Open
wants to merge 6 commits into
base: next
Choose a base branch
from
+85 −0
Open

docs: article about data-size #2940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e783c88
docs: article about `data-size`
Barsnes Jan 2, 2025
0f93bb9
some more text
Barsnes Jan 2, 2025
f4768c7
ingress
Barsnes Jan 2, 2025
6f47c2c
Merge branch 'next' into docs/data-size
Barsnes Jan 2, 2025
fc4c8ff
add cards on grunnleggende
Barsnes Jan 2, 2025
f88baca
Merge branch 'next' into docs/data-size
Barsnes Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions apps/storefront/app/grunnleggende/for-utviklere/storrelsar/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { CodeIcon } from '@navikt/aksel-icons';

import { MenuPageLayout } from '@layouts';
import { CodeSnippet } from '@repo/components';

export const metadata = {
title: 'Størrelsar',
description: 'Informasjon om korleis du bruker størrelsar på frontend.',
};

export default ({ children }) => (
<MenuPageLayout
content={children}
data={{
title: 'Størrelsar',
date: '2. januar 2025',
icon: <CodeIcon />,
color: 'blue',
}}
/>
);

HTML data-attributt vert brukt for å definere størrelse på ein komponent. Komponentane kan nytte alle alle størrelsar.

Våre `size`-variablar (`--ds-size-*`) endrar seg basert på den lokale skriftstørrelsen. Du kan lett endre den ved bruk av `data-size`.

## `data-size`

Dette data-attributtet blir brukt for å endre størrelsar på alle komponentar under seg.
Alle komponentar kan være i størrelsane, `sm`, `md` eller `lg`. Som standard vil `md` bli nytta.

<CodeSnippet language="html">
{`
<body>
<div>
<!-- Innhaldet her vil ha MD størrelsar -->
</div>

<div data-size="sm">
<!-- Innhaldet her vil ha SM størrelsar -->
</div>
</body>
`}
</CodeSnippet>

Nokre komponentar har støtte for fleire størrelsar, som `xs` og `xl`. Desse størrelsane vil bli spesifisert i dokumentasjonen til komponenten,
og det er anbefalt å bruke dei størrelsane som er spesifisert.

## Korleis komponentar blir påverka

Me delar komponentar inn i 2 grupper for størrelsar:

- Eksplisitt
- Cascading

### Eksplisitt

Komponentar som ikkje vil følgje størrelsen til forelderen. Desse komponentane må ha `data-size` satt direkte på seg.

Dette er komponentar som
- `Heading`

### Cascading

Denne gruppa inneheld resten av komponentane, og vil arve størrelse frå næraste forelder med `data-size` satt.
16 changes: 16 additions & 0 deletions apps/storefront/app/grunnleggende/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,4 +154,20 @@ Ressurser og veiledning relevant for utviklere
description='Informasjonen og bruk av asChild til å løse komposisjon.'
backgroundColor='white'
/>
<NavigationCard
title='Størrelsar'
color='blue'
icon={<CodeIcon fontSize={34} />}
url='grunnleggende/for-utviklere/storrelsar'
description='Informasjon om korleis du bruker størrelsar på frontend.'
backgroundColor='white'
/>
<NavigationCard
title='Fargar'
color='blue'
icon={<CodeIcon fontSize={34} />}
url='grunnleggende/for-utviklere/fargar'
description='Informasjon om korleis du bruker fargar på frontend.'
backgroundColor='white'
/>
</Grid>
4 changes: 4 additions & 0 deletions apps/storefront/siteConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ export const SiteConfig = {
name: 'Kom i gang',
url: 'grunnleggende/for-utviklere/kom-i-gang',
},
{
name: 'Størrelsar',
url: 'grunnleggende/for-utviklere/storrelsar',
},
{
name: 'Fargar',
url: 'grunnleggende/for-utviklere/fargar',
Expand Down
Loading