All Updates Page + Updated Homepage + Updated Article and Project Pag…

…es (#1049) * fix dictionary offset * use new scLabProject property in ExploreUpdates * remove slice from filterItems.js * remove hardcoded updatesData, replace with persisted query * create All Updates page * create MultiSelectField component * Project page unit tests (#1040) * updated mockStore.js to include current projects * removed updatesData query from pages since the data is available through the pageData object, updated props value for updatesData * added unit testing for pages * updated mockStore.js to include current projects * updated mockStore.js * added experiments data import to OAS benefits navigator test * create i18n files for MultiSelect * [Snyk] Upgrade sharp from 0.33.3 to 0.33.4 (#1037) * fix: upgrade sharp from 0.33.3 to 0.33.4 Snyk has created this PR to upgrade sharp from 0.33.3 to 0.33.4. See this package in yarn: sharp See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * [Snyk] Upgrade @apollo/client from 3.10.1 to 3.10.4 (#1041) * fix: upgrade @apollo/client from 3.10.1 to 3.10.4 Snyk has created this PR to upgrade @apollo/client from 3.10.1 to 3.10.4. See this package in yarn: @apollo/client See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * [Snyk] Upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2 (#1042) * fix: upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2 Snyk has created this PR to upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2. See this package in yarn: @fortawesome/react-fontawesome See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * [Snyk] Upgrade @types/react from 18.3.2 to 18.3.3 (#1043) * fix: upgrade @types/react from 18.3.2 to 18.3.3 Snyk has created this PR to upgrade @types/react from 18.3.2 to 18.3.3. See this package in yarn: @types/react See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * Image vertical line content update (#1047) * updated mockStore.js to include current projects * removed updatesData query from pages since the data is available through the pageData object, updated props value for updatesData * added unit testing for pages * updated mockStore.js to include current projects * updated mockStore.js * added experiments data import to OAS benefits navigator test * updated ImageVerticalLineContent component to include optional collapse, also updated unit test and storybook entry * updated TextWithImage component to include optional collapse in the case of image-vertical-line-content, also updated unit test and storybook entry * added CollapseData to mock store so it can be reused by each component that has a Collapse * updated FragmentRender.js to include TextRender component for fragments that have children prop, also removed unused generateCollapseElements() call, also updated unit test and storybook entry * updated ImageWithCollapse unit test to check that the collapse is opened after being clicked * Revert "updated ImageWithCollapse unit test to check that the collapse is opened after being clicked" This reverts commit 08f0333. * updated ImageWithCollapse unit test to check that the collapse is opened after being clicked, also updated storybook entry to include TextRender component * added data-testid to elements for testing * removed unused imports * added switch case to SCLabs-Comp-Content-Image-v1 that only sets title, longDesc and children props if the layout is image-vertical-line-content, without this the app was failing to build in prod * added storybook entry and unit test for TextWithImage w/Collapse * updated Collapse Data to more accurately represent data in testing * updated FragmentRender storybook entry and unit test * updated ImageVerticalLineContent component to match dashboard page design * updated ImageVerticalLineContent story and unit test * updated ImageWithCollapse story and unit test * updated TextWithImage story and unit test * commented out feature-section div so that we dont forget about it. uncomment and view in storybook to see that design matches dashboard page * [Snyk] Upgrade sharp from 0.33.3 to 0.33.4 (#1037) * fix: upgrade sharp from 0.33.3 to 0.33.4 Snyk has created this PR to upgrade sharp from 0.33.3 to 0.33.4. See this package in yarn: sharp See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> * [Snyk] Upgrade @apollo/client from 3.10.1 to 3.10.4 (#1041) * fix: upgrade @apollo/client from 3.10.1 to 3.10.4 Snyk has created this PR to upgrade @apollo/client from 3.10.1 to 3.10.4. See this package in yarn: @apollo/client See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * [Snyk] Upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2 (#1042) * fix: upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2 Snyk has created this PR to upgrade @fortawesome/react-fontawesome from 0.2.0 to 0.2.2. See this package in yarn: @fortawesome/react-fontawesome See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * [Snyk] Upgrade @types/react from 18.3.2 to 18.3.3 (#1043) * fix: upgrade @types/react from 18.3.2 to 18.3.3 Snyk has created this PR to upgrade @types/react from 18.3.2 to 18.3.3. See this package in yarn: @types/react See this project in Snyk: https://app.snyk.io/org/p0nder0sa/project/270b554d-5de8-452f-ad01-8bceb7604a92?utm_source=github&utm_medium=referral&page=upgrade-pr * update yarn.lock --------- Co-authored-by: snyk-bot <[email protected]> * add wrapper to ImageVerticalLineContent story --------- Co-authored-by: Kris Charbonneau <[email protected]> Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jordan <[email protected]> Co-authored-by: Jordan Willis <[email protected]> * update MultiSelect a11y translations * add react-select as dependency * increase h2l line-height value * update MultiSelect component * allow for custom styling of Card.js heading * create util function getDictionaryTerm * update ExploreUpdates section to use getDctionaryTerm * dictionary prop on home passed in as array * update updates.js * include scLabProject in project/article queries * remove superfuous check in ProjectInfo.test.js * allow excluding H1s in FragmentRender * ExploreUpdates story consumes dictionary directly * sort updates newest->oldest and remove unused imports * pages use getDictionaryTerm and pass in dictionary array directly * update yarn.lock * slice projects array in project page ExploreProjects * pass TextRender to FragmentRender SCLabs-Image-v1 * update Dashboard page and query to support FragmentRender * update unit tests * add new AEM_BASE_URL var (#1050) * linting --------- Co-authored-by: Marcus Blais <[email protected]> Co-authored-by: Kris Charbonneau <[email protected]> Co-authored-by: snyk-bot <[email protected]>
DTS-STN · Jun 21, 2024 · d1ecdee · d1ecdee
1 parent ae1833b
commit d1ecdee
Show file tree

Hide file tree

Showing 47 changed files with 3,912 additions and 7,566 deletions.
diff --git a/__mocks__/mockStore.js b/__mocks__/mockStore.js
diff --git a/__tests__/pages/benefits-navigator.test.js b/__tests__/pages/benefits-navigator.test.js
@@ -13,9 +13,9 @@ describe("Benefits Navigator", () => {
       <BenefitsNavigatorOverview
         pageData={benefitsNavigatorData.data.sclabsPageV1ByPath}
         updatesData={benefitsNavigatorUpdatesData}
-        dictionary={dictionaryData.data.dictionaryV1List}
+        dictionary={dictionaryData.data.dictionaryV1List.items}
         allProjects={experimentsData.data.scLabsPagev1List.items}
-      />
+      />,
     );
   });
 });
