From 73ad3adfc2921739c98a70e918f3f292f493ba72 Mon Sep 17 00:00:00 2001
From: Corey Lafferty <coreylafferty@gmail.com>
Date: Wed, 26 Jul 2023 11:12:11 -0400
Subject: [PATCH 1/2] refactored constrain to be a component

---
 services/app/source/01-global/index.css       |  1 -
 .../Constrain/Constrain.stories.tsx           | 22 ++++++++++++++++++
 .../source/02-layouts/Constrain/Constrain.tsx | 23 +++++++++++++++++++
 .../Constrain/constrain.module.css}           |  0
 .../source/02-layouts/Constrain/constrain.yml |  2 ++
 .../app/source/02-layouts/Footer/Footer.tsx   | 14 +++++------
 .../app/source/02-layouts/Header/Header.tsx   | 14 +++++------
 services/app/source/02-layouts/Main/Main.tsx  |  8 +++++--
 .../app/source/02-layouts/Section/Section.tsx |  8 +++++--
 .../03-components/Breadcrumb/Breadcrumb.tsx   |  5 ++--
 10 files changed, 74 insertions(+), 23 deletions(-)
 create mode 100644 services/app/source/02-layouts/Constrain/Constrain.stories.tsx
 create mode 100644 services/app/source/02-layouts/Constrain/Constrain.tsx
 rename services/app/source/{01-global/constrain/constrain.css => 02-layouts/Constrain/constrain.module.css} (100%)
 create mode 100644 services/app/source/02-layouts/Constrain/constrain.yml

diff --git a/services/app/source/01-global/index.css b/services/app/source/01-global/index.css
index 1dcb13ba..866b3886 100644
--- a/services/app/source/01-global/index.css
+++ b/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';
 }
diff --git a/services/app/source/02-layouts/Constrain/Constrain.stories.tsx b/services/app/source/02-layouts/Constrain/Constrain.stories.tsx
new file mode 100644
index 00000000..22549721
--- /dev/null
+++ b/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 };
diff --git a/services/app/source/02-layouts/Constrain/Constrain.tsx b/services/app/source/02-layouts/Constrain/Constrain.tsx
new file mode 100644
index 00000000..3a8e04a3
--- /dev/null
+++ b/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;
+  isRendered?: boolean;
+}
+
+function Constrain({
+  children,
+  isRendered = true,
+  modifierClasses,
+}: ConstrainProps): JSX.Element {
+  return isRendered ? (
+    <div className={clsx(styles.constrain, modifierClasses)}>{children}</div>
+  ) : (
+    <>{children}</>
+  );
+}
+
+export default Constrain;
diff --git a/services/app/source/01-global/constrain/constrain.css b/services/app/source/02-layouts/Constrain/constrain.module.css
similarity index 100%
rename from services/app/source/01-global/constrain/constrain.css
rename to services/app/source/02-layouts/Constrain/constrain.module.css
diff --git a/services/app/source/02-layouts/Constrain/constrain.yml b/services/app/source/02-layouts/Constrain/constrain.yml
new file mode 100644
index 00000000..84dc5daa
--- /dev/null
+++ b/services/app/source/02-layouts/Constrain/constrain.yml
@@ -0,0 +1,2 @@
+---
+modifierClasses: ''
diff --git a/services/app/source/02-layouts/Footer/Footer.tsx b/services/app/source/02-layouts/Footer/Footer.tsx
index 35d55231..05ea012c 100644
--- a/services/app/source/02-layouts/Footer/Footer.tsx
+++ b/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,12 @@ function Footer({
       className={clsx(styles.wrapper, modifierClasses)}
       role="contentinfo"
     >
-      <div
-        className={clsx(
-          styles.inner,
-          hasConstrain && 'constrain',
-          constrainClasses,
-        )}
+      <Constrain
+        isRendered={hasConstrain}
+        modifierClasses={clsx(constrainClasses)}
       >
-        {children}
-      </div>
+        <div className={styles.inner}>{children}</div>
+      </Constrain>
     </footer>
   );
 }
diff --git a/services/app/source/02-layouts/Header/Header.tsx b/services/app/source/02-layouts/Header/Header.tsx
index 7ccd5783..7e116755 100644
--- a/services/app/source/02-layouts/Header/Header.tsx
+++ b/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,12 @@ function Header({
 }: HeaderProps): JSX.Element {
   return (
     <header role="banner" className={clsx(styles.wrapper, modifierClasses)}>
-      <div
-        className={clsx(
-          styles.inner,
-          hasConstrain && 'constrain',
-          constrainClasses,
-        )}
+      <Constrain
+        isRendered={hasConstrain}
+        modifierClasses={clsx(constrainClasses)}
       >
-        {children}
-      </div>
+        <div className={styles.inner}>{children}</div>
+      </Constrain>
     </header>
   );
 }
diff --git a/services/app/source/02-layouts/Main/Main.tsx b/services/app/source/02-layouts/Main/Main.tsx
index 92565805..e23523d6 100644
--- a/services/app/source/02-layouts/Main/Main.tsx
+++ b/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,12 @@ function Main({
       role="main"
       tabIndex={-1}
     >
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain
+        isRendered={hasConstrain}
+        modifierClasses={clsx(constrainClasses)}
+      >
         {children}
-      </div>
+      </Constrain>
     </main>
   );
 }
