@obosbbl/grunnmuren-react 3.4.3 → 3.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/__stories__/form-validation.stories.cjs +22 -23
- package/dist/__stories__/form-validation.stories.js +22 -23
- package/dist/__stories__/icons.stories.cjs +1 -1
- package/dist/__stories__/icons.stories.js +1 -1
- package/dist/__stories__/layout.stories.cjs +70 -37
- package/dist/__stories__/layout.stories.d.cts +2 -1
- package/dist/__stories__/layout.stories.d.ts +2 -1
- package/dist/__stories__/layout.stories.js +70 -38
- package/dist/__stories__/typography.stories.cjs +1 -1
- package/dist/__stories__/typography.stories.js +1 -1
- package/dist/index.d.mts +5 -3
- package/dist/index.mjs +124 -119
- package/package.json +10 -10
|
@@ -98,7 +98,7 @@ const cardVariants = cva({
|
|
|
98
98
|
// **** Fail-safe for interactive elements ****
|
|
99
99
|
// Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
|
|
100
100
|
// The card is made clickable by a pseudo-element on the heading that covers the entire card
|
|
101
|
-
'[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative
|
|
101
|
+
'[&_button]:relative [&_input]:relative [&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative',
|
|
102
102
|
// Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
|
|
103
103
|
'[&_[data-slot="card-link"]_a]:static',
|
|
104
104
|
// Place other interactive on top of the pseudo-element that makes the entire card clickable
|
|
@@ -129,7 +129,7 @@ const cardVariants = cva({
|
|
|
129
129
|
subtle: [
|
|
130
130
|
'border-transparent',
|
|
131
131
|
// **** Media styles ****
|
|
132
|
-
'
|
|
132
|
+
'**:data-[slot="media"]:rounded-2xl'
|
|
133
133
|
],
|
|
134
134
|
outlined: 'border border-black'
|
|
135
135
|
},
|
|
@@ -140,7 +140,7 @@ const cardVariants = cva({
|
|
|
140
140
|
vertical: [
|
|
141
141
|
'flex-col',
|
|
142
142
|
// **** Media ****
|
|
143
|
-
'
|
|
143
|
+
'**:data-[slot="media"]:rounded-t-2xl'
|
|
144
144
|
],
|
|
145
145
|
horizontal: [
|
|
146
146
|
// Use more gap for horizontal cards that have media
|
|
@@ -148,7 +148,7 @@ const cardVariants = cva({
|
|
|
148
148
|
'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
|
|
149
149
|
// **** With Media ****
|
|
150
150
|
'[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
|
|
151
|
-
'has-data-[slot=media]:@2xl
|
|
151
|
+
'has-data-[slot=media]:@2xl:flex-row!',
|
|
152
152
|
'*:data-[slot=media]:@2xl:h-fit',
|
|
153
153
|
'has-data-[slot=media]:*:@2xl:basis-1/2',
|
|
154
154
|
// Position media at the edges of the card
|
|
@@ -157,7 +157,7 @@ const cardVariants = cva({
|
|
|
157
157
|
'*:data-[slot=media]:last:@2xl:ml-0',
|
|
158
158
|
// Make sure the card link is clickable when the media is on the right side
|
|
159
159
|
// This is necessary because the media content is positioned after the card link in the DOM
|
|
160
|
-
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-
|
|
160
|
+
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-1',
|
|
161
161
|
// **** Without Media ****
|
|
162
162
|
'not-has-data-[slot=media]:@md:flex-row',
|
|
163
163
|
// Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
|
|
@@ -178,7 +178,7 @@ const cardVariants = cva({
|
|
|
178
178
|
className: [
|
|
179
179
|
// **** Media ****
|
|
180
180
|
// Some rounded corners are removed when the card is outlined
|
|
181
|
-
'
|
|
181
|
+
'**:data-[slot="media"]:rounded-t-2xl',
|
|
182
182
|
'*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
|
|
183
183
|
'*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
|
|
184
184
|
// **** Badge ****
|
|
@@ -243,8 +243,8 @@ const cardLinkVariants = cva({
|
|
|
243
243
|
// **** Clickarea ****
|
|
244
244
|
'cursor-pointer',
|
|
245
245
|
'after:absolute',
|
|
246
|
-
'after
|
|
247
|
-
'after:rounded-[calc(
|
|
246
|
+
'after:-inset-px',
|
|
247
|
+
'after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
248
248
|
// **** Focus ****
|
|
249
249
|
'focus-visible:outline-none',
|
|
250
250
|
'data-focus-visible:after:outline-focus',
|
|
@@ -258,8 +258,8 @@ const cardLinkVariants = cva({
|
|
|
258
258
|
// **** Clickarea ****
|
|
259
259
|
'[&_a]:after:cursor-pointer',
|
|
260
260
|
'[&_a]:after:absolute',
|
|
261
|
-
'[&_a]:after
|
|
262
|
-
'[&_a]:after:rounded-[calc(
|
|
261
|
+
'[&_a]:after:-inset-px',
|
|
262
|
+
'[&_a]:after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
263
263
|
// **** Focus ****
|
|
264
264
|
'[&_a[data-focus-visible]]:outline-none',
|
|
265
265
|
'[&_a[data-focus-visible]]:after:outline-focus',
|
|
@@ -300,20 +300,20 @@ const HeroContext = /*#__PURE__*/ createContext(null);
|
|
|
300
300
|
// Common variant for "standard" and "full-bleed" Hero variants
|
|
301
301
|
const oneColumnLayout = [
|
|
302
302
|
// Vertical spacing in the <Content>
|
|
303
|
-
'lg:*:data-[slot=
|
|
303
|
+
'lg:*:data-[slot=content]:gap-y-4',
|
|
304
304
|
// Main text content takes up 9 columns on medium screens and above
|
|
305
|
-
'lg:*:data-[slot=
|
|
305
|
+
'lg:*:data-[slot=content]:col-span-9',
|
|
306
306
|
// Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
|
|
307
|
-
'*:not-data-[slot=
|
|
307
|
+
'*:not-data-[slot=content]:not-data-[slot=media]:w-fit',
|
|
308
308
|
// Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
|
|
309
|
-
'lg:*:not-data-[slot=
|
|
309
|
+
'lg:*:not-data-[slot=content]:not-data-[slot=media]:not-data-[slot=carousel]:col-span-3 lg:*:not-data-[slot=content]:not-data-[slot=media]:justify-self-end',
|
|
310
310
|
// <Media> and <Carousel> content takes up the full width on medium screens and above
|
|
311
|
-
'lg:*:data-[slot=
|
|
312
|
-
'lg:*:data-[slot=
|
|
311
|
+
'lg:*:data-[slot=media]:col-span-full *:data-[slot=media]:*:w-full',
|
|
312
|
+
'lg:*:data-[slot=carousel]:col-span-full',
|
|
313
313
|
// Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
|
|
314
314
|
'lg:items-end'
|
|
315
315
|
];
|
|
316
|
-
const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=
|
|
316
|
+
const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-[1/1] sm:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-4/3 md:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-3/2';
|
|
317
317
|
const variants = cva({
|
|
318
318
|
base: [
|
|
319
319
|
'container px-0',
|
|
@@ -321,14 +321,14 @@ const variants = cva({
|
|
|
321
321
|
'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
|
|
322
322
|
'gap-y-10 lg:gap-y-12',
|
|
323
323
|
// Enable vertical gap within <Content>
|
|
324
|
-
'*:data-[slot=
|
|
324
|
+
'*:data-[slot=content]:grid',
|
|
325
325
|
// Vertical spacing in the <Content>
|
|
326
|
-
'*:data-[slot=
|
|
326
|
+
'*:data-[slot=content]:gap-y-3',
|
|
327
327
|
// Make sure <Media> content fills any available vertical and horizontal space
|
|
328
|
-
'*:data-[slot=
|
|
329
|
-
'*:data-[slot=
|
|
328
|
+
'*:data-[slot=media]:*:object-cover',
|
|
329
|
+
'*:data-[slot=carousel]:overflow-hidden *:data-[slot=carousel]:rounded-3xl',
|
|
330
330
|
// Make the carousel items full width, so we scroll one at a time
|
|
331
|
-
'**:data-[slot=
|
|
331
|
+
'**:data-[slot=carousel-item]:basis-full'
|
|
332
332
|
],
|
|
333
333
|
variants: {
|
|
334
334
|
/**
|
|
@@ -338,36 +338,36 @@ const variants = cva({
|
|
|
338
338
|
standard: [
|
|
339
339
|
oneColumnLayout,
|
|
340
340
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
341
|
-
'lg:*:data-[slot=
|
|
341
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
|
|
342
342
|
],
|
|
343
343
|
'full-bleed': [
|
|
344
344
|
oneColumnLayout,
|
|
345
345
|
// Position the media and carousel content to fill the entire viewport width
|
|
346
|
-
'*:data-[slot=
|
|
346
|
+
'*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
|
|
347
347
|
// Special case for Carousel, where the Media is nested inside a CarouselItem
|
|
348
|
-
'*:data-[slot=
|
|
348
|
+
'*:data-[slot=carousel]:**:data-[slot=media]:w-full',
|
|
349
349
|
// Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
|
|
350
350
|
// This is necessary due to the absolute positioning of the media and carousel containers in this variant
|
|
351
351
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
352
|
-
'
|
|
353
|
-
'**:data-[slot=
|
|
352
|
+
'3xl:**:data-[slot=media]:h-192 4xl:**:data-[slot=media]:h-212 **:data-[slot=media]:h-80 sm:**:data-[slot=media]:h-100 md:**:data-[slot=media]:h-120 lg:**:data-[slot=media]:h-140 xl:**:data-[slot=media]:h-160 2xl:**:data-[slot=media]:h-168',
|
|
353
|
+
'**:data-[slot=media]:*:h-[inherit]',
|
|
354
354
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
355
|
-
'
|
|
356
|
-
'*:data-[slot=
|
|
355
|
+
'3xl:*:data-[slot=carousel]:h-192 4xl:*:data-[slot=carousel]:h-212 *:data-[slot=carousel]:h-80 sm:*:data-[slot=carousel]:h-100 md:*:data-[slot=carousel]:h-120 lg:*:data-[slot=carousel]:h-140 xl:*:data-[slot=carousel]:h-160 2xl:*:data-[slot=carousel]:h-168',
|
|
356
|
+
'*:data-[slot=carousel]:w-full!',
|
|
357
357
|
// Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
|
|
358
|
-
'**:data-[slot=
|
|
358
|
+
'**:data-[slot=carousel-item]:data-[slot=media]:*:aspect-none',
|
|
359
359
|
// break out the carousel out of the container
|
|
360
|
-
'**:data-[slot=
|
|
360
|
+
'**:data-[slot=carousel-items-container]:absolute **:data-[slot=carousel-items-container]:inset-x-0 **:data-[slot=carousel-items-container]:h-[inherit]',
|
|
361
361
|
// Positions the carousel controls inside the carousel
|
|
362
|
-
'
|
|
362
|
+
'*:data-[slot=carousel]:flex *:data-[slot=carousel]:items-end *:data-[slot=carousel]:justify-end **:data-[slot=carousel-controls]:z-10 **:data-[slot=carousel-controls]:mb-4'
|
|
363
363
|
],
|
|
364
364
|
'two-column': [
|
|
365
365
|
'lg:items-center lg:*:col-span-6',
|
|
366
366
|
// Vertical spacing in the <Content>
|
|
367
|
-
'lg:*:data-[slot=
|
|
367
|
+
'lg:*:data-[slot=content]:gap-y-7',
|
|
368
368
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
369
369
|
// Set media aspect ratio to 1:1 (square)
|
|
370
|
-
'lg:*:data-[slot=
|
|
370
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
|
|
371
371
|
]
|
|
372
372
|
}
|
|
373
373
|
},
|
|
@@ -378,8 +378,8 @@ const variants = cva({
|
|
|
378
378
|
'two-column'
|
|
379
379
|
],
|
|
380
380
|
className: [
|
|
381
|
-
'*:data-[slot=
|
|
382
|
-
'
|
|
381
|
+
'*:data-[slot=media]:*:rounded-3xl',
|
|
382
|
+
'*:data-[slot=carousel]:relative **:data-[slot=carousel-container]:rounded-3xl **:data-[slot=carousel-controls]:absolute **:data-[slot=carousel-controls]:right-4 **:data-[slot=carousel-controls]:bottom-4'
|
|
383
383
|
]
|
|
384
384
|
}
|
|
385
385
|
],
|
|
@@ -464,7 +464,7 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxs("main", {
|
|
|
464
464
|
children: "Dette er OBOS"
|
|
465
465
|
}),
|
|
466
466
|
/*#__PURE__*/ jsxs("ul", {
|
|
467
|
-
className: "md:layout-subgrid-12 *:md:col-span-
|
|
467
|
+
className: "md:layout-subgrid-12 *:md:col-span-6 *:lg:col-span-3",
|
|
468
468
|
children: [
|
|
469
469
|
/*#__PURE__*/ jsxs(Card, {
|
|
470
470
|
role: "listitem",
|
|
@@ -558,5 +558,37 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxs("main", {
|
|
|
558
558
|
})
|
|
559
559
|
]
|
|
560
560
|
});
|
|
561
|
+
const OverridedColSpans = ()=>/*#__PURE__*/ jsxs("main", {
|
|
562
|
+
className: "layout-grid-container",
|
|
563
|
+
children: [
|
|
564
|
+
/*#__PURE__*/ jsx("h1", {
|
|
565
|
+
className: "heading-xl sm:col-end-9",
|
|
566
|
+
children: "Dette er OBOS"
|
|
567
|
+
}),
|
|
568
|
+
/*#__PURE__*/ jsx("img", {
|
|
569
|
+
className: "sm:col-end-8",
|
|
570
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
571
|
+
alt: ""
|
|
572
|
+
}),
|
|
573
|
+
/*#__PURE__*/ jsx("p", {
|
|
574
|
+
className: "sm:col-start-6 sm:col-end-12",
|
|
575
|
+
children: "Som er ett nettsted for alt om OBOS."
|
|
576
|
+
}),
|
|
577
|
+
/*#__PURE__*/ jsx("img", {
|
|
578
|
+
className: "sm:col-span-6 sm:col-start-6",
|
|
579
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
580
|
+
alt: ""
|
|
581
|
+
}),
|
|
582
|
+
/*#__PURE__*/ jsx("p", {
|
|
583
|
+
className: "sm:col-end-15",
|
|
584
|
+
children: "Masse tekst for å teste grid container med sub grids. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
585
|
+
}),
|
|
586
|
+
/*#__PURE__*/ jsx("img", {
|
|
587
|
+
className: "sm:col-span-full",
|
|
588
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
589
|
+
alt: ""
|
|
590
|
+
})
|
|
591
|
+
]
|
|
592
|
+
});
|
|
561
593
|
|
|
562
|
-
export { GridContainer, GridContainerWithSubGrids, meta as default };
|
|
594
|
+
export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };
|
|
@@ -63,7 +63,7 @@ const Default = ()=>{
|
|
|
63
63
|
/*#__PURE__*/ jsxRuntime.jsxs("figure", {
|
|
64
64
|
children: [
|
|
65
65
|
/*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
66
|
-
className: "mb-4 max-w-96
|
|
66
|
+
className: "bg-blue-dark mb-4 max-w-96 p-4",
|
|
67
67
|
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/9a29374fde57a12bedf17149525c325a8c3254ae-850x180.svg?auto=format",
|
|
68
68
|
alt: "OBOS logo"
|
|
69
69
|
}),
|
|
@@ -61,7 +61,7 @@ const Default = ()=>{
|
|
|
61
61
|
/*#__PURE__*/ jsxs("figure", {
|
|
62
62
|
children: [
|
|
63
63
|
/*#__PURE__*/ jsx("img", {
|
|
64
|
-
className: "mb-4 max-w-96
|
|
64
|
+
className: "bg-blue-dark mb-4 max-w-96 p-4",
|
|
65
65
|
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/9a29374fde57a12bedf17149525c325a8c3254ae-850x180.svg?auto=format",
|
|
66
66
|
alt: "OBOS logo"
|
|
67
67
|
}),
|
package/dist/index.d.mts
CHANGED
|
@@ -228,7 +228,7 @@ type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivEleme
|
|
|
228
228
|
};
|
|
229
229
|
declare const cardVariants: (props?: ({
|
|
230
230
|
variant?: "subtle" | "outlined" | undefined;
|
|
231
|
-
layout?: "
|
|
231
|
+
layout?: "horizontal" | "vertical" | undefined;
|
|
232
232
|
} & ({
|
|
233
233
|
class?: cva.ClassValue;
|
|
234
234
|
className?: never;
|
|
@@ -459,7 +459,7 @@ type DateFormatterProps = {
|
|
|
459
459
|
* By default it sets the timeZone to `Europe/Berlin` to prevent the server's timezone from affecting
|
|
460
460
|
* the localized format
|
|
461
461
|
*/
|
|
462
|
-
declare const DateFormatter: ({ options: _options, value, children: render
|
|
462
|
+
declare const DateFormatter: ({ options: _options, value, children: render }: DateFormatterProps) => ReactNode;
|
|
463
463
|
|
|
464
464
|
type FileTriggerProps = Partial<FormValidationProps<File>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
|
|
465
465
|
ref?: RefObject<HTMLInputElement | null>;
|
|
@@ -549,7 +549,9 @@ declare const LinkListItem: ({ children, className, ...props }: LinkListItemProp
|
|
|
549
549
|
|
|
550
550
|
type DialogTriggerProps = DialogTriggerProps$1;
|
|
551
551
|
declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
552
|
-
type ModalOverlayProps = Omit<ModalOverlayProps$1, 'isDismissable'> & {
|
|
552
|
+
type ModalOverlayProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> & {
|
|
553
|
+
/** Additional style properties for the element. */
|
|
554
|
+
style?: React.CSSProperties;
|
|
553
555
|
/** @default 10 Controls the z-index of the modal overlay */
|
|
554
556
|
zIndex?: number;
|
|
555
557
|
/** @default true Makes the modal dismissable */
|