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 Hello World; +} +``` 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 ", + "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; 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; + +const Template: Story = (args) => ( + <> + Extra Large + Large + Medium + Small + Fluid + Play + +); + +export const Container = Template.bind({}); + +Container.args = {}; + +Container.decorators = [ + (Story) => ( + *": { + border: "1px dashed #94538c", + width: "100%", + background: "rgb(148, 83, 140, 0.2)", + height: "$500", + color: "$primary", + }, + }} + > + + + ), +]; 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";