Merge pull request #23 from bettyblocks/feat/prefabcomponent-accepts-…

…style-TMPLT-1486 feat: add styles to prefabcomponent
bettyblocks · Jun 9, 2022 · 798a271 · 798a271
2 parents f42b9ab + 5d1f1de
commit 798a271
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/src/prefabs/types/component.ts b/src/prefabs/types/component.ts
@@ -1,5 +1,5 @@
 import { PrefabAction } from './actions';
-import { PrefabComponentOption } from './options';
+import { PrefabComponentOption, PrefabComponentStyle } from './options';
 import { Hook } from './hook';
 
 export type PrefabReference = PrefabPartial | PrefabComponent;
@@ -21,4 +21,5 @@ export interface PrefabComponent {
   ref?: {
     id: string;
   };
+  style?: PrefabComponentStyle;
 }
diff --git a/src/prefabs/types/options.ts b/src/prefabs/types/options.ts
@@ -18,7 +18,39 @@ export interface ValueRef extends PrefabComponentOptionBase {
 }
 
 export type PrefabComponentOption = ValueDefault | ValueRef;
+
+export type PrefabComponentStyle = {
+  name?: string;
+  overwrite?: {
+    backgroundColor?: {
+      value: string;
+      type: string;
+    };
+    borderColor?: {
+      value: string;
+      type: string;
+    };
+    borderRadius?: string | string[];
+    borderStyle?: string;
+    borderWidth?: string | string[];
+    boxShadow?: string;
+    color?: {
+      value: string;
+      type: string;
+    };
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
+    padding?: string | string[];
+    textDecoration?: string;
+    textTransform?: string;
+  };
+};
 export type OptionProducer = (key: string) => PrefabComponentOption;
+export type StyleProducer = (key: string) => PrefabComponentStyle;
 
 export interface BaseConfiguration {
   condition?: {

diff --git a/tests/prefabs/factories/component.test.ts b/tests/prefabs/factories/component.test.ts
@@ -98,3 +98,33 @@ test('component builds an option', (t) => {
   t.deepEqual(result, expected);
   t.end();
 });
+
+test('component builds a style in an option', (t) => {
+  const result = component(
+    'Button',
+    {
+      options: {},
+      style: {
+        name: 'Pappel',
+        overwrite: {
+          boxShadow: 'none',
+        },
+      },
+    },
+    [],
+  );
+  const expected = {
+    name: 'Button',
+    options: [],
+    style: {
+      name: 'Pappel',
+      overwrite: {
+        boxShadow: 'none',
+      },
+    },
+    descendants: [],
+    type: 'COMPONENT',
+  };
+  t.deepEqual(result, expected);
+  t.end();
+});