diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md index 46d86c2e3c..97fa3e00ed 100644 --- a/packages/web-twig/src/Resources/components/Stack/README.md +++ b/packages/web-twig/src/Resources/components/Stack/README.md @@ -51,32 +51,42 @@ Without lexer: ## Custom Spacing You can use the `spacing` prop to apply custom spacing between items. The prop -accepts either a spacing token (eg. `space-100`) or an object with breakpoint keys and spacing token values. +accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values. + +Default spacing: ```twig - -
Block 1
-
Block 2
-
Block 3
+ + +``` - -
Block 1
-
Block 2
-
Block 3
+Custom spacing: + +```twig + + + +``` + +Custom responsive spacing: + +```twig + + ``` ## API -| Name | Type | Default | Required | Description | -| ------------------------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------------- | -| `elementType` | `string` | `div` | ✕ | Element type of the wrapper element | -| `hasEndDivider` | `bool` | `false` | ✕ | Render a divider after the last item | -| `hasIntermediateDividers` | `bool` | `false` | ✕ | Render dividers between items | -| `hasSpacing` | `bool` | `false` | ✕ | Apply a spacing between items | -| `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | -| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Custom spacing between items, see [Custom Spacing](#custom-spacing) | +| Name | Type | Default | Required | Description | +| ------------------------- | ----------------------------- | ------- | -------- | ----------------------------------------------------- | +| `elementType` | `string` | `div` | ✕ | Element type of the wrapper element | +| `hasEndDivider` | `bool` | `false` | ✕ | Render a divider after the last item | +| `hasIntermediateDividers` | `bool` | `false` | ✕ | Render dividers between items | +| `hasSpacing` | `bool` | `false` | ✕ | Apply default spacing between items | +| `hasStartDivider` | `bool` | `false` | ✕ | Render a divider before the first item | +| `spacing` | [`spacing token` \| `object`] | `null` | ✕ | Apply [custom spacing](#custom-spacing) between items | 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] diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.twig b/packages/web-twig/src/Resources/components/Stack/Stack.twig index 3e88465bea..9790ec18ee 100644 --- a/packages/web-twig/src/Resources/components/Stack/Stack.twig +++ b/packages/web-twig/src/Resources/components/Stack/Stack.twig @@ -11,7 +11,7 @@ {%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%} {%- set _rootBottomDividerClassName = _hasEndDivider ? _spiritClassPrefix ~ 'Stack--hasEndDivider' : null -%} {%- set _rootMiddleDividersClassName = _hasIntermediateDividers ? _spiritClassPrefix ~ 'Stack--hasIntermediateDividers' : null -%} -{%- set _rootSpacingClassName = _hasSpacing ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%} +{%- set _rootSpacingClassName = _hasSpacing or _spacing is not null ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%} {%- set _rootTopDividerClassName = _hasStartDivider ? _spiritClassPrefix ~ 'Stack--hasStartDivider' : null -%} {# Miscellaneous #} diff --git a/packages/web-twig/src/Resources/components/Stack/__tests__/__fixtures__/stackDefault.twig b/packages/web-twig/src/Resources/components/Stack/__tests__/__fixtures__/stackDefault.twig index 77493f2fac..3501d62af2 100644 --- a/packages/web-twig/src/Resources/components/Stack/__tests__/__fixtures__/stackDefault.twig +++ b/packages/web-twig/src/Resources/components/Stack/__tests__/__fixtures__/stackDefault.twig @@ -25,14 +25,14 @@
- +
Block 1
Block 2
Block 3
- +
Block 1
Block 2
Block 3
diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig index 7b015f347d..e3222bfd5b 100644 --- a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig +++ b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig @@ -1,4 +1,4 @@ - + {% for i in 1..3 %}
  • Block {{ i }} diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig index 948a9fd049..d805ac9ad8 100644 --- a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig +++ b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig @@ -1,6 +1,5 @@ + {% for i in 1..3 %}
  • Block {{ i }} diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig index c21d738c6c..ce01469009 100644 --- a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig +++ b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig @@ -1,4 +1,4 @@ - + {% for i in 1..3 %}
  • Block {{ i }}