feat(css): enable animation for the accordion

components/accordion/css/_mixin.scss

@@ -4,8 +4,8 @@
  * Copyright (c) 2020-2022 Frameless B.V.
  */
 
-/* stylelint-disable-next-line block-no-empty */
 @mixin utrecht-accordion {
+  --_utrecht-accordion-panel-max-block-size: 0;
 }
 
 @mixin utrecht-accordion__section {
@@ -40,50 +40,62 @@
   position: relative;
 }
 
-@mixin utrecht-accordion__button-icon {
-  background-color: var(--utrecht-accordion-button-icon-background-color);
-  background-position: center;
-  background-repeat: no-repeat;
-  block-size: var(--utrecht-accordion-button-icon-size);
-  content: "";
-  inline-size: var(--utrecht-accordion-button-icon-size);
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  position: absolute;
+@mixin utrecht-accordion__icon {
+  display: inline-block;
+  font-size: var(--utrecht-accordion-icon-size);
+  transition-duration: var(--utrecht-accordion-icon-transition-duration);
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
 }
 
-@mixin utrecht-accordion__button-icon-arrow-down {
-  background-image: var(
-    --utrecht-accordion-icon-arrow-down,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E")
-  );
+@mixin utrecht-accordion__icon--expanded {
+  transform: rotate(180deg);
 }
 
-@mixin utrecht-accordion__button-icon-arrow-up {
-  background-image: var(
-    --utrecht-accordion-icon-arrow-up,
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E")
-  );
-  background-position: center;
-  background-repeat: no-repeat;
-  content: "";
+@mixin utrecht-accordion__icon-box {
+  align-items: center;
+  background-color: var(--utrecht-accordion-icon-box-background-color);
+  block-size: var(--utrecht-accordion-icon-box-size);
+  display: flex;
+  inline-size: var(--utrecht-accordion-icon-box-size);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  justify-content: center;
+  position: absolute;
 }
 
 @mixin utrecht-accordion__button--rtl {
   justify-content: end !important;
 }
 
 @mixin utrecht-accordion__panel {
+  max-block-size: var(--_utrecht-accordion-panel-max-block-size);
+  overflow: hidden;
+  transition-duration: var(--utrecht-accordion-panel-transition-duration);
+  transition-property: max-block-size;
+  transition-timing-function: ease-in-out;
+}
+
+@mixin utrecht-accordion__panel-content {
   border-block-start: none;
-  border-color: var(--utrecht-accordion-panel-border-color);
+  border-color: var(--utrecht-accordion-panel-content-border-color);
   border-style: solid;
-  border-width: var(--utrecht-accordion-panel-border-width);
-  padding-block-end: var(--utrecht-accordion-panel-padding-block-end);
-  padding-block-start: var(--utrecht-accordion-panel-padding-block-start);
-  padding-inline-end: var(--utrecht-accordion-panel-padding-inline-end);
-  padding-inline-start: var(--utrecht-accordion-panel-padding-inline-start);
+  border-width: var(--utrecht-accordion-panel-content-border-width);
+  padding-block-end: var(--utrecht-accordion-panel-content-padding-block-end);
+  padding-block-start: var(--utrecht-accordion-panel-content-padding-block-start);
+  padding-inline-end: var(--utrecht-accordion-panel-content-padding-inline-end);
+  padding-inline-start: var(--utrecht-accordion-panel-content-padding-inline-start);
 }
 
 @mixin utrecht-accordion__header {
   --utrecht-space-around: 0;
 }
+
+@mixin utrecht-accordion__panel--expanded {
+  --_utrecht-accordion-panel-max-block-size: 100vh;
+}
+
+@mixin utrecht-accordion--reduced-motion {
+  --utrecht-accordion-icon-transition-duration: 0;
+  --utrecht-accordion-panel-transition-duration: 0;
+}

components/accordion/css/index.scss

@@ -16,24 +16,42 @@
 
 .utrecht-accordion__button {
   @include utrecht-accordion__button;
+}
 
-  &[aria-expanded]::after {
-    @include utrecht-accordion__button-icon;
-  }
+.utrecht-accordion__icon-box {
+  @include utrecht-accordion__icon-box;
+}
 
-  &[aria-expanded="false"]::after {
-    @include utrecht-accordion__button-icon-arrow-down;
-  }
+.utrecht-accordion__icon {
+  @include utrecht-accordion__icon;
+}
 
-  &[aria-expanded="true"]::after {
-    @include utrecht-accordion__button-icon-arrow-up;
-  }
+.utrecht-accordion__icon--expanded {
+  @include utrecht-accordion__icon--expanded;
+}
+
+.utrecht-accordion__panel--expanded {
+  @include utrecht-accordion__panel--expanded;
 }
 
 .utrecht-accordion__panel {
   @include utrecht-accordion__panel;
 }
 
+.utrecht-accordion__panel-content {
+  @include utrecht-accordion__panel-content;
+}
+
 .utrecht-accordion__header {
   @include utrecht-accordion__header;
 }
+
+@media (prefers-reduced-motion) {
+  .utrecht-accordion__panel {
+    @include utrecht-accordion--reduced-motion;
+  }
+
+  .utrecht-accordion__icon {
+    @include utrecht-accordion--reduced-motion;
+  }
+}

components/accordion/tokens.json

@@ -143,88 +143,100 @@
               }
             }
           }
