@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
|
@@ -8,7 +8,7 @@ var cva = require('cva');
|
|
|
8
8
|
var reactAria = require('react-aria');
|
|
9
9
|
|
|
10
10
|
const formField = cva.cx('group flex flex-col gap-2');
|
|
11
|
-
const formFieldError = cva.cx('
|
|
11
|
+
const formFieldError = cva.cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');
|
|
12
12
|
const input = cva.cva({
|
|
13
13
|
base: [
|
|
14
14
|
// All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
|
|
@@ -17,7 +17,7 @@ const input = cva.cva({
|
|
|
17
17
|
// Setting min-height to prevent the input from collapsing in Safari
|
|
18
18
|
// Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
|
|
19
19
|
'box-content min-h-6 py-2.5',
|
|
20
|
-
'rounded-md
|
|
20
|
+
'rounded-md text-base leading-6 font-normal placeholder-[#727070] ring-1 ring-black outline-hidden',
|
|
21
21
|
// invalid styles
|
|
22
22
|
'group-data-invalid:ring-focus group-data-invalid:ring-red',
|
|
23
23
|
// Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
|
|
@@ -26,12 +26,12 @@ const input = cva.cva({
|
|
|
26
26
|
variants: {
|
|
27
27
|
// Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
|
|
28
28
|
focusModifier: {
|
|
29
|
-
focus: 'focus:ring-focus group-data-invalid:focus:ring-
|
|
30
|
-
visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-
|
|
29
|
+
focus: 'focus:ring-focus group-data-invalid:focus:ring-red group-data-invalid:focus:ring-3',
|
|
30
|
+
visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-red group-data-invalid:data-focus-visible:ring-3'
|
|
31
31
|
},
|
|
32
32
|
isGrouped: {
|
|
33
33
|
false: 'px-3',
|
|
34
|
-
true: '
|
|
34
|
+
true: 'flex-1 ring-0!'
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
defaultVariants: {
|
|
@@ -40,11 +40,11 @@ const input = cva.cva({
|
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
const inputGroup = cva.cx([
|
|
43
|
-
'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black
|
|
44
|
-
'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-
|
|
43
|
+
'focus-within:ring-focus inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black',
|
|
44
|
+
'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-red group-data-invalid:focus-within:ring-3'
|
|
45
45
|
]);
|
|
46
46
|
({
|
|
47
|
-
popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm
|
|
47
|
+
popover: cva.cx('data-entering:fade-in data-exiting:fade-out data-entering:animate-in data-exiting:animate-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm'),
|
|
48
48
|
// overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
|
|
49
49
|
listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
|
|
50
50
|
chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
|
|
@@ -57,7 +57,7 @@ const animateIconVariants = cva.cva({
|
|
|
57
57
|
left: 'hover:*:[svg]:motion-safe:-translate-x-1',
|
|
58
58
|
down: 'hover:*:[svg]:motion-safe:translate-y-1',
|
|
59
59
|
up: 'hover:*:[svg]:motion-safe:-translate-y-1',
|
|
60
|
-
'up-right': 'hover:*:[svg]:motion-safe
|
|
60
|
+
'up-right': 'hover:*:[svg]:motion-safe:translate-x-0.5 hover:*:[svg]:motion-safe:-translate-y-0.5'
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
});
|
|
@@ -81,7 +81,7 @@ const translations = {
|
|
|
81
81
|
* Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
|
|
82
82
|
*/ const buttonVariants = cva.compose(animateIconVariants, cva.cva({
|
|
83
83
|
base: [
|
|
84
|
-
'inline-flex min-h-[44px] cursor-pointer items-center justify-center
|
|
84
|
+
'focus-visible:outline-focus-offset inline-flex min-h-[44px] cursor-pointer items-center justify-center rounded-lg font-medium whitespace-nowrap transition-colors duration-200'
|
|
85
85
|
],
|
|
86
86
|
variants: {
|
|
87
87
|
/**
|
|
@@ -105,7 +105,7 @@ const translations = {
|
|
|
105
105
|
* When the button is without text, but with a single icon.
|
|
106
106
|
* @default false
|
|
107
107
|
*/ isIconOnly: {
|
|
108
|
-
true: 'p-2 [&>svg]:
|
|
108
|
+
true: 'p-2 [&>svg]:size-7',
|
|
109
109
|
false: 'gap-2.5 px-4 py-2'
|
|
110
110
|
},
|
|
111
111
|
// Make the content of the button transparent to hide it's content, but keep the button width
|
|
@@ -119,48 +119,48 @@ const translations = {
|
|
|
119
119
|
color: 'blue',
|
|
120
120
|
variant: 'primary',
|
|
121
121
|
// Darken bg by 20% on hover. The color is manually crafted
|
|
122
|
-
className: 'bg-blue-dark
|
|
122
|
+
className: 'bg-blue-dark hover:bg-blue text-white active:bg-[#0536A0] active:text-white **:[[role="progressbar"]]:text-white'
|
|
123
123
|
},
|
|
124
124
|
{
|
|
125
125
|
color: 'blue',
|
|
126
126
|
variant: 'secondary',
|
|
127
|
-
className: 'text-blue-dark hover:
|
|
127
|
+
className: 'text-blue-dark hover:bg-blue hover:text-blue-dark **:[[role="progressbar"]]:text-blue-dark hover:border-transparent hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white'
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
color: 'blue',
|
|
131
131
|
variant: 'tertiary',
|
|
132
|
-
className: '[
|
|
132
|
+
className: '**:[[role="progressbar"]]:text-black'
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
135
|
color: 'mint',
|
|
136
136
|
variant: 'primary',
|
|
137
137
|
// Darken bg by 20% on hover. The color is manually crafted
|
|
138
|
-
className: 'bg-mint text-black hover:bg-[#8dd4bd]
|
|
138
|
+
className: 'bg-mint active:[#9ddac6] text-black hover:bg-[#8dd4bd] **:[[role="progressbar"]]:text-black'
|
|
139
139
|
},
|
|
140
140
|
{
|
|
141
141
|
color: 'mint',
|
|
142
142
|
variant: 'secondary',
|
|
143
|
-
className: 'text-mint hover:bg-mint
|
|
143
|
+
className: 'text-mint hover:bg-mint **:[[role="progressbar"]]:text-mint hover:text-black [&:hover_[role="progressbar"]]:text-black'
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
146
|
color: 'mint',
|
|
147
147
|
variant: 'tertiary',
|
|
148
|
-
className: 'text-mint [
|
|
148
|
+
className: 'text-mint **:[[role="progressbar"]]:text-mint'
|
|
149
149
|
},
|
|
150
150
|
{
|
|
151
151
|
color: 'white',
|
|
152
152
|
variant: 'primary',
|
|
153
|
-
className: '
|
|
153
|
+
className: 'hover:bg-sky active:bg-sky-light bg-white text-black **:[[role="progressbar"]]:text-black'
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
color: 'white',
|
|
157
157
|
variant: 'secondary',
|
|
158
|
-
className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [
|
|
158
|
+
className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black **:[[role="progressbar"]]:text-white'
|
|
159
159
|
},
|
|
160
160
|
{
|
|
161
161
|
color: 'white',
|
|
162
162
|
variant: 'tertiary',
|
|
163
|
-
className: 'text-white [
|
|
163
|
+
className: 'text-white **:[[role="progressbar"]]:text-white'
|
|
164
164
|
}
|
|
165
165
|
],
|
|
166
166
|
defaultVariants: {
|
|
@@ -253,7 +253,7 @@ function ErrorMessage(props) {
|
|
|
253
253
|
function Label(props) {
|
|
254
254
|
const { children, className, ...restProps } = props;
|
|
255
255
|
return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Label, {
|
|
256
|
-
className: cva.cx(className, 'font-medium
|
|
256
|
+
className: cva.cx(className, 'leading-7 font-medium'),
|
|
257
257
|
...restProps,
|
|
258
258
|
children: children
|
|
259
259
|
});
|
|
@@ -411,8 +411,7 @@ const RealtimeValidation = ()=>{
|
|
|
411
411
|
/*#__PURE__*/ jsxRuntime.jsx("code", {
|
|
412
412
|
children: "validate"
|
|
413
413
|
}),
|
|
414
|
-
" prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er",
|
|
415
|
-
' ',
|
|
414
|
+
" prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er ",
|
|
416
415
|
/*#__PURE__*/ jsxRuntime.jsx("em", {
|
|
417
416
|
children: "uncontrolled"
|
|
418
417
|
}),
|
|
@@ -6,7 +6,7 @@ import { cx, cva, compose } from 'cva';
|
|
|
6
6
|
import { useProgressBar } from 'react-aria';
|
|
7
7
|
|
|
8
8
|
const formField = cx('group flex flex-col gap-2');
|
|
9
|
-
const formFieldError = cx('
|
|
9
|
+
const formFieldError = cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');
|
|
10
10
|
const input = cva({
|
|
11
11
|
base: [
|
|
12
12
|
// All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
|
|
@@ -15,7 +15,7 @@ const input = cva({
|
|
|
15
15
|
// Setting min-height to prevent the input from collapsing in Safari
|
|
16
16
|
// Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
|
|
17
17
|
'box-content min-h-6 py-2.5',
|
|
18
|
-
'rounded-md
|
|
18
|
+
'rounded-md text-base leading-6 font-normal placeholder-[#727070] ring-1 ring-black outline-hidden',
|
|
19
19
|
// invalid styles
|
|
20
20
|
'group-data-invalid:ring-focus group-data-invalid:ring-red',
|
|
21
21
|
// Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
|
|
@@ -24,12 +24,12 @@ const input = cva({
|
|
|
24
24
|
variants: {
|
|
25
25
|
// Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
|
|
26
26
|
focusModifier: {
|
|
27
|
-
focus: 'focus:ring-focus group-data-invalid:focus:ring-
|
|
28
|
-
visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-
|
|
27
|
+
focus: 'focus:ring-focus group-data-invalid:focus:ring-red group-data-invalid:focus:ring-3',
|
|
28
|
+
visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-red group-data-invalid:data-focus-visible:ring-3'
|
|
29
29
|
},
|
|
30
30
|
isGrouped: {
|
|
31
31
|
false: 'px-3',
|
|
32
|
-
true: '
|
|
32
|
+
true: 'flex-1 ring-0!'
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
defaultVariants: {
|
|
@@ -38,11 +38,11 @@ const input = cva({
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
const inputGroup = cx([
|
|
41
|
-
'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black
|
|
42
|
-
'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-
|
|
41
|
+
'focus-within:ring-focus inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black',
|
|
42
|
+
'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-red group-data-invalid:focus-within:ring-3'
|
|
43
43
|
]);
|
|
44
44
|
({
|
|
45
|
-
popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm
|
|
45
|
+
popover: cx('data-entering:fade-in data-exiting:fade-out data-entering:animate-in data-exiting:animate-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm'),
|
|
46
46
|
// overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
|
|
47
47
|
listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
|
|
48
48
|
chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
|
|
@@ -55,7 +55,7 @@ const animateIconVariants = cva({
|
|
|
55
55
|
left: 'hover:*:[svg]:motion-safe:-translate-x-1',
|
|
56
56
|
down: 'hover:*:[svg]:motion-safe:translate-y-1',
|
|
57
57
|
up: 'hover:*:[svg]:motion-safe:-translate-y-1',
|
|
58
|
-
'up-right': 'hover:*:[svg]:motion-safe
|
|
58
|
+
'up-right': 'hover:*:[svg]:motion-safe:translate-x-0.5 hover:*:[svg]:motion-safe:-translate-y-0.5'
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
});
|
|
@@ -79,7 +79,7 @@ const translations = {
|
|
|
79
79
|
* Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
|
|
80
80
|
*/ const buttonVariants = compose(animateIconVariants, cva({
|
|
81
81
|
base: [
|
|
82
|
-
'inline-flex min-h-[44px] cursor-pointer items-center justify-center
|
|
82
|
+
'focus-visible:outline-focus-offset inline-flex min-h-[44px] cursor-pointer items-center justify-center rounded-lg font-medium whitespace-nowrap transition-colors duration-200'
|
|
83
83
|
],
|
|
84
84
|
variants: {
|
|
85
85
|
/**
|
|
@@ -103,7 +103,7 @@ const translations = {
|
|
|
103
103
|
* When the button is without text, but with a single icon.
|
|
104
104
|
* @default false
|
|
105
105
|
*/ isIconOnly: {
|
|
106
|
-
true: 'p-2 [&>svg]:
|
|
106
|
+
true: 'p-2 [&>svg]:size-7',
|
|
107
107
|
false: 'gap-2.5 px-4 py-2'
|
|
108
108
|
},
|
|
109
109
|
// Make the content of the button transparent to hide it's content, but keep the button width
|
|
@@ -117,48 +117,48 @@ const translations = {
|
|
|
117
117
|
color: 'blue',
|
|
118
118
|
variant: 'primary',
|
|
119
119
|
// Darken bg by 20% on hover. The color is manually crafted
|
|
120
|
-
className: 'bg-blue-dark
|
|
120
|
+
className: 'bg-blue-dark hover:bg-blue text-white active:bg-[#0536A0] active:text-white **:[[role="progressbar"]]:text-white'
|
|
121
121
|
},
|
|
122
122
|
{
|
|
123
123
|
color: 'blue',
|
|
124
124
|
variant: 'secondary',
|
|
125
|
-
className: 'text-blue-dark hover:
|
|
125
|
+
className: 'text-blue-dark hover:bg-blue hover:text-blue-dark **:[[role="progressbar"]]:text-blue-dark hover:border-transparent hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white'
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
128
|
color: 'blue',
|
|
129
129
|
variant: 'tertiary',
|
|
130
|
-
className: '[
|
|
130
|
+
className: '**:[[role="progressbar"]]:text-black'
|
|
131
131
|
},
|
|
132
132
|
{
|
|
133
133
|
color: 'mint',
|
|
134
134
|
variant: 'primary',
|
|
135
135
|
// Darken bg by 20% on hover. The color is manually crafted
|
|
136
|
-
className: 'bg-mint text-black hover:bg-[#8dd4bd]
|
|
136
|
+
className: 'bg-mint active:[#9ddac6] text-black hover:bg-[#8dd4bd] **:[[role="progressbar"]]:text-black'
|
|
137
137
|
},
|
|
138
138
|
{
|
|
139
139
|
color: 'mint',
|
|
140
140
|
variant: 'secondary',
|
|
141
|
-
className: 'text-mint hover:bg-mint
|
|
141
|
+
className: 'text-mint hover:bg-mint **:[[role="progressbar"]]:text-mint hover:text-black [&:hover_[role="progressbar"]]:text-black'
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
color: 'mint',
|
|
145
145
|
variant: 'tertiary',
|
|
146
|
-
className: 'text-mint [
|
|
146
|
+
className: 'text-mint **:[[role="progressbar"]]:text-mint'
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
color: 'white',
|
|
150
150
|
variant: 'primary',
|
|
151
|
-
className: '
|
|
151
|
+
className: 'hover:bg-sky active:bg-sky-light bg-white text-black **:[[role="progressbar"]]:text-black'
|
|
152
152
|
},
|
|
153
153
|
{
|
|
154
154
|
color: 'white',
|
|
155
155
|
variant: 'secondary',
|
|
156
|
-
className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [
|
|
156
|
+
className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black **:[[role="progressbar"]]:text-white'
|
|
157
157
|
},
|
|
158
158
|
{
|
|
159
159
|
color: 'white',
|
|
160
160
|
variant: 'tertiary',
|
|
161
|
-
className: 'text-white [
|
|
161
|
+
className: 'text-white **:[[role="progressbar"]]:text-white'
|
|
162
162
|
}
|
|
163
163
|
],
|
|
164
164
|
defaultVariants: {
|
|
@@ -251,7 +251,7 @@ function ErrorMessage(props) {
|
|
|
251
251
|
function Label(props) {
|
|
252
252
|
const { children, className, ...restProps } = props;
|
|
253
253
|
return /*#__PURE__*/ jsx(Label$1, {
|
|
254
|
-
className: cx(className, 'font-medium
|
|
254
|
+
className: cx(className, 'leading-7 font-medium'),
|
|
255
255
|
...restProps,
|
|
256
256
|
children: children
|
|
257
257
|
});
|
|
@@ -409,8 +409,7 @@ const RealtimeValidation = ()=>{
|
|
|
409
409
|
/*#__PURE__*/ jsx("code", {
|
|
410
410
|
children: "validate"
|
|
411
411
|
}),
|
|
412
|
-
" prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er",
|
|
413
|
-
' ',
|
|
412
|
+
" prop-en på skjemaelementene for å implementere realtime validering av skjemaet på klienten. Dette er nyttig for å legge til ekstra validering, selv om skjemaet er ",
|
|
414
413
|
/*#__PURE__*/ jsx("em", {
|
|
415
414
|
children: "uncontrolled"
|
|
416
415
|
}),
|
|
@@ -28,7 +28,7 @@ const meta = {
|
|
|
28
28
|
};
|
|
29
29
|
const Icons = ()=>{
|
|
30
30
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
31
|
-
className: "grid grid-cols-[repeat(auto-fill,
|
|
31
|
+
className: "grid grid-cols-[repeat(auto-fill,100px)] content-center justify-center gap-6",
|
|
32
32
|
children: Object.entries(icons__namespace).map(([iconName, Icon])=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
33
33
|
children: [
|
|
34
34
|
/*#__PURE__*/ jsxRuntime.jsx(Icon, {
|
|
@@ -6,7 +6,7 @@ const meta = {
|
|
|
6
6
|
};
|
|
7
7
|
const Icons = ()=>{
|
|
8
8
|
return /*#__PURE__*/ jsx("div", {
|
|
9
|
-
className: "grid grid-cols-[repeat(auto-fill,
|
|
9
|
+
className: "grid grid-cols-[repeat(auto-fill,100px)] content-center justify-center gap-6",
|
|
10
10
|
children: Object.entries(icons).map(([iconName, Icon])=>/*#__PURE__*/ jsxs("div", {
|
|
11
11
|
children: [
|
|
12
12
|
/*#__PURE__*/ jsx(Icon, {
|
|
@@ -100,7 +100,7 @@ const cardVariants = cva.cva({
|
|
|
100
100
|
// **** Fail-safe for interactive elements ****
|
|
101
101
|
// Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
|
|
102
102
|
// 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
|
|
103
|
+
'[&_button]:relative [&_input]:relative [&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative',
|
|
104
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)
|
|
105
105
|
'[&_[data-slot="card-link"]_a]:static',
|
|
106
106
|
// Place other interactive on top of the pseudo-element that makes the entire card clickable
|
|
@@ -131,7 +131,7 @@ const cardVariants = cva.cva({
|
|
|
131
131
|
subtle: [
|
|
132
132
|
'border-transparent',
|
|
133
133
|
// **** Media styles ****
|
|
134
|
-
'
|
|
134
|
+
'**:data-[slot="media"]:rounded-2xl'
|
|
135
135
|
],
|
|
136
136
|
outlined: 'border border-black'
|
|
137
137
|
},
|
|
@@ -142,7 +142,7 @@ const cardVariants = cva.cva({
|
|
|
142
142
|
vertical: [
|
|
143
143
|
'flex-col',
|
|
144
144
|
// **** Media ****
|
|
145
|
-
'
|
|
145
|
+
'**:data-[slot="media"]:rounded-t-2xl'
|
|
146
146
|
],
|
|
147
147
|
horizontal: [
|
|
148
148
|
// Use more gap for horizontal cards that have media
|
|
@@ -150,7 +150,7 @@ const cardVariants = cva.cva({
|
|
|
150
150
|
'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
|
|
151
151
|
// **** With Media ****
|
|
152
152
|
'[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
|
|
153
|
-
'has-data-[slot=media]:@2xl
|
|
153
|
+
'has-data-[slot=media]:@2xl:flex-row!',
|
|
154
154
|
'*:data-[slot=media]:@2xl:h-fit',
|
|
155
155
|
'has-data-[slot=media]:*:@2xl:basis-1/2',
|
|
156
156
|
// Position media at the edges of the card
|
|
@@ -159,7 +159,7 @@ const cardVariants = cva.cva({
|
|
|
159
159
|
'*:data-[slot=media]:last:@2xl:ml-0',
|
|
160
160
|
// Make sure the card link is clickable when the media is on the right side
|
|
161
161
|
// 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-
|
|
162
|
+
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-1',
|
|
163
163
|
// **** Without Media ****
|
|
164
164
|
'not-has-data-[slot=media]:@md:flex-row',
|
|
165
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.
|
|
@@ -180,7 +180,7 @@ const cardVariants = cva.cva({
|
|
|
180
180
|
className: [
|
|
181
181
|
// **** Media ****
|
|
182
182
|
// Some rounded corners are removed when the card is outlined
|
|
183
|
-
'
|
|
183
|
+
'**:data-[slot="media"]:rounded-t-2xl',
|
|
184
184
|
'*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
|
|
185
185
|
'*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
|
|
186
186
|
// **** Badge ****
|
|
@@ -245,8 +245,8 @@ const cardLinkVariants = cva.cva({
|
|
|
245
245
|
// **** Clickarea ****
|
|
246
246
|
'cursor-pointer',
|
|
247
247
|
'after:absolute',
|
|
248
|
-
'after
|
|
249
|
-
'after:rounded-[calc(
|
|
248
|
+
'after:-inset-px',
|
|
249
|
+
'after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
250
250
|
// **** Focus ****
|
|
251
251
|
'focus-visible:outline-none',
|
|
252
252
|
'data-focus-visible:after:outline-focus',
|
|
@@ -260,8 +260,8 @@ const cardLinkVariants = cva.cva({
|
|
|
260
260
|
// **** Clickarea ****
|
|
261
261
|
'[&_a]:after:cursor-pointer',
|
|
262
262
|
'[&_a]:after:absolute',
|
|
263
|
-
'[&_a]:after
|
|
264
|
-
'[&_a]:after:rounded-[calc(
|
|
263
|
+
'[&_a]:after:-inset-px',
|
|
264
|
+
'[&_a]:after:rounded-[calc(var(--radius-2xl)-theme(borderWidth.DEFAULT))]',
|
|
265
265
|
// **** Focus ****
|
|
266
266
|
'[&_a[data-focus-visible]]:outline-none',
|
|
267
267
|
'[&_a[data-focus-visible]]:after:outline-focus',
|
|
@@ -302,20 +302,20 @@ const HeroContext = /*#__PURE__*/ react.createContext(null);
|
|
|
302
302
|
// Common variant for "standard" and "full-bleed" Hero variants
|
|
303
303
|
const oneColumnLayout = [
|
|
304
304
|
// Vertical spacing in the <Content>
|
|
305
|
-
'lg:*:data-[slot=
|
|
305
|
+
'lg:*:data-[slot=content]:gap-y-4',
|
|
306
306
|
// Main text content takes up 9 columns on medium screens and above
|
|
307
|
-
'lg:*:data-[slot=
|
|
307
|
+
'lg:*:data-[slot=content]:col-span-9',
|
|
308
308
|
// Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
|
|
309
|
-
'*:not-data-[slot=
|
|
309
|
+
'*:not-data-[slot=content]:not-data-[slot=media]:w-fit',
|
|
310
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
|
|
311
|
-
'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',
|
|
312
312
|
// <Media> and <Carousel> content takes up the full width on medium screens and above
|
|
313
|
-
'lg:*:data-[slot=
|
|
314
|
-
'lg:*:data-[slot=
|
|
313
|
+
'lg:*:data-[slot=media]:col-span-full *:data-[slot=media]:*:w-full',
|
|
314
|
+
'lg:*:data-[slot=carousel]:col-span-full',
|
|
315
315
|
// Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
|
|
316
316
|
'lg:items-end'
|
|
317
317
|
];
|
|
318
|
-
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';
|
|
319
319
|
const variants = cva.cva({
|
|
320
320
|
base: [
|
|
321
321
|
'container px-0',
|
|
@@ -323,14 +323,14 @@ const variants = cva.cva({
|
|
|
323
323
|
'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
|
|
324
324
|
'gap-y-10 lg:gap-y-12',
|
|
325
325
|
// Enable vertical gap within <Content>
|
|
326
|
-
'*:data-[slot=
|
|
326
|
+
'*:data-[slot=content]:grid',
|
|
327
327
|
// Vertical spacing in the <Content>
|
|
328
|
-
'*:data-[slot=
|
|
328
|
+
'*:data-[slot=content]:gap-y-3',
|
|
329
329
|
// Make sure <Media> content fills any available vertical and horizontal space
|
|
330
|
-
'*:data-[slot=
|
|
331
|
-
'*:data-[slot=
|
|
330
|
+
'*:data-[slot=media]:*:object-cover',
|
|
331
|
+
'*:data-[slot=carousel]:overflow-hidden *:data-[slot=carousel]:rounded-3xl',
|
|
332
332
|
// Make the carousel items full width, so we scroll one at a time
|
|
333
|
-
'**:data-[slot=
|
|
333
|
+
'**:data-[slot=carousel-item]:basis-full'
|
|
334
334
|
],
|
|
335
335
|
variants: {
|
|
336
336
|
/**
|
|
@@ -340,36 +340,36 @@ const variants = cva.cva({
|
|
|
340
340
|
standard: [
|
|
341
341
|
oneColumnLayout,
|
|
342
342
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
343
|
-
'lg:*:data-[slot=
|
|
343
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-2/1'
|
|
344
344
|
],
|
|
345
345
|
'full-bleed': [
|
|
346
346
|
oneColumnLayout,
|
|
347
347
|
// Position the media and carousel content to fill the entire viewport width
|
|
348
|
-
'*:data-[slot=
|
|
348
|
+
'*:data-[slot=media]:*:absolute *:data-[slot=media]:*:left-0',
|
|
349
349
|
// Special case for Carousel, where the Media is nested inside a CarouselItem
|
|
350
|
-
'*:data-[slot=
|
|
350
|
+
'*:data-[slot=carousel]:**:data-[slot=media]:w-full',
|
|
351
351
|
// Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
|
|
352
352
|
// This is necessary due to the absolute positioning of the media and carousel containers in this variant
|
|
353
353
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
354
|
-
'
|
|
355
|
-
'**: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]',
|
|
356
356
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
357
|
-
'
|
|
358
|
-
'*: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!',
|
|
359
359
|
// Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
|
|
360
|
-
'**:data-[slot=
|
|
360
|
+
'**:data-[slot=carousel-item]:data-[slot=media]:*:aspect-none',
|
|
361
361
|
// break out the carousel out of the container
|
|
362
|
-
'**:data-[slot=
|
|
362
|
+
'**:data-[slot=carousel-items-container]:absolute **:data-[slot=carousel-items-container]:inset-x-0 **:data-[slot=carousel-items-container]:h-[inherit]',
|
|
363
363
|
// Positions the carousel controls inside the carousel
|
|
364
|
-
'
|
|
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'
|
|
365
365
|
],
|
|
366
366
|
'two-column': [
|
|
367
367
|
'lg:items-center lg:*:col-span-6',
|
|
368
368
|
// Vertical spacing in the <Content>
|
|
369
|
-
'lg:*:data-[slot=
|
|
369
|
+
'lg:*:data-[slot=content]:gap-y-7',
|
|
370
370
|
nonFullBleedAspectRatiosForSmallScreens,
|
|
371
371
|
// Set media aspect ratio to 1:1 (square)
|
|
372
|
-
'lg:*:data-[slot=
|
|
372
|
+
'lg:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-square'
|
|
373
373
|
]
|
|
374
374
|
}
|
|
375
375
|
},
|
|
@@ -380,8 +380,8 @@ const variants = cva.cva({
|
|
|
380
380
|
'two-column'
|
|
381
381
|
],
|
|
382
382
|
className: [
|
|
383
|
-
'*:data-[slot=
|
|
384
|
-
'
|
|
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'
|
|
385
385
|
]
|
|
386
386
|
}
|
|
387
387
|
],
|
|
@@ -466,7 +466,7 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
|
|
|
466
466
|
children: "Dette er OBOS"
|
|
467
467
|
}),
|
|
468
468
|
/*#__PURE__*/ jsxRuntime.jsxs("ul", {
|
|
469
|
-
className: "md:layout-subgrid-12 *:md:col-span-
|
|
469
|
+
className: "md:layout-subgrid-12 *:md:col-span-6 *:lg:col-span-3",
|
|
470
470
|
children: [
|
|
471
471
|
/*#__PURE__*/ jsxRuntime.jsxs(Card, {
|
|
472
472
|
role: "listitem",
|
|
@@ -560,7 +560,40 @@ const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
|
|
|
560
560
|
})
|
|
561
561
|
]
|
|
562
562
|
});
|
|
563
|
+
const OverridedColSpans = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
|
|
564
|
+
className: "layout-grid-container",
|
|
565
|
+
children: [
|
|
566
|
+
/*#__PURE__*/ jsxRuntime.jsx("h1", {
|
|
567
|
+
className: "heading-xl sm:col-end-9",
|
|
568
|
+
children: "Dette er OBOS"
|
|
569
|
+
}),
|
|
570
|
+
/*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.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
|
+
});
|
|
563
595
|
|
|
564
596
|
exports.GridContainer = GridContainer;
|
|
565
597
|
exports.GridContainerWithSubGrids = GridContainerWithSubGrids;
|
|
598
|
+
exports.OverridedColSpans = OverridedColSpans;
|
|
566
599
|
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 };
|