Feat(web-twig): Add title prop into ButtonLink

lmc-eu · Jul 30, 2022 · 20da3aa · 20da3aa
1 parent d63eaee
commit 20da3aa
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/packages/web-twig/CHANGELOG.md b/packages/web-twig/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Bugfix `Grid` component props
 - Bugfix `Grid` component reset layout class if cols, tablet or desktop props defined
 - Add onClick prop into `ButtonLink` component
+- Add `title` prop into `ButtonLink`
 
 ## 1.4.0 - 2022-03-28
 - Add support Twig 1.44.6 for Jobs

diff --git a/packages/web-twig/docs/ButtonLink.md b/packages/web-twig/docs/ButtonLink.md
@@ -26,6 +26,7 @@ With Html syntax lexer (enabled by default):
 |------------|-----------|---------------|---------------------------------------------|
 | color      | `string`  | primary       | its possible to use all theme colors        |
 | href       | `string`  | #             | anchor href link                            |
+| title      | `string`  | undefined     | anchor link title                           |
 | target     | `string`  | __self        | anchor target                               |
 | isBlock    | `boolean` | false         | span the full width of a parent             |
 | isSquare   | `boolean` | false         | if the button only has an icon              |

diff --git a/packages/web-twig/src/Resources/components/buttonLink.twig b/packages/web-twig/src/Resources/components/buttonLink.twig
@@ -3,12 +3,13 @@
 {% set _block = (props.isBlock is defined and props.isBlock == 'true' ) ? ' ' ~ _className ~ '--block' : '' %}
 {% set _square = (props.isSquare is defined and props.isSquare == 'true' ) ? ' ' ~ _className ~ '--square' : '' %}
 {% set _href = (props.href is defined) ? props.href : '#' %}
+{% set _title = (props.title is defined) ? ' title="' ~ props.ariaLabel ~ '"' : '' %}
 {% set _target = (props.target is defined) ? ' target="' ~ props.target ~ '"' : '' %}
 {% set _disabledClass = (props.isDisabled is defined and props.isDisabled == 'true') ? ' ' ~ _className ~ '--disabled' : '' %}
 {% set _ariaLabel = (props.ariaLabel is defined) ? ' aria-label="' ~ props.ariaLabel ~ '"' : '' %}
 {% set _onClick = (props.onClick is defined) ? ' onclick="' ~ props.onClick ~'"' : '' %}
 {% set _class = (props.class is defined) ? ' ' ~  props.class : '' -%}
 
-<a href="{{ _href }}" class="{{ _className }}{{ _color }}{{ _block }}{{ _square }}{{ _class }}{{ _disabledClass }}"{{ _ariaLabel|raw }}{{ _target|raw }}{{ _onClick|raw }}>
+<a href="{{ _href }}"{{ _title|raw }} class="{{ _className }}{{ _color }}{{ _block }}{{ _square }}{{ _class }}{{ _disabledClass }}"{{ _ariaLabel|raw }}{{ _target|raw }}{{ _onClick|raw }}>
     {%- block content %}{% endblock %}
 </a>