Feat(web-twig): Introduce isFluid prop to Container

lmc-eu · Dec 10, 2024 · 8f86d61 · 8f86d61
1 parent 153db29
commit 8f86d61
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 5 deletions.
diff --git a/packages/web-twig/src/Resources/components/Container/Container.stories.twig b/packages/web-twig/src/Resources/components/Container/Container.stories.twig
@@ -6,9 +6,11 @@
 {% block content %}
 
     <DocsSection title="Default" stackAlignment="stretch" container="heading-only">
-
         {% include '@components/Container/stories/ContainerDefault.twig' %}
+    </DocsSection>
 
+    <DocsSection title="Fluid" stackAlignment="stretch" container="heading-only">
+        {% include '@components/Container/stories/ContainerFluid.twig' %}
     </DocsSection>
 
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Container/Container.twig b/packages/web-twig/src/Resources/components/Container/Container.twig
@@ -1,12 +1,14 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _isFluid = props.isFluid | default(false) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Container' -%}
+{%- set _rootFluidClassName = _isFluid ? _spiritClassPrefix ~ 'Container--fluid' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
+{%- set _classNames = [ _rootClassName, _rootFluidClassName, _styleProps.className ] -%}
 
 <div {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     {%- block content %}{% endblock -%}

diff --git a/packages/web-twig/src/Resources/components/Container/README.md b/packages/web-twig/src/Resources/components/Container/README.md
@@ -18,11 +18,21 @@ Without lexer:
 {% endembed %}
 ```
 
+## Fluid Container
+
+If you need a full-width container, you can use the `isFluid` prop.
+
+```twig
+<Container isFluid>Content</Container>
+```
+
 ## API
 
-There is no API for Container.
+| Name      | Type   | Default | Required | Description                 |
+| --------- | ------ | ------- | -------- | --------------------------- |
+| `isFluid` | `bool` | `false` | ✕        | If true, Container is fluid |
 
-The components accept [additional attributes][readme-additional-attributes].
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
 and [escape hatches][readme-escape-hatches].
 

diff --git a/.../web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig b/.../web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig
@@ -1 +1,4 @@
-<Container>Content</Container>
+<Container>Content</Container>
+
+<!-- Render with all props -->
+<Container isFluid>Content</Container>
diff --git a/...rc/Resources/components/Container/__tests__/__snapshots__/containerDefault.twig.snap.html b/...rc/Resources/components/Container/__tests__/__snapshots__/containerDefault.twig.snap.html
@@ -8,5 +8,10 @@
     <div class="Container">
       Content
     </div>
+    <!-- Render with all props -->
+
+    <div class="Container Container--fluid">
+      Content
+    </div>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Container/stories/ContainerFluid.twig b/packages/web-twig/src/Resources/components/Container/stories/ContainerFluid.twig
@@ -0,0 +1,3 @@
+<Container isFluid>
+    <DocsBox>Container</DocsBox>
+</Container>