refactored constrain to be a component

services/app/source/01-global/index.css

@@ -1,6 +1,5 @@
 @layer global {
   @import './normalize/normalize';
   @import './html-elements/index';
-  @import './constrain/constrain';
   @import './icon/icon';
 }

services/app/source/02-layouts/Constrain/Constrain.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import SampleContent from '../../06-utility/storybook/SampleContent';
+import constrainArgs from './constrain.yml';
+import ConstrainLayout from './Constrain';
+
+const meta: Meta<typeof ConstrainLayout> = {
+  title: 'Layouts/Constrain',
+  component: ConstrainLayout,
+};
+
+type Story = StoryObj<typeof ConstrainLayout>;
+
+const Constrain: Story = {
+  render: args => (
+    <ConstrainLayout {...args}>
+      <SampleContent>Constrain Layout Content</SampleContent>
+    </ConstrainLayout>
+  ),
+  args: constrainArgs,
+};
+export default meta;
+export { Constrain };

services/app/source/02-layouts/Constrain/Constrain.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import { GessoComponent } from 'gesso';
+import { ReactNode } from 'react';
+import styles from './constrain.module.css';
+
+interface ConstrainProps extends GessoComponent {
+  children?: ReactNode;
+  isHidden?: boolean;
+}
+
+function Constrain({
+  children,
+  isHidden = false,
+  modifierClasses,
+}: ConstrainProps): JSX.Element {
+  return isHidden ? (
+    <>{children}</>
+  ) : (
+    <div className={clsx(styles.constrain, modifierClasses)}>{children}</div>
+  );
+}
+
+export default Constrain;

services/app/source/02-layouts/Constrain/constrain.yml

@@ -0,0 +1,2 @@
+---
+modifierClasses: ''

services/app/source/02-layouts/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
 import styles from './footer.module.css';
 
@@ -18,15 +19,9 @@ function Footer({
       className={clsx(styles.wrapper, modifierClasses)}
       role="contentinfo"
     >
-      <div
-        className={clsx(
-          styles.inner,
-          hasConstrain && 'constrain',
-          constrainClasses,
-        )}
-      >
-        {children}
-      </div>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
+        <div className={styles.inner}>{children}</div>
+      </Constrain>
     </footer>
   );
 }

services/app/source/02-layouts/Header/Header.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
 import styles from './header.module.css';
 
@@ -15,15 +16,9 @@ function Header({
 }: HeaderProps): JSX.Element {
   return (
     <header role="banner" className={clsx(styles.wrapper, modifierClasses)}>
-      <div
-        className={clsx(
-          styles.inner,
-          hasConstrain && 'constrain',
-          constrainClasses,
-        )}
-      >
-        {children}
-      </div>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
+        <div className={styles.inner}>{children}</div>
+      </Constrain>
     </header>
   );
 }

services/app/source/02-layouts/Main/Main.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ReactNode } from 'react';
 import styles from './main.module.css';
 
@@ -22,9 +23,9 @@ function Main({
       role="main"
       tabIndex={-1}
     >
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         {children}
-      </div>
+      </Constrain>
     </main>
   );
 }

services/app/source/02-layouts/Section/Section.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ConstrainComponent } from 'gesso';
+import Constrain from '../Constrain/Constrain';
 import { ElementType, ReactNode } from 'react';
 import styles from './section.module.css';
 
@@ -19,10 +20,10 @@ function Section({
 }: SectionProps): JSX.Element {
   return (
     <section className={clsx(styles.section, modifierClasses)}>
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         {title && <TitleElement className={styles.title}>{title}</TitleElement>}
         <div className={styles.content}>{children}</div>
-      </div>
+      </Constrain>
     </section>
   );
 }

services/app/source/03-components/Breadcrumb/Breadcrumb.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { GessoComponent } from 'gesso';
+import Constrain from '../../02-layouts/Constrain/Constrain';
 import Link from 'next/link';
 import { ElementType } from 'react';
 import styles from './breadcrumb.module.css';
@@ -30,7 +31,7 @@ function Breadcrumb({
       aria-labelledby={breadcrumbId}
       className={styles.breadcrumb}
     >
-      <div className="constrain">
+      <Constrain>
         <TitleElement
           id={breadcrumbId}
           className={clsx(styles.title, hideTitle && 'u-visually-hidden')}
@@ -51,7 +52,7 @@ function Breadcrumb({
               </li>
             ))}
         </ol>
-      </div>
+      </Constrain>
     </nav>
   );
 }