[Primitives] HGrid

[KenAJoh]

https://dev.to/nayaabkhan/essential-layout-components-for-your-design-system-26p
Basert på braid, mesh og polaris sin "layout-primitive" Columns.

HGrid er en enklere og mer fleksibel måte å sette opp layout på vs det klassiske griddet. Man trenger ikke å forholde seg til 6/8/12 statiske kolonner basert på brekkpunkt, men lar HGrid bestemme hvordan children skal være fordelt med grid-template-columns

// Grid (Gammelt)
<Grid>
	<Grid.Cell span="2"><Placeholder /></Grid.Cell />
	<Grid.Cell span="4"><Placeholder /></Grid.Cell />
</Grid>

// HGrid (Nytt)

<HGrid columns="2fr 4fr" >
  <Placeholder text="1" />
  <Placeholder text="2" />
</HGrid>

// Andre muligheter
<HGrid columns={2} >
<HGrid columns={sm: 2, lg: 3, xl: 4} >
<HGrid columns={sm: 1, lg: "250px auto"} >

Komponenten er ment som en utility som lett lar bruker bygge opp sider basert på våre definerte brekkpunkt og spacing-verdier. Forhåpentligvis vil denne kunne settes sammen med en Page,Frame,Layout eller lignende for å bygge opp enkle sidemaler i fremtiden og som da styrer gutter-margin/sentrering/max-width.

[changeset-bot]

🦋 Changeset detected

Latest commit: 894804a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@navikt/ds-css	Minor
@navikt/ds-react	Minor
@navikt/aksel-stylelint	Minor
@navikt/aksel	Minor
@navikt/ds-tokens	Minor
@navikt/ds-tailwind	Minor
@navikt/aksel-icons	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

d6974a7fa | 48 komponenter | 307 stories

[macbruker]

Det var ikke intuitivt for meg at sidespalten i 'Page Layout' og 'Static Sidebar' skjules helt fra breakpoint MD og nedover. Hvor i komponentene styres dette?

[KenAJoh]

Det var ikke intuitivt for meg at sidespalten i 'Page Layout' og 'Static Sidebar' skjules helt fra breakpoint MD og nedover. Hvor i komponentene styres dette?

Var satt opp separat i storybook for et mer "relaistisk" scenario, men for komponenten sin demo er det kanskje mer forvirrende. Kan fjerne det fra demoen.

<style>{`@media (max-width: 767px){.hideOnMd{display: none;}}`}</style>

[JulianNymark]

Når jeg gir wrapper <div> (HGrid) en faktisk width så ser det bra ut i storybook, men den får en verdi på aksel right? 🤔

[JulianNymark]

Dette er vel mest pga ingen text "content" == auto velger minimum width == 0px? (sikkert noe slikt)

[KenAJoh]

Jepp, vil funke på aksel.nav.no uten width siden jeg bruker denne snippeten
export default withDsExample(Example, "static"); der static lar grid bruke hele bredden som er tilgjengelig