accordion trekkspill oversatt

packages/nextjs/src/components/_common/expandable/Expandable.tsx

@@ -34,16 +34,16 @@ export const Expandable = ({
     isOpenDefault,
 }: Props) => {
     const [isOpen, setIsOpen] = useState(isOpenDefault ?? false);
-    const accordionRef = useRef<HTMLDivElement | null>(null);
+    const trekkspillRef = useRef<HTMLDivElement | null>(null);
     const contentProps = usePageContentProps();
     const { context } = getDecoratorParams(contentProps);
 
     useShortcuts({ shortcut: Shortcuts.SEARCH, callback: () => setIsOpen(true) });
-    useCheckAndOpenPanel(isOpen, setIsOpen, accordionRef, anchorId);
+    useCheckAndOpenPanel(isOpen, setIsOpen, trekkspillRef, anchorId);
 
     const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
         setIsOpen(isOpening);
-        handleStickyScrollOffset(isOpening, accordionRef.current);
+        handleStickyScrollOffset(isOpening, trekkspillRef.current);
         logAnalyticsEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
             opprinnelse: analyticsOriginTag || 'utvidbar tekst',
@@ -77,7 +77,7 @@ export const Expandable = ({
         <ExpansionCard
             id={anchorId}
             className={classNames(className, style.expandable, isLegacyUsage && style.legacy)}
-            ref={accordionRef}
+            ref={trekkspillRef}
             onToggle={(isOpen) => toggleExpandCollapse(isOpen, title)}
             open={isOpen}
             aria-label={ariaLabel || title}

packages/nextjs/src/components/_common/accordion/Accordion.module.scss → packages/nextjs/src/components/_common/trekkspill/Trekkspill.module.scss

@@ -1,4 +1,4 @@
-.accordion {
+.trekkspill {
     margin-bottom: var(--a-spacing-9);
 
     :global(.parsedHtml:last-child) {

packages/nextjs/src/components/_common/accordion/Accordion.stories.ts → packages/nextjs/src/components/_common/trekkspill/Trekkspill.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MacroType } from 'types/macro-props/_macros-common';
-import { Accordion } from './Accordion';
+import { Trekkspill } from './Trekkspill';
 
-const meta = { component: Accordion } satisfies Meta<typeof Accordion>;
+const meta = { component: Trekkspill } satisfies Meta<typeof Trekkspill>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        accordion: [
+        trekkspill: [
             {
                 title: 'Section 1',
                 anchorId: 'section-1',

packages/nextjs/src/components/_common/accordion/Accordion.tsx → packages/nextjs/src/components/_common/trekkspill/Trekkspill.tsx

@@ -7,62 +7,62 @@ import { usePageContentProps } from 'store/pageContext';
 import { getDecoratorParams } from 'utils/decorator-utils';
 import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { EditorHelp } from 'components/_editor-only/editorHelp/EditorHelp';
-import { PartConfigAccordion } from 'components/parts/accordion/AccordionPart';
+import { PartConfigTrekkspill } from 'components/parts/trekkspill/TrekkspillPart';
 import { classNames } from 'utils/classnames';
 import { handleStickyScrollOffset } from 'utils/scroll-to';
 
 import defaultHtml from 'components/_common/parsedHtml/DefaultHtmlStyling.module.scss';
-import { useCheckAndOpenAccordionPanel } from 'store/hooks/useCheckAndOpenAccordionPanel';
-import styles from './Accordion.module.scss';
+import { useCheckAndOpenTrekkspillPanel } from 'store/hooks/useCheckAndOpenTrekkspillPanel';
+import styles from './Trekkspill.module.scss';
 
-type AccordionProps = PartConfigAccordion;
-type PanelItem = AccordionProps['accordion'][number];
+type TrekkspillProps = PartConfigTrekkspill;
+type PanelItem = TrekkspillProps['trekkspill'][number];
 
-export const Accordion = ({ accordion }: AccordionProps) => {
-    const itemRefs = useRef(accordion.map(() => React.createRef<HTMLDivElement>()));
+export const Trekkspill = ({ trekkspill }: TrekkspillProps) => {
+    const itemRefs = useRef(trekkspill.map(() => React.createRef<HTMLDivElement>()));
     const contentProps = usePageContentProps();
     const { context } = getDecoratorParams(contentProps);
     const { editorView, type } = contentProps;
-    const [openAccordions, setOpenAccordions] = useState<number[]>([]);
+    const [openTrekkspill, setOpenTrekkspill] = useState<number[]>([]);
 
-    const expandAll = () => setOpenAccordions(accordion.map((_, index) => index));
+    const expandAll = () => setOpenTrekkspill(trekkspill.map((_, index) => index));
     const validatePanel = (item: PanelItem) => Boolean(item.title && item.html);
 
     useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll });
 
     const handleOpenChange = (isOpening: boolean, tittel: string, index: number) => {
         handleStickyScrollOffset(isOpening, itemRefs.current[index].current);
-        setOpenAccordions((prev) =>
+        setOpenTrekkspill((prev) =>
             isOpening ? [...prev, index] : prev.filter((i) => i !== index)
         );
         logAnalyticsEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
             tittel,
             opprinnelse: 'trekkspill',
-            komponent: 'Accordion',
+            komponent: 'Trekkspill',
             målgruppe: context,
             innholdstype: innholdsTypeMap[type],
         });
     };
 
-    if (itemRefs.current.length !== accordion.length) {
-        itemRefs.current = accordion.map(() => React.createRef<HTMLDivElement>());
+    if (itemRefs.current.length !== trekkspill.length) {
+        itemRefs.current = trekkspill.map(() => React.createRef<HTMLDivElement>());
     }
 
-    useCheckAndOpenAccordionPanel(openAccordions, setOpenAccordions, itemRefs.current, expandAll);
+    useCheckAndOpenTrekkspillPanel(openTrekkspill, setOpenTrekkspill, itemRefs.current, expandAll);
 
     // Show all panels in edit mode, but only valid panels in view mode
-    const validAccordion = accordion.filter(validatePanel);
-    const relevantAccordion = editorView === 'edit' ? accordion : validAccordion;
+    const validTrekkspill = trekkspill.filter(validatePanel);
+    const relevantTrekkspill = editorView === 'edit' ? trekkspill : validTrekkspill;
 
     return (
-        <DSAccordion className={styles.accordion}>
-            {relevantAccordion.map((item, index) => {
+        <DSAccordion className={styles.trekkspill}>
+            {relevantTrekkspill.map((item, index) => {
                 const isValid = validatePanel(item);
                 return (
                     <DSAccordion.Item
                         key={index}
                         className={styles.item}
-                        open={openAccordions.includes(index)}
+                        open={openTrekkspill.includes(index)}
                         onOpenChange={(open) => handleOpenChange(open, item.title, index)}
                         ref={itemRefs.current[index]}
                         tabIndex={-1}

packages/nextjs/src/components/parts/PartsMapper.tsx

@@ -53,7 +53,7 @@ import { LoggedinCardPart } from './loggedin-card/LoggedinCardPart';
 import { FrontpageContactPart } from './frontpage-contact/FrontpageContactPart';
 import { FormDetailsPart } from './form-details/FormDetailsPart';
 import { ReadMorePart } from './readMorePart/ReadMorePart';
-import { AccordionPart } from './accordion/AccordionPart';
+import { TrekkspillPart } from './trekkspill/TrekkspillPart';
 import { RelatedSituationsPart } from './related-situations/RelatedSituationsPart';
 
 const partsDeprecated: ReadonlySet<PartTypeAll> = new Set([
@@ -72,8 +72,8 @@ const PartComponentMapper = ({
     pageProps: ContentProps;
 }) => {
     switch (partProps.descriptor) {
-        case PartType.Accordion:
-            return <AccordionPart {...partProps} />;
+        case PartType.Trekkspill:
+            return <TrekkspillPart {...partProps} />;
         case PartType.AlertBox:
             return <AlertBoxPart {...partProps} />;
         case PartType.AreaCard:

packages/nextjs/src/components/parts/accordion/AccordionPart.tsx → packages/nextjs/src/components/parts/trekkspill/TrekkspillPart.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import { Accordion } from 'components/_common/accordion/Accordion';
+import { Trekkspill } from 'components/_common/trekkspill/Trekkspill';
 import { EditorHelp } from 'components/_editor-only/editorHelp/EditorHelp';
 import { PartComponentProps, PartType } from 'types/component-props/parts';
 import { ProcessedHtmlProps } from 'types/processed-html-props';
 
-export type PartConfigAccordion = {
-    accordion: Array<{
+export type PartConfigTrekkspill = {
+    trekkspill: Array<{
         title: string;
         anchorId?: string;
         html: ProcessedHtmlProps;
     }>;
 };
 
-export const AccordionPart = ({ config }: PartComponentProps<PartType.Accordion>) => {
-    if (!config?.accordion || config.accordion.length === 0) {
+export const TrekkspillPart = ({ config }: PartComponentProps<PartType.Trekkspill>) => {
+    if (!config?.trekkspill || config.trekkspill.length === 0) {
         return <EditorHelp text={'Kortet mangler innhold'} />;
     }
 
-    const { accordion } = config;
+    const { trekkspill } = config;
 
-    return <Accordion accordion={accordion} />;
+    return <Trekkspill trekkspill={trekkspill} />;
 };

packages/nextjs/src/store/hooks/useCheckAndOpenAccordionPanel.ts → packages/nextjs/src/store/hooks/useCheckAndOpenTrekkspillPanel.ts

@@ -1,7 +1,7 @@
 import { useEffect, useCallback } from 'react';
 import { smoothScrollToTarget } from 'utils/scroll-to';
 
-export const useCheckAndOpenAccordionPanel = (
+export const useCheckAndOpenTrekkspillPanel = (
     openPanels: number[],
     setOpenPanels: (indexes: number[]) => void,
     refs: React.RefObject<HTMLDivElement>[],

packages/nextjs/src/types/component-props/parts.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmptyObject } from 'types/util-types';
-import { PartConfigAccordion } from 'components/parts/accordion/AccordionPart';
+import { PartConfigTrekkspill } from 'components/parts/trekkspill/TrekkspillPart';
 import { PartConfigAlertBox } from 'components/parts/alert-box/AlertBoxPart';
 import { PartConfigAreaCard } from 'components/parts/area-card/AreaCardPart';
 import { PartConfigAreapageSituationCard } from 'components/parts/areapage-situation-card/AreapageSituationCardPart';
@@ -65,7 +65,7 @@ export enum PartType {
     UxSignalsWidget = 'no.nav.navno:uxsignals-widget',
     UserTests = 'no.nav.navno:user-tests',
     ReadMore = 'no.nav.navno:read-more',
-    Accordion = 'no.nav.navno:accordion',
+    Trekkspill = 'no.nav.navno:trekkspill',
     AlternativeAudience = 'no.nav.navno:alternative-audience',
     RelatedSituations = 'no.nav.navno:related-situations',
 }
@@ -93,7 +93,7 @@ export enum PartLegacyType {
 }
 
 type PartConfigs = {
-    [PartType.Accordion]: PartConfigAccordion;
+    [PartType.Trekkspill]: PartConfigTrekkspill;
     [PartType.AlertBox]: PartConfigAlertBox;
     [PartType.AreaCard]: PartConfigAreaCard;
     [PartType.AreapageSituationCard]: PartConfigAreapageSituationCard;