[Suggestion] Accordion: Console warning when only one item

[HalvorHaugan]

Description

This is a suggestion we can discuss some time.

TODO: Add changeset if we decide to merge this.

Component Checklist 📝

• JSDoc
• Examples
• Documentation / Decision Records
• Storybook
• Style mappings (@navikt/core/css/config/_mappings.js)
• Component tokens (@navikt/core/css/tokens.json)
• CSS class deprecations (@navikt/aksel-stylelint/src/deprecations.ts)
• Exports (@navikt/core/react/src/index.ts and @navikt/core/react/package.json)
• New component? CSS import (@navikt/core/css/index.css)
• Breaking change? Update migration guide. Consider codemod.
• Changeset (Format: <Component>: <gitmoji?> <Text>. E.g. "Button: ✨ Add feature xyz.")

[changeset-bot]

⚠️ No Changeset found

Latest commit: 37135ca

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Storybook demo / Chromatic

61f656d9f | 97 components | 150 stories

[KenAJoh]

Proposal for change:

• Use ref on accordion wrapper
• Call it in effect to make sure everything is settled before warning
• Use data-attributes on accordion/item, since className currently change based on context

    const accordionRef = useRef<HTMLDivElement | null>(null);
    const mergedRefs = useMergeRefs(accordionRef, ref);

    useEffect(() => {
      const children = accordionRef.current?.querySelectorAll(
        "[data-accordion-item]",
      );

      if (children && children?.length < 2) {
        console.warn(...);
      }

      if (
        accordionRef.current?.nextElementSibling?.hasAttribute("data-accordion")
      ) {
        console.warn(...);
      }
    }, []);

Could also add this nifty utility for warning in dev-enviroments while de-duping the messages:

let set: Set<string>;
if (process.env.NODE_ENV !== 'production') {
  set = new Set<string>();
}

export function warn(...messages: string[]) {
  if (process.env.NODE_ENV !== 'production') {
    const messageKey = messages.join(' ');
    if (!set.has(messageKey)) {
      set.add(messageKey);
      console.warn(`Aksel UI: ${messageKey}`);
    }
  }
}