Merge pull request #27 from EAVFW/kba/new-default-slide-button-icon

fix: added a new icon option in default slide button icon
EAVFW · Jun 27, 2024 · 09ab8b2 · 09ab8b2
2 parents f6af055 + 19ce1b0
commit 09ab8b2
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 4 deletions.
diff --git a/packages/core/src/components/icons/ChevronRight.tsx b/packages/core/src/components/icons/ChevronRight.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { IconProps } from "./iconProps";
+
+export const ChevronRight: React.FC<IconProps> = ({ color = "green", size = 100, style }) => {
+    return (
+        <div style={{ textAlign: 'center', height: size, ...style }}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={size}
+                height={size}
+                version="1.1"
+                id="Capa_1"
+                viewBox="0 0 185.343 185.343"
+                xmlSpace="preserve"
+            >
+                <g>
+                    <g>
+                        <path
+                            fill={color}
+                            d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"
+                        />
+                    </g>
+                </g>
+            </svg>
+        </div>
+    );
+}
diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
@@ -3,8 +3,19 @@ import { TelephoneIcon } from "./TelephoneIcon";
 import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
 import { Checkmark } from '../icons/Checkmark';
+import { ChevronRight } from "./ChevronRight";
+
+export enum IconEnum {
+    None = "None",
+    Email = "Email",
+    Phone = "Phone",
+    User = "User",
+    Checkmark = "Checkmark",
+    ChevronRight = "ChevronRight"
+}
+
+export type IconType = keyof typeof IconEnum;
 
-export type IconType = "Email" | "Phone" | "User" | "Checkmark" | "None";
 export type IconResolverProps = {
     type?: IconType,
 } & IconProps
@@ -15,6 +26,7 @@ export const IconResolver: React.FC<IconResolverProps> = ({ type, color, classNa
         case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />;
         case "User": return <UserIcon className={className} color={color} size={size} style={style} />;
         case "Checkmark": return <Checkmark className={className} color={color} size={size} style={style} />;
+        case "ChevronRight": return <ChevronRight className={className} color={color} size={size} style={style} />
         case "None": return <></>;
         default: return <></>;
     }

diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -53,7 +53,7 @@ export const SlideRenderer: React.FC = () => {
                 showPressEnter={showPressEnter}
                 children={
                     <>
-                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                        {buttonText}<IconResolver type={currentSlide?.icon ?? state.defaultSlideButtonIcon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={20} />
                     </>
                 }
             />

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -9,6 +9,7 @@ import { makeStyles, mergeClasses } from "@fluentui/react-components";
 import { JSONSchema7 } from "json-schema";
 import { defaultQuickFormTokens } from "@eavfw/quickform-core";
 import { Controls } from "@eavfw/apps";
+import { IconEnum } from "@eavfw/quickform-core/src/components/icons/IconResolver";
 
 const inputSlideSchema = {
     label: "QuickForm Feature Flags",
@@ -38,7 +39,7 @@ const inputSlideSchema = {
                 title: "Default Slide Button Icon",
                 description: "The icon used for the slide button",
                 type: "string",
-                enum: ["None", "Email", "Phone", "User", "Checkmark"]
+                enum: Object.values(IconEnum),
             },
             tokens: {
                 title: "Tokens (Variables)",
@@ -103,6 +104,7 @@ export const QuickFormSettingsView = () => {
     const quickformSettingsStyles = useQuickformSettingsStyles();
     const PreviewComponent = Controls["QuickFormSettingsViewPreviewComponent"];
     console.log("quickformpayloadV1", JSON.stringify(quickformpayload.layout));
+    console.log("ENUM", Object.values(IconEnum));
     return (
         <div className={mergeClasses(styles.section, quickformSettingsStyles.container)}>
             <div className={mergeClasses(styles.sectionSlim, styles.section)}>

diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -25,7 +25,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
-    "start": "webpack-dev-server --mode development --open --hot",
+    "start": "webpack-dev-server --mode development --open --hot --port 3005",
     "dev": "npm run start",
     "build": "webpack --mode production",
     "analyze-bundle": "node analyze.js"

diff --git a/packages/playground/src/data/allInputControlsTest.json b/packages/playground/src/data/allInputControlsTest.json
@@ -1,6 +1,7 @@
 {
     "layout": {
         "autoAdvanceSlides": false,
+        "defaultSlideButtonIcon": "ChevronRight",
         "slides": {
             "slide1": {
                 "title": "Beregn prisen for rengøring af fliser",