@linzjs/lui 13.0.0 → 13.1.0-beta.0

package/dist/scss/Components/Messaging/messaging.scss

@@ -5,8 +5,9 @@
 @use "../../Foundation/Utilities" as *;
 
 @mixin message-base-styling {
-  border-left: 50px solid #ccc;
-  padding: spacing.$unit-sm 50px 16px spacing.$unit-sm;
+  border-left: spacing.$unit-xl solid colors.$silver;
+  @include border-radius();
+  padding: spacing.$unit-sm spacing.$unit-xl spacing.$unit-sm spacing.$unit-sm;
   margin: spacing.$unit-lg 0;
   color: colors.$fuscous;
   background: colors.$lily;
@@ -32,12 +33,12 @@
 @mixin message-close-btn {
   button {
     position: absolute;
-    top: 14px;
-    right: 13px;
+    top: spacing.$unit-sm;
+    right: spacing.$unit-sm;
     background: none;
     padding: 0;
     border: none;
-    color: colors.$fuscous;
+    color: colors.$sea;
     &:hover {
       cursor: pointer;
     }
@@ -78,7 +79,7 @@
 
 .lui-msg-toast {
   @include box-shadow;
-  background: #fff;
+  background: colors.$white;
   display: block;
   box-sizing: border-box;
   position: fixed;
@@ -98,17 +99,17 @@
 
 .lui-msg-dynamic-banner {
   @include box-shadow;
-  background: #fff;
-  min-height: 55px;
+  background: colors.$white;
+  min-height: rem(48px);
 }
 
 .lui-msg-status-icon {
   content: '';
   position: absolute;
-  top: 12px;
-  left: -41.5px;
-  font-size: 2rem !important;
-  color: white;
+  top: spacing.$unit-xs;
+  left: -40px;
+  font-size: 2rem;
+  color: colors.$white;
 }
 
 .lui-msg-banner-container {

package/dist/scss/Components/Modal/modal.scss

@@ -6,14 +6,15 @@
 .lui-modal {
   padding: spacing.$unit-lg;
   border-left: 0px solid transparent;
+  @include border-radius();
   margin: spacing.$unit-lg 0;
   color: colors.$fuscous;
-  background: #fff;
+  background: colors.$white;
   position: relative;
   max-width: 600px;
 
   h2 {
-    font-size: 1.25rem;
+    font-size: rem(20px);
     @include fonts.font-semibold;
     color: colors.$fuscous;
     margin: 0;
@@ -23,19 +24,19 @@
   }
   &-success {
     border-color: colors.$success;
-    border-width: 50px;
+    border-width: spacing.$unit-xl;
   }
   &-info {
     border-color: colors.$info;
-    border-width: 50px;
+    border-width: spacing.$unit-xl;
   }
   &-warning {
     border-color: colors.$warning;
-    border-width: 50px;
+    border-width: spacing.$unit-xl;
   }
   &-error {
     border-color: colors.$error;
-    border-width: 50px;
+    border-width: spacing.$unit-xl;
   }
   .modal-btn-row {
     margin-top: spacing.$unit-lg;
@@ -46,7 +47,7 @@
   }
   &-header {
     @include lui-standard-header-background(5px);
-    color: #fff;
+    color: colors.$white;
     &-title {
       display: flex;
       justify-content: space-between;
@@ -85,7 +86,7 @@
       float: right;
     }
     &-btn-size {
-      font-size: 32px;
+      font-size: rem(32px);
     }
   }
   &-container {

package/dist/scss/Foundation/Utilities/Borders.scss

@@ -1,9 +1,11 @@
+@use '../Variables/MiscVars.scss' as misc;
 // ============
 // $BORDER
 // ============
 
 // Border radius ============
-@mixin border-radius($borderRadius) {
+@mixin border-radius($borderRadius: misc.$borderRadius) {
+  //If no value passed, it will use the default LUI variable - which should be your 'go-to'
   border-radius: $borderRadius;
   background-clip: padding-box; // stops bg color from leaking outside the border
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "13.0.0",
+  "version": "13.1.0-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -14,16 +14,14 @@
   ],
   "scripts": {
     "build:sass": "sass src/scss/base.scss dist/lui.css",
-    "start": "tsdx watch",
-    "build": "tsdx build && npm run build:sass",
-    "tsdx-test": "tsdx test --passWithNoTests --runInBand --detectOpenHandles",
+    "build": "rollup -c && npm run build:sass",
     "test": "jest --runInBand --detectOpenHandles",
-    "test:watch": "tsdx test --passWithNoTests --watch",
-    "test:clear": "tsdx test --clearCache",
-    "lint": "tsdx lint",
-    "lint:fix": "tsdx lint --fix",
-    "prepare": "tsdx build && npm run build:sass",
+    "test:watch": "jest --passWithNoTests --watch",
+    "test:clear": "jest --clearCache",
+    "lint": "eslint ./src/**/*.{ts,tsx} --max-warnings 0",
+    "lint:fix": "eslint ./src/**/*.{ts,tsx} --fix",
     "size": "size-limit",
+    "prepare": "npm run build",
     "analyze": "size-limit --why",
     "storybook": "npm-run-all watch-storybook",
     "build-storybook": "build-storybook --static-dir ./src/assets",
@@ -42,7 +40,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "npm run lint"
     }
   },
   "name": "@linzjs/lui",
@@ -73,9 +71,11 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.12.3",
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
-    "@rollup/plugin-image": "^2.0.5",
+    "@linzjs/style": "^3.6.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@size-limit/preset-small-lib": "^4.7.0",
@@ -102,12 +102,14 @@
     "@types/sass": "^1.16.0",
     "@types/uuid": "^8.3.1",
     "@types/yup": "0.29.0",
-    "babel-loader": "^8.1.0",
     "chromatic": "^4.0.3",
     "conventional-changelog-conventionalcommits": "^4.6.1",
     "css-loader": "^3.6.0",
     "esbuild": "^0.13.8",
     "esbuild-jest": "^0.5.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-prettier": "4.0.0",
     "fetch-mock": "^9.11.0",
     "html-loader": "^1.1.0",
     "husky": "^4.3.0",
@@ -115,15 +117,17 @@
     "jest-canvas-mock": "2.2.0",
     "msw": "^0.22.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
     "pretty-quick": "^3.1.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-helmet": "^6.1.0",
     "react-is": "^17.0.1",
-    "rollup-plugin-execute": "^1.1.1",
-    "rollup-plugin-styles": "^3.14.1",
+    "rollup": "^2.56.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-typescript2": "^0.29.0",
     "sass": "^1.43.4",
     "sass-loader": "^8.0.2",
     "semantic-release": "^17.4.2",
@@ -132,7 +136,6 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-scss": "^3.20.1",
     "stylelint-suitcss": "^4.0.0",
-    "tsdx": "^0.14.1",
     "typescript": "^3.9.7",
     "whatwg-fetch": "^3.4.1",
     "yup": "^0.29.0"
@@ -145,7 +148,7 @@
     "formik": "^2.1.4",
     "lottie-web": "^5.8.1",
     "react-modal": "^3.11.2",
-    "react-query": "^2.26.3",
+    "react-query": "2.26.3",
     "react-select": "^5.1.0",
     "resolve-url-loader": "^3.1.2",
     "svgstore": "^3.0.0-2",

package/dist/components/LuiBadge/LuiBadge.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import '../../scss/base.scss';
-import './LuiBadgeStory.scss';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiBadge").ILuiBadge) => JSX.Element;
-};
-export default _default;
-export declare const LuiBadgeStory: (args: any) => JSX.Element;

package/dist/components/LuiBadge/LuiBadge.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiBanner/LuiBanner.stories.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import '../../scss/base.scss';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const success: () => JSX.Element;
-export declare const info: () => JSX.Element;
-export declare const error: () => JSX.Element;
-export declare const warning: () => JSX.Element;
-export declare const withoutContainer: () => JSX.Element;

package/dist/components/LuiBanner/LuiBanner.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiButton/LuiButton.stories.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import '../../scss/base.scss';
-import './buttonStory.scss';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const allButtons: () => JSX.Element;
-export declare const linkButtons: () => JSX.Element;
-export declare const disabled: () => JSX.Element;
-export declare const plainText: () => JSX.Element;
-export declare const widths: () => JSX.Element;
-export declare const withMaterialIcons: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const withLuiIcon: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export declare const iconOnlyWithMaterialIcons: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiButton/LuiButton.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiButton/LuiButtonGroup.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ButtonGroup: () => JSX.Element;

package/dist/components/LuiErrorPage/LuiErrorPage.stories.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import '../../scss/base.scss';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ErrorPage: () => JSX.Element;

package/dist/components/LuiExpandableBanner/LuiExpandableBanner.stories.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import '../../scss/base.scss';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const expandable: () => JSX.Element;

package/dist/components/LuiExpandableBanner/LuiExpandableBanner.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiFilterContainer/LuiFilterContainer.stories.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { Story } from '@storybook/react';
-declare const _default: {
-    title: string;
-    subcomponents: {
-        LuiFilterContainer: (props: import("./LuiFilterContainer").IFilterProperties<any>) => JSX.Element;
-    };
-};
-export default _default;
-interface FilterContainerTemplateProps {
-    showFilter: boolean;
-}
-export declare const FilterContainer: Story<FilterContainerTemplateProps>;
-interface SimpleFilterContainerTemplateProps {
-    showFilter: boolean;
-    options: string[];
-}
-export declare const FilterContainerSimple: Story<SimpleFilterContainerTemplateProps>;

package/dist/components/LuiFilterContainer/LuiFilterContainer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiFilterMenu/LuiFilterMenu.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiFooter/LuiFooter.stories.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import '../../scss/base.scss';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const footer: () => JSX.Element;

package/dist/components/LuiFooter/LuiFooter.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.stories.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { LuiCheckboxInput } from './LuiCheckboxInput';
-import { ComponentStory } from '@storybook/react';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiCheckboxInput").LuiCheckboxProps) => JSX.Element;
-    argTypes: {
-        onChange: {
-            action: string;
-        };
-        isChecked: string;
-    };
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const Default: ComponentStory<typeof LuiCheckboxInput>;
-export declare const allStates: ComponentStory<any>;
-export declare const CustomLabel: ComponentStory<typeof LuiCheckboxInput>;

package/dist/components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInputWithFormik.stories.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiCheckboxInput").LuiCheckboxProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const LuiCheckBoxInputWithFormikHooks: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const LuiCheckBoxInputWithFormikComponents: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.stories.d.ts

@@ -1,8 +0,0 @@
-import { ComponentStory } from '@storybook/react';
-import { FileUploadInfo, LuiFileInputBox } from './LuiFileInputBox';
-declare const _default: import("@storybook/react").Meta<import("./LuiFileInputBox").LuiFileInputBoxProps>;
-export default _default;
-export declare const LuiFileInputWithExtensionFilterDefaultSize: ComponentStory<typeof LuiFileInputBox>;
-export declare const LuiFileInputWithExtensionFilterLargeWithExistingError: ComponentStory<typeof LuiFileInputBox>;
-export declare const LuiFileInputWithExtensionFilterLargeWithExistingErrorCustomMessage: ComponentStory<typeof LuiFileInputBox>;
-export declare const LuiFileInputUploadSuccessForChromatic: ComponentStory<typeof FileUploadInfo>;

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.test.d.ts

@@ -1 +0,0 @@
-export declare const fakeFile: (fileName: string) => File;

package/dist/components/LuiFormElements/LuiRadioInput/LuiRadioInput.stories.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const Default: {
-    (): JSX.Element;
-    storeName: string;
-};
-export declare const RadioInputWithLegendText: {
-    (): JSX.Element;
-    storeName: string;
-};
-export declare const IsOptionDisabled: {
-    (): JSX.Element;
-    storeName: string;
-};
-export declare const IsInputDisabled: () => JSX.Element;
-export declare const Error: () => JSX.Element;

package/dist/components/LuiFormElements/LuiRadioInput/LuiRadioInputWithFormik.stories.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
-};
-export default _default;
-export declare const LuiRadioButtonInputWithFormikHooks: {
-    (): JSX.Element;
-    storeName: string;
-};
-export declare const LuiRadioButtonWithFormikComponents: {
-    (): JSX.Element;
-    storeName: string;
-};
-export declare const LuiRadioButtonWithFormikComponentsAndHooks: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormElements/LuiSelectInput/LuiSelectInput.stories.d.ts

@@ -1,35 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiSelectInput").SelectProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const Default: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const NoLabel: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const HiddenLabel: () => JSX.Element;
-export declare const Placeholder: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Disabled: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Error: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const MandatoryStar: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.stories.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiTextAreaInput").LuiTextAreaInputProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const Default: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Placeholder: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Disabled: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Error: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Mandatory: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const ErrorWithNonTransparentBackground: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.test.d.ts

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

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInputWithFormik.stories.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiTextAreaInput").LuiTextAreaInputProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const LuiTextAreaInputWithFormikHooks: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const LuiTextAreaInputWithFormikComponents: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const LuiTextAreaInputWithFormikComponentsAndHooks: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.stories.d.ts

@@ -1,39 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiTextInput").LuiTextInputProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const Default: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const NoLabel: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const CustomLabel: () => JSX.Element;
-export declare const Placeholder: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Disabled: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Error: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const Mandatory: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const PadlockIcon: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.test.d.ts

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

package/dist/components/LuiFormElements/LuiTextInput/LuiTextInputWithFormik.stories.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-declare const _default: {
-    title: string;
-    component: (props: import("./LuiTextInput").LuiTextInputProps) => JSX.Element;
-    parameters: {
-        badges: BADGE[];
-    };
-};
-export default _default;
-export declare const LuiTextInputWithFormikHooks: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const LuiTextInputWithFormikComponents: {
-    (): JSX.Element;
-    storyName: string;
-};
-export declare const LuiTextInputWithFormikComponentsAndHooks: {
-    (): JSX.Element;
-    storyName: string;
-};

package/dist/components/LuiFormikForms/LuiFormikCheckbox/LuiFormikCheckbox.test.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="jest" />
-import React from 'react';
-export declare const FormDemo: React.FC<{
-    jestSpy: jest.Mock<any, any>;
-}>;

package/dist/components/LuiFormikForms/LuiFormikForms.integration.test.d.ts

@@ -1 +0,0 @@
-export {};