feat(Accordion)!: introduce 2.0 component (#1901)

- add stories
- remove deprecated functionality
- update examples as needed

src/components/Accordion/Accordion-v2.module.css

@@ -0,0 +1,129 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # ACCORDION
+\*------------------------------------*/
+
+/**
+ * Accordion Panel that expands and collapses.
+ * Reveals itself below the associated Accordion Button.
+ */
+ .accordion-panel {
+  padding: 0 3.5rem 1rem 1rem;
+
+  font: var(--eds-theme-typography-body-sm);
+
+  &.accordion-panel--leading-icon {
+    padding-left: 3.5rem;
+  }
+
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+/**
+ * Accordion Button, wraps the heading and open indicator icon.
+ */
+.accordion-button {
+  display: flex;
+  justify-content: flex-start;
+  gap: 1rem;
+  width: 100%;
+
+  border: 0;
+  text-align: left;
+
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+
+  &:hover {
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+  }
+
+  &:active {
+    background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+  }
+}
+
+.accordion-button--empty {
+  pointer-events: none;
+}
+
+/**
+ * Size variants
+ */
+.accordion-button--sm,
+.accordion-button--md {
+  padding: 0.5rem 1rem;
+}
+
+/**
+ * Expand more (chevron) icon indicates open or closed status.
+ *
+ * This non-rotated icon points down and represents closed status.
+ */
+ .accordion-button__trailing-icon {
+  flex: 0 0 content;
+  transform: rotate(0);
+}
+
+/**
+ * This rotated icon points up and represents open status.
+ */
+ .accordion-button__trailing-icon--open {
+  transform: rotate(-180deg);
+}
+
+/**
+ * Animates the icon rotation when opening and closing.
+ */
+ .accordion-button > .accordion-button__trailing-icon {
+  transition: transform var(--eds-anim-move-medium) var(--eds-anim-ease);
+
+  @media screen and (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+.accordion-panel--hidden {
+  padding: 0;
+}
+
+.accordion-button__heading {
+  flex-grow: 2;
+
+  & > * + * {
+    display: block;
+  }
+}
+
+.accordion-button:focus-visible {
+  outline: 0.125rem solid var(--eds-theme-color-border-utility-focus)
+}
+
+.accordion-button__leading-icon {
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.accordion-button__title {
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.accordion-button__subtitle {
+  color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+
+.accordion-panel--md {
+  font: var(--eds-theme-typography-body-md);
+}
+
+.accordion-panel--sm {
+  font: var(--eds-theme-typography-body-sm);
+}
+
+/**
+ * Accordion Row houses one Accordion Button subcomponent and its relevant Accordion Panel subcomponent.
+ */
+.accordion-row {
+  border-bottom: var(--eds-border-width-sm) solid
+    var(--eds-theme-color-border-utility-default-low-emphasis);
+}