Merge pull request #51 from forumone/1.x-RC

kmonahan · web-flow · commit 7dcd0de03172 · 2023-08-09T14:29:26.000-05:00
1.0.4
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16.12
+18.17
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-project",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "prepare": "husky install"
diff --git a/services/app/.ddev/config.yaml b/services/app/.ddev/config.yaml
@@ -16,7 +16,7 @@ mutagen_enabled: false
 use_dns_when_possible: true
 composer_version: "2"
 web_environment: []
-nodejs_version: "16"
+nodejs_version: "18"
 hooks:
   post-start:
       # Detects to see if the node_modules folder exists
diff --git a/services/app/.nvmrc b/services/app/.nvmrc
@@ -1 +1 @@
-16.19
+18.17
diff --git a/services/app/Dockerfile b/services/app/Dockerfile
@@ -1,4 +1,4 @@
-ARG NODE_VERSION="16"
+ARG NODE_VERSION="18"
 
 FROM node:${NODE_VERSION}-alpine AS artifact
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
@@ -23,4 +23,4 @@ RUN npm run build-storybook
 RUN mv /app/storybook-static /app/public/storybook
 
 # Adding artifact tobe the default step to run
-FROM artifact
+FROM artifact
diff --git a/services/app/lib/icon-template.js b/services/app/lib/icon-template.js
@@ -53,6 +53,9 @@ const iconTemplate = (
   }
 
   return tpl`
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 ${imports};
diff --git a/services/app/package.json b/services/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-project",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/services/app/source/01-global/icon/icons/AngleDoubleLeft.tsx b/services/app/source/01-global/icon/icons/AngleDoubleLeft.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/AngleDoubleRight.tsx b/services/app/source/01-global/icon/icons/AngleDoubleRight.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/AngleDown.tsx b/services/app/source/01-global/icon/icons/AngleDown.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/AngleLeft.tsx b/services/app/source/01-global/icon/icons/AngleLeft.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/AngleRight.tsx b/services/app/source/01-global/icon/icons/AngleRight.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/AngleUp.tsx b/services/app/source/01-global/icon/icons/AngleUp.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/Close.tsx b/services/app/source/01-global/icon/icons/Close.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/Facebook.tsx b/services/app/source/01-global/icon/icons/Facebook.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/Linkedin.tsx b/services/app/source/01-global/icon/icons/Linkedin.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/Rss.tsx b/services/app/source/01-global/icon/icons/Rss.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git a/services/app/source/01-global/icon/icons/Twitter.tsx b/services/app/source/01-global/icon/icons/Twitter.tsx
@@ -1,3 +1,6 @@
+// This component is automatically generated.
+// SVGs should be added to icon/svgs.
+// See the project documentation for more information.
 // tslint:disable:ordered-imports
 import clsx from 'clsx';
 import * as React from 'react';
diff --git 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
@@ -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
@@ -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;
diff --git a/services/app/source/02-layouts/Constrain/constrain.module.css b/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
@@ -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
@@ -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>
   );
 }
diff --git 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,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>
   );
 }
diff --git 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,9 @@ function Main({
       role="main"
       tabIndex={-1}
     >
-      <div className={clsx(hasConstrain && 'constrain', constrainClasses)}>
+      <Constrain isHidden={!hasConstrain} modifierClasses={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
@@ -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>
   );
 }
diff --git 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>
   );
 }
diff --git a/services/app/source/03-components/Menu/Menu.stories.tsx b/services/app/source/03-components/Menu/Menu.stories.tsx
@@ -22,6 +22,7 @@ const FooterMenu: Story = {
     ...footerMenuArgs,
     modifierClasses: footerStyles.menu,
     itemClasses: footerStyles.item,
+    linkClasses: footerStyles.link,
   },
 };
 
diff --git a/services/app/source/03-components/Menu/menu-footer.module.css b/services/app/source/03-components/Menu/menu-footer.module.css
@@ -12,4 +12,7 @@
       margin-inline-end: 0;
     }
   }
+
+  .link {
+  }
 }
diff --git a/services/app/source/03-components/Menu/menu.module.css b/services/app/source/03-components/Menu/menu.module.css
@@ -9,6 +9,9 @@
     margin-block-end: 0;
   }
 
+  .link{
+  }
+
   .subnav {
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "nextjs-project",`
`3`		`- "version": "1.0.3",`
	`3`	`+ "version": "1.0.4",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"prepare": "husky install"`
Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,9 @@ const iconTemplate = (`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	return tpl`
	`56`	`+// This component is automatically generated.`
	`57`	`+// SVGs should be added to icon/svgs.`
	`58`	`+// See the project documentation for more information.`
`56`	`59`	`// tslint:disable:ordered-imports`
`57`	`60`	`import clsx from 'clsx';`
`58`	`61`	`${imports};`