Feat(web-twig): Add spacing property to Tabs component #DS-1315

lmc-eu · Aug 6, 2024 · f159ab0 · f159ab0
1 parent c5018a5
commit f159ab0
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 2 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tabs/README.md b/packages/web-twig/src/Resources/components/Tabs/README.md
@@ -42,13 +42,36 @@ Without lexer:
 {% endembed %}
 ```
 
+## Custom Spacing
+
+You can use the `spacing` prop to apply custom spacing between tab items. The prop
+accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values.
+
+Custom spacing:
+
+```twig
+<Tablist spacing="space-1200">
+  <!-- Stacked content -->
+</TabList>
+```
+
+Custom responsive spacing:
+
+```twig
+<TabList spacing="{{ { mobile: 'space-400', tablet: 'space-800', desktop: 'space-1200' } }}">
+  <!-- Stacked content -->
+</TabList>
+```
+
 ## API
 
 The Tabs itself consists of many components which cannot be used independently.
 
 ### TabList
 
-There is no API for TabList.
+| Name      | Type                          | Default | Required | Description                                               |
+| --------- | ----------------------------- | ------- | -------- | --------------------------------------------------------- |
+| `spacing` | [`spacing token` \| `object`] | `null`  | ✕        | Apply [custom spacing](#custom-spacing) between tab items |
 
 ### TabItem
 

diff --git a/packages/web-twig/src/Resources/components/Tabs/TabList.twig b/packages/web-twig/src/Resources/components/Tabs/TabList.twig
@@ -1,5 +1,6 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _spacing = props.spacing | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Tabs' -%}
@@ -8,6 +9,25 @@
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 
-<ul {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }} role="tablist">
+{%- set _style = '' -%}
+
+{%- if _spacing is iterable -%}
+    {%- for breakpoint, breakpointValue in _spacing -%}
+        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
+        {%- set _style = _style ~ '--tabs-spacing' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');' -%}
+    {%- endfor -%}
+{%- elseif _spacing -%}
+    {%- set _style = _style ~ '--tabs-spacing: var(--spirit-' ~ _spacing ~ ');' -%}
+{%- endif -%}
+
+{# Attributes #}
+{%- set _styleAttr = _style or (_styleProps.style is not same as(null)) ? 'style="' ~ _style ~ _styleProps.style | join() ~ '"' -%}
+
+<ul
+    {{ mainProps(props) }}
+    {{ classProp(_classNames) }}
+    {{ _styleAttr | raw }}
+    role="tablist"
+>
     {% block content %}{% endblock %}
 </ul>
diff --git a/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig b/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig
@@ -6,4 +6,8 @@
         {% include '@components/Tabs/stories/TabsDefault.twig' %}
     </DocsSection>
 
+    <DocsSection title="Custom Spacing" stackAlignment="stretch">
+        {% include '@components/Tabs/stories/TabsWithCustomSpacing.twig' %}
+    </DocsSection>
+
 {% endblock %}
diff --git a/.../web-twig/src/Resources/components/Tabs/__tests__/__fixtures__/tabsWithCustomSpacing.twig b/.../web-twig/src/Resources/components/Tabs/__tests__/__fixtures__/tabsWithCustomSpacing.twig
@@ -0,0 +1,23 @@
+<TabList spacing="space-400">
+    <TabItem>
+        <TabLink isSelected id="pane-3-tab" data-spirit-toggle="tabs" targetPaneId="pane-3">
+            Item selected
+        </TabLink>
+    </TabItem>
+    <TabItem>
+        <TabLink id="pane-4-tab" data-spirit-toggle="tabs" targetPaneId="pane-4">
+            Item
+        </TabLink>
+    </TabItem>
+    <TabItem>
+        <TabLink href="https://www.example.com">
+            Item link
+        </TabLink>
+    </TabItem>
+</TabList>
+<TabPane id="pane-3" isSelected label="pane-3-tab">
+    Pane 1
+</TabPane>
+<TabPane id="pane-4" label="pane-4-tab">
+    Pane 2
+</TabPane>
diff --git a/...ources/components/Tabs/__tests__/__fixtures__/tabsWithCustomSpacingForEachBreakpoint.twig b/...ources/components/Tabs/__tests__/__fixtures__/tabsWithCustomSpacingForEachBreakpoint.twig
@@ -0,0 +1,23 @@
+<TabList spacing="{{ { mobile: 'space-400', tablet: 'space-800', desktop: 'space-1200' } }}">
+    <TabItem>
+        <TabLink isSelected id="pane-3-tab" data-spirit-toggle="tabs" targetPaneId="pane-3">
+            Item selected
+        </TabLink>
+    </TabItem>
+    <TabItem>
+        <TabLink id="pane-4-tab" data-spirit-toggle="tabs" targetPaneId="pane-4">
+            Item
+        </TabLink>
+    </TabItem>
+    <TabItem>
+        <TabLink href="https://www.example.com">
+            Item link
+        </TabLink>
+    </TabItem>
+</TabList>
+<TabPane id="pane-3" isSelected label="pane-3-tab">
+    Pane 1
+</TabPane>
+<TabPane id="pane-4" label="pane-4-tab">
+    Pane 2
+</TabPane>
diff --git a/...rc/Resources/components/Tabs/__tests__/__snapshots__/tabsWithCustomSpacing.twig.snap.html b/...rc/Resources/components/Tabs/__tests__/__snapshots__/tabsWithCustomSpacing.twig.snap.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <ul class="Tabs" style="--tabs-spacing: var(--spirit-space-400);" role="tablist">
+      <li class="Tabs__item">
+        <button id="pane-3-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-3" data-spirit-target="#pane-3" type="button">Item selected</button>
+      </li>
+
+      <li class="Tabs__item">
+        <button id="pane-4-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-4" data-spirit-target="#pane-4" type="button">Item</button>
+      </li>
+
+      <li class="Tabs__item">
+        <a href="https://www.example.com" class="Tabs__link" aria-selected="false" role="tab">Item link</a>
+      </li>
+    </ul>
+
+    <div class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane-3-tab" id="pane-3">
+      Pane 1
+    </div>
+
+    <div class="TabsPane" role="tabpanel" aria-labelledby="pane-4-tab" id="pane-4">
+      Pane 2
+    </div>
+  </body>
+</html>
diff --git a/...onents/Tabs/__tests__/__snapshots__/tabsWithCustomSpacingForEachBreakpoint.twig.snap.html b/...onents/Tabs/__tests__/__snapshots__/tabsWithCustomSpacingForEachBreakpoint.twig.snap.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <ul class="Tabs" style="--tabs-spacing: var(--spirit-space-400);--tabs-spacing-tablet: var(--spirit-space-800);--tabs-spacing-desktop: var(--spirit-space-1200);" role="tablist">
+      <li class="Tabs__item">
+        <button id="pane-3-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-3" data-spirit-target="#pane-3" type="button">Item selected</button>
+      </li>
+
+      <li class="Tabs__item">
+        <button id="pane-4-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-4" data-spirit-target="#pane-4" type="button">Item</button>
+      </li>
+
+      <li class="Tabs__item">
+        <a href="https://www.example.com" class="Tabs__link" aria-selected="false" role="tab">Item link</a>
+      </li>
+    </ul>
+
+    <div class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane-3-tab" id="pane-3">
+      Pane 1
+    </div>
+
+    <div class="TabsPane" role="tabpanel" aria-labelledby="pane-4-tab" id="pane-4">
+      Pane 2
+    </div>
+  </body>
+</html>
diff --git a/packages/web-twig/src/Resources/components/Tabs/stories/TabsWithCustomSpacing.twig b/packages/web-twig/src/Resources/components/Tabs/stories/TabsWithCustomSpacing.twig
@@ -0,0 +1,16 @@
+<TabList spacing="{{ { mobile: 'space-400', tablet: 'space-800', desktop: 'space-1200' } }}">
+    <TabItem>
+        <TabLink isSelected id="pane-3-tab" data-spirit-toggle="tabs" targetPaneId="pane-3">Item 1</TabLink>
+    </TabItem>
+    <TabItem>
+        <TabLink id="pane-4-tab" data-spirit-toggle="tabs" targetPaneId="pane-4">Item 2</TabLink>
+    </TabItem>
+    <TabItem>
+        <TabLink href="https://www.example.com">Item link</TabLink>
+    </TabItem>
+    <TabItem UNSAFE_className="d-none d-desktop-block">
+        <TabLink href="https://www.example.com">Item link, desktop only</TabLink>
+    </TabItem>
+</TabList>
+<TabPane id="pane-3" isSelected label="pane-3-tab">Pane 1 content</TabPane>
+<TabPane id="pane-4" label="pane-4-tab">Pane 2 content</TabPane>