Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DS-656: Translatable Tabs "More" Label #2354

Merged
merged 2 commits into from
Oct 19, 2021
Merged

DS-656: Translatable Tabs "More" Label #2354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
477fc2f
Updated the tabs 'More' button label to be translatable
bolt-bot Oct 14, 2021
3b81589
Updated the tabs snapshot
bolt-bot Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 46 additions & 17 deletions packages/components/bolt-tabs/__tests__/__snapshots__/tabs.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Bolt Tabs Props Inset: auto 1`] = `
<bolt-tabs inset="auto">
<bolt-tabs inset="auto"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -111,7 +113,9 @@ exports[`Bolt Tabs Props Inset: auto 1`] = `
`;

exports[`Bolt Tabs Props Inset: off 1`] = `
<bolt-tabs inset="off">
<bolt-tabs inset="off"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start ">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -221,7 +225,9 @@ exports[`Bolt Tabs Props Inset: off 1`] = `
`;

exports[`Bolt Tabs Props Inset: on 1`] = `
<bolt-tabs inset="on">
<bolt-tabs inset="on"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -331,7 +337,9 @@ exports[`Bolt Tabs Props Inset: on 1`] = `
`;

exports[`Bolt Tabs Props align: center 1`] = `
<bolt-tabs align="center">
<bolt-tabs align="center"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-center c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -441,7 +449,9 @@ exports[`Bolt Tabs Props align: center 1`] = `
`;

exports[`Bolt Tabs Props align: end 1`] = `
<bolt-tabs align="end">
<bolt-tabs align="end"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-end c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -551,7 +561,9 @@ exports[`Bolt Tabs Props align: end 1`] = `
`;

exports[`Bolt Tabs Props align: start 1`] = `
<bolt-tabs align="start">
<bolt-tabs align="start"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -661,7 +673,9 @@ exports[`Bolt Tabs Props align: start 1`] = `
`;

exports[`Bolt Tabs Props label_spacing: medium 1`] = `
<bolt-tabs label-spacing="medium">
<bolt-tabs label-spacing="medium"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -771,7 +785,9 @@ exports[`Bolt Tabs Props label_spacing: medium 1`] = `
`;

exports[`Bolt Tabs Props label_spacing: small 1`] = `
<bolt-tabs label-spacing="small">
<bolt-tabs label-spacing="small"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -881,7 +897,9 @@ exports[`Bolt Tabs Props label_spacing: small 1`] = `
`;

exports[`Bolt Tabs Props panel_spacing: medium 1`] = `
<bolt-tabs panel-spacing="medium">
<bolt-tabs panel-spacing="medium"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -991,7 +1009,9 @@ exports[`Bolt Tabs Props panel_spacing: medium 1`] = `
`;

exports[`Bolt Tabs Props panel_spacing: none 1`] = `
<bolt-tabs panel-spacing="none">
<bolt-tabs panel-spacing="none"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1101,7 +1121,9 @@ exports[`Bolt Tabs Props panel_spacing: none 1`] = `
`;

exports[`Bolt Tabs Props panel_spacing: small 1`] = `
<bolt-tabs panel-spacing="small">
<bolt-tabs panel-spacing="small"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1211,7 +1233,9 @@ exports[`Bolt Tabs Props panel_spacing: small 1`] = `
`;

exports[`Bolt Tabs Props scrollOffset 1`] = `
<bolt-tabs scroll-offset="100">
<bolt-tabs scroll-offset="100"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1321,7 +1345,9 @@ exports[`Bolt Tabs Props scrollOffset 1`] = `
`;

exports[`Bolt Tabs Props scrollOffsetSelector 1`] = `
<bolt-tabs scroll-offset-selector=".example-selector">
<bolt-tabs scroll-offset-selector=".example-selector"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1431,7 +1457,9 @@ exports[`Bolt Tabs Props scrollOffsetSelector 1`] = `
`;

exports[`Bolt Tabs Props selected_tab 1`] = `
<bolt-tabs selected-tab="2">
<bolt-tabs selected-tab="2"
data-bolt-more-text="More"
>
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1541,7 +1569,7 @@ exports[`Bolt Tabs Props selected_tab 1`] = `
`;

exports[`Bolt Tabs default 1`] = `
<bolt-tabs>
<bolt-tabs data-bolt-more-text="More">
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1651,7 +1679,7 @@ exports[`Bolt Tabs default 1`] = `
`;

