Feat(web-twig): Extend Stack component #JALL-107

lmc-eu · Apr 27, 2023 · def3ef1 · def3ef1
1 parent c79319b
commit def3ef1
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 7 deletions.
diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md
@@ -1,6 +1,6 @@
 # Stack
 
-This is Twig implementation of the [Stack] component.
+[Stack] is a component that allows you to compose elements vertically.
 
 Basic example usage:
 
@@ -15,7 +15,7 @@ Basic example usage:
 Advanced example usage:
 
 ```html
-<Stack elementType="ul">
+<Stack elementType="ul" hasMiddleDividers hasTopDivider hasBottomDivider>
   <li>
     <div>List item 1</div>
   </li>
@@ -50,9 +50,13 @@ Without lexer:
 
 ## API
 
-| Prop name     | Type     | Default | Required | Description        |
-| ------------- | -------- | ------- | -------- | ------------------ |
-| `elementType` | `string` | `div`   | no       | HTML tag to render |
+| Prop name           | Type     | Default | Required | Description                            |
+| ------------------- | -------- | ------- | -------- | -------------------------------------- |
+| `elementType`       | `string` | `div`   | no       | Element type of the wrapper element    |
+| `hasBottomDivider`  | `bool`   | `false` | no       | Render a divider after the last item   |
+| `hasMiddleDividers` | `bool`   | `false` | no       | Render dividers between items          |
+| `hasSpacing`        | `bool`   | `false` | no       | Apply a spacing between items          |
+| `hasTopDivider`     | `bool`   | `false` | no       | Render a divider before the first item |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,

diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig b/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig
@@ -8,4 +8,23 @@
 {# Stack Blocks #}
 {% include '@components/Stack/stories/StackBlocks.twig' %}
 
+<div class="spirit-v1-stack-no-default-gap">
+    <h2 class="docs-Heading">Feature flag <code>spirit-v1-stack-no-default-gap</code></h2>
+
+    {# Stack Blocks with `spirit-v1-stack-no-default-gap` #}
+    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocks.twig' %}
+
+    {# Stack Blocks with `spirit-v1-stack-no-default-gap` and Vertical Spacing #}
+    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithVerticalSpacing.twig' %}
+
+    {# Stack Blocks with `spirit-v1-stack-no-default-gap`, Inner Dividers and Vertical Spacing #}
+    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersAndVerticalSpacing.twig' %}
+
+    {# Stack Blocks with `spirit-v1-stack-no-default-gap`, Inner and Outer Dividers and Vertical Spacing #}
+    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig' %}
+
+    {# Stack Blocks with `spirit-v1-stack-no-default-gap`, Inner Dividers without Vertical Spacing #}
+    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersWithoutVerticalSpacing.twig' %}
+</div>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.twig b/packages/web-twig/src/Resources/components/Stack/Stack.twig
@@ -1,13 +1,28 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _elementType = props.elementType | default('div') -%}
+{%- set _hasBottomDivider = props.hasBottomDivider | default(false) | boolprop -%}
+{%- set _hasMiddleDividers = props.hasMiddleDividers | default(false) | boolprop -%}
+{%- set _hasSpacing = props.hasSpacing | default(false) | boolprop -%}
+{%- set _hasTopDivider = props.hasTopDivider | default(false) | boolprop -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%}
+{%- set _rootBottomDividerClassName = _hasBottomDivider ? _spiritClassPrefix ~ 'Stack--hasBottomDivider' : null -%}
+{%- set _rootMiddleDividersClassName = _hasMiddleDividers ? _spiritClassPrefix ~ 'Stack--hasMiddleDividers' : null -%}
+{%- set _rootSpacingClassName = _hasSpacing ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%}
+{%- set _rootTopDividerClassName = _hasTopDivider ? _spiritClassPrefix ~ 'Stack--hasTopDivider' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
+{%- set _classNames = [
+    _rootClassName,
+    _rootBottomDividerClassName,
+    _rootMiddleDividersClassName,
+    _rootSpacingClassName,
+    _rootTopDividerClassName,
+    _styleProps.className,
+] -%}
 
 <{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
 {%- block content %}{% endblock -%}

diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackV1NoDefaultGapBlocks.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackV1NoDefaultGapBlocks.twig
@@ -0,0 +1,15 @@
+<section class="docs-Section">
+
+    <h3 class="docs-Heading">Stacked Blocks</h3>
+
+    <Stack elementType="ul">
+        {% for i in 1..3 %}
+            <li>
+                <div class="docs-Box">
+                    Block {{ i }}
+                </div>
+            </li>
+        {% endfor %}
+    </Stack>
+
+</section>
diff --git a/...s/Stack/stories/StackV1NoDefaultGapBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig b/...s/Stack/stories/StackV1NoDefaultGapBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig
@@ -0,0 +1,15 @@
+<section class="docs-Section">
+
+    <h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
+
+    <Stack elementType="ul" hasSpacing hasMiddleDividers hasTopDivider hasBottomDivider>
+        {% for i in 1..3 %}
+            <li>
+                <div class="docs-Box">
+                    Block {{ i }}
+                </div>
+            </li>
+        {% endfor %}
+    </Stack>
+
+</section>
diff --git a/...omponents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersAndVerticalSpacing.twig b/...omponents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersAndVerticalSpacing.twig
@@ -0,0 +1,15 @@
+<section class="docs-Section">
+
+    <h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
+
+    <Stack elementType="ul" hasSpacing hasMiddleDividers>
+        {% for i in 1..3 %}
+            <li>
+                <div class="docs-Box">
+                    Block {{ i }}
+                </div>
+            </li>
+        {% endfor %}
+    </Stack>
+
+</section>
diff --git a/...nents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersWithoutVerticalSpacing.twig b/...nents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersWithoutVerticalSpacing.twig
@@ -0,0 +1,15 @@
+<section class="docs-Section">
+
+    <h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
+
+    <Stack elementType="ul" hasMiddleDividers>
+        {% for i in 1..3 %}
+            <li>
+                <div class="docs-Box">
+                    Block {{ i }}
+                </div>
+            </li>
+        {% endfor %}
+    </Stack>
+
+</section>
diff --git a/.../src/Resources/components/Stack/stories/StackV1NoDefaultGapBlocksWithVerticalSpacing.twig b/.../src/Resources/components/Stack/stories/StackV1NoDefaultGapBlocksWithVerticalSpacing.twig
@@ -0,0 +1,15 @@
+<section class="docs-Section">
+
+    <h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
+
+    <Stack elementType="ul" hasSpacing>
+        {% for i in 1..3 %}
+            <li>
+                <div class="docs-Box">
+                    Block {{ i }}
+                </div>
+            </li>
+        {% endfor %}
+    </Stack>
+
+</section>
diff --git a/...s/__snapshots__/ComponentsSnapshotTest__test with data set stackWithDividers.twig__1.html b/...s/__snapshots__/ComponentsSnapshotTest__test with data set stackWithDividers.twig__1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <div class="Stack Stack--hasBottomDivider Stack--hasMiddleDividers Stack--hasTopDivider">
+      <div>
+        Block 1
+      </div>
+      <div>
+        Block 2
+      </div>
+      <div>
+        Block 3
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/...ots__/ComponentsSnapshotTest__test with data set stackWithDividersAndSpacers.twig__1.html b/...ots__/ComponentsSnapshotTest__test with data set stackWithDividersAndSpacers.twig__1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <ul class="Stack Stack--hasBottomDivider Stack--hasMiddleDividers Stack--hasSpacing Stack--hasTopDivider">
+      <li>
+        <div>
+          List item 1
+        </div>
+      </li>
+      <li>
+        <div>
+          List item 1
+        </div>
+      </li>
+      <li>
+        <div>
+          List item 1
+        </div>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/packages/web-twig/tests/components-fixtures/stackDefault.twig b/packages/web-twig/tests/components-fixtures/stackDefault.twig
@@ -13,4 +13,4 @@
     <li>
         <div>List item 1</div>
     </li>
-</Stack>
+</Stack>
diff --git a/packages/web-twig/tests/components-fixtures/stackWithDividers.twig b/packages/web-twig/tests/components-fixtures/stackWithDividers.twig
@@ -0,0 +1,5 @@
+<Stack hasBottomDivider hasMiddleDividers hasTopDivider>
+    <div>Block 1</div>
+    <div>Block 2</div>
+    <div>Block 3</div>
+</Stack>
diff --git a/packages/web-twig/tests/components-fixtures/stackWithDividersAndSpacers.twig b/packages/web-twig/tests/components-fixtures/stackWithDividersAndSpacers.twig
@@ -0,0 +1,11 @@
+<Stack elementType="ul" hasBottomDivider hasMiddleDividers hasTopDivider hasSpacing>
+    <li>
+        <div>List item 1</div>
+    </li>
+    <li>
+        <div>List item 1</div>
+    </li>
+    <li>
+        <div>List item 1</div>
+    </li>
+</Stack>