Merge pull request #162 from bettyblocks/feat/add-display-type-to-wra…

…pper-STAR-12 Feat/add display type to wrapper star 12
bettyblocks · Mar 1, 2024 · 9c03cf3 · 9c03cf3
2 parents 99994f3 + 5c1cfec
commit 9c03cf3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/src/prefabs/factories/wrapper.ts b/src/prefabs/factories/wrapper.ts
@@ -9,6 +9,7 @@ export type WrapperAttrs = {
   label?: string;
   optionCategories?: OptionCategory[];
   options?: Record<string, LinkedOptionProducer | LinkedPartialOptionProducer>;
+  displayType?: 'inline-block' | 'block' | 'inline';
 };
 
 /**
@@ -24,13 +25,17 @@ export const wrapper = (
   const options = Object.entries(attrs.options || {}).map(([key, linked]) =>
     linked(key),
   );
+
+  const { displayType } = attrs;
+
   const optionCategories =
     attrs.optionCategories && attrs.optionCategories.length !== 0
       ? { optionCategories: attrs.optionCategories }
       : {};
 
   return {
     type: 'WRAPPER',
+    displayType,
     ...labelField,
     ...optionCategories,
     options,

diff --git a/src/prefabs/types/component.ts b/src/prefabs/types/component.ts
@@ -24,6 +24,7 @@ export interface PrefabWrapper {
   descendants: PrefabReference[];
   optionCategories?: OptionCategory[];
   options: (PrefabWrapperLinkedOption | PrefabWrapperLinkedPartialOption)[];
+  displayType?: 'inline-block' | 'block' | 'inline';
 }
 
 export interface PrefabComponent {

diff --git a/tests/prefabs/factories/category.test.ts b/tests/prefabs/factories/category.test.ts
@@ -55,6 +55,7 @@ test('an option category in a wrapper should accept options', (t) => {
   const expected = {
     type: 'WRAPPER',
     label: 'Wrapper label',
+    displayType: undefined,
     optionCategories: [
       {
         label: 'Category label',

diff --git a/tests/prefabs/factories/wrapper.test.ts b/tests/prefabs/factories/wrapper.test.ts
@@ -8,6 +8,7 @@ test('builds a wrapper prefab', (t) => {
   const expected = {
     type: 'WRAPPER',
     options: [],
+    displayType: undefined,
     descendants: [],
   };
 
@@ -20,6 +21,7 @@ test('builds a wrapper prefab with descendants', (t) => {
   const expected = {
     type: 'WRAPPER',
     options: [],
+    displayType: undefined,
     descendants: [
       { name: 'ROW', options: [], descendants: [], type: 'COMPONENT' },
     ],
@@ -36,11 +38,19 @@ test('builds a wrapper prefab with descendants and inner wrapper', (t) => {
   const expected = {
     type: 'WRAPPER',
     options: [],
+    displayType: undefined,
     descendants: [
       {
         name: 'ROW',
         options: [],
-        descendants: [{ type: 'WRAPPER', options: [], descendants: [] }],
+        descendants: [
+          {
+            type: 'WRAPPER',
+            displayType: undefined,
+            options: [],
+            descendants: [],
+          },
+        ],
         type: 'COMPONENT',
       },
     ],
@@ -49,3 +59,16 @@ test('builds a wrapper prefab with descendants and inner wrapper', (t) => {
   t.deepEqual(result, expected);
   t.end();
 });
+
+test('Builds a wrapper with displayType', (t) => {
+  const result = wrapper({ displayType: 'inline-block' }, []);
+  const expected = {
+    type: 'WRAPPER',
+    options: [],
+    displayType: 'inline-block',
+    descendants: [],
+  };
+
+  t.deepEqual(result, expected);
+  t.end();
+});