Skip to content

Commit

Permalink
Primitives bleed (#2331)
Browse files Browse the repository at this point in the history 
* ✨ add Bleed

* 🚧 WIP on Bleed

* 🚧 fix the weirdness of margin-block-end by adding padding

* 🚧 wip for bleed calculation of "full"

* Bleed working "full" horizontal margin

* 🚧 wip on reflectivePadding

* 🚧 wip breakpoints for bleed reflectivePadding

* working reflectivePadding

* 📝 add jsdoc

* ♻️ refactor css.ts

* ♻️ refactor style for Bleed

* improve jsdoc, remove unused CSS

* 📝 fix docs for px story

* ✨ add asChild prop

* 📝 add changeset

* 📝 add jsdoc

* ♻️ refactor stories

* 📝 fix erroneous story text

* export bleed from barrel file

* 📝 add eksempler docs
  • Loading branch information
@JulianNymark
JulianNymark authored Sep 27, 2023
1 parent 0295c9c commit 98f8729
Show file tree
Hide file tree
Showing 9 changed files with 521 additions and 78 deletions.
1 change: 1 addition & 0 deletions @navikt/core/react/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export * from "./toggle-group";
export * from "./tooltip";
export * from "./typography";
export * from "./util";
export * from "./layout/bleed";
export * from "./layout/box";
export * from "./layout/stack";
export * from "./layout/grid";
Expand Down
163 changes: 86 additions & 77 deletions @navikt/core/react/src/layout/bleed/Bleed.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,18 @@ export default {
component: Bleed,
} satisfies Meta<typeof Bleed>;

const style = (
<style>
{`
.p {
padding: 3rem;
}
.centered {
height: auto;
width: auto;
}
.testbox {
width: auto;
height: auto;
}
`}
</style>
);

export const Default = {
render: () => (
<>
{style}
<VStack gap="2">
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="10 0">
<Box className="p" background="surface-success-subtle">
<Box
padding="3"
className="p"
background="surface-success-subtle"
>
<BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
Expand All @@ -44,7 +29,11 @@ export const Default = {
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="0 10">
<Box className="p" background="surface-success-subtle">
<Box
padding="3"
className="p"
background="surface-success-subtle"
>
<BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
Expand All @@ -53,7 +42,11 @@ export const Default = {
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="10 0">
<Box className="p" background="surface-success-subtle">
<Box
padding="3"
className="p"
background="surface-success-subtle"
>
<BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
Expand All @@ -62,10 +55,12 @@ export const Default = {
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="0 10">
<Box className="p" background="surface-success-subtle">
<HStack className="centered" justify="center" align="center">
<Box className="testbox">marginBlock=&quot;0 10&quot;</Box>
</HStack>
<Box
padding="3"
className="p"
background="surface-success-subtle"
>
<BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
Expand All @@ -78,12 +73,11 @@ export const Default = {
export const AsChild = {
render: () => (
<>
{style}
<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 className="p" background="surface-success-subtle">
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
Expand All @@ -92,7 +86,7 @@ export const AsChild = {
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="0 10" asChild>
<Box className="p" background="surface-success-subtle">
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
Expand All @@ -101,7 +95,7 @@ export const AsChild = {
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="10 0" asChild>
<Box className="p" background="surface-success-subtle">
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
</Box>
</Bleed>
Expand All @@ -110,10 +104,8 @@ export const AsChild = {
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginBlock="0 10" asChild>
<Box className="p" background="surface-success-subtle">
<HStack className="centered" justify="center" align="center">
<Box className="testbox">marginBlock=&quot;0 10&quot;</Box>
</HStack>
<Box padding="3" background="surface-success-subtle">
<BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
</Box>
</Bleed>
</Box>
Expand All @@ -126,15 +118,14 @@ export const AsChild = {
export const Breakpoints = {
render: () => (
<>
{style}
<VStack gap="2">
<Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
<Box
background="surface-alt-2-subtle"
padding={{ xs: "5", md: "10" }}
>
<Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
<Box className="p" background="surface-success-subtle">
<Box padding="3" background="surface-success-subtle">
<BodyLong>
{'marginInline={{ xs: "10 0", md: "20 0" }}'}
</BodyLong>
Expand All @@ -148,7 +139,7 @@ export const Breakpoints = {
padding={{ xs: "5", md: "10" }}
>
<Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
<Box className="p" background="surface-success-subtle">
<Box padding="3" background="surface-success-subtle">
<BodyLong>
{'marginInline={{ xs: "0 10", md: "0 20" }}'}
</BodyLong>
Expand All @@ -162,7 +153,7 @@ export const Breakpoints = {
padding={{ xs: "5", md: "10" }}
>
<Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
<Box className="p" background="surface-success-subtle">
<Box padding="3" background="surface-success-subtle">
<BodyLong>
{'marginBlock={{ xs: "10 0", md: "20 0" }}'}
</BodyLong>
Expand All @@ -176,12 +167,10 @@ export const Breakpoints = {
padding={{ xs: "5", md: "10" }}
>
<Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
<Box className="p" background="surface-success-subtle">
<HStack className="centered" justify="center" align="center">
<Box className="testbox">
{'marginBlock={{ xs: "0 10", md: "0 20" }}'}
</Box>
</HStack>
<Box padding="3" background="surface-success-subtle">
<BodyLong>
{'marginBlock={{ xs: "0 10", md: "0 20" }}'}
</BodyLong>
</Box>
</Bleed>
</Box>
Expand All @@ -193,15 +182,40 @@ export const Breakpoints = {

export const Px = {
render: () => (
<Box background="surface-alt-1-subtle" padding="10">
<Box background="surface-alt-2-subtle" padding="10">
<Bleed marginInline="px 0">
<Box background="surface-success-subtle">
<BodyLong>marginInline=&quot;px 0&quot;</BodyLong>
<>
<style>
{`
.circle {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.scale {
transform: scale(5);
}
`}
</style>
<Box padding="32">
<HStack className="" gap="32">
<Box
className="circle scale"
background="surface-success-subtle"
borderRadius="full"
>
L
</Box>
<Box
className="circle scale"
background="surface-success-subtle"
borderRadius="full"
>
<Bleed marginInline="0 px">L</Bleed>
</Box>
</Bleed>
</HStack>
</Box>
</Box>
</>
),
};

Expand All @@ -216,9 +230,6 @@ export const Full = {
.maxWidth {
max-width: 300px;
}
.flex {
display: flex;
}
`}
</style>
<VStack gap="2" align="center">
Expand Down Expand Up @@ -271,36 +282,32 @@ export const ReflectivePadding = {
<>
<style>
{`
.navds-bleed {
background-color: var(--a-surface-success-subtle);
width: fit-content;
}
`}
.navds-bleed {
background-color: var(--a-surface-success-subtle);
width: fit-content;
}
`}
</style>
<h3>
Note: reflectivePadding Only really works <br /> well when asChild is
implemented
</h3>
<HStack gap="3">
<VStack gap="2">
<p>CSS string</p>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed>
<Bleed asChild>
<BodyLong>before Bleed</BodyLong>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="10 0">
<Bleed marginInline="10 0" asChild>
<BodyLong>without reflectivePadding</BodyLong>
</Bleed>
</Box>
</Box>
<Box background="surface-alt-1-subtle" padding="5">
<Box background="surface-alt-2-subtle" padding="5">
<Bleed marginInline="10 0" reflectivePadding>
<Bleed marginInline="10 0" reflectivePadding asChild>
<BodyLong>with reflectivePadding</BodyLong>
</Bleed>
</Box>
Expand All @@ -317,7 +324,7 @@ export const ReflectivePadding = {
background="surface-alt-2-subtle"
padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
>
<Bleed>
<Bleed asChild>
<BodyLong>before Bleed</BodyLong>
</Bleed>
</Box>
Expand All @@ -332,12 +339,13 @@ export const ReflectivePadding = {
>
<Bleed
marginInline={{
xs: "4",
sm: "8",
md: "12",
lg: "16",
xl: "20",
xs: "4 0",
sm: "8 0",
md: "12 0",
lg: "16 0",
xl: "20 0",
}}
asChild
>
<BodyLong>without reflectivePadding</BodyLong>
</Bleed>
Expand All @@ -353,13 +361,14 @@ export const ReflectivePadding = {
>
<Bleed
marginInline={{
xs: "4",
sm: "8",
md: "12",
lg: "16",
xl: "20",
xs: "4 0",
sm: "8 0",
md: "12 0",
lg: "16 0",
xl: "20 0",
}}
reflectivePadding
asChild
>
<BodyLong>with reflectivePadding</BodyLong>
</Bleed>
Expand Down
2 changes: 1 addition & 1 deletion @navikt/core/react/src/layout/bleed/Bleed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
*
* @example
* <Box padding="4">
* <Bleed margin="4">
* <Bleed marginInline="4" marginBlock="4">
* <BodyLong>Some content</BodyLong>
* </Bleed>
* </Box>
Expand Down
Loading

0 comments on commit 98f8729

Please sign in to comment.