@hanzo/ui 0.5.13 → 0.5.15
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/blocks/components/carte-blanche-block/index.tsx +28 -19
- package/blocks/components/carte-blanche-block/variant-content-left.tsx +47 -0
- package/blocks/components/enh-heading-block.tsx +15 -5
- package/blocks/components/screenful-block/content.tsx +6 -1
- package/blocks/components/screenful-block/index.tsx +4 -4
- package/package.json +1 -1
- package/tailwind/tailwind.config.base.js +1 -0
|
@@ -21,6 +21,7 @@ import CTABlockComponent from '../cta-block'
|
|
|
21
21
|
import Content from '../content'
|
|
22
22
|
import type BlockComponentProps from '../block-component-props'
|
|
23
23
|
import { EnhHeadingBlockComponent } from '..'
|
|
24
|
+
import VariantContentLeft from './variant-content-left'
|
|
24
25
|
|
|
25
26
|
type CardSection = 'entire' | 'header' | 'content' | 'footer'
|
|
26
27
|
|
|
@@ -83,27 +84,35 @@ const CarteBlancheBlockComponent: React.FC<
|
|
|
83
84
|
].join(' ')
|
|
84
85
|
|
|
85
86
|
const noOuterBorders = specified('no-outer-borders')
|
|
87
|
+
const contentLeft = specified('variant-content-left')
|
|
88
|
+
const mobileContentLeft = specified('variant-mobile-content-left')
|
|
86
89
|
|
|
87
90
|
return (
|
|
88
|
-
<Card className={cn('flex flex-col
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
91
|
+
<Card className={cn('flex flex-col', className, noOuterBorders ? 'border-none' : '')} >
|
|
92
|
+
{contentLeft || (mobileContentLeft && agent === 'phone') ? (
|
|
93
|
+
<VariantContentLeft block={b} agent={agent} className={className} contentclx={contentclx} headingclx={headingclx}/>
|
|
94
|
+
) : (<>
|
|
95
|
+
{(b.heading || b.topContent) && (
|
|
96
|
+
<CardHeader className={cn('typography-img:m-0', headingclx)} >
|
|
97
|
+
{b.topContent && (
|
|
98
|
+
<Content blocks={b.topContent} agent={agent} className=''/>
|
|
99
|
+
)}
|
|
100
|
+
{b.heading && (
|
|
101
|
+
<EnhHeadingBlockComponent block={b.heading} className='text-accent' agent={agent}/>
|
|
102
|
+
)}
|
|
103
|
+
</CardHeader>
|
|
104
|
+
)}
|
|
105
|
+
{b.content && (
|
|
106
|
+
<CardContent className={cn('typography flex flex-col justify-center', contentclx, className)}>
|
|
107
|
+
<Content blocks={b.content} agent={agent}/>
|
|
108
|
+
</CardContent>
|
|
109
|
+
)}
|
|
110
|
+
{b.cta && (
|
|
111
|
+
<CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' /*+ paddingclx*/} >
|
|
112
|
+
<CTABlockComponent block={b.cta} agent={agent}/>
|
|
113
|
+
</CardFooter>
|
|
114
|
+
)}
|
|
115
|
+
</>)}
|
|
107
116
|
</Card>
|
|
108
117
|
)
|
|
109
118
|
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { EnhHeadingBlockComponent, type Block, type BlockComponentProps, type CarteBlancheBlock, CTABlockComponent } from '../..'
|
|
2
|
+
import {
|
|
3
|
+
CardContent,
|
|
4
|
+
CardFooter,
|
|
5
|
+
CardHeader,
|
|
6
|
+
} from '../../../primitives'
|
|
7
|
+
import { cn } from '../../../util'
|
|
8
|
+
import Content from '../content'
|
|
9
|
+
|
|
10
|
+
const VariantContentLeft: React.FC<{
|
|
11
|
+
block: CarteBlancheBlock,
|
|
12
|
+
agent?: string
|
|
13
|
+
className?: string
|
|
14
|
+
headingclx?: string
|
|
15
|
+
contentclx?: string
|
|
16
|
+
}> = ({
|
|
17
|
+
block,
|
|
18
|
+
agent,
|
|
19
|
+
className,
|
|
20
|
+
headingclx,
|
|
21
|
+
contentclx,
|
|
22
|
+
}) => {
|
|
23
|
+
return (
|
|
24
|
+
<div className='flex gap-2'>
|
|
25
|
+
{block.topContent && <Content blocks={block.topContent} agent={agent} className='self-start ml-6 mt-6'/>}
|
|
26
|
+
<div className='flex flex-col'>
|
|
27
|
+
{block.heading && (
|
|
28
|
+
<CardHeader className={cn('typography-img:m-0', headingclx)} >
|
|
29
|
+
<EnhHeadingBlockComponent block={block.heading} className='text-accent' agent={agent}/>
|
|
30
|
+
</CardHeader>
|
|
31
|
+
)}
|
|
32
|
+
{block.content && (
|
|
33
|
+
<CardContent className={cn('typography flex flex-col justify-start', contentclx, className)}>
|
|
34
|
+
<Content blocks={block.content} agent={agent}/>
|
|
35
|
+
</CardContent>
|
|
36
|
+
)}
|
|
37
|
+
{block.cta && (
|
|
38
|
+
<CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' /*+ paddingclx*/} >
|
|
39
|
+
<CTABlockComponent block={block.cta} agent={agent}/>
|
|
40
|
+
</CardFooter>
|
|
41
|
+
)}
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default VariantContentLeft
|
|
@@ -73,15 +73,28 @@ const getPositionClx = (
|
|
|
73
73
|
} => {
|
|
74
74
|
|
|
75
75
|
const mobileHeadingCentered = specified('mobile-heading-centered')
|
|
76
|
+
const mobileHeadingLeft = specified('mobile-heading-left')
|
|
76
77
|
const headingCentered = specified('center')
|
|
77
78
|
const headingRight = specified('right')
|
|
78
79
|
const bylineCentered = specified('byline-center')
|
|
79
80
|
const bylineRight = specified('byline-right')
|
|
81
|
+
const mobileBylineLeft = specified('mobile-byline-left')
|
|
80
82
|
|
|
81
83
|
let headerclx = ''
|
|
84
|
+
let bylineclx = (bylineCentered) ?
|
|
85
|
+
'self-center !text-center' : (bylineRight ? 'self-end !text-right' : 'self-start !text-left')
|
|
86
|
+
|
|
82
87
|
if (agent === 'phone') {
|
|
83
|
-
|
|
84
|
-
|
|
88
|
+
if (mobileHeadingLeft) {
|
|
89
|
+
headerclx = 'self-start text-left'
|
|
90
|
+
} else {
|
|
91
|
+
headerclx = (mobileHeadingCentered || headingCentered) ?
|
|
92
|
+
'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left')
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (mobileBylineLeft) {
|
|
96
|
+
bylineclx = 'self-start !text-left'
|
|
97
|
+
}
|
|
85
98
|
}
|
|
86
99
|
else {
|
|
87
100
|
const largerclx = (headingCentered) ?
|
|
@@ -95,9 +108,6 @@ const getPositionClx = (
|
|
|
95
108
|
}
|
|
96
109
|
}
|
|
97
110
|
|
|
98
|
-
const bylineclx = (bylineCentered) ?
|
|
99
|
-
'self-center' : (bylineRight ? 'self-end' : 'self-start')
|
|
100
|
-
|
|
101
111
|
return {
|
|
102
112
|
preheading: headerclx,
|
|
103
113
|
heading: headerclx,
|
|
@@ -58,7 +58,12 @@ const ContentColumn: React.FC<{
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
else {
|
|
61
|
-
|
|
61
|
+
if (specified('mobile-vert-center')) {
|
|
62
|
+
modifiers += 'justify-center '
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
modifiers += 'justify-start '
|
|
66
|
+
}
|
|
62
67
|
}
|
|
63
68
|
|
|
64
69
|
if (agent === 'phone' && specified('mobile-center-headings')) {
|
|
@@ -42,7 +42,7 @@ const ScreenfulComponent: React.FC<{
|
|
|
42
42
|
// p&m-modifiers
|
|
43
43
|
// ]
|
|
44
44
|
const cwclx = [
|
|
45
|
-
'z-10
|
|
45
|
+
'z-10 xl:mx-auto max-w-screen-xl overflow-y-hidden ',
|
|
46
46
|
// desktop header: 80px / pt-20
|
|
47
47
|
// mobile header: 44px / pt-11
|
|
48
48
|
narrowGutters ?
|
|
@@ -56,8 +56,8 @@ const ScreenfulComponent: React.FC<{
|
|
|
56
56
|
const spreadId = (b.anchorId) ? {id: b.anchorId} : {}
|
|
57
57
|
|
|
58
58
|
return (
|
|
59
|
-
<section {...spreadId} className={cn(
|
|
60
|
-
<ApplyTypography className={
|
|
59
|
+
<section {...spreadId} className={cn((snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen'), className)}>
|
|
60
|
+
<ApplyTypography className={cn('w-full flex flex-row justify-center self-stretch', snapTile ? tileHeight : '')} >
|
|
61
61
|
<Poster banner={b.banner}>
|
|
62
62
|
{hasBannerVideo() && (
|
|
63
63
|
<Video
|
|
@@ -66,7 +66,7 @@ const ScreenfulComponent: React.FC<{
|
|
|
66
66
|
initialInView={initialInView}
|
|
67
67
|
/>
|
|
68
68
|
)}
|
|
69
|
-
<div className={cn(...cwclx)} >
|
|
69
|
+
<div className={cn(...cwclx, snapTile ? 'absolute left-0 right-0 top-0 bottom-0' : 'flex min-h-screen w-full')} >
|
|
70
70
|
<Content block={b} agent={agent} className='w-full'/>
|
|
71
71
|
{b.footer}
|
|
72
72
|
</div>
|
package/package.json
CHANGED