✨ #8 - feat: add page component

.storybook/preview-body.html

@@ -0,0 +1,8 @@
+<style>
+  html,
+  body,
+  #storybook-root {
+    height: 100%;
+    margin: 0;
+  }
+</style>

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" <<EOF
 import React from "react";
 
-import "./$component_name_lowercase.css";
+import "./$component_name_lowercase.scss";
 
 export type ${capitalized_component_name}Props = React.PropsWithChildren<{
   // Props here.

src/components/index.ts

@@ -1,3 +1,4 @@
 // Auto-generated file. Do not modify manually.
 export * from "./layout";
 export * from "./logo";
+export * from "./page";

src/components/layout/container/container.scss

@@ -1,6 +1,6 @@
 .mykn-container {
   margin: 0 auto;
-  max-width: min(1240px, calc(100% - 40px));
+  max-width: 1240px;
   width: 100%;
 }
 

src/components/logo/logo.stories.tsx

@@ -14,15 +14,15 @@ type Story = StoryObj<typeof meta>;
 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",
   },
 };
 
 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 () => {

src/components/page/index.ts

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

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;
+}

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<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PageComponent: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+  },
+};
+
+export const SamplePage: Story = {
+  args: {
+    children: (
+      <Container>
+        <Grid>
+          <Column span={12}>
+            <Logo
+              href="/?path=/story/building-blocks-page--sample-page"
+              hrefLabel="Navigate to story page"
+              label="Maykin"
+            />
+          </Column>
+        </Grid>
+      </Container>
+    ),
+  },
+};

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<PageProps> = ({ children, ...props }) => (
+  <div className="mykn-page" {...props}>
+    {children}
+  </div>
+);

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;