@nascentdigital/funnel-ui 4.4.21 → 4.5.0
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/Tailwind.d.ts +5 -1
- package/dist/Tailwind.js +9 -0
- package/dist/server/blocks/Block.d.ts +42 -2
- package/dist/server/blocks/Block.js +88 -0
- package/dist/server/blocks/Clients.d.ts +20 -29
- package/dist/server/blocks/Clients.js +13 -57
- package/dist/server/blocks/MediaLayout.d.ts +10 -5
- package/dist/server/blocks/MediaLayout.js +41 -22
- package/dist/server/blocks/Message.d.ts +9 -67
- package/dist/server/blocks/Message.js +15 -292
- package/dist/server/blocks/Outcome.d.ts +22 -82
- package/dist/server/blocks/Outcome.js +20 -474
- package/dist/server/blocks/Testimonial.d.ts +81 -16
- package/dist/server/blocks/Testimonial.js +59 -27
- package/dist/server/blocks/Testimonials.d.ts +41 -0
- package/dist/server/blocks/Testimonials.js +90 -0
- package/dist/server/blocks/ValueProp.d.ts +19 -38
- package/dist/server/blocks/ValueProp.js +14 -100
- package/dist/server/blocks/index.d.ts +1 -0
- package/dist/server/blocks/index.js +1 -0
- package/dist/server/blocks/summary/Statement.d.ts +304 -0
- package/dist/server/blocks/summary/Statement.js +52 -0
- package/dist/server/blocks/summary/Summary.d.ts +18 -0
- package/dist/server/blocks/summary/Summary.js +34 -0
- package/dist/server/blocks/summary/index.d.ts +1 -0
- package/dist/server/blocks/summary/index.js +17 -0
- package/dist/server/entities/Person.d.ts +27 -2
- package/dist/server/entities/Person.js +55 -5
- package/dist/server/layouts/BrickLayout.d.ts +290 -0
- package/dist/server/layouts/BrickLayout.js +25 -0
- package/dist/server/layouts/CardLayout.d.ts +291 -0
- package/dist/server/layouts/CardLayout.js +25 -0
- package/dist/server/layouts/FlexWrapLayout.d.ts +290 -0
- package/dist/server/layouts/FlexWrapLayout.js +41 -0
- package/dist/server/layouts/StackLayout.d.ts +290 -0
- package/dist/server/layouts/StackLayout.js +25 -0
- package/dist/server/layouts/grid/GridItem.d.ts +8 -0
- package/dist/server/layouts/grid/GridItem.js +9 -0
- package/dist/server/layouts/grid/GridLayout.d.ts +293 -0
- package/dist/server/layouts/grid/GridLayout.js +25 -0
- package/dist/server/layouts/grid/index.d.ts +2 -0
- package/dist/server/layouts/grid/index.js +18 -0
- package/dist/server/layouts/index.d.ts +5 -0
- package/dist/server/layouts/index.js +21 -0
- package/dist/server/panels/BlockPanel.d.ts +80 -1
- package/dist/server/panels/BlockPanel.js +831 -0
- package/dist/server/panels/ListPanel.d.ts +62 -0
- package/dist/server/panels/ListPanel.js +137 -0
- package/dist/server/panels/MessagePanel.d.ts +69 -5
- package/dist/server/panels/MessagePanel.js +128 -5
- package/dist/server/panels/TestimonialPanel.d.ts +47 -0
- package/dist/server/panels/TestimonialPanel.js +71 -0
- package/dist/server/panels/VisualPanel.d.ts +45 -13
- package/dist/server/panels/VisualPanel.js +75 -16
- package/dist/server/panels/index.d.ts +2 -0
- package/dist/server/panels/index.js +2 -0
- package/dist/server/schema/BlockConfig.d.ts +3 -1
- package/dist/server/schema/BlockConfig.js +2 -1
- package/dist/server/schema/ItemAlignment.d.ts +2 -0
- package/dist/server/schema/ItemPosition.d.ts +1 -0
- package/dist/server/schema/ItemSize.d.ts +2 -1
- package/dist/server/schema/ItemSize.js +2 -1
- package/dist/server/schema/ListPanelLayout.d.ts +34 -0
- package/dist/server/schema/ListPanelLayout.js +24 -0
- package/dist/server/schema/PanelLayout.d.ts +14 -0
- package/dist/server/schema/PanelLayout.js +70 -0
- package/dist/server/schema/SlotVariation.d.ts +9 -0
- package/dist/server/schema/SlotVariation.js +48 -0
- package/dist/server/schema/TextAlignment.d.ts +1 -0
- package/dist/server/schema/index.d.ts +3 -0
- package/dist/server/schema/index.js +3 -0
- package/dist/styles/blocks/Clients.css +0 -1
- package/dist/styles/blocks/Message.css +0 -343
- package/dist/styles/blocks/Outcome.css +13 -50
- package/dist/styles/blocks/Summary.css +15 -0
- package/dist/styles/blocks/Testimonial.css +1 -318
- package/dist/styles/blocks/ValueProp.css +0 -126
- package/dist/styles/blocks/_index.css +1 -0
- package/dist/styles/layouts/BrickLayout.css +43 -0
- package/dist/styles/layouts/CardLayout.css +46 -0
- package/dist/styles/layouts/FlexWrapLayout.css +38 -0
- package/dist/styles/layouts/GridLayout.css +25 -0
- package/dist/styles/layouts/StackLayout.css +46 -0
- package/dist/styles/layouts/_index.css +6 -1
- package/dist/styles/panels/ListPanel.css +3 -0
- package/dist/styles/panels/TestimonialPanel.css +64 -0
- package/dist/styles/panels/_index.css +2 -0
- package/package.json +3 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { Visual } from '../fields';
|
|
4
|
-
import { Anchor, AspectRatio } from '../schema';
|
|
4
|
+
import { Anchor, AspectRatio, ItemAlignment, ItemPosition, ItemSize } from '../schema';
|
|
5
5
|
import { BlockPanel } from './BlockPanel';
|
|
6
6
|
export declare function VisualPanel({ className, panel, visual, visualDecorator, visualLoading, aspect, anchor, alignX, alignY, size, fullbleed, mobileOrder }: VisualPanel.Props): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export declare namespace VisualPanel {
|
|
@@ -14,23 +14,55 @@ export declare namespace VisualPanel {
|
|
|
14
14
|
aspect?: AspectRatio;
|
|
15
15
|
anchor?: Anchor;
|
|
16
16
|
};
|
|
17
|
+
namespace Props {
|
|
18
|
+
type Configuration = Pick<Props, 'className' | 'visualDecorator' | 'visualLoading'>;
|
|
19
|
+
}
|
|
17
20
|
namespace Fields {
|
|
18
|
-
const visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual
|
|
21
|
+
const visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
|
|
22
|
+
const all: {
|
|
23
|
+
visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
namespace VisualPosition {
|
|
27
|
+
const schema: Schema.EnumField<Schema.EnumField.Options<ItemPosition>>;
|
|
28
|
+
type Schema = typeof schema;
|
|
29
|
+
}
|
|
30
|
+
namespace Config {
|
|
31
|
+
type Key<TPrefix extends string = string> = Key.Aspect<TPrefix> | Key.Anchor<TPrefix> | Key.HorizontalAlign<TPrefix> | Key.Width<TPrefix>;
|
|
32
|
+
namespace Key {
|
|
33
|
+
type Aspect<TPrefix extends string> = `${TPrefix}Aspect`;
|
|
34
|
+
function aspect<TPrefix extends string>(prefix: TPrefix): Aspect<TPrefix>;
|
|
35
|
+
type Anchor<TPrefix extends string> = `${TPrefix}Anchor`;
|
|
36
|
+
function anchor<TPrefix extends string>(prefix: TPrefix): Anchor<TPrefix>;
|
|
37
|
+
type Width<TPrefix extends string> = `${TPrefix}Width`;
|
|
38
|
+
function width<TPrefix extends string>(prefix: TPrefix): Width<TPrefix>;
|
|
39
|
+
type HorizontalAlign<TPrefix extends string> = `${TPrefix}HorizontalAlign`;
|
|
40
|
+
function horizontalAlign<TPrefix extends string>(prefix: TPrefix): HorizontalAlign<TPrefix>;
|
|
41
|
+
}
|
|
42
|
+
type Keys<TPrefix extends string> = {
|
|
43
|
+
aspect: Key.Aspect<TPrefix>;
|
|
44
|
+
anchor: Key.Anchor<TPrefix>;
|
|
45
|
+
width: Key.Width<TPrefix>;
|
|
46
|
+
horizontalAlign: Key.HorizontalAlign<TPrefix>;
|
|
47
|
+
};
|
|
48
|
+
function getKeys<TPrefix extends string>(prefix: TPrefix): Keys<TPrefix>;
|
|
49
|
+
type Entries<TPrefix extends string> = Record<Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.Anchor<TPrefix>, Anchor.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema>;
|
|
19
50
|
}
|
|
20
51
|
namespace GetConfig {
|
|
21
|
-
type ConfigSchema<
|
|
22
|
-
type ConfigData<
|
|
23
|
-
type
|
|
52
|
+
type ConfigSchema<TPrefix extends string> = Record<Config.Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Config.Key.Anchor<TPrefix>, Anchor.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema>;
|
|
53
|
+
type ConfigData<TPrefix extends string> = Schema.Block.Data.ForConfig<ConfigSchema<TPrefix>>;
|
|
54
|
+
type Position = 'x' | 'y' | 'z';
|
|
55
|
+
type Args<TPrefix extends string> = {
|
|
56
|
+
visualKey: TPrefix;
|
|
24
57
|
visual?: Schema.Field.Data<Schema.AssetField> | Schema.Field.LinkedData<Schema.AssetField>;
|
|
25
|
-
config?: Partial<ConfigData<
|
|
26
|
-
|
|
27
|
-
anchorKey: AnchorKey;
|
|
58
|
+
config?: Partial<ConfigData<TPrefix>>;
|
|
59
|
+
flexDirection?: BlockPanel.Slots.FlexDirection;
|
|
28
60
|
};
|
|
29
|
-
type Result<
|
|
30
|
-
configSchema: Partial<ConfigSchema<
|
|
31
|
-
config: Partial<ConfigData<
|
|
32
|
-
defaultConfig: Partial<ConfigData<
|
|
61
|
+
type Result<TPrefix extends string> = {
|
|
62
|
+
configSchema: Partial<ConfigSchema<TPrefix>>;
|
|
63
|
+
config: Partial<ConfigData<TPrefix>>;
|
|
64
|
+
defaultConfig: Partial<ConfigData<TPrefix>>;
|
|
33
65
|
};
|
|
34
66
|
}
|
|
35
|
-
function getConfig<
|
|
67
|
+
function getConfig<TPrefix extends string>({ visualKey, visual: visualData, config, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
|
|
36
68
|
}
|
|
@@ -68,23 +68,66 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
|
|
|
68
68
|
// fields
|
|
69
69
|
let Fields;
|
|
70
70
|
(function (Fields) {
|
|
71
|
-
Fields.visual = fields_1.Visual.schema;
|
|
71
|
+
Fields.visual = fields_1.Visual.schema.optional();
|
|
72
|
+
Fields.all = {
|
|
73
|
+
visual: Fields.visual
|
|
74
|
+
};
|
|
72
75
|
})(Fields = VisualPanel.Fields || (VisualPanel.Fields = {}));
|
|
73
|
-
|
|
74
|
-
|
|
76
|
+
// visual position
|
|
77
|
+
let VisualPosition;
|
|
78
|
+
(function (VisualPosition) {
|
|
79
|
+
// schema
|
|
80
|
+
VisualPosition.schema = schema_1.ItemPosition.schema
|
|
81
|
+
.rename('Visual Position')
|
|
82
|
+
.updateOptions({ stacked: { name: 'Background', hint: 'Aligns the item as an overlay/background.' } })
|
|
83
|
+
.removeOptions('center')
|
|
84
|
+
.setDefault('left');
|
|
85
|
+
})(VisualPosition = VisualPanel.VisualPosition || (VisualPanel.VisualPosition = {}));
|
|
86
|
+
// config
|
|
87
|
+
let Config;
|
|
88
|
+
(function (Config) {
|
|
89
|
+
let Key;
|
|
90
|
+
(function (Key) {
|
|
91
|
+
function aspect(prefix) {
|
|
92
|
+
return `${prefix}Aspect`;
|
|
93
|
+
}
|
|
94
|
+
Key.aspect = aspect;
|
|
95
|
+
function anchor(prefix) {
|
|
96
|
+
return `${prefix}Anchor`;
|
|
97
|
+
}
|
|
98
|
+
Key.anchor = anchor;
|
|
99
|
+
function width(prefix) {
|
|
100
|
+
return `${prefix}Width`;
|
|
101
|
+
}
|
|
102
|
+
Key.width = width;
|
|
103
|
+
function horizontalAlign(prefix) {
|
|
104
|
+
return `${prefix}HorizontalAlign`;
|
|
105
|
+
}
|
|
106
|
+
Key.horizontalAlign = horizontalAlign;
|
|
107
|
+
})(Key = Config.Key || (Config.Key = {}));
|
|
108
|
+
function getKeys(prefix) {
|
|
109
|
+
return {
|
|
110
|
+
aspect: `${prefix}Aspect`,
|
|
111
|
+
anchor: `${prefix}Anchor`,
|
|
112
|
+
width: `${prefix}Width`,
|
|
113
|
+
horizontalAlign: `${prefix}HorizontalAlign`,
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
Config.getKeys = getKeys;
|
|
117
|
+
})(Config = VisualPanel.Config || (VisualPanel.Config = {}));
|
|
118
|
+
function getConfig({ visualKey, visual: visualData, config = {}, flexDirection }) {
|
|
119
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
75
120
|
// resolve values
|
|
121
|
+
const keys = Config.getKeys(visualKey);
|
|
76
122
|
const defaultAspect = 'auto';
|
|
77
123
|
const defaultAnchor = 'center';
|
|
78
|
-
let aspect = (_b = (_a = config[
|
|
79
|
-
let anchor = (_d = (_c = config[
|
|
124
|
+
let aspect = (_b = (_a = config[keys.aspect]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultAspect;
|
|
125
|
+
let anchor = (_d = (_c = config[keys.anchor]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultAnchor;
|
|
80
126
|
const visual = visualData === null || visualData === void 0 ? void 0 : visualData.value;
|
|
81
127
|
// return immediately if there's no visual
|
|
82
128
|
if (!visual || !funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(visual)) {
|
|
83
129
|
return {
|
|
84
|
-
configSchema: {
|
|
85
|
-
[aspectKey]: undefined,
|
|
86
|
-
[anchorKey]: undefined
|
|
87
|
-
},
|
|
130
|
+
configSchema: {},
|
|
88
131
|
config: {},
|
|
89
132
|
defaultConfig: {}
|
|
90
133
|
};
|
|
@@ -103,11 +146,15 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
|
|
|
103
146
|
console.debug('[VisualPanel/getConfig] aspect calculation:', { width, height, sourceAspectRatio, matchedAspect });
|
|
104
147
|
// create schema (drop matched aspect if we need to)
|
|
105
148
|
const configSchema = {
|
|
106
|
-
[
|
|
149
|
+
[keys.aspect]: matchedAspect
|
|
107
150
|
? schema_1.AspectRatio.schema.removeOption(matchedAspect)
|
|
108
151
|
: schema_1.AspectRatio.schema,
|
|
109
|
-
[
|
|
152
|
+
[keys.anchor]: aspect === 'auto' ? undefined : schema_1.Anchor.schema,
|
|
153
|
+
[keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema,
|
|
154
|
+
[keys.width]: schema_1.ItemSize.schema
|
|
110
155
|
};
|
|
156
|
+
const defaultPanelWidth = 'full';
|
|
157
|
+
let panelWidth = (_g = (_f = config[keys.width]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : defaultPanelWidth;
|
|
111
158
|
// reduce anchor to options that are allowed (vertical vs horizontal cropping)
|
|
112
159
|
if (sourceAspectRatio && aspect !== 'auto') {
|
|
113
160
|
// coerce anchor
|
|
@@ -120,22 +167,34 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
|
|
|
120
167
|
else {
|
|
121
168
|
anchorSchema = anchorSchema.keepOptions('center', 'left', 'right');
|
|
122
169
|
}
|
|
123
|
-
configSchema[
|
|
170
|
+
configSchema[keys.anchor] = anchorSchema;
|
|
124
171
|
// update config
|
|
125
172
|
if (!anchorSchema.isValidOption(anchor)) {
|
|
126
173
|
anchor = 'center';
|
|
127
174
|
}
|
|
128
175
|
}
|
|
176
|
+
if (flexDirection === 'none' || flexDirection === 'y' || panelWidth === 'full' || panelWidth === 'fullBleed') {
|
|
177
|
+
delete configSchema[keys.horizontalAlign];
|
|
178
|
+
}
|
|
179
|
+
// if there is no room to left or right, then only keep full and full-bleed options
|
|
180
|
+
if (flexDirection !== 'x') {
|
|
181
|
+
configSchema[keys.width] = schema_1.ItemSize.schema.keepOptions('full', 'fullBleed');
|
|
182
|
+
if (panelWidth !== 'full' && panelWidth !== 'fullBleed') {
|
|
183
|
+
panelWidth = 'full';
|
|
184
|
+
}
|
|
185
|
+
}
|
|
129
186
|
// return result
|
|
130
187
|
return {
|
|
131
188
|
configSchema: configSchema,
|
|
132
189
|
config: {
|
|
133
|
-
[
|
|
134
|
-
[
|
|
190
|
+
[keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(aspect),
|
|
191
|
+
[keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor),
|
|
192
|
+
[keys.width]: funnel_core_1.Schema.EnumField.Value.toData(panelWidth),
|
|
135
193
|
},
|
|
136
194
|
defaultConfig: {
|
|
137
|
-
[
|
|
138
|
-
[
|
|
195
|
+
[keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect),
|
|
196
|
+
[keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor),
|
|
197
|
+
[keys.width]: funnel_core_1.Schema.EnumField.Value.toData(defaultPanelWidth),
|
|
139
198
|
}
|
|
140
199
|
};
|
|
141
200
|
}
|
|
@@ -15,5 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./BlockPanel"), exports);
|
|
18
|
+
__exportStar(require("./ListPanel"), exports);
|
|
18
19
|
__exportStar(require("./MessagePanel"), exports);
|
|
20
|
+
__exportStar(require("./TestimonialPanel"), exports);
|
|
19
21
|
__exportStar(require("./VisualPanel"), exports);
|
|
@@ -35,11 +35,13 @@ export declare namespace BlockConfig {
|
|
|
35
35
|
function getClassName(fullbleed?: boolean): string | undefined;
|
|
36
36
|
}
|
|
37
37
|
namespace Presets {
|
|
38
|
-
type ThemeOnly = Schema.Block.Data.ForConfig<
|
|
38
|
+
type ThemeOnly = Schema.Block.Data.ForConfig<ThemeOnly.Schema>;
|
|
39
39
|
namespace ThemeOnly {
|
|
40
|
+
const key: "theme";
|
|
40
41
|
const schema: {
|
|
41
42
|
readonly theme: Schema.EnumField<Readonly<BlockThemes.Options>>;
|
|
42
43
|
};
|
|
44
|
+
type Schema = typeof schema;
|
|
43
45
|
function getClassName(config?: ThemeOnly): string;
|
|
44
46
|
}
|
|
45
47
|
type VisualAndCopy = Schema.Block.Data.ForConfig<typeof VisualAndCopy.schema>;
|
|
@@ -162,8 +162,9 @@ var BlockConfig;
|
|
|
162
162
|
let ThemeOnly;
|
|
163
163
|
(function (ThemeOnly) {
|
|
164
164
|
// schema
|
|
165
|
+
ThemeOnly.key = 'theme';
|
|
165
166
|
ThemeOnly.schema = {
|
|
166
|
-
|
|
167
|
+
[ThemeOnly.key]: Theme.schema
|
|
167
168
|
};
|
|
168
169
|
// helpers
|
|
169
170
|
function getClassName(config) {
|
|
@@ -4,9 +4,11 @@ export declare namespace ItemAlignment {
|
|
|
4
4
|
namespace Horizontal {
|
|
5
5
|
const options: Schema.EnumField.Options<ItemAlignment>;
|
|
6
6
|
const schema: Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>;
|
|
7
|
+
type Schema = typeof schema;
|
|
7
8
|
}
|
|
8
9
|
namespace Vertical {
|
|
9
10
|
const options: Schema.EnumField.Options<ItemAlignment>;
|
|
10
11
|
const schema: Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>;
|
|
12
|
+
type Schema = typeof schema;
|
|
11
13
|
}
|
|
12
14
|
}
|
|
@@ -3,4 +3,5 @@ export type ItemPosition = 'top' | 'bottom' | 'left' | 'center' | 'right' | 'sta
|
|
|
3
3
|
export declare namespace ItemPosition {
|
|
4
4
|
const options: Schema.EnumField.Options<ItemPosition>;
|
|
5
5
|
const schema: Schema.EnumField<Schema.EnumField.Options<ItemPosition>>;
|
|
6
|
+
type Schema = typeof schema;
|
|
6
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Schema } from '@nascentdigital/funnel-core';
|
|
2
|
-
export type ItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
|
2
|
+
export type ItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'full' | 'fullBleed';
|
|
3
3
|
export declare namespace ItemSize {
|
|
4
4
|
const options: Schema.EnumField.Options<ItemSize>;
|
|
5
5
|
const schema: Schema.EnumField<Schema.EnumField.Options<ItemSize>>;
|
|
6
|
+
type Schema = typeof schema;
|
|
6
7
|
}
|
|
@@ -11,7 +11,8 @@ var ItemSize;
|
|
|
11
11
|
sm: { name: 'Small', hint: 'Small' },
|
|
12
12
|
md: { name: 'Medium', hint: 'Medium' },
|
|
13
13
|
lg: { name: 'Large', hint: 'Large' },
|
|
14
|
-
full: { name: 'Full', hint: 'Full' }
|
|
14
|
+
full: { name: 'Full', hint: 'Full' },
|
|
15
|
+
fullBleed: { name: 'Full Bleed', hint: 'Full Bleed' }
|
|
15
16
|
};
|
|
16
17
|
ItemSize.schema = funnel_core_1.Schema.Field.enumeration({
|
|
17
18
|
name: 'Size',
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Schema } from '@nascentdigital/funnel-core';
|
|
2
|
+
import { ItemAlignment } from './ItemAlignment';
|
|
3
|
+
export type ListPanelLayout = keyof ListPanelLayout.Configs;
|
|
4
|
+
export declare namespace ListPanelLayout {
|
|
5
|
+
const options: Schema.EnumField.Options<ListPanelLayout>;
|
|
6
|
+
const schema: Schema.EnumField<Schema.EnumField.Options<keyof Configs>>;
|
|
7
|
+
type Schema = typeof schema;
|
|
8
|
+
type Brick = {
|
|
9
|
+
flipped: boolean;
|
|
10
|
+
};
|
|
11
|
+
type Card = {
|
|
12
|
+
itemSize: 'sm' | 'md';
|
|
13
|
+
};
|
|
14
|
+
type FlexWrap = {
|
|
15
|
+
allowSingleItemRows: boolean;
|
|
16
|
+
itemAlignment: ItemAlignment;
|
|
17
|
+
};
|
|
18
|
+
type Grid = {
|
|
19
|
+
columns: number;
|
|
20
|
+
};
|
|
21
|
+
type Stack = {
|
|
22
|
+
direction: 'horizontal' | 'vertical';
|
|
23
|
+
itemDistribution: 'equal' | 'even' | 'none';
|
|
24
|
+
};
|
|
25
|
+
type Configs = {
|
|
26
|
+
brick: Omit<Brick, 'flipped'>;
|
|
27
|
+
brickFlipped: Omit<Brick, 'flipped'>;
|
|
28
|
+
card: Card;
|
|
29
|
+
flexWrap: FlexWrap;
|
|
30
|
+
grid: Grid;
|
|
31
|
+
horizontalStack: Omit<Stack, 'direction'>;
|
|
32
|
+
verticalStack: Omit<Stack, 'direction'>;
|
|
33
|
+
};
|
|
34
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ListPanelLayout = void 0;
|
|
4
|
+
const funnel_core_1 = require("@nascentdigital/funnel-core");
|
|
5
|
+
var ListPanelLayout;
|
|
6
|
+
(function (ListPanelLayout) {
|
|
7
|
+
// schema
|
|
8
|
+
ListPanelLayout.options = {
|
|
9
|
+
brick: { name: 'Brick' },
|
|
10
|
+
brickFlipped: { name: 'Brick flipped' },
|
|
11
|
+
card: { name: 'Card' },
|
|
12
|
+
flexWrap: { name: 'Flex wrap' },
|
|
13
|
+
horizontalStack: { name: 'Horizontal stack' },
|
|
14
|
+
verticalStack: { name: 'Vertical stack' },
|
|
15
|
+
grid: { name: 'Grid' },
|
|
16
|
+
};
|
|
17
|
+
ListPanelLayout.schema = funnel_core_1.Schema.Field.enumeration({
|
|
18
|
+
name: 'Layout',
|
|
19
|
+
semantics: 'dropdown',
|
|
20
|
+
hint: 'Set how items of the list is laid out',
|
|
21
|
+
options: ListPanelLayout.options,
|
|
22
|
+
defaultOption: 'card'
|
|
23
|
+
});
|
|
24
|
+
})(ListPanelLayout || (exports.ListPanelLayout = ListPanelLayout = {}));
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Schema } from '@nascentdigital/funnel-core';
|
|
2
|
+
export type PanelLayout = 'solo' | 'stack.v' | 'stack.h' | 'brick.v' | 'brick.t' | 'brick.r' | 'brick.b' | 'brick.l' | 'nested' | 'nested.h' | 'nested.v' | 'nested.t' | 'nested.r' | 'nested.b' | 'nested.l';
|
|
3
|
+
export declare namespace PanelLayout {
|
|
4
|
+
const Enum: Schema.EnumField.Options<PanelLayout>;
|
|
5
|
+
const schema: Schema.EnumField<Schema.EnumField.Options<PanelLayout>>;
|
|
6
|
+
type Schema = typeof schema;
|
|
7
|
+
type ForPanelsArgs = {
|
|
8
|
+
message: boolean;
|
|
9
|
+
visual: boolean;
|
|
10
|
+
list: boolean;
|
|
11
|
+
};
|
|
12
|
+
function schemaForPanels({ message, visual, list }: ForPanelsArgs): PanelLayout.Schema;
|
|
13
|
+
function isNested(layout: PanelLayout): boolean;
|
|
14
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PanelLayout = void 0;
|
|
4
|
+
const funnel_core_1 = require("@nascentdigital/funnel-core");
|
|
5
|
+
var PanelLayout;
|
|
6
|
+
(function (PanelLayout) {
|
|
7
|
+
// schema
|
|
8
|
+
PanelLayout.Enum = {
|
|
9
|
+
solo: { name: 'Standalone' },
|
|
10
|
+
'stack.v': { name: 'Stack: Vertical' },
|
|
11
|
+
'stack.h': { name: 'Stack: Horizontal' },
|
|
12
|
+
'brick.v': { name: 'Brick: Vertical' },
|
|
13
|
+
'brick.t': { name: 'Brick: Top' },
|
|
14
|
+
'brick.r': { name: 'Brick: Right' },
|
|
15
|
+
'brick.b': { name: 'Brick: Bottom' },
|
|
16
|
+
'brick.l': { name: 'Brick: Left' },
|
|
17
|
+
'nested': { name: 'Nested' },
|
|
18
|
+
'nested.v': { name: 'Nested: Vertical' },
|
|
19
|
+
'nested.h': { name: 'Nested: Horizontal' },
|
|
20
|
+
'nested.t': { name: 'Nested: Top' },
|
|
21
|
+
'nested.r': { name: 'Nested: Right' },
|
|
22
|
+
'nested.b': { name: 'Nested: Bottom' },
|
|
23
|
+
'nested.l': { name: 'Nested: Left' }
|
|
24
|
+
};
|
|
25
|
+
PanelLayout.schema = funnel_core_1.Schema.Field.enumeration({
|
|
26
|
+
name: 'Panel Layout',
|
|
27
|
+
semantics: 'dropdown',
|
|
28
|
+
hint: 'Choose your layout',
|
|
29
|
+
description: 'Control the positioning of panels in a block.',
|
|
30
|
+
options: PanelLayout.Enum,
|
|
31
|
+
defaultOption: 'solo'
|
|
32
|
+
});
|
|
33
|
+
function schemaForPanels({ message, visual, list }) {
|
|
34
|
+
// drop layout options if there's no visual
|
|
35
|
+
if (!visual) {
|
|
36
|
+
return message && list
|
|
37
|
+
// message AND list
|
|
38
|
+
? PanelLayout.schema
|
|
39
|
+
.keepOptions('stack.h', 'stack.v')
|
|
40
|
+
.setDefault('stack.h')
|
|
41
|
+
// only message OR list
|
|
42
|
+
: PanelLayout.schema
|
|
43
|
+
.keepOptions('solo')
|
|
44
|
+
.setDefault('solo');
|
|
45
|
+
}
|
|
46
|
+
// or handle case where there's just a visual + message/list
|
|
47
|
+
else if (!message || !list) {
|
|
48
|
+
return message || list
|
|
49
|
+
// visual AND message/list
|
|
50
|
+
? PanelLayout.schema
|
|
51
|
+
.keepOptions('stack.h', 'stack.v', 'nested')
|
|
52
|
+
.setDefault('stack.h')
|
|
53
|
+
// only visual
|
|
54
|
+
: PanelLayout.schema
|
|
55
|
+
.keepOptions('solo')
|
|
56
|
+
.setDefault('solo');
|
|
57
|
+
}
|
|
58
|
+
// we have everything
|
|
59
|
+
else {
|
|
60
|
+
return PanelLayout.schema
|
|
61
|
+
.removeOptions('solo', 'stack.h', 'stack.v', 'nested')
|
|
62
|
+
.setDefault('brick.t');
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
PanelLayout.schemaForPanels = schemaForPanels;
|
|
66
|
+
function isNested(layout) {
|
|
67
|
+
return layout.startsWith('nested');
|
|
68
|
+
}
|
|
69
|
+
PanelLayout.isNested = isNested;
|
|
70
|
+
})(PanelLayout || (exports.PanelLayout = PanelLayout = {}));
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Schema } from '@nascentdigital/funnel-core';
|
|
2
|
+
import { PanelLayout } from './PanelLayout';
|
|
3
|
+
export type SlotVariation = 'v1' | 'v2' | 'v3' | 'v4' | 'v5' | 'v6';
|
|
4
|
+
export declare namespace SlotVariation {
|
|
5
|
+
const Enum: Schema.EnumField.Options<SlotVariation>;
|
|
6
|
+
const schema: Schema.EnumField<Schema.EnumField.Options<SlotVariation>>;
|
|
7
|
+
type Schema = typeof schema;
|
|
8
|
+
function schemaForLayout(layout: PanelLayout): Schema.EnumField<Schema.EnumField.Options<SlotVariation>>;
|
|
9
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SlotVariation = void 0;
|
|
4
|
+
const funnel_core_1 = require("@nascentdigital/funnel-core");
|
|
5
|
+
var SlotVariation;
|
|
6
|
+
(function (SlotVariation) {
|
|
7
|
+
// schema
|
|
8
|
+
SlotVariation.Enum = {
|
|
9
|
+
v1: { name: 'Variation 1' },
|
|
10
|
+
v2: { name: 'Variation 2' },
|
|
11
|
+
v3: { name: 'Variation 3' },
|
|
12
|
+
v4: { name: 'Variation 4' },
|
|
13
|
+
v5: { name: 'Variation 5' },
|
|
14
|
+
v6: { name: 'Variation 6' }
|
|
15
|
+
};
|
|
16
|
+
SlotVariation.schema = funnel_core_1.Schema.Field.enumeration({
|
|
17
|
+
name: 'Slot Variation',
|
|
18
|
+
semantics: 'dropdown',
|
|
19
|
+
hint: 'Choose the slot order',
|
|
20
|
+
description: 'Changes the position of panels in layout slots.',
|
|
21
|
+
options: SlotVariation.Enum,
|
|
22
|
+
defaultOption: 'v1'
|
|
23
|
+
});
|
|
24
|
+
// helpers
|
|
25
|
+
function schemaForLayout(layout) {
|
|
26
|
+
switch (layout) {
|
|
27
|
+
case 'solo':
|
|
28
|
+
case 'nested':
|
|
29
|
+
return SlotVariation.schema.keepOptions('v1');
|
|
30
|
+
case 'stack.h':
|
|
31
|
+
case 'stack.v':
|
|
32
|
+
case 'nested.h':
|
|
33
|
+
case 'nested.v':
|
|
34
|
+
case 'nested.t':
|
|
35
|
+
case 'nested.b':
|
|
36
|
+
case 'nested.l':
|
|
37
|
+
case 'nested.r':
|
|
38
|
+
return SlotVariation.schema.keepOptions('v1', 'v2');
|
|
39
|
+
case 'brick.v':
|
|
40
|
+
case 'brick.t':
|
|
41
|
+
case 'brick.b':
|
|
42
|
+
case 'brick.l':
|
|
43
|
+
case 'brick.r':
|
|
44
|
+
return SlotVariation.schema;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
SlotVariation.schemaForLayout = schemaForLayout;
|
|
48
|
+
})(SlotVariation || (exports.SlotVariation = SlotVariation = {}));
|
|
@@ -5,4 +5,7 @@ export * from './CollectionSchema';
|
|
|
5
5
|
export * from './ItemAlignment';
|
|
6
6
|
export * from './ItemPosition';
|
|
7
7
|
export * from './ItemSize';
|
|
8
|
+
export * from './ListPanelLayout';
|
|
9
|
+
export * from './PanelLayout';
|
|
10
|
+
export * from './SlotVariation';
|
|
8
11
|
export * from './TextAlignment';
|
|
@@ -21,4 +21,7 @@ __exportStar(require("./CollectionSchema"), exports);
|
|
|
21
21
|
__exportStar(require("./ItemAlignment"), exports);
|
|
22
22
|
__exportStar(require("./ItemPosition"), exports);
|
|
23
23
|
__exportStar(require("./ItemSize"), exports);
|
|
24
|
+
__exportStar(require("./ListPanelLayout"), exports);
|
|
25
|
+
__exportStar(require("./PanelLayout"), exports);
|
|
26
|
+
__exportStar(require("./SlotVariation"), exports);
|
|
24
27
|
__exportStar(require("./TextAlignment"), exports);
|