diff --git a/services/app/source/02-layouts/Section/Section.tsx b/services/app/source/02-layouts/Section/Section.tsx
index b2c7e653..533b59b2 100644
--- a/services/app/source/02-layouts/Section/Section.tsx
+++ b/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,13 @@ function Section({
 }: SectionProps): JSX.Element {
   return (
     <section className={clsx(styles.section, modifierClasses)}>
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain
+        isRendered={hasConstrain}
+        modifierClasses={clsx(constrainClasses)}
+      >
         {title && <TitleElement className={styles.title}>{title}</TitleElement>}
         <div className={styles.content}>{children}</div>
-      </div>
+      </Constrain>
     </section>
   );
 }
diff --git a/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx b/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx
index b8d0a84d..7aaf390e 100644
--- a/services/app/source/03-components/Breadcrumb/Breadcrumb.tsx
+++ b/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>
   );
 }

From fec6b279630e77c76822ae2905ac3670fa7fe4d5 Mon Sep 17 00:00:00 2001
From: Corey Lafferty <coreylafferty@gmail.com>
Date: Wed, 26 Jul 2023 15:16:06 -0400
Subject: [PATCH 2/2] switched var name to isHidden

---
 services/app/source/02-layouts/Constrain/Constrain.tsx | 10 +++++-----
 services/app/source/02-layouts/Footer/Footer.tsx       |  5 +----
 services/app/source/02-layouts/Header/Header.tsx       |  5 +----
 services/app/source/02-layouts/Main/Main.tsx           |  5 +----
 services/app/source/02-layouts/Section/Section.tsx     |  5 +----
 5 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/services/app/source/02-layouts/Constrain/Constrain.tsx b/services/app/source/02-layouts/Constrain/Constrain.tsx
index 3a8e04a3..be345ad1 100644
--- a/services/app/source/02-layouts/Constrain/Constrain.tsx
+++ b/services/app/source/02-layouts/Constrain/Constrain.tsx
@@ -5,18 +5,18 @@ import styles from './constrain.module.css';
 
 interface ConstrainProps extends GessoComponent {
   children?: ReactNode;
-  isRendered?: boolean;
+  isHidden?: boolean;
 }
 
 function Constrain({
   children,
-  isRendered = true,
+  isHidden = false,
   modifierClasses,
 }: ConstrainProps): JSX.Element {
-  return isRendered ? (
-    <div className={clsx(styles.constrain, modifierClasses)}>{children}</div>
-  ) : (
+  return isHidden ? (
     <>{children}</>
+  ) : (
+    <div className={clsx(styles.constrain, modifierClasses)}>{children}</div>
   );
 }
 
diff --git a/services/app/source/02-layouts/Footer/Footer.tsx b/services/app/source/02-layouts/Footer/Footer.tsx
index 05ea012c..997bba20 100644
--- a/services/app/source/02-layouts/Footer/Footer.tsx
+++ b/services/app/source/02-layouts/Footer/Footer.tsx
@@ -19,10 +19,7 @@ function Footer({
       className={clsx(styles.wrapper, modifierClasses)}
       role="contentinfo"
     >
-      <Constrain
-        isRendered={hasConstrain}
-        modifierClasses={clsx(constrainClasses)}
-      >
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         <div className={styles.inner}>{children}</div>
       </Constrain>
     </footer>
diff --git a/services/app/source/02-layouts/Header/Header.tsx b/services/app/source/02-layouts/Header/Header.tsx
index 7e116755..e7e1c0e9 100644
--- a/services/app/source/02-layouts/Header/Header.tsx
+++ b/services/app/source/02-layouts/Header/Header.tsx
@@ -16,10 +16,7 @@ function Header({
 }: HeaderProps): JSX.Element {
   return (
     <header role="banner" className={clsx(styles.wrapper, modifierClasses)}>
-      <Constrain
-        isRendered={hasConstrain}
-        modifierClasses={clsx(constrainClasses)}
-      >
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         <div className={styles.inner}>{children}</div>
       </Constrain>
     </header>
diff --git a/services/app/source/02-layouts/Main/Main.tsx b/services/app/source/02-layouts/Main/Main.tsx
index e23523d6..e1e307ac 100644
--- a/services/app/source/02-layouts/Main/Main.tsx
+++ b/services/app/source/02-layouts/Main/Main.tsx
@@ -23,10 +23,7 @@ function Main({
       role="main"
       tabIndex={-1}
     >
-      <Constrain
-        isRendered={hasConstrain}
-        modifierClasses={clsx(constrainClasses)}
-      >
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         {children}
       </Constrain>
     </main>
diff --git a/services/app/source/02-layouts/Section/Section.tsx b/services/app/source/02-layouts/Section/Section.tsx
index 533b59b2..87df27c5 100644
--- a/services/app/source/02-layouts/Section/Section.tsx
+++ b/services/app/source/02-layouts/Section/Section.tsx
@@ -20,10 +20,7 @@ function Section({
 }: SectionProps): JSX.Element {
   return (
     <section className={clsx(styles.section, modifierClasses)}>
-      <Constrain
-        isRendered={hasConstrain}
-        modifierClasses={clsx(constrainClasses)}
-      >
+      <Constrain isHidden={!hasConstrain} modifierClasses={constrainClasses}>
         {title && <TitleElement className={styles.title}>{title}</TitleElement>}
         <div className={styles.content}>{children}</div>
       </Constrain>