Docs(web-twig): Move Container into DocsSection using container enu…

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

Hide file tree

Showing 26 changed files with 320 additions and 177 deletions.
diff --git a/apps/web-twig-demo/templates/default.html.twig b/apps/web-twig-demo/templates/default.html.twig
@@ -6,16 +6,20 @@
 
   {% include 'partials/tabs.html.twig' %}
 
-  <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
+  <Container>
 
-    {% for component in components %}
-      <li class="d-grid">
-        <a href="components/{{ component | lower }}/" class="docs-Card text-truncate">
-          {{ component }}
-        </a>
-      </li>
-    {% endfor %}
+    <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
 
-  </Grid>
+      {% for component in components %}
+        <li class="d-grid">
+          <a href="components/{{ component | lower }}/" class="docs-Card text-truncate">
+            {{ component }}
+          </a>
+        </li>
+      {% endfor %}
+
+    </Grid>
+
+  </Container>
 
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/helpers.html.twig b/apps/web-twig-demo/templates/helpers.html.twig
@@ -6,16 +6,20 @@
 
   {% include 'partials/tabs.html.twig' %}
 
-  <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
+  <Container>
 
-    {% for helper in helpers %}
-      <li class="d-grid">
-        <a href="helpers/{{ helper }}/" class="docs-Card text-truncate">
-          {{ helper | replace({'-': ' '}) | title }}
-        </a>
-      </li>
-    {% endfor %}
+    <Grid cols="{{ { mobile: 2, tablet: 3 } }}" elementType="ul">
 
-  </Grid>
+      {% for helper in helpers %}
+        <li class="d-grid">
+          <a href="helpers/{{ helper }}/" class="docs-Card text-truncate">
+            {{ helper | replace({'-': ' '}) | title }}
+          </a>
+        </li>
+      {% endfor %}
+
+    </Grid>
+
+  </Container>
 
 {% endblock %}
diff --git a/apps/web-twig-demo/templates/layout/default.html.twig b/apps/web-twig-demo/templates/layout/default.html.twig
@@ -30,11 +30,9 @@
   {%- endset -%}
 
   <main class="py-1000">
-    <Container>
 
       {{ renderedContent }}
 
-    </Container>
   </main>
 
   {% include 'partials/footer.html.twig' only %}

diff --git a/apps/web-twig-demo/templates/partials/tabs.html.twig b/apps/web-twig-demo/templates/partials/tabs.html.twig
@@ -5,7 +5,7 @@
 {% set isHelpersSelected = routeName == 'helpers_index' %}
 {% set isValidationsSelected = routeName == 'validations_index' %}
 
-<div class="breakout-container d-grid">
+<div class="d-grid">
   <ScrollView
     direction="horizontal"
     overflowDecorators="shadows"

diff --git a/apps/web-twig-demo/templates/validations.html.twig b/apps/web-twig-demo/templates/validations.html.twig
@@ -6,41 +6,45 @@
 
   {% include 'partials/tabs.html.twig' %}
 
