@obosbbl/grunnmuren-react 2.0.0-canary.49 → 2.0.0-canary.50

package/dist/index.d.mts

@@ -578,6 +578,7 @@ type CardProps = VariantProps<typeof cardVariants> & {
 };
 declare const cardVariants: (props?: ({
     variant?: "subtle" | "outlined" | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -585,7 +586,7 @@ declare const cardVariants: (props?: ({
     class?: never;
     className?: cva.ClassValue;
 })) | undefined) => string;
-declare const Card: ({ children, className: _className, variant, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ children, className: _className, variant, layout, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
 type CardLinkWrapperProps = {
     children?: React.ReactNode;
     className?: string;

package/dist/index.mjs

@@ -205,7 +205,8 @@ function Badge(props, ref) {
     return /*#__PURE__*/ jsx("span", {
         className: className,
         ...restProps,
-        ref: ref
+        ref: ref,
+        "data-slot": "badge"
     });
 }
 const _Badge = /*#__PURE__*/ forwardRef(Badge);
@@ -1074,7 +1075,7 @@ const cardVariants = cva({
     base: [
         'group/card',
         'rounded-2xl border p-3',
-        'flex flex-col gap-y-4',
+        'flex gap-y-4',
         'relative',
         // **** Heading ****
         '[&_[data-slot="heading"]]:inline',
@@ -1088,19 +1089,19 @@ const cardVariants = cva({
         '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
         // **** Media ****
         '[&_[data-slot="media"]]:overflow-hidden',
-        '[&_[data-slot="media"]]:rounded-t-2xl',
+        '[&_[data-slot="media"]]:relative',
         // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
         '[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
         // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work in FF)
-        '[&_[data-slot="media"]>*]:aspect-[3/2] [&_[data-slot="media"]>*]:w-full [&_[data-slot="media"]_img]:object-cover',
+        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]>*:not([data-slot="badge"])]:w-full [&_[data-slot="media"]_img]:object-cover',
         // Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
         '[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
         // **** Card link ****
         // **** Hover ****
         // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
-        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>*]:scale-110',
+        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>*:not([data-slot="badge"])]:scale-110',
         // **** Card link in Heading ****
-        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>*]:scale-110',
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>*:not([data-slot="badge"])]:scale-110',
         // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
         // Border top is set to even out the border bottom used for the underline
         '[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
@@ -1122,7 +1123,23 @@ const cardVariants = cva({
         '[&_[data-slot="card-link"]_a]:static',
         // Place other interactive on top of the pseudo-element that makes the entire card clickable
         // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
-        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]'
+        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
+        // **** Badge ****
+        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
+        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
+        // Left aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
+        // Right aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
+        // ... and position the badge at the right edge of the media content
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
     ],
     variants: {
         /**
@@ -1131,20 +1148,70 @@ const cardVariants = cva({
      */ variant: {
             subtle: [
                 'border-transparent',
-                // Media styles:
-                '[&_[data-slot="media"]]:rounded-b-2xl'
+                // **** Media styles ****
+                '[&_[data-slot="media"]]:rounded-2xl'
             ],
             outlined: 'border border-black'
+        },
+        /**
+     * The layout of the card
+     * @default vertical
+     */ layout: {
+            vertical: [
+                'flex-col',
+                // **** Media ****
+                '[&_[data-slot="media"]]:rounded-t-2xl'
+            ],
+            horizontal: [
+                'gap-x-4',
+                // **** With Media ****
+                '[&:has(>[data-slot="media"]:first-child)]:flex-col',
+                '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
+                '[&:has(>[data-slot="media"])]:md:!flex-row',
+                '[&:has(>[data-slot="media"])>*]:md:basis-1/2',
+                // Position media at the edges of the card
+                '[&_[data-slot="media"]]:md:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+                '[&_[data-slot="media"]:first-child]:md:mr-0',
+                '[&_[data-slot="media"]:last-child]:md:ml-0',
+                // Make sure the card link is clickable when the media is on the right side
+                // This i necessary because the media content is positioned after the card link in the DOM
+                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
+                // **** Without Media ****
+                '[&:not(:has(>[data-slot="media"]))]:flex-row',
+                // Make the layout responsive: when the Content reaches a minimum width of 18rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
+                '[&:not(:has(>[data-slot="media"]))]:flex-wrap [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:grow [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:basis-[18rem]',
+                // Make sure svg's etc. are not shrinkable
+                '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
+            ]
         }
     },
     defaultVariants: {
-        variant: 'subtle'
-    }
+        variant: 'subtle',
+        layout: 'vertical'
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            layout: 'horizontal',
+            className: [
+                // **** Media ****
+                // Some rounded corners are removed when the card is outlined
+                '[&_[data-slot="media"]]:rounded-t-2xl',
+                '[&_[data-slot="media"]:first-child]:md:rounded-tr-none [&_[data-slot="media"]:first-child]:md:rounded-bl-2xl',
+                '[&_[data-slot="media"]:last-child]:md:rounded-tl-none [&_[data-slot="media"]:last-child]:md:rounded-br-2xl',
+                // **** Badge ****
+                // Override default corner radius of the badge to match the media border radius
+                '[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:md:rounded-tr-none',
+                '[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:md:rounded-tl-none'
+            ]
+        }
+    ]
 });
-const Card = ({ children, className: _className, variant, ...restProps })=>{
+const Card = ({ children, className: _className, variant, layout, ...restProps })=>{
     const className = cardVariants({
         className: _className,
-        variant
+        variant,
+        layout
     });
     return /*#__PURE__*/ jsx("div", {
         className: className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.49",
+  "version": "2.0.0-canary.50",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"