Skip to content

Commit

Permalink
Feat(web-twig): Use Icon in Header #DS-305
Browse files Browse the repository at this point in the history
  • Loading branch information
crishpeen committed Sep 13, 2022
1 parent 612d5ba commit 0172867
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
{% set _label = (props.label is defined) ? props.label : 'Close' %}
{% set _ariaControls = (props.ariaControls is defined) ? ' aria-controls="' ~ props.ariaControls ~ '"' : '' %}

{% set _iconClassName = _spiritClassPrefix ~ 'Header__icon' %}

{# Miscellaneous #}
{%- set _classNames = [ _closeClassName, _class ] -%}

Expand All @@ -15,6 +13,6 @@
{{ _ariaControls }}
aria-expanded="false"
>
<span class="{{ _iconClassName }} {{ _iconClassName }}--close" aria-hidden="true"></span>
<Icon name="close" />
<span class="accessibility-hidden">{{ _label }}</span>
</button>
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{% set _rootClassName = _spiritClassPrefix ~ 'Header__mobileOnlyActions' %}
{% set _iconClassName = _spiritClassPrefix ~ 'Header__icon' %}
{% set _class = (props.class is defined) ? props.class : '' %}
{% set _label = (props.label is defined) ? props.label : 'Menu' %}

Expand All @@ -8,7 +7,7 @@

<div {{ classProp(_classNames) }}>
<Button color="{{ props.color is defined ? props.color : 'inverted' }}" isSquare type="button" aria-expanded="false" aria-controls="{{ props.ariaControls is defined ? props.ariaControls : '' }}">
<span class="{{ _iconClassName }} {{ _iconClassName }}--menu" aria-hidden="true"></span>
<Icon name="hamburger" />
<span class="accessibility-hidden">{{ _label }}</span>
</Button>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,22 @@
</a>

<div class="Header__mobileOnlyActions">
<button aria-expanded="false" class="Button Button--inverted Button--medium Button--square" type="button"> <span class="Header__icon Header__icon--menu" aria-hidden="true"></span>
<button aria-expanded="false" class="Button Button--inverted Button--medium Button--square" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="6eaf1a71b2f68249cc6fdca0ecd5752d" class="Icon ">
<path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="#132930"></path>
</svg>

<span class="accessibility-hidden">Menu</span>
</button>
</div>

<nav class="Header">
<div class="Header__content">


<button type="button" class="Header__close" aria-expanded="false">
<span class="Header__icon Header__icon--close" aria-hidden="true"></span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="ec3c53ebe9882d30ab0e3ad39a73afee" class="Icon ">
<path d="M18.3002 5.71022C17.9102 5.32022 17.2802 5.32022 16.8902 5.71022L12.0002 10.5902L7.11022 5.70021C6.72022 5.31021 6.09021 5.31021 5.70021 5.70021C5.31021 6.09021 5.31021 6.72022 5.70021 7.11022L10.5902 12.0002L5.70021 16.8902C5.31021 17.2802 5.31021 17.9102 5.70021 18.3002C6.09021 18.6902 6.72022 18.6902 7.11022 18.3002L12.0002 13.4102L16.8902 18.3002C17.2802 18.6902 17.9102 18.6902 18.3002 18.3002C18.6902 17.9102 18.6902 17.2802 18.3002 16.8902L13.4102 12.0002L18.3002 7.11022C18.6802 6.73022 18.6802 6.09022 18.3002 5.71022Z" fill="#132930"></path>
</svg>

<span class="accessibility-hidden">Close</span>
</button>

Expand Down

0 comments on commit 0172867

Please sign in to comment.