-  <Grid marginBottom="space-1600">
-    <GridItem columnStart="{{ { mobile: 2, tablet: 4, desktop: 5 } }}" columnEnd="{{ { mobile: 12, tablet: 10, desktop: 9 } }}">
-      <h2 class="docs-Heading">Real-World examples</h2>
-
-      <form id="form1" method="get" novalidate>
-        <Stack hasSpacing>
-          {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%}
-          <TextField isFluid name="username" id="username" label="Username" isRequired data-spirit-validate inputProps={ usernameInputProps } />
-          {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%}
-          <TextField isFluid name="zipcode" id="zipcode" label="Zip code" placeholder="123" data-spirit-validate inputProps={ zipcodeInputProps } />
-          {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%}
-          <TextField isFluid name="age" id="age" label="Your age (min. 14)" isRequired min="14" data-spirit-validate inputProps={ ageInputProps } />
-          {% set passwordInputProps = {
-            "data-spirit-required-message": "Please choose a password",
-            "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/",
-            "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number"
-          } %}
-          <TextField isFluid name="password" id="password" type="password" label="Password" isRequired  data-spirit-validate inputProps={ passwordInputProps } />
-          {% set retypepasswordInputProps = {
-            "data-spirit-equals": "#password",
-            "data-spirit-equals-message": "Passwords don't match",
-          } %}
-          <TextField isFluid name="retypepassword" id="retypepassword" type="password" label="Retype password" isRequired  data-spirit-validate inputProps={ retypepasswordInputProps } />
-          {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %}
-          <TextField isFluid name="email" id="email" type="email" label="Email" isRequired  data-spirit-validate inputProps={ emailInputProps } />
-          {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %}
-          <TextField isFluid name="phone" id="phone" type="tel" label="phone" isRequired placeholder="+420 733 333 333" data-spirit-validate inputProps={ phoneInputProps } />
-          <Checkbox isFluid name="checkboxfield1" id="checkboxfield1" label="I accept the terms and conditions (required)" isRequired  data-spirit-validate />
-          <div>
-            <Button type="submit" color="primary" isBlock>Submit</Button>
-          </div>
-        </Stack>
-      </form>
-    </GridItem>
-  </Grid>
+  <Container>
+
+    <Grid marginBottom="space-1600">
+      <GridItem columnStart="{{ { mobile: 2, tablet: 4, desktop: 5 } }}" columnEnd="{{ { mobile: 12, tablet: 10, desktop: 9 } }}">
+        <h2 class="docs-Heading">Real-World examples</h2>
+
+        <form id="form1" method="get" novalidate>
+          <Stack hasSpacing>
+            {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%}
+            <TextField isFluid name="username" id="username" label="Username" isRequired data-spirit-validate inputProps={ usernameInputProps } />
+            {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%}
+            <TextField isFluid name="zipcode" id="zipcode" label="Zip code" placeholder="123" data-spirit-validate inputProps={ zipcodeInputProps } />
+            {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%}
+            <TextField isFluid name="age" id="age" label="Your age (min. 14)" isRequired min="14" data-spirit-validate inputProps={ ageInputProps } />
+            {% set passwordInputProps = {
+              "data-spirit-required-message": "Please choose a password",
+              "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/",
+              "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number"
+            } %}
+            <TextField isFluid name="password" id="password" type="password" label="Password" isRequired  data-spirit-validate inputProps={ passwordInputProps } />
+            {% set retypepasswordInputProps = {
+              "data-spirit-equals": "#password",
+              "data-spirit-equals-message": "Passwords don't match",
+            } %}
+            <TextField isFluid name="retypepassword" id="retypepassword" type="password" label="Retype password" isRequired  data-spirit-validate inputProps={ retypepasswordInputProps } />
+            {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %}
+            <TextField isFluid name="email" id="email" type="email" label="Email" isRequired  data-spirit-validate inputProps={ emailInputProps } />
+            {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %}
+            <TextField isFluid name="phone" id="phone" type="tel" label="phone" isRequired placeholder="+420 733 333 333" data-spirit-validate inputProps={ phoneInputProps } />
+            <Checkbox isFluid name="checkboxfield1" id="checkboxfield1" label="I accept the terms and conditions (required)" isRequired  data-spirit-validate />
+            <div>
+              <Button type="submit" color="primary" isBlock>Submit</Button>
+            </div>
+          </Stack>
+        </form>
+      </GridItem>
+    </Grid>
+
+  </Container>
 
   {{ encore_entry_script_tags('formValidations') }}
 

diff --git a/packages/web-twig/docs/components/DocsSection/DocsSection.twig b/packages/web-twig/docs/components/DocsSection/DocsSection.twig
@@ -1,5 +1,6 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _container = props.container | default('all') -%}
 {%- set _hasStack = props.hasStack ?? true -%}
 {%- set _stackAlignment = props.stackAlignment | default('start') -%}
 {%- set _tag = props.tag | default(null) -%}
