From 19ce1b05459fd3c4380b8a59b7881ae9a02e8a13 Mon Sep 17 00:00:00 2001
From: Kasper Baun <kasperbaun@hotmail.com>
Date: Thu, 27 Jun 2024 14:10:26 +0200
Subject: [PATCH] fix: added a new icon option in default slide button icon

---
 .../src/components/icons/ChevronRight.tsx     | 27 +++++++++++++++++++
 .../src/components/icons/IconResolver.tsx     | 14 +++++++++-
 .../slide-renderer/SlideRenderer.tsx          |  2 +-
 .../Views/QuickFormSettingsView.tsx           |  4 ++-
 packages/playground/package.json              |  2 +-
 .../src/data/allInputControlsTest.json        |  1 +
 6 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/components/icons/ChevronRight.tsx

diff --git a/packages/core/src/components/icons/ChevronRight.tsx b/packages/core/src/components/icons/ChevronRight.tsx
new file mode 100644
index 0000000..b06b569
--- /dev/null
+++ 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>
+    );
+}
\ No newline at end of file
diff --git a/packages/core/src/components/icons/IconResolver.tsx b/packages/core/src/components/icons/IconResolver.tsx
index d1203e3..2f19077 100644
--- 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
index 7704928..337ea2e 100644
--- 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
index 7425ed2..634e5a4 100644
--- 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
index 3f4f6e3..1deece7 100644
--- 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
index 07b45db..9d1c38d 100644
--- 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",