V2 button

.eslintignore

@@ -47,4 +47,7 @@ core
 
 lerna-debug.log
 
-**/*.spec.js
+**/*.spec.js
+
+#temp
+ui

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     "plugin:testing-library/dom",
     "plugin:jest-dom/recommended",
     "plugin:storybook/recommended",
+    "plugin:react/jsx-runtime",
   ],
   overrides: [
     {

.storybook/main.js

@@ -3,7 +3,10 @@ import { dirname, join } from "path";
 require("dotenv").config();
 
 module.exports = {
-  stories: ["../ui/(**|!(node_modules))/src/*.stories.@(ts|tsx|js|jsx)"],
+  stories: [
+    "../packages/kit/src/**/*.stories.tsx",
+    "../ui/(**|!(node_modules))/src/*.stories.@(ts|tsx|js|jsx)",
+  ],
   exclude: ["node_modules", "dist"],
 
   addons: [

.storybook/preview.js

@@ -72,7 +72,11 @@ function DarkPanel(props) {
 export const decorators = [
   (Story, Context) => {
     if (Context.story.includes("Interactions")) {
-      return <Story theme="light" />;
+      return (
+        <GlobalStyles>
+          <Story theme="light" />
+        </GlobalStyles>
+      );
     }
 
     return (

build.washingtonpost.com/docs/foundations/breakpoints.mdx

@@ -282,3 +282,41 @@ export default function Example() {
   );
 }
 ```
+
+### Using the Responsive Screen Size React Hook
+
+The `useResponsiveScreenSize` hook can be used to get the current screen size and use it in your components.
+
+<Alert variant="info">
+  <p>
+    The hook is only available in the browser and will return{" "}
+    <code>unknown</code> on the server.
+  </p>
+</Alert>
+
+#### An example using the hook
+
+Our Spectrum render engine uses the hook to render a drawer on small screens and a dialog on larger screens. This is a simplified version of the code used in the Spectrum render engine.
+
+```jsx
+import {
+  useResponsiveScreenSize,
+  screenSizesEnums,
+  Dialog,
+  Drawer,
+} from "@washingtonpost/wpds-ui-kit";
+
+export default function Example() {
+  const screenSize = useResponsiveScreenSize();
+
+  return (
+    <div>
+      {screenSize === screenSizesEnums.small ? (
+        <Drawer>{/* Drawer content */}</Drawer>
+      ) : (
+        <Dialog>{/* Dialog content */}</Dialog>
+      )}
+    </div>
+  );
+}
+```

package.json

@@ -125,8 +125,8 @@
     "experimental-publish": "make experimental-publish",
     "new-component": "make new-component",
     "new-component-with-subcomponents": "make new-component-with-subcomponents",
-    "lint": "eslint --fix --ext .ts,.tsx ui/",
-    "lint:check": "eslint --ext .ts,.tsx ui/",
+    "lint": "eslint --fix --ext .ts,.tsx packages/kit",
+    "lint:check": "eslint --ext .ts,.tsx packages/kit",
     "clean": "turbo run clean && rm -rf node_modules",
     "dev": "turbo run dev --concurrency=42",
     "start": "turbo run start",

packages/kit/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@washingtonpost/wpds-ui-kit-next",
+  "version": "2.0.0",
+  "description": "WPDS UI Kit",
+  "author": "WPDS Support <[email protected]>",
+  "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/washingtonpost/wpds-ui-kit.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "tsup src/index.ts --loader .ts=tsx --minify --format esm,cjs --dts --sourcemap --legacy-output --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --legacy-output --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "bugs": {
+    "url": "https://github.com/washingtonpost/wpds-ui-kit/issues"
+  },
+  "dependencies": {
+    "@stitches/react": "^1.2.8",
+    "@washingtonpost/wpds-assets": "^1.18.0"
+  },
+  "devDependencies": {
+    "tsup": "5.11.13",
+    "typescript": "4.5.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6 || ^17.0.2 || ^18",
+    "react-dom": "^16.8.6 || ^17.0.2 || ^18"
+  }
+}

packages/kit/src/button/Button.tsx

@@ -0,0 +1,163 @@
+import { theme, styled } from "../theme";
+
+export const Button = styled("button", {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "fit-content",
+  borderRadius: "$round",
+  cursor: "pointer",
+  border: "none",
+  appearance: "none",
+  px: "$100",
+  fontFamily: "$meta",
+  fontWeight: "$bold",
+  fontSize: "$100",
+  lineHeight: "$100",
+  gap: "$050",
+  transition: `background ${theme.transitions.fast} ${theme.transitions.inOut}`,
+  "@reducedMotion": {
+    transition: "none",
+  },
+
+  "&:disabled": {
+    color: "$onDisabled",
+    backgroundColor: "$colors$disabled",
+    borderColor: "$colors$onDisabled",
+    "@hover": {
+      "&:hover": {
+        backgroundColor: "$colors$disabled",
+      },
+    },
+  },
+
+  variants: {
+    variant: {
+      primary: {
+        background: theme.colors.primary,
+        color: theme.colors.onPrimary,
+        "@hover": {
+          "&:hover": {
+            background: theme.colors.gray60,
+          },
+        },
+      },
+      secondary: {
+        background: theme.colors.secondary,
+        color: theme.colors.onSecondary,
+        border: "1px solid $subtle",
+        "@hover": {
+          "&:hover": {
+            background: theme.colors.gray400,
+          },
+        },
+      },
+      cta: {
+        background: theme.colors.cta,
+        color: theme.colors.onCta,
+        "@hover": {
+          "&:hover": {
+            background: theme.colors.blue80,
+          },
+        },
+      },
+    },
+    density: {
+      compact: {
+        py: "$050",
+      },
+      default: {
+        py: "$075",
+      },
+    },
+    isOutline: {
+      true: {
+        background: "none",
+        border: "1px solid",
+      },
+      false: {},
+    },
+    icon: {
+      center: {
+        py: "$050",
+        px: "$050",
+        fontSize: "0",
+        lineHeight: "0",
+        gap: "0",
+        maxWidth: "fit-content",
+      },
+      left: {
+        flexDirection: "row",
+      },
+      right: {
+        flexDirection: "row-reverse",
+      },
+      none: {},
+    },
+  },
+  defaultVariants: {
+    variant: "secondary",
+    density: "default",
+    isOutline: false,
+    icon: "left",
+  },
+  compoundVariants: [
+    {
+      icon: "center",
+      density: "default",
+      css: {
+        padding: "$075",
+        fontSize: "0",
+        lineHeight: "0",
+      },
+    },
+    {
+      isOutline: true,
+      variant: "primary",
+      css: {
+        background: "none",
+        color: theme.colors.primary,
+        "@hover": {
+          "&:hover": {
+            background: theme.colors.alpha25,
+          },
+        },
+      },
+    },
+    {
+      isOutline: true,
+      variant: "secondary",
+      css: {
+        background: "none",
+        color: theme.colors.secondary,
+        "@hover": {
+          "&:hover": {
+            background: theme.colors.alpha25,
+          },
+        },
+      },
+    },
+    {
+      isOutline: true,
+      variant: "cta",
+      css: {
+        background: "none",
+        color: theme.colors.cta,
+        "@hover": {
+          "&:hover": {
+            background: theme.colors.alpha25,
+          },
+        },
+      },
+    },
+  ],
+});
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+interface ButtonInterface extends ButtonProps {
+  children: React.ReactNode;
+}
+
+export type { ButtonProps, ButtonInterface };

packages/kit/src/button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";