Merge pull request #92 from thepensionsregulator/bug-arrow-button-disabled-status

buttons can be disabled and with custom loading message

Author: d4lek

packages/core/src/components/buttons/buttons.module.scss

@@ -140,7 +140,7 @@
 .link:disabled {
 	color: $colors-neutral-6;
 	text-decoration: none;
-	cursor: default;
+	cursor: not-allowed;
 }
 
 .link-underline {

packages/layout/src/components/buttons/buttons.mdx

@@ -70,6 +70,13 @@ import { ArrowLink, ArrowButton } from '@tpr/layout';
 	<ArrowLink
 		iconSide="right"
 		pointsTo="down"
+		cfg={{ mr: 3 }}
+		onClick={() => console.log('clicked')}
+	/>
+	<ArrowLink
+		iconSide="right"
+		pointsTo="down"
+		disabled
 		onClick={() => console.log('clicked')}
 	/>
 </Playground>
@@ -135,5 +142,22 @@ import { ArrowLink, ArrowButton } from '@tpr/layout';
 		title="Submit"
 		pointsTo="down"
 		onClick={() => console.log('clicked')}
+		cfg={{ mr: 3 }}
+	/>
+	<ArrowButton
+		iconSide="right"
+		title="Submit"
+		pointsTo="right"
+		onClick={() => console.log('clicked')}
+		cfg={{ mr: 3 }}
+		disabled
+	/>
+	<ArrowButton
+		iconSide="right"
+		title="Submit"
+		pointsTo="right"
+		onClick={() => console.log('clicked')}
+		disabled
+		disabledText="Loading..."
 	/>
 </Playground>

packages/layout/src/components/buttons/buttons.tsx

@@ -1,11 +1,11 @@
 import React, { ChangeEvent } from 'react';
-import { Flex, Button, ButtonProps, ColorProps } from '@tpr/core';
+import { Flex, Button, ButtonProps, ColorProps, P } from '@tpr/core';
 import { ArrowIcon } from './icons';
 import styles from './buttons.module.scss';
 
 export interface ArrowButtonProps extends ButtonProps {
 	title: string;
-	loadingMessage?: string;
+	disabledText?: string;
 	type?: 'button' | 'submit';
 	onClick?: (evt: ChangeEvent<HTMLInputElement>) => void;
 	pointsTo?: 'left' | 'up' | 'right' | 'down';
@@ -18,7 +18,7 @@ export const ArrowButton: React.FC<ArrowButtonProps> = ({
 	type = 'button',
 	onClick,
 	disabled,
-	loadingMessage = 'Saving...',
+	disabledText,
 	title,
 	cfg,
 	pointsTo = 'left',
@@ -37,8 +37,8 @@ export const ArrowButton: React.FC<ArrowButtonProps> = ({
 			testId={testId}
 			className={styles.removepadding}
 		>
-			{disabled ? (
-				loadingMessage
+			{disabled && disabledText ? (
+				<P cfg={{ px: 4 }}>{disabledText}</P>
 			) : (
 				<Flex
 					cfg={{

packages/layout/src/components/buttons/links.tsx

@@ -2,30 +2,44 @@ import React, { ChangeEvent } from 'react';
 import { Link, LinkProps, Flex } from '@tpr/core';
 import { ArrowIcon } from './icons';
 
-type ArrowLinkProps = {
+export interface ArrowLinkProps extends LinkProps {
 	onClick: (evt: ChangeEvent<HTMLInputElement>) => void;
 	title?: string;
 	pointsTo?: 'left' | 'up' | 'right' | 'down';
 	iconSide?: 'left' | 'right';
-	underline?: boolean;
-	testId?: string;
-	cfg?: LinkProps['cfg'];
-};
+}
 export const ArrowLink: React.FC<ArrowLinkProps> = ({
 	onClick,
 	testId,
 	underline = true,
 	title = 'Back',
 	pointsTo = 'left',
 	iconSide = 'left',
+	disabled,
 	cfg,
 }) => {
 	return (
-		<Link cfg={cfg} onClick={onClick} underline={underline} testId={testId}>
+		<Link
+			cfg={cfg}
+			onClick={onClick}
+			underline={underline}
+			testId={testId}
+			disabled={disabled}
+		>
 			<Flex cfg={{ alignItems: 'center' }}>
-				{iconSide === 'left' && <ArrowIcon pointsTo={pointsTo} />}
+				{iconSide === 'left' && (
+					<ArrowIcon
+						fill={disabled ? 'neutral.6' : 'primary.3'}
+						pointsTo={pointsTo}
+					/>
+				)}
 				<>{title}</>
-				{iconSide === 'right' && <ArrowIcon pointsTo={pointsTo} />}
+				{iconSide === 'right' && (
+					<ArrowIcon
+						fill={disabled ? 'neutral.6' : 'primary.3'}
+						pointsTo={pointsTo}
+					/>
+				)}
 			</Flex>
 		</Link>
 	);