+        }
+      },
+      "panel": {
+        "transition-duration": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<time>",
+              "inherits": true
+            }
+          }
         },
-        "icon": {
-          "arrow-down": {
+        "content": {
+          "border-color": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<url>",
+                "syntax": "<color>",
                 "inherits": true
               }
             }
           },
-          "arrow-up": {
+          "border-width": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<url>",
+                "syntax": "<length>",
                 "inherits": true
               }
             }
           },
-          "background-color": {
+          "padding-block-start": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
-                "syntax": "<color>",
+                "syntax": "<length>",
                 "inherits": true
               }
             }
           },
-          "size": {
+          "padding-block-end": {
             "$extensions": {
               "nl.nldesignsystem.css.property": {
                 "syntax": "<length>",
                 "inherits": true
               }
             }
-          }
-        }
-      },
-      "panel": {
-        "border-color": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<color>",
-              "inherits": true
+          },
+          "padding-inline-start": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              }
             }
-          }
-        },
-        "border-width": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
+          },
+          "padding-inline-end": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              }
             }
           }
-        },
-        "padding-block-start": {
+        }
+      },
+      "icon": {
+        "size": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
               "syntax": "<length>",
               "inherits": true
             }
           }
         },
-        "padding-block-end": {
+        "transition-duration": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
+              "syntax": "<time>",
               "inherits": true
             }
           }
         },
-        "padding-inline-start": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
+        "box": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              }
             }
-          }
-        },
-        "padding-inline-end": {
-          "$extensions": {
-            "nl.nldesignsystem.css.property": {
-              "syntax": "<length>",
-              "inherits": true
+          },
+          "size": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              }
             }
           }
         }

packages/component-library-react/src/Accordion.tsx

@@ -6,13 +6,42 @@ import {
   KeyboardEvent,
   PropsWithChildren,
   RefObject,
+  SVGProps,
   useId,
   useRef,
   useState,
 } from 'react';
 import { Button } from './Button';
 import { Heading } from './Heading';
 
+interface AccordionIconProps extends SVGProps<SVGSVGElement> {
+  expanded: boolean;
+}
+
+const AccordionIcon = ({ expanded, ...restProps }: AccordionIconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    className={clsx('utrecht-accordion__icon', {
+      'utrecht-accordion__icon--expanded': expanded,
+    })}
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 14 8"
+    {...restProps}
+  >
+    <defs>
+      <clipPath id="a">
+        <path strokeWidth={0} d="M0 0h14v8H0z" />
+      </clipPath>
+    </defs>
+    <g clipPath="url(#a)">
+      <path d="M7 8c-.26 0-.51-.1-.71-.29l-6-6C-.1 1.32-.1.68.29.29s1.03-.39 1.42 0L7 5.58 12.29.29A.996.996 0 1 1 13.7 1.7l-6 6c-.2.2-.45.29-.71.29Z" />
+    </g>
+  </svg>
+);
+export default AccordionIcon;
+
 /**
  * Find the first item in an array
  */
@@ -73,8 +102,6 @@ export const AccordionSection = forwardRef(
       className: clsx('utrecht-accordion__panel', {
         'utrecht-accordion__panel--expanded': expanded,
       }),
-      // Use the `hidden` attribute so the toggle works even without CSS
-      hidden: !expanded,
       // Use the `aria-hidden` attribute too, so it even works when CSS
       // doesn't use `display: none` to make transitions.
       'aria-hidden': !expanded,
@@ -106,14 +133,19 @@ export const AccordionSection = forwardRef(
             ref={buttonRef}
           >
             {label}
+            <div className="utrecht-accordion__icon-box">
+              <AccordionIcon expanded={expanded} />
+            </div>
           </Button>
         </Heading>
         {section ? (
           <section id={panelId} aria-labelledby={buttonId} {...panelAttributes}>
             {children}
           </section>
         ) : (
-          <div {...panelAttributes}>{children}</div>
+          <div {...panelAttributes}>
+            <div className={clsx('utrecht-accordion__panel-content')}>{children}</div>
+          </div>
         )}
       </div>
     );