Docs(web-twig): Make stack inside DocsSection optional

lmc-eu · Sep 7, 2023 · 53fc021 · 53fc021
1 parent d120c65
commit 53fc021
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 46 deletions.
diff --git a/apps/web-twig-demo/public/css/demo.css b/apps/web-twig-demo/public/css/demo.css
@@ -35,11 +35,14 @@
 .docs-Stack {
   display: grid;
   row-gap: 1rem;
+}
+
+.docs-Stack--start {
   justify-items: start;
 }
 
-.docs-Stack--fluid {
-  justify-items: initial;
+.docs-Stack--stretch {
+  justify-items: stretch;
 }
 
 .docs-Box {

diff --git a/packages/web-twig/docs/components/DocsSection/DocsSection.twig b/packages/web-twig/docs/components/DocsSection/DocsSection.twig
@@ -1,19 +1,24 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _hasFluidLayout = props.hasFluidLayout | default(false) -%}
+{%- set _hasStack = props.hasStack ?? true -%}
+{%- set _stackAlignment = props.stackAlignment | default('start') -%}
 {%- set _tag = props.tag | default(null) -%}
 {%- set _title = props.title -%}
 
 {# Class names #}
 {%- set _rootClassName = 'docs-Section' -%}
 {%- set _headingClassName = 'docs-Heading' -%}
 {%- set _stackClassName = 'docs-Stack' -%}
-{%- set _stackFluidClassName = _hasFluidLayout ? 'docs-Stack--fluid' : null -%}
+{%- set _stackAlignmentClassName = 'docs-Stack--' ~ _stackAlignment -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _rootClassNames = [_rootClassName, _styleProps.className] -%}
-{%- set _stackClassNames = [_stackClassName, _stackFluidClassName] -%}
+{%- set _stackClassNames = [_stackClassName, _stackAlignmentClassName] -%}
+
+{%- set _renderedContent %}
+    {% block content %}{% endblock %}
+{% endset -%}
 
 <section
     {{ mainProps(props) }}
@@ -26,7 +31,11 @@
             <Tag color="warning" isSubtle>{{ _tag }}</Tag>
         {% endif %}
     </h2>
-    <div {{ classProp(_stackClassNames) }}>
-        {% block content %}{% endblock %}
-    </div>
+    {% if _hasStack %}
+        <div {{ classProp(_stackClassNames) }}>
+            {{ _renderedContent }}
+        </div>
+    {% else %}
+        {{ _renderedContent }}
+    {% endif %}
 </section>
diff --git a/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig b/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig
@@ -1,4 +1,19 @@
 <DocsSection title="My Title" />
 
+<!-- Render with stack alignment -->
+<DocsSection
+    stackAlignment="stretch"
+    title="My Title"
+>
+    my content
+</DocsSection>
+
 <!-- Render with all props -->
-<DocsSection tag="My tag" title="My Title">my content</DocsSection>
+<DocsSection
+    hasStack={false}
+    stackAlignment="stretch"
+    tag="My tag"
+    title="My Title"
+>
+    my content
+</DocsSection>
diff --git a/...wig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html b/...wig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html
@@ -10,19 +10,27 @@ <h2 class="docs-Heading">
         My Title
       </h2>
 
-      <div class="docs-Stack">
+      <div class="docs-Stack docs-Stack--start">
       </div>
     </section>
-    <!-- Render with all props -->
+    <!-- Render with stack alignment -->
 
     <section class="docs-Section">
       <h2 class="docs-Heading">
-        My Title <span class="Tag Tag--warning Tag--medium Tag--subtle">My tag</span>
+        My Title
       </h2>
 
-      <div class="docs-Stack">
+      <div class="docs-Stack docs-Stack--stretch">
         my content
       </div>
     </section>
+    <!-- Render with all props -->
+
+    <section class="docs-Section">
+      <h2 class="docs-Heading">
+        My Title <span class="Tag Tag--warning Tag--medium Tag--subtle">My tag</span>
+      </h2>
+      my content
+    </section>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig
@@ -2,15 +2,15 @@
 
 {% block content %}
 
-    <DocsSection title="Alert Colors">
+    <DocsSection title="Alert Colors" stackAlignment="stretch">
         {% include '@components/Alert/stories/AlertColors.twig' %}
     </DocsSection>
 
-    <DocsSection title="Alert Centered">
+    <DocsSection title="Alert Centered" stackAlignment="stretch">
         {% include '@components/Alert/stories/AlertCentered.twig' %}
     </DocsSection>
 
-    <DocsSection title="Alert Icons">
+    <DocsSection title="Alert Icons" stackAlignment="stretch">
         {% include '@components/Alert/stories/AlertIcons.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Button/Button.stories.twig b/packages/web-twig/src/Resources/components/Button/Button.stories.twig
@@ -7,15 +7,15 @@
     ] %}
     {% set sizes = [ 'small', 'medium', 'large' ] %}
 
-    <DocsSection title="Default">
+    <DocsSection title="Default" stackAlignment="stretch">
         {% include '@components/Button/stories/ButtonColorsSizes.twig' %}
     </DocsSection>
 
-    <DocsSection title="Disabled">
+    <DocsSection title="Disabled" stackAlignment="stretch">
         {% include '@components/Button/stories/ButtonDisabled.twig' %}
     </DocsSection>
 
-    <DocsSection title="Loading">
+    <DocsSection title="Loading" stackAlignment="stretch">
         {% include '@components/Button/stories/ButtonLoading.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
@@ -7,11 +7,11 @@
     ] %}
     {% set sizes = [ 'small', 'medium', 'large' ] %}
 
