Merge branch 'main' into label-dep-as

digdir · Apr 30, 2024 · e8bb854 · e8bb854
2 parents ebdd611 + aa81f5a
commit e8bb854
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 226 deletions.
diff --git a/...s/react/src/components/Box/Box.module.css → packages/css/box.css b/...s/react/src/components/Box/Box.module.css → packages/css/box.css
@@ -1,73 +1,73 @@
 @layer fds.box {
-  .xsmallShadow {
+  .fds-box--xsmall-shadow {
     box-shadow: var(--fds-shadow-xsmall);
   }
 
-  .smallShadow {
+  .fds-box--small-shadow {
     box-shadow: var(--fds-shadow-small);
   }
 
-  .mediumShadow {
+  .fds-box--medium-shadow {
     box-shadow: var(--fds-shadow-medium);
   }
 
-  .largeShadow {
+  .fds-box--large-shadow {
     box-shadow: var(--fds-shadow-large);
   }
 
-  .xlargeShadow {
+  .fds-box--xlarge-shadow {
     box-shadow: var(--fds-shadow-xlarge);
   }
 
-  .defaultBorderColor {
+  .fds-box--default-border-color {
     border: 1px solid var(--fds-semantic-border-neutral-default);
   }
 
-  .subtleBorderColor {
+  .fds-box--subtle-border-color {
     border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
-  .strongBorderColor {
+  .fds-box--strong-border-color {
     border: 1px solid var(--fds-semantic-border-neutral-strong);
   }
 
-  .smallBorderRadius {
+  .fds-box--small-border-radius {
     border-radius: var(--fds-border_radius-small);
   }
 
-  .mediumBorderRadius {
+  .fds-box--medium-border-radius {
     border-radius: var(--fds-border_radius-medium);
   }
 
-  .largeBorderRadius {
+  .fds-box--large-border-radius {
     border-radius: var(--fds-border_radius-large);
   }
 
-  .xlargeBorderRadius {
+  .fds-box--xlarge-border-radius {
     border-radius: var(--fds-border_radius-xlarge);
   }
 
-  .xxlargeBorderRadius {
+  .fds-box--xxlarge-border-radius {
     border-radius: var(--fds-border_radius-xxlarge);
   }
 
-  .xxxlargeBorderRadius {
+  .fds-box--xxxlarge-border-radius {
     border-radius: var(--fds-border_radius-xxxlarge);
   }
 
-  .xxxxlargeBorderRadius {
+  .fds-box--xxxxlarge-border-radius {
     border-radius: var(--fds-border_radius-xxxxlarge);
   }
 
-  .fullBorderRadius {
+  .fds-box--full-border-radius {
     border-radius: var(--fds-border_radius-full);
   }
 
-  .defaultBackground {
+  .fds-box--default-background {
     background-color: var(--fds-semantic-background-default);
   }
 
-  .subtleBackground {
+  .fds-box--subtle-background {
     background-color: var(--fds-semantic-background-subtle);
   }
 }
diff --git a/packages/css/index.css b/packages/css/index.css
@@ -10,3 +10,4 @@
 @import url('./ingress.css');
 @import url('./skiplink.css');
 @import url('./accordion.css');
+@import url('./box.css');
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -2329,80 +2329,6 @@
   }
 }
 
-@layer fds.box {
-  .fds-box-xsmallShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-xsmall);
-  }
-
-  .fds-box-smallShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-small);
-  }
-
-  .fds-box-mediumShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-medium);
-  }
-
-  .fds-box-largeShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-large);
-  }
-
-  .fds-box-xlargeShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-xlarge);
-  }
-
-  .fds-box-defaultBorderColor-7eee64b7 {
-    border: 1px solid var(--fds-semantic-border-neutral-default);
-  }
-
-  .fds-box-subtleBorderColor-7eee64b7 {
-    border: 1px solid var(--fds-semantic-border-neutral-subtle);
-  }
-
-  .fds-box-strongBorderColor-7eee64b7 {
-    border: 1px solid var(--fds-semantic-border-neutral-strong);
-  }
-
-  .fds-box-smallBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-small);
-  }
-
-  .fds-box-mediumBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-medium);
-  }
-
-  .fds-box-largeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-large);
-  }
-
-  .fds-box-xlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xlarge);
-  }
-
-  .fds-box-xxlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xxlarge);
-  }
-
-  .fds-box-xxxlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xxxlarge);
-  }
-
-  .fds-box-xxxxlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xxxxlarge);
-  }
-
-  .fds-box-fullBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-full);
-  }
-
-  .fds-box-defaultBackground-7eee64b7 {
-    background-color: var(--fds-semantic-background-default);
-  }
-
-  .fds-box-subtleBackground-7eee64b7 {
-    background-color: var(--fds-semantic-background-subtle);
-  }
-}
-
 @layer fds.card {
   .fds-card-media-a01cb08f {
     width: auto;

diff --git a/packages/react/src/components/Box/Box.test.tsx b/packages/react/src/components/Box/Box.test.tsx
@@ -28,21 +28,21 @@ describe('Box', () => {
     render({ shadow: 'xsmall' });
     const box = screen.getByTitle('box');
 
-    expect(box.classList).toContain('xsmallShadow');
+    expect(box.classList).toContain('fds-box--xsmall-shadow');
   });
 
   it('should render a div with correct classname when borderColor is subtle', () => {
     render({ borderColor: 'subtle' });
     const box = screen.getByTitle('box');
 
-    expect(box.classList).toContain('subtleBorderColor');
+    expect(box.classList).toContain('fds-box--subtle-border-color');
   });
 
   it('should render a div with correct classname when borderRadius is small', () => {
     render({ borderRadius: 'small' });
     const box = screen.getByTitle('box');
 
-    expect(box.classList).toContain('smallBorderRadius');
+    expect(box.classList).toContain('fds-box--small-border-radius');
   });
 
   it('should render as a button when we use asChild', () => {

diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
@@ -1,10 +1,8 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
-import classes from './Box.module.css';
-
 export type BoxProps = {
   /**
    * Shadow size of the box
@@ -61,10 +59,10 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
       <Component
         ref={ref}
         className={cl(
-          shadow && classes[shadow + 'Shadow'],
-          borderRadius && classes[borderRadius + 'BorderRadius'],
-          borderColor && classes[borderColor + 'BorderColor'],
-          classes[background + 'Background'],
+          shadow && `fds-box--${shadow}-shadow`,
+          borderColor && `fds-box--${borderColor}-border-color`,
+          borderRadius && `fds-box--${borderRadius}-border-radius`,
+          `fds-box--${background}-background`,
           className,
         )}
         {...rest}

diff --git a/packages/react/src/components/Chip/Removable/Removable.tsx b/packages/react/src/components/Chip/Removable/Removable.tsx
@@ -35,7 +35,7 @@ export const RemovableChip = forwardRef<HTMLButtonElement, RemovableChipProps>(
         <Paragraph
           asChild
           size={group?.size || size}
-          short
+          variant='short'
         >
           <span className={classes.label}>
             <span>{children}</span>

diff --git a/packages/react/src/components/Chip/Toggle/Toggle.tsx b/packages/react/src/components/Chip/Toggle/Toggle.tsx
@@ -55,7 +55,7 @@ export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
         <Paragraph
           asChild
           size={group?.size || size}
-          short
+          variant='short'
         >
           <span className={classes.label}>
             {shouldDisplayCheckmark && (

diff --git a/packages/react/src/components/Typography/Ingress/Ingress.tsx b/packages/react/src/components/Typography/Ingress/Ingress.tsx
@@ -3,8 +3,6 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../../types/OverridableComponent';
-
 export type IngressProps = {
   /** Changes text sizing
    * @default 'medium'
@@ -20,29 +18,25 @@ export type IngressProps = {
 } & HTMLAttributes<HTMLParagraphElement>;
 
 /** Use `Ingress` to display text as ingress. */
-export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
-  forwardRef(
-    (
-      { className, size = 'medium', spacing, as = 'p', asChild, ...rest },
-      ref,
-    ) => {
-      const Component = asChild ? Slot : as;
+export const Ingress = forwardRef<HTMLParagraphElement, IngressProps>(
+  ({ className, size = 'medium', spacing, asChild, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'p';
 
-      return (
-        <Component
-          ref={ref}
-          className={cl(
-            `fds-ingress`,
-            `fds-ingress--${size}`,
-            {
-              'fds-ingress--spacing': !!spacing,
-            },
-            className,
-          )}
-          {...rest}
-        />
-      );
-    },
-  );
+    return (
+      <Component
+        ref={ref}
+        className={cl(
+          `fds-ingress`,
+          `fds-ingress--${size}`,
+          {
+            'fds-ingress--spacing': !!spacing,
+          },
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
 
 Ingress.displayName = 'Ingress';
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx
@@ -16,8 +16,6 @@ export const Preview: Story = {
     children:
       'Personvernerklæringen gir informasjon om hvilke personopplysninger vi behandler, hvordan disse blir behandlet og hvilke rettigheter du har.',
     spacing: false,
-    short: false,
-    long: false,
     size: 'medium',
   },
 };
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
@@ -3,8 +3,6 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../../types/OverridableComponent';
-
 import classes from './Paragraph.module.css';
 
 export type ParagraphProps = {
@@ -22,23 +20,9 @@ export type ParagraphProps = {
 } & HTMLAttributes<HTMLParagraphElement>;
 
 /** Use `Paragraph` to display text with paragraph text styles. */
-export const Paragraph: OverridableComponent<
-  ParagraphProps,
-  HTMLParagraphElement
-> = forwardRef(
-  (
-    {
-      className,
-      size = 'medium',
-      spacing,
-      as = 'p',
-      asChild,
-      variant,
-      ...rest
-    },
-    ref,
-  ) => {
-    const Component = asChild ? Slot : as;
+export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
+  ({ className, size = 'medium', spacing, asChild, variant, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'p';
 
     return (
       <Component

diff --git a/packages/react/src/components/Typography/Typography.stories.tsx b/packages/react/src/components/Typography/Typography.stories.tsx
@@ -50,7 +50,7 @@ export const EksempelTekst: StoryFn = () => (
     </Heading>
 
     <Paragraph
-      short
+      variant='short'
       spacing
     >
       Når du skal signere meldingen vil du motta en signeringsoppgave i
@@ -83,7 +83,7 @@ export const EksempelTekst: StoryFn = () => (
     </Heading>
 
     <Paragraph
-      short
+      variant='short'
       spacing
     >
       Personvernerklæringen gir informasjon om hvilke personopplysninger vi

diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -90,8 +90,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           {description && (
             <Paragraph
               size={size}
+              variant='short'
               asChild
-              short
             >
               <div
                 id={descriptionId}

diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -146,7 +146,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               <Paragraph
                 asChild
                 size={size}
-                short
+                variant='short'
               >
                 <div
                   className={cl(classes.adornment, classes.prefix)}
@@ -179,7 +179,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               <Paragraph
                 asChild
                 size={size}
-                short
+                variant='short'
               >
                 <div
                   className={cl(classes.adornment, classes.suffix)}