metlifelegalplans / wui Goto Github PK

Currently, the project requires a specific version of Node.js (<= v16) to function correctly. However, we would like to make it more accessible and compatible with a variety of Node.js versions.

To achieve this goal, we need to add support for multiple versions of Node.js to our project. This will ensure that users can install and run our project in diverse environments without strict restrictions on Node.js version.

To do this, we will update the package.json file to specify a range of supported versions in the “engines” field. This will allow users to install Node.js within this version range and use our project without compatibility issues.

Remembering that nodejs v16 has already been announced and is deprecated:

https://nodejs.org/en/blog/announcements/nodejs16-eol

running with LTS 21 version:

running with v18 version:

running with v16:

needed for https://github.com/MetLifeLegalPlans/willing-app/pull/2093

Add demos for the following components using mdx files:

Also include Button and RadioGroup from the input section.

See https://react-styleguidist.js.org/docs/documenting for markup guide

getting this error on attorneys, putting here so it doesn't get forgotten:

Material-UI: the createMuiTheme function was renamed to createTheme.

You should use `import { createTheme } from '@material-ui/core/styles'`

as we work with a lot of tables in attorneys, i'm wondering whether that should be supported in here.

pros would be that it would be easy to make tables that match our design. it would be nice, if it's not considered too much, to add in options to paginate and sort out of the box. i found myself basically working on creating this component within attorneys so that moving some things into tables is easier.

cons would be all the reasons we decided to clear out the old custom wui components.

opinions/thoughts?

Right now the textbox component doesn't seem to be able to accept a starting value in addition to the existing controlled value. Seems like it needs a new prop for this.

Investigate, make any appropriate changes.
A demo in the md file for this would also be nice.

just because it's showing up in frontend logs and is confusing if you don't see its a warning:

DeprecationWarning: Invalid 'main' field in '/code/node_modules/@bequestinc/wui/package.json' of 'lib/index.js'. Please either fix that or report it to the module author

This will solve the following issue
https://github.com/MetLifeLegalPlans/estate-planning/issues/2954

look into automating the versioning process so we don't have to keep manually updating package.json. something like changesets changeset-bot

Upgrade MRT to V2 https://www.material-react-table.com/

this issue will keep track of all of the related estate-planning issues that need to be fixed through wui (will update here as we go through a11y tickets)

Issues:
https://github.com/MetLifeLegalPlans/estate-planning/issues/2958
https://github.com/MetLifeLegalPlans/estate-planning/issues/2985

Main changes:

• Radio group focus indicator
• Radio group button 44px height

The following block should provide an initial point for the changes requested.

  customButton: {
    '& button': {
      height: '44px',
      boxSizing: 'border-box',
    },
    '& :focus': {
      outline: '2px solid 2A4283',
      outlineOffset: '3px',
    },
  },

Tabs needs OnKeyDown Property or some sort of focus indicator.
The original focus indicator seems to have been replaced by a custom indicator.

From original issue:
When you use the keyboard and navigate to the Summary tab, then a focus indicator should appear
When you use the keyboard and navigate to the Help tab, then a focus indicator should appear
The focus indicator should have a contrast of at least 3:1 versus the unfocused components
The focus indicator should have padding of at least 2 CSS versus the unfocused components

Original Issues:
https://github.com/MetLifeLegalPlans/estate-planning/issues/2961
https://github.com/MetLifeLegalPlans/estate-planning/issues/2957
https://github.com/MetLifeLegalPlans/estate-planning/issues/2951

Add demos for the following components using mdx files:

See https://react-styleguidist.js.org/docs/documenting for markup guide

Issue trigger:
Given the "+" button was selected on the Healthcare page, when a member uses the keyboard to focus on the button, the focus indicator has a color contrast of at least 3:1

Expected
Change the button color to #3752A9 on active and focus states
For the focus state, add a custom 2px white outline, as shown in the attached image.
The button size should be 44px by 44px except on focus, which should be 48px by 48px
The focus state should be using the OS native focus state

solves https://github.com/MetLifeLegalPlans/estate-planning/issues/2986

This should be released as a new major version because it is a breaking change.