Skip to content

Commit

Permalink
docs: add breakpoints explainer UI to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@artmsilva
artmsilva committed Dec 12, 2024
1 parent feb861d commit 88f42af
Show file tree
Hide file tree
Showing 5 changed files with 300 additions and 326 deletions.
180 changes: 180 additions & 0 deletions build.washingtonpost.com/components/Markdown/Examples/Breakpoints.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import React, { useState, useEffect } from "react";
import { theme, styled, Box } from "@washingtonpost/wpds-ui-kit";

const Ruler = styled("div", {
zIndex: "$offer",
position: "fixed",
top: "3rem",
left: 0,
borderInline: `2px solid ${theme.colors.cta}`,
width: "calc(100% - 4px)",
textAlign: "center",
backgroundImage: `linear-gradient(0deg, transparent 0 50%, ${theme.colors.cta} 50% calc(50% + 2px), transparent calc(50% + 2px));`,
backgroundColor: "$ctaContainer",
fontFamily: "monospace",
fontSize: theme.fontSizes["075"],
paddingBlockEnd: theme.space["100"],
color: theme.colors.cta,
fontWeight: theme.fontWeights.bold,
});

const Body = styled("div", {
paddingBlock: "1px",
fontFamily: theme.fonts.meta,
placeItems: "left"
});

const PointsList = styled("ul", {
display: "flex",
paddingInlineStart: 0,
gap: theme.space["150"].value,
listStyle: "none",
marginBlock: 0,
fontSize: theme.fontSizes["075"].value,
});

const StyledBox = styled("div", {
width: "80px",
height: "80px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: theme.radii["050"],

variants: {
breakpointActive: {
true: {
backgroundColor: theme.colors.success,
color: theme.colors.secondary,
fontWeight: theme.fontWeights.bold,
},
false: {
backgroundColor: theme.colors.subtle,
},
},
},
});

const Row = styled("div", { display: "flex", gap: "$050" });

const Description = styled("span", {
fontSize: theme.fontSizes["112"],
color: theme.colors.accessible,
fontWeight: theme.fontWeights.regular,
});

const Template = () => {
const [windowWidth, setWindowWidth] = useState(0);

useEffect(() => {
setWindowWidth(window.innerWidth);
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

return (
<>
<Ruler>{windowWidth}px</Ruler>
<Body>
<h1 style={{ marginBlockStart: 0, marginBlockEnd: "0.5rem" }}>
Breakpoints
</h1>
<PointsList>
<li>
<strong>sm</strong>: 0px - 767px
</li>
<li>
<strong>md</strong>: 768px - 900px
</li>
<li>
<strong>lg</strong>: 901px - 1024px
</li>
<li>
<strong>xl</strong>: 1025px - 1280px
</li>
<li>
<strong>xxl</strong>: 1281px - 1440px
</li>
</PointsList>
<h2>
Individual{" "}
<Description>targets only the breakpoint range</Description>
</h2>
<Row>
<StyledBox breakpointActive={{ "@initial": false, "@sm": true }}>
@sm
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@md": true }}>
@md
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@lg": true }}>
@lg
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@xl": true }}>
@xl
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@xxl": true }}>
@xxl
</StyledBox>
</Row>
<h2>
Mobile First{" "}
<Description>
targets the end of the breakpoint range and above
</Description>
</h2>
<Row>
<StyledBox breakpointActive={{ "@initial": false, "@notSm": true }}>
@notSm
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@notMd": true }}>
@notMd
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@notLg": true }}>
@notLg
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@notXl": true }}>
@notXl
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@notXxl": true }}>
@notXxl
</StyledBox>
</Row>
<h2>
Desktop First{" "}
<Description>
targets the end of the breakpoint range and below
</Description>
</h2>
<Row>
<StyledBox breakpointActive={{ "@initial": false, "@maxSm": true }}>
@maxSm
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@maxMd": true }}>
@maxMd
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@maxLg": true }}>
@maxLg
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@maxXl": true }}>
@maxXl
</StyledBox>
<StyledBox breakpointActive={{ "@initial": false, "@maxXxl": true }}>
@maxXxl
</StyledBox>
</Row>
</Body>
</>
);
};

const Breakpoints = () => {
return (
<Box>
<Template />
</Box>
);
};

export default Breakpoints;
1 change: 1 addition & 0 deletions build.washingtonpost.com/components/Markdown/Styling.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ const components = {
{children}
</Tabs.Content>
),
Breakpoints: dynamic(() => import("./Examples/Breakpoints")),
};

export default components;
56 changes: 1 addition & 55 deletions build.washingtonpost.com/docs/foundations/breakpoints.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,61 +14,7 @@ WPDS has 5 breakpoints with the following values

<BR />

```jsx withPreview
export default function Example() {
const BreakpointExample = styled("div", {
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: theme.colors.secondary,
color: theme.colors.onSecondary,
width: "150px",
height: "150px",
variants: {
color: {
orange: {
backgroundColor: theme.colors.orange300,
"&:before": {
content: "sm",
},
},
yellow: {
backgroundColor: theme.colors.gold300,
"&:before": {
content: "md",
},
},
green: {
backgroundColor: theme.colors.green300,
"&:before": {
content: "lg",
},
},
blue: {
backgroundColor: theme.colors.blue300,
"&:before": {
content: "xl",
},
},
},
},
});

return (
<div>
<p>Resize window to update</p>
<BreakpointExample
color={{
"@sm": "orange",
"@md": "yellow",
"@lg": "green",
"@xl": "blue",
}}
></BreakpointExample>
</div>
);
}
```
<Breakpoints />

<BR />

Expand Down
18 changes: 9 additions & 9 deletions build.washingtonpost.com/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
"@radix-ui/react-collapsible": "^1.0.0",
"@radix-ui/react-toggle-group": "^1.0.1",
"@stitches/react": "1.3.1-1",
"@washingtonpost/front-end-utils": "0.5.17-alpha.1",
"@washingtonpost/site-favicons": "0.3.4-alpha.1",
"@washingtonpost/site-footer": "0.25.3-alpha.1",
"@washingtonpost/tachyons-css": "^1.8.0",
"@washingtonpost/wpds-assets": "^2.9.0",
"@washingtonpost/wpds-kitchen-sink": "2.10.0",
"@washingtonpost/wpds-tailwind-theme": "2.10.0",
"@washingtonpost/wpds-tokens": "2.10.0",
"@washingtonpost/front-end-utils": "latest",
"@washingtonpost/site-favicons": "latest",
"@washingtonpost/site-footer": "latest",
"@washingtonpost/tachyons-css": "latest",
"@washingtonpost/wpds-assets": "latest",
"@washingtonpost/wpds-kitchen-sink": "latest",
"@washingtonpost/wpds-tailwind-theme": "latest",
"@washingtonpost/wpds-tokens": "latest",
"@washingtonpost/wpds-ui-kit": "file:../packages/kit",
"fuse.js": "^6.6.2",
"gray-matter": "^4.0.2",
Expand Down Expand Up @@ -79,6 +79,6 @@
"overrides": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@washingtonpost/wpds-assets": "^2.9.0"
"@washingtonpost/wpds-assets": "latest"
}
}
Loading

0 comments on commit 88f42af

Please sign in to comment.