Refactor(web-twig): Rename Tabs components to same names as we have i…

…n react package
lmc-eu · Jul 30, 2022 · e352145 · e352145
1 parent dfb68d1
commit e352145
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 42 deletions.
diff --git a/packages/web-twig/CHANGELOG.md b/packages/web-twig/CHANGELOG.md
@@ -3,13 +3,13 @@
 <!-- There should always be "Unreleased" section at the beginning. -->
 ## Unreleased
 - Require compiler as separate dependency
+- Refactor components and update their readme
 
 ## 1.8.0 - 2022-07-18
 - Update `Tag` - add sizes, split theme and color classes, allow elementType change
 - Bugfix `isRequired` functionality in `TextField` component
 - Introduce `Pill` component
 - Introduce `Tabs` component
-- Refactor components and update their readme
 - Refactor components directory tree
 
 ## 1.7.0 - 2022-05-09

diff --git a/packages/web-twig/src/Resources/components/Tabs/README.md b/packages/web-twig/src/Resources/components/Tabs/README.md
@@ -5,38 +5,38 @@ This is Twig implementation of the [Tabs] component.
 Basic example usage:
 
 ```html
-<Tabs>
-  <TabsItem>
-    <TabsLink isSelected id="pane1-tab" ariaTarget="pane1">
+<TabList>
+  <TabItem>
+    <TabLink isSelected id="pane1-tab" ariaTarget="pane1">
       Item selected
-    </TabsLink>
-  </TabsItem>
-  <TabsItem>
+    </TabLink>
+  </TabItem>
+  <TabItem>
     <TabsLink id="pane2-tab" ariaTarget="pane2">
       Item
     </TabsLink>
-  </TabsItem>
-  <TabsItem>
-    <TabsLink href="https://www.example.com">
+  </TabItem>
+  <TabItem>
+    <TabLink href="https://www.example.com">
       Item link
-    </TabsLink>
-  </TabsItem>
-</Tabs>
-<TabsPane id="pane1" isSelected label="pane1-tab">
+    </TabLink>
+  </TabItem>
+</TabList>
+<TabPane id="pane1" isSelected label="pane1-tab">
   Pane 1
-</TabsPane>
-<TabsPane id="pane2" label="pane2-tab">
+</TabPane>
+<TabPane id="pane2" label="pane2-tab">
   Pane 2
-</TabsPane>
+</TabPane>
 ```
 
 Without lexer:
 ```twig
-{% embed "@spirit/tabs.twig" %}
+{% embed "@spirit/tabList.twig" %}
     {% block content %}
-        {% embed "@spirit/tabsItem.twig" %}
+        {% embed "@spirit/tabItem.twig" %}
             {% block content %}
-                {% embed "@spirit/tabsLink.twig" with { props: {
+                {% embed "@spirit/tabLink.twig" with { props: {
                   isSelected: true,
                   id: 'panel1-tab',
                   target: 'panel1',
@@ -55,19 +55,19 @@ Without lexer:
 
 The Tabs itself consists of many components which cannot be used independently.
 
-### Tabs
+### TabList
 
 | Prop name | Type     | Default | Required | Description           |
 |-----------|----------|---------|----------|-----------------------|
 | `class`   | `string` | `null`  | no       | Additional class name |
 
-### TabsItem
+### TabItem
 
 | Prop name | Type     | Default | Required | Description           |
 |-----------|----------|---------|----------|-----------------------|
 | `class`   | `string` | `null`  | no       | Additional class name |
 
-### TabsLink
+### TabLink
 
 | Prop name    | Type      | Default | Required | Description                  |
 |--------------|-----------|---------|----------|------------------------------|
@@ -77,7 +77,7 @@ The Tabs itself consists of many components which cannot be used independently.
 | `isSelected` | `boolean` | `false` | no       | Whether is tab item selected |
 | `ariaTarget` | `string`  | `null`  | no       | Target pane of the tab item  |
 
-### TabsPane
+### TabPane
 
 | Prop name    | Type      | Default | Required | Description                    |
 |--------------|-----------|---------|----------|--------------------------------|

diff --git a/packages/web-twig/src/Resources/components/Tabs/TabItem.twig b/packages/web-twig/src/Resources/components/Tabs/TabItem.twig
@@ -0,0 +1,12 @@
+{# API #}
+{%- set _class = props.class | default(null) -%}
+
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Tabs__item' -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _class ] -%}
+
+<li {{ mainProps(props) }} {{ classProp(_classNames)}}>
+    {% block content %}{% endblock %}
+</li>
diff --git a/packages/web-twig/src/Resources/components/Tabs/TabLink.twig b/packages/web-twig/src/Resources/components/Tabs/TabLink.twig
@@ -0,0 +1,39 @@
+{# API #}
+{%- set _ariaTarget = props.ariaTarget | default(null) -%}
+{%- set _class = props.class | default(null) -%}
+{%- set _href = props.href | default(null) -%}
+{%- set _id = props.id | default(null) -%}
+{%- set _isSelected = props.isSelected | default(false) -%}
+
+{# Class names #}
+{%- set _isSelectedClassName = _isSelected == 'true' ? 'is-selected' : null -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Tabs__link' -%}
+
+{# Attributes #}
+{%- set _ariaSelectedAttr = _isSelected ? 'true' : 'false' -%}
+{%- set _ariaControlsAttr = _ariaTarget ? 'aria-controls=' ~ _ariaTarget : null -%}
+{%- set _dataTargetAttr = _ariaTarget ? 'data-target=#' ~ _ariaTarget : null -%}
+{%- set _dataToggleAttr = _href ? null : 'data-toggle=tabs' -%}
+{%- set _hrefAttr = _href ? 'href=' ~ _href : null -%}
+{%- set _idAttr = _id ? ' id=' ~ _id : null -%}
+{%- set _roleAttr = _href ? 'role=tab' : null -%}
+{%- set _typeAttr = _href ? null : 'type=button' -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _isSelectedClassName, _class ] -%}
+{%- set _elementType = _href ? 'a' : 'button' -%}
+
+<{{ _elementType }}
+    {{ mainProps(props) }}
+    {{ classProp(_classNames) }}
+    {{ _hrefAttr | raw }}
+    {{ _idAttr }}
+    {{ _roleAttr }}
+    {{ _typeAttr }}
+    {{ _dataToggleAttr | raw }}
+    aria-selected="{{ _ariaSelectedAttr }}"
+    {{ _dataTargetAttr | raw }}
+    {{ _ariaControlsAttr }}
+>
+    {% block content %}{% endblock %}
+</{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Tabs/TabList.twig b/packages/web-twig/src/Resources/components/Tabs/TabList.twig
@@ -0,0 +1,12 @@
+{# API #}
+{%- set _class = props.class | default(null) -%}
+
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Tabs' -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _class ] -%}
+
+<ul {{ mainProps(props) }} {{ classProp(_classNames) }} role="tablist">
+    {% block content %}{% endblock %}
+</ul>
diff --git a/packages/web-twig/src/Resources/components/Tabs/TabPane.twig b/packages/web-twig/src/Resources/components/Tabs/TabPane.twig
@@ -0,0 +1,26 @@
+{# API #}
+{%- set _class = props.class | default(null) -%}
+{%- set _id = props.id | default(null) -%}
+{%- set _isSelected = props.isSelected | default(false) -%}
+{%- set _label = props.label | default(null) -%}
+
+{# Class names #}
+{%- set _isSelectedClassName = _isSelected == 'true' ? 'is-selected' : null -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Tabs-pane' -%}
+
+{# Attributes #}
+{%- set _ariaLabelAttr = _label ? ' aria-labelledby=' ~  _label : null -%}
+{%- set _idAttr = _id ? ' id=' ~ _id : null -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _isSelectedClassName, _class ] -%}
+
+<div
+    {{ mainProps(props) }}
+    {{ classProp(_classNames) }}
+    {{ _idAttr }}
+    role="tabpanel"
+    {{ _ariaLabelAttr }}
+>
+    {% block content %}{% endblock %}
+</div>
diff --git a/packages/web-twig/src/Resources/twig-components/tabItem.twig b/packages/web-twig/src/Resources/twig-components/tabItem.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabItem.twig' %}
diff --git a/packages/web-twig/src/Resources/twig-components/tabLink.twig b/packages/web-twig/src/Resources/twig-components/tabLink.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabLink.twig' %}
diff --git a/packages/web-twig/src/Resources/twig-components/tabList.twig b/packages/web-twig/src/Resources/twig-components/tabList.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabList.twig' %}
diff --git a/packages/web-twig/src/Resources/twig-components/tabPane.twig b/packages/web-twig/src/Resources/twig-components/tabPane.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Tabs/TabPane.twig' %}
diff --git a/packages/web-twig/tests/components-fixtures/tabsDefault.twig b/packages/web-twig/tests/components-fixtures/tabsDefault.twig
@@ -1,23 +1,23 @@
-<Tabs>
-  <TabsItem>
-    <TabsLink isSelected id="pane1-tab" target="pane1">
+<TabList>
+  <TabItem>
+    <TabLink isSelected id="pane1-tab" target="pane1">
       Item selected
-    </TabsLink>
-  </TabsItem>
-  <TabsItem>
-    <TabsLink id="pane2-tab" target="pane2">
+    </TabLink>
+  </TabItem>
+  <TabItem>
+    <TabLink id="pane2-tab" target="pane2">
       Item
-    </TabsLink>
-  </TabsItem>
-  <TabsItem>
-    <TabsLink href="https://www.example.com">
+    </TabLink>
+  </TabItem>
+  <TabItem>
+    <TabLink href="https://www.example.com">
       Item link
-    </TabsLink>
-  </TabsItem>
-</Tabs>
-<TabsPane id="pane1" isSelected label="pane1-tab">
+    </TabLink>
+  </TabItem>
+</TabList>
+<TabPane id="pane1" isSelected label="pane1-tab">
   Pane 1
-</TabsPane>
-<TabsPane id="pane2" label="pane2-tab">
+</TabPane>
+<TabPane id="pane2" label="pane2-tab">
   Pane 2
-</TabsPane>
+</TabPane>