@learningpool/ui 1.3.0 → 1.4.0-beta.3

package/readme.md

@@ -1,6 +1,7 @@
 # @learningpool/ui
 
 ![npm (scoped)](https://img.shields.io/npm/v/@learningpool/ui)
+![npm (tag)](https://img.shields.io/npm/v/@learningpool/ui/beta)
 ![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@learningpool/ui)
 ![NPM](https://img.shields.io/npm/l/@learningpool/ui)
 ![Website](https://img.shields.io/website?label=documentation&url=https%3A%2F%2Fmain.d5creizgamf62.amplifyapp.com)
@@ -13,13 +14,13 @@ Our documentation is provided via [Storybook](https://storybook.js.org) and our
 
 First clone the repo then run:
 
-### `yarn install`
+### `npm install`
 
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm run start`
 
 Runs the app in the development mode.\
 Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
@@ -27,19 +28,19 @@ Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn start:run-test`
-The same as the `yarn start` command but runs the `yarn test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
+### `npm run start:run-test`
+The same as the `npm run start` command but runs the `npm run test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
 
-### `yarn build-storybook`
+### `npm run build-storybook`
 Builds the Storybook app for pushing to the public subdomain.
 
-### `yarn test`
+### `npm run test`
 Runs the component Jest tests. If its the first run it also takes a snapshot for comparison, on successive runs.
 
-### `yarn test:update-snapshot`
+### `npm run test:update-snapshot`
 Updates the Jest snapshot.
 
-### `yarn test:generate-output`
+### `npm run test:generate-output`
 Runs the tests and outputs the results to a file `.jest-test-results.json` for use within the [Storybook addon Jest](https://storybook.js.org/addons/@storybook/addon-jest/)
 
 ## Getting started

package/utils/theme.js

@@ -19,6 +19,16 @@ var DEFAULT_BODY_TYPOGRAPHY = {
 // @TODO: Discuss this with the experience design team, according to the UUI Figma
 export var defaultTheme = {
     typography: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { h1: DEFAULT_HEADER_TYPOGRAPHY, h2: DEFAULT_HEADER_TYPOGRAPHY, h3: DEFAULT_HEADER_TYPOGRAPHY, h4: DEFAULT_HEADER_TYPOGRAPHY, h5: DEFAULT_HEADER_TYPOGRAPHY, h6: DEFAULT_HEADER_TYPOGRAPHY, subtitle1: DEFAULT_BODY_TYPOGRAPHY, subtitle2: DEFAULT_BODY_TYPOGRAPHY, body1: DEFAULT_BODY_TYPOGRAPHY, body2: DEFAULT_BODY_TYPOGRAPHY, button: __assign(__assign({}, DEFAULT_BODY_TYPOGRAPHY), { fontWeight: 700 }), caption: DEFAULT_BODY_TYPOGRAPHY, overline: DEFAULT_BODY_TYPOGRAPHY })
+    // overrides: {
+    //   MuiCssBaseline: {
+    //     '@global': {
+    //       '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
+    //         backgroundColor: '#eee',
+    //         color: '#333'
+    //       }
+    //     }
+    //   }
+    // }
 };
 export var lightTheme = {
     palette: {

package/components/atoms/Autocomplete/AutocompleteStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AutocompleteStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Autocomplete/AutocompleteStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AutocompleteStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Button/ButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Button/ButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Checkbox/CheckboxStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const CheckboxStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Checkbox/CheckboxStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var CheckboxStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/IconButton/IconButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const IconButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/IconButton/IconButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var IconButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Radio/RadioStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const RadioStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Radio/RadioStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var RadioStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Select/SelectStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SelectStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Select/SelectStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SelectStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Slider/SliderStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SliderStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Slider/SliderStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SliderStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Switch/SwitchStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SwitchStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Switch/SwitchStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SwitchStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/TextField/TextFieldStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const TextFieldStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/TextField/TextFieldStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var TextFieldStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/ToggleButton/ToggleButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ToggleButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/ToggleButton/ToggleButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ToggleButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/Avatar/AvatarStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AvatarStyles: (params: void) => {
-    classes: Record<"root", string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Avatar/AvatarStyles.js

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AvatarStyles = makeStyles()(function (theme, props) {
-    var _a, _b, _c;
-    return ({
-        root: {
-            backgroundColor: ((_a = props === null || props === void 0 ? void 0 : props.sx) === null || _a === void 0 ? void 0 : _a.bgcolor)
-                ? props.sx.bgcolor
-                : theme.palette.primary.main,
-            color: ((_b = props === null || props === void 0 ? void 0 : props.sx) === null || _b === void 0 ? void 0 : _b.bgcolor)
-                ? (_c = props.sx.color) !== null && _c !== void 0 ? _c : theme.palette.getContrastText(props.sx.bgcolor)
-                : theme.palette.primary.contrastText
-        }
-    });
-});

package/components/datadisplay/Chip/ChipStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ChipStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Chip/ChipStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ChipStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/List/ListStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ListStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/List/ListStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ListStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/Tooltip/TooltipStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const TooltipStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Tooltip/TooltipStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var TooltipStyles = makeStyles()(function (theme) { return ({}); });

package/components/feedback/Alert/AlertStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AlertStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/feedback/Alert/AlertStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AlertStyles = makeStyles()(function (theme) { return ({}); });

package/components/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './atoms/Button/Button';

package/components/index.js

@@ -1,3 +0,0 @@
-/* Export */
-/* Atoms */
-export { default as Button } from './atoms/Button/Button';

package/components/navigation/Drawer/DrawerStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const DrawerStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/navigation/Drawer/DrawerStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var DrawerStyles = makeStyles()(function (theme) { return ({}); });