@obosbbl/grunnmuren-react 3.4.3 → 3.4.5
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 +50 -39
- package/dist/__stories__/form-validation.stories.js +36 -25
- package/dist/__stories__/icons.stories.cjs +1 -1
- package/dist/__stories__/icons.stories.js +1 -1
- package/dist/__stories__/layout.stories.cjs +80 -45
- package/dist/__stories__/layout.stories.d.cts +2 -1
- package/dist/__stories__/layout.stories.d.ts +2 -1
- package/dist/__stories__/layout.stories.js +73 -39
- package/dist/__stories__/typography.stories.cjs +1 -1
- package/dist/__stories__/typography.stories.js +1 -1
- package/dist/index.d.mts +37 -9
- package/dist/index.mjs +175 -130
- package/package.json +13 -18
|
@@ -3,8 +3,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
|
|
5
5
|
var cva = require('cva');
|
|
6
|
-
var
|
|
6
|
+
var Link = require('react-aria-components/Link');
|
|
7
|
+
var slots = require('react-aria-components/slots');
|
|
7
8
|
var react = require('react');
|
|
9
|
+
var Group = require('react-aria-components/Group');
|
|
8
10
|
|
|
9
11
|
const HeadingContext = /*#__PURE__*/ react.createContext({});
|
|
10
12
|
const headingVariants = cva.cva({
|
|
@@ -19,7 +21,7 @@ const headingVariants = cva.cva({
|
|
|
19
21
|
}
|
|
20
22
|
});
|
|
21
23
|
const Heading = ({ ref = null, ...props })=>{
|
|
22
|
-
[props, ref] =
|
|
24
|
+
[props, ref] = slots.useContextProps(props, ref, HeadingContext);
|
|
23
25
|
const { children, level, size, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
|
|
24
26
|
const _className = headingVariants({
|
|
25
27
|
size
|
|
@@ -35,7 +37,7 @@ const Heading = ({ ref = null, ...props })=>{
|
|
|
35
37
|
};
|
|
36
38
|
const ContentContext = /*#__PURE__*/ react.createContext({});
|
|
37
39
|
const Content = ({ ref = null, ...props })=>{
|
|
38
|
-
[props, ref] =
|
|
40
|
+
[props, ref] = slots.useContextProps(props, ref, ContentContext);
|
|
39
41
|
const { _outerWrapper: outerWrapper, ...restProps } = props;
|
|
40
42
|
const content = /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
41
43
|
...restProps,
|
|
@@ -57,7 +59,7 @@ const mediaVariant = cva.cva({
|
|
|
57
59
|
});
|
|
58
60
|
const MediaContext = /*#__PURE__*/ react.createContext({});
|
|
59
61
|
const Media = ({ ref = null, ...props })=>{
|
|
60
|
-
[props, ref] =
|
|
62
|
+
[props, ref] = slots.useContextProps(props, ref, MediaContext);
|
|
61
63
|
const { className, fit, ...restProps } = props;
|
|
62
64
|
const _className = mediaVariant({
|
|
63
65
|
fit
|
|
@@ -100,7 +102,7 @@ const cardVariants = cva.cva({
|
|
|
100
102
|
// **** Fail-safe for interactive elements ****
|
|
101
103
|
// Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
|
|
102
104
|
// The card is made clickable by a pseudo-element on the heading that covers the entire card
|
|
103
|
-
'[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative
|
|
105
|
+
'[&_button]:relative [&_input]:relative [&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative',
|
|
104
106
|
// 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)
|
|
105
107
|
'[&_[data-slot="card-link"]_a]:static',
|
|
106
108
|
// Place other interactive on top of the pseudo-element that makes the entire card clickable
|
|
@@ -131,7 +133,7 @@ const cardVariants = cva.cva({
|
|
|
131
133
|
subtle: [
|
|
132
134
|
'border-transparent',
|
|
133
135
|
// **** Media styles ****
|
|
134
|
-
'
|
|
136
|
+
'**:data-[slot="media"]:rounded-2xl'
|
|
135
137
|
],
|
|
136
138
|
outlined: 'border border-black'
|
|
137
139
|
},
|
|
@@ -142,7 +144,7 @@ const cardVariants = cva.cva({
|
|
|
142
144
|
vertical: [
|
|
143
145
|
'flex-col',
|
|
144
146
|
// **** Media ****
|
|
145
|
-
'
|
|
147
|
+
'**:data-[slot="media"]:rounded-t-2xl'
|
|
146
148
|
],
|
|
147
149
|
horizontal: [
|
|
148
150
|
// Use more gap for horizontal cards that have media
|
|
@@ -150,7 +152,7 @@ const cardVariants = cva.cva({
|
|
|
150
152
|
'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
|
|
151
153
|
// **** With Media ****
|
|
152
154
|
'[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
|
|
153
|
-
'has-data-[slot=media]:@2xl
|
|
155
|
+
'has-data-[slot=media]:@2xl:flex-row!',
|
|
154
156
|
'*:data-[slot=media]:@2xl:h-fit',
|
|
155
157
|
'has-data-[slot=media]:*:@2xl:basis-1/2',
|
|
156
158
|
// Position media at the edges of the card
|
|
@@ -159,7 +161,7 @@ const cardVariants = cva.cva({
|
|
|
159
161
|
'*:data-[slot=media]:last:@2xl:ml-0',
|
|
160
162
|
// Make sure the card link is clickable when the media is on the right side
|
|
161
163
|
// This is necessary because the media content is positioned after the card link in the DOM
|
|
162
|
-
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-
|
|
164
|
+
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-1',
|
|
163
165
|
// **** Without Media ****
|
|
164
166
|
'not-has-data-[slot=media]:@md:flex-row',
|
|
165
167
|
// 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.
|
|
@@ -180,7 +182,7 @@ const cardVariants = cva.cva({
|
|
|
180
182
|
className: [
|
|
181
183
|
// **** Media ****
|
|
182
184
|
// Some rounded corners are removed when the card is outlined
|
|
183
|
-
'
|
|
185
|
+
'**:data-[slot="media"]:rounded-t-2xl',
|
|
184
186
|
'*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
|
|
185
187
|
'*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
|
|
186
188
|
// **** Badge ****
|
|
@@ -203,7 +205,7 @@ const Card = ({ children, className, variant, layout, ...restProps })=>{
|
|
|
203
205
|
className: cva.cx(className, '@container rounded-2xl'),
|
|
204
206
|
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
205
207
|
className: cardClassName,
|
|
206
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(
|
|
208
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(slots.Provider, {
|
|
207
209
|
values: [
|
|
208
210
|
[
|
|
209
211
|
HeadingContext,
|
|
@@ -245,8 +247,8 @@ const cardLinkVariants = cva.cva({
|
|
|
245
247
|
// **** Clickarea ****
|
|
246
248
|
'cursor-pointer',
|
|
247
249
|
'after:absolute',
|
|
248
|
-
'after
|
|
249
|
-
'after:rounded-[calc(
|
|
250
|
+
'after:-inset-px',
|
|
251
|
+
'after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
250
252
|
// **** Focus ****
|
|
251
253
|
'focus-visible:outline-none',
|
|
252
254
|
'data-focus-visible:after:outline-focus',
|
|
@@ -260,8 +262,8 @@ const cardLinkVariants = cva.cva({
|
|
|
260
262
|
// **** Clickarea ****
|
|
261
263
|
'[&_a]:after:cursor-pointer',
|
|
262
264
|
'[&_a]:after:absolute',
|
|
263
|
-
'[&_a]:after
|
|
264
|
-
'[&_a]:after:rounded-[calc(
|
|
265
|
+
'[&_a]:after:-inset-px',
|
|
266
|
+
'[&_a]:after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
265
267
|
// **** Focus ****
|
|
266
268
|
'[&_a[data-focus-visible]]:outline-none',
|
|
267
269
|
'[&_a[data-focus-visible]]:after:outline-focus',
|
|
@@ -283,7 +285,7 @@ const cardLinkVariants = cva.cva({
|
|
|
283
285
|
className: _className,
|
|
284
286
|
withHref: !!href
|
|
285
287
|
});
|
|
286
|
-
return href ? /*#__PURE__*/ jsxRuntime.jsx(
|
|
288
|
+
return href ? /*#__PURE__*/ jsxRuntime.jsx(Link.Link, {
|
|
287
289
|
"data-slot": "card-link",
|
|
288
290
|
...restProps,
|
|
289
291
|
href: href,
|
|
@@ -302,20 +304,20 @@ const HeroContext = /*#__PURE__*/ react.createContext(null);
|
|
|
302
304
|
// Common variant for "standard" and "full-bleed" Hero variants
|
|
303
305
|
const oneColumnLayout = [
|
|
304
306
|
// Vertical spacing in the <Content>
|
|
305
|
-
'lg:*:data-[slot=
|
|
307
|
+
'lg:*:data-[slot=content]:gap-y-4',
|
|
306
308
|
// Main text content takes up 9 columns on medium screens and above
|
|
307
|
-
'lg:*:data-[slot=
|
|
309
|
+
'lg:*:data-[slot=content]:col-span-9',
|
|
308
310
|
// Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
|
|
309
|
-
'*:not-data-[slot=
|
|
311
|
+
'*:not-data-[slot=content]:not-data-[slot=media]:w-fit',
|
|
310
312
|
// 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
|
|
311
|
-
'lg:*:not-data-[slot=
|
|
313
|
+
'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',
|
|
312
314
|
// <Media> and <Carousel> content takes up the full width on medium screens and above
|
|
313
|
-
'lg:*:data-[slot=
|
|
314
|
-
'lg:*:data-[slot=
|
|
315
|
+
'lg:*:data-[slot=media]:col-span-full *:data-[slot=media]:*:w-full',
|
|
316
|
+
'lg:*:data-[slot=carousel]:col-span-full',
|
|
315
317
|
// Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
|
|
316
318
|
'lg:items-end'
|
|
317
319
|
];
|
|
318
|
-
const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=
|
|
320
|
+
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';
|
|
319
321
|
const variants = cva.cva({
|
|
320
322
|
base: [
|
|
321
323
|
'container px-0',
|
|
@@ -323,14 +325,14 @@ const variants = cva.cva({
|
|
|
323
325
|
'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
|
|
324
326
|
'gap-y-10 lg:gap-y-12',
|
|
325
327
|
// Enable vertical gap within <Content>
|
|
326
|
-
'*:data-[slot=
|
|
328
|
+
'*:data-[slot=content]:grid',
|
|
327
329
|
// Vertical spacing in the <Content>
|
|
328
|
-
'*:data-[slot=
|
|
330
|
+
'*:data-[slot=content]:gap-y-3',
|
|
329
331
|
// Make sure <Media> content fills any available vertical and horizontal space
|
|
330
|
-
'*:data-[slot=
|
|
331
|
-
'*:data-[slot=
|
|
332
|
+
'*:data-[slot=media]:*:object-cover',
|
|
333
|
+
'*:data-[slot=carousel]:overflow-hidden *:data-[slot=carousel]:rounded-3xl',
|
|
332
334
|
// Make the carousel items full width, so we scroll one at a time
|
|
333
|
-
'**:data-[slot=
|
|
335
|
+
'**:data-[slot=carousel-item]:basis-full'
|
|
334
336
|
],
|
|
335
337
|
variants: {
|
|
336
338
|
/**
|
|
@@ -340,36 +342,36 @@ const variants = cva.cva({
|
|
|
340
342
|
standard: [
|
|
341
343
|
oneColumnLayout,
|
|
342
344
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
343
|
-
'lg:*:data-[slot=
|
|
345
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
|
|
344
346
|
],
|
|
345
347
|
'full-bleed': [
|
|
346
348
|
oneColumnLayout,
|
|
347
349
|
// Position the media and carousel content to fill the entire viewport width
|
|
348
|
-
'*:data-[slot=
|
|
350
|
+
'*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
|
|
349
351
|
// Special case for Carousel, where the Media is nested inside a CarouselItem
|
|
350
|
-
'*:data-[slot=
|
|
352
|
+
'*:data-[slot=carousel]:**:data-[slot=media]:w-full',
|
|
351
353
|
// Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
|
|
352
354
|
// This is necessary due to the absolute positioning of the media and carousel containers in this variant
|
|
353
355
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
354
|
-
'
|
|
355
|
-
'**:data-[slot=
|
|
356
|
+
'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',
|
|
357
|
+
'**:data-[slot=media]:*:h-[inherit]',
|
|
356
358
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
357
|
-
'
|
|
358
|
-
'*:data-[slot=
|
|
359
|
+
'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',
|
|
360
|
+
'*:data-[slot=carousel]:w-full!',
|
|
359
361
|
// Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
|
|
360
|
-
'**:data-[slot=
|
|
362
|
+
'**:data-[slot=carousel-item]:data-[slot=media]:*:aspect-none',
|
|
361
363
|
// break out the carousel out of the container
|
|
362
|
-
'**:data-[slot=
|
|
364
|
+
'**:data-[slot=carousel-items-container]:absolute **:data-[slot=carousel-items-container]:inset-x-0 **:data-[slot=carousel-items-container]:h-[inherit]',
|
|
363
365
|
// Positions the carousel controls inside the carousel
|
|
364
|
-
'
|
|
366
|
+
'*: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'
|
|
365
367
|
],
|
|
366
368
|
'two-column': [
|
|
367
369
|
'lg:items-center lg:*:col-span-6',
|
|
368
370
|
// Vertical spacing in the <Content>
|
|
369
|
-
'lg:*:data-[slot=
|
|
371
|
+
'lg:*:data-[slot=content]:gap-y-7',
|
|
370
372
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
371
373
|
// Set media aspect ratio to 1:1 (square)
|
|
372
|
-
'lg:*:data-[slot=
|
|
374
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
|
|
373
375
|
]
|
|
374
376
|
}
|
|
375
377
|
},
|
|
@@ -380,8 +382,8 @@ const variants = cva.cva({
|
|
|
380
382
|
'two-column'
|
|
381
383
|
],
|
|
382
384
|
className: [
|
|
383
|
-
'*:data-[slot=
|
|
384
|
-
'
|
|
385
|
+
'*:data-[slot=media]:*:rounded-3xl',
|
|
386
|
+
'*: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'
|
|
385
387
|
]
|
|
386
388
|
}
|
|
387
389
|
],
|
|
@@ -394,7 +396,7 @@ const Hero = ({ variant, className, children, ...rest })=>{
|
|
|
394
396
|
variant,
|
|
395
397
|
className
|
|
396
398
|
});
|
|
397
|
-
return /*#__PURE__*/ jsxRuntime.jsx(
|
|
399
|
+
return /*#__PURE__*/ jsxRuntime.jsx(slots.Provider, {
|
|
398
400
|
values: [
|
|
399
401
|
[
|
|
400
402
|
HeroContext,
|
|
@@ -412,7 +414,7 @@ const Hero = ({ variant, className, children, ...rest })=>{
|
|
|
412
414
|
}
|
|
413
415
|
],
|
|
414
416
|
[
|
|
415
|
-
|
|
417
|
+
Group.GroupContext,
|
|
416
418
|
{
|
|
417
419
|
// Prevents the group from being announced as a group by screen readers
|
|
418
420
|
// The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning
|
|
@@ -466,7 +468,7 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
|
|
|
466
468
|
children: "Dette er OBOS"
|
|
467
469
|
}),
|
|
468
470
|
/*#__PURE__*/ jsxRuntime.jsxs("ul", {
|
|
469
|
-
className: "md:layout-subgrid-12 *:md:col-span-
|
|
471
|
+
className: "md:layout-subgrid-12 *:md:col-span-6 *:lg:col-span-3",
|
|
470
472
|
children: [
|
|
471
473
|
/*#__PURE__*/ jsxRuntime.jsxs(Card, {
|
|
472
474
|
role: "listitem",
|
|
@@ -560,7 +562,40 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
|
|
|
560
562
|
})
|
|
561
563
|
]
|
|
562
564
|
});
|
|
565
|
+
const OverridedColSpans = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
|
|
566
|
+
className: "layout-grid-container",
|
|
567
|
+
children: [
|
|
568
|
+
/*#__PURE__*/ jsxRuntime.jsx("h1", {
|
|
569
|
+
className: "heading-xl sm:col-end-9",
|
|
570
|
+
children: "Dette er OBOS"
|
|
571
|
+
}),
|
|
572
|
+
/*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
573
|
+
className: "sm:col-end-8",
|
|
574
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
575
|
+
alt: ""
|
|
576
|
+
}),
|
|
577
|
+
/*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
578
|
+
className: "sm:col-start-6 sm:col-end-12",
|
|
579
|
+
children: "Som er ett nettsted for alt om OBOS."
|
|
580
|
+
}),
|
|
581
|
+
/*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
582
|
+
className: "sm:col-span-6 sm:col-start-6",
|
|
583
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
584
|
+
alt: ""
|
|
585
|
+
}),
|
|
586
|
+
/*#__PURE__*/ jsxRuntime.jsx("p", {
|
|
587
|
+
className: "sm:col-end-15",
|
|
588
|
+
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."
|
|
589
|
+
}),
|
|
590
|
+
/*#__PURE__*/ jsxRuntime.jsx("img", {
|
|
591
|
+
className: "sm:col-span-full",
|
|
592
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
593
|
+
alt: ""
|
|
594
|
+
})
|
|
595
|
+
]
|
|
596
|
+
});
|
|
563
597
|
|
|
564
598
|
exports.GridContainer = GridContainer;
|
|
565
599
|
exports.GridContainerWithSubGrids = GridContainerWithSubGrids;
|
|
600
|
+
exports.OverridedColSpans = OverridedColSpans;
|
|
566
601
|
exports.default = meta;
|
|
@@ -5,5 +5,6 @@ declare const meta: Meta;
|
|
|
5
5
|
|
|
6
6
|
declare const GridContainer: () => react_jsx_runtime.JSX.Element;
|
|
7
7
|
declare const GridContainerWithSubGrids: () => react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare const OverridedColSpans: () => react_jsx_runtime.JSX.Element;
|
|
8
9
|
|
|
9
|
-
export { GridContainer, GridContainerWithSubGrids, meta as default };
|
|
10
|
+
export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };
|
|
@@ -5,5 +5,6 @@ declare const meta: Meta;
|
|
|
5
5
|
|
|
6
6
|
declare const GridContainer: () => react_jsx_runtime.JSX.Element;
|
|
7
7
|
declare const GridContainerWithSubGrids: () => react_jsx_runtime.JSX.Element;
|
|
8
|
+
declare const OverridedColSpans: () => react_jsx_runtime.JSX.Element;
|
|
8
9
|
|
|
9
|
-
export { GridContainer, GridContainerWithSubGrids, meta as default };
|
|
10
|
+
export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { ArrowRight } from '@obosbbl/grunnmuren-icons-react';
|
|
3
3
|
import { cva, cx } from 'cva';
|
|
4
|
-
import {
|
|
4
|
+
import { Link } from 'react-aria-components/Link';
|
|
5
|
+
import { useContextProps, Provider } from 'react-aria-components/slots';
|
|
5
6
|
import { createContext } from 'react';
|
|
7
|
+
import { GroupContext } from 'react-aria-components/Group';
|
|
6
8
|
|
|
7
9
|
const HeadingContext = /*#__PURE__*/ createContext({});
|
|
8
10
|
const headingVariants = cva({
|
|
@@ -98,7 +100,7 @@ const cardVariants = cva({
|
|
|
98
100
|
// **** Fail-safe for interactive elements ****
|
|
99
101
|
// Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
|
|
100
102
|
// 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
|
|
103
|
+
'[&_button]:relative [&_input]:relative [&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative',
|
|
102
104
|
// 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
105
|
'[&_[data-slot="card-link"]_a]:static',
|
|
104
106
|
// Place other interactive on top of the pseudo-element that makes the entire card clickable
|
|
@@ -129,7 +131,7 @@ const cardVariants = cva({
|
|
|
129
131
|
subtle: [
|
|
130
132
|
'border-transparent',
|
|
131
133
|
// **** Media styles ****
|
|
132
|
-
'
|
|
134
|
+
'**:data-[slot="media"]:rounded-2xl'
|
|
133
135
|
],
|
|
134
136
|
outlined: 'border border-black'
|
|
135
137
|
},
|
|
@@ -140,7 +142,7 @@ const cardVariants = cva({
|
|
|
140
142
|
vertical: [
|
|
141
143
|
'flex-col',
|
|
142
144
|
// **** Media ****
|
|
143
|
-
'
|
|
145
|
+
'**:data-[slot="media"]:rounded-t-2xl'
|
|
144
146
|
],
|
|
145
147
|
horizontal: [
|
|
146
148
|
// Use more gap for horizontal cards that have media
|
|
@@ -148,7 +150,7 @@ const cardVariants = cva({
|
|
|
148
150
|
'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
|
|
149
151
|
// **** With Media ****
|
|
150
152
|
'[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
|
|
151
|
-
'has-data-[slot=media]:@2xl
|
|
153
|
+
'has-data-[slot=media]:@2xl:flex-row!',
|
|
152
154
|
'*:data-[slot=media]:@2xl:h-fit',
|
|
153
155
|
'has-data-[slot=media]:*:@2xl:basis-1/2',
|
|
154
156
|
// Position media at the edges of the card
|
|
@@ -157,7 +159,7 @@ const cardVariants = cva({
|
|
|
157
159
|
'*:data-[slot=media]:last:@2xl:ml-0',
|
|
158
160
|
// Make sure the card link is clickable when the media is on the right side
|
|
159
161
|
// 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-
|
|
162
|
+
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-1',
|
|
161
163
|
// **** Without Media ****
|
|
162
164
|
'not-has-data-[slot=media]:@md:flex-row',
|
|
163
165
|
// 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 +180,7 @@ const cardVariants = cva({
|
|
|
178
180
|
className: [
|
|
179
181
|
// **** Media ****
|
|
180
182
|
// Some rounded corners are removed when the card is outlined
|
|
181
|
-
'
|
|
183
|
+
'**:data-[slot="media"]:rounded-t-2xl',
|
|
182
184
|
'*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
|
|
183
185
|
'*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
|
|
184
186
|
// **** Badge ****
|
|
@@ -243,8 +245,8 @@ const cardLinkVariants = cva({
|
|
|
243
245
|
// **** Clickarea ****
|
|
244
246
|
'cursor-pointer',
|
|
245
247
|
'after:absolute',
|
|
246
|
-
'after
|
|
247
|
-
'after:rounded-[calc(
|
|
248
|
+
'after:-inset-px',
|
|
249
|
+
'after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
248
250
|
// **** Focus ****
|
|
249
251
|
'focus-visible:outline-none',
|
|
250
252
|
'data-focus-visible:after:outline-focus',
|
|
@@ -258,8 +260,8 @@ const cardLinkVariants = cva({
|
|
|
258
260
|
// **** Clickarea ****
|
|
259
261
|
'[&_a]:after:cursor-pointer',
|
|
260
262
|
'[&_a]:after:absolute',
|
|
261
|
-
'[&_a]:after
|
|
262
|
-
'[&_a]:after:rounded-[calc(
|
|
263
|
+
'[&_a]:after:-inset-px',
|
|
264
|
+
'[&_a]:after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
263
265
|
// **** Focus ****
|
|
264
266
|
'[&_a[data-focus-visible]]:outline-none',
|
|
265
267
|
'[&_a[data-focus-visible]]:after:outline-focus',
|
|
@@ -300,20 +302,20 @@ const HeroContext = /*#__PURE__*/ createContext(null);
|
|
|
300
302
|
// Common variant for "standard" and "full-bleed" Hero variants
|
|
301
303
|
const oneColumnLayout = [
|
|
302
304
|
// Vertical spacing in the <Content>
|
|
303
|
-
'lg:*:data-[slot=
|
|
305
|
+
'lg:*:data-[slot=content]:gap-y-4',
|
|
304
306
|
// Main text content takes up 9 columns on medium screens and above
|
|
305
|
-
'lg:*:data-[slot=
|
|
307
|
+
'lg:*:data-[slot=content]:col-span-9',
|
|
306
308
|
// Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
|
|
307
|
-
'*:not-data-[slot=
|
|
309
|
+
'*:not-data-[slot=content]:not-data-[slot=media]:w-fit',
|
|
308
310
|
// 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=
|
|
311
|
+
'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
312
|
// <Media> and <Carousel> content takes up the full width on medium screens and above
|
|
311
|
-
'lg:*:data-[slot=
|
|
312
|
-
'lg:*:data-[slot=
|
|
313
|
+
'lg:*:data-[slot=media]:col-span-full *:data-[slot=media]:*:w-full',
|
|
314
|
+
'lg:*:data-[slot=carousel]:col-span-full',
|
|
313
315
|
// Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
|
|
314
316
|
'lg:items-end'
|
|
315
317
|
];
|
|
316
|
-
const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot=
|
|
318
|
+
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
319
|
const variants = cva({
|
|
318
320
|
base: [
|
|
319
321
|
'container px-0',
|
|
@@ -321,14 +323,14 @@ const variants = cva({
|
|
|
321
323
|
'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
|
|
322
324
|
'gap-y-10 lg:gap-y-12',
|
|
323
325
|
// Enable vertical gap within <Content>
|
|
324
|
-
'*:data-[slot=
|
|
326
|
+
'*:data-[slot=content]:grid',
|
|
325
327
|
// Vertical spacing in the <Content>
|
|
326
|
-
'*:data-[slot=
|
|
328
|
+
'*:data-[slot=content]:gap-y-3',
|
|
327
329
|
// Make sure <Media> content fills any available vertical and horizontal space
|
|
328
|
-
'*:data-[slot=
|
|
329
|
-
'*:data-[slot=
|
|
330
|
+
'*:data-[slot=media]:*:object-cover',
|
|
331
|
+
'*:data-[slot=carousel]:overflow-hidden *:data-[slot=carousel]:rounded-3xl',
|
|
330
332
|
// Make the carousel items full width, so we scroll one at a time
|
|
331
|
-
'**:data-[slot=
|
|
333
|
+
'**:data-[slot=carousel-item]:basis-full'
|
|
332
334
|
],
|
|
333
335
|
variants: {
|
|
334
336
|
/**
|
|
@@ -338,36 +340,36 @@ const variants = cva({
|
|
|
338
340
|
standard: [
|
|
339
341
|
oneColumnLayout,
|
|
340
342
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
341
|
-
'lg:*:data-[slot=
|
|
343
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
|
|
342
344
|
],
|
|
343
345
|
'full-bleed': [
|
|
344
346
|
oneColumnLayout,
|
|
345
347
|
// Position the media and carousel content to fill the entire viewport width
|
|
346
|
-
'*:data-[slot=
|
|
348
|
+
'*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
|
|
347
349
|
// Special case for Carousel, where the Media is nested inside a CarouselItem
|
|
348
|
-
'*:data-[slot=
|
|
350
|
+
'*:data-[slot=carousel]:**:data-[slot=media]:w-full',
|
|
349
351
|
// Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
|
|
350
352
|
// This is necessary due to the absolute positioning of the media and carousel containers in this variant
|
|
351
353
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
352
|
-
'
|
|
353
|
-
'**:data-[slot=
|
|
354
|
+
'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',
|
|
355
|
+
'**:data-[slot=media]:*:h-[inherit]',
|
|
354
356
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
355
|
-
'
|
|
356
|
-
'*:data-[slot=
|
|
357
|
+
'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',
|
|
358
|
+
'*:data-[slot=carousel]:w-full!',
|
|
357
359
|
// Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
|
|
358
|
-
'**:data-[slot=
|
|
360
|
+
'**:data-[slot=carousel-item]:data-[slot=media]:*:aspect-none',
|
|
359
361
|
// break out the carousel out of the container
|
|
360
|
-
'**:data-[slot=
|
|
362
|
+
'**:data-[slot=carousel-items-container]:absolute **:data-[slot=carousel-items-container]:inset-x-0 **:data-[slot=carousel-items-container]:h-[inherit]',
|
|
361
363
|
// Positions the carousel controls inside the carousel
|
|
362
|
-
'
|
|
364
|
+
'*: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
365
|
],
|
|
364
366
|
'two-column': [
|
|
365
367
|
'lg:items-center lg:*:col-span-6',
|
|
366
368
|
// Vertical spacing in the <Content>
|
|
367
|
-
'lg:*:data-[slot=
|
|
369
|
+
'lg:*:data-[slot=content]:gap-y-7',
|
|
368
370
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
369
371
|
// Set media aspect ratio to 1:1 (square)
|
|
370
|
-
'lg:*:data-[slot=
|
|
372
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
|
|
371
373
|
]
|
|
372
374
|
}
|
|
373
375
|
},
|
|
@@ -378,8 +380,8 @@ const variants = cva({
|
|
|
378
380
|
'two-column'
|
|
379
381
|
],
|
|
380
382
|
className: [
|
|
381
|
-
'*:data-[slot=
|
|
382
|
-
'
|
|
383
|
+
'*:data-[slot=media]:*:rounded-3xl',
|
|
384
|
+
'*: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
385
|
]
|
|
384
386
|
}
|
|
385
387
|
],
|
|
@@ -464,7 +466,7 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxs("main", {
|
|
|
464
466
|
children: "Dette er OBOS"
|
|
465
467
|
}),
|
|
466
468
|
/*#__PURE__*/ jsxs("ul", {
|
|
467
|
-
className: "md:layout-subgrid-12 *:md:col-span-
|
|
469
|
+
className: "md:layout-subgrid-12 *:md:col-span-6 *:lg:col-span-3",
|
|
468
470
|
children: [
|
|
469
471
|
/*#__PURE__*/ jsxs(Card, {
|
|
470
472
|
role: "listitem",
|
|
@@ -558,5 +560,37 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxs("main", {
|
|
|
558
560
|
})
|
|
559
561
|
]
|
|
560
562
|
});
|
|
563
|
+
const OverridedColSpans = ()=>/*#__PURE__*/ jsxs("main", {
|
|
564
|
+
className: "layout-grid-container",
|
|
565
|
+
children: [
|
|
566
|
+
/*#__PURE__*/ jsx("h1", {
|
|
567
|
+
className: "heading-xl sm:col-end-9",
|
|
568
|
+
children: "Dette er OBOS"
|
|
569
|
+
}),
|
|
570
|
+
/*#__PURE__*/ jsx("img", {
|
|
571
|
+
className: "sm:col-end-8",
|
|
572
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
573
|
+
alt: ""
|
|
574
|
+
}),
|
|
575
|
+
/*#__PURE__*/ jsx("p", {
|
|
576
|
+
className: "sm:col-start-6 sm:col-end-12",
|
|
577
|
+
children: "Som er ett nettsted for alt om OBOS."
|
|
578
|
+
}),
|
|
579
|
+
/*#__PURE__*/ jsx("img", {
|
|
580
|
+
className: "sm:col-span-6 sm:col-start-6",
|
|
581
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
582
|
+
alt: ""
|
|
583
|
+
}),
|
|
584
|
+
/*#__PURE__*/ jsx("p", {
|
|
585
|
+
className: "sm:col-end-15",
|
|
586
|
+
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."
|
|
587
|
+
}),
|
|
588
|
+
/*#__PURE__*/ jsx("img", {
|
|
589
|
+
className: "sm:col-span-full",
|
|
590
|
+
src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
|
|
591
|
+
alt: ""
|
|
592
|
+
})
|
|
593
|
+
]
|
|
594
|
+
});
|
|
561
595
|
|
|
562
|
-
export { GridContainer, GridContainerWithSubGrids, meta as default };
|
|
596
|
+
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
|
}),
|