Replace SVG chevron in disclosure widget with CSS shape

Maintains visual consistency

Author: NicolaSaunders

assets-src/styles/sass/60-advanced-components/_disclosure-widget.scss

@@ -15,11 +15,22 @@
 [data-toggle="true"] {
 	@include txt-pluto;
 	align-items: center;
+    display: inline-flex;
 	font-weight: bold;
 
-	svg {
-		pointer-events: none;
-	}
+    // Decorative chevron
+    &::after {
+        block-size: rem(7);
+        border-color: black;
+        border-style: solid;
+        border-width: 0 rem(2) rem(2) 0;
+        content: "";
+        inline-size: rem(7);
+        margin-block-start: rem(-3);
+        margin-inline-end: rem(3);
+        margin-inline-start: rem(12);
+        transform: rotate(45deg);
+    }
 
 	&:hover {
 		box-shadow: 0 0 4px 2px rgba(84,84,84,0.25);
@@ -33,19 +44,16 @@
 }
 
 [data-toggle="true"][aria-expanded="false"] {
-	.angle-up {
-		display: none;
-	}
-
 	+ * {
 		display: none;
 	}
 }
 
 [data-toggle="true"][aria-expanded="true"] {
-	.angle-down {
-		display: none;
-	}
+	&::after {
+        margin-block-start: rem(4);
+        scale: -1;
+    }
 
 	+ * {
 		display: block;

design-system-templates/components/disclosure-button.html.twig

@@ -1 +1 @@
-<button type="button" class="button button--ghost with-icon with-icon--after" style="display:none;" data-toggle="true">Toggle content <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="angle-down" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/><path class="angle-up" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg></button>
+<button type="button" class="button button--ghost" style="display:none;" data-toggle="true">Toggle content</button>

public/dist/assets/styles/advanced.css

@@ -856,10 +856,20 @@ br {
   font-size: 0.9375rem;
   line-height: 1.5;
   align-items: center;
+  display: inline-flex;
   font-weight: bold;
 }
-[data-toggle=true] svg {
-  pointer-events: none;
+[data-toggle=true]::after {
+  block-size: 0.4375rem;
+  border-color: black;
+  border-style: solid;
+  border-width: 0 0.125rem 0.125rem 0;
+  content: "";
+  inline-size: 0.4375rem;
+  margin-block-start: -0.1875rem;
+  margin-inline-end: 0.1875rem;
+  margin-inline-start: 0.75rem;
+  transform: rotate(45deg);
 }
 [data-toggle=true]:hover {
   box-shadow: 0 0 4px 2px rgba(84, 84, 84, 0.25);
@@ -870,15 +880,13 @@ br {
   box-shadow: none;
 }
 
-[data-toggle=true][aria-expanded=false] .angle-up {
-  display: none;
-}
 [data-toggle=true][aria-expanded=false] + * {
   display: none;
 }
 
-[data-toggle=true][aria-expanded=true] .angle-down {
-  display: none;
+[data-toggle=true][aria-expanded=true]::after {
+  margin-block-start: 0.25rem;
+  scale: -1;
 }
 [data-toggle=true][aria-expanded=true] + * {
   display: block;