Merged in feat/SW-1282-list-added-ancillaries (pull request #1416)

Feat/SW-1282 list added ancillaries

* feat(sw-1282): add icon to accordionItem

* feat(sw-1282): list added ancillaries

* Change translation key to already existing

* Remove duplicate key

* Move new files to the new folder structure


Approved-by: Pontus Dreij

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts

@@ -1,4 +1,5 @@
 import type { VariantProps } from "class-variance-authority"
+import type { ReactNode } from "react"
 
 import type { IconName } from "@/types/components/icon"
 import type { accordionItemVariants } from "./variants"
@@ -7,7 +8,8 @@ export interface AccordionItemProps
   extends React.HtmlHTMLAttributes<HTMLDetailsElement>,
     VariantProps<typeof accordionItemVariants> {
   title: string
-  icon?: IconName
+  iconName?: IconName
+  icon?: ReactNode
   trackingId?: string
   subtitle?: string
 }

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -17,6 +17,7 @@ import type { AccordionItemProps } from "./accordionItem"
 export default function AccordionItem({
   children,
   icon,
+  iconName,
   title,
   theme,
   variant,
@@ -27,7 +28,10 @@ export default function AccordionItem({
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
 
-  const IconComp = getIconByIconName(icon)
+  const FoundIcon = getIconByIconName(iconName)
+  const IconComp = icon
+    ? icon
+    : FoundIcon && <FoundIcon color="baseTextHighcontrast" />
 
   function toggleAccordion() {
     const details = detailsRef.current
@@ -56,7 +60,7 @@ export default function AccordionItem({
     <li className={accordionItemVariants({ className, variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
-          {IconComp && <IconComp color="baseTextHighcontrast" />}
+          {IconComp}
           {variant === "sidepeek" ? (
             <Subtitle
               className={styles.title}