diff --git a/__tests__/pages/dashboard.test.js b/__tests__/pages/dashboard.test.js
@@ -13,9 +13,9 @@ describe("MSCA Dashboard", () => {
       <MscaDashboard
         pageData={dashboardData.data.sclabsPageV1ByPath}
         updatesData={dashboardUpdatesData}
-        dictionary={dictionaryData.data.dictionaryV1List}
+        dictionary={dictionaryData.data.dictionaryV1List.items}
         allProjects={experimentsData.data.scLabsPagev1List.items}
-      />
+      />,
     );
   });
 });
diff --git a/__tests__/pages/digital-standards-playbook.test.js b/__tests__/pages/digital-standards-playbook.test.js
@@ -13,9 +13,9 @@ describe("Digital Standards Playbook", () => {
       <DigitalStandardsPlaybookPage
         pageData={playbookData.data.sclabsPageV1ByPath}
         updatesData={playbookUpdatesData}
-        dictionary={dictionaryData.data.dictionaryV1List}
+        dictionary={dictionaryData.data.dictionaryV1List.items}
         allProjects={experimentsData.data.scLabsPagev1List.items}
-      />
+      />,
     );
   });
 });
diff --git a/__tests__/pages/home.test.js b/__tests__/pages/home.test.js
@@ -6,20 +6,21 @@ import Home from "../../pages/home";
 import { homePageData } from "../../__mocks__/mockStore";
 import { experimentsData } from "../../__mocks__/mockStore";
 import { dictionaryData } from "../../__mocks__/mockStore";
-
+import { benefitsNavigatorUpdatesData } from "../../__mocks__/mockStore";
 describe("Home", () => {
   it("renders without crashing", () => {
     render(
       <Home
         pageData={homePageData.data.sclabsPageV1ByPath}
         experimentsData={experimentsData.data.scLabsPagev1List.items}
-        dictionary={dictionaryData.data.dictionaryV1List}
-      />
+        dictionary={dictionaryData.data.dictionaryV1List.items}
+        updatesData={benefitsNavigatorUpdatesData}
+      />,
     );
     expect(
       screen.getByRole("heading", {
         name: "Laboratoires de Service Canada",
-      })
+      }),
     ).toBeInTheDocument();
   });
 });
