Add a Month picker & other fixes

CHANGELOG.md

@@ -167,6 +167,24 @@ Follow the migration guide for app upgrades to v6
 * prop for secondary dividers ([1fbd983](https://github.com/nulogy/design-system/commit/1fbd98307177dfc3faaab84390599c14f642d636))
 * release v11 changes ([0157626](https://github.com/nulogy/design-system/commit/01576268850325d54598d7e8b7f70fdd0a4c4671))
 
+# [11.1.0](https://github.com/nulogy/design-system/compare/v11.0.0...v11.1.0) (2024-11-15)
+
+### Features
+
+* add a BottomSheet component ([9f6eddd](https://github.com/nulogy/design-system/commit/9f6eddd7d0aa3e6038cb9fc6d70640fa20dcb7dd))
+* add a component spec ([2e1a59c](https://github.com/nulogy/design-system/commit/2e1a59c6dff88d5e157fe5ff5cb0512314aa0545))
+* add BottomSheet parts ([6b8ad6c](https://github.com/nulogy/design-system/commit/6b8ad6cb60db70b0e516e64e0499ee169f1ed73b))
+* Add documentation and refine the API ([1ef3c5f](https://github.com/nulogy/design-system/commit/1ef3c5fb9e4d6192b5e03167c22f296ab51fdb6e))
+* further refine the API, stories, and documentation ([fd308f9](https://github.com/nulogy/design-system/commit/fd308f93c904a08435186920b59dc38f27b72cb3))
+* improve BottomSheet API and types ([fe42f8b](https://github.com/nulogy/design-system/commit/fe42f8b3b4232ad44f89c5ad1e663747d4e758aa))
+* test the BottomSheet interactivity ([463fd2d](https://github.com/nulogy/design-system/commit/463fd2d252342208ade5e89edcf805e6ab2ab04d))
+
+### Bug Fixes
+
+* cypress global scope const declaration ([029fb35](https://github.com/nulogy/design-system/commit/029fb35186616a34bde7fd2844e07a1cab174b09))
+* minor format/copy corrections ([e4b8458](https://github.com/nulogy/design-system/commit/e4b8458d19addd22ced78f54407e5499712eded2))
+* unused parameter ([9959206](https://github.com/nulogy/design-system/commit/99592060dc5da4881eca903c9e6f9b74ba8e9a6b))
+
 # [11.0.0](https://github.com/nulogy/design-system/compare/v10.4.0...v11.0.0) (2024-11-25)
 
 
@@ -226,133 +244,6 @@ Follow the migration guide for app upgrades to v6
 * update theme ([08ab964](https://github.com/nulogy/design-system/commit/08ab9645598dfb988f27c00159ee504d964f6d4f))
 
 
-### BREAKING CHANGES
-
-* removes the old unused NavBar component that was
-replaced with the BrandedNavBar
-* removes the `icon` and `iconSize` props from the input
-in-favor of `iconLeft`, `iconRight`, `iconRightSize`, `iconLeftSize`
-
-Migration:
-* Replace `icon` prop with `iconRight`
-* Replace `iconSize` prop with `iconRightSize`
-* changes NDSProvider `size` prop to `variant`.
-
-The `size` prop was originally used sparingly in some components like the
-Button and the Icon to resize those components.
-
-It was later extended to make all interactive components large enough to
-be used on a touch screen, through changing the `size` prop directly or
-by passing a `size` prop to the NDSProvider globally.
-
-With this change, we retain the use of the `size` prop for select
-components, and introduce a `variant` prop that can be passed either to
-individual components or the NDSProvider globally with the value of
-either `desktop` or `touch`.
-* theme can no longer be imported from "@nulogy/components"
-
-NDS is introducing context-specific default themes. Directly importing
-themes from NDS may result in using the wrong theme, causing conflicts
-between custom app themes, desktop, and touch variants.
-
-Instead of importing the theme from NDS like so:
-`import { theme } from "@nulogy/components"`,
-you can use and access the theme in one of the following ways:
-
-- Inside styled components
-```tsx
-const Example = styled.div(({ theme }) => ({
-  marginLeft: theme.space.x3,
-  marginBottom: theme.space.x1,
-  color: theme.colors.darkBlue,
-}));
-```
-
-- Inside components: using styled props
-```tsx
-function Component(props: Props) {
-  return (
-    <Box ml="x3" mb="x1" color="darkBlue">
-      {props.children}
-    </Box>
-  )
-}
-```
-
-- Inside components: using useTheme()
-```tsx
-import { useTheme } from "styled-components"
-
-function getPaddingBasedOnSomeProp(foo, theme) { ... }
-
-function Component(props: Props) {
-  const theme = useTheme()
-  const horizontalPadding = getPaddingBasedOnSomeProp(props.foo, theme)
-
-  return (
-    <Box px={horizontalPadding}>
-      {props.children}
-    </Box>
-  )
-}
-```
-
-# [11.1.0](https://github.com/nulogy/design-system/compare/v11.0.0...v11.1.0) (2024-11-15)
-
-### Features
-
-* add a BottomSheet component ([9f6eddd](https://github.com/nulogy/design-system/commit/9f6eddd7d0aa3e6038cb9fc6d70640fa20dcb7dd))
-* add a component spec ([2e1a59c](https://github.com/nulogy/design-system/commit/2e1a59c6dff88d5e157fe5ff5cb0512314aa0545))
-* add BottomSheet parts ([6b8ad6c](https://github.com/nulogy/design-system/commit/6b8ad6cb60db70b0e516e64e0499ee169f1ed73b))
-* Add documentation and refine the API ([1ef3c5f](https://github.com/nulogy/design-system/commit/1ef3c5fb9e4d6192b5e03167c22f296ab51fdb6e))
-* further refine the API, stories, and documentation ([fd308f9](https://github.com/nulogy/design-system/commit/fd308f93c904a08435186920b59dc38f27b72cb3))
-* improve BottomSheet API and types ([fe42f8b](https://github.com/nulogy/design-system/commit/fe42f8b3b4232ad44f89c5ad1e663747d4e758aa))
-* test the BottomSheet interactivity ([463fd2d](https://github.com/nulogy/design-system/commit/463fd2d252342208ade5e89edcf805e6ab2ab04d))
-
-### Bug Fixes
-
-* cypress global scope const declaration ([029fb35](https://github.com/nulogy/design-system/commit/029fb35186616a34bde7fd2844e07a1cab174b09))
-* minor format/copy corrections ([e4b8458](https://github.com/nulogy/design-system/commit/e4b8458d19addd22ced78f54407e5499712eded2))
-* unused parameter ([9959206](https://github.com/nulogy/design-system/commit/99592060dc5da4881eca903c9e6f9b74ba8e9a6b))
-
-# [11.0.0](https://github.com/nulogy/design-system/compare/v10.2.13...v11.0.0) (2024-11-07)
-
-
-### Bug Fixes
-
-* correct the theme generator scale and types ([8741ce1](https://github.com/nulogy/design-system/commit/8741ce183891a66b551d2e86cfdab177141b9f07))
-* do not shrink the toggle when put in a small container ([#1450](https://github.com/nulogy/design-system/issues/1450)) ([6b3b63f](https://github.com/nulogy/design-system/commit/6b3b63ffa6f201da721748344cc571c0523fce88))
-* format theme after generating it ([039a996](https://github.com/nulogy/design-system/commit/039a9963b070d7b82fe9502e1981cb4f999b4733))
-* issues with scaling up the theme ([88d09bb](https://github.com/nulogy/design-system/commit/88d09bba2047b5726945c15cf9e6bc05d406c98c))
-* lint issues ([6e7588f](https://github.com/nulogy/design-system/commit/6e7588f0a0ed27fb937b56f0299901a47ce61f5b))
-* lint issues ([48e5ac6](https://github.com/nulogy/design-system/commit/48e5ac6f6372cfc2d6886e5d768f208e4a4f6e3a))
-* make the icons and indicators in the select accessible ([#1462](https://github.com/nulogy/design-system/issues/1462)) ([3b6d900](https://github.com/nulogy/design-system/commit/3b6d900c212df12801228ebc9b4e7a221770a552))
-* preserve styled components composability ([baa07de](https://github.com/nulogy/design-system/commit/baa07de6d89f76dcf926dd029cc6d91fe3db9947))
-* prevent shrinking icon ([d499bd1](https://github.com/nulogy/design-system/commit/d499bd149704cf0ed8435b5681c21a48cef47934))
-* remove obsolete stories ([9dfe9ad](https://github.com/nulogy/design-system/commit/9dfe9ad84c054155d056695747039d18e9eccd45))
-* remove theme configuration panel ([4317987](https://github.com/nulogy/design-system/commit/431798705174ca00803f791142e57821a023210e))
-* remove underlines from breadcrumbs ([#1451](https://github.com/nulogy/design-system/issues/1451)) ([6a68084](https://github.com/nulogy/design-system/commit/6a6808417460dc2e97837ba14447d6521fdc8b88))
-* TypeScript parse error ([31259ba](https://github.com/nulogy/design-system/commit/31259baeb9e25d330359000e940fa164d6e01914))
-* unexport the theme directly ([38dda4b](https://github.com/nulogy/design-system/commit/38dda4b67cd863b0a7fb063feb7d493f6afb9841))
-* visual defects following theme change ([b7f5879](https://github.com/nulogy/design-system/commit/b7f587992085d86c32c923bb926bee8b8ea7e2be))
-* visual defects in the touch variant ([6504bc4](https://github.com/nulogy/design-system/commit/6504bc4fd41a5745d519862793ce48a6d45b22cb))
-
-
-### Code Refactoring
-
-* removes old NavBar ([d8f3bf6](https://github.com/nulogy/design-system/commit/d8f3bf6d321b6337a1e27a6e56ca0a5b37505fcc))
-
-
-### Features
-
-* add a touch variant ([7532270](https://github.com/nulogy/design-system/commit/753227035652c9775774fa0ff54b828132af8abd))
-* allow adding left and right icons to the input ([bfdfa88](https://github.com/nulogy/design-system/commit/bfdfa88d4552d25138c31f12a64ec3e7628d755e))
-* generate the theme based on a base unit ([414c19a](https://github.com/nulogy/design-system/commit/414c19a032c79edc68b2bfcc057af03c18d3bfee))
-* refactor away from size to variant ([7fb639a](https://github.com/nulogy/design-system/commit/7fb639a63f681994d48b05c62f4d14da59f7ca06))
-* support tablet and phone media queries ([aa06d15](https://github.com/nulogy/design-system/commit/aa06d15f9ba90d00c5b359c0d1fcf75500210150))
-* update theme ([e6ce943](https://github.com/nulogy/design-system/commit/e6ce943eef0016fe6647e542e4d4182f121b587b))
-
-
 ### BREAKING CHANGES
 
 * removes the old unused NavBar component that was

CONTRIBUTING.md

@@ -1,10 +1,13 @@
 This is a guide for Nulogy employees who wish to contribute to the Design System.
 
-## Installation
+### Before Starting Development
+
+Before you begin working on a feature or a new component, ensure that the proposed changes align with the design system's vision by having a discussion with the design system team. 
+Additionally, verify that the new component has already been added to the design system's Figma library before opening a pull request.
 
 ### Prerequisites
 
-1. Download and install the latest LTS version of [Node (12.16.3)](https://nodejs.org/en/)
+1. Download and install the Node version in the `.nvmrc` file.
 2. Download and install the package manager [Yarn](https://yarnpkg.com/en/docs/install#mac-stable)
 
 ### Cloning the repo
@@ -17,6 +20,7 @@ This is a guide for Nulogy employees who wish to contribute to the Design System
 
 - `yarn start` will run a storybook at [localhost:9999](localhost:9999) for local development.
 - `yarn build` will rebuild the package exports for production.
+- `yarn start:cypress` will run the cypress test runner.
 
 To generate the files needed for a new component, you can use [Plop](https://plopjs.com/)
 
@@ -29,7 +33,7 @@ _Coming soon_
 ## Pull requests
 
 1. If you don't already have access to the [Design System Collaborators](https://github.com/orgs/nulogy/teams/design-system-collaborators/members) team on Github, request access in [#design-system](https://slack.com/app_redirect?channel=design-system)
-2. Clone https://github.com/nulogy/design-system
+2. Clone https://github.com/nulogy/design-system
 3. Do work on a branch and submit a PR describing the changes you've made and why you've made them
 4. Post a link to the PR in #design-system
 5. Somebody from design ops will take a look and be in touch

cypress/e2e/components/DatePicker.spec.ts

@@ -133,4 +133,75 @@ describe("Datepicker", () => {
       });
     });
   });
+
+  describe("MonthPicker", () => {
+    const getDateInputComponent = () => cy.get("[aria-label='select a date']");
+    const CALENDAR_SELECTOR = ".react-datepicker-popper";
+    const getCalendarComponent = () => cy.get(CALENDAR_SELECTOR);
+
+    beforeEach(() => {
+      cy.renderFromStorybook("datepicker-monthpicker--default");
+    });
+
+    describe("displays a month picker", () => {
+      it("can open a month picker on click", () => {
+        getCalendarComponent().should("not.exist");
+        getDateInputComponent().click();
+        getCalendarComponent().should("exist");
+      });
+
+      it("displays months instead of days", () => {
+        getDateInputComponent().click();
+        cy.get(".react-datepicker__month-text").should("have.length", 12);
+        cy.get(".react-datepicker__month-text").first().should("contain", "Jan");
+        cy.get(".react-datepicker__month-text").last().should("contain", "Dec");
+      });
+
+      it("can close the month picker on click outside", () => {
+        getDateInputComponent().click();
+        cy.isInViewport(CALENDAR_SELECTOR);
+        cy.clickOutsideElement();
+        getCalendarComponent().should("not.exist");
+      });
+
+      it("can close the month picker on enter", () => {
+        getDateInputComponent().click();
+        getDateInputComponent().type("{enter}");
+        getCalendarComponent().should("not.exist");
+      });
+    });
+
+    describe("selects a month", () => {
+      it("allows the user to select a month by clicking", () => {
+        getDateInputComponent().click();
+        cy.get(".react-datepicker__month-text").contains("Mar").click();
+        getDateInputComponent().should("have.value", "2025-Mar");
+      });
+
+      it("hides the calendar when a month is selected", () => {
+        getDateInputComponent().click();
+        cy.get(".react-datepicker__month-text").contains("Mar").click();
+        getCalendarComponent().should("not.exist");
+      });
+
+      it("allows the user to select a month in a previous year", () => {
+        getDateInputComponent().click();
+        cy.get("[aria-label='Go to previous year']").click();
+        cy.get(`${CALENDAR_SELECTOR} p`).contains("2024");
+      });
+
+      it("allows the user to select a month in a future year", () => {
+        getDateInputComponent().click();
+        cy.get("[aria-label='Go to next year']").click();
+        cy.get(`${CALENDAR_SELECTOR} p`).contains("2026");
+      });
+
+      it("highlights the selected month", () => {
+        getDateInputComponent().click();
+        cy.get(".react-datepicker__month-text").contains("Mar").click();
+        getDateInputComponent().click();
+        cy.get(".react-datepicker__month-text--selected").should("contain", "Mar");
+      });
+    });
+  });
 });

locales/de_DE.json

@@ -6,6 +6,8 @@
   "date range": "Datumsbereich",
   "deselect all rows": "Alle Zeilen deselektieren",
   "deselect row": "Zeile deselektieren",
+  "go to previous year": "Zum vorherigen Jahr",
+  "go to next year": "Zum nächsten Jahr",
   "end date is before start date": "Das Enddatum liegt vor dem Startdatum",
   "end month is before start month": "Das Enddatum liegt vor dem Startdatum",
   "end time is before start time": "Die Endzeit liegt vor der Startzeit",

locales/en_US.json

@@ -10,6 +10,8 @@
   "end month is before start month": "End month is before start month",
   "end time is before start time": "End time is before start time",
   "expand row": "Expand row",
+  "go to previous year": "Go to previous year",
+  "go to next year": "Go to next year",
   "go to next results": "Go to next results",
   "go to page": "Go to page {{count}}",
   "current page of total": "Page {{currentPage}} of {{totalPages}}",

locales/es_MX.json

@@ -10,6 +10,8 @@
   "end month is before start month": "La fecha de finalización es anterior a la fecha de inicio",
   "end time is before start time": "El tiempo de finalización es anterior al tiempo de inicio",
   "expand row": "Expandir fila",
+  "go to previous year": "Ir al año anterior",
+  "go to next year": "Ir al año siguiente",
   "go to next results": "Ir a los resultados siguientes",
   "go to page": "Ir a la página {{count}}",
   "go to previous results": "Ir a los resultados anteriores",

locales/fr_FR.json

@@ -12,6 +12,8 @@
   "expand row": "Développer la ligne",
   "go to next results": "Aller aux résultats suivants",
   "go to page": "Aller à la page {{count}}",
+  "go to previous year": "Aller à l'année précédente",
+  "go to next year": "Aller à l'année suivante",
   "current page of total": "Page {{currentPage}} sur {{totalPages}}",
   "go to previous results": "Aller aux résultats précédents",
   "go to": "Aller à",

locales/nl_NL.json

@@ -10,6 +10,8 @@
   "end month is before start month": "Einddatum is eerder dan startdatum",
   "end time is before start time": "Eindtijd is eerder dan starttijd",
   "expand row": "Rij uitvouwen",
+  "go to previous year": "Ga naar vorig jaar",
+  "go to next year": "Ga naar volgend jaar",
   "go to next results": "Ga naar volgende resultaten",
   "go to page": "Ga naar pagina {{count}}",
   "current page of total": "Pagina {{currentPage}} van {{totalPages}}",

locales/pl_PL.json

@@ -10,6 +10,8 @@
   "end month is before start month": "Data zakończenia jest wcześniejsza niż data rozpoczęcia",
   "end time is before start time": "Godzina zakończenia jest wcześniejsza niż godzina rozpoczęcia",
   "expand row": "Rozwiń wiersz",
+  "go to previous year": "Przejdź do poprzedniego roku",
+  "go to next year": "Przejdź do następnego roku",
   "go to next results": "Przejdź do następnych wyników",
   "go to page": "Przejdź do strony {{count}}",
   "current page of total": "Strona {{currentPage}} z {{totalPages}}",

locales/pt_BR.json

@@ -10,6 +10,8 @@
   "end month is before start month": "A data de término é anterior à data de início",
   "end time is before start time": "O horário de término é anterior ao horário de início",
   "expand row": "Expandir fila",
+  "go to previous year": "Ir para o ano anterior",
+  "go to next year": "Ir para o próximo ano",
   "go to next results": "Ir para resultados seguintes",
   "go to page": "Ir para página {{count}}",
   "current page of total": "Página {{currentPage}} de {{totalPages}}",

locales/ro_RO.json

@@ -10,6 +10,8 @@
   "end month is before start month": "Data de sfârșit este înaintea datei de început",
   "end time is before start time": "Ora de sfârșit este înaintea orei de început",
   "expand row": "Extindere rând",
+  "go to previous year": "Mergeți la anul anterior",
+  "go to next year": "Mergeți la anul următor",
   "go to next results": "Mergeți la următoarele rezultate",
   "go to page": "Mergeți la pagina {{count}}",
   "current page of total": "Pagina {{currentPage}} din {{totalPages}}",

locales/zh_CN.json

@@ -10,6 +10,8 @@
   "end month is before start month": "结束日期早于开始日期",
   "end time is before start time": "结束时间早于开始时间",
   "expand row": "展开行",
+  "go to previous year": "转到上一年",
+  "go to next year": "转到下一年",
   "go to next results": "访问之后的结果",
   "go to page": "访问第 {{count}} 页 ",
   "current page of total": "第 {{currentPage}} 页，共 {{totalPages}} 页",

package.json

@@ -55,8 +55,8 @@
   ],
   "peerDependencies": {
     "@nulogy/icons": "4",
-    "react": ">=16.10.2",
-    "react-dom": ">=16.10.2",
+    "react": ">=16.10.2 <19.0.0",
+    "react-dom": ">=16.10.2 <19.0.0",
     "styled-components": "^6.0.0",
     "typescript": "4.9.5"
   },
@@ -95,7 +95,7 @@
     "@types/jest": "^29.5.1",
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.39",
-    "@types/react-datepicker": "^4.1.0",
+    "@types/react-datepicker": "^4.19.6",
     "@types/react-dom": "^17.0.20",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^5.30.5",
@@ -158,15 +158,14 @@
     "@types/react-router-dom": "5.3.0",
     "@types/react-window": "^1.8.8",
     "@types/styled-system": "5.1.22",
-    "body-scroll-lock": "^3.1.5",
     "core-js": "3",
     "date-fns": "2.23.0",
     "debounce": "^1.2.0",
     "deep-equal": "^2.2.1",
     "framer-motion": "^3.1.3",
     "i18next": "^19.3.1",
     "polished": "3.4.4",
-    "react-datepicker": "^4.1.0",
+    "react-datepicker": "^4.25.0",
     "react-fast-compare": "^3.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.3.1",