Skip to content

Commit

Permalink
[aksel.nav.no] 📝 Oppdatert eksempler for Bleed og show/hide (#2385)
Browse files Browse the repository at this point in the history 
* 📝 Oppdatert eksempler for Bleed og show/hide

* ♻️ Refactor wrapper rundt bleed-eksempler
  • Loading branch information
@KenAJoh
KenAJoh authored Oct 18, 2023
1 parent 4d6ae1a commit 6b3932b
Show file tree
Hide file tree
Showing 11 changed files with 239 additions and 363 deletions.
60 changes: 19 additions & 41 deletions aksel.nav.no/website/pages/eksempler/primitive-bleed/as-child.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,28 @@
import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
import { Bleed, Box, HStack } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";

const Example = () => {
return (
<>
<VStack gap="2">
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="10 0" asChild>
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
</Box>
<DemoWrapper>
<Bleed marginInline="10" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">Med asChild</HStack>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="0 10" asChild>
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="10 0" asChild>
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="0 10" asChild>
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
</VStack>
</>
</Bleed>
</DemoWrapper>
);
};

function DemoWrapper({ children }: { children: React.ReactNode }) {
return (
<Box background="surface-alt-3" padding="5" borderRadius="large">
<Box background="surface-subtle" padding="5" borderRadius="medium">
{children}
</Box>
</Box>
);
}

export default withDsExample(Example, {
showBreakpoints: true,
});
Expand All @@ -56,5 +33,6 @@ export const Demo = {
};

export const args = {
index: 0,
index: 4,
desc: "Vi anbefaler å bruke 'asChild'-prop der mulig. Dette reduserer dom-noder og forenkler output. For at Bleed + child-komponent skal fungere må child kunne ta inn 'className' og 'style' som prop.",
};
92 changes: 0 additions & 92 deletions aksel.nav.no/website/pages/eksempler/primitive-bleed/breakpoints.tsx
View file

This file was deleted.

55 changes: 17 additions & 38 deletions aksel.nav.no/website/pages/eksempler/primitive-bleed/default.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,28 @@
import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
import { Bleed, Box, HStack } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";

const Example = () => {
return (
<VStack gap="2">
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="10 0">
<Box padding="3" className="p" background="surface-success-subtle">
<BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
<DemoWrapper>
<Bleed marginInline="10" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">marginInline</HStack>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="0 10">
<Box padding="3" className="p" background="surface-success-subtle">
<BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="10 0">
<Box padding="3" className="p" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="0 10">
<Box padding="3" className="p" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
</VStack>
</Bleed>
</DemoWrapper>
);
};

function DemoWrapper({ children }: { children: React.ReactNode }) {
return (
<Box background="surface-alt-3" padding="5" borderRadius="large">
<Box background="surface-subtle" padding="5" borderRadius="medium">
{children}
</Box>
</Box>
);
}

export default withDsExample(Example, {
showBreakpoints: true,
});
Expand Down
60 changes: 60 additions & 0 deletions aksel.nav.no/website/pages/eksempler/primitive-bleed/directions.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { Bleed, Box, HStack, VStack } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";

const Example = () => {
return (
<VStack gap="4">
<DemoWrapper>
<Bleed marginInline="10 0" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">marginInline start</HStack>
</Box>
</Bleed>
</DemoWrapper>
<DemoWrapper>
<Bleed marginInline="0 10" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">marginInline end</HStack>
</Box>
</Bleed>
</DemoWrapper>
<DemoWrapper>
<Bleed marginBlock="10 0" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">marginBlock start</HStack>
</Box>
</Bleed>
</DemoWrapper>
<DemoWrapper>
<Bleed marginBlock="0 10" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">marginBlock end</HStack>
</Box>
</Bleed>
</DemoWrapper>
</VStack>
);
};

function DemoWrapper({ children }: { children: React.ReactNode }) {
return (
<Box background="surface-alt-3" padding="5" borderRadius="large">
<Box background="surface-subtle" padding="5" borderRadius="medium">
{children}
</Box>
</Box>
);
}

export default withDsExample(Example, {
showBreakpoints: true,
});

/* Storybook story */
export const Demo = {
render: Example,
};

export const args = {
index: 1,
};
51 changes: 19 additions & 32 deletions aksel.nav.no/website/pages/eksempler/primitive-bleed/full.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,28 @@
import { Bleed, BodyLong, Box, VStack } from "@navikt/ds-react";
import { Bleed, Box, HStack } from "@navikt/ds-react";
import { withDsExample } from "components/website-modules/examples/withDsExample";

const Example = () => {
return (
<>
<VStack gap="2" align="center">
<Box background="surface-alt-1-subtle" padding="10">
<Box background="surface-alt-2-subtle" padding="10">
<Bleed marginInline="full">
<Box background="surface-success-subtle">
<BodyLong>marginInline=&quot;full&quot;</BodyLong>
</Box>
</Bleed>
</Box>
<DemoWrapper>
<Bleed marginInline="full" asChild>
<Box padding="3" className="p" background="surface-alt-3-subtle">
<HStack justify="center">Full</HStack>
</Box>
<Box background="surface-alt-1-subtle" padding="10">
<Box background="surface-alt-2-subtle" padding="10">
<Bleed marginInline="full 0">
<Box background="surface-success-subtle">
<BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="10">
<Box background="surface-alt-2-subtle" padding="10">
<Bleed marginInline="0 full">
<Box background="surface-success-subtle">
<BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
</Box>
</Bleed>
</Box>
</Box>
</VStack>
</>
</Bleed>
</DemoWrapper>
);
};

function DemoWrapper({ children }: { children: React.ReactNode }) {
return (
<Box background="surface-alt-3" padding="5" borderRadius="large">
<Box background="surface-subtle" padding="5" borderRadius="medium">
{children}
</Box>
</Box>
);
}

export default withDsExample(Example, {
showBreakpoints: true,
});
Expand All @@ -47,5 +33,6 @@ export const Demo = {
};

export const args = {
index: 0,
index: 3,
desc: "Full lar Bleed bryte ut av parent og dekke hele skjermbredden. Dette kan være nyttig for 'Heroes' eller lignende elementer som ønsker å bryte ut av parent-layout",
};
Loading

0 comments on commit 6b3932b

Please sign in to comment.