Develop

config-plugins/typography-plugin.js

@@ -17,11 +17,13 @@ const typography = plugin(function ({ addUtilities, theme }) {
       lineHeight: theme("lineHeight.heading1m"),
       fontWeight: theme("fontWeight.bold"),
       fontFamily: theme("fontFamily.header"),
+      paddingBottom: theme("paddingBottom.8px"),
       color: theme("colors.multi.neutrals.grey100"),
       borderBottom: theme("outline.heading-solid"),
       '@media (min-width: theme("screens.sm"))': {
         fontSize: theme("fontSize.browserh1"),
         lineHeight: theme("lineHeight.heading1"),
+        paddingBottom: theme("paddingBottom.8px"),
       },
     },
     ".heading2": {
@@ -136,6 +138,13 @@ const typography = plugin(function ({ addUtilities, theme }) {
       fontFamily: theme("fontFamily.body"),
       color: theme("colors.multi.neutrals.grey85a"),
     },
+    ".caption-heading1": {
+      fontSize: theme("fontSize.caption_heading1"),
+      lineHeight: theme("lineHeight.caption_heading1"),
+      fontWeight: theme("fontWeight.regular"),
+      fontFamily: theme("fontFamily.body"),
+      color: theme("colors.multi.neutrals.grey85a"),
+    },
 
     ".form-date": {
       fontSize: theme("fontSize.mobileh5"),

package.json

@@ -33,7 +33,7 @@
     "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.5.0",
     "release-please": "^14.17.3",
-    "sass": "^1.62.0",
+    "sass": "^1.62.1",
     "sass-loader": "^10.4.1",
     "shelljs": "^0.8.5",
     "ts-jest": "^29.1.0",

src/components/Button/Button.js

@@ -12,6 +12,8 @@ export function Button(props) {
       id={props.id}
       disabled={props.disabled}
       {...props.attributes}
+      data-testId={props?.id}
+      alt={props.iconAltText}
     >
       {props.icon && !props.iconEnd ? (
         <span className="ds-grid ds-place-items-center ds-h-8 ds-w-8">

src/components/Button/Button.stories.js

@@ -13,7 +13,7 @@ export const Supertask = Template.bind({});
 export const SupertaskIcon = Template.bind({});
 export const Primary = Template.bind({});
 export const Secondary = Template.bind({});
-export const DangerDisabled = Template.bind({});
+export const Danger = Template.bind({});
 export const Link = Template.bind({});
 
 Supertask.args = {
@@ -47,12 +47,11 @@ Secondary.args = {
   styling: "secondary",
 };
 
-DangerDisabled.args = {
+Danger.args = {
   id: "danger",
   text: "Danger Button",
+  iconEnd: false,
   styling: "danger",
-  disabled: true,
-  iconAltText: "disabled",
 };
 
 Link.args = {

src/components/Button/Button.test.js

@@ -6,13 +6,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { axe, toHaveNoViolations } from "jest-axe";
-import {
-  Primary,
-  Secondary,
-  DangerDisabled,
-  Link,
-  Supertask,
-} from "./Button.stories";
+import { Primary, Secondary, Danger, Link, Supertask } from "./Button.stories";
 
 expect.extend(toHaveNoViolations);
 
@@ -43,10 +37,8 @@ describe("Button", () => {
   });
 
   it("renders danger", () => {
-    render(<DangerDisabled {...DangerDisabled.args} />);
-    expect(screen.getByRole("button")).toHaveTextContent(
-      DangerDisabled.args.text
-    );
+    render(<Danger {...Danger.args} />);
+    expect(screen.getByRole("button")).toHaveTextContent(Danger.args.text);
     expect(screen.getByRole("button")).toHaveClass("ds-btn-danger");
   });
 

src/components/ContextualAlert/ContextualAlert.js

@@ -39,30 +39,30 @@ export function ContextualAlert(props) {
   return (
     <div
       id={id}
-      className={`ds-relative ds-min-w-290px sm:ds-px-24px ds-px-16px ${white_BG}`}
+      className={`ds-relative ds-min-w-290px sm:ds-pl-24px ds-pl-16px ${white_BG}`}
     >
       <div className="ds-absolute ds-top-3 sm:ds-left-3.5 ds-left-1.5 ds-bg-multi-neutrals-white ds-py-4px">
         {/* change back to image component once fixed */}
         <img id={alert_icon_id} src={alert_type} alt={alert_icon_alt_text} />
       </div>
       <div
-        className={`ds-overflow-auto ds-border-l-6 ${alert_color} ds-pl-8 ds-py-3 ds-leading-8`}
+        className={`ds-overflow-auto ds-border-l-6 ${alert_color} ds-pl-[24px] ds-py-[17px] ds-leading-8`}
       >
         {asHtml ? (
-          <p
+          <h3
             className="ds-heading3"
             dangerouslySetInnerHTML={{ __html: message_heading }}
           />
         ) : (
-          <p className="ds-heading3">{message_heading}</p>
+          <h3 className="ds-heading3">{message_heading}</h3>
         )}
         {asHtml ? (
           <div
-            className="ds-body ds-pt-2"
+            className="ds-body ds-pt-[12px]"
             dangerouslySetInnerHTML={{ __html: message_body }}
           />
         ) : (
-          <div className="ds-body ds-pt-2">{message_body}</div>
+          <div className="ds-body ds-pt-[12px]">{message_body}</div>
         )}
       </div>
     </div>

src/components/CustomDropdown/CustomDropdown.css

@@ -0,0 +1,55 @@
+.dropdown {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 33px;
+  color: #333333;
+  width: 100%;
+  max-width: 350px;
+}
+
+.dropdown-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  position: relative;
+  padding-left: 14px;
+  padding-right: 14px;
+  outline: none;
+  color: #6f6f6f;
+}
+
+.dropdown-open {
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 0px 0px 5px 5px;
+}
+
+.dropdown-option {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding-left: 14px;
+  cursor: pointer;
+  outline: none;
+}
+
+.dropdown-option:hover {
+  background-color: #ebf2fc;
+}
+
+.dropdown-option:focus {
+  background-color: #ebf2fc;
+}
+
+.dropdown-select:focus {
+  border: solid 2px #0e62c9;
+  box-shadow: 0px 0px 6px rgba(14, 98, 201, 0.6);
+}
+
+.dropdown-arrow {
+  position: absolute;
+  top: 28px;
+  left: 350px;
+}

src/components/CustomDropdown/CustomDropdown.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import "./CustomDropdown.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { FormError } from "../FormError/FormError";
+import SearchIcon from "../../assets/search-icon.svg";
+
+export const CustomDropdown = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(props.defaultValue);
+  const [searchOption, setSearchOption] = useState("");
+  const searchInputRef = useRef(null);
+
+  const clampedMinValue = Math.max(0, props.minValue);
+  const clampedMaxValue = Math.min(99, props.maxValue);
+
+  const handleOptionClick = (option) => {
+    setSelectedOption(option);
+    props.onChange(option);
+    setIsOpen(false);
+  };
+
+  const handleSearch = (event) => {
+    setSearchOption(event.target.value);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const numberOptions = [];
+  for (let i = clampedMinValue; i <= clampedMaxValue; i++) {
+    numberOptions.push({ id: i.toString(), value: i.toString() });
+  }
+
+  return (
+    <>
+      <div className={`dropdown ${isOpen ? "open" : ""}`}>
+        <button
+          className={`${isOpen ? "ds-rounded-t-[4px]" : "ds-rounded-[4px]"} ${
+            props.hasError ? "ds-border-[#D3080C]" : "ds-border-[#6f6f66]"
+          } dropdown-select ds-border-2`}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? (
+            <div className={`ds-flex ${props.hasSearch ? "" : "ds-hidden"}`}>
+              {!props.isNumber && <img src={SearchIcon} alt="search icon" />}
+              <input
+                type={props.isNumber ? "number" : "text"}
+                value={searchOption}
+                ref={searchInputRef}
+                onChange={handleSearch}
+                placeholder={props.isNumber ? "" : "Search..."}
+                className={`${
+                  props.isNumber ? "ds-w-12" : "ds-pl-[14px]"
+                } ds-outline-none`}
+              />
+            </div>
+          ) : (
+            selectedOption
+          )}
+          <FontAwesomeIcon
+            icon={faCaretDown}
+            style={{ color: "#666666" }}
+            className="ds-absolute ds-right-0 ds-px-[14px]"
+          />
+        </button>
+        <div className="dropdown-open">
+          {isOpen && (
+            <ul className="dropdown-options">
+              {props.isNumber
+                ? numberOptions
+                    .filter((option) => option.value.includes(searchOption))
+                    .map((option, index) => (
+                      <li
+                        key={option.id}
+                        className={`${
+                          index === 0
+                            ? "ds-border-none"
+                            : "ds-border-t-[1px] ds-border-[#666666] ds-border-opacity-60"
+                        } ${option.value === selectedOption ? "selected" : ""}`}
+                      >
+                        <button
+                          onClick={() => handleOptionClick(option.value)}
+                          className="dropdown-option"
+                        >
+                          {option.value}
+                        </button>
+                      </li>
+                    ))
+                : props.options
+                    .filter((option) =>
+                      option.value
+                        .toLowerCase()
+                        .includes(searchOption.toLowerCase())
+                    )
+                    .map((option, index) => (
+                      <li
+                        key={option.id}
+                        className={`${
+                          index === 0
+                            ? "ds-border-none"
+                            : "ds-border-t-[1px] ds-border-[#666666] ds-border-opacity-60"
+                        } ${option.value === selectedOption ? "selected" : ""}`}
+                      >
+                        <button
+                          onClick={() => handleOptionClick(option.value)}
+                          className="dropdown-option"
+                        >
+                          {option.value}
+                        </button>
+                      </li>
+                    ))}
+            </ul>
+          )}
+        </div>
+        {props.hasError && <FormError errorMessage={props.errorText} />}
+      </div>
+    </>
+  );
+};
+
+CustomDropdown.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string, value: PropTypes.string })
+  ),
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minValue: PropTypes.number,
+  maxValue: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  hasError: PropTypes.bool,
+  errorText: PropTypes.string,
+  isNumber: PropTypes.bool,
+};

src/components/CustomDropdown/CustomDropdown.stories.js

@@ -0,0 +1,42 @@
+import { CustomDropdown } from "./CustomDropdown";
+export default {
+  title: "Components/CustomDropdown",
+  component: CustomDropdown,
+};
+
+const Template = (args) => <CustomDropdown {...args} />;
+
+export const Default = Template.bind({});
+export const HasSearch = Template.bind({});
+export const HasError = Template.bind({});
+
+Default.args = {
+  hasSearch: false,
+  defaultValue: "Select [insert topic]",
+  options: [
+    { id: "1", value: "option 1" },
+    { id: "2", value: "option 2" },
+    { id: "3", value: "option 3" },
+  ],
+};
+
+HasSearch.args = {
+  hasSearch: true,
+  defaultValue: "option 1",
+  options: [
+    { id: "1", value: "option 1" },
+    { id: "2", value: "option 2" },
+    { id: "3", value: "option 3" },
+  ],
+};
+
+HasError.args = {
+  hasError: true,
+  defaultValue: "option 1",
+  options: [
+    { id: "1", value: "option 1" },
+    { id: "2", value: "option 2" },
+    { id: "3", value: "option 3" },
+  ],
+  errorText: "Cutom error text",
+};