Feat(web-twig): Rename divider classes according to the Figma documen…

…tation * use start, end and intermediate instead of top, bottom and middle refs #DS-571
lmc-eu · May 2, 2023 · 7cbf2bd · 7cbf2bd
1 parent 38e8263
commit 7cbf2bd
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 21 deletions.
diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md
@@ -15,7 +15,7 @@ Basic example usage:
 Advanced example usage:
 
 ```html
-<Stack elementType="ul" hasMiddleDividers hasTopDivider hasBottomDivider>
+<Stack elementType="ul" hasIntermediateDividers hasStartDivider hasEndDivider>
   <li>
     <div>List item 1</div>
   </li>
@@ -50,13 +50,13 @@ Without lexer:
 
 ## API
 
-| 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 |
+| Prop name                 | Type     | Default | Required | Description                            |
+| ------------------------- | -------- | ------- | -------- | -------------------------------------- |
+| `elementType`             | `string` | `div`   | no       | Element type of the wrapper element    |
+| `hasEndDivider`           | `bool`   | `false` | no       | Render a divider after the last item   |
+| `hasIntermediateDividers` | `bool`   | `false` | no       | Render dividers between items          |
+| `hasSpacing`              | `bool`   | `false` | no       | Apply a spacing between items          |
+| `hasStartDivider`         | `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.twig b/packages/web-twig/src/Resources/components/Stack/Stack.twig
@@ -1,17 +1,17 @@
 {# 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 _hasEndDivider = props.hasEndDivider | default(false) | boolprop -%}
+{%- set _hasIntermediateDividers = props.hasIntermediateDividers | default(false) | boolprop -%}
 {%- set _hasSpacing = props.hasSpacing | default(false) | boolprop -%}
-{%- set _hasTopDivider = props.hasTopDivider | default(false) | boolprop -%}
+{%- set _hasStartDivider = props.hasStartDivider | default(false) | boolprop -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%}
-{%- set _rootBottomDividerClassName = _hasBottomDivider ? _spiritClassPrefix ~ 'Stack--hasBottomDivider' : null -%}
-{%- set _rootMiddleDividersClassName = _hasMiddleDividers ? _spiritClassPrefix ~ 'Stack--hasMiddleDividers' : null -%}
+{%- set _rootBottomDividerClassName = _hasEndDivider ? _spiritClassPrefix ~ 'Stack--hasEndDivider' : null -%}
+{%- set _rootMiddleDividersClassName = _hasIntermediateDividers ? _spiritClassPrefix ~ 'Stack--hasIntermediateDividers' : null -%}
 {%- set _rootSpacingClassName = _hasSpacing ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%}
-{%- set _rootTopDividerClassName = _hasTopDivider ? _spiritClassPrefix ~ 'Stack--hasTopDivider' : null -%}
+{%- set _rootTopDividerClassName = _hasStartDivider ? _spiritClassPrefix ~ 'Stack--hasStartDivider' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}

diff --git a/...s/Stack/stories/StackV1NoDefaultGapBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig b/...s/Stack/stories/StackV1NoDefaultGapBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig
@@ -2,7 +2,7 @@
 
     <h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
 
-    <Stack elementType="ul" hasSpacing hasMiddleDividers hasTopDivider hasBottomDivider>
+    <Stack elementType="ul" hasSpacing hasIntermediateDividers hasStartDivider hasEndDivider>
         {% for i in 1..3 %}
             <li>
                 <div class="docs-Box">

diff --git a/...omponents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersAndVerticalSpacing.twig b/...omponents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersAndVerticalSpacing.twig
@@ -2,7 +2,7 @@
 
     <h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
 
-    <Stack elementType="ul" hasSpacing hasMiddleDividers>
+    <Stack elementType="ul" hasSpacing hasIntermediateDividers>
         {% for i in 1..3 %}
             <li>
                 <div class="docs-Box">

diff --git a/...nents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersWithoutVerticalSpacing.twig b/...nents/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersWithoutVerticalSpacing.twig
@@ -2,7 +2,7 @@
 
     <h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
 
-    <Stack elementType="ul" hasMiddleDividers>
+    <Stack elementType="ul" hasIntermediateDividers>
         {% for i in 1..3 %}
             <li>
                 <div class="docs-Box">

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
@@ -4,7 +4,7 @@
     <title></title>
   </head>
   <body>
-    <div class="Stack Stack--hasBottomDivider Stack--hasMiddleDividers Stack--hasTopDivider">
+    <div class="Stack Stack--hasEndDivider Stack--hasIntermediateDividers Stack--hasStartDivider">
       <div>
         Block 1
       </div>

diff --git a/...ots__/ComponentsSnapshotTest__test with data set stackWithDividersAndSpacers.twig__1.html b/...ots__/ComponentsSnapshotTest__test with data set stackWithDividersAndSpacers.twig__1.html
@@ -4,7 +4,7 @@
     <title></title>
   </head>
   <body>
-    <ul class="Stack Stack--hasBottomDivider Stack--hasMiddleDividers Stack--hasSpacing Stack--hasTopDivider">
+    <ul class="Stack Stack--hasEndDivider Stack--hasIntermediateDividers Stack--hasSpacing Stack--hasStartDivider">
       <li>
         <div>
           List item 1

diff --git a/packages/web-twig/tests/components-fixtures/stackWithDividers.twig b/packages/web-twig/tests/components-fixtures/stackWithDividers.twig
@@ -1,4 +1,4 @@
-<Stack hasBottomDivider hasMiddleDividers hasTopDivider>
+<Stack hasEndDivider hasIntermediateDividers hasStartDivider>
     <div>Block 1</div>
     <div>Block 2</div>
     <div>Block 3</div>

diff --git a/packages/web-twig/tests/components-fixtures/stackWithDividersAndSpacers.twig b/packages/web-twig/tests/components-fixtures/stackWithDividersAndSpacers.twig
@@ -1,4 +1,4 @@
-<Stack elementType="ul" hasBottomDivider hasMiddleDividers hasTopDivider hasSpacing>
+<Stack elementType="ul" hasEndDivider hasIntermediateDividers hasStartDivider hasSpacing>
     <li>
         <div>List item 1</div>
     </li>
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
         <title></title>
       </head>
       <body>
-        <div class="Stack Stack--hasBottomDivider Stack--hasMiddleDividers Stack--hasTopDivider">
+        <div class="Stack Stack--hasEndDivider Stack--hasIntermediateDividers Stack--hasStartDivider">
           <div>
             Block 1
           </div>
@@ Expand Down @@