diff --git a/packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-accordion--default-desktop-linux-desktop-linux.png b/packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-trekkspill--default-desktop-linux-desktop-linux.png similarity index 100% rename from packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-accordion--default-desktop-linux-desktop-linux.png rename to packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-trekkspill--default-desktop-linux-desktop-linux.png diff --git a/packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-accordion--default-mobile-linux-mobile-linux.png b/packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-trekkspill--default-mobile-linux-mobile-linux.png similarity index 100% rename from packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-accordion--default-mobile-linux-mobile-linux.png rename to packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-trekkspill--default-mobile-linux-mobile-linux.png diff --git a/packages/nextjs/src/components/_common/expandable/Expandable.tsx b/packages/nextjs/src/components/_common/expandable/Expandable.tsx index 6b1a3076b..e1ab67114 100644 --- a/packages/nextjs/src/components/_common/expandable/Expandable.tsx +++ b/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(null); + const trekkspillRef = useRef(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 = ({ toggleExpandCollapse(isOpen, title)} open={isOpen} aria-label={ariaLabel || title} diff --git a/packages/nextjs/src/components/_common/accordion/Accordion.module.scss b/packages/nextjs/src/components/_common/trekkspill/Trekkspill.module.scss similarity index 99% rename from packages/nextjs/src/components/_common/accordion/Accordion.module.scss rename to packages/nextjs/src/components/_common/trekkspill/Trekkspill.module.scss index e8484f4e8..66a2129ea 100644 --- a/packages/nextjs/src/components/_common/accordion/Accordion.module.scss +++ b/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) { diff --git a/packages/nextjs/src/components/_common/accordion/Accordion.stories.ts b/packages/nextjs/src/components/_common/trekkspill/Trekkspill.stories.ts similarity index 90% rename from packages/nextjs/src/components/_common/accordion/Accordion.stories.ts rename to packages/nextjs/src/components/_common/trekkspill/Trekkspill.stories.ts index 6507011cc..6a0ab28ab 100644 --- a/packages/nextjs/src/components/_common/accordion/Accordion.stories.ts +++ b/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; +const meta = { component: Trekkspill } satisfies Meta; export default meta; type Story = StoryObj; export const Default: Story = { args: { - accordion: [ + trekkspill: [ { title: 'Section 1', anchorId: 'section-1', diff --git a/packages/nextjs/src/components/_common/accordion/Accordion.tsx b/packages/nextjs/src/components/_common/trekkspill/Trekkspill.tsx similarity index 70% rename from packages/nextjs/src/components/_common/accordion/Accordion.tsx rename to packages/nextjs/src/components/_common/trekkspill/Trekkspill.tsx index af6441ce9..250b7c7d0 100644 --- a/packages/nextjs/src/components/_common/accordion/Accordion.tsx +++ b/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())); +export const Trekkspill = ({ trekkspill }: TrekkspillProps) => { + const itemRefs = useRef(trekkspill.map(() => React.createRef())); const contentProps = usePageContentProps(); const { context } = getDecoratorParams(contentProps); const { editorView, type } = contentProps; - const [openAccordions, setOpenAccordions] = useState([]); + const [openTrekkspill, setOpenTrekkspill] = useState([]); - 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()); + if (itemRefs.current.length !== trekkspill.length) { + itemRefs.current = trekkspill.map(() => React.createRef()); } - 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 ( - - {relevantAccordion.map((item, index) => { + + {relevantTrekkspill.map((item, index) => { const isValid = validatePanel(item); return ( handleOpenChange(open, item.title, index)} ref={itemRefs.current[index]} tabIndex={-1} diff --git a/packages/nextjs/src/components/parts/PartsMapper.tsx b/packages/nextjs/src/components/parts/PartsMapper.tsx index 5fbe5044f..c7f8286d3 100644 --- a/packages/nextjs/src/components/parts/PartsMapper.tsx +++ b/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 = new Set([ @@ -72,8 +72,8 @@ const PartComponentMapper = ({ pageProps: ContentProps; }) => { switch (partProps.descriptor) { - case PartType.Accordion: - return ; + case PartType.Trekkspill: + return ; case PartType.AlertBox: return ; case PartType.AreaCard: diff --git a/packages/nextjs/src/components/parts/accordion/AccordionPart.tsx b/packages/nextjs/src/components/parts/trekkspill/TrekkspillPart.tsx similarity index 52% rename from packages/nextjs/src/components/parts/accordion/AccordionPart.tsx rename to packages/nextjs/src/components/parts/trekkspill/TrekkspillPart.tsx index bb4c2cac2..56be6651b 100644 --- a/packages/nextjs/src/components/parts/accordion/AccordionPart.tsx +++ b/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) => { - if (!config?.accordion || config.accordion.length === 0) { +export const TrekkspillPart = ({ config }: PartComponentProps) => { + if (!config?.trekkspill || config.trekkspill.length === 0) { return ; } - const { accordion } = config; + const { trekkspill } = config; - return ; + return ; }; diff --git a/packages/nextjs/src/store/hooks/useCheckAndOpenAccordionPanel.ts b/packages/nextjs/src/store/hooks/useCheckAndOpenTrekkspillPanel.ts similarity index 96% rename from packages/nextjs/src/store/hooks/useCheckAndOpenAccordionPanel.ts rename to packages/nextjs/src/store/hooks/useCheckAndOpenTrekkspillPanel.ts index 771074a2a..764474a30 100644 --- a/packages/nextjs/src/store/hooks/useCheckAndOpenAccordionPanel.ts +++ b/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[], diff --git a/packages/nextjs/src/types/component-props/parts.ts b/packages/nextjs/src/types/component-props/parts.ts index 7123214a7..b4eea13ed 100644 --- a/packages/nextjs/src/types/component-props/parts.ts +++ b/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;