From 38d72dc1250b593b839f300ee3d1ba4fda503aca Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Wed, 31 Aug 2022 11:43:52 -0400
Subject: [PATCH] ISTWCMS-5572: fixing both background and inline svgs
---
src/patterns/04-components/icon/_icon.scss | 2 ++
.../icon/icon--button/_icon--button.scss | 3 +++
src/patterns/04-components/svg/_svg-macro.twig | 6 ++++++
src/patterns/04-components/svg/_svg.twig | 11 +++++++----
.../04-components/svg/icons/_add-to-calendar.svg.twig | 4 ----
src/patterns/04-components/svg/svg.yml | 2 --
src/patterns/04-components/svg/svgs.twig | 8 ++++----
src/patterns/04-components/svg/svgs.yml | 1 +
8 files changed, 23 insertions(+), 14 deletions(-)
create mode 100644 src/patterns/04-components/svg/_svg-macro.twig
delete mode 100644 src/patterns/04-components/svg/svg.yml
diff --git a/src/patterns/04-components/icon/_icon.scss b/src/patterns/04-components/icon/_icon.scss
index d0772576..d793bc14 100644
--- a/src/patterns/04-components/icon/_icon.scss
+++ b/src/patterns/04-components/icon/_icon.scss
@@ -6,10 +6,12 @@
height: var(--size-3);
line-height: normal;
width: var(--size-3);
+
svg {
height: var(--size-3);
width: var(--size-3);
}
+
// Fixes delayed transitions in Chrome.
* {
transition: none;
diff --git a/src/patterns/04-components/icon/icon--button/_icon--button.scss b/src/patterns/04-components/icon/icon--button/_icon--button.scss
index 790e3c4b..d28186da 100644
--- a/src/patterns/04-components/icon/icon--button/_icon--button.scss
+++ b/src/patterns/04-components/icon/icon--button/_icon--button.scss
@@ -20,6 +20,7 @@ $icon-font-size-small: var(--font-size-0) !default;
line-height: normal;
padding: 0 var(--size-1);
transition: background 0.2s ease-in;
+
.uw-icon {
align-items: center;
display: flex;
@@ -32,10 +33,12 @@ $icon-font-size-small: var(--font-size-0) !default;
&.uw-icon-link {
color: var(--uw-black);
text-decoration: none;
+
&:hover,
&:focus {
background: $button-background-color-hover;
color: var(--uw-black) !important;
+
.uw-icon {
svg{
fill: var(--uw-black);
diff --git a/src/patterns/04-components/svg/_svg-macro.twig b/src/patterns/04-components/svg/_svg-macro.twig
new file mode 100644
index 00000000..44b201fd
--- /dev/null
+++ b/src/patterns/04-components/svg/_svg-macro.twig
@@ -0,0 +1,6 @@
+{% macro get(icon) %}
+ {% include '@components/svg/icons/_' ~ icon ~ '.svg.twig' with {
+ 'icon': icon
+ } only
+ %}
+{% endmacro %}
diff --git a/src/patterns/04-components/svg/_svg.twig b/src/patterns/04-components/svg/_svg.twig
index 88ba2fcb..cc4135cb 100644
--- a/src/patterns/04-components/svg/_svg.twig
+++ b/src/patterns/04-components/svg/_svg.twig
@@ -1,6 +1,9 @@
-<span class="uw-icon uw-svg uw-svg__{{ svg_name }}">
-{# {% include '@components/svg/icons/_' ~ svg_name ~ '.svg.twig' %}#}
+{% import "@components/svg/_svg-macro.twig" as icons %}
- {% include '@components/svg/icons/_instagram.svg.twig' %}
+{% if not svg_name %}
+ {% set svg_name = 'android' %}
+{% endif %}
-</span>
+<div class="uw-icon">
+ {{ icons.get(svg_name) }}
+</div>
diff --git a/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig b/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
index 6e284f91..e69de29b 100644
--- a/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
+++ b/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
@@ -1,4 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>add-to-calendar</title>
-<path d="M9.573 10.021c0.735 0 1.332-0.597 1.332-1.333h-0.001v-4.362c0-0.736-0.597-1.332-1.332-1.332s-1.332 0.596-1.331 1.332v4.362c0 0.736 0.596 1.333 1.332 1.333zM21.908 10.021c0.735 0 1.331-0.597 1.331-1.333v-4.362c0-0.736-0.596-1.332-1.332-1.332-0.737 0-1.334 0.596-1.333 1.332v4.362c0 0.736 0.597 1.333 1.334 1.333zM29.001 21.571h-4.53v-4.531c0-0.002 0-0.002-0.006 0l-2.052 0.031c0 0-0.001-0.002-0.002 0l0.001 4.5h-4.37l0.030 2.062 4.34-0.004v4.34l2.060 0.033v-4.373h4.501l0.028-2.051c0.002-0.006 0.002-0.006 0-0.007zM29.517 17.527v-8.495c-0.001-1.741-1.302-3.149-2.907-3.149l-0-0h-2.619v2.69c0 1.15-0.932 2.084-2.083 2.084-0.575 0-1.097-0.232-1.474-0.612-0.376-0.377-0.611-0.9-0.611-1.473v-2.689h-8.167v2.69c0 1.15-0.931 2.084-2.082 2.084-0.574 0-1.096-0.232-1.474-0.612-0.376-0.377-0.61-0.899-0.61-1.472v-2.69h-2.56c-1.606 0-2.908 1.409-2.908 3.149v16.961c0 1.739 1.301 3.151 2.908 3.151h13.819c1.282 0.871 2.829 1.381 4.492 1.381 4.421 0 8.017-3.599 8.017-8.019 0-1.88-0.651-3.611-1.739-4.98zM23.489 29.11c-3.637 0-6.601-2.963-6.601-6.602s2.963-6.6 6.601-6.6c3.64 0 6.601 2.961 6.601 6.6s-2.96 6.602-6.601 6.602z"></path>
-</svg>
diff --git a/src/patterns/04-components/svg/svg.yml b/src/patterns/04-components/svg/svg.yml
deleted file mode 100644
index ad91df18..00000000
--- a/src/patterns/04-components/svg/svg.yml
+++ /dev/null
@@ -1,2 +0,0 @@
----
-svg_name: android
diff --git a/src/patterns/04-components/svg/svgs.twig b/src/patterns/04-components/svg/svgs.twig
index e3537c68..5bd95729 100644
--- a/src/patterns/04-components/svg/svgs.twig
+++ b/src/patterns/04-components/svg/svgs.twig
@@ -1,6 +1,6 @@
+{% import "@components/svg/_svg-macro.twig" as icons %}
+
{% for svg_name in svg_names %}
<h3>{{ svg_name | capitalize }}</h3>
- {% include '@components/svg/_svg.twig' with {
- 'svg_name': svg_name
- } %}
-{% endfor %}
\ No newline at end of file
+ {{ icons.get(svg_name) }}
+{% endfor %}
diff --git a/src/patterns/04-components/svg/svgs.yml b/src/patterns/04-components/svg/svgs.yml
index e7f659b8..9d28ef09 100644
--- a/src/patterns/04-components/svg/svgs.yml
+++ b/src/patterns/04-components/svg/svgs.yml
@@ -82,3 +82,4 @@ svg_names:
- yahoo
- youtube
- youtube-box
+svg_name: android
--
GitLab