From 73a0351eb8b809ecbf1935704aa979f7081b755e Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 15:48:38 +0100 Subject: [PATCH 01/14] :art: - style: small fixes for logo component --- src/components/logo/logo.css | 3 +-- src/components/logo/logo.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/logo/logo.css b/src/components/logo/logo.css index ecb9c56d..6e31612f 100644 --- a/src/components/logo/logo.css +++ b/src/components/logo/logo.css @@ -6,7 +6,7 @@ } .logo .logo__handle { - transition: transform .1s ease-in-out; + transition: transform 0.1s ease-in-out; } .logo[href]:hover .logo__handle--left, @@ -14,7 +14,6 @@ transform: translateX(-2px); } - .logo[href]:active .logo__handle--left { transform: translateX(2px); } diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx index 089a7062..c7de738c 100644 --- a/src/components/logo/logo.tsx +++ b/src/components/logo/logo.tsx @@ -16,7 +16,7 @@ export type LogoProps = { }; /** - * The Maykin Media logo + * The Maykin logo. * @param children * @param props * @constructor From 856d0f7f1e70527869b9d2a5b7e8d5af460de9a4 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 15:49:51 +0100 Subject: [PATCH 02/14] :sparkles: #8 - feat: layout components --- src/components/index.ts | 2 + src/components/layout/column/column.css | 117 ++++++++++++++++++ .../layout/column/column.stories.tsx | 43 +++++++ src/components/layout/column/column.tsx | 37 ++++++ src/components/layout/column/index.ts | 1 + src/components/layout/container/container.css | 17 +++ .../layout/container/container.stories.tsx | 21 ++++ src/components/layout/container/container.tsx | 26 ++++ src/components/layout/container/index.ts | 1 + src/components/layout/grid/grid.css | 25 ++++ src/components/layout/grid/grid.stories.tsx | 28 +++++ src/components/layout/grid/grid.tsx | 22 ++++ src/components/layout/grid/index.ts | 1 + src/components/layout/index.tsx | 2 + src/components/layout/layout.stories.tsx | 92 ++++++++++++++ 15 files changed, 435 insertions(+) create mode 100644 src/components/layout/column/column.css create mode 100644 src/components/layout/column/column.stories.tsx create mode 100644 src/components/layout/column/column.tsx create mode 100644 src/components/layout/column/index.ts create mode 100644 src/components/layout/container/container.css create mode 100644 src/components/layout/container/container.stories.tsx create mode 100644 src/components/layout/container/container.tsx create mode 100644 src/components/layout/container/index.ts create mode 100644 src/components/layout/grid/grid.css create mode 100644 src/components/layout/grid/grid.stories.tsx create mode 100644 src/components/layout/grid/grid.tsx create mode 100644 src/components/layout/grid/index.ts create mode 100644 src/components/layout/index.tsx create mode 100644 src/components/layout/layout.stories.tsx diff --git a/src/components/index.ts b/src/components/index.ts index 6c09c00a..ad82ee5d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,4 @@ // Auto-generated file. Do not modify manually. +export * from "./layout"; export * from "./logo"; +export * from "./layout/grid"; diff --git a/src/components/layout/column/column.css b/src/components/layout/column/column.css new file mode 100644 index 00000000..25860a91 --- /dev/null +++ b/src/components/layout/column/column.css @@ -0,0 +1,117 @@ +.column { + grid-column: auto / 6 span; +} + +.column--debug { + outline: 1px solid blue; +} + +.column--debug:before { + color: blue; + content: "mobile (full span)"; + display: block; + font-family: monospace; + text-align: center; +} + +.column--debug[data-testid]:before { + content: attr(data-testid); +} + +@media screen and (min-width: 768px) { + .column--span-1 { + grid-column: auto / 1 span; + } + + .column--debug.column--span-1:before { + content: "span 1"; + } + + .column--span-2 { + grid-column: auto / 2 span; + } + + .column--debug.column--span-2:before { + content: "span 2"; + } + + .column--span-3 { + grid-column: auto / span 3; + } + + .column--debug.column--span-3:before { + content: "span 3"; + } + + .column--span-4 { + grid-column: auto / span 4; + } + + .column--debug.column--span-4:before { + content: "span 4"; + } + + .column--span-5 { + grid-column: auto / span 5; + } + + .column--debug.column--span-5:before { + content: "span 5"; + } + + .column--span-6 { + grid-column: auto / span 6; + } + + .column--debug.column--span-6:before { + content: "span 6"; + } + + .column--span-7 { + grid-column: auto / span 7; + } + + .column--debug.column--span-7:before { + content: "span 7"; + } + + .column--span-8 { + grid-column: auto / span 8; + } + + .column--debug.column--span-8:before { + content: "span 8"; + } + + .column--span-9 { + grid-column: auto / span 9; + } + + .column--debug.column--span-9:before { + content: "span 9"; + } + + .column--span-10 { + grid-column: auto / span 10; + } + + .column--debug.column--span-10:before { + content: "span 10"; + } + + .column--span-11 { + grid-column: auto / span 11; + } + + .column--debug.column--span-11:before { + content: "span 11"; + } + + .column--span-12 { + grid-column: auto / span 12; + } + + .column--debug.column--span-12:before { + content: "span 12"; + } +} diff --git a/src/components/layout/column/column.stories.tsx b/src/components/layout/column/column.stories.tsx new file mode 100644 index 00000000..142e22a2 --- /dev/null +++ b/src/components/layout/column/column.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { Container } from "../container"; +import { Grid } from "../grid"; +import { Column } from "./column"; + +const meta = { + title: "Layout/Column", + component: Column, + parameters: { + layout: "fullscreen", + }, + render: (args) => ( + + + + + + + + + + + + + + + + + ), +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const ColumnComponent: Story = { + args: { + children: "The quick brown fox jumps over the lazy dog.", + debug: true, + span: 1, + }, +}; diff --git a/src/components/layout/column/column.tsx b/src/components/layout/column/column.tsx new file mode 100644 index 00000000..27aefb8a --- /dev/null +++ b/src/components/layout/column/column.tsx @@ -0,0 +1,37 @@ +import clsx from "clsx"; +import React from "react"; + +import "./column.css"; + +export type ColumnProps = React.PropsWithChildren<{ + span: number; + + /** If set, show the outline of the column. */ + debug?: boolean; +}>; + +/** + * Column component, must be placed within a Grid component. + * @param children + * @param debug + * @param span + * @param props + * @constructor + */ +export const Column: React.FC = ({ + children, + debug, + span, + ...props +}) => { + return ( +
+ {children} +
+ ); +}; diff --git a/src/components/layout/column/index.ts b/src/components/layout/column/index.ts new file mode 100644 index 00000000..dc354db7 --- /dev/null +++ b/src/components/layout/column/index.ts @@ -0,0 +1 @@ +export * from "./column"; diff --git a/src/components/layout/container/container.css b/src/components/layout/container/container.css new file mode 100644 index 00000000..3083da31 --- /dev/null +++ b/src/components/layout/container/container.css @@ -0,0 +1,17 @@ +.container { + margin: 0 auto; + max-width: min(1240px, calc(100% - 40px)); + width: 100%; +} + +.container--debug { + outline: 1px solid red; +} + +.container--debug:before { + color: red; +} + +.container--debug[data-testid]:before { + content: attr(data-testid); +} diff --git a/src/components/layout/container/container.stories.tsx b/src/components/layout/container/container.stories.tsx new file mode 100644 index 00000000..6ce30dda --- /dev/null +++ b/src/components/layout/container/container.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { Container } from "./container"; + +const meta = { + title: "Layout/Container", + component: Container, + parameters: { + layout: "fullscreen", + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const ContainerComponent: Story = { + args: { + children: "The quick brown fox jumps over the lazy dog.", + debug: true, + }, +}; diff --git a/src/components/layout/container/container.tsx b/src/components/layout/container/container.tsx new file mode 100644 index 00000000..6a7ad23c --- /dev/null +++ b/src/components/layout/container/container.tsx @@ -0,0 +1,26 @@ +import clsx from "clsx"; +import React from "react"; + +import "./container.css"; + +export type ContainerProps = React.PropsWithChildren<{ + /** If set, show the outline of the container. */ + debug?: boolean; +}>; + +/** + * Container component. + * @param children + * @param debug + * @param props + * @constructor + */ +export const Container: React.FC = ({ + children, + debug, + ...props +}) => ( +
+ {children} +
+); diff --git a/src/components/layout/container/index.ts b/src/components/layout/container/index.ts new file mode 100644 index 00000000..c5b5e8f3 --- /dev/null +++ b/src/components/layout/container/index.ts @@ -0,0 +1 @@ +export * from "./container"; diff --git a/src/components/layout/grid/grid.css b/src/components/layout/grid/grid.css new file mode 100644 index 00000000..e9d4bb9c --- /dev/null +++ b/src/components/layout/grid/grid.css @@ -0,0 +1,25 @@ +.grid { + display: grid; + grid-template-columns: repeat(6, auto); + gap: 12px; + width: 100%; +} + +.grid--debug { + outline: 1px solid green; +} + +.grid--debug:before { + color: red; +} + +.grid--debug[data-testid]:before { + content: attr(data-testid); +} + +@media screen and (min-width: 768px) { + .grid { + grid-template-columns: repeat(12, auto); + gap: 32px; + } +} diff --git a/src/components/layout/grid/grid.stories.tsx b/src/components/layout/grid/grid.stories.tsx new file mode 100644 index 00000000..b777931a --- /dev/null +++ b/src/components/layout/grid/grid.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { Container } from "../container"; +import { Grid } from "./grid"; + +const meta = { + title: "Layout/Grid", + component: Grid, + parameters: { + layout: "fullscreen", + }, + render: (args) => ( + + + + ), +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const GridComponent: Story = { + args: { + children: "The quick brown fox jumps over the lazy dog.", + debug: true, + }, +}; diff --git a/src/components/layout/grid/grid.tsx b/src/components/layout/grid/grid.tsx new file mode 100644 index 00000000..d43ae543 --- /dev/null +++ b/src/components/layout/grid/grid.tsx @@ -0,0 +1,22 @@ +import clsx from "clsx"; +import React from "react"; + +import "./grid.css"; + +export type GridProps = React.PropsWithChildren<{ + /** If set, show the outline of the grid. */ + debug?: boolean; +}>; + +/** + * Grid component, must be placed within a Container component. + * @param children + * @param debug + * @param props + * @constructor + */ +export const Grid: React.FC = ({ children, debug, ...props }) => ( +
+ {children} +
+); diff --git a/src/components/layout/grid/index.ts b/src/components/layout/grid/index.ts new file mode 100644 index 00000000..a138f850 --- /dev/null +++ b/src/components/layout/grid/index.ts @@ -0,0 +1 @@ +export * from "./grid"; diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx new file mode 100644 index 00000000..13f1397b --- /dev/null +++ b/src/components/layout/index.tsx @@ -0,0 +1,2 @@ +export * from "./container"; +export * from "./grid"; diff --git a/src/components/layout/layout.stories.tsx b/src/components/layout/layout.stories.tsx new file mode 100644 index 00000000..211cd490 --- /dev/null +++ b/src/components/layout/layout.stories.tsx @@ -0,0 +1,92 @@ +import type { Meta } from "@storybook/react"; +import React from "react"; + +import { Column } from "./column"; +import { Container } from "./container"; +import { Grid } from "./grid"; + +const meta = { + title: "Layout/Reference", + parameters: { + layout: "fullscreen", + }, + render: (args) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +} satisfies Meta; + +export default meta; + +export const RefernceLayoutDesktop = { + args: { + debug: true, + }, +}; + +export const RefernceLayoutMobile = { + args: { + debug: true, + }, + parameters: { + viewport: { defaultViewport: "mobile1" }, + }, +}; + +export const SampleLayout = { + args: { + debug: true, + }, + render: (args) => ( + + + + + + + + + + + + ), +}; From 9275321be0ce452ec619eec4d3cc3c4f18460be2 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 15:53:10 +0100 Subject: [PATCH 03/14] :label: #8 - fix: fix type error in stories file --- src/components/layout/layout.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/layout.stories.tsx b/src/components/layout/layout.stories.tsx index 211cd490..b8299796 100644 --- a/src/components/layout/layout.stories.tsx +++ b/src/components/layout/layout.stories.tsx @@ -72,7 +72,7 @@ export const SampleLayout = { args: { debug: true, }, - render: (args) => ( + render: (args: { debug: boolean }) => ( From 4085c14ff5c70f62c8519d30caa53dbd079f7b24 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 16:00:09 +0100 Subject: [PATCH 04/14] :arrow_up: #8 - fix: fix broken build due to missing clsx dependency --- package-lock.json | 11 +++++++++++ package.json | 5 ++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 5740fc23..91618017 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "maykin-ui", "version": "0.0.0", "license": "MIT", + "dependencies": { + "clsx": "^2.1.0" + }, "devDependencies": { "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-node-resolve": "^15.2.3", @@ -10164,6 +10167,14 @@ "node": ">=0.10.0" } }, + "node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", diff --git a/package.json b/package.json index 50d070ca..d2544dd4 100644 --- a/package.json +++ b/package.json @@ -79,5 +79,8 @@ "*.{css,js,jsx,ts,tsx,md}": "npm run lint:fix" }, "readme": "ERROR: No README data found!", - "_id": "maykin-ui@0.0.0" + "_id": "maykin-ui@0.0.0", + "dependencies": { + "clsx": "^2.1.0" + } } From 0916b6c0dd90d2be4a604c33f78a8c58dc430735 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 16:17:33 +0100 Subject: [PATCH 05/14] :recycle: #8 - feat: support sass stylesheets --- .eslintrc.json | 2 +- .storybook/main.ts | 12 ++++ package-lock.json | 62 +++++++++++++++++++ package.json | 2 + .../layout/column/{column.css => column.scss} | 0 src/components/layout/column/column.tsx | 2 +- .../{container.css => container.scss} | 0 src/components/layout/container/container.tsx | 2 +- .../layout/grid/{grid.css => grid.scss} | 0 src/components/layout/grid/grid.tsx | 2 +- src/components/logo/{logo.css => logo.scss} | 0 src/components/logo/logo.tsx | 2 +- 12 files changed, 81 insertions(+), 5 deletions(-) rename src/components/layout/column/{column.css => column.scss} (100%) rename src/components/layout/container/{container.css => container.scss} (100%) rename src/components/layout/grid/{grid.css => grid.scss} (100%) rename src/components/logo/{logo.css => logo.scss} (100%) diff --git a/.eslintrc.json b/.eslintrc.json index 727a02a9..9db0876a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,7 +3,7 @@ "browser": true, "es2021": true }, - "ignorePatterns": ["dist/**/*", "**/*.css"], + "ignorePatterns": ["dist/**/*", "**/*.css", "**/*.scss"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", diff --git a/.storybook/main.ts b/.storybook/main.ts index 4b07c1c8..99b6fb1b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,4 +1,5 @@ import type { StorybookConfig } from "@storybook/react-webpack5"; +import * as path from "path"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], @@ -22,5 +23,16 @@ const config: StorybookConfig = { docs: { autodocs: true, }, + webpackFinal: async (config) => { + config.module.rules.push({ + test: /\.scss$/, + use: ["style-loader", "css-loader", "sass-loader"], + include: path.resolve(__dirname, "../"), + }); + + // Add any other webpack config modifications here + + return config; + }, }; export default config; diff --git a/package-lock.json b/package-lock.json index 91618017..2818501a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,8 @@ "rollup": "^4.9.2", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", + "sass": "^1.69.7", + "sass-loader": "^13.3.3", "storybook": "^7.6.7", "tslib": "^2.6.2", "typescript": "^5.3.3" @@ -14336,6 +14338,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-cwd": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz", @@ -22293,6 +22301,60 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.69.7", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.7.tgz", + "integrity": "sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-loader": { + "version": "13.3.3", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.3.tgz", + "integrity": "sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==", + "dev": true, + "dependencies": { + "neo-async": "^2.6.2" + }, + "engines": { + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "sass-embedded": "*", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + } + } + }, "node_modules/scheduler": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", diff --git a/package.json b/package.json index d2544dd4..a4d11861 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,8 @@ "rollup": "^4.9.2", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", + "sass": "^1.69.7", + "sass-loader": "^13.3.3", "storybook": "^7.6.7", "tslib": "^2.6.2", "typescript": "^5.3.3" diff --git a/src/components/layout/column/column.css b/src/components/layout/column/column.scss similarity index 100% rename from src/components/layout/column/column.css rename to src/components/layout/column/column.scss diff --git a/src/components/layout/column/column.tsx b/src/components/layout/column/column.tsx index 27aefb8a..57780956 100644 --- a/src/components/layout/column/column.tsx +++ b/src/components/layout/column/column.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import React from "react"; -import "./column.css"; +import "./column.scss"; export type ColumnProps = React.PropsWithChildren<{ span: number; diff --git a/src/components/layout/container/container.css b/src/components/layout/container/container.scss similarity index 100% rename from src/components/layout/container/container.css rename to src/components/layout/container/container.scss diff --git a/src/components/layout/container/container.tsx b/src/components/layout/container/container.tsx index 6a7ad23c..d4000dcf 100644 --- a/src/components/layout/container/container.tsx +++ b/src/components/layout/container/container.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import React from "react"; -import "./container.css"; +import "./container.scss"; export type ContainerProps = React.PropsWithChildren<{ /** If set, show the outline of the container. */ diff --git a/src/components/layout/grid/grid.css b/src/components/layout/grid/grid.scss similarity index 100% rename from src/components/layout/grid/grid.css rename to src/components/layout/grid/grid.scss diff --git a/src/components/layout/grid/grid.tsx b/src/components/layout/grid/grid.tsx index d43ae543..4888747e 100644 --- a/src/components/layout/grid/grid.tsx +++ b/src/components/layout/grid/grid.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import React from "react"; -import "./grid.css"; +import "./grid.scss"; export type GridProps = React.PropsWithChildren<{ /** If set, show the outline of the grid. */ diff --git a/src/components/logo/logo.css b/src/components/logo/logo.scss similarity index 100% rename from src/components/logo/logo.css rename to src/components/logo/logo.scss diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx index c7de738c..d7637571 100644 --- a/src/components/logo/logo.tsx +++ b/src/components/logo/logo.tsx @@ -1,6 +1,6 @@ import React from "react"; -import "./logo.css"; +import "./logo.scss"; export type LogoProps = { /** The aria-label to set on the SVG element. */ From 056bde98456b799d44a8fcccebdf4b0a0435700a Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 16:24:37 +0100 Subject: [PATCH 06/14] :recycle: #8 - refactor: make some refactors uwing new sass support --- src/components/layout/column/column.scss | 108 +++-------------------- src/components/layout/grid/grid.scss | 4 +- src/components/logo/logo.scss | 4 +- src/settings/style.scss | 6 ++ 4 files changed, 25 insertions(+), 97 deletions(-) create mode 100644 src/settings/style.scss diff --git a/src/components/layout/column/column.scss b/src/components/layout/column/column.scss index 25860a91..5909eed1 100644 --- a/src/components/layout/column/column.scss +++ b/src/components/layout/column/column.scss @@ -1,3 +1,5 @@ +@import '../../../settings/style'; + .column { grid-column: auto / 6 span; } @@ -18,100 +20,16 @@ content: attr(data-testid); } -@media screen and (min-width: 768px) { - .column--span-1 { - grid-column: auto / 1 span; - } - - .column--debug.column--span-1:before { - content: "span 1"; - } - - .column--span-2 { - grid-column: auto / 2 span; - } - - .column--debug.column--span-2:before { - content: "span 2"; - } - - .column--span-3 { - grid-column: auto / span 3; - } - - .column--debug.column--span-3:before { - content: "span 3"; - } - - .column--span-4 { - grid-column: auto / span 4; - } - - .column--debug.column--span-4:before { - content: "span 4"; - } - - .column--span-5 { - grid-column: auto / span 5; - } - - .column--debug.column--span-5:before { - content: "span 5"; - } - - .column--span-6 { - grid-column: auto / span 6; - } - - .column--debug.column--span-6:before { - content: "span 6"; - } - - .column--span-7 { - grid-column: auto / span 7; - } - - .column--debug.column--span-7:before { - content: "span 7"; - } - - .column--span-8 { - grid-column: auto / span 8; - } - - .column--debug.column--span-8:before { - content: "span 8"; - } - - .column--span-9 { - grid-column: auto / span 9; - } - - .column--debug.column--span-9:before { - content: "span 9"; - } - - .column--span-10 { - grid-column: auto / span 10; - } - - .column--debug.column--span-10:before { - content: "span 10"; - } - - .column--span-11 { - grid-column: auto / span 11; - } - - .column--debug.column--span-11:before { - content: "span 11"; - } - - .column--span-12 { - grid-column: auto / span 12; - } - - .column--debug.column--span-12:before { - content: "span 12"; +@media screen and (min-width: $breakpoint-desktop) { + @media screen and (min-width: $breakpoint-desktop) { + @for $i from 1 through 12 { + .column--span-#{$i} { + grid-column: auto / span #{$i}; + } + + .column--debug.column--span-#{$i}:before { + content: "span #{$i}"; + } + } } } diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss index e9d4bb9c..86ff4b31 100644 --- a/src/components/layout/grid/grid.scss +++ b/src/components/layout/grid/grid.scss @@ -1,3 +1,5 @@ +@import '../../../settings/style'; + .grid { display: grid; grid-template-columns: repeat(6, auto); @@ -17,7 +19,7 @@ content: attr(data-testid); } -@media screen and (min-width: 768px) { +@media screen and (min-width: $breakpoint-desktop) { .grid { grid-template-columns: repeat(12, auto); gap: 32px; diff --git a/src/components/logo/logo.scss b/src/components/logo/logo.scss index 6e31612f..ed15e454 100644 --- a/src/components/logo/logo.scss +++ b/src/components/logo/logo.scss @@ -1,3 +1,5 @@ +@import '../../settings/style'; + .logo .logo__image { width: 100%; object-fit: contain; @@ -6,7 +8,7 @@ } .logo .logo__handle { - transition: transform 0.1s ease-in-out; + transition: transform var(--animation-duration) var(--animation-timing-function); } .logo[href]:hover .logo__handle--left, diff --git a/src/settings/style.scss b/src/settings/style.scss new file mode 100644 index 00000000..2b0603ec --- /dev/null +++ b/src/settings/style.scss @@ -0,0 +1,6 @@ +$breakpoint-desktop: 768px; + +:root { + --animation-timing-function: ease-in-out; + --animation-duration: 0.2s; +} From 89774cb332ffbf9fb3a73b848d12d54a8fed0f62 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 16:49:11 +0100 Subject: [PATCH 07/14] :construction: #8 - feat: start working on setting theme/typography variables --- src/settings/style.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/settings/style.scss b/src/settings/style.scss index 2b0603ec..c8911d88 100644 --- a/src/settings/style.scss +++ b/src/settings/style.scss @@ -3,4 +3,20 @@ $breakpoint-desktop: 768px; :root { --animation-timing-function: ease-in-out; --animation-duration: 0.2s; + + --theme-color-primary-800: #341A90; + --theme-color-primary-700: #5422B9; + --theme-color-primary-600: #8D75E6; + --theme-color-primary-400: #BDB0ED; + + --theme-shade-800: #0F172A; + --theme-shade-700: #1E293B; + --theme-shade-600: #334155; + --theme-shade-400: #475569; + + --theme-shade-1000: #000; + --theme-shade-0: #FFF; + + --typography-color-background: var(--theme-shade-0); + --typography-color-text: var(--theme-shade-1000); } From 8eefa9db35c9708fda6cf24fb6be58e7c301de92 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 16:55:42 +0100 Subject: [PATCH 08/14] :recycle: #8 - refactor: prefix classnames with mykn --- bin/create_component.sh | 4 +-- src/components/layout/column/column.scss | 12 ++++----- src/components/layout/column/column.tsx | 4 +-- .../layout/container/container.scss | 8 +++--- src/components/layout/container/container.tsx | 5 +++- src/components/layout/grid/grid.scss | 10 ++++---- src/components/layout/grid/grid.tsx | 2 +- src/components/logo/logo.scss | 16 ++++++------ src/components/logo/logo.tsx | 25 +++++++++++-------- 9 files changed, 47 insertions(+), 39 deletions(-) diff --git a/bin/create_component.sh b/bin/create_component.sh index cc891768..41a7119c 100755 --- a/bin/create_component.sh +++ b/bin/create_component.sh @@ -27,7 +27,7 @@ function create_index_file() { # Function to create the CSS file function create_css_file() { - echo ".$component_name_lowercase {" > "$2/$component_name_lowercase.css" + echo ".mykn-$component_name_lowercase {" > "$2/$component_name_lowercase.css" echo " /* Rules here. */" >> "$2/$component_name_lowercase.css" echo "}" >> "$2/$component_name_lowercase.css" } @@ -73,7 +73,7 @@ export type ${capitalized_component_name}Props = React.PropsWithChildren<{ * @constructor */ export const ${capitalized_component_name}: React.FC<${capitalized_component_name}Props> = ({ children, ...props }) => ( -
+
{children}
); diff --git a/src/components/layout/column/column.scss b/src/components/layout/column/column.scss index 5909eed1..719ffd28 100644 --- a/src/components/layout/column/column.scss +++ b/src/components/layout/column/column.scss @@ -1,14 +1,14 @@ @import '../../../settings/style'; -.column { +.mykn-column { grid-column: auto / 6 span; } -.column--debug { +.mykn-column--debug { outline: 1px solid blue; } -.column--debug:before { +.mykn-column--debug:before { color: blue; content: "mobile (full span)"; display: block; @@ -16,18 +16,18 @@ text-align: center; } -.column--debug[data-testid]:before { +.mykn-column--debug[data-testid]:before { content: attr(data-testid); } @media screen and (min-width: $breakpoint-desktop) { @media screen and (min-width: $breakpoint-desktop) { @for $i from 1 through 12 { - .column--span-#{$i} { + .mykn-column--span-#{$i} { grid-column: auto / span #{$i}; } - .column--debug.column--span-#{$i}:before { + .mykn-column--debug.column--span-#{$i}:before { content: "span #{$i}"; } } diff --git a/src/components/layout/column/column.tsx b/src/components/layout/column/column.tsx index 57780956..ccaa0dd1 100644 --- a/src/components/layout/column/column.tsx +++ b/src/components/layout/column/column.tsx @@ -26,8 +26,8 @@ export const Column: React.FC = ({ }) => { return (
diff --git a/src/components/layout/container/container.scss b/src/components/layout/container/container.scss index 3083da31..0086f74f 100644 --- a/src/components/layout/container/container.scss +++ b/src/components/layout/container/container.scss @@ -1,17 +1,17 @@ -.container { +.mykn-container { margin: 0 auto; max-width: min(1240px, calc(100% - 40px)); width: 100%; } -.container--debug { +.mykn-container--debug { outline: 1px solid red; } -.container--debug:before { +.mykn-container--debug:before { color: red; } -.container--debug[data-testid]:before { +.mykn-container--debug[data-testid]:before { content: attr(data-testid); } diff --git a/src/components/layout/container/container.tsx b/src/components/layout/container/container.tsx index d4000dcf..45aaef2c 100644 --- a/src/components/layout/container/container.tsx +++ b/src/components/layout/container/container.tsx @@ -20,7 +20,10 @@ export const Container: React.FC = ({ debug, ...props }) => ( -
+
{children}
); diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss index 86ff4b31..35060787 100644 --- a/src/components/layout/grid/grid.scss +++ b/src/components/layout/grid/grid.scss @@ -1,26 +1,26 @@ @import '../../../settings/style'; -.grid { +.mykn-grid { display: grid; grid-template-columns: repeat(6, auto); gap: 12px; width: 100%; } -.grid--debug { +.mykn-grid--debug { outline: 1px solid green; } -.grid--debug:before { +.mykn-grid--debug:before { color: red; } -.grid--debug[data-testid]:before { +.mykn-grid--debug[data-testid]:before { content: attr(data-testid); } @media screen and (min-width: $breakpoint-desktop) { - .grid { + .mykn-grid { grid-template-columns: repeat(12, auto); gap: 32px; } diff --git a/src/components/layout/grid/grid.tsx b/src/components/layout/grid/grid.tsx index 4888747e..b1a83eba 100644 --- a/src/components/layout/grid/grid.tsx +++ b/src/components/layout/grid/grid.tsx @@ -16,7 +16,7 @@ export type GridProps = React.PropsWithChildren<{ * @constructor */ export const Grid: React.FC = ({ children, debug, ...props }) => ( -
+
{children}
); diff --git a/src/components/logo/logo.scss b/src/components/logo/logo.scss index ed15e454..28e2236e 100644 --- a/src/components/logo/logo.scss +++ b/src/components/logo/logo.scss @@ -1,30 +1,30 @@ @import '../../settings/style'; -.logo .logo__image { +.mykn-logo .mykn-logo__image { width: 100%; object-fit: contain; max-width: 155px; overflow: visible; } -.logo .logo__handle { +.mykn-logo .mykn-logo__handle { transition: transform var(--animation-duration) var(--animation-timing-function); } -.logo[href]:hover .logo__handle--left, -.logo[href]:focus .logo__handle--left { +.mykn-logo[href]:hover .mykn-logo__handle--left, +.mykn-logo[href]:focus .mykn-logo__handle--left { transform: translateX(-2px); } -.logo[href]:active .logo__handle--left { +.mykn-logo[href]:active .mykn-logo__handle--left { transform: translateX(2px); } -.logo[href]:hover .logo__handle--right, -.logo[href]:focus .logo__handle--right { +.mykn-logo[href]:hover .mykn-logo__handle--right, +.mykn-logo[href]:focus .mykn-logo__handle--right { transform: translateX(2px); } -.logo[href]:active .logo__handle--right { +.mykn-logo[href]:active .mykn-logo__handle--right { transform: translateX(-2px); } diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx index d7637571..b2f5bb6f 100644 --- a/src/components/logo/logo.tsx +++ b/src/components/logo/logo.tsx @@ -30,50 +30,55 @@ export const Logo: React.FC = ({ const Tag = href ? "a" : "span"; return ( - + From 92ff73b9f6fb4cf46d5d535a76fdd29da7f79182 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 16:58:43 +0100 Subject: [PATCH 09/14] :recycle: #8 - refactor: refactor storybook catgories --- bin/create_component.sh | 2 +- src/components/index.ts | 1 - src/components/logo/logo.stories.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/bin/create_component.sh b/bin/create_component.sh index 41a7119c..fb456a14 100755 --- a/bin/create_component.sh +++ b/bin/create_component.sh @@ -40,7 +40,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { ${capitalized_component_name} } from "./$component_name_lowercase"; const meta = { - title: "Components/${capitalized_component_name}", + title: "Uncategorized/${capitalized_component_name}", component: ${capitalized_component_name}, } satisfies Meta; diff --git a/src/components/index.ts b/src/components/index.ts index ad82ee5d..7986e3ca 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,3 @@ // Auto-generated file. Do not modify manually. export * from "./layout"; export * from "./logo"; -export * from "./layout/grid"; diff --git a/src/components/logo/logo.stories.tsx b/src/components/logo/logo.stories.tsx index a1c3a7cd..f60c06d4 100644 --- a/src/components/logo/logo.stories.tsx +++ b/src/components/logo/logo.stories.tsx @@ -4,7 +4,7 @@ import { userEvent } from "@storybook/test"; import { Logo } from "./logo"; const meta = { - title: "Components/Logo", + title: "Brand/Logo", component: Logo, } satisfies Meta; From 9986f4d869e42ccba540f8823ebffb4106d63e1a Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 17:00:18 +0100 Subject: [PATCH 10/14] :bug: #8 - fix: fix logo not animating on hover --- src/components/logo/logo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx index b2f5bb6f..d5ccf1c1 100644 --- a/src/components/logo/logo.tsx +++ b/src/components/logo/logo.tsx @@ -43,12 +43,12 @@ export const Logo: React.FC = ({ aria-label={label} > From 3162a02e46f35464043105a00feeb2f974bba4bf Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 17:14:51 +0100 Subject: [PATCH 11/14] :recycle: #8 - refactor: layout system (debug) refactors --- src/components/layout/column/column.scss | 19 +++++++++---------- .../layout/column/column.stories.tsx | 5 ++--- src/components/layout/column/column.tsx | 3 +++ .../layout/container/container.scss | 6 +++++- .../layout/container/container.stories.tsx | 2 +- src/components/layout/container/container.tsx | 3 +++ src/components/layout/grid/grid.scss | 9 +++++++-- src/components/layout/grid/grid.stories.tsx | 2 +- src/components/layout/grid/grid.tsx | 3 +++ 9 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/layout/column/column.scss b/src/components/layout/column/column.scss index 719ffd28..9d068281 100644 --- a/src/components/layout/column/column.scss +++ b/src/components/layout/column/column.scss @@ -10,26 +10,25 @@ .mykn-column--debug:before { color: blue; - content: "mobile (full span)"; + content: "Mobile (full span)"; display: block; font-family: monospace; text-align: center; } .mykn-column--debug[data-testid]:before { - content: attr(data-testid); + content: attr(data-testid)!important; } @media screen and (min-width: $breakpoint-desktop) { - @media screen and (min-width: $breakpoint-desktop) { - @for $i from 1 through 12 { - .mykn-column--span-#{$i} { - grid-column: auto / span #{$i}; - } + @for $i from 1 through 12 { + .mykn-column--span-#{$i} { + grid-column: auto / span #{$i}; + } - .mykn-column--debug.column--span-#{$i}:before { - content: "span #{$i}"; - } + .mykn-column--debug.mykn-column--span-#{$i}:before { + content: "Span #{$i}"; } } } + diff --git a/src/components/layout/column/column.stories.tsx b/src/components/layout/column/column.stories.tsx index 142e22a2..bb2fc7d2 100644 --- a/src/components/layout/column/column.stories.tsx +++ b/src/components/layout/column/column.stories.tsx @@ -12,8 +12,8 @@ const meta = { layout: "fullscreen", }, render: (args) => ( - - + + @@ -36,7 +36,6 @@ type Story = StoryObj; export const ColumnComponent: Story = { args: { - children: "The quick brown fox jumps over the lazy dog.", debug: true, span: 1, }, diff --git a/src/components/layout/column/column.tsx b/src/components/layout/column/column.tsx index ccaa0dd1..c976b6e2 100644 --- a/src/components/layout/column/column.tsx +++ b/src/components/layout/column/column.tsx @@ -8,6 +8,9 @@ export type ColumnProps = React.PropsWithChildren<{ /** If set, show the outline of the column. */ debug?: boolean; + + /** Gets passed as props. */ + [index: string]: unknown; }>; /** diff --git a/src/components/layout/container/container.scss b/src/components/layout/container/container.scss index 0086f74f..a628550d 100644 --- a/src/components/layout/container/container.scss +++ b/src/components/layout/container/container.scss @@ -8,8 +8,12 @@ outline: 1px solid red; } -.mykn-container--debug:before { +.mykn-container--debug[data-testid]:before { + content: attr(data-testid); color: red; + display: block; + font-family: monospace; + text-align: center; } .mykn-container--debug[data-testid]:before { diff --git a/src/components/layout/container/container.stories.tsx b/src/components/layout/container/container.stories.tsx index 6ce30dda..a4fbacd5 100644 --- a/src/components/layout/container/container.stories.tsx +++ b/src/components/layout/container/container.stories.tsx @@ -15,7 +15,7 @@ type Story = StoryObj; export const ContainerComponent: Story = { args: { - children: "The quick brown fox jumps over the lazy dog.", + "data-testid": "Container", debug: true, }, }; diff --git a/src/components/layout/container/container.tsx b/src/components/layout/container/container.tsx index 45aaef2c..09e9aa8e 100644 --- a/src/components/layout/container/container.tsx +++ b/src/components/layout/container/container.tsx @@ -6,6 +6,9 @@ import "./container.scss"; export type ContainerProps = React.PropsWithChildren<{ /** If set, show the outline of the container. */ debug?: boolean; + + /** Gets passed as props. */ + [index: string]: unknown; }>; /** diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss index 35060787..8283701e 100644 --- a/src/components/layout/grid/grid.scss +++ b/src/components/layout/grid/grid.scss @@ -11,8 +11,13 @@ outline: 1px solid green; } -.mykn-grid--debug:before { - color: red; +.mykn-grid--debug[data-testid]:before { + content: attr(data-testid); + color: green; + display: block; + font-family: monospace; + grid-column: 1 / 12 span; + text-align: center; } .mykn-grid--debug[data-testid]:before { diff --git a/src/components/layout/grid/grid.stories.tsx b/src/components/layout/grid/grid.stories.tsx index b777931a..c0f7e3d6 100644 --- a/src/components/layout/grid/grid.stories.tsx +++ b/src/components/layout/grid/grid.stories.tsx @@ -22,7 +22,7 @@ type Story = StoryObj; export const GridComponent: Story = { args: { - children: "The quick brown fox jumps over the lazy dog.", + "data-testid": "Grid", debug: true, }, }; diff --git a/src/components/layout/grid/grid.tsx b/src/components/layout/grid/grid.tsx index b1a83eba..4e7e1681 100644 --- a/src/components/layout/grid/grid.tsx +++ b/src/components/layout/grid/grid.tsx @@ -6,6 +6,9 @@ import "./grid.scss"; export type GridProps = React.PropsWithChildren<{ /** If set, show the outline of the grid. */ debug?: boolean; + + /** Gets passed as props. */ + [index: string]: unknown; }>; /** From 46b9052b6120c3660fc9e2883361e133b9ce3b68 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 17:15:59 +0100 Subject: [PATCH 12/14] :bug: #8 - fix: fix broken links in Logo story file --- src/components/logo/logo.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/logo/logo.stories.tsx b/src/components/logo/logo.stories.tsx index f60c06d4..ae9fe329 100644 --- a/src/components/logo/logo.stories.tsx +++ b/src/components/logo/logo.stories.tsx @@ -13,7 +13,7 @@ type Story = StoryObj; export const LogoComponent: Story = { args: { - href: "/?path=/story/components-logo--logo-component", + href: "/?path=/story/brand-logo--logo-component", hrefLabel: "Navigate to logo component page.", label: "Maykin logo", }, @@ -21,7 +21,7 @@ export const LogoComponent: Story = { export const LogoAnimatesOnHoverAndClick: Story = { args: { - href: "#", + href: "/?path=/story/brand-logo--logo-component", hrefLabel: "Navigate to logo component page.", label: "Maykin logo", }, From b8b962a0f826a72126aa60bbc65063f375cb87a0 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 17:57:01 +0100 Subject: [PATCH 13/14] :sparkles: #8 - feat: add page component --- .storybook/preview-body.html | 8 ++++ bin/create_component.sh | 8 ++-- src/components/index.ts | 1 + .../layout/container/container.scss | 2 +- src/components/logo/logo.stories.tsx | 4 +- src/components/page/index.ts | 1 + src/components/page/page.scss | 9 ++++ src/components/page/page.stories.tsx | 42 +++++++++++++++++++ src/components/page/page.tsx | 19 +++++++++ src/settings/style.scss | 1 + 10 files changed, 88 insertions(+), 7 deletions(-) create mode 100644 .storybook/preview-body.html create mode 100644 src/components/page/index.ts create mode 100644 src/components/page/page.scss create mode 100644 src/components/page/page.stories.tsx create mode 100644 src/components/page/page.tsx diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 00000000..6fa7e3ef --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,8 @@ + diff --git a/bin/create_component.sh b/bin/create_component.sh index fb456a14..bbf72860 100755 --- a/bin/create_component.sh +++ b/bin/create_component.sh @@ -27,9 +27,9 @@ function create_index_file() { # Function to create the CSS file function create_css_file() { - echo ".mykn-$component_name_lowercase {" > "$2/$component_name_lowercase.css" - echo " /* Rules here. */" >> "$2/$component_name_lowercase.css" - echo "}" >> "$2/$component_name_lowercase.css" + echo ".mykn-$component_name_lowercase {" > "$2/$component_name_lowercase.scss" + echo " /* Rules here. */" >> "$2/$component_name_lowercase.scss" + echo "}" >> "$2/$component_name_lowercase.scss" } # Function to create the stories.tsx file @@ -60,7 +60,7 @@ function create_component_file() { cat > "$2/$component_name_lowercase.tsx" <; export const LogoComponent: Story = { args: { href: "/?path=/story/brand-logo--logo-component", - hrefLabel: "Navigate to logo component page.", + hrefLabel: "Navigate to story page", label: "Maykin logo", }, }; @@ -22,7 +22,7 @@ export const LogoComponent: Story = { export const LogoAnimatesOnHoverAndClick: Story = { args: { href: "/?path=/story/brand-logo--logo-component", - hrefLabel: "Navigate to logo component page.", + hrefLabel: "Navigate to story page", label: "Maykin logo", }, play: async () => { diff --git a/src/components/page/index.ts b/src/components/page/index.ts new file mode 100644 index 00000000..4962a1f6 --- /dev/null +++ b/src/components/page/index.ts @@ -0,0 +1 @@ +export * from "./page"; diff --git a/src/components/page/page.scss b/src/components/page/page.scss new file mode 100644 index 00000000..a4b06ce9 --- /dev/null +++ b/src/components/page/page.scss @@ -0,0 +1,9 @@ +@import "../../settings/style"; + +.mykn-page { + background-color: var(--theme-color-primary-200); + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 50px 20px; +} diff --git a/src/components/page/page.stories.tsx b/src/components/page/page.stories.tsx new file mode 100644 index 00000000..9cdf0fd0 --- /dev/null +++ b/src/components/page/page.stories.tsx @@ -0,0 +1,42 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { Container, Grid } from "../layout"; +import { Column } from "../layout/column"; +import { Logo } from "../logo"; +import { Page } from "./page"; + +const meta = { + title: "Building Blocks/Page", + component: Page, + parameters: { + layout: "fullscreen", + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const PageComponent: Story = { + args: { + children: "The quick brown fox jumps over the lazy dog.", + }, +}; + +export const SamplePage: Story = { + args: { + children: ( + + + + + + + + ), + }, +}; diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx new file mode 100644 index 00000000..e52d806b --- /dev/null +++ b/src/components/page/page.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +import "./page.scss"; + +export type PageProps = React.PropsWithChildren<{ + // Props here. +}>; + +/** + * Provides the base theme for a page. + * @param children + * @param props + * @constructor + */ +export const Page: React.FC = ({ children, ...props }) => ( +
+ {children} +
+); diff --git a/src/settings/style.scss b/src/settings/style.scss index c8911d88..8bb18eb8 100644 --- a/src/settings/style.scss +++ b/src/settings/style.scss @@ -8,6 +8,7 @@ $breakpoint-desktop: 768px; --theme-color-primary-700: #5422B9; --theme-color-primary-600: #8D75E6; --theme-color-primary-400: #BDB0ED; + --theme-color-primary-200: #ECF1FF; /* FIXME? */ --theme-shade-800: #0F172A; --theme-shade-700: #1E293B; From 781f4fd88447ff54f67751cb2b6620579439a8a3 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 17:58:08 +0100 Subject: [PATCH 14/14] :recycle: #8 - fix: fix typos in story names --- src/components/layout/layout.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layout/layout.stories.tsx b/src/components/layout/layout.stories.tsx index b8299796..35cc91d5 100644 --- a/src/components/layout/layout.stories.tsx +++ b/src/components/layout/layout.stories.tsx @@ -53,13 +53,13 @@ const meta = { export default meta; -export const RefernceLayoutDesktop = { +export const ReferenceLayoutDesktop = { args: { debug: true, }, }; -export const RefernceLayoutMobile = { +export const ReferenceLayoutMobile = { args: { debug: true, },