Feat(web-twig): Introduce Header Navbar Close component (refs #DS-161)

lmc-eu · Jul 30, 2022 · c504e61 · c504e61
1 parent a1a2726
commit c504e61
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/packages/web-twig/src/Resources/components/navbarClose.twig b/packages/web-twig/src/Resources/components/navbarClose.twig
@@ -0,0 +1,16 @@
+{% set _className = _spiritClassPrefix ~ 'Header' %}
+{% set _class = (props.class is defined) ? ' ' ~  props.class : '' %}
+{% set _label = (props.label is defined) ? props.label : 'Close' %}
+{% set _ariaControls = (props.ariaControls is defined) ? ' aria-controls="' ~ props.ariaControls ~ '"' : '' %}
+
+{% set _iconClassName = _spiritClassPrefix ~ 'Header__icon' %}
+
+<button
+    type="button"
+    className="{{ _className }}__close{{ _class }}"
+    {{ _ariaControls }}
+    aria-expanded="false"
+  >
+    <span class="{{ _iconClassName }} {{ _iconClassName }}--close" aria-hidden="true"></span>
+    <span class="accessibility-hidden">{{ _label }}</span>
+</button>