Merge branch 'next' into fix/breadcrumbs-css-and-api

.changeset/flat-experts-drop.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+ErrorSummary: Rename ErrorSummary.Root to ErrorSummary

.changeset/six-trees-tie.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Skeleton: Replace Skeleton.Text, Skeleton.Circle and Skeleton.Rectangle with <Skeleton variant="">

apps/theme/components/Previews/Components/Components.tsx

@@ -405,11 +405,11 @@ export const Components = () => {
       </div>
       <div className={cl(classes.card, classes.loaders)}>
         <div className={classes.loadersRest}>
-          <Skeleton.Circle width='70px' height='70px' />
-          <Skeleton.Rectangle height='70px' width='100px' />
+          <Skeleton variant='circle' width='70px' height='70px' />
+          <Skeleton variant='rectangle' height='70px' width='100px' />
         </div>
-        <Skeleton.Text width='100%' />
-        <Skeleton.Text width='100%' />
+        <Skeleton variant='text' />
+        <Skeleton variant='text' />
         <div>
           <Spinner title='laster innhold' size='md' />
           <Spinner title='laster innhold' size='md' color='accent' />

packages/css/error-summary.css

@@ -9,6 +9,10 @@
   border-radius: var(--dsc-errorsummary-border-radius);
   background-color: var(--dsc-errorsummary-background);
 
+  & :is(h1, h2, h3, h4, h5, h6) {
+    color: var(--dsc-errorsummary-heading-color);
+  }
+
   & a {
     color: var(--dsc-errorsummary-link-color);
   }
@@ -17,7 +21,3 @@
     margin-bottom: 0;
   }
 }
-
-.ds-error-summary__heading {
-  color: var(--dsc-errorsummary-heading-color);
-}

packages/css/skeleton.css

@@ -2,58 +2,50 @@
   --dsc-skeleton-animation-duration: 0.8s;
   --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
 
+  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
+  background: var(--dsc-skeleton-background);
+  border-radius: min(1rem, var(--ds-border-radius-lg));
+  box-sizing: border-box;
+  display: block;
   height: 1.3em;
   pointer-events: none;
   user-select: none;
-  background-color: var(--dsc-skeleton-background);
-  animation: ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate;
-}
-
-.ds-skeleton--circle {
-  width: 1.3em;
-  border-radius: var(--ds-border-radius-full);
-  aspect-ratio: 1 / 1;
-}
-
-.ds-skeleton--rectangle {
   width: 100%;
-  border-radius: min(1rem, var(--ds-border-radius-lg));
-}
 
-.ds-skeleton--text {
-  width: 100%;
-  height: auto;
-  transform-origin: 0 55%;
-  transform: scale(1, 0.6);
-  border-radius: var(--ds-border-radius-full);
-}
+  &[data-variant='circle'] {
+    aspect-ratio: 1 / 1;
+    border-radius: var(--ds-border-radius-full);
+    width: 1.3em;
+  }
 
-.ds-skeleton--text:empty::before {
-  content: '\00a0';
-}
+  &[data-variant='text'] {
+    border-radius: var(--ds-border-radius-full);
+    height: auto;
+    margin-block: calc(1lh - 1em);
 
-.ds-skeleton--has-children {
-  width: fit-content;
-  height: fit-content;
-  color: transparent !important;
-}
+    &:empty::before {
+      content: '\00a0';
+    }
+  }
 
