@obosbbl/grunnmuren-react 2.3.3 → 2.3.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/index.mjs +17 -7
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -168,7 +168,7 @@ function AccordionItem(props) {
|
|
|
168
168
|
HeadingContext,
|
|
169
169
|
{
|
|
170
170
|
// Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
|
|
171
|
-
className: 'font-
|
|
171
|
+
className: 'font-medium leading-7 -mx-2 text-base',
|
|
172
172
|
// Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
|
|
173
173
|
level: 3,
|
|
174
174
|
_innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
|
|
@@ -2025,6 +2025,7 @@ const oneColumnLayout = [
|
|
|
2025
2025
|
// Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
|
|
2026
2026
|
'lg:items-end'
|
|
2027
2027
|
];
|
|
2028
|
+
const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
|
|
2028
2029
|
const variants = cva({
|
|
2029
2030
|
base: [
|
|
2030
2031
|
'container px-0',
|
|
@@ -2045,19 +2046,26 @@ const variants = cva({
|
|
|
2045
2046
|
* */ variant: {
|
|
2046
2047
|
standard: [
|
|
2047
2048
|
roundedMediaCorners,
|
|
2048
|
-
oneColumnLayout
|
|
2049
|
+
oneColumnLayout,
|
|
2050
|
+
nonFullBleedAspectRatiosForSmallScreens,
|
|
2051
|
+
'lg:*:data-[slot="media"]:*:aspect-2/1'
|
|
2049
2052
|
],
|
|
2050
2053
|
'full-bleed': [
|
|
2051
2054
|
oneColumnLayout,
|
|
2052
2055
|
// Position the media and carousel content to fill the entire viewport width
|
|
2053
2056
|
'*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
|
|
2054
|
-
|
|
2057
|
+
// Special case for Carousel, where the Media is nested inside a CarouselItem
|
|
2058
|
+
'*:data-[slot="carousel"]:**:data-[slot="media"]:w-full *:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
|
|
2055
2059
|
// Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
|
|
2056
2060
|
// This is necessary due to the absolute positioning of the media and carousel containers in this variant
|
|
2057
2061
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
2058
|
-
'
|
|
2062
|
+
'**:data-[slot="media"]:h-70 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
|
|
2063
|
+
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
2064
|
+
'**:data-[slot="media"]:*:h-70 sm:**:data-[slot="media"]:*:h-[25rem] md:**:data-[slot="media"]:*:h-[30rem] lg:**:data-[slot="media"]:*:h-[35rem] xl:**:data-[slot="media"]:*:h-[40rem] 2xl:**:data-[slot="media"]:*:h-[42rem] 3xl:**:data-[slot="media"]:*:h-[48rem] 4xl:**:data-[slot="media"]:*:h-[53rem]',
|
|
2059
2065
|
// biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
|
|
2060
2066
|
'*:data-[slot="carousel"]:h-70 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
|
|
2067
|
+
// Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
|
|
2068
|
+
'**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
|
|
2061
2069
|
'**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
|
|
2062
2070
|
// Override rounded corners of Carousel slots
|
|
2063
2071
|
'*:data-[slot="carousel"]:*:rounded-none'
|
|
@@ -2067,6 +2075,7 @@ const variants = cva({
|
|
|
2067
2075
|
// Vertical spacing in the <Content>
|
|
2068
2076
|
'lg:*:data-[slot="content"]:gap-y-7',
|
|
2069
2077
|
roundedMediaCorners,
|
|
2078
|
+
nonFullBleedAspectRatiosForSmallScreens,
|
|
2070
2079
|
// Set media aspect ratio to 1:1 (square)
|
|
2071
2080
|
'lg:*:data-[slot="media"]:*:aspect-[1/1]'
|
|
2072
2081
|
]
|
|
@@ -2087,7 +2096,9 @@ const Hero = ({ variant, className, children })=>{
|
|
|
2087
2096
|
HeadingContext,
|
|
2088
2097
|
{
|
|
2089
2098
|
// Sets the default heading size for the Hero based on the variant
|
|
2090
|
-
size: variant === 'two-column' ? 'xl' : 'l'
|
|
2099
|
+
size: variant === 'two-column' ? 'xl' : 'l',
|
|
2100
|
+
className: // word-break:break-word to allow long words to break (this is necessary to make hyphens work in grid containers in Safari)
|
|
2101
|
+
'hyphens-auto text-pretty [word-break:break-word]'
|
|
2091
2102
|
}
|
|
2092
2103
|
],
|
|
2093
2104
|
[
|
|
@@ -2272,8 +2283,7 @@ const CarouselItem = ({ className, children, id })=>{
|
|
|
2272
2283
|
MediaContext,
|
|
2273
2284
|
{
|
|
2274
2285
|
fit: 'cover',
|
|
2275
|
-
className: cx('data-[fit="contain"]:bg-blue-dark', '*:w-full',
|
|
2276
|
-
'*:h-70 sm:*:h-[25rem] lg:*:h-[35rem] xl:*:h-[40rem] 2xl:*:h-[42rem] 3xl:*:h-[48rem] 4xl:*:h-[53rem]')
|
|
2286
|
+
className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-1/1 max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
|
|
2277
2287
|
}
|
|
2278
2288
|
]
|
|
2279
2289
|
],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@obosbbl/grunnmuren-react",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.4",
|
|
4
4
|
"description": "Grunnmuren components in React",
|
|
5
5
|
"repository": {
|
|
6
6
|
"url": "https://github.com/code-obos/grunnmuren"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react": "^19"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"tailwindcss": "4.1.
|
|
38
|
+
"tailwindcss": "4.1.10"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "bunchee"
|