fix: Updated NavigationButton styling

Author: KasperBaun

packages/core/src/components/navigation-button/NavigationButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { useQuickForm } from '../../state/QuickFormContext';
 import { ArrowUpIcon, ArrowDownIcon } from '../icons';
 import { quickformtokens } from '../../style/quickFormTokensDefinition';
-import { makeStyles, mergeClasses } from "@griffel/react";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 
 type NavigationButtonProps = {
     className?: string;
@@ -12,18 +12,41 @@ type NavigationButtonProps = {
 
 const useNavigationStyles = makeStyles({
     button: {
+        width: '50px',
+        height: '100%',
+        cursor: 'pointer',
+        ...shorthands.borderWidth('1px'),
+        ...shorthands.borderColor(quickformtokens.primary),
         ':hover': {
-            stroke: quickformtokens.onBackground
+            stroke: quickformtokens.onPrimary,
+            backgroundColor: quickformtokens.primary
         },
-        stroke: quickformtokens.onBackground
     },
     icon: {
-
+        stroke: quickformtokens.primary,
+        ':hover': {
+            stroke: quickformtokens.onPrimary,
+            backgroundColor: quickformtokens.primary
+        },
     },
     disabled: {
-        stroke: quickformtokens.onBackground
-    }
+        ':hover': {
+            stroke: quickformtokens.primary,
+            backgroundColor: 'transparent'
+        },
+    },
+    left: {
+        borderTopLeftRadius: '10px',
+        borderBottomLeftRadius: '10px',
+        ...shorthands.borderRight('none')
+    },
+    right: {
+        borderTopRightRadius: '10px',
+        borderBottomRightRadius: '10px',
+        ...shorthands.borderLeft('none')
+    },
 });
+
 export const NavigationButton: React.FC<NavigationButtonProps> = ({ className, style }) => {
     const styles = useNavigationStyles();
 
@@ -34,59 +57,33 @@ export const NavigationButton: React.FC<NavigationButtonProps> = ({ className, s
 
     const disablePrevBtn = !state.hasPrevSlide;
     const prevLabel = disablePrevBtn ? "No previous slide" : "Go to previous";
-    const rightBtnStyling = {
-        backgroundColor: quickformtokens.background,
-        ...right,
-        ...slideNavigationButton,
-    }
 
     const disableNextBtn = !state.hasNextSlide;
     const nextLabel = disableNextBtn ? "No next slide" : "Go to next";
-    const leftBtnStyling = {
-        backgroundColor: quickformtokens.background,
-        ...left,
-        ...slideNavigationButton,
-    }
 
     return (
         <div className={className} style={style}>
-            <label title={prevLabel} style={leftBtnStyling} >
-                <button className={styles.button}
+            <label title={prevLabel} >
+                <button
+                    aria-label='Go to previous'
+                    className={mergeClasses(styles.button, styles.left, disablePrevBtn && styles.disabled)}
                     disabled={disablePrevBtn}
-                    style={leftBtnStyling}
                     onClick={goToPrevSlide}
                 >
-                    <ArrowUpIcon className={mergeClasses(styles.icon, disablePrevBtn && styles.disabled)} />
+                    <ArrowDownIcon className={mergeClasses(styles.icon, disablePrevBtn && styles.disabled)} />
                 </button>
             </label>
 
-            <label title={nextLabel} style={rightBtnStyling}>
-                <button className={styles.button}
-                    disabled={disableNextBtn}
+            <label title={nextLabel} >
+                <button
                     aria-label='Go to next'
-                    style={rightBtnStyling}
+                    className={mergeClasses(styles.button, styles.right, disableNextBtn && styles.disabled)}
+                    disabled={disableNextBtn}
                     onClick={goToNextSlide}
                 >
-                    <ArrowDownIcon className={mergeClasses(styles.icon, disableNextBtn && styles.disabled)} />
+                    <ArrowUpIcon className={mergeClasses(styles.icon, disableNextBtn && styles.disabled)} />
                 </button>
             </label>
         </div >
     );
-}
-
-const slideNavigationButton: React.CSSProperties = {
-    width: '50px',
-    height: '100%',
-    cursor: 'pointer',
-    borderWidth: '1px'
-};
-const left: React.CSSProperties = {
-    borderTopLeftRadius: '10px',
-    borderBottomLeftRadius: '10px',
-    borderRight: 'none'
-};
-const right: React.CSSProperties = {
-    borderTopRightRadius: '10px',
-    borderBottomRightRadius: '10px',
-    borderLeft: 'none'
-};
+}

packages/core/src/components/question/Question.tsx

@@ -12,10 +12,13 @@ type QuestionProps = {
 }
 
 const questionStyling: React.CSSProperties = {
+    marginTop: quickformtokens.questionTopMargin,
     maxWidth: '72rem',
     transition: "transform 0.3s ease-out",
     minHeight: '100px',
-    color: quickformtokens.onSurface
+    color: quickformtokens.onSurface,
+    borderRadius: quickformtokens.questionBorderRadius,
+    padding: quickformtokens.questionPadding
 }
 
 export const Question: React.FC<QuestionProps> = ({ model, style }) => {

packages/core/src/style/QuickFormTokensDefinition.ts

@@ -46,6 +46,9 @@ type QuickFormTokensBase = {
     questionInputFontSize: FontSize,
 
     /* Structural properties */
+    questionTopMargin: string;
+    questionBorderRadius: string;
+    questionPadding: string;
     questionInputGap: Gap,
     gap1: Gap,
     gap2: Gap,

packages/core/src/style/defaultQuickFormTokens.ts

@@ -43,7 +43,7 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     onSecondary: '#000000',
 
     fontFamily: 'var(--chivo), Monaco, Consolas',
-    headlineFontSize:'2rem',
+    headlineFontSize: '2rem',
     paragraphFontSize: '1.3rem',
     paragraphMobileFontSize: '1.9rem',
     btnFontSize: '2rem',
@@ -58,6 +58,9 @@ export const defaultQuickFormTokens: QuickFormTokens = {
     questionInputGap: "3.6rem",
     questionPlaceholderColor: 'color-mix(in srgb, var(--on-surface) 80%, black)',
 
+    questionTopMargin: '15px',
+    questionBorderRadius: '15px',
+    questionPadding: '10px',
     gap1: '0.5rem',
     gap2: '1rem',
     gap4: '2rem',

packages/core/src/style/kbaQuickFormTokens.ts

@@ -60,6 +60,9 @@ export const kbaQuickFormTokens: QuickFormTokens = {
     questionInputGap: "1.5rem",
     questionPlaceholderColor: '#757575',
 
+    questionTopMargin: '15px',
+    questionBorderRadius: '15px',
+    questionPadding: '10px',
     gap1: '0.5rem',
     gap2: '1rem',
     gap4: '2rem',

packages/playground/src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { QuickFormDefinition } from '../../core/src/model';
 import testdata from "./data/allInputControlsMultipleSlidesTest2.json";
 import { QuickFormProvider } from '../../core/src/state';
-import { QuickForm } from '../../core/src/components';
+import { NavigationButton, QuickForm } from '../../core/src/components';
 import "./components/buttons-input/ButtonsInput";
 import "./components/checkbox-input/CheckboxInput";
 import "./components/radio-input/RadioInput";
@@ -13,6 +13,10 @@ export const App = () => {
         <div style={containerStyling}>
             <QuickFormProvider definition={testdata as QuickFormDefinition} payload={{}} >
                 <QuickForm />
+                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+
+                    <NavigationButton />
+                </div>
             </QuickFormProvider>
         </div>
     );