-.ds-skeleton--has-children > * {
-  visibility: hidden;
-}
+  /* When having children, let them define size */
+  &:not(:empty) {
+    width: fit-content;
+    height: fit-content;
+    color: transparent !important;
+
+    & > * {
+      visibility: hidden;
+    }
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-skeleton {
+  @media (prefers-reduced-motion: reduce) {
     --dsc-skeleton-animation-duration: 1.6s;
   }
 }
 
 @keyframes ds-skeleton-opacity-fade {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
+  to {
     opacity: 0.4;
   }
 }

packages/react/src/components/ErrorSummary/ErrorSummary.mdx

@@ -16,18 +16,18 @@ mangler som må rettes på en side eller trinn, for å komme videre.
 
 ## Slik bruker du `ErrorSummary`
 
-`ErrorSummary.Root` er påkrevd for å får riktig aria attributter (`aria-labelledby`, `role='alert'`, osv.).
+`ErrorSummary` er påkrevd for å får riktig aria attributter (`aria-labelledby`, `role='alert'`, osv.).
 Alle `ErrorSummary.Item` må ha en `href` for å kunne navigere til riktig sted i skjemaet.
 
 ```tsx
 import { ErrorSummary } from '@digdir/designsystemet-react';
 
-<ErrorSummary.Root>
+<ErrorSummary>
   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
   <ErrorSummary.List>
     <ErrorSummary.Item href='#'>Item</ErrorSummary.Item>
   </ErrorSummary.List>
-</ErrorSummary.Root>
+</ErrorSummary>
 ```
 
 ## Eksempler

packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx

@@ -6,15 +6,15 @@ import { Textfield } from '../form/Textfield';
 
 import { ErrorSummary } from './';
 
-type Story = StoryFn<typeof ErrorSummary.Root>;
+type Story = StoryFn<typeof ErrorSummary>;
 
 export default {
   title: 'Komponenter/ErrorSummary',
-  component: ErrorSummary.Root,
+  component: ErrorSummary,
 } as Meta;
 
 export const Preview: Story = (args) => (
-  <ErrorSummary.Root {...args}>
+  <ErrorSummary {...args}>
     <ErrorSummary.Heading>
       For å gå videre må du rette opp følgende feil:
     </ErrorSummary.Heading>
@@ -27,7 +27,7 @@ export const Preview: Story = (args) => (
       </ErrorSummary.Item>
       <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
     </ErrorSummary.List>
-  </ErrorSummary.Root>
+  </ErrorSummary>
 );
 Preview.args = {
   size: 'md',
@@ -47,7 +47,7 @@ export const WithForm: Story = () => (
       error='Telefonnummer kan kun inneholde siffer'
     />
 
-    <ErrorSummary.Root>
+    <ErrorSummary>
       <ErrorSummary.Heading>
         For å gå videre må du rette opp følgende feil:
       </ErrorSummary.Heading>
@@ -59,7 +59,7 @@ export const WithForm: Story = () => (
           Telefonnummer kan kun inneholde siffer
         </ErrorSummary.Item>
       </ErrorSummary.List>
-    </ErrorSummary.Root>
+    </ErrorSummary>
   </>
 );
 
@@ -91,7 +91,7 @@ export const ShowHide: Story = () => {
         <Button onClick={() => setShow(!show)}>{show ? 'Skjul' : 'Vis'}</Button>
       </div>
       {show && (
-        <ErrorSummary.Root>
+        <ErrorSummary>
           <ErrorSummary.Heading>
             For å gå videre må du rette opp følgende feil:
           </ErrorSummary.Heading>
@@ -103,7 +103,7 @@ export const ShowHide: Story = () => {
               Telefonnummer kan kun inneholde siffer
             </ErrorSummary.Item>
           </ErrorSummary.List>
-        </ErrorSummary.Root>
+        </ErrorSummary>
       )}
     </>
   );

packages/react/src/components/ErrorSummary/ErrorSummaryRoot.tsx → packages/react/src/components/ErrorSummary/ErrorSummary.tsx

@@ -20,8 +20,8 @@ export type ErrorSummaryProps = {
   size?: ListUnorderedProps['size'];
 } & HTMLAttributes<HTMLDivElement>;
 
-export const ErrorSummaryRoot = forwardRef<HTMLDivElement, ErrorSummaryProps>(
-  (
+export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
+  function ErrorSummary(
     {
       className,
       size = 'md',
@@ -31,24 +31,22 @@ export const ErrorSummaryRoot = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       ...rest
     },
     ref,
-  ) => {
+  ) {
     const randomId = useId();
     const [headingId, setHeadingId] = useState<string>(randomId);
 
     return (
       <ErrorSummaryContext.Provider value={{ size, headingId, setHeadingId }}>
         <div
+          aria-labelledby={headingId}
+          aria-live={ariaLive}
+          aria-relevant={ariaRelevant}
           className={cl('ds-error-summary', className)}
           ref={ref}
           role={role}
-          aria-live={ariaLive}
-          aria-relevant={ariaRelevant}
-          aria-labelledby={headingId}
           {...rest}
         />
       </ErrorSummaryContext.Provider>
     );
   },
 );
-
-ErrorSummaryRoot.displayName = 'ErrorSummaryRoot';

packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx

@@ -1,11 +1,6 @@
 import { forwardRef, useContext, useEffect } from 'react';
-
 import { Heading, type HeadingProps } from '../Typography/Heading';
-
-import {
-  ErrorSummaryContext,
-  type ErrorSummaryProps,
-} from './ErrorSummaryRoot';
+import { ErrorSummaryContext, type ErrorSummaryProps } from './ErrorSummary';
 
 export type ErrorSummaryHeadingProps = HeadingProps;
 
@@ -32,7 +27,6 @@ export const ErrorSummaryHeading = forwardRef<
 
   return (
     <Heading
-      className='ds-error-summary__heading'
       id={headingId}
       size={HEADING_SIZE_MAP[size ?? 'md']}
       spacing
@@ -41,5 +35,3 @@ export const ErrorSummaryHeading = forwardRef<
     />
   );
 });
-
-ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';

packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext } from 'react';
 import { List, type ListUnorderedProps } from '../List';
 
-import { ErrorSummaryContext } from './ErrorSummaryRoot';
+import { ErrorSummaryContext } from './ErrorSummary';
 
 export type ErrorSummaryListProps = ListUnorderedProps;
 

packages/react/src/components/ErrorSummary/index.ts

@@ -1,44 +1,33 @@
+import { ErrorSummary as ErrorSummaryParent } from './ErrorSummary';
 import { ErrorSummaryHeading } from './ErrorSummaryHeading';
 import { ErrorSummaryItem } from './ErrorSummaryItem';
 import { ErrorSummaryList } from './ErrorSummaryList';
-import { ErrorSummaryRoot } from './ErrorSummaryRoot';
-
-type ErrorSummaryComponent = {
-  Root: typeof ErrorSummaryRoot;
-  Item: typeof ErrorSummaryItem;
-  Heading: typeof ErrorSummaryHeading;
-  List: typeof ErrorSummaryList;
-};
 
 /**
  * @example
- * <ErrorSummary.Root>
+ * <ErrorSummary>
  *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
  *  <ErrorSummary.List>
  *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
  *  </ErrorSummary.List>
- * </ErrorSummary.Root>
+ * </ErrorSummary>
  */
-const ErrorSummary = {} as ErrorSummaryComponent;
+const ErrorSummary = Object.assign(ErrorSummaryParent, {
+  Heading: ErrorSummaryHeading,
+  Item: ErrorSummaryItem,
+  List: ErrorSummaryList,
+});
 
-ErrorSummary.Root = ErrorSummaryRoot;
-ErrorSummary.Item = ErrorSummaryItem;
-ErrorSummary.Heading = ErrorSummaryHeading;
-ErrorSummary.List = ErrorSummaryList;
-
-ErrorSummary.Root.displayName = 'ErrorSummary.Root';
 ErrorSummary.Item.displayName = 'ErrorSummary.Item';
 ErrorSummary.Heading.displayName = 'ErrorSummary.Heading';
 ErrorSummary.List.displayName = 'ErrorSummary.List';
 
-export type { ErrorSummaryProps } from './ErrorSummaryRoot';
+export type { ErrorSummaryProps } from './ErrorSummary';
 export type { ErrorSummaryItemProps } from './ErrorSummaryItem';
 export type { ErrorSummaryHeadingProps } from './ErrorSummaryHeading';
 export type { ErrorSummaryListProps } from './ErrorSummaryList';
-
 export {
   ErrorSummary,
-  ErrorSummaryRoot,
   ErrorSummaryItem,
   ErrorSummaryHeading,
   ErrorSummaryList,