@mcf/lib-ui 2.0.169 → 2.0.179

package/README.md

@@ -3,6 +3,7 @@ User Interface (UI) components for use in the MCF project.
 
 > **WIP**: we're working on open-sourcing this!
 
+View the Storybook here: <https://wog.sgts.gitlab-dedicated.site/wsg/mycareersfuture/wsg-mycareersfuture/lib-ui/>
 ## Usage
 Install this package through NPM:
 

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

@@ -1,14 +1,14 @@
 import { FC, ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
-import { BUTTON_CATEGORY, BUTTON_COLOR, BUTTON_ICON_POSITION, BUTTON_SIZE } from './ButtonConstants';
+import { ButtonCategory, ButtonColor, ButtonIconPosition, ButtonSize } from './ButtonConstants';
 import { IconProps } from '../Icon/Icon';
 interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    category?: BUTTON_CATEGORY;
-    color: BUTTON_COLOR;
-    size?: BUTTON_SIZE;
+    category?: ButtonCategory;
+    color: ButtonColor;
+    size?: ButtonSize;
     rounded?: boolean;
     disabled?: boolean;
     onClick?: () => void;
-    iconPosition?: BUTTON_ICON_POSITION;
+    iconPosition?: ButtonIconPosition;
     iconProps?: IconProps;
 }
 declare const Button: FC<ButtonProps>;

package/dist/@types/Component/Button/ButtonConstants.d.ts

