Merge pull request #107 from frameless/refactor/card-component

Refactor/card component
frameless · Jun 14, 2024 · 9dea158 · 9dea158
2 parents 0a9a2c9 + c8b47d9
commit 9dea158
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/packages/components-css/card-group/index.scss b/packages/components-css/card-group/index.scss
@@ -1,24 +1,20 @@
 .frameless-card-group {
-  container-type: inline-size;
   display: grid;
   gap: var(--frameless-card-group-gap);
   grid-auto-flow: dense;
 }
 
-@media (width >= 600px) {
+.frameless-card-group__container {
+  container-type: inline-size;
+}
+
+@container (width >= 600px) {
   .frameless-card-group {
     grid-template-columns: 1fr 1fr;
   }
 }
-
-@media (width <= 900px) {
+@container (width <= 900px) {
   .frameless-card-group {
     grid-template-columns: 1fr;
   }
 }
-
-@container (max-width: 400px) {
-  .frameless-card {
-    --utrecht-paragraph-font-size: var(--frameless-card-paragraph-font-size);
-  }
-}
diff --git a/packages/components-react/src/CardGroup/index.tsx b/packages/components-react/src/CardGroup/index.tsx
@@ -7,8 +7,10 @@ export type CardGroupProps = HTMLAttributes<HTMLDivElement>;
 
 export const CardGroup = forwardRef(
   ({ children, className, ...restProps }: PropsWithChildren<CardGroupProps>, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('frameless-card-group', className)}>
-      {children}
+    <div className="frameless-card-group__container">
+      <div {...restProps} ref={ref} className={clsx('frameless-card-group', className)}>
+        {children}
+      </div>
     </div>
   ),
 );