1.0.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-project",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "scripts": {
     "prepare": "husky install"

services/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-project",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -31,16 +31,16 @@
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@csstools/postcss-global-data": "^1.0.1",
-    "@storybook/addon-a11y": "^7.0.7",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-styling": "^1.0.5",
-    "@storybook/nextjs": "^7.0.7",
-    "@storybook/react": "^7.0.7",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.7",
+    "@storybook/addon-a11y": "^7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-styling": "^1.3.4",
+    "@storybook/nextjs": "^7.1.0",
+    "@storybook/react": "^7.1.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.1.0",
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
     "@svgr/cli": "^8.0.1",
@@ -66,7 +66,7 @@
     "postcss-rem": "^2.0.2",
     "prettier": "^2.6.2",
     "prettier-plugin-organize-imports": "^2.3.4",
-    "storybook": "^7.0.7",
+    "storybook": "^7.1.0",
     "stylelint": "^15.5.0",
     "stylelint-config-standard": "^33.0.0",
     "stylelint-order": "^6.0.3",

services/app/source/04-templates/LandingPage/LandingPage.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { WYSIWYG } from '../../03-components/Wysiwyg/Wysiwyg.stories';
 import LandingPageTemplate from './LandingPage';
+import SampleContent from '../../06-utility/storybook/SampleContent';
 
 const meta: Meta<typeof LandingPageTemplate> = {
   title: 'Templates/Landing Page',
@@ -11,11 +11,12 @@ const meta: Meta<typeof LandingPageTemplate> = {
 const LandingPage: StoryObj<typeof LandingPageTemplate> = {
   render: args => (
     <LandingPageTemplate {...args}>
-      {WYSIWYG.render && <WYSIWYG.render {...WYSIWYG.args} />}
+      <SampleContent>Main page content</SampleContent>
     </LandingPageTemplate>
   ),
   args: {
     title: 'Landing Page Title',
+    hidePageTitle: false,
   },
 };
 

services/app/source/04-templates/Page/Page.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Breadcrumb } from '../../03-components/Breadcrumb/Breadcrumb.stories';
-import { WYSIWYG } from '../../03-components/Wysiwyg/Wysiwyg.stories';
 import PageTemplate from './Page';
+import SampleContent from '../../06-utility/storybook/SampleContent';
 
 const meta: Meta<typeof PageTemplate> = {
   title: 'Templates/Page',
@@ -12,13 +11,11 @@ const meta: Meta<typeof PageTemplate> = {
 const Page: StoryObj<typeof PageTemplate> = {
   render: args => (
     <PageTemplate {...args}>
-      {WYSIWYG.render && <WYSIWYG.render {...WYSIWYG.args} />}
+      <SampleContent>Main page content</SampleContent>
     </PageTemplate>
   ),
   args: {
-    preContent: Breadcrumb.render ? (
-      <Breadcrumb.render {...Breadcrumb.args} />
-    ) : undefined,
+    preContent: <SampleContent>Pre-content area</SampleContent>,
     title: 'Page Title',
   },
 };

services/app/source/05-pages/Page.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { PageProps } from '../04-templates/Page/Page';
-import { Page as PageStory } from '../04-templates/Page/Page.stories';
+import PageTemplate, { PageProps } from '../04-templates/Page/Page';
 import PageWrapper from './page-wrappers/default';
+import { Breadcrumb } from '../03-components/Breadcrumb/Breadcrumb.stories';
+import React from 'react';
+import { WYSIWYG } from '../03-components/Wysiwyg/Wysiwyg.stories';
 
 interface PageStoryArgs {
   page: PageProps;
@@ -14,14 +16,18 @@ const settings: Meta<PageStoryArgs> = {
 const Page: StoryObj<PageStoryArgs> = {
   render: args => (
     <PageWrapper>
-      {PageStory.render && <PageStory.render {...args.page} />}
+      <PageTemplate {...args.page} />
     </PageWrapper>
   ),
-};
-Page.args = {
-  page: {
-    ...PageStory.args,
-    title: 'Page title',
+  args: {
+    page: {
+      preContent: Breadcrumb.render ? (
+        <Breadcrumb.render {...Breadcrumb.args} />
+      ) : undefined,
+      title: 'Page Title',
+      description: 'Demo basic page in Storybook',
+      children: WYSIWYG.render && <WYSIWYG.render {...WYSIWYG.args} />,
+    },
   },
 };
 

services/app/source/06-utility/index.css

@@ -1,4 +1,5 @@
 @layer utility {
   @import 'accessibility.css';
   @import 'alignment.css';
+  @import 'spacing.css';
 }

services/app/source/06-utility/spacing.css

@@ -0,0 +1,25 @@
+@each $value in (0, 0-5, 1, 1-5, 2, 2-5, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15) {
+  .u-spacing-block-$(value) {
+    margin-block: var(--spacing-#{$value});
+  }
+
+  .u-spacing-block-start-$(value) {
+    margin-block-start: var(--spacing-#{$value});
+  }
+
+  .u-spacing-block-end-$(value) {
+    margin-block-end: var(--spacing-#{$value});
+  }
+
+  .u-spacing-inline-$(value) {
+    margin-inline: var(--spacing-#{$value});
+  }
+
+  .u-spacing-inline-start-$(value) {
+    margin-inline-start: var(--spacing-#{$value});
+  }
+
+  .u-spacing-inline-end-$(value) {
+    margin-inline-end: var(--spacing-#{$value});
+  }
+}