@media-quest/builder 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@media-quest/builder",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Builder library for Media-quest schemas",
   "main": "dist/public-api.js",
   "module": "dist/public-api.mjs",
@@ -13,6 +13,6 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@media-quest/engine": "0.0.12"
+    "@media-quest/engine": "0.0.13"
   }
 }

package/src/theme/IDefaultTheme.ts

@@ -37,15 +37,21 @@ export interface IDefaultTheme {
   responseButtons: BuilderOptionTheme;
   nextButtonTheme: BuilderOptionTheme;
   // mainQuestionText: BuilderTextTheme;
-  dontKnowButtonTheme?: BuilderOptionTheme;
+  // dontKnowButtonTheme: BuilderOptionTheme;
   buttonThemes?: Array<BuilderOptionTheme>;
 }
 
 export interface BuilderOptionTheme {
   name: string;
-  div: CssTheme;
+  normal: ButtonTheme;
+  dontKnow: ButtonTheme;
+}
+
+interface ButtonTheme {
+  btn: CssTheme;
+  divider: PStyle;
   text1: PStyle;
-  text2?: CssTheme;
+  text2: PStyle;
 }
 
 namespace BuilderOptionTheme {
@@ -65,38 +71,80 @@ namespace BuilderOptionTheme {
   const FONT_WEIGHT: DStyle["fontWeight"] = 600;
   const FONT_SIZE: DCss.Px["value"] = 35;
 
-  export const blueButton = (): BuilderOptionTheme => ({
-    name: "blue-button-theme",
-    div: {
-      css: {
-        backgroundColor: BLUE,
-        borderColor: BLUE,
-        textColor: WHITE,
-        fontSize: { _unit: "px", value: FONT_SIZE },
-        borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
-        borderStyle: BTN_BORDER_STYLE,
-        borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
-        padding: { _unit: "px", value: 40 },
-        h: BTN_HEIGHT,
-        w: BTN_WIDTH,
-        x: 10,
-        y: 8,
-        textAlign: "center",
+  export const blueButton = (): BuilderOptionTheme => {
+    const optionTheme: BuilderOptionTheme = {
+      name: "blue-button-theme",
+      normal: {
+        btn: {
+          css: {
+            backgroundColor: BLUE,
+            borderColor: BLUE,
+            textColor: WHITE,
+            fontSize: { _unit: "px", value: FONT_SIZE },
+            borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+            borderStyle: BTN_BORDER_STYLE,
+            borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
+            padding: { _unit: "px", value: 40 },
+            h: BTN_HEIGHT,
+            w: BTN_WIDTH,
+            x: 10,
+            y: 8,
+            textAlign: "center",
+          },
+          cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+          cssEnabled: { opacity: 1, cursor: "pointer" },
+        },
+        divider: {},
+        text1: {
+          y: 50,
+          transform: "translate(0%, 50%)",
+          textColor: WHITE,
+          fontSize: { _unit: "px", value: FONT_SIZE },
+          w: 84,
+          x: 8,
+          fontWeight: FONT_WEIGHT,
+          textAlign: "center",
+        },
+        text2: {},
       },
-      cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
-      cssEnabled: { opacity: 1, cursor: "pointer" },
-    },
-    text1: {
-      y: 50,
-      transform: "translate(0%, 50%)",
-      textColor: WHITE,
-      fontSize: { _unit: "px", value: FONT_SIZE },
-      w: 84,
-      x: 8,
-      fontWeight: FONT_WEIGHT,
-      textAlign: "center",
-    },
-  });
+
+      dontKnow: {
+        btn: {
+          css: {
+            backgroundColor: WHITE,
+            borderColor: LIGHT_BLUE,
+            textColor: BLUE,
+            fontSize: { _unit: "px", value: FONT_SIZE },
+            borderWidth: { _unit: "px", value: BTN_BORDER_WIDTH },
+            borderStyle: BTN_BORDER_STYLE,
+            borderRadius: { value: BTN_BORDER_RADIUS, _unit: "px" },
+            padding: { _unit: "px", value: 40 },
+            h: BTN_HEIGHT,
+            w: BTN_SHORT_WIDTH,
+            x: 10,
+            y: 8,
+            textAlign: "center",
+          },
+          cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
+          cssEnabled: { opacity: 1, cursor: "pointer" },
+        },
+        text1: {
+          y: 50,
+          transform: "translate(0%, 50%)",
+          textColor: BLUE,
+          fontSize: { _unit: "px", value: FONT_SIZE },
+          w: 84,
+          x: 8,
+          fontWeight: FONT_WEIGHT,
+          textAlign: "center",
+        },
+        text2: {},
+        divider: {},
+      },
+    };
+
+    return optionTheme;
+  };
 }
 
 export const DefaultTheme: IDefaultTheme = {

package/src/theme/default-theme-compiler.ts

@@ -375,7 +375,7 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
     const factsCollected: Fact[] = [];
     const { id, value, label } = buttonDto;
 
-    const { div, text1 } = DefaultTheme.responseButtons;
+    // const { div, text1, dontKnow } = DefaultTheme.responseButtons;
     if (options.kind === "response-button") {
       const fact: Fact = {
         kind: "numeric-fact",
@@ -396,6 +396,8 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
         factsCollected,
       },
     };
+    const btnStyles = value === 9 ? DefaultTheme.responseButtons.dontKnow : DefaultTheme.responseButtons.normal;
+    console.log(btnStyles);
     const btn: DDivDto = {
       id,
       _tag: "div",
@@ -404,17 +406,17 @@ export class DefaultThemeCompiler extends AbstractThemeCompiler<IDefaultTheme> {
           _tag: "p",
           id: U.randomString(30),
           text: label,
-          style: text1,
+          style: btnStyles.text1,
         },
       ],
       onStateChange: [
         {
           queryName: DStateProps._Queries.disableUserInputQuery.name,
-          whenFalse: [...ThemeUtils.enableClickCommands(id, div.cssEnabled)],
-          whenTrue: [...ThemeUtils.disableClickCommands(id, div.cssDisabled)],
+          whenFalse: [...ThemeUtils.enableClickCommands(id, btnStyles.btn.cssEnabled)],
+          whenTrue: [...ThemeUtils.disableClickCommands(id, btnStyles.btn.cssDisabled)],
         },
       ],
-      style: { ...div.css, ...div.cssEnabled },
+      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled },
       onClick: [onClickHandler],
     };
     if (options.kind === "next-button") {