From d5d0153fe8afe4982efea258e390b566284198ce Mon Sep 17 00:00:00 2001
From: artmsilva <artmsilva@gmail.com>
Date: Wed, 9 Feb 2022 09:55:33 -0500
Subject: [PATCH] feat: container
---
.storybook/main.js | 2 +-
package-lock.json | 140 ++++++++++++++----
.../component/src/play.stories.tsx.hbs | 2 +-
ui/container/README.md | 11 ++
ui/container/package.json | 44 ++++++
ui/container/src/Container.tsx | 74 +++++++++
ui/container/src/index.ts | 1 +
ui/container/src/play.spec.ts | 7 +
ui/container/src/play.stories.tsx | 54 +++++++
ui/kit/package.json | 8 +-
ui/kit/src/index.ts | 1 +
11 files changed, 307 insertions(+), 37 deletions(-)
create mode 100644 ui/container/README.md
create mode 100644 ui/container/package.json
create mode 100644 ui/container/src/Container.tsx
create mode 100644 ui/container/src/index.ts
create mode 100644 ui/container/src/play.spec.ts
create mode 100644 ui/container/src/play.stories.tsx
diff --git a/.storybook/main.js b/.storybook/main.js
index 8879ed099..f45082ec6 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -31,7 +31,7 @@ module.exports = {
return config;
},
features: {
- storyStoreV7: false,
+ storyStoreV7: true,
},
framework: "@storybook/react",
core: {
diff --git a/package-lock.json b/package-lock.json
index 4610ba63c..afbd483b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21232,6 +21232,10 @@
"resolved": "ui/box",
"link": true
},
+ "node_modules/@washingtonpost/wpds-container": {
+ "resolved": "ui/container",
+ "link": true
+ },
"node_modules/@washingtonpost/wpds-icon": {
"resolved": "ui/icon",
"link": true
@@ -59868,17 +59872,17 @@
}
},
"ssr-testing": {
- "version": "0.2.0",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@next/bundle-analyzer": "^12.0.7",
"@washingtonpost/site-components": "latest",
"@washingtonpost/wpds-assets": "^1.1.13",
- "@washingtonpost/wpds-box": "0.2.0",
- "@washingtonpost/wpds-icon": "0.2.0",
- "@washingtonpost/wpds-theme": "0.2.0",
- "@washingtonpost/wpds-ui-kit": "0.2.0",
- "@washingtonpost/wpds-visually-hidden": "0.2.0",
+ "@washingtonpost/wpds-box": "0.2.1",
+ "@washingtonpost/wpds-icon": "0.2.1",
+ "@washingtonpost/wpds-theme": "0.2.1",
+ "@washingtonpost/wpds-ui-kit": "0.2.1",
+ "@washingtonpost/wpds-visually-hidden": "0.2.1",
"next": "^12.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2"
@@ -59890,11 +59894,11 @@
},
"ui/box": {
"name": "@washingtonpost/wpds-box",
- "version": "0.2.0",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-theme": "0.2.0"
+ "@washingtonpost/wpds-theme": "0.2.1"
},
"devDependencies": {
"parcel": "^2.0.1",
@@ -59918,13 +59922,55 @@
"node": ">=0.10.0"
}
},
+ "ui/container": {
+ "version": "0.1.0-experimental.20",
+ "license": "ISC",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@washingtonpost/wpds-theme": "0.1.0-experimental.20"
+ },
+ "devDependencies": {
+ "parcel": "^2.0.1",
+ "react": "^16.14.0"
+ },
+ "peerDependencies": {
+ "@washingtonpost/wpds-theme": "*",
+ "react": ">=16.8.6"
+ }
+ },
+ "ui/container/node_modules/@washingtonpost/wpds-theme": {
+ "version": "0.1.0-experimental.20",
+ "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-theme/-/wpds-theme-0.1.0-experimental.20.tgz",
+ "integrity": "sha512-ycfqHuojr5jJsMn2UPcoWyDrGc6cZ/Tv6vTan/rz7IYn1513Nh07BvOsLbL4o1aixDuPhVO7OThR54aLbjaQwA==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@stitches/react": "^1.2.6"
+ },
+ "peerDependencies": {
+ "@stitches/react": "*"
+ }
+ },
+ "ui/container/node_modules/react": {
+ "version": "16.14.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+ "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+ "dev": true,
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.6.2"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"ui/icon": {
"name": "@washingtonpost/wpds-icon",
- "version": "0.2.0",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-visually-hidden": "0.2.0"
+ "@washingtonpost/wpds-visually-hidden": "0.2.1"
},
"devDependencies": {
"parcel": "^2.0.1",
@@ -59950,14 +59996,15 @@
},
"ui/kit": {
"name": "@washingtonpost/wpds-ui-kit",
- "version": "0.2.0",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-box": "0.2.0",
- "@washingtonpost/wpds-icon": "0.2.0",
- "@washingtonpost/wpds-theme": "0.2.0",
- "@washingtonpost/wpds-visually-hidden": "0.2.0"
+ "@washingtonpost/wpds-box": "0.2.1",
+ "@washingtonpost/wpds-container": "0.1.0-experimental.20",
+ "@washingtonpost/wpds-icon": "0.2.1",
+ "@washingtonpost/wpds-theme": "0.2.1",
+ "@washingtonpost/wpds-visually-hidden": "0.2.1"
},
"devDependencies": {
"@swc/cli": "^0.1.55",
@@ -59966,6 +60013,7 @@
},
"peerDependencies": {
"@washingtonpost/wpds-box": "*",
+ "@washingtonpost/wpds-container": "*",
"@washingtonpost/wpds-icon": "*",
"@washingtonpost/wpds-theme": "*",
"@washingtonpost/wpds-visually-hidden": "*"
@@ -59973,7 +60021,7 @@
},
"ui/theme": {
"name": "@washingtonpost/wpds-theme",
- "version": "0.2.0",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.13.10",
@@ -59988,11 +60036,11 @@
},
"ui/visually-hidden": {
"name": "@washingtonpost/wpds-visually-hidden",
- "version": "0.2.0",
+ "version": "0.2.1",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-theme": "0.2.0"
+ "@washingtonpost/wpds-theme": "0.2.1"
},
"devDependencies": {
"parcel": "^2.0.1",
@@ -76208,7 +76256,7 @@
"version": "file:ui/box",
"requires": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-theme": "0.2.0",
+ "@washingtonpost/wpds-theme": "0.2.1",
"parcel": "^2.0.1",
"react": "^16.14.0"
},
@@ -76224,11 +76272,42 @@
}
}
},
+ "@washingtonpost/wpds-container": {
+ "version": "file:ui/container",
+ "requires": {
+ "@babel/runtime": "^7.13.10",
+ "@washingtonpost/wpds-theme": "0.1.0-experimental.20",
+ "parcel": "^2.0.1",
+ "react": "^16.14.0"
+ },
+ "dependencies": {
+ "@washingtonpost/wpds-theme": {
+ "version": "0.1.0-experimental.20",
+ "resolved": "https://registry.npmjs.org/@washingtonpost/wpds-theme/-/wpds-theme-0.1.0-experimental.20.tgz",
+ "integrity": "sha512-ycfqHuojr5jJsMn2UPcoWyDrGc6cZ/Tv6vTan/rz7IYn1513Nh07BvOsLbL4o1aixDuPhVO7OThR54aLbjaQwA==",
+ "requires": {
+ "@babel/runtime": "^7.13.10",
+ "@stitches/react": "^1.2.6"
+ }
+ },
+ "react": {
+ "version": "16.14.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+ "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+ "dev": true,
+ "requires": {
+ "loose-envify": "^1.1.0",
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.6.2"
+ }
+ }
+ }
+ },
"@washingtonpost/wpds-icon": {
"version": "file:ui/icon",
"requires": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-visually-hidden": "0.2.0",
+ "@washingtonpost/wpds-visually-hidden": "0.2.1",
"parcel": "^2.0.1",
"react": "^16.14.0"
},
@@ -76258,10 +76337,11 @@
"@babel/runtime": "^7.13.10",
"@swc/cli": "^0.1.55",
"@swc/core": "^1.2.122",
- "@washingtonpost/wpds-box": "0.2.0",
- "@washingtonpost/wpds-icon": "0.2.0",
- "@washingtonpost/wpds-theme": "0.2.0",
- "@washingtonpost/wpds-visually-hidden": "0.2.0",
+ "@washingtonpost/wpds-box": "0.2.1",
+ "@washingtonpost/wpds-container": "0.1.0-experimental.20",
+ "@washingtonpost/wpds-icon": "0.2.1",
+ "@washingtonpost/wpds-theme": "0.2.1",
+ "@washingtonpost/wpds-visually-hidden": "0.2.1",
"parcel": "^2.0.1"
}
},
@@ -76269,7 +76349,7 @@
"version": "file:ui/visually-hidden",
"requires": {
"@babel/runtime": "^7.13.10",
- "@washingtonpost/wpds-theme": "0.2.0",
+ "@washingtonpost/wpds-theme": "0.2.1",
"parcel": "^2.0.1",
"react": "^16.14.0"
},
@@ -105005,11 +105085,11 @@
"@types/react": "^17.0.35",
"@washingtonpost/site-components": "latest",
"@washingtonpost/wpds-assets": "^1.1.13",
- "@washingtonpost/wpds-box": "0.2.0",
- "@washingtonpost/wpds-icon": "0.2.0",
- "@washingtonpost/wpds-theme": "0.2.0",
- "@washingtonpost/wpds-ui-kit": "0.2.0",
- "@washingtonpost/wpds-visually-hidden": "0.2.0",
+ "@washingtonpost/wpds-box": "0.2.1",
+ "@washingtonpost/wpds-icon": "0.2.1",
+ "@washingtonpost/wpds-theme": "0.2.1",
+ "@washingtonpost/wpds-ui-kit": "0.2.1",
+ "@washingtonpost/wpds-visually-hidden": "0.2.1",
"next": "^12.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
diff --git a/plop-templates/component/src/play.stories.tsx.hbs b/plop-templates/component/src/play.stories.tsx.hbs
index b3dde2b53..29aea0cdf 100644
--- a/plop-templates/component/src/play.stories.tsx.hbs
+++ b/plop-templates/component/src/play.stories.tsx.hbs
@@ -1,7 +1,7 @@
import * as React from "react";
import { Story, Meta } from "@storybook/react";
import { within, userEvent } from "@storybook/testing-library";
-import { {{ componentName } as Component } } from "./";
+import { {{ componentName }} as Component } from "./";
export default {
diff --git a/ui/container/README.md b/ui/container/README.md
new file mode 100644
index 000000000..cfbdb6b2e
--- /dev/null
+++ b/ui/container/README.md
@@ -0,0 +1,11 @@
+# Container
+
+The container centers your content horizontally. It's the most basic layout element.
+
+```jsx
+import { Container } from "@washingtonpost/wpds-ui-kit";
+
+function Component() {
+ return <Container>Hello World</Container>;
+}
+```
diff --git a/ui/container/package.json b/ui/container/package.json
new file mode 100644
index 000000000..912f3df03
--- /dev/null
+++ b/ui/container/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "@washingtonpost/wpds-container",
+ "version": "0.1.0-experimental.20",
+ "description": "The container centers your content horizontally. It's the most basic layout element.",
+ "author": "artmsilva <artmsilva@gmail.com>",
+ "homepage": "https://github.com/WPMedia/wpds-ui-kit#readme",
+ "license": "ISC",
+ "source": "src/index.ts",
+ "main": "dist/index.js",
+ "module": "dist/index.module.js",
+ "types": "dist/index.d.ts",
+ "files": [
+ "dist",
+ "README.md",
+ "src"
+ ],
+ "sideEffects": false,
+ "publishConfig": {
+ "access": "public"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/WPMedia/wpds-ui-kit.git"
+ },
+ "scripts": {
+ "test": "echo \"Error: run tests from root\" && exit 1",
+ "build": "npx parcel build --log-level verbose --no-cache"
+ },
+ "bugs": {
+ "url": "https://github.com/WPMedia/wpds-ui-kit/issues"
+ },
+ "devDependencies": {
+ "parcel": "^2.0.1",
+ "react": "^16.14.0"
+ },
+ "peerDependencies": {
+ "@washingtonpost/wpds-theme": "*",
+ "react": ">=16.8.6"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@washingtonpost/wpds-theme": "0.1.0-experimental.20"
+ }
+}
diff --git a/ui/container/src/Container.tsx b/ui/container/src/Container.tsx
new file mode 100644
index 000000000..1b083580b
--- /dev/null
+++ b/ui/container/src/Container.tsx
@@ -0,0 +1,74 @@
+import * as Theme from "@washingtonpost/wpds-theme";
+import type * as Stitches from "@stitches/react";
+
+const NAME = "Container";
+
+/**
+ * Container Yo
+ */
+export const Container = Theme.styled("div", {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "center",
+ margin: "0 auto",
+
+ $$extraLarge: "1440px",
+ $$large: "1024px",
+ $$medium: "900px",
+ $$small: "768px",
+ $$extraSmall: "767px",
+
+ variants: {
+ size: {
+ fluid: {
+ width: "100%",
+ },
+ small: {
+ "@media (min-width: 768px)": {
+ maxWidth: "$$small",
+ },
+ "@media (min-width: 900px)": {
+ maxWidth: "$$medium",
+ },
+ "@media (min-width: 1024px)": {
+ maxWidth: "$$large",
+ },
+ "@media (min-width: 1440px)": {
+ maxWidth: "$$extraLarge",
+ },
+ },
+ medium: {
+ "@media (min-width: 900px)": {
+ maxWidth: "$$medium",
+ },
+ "@media (min-width: 1024px)": {
+ maxWidth: "$$large",
+ },
+ "@media (min-width: 1440px)": {
+ maxWidth: "$$extraLarge",
+ },
+ },
+ large: {
+ "@media (min-width: 1024px)": {
+ maxWidth: "$$large",
+ },
+ "@media (min-width: 1440px)": {
+ maxWidth: "$$extraLarge",
+ },
+ },
+ extraLarge: {
+ "@media (min-width: 1440px)": {
+ maxWidth: "$$extraLarge",
+ },
+ },
+ },
+ },
+ defaultVariants: {
+ size: "medium",
+ },
+});
+
+Container.displayName = NAME;
+
+export type ContainerProps = Stitches.VariantProps<typeof Container>;
diff --git a/ui/container/src/index.ts b/ui/container/src/index.ts
new file mode 100644
index 000000000..18e90b7e9
--- /dev/null
+++ b/ui/container/src/index.ts
@@ -0,0 +1 @@
+export * from "./Container";
\ No newline at end of file
diff --git a/ui/container/src/play.spec.ts b/ui/container/src/play.spec.ts
new file mode 100644
index 000000000..0e2b59603
--- /dev/null
+++ b/ui/container/src/play.spec.ts
@@ -0,0 +1,7 @@
+import { test, expect } from "@playwright/test";
+
+test("basic test", async ({ page }) => {
+ await page.goto("http://localhost:3000/kitchen-sink");
+ const title = page.locator("[data-testid=skip-link]");
+ await expect(title).toHaveText("Hello, World!");
+});
diff --git a/ui/container/src/play.stories.tsx b/ui/container/src/play.stories.tsx
new file mode 100644
index 000000000..5ce963f89
--- /dev/null
+++ b/ui/container/src/play.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Story, Meta } from "@storybook/react";
+import { Container as Component } from "./";
+import { Box } from "@washingtonpost/wpds-box";
+
+export default {
+ title: "Container",
+ component: Component,
+ argTypes: {
+ size: {
+ control: {
+ type: "select",
+ options: ["fluid", "small", "medium", "large", "extraLarge"],
+ },
+ },
+ },
+} as Meta<typeof Component>;
+
+const Template: Story<typeof Component> = (args) => (
+ <>
+ <Component size="extraLarge">Extra Large</Component>
+ <Component size="large">Large</Component>
+ <Component size="medium">Medium</Component>
+ <Component size="small">Small</Component>
+ <Component size="fluid">Fluid</Component>
+ <Component {...args}>Play</Component>
+ </>
+);
+
+export const Container = Template.bind({});
+
+Container.args = {};
+
+Container.decorators = [
+ (Story) => (
+ <Box
+ css={{
+ display: "grid",
+ width: "100%",
+ gridTemplateRows: "1fr",
+ rowGap: "$100",
+ "& > *": {
+ border: "1px dashed #94538c",
+ width: "100%",
+ background: "rgb(148, 83, 140, 0.2)",
+ height: "$500",
+ color: "$primary",
+ },
+ }}
+ >
+ <Story />
+ </Box>
+ ),
+];
diff --git a/ui/kit/package.json b/ui/kit/package.json
index f7d1ae6a5..f6069b833 100644
--- a/ui/kit/package.json
+++ b/ui/kit/package.json
@@ -8,11 +8,7 @@
"source": "src/index.ts",
"main": "dist/index.js",
"types": "dist/index.d.ts",
- "files": [
- "dist",
- "README.md",
- "src"
- ],
+ "files": ["dist", "README.md", "src"],
"sideEffects": false,
"repository": {
"type": "git",
@@ -29,6 +25,7 @@
"url": "https://github.com/WPMedia/wpds-ui-kit/issues"
},
"dependencies": {
+ "@washingtonpost/wpds-container": "0.1.0-experimental.20",
"@babel/runtime": "^7.13.10",
"@washingtonpost/wpds-box": "0.2.1",
"@washingtonpost/wpds-icon": "0.2.1",
@@ -41,6 +38,7 @@
"parcel": "^2.0.1"
},
"peerDependencies": {
+ "@washingtonpost/wpds-container": "*",
"@washingtonpost/wpds-box": "*",
"@washingtonpost/wpds-icon": "*",
"@washingtonpost/wpds-theme": "*",
diff --git a/ui/kit/src/index.ts b/ui/kit/src/index.ts
index 2003dbf58..d7c0ae526 100644
--- a/ui/kit/src/index.ts
+++ b/ui/kit/src/index.ts
@@ -1,4 +1,5 @@
// insert new component exports here
+export * from "@washingtonpost/wpds-container";
export * from "@washingtonpost/wpds-theme";
export * from "@washingtonpost/wpds-icon";
export * from "@washingtonpost/wpds-visually-hidden";