From 9e900a0987b657724e1beaeacc295986f5258391 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 18:08:54 +0100
Subject: [PATCH] Feat(web-twig): Introduce isFluid prop to Container

---
 .../components/Container/Container.stories.twig    |  4 +++-
 .../Resources/components/Container/Container.twig  |  4 +++-
 .../src/Resources/components/Container/README.md   | 14 ++++++++++++--
 .../__tests__/__fixtures__/containerDefault.twig   |  5 ++++-
 .../__snapshots__/containerDefault.twig.snap.html  |  5 +++++
 .../Container/stories/ContainerFluid.twig          |  3 +++
 6 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 packages/web-twig/src/Resources/components/Container/stories/ContainerFluid.twig

diff --git a/packages/web-twig/src/Resources/components/Container/Container.stories.twig b/packages/web-twig/src/Resources/components/Container/Container.stories.twig
index d1e2f3ff63..a1e5e0c599 100644
--- 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
index b279ea19d7..f907da6bc5 100644
--- 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
index 455459475f..a19a4cdf9c 100644
--- 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/packages/web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig b/packages/web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig
index 089af370f2..c9ccbe9275 100644
--- a/packages/web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig
+++ b/packages/web-twig/src/Resources/components/Container/__tests__/__fixtures__/containerDefault.twig
@@ -1 +1,4 @@
-<Container>Content</Container>
\ No newline at end of file
+<Container>Content</Container>
+
+<!-- Render with all props -->
+<Container isFluid>Content</Container>
diff --git a/packages/web-twig/src/Resources/components/Container/__tests__/__snapshots__/containerDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Container/__tests__/__snapshots__/containerDefault.twig.snap.html
index 702900df6d..2bd98d47d4 100644
--- a/packages/web-twig/src/Resources/components/Container/__tests__/__snapshots__/containerDefault.twig.snap.html
+++ b/packages/web-twig/src/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
new file mode 100644
index 0000000000..bdf0224fb3
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Container/stories/ContainerFluid.twig
@@ -0,0 +1,3 @@
+<Container isFluid>
+    <DocsBox>Container</DocsBox>
+</Container>