Merge branch 'main' into refactor/switch-css

digdir · Apr 29, 2024 · 3c6ef64 · 3c6ef64
2 parents d4cd00f + b7c6be4
commit 3c6ef64
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 102 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,4 +10,5 @@
 @import url('./ingress.css');
 @import url('./skiplink.css');
 @import url('./accordion.css');
+@import url('./box.css');
 @import url('./switch.css');
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -2112,80 +2112,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}