From bddb8420c365ad25c807f2ae4127371f7f65cb94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Tue, 3 Dec 2024 17:42:54 +0100
Subject: [PATCH] Docs(web-react): Move Container into DocsSection using
 `container` enum prop

This way the Container can be optional - see Footer, Header & Container demos.
This allows us to create nice demos for full width components.
---
 .../partials/web-react/layout/default.hbs     |  2 --
 packages/web-react/docs/DocsSections.tsx      | 34 +++++++++++++------
 .../Button/demo/ButtonDemoFactory.tsx         |  2 +-
 .../ButtonLink/demo/ButtonLinkDemoFactory.tsx |  2 +-
 .../Container/demo/ContainerDefault.tsx       |  7 +++-
 .../src/components/Container/demo/index.tsx   |  2 +-
 .../src/components/Footer/demo/index.tsx      |  4 +--
 .../src/components/Header/demo/index.tsx      | 10 +++---
 .../src/components/Tag/demo/TagDefault.tsx    |  2 +-
 9 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/apps/demo/partials/web-react/layout/default.hbs b/apps/demo/partials/web-react/layout/default.hbs
index 55085376b6..35e5f9a0bc 100644
--- a/apps/demo/partials/web-react/layout/default.hbs
+++ b/apps/demo/partials/web-react/layout/default.hbs
@@ -8,11 +8,9 @@
   {{> cover}}
 
   <main class="py-1000">
-    <div class="Container">
 
       {{> @partial-block }}
 
-    </div>
   </main>
 
   {{> footer}}
