Docs(web-react): Move Container into DocsSection using container en…

…um prop This way the Container can be optional - see Footer, Header & Container demos. This allows us to create nice demos for full width components.
lmc-eu · Dec 5, 2024 · 66b10d1 · 66b10d1
1 parent 8328de6
commit 66b10d1
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 25 deletions.
diff --git 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
@@ -1,37 +1,49 @@
 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;
   title: string;
 }
 
 const defaultProps: Partial<DocsSectionProps> = {
+  container: 'all',
   hasStack: true,
   stackAlignment: 'start',
   tag: '',
 };
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>