@mcf/lib-ui 2.4.104 → 2.4.105

package/dist/main-modules.css

@@ -152,102 +152,6 @@
 }
 
 
-.Dropdown__mcf-dropdown___27HW2 {
-  /* react-select-plus customization */
-}
-
-.Dropdown__mcf-dropdown___27HW2 .Select-control {
-    font-size: var(--font-size-4-5);
-    font-size: var(--font-size-4-5);
-    border-radius: 0;
-    min-height: 50px;
-    font-weight: 400;
-    border: var(--borderstyle);
-    border: var(--borderstyle);
-    margin-top: 6px;
-    margin-bottom: var(--input-margin-bottom);
-    margin-bottom: var(--input-margin-bottom)
-  }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-control .Select-placeholder {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-align: center;
-          -ms-flex-align: center;
-              align-items: center;
-    }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-control .Select-input > input {
-        height: 100%;
-        color: var(--black-70);
-        color: var(--black-70);
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-      }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-control .Select-input > input::-ms-clear, .Dropdown__mcf-dropdown___27HW2 .Select-control .Select-input .input::-ms-reveal {
-        display: none;
-        width: 0;
-        height: 0;
-      }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-control .Select-multi-value-wrapper {
-      height:100%;
-    }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-control .Select-value {
-      margin-top: 10px;
-    }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-option {
-    color: var(--black-60);
-    color: var(--black-60);
-  }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-option.is-focused {
-    background: var(--light-primary);
-    background: var(--light-primary);
-    color: var(--black-80);
-    color: var(--black-80);
-  }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-option.is-selected {
-    background: var(--primary);
-    background: var(--primary);
-    color: var(--white);
-    color: var(--white);
-  }
-
-.Dropdown__mcf-dropdown___27HW2 .Select.is-focused.is-open > .Select-control, .Dropdown__mcf-dropdown___27HW2 .Select.is-focused:not(.is-open) > .Select-control {
-    border: 1px solid var(--light-silver);
-    border: 1px solid var(--light-silver);
-    -webkit-box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6);
-            box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.6)
-  }
-
-.Dropdown__mcf-dropdown___27HW2 .Select-arrow {
-    border-color: var(--black-60) transparent transparent;
-    border-color: var(--black-60) transparent transparent
-  }
-
-.Dropdown__mcf-dropdown___27HW2.error .Select-control {
-    border-color: var(--red);
-    border-color: var(--red);
-  }
-
-.Dropdown__error___1bQlE {
-  display: inline-block;
-  color: var(--red);
-  color: var(--red);
-  font-size: medium;
-  font-size: initial;
-}
-
 .stickyheader__fixed___2u5sx {
     position: fixed !important;
     top: -100px;
@@ -360,52 +264,6 @@
   color: var(--red);
 }
 