@@ -17,17 +18,23 @@
     {% block content %}{% endblock %}
 {% endset -%}
 
-<section
-    {{ mainProps(props) }}
-    {{ styleProp(_styleProps) }}
-    {{ classProp(_rootClassNames) }}
->
+{%- set _heading -%}
     <h2 class="{{ _headingClassName }}">
         {{ _title }}
         {% if _tag %}
             <Tag color="warning" isSubtle>{{ _tag }}</Tag>
         {% endif %}
     </h2>
+{%- endset -%}
+
+{%- set _content -%}
+    {% if _container == 'heading-only' %}
+        <Container>
+            {{- _heading -}}
+        </Container>
+    {% else %}
+        {{- _heading -}}
+    {% endif %}
     {% if _hasStack %}
         {%- embed '@spirit/DocsStack/DocsStack.twig' with { props: {
             stackAlignment: _stackAlignment,
@@ -39,4 +46,18 @@
     {% else %}
         {{ _renderedContent }}
     {% endif %}
+{%- endset -%}
+
+<section
+    {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_rootClassNames) }}
+>
+    {% if _container == 'all' %}
+        <Container>
+            {{- _content -}}
+        </Container>
+    {% else %}
+        {{- _content -}}
+    {% 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
@@ -8,9 +8,18 @@
     my content
 </DocsSection>
 
+<!-- Render with only heading in Container -->
+<DocsSection
+    container="heading-only"
+    title="My Title"
+>
+    my content
+</DocsSection>
+
 <!-- Render with all props -->
 <DocsSection
     hasStack={ false }
+    container="none"
     stackAlignment="stretch"
     tag="My tag"
     title="My Title"

diff --git a/...wig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html b/...wig/docs/components/DocsSection/__tests__/__snapshots__/docsSectionDefault.twig.snap.html
@@ -6,21 +6,38 @@
   </head>
   <body>
     <section class="UNSTABLE_Section">
-      <h2 class="docs-Heading">
-        My Title
-      </h2>
+      <div class="Container">
+        <h2 class="docs-Heading">
+          My Title
+        </h2>
 
-      <div class="docs-Stack docs-Stack--start">
+        <div class="docs-Stack docs-Stack--start">
+        </div>
       </div>
     </section>
     <!-- Render with stack alignment -->
 
     <section class="UNSTABLE_Section">
-      <h2 class="docs-Heading">
-        My Title
-      </h2>
+      <div class="Container">
+        <h2 class="docs-Heading">
+          My Title
+        </h2>
+
+        <div class="docs-Stack docs-Stack--stretch">
+          my content
+        </div>
+      </div>
+    </section>
+    <!-- Render with only heading in Container -->
+
+    <section class="UNSTABLE_Section">
+      <div class="Container">
+        <h2 class="docs-Heading">
+          My Title
+        </h2>
+      </div>
 
-      <div class="docs-Stack docs-Stack--stretch">
+      <div class="docs-Stack docs-Stack--start">
         my content
       </div>
     </section>

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -3,7 +3,7 @@
 
         {% set title = 'Size ' ~ size %}
 
-        <DocsSection title={{ title }}>
+        <DocsSection container="none" title={{ title }}>
             {% for color in colors %}
                 <div>
                     <Button color={ color } size={ size } onclick="alert('Button clicked')">

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
@@ -3,7 +3,7 @@
 
         {% set title = 'Size ' ~ size %}
 
-        <DocsSection title={{ title }}>
+        <DocsSection container="none" title={{ title }}>
             {% for color in colors %}
                 <div>
                     <Button color={ color } size={ size } onclick="alert('Button clicked')" isDisabled>

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
@@ -3,7 +3,7 @@
 
         {% set title = 'Size ' ~ size %}
 
-        <DocsSection title={{ title }}>
+        <DocsSection container="none" title={{ title }}>
             {% for color in colors %}
                 <div>
                     <Button color={ color } size={ size } onclick="alert('Button clicked')" isLoading>

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
@@ -3,7 +3,7 @@
 
         {% set title = 'Size ' ~ size %}
 
-        <DocsSection title={{ title }}>
+        <DocsSection container="none" title={{ title }}>
             {% for color in colors %}
                 <div>
                     <ButtonLink color={ color } size={ size } href="#">

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig b/packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
@@ -3,7 +3,7 @@
 
         {% set title = 'Size ' ~ size %}
 
-        <DocsSection title={{ title }}>
+        <DocsSection container="none" title={{ title }}>
             {% for color in colors %}
                 <div>
                     <ButtonLink color={ color } size={ size } href="#" isDisabled>

diff --git a/packages/web-twig/src/Resources/components/Container/Container.stories.twig b/packages/web-twig/src/Resources/components/Container/Container.stories.twig
@@ -5,12 +5,9 @@
 
 {% block content %}
 
-    <DocsSection title="Default" stackAlignment="stretch">
+    <DocsSection title="Default" stackAlignment="stretch" container="heading-only">
 
-        {# 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>
+        {% include '@components/Container/stories/ContainerDefault.twig' %}
 
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Header/Header.stories.twig b/packages/web-twig/src/Resources/components/Header/Header.stories.twig
@@ -5,23 +5,23 @@
 
 {% block content %}
 
-    <DocsSection title="Minimal Header" stackAlignment="stretch">
+    <DocsSection title="Minimal Header" stackAlignment="stretch" container="heading-only">
         {% include '@components/Header/stories/HeaderMinimal.twig' %}
     </DocsSection>
 
-    <DocsSection title="Header with Actions" stackAlignment="stretch">
+    <DocsSection title="Header with Actions" stackAlignment="stretch" container="heading-only">
         {% include '@components/Header/stories/HeaderWithActions.twig' %}
     </DocsSection>
 
-    <DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch">
+    <DocsSection title="Header with Actions and Header Dialog" stackAlignment="stretch" container="heading-only">
         {% include '@components/Header/stories/HeaderWithActionsAndDialog.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Header" stackAlignment="stretch">
+    <DocsSection title="Simple Header" stackAlignment="stretch" container="heading-only">
         {% include '@components/Header/stories/HeaderSimple.twig' %}
     </DocsSection>
 
-    <DocsSection title="Simple Transparent Header" stackAlignment="stretch">
+    <DocsSection title="Simple Transparent Header" stackAlignment="stretch" container="heading-only">
         {% include '@components/Header/stories/HeaderSimpleTransparent.twig' %}
     </DocsSection>
 

diff --git a/packages/web-twig/src/Resources/components/Tag/stories/TagDefault.twig b/packages/web-twig/src/Resources/components/Tag/stories/TagDefault.twig
@@ -4,7 +4,7 @@
 <Grid cols="{{ { mobile: 1, tablet: 3, desktop: 5 } }}">
     {% for size in sizes %}
         {% set title = 'Size ' ~ size %}
-        <DocsSection title={{ title }}>
+        <DocsSection container="none" title={{ title }}>
             {% for color in colors %}
                 <Tag color={ color } size={ size } isSubtle>Tag {{ color }}</Tag>
                 <Tag color={ color } size={ size }>Tag {{ color }}</Tag>

diff --git a/packages/web-twig/src/Resources/helpers/accessibility/accessibility.stories.twig b/packages/web-twig/src/Resources/helpers/accessibility/accessibility.stories.twig
@@ -5,9 +5,7 @@
 
 {% block content %}
 
-    <section class="UNSTABLE_Section">
-
-        <h2 class="docs-Heading">Accessibility</h2>
+    <DocsSection title="Accessibility">
 
         <div class="mb-400">
             <p>
@@ -32,6 +30,6 @@
             </button>
         </div>
 
-    </section>
+    </DocsSection>
 
 {% endblock %}