@scottish-government/designsystem-react 0.7.1 → 0.8.0

package/src/components/TaskList/TaskList.tsx

@@ -4,21 +4,32 @@ import HintText from '../../common/HintText';
 import ScreenReaderText from '../../common/ScreenReaderText';
 import Tag from '../Tag/Tag';
 
-const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
+const TaskItem = ({
     children,
     className,
     href,
     id,
     isComplete = false,
+    linkComponent,
     statusText,
     tagColour = 'grey',
     title,
     ...props
-}) => {
+}: SGDS.Component.TaskList.Item) => {
     if (isComplete) {
         tagColour = 'green';
     }
 
+    const LINK_CLASS = 'ds_task-list__task-link';
+
+    function getLinkElement(children: React.ReactNode) {
+        if (linkComponent) {
+            return linkComponent({ className: LINK_CLASS, href, children });
+        } else if (href) {
+            return <a href={href} className={LINK_CLASS}>{children}</a>;
+        }
+    }
+
     return (
         <li
             className={[
@@ -32,7 +43,7 @@ const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
                 <h3 className="ds_task-list__task-heading">
                 <ConditionalWrapper
                     condition={typeof href !== 'undefined'}
-                    wrapper={(children: React.JSX.Element) => <a className="ds_task-list__task-link" href={href}>{children}</a>}
+                    wrapper={(children: React.JSX.Element) => getLinkElement(children)}
                 >
                     {title}
                     {statusText && <ScreenReaderText>({statusText})</ScreenReaderText>}
@@ -45,8 +56,9 @@ const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
                 <Tag
                     aria-hidden="true"
                     colour={tagColour}
-                    title={statusText}
-                />
+                >
+                    {statusText}
+                </Tag>
             }
         </li>
     );
@@ -58,13 +70,13 @@ const TaskItem: React.FC<SGDS.Component.TaskList.Item> = ({
  * @param {string} props.title - The title of the task group
  * @returns {JSX.Element} - The element
  */
-const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
+const TaskGroup = ({
     children,
     className,
     intro,
     title,
     ...props
-}) => {
+}: SGDS.Component.TaskList.Group) => {
     return (
         <li
             className={[
@@ -82,15 +94,13 @@ const TaskGroup: React.FC<SGDS.Component.TaskList.Group> = ({
     );
 };
 
-const TaskList: React.FC<SGDS.Component.TaskList>
-    & { Group: React.FC<SGDS.Component.TaskList.Group> }
-    & { Item: React.FC<SGDS.Component.TaskList.Item> } = ({
+const TaskList = ({
     children,
     className,
     headingId = 'task-list',
     title,
     ...props
-}) => {
+}: SGDS.Component.TaskList) => {
     let taskCount = 0;
     let incompleteTaskIds: string[] = [];
     let completedTasksCount = 0;

package/src/components/TextInput/TextInput.test.tsx

@@ -284,8 +284,8 @@ test('text input with error message', () => {
         <TextInput
             id={INPUT_ID}
             label={LABEL_TEXT}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
+            hasError
         />
     );
 

package/src/components/TextInput/TextInput.tsx

@@ -6,7 +6,7 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 
-const TextInput: React.FC<SGDS.Component.TextInput> = ({
+const TextInput = ({
     buttonIcon,
     buttonText,
     children,
@@ -15,9 +15,9 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
     width,
     currency,
     currencySymbol,
-    error,
     errorMessage,
     hasButton = false,
+    hasError,
     hintText,
     id,
     label,
@@ -29,7 +29,7 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
     type = 'text',
     value,
     ...props
-}) => {
+}: SGDS.Component.TextInput) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -71,11 +71,11 @@ const TextInput: React.FC<SGDS.Component.TextInput> = ({
             >
                 <input
                     aria-describedby={describedbys.join(' ')}
-                    aria-invalid={error}
+                    aria-invalid={hasError}
                     className={[
                         'ds_input',
                         className,
-                        error ? 'ds_input--error' : '',
+                        hasError ? 'ds_input--error' : '',
                         width ? `ds_input--${width}` : '',
                     ].join(' ')}
                     defaultValue={value}

package/src/components/Textarea/Textarea.test.tsx

@@ -188,8 +188,8 @@ test('textarea with error message', () => {
         <Textarea
             id={TEXTAREA_ID}
             label={LABEL_TEXT}
-            error
             errorMessage={ERROR_MESSAGE_TEXT}
+            hasError
         />
     );
 

package/src/components/Textarea/Textarea.tsx

@@ -5,11 +5,11 @@ import ConditionalWrapper from '../../common/ConditionalWrapper';
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import HintText from '../../common/HintText';
 
-const Textarea: React.FC<SGDS.Component.Textarea> = ({
+const Textarea = ({
     className,
     countThreshold,
-    error,
     errorMessage,
+    hasError,
     hintText,
     id,
     label,
@@ -21,7 +21,7 @@ const Textarea: React.FC<SGDS.Component.Textarea> = ({
     rows = 4,
     value,
     ...props
-}) => {
+}: SGDS.Component.Textarea) => {
     const errorMessageId = `error-message-${id}`;
     const hintTextId = `hint-text-${id}`;
     const ref = useRef(null);
@@ -59,10 +59,10 @@ const Textarea: React.FC<SGDS.Component.Textarea> = ({
 
             <textarea
                 aria-describedby={describedbys.join(' ')}
-                aria-invalid={error}
+                aria-invalid={hasError}
                 className={[
                     'ds_input',
-                    error && 'ds_input--error',
+                    hasError && 'ds_input--error',
                     className
                 ].join(' ')}
                 defaultValue={value}

package/src/components/WarningText/WarningText.tsx

@@ -1,8 +1,8 @@
-const WarningText: React.FC<SGDS.Component.WarningText> = ({
+const WarningText = ({
     children,
     className,
     ...props
-}) => {
+}: SGDS.Component.WarningText) => {
     return (
         <div
             className={[