@nascentdigital/funnel-ui 4.4.20 → 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.
Files changed (88) hide show
  1. package/dist/Tailwind.d.ts +5 -1
  2. package/dist/Tailwind.js +9 -0
  3. package/dist/server/blocks/Block.d.ts +42 -2
  4. package/dist/server/blocks/Block.js +88 -0
  5. package/dist/server/blocks/Clients.d.ts +20 -29
  6. package/dist/server/blocks/Clients.js +13 -57
  7. package/dist/server/blocks/MediaLayout.d.ts +10 -5
  8. package/dist/server/blocks/MediaLayout.js +41 -22
  9. package/dist/server/blocks/Message.d.ts +9 -67
  10. package/dist/server/blocks/Message.js +15 -292
  11. package/dist/server/blocks/Outcome.d.ts +22 -82
  12. package/dist/server/blocks/Outcome.js +20 -474
  13. package/dist/server/blocks/Testimonial.d.ts +81 -16
  14. package/dist/server/blocks/Testimonial.js +59 -27
  15. package/dist/server/blocks/Testimonials.d.ts +41 -0
  16. package/dist/server/blocks/Testimonials.js +90 -0
  17. package/dist/server/blocks/ValueProp.d.ts +19 -38
  18. package/dist/server/blocks/ValueProp.js +14 -100
  19. package/dist/server/blocks/index.d.ts +1 -0
  20. package/dist/server/blocks/index.js +1 -0
  21. package/dist/server/blocks/summary/Statement.d.ts +304 -0
  22. package/dist/server/blocks/summary/Statement.js +52 -0
  23. package/dist/server/blocks/summary/Summary.d.ts +18 -0
  24. package/dist/server/blocks/summary/Summary.js +34 -0
  25. package/dist/server/blocks/summary/index.d.ts +1 -0
  26. package/dist/server/blocks/summary/index.js +17 -0
  27. package/dist/server/entities/Person.d.ts +27 -2
  28. package/dist/server/entities/Person.js +55 -5
  29. package/dist/server/layouts/BrickLayout.d.ts +290 -0
  30. package/dist/server/layouts/BrickLayout.js +25 -0
  31. package/dist/server/layouts/CardLayout.d.ts +291 -0
  32. package/dist/server/layouts/CardLayout.js +25 -0
  33. package/dist/server/layouts/FlexWrapLayout.d.ts +290 -0
  34. package/dist/server/layouts/FlexWrapLayout.js +41 -0
  35. package/dist/server/layouts/StackLayout.d.ts +290 -0
  36. package/dist/server/layouts/StackLayout.js +25 -0
  37. package/dist/server/layouts/grid/GridItem.d.ts +8 -0
  38. package/dist/server/layouts/grid/GridItem.js +9 -0
  39. package/dist/server/layouts/grid/GridLayout.d.ts +293 -0
  40. package/dist/server/layouts/grid/GridLayout.js +25 -0
  41. package/dist/server/layouts/grid/index.d.ts +2 -0
  42. package/dist/server/layouts/grid/index.js +18 -0
  43. package/dist/server/layouts/index.d.ts +5 -0
  44. package/dist/server/layouts/index.js +21 -0
  45. package/dist/server/panels/BlockPanel.d.ts +80 -1
  46. package/dist/server/panels/BlockPanel.js +831 -0
  47. package/dist/server/panels/ListPanel.d.ts +62 -0
  48. package/dist/server/panels/ListPanel.js +137 -0
  49. package/dist/server/panels/MessagePanel.d.ts +69 -5
  50. package/dist/server/panels/MessagePanel.js +128 -5
  51. package/dist/server/panels/TestimonialPanel.d.ts +47 -0
  52. package/dist/server/panels/TestimonialPanel.js +71 -0
  53. package/dist/server/panels/VisualPanel.d.ts +45 -13
  54. package/dist/server/panels/VisualPanel.js +75 -16
  55. package/dist/server/panels/index.d.ts +2 -0
  56. package/dist/server/panels/index.js +2 -0
  57. package/dist/server/schema/BlockConfig.d.ts +3 -1
  58. package/dist/server/schema/BlockConfig.js +2 -1
  59. package/dist/server/schema/ItemAlignment.d.ts +2 -0
  60. package/dist/server/schema/ItemPosition.d.ts +1 -0
  61. package/dist/server/schema/ItemSize.d.ts +2 -1
  62. package/dist/server/schema/ItemSize.js +2 -1
  63. package/dist/server/schema/ListPanelLayout.d.ts +34 -0
  64. package/dist/server/schema/ListPanelLayout.js +24 -0
  65. package/dist/server/schema/PanelLayout.d.ts +14 -0
  66. package/dist/server/schema/PanelLayout.js +70 -0
  67. package/dist/server/schema/SlotVariation.d.ts +9 -0
  68. package/dist/server/schema/SlotVariation.js +48 -0
  69. package/dist/server/schema/TextAlignment.d.ts +1 -0
  70. package/dist/server/schema/index.d.ts +3 -0
  71. package/dist/server/schema/index.js +3 -0
  72. package/dist/styles/blocks/Clients.css +0 -1
  73. package/dist/styles/blocks/Message.css +0 -343
  74. package/dist/styles/blocks/Outcome.css +13 -50
  75. package/dist/styles/blocks/Summary.css +15 -0
  76. package/dist/styles/blocks/Testimonial.css +1 -318
  77. package/dist/styles/blocks/ValueProp.css +0 -126
  78. package/dist/styles/blocks/_index.css +1 -0
  79. package/dist/styles/layouts/BrickLayout.css +43 -0
  80. package/dist/styles/layouts/CardLayout.css +46 -0
  81. package/dist/styles/layouts/FlexWrapLayout.css +38 -0
  82. package/dist/styles/layouts/GridLayout.css +25 -0
  83. package/dist/styles/layouts/StackLayout.css +46 -0
  84. package/dist/styles/layouts/_index.css +6 -1
  85. package/dist/styles/panels/ListPanel.css +3 -0
  86. package/dist/styles/panels/TestimonialPanel.css +64 -0
  87. package/dist/styles/panels/_index.css +2 -0
  88. 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<AspectKey extends string, AnchorKey extends string> = Record<AspectKey, AspectRatio.Schema> & Record<AnchorKey, Anchor.Schema>;