-/* The switch - the box around the slider */
-.Toggle__switch___32uGI {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-}
-/* Hide default HTML checkbox */
-.Toggle__switch___32uGI input {display:none;}
-/* The slider */
-.Toggle__slider___3da38 {
-  border-radius: 34px;
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-.Toggle__slider___3da38:before {
-  border-radius: 50%;
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-input:checked + .Toggle__slider___3da38 {
-  background-color: #2196F3;
-}
-input:focus + .Toggle__slider___3da38 {
-  -webkit-box-shadow: 0 0 1px #2196F3;
-          box-shadow: 0 0 1px #2196F3;
-}
-input:checked + .Toggle__slider___3da38:before {
-  -webkit-transform: translateX(26px);
-  transform: translateX(26px);
-}
-
 
 
   .TypeAhead__typeahead___tiP0_ .react-autosuggest__input {
@@ -1185,7 +1043,6 @@ input[type=checkbox]:indeterminate::after {
   }
 
 .Tabs__sticky-header___2QjM7 {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   background: var(--white);
@@ -1382,7 +1239,7 @@ input[type=checkbox]:indeterminate::after {
   background-color: var(--black-05);
   background-color: var(--black-05);
 }
-.DropdownNew__container___1q0u7 {
+.Dropdown__container___dK_Pr {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1392,7 +1249,7 @@ input[type=checkbox]:indeterminate::after {
           flex-direction: column;
 }
 
-.DropdownNew__error-msg___3_Q8f {
+.Dropdown__error-msg___1y8En {
   color: var(--danger);
   color: var(--danger);
   margin: 0;
@@ -1404,7 +1261,7 @@ input[type=checkbox]:indeterminate::after {
           align-items: center;
 }
 
-.DropdownNew__badge___1vk42 {
+.Dropdown__badge___1hfQJ {
   background: var(--danger);
   background: var(--danger);
   padding: 2px 4px;

package/jest.config.js

@@ -117,10 +117,10 @@ module.exports = {
   // setupFiles: [],
 
   // The path to a module that runs some code to configure or set up the testing framework before each test
-  setupFilesAfterEnv: ['<rootDir>/test/helpers/index.ts'],
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  // snapshotSerializers: ['enzyme-to-json/serializer'],
 
   // The test environment that will be used for testing
   testEnvironment: 'jest-environment-jsdom',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcf/lib-ui",
-  "version": "2.4.104",
+  "version": "2.4.105",
   "description": "User Interface (UI) components for use in the MCF project.",
   "main": "dist/index.js",
   "types": "dist/@types/Component/index.d.ts",
@@ -32,10 +32,10 @@
     "fuse.js": "3.6.1",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.9.2",
-    "react-autosuggest": "9.3.4",
+    "react-autosuggest": "10.1.0",
     "react-collapsed": "4.2.0",
-    "react-select": "5.8.0",
-    "react-select-plus": "1.1.0",
+    "react-select": "5.9.0",
+    "react-select-plus": "1.2.0",
     "scrolling-element": "1.0.2"
   },
   "devDependencies": {
@@ -58,18 +58,16 @@
     "@storybook/testing-library": "0.2.2",
     "@svgr/webpack": "8.1.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/react": "16.1.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/cheerio": "0.22.31",
-    "@types/enzyme": "3.10.12",
-    "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/jest": "23.3.14",
     "@types/lodash": "4.14.185",
     "@types/node": "20.10.6",
     "@types/prop-types": "15.7.5",
-    "@types/react": "16.14.21",
-    "@types/react-autosuggest": "9.3.14",
-    "@types/react-dom": "16.9.14",
+    "@types/react": "18.3.3",
+    "@types/react-autosuggest": "10.1.11",
+    "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.4",
     "@typescript-eslint/eslint-plugin": "6.11.0",
     "@typescript-eslint/parser": "6.11.0",
@@ -79,9 +77,6 @@
     "cross-env": "5.2.1",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
-    "enzyme-to-json": "3.6.2",
     "eslint": "8.53.0",
     "eslint-config-google": "0.9.1",
     "eslint-config-govtech-mcf": "1.2.0",
@@ -107,20 +102,17 @@
     "postcss-preset-env": "5.3.0",
     "prettier": "3.1.0",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "storybook": "7.6.20",
     "tachyons": "4.12.0",
-    "ts-jest": "29.1.1",
+    "ts-jest": "29.2.5",
     "typescript": "5.2.2",
     "url-loader": "4.1.1",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-node-externals": "^3.0.0"
   },
-  "peerDependencies": {
-    "react": "16.x"
-  },
   "directories": {
     "test": "test"
   },

package/dist/@types/Component/DropdownNew/DropdownNew.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { DropdownProps } from './DropdownNew.constants';
-declare const Dropdown: ({ width, isSearchable, isDisabled, primaryLabel, secondaryLabel, additionalInfo, errorMsg, placeholder, data, input, variant, customStyles, ...props }: DropdownProps) => JSX.Element;
-export default Dropdown;

package/dist/@types/Component/DropdownNew/index.d.ts

@@ -1,2 +0,0 @@
-export { default as DropdownNew } from './DropdownNew';
-export * from './DropdownNew.constants';

package/dist/@types/Component/Toggle/Toggle.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface IToggleProps {
-    initialState?: boolean;
-    changeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const Toggle: React.SFC<IToggleProps>;

package/dist/@types/Component/Toggle/index.d.ts

@@ -1 +0,0 @@
-export * from './Toggle';

package/dist/@types/storyguide/Buttons/BaseButton.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export declare function BaseButton(props: {
-    className: any;
-    text: React.ReactNode;
-}): JSX.Element;
-export declare function IconButton(props: {
-    className: any;
-    text: React.ReactNode;
-}): JSX.Element;
-export declare function IconButtonwWord(props: {
-    className: any;
-    text: React.ReactNode;
-}): JSX.Element;
-export declare function FloatingActionButton(props: {
-    className: any;
-    text: React.ReactNode;
-}): JSX.Element;

package/dist/@types/storyguide/JobCard/Bookmark/BookmarkButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface IBookmarkedButtonProps {
-    selected?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => any;
-}
-export declare const BookmarkButton: React.FunctionComponent<IBookmarkedButtonProps>;

package/dist/@types/storyguide/JobCard/CompanyInfo.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function CompanyInfo(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobBenefit.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobBenefit(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobCard.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Company: React.FunctionComponent;

package/dist/@types/storyguide/JobCard/JobInfo.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobInfo(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobLastPostedDate.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobLastPostedDate(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobPostStatus.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobPostStatus(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobSkillInfo.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobSkillInfo(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobSponsor.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobSponsor(): JSX.Element;

package/dist/@types/storyguide/JobCard/JobTitle.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function JobTitle(): JSX.Element;

package/dist/@types/storyguide/JobCard/SalaryInfo.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function SalaryInfo(): JSX.Element;

package/dist/@types/storyguide/Skills/Score.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const CARD_LABEL: {
-    NO_SKILL_INFO: string;
-    SKILLS_MATCHED: string;
-};
-export declare const Score: React.FunctionComponent;

package/dist/@types/storyguide/Skills/Scorebar.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const CARD_LABEL: {
-    NO_SKILL_INFO: string;
-    SKILLS_MATCHED: string;
-};
-export declare function Scorebar(): JSX.Element;

package/dist/@types/storyguide/Skills/SkillPill.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface ISkillButtonProps {
-    label: string;
-    selected?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => any;
-}
-export declare const SkillButton: React.FunctionComponent<ISkillButtonProps>;

package/dist/@types/storyguide/Text/Font.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export default function TextHeadLine(props: {
-    className: any;
-}): JSX.Element;
-export declare function FontFamily(props: {
-    text: React.ReactNode;
-}): JSX.Element;
-export declare function FontStyle(props: {
-    className: any;
-    code: React.ReactNode;
-    text: React.ReactNode;
-}): JSX.Element;

package/dist/@types/storyguide/Text/TextSize.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export default function TextSize(props: {
-    className: React.ReactNode;
-}): JSX.Element;

package/test/helpers/enzyme.ts

@@ -1,4 +0,0 @@
-import * as Enzyme from 'enzyme';
-import ReactSixteenAdapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({adapter: new ReactSixteenAdapter()});

package/test/helpers/index.ts

@@ -1,2 +0,0 @@
-import './enzyme';
-import '@testing-library/jest-dom';