govuk-react-components-library/src/components/Button/Button.tsx at main · LandRegistry/govuk-react-components-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, JSX } from "react";
import { LinkWithRef } from "../LinkWithRef";
import { ButtonProps } from "./Button.types";

const Button: React.FC<
  ButtonProps &
    ButtonHTMLAttributes<HTMLButtonElement> &
    AnchorHTMLAttributes<HTMLAnchorElement>
> = (props) => {
  const {
    element,
    href,
    to,
    isStartButton,
    disabled,
    className,
    preventDoubleClick,
    name,
    type,
    children,
    ...attributes
  } = props;

  let el: string = "";
  let buttonAttributes: { [key: string]: unknown } = {
    name,
    type,
    ...attributes,
    "data-module": "govuk-button",
  };
  let buttonElement: JSX.Element | null = null;

  if (element) {
    el = element;
  } else if (href || to) {
    el = "a";
  } else {
    el = "button";
  }

  let iconHtml: JSX.Element | undefined;
  if (isStartButton) {
    iconHtml = (
      <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>
    );
  }

  const commonAttributes = {
    className: `govuk-button ${className || ""}${disabled ? " govuk-button--disabled" : ""} ${isStartButton ? "govuk-button--start" : ""}`,
    // ref: buttonRef,
  };

  if (preventDoubleClick) {
    buttonAttributes["data-prevent-double-click"] = preventDoubleClick;
  }

  if (disabled) {
    buttonAttributes = {
      ...buttonAttributes,
      "aria-disabled": "true",
      disabled: true,
    };
  }

  if (el === "a") {
    const linkAttributes: { [key: string]: unknown } = {
      ...commonAttributes,
      role: "button",
      draggable: "false",
      ...attributes,
      "data-module": "govuk-button",
      href,
      to,
    };

    buttonElement = (
      <LinkWithRef {...linkAttributes}>
        {children}
        {iconHtml}
      </LinkWithRef>
    );
  } else if (el === "button") {
    buttonElement = (
      <button {...buttonAttributes} {...commonAttributes}>
        {children}
        {iconHtml}
      </button>
    );
  } else if (el === "input") {
    if (!type) {
      buttonAttributes.type = "submit";
    }
    buttonElement = (
      <input
        value={children as string}
        {...buttonAttributes}
        {...commonAttributes}
      />
    );
  }

  return buttonElement;
};

Button.displayName = "Button";

export default Button;