exports[`Bolt Tabs default with web component 1`] = `
<bolt-tabs>
<bolt-tabs data-bolt-more-text="More">
<div class="c-bolt-tabs c-bolt-tabs--align-start c-bolt-tabs--inset">
<input type="radio"
name="tabs-12345"
Expand Down Expand Up @@ -1911,7 +1939,8 @@ exports[`Bolt Tabs default with web component 2`] = `
`;

exports[`Bolt Tabs default with web component 3`] = `
<bolt-tabs ready
<bolt-tabs data-bolt-more-text="More"
ready
class
>
<bolt-tab-panel selected>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/bolt-tabs/src/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,7 +595,7 @@ class BoltTabs extends withContext(BoltElement) {
@keyup=${e => this.handleOnKeyup(e)}
>
<span class="${cx('c-bolt-tabs__show-text')}">
${this.moreText ? this.moreText : 'More'}
${this.dataset.boltMoreText || 'More'}
</span>
<span class="${cx('c-bolt-tabs__show-icon')}">
<bolt-icon name="chevron-down"></bolt-icon>
Expand Down
19 changes: 10 additions & 9 deletions packages/components/bolt-tabs/src/tabs.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% set schema = bolt.data.components["@bolt-components-tabs"].schema %}
{% set schema = bolt.data.components['@bolt-components-tabs'].schema %}

{% if enable_json_schema_validation %}
{{ validate_data_schema(schema, _self) | raw }}
Expand All @@ -9,13 +9,13 @@
{% set inner_attributes = create_attribute({}) %}

{# Append string to `random()` to coerce to string #}
{% set uuid = bolt.data.config.env == "test" ? "12345" : random() ~ "" %}
{% set uuid = bolt.data.config.env == 'test' ? '12345' : random() ~ '' %}

{# Array of classes based on the defined + default props #}
{% set classes = [
"c-bolt-tabs",
this.data.align.value ? "c-bolt-tabs--align-" ~ this.data.align.value : "",
this.data.inset.value == "auto" or this.data.inset.value == "on" ? "c-bolt-tabs--inset" : ""
'c-bolt-tabs',
this.data.align.value ? 'c-bolt-tabs--align-' ~ this.data.align.value : '',
this.data.inset.value == 'auto' or this.data.inset.value == 'on' ? 'c-bolt-tabs--inset' : ''
] %}

{#
Expand All @@ -27,23 +27,24 @@
{% set inner_classes = classes %}

{% for class in this.props['class'] %}
{% if class starts with "is-" or class starts with "has-" %}
{% if class starts with 'is-' or class starts with 'has-' %}
{% set inner_classes = inner_classes|merge([class]) %}
{% elseif class starts with "c-bolt-" == false %}
{% elseif class starts with 'c-bolt-' == false %}
{% set outer_classes = outer_classes|merge([class]) %}
{% endif %}
{% endfor %}

<bolt-tabs
{% if outer_classes %} class="{{ outer_classes|join(' ') }}" {% endif %}
{{ this.props|without("content")|without("class") }}
{{ this.props|without('class') }}
data-bolt-more-text="{{ 'More'|t }}"
>
{% if panels %}
<div
{% if inner_classes %} class="{{ inner_classes|join(' ') }}" {% endif %}
>
{% for panel in panels %}
{% include "@bolt-components-tabs/TabPanel/tab-panel.twig" with panel|merge({
{% include '@bolt-components-tabs/TabPanel/tab-panel.twig' with panel|merge({
index: loop.index,
uuid: uuid,
label_spacing: this.data.label_spacing.value,
Expand Down
5 changes: 5 additions & 0 deletions packages/components/bolt-tabs/tabs.schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ module.exports = {
title: 'Tabs',
type: 'object',
properties: {
attributes: {
type: 'object',
description:
'A Drupal-style attributes object with extra attributes to append to this component.',
},
panels: {
type: 'array',
description:
Expand Down