diff --git a/__tests__/pages/making-easier-get-benefits.test.js b/__tests__/pages/making-easier-get-benefits.test.js
@@ -13,9 +13,9 @@ describe("Integrated Channel Strategy", () => {
       <IntegratedChannelStrategyPage
         pageData={ICSData.data.sclabsPageV1ByPath}
         updatesData={ICSUpdatesData}
-        dictionary={dictionaryData.data.dictionaryV1List}
+        dictionary={dictionaryData.data.dictionaryV1List.items}
         allProjects={experimentsData.data.scLabsPagev1List.items}
-      />
+      />,
     );
   });
 });
diff --git a/__tests__/pages/oas-benefits-estimator.test.js b/__tests__/pages/oas-benefits-estimator.test.js
@@ -14,9 +14,9 @@ describe("OAS Benefits Estimator", () => {
       <OasBenefitsEstimator
         pageData={oasBenefitsEstimatorData.data.sclabsPageV1ByPath}
         updatesData={oasUpdatesData}
-        dictionary={dictionaryData.data.dictionaryV1List}
+        dictionary={dictionaryData.data.dictionaryV1List.items}
         allProjects={shuffle(experimentsData.data.scLabsPagev1List.items)}
-      />
+      />,
     );
   });
 });
diff --git a/components/atoms/MultiSelectField.js b/components/atoms/MultiSelectField.js
@@ -0,0 +1,238 @@
+import PropTypes from "prop-types";
+import { useTranslation } from "next-i18next";
+import Select, { components } from "react-select";
+import { useState } from "react";
+
+export function MultiSelectField(props) {
+  const { t } = useTranslation("multiSelect");
+
+  const removeItem = (e) => {
+    let filteredArray = props.selectedOptions.filter((obj) => {
+      return obj.value !== e.currentTarget.id;
+    });
+    props.onChange(filteredArray);
+  };
+
+  const Option = (props) => {
+    return (
+      <components.Option {...props}>
+        <div className="flex">
+          <input
+            className="flex-none"
+            aria-labelledby="optionLabel"
+            type="checkbox"
+            checked={props.isSelected}
+            onChange={() => null}
+          />{" "}
+          <label className="flex-auto pl-3" id="optionLabel">
+            {props.label}
+          </label>
+        </div>
+      </components.Option>
+    );
+  };
+
+  const selectedOptionsPills = props.options
+    .filter((option) => {
+      const selectedOptionsIds = new Set();
+      props.selectedOptions.forEach((o) => selectedOptionsIds.add(o.id));
+      return selectedOptionsIds.has(option.id);
+    })
+    .map((option) => {
+      return (
+        <div
+          key={option.value}
+          className="flex bg-custom-gray-lighter rounded-[16px] my-1 px-3 py-1 text-sm font-body font-semibold"
+        >
+          <span className="self-center">{option.label}</span>
+          <div className="flex pl-2">
+            <button
+              aria-label={`${t("ariaPillsRemove")}${option.label}`}
+              className="self-center"
+              id={option.value}
+              onClick={removeItem}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      );
+    });
+
+  return (
+    <div
+      className={`block leading-tight${
+        props.className ? " " + props.className : " mb-10px"
+      }`}
+    >
+      <label
+        id="multiSelectLabel"
+        className={`select-field-label block leading-tight text-sm lg:text-p font-body mb-2 ${
+          props.boldLabel ? "font-semibold" : ""
+        }`}
+      >
+        {props.label}
+        {/* {ariaFocusMessage} */}
+      </label>
+      <Select
+        aria-labelledby="multiSelectLabel"
+        placeholder={props.placeholder}
+        // ariaLiveMessages={{ onFocus }}
+        controlShouldRenderValue={false}
+        isMulti
+        isClearable
+        escapeClearsValue
+        backspaceRemovesValue
+        isSearchable={false}
+        // noOptionsMessage={() => "no options friendo"}
+        options={props.options}
+        onChange={props.onChange}
+        components={{ Option }}
+        closeMenuOnSelect={false}
+        hideSelectedOptions={false}
+        value={props.selectedOptions}
+        styles={{
+          control: (baseStyles, state) => ({
+            ...baseStyles,
+            borderWidth: "2px",
+            borderColor: "black",
+            borderRadius: "3px",
+            boxShadow: state.isFocused ? "0 0 0 2px #2684FF" : "",
+          }),
+          dropdownIndicator: (baseStyles) => ({
+            ...baseStyles,
+            color: "black",
+          }),
+          indicatorSeparator: (baseStyles) => ({
+            ...baseStyles,
+            display: "none",
+          }),
+          clearIndicator: (baseStyles) => ({
+            ...baseStyles,
+            display: "none",
+            color: "black",
+          }),
+          placeholder: (baseStyles) => ({
+            ...baseStyles,
+            color: "black",
+            fontSize: "20px",
+          }),
+          menu: (baseStyles) => ({
+            ...baseStyles,
+            marginTop: "0px",
+            borderWidth: "1px",
+            borderColor: "black",
+            borderRadius: "3px",
+          }),
+          option: (baseStyles, state) => ({
+            ...baseStyles,
+            color: "black",
+            fontWeight: "600",
+            fontSize: "20px",
+            backgroundColor: state.isFocused ? "#b2d4ff" : "white",
+          }),
+          multiValueLabel: (baseStyles) => ({
+            ...baseStyles,
+            fontSize: "20px",
+            fontWeight: "500",
+          }),
+          multiValueRemove: (baseStyles) => ({
+            ...baseStyles,
+            color: "black",
+            fontSize: "20px",
+            fontWeight: "500",
+          }),
+        }}
+      />
+      <div className="mt-1 flex flex-col items-start">
+        {selectedOptionsPills}
+      </div>
+    </div>
+  );
+}
+
+MultiSelectField.defaultProps = {
+  value: "",
+};
+
+MultiSelectField.propTypes = {
+  /**
+   * additional css for the component
+   */
+  className: PropTypes.string,
+
+  /**
+   * the id of the text field
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * the name of the text field
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * the label of the text field
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * whether ot not the field is required
+   */
+  required: PropTypes.bool,
+
+  /**
+   * value of the text field
+   */
+  value: PropTypes.string.isRequired,
+
+  /**
+   * call back for when the value of the text field changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * message to display if there is an error
+   */
+  error: PropTypes.string,
+
+  /**
+   * Other option for dropdown
+   */
+  other: PropTypes.bool,
+
+  /**
+   * if label should be bold
+   */
+  boldLabel: PropTypes.bool,
+
+  /**
+   * boolean flag to specify that this input should be uncontrolled by react
+   */
+  uncontrolled: PropTypes.bool,
+
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    })
+  ),
+
+  /**
+   * unit test selector
+   */
+  dataTestId: PropTypes.string,
+
+  /**
+   * cypress tests selector
+   */
+  dataCy: PropTypes.string,
+
+  /**
+   * if true, skip sorting the options
+   */
+  ignoreSort: PropTypes.bool,
+};
diff --git a/components/atoms/MultiSelectField.stories.js b/components/atoms/MultiSelectField.stories.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { MultiSelectField } from "./MultiSelectField";
+
+export default {
+  title: "Components/Atoms/MultiSelectField",
+  component: MultiSelectField,
+  decorators: [
+    (Story) => (
+      <div className="w-full flex justify-center">
+        <div className="w-96">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+const Template = (args) => <MultiSelectField {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  id: "select-field-1",
+  name: "selectField1",
+  label: "I am a select field",
+  uncontrolled: true,
+  dataTestId: "select-field-1",
+  boldLabel: true,
+  defaultOption: {
+    id: "defaultOption",
+    name: "Select option(s)",
+    value: "defaultOption",
+  },
+  options: [
+    {
+      id: "option1",
+      name: "Option 1",
+      value: "option1",
+    },
+    {
+      id: "option2",
+      name: "Option 2",
+      value: "option2",
+    },
+    {
+      id: "option3",
+      name: "Option 3",
+      value: "option3",
+    },
+    {
+      id: "option4",
+      name: "Option 4",
+      value: "option4",
+    },
+  ],
+};
diff --git a/components/atoms/ProjectInfo.stories.js b/components/atoms/ProjectInfo.stories.js
@@ -13,5 +13,5 @@ Primary.args = {
   dateStarted: "2021-01-01",
   dateEnded: "2022-03-31",
   stage: "Alpha",
-  summary: "Project status",
+  summary: "Project summary",
 };
diff --git a/components/atoms/ProjectInfo.test.js b/components/atoms/ProjectInfo.test.js
@@ -15,11 +15,9 @@ describe("ProjectInfo tests", () => {
     const dateStarted = screen.getByText("2021-01-01");
     const dateEnded = screen.getByText("2022-03-31");
     const stage = screen.getByText("Alpha");
-    const status = screen.getByText("Project status");
     expect(dateStarted).toBeTruthy();
     expect(dateEnded).toBeTruthy();
     expect(stage).toBeTruthy();
-    expect(status).toBeTruthy();
   });
 
   it("has no a11y violations", async () => {