22
- type ConfigData<AspectKey extends string, AnchorKey extends string> = Schema.Block.Data.ForConfig<ConfigSchema<AspectKey, AnchorKey>>;
23
- type Args<AspectKey extends string, AnchorKey extends string> = {
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<AspectKey, AnchorKey>>;
26
- aspectKey: AspectKey;
27
- anchorKey: AnchorKey;
58
+ config?: Partial<ConfigData<TPrefix>>;
59
+ flexDirection?: BlockPanel.Slots.FlexDirection;
28
60
  };
29
- type Result<AspectKey extends string, AnchorKey extends string> = {
30
- configSchema: Partial<ConfigSchema<AspectKey, AnchorKey>>;
31
- config: Partial<ConfigData<AspectKey, AnchorKey>>;
32
- defaultConfig: Partial<ConfigData<AspectKey, AnchorKey>>;
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<AspectKey extends string, AnchorKey extends string>({ visual: visualData, config, aspectKey, anchorKey }: GetConfig.Args<AspectKey, AnchorKey>): GetConfig.Result<AspectKey, AnchorKey>;
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
- function getConfig({ visual: visualData, config = {}, aspectKey, anchorKey }) {
74
- var _a, _b, _c, _d, _e;
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[aspectKey]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultAspect;
79
- let anchor = (_d = (_c = config[anchorKey]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultAnchor;
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
- [aspectKey]: matchedAspect
149
+ [keys.aspect]: matchedAspect
107
150
  ? schema_1.AspectRatio.schema.removeOption(matchedAspect)
108
151
  : schema_1.AspectRatio.schema,
109
- [anchorKey]: aspect === 'auto' ? undefined : schema_1.Anchor.schema
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[anchorKey] = anchorSchema;
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
- [aspectKey]: funnel_core_1.Schema.EnumField.Value.toData(aspect),
134
- [anchorKey]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor)
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
- [aspectKey]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect),
138
- [anchorKey]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor)
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
  }
@@ -1,3 +1,5 @@
1
1
  export * from './BlockPanel';
2
+ export * from './ListPanel';
2
3
  export * from './MessagePanel';
4
+ export * from './TestimonialPanel';
3
5
  export * from './VisualPanel';
@@ -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<typeof ThemeOnly.schema>;
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
- theme: Theme.schema
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 = {}));
@@ -3,4 +3,5 @@ export type TextAlignment = 'left' | 'center' | 'right';
3
3
  export declare namespace TextAlignment {
4
4
  const options: Schema.EnumField.Options<TextAlignment>;
5
5
  const schema: Schema.EnumField<Schema.EnumField.Options<TextAlignment>>;
6
+ type Schema = typeof schema;
6
7
  }
@@ -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);
@@ -1,7 +1,6 @@
1
1
  @layer components {
2
2
 
3
3
  :root {
4
- --nd-clients-copy-gap: theme('spacing.l8');
5
4
  }
6
5
 
7
6
  /* base */