@i-dot-ai-npm/component-library-react 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
   "type": "module",
   "exports": {

package/src/button/Button.tsx

@@ -6,22 +6,41 @@ type ButtonProps = {
     warning?: boolean;
     inverse?: boolean;
     small?: boolean;
+    startButton?: boolean;
     href?: string;
+    type?: "button" | "reset" | "submit";
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function Button({ secondary, tertiary, warning, inverse, small, href, class: className, children, ...rest }: ButtonProps) {
+const StartIcon = () => (
+    <svg
+        className="govuk-button__start-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="17.5"
+        height="19"
+        viewBox="0 0 33 40"
+        aria-hidden="true"
+        focusable="false"
+    >
+        <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
+    </svg>
+);
+
+export default function Button({ secondary, tertiary, warning, inverse, small, startButton, href, type, class: className, children, ...rest }: ButtonProps) {
+    const classes = ["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", startButton ? "govuk-button--start" : "", className ?? ""].filter(Boolean).join(" ");
 
     return (
         href ? (
-            <a href={href} role="button" className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", className ?? ""].filter(Boolean).join(" ")} {...rest}>
+            <a href={href} role="button" draggable="false" className={classes} data-module="govuk-button" {...rest}>
                 {children ?? ""}
+                {startButton ? <StartIcon /> : null}
             </a>
         ) : (
-            <button className={["govuk-button", secondary ? "govuk-button--secondary" : "", warning ? "govuk-button--warning" : "", inverse ? "govuk-button--inverse" : "", tertiary ? "govuk-button--tertiary" : "", small ? "govuk-button--small" : "", className ?? ""].filter(Boolean).join(" ")} data-module="govuk-button" {...rest}>
+            <button type={type ?? "submit"} className={classes} data-module="govuk-button" {...rest}>
                 {children ?? ""}
+                {startButton ? <StartIcon /> : null}
             </button>
         )
     );

package/src/checkboxes/CheckboxConditional.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+type CheckboxConditionalProps = {
+    hidden?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function CheckboxConditional({ hidden = true, class: className, children, ...rest }: CheckboxConditionalProps) {
+    const classes = [
+        "govuk-checkboxes__conditional",
+        hidden ? "govuk-checkboxes__conditional--hidden" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/error-message/ErrorMessage.tsx

@@ -1,19 +1,20 @@
 import { ReactNode } from 'react';
 
 type ErrorMessageProps = {
+    visuallyHiddenText?: string;
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
 };
 
-export default function ErrorMessage({ class: className, children, ...rest }: ErrorMessageProps) {
+export default function ErrorMessage({ visuallyHiddenText = "Error", class: className, children, ...rest }: ErrorMessageProps) {
     const classes = ["govuk-error-message", className ?? ""].filter(Boolean).join(" ");
 
     return (
         <p className={classes} {...rest}>
-            <span className="govuk-visually-hidden">
-                Error:
-            </span>
+            {visuallyHiddenText ? (
+                <span className="govuk-visually-hidden">{visuallyHiddenText}:</span>
+            ) : null}{" "}
             {children ?? ""}
         </p>
     );

package/src/index.ts

@@ -17,6 +17,7 @@ export { default as CardLink } from "./card/CardLink";
 export { default as Card } from "./card/Card";
 export { default as CharacterCountMessage } from "./character-count/CharacterCountMessage";
 export { default as CharacterCount } from "./character-count/CharacterCount";
+export { default as CheckboxConditional } from "./checkboxes/CheckboxConditional";
 export { default as CheckboxDivider } from "./checkboxes/CheckboxDivider";
 export { default as CheckboxInput } from "./checkboxes/CheckboxInput";
 export { default as CheckboxItem } from "./checkboxes/CheckboxItem";
@@ -63,9 +64,11 @@ export { default as PaginationPrev } from "./pagination/PaginationPrev";
 export { default as Pagination } from "./pagination/Pagination";
 export { default as PasswordInput } from "./password-input/PasswordInput";
 export { default as PhaseBanner } from "./phase-banner/PhaseBanner";
+export { default as RadioConditional } from "./radios/RadioConditional";
 export { default as RadioDivider } from "./radios/RadioDivider";
 export { default as RadioInput } from "./radios/RadioInput";
 export { default as RadioItem } from "./radios/RadioItem";
+export { default as RadioLabel } from "./radios/RadioLabel";
 export { default as Radios } from "./radios/Radios";
 export { default as SelectOption } from "./select/SelectOption";
 export { default as Select } from "./select/Select";

package/src/radios/RadioConditional.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+type RadioConditionalProps = {
+    hidden?: boolean;
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function RadioConditional({ hidden = true, class: className, children, ...rest }: RadioConditionalProps) {
+    const classes = [
+        "govuk-radios__conditional",
+        hidden ? "govuk-radios__conditional--hidden" : "",
+        className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}

package/src/radios/RadioLabel.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+type RadioLabelProps = {
+    class?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+};
+
+export default function RadioLabel({ class: className, children, ...rest }: RadioLabelProps) {
+    const classes = ["govuk-label govuk-radios__label", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <label className={classes} {...rest}>
+            {children ?? ""}
+        </label>
+    );
+}

package/src/tag/Tag.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 type TagProps = {
-    colour?: "grey" | "green" | "turquoise" | "blue" | "light-blue" | "purple" | "pink" | "red" | "orange" | "yellow";
+    colour?: "grey" | "green" | "teal" | "turquoise" | "blue" | "light-blue" | "purple" | "magenta" | "pink" | "red" | "orange" | "yellow";
     class?: string;
     children?: ReactNode;
     [key: string]: unknown;
@@ -10,7 +10,7 @@ type TagProps = {
 export default function Tag({ colour, class: className, children, ...rest }: TagProps) {
     const classes = [
         "govuk-tag",
-        ({ "grey": "govuk-tag--grey", "green": "govuk-tag--green", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] ?? ""),
+        ({ "grey": "govuk-tag--grey", "green": "govuk-tag--green", "teal": "govuk-tag--teal", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "magenta": "govuk-tag--magenta", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] ?? ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/textarea/Textarea.tsx

@@ -1,11 +1,12 @@
 type TextareaProps = {
     error?: boolean;
     subtle?: boolean;
+    value?: string;
     class?: string;
     [key: string]: unknown;
 };
 
-export default function Textarea({ error, subtle, class: className, ...rest }: TextareaProps) {
+export default function Textarea({ error, subtle, value, class: className, ...rest }: TextareaProps) {
     const classes = [
         "govuk-textarea",
         error ? "govuk-textarea--error" : "",
@@ -16,6 +17,6 @@ export default function Textarea({ error, subtle, class: className, ...rest }: T
         .join(" ");
 
     return (
-        <textarea className={classes} {...rest}></textarea>
+        <textarea className={classes} defaultValue={value} {...rest}></textarea>
     );
 }