initial commit (#871)

second commit

components/atoms/ProjectInfo.js

@@ -1,22 +1,17 @@
 import PropTypes from "prop-types";
-import { useTranslation } from "next-i18next";
-import { useState } from "react";
-import { HelpIcon } from "@dts-stn/service-canada-design-system";
+import { HelpIcon } from "../design-system/HelpIcon";
 
 export function ProjectInfo(props) {
-  const { t } = useTranslation("common");
-  const [showInfo, setShowInfo] = useState(false);
-
   return (
     <>
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-x-2 text-[20px]">
         <strong className="font-body col-span-1">{props.termStarted}</strong>
         <p className="col-span-2">
-          {!props.dateStarted ? undefined : props.dateStarted.substring(0, 10)}
+          {props.dateStarted && props.dateStarted.substring(0, 10)}
         </p>
         <strong className="font-body col-span-1">{props.termEnded}</strong>
         <p className="col-span-2">
-          {!props.dateEnded ? undefined : props.dateEnded.substring(0, 10)}
+          {props.dateEnded && props.dateEnded.substring(0, 10)}
         </p>
         <strong className="font-body col-span-1 my-auto">
           {props.termStage}

components/design-system/Button.jsx

@@ -0,0 +1,148 @@
+import PropTypes from "prop-types";
+import { Image } from "./Image";
+
+export function Button(props) {
+  const style = "btn-" + props.styling;
+  return props.href === "no ref" ? (
+    <button
+      className={`flex flex-row ${style} focus:ring focus:ring-offset-4 ${props.className} `}
+      onClick={props.onClick}
+      type={props.type}
+      id={props.id}
+      disabled={props.disabled}
+      {...props.attributes}
+      alt={props.iconAltText}
+    >
+      {props.icon && !props.iconEnd ? (
+        <span className="grid place-items-center h-8 w-8">
+          <Image className="pr-2" src={props.icon} alt={props.iconAltText} />
+        </span>
+      ) : undefined}
+      {props.text}
+      {props.children}
+      {props.icon && props.iconEnd ? (
+        <span className="grid place-items-center h-8 w-8">
+          <Image className="pl-2" src={props.icon} alt={props.iconAltText} />
+        </span>
+      ) : undefined}
+    </button>
+  ) : (
+    <a
+      href={props.href}
+      className={`flex flex-row ${
+        props.styling !== "none" ? "btn-link" : ""
+      } focus:ring focus:ring-offset-4 ${props.className}`}
+      onClick={props.onClick}
+      id={props.id}
+      disabled={props.disabled}
+      role="button"
+    >
+      {props.icon && !props.iconEnd ? (
+        <Image
+          className="h-8 w-8 pr-2"
+          src={props.icon}
+          alt={props.iconAltText}
+        />
+      ) : undefined}
+      {props.text}
+      {props.children}
+      {props.icon && props.iconEnd ? (
+        <div className="grid place-items-center h-8 w-8">
+          <Image
+            className="pl-5 pb-3"
+            src={props.icon}
+            alt={props.iconAltText}
+          />
+        </div>
+      ) : undefined}
+    </a>
+  );
+}
+
+Button.defaultProps = {
+  id: "btn1",
+  styling: "supertask",
+  text: "default",
+  href: "no ref",
+};
+
+Button.propTypes = {
+  /**
+   * Identify which button being clicked
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * User must input one of the follow button styles to apply
+   * to their button. To apply the link style, the user must
+   * also add a value to the href prop
+   */
+  styling: PropTypes.oneOf([
+    "supertask",
+    "primary",
+    "secondary",
+    "danger",
+    "link",
+    "none",
+  ]),
+
+  /**
+   * The text that the button will display
+   */
+  text: PropTypes.string.isRequired,
+
+  /**
+   * This will add a img inside the button when needed
+   */
+  icon: PropTypes.string,
+
+  /**
+   * Alt text for icon added to button
+   */
+  iconAltText: PropTypes.string,
+
+  /**
+   * This is for placing an icon at the end of the component
+   */
+  iconEnd: PropTypes.bool,
+
+  /**
+   * Use when button redirects to a new page.
+   * Automatically applies the Link styling
+   */
+  href: PropTypes.string,
+
+  /**
+   * the type of the button
+   */
+  type: PropTypes.oneOf(["submit", "reset", "button"]),
+
+  /**
+   * Callback for a click event on the button
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * bool to disable a button
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * css overrides for button
+   */
+  className: PropTypes.string,
+
+  /**
+   * additional attributes for button
+   */
+  attributes: PropTypes.object,
+
+  /**
+   * any other elements you want to add to the button
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]),
+};

components/design-system/CTA.jsx

@@ -0,0 +1,38 @@
+import { Button } from "./Button";
+import { Link } from "./Link";
+import { Image } from "./Image";
+
+export function CTA({
+  heading,
+  body,
+  ButtonProps,
+  LinkProps,
+  containerClass = "",
+}) {
+  return (
+    <div className="bg-multi-blue-blue2 p-3">
+      <div className={`flex flex-row ${containerClass}`}>
+        <div className="flex flex-col w-[60px] shrink-0">
+          <Image alt="icon" src="/comment_bubble.svg" className="w-[60px]" />
+          <div className="flex-grow divide-x-2 divide-multi-blue-blue60a flex flex-row justify-center mt-3">
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+        <div className="pt-0 pl-5">
+          <h3 className={`leading-[40px] text-multi-neutrals-grey100`}>
+            {heading}
+          </h3>
+          <p className="body">{body}</p>
+          <Button
+            styling="primary"
+            className="my-3"
+            type="button"
+            {...ButtonProps}
+          />
+          {LinkProps && <Link {...LinkProps} />}
+        </div>
+      </div>
+    </div>
+  );
+}

components/design-system/Collapse.jsx

@@ -0,0 +1,52 @@
+import PropTypes from "prop-types";
+
+export function Collapse(props) {
+  const { id, title, children } = props;
+  return (
+    <details
+      key={id}
+      id={id}
+      className="mb-[5px] text-multi-neutrals-grey100 leading-[33px]  text-mobileh5 font-body"
+    >
+      <summary
+        key={`summary-${id}`}
+        className="text-multi-blue-blue60d hover:hover:text-multi-blue-blue50b hover:underline border border-multi-neutrals-grey40 rounded px-[15px] py-[5px] cursor-pointer select-none outline-none"
+      >
+        {title}
+      </summary>
+      <div className="border border-multi-neutrals-grey40 rounded-b px-[18px] py-[5px] cursor-pointer select-none outline-none">
+        {children}
+      </div>
+    </details>
+  );
+}
+
+Collapse.defaultProps = {
+  id: "defaultAccordion",
+};
+
+Collapse.propTypes = {
+  /**
+   * component id
+   */
+  id: PropTypes.string,
+
+  /**
+   * Title of the collapsible header
+   */
+  title: PropTypes.string,
+
+  /**
+   * code passed in to fill the expanded area.
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]),
+
+  /**
+   * Test id for unit test
+   */
+  dataTestId: PropTypes.string,
+};

components/design-system/ContextualAlert.jsx

@@ -0,0 +1,117 @@
+import PropTypes from "prop-types";
+
+export function ContextualAlert(props) {
+  const warning_img = "/warning_img.svg";
+  const danger_img = "/danger_img.svg";
+  const info_img = "/info_img.svg";
+  const success_img = "/success_img.svg";
+
+  const {
+    message_heading,
+    message_body,
+    id,
+    type,
+    alert_icon_id,
+    alert_icon_alt_text,
+    asHtml,
+    whiteBG,
+  } = props;
+
+  const alert_type =
+    type === "warning"
+      ? warning_img
+      : type === "danger"
+      ? danger_img
+      : type === "info"
+      ? info_img
+      : success_img;
+
+  const alert_color =
+    type === "warning"
+      ? "border-specific-orange-orange50"
+      : type === "danger"
+      ? "border-specific-red-red50b"
+      : type === "info"
+      ? "border-specific-cyan-cyan50"
+      : "border-specific-green-green50a";
+
+  let white_BG = whiteBG ? "bg-multi-neutrals-white" : " ";
+
+  return (
+    <div
+      id={id}
+      className={`relative min-w-[290px] sm:pl-[24px] pl-[16px] ${white_BG}`}
+    >
+      <div className="absolute top-3 sm:left-3.5 left-1.5 bg-multi-neutrals-white 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={`overflow-auto border-l-6 ${alert_color} pl-[24px] py-[17px] leading-8`}
+      >
+        {asHtml ? (
+          <h3
+            className="leading-heading3 ml-1"
+            dangerouslySetInnerHTML={{ __html: message_heading }}
+          />
+        ) : (
+          <h3 className="leading-heading3 ml-1">{message_heading}</h3>
+        )}
+        {asHtml ? (
+          <div
+            className="font-body ml-0.5 text-lg"
+            dangerouslySetInnerHTML={{ __html: message_body }}
+          />
+        ) : (
+          <div className="font-body ml-0.5 text-lg">{message_body}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+ContextualAlert.propTypes = {
+  /**
+   * component id
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * alert type
+   */
+  type: PropTypes.oneOf(["warning", "info", "success", "danger"]).isRequired,
+
+  /**
+   * id for the alert icon
+   */
+  alert_icon_id: PropTypes.string.isRequired,
+
+  /**
+   * Alternate text for the alert icon
+   */
+  alert_icon_alt_text: PropTypes.string.isRequired,
+
+  /**
+   * heading text
+   */
+  message_heading: PropTypes.string.isRequired,
+
+  /**
+   * body text
+   */
+  message_body: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+  ]).isRequired,
+
+  /**
+   * HTML toggle. Determines if text is parsed as plain text or HTML.
+   */
+  asHtml: PropTypes.bool,
+
+  /**
+   * If true the background will be white, default is transparent.
+   */
+  whiteBG: PropTypes.bool,
+};