@@ -1,19 +1,19 @@
-export declare enum BUTTON_COLOR {
+export declare enum ButtonColor {
     Primary = "Primary",
-    Generic = "Peneric",
+    Generic = "Generic",
     Danger = "Danger"
 }
-export declare enum BUTTON_CATEGORY {
+export declare enum ButtonCategory {
     Solid = "Solid",
     Outline = "Outline",
     Transparent = "Transparent",
     Text = "Text"
 }
-export declare enum BUTTON_SIZE {
+export declare enum ButtonSize {
     Small = "Small",
     Large = "Large"
 }
-export declare enum BUTTON_ICON_POSITION {
+export declare enum ButtonIconPosition {
     Left = "Left",
     Right = "Right"
 }

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ICheckboxProps } from '../CheckboxNew/CheckboxNew';
+export declare enum Orientation {
+    Horizontal = "Horizontal",
+    Vertical = "Vertical"
+}
+interface ICheckboxGroupProps {
+    orientation?: Orientation;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    checkboxInformation: ICheckboxProps[];
+    error?: string;
+}
+declare const CheckboxGroup: ({ orientation, primaryLabel, secondaryLabel, checkboxInformation, error, }: ICheckboxGroupProps) => JSX.Element;
+export default CheckboxGroup;

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

@@ -0,0 +1,16 @@
+import React, { InputHTMLAttributes } from 'react';
+export declare enum CheckboxState {
+    Selected = "Selected",
+    Unselected = "Unselected",
+    Indeterminate = "Indeterminate"
+}
+export interface ICheckboxProps extends React.DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    header?: string;
+    label?: string;
+    description?: string;
+    descriptionLink?: string;
+    state?: CheckboxState;
+    error?: string;
+}
+declare const Checkbox: (props: ICheckboxProps) => JSX.Element;
+export default Checkbox;

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

@@ -0,0 +1,9 @@
+import React, { CSSProperties, ReactNode } from 'react';
+interface InfoBoxProps {
+    title: ReactNode;
+    description: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const InfoBox: React.FC<InfoBoxProps>;
+export default InfoBox;

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

@@ -0,0 +1,12 @@
+import React, { HTMLProps, CSSProperties } from 'react';
+interface IMessageBarProps extends HTMLProps<HTMLDivElement> {
+    backgroundColor: string;
+    textColor: string;
+    children?: JSX.Element;
+    showCloseIcon?: boolean;
+    closeIconColor?: string;
+    style?: CSSProperties;
+    handleClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+declare const MessageBar: React.FC<IMessageBarProps>;
+export default MessageBar;

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

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

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

@@ -0,0 +1,12 @@
+import React, { InputHTMLAttributes } from 'react';
+interface ITextInputNewProps extends InputHTMLAttributes<HTMLInputElement> {
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    additionalInfo?: string;
+    errorMessage?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    clearable?: boolean;
+}
+declare const TextInputNew: React.FC<ITextInputNewProps>;
+export default TextInputNew;

package/dist/main.css

@@ -10,15 +10,21 @@
   --active-generic: #00449E;
   --gray: gray;
   --white: white;
+  --lighter-primary: #EFEAF6; /* lightness(90%)) */
+  --light-primary: #E3D7F4;
+  --dark-primary: #552895; /* shade(10%) */
+  --generic: #1263CB;
   --secondary: #D6008F;
   --dark-secondary: #C10081; /* shade(10%) */
-  --danger:#CE030D;
+  --danger: #CE030D;
   --bright-danger: #EB142A;
   --dark-danger: #B0030B;
   --light-danger: #FFDFDF;
   --light-danger: var(--red-washed-red, #FFDFDF);
   --lighter-danger: #FFEFEF;
   --green: #118159;
+  --gray-50: #F2F2F2;
+  --washed-yellow: #fffceb;
 }:root {
   --borderstyle: 1px solid var(--black-20);
   --borderstyle: 1px solid var(--black-20)

package/jest.config.js

@@ -55,11 +55,6 @@ module.exports = {
   // globalTeardown: null,
 
   // A set of global variables that need to be available in all test environments
-  globals: {
-    'ts-jest': {
-      tsConfigFile: 'tsconfig.jest.json',
-    },
-  },
 
   // An array of directory names to be searched recursively up from the requiring module's location
   // moduleDirectories: [

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@mcf/lib-ui",
-  "version": "2.0.169",
+  "version": "2.0.179",
   "description": "User Interface (UI) components for use in the MCF project.",
   "main": "dist/index.js",
   "types": "dist/@types/Component/index.d.ts",
   "scripts": {
     "build-bundle": "cross-env NODE_ENV=production webpack --mode production",
     "build-css": "cross-env NODE_ENV=production postcss src/style/main.scss --dir dist/ --ext css",
+    "build-storybook-pages": "storybook build -o ./public",
     "build-storybook": "storybook build -o ./static",
     "build-types": "tsc --module es6 --declaration --emitDeclarationOnly --outDir dist/@types",
     "build-watch": "yarn build-bundle --watch & yarn build-types --watch",
     "build": "yarn clean && yarn build-bundle && yarn build-types && yarn build-css",
-    "coverage": "jest --coverage",
+    "coverage": "jest --coverage --runInBand",
     "clean": "rm -rf dist",
     "deploy": "node serve-static.js",
     "eslint": "eslint .",
@@ -74,7 +75,7 @@
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
+    "enzyme-adapter-react-16": "1.15.8",
     "enzyme-to-json": "3.6.2",
     "eslint": "^8.53.0",
     "eslint-config-google": "0.9.1",
@@ -89,7 +90,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
-    "express": "4.18.2",
+    "express": "4.18.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/tsconfig.json

@@ -20,5 +20,5 @@
     "resolveJsonModule": true
   },
   "include": ["./src/**/*"],
-  "exclude": ["**/*.test.tsx", "**/*.test.ts"]
+  "exclude": ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.tsx"]
 }

package/dist/@types/stories/Button.stories.d.ts

@@ -1,12 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import Button from '../Component/Button/Button';
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof Button>;
-export declare const PrimaryButton: Story;
-export declare const GenericButton: Story;
-export declare const DangerButton: Story;
-export declare const OutlinedButton: Story;
-export declare const TransparentButton: Story;
-export declare const TextButton: Story;
-export declare const IconButton: Story;

package/dist/@types/stories/Typography.stories.d.ts

@@ -1,38 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import Typography from '../Component/Typography/Typography';
-declare const meta: Meta<typeof Typography>;
-export default meta;
-type Story = StoryObj<typeof Typography>;
-export declare const Display01: Story;
-export declare const Display02: Story;
-export declare const Display03: Story;
-export declare const Display03SB: Story;
-export declare const Display04: Story;
-export declare const Display05: Story;
-export declare const Body01: Story;
-export declare const Body01Italic: Story;
-export declare const Body01Underline: Story;
-export declare const Body02: Story;
-export declare const Body02Italic: Story;
-export declare const Body02Underline: Story;
-export declare const Body03: Story;
-export declare const Body03Tight: Story;
-export declare const Body03Italic: Story;
-export declare const Body03Underline: Story;
-export declare const Body04: Story;
-export declare const Body04Italic: Story;
-export declare const Heading01: Story;
-export declare const Heading02: Story;
-export declare const Heading02Tight: Story;
-export declare const Heading03: Story;
-export declare const Heading04: Story;
-export declare const Heading05: Story;
-export declare const Heading06: Story;
-export declare const Heading07: Story;
-export declare const Heading08: Story;
-export declare const Field01: Story;
-export declare const Button01: Story;
-export declare const Button02: Story;
-export declare const Button03: Story;
-export declare const Pill01: Story;
-export declare const Pill02: Story;