From 88f42afbc495090e268e9688254ef1c113b1ba28 Mon Sep 17 00:00:00 2001 From: Arturo Silva Date: Wed, 11 Dec 2024 22:17:07 -0500 Subject: [PATCH] docs: add breakpoints explainer UI to docs --- .../Markdown/Examples/Breakpoints.jsx | 180 +++++++++ .../components/Markdown/Styling.js | 1 + .../docs/foundations/breakpoints.mdx | 56 +-- build.washingtonpost.com/package.json | 18 +- package-lock.json | 371 +++++------------- 5 files changed, 300 insertions(+), 326 deletions(-) create mode 100644 build.washingtonpost.com/components/Markdown/Examples/Breakpoints.jsx diff --git a/build.washingtonpost.com/components/Markdown/Examples/Breakpoints.jsx b/build.washingtonpost.com/components/Markdown/Examples/Breakpoints.jsx new file mode 100644 index 000000000..c5a84c7e8 --- /dev/null +++ b/build.washingtonpost.com/components/Markdown/Examples/Breakpoints.jsx @@ -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 ( + <> + {windowWidth}px + +

+ Breakpoints +

+ +
  • + sm: 0px - 767px +
    • +
  • + md: 768px - 900px +
    • +
  • + lg: 901px - 1024px +
    • +
  • + xl: 1025px - 1280px +
    • +
  • + xxl: 1281px - 1440px +
    • +     +

    + Individual{" "} + targets only the breakpoint range +

    + + + @sm + + + @md + + + @lg + + + @xl + + + @xxl + + +

    + Mobile First{" "} + + targets the end of the breakpoint range and above + +

    + + + @notSm + + + @notMd + + + @notLg + + + @notXl + + + @notXxl + + +

    + Desktop First{" "} + + targets the end of the breakpoint range and below + +

    + + + @maxSm + + + @maxMd + + + @maxLg + + + @maxXl + + + @maxXxl + + + + + ); +}; + +const Breakpoints = () => { + return ( + +