govuk-react-components-library/src/components/DataNavigation/DataNavigation.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
118
119
120
121
122
import React from "react";
import { DataNavigationProps } from "./DataNavigation.types";
import { Button } from "../Button";
import { Label } from "../Label";

const DataNavigation: React.FC<DataNavigationProps> = ({
  dataId,
  setDataFocus,
  previousText = "Previous",
  previousCondition,
  nextText = "Next",
  nextCondition,
  dataDescription,
  buttonColour,
  buttonTextColour,
  buttonShadowColour,
  buttonHoverColour,
  buttonHoverTextColour,
}) => {
  // CSS custom properties set directly on each <button> element via Button's
  // ...attributes spread, so they sit on the same element that
  // .app-data-navigation-button targets — no inheritance from a parent div needed.
  const inlineVars = {
    ...(buttonColour && { "--data-nav-button-colour": buttonColour }),
    ...(buttonTextColour && {
      "--data-nav-button-text-colour": buttonTextColour,
    }),
    ...(buttonShadowColour && {
      "--data-nav-button-shadow-colour": buttonShadowColour,
    }),
    ...(buttonHoverColour && {
      "--data-nav-button-hover-colour": buttonHoverColour,
    }),
    ...(buttonHoverTextColour && {
      "--data-nav-button-hover-text-colour": buttonHoverTextColour,
    }),
  } as React.CSSProperties;

  const hasInlineVars = Object.keys(inlineVars).length > 0;

  const renderNavButton = (
    id: string,
    onClick: () => void,
    disabled: boolean,
    content: React.ReactNode,
  ) => (
    <Button
      id={id}
      onClick={onClick}
      data-testid={id}
      disabled={disabled}
      className="app-data-navigation-button"
      {...(hasInlineVars && { style: inlineVars })}
    >
      {content}
    </Button>
  );

  return (
    <div className="govuk-grid-row">
      {/* Previous Button */}
      <div className="govuk-grid-column-one-third govuk-!-text-align-left">
        {renderNavButton(
          "previous-data",
          () => setDataFocus(dataId - 1),
          previousCondition,
          <>
            <svg
              className="govuk-button__start-icon back-button"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              aria-hidden="true"
              focusable="false"
              transform="rotate(180)"
            >
              <path
                fill="currentColor"
                d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"
              />
            </svg>
            &nbsp;{previousText}
          </>,
        )}
      </div>

      {/* Data Description Label */}
      <div className="govuk-grid-column-one-third govuk-!-text-align-centre">
        <Label>{dataDescription}</Label>
      </div>

      {/* Next Button */}
      <div className="govuk-grid-column-one-third govuk-!-text-align-right">
        {renderNavButton(
          "next-data",
          () => setDataFocus(dataId + 1),
          nextCondition,
          <>
            {nextText}
            <svg
              className="govuk-button__start-icon"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              aria-hidden="true"
              focusable="false"
            >
              <path
                fill="currentColor"
                d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"
              />
            </svg>
          </>,
        )}
      </div>
    </div>
  );
};

export default DataNavigation;