@hanzo/ui 4.5.0 → 4.5.3
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/MCP-INSTRUCTIONS.md +73 -0
- package/README-MCP.md +175 -0
- package/bin/cli.js +100 -0
- package/bin/create-registry.js +108 -0
- package/bin/mcp.js +403 -0
- package/bin/npx-registry-mcp.js +15 -0
- package/bin/registry-mcp-wrapper.sh +19 -0
- package/bin/registry-mcp.js +100 -0
- package/bin/start-mcp-server.sh +22 -0
- package/bin/test-mcp.sh +52 -0
- package/bin/update-registry.js +196 -0
- package/blocks/components/screenful-block/index.tsx +2 -0
- package/dist/blocks/components/accordian-block.d.ts +4 -0
- package/dist/blocks/components/accordian-block.jsx +25 -0
- package/dist/blocks/components/block-component-props.d.ts +7 -0
- package/dist/blocks/components/block-component-props.js +1 -0
- package/dist/blocks/components/bullet-cards-block.d.ts +4 -0
- package/dist/blocks/components/bullet-cards-block.jsx +25 -0
- package/dist/blocks/components/card-block/index.d.ts +6 -0
- package/dist/blocks/components/card-block/index.jsx +87 -0
- package/dist/blocks/components/card-block/link-out-button.d.ts +6 -0
- package/dist/blocks/components/card-block/link-out-button.jsx +4 -0
- package/dist/blocks/components/card-block/util.d.ts +4 -0
- package/dist/blocks/components/card-block/util.js +6 -0
- package/dist/blocks/components/carte-blanche-block/index.d.ts +4 -0
- package/dist/blocks/components/carte-blanche-block/index.jsx +82 -0
- package/dist/blocks/components/carte-blanche-block/variant-content-left.d.ts +10 -0
- package/dist/blocks/components/carte-blanche-block/variant-content-left.jsx +23 -0
- package/dist/blocks/components/content.d.ts +10 -0
- package/dist/blocks/components/content.jsx +47 -0
- package/dist/blocks/components/cta-block.d.ts +12 -0
- package/dist/blocks/components/cta-block.jsx +69 -0
- package/dist/blocks/components/enh-heading-block.d.ts +7 -0
- package/dist/blocks/components/enh-heading-block.jsx +142 -0
- package/dist/blocks/components/grid-block/grid-block-mutator.d.ts +5 -0
- package/dist/blocks/components/grid-block/grid-block-mutator.js +1 -0
- package/dist/blocks/components/grid-block/index.d.ts +9 -0
- package/dist/blocks/components/grid-block/index.jsx +56 -0
- package/dist/blocks/components/grid-block/mutator-registry.d.ts +3 -0
- package/dist/blocks/components/grid-block/mutator-registry.js +5 -0
- package/dist/blocks/components/grid-block/table-borders.mutator.d.ts +3 -0
- package/dist/blocks/components/grid-block/table-borders.mutator.js +36 -0
- package/dist/blocks/components/group-block.d.ts +7 -0
- package/dist/blocks/components/group-block.jsx +61 -0
- package/dist/blocks/components/heading-block.d.ts +4 -0
- package/dist/blocks/components/heading-block.jsx +99 -0
- package/dist/blocks/components/image-block.d.ts +7 -0
- package/dist/blocks/components/image-block.jsx +69 -0
- package/dist/blocks/components/index.d.ts +14 -0
- package/dist/blocks/components/index.js +13 -0
- package/dist/blocks/components/screenful-block/content.d.ts +8 -0
- package/dist/blocks/components/screenful-block/content.jsx +71 -0
- package/dist/blocks/components/screenful-block/index.d.ts +12 -0
- package/dist/blocks/components/screenful-block/index.jsx +57 -0
- package/dist/blocks/components/screenful-block/poster-background.d.ts +7 -0
- package/dist/blocks/components/screenful-block/poster-background.jsx +14 -0
- package/dist/blocks/components/screenful-block/video-background.d.ts +8 -0
- package/dist/blocks/components/screenful-block/video-background.jsx +20 -0
- package/dist/blocks/components/space-block.d.ts +4 -0
- package/dist/blocks/components/space-block.jsx +42 -0
- package/dist/blocks/components/video-block.d.ts +9 -0
- package/dist/blocks/components/video-block.jsx +83 -0
- package/dist/blocks/def/accordian-block.d.ts +10 -0
- package/dist/blocks/def/accordian-block.js +2 -0
- package/dist/blocks/def/block.d.ts +4 -0
- package/dist/blocks/def/block.js +1 -0
- package/dist/blocks/def/bullet-cards-block.d.ts +17 -0
- package/dist/blocks/def/bullet-cards-block.js +1 -0
- package/dist/blocks/def/card-block.d.ts +17 -0
- package/dist/blocks/def/card-block.js +2 -0
- package/dist/blocks/def/carte-blanche-block.d.ts +12 -0
- package/dist/blocks/def/carte-blanche-block.js +1 -0
- package/dist/blocks/def/cta-block.d.ts +8 -0
- package/dist/blocks/def/cta-block.js +1 -0
- package/dist/blocks/def/element-block.d.ts +7 -0
- package/dist/blocks/def/element-block.js +2 -0
- package/dist/blocks/def/enh-heading-block.d.ts +22 -0
- package/dist/blocks/def/enh-heading-block.js +1 -0
- package/dist/blocks/def/grid-block.d.ts +12 -0
- package/dist/blocks/def/grid-block.js +1 -0
- package/dist/blocks/def/group-block.d.ts +7 -0
- package/dist/blocks/def/group-block.js +1 -0
- package/dist/blocks/def/heading-block.d.ts +11 -0
- package/dist/blocks/def/heading-block.js +1 -0
- package/dist/blocks/def/image-block.d.ts +26 -0
- package/dist/blocks/def/image-block.js +1 -0
- package/dist/blocks/def/index.d.ts +17 -0
- package/dist/blocks/def/index.js +2 -0
- package/dist/blocks/def/screenful-block.d.ts +41 -0
- package/dist/blocks/def/screenful-block.js +1 -0
- package/dist/blocks/def/space-block.d.ts +47 -0
- package/dist/blocks/def/space-block.js +8 -0
- package/dist/blocks/def/video-block.d.ts +5 -0
- package/dist/blocks/def/video-block.js +1 -0
- package/dist/blocks/index.d.ts +2 -0
- package/dist/blocks/index.js +2 -0
- package/dist/mcp/enhanced-server.d.ts +29 -0
- package/dist/mcp/enhanced-server.js +1128 -0
- package/dist/mcp/index.d.ts +28 -0
- package/dist/mcp/index.js +436 -0
- package/dist/primitives/accordion.d.ts +10 -0
- package/dist/primitives/accordion.jsx +21 -0
- package/dist/primitives/action-button.d.ts +9 -0
- package/dist/primitives/action-button.jsx +16 -0
- package/dist/primitives/apply-typography.d.ts +7 -0
- package/dist/primitives/apply-typography.jsx +38 -0
- package/dist/primitives/aspect-ratio.d.ts +3 -0
- package/dist/primitives/aspect-ratio.jsx +4 -0
- package/dist/primitives/avatar.d.ts +6 -0
- package/dist/primitives/avatar.jsx +11 -0
- package/dist/primitives/badge.d.ts +9 -0
- package/dist/primitives/badge.jsx +18 -0
- package/dist/primitives/breadcrumb.d.ts +19 -0
- package/dist/primitives/breadcrumb.jsx +27 -0
- package/dist/primitives/breakpoint-indicator.d.ts +3 -0
- package/dist/primitives/breakpoint-indicator.jsx +14 -0
- package/dist/primitives/button.d.ts +12 -0
- package/dist/primitives/button.jsx +55 -0
- package/dist/primitives/calendar.d.ts +8 -0
- package/dist/primitives/calendar.jsx +40 -0
- package/dist/primitives/card.d.ts +8 -0
- package/dist/primitives/card.jsx +18 -0
- package/dist/primitives/carousel.d.ts +18 -0
- package/dist/primitives/carousel.jsx +106 -0
- package/dist/primitives/checkbox.d.ts +4 -0
- package/dist/primitives/checkbox.jsx +15 -0
- package/dist/primitives/combobox.d.ts +41 -0
- package/dist/primitives/combobox.jsx +77 -0
- package/dist/primitives/command.d.ts +17 -0
- package/dist/primitives/command.jsx +38 -0
- package/dist/primitives/context-menu.d.ts +27 -0
- package/dist/primitives/context-menu.jsx +57 -0
- package/dist/primitives/dialog-video-controller.d.ts +3 -0
- package/dist/primitives/dialog-video-controller.jsx +24 -0
- package/dist/primitives/dialog.d.ts +28 -0
- package/dist/primitives/dialog.jsx +37 -0
- package/dist/primitives/drawer.d.ts +29 -0
- package/dist/primitives/drawer.jsx +34 -0
- package/dist/primitives/form.d.ts +12 -0
- package/dist/primitives/form.jsx +69 -0
- package/dist/primitives/icons/github.d.ts +4 -0
- package/dist/primitives/icons/github.jsx +6 -0
- package/dist/primitives/icons/index.d.ts +4 -0
- package/dist/primitives/icons/index.js +4 -0
- package/dist/primitives/icons/youtube-logo.d.ts +4 -0
- package/dist/primitives/icons/youtube-logo.jsx +39 -0
- package/dist/primitives/index-common.d.ts +47 -0
- package/dist/primitives/index-common.js +46 -0
- package/dist/primitives/index-next.d.ts +2 -0
- package/dist/primitives/index-next.js +2 -0
- package/dist/primitives/input-otp.d.ts +7 -0
- package/dist/primitives/input-otp.jsx +24 -0
- package/dist/primitives/input.d.ts +5 -0
- package/dist/primitives/input.jsx +11 -0
- package/dist/primitives/label.d.ts +5 -0
- package/dist/primitives/label.jsx +11 -0
- package/dist/primitives/list-adaptor.d.ts +9 -0
- package/dist/primitives/list-adaptor.js +1 -0
- package/dist/primitives/list-box.d.ts +10 -0
- package/dist/primitives/list-box.jsx +14 -0
- package/dist/primitives/loading-spinner.d.ts +5 -0
- package/dist/primitives/loading-spinner.jsx +8 -0
- package/dist/primitives/navigation-menu.d.ts +12 -0
- package/dist/primitives/navigation-menu.jsx +38 -0
- package/dist/primitives/next/image.d.ts +11 -0
- package/dist/primitives/next/image.jsx +42 -0
- package/dist/primitives/next/index.d.ts +7 -0
- package/dist/primitives/next/index.js +7 -0
- package/dist/primitives/next/inline-icon.d.ts +13 -0
- package/dist/primitives/next/inline-icon.jsx +15 -0
- package/dist/primitives/next/link-element.d.ts +23 -0
- package/dist/primitives/next/link-element.jsx +56 -0
- package/dist/primitives/next/mdx-link.d.ts +3 -0
- package/dist/primitives/next/mdx-link.jsx +12 -0
- package/dist/primitives/next/media-stack.d.ts +8 -0
- package/dist/primitives/next/media-stack.jsx +28 -0
- package/dist/primitives/next/nav-items.d.ts +10 -0
- package/dist/primitives/next/nav-items.jsx +24 -0
- package/dist/primitives/next/youtube-embed.d.ts +11 -0
- package/dist/primitives/next/youtube-embed.jsx +23 -0
- package/dist/primitives/popover.d.ts +9 -0
- package/dist/primitives/popover.jsx +18 -0
- package/dist/primitives/progress.d.ts +4 -0
- package/dist/primitives/progress.jsx +9 -0
- package/dist/primitives/radio-group.d.ts +7 -0
- package/dist/primitives/radio-group.jsx +18 -0
- package/dist/primitives/scroll-area.d.ts +5 -0
- package/dist/primitives/scroll-area.jsx +19 -0
- package/dist/primitives/select.d.ts +13 -0
- package/dist/primitives/select.jsx +62 -0
- package/dist/primitives/separator.d.ts +4 -0
- package/dist/primitives/separator.jsx +7 -0
- package/dist/primitives/sheet.d.ts +30 -0
- package/dist/primitives/sheet.jsx +56 -0
- package/dist/primitives/skeleton.d.ts +4 -0
- package/dist/primitives/skeleton.jsx +3 -0
- package/dist/primitives/slider.d.ts +9 -0
- package/dist/primitives/slider.jsx +30 -0
- package/dist/primitives/sonner.d.ts +5 -0
- package/dist/primitives/sonner.jsx +16 -0
- package/dist/primitives/step-indicator.d.ts +9 -0
- package/dist/primitives/step-indicator.jsx +23 -0
- package/dist/primitives/switch.d.ts +6 -0
- package/dist/primitives/switch.jsx +14 -0
- package/dist/primitives/table.d.ts +10 -0
- package/dist/primitives/table.jsx +21 -0
- package/dist/primitives/tabs.d.ts +7 -0
- package/dist/primitives/tabs.jsx +18 -0
- package/dist/primitives/text-area.d.ts +5 -0
- package/dist/primitives/text-area.jsx +9 -0
- package/dist/primitives/toggle-group.d.ts +14 -0
- package/dist/primitives/toggle-group.jsx +28 -0
- package/dist/primitives/toggle.d.ts +14 -0
- package/dist/primitives/toggle.jsx +52 -0
- package/dist/primitives/tooltip.d.ts +11 -0
- package/dist/primitives/tooltip.jsx +18 -0
- package/dist/primitives/video-player.d.ts +6 -0
- package/dist/primitives/video-player.jsx +8 -0
- package/dist/registry/api.d.ts +37 -0
- package/dist/registry/api.js +130 -0
- package/dist/registry/index.d.ts +9 -0
- package/dist/registry/index.js +45 -0
- package/dist/style/theme-provider.d.ts +4 -0
- package/dist/style/theme-provider.jsx +11 -0
- package/dist/tailwind/fontFamily.tailwind.d.ts +8 -0
- package/dist/tailwind/fontFamily.tailwind.js +7 -0
- package/dist/tailwind/fontSize.tailwind.d.ts +36 -0
- package/dist/tailwind/fontSize.tailwind.js +13 -0
- package/dist/tailwind/index.d.ts +3 -0
- package/dist/tailwind/index.js +2 -0
- package/dist/tailwind/screens.tailwind.d.ts +9 -0
- package/dist/tailwind/screens.tailwind.js +8 -0
- package/dist/tailwind/tw-font-desc.d.ts +6 -0
- package/dist/tailwind/tw-font-desc.js +6 -0
- package/dist/types/animation-def.d.ts +2 -0
- package/dist/types/animation-def.js +1 -0
- package/dist/types/breakpoints.d.ts +4 -0
- package/dist/types/breakpoints.js +4 -0
- package/dist/types/bullet-item.d.ts +6 -0
- package/dist/types/bullet-item.js +2 -0
- package/dist/types/button-def.d.ts +29 -0
- package/dist/types/button-def.js +2 -0
- package/dist/types/dimensions.d.ts +5 -0
- package/dist/types/dimensions.js +1 -0
- package/dist/types/grid-def.d.ts +36 -0
- package/dist/types/grid-def.js +33 -0
- package/dist/types/image-def.d.ts +27 -0
- package/dist/types/image-def.js +1 -0
- package/dist/types/index.d.ts +13 -0
- package/dist/types/index.js +2 -0
- package/dist/types/link-def.d.ts +44 -0
- package/dist/types/link-def.js +1 -0
- package/dist/types/media-stack-def.d.ts +25 -0
- package/dist/types/media-stack-def.js +1 -0
- package/dist/types/t-shirt-size.d.ts +2 -0
- package/dist/types/t-shirt-size.js +1 -0
- package/dist/types/tshirt-dimensions.d.ts +12 -0
- package/dist/types/tshirt-dimensions.js +1 -0
- package/dist/types/video-def.d.ts +9 -0
- package/dist/types/video-def.js +1 -0
- package/dist/util/format-and-abbreviate-as-currency.d.ts +11 -0
- package/dist/util/format-and-abbreviate-as-currency.js +91 -0
- package/dist/util/format-to-max-char.d.ts +5 -0
- package/dist/util/format-to-max-char.js +57 -0
- package/dist/util/index-client.d.ts +2 -0
- package/dist/util/index-client.js +3 -0
- package/dist/util/index.d.ts +17 -0
- package/dist/util/index.js +41 -0
- package/dist/util/number-abbreviate.d.ts +9 -0
- package/dist/util/number-abbreviate.js +30 -0
- package/dist/util/specifier.d.ts +7 -0
- package/dist/util/specifier.js +31 -0
- package/dist/util/spread-to-transform.d.ts +7 -0
- package/dist/util/spread-to-transform.js +18 -0
- package/dist/util/step-animation.d.ts +5 -0
- package/dist/util/step-animation.js +60 -0
- package/dist/util/two-way-map.d.ts +8 -0
- package/dist/util/two-way-map.js +16 -0
- package/mcp/README.md +141 -0
- package/mcp/enhanced-server.ts +1208 -0
- package/mcp/index.ts +518 -0
- package/mcp/package.json +10 -0
- package/package.json +36 -16
- package/primitives/accordion.tsx +5 -5
- package/primitives/button.tsx +6 -3
- package/primitives/dialog.tsx +12 -7
- package/primitives/tabs.tsx +1 -1
- package/primitives/tooltip.tsx +1 -1
- package/public/r/accordion.json +11 -0
- package/public/r/alert.json +11 -0
- package/public/r/avatar.json +11 -0
- package/public/r/badge.json +11 -0
- package/public/r/button.json +11 -0
- package/public/r/card.json +11 -0
- package/public/r/checkbox.json +11 -0
- package/public/r/default.json +6 -0
- package/public/r/dialog.json +11 -0
- package/public/r/input.json +11 -0
- package/public/r/label.json +11 -0
- package/public/r/new-york.json +6 -0
- package/public/r/popover.json +11 -0
- package/public/r/select.json +11 -0
- package/public/r/table.json +11 -0
- package/public/r/tabs.json +11 -0
- package/public/r/toast.json +11 -0
- package/registry/api.ts +164 -0
- package/registry/index.ts +60 -0
- package/registry/package.json +10 -0
- package/registry.json +184 -0
- package/test/test-registry.js +73 -0
- package/tsconfig.json +8 -1
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { buttonVariants, ActionButton, LinkElement } from '../../primitives/index-next';
|
|
3
|
+
import { cn, containsToken } from '../../util';
|
|
4
|
+
const CtaBlockComponent = ({ block, className = '', // assigned to each item
|
|
5
|
+
itemClasses = '', itemSize, // do not provide default. this is an override to the def
|
|
6
|
+
renderLink, renderButton, agent }) => {
|
|
7
|
+
if (block.blockType !== 'cta') {
|
|
8
|
+
return <>cta block required</>;
|
|
9
|
+
}
|
|
10
|
+
const { elements, specifiers } = block;
|
|
11
|
+
let wrapperClasses = '';
|
|
12
|
+
let itemclx = '';
|
|
13
|
+
if (containsToken(specifiers, 'fill')) {
|
|
14
|
+
wrapperClasses += 'w-full ';
|
|
15
|
+
itemclx += 'grow shrink !min-w-0';
|
|
16
|
+
}
|
|
17
|
+
else if (containsToken(specifiers, 'left')) {
|
|
18
|
+
wrapperClasses += 'md:justify-start ';
|
|
19
|
+
}
|
|
20
|
+
else if (containsToken(specifiers, 'right')) {
|
|
21
|
+
wrapperClasses += 'md:justify-end ';
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
wrapperClasses += 'md:justify-center ';
|
|
25
|
+
}
|
|
26
|
+
const mobile2Columns = containsToken(specifiers, 'mobile-2-columns');
|
|
27
|
+
// normally 'default' buttons have a min width only at > lg.
|
|
28
|
+
// generally if more than one we don't want this and override it,
|
|
29
|
+
// but this specifier asks to observe the default behavior.
|
|
30
|
+
const fillEvenly = !containsToken(specifiers, 'desktop-dont-fill');
|
|
31
|
+
const mobileCenterFirstIfOdd = containsToken(specifiers, 'mobile-center-first-if-odd');
|
|
32
|
+
const mobileOddFullWidth = containsToken(specifiers, 'mobile-odd-full-width');
|
|
33
|
+
let layoutclx = undefined;
|
|
34
|
+
if (elements.length > 1) {
|
|
35
|
+
let resetMinWidth = false;
|
|
36
|
+
if (mobile2Columns) {
|
|
37
|
+
layoutclx = 'grid grid-cols-2 gap-2 self-stretch ';
|
|
38
|
+
resetMinWidth = true;
|
|
39
|
+
}
|
|
40
|
+
if (fillEvenly) {
|
|
41
|
+
layoutclx = (layoutclx ?? 'grid grid-cols-2 gap-2 self-stretch');
|
|
42
|
+
resetMinWidth = true;
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
layoutclx = layoutclx ? (layoutclx + 'md:flex md:flex-row md:justify-center ') : 'flex flex-row justify-center ';
|
|
46
|
+
}
|
|
47
|
+
itemclx += resetMinWidth ? '!min-w-0 ' : '';
|
|
48
|
+
}
|
|
49
|
+
layoutclx = layoutclx ?? 'flex flex-col items-stretch gap-2 self-stretch md:flex-row sm:justify-center ';
|
|
50
|
+
const getMobileColSpanClx = (index, total) => {
|
|
51
|
+
const indexToCenter = (total % 2 === 0) ? -1 : (mobileCenterFirstIfOdd) ? 0 : total - 1;
|
|
52
|
+
const widthclx = mobileOddFullWidth ? 'w-full ' : 'w-3/5 mx-auto ';
|
|
53
|
+
return ((agent === 'phone' && mobile2Columns && (index === indexToCenter)) ? ('col-span-2 ' + widthclx) : '');
|
|
54
|
+
};
|
|
55
|
+
return (<div className={cn(layoutclx, wrapperClasses, className)}>
|
|
56
|
+
{elements.map((element, index) => {
|
|
57
|
+
const twoColClx = getMobileColSpanClx(index, elements.length);
|
|
58
|
+
if (element.title) {
|
|
59
|
+
const def = element;
|
|
60
|
+
return renderLink ? renderLink(def, index) : (<LinkElement def={def} key={index} size={itemSize} className={cn(itemclx, itemClasses, twoColClx)}/>);
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
const def = element;
|
|
64
|
+
return renderButton ? renderButton(def, index) : (<ActionButton def={def} key={index} size={itemSize} className={cn(itemclx, itemClasses, twoColClx)}/>);
|
|
65
|
+
}
|
|
66
|
+
})}
|
|
67
|
+
</div>);
|
|
68
|
+
};
|
|
69
|
+
export default CtaBlockComponent;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type BlockComponentProps from './block-component-props';
|
|
3
|
+
declare const EnhHeadingBlockComponent: React.FC<BlockComponentProps & {
|
|
4
|
+
applyTypography?: boolean;
|
|
5
|
+
extraSpecifiers?: string;
|
|
6
|
+
}>;
|
|
7
|
+
export default EnhHeadingBlockComponent;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import React, {} from 'react';
|
|
2
|
+
import { ApplyTypography } from '../../primitives/index-common';
|
|
3
|
+
import { cn, containsToken } from '../../util';
|
|
4
|
+
import InlineIcon from '../../primitives/next/inline-icon';
|
|
5
|
+
const DEFAULTS = {
|
|
6
|
+
preheading: {
|
|
7
|
+
tag: 'h4',
|
|
8
|
+
mb: 2
|
|
9
|
+
},
|
|
10
|
+
heading: {
|
|
11
|
+
tag: 'h1',
|
|
12
|
+
mb: 2
|
|
13
|
+
},
|
|
14
|
+
byline: {
|
|
15
|
+
tag: 'h6',
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const tagFromLevel = (level) => {
|
|
19
|
+
switch (level) {
|
|
20
|
+
case 1: {
|
|
21
|
+
return 'h1';
|
|
22
|
+
}
|
|
23
|
+
case 2: {
|
|
24
|
+
return 'h2';
|
|
25
|
+
}
|
|
26
|
+
case 3: {
|
|
27
|
+
return 'h3';
|
|
28
|
+
}
|
|
29
|
+
case 4: {
|
|
30
|
+
return 'h4';
|
|
31
|
+
}
|
|
32
|
+
case 5: {
|
|
33
|
+
return 'h5';
|
|
34
|
+
}
|
|
35
|
+
case 6: {
|
|
36
|
+
return 'h6';
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return 'p';
|
|
40
|
+
};
|
|
41
|
+
// TODO Impl icon support
|
|
42
|
+
const Element = ({ asTag: Tag, text, icon, iconLeft = true, className: elClassName = '' }) => (<Tag className={elClassName}>{text}</Tag>);
|
|
43
|
+
const getPositionClx = (specified, agent) => {
|
|
44
|
+
const mobileHeadingCentered = specified('mobile-heading-centered');
|
|
45
|
+
const mobileHeadingLeft = specified('mobile-heading-left');
|
|
46
|
+
const headingCentered = specified('center');
|
|
47
|
+
const headingRight = specified('right');
|
|
48
|
+
const bylineCentered = specified('byline-center');
|
|
49
|
+
const bylineRight = specified('byline-right');
|
|
50
|
+
const mobileBylineLeft = specified('mobile-byline-left');
|
|
51
|
+
let headerclx = '';
|
|
52
|
+
let bylineclx = (bylineCentered) ?
|
|
53
|
+
'self-center !text-center' : (bylineRight ? 'self-end !text-right' : 'self-start !text-left');
|
|
54
|
+
if (agent === 'phone') {
|
|
55
|
+
if (mobileHeadingLeft) {
|
|
56
|
+
headerclx = 'self-start text-left';
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
headerclx = (mobileHeadingCentered || headingCentered) ?
|
|
60
|
+
'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left');
|
|
61
|
+
}
|
|
62
|
+
if (mobileBylineLeft) {
|
|
63
|
+
bylineclx = 'self-start !text-left';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
const largerclx = (headingCentered) ?
|
|
68
|
+
'self-center text-center' : (headingRight ? 'self-end text-right' : 'self-start text-left');
|
|
69
|
+
if (mobileHeadingCentered) {
|
|
70
|
+
headerclx = 'self-center text-center md:' + largerclx.split(' ').join(' md:');
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
headerclx = largerclx;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return {
|
|
77
|
+
preheading: headerclx,
|
|
78
|
+
heading: headerclx,
|
|
79
|
+
byline: bylineclx
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
const EnhHeadingBlockComponent = ({ block, className = '', agent, applyTypography = true, extraSpecifiers = '' }) => {
|
|
83
|
+
if (block.blockType !== 'enh-heading') {
|
|
84
|
+
return <>enhance heading block required</>;
|
|
85
|
+
}
|
|
86
|
+
const b = block;
|
|
87
|
+
const specified = (s) => (containsToken(b.specifiers + extraSpecifiers, s));
|
|
88
|
+
const preheadingHeadingFont = specified('preheading-heading-font');
|
|
89
|
+
const phFontClx = preheadingHeadingFont ? 'font-heading' : '';
|
|
90
|
+
const alignMiddleClx = specified('align-middle') ? 'my-auto' : '';
|
|
91
|
+
const positionclx = getPositionClx(specified, agent);
|
|
92
|
+
const Inner = () => {
|
|
93
|
+
const toRender = [
|
|
94
|
+
{
|
|
95
|
+
tag: (b.preheading) ?
|
|
96
|
+
(b.preheading.level !== undefined ? tagFromLevel(b.preheading.level) : DEFAULTS.preheading.tag)
|
|
97
|
+
:
|
|
98
|
+
undefined,
|
|
99
|
+
clx: (b.preheading) ?
|
|
100
|
+
(b.preheading.mb !== undefined ?
|
|
101
|
+
`mb-${b.preheading.mb}` : `mb-${DEFAULTS.preheading.mb}`) + ' ' + positionclx.preheading + ' ' + phFontClx
|
|
102
|
+
:
|
|
103
|
+
positionclx.preheading + ' ' + phFontClx,
|
|
104
|
+
text: (b.preheading) ? (b.preheading.text) : undefined,
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
tag: (b.heading.level !== undefined ? tagFromLevel(b.heading.level) : DEFAULTS.heading.tag),
|
|
108
|
+
clx: (b.heading.mb !== undefined ? `mb-${b.heading.mb}` : `mb-${DEFAULTS.heading.mb}`) + ' ' + positionclx.heading,
|
|
109
|
+
text: b.heading.text,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
tag: (b.byline) ?
|
|
113
|
+
(b.byline.level !== undefined ? tagFromLevel(b.byline.level) : DEFAULTS.byline.tag)
|
|
114
|
+
:
|
|
115
|
+
undefined,
|
|
116
|
+
clx: positionclx.byline,
|
|
117
|
+
text: (b.byline) ? (b.byline.text) : undefined,
|
|
118
|
+
},
|
|
119
|
+
];
|
|
120
|
+
let iconRendered = false;
|
|
121
|
+
return <>
|
|
122
|
+
{toRender.map(({ tag, clx, text }, index) => {
|
|
123
|
+
if (!tag)
|
|
124
|
+
return null;
|
|
125
|
+
if (b.icon && !iconRendered) {
|
|
126
|
+
iconRendered = true;
|
|
127
|
+
return (<div className={cn('flex flex-row items-center gap-2 sm:gap-4', clx)} key={`div-${index}`}>
|
|
128
|
+
<InlineIcon icon={b.icon} size={b.iconSize ?? 32} agent={agent}/>
|
|
129
|
+
<Element asTag={tag} text={text}/>
|
|
130
|
+
</div>);
|
|
131
|
+
}
|
|
132
|
+
return ((<Element asTag={tag} text={text} className={clx} key={`el-${index}`}/>));
|
|
133
|
+
})}
|
|
134
|
+
</>;
|
|
135
|
+
};
|
|
136
|
+
return applyTypography ? (<ApplyTypography className={cn('flex flex-col w-full !gap-0', className, alignMiddleClx)}>
|
|
137
|
+
<Inner />
|
|
138
|
+
</ApplyTypography>) : (<div className={cn('flex flex-col w-full gap-0', className, alignMiddleClx)}>
|
|
139
|
+
<Inner />
|
|
140
|
+
</div>);
|
|
141
|
+
};
|
|
142
|
+
export default EnhHeadingBlockComponent;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { type PropsWithChildren } from 'react';
|
|
2
|
+
import type BlockComponentProps from '../block-component-props';
|
|
3
|
+
/**
|
|
4
|
+
* A component that lays out the Blocks in 'cells' on a grid.
|
|
5
|
+
* If invoked directly, and children are supplied,
|
|
6
|
+
* block.cells is ignore and the children are rendered.
|
|
7
|
+
*/
|
|
8
|
+
declare const GridBlockComponent: React.FC<BlockComponentProps & PropsWithChildren>;
|
|
9
|
+
export default GridBlockComponent;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, {} from 'react';
|
|
2
|
+
import { cn, containsToken } from '../../../util';
|
|
3
|
+
import Content from '../content';
|
|
4
|
+
import getMutator from './mutator-registry';
|
|
5
|
+
// These must be / are safelisted in tailwind.config
|
|
6
|
+
const gridClx = (d, prefix) => ((typeof d === 'number') ?
|
|
7
|
+
`${(prefix ?? '')}grid-cols-${d} `
|
|
8
|
+
:
|
|
9
|
+
`${(prefix ?? '')}grid-cols-${d.columns} ${(prefix ?? '')}gap-${d.gap} `);
|
|
10
|
+
/**
|
|
11
|
+
* A component that lays out the Blocks in 'cells' on a grid.
|
|
12
|
+
* If invoked directly, and children are supplied,
|
|
13
|
+
* block.cells is ignore and the children are rendered.
|
|
14
|
+
*/
|
|
15
|
+
const GridBlockComponent = ({ block, className = '', agent, children }) => {
|
|
16
|
+
if (block.blockType !== 'grid') {
|
|
17
|
+
return <>grid block required</>;
|
|
18
|
+
}
|
|
19
|
+
const { cells, grid, specifiers } = block;
|
|
20
|
+
const specified = (s) => (containsToken(specifiers, s));
|
|
21
|
+
const mutator = specified('style-table-borders') ? getMutator('style-table-borders') : undefined;
|
|
22
|
+
// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
|
|
23
|
+
// All variants in use MUST be in style/safelist.tailwind.js
|
|
24
|
+
let clx = 'grid ';
|
|
25
|
+
if (agent === 'phone') {
|
|
26
|
+
const d = (grid.mobile) ? grid.mobile : (grid.at.xs ? grid.at.xs : (grid.at.sm ?? 1));
|
|
27
|
+
clx += gridClx(d);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
let defaultSet = false;
|
|
31
|
+
for (const [key, value] of Object.entries(grid.at)) {
|
|
32
|
+
if (!defaultSet) {
|
|
33
|
+
// ts brain fart!
|
|
34
|
+
clx += gridClx(value);
|
|
35
|
+
defaultSet = true;
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
// ts brain fart!
|
|
39
|
+
clx += gridClx(value, `${key}:`);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
let getMutatorCellClx = (ignore) => ('');
|
|
44
|
+
if (mutator?.getCellClx) {
|
|
45
|
+
const colCount = (typeof grid.at.md === 'number') ? grid.at.md : grid.at.md.columns;
|
|
46
|
+
const cellCount = cells?.length;
|
|
47
|
+
if (!colCount || !cellCount) {
|
|
48
|
+
throw new Error('GridBlockComponent: using mutator, but colCount and / or cellCount is invalid!');
|
|
49
|
+
}
|
|
50
|
+
getMutatorCellClx = (cellIndex) => (mutator.getCellClx(cellIndex, cellCount, colCount));
|
|
51
|
+
}
|
|
52
|
+
return (<div className={cn('grid gap-2 md:gap-4 xl:gap-6', clx, (mutator?.gapClx ?? ''), className)}>
|
|
53
|
+
{React.Children.count(children) > 0 ? children : cells?.map((cell, index) => (<Content blocks={cell} agent={agent} key={`cell-${index}`} className={getMutatorCellClx(index)}/>))}
|
|
54
|
+
</div>);
|
|
55
|
+
};
|
|
56
|
+
export default GridBlockComponent;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
const getCellClx = (cellIndex, cellCount, colCount) => {
|
|
2
|
+
const isFirstRow = () => (cellIndex < colCount);
|
|
3
|
+
const isFirstColumn = () => (cellIndex % colCount === 0);
|
|
4
|
+
const isTLCorner = () => (cellIndex === 0);
|
|
5
|
+
const isTRCorner = () => (cellIndex === colCount - 1);
|
|
6
|
+
const isBLCorner = () => (cellIndex === cellCount - colCount);
|
|
7
|
+
const isBRCorner = () => (cellIndex === cellCount - 1);
|
|
8
|
+
// all get a right and bottom border and padding,
|
|
9
|
+
// other borders are a special base
|
|
10
|
+
let clx = 'border-b md:border-r p-4 md:p-8 lg:p-12 ';
|
|
11
|
+
if (isFirstRow()) {
|
|
12
|
+
clx += 'border-t ';
|
|
13
|
+
}
|
|
14
|
+
if (isFirstColumn()) {
|
|
15
|
+
clx += 'md:border-l ';
|
|
16
|
+
}
|
|
17
|
+
// on mobile this will be the first (top) cell
|
|
18
|
+
if (isTLCorner()) {
|
|
19
|
+
clx += 'border-t md:rounded-tl-lg ';
|
|
20
|
+
}
|
|
21
|
+
else if (isTRCorner()) {
|
|
22
|
+
clx += 'md:rounded-tr-lg ';
|
|
23
|
+
}
|
|
24
|
+
else if (isBLCorner()) {
|
|
25
|
+
clx += 'md:rounded-bl-lg ';
|
|
26
|
+
}
|
|
27
|
+
else if (isBRCorner()) {
|
|
28
|
+
clx += 'md:rounded-br-lg ';
|
|
29
|
+
}
|
|
30
|
+
return clx;
|
|
31
|
+
};
|
|
32
|
+
const gapClx = 'gap-0 md:gap-0 xl:gap-0';
|
|
33
|
+
export default {
|
|
34
|
+
getCellClx,
|
|
35
|
+
gapClx
|
|
36
|
+
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Breakpoints } from '../../types';
|
|
3
|
+
import { cn } from '../../util';
|
|
4
|
+
import Content from './content';
|
|
5
|
+
// eg: 'layout-grid-2-starting-md'
|
|
6
|
+
// see comments below regarding dynamic classes and the safelist
|
|
7
|
+
const getLayoutInfo = (s) => {
|
|
8
|
+
const tokenArray = s.split(' ');
|
|
9
|
+
const layoutToken = tokenArray.find((tok) => (tok.startsWith('layout-')));
|
|
10
|
+
if (layoutToken) {
|
|
11
|
+
const subtokens = layoutToken.split('-');
|
|
12
|
+
const layout = subtokens[1];
|
|
13
|
+
let spec = {};
|
|
14
|
+
switch (layout) {
|
|
15
|
+
case 'grid':
|
|
16
|
+
{
|
|
17
|
+
const columns = parseInt(subtokens[2], 10);
|
|
18
|
+
const starting = subtokens[4];
|
|
19
|
+
if (Number.isNaN(columns) || columns < 2 || columns > 6 || !Breakpoints.includes(starting)) {
|
|
20
|
+
return undefined;
|
|
21
|
+
}
|
|
22
|
+
spec = {
|
|
23
|
+
columns,
|
|
24
|
+
starting
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
break;
|
|
28
|
+
// no other types supported yet
|
|
29
|
+
}
|
|
30
|
+
return {
|
|
31
|
+
layout,
|
|
32
|
+
spec
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
return undefined;
|
|
36
|
+
};
|
|
37
|
+
const GroupBlockComponent = ({ block, className = '' }) => {
|
|
38
|
+
if (block.blockType !== 'group') {
|
|
39
|
+
return <>group block required</>;
|
|
40
|
+
}
|
|
41
|
+
const group = block;
|
|
42
|
+
// only one supported so fat
|
|
43
|
+
if (group.specifiers?.includes('layout')) {
|
|
44
|
+
const layoutSpec = getLayoutInfo(group.specifiers);
|
|
45
|
+
if (!layoutSpec) {
|
|
46
|
+
return <>invalid or missing layout specifier in group block!</>;
|
|
47
|
+
}
|
|
48
|
+
if (layoutSpec.layout === 'grid') {
|
|
49
|
+
const { elements } = group;
|
|
50
|
+
const { spec: { starting, columns } } = layoutSpec;
|
|
51
|
+
// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
|
|
52
|
+
// All variants in use MUST be in style/safelist.tailwind.js
|
|
53
|
+
const clazzName = cn('grid xs:grid-cols-1 gap-2 sm:gap-3', `${starting}:grid-cols-${columns} `, className);
|
|
54
|
+
return (<div className={clazzName}>
|
|
55
|
+
<Content blocks={elements}/>
|
|
56
|
+
</div>);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return null;
|
|
60
|
+
};
|
|
61
|
+
export default GroupBlockComponent;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ApplyTypography } from '../../primitives/index-common';
|
|
3
|
+
const HeadingBlockComponent = ({ block, className = '' }) => {
|
|
4
|
+
if (block.blockType !== 'heading') {
|
|
5
|
+
return <>heading block required</>;
|
|
6
|
+
}
|
|
7
|
+
const heading = block;
|
|
8
|
+
let Tag;
|
|
9
|
+
let BylineTag = undefined;
|
|
10
|
+
switch (heading.bylineLevel) {
|
|
11
|
+
case 0:
|
|
12
|
+
{
|
|
13
|
+
BylineTag = 'p';
|
|
14
|
+
}
|
|
15
|
+
break;
|
|
16
|
+
case 1:
|
|
17
|
+
{
|
|
18
|
+
BylineTag = 'h1';
|
|
19
|
+
}
|
|
20
|
+
break;
|
|
21
|
+
case 2:
|
|
22
|
+
{
|
|
23
|
+
BylineTag = 'h2';
|
|
24
|
+
}
|
|
25
|
+
break;
|
|
26
|
+
case 3:
|
|
27
|
+
{
|
|
28
|
+
BylineTag = 'h3';
|
|
29
|
+
}
|
|
30
|
+
break;
|
|
31
|
+
case 4:
|
|
32
|
+
{
|
|
33
|
+
BylineTag = 'h4';
|
|
34
|
+
}
|
|
35
|
+
break;
|
|
36
|
+
case 5:
|
|
37
|
+
{
|
|
38
|
+
BylineTag = 'h5';
|
|
39
|
+
}
|
|
40
|
+
break;
|
|
41
|
+
case 6:
|
|
42
|
+
{
|
|
43
|
+
BylineTag = 'h6';
|
|
44
|
+
}
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
47
|
+
// bylineLevel default is two levels below the main heading
|
|
48
|
+
switch (heading.level) {
|
|
49
|
+
case 0:
|
|
50
|
+
{
|
|
51
|
+
Tag = 'p';
|
|
52
|
+
BylineTag = BylineTag ?? 'p';
|
|
53
|
+
}
|
|
54
|
+
break;
|
|
55
|
+
case 1:
|
|
56
|
+
{
|
|
57
|
+
Tag = 'h1';
|
|
58
|
+
BylineTag = BylineTag ?? 'h3';
|
|
59
|
+
}
|
|
60
|
+
break;
|
|
61
|
+
case 2:
|
|
62
|
+
{
|
|
63
|
+
Tag = 'h2';
|
|
64
|
+
BylineTag = BylineTag ?? 'h4';
|
|
65
|
+
}
|
|
66
|
+
break;
|
|
67
|
+
// 3 is default
|
|
68
|
+
case 4:
|
|
69
|
+
{
|
|
70
|
+
Tag = 'h4';
|
|
71
|
+
BylineTag = BylineTag ?? 'h6';
|
|
72
|
+
}
|
|
73
|
+
break;
|
|
74
|
+
case 5:
|
|
75
|
+
{
|
|
76
|
+
Tag = 'h5';
|
|
77
|
+
BylineTag = BylineTag ?? 'p';
|
|
78
|
+
}
|
|
79
|
+
break;
|
|
80
|
+
case 6:
|
|
81
|
+
{
|
|
82
|
+
Tag = 'h6';
|
|
83
|
+
BylineTag = BylineTag ?? 'p';
|
|
84
|
+
}
|
|
85
|
+
break;
|
|
86
|
+
default: {
|
|
87
|
+
Tag = 'h3';
|
|
88
|
+
BylineTag = BylineTag ?? 'h5';
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
// Had to do this way, since tw typo plugin does support overrding typo styling wiithout .not-typography
|
|
92
|
+
return (<ApplyTypography className={className}>
|
|
93
|
+
<Tag>{heading.heading}</Tag>
|
|
94
|
+
{heading.spaceBetween && <div className={'w-[1px] ' + `h-${heading.spaceBetween}`}/>}
|
|
95
|
+
{heading.byline && (<BylineTag>{heading.byline}</BylineTag>)}
|
|
96
|
+
{heading.spaceAfter && <div className={'w-[1px] ' + `h-${heading.spaceAfter}`}/>}
|
|
97
|
+
</ApplyTypography>);
|
|
98
|
+
};
|
|
99
|
+
export default HeadingBlockComponent;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Dimensions } from '../../types';
|
|
3
|
+
import type BlockComponentProps from './block-component-props';
|
|
4
|
+
declare const ImageBlockComponent: React.FC<BlockComponentProps & {
|
|
5
|
+
constraintTo?: Dimensions;
|
|
6
|
+
}>;
|
|
7
|
+
export default ImageBlockComponent;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Image from 'next/image';
|
|
3
|
+
import { constrain, containsToken, cn } from '../../util';
|
|
4
|
+
const ImageBlockComponent = ({ block, className = '', agent, constraintTo }) => {
|
|
5
|
+
if (block.blockType !== 'image') {
|
|
6
|
+
return <>image block required</>;
|
|
7
|
+
}
|
|
8
|
+
const { src, alt, dim, props, sizes, fullWidthOnMobile, svgFillClass, specifiers } = block;
|
|
9
|
+
const specified = (s) => (containsToken(specifiers, s));
|
|
10
|
+
const toSpread = {};
|
|
11
|
+
if (props?.fill === undefined) {
|
|
12
|
+
const resolved = constraintTo ? constrain(dim, constraintTo) : dim;
|
|
13
|
+
toSpread.width = resolved.w;
|
|
14
|
+
toSpread.height = resolved.h;
|
|
15
|
+
}
|
|
16
|
+
let _alt;
|
|
17
|
+
if (alt) {
|
|
18
|
+
_alt = alt;
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
const tokens = src.split('/');
|
|
22
|
+
// Something remotely meaningful
|
|
23
|
+
_alt = (tokens.length > 0) ? tokens[tokens.length] : src;
|
|
24
|
+
}
|
|
25
|
+
const _svgFillClass = svgFillClass ?? '';
|
|
26
|
+
// TODO: use two elements with 'md:hidden' for 3/4 size
|
|
27
|
+
// https://nextjs.org/docs/app/building-your-application/optimizing/images#responsive
|
|
28
|
+
if (agent === 'phone') {
|
|
29
|
+
if (specified('mobile-full-width') || fullWidthOnMobile) {
|
|
30
|
+
const toSpread = {
|
|
31
|
+
style: {
|
|
32
|
+
width: '100%',
|
|
33
|
+
height: 'auto',
|
|
34
|
+
maxWidth: '420px'
|
|
35
|
+
},
|
|
36
|
+
sizes: '100vw',
|
|
37
|
+
};
|
|
38
|
+
// only for aspect ratio and to satisfy parser
|
|
39
|
+
toSpread.width = dim.w;
|
|
40
|
+
toSpread.height = dim.h;
|
|
41
|
+
return (<div className='flex flex-col items-center w-full'>
|
|
42
|
+
<Image src={src} alt={_alt} {...toSpread} className={cn(_svgFillClass, className)}/>
|
|
43
|
+
</div>);
|
|
44
|
+
}
|
|
45
|
+
// TODO use constraint
|
|
46
|
+
else if (!specified('mobile-no-scale')) {
|
|
47
|
+
if (props?.style?.width === 'auto' && typeof props.style.height === 'number') {
|
|
48
|
+
props.style.height = props.style.height * .75;
|
|
49
|
+
}
|
|
50
|
+
else if (props?.style?.height === 'auto' && typeof props?.style?.width === 'number') {
|
|
51
|
+
props.style.width = props.style.width * .75;
|
|
52
|
+
}
|
|
53
|
+
else if (props?.style && !props?.style.width) {
|
|
54
|
+
toSpread.width = dim.w * .75;
|
|
55
|
+
toSpread.height = dim.h * .75;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (sizes) {
|
|
60
|
+
toSpread.sizes = sizes;
|
|
61
|
+
}
|
|
62
|
+
const right = containsToken(specifiers, 'right');
|
|
63
|
+
const center = containsToken(specifiers, 'center');
|
|
64
|
+
const alignSelfClx = right ? 'self-end' : (center ? 'self-center' : 'self-start');
|
|
65
|
+
return (props?.fill) ? (<div className='relative w-full h-full'>
|
|
66
|
+
<Image src={src} alt={_alt} {...toSpread} {...props} className={cn(_svgFillClass, 'max-w-[70vw] mx-auto', className)}/>
|
|
67
|
+
</div>) : (<Image src={src} alt={_alt} {...toSpread} {...props} className={cn(alignSelfClx, _svgFillClass, 'max-w-[70vw] mx-auto', className)}/>);
|
|
68
|
+
};
|
|
69
|
+
export default ImageBlockComponent;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import AccordianBlock from './accordian-block';
|
|
2
|
+
import type BlockComponentProps from './block-component-props';
|
|
3
|
+
import Blocks from './content';
|
|
4
|
+
import CardBlock from './card-block';
|
|
5
|
+
import { default as ContentComponent, registerBlockType } from './content';
|
|
6
|
+
import CTABlock from './cta-block';
|
|
7
|
+
import EnhHeadingBlock from './enh-heading-block';
|
|
8
|
+
import GroupBlock from './group-block';
|
|
9
|
+
import HeadingBlock from './heading-block';
|
|
10
|
+
import ImageBlock from './image-block';
|
|
11
|
+
import SpaceBlock from './space-block';
|
|
12
|
+
import ScreenfulBlock from './screenful-block';
|
|
13
|
+
import VideoBlock from './video-block';
|
|
14
|
+
export { AccordianBlock as AccordianBlockComponent, type BlockComponentProps, Blocks as BlocksComponent, CardBlock as CardBlockComponent, ContentComponent, CTABlock as CTABlockComponent, EnhHeadingBlock as EnhHeadingBlockComponent, GroupBlock as GroupBlockComponent, HeadingBlock as HeadingBlockComponent, ImageBlock as ImageBlockComponent, registerBlockType, SpaceBlock as SpaceBlockComponent, ScreenfulBlock as ScreenfulBlockComponent, VideoBlock as VideoBlockComponent, };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import AccordianBlock from './accordian-block';
|
|
2
|
+
import Blocks from './content';
|
|
3
|
+
import CardBlock from './card-block';
|
|
4
|
+
import { default as ContentComponent, registerBlockType } from './content';
|
|
5
|
+
import CTABlock from './cta-block';
|
|
6
|
+
import EnhHeadingBlock from './enh-heading-block';
|
|
7
|
+
import GroupBlock from './group-block';
|
|
8
|
+
import HeadingBlock from './heading-block';
|
|
9
|
+
import ImageBlock from './image-block';
|
|
10
|
+
import SpaceBlock from './space-block';
|
|
11
|
+
import ScreenfulBlock from './screenful-block';
|
|
12
|
+
import VideoBlock from './video-block';
|
|
13
|
+
export { AccordianBlock as AccordianBlockComponent, Blocks as BlocksComponent, CardBlock as CardBlockComponent, ContentComponent, CTABlock as CTABlockComponent, EnhHeadingBlock as EnhHeadingBlockComponent, GroupBlock as GroupBlockComponent, HeadingBlock as HeadingBlockComponent, ImageBlock as ImageBlockComponent, registerBlockType, SpaceBlock as SpaceBlockComponent, ScreenfulBlock as ScreenfulBlockComponent, VideoBlock as VideoBlockComponent, };
|