Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

fix(tag): fix markup for removable tags - TWIG-78 #182

Merged
merged 3 commits into from
Oct 22, 2019
Merged

fix(tag): fix markup for removable tags - TWIG-78 #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d57beb
TWIG-78: Review markup for tag - Removal and split logic used in 3
libetho Oct 17, 2019
be0b1f8
TWIG-78: Cleaning extra spaces
libetho Oct 21, 2019
4892e08
Merge branch 'develop' into TWIG-78
planctus Oct 22, 2019
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
34 changes: 17 additions & 17 deletions src/ec/packages/ec-component-tag/__snapshots__/tag.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@ exports[`EC - Tag Link renders correctly with extra class names 1`] = `
`;

exports[`EC - Tag Removable renders correctly 1`] = `
<button
<span
class="ecl-tag ecl-tag--removable"
type="button"
>
Removable tag
<span
<button
class="ecl-tag__icon"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -85,20 +85,20 @@ exports[`EC - Tag Removable renders correctly 1`] = `
xlink:href="static/icons.svg#ui--close-filled"
/>
</svg>
</span>
</button>
</button>
</span>
`;

exports[`EC - Tag Removable renders correctly with extra attributes 1`] = `
<button
<span
class="ecl-tag ecl-tag--removable"
data-test="data-test-value"
data-test-1="data-test-value-1"
type="button"
>
Removable tag
<span
<button
class="ecl-tag__icon"
data-test="data-test-value"
data-test-1="data-test-value-1"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -118,18 +118,18 @@ exports[`EC - Tag Removable renders correctly with extra attributes 1`] = `
xlink:href="static/icons.svg#ui--close-filled"
/>
</svg>
</span>
</button>
</button>
</span>
`;

exports[`EC - Tag Removable renders correctly with extra class names 1`] = `
<button
<span
class="ecl-tag ecl-tag--removable custom-class custom-class--test"
type="button"
>
Removable tag
<span
<button
class="ecl-tag__icon"
type="button"
>
<svg
aria-hidden="true"
Expand All @@ -149,6 +149,6 @@ exports[`EC - Tag Removable renders correctly with extra class names 1`] = `
xlink:href="static/icons.svg#ui--close-filled"
/>
</svg>
</span>
</button>
</button>
</span>
`;
44 changes: 25 additions & 19 deletions src/ec/packages/ec-component-tag/tag.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
{
type: 'link' (can be 'link', 'button', 'removable'),
path: '' (tag url if needed),
label: '' (tag text as string)
label: '' (tag text as string),
aria_label: '' (optional) (aria label for removable tag as a string)
}
- "default_icon_path" (string) Default path for icon tag (need to render Icon component)
- "extra_classes" (string) (default: '')
Expand Down Expand Up @@ -37,6 +38,9 @@

{% if _tag.type == 'removable' %}
{% set _css_class = _css_class ~ ' ecl-tag--removable' %}
{% if _tag.aria_label is defined and _tag.aria_label is not empty %}
{% set _extra_attributes = 'aria-label="' ~ _tag.aria_label ~ '"' %}
{% endif %}
{% endif %}

{# Internal logic - Process properties #}
Expand All @@ -57,26 +61,28 @@

{# Print the result #}

{% if _tag.type != 'link' %}
<button class="{{ _css_class }}" type="button"{{ _extra_attributes|raw }}>
{{- _tag.label }}
{%- if _tag.type == 'removable' -%}
<span class="ecl-tag__icon">
{% include '../ec-component-icon/icon.html.twig' with {
icon: { type: 'ui', name: 'close', size: 'xs', path: default_icon_path },
extra_classes: 'ecl-tag__icon-close'
} only %}
{% include '../ec-component-icon/icon.html.twig' with {
icon: { type: 'ui', name: 'close-filled', size: 'xs', path: default_icon_path },
extra_classes: 'ecl-tag__icon-close-filled'
} only %}
</span>
{% endif -%}
</button>
{% else %}
<a href="{{ _tag.path }}" class="{{ _css_class }}"{{ _extra_attributes|raw }}>
{% if _tag.type == 'link' %}
<a href="{{ _tag.path }}" class="{{ _css_class }}" {{ _extra_attributes|raw }}>
{{- _tag.label -}}
</a>
{% elseif _tag.type == 'button' %}
<button class="{{ _css_class }}" type="button" {{ _extra_attributes|raw }}>
{{- _tag.label -}}
</button>
{% elseif _tag.type == 'removable' %}
<span class="{{ _css_class }}">
{{- _tag.label -}}
<button type="button" {{ _extra_attributes|raw }} class="ecl-tag__icon">
{% include '../ec-component-icon/icon.html.twig' with {
icon: { type: 'ui', name: 'close', size: 'xs', path: default_icon_path },
extra_classes: 'ecl-tag__icon-close'
} only %}
{% include '../ec-component-icon/icon.html.twig' with {
icon: { type: 'ui', name: 'close-filled', size: 'xs', path: default_icon_path },
extra_classes: 'ecl-tag__icon-close-filled'
} only %}
</button>
</span>
{% endif %}

{% endspaceless %}
1 change: 1 addition & 0 deletions src/ec/packages/ec-component-tag/tag.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ storiesOf('Components/Tag', module)
tag: {
label: text('Label', 'Removable tag'),
type: 'removable',
aria_label: 'Dismiss',
},
default_icon_path: defaultSprite,
}),
Expand Down