diff --git a/packages/web-react/docs/DocsSections.tsx b/packages/web-react/docs/DocsSections.tsx
index 6deaba1b04..d709a503ad 100644
--- a/packages/web-react/docs/DocsSections.tsx
+++ b/packages/web-react/docs/DocsSections.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
-import { StyleProps, Tag, useStyleProps } from '../src';
+import { Container, StyleProps, Tag, useStyleProps } from '../src';
 import DocsStack from './DocsStack';
 
 interface DocsSectionProps extends StyleProps {
   children: ReactNode;
+  container?: 'none' | 'all' | 'heading-only';
   hasStack?: boolean;
   stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
   tag?: string;
@@ -11,6 +12,7 @@ interface DocsSectionProps extends StyleProps {
 }
 
 const defaultProps: Partial<DocsSectionProps> = {
+  container: 'all',
   hasStack: true,
   stackAlignment: 'start',
   tag: '',
@@ -18,20 +20,30 @@ const defaultProps: Partial<DocsSectionProps> = {
 
 const DocsSection = (props: DocsSectionProps) => {
   const propsWithDefaults = { ...defaultProps, ...props };
-  const { children, hasStack = true, stackAlignment = 'start', title, tag, ...restProps } = propsWithDefaults;
+  const { children, container, hasStack, stackAlignment, title, tag, ...restProps } = propsWithDefaults;
   const { styleProps, props: transferProps } = useStyleProps(restProps);
 
+  const heading = (
+    <h2 className="docs-Heading">
+      {title}
+      {tag && (
+        <Tag color="warning" isSubtle>
+          {tag}
+        </Tag>
+      )}
+    </h2>
+  );
+
+  const content = (
+    <>
+      {container === 'heading-only' ? <Container>{heading}</Container> : heading}
+      {hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
+    </>
+  );
+
   return (
     <section {...styleProps} {...transferProps} className="UNSTABLE_Section">
-      <h2 className="docs-Heading">
-        {title}
-        {tag && (
-          <Tag color="warning" isSubtle>
-            {tag}
-          </Tag>
-        )}
-      </h2>
-      {hasStack ? <DocsStack stackAlignment={stackAlignment}>{children}</DocsStack> : children}
+      {container === 'all' ? <Container>{content}</Container> : content}
     </section>
   );
 };
diff --git a/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx b/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx
index 1874a9a31f..78de71c589 100644
--- a/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx
+++ b/packages/web-react/src/components/Button/demo/ButtonDemoFactory.tsx
@@ -14,7 +14,7 @@ const ButtonDemoFactory = ({ ...props }: ButtonBaseProps) => {
   return (
     <>
       {sizes.map((size) => (
-        <DocsSection key={size} title={`Size ${size}`}>
+        <DocsSection key={size} title={`Size ${size}`} container="none">
           {colors.map((color) => (
             <div key={color}>
               <Button size={size} color={color} elementType="a" {...props}>
diff --git a/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx b/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx
index b4c2245169..f9ce5ddafa 100644
--- a/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx
+++ b/packages/web-react/src/components/ButtonLink/demo/ButtonLinkDemoFactory.tsx
@@ -14,7 +14,7 @@ const ButtonLinkDemoFactory = ({ ...props }: ButtonBaseProps) => {
   return (
     <>
       {sizes.map((size) => (
-        <DocsSection key={size} title={`Size ${size}`}>
+        <DocsSection key={size} title={`Size ${size}`} container="none">
           {colors.map((color) => (
             <div key={color}>
               <ButtonLink size={size} color={color} elementType="a" {...props}>
diff --git a/packages/web-react/src/components/Container/demo/ContainerDefault.tsx b/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
index 03a3baffdd..d9bb457f8b 100644
--- a/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
+++ b/packages/web-react/src/components/Container/demo/ContainerDefault.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import DocsBox from '../../../../docs/DocsBox';
+import Container from '../Container';
 
-const ContainerDefault = () => <DocsBox>Container</DocsBox>;
+const ContainerDefault = () => (
+  <Container>
+    <DocsBox>Container</DocsBox>
+  </Container>
+);
 
 export default ContainerDefault;
diff --git a/packages/web-react/src/components/Container/demo/index.tsx b/packages/web-react/src/components/Container/demo/index.tsx
index 15fb3330c6..7a718f1bda 100644
--- a/packages/web-react/src/components/Container/demo/index.tsx
+++ b/packages/web-react/src/components/Container/demo/index.tsx
@@ -5,7 +5,7 @@ import ContainerDefault from './ContainerDefault';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Default" stackAlignment="stretch">
+    <DocsSection title="Default" stackAlignment="stretch" container="heading-only">
       <ContainerDefault />
     </DocsSection>
   </React.StrictMode>,
diff --git a/packages/web-react/src/components/Footer/demo/index.tsx b/packages/web-react/src/components/Footer/demo/index.tsx
index 9566b2c7a6..7bb2f9e432 100644
--- a/packages/web-react/src/components/Footer/demo/index.tsx
+++ b/packages/web-react/src/components/Footer/demo/index.tsx
@@ -13,10 +13,10 @@ import FooterNested from './FooterNested';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Basic Usage" stackAlignment="stretch">
+      <DocsSection title="Basic Usage" stackAlignment="stretch" container="heading-only">
         <FooterDefault />
       </DocsSection>
-      <DocsSection title="Nested Link Blocks, Logo Only" stackAlignment="stretch">
+      <DocsSection title="Nested Link Blocks, Logo Only" stackAlignment="stretch" container="heading-only">
         <FooterNested />
       </DocsSection>
     </IconsProvider>
diff --git a/packages/web-react/src/components/Header/demo/index.tsx b/packages/web-react/src/components/Header/demo/index.tsx
index 7e22fb1231..d3ea54805e 100644
--- a/packages/web-react/src/components/Header/demo/index.tsx
+++ b/packages/web-react/src/components/Header/demo/index.tsx
@@ -17,19 +17,19 @@ import HeaderWithActionsAndDialog from './HeaderWithActionsAndDialog';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
-      <DocsSection title="Minimal Header" stackAlignment="stretch">
+      <DocsSection title="Minimal Header" stackAlignment="stretch" container="heading-only">
         <HeaderMinimal />
       </DocsSection>
-      <DocsSection title="Header with Actions" stackAlignment="stretch">
+      <DocsSection title="Header with Actions" stackAlignment="stretch" container="heading-only">
         <HeaderWithActions />
       </DocsSection>
-      <DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch">
+      <DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch" container="heading-only">
         <HeaderWithActionsAndDialog />
       </DocsSection>
-      <DocsSection title="Simple Header" stackAlignment="stretch">
+      <DocsSection title="Simple Header" stackAlignment="stretch" container="heading-only">
         <HeaderSimple />
       </DocsSection>
-      <DocsSection title="Simple Transparent Header" stackAlignment="stretch">
+      <DocsSection title="Simple Transparent Header" stackAlignment="stretch" container="heading-only">
         <HeaderSimpleTransparent />
       </DocsSection>
       <DocsSection title="Experimental RTL Support" stackAlignment="stretch">
diff --git a/packages/web-react/src/components/Tag/demo/TagDefault.tsx b/packages/web-react/src/components/Tag/demo/TagDefault.tsx
index 9e50c70928..e3a3875b3e 100644
--- a/packages/web-react/src/components/Tag/demo/TagDefault.tsx
+++ b/packages/web-react/src/components/Tag/demo/TagDefault.tsx
@@ -12,7 +12,7 @@ const TagDefault = () => {
   return (
     <Grid cols={{ mobile: 1, tablet: 3, desktop: 5 }}>
       {sizes.map((size) => (
-        <DocsSection key={size} title={`Size ${size}`}>
+        <DocsSection key={size} container="none" title={`Size ${size}`}>
           {colors.map((color) => (
             <Fragment key={`tag-${color}-${size}`}>
               <Tag color={color} size={size} isSubtle>