-    <DocsSection title="Default">
+    <DocsSection title="Default" stackAlignment="stretch">
         {% include '@components/ButtonLink/stories/ButtonLinkColorsSizes.twig' %}
     </DocsSection>
 
-    <DocsSection title="Disabled">
+    <DocsSection title="Disabled" stackAlignment="stretch">
         {% include '@components/ButtonLink/stories/ButtonLinkDisabled.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Container/Container.stories.twig b/packages/web-twig/src/Resources/components/Container/Container.stories.twig
@@ -1,5 +1,14 @@
 {% extends 'layout/plain.html.twig' %}
 
 {% block content %}
-    {% include '@components/Container/stories/ContainerDefault.twig' %}
+
+    <DocsSection title="Default" stackAlignment="stretch">
+
+        {# Use `.breakout-container` to make the example Container overlap with the Container in the page layout. #}
+        <div class="breakout-container">
+            {% include '@components/Container/stories/ContainerDefault.twig' %}
+        </div>
+
+    </DocsSection>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Header/Header.stories.twig b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
@@ -2,27 +2,27 @@
 
 {% block content %}
 
-    <DocsSection title="Minimal Inverted Header" hasFluidLayout>
+    <DocsSection title="Minimal Inverted Header" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderMinimalInverted.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inverted Header with Actions" hasFluidLayout>
+    <DocsSection title="Inverted Header with Actions" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderInvertedWithActions.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inverted Header with Actions and Header Dialog" hasFluidLayout>
+    <DocsSection title="Inverted Header with Actions and Header Dialog" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderInvertedWithActionsAndDialog.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Inverted Header" hasFluidLayout>
+    <DocsSection title="Simple Inverted Header" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderSimpleInverted.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Transparent Header" hasFluidLayout>
+    <DocsSection title="Simple Transparent Header" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderSimpleTransparent.twig' %}
     </DocsSection>
 
-    <DocsSection title="Experimental RTL Support" hasFluidLayout>
+    <DocsSection title="Experimental RTL Support" stackAlignment="stretch">
         {% include '@components/Header/stories/HeaderExperimentalRTL.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig b/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig
@@ -14,7 +14,7 @@
         {% include '@components/Pagination/stories/PaginationCurrentLast.twig' %}
     </DocsSection>
 
-    <DocsSection title="Pagination Current First Centered" hasFluidLayout>
+    <DocsSection title="Pagination Current First Centered" stackAlignment="stretch">
         {% include '@components/Pagination/stories/PaginationCurrentFirstCentered.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig
@@ -10,13 +10,8 @@
         {% include '@components/ScrollView/stories/ScrollViewHorizontal.twig' %}
     </DocsSection>
 
-    <DocsSection title="Horizontal Scrolling with Container Breakout">
-        {# Use Grid to prepare the ground for container breakout (inside of the included example). #}
-        <Grid>
-            <GridSpan over={12}>
-                {% include '@components/ScrollView/stories/ScrollViewHorizontalBreakout.twig' %}
-            </GridSpan>
-        </Grid>
+    <DocsSection title="Horizontal Scrolling with Container Breakout" hasStack={ false }>
+        {% include '@components/ScrollView/stories/ScrollViewHorizontalBreakout.twig' %}
     </DocsSection>
 
     <DocsSection title="Overflow Decorators">

diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig b/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig
@@ -2,27 +2,27 @@
 
 {% block content %}
 
-    <DocsSection title="Stacked Form Fields" hasFluidLayout>
+    <DocsSection title="Stacked Form Fields" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackFormFields.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks" hasFluidLayout>
+    <DocsSection title="Stacked Blocks" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocks.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithVerticalSpacing.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Inner Dividers and Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Inner Dividers and Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithInnerDividersAndVerticalSpacing.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Inner and Outer Dividers and Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Inner and Outer Dividers and Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig' %}
     </DocsSection>
 
-    <DocsSection title="Stacked Blocks with Inner Dividers without Vertical Spacing" hasFluidLayout>
+    <DocsSection title="Stacked Blocks with Inner Dividers without Vertical Spacing" stackAlignment="stretch">
         {% include '@components/Stack/stories/StackBlocksWithInnerDividersWithoutVerticalSpacing.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig b/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <DocsSection title="Default" hasFluidLayout>
+    <DocsSection title="Default" stackAlignment="stretch">
         {% include '@components/Tabs/stories/TabsDefault.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig b/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig
@@ -2,6 +2,8 @@
 
 {% block content %}
 
-    {% include '@components/Tag/stories/TagDefault.twig' %}
+    <DocsSection title="Default" stackAlignment="stretch">
+        {% include '@components/Tag/stories/TagDefault.twig' %}
+    </DocsSection>
 
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig b/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig
@@ -34,7 +34,7 @@
         {% include '@components/TextField/stories/TextFieldInputWidth.twig' %}
     </DocsSection>
 
-    <DocsSection title="Inline" hasFluidLayout>
+    <DocsSection title="Inline" stackAlignment="stretch">
         {% include '@components/TextField/stories/TextFieldInline.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <DocsSection title="Static Tooltip (No Interaction)" hasFluidLayout>
+    <DocsSection title="Static Tooltip (No Interaction)" stackAlignment="stretch">
         {% include '@components/Tooltip/stories/TooltipDefault.twig' %}
     </DocsSection>