myrentokil-components-library 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -0
- package/dist/cjs/components/atoms/Button/Button.d.ts +17 -0
- package/dist/cjs/components/atoms/Button/Button.js +79 -0
- package/dist/cjs/components/atoms/Button/Button.js.map +1 -0
- package/dist/cjs/components/atoms/Button/Button.stories.d.ts +7 -0
- package/dist/cjs/components/atoms/Button/Button.stories.js +26 -0
- package/dist/cjs/components/atoms/Button/Button.stories.js.map +1 -0
- package/dist/cjs/components/atoms/Button/Button.test.d.ts +1 -0
- package/dist/cjs/components/atoms/Button/Button.test.js +14 -0
- package/dist/cjs/components/atoms/Button/Button.test.js.map +1 -0
- package/dist/cjs/components/atoms/Loading/Loading.d.ts +14 -0
- package/dist/cjs/components/atoms/Loading/Loading.js +14 -0
- package/dist/cjs/components/atoms/Loading/Loading.js.map +1 -0
- package/dist/cjs/components/atoms/Loading/Loading.stories.d.ts +7 -0
- package/dist/cjs/components/atoms/Loading/Loading.stories.js +23 -0
- package/dist/cjs/components/atoms/Loading/Loading.stories.js.map +1 -0
- package/dist/cjs/components/atoms/Loading/Loading.test.d.ts +1 -0
- package/dist/cjs/components/atoms/Loading/Loading.test.js +14 -0
- package/dist/cjs/components/atoms/Loading/Loading.test.js.map +1 -0
- package/dist/cjs/components/atoms/LoadingSpinner/LoadingSpinner.d.ts +9 -0
- package/dist/cjs/components/atoms/LoadingSpinner/LoadingSpinner.js +27 -0
- package/dist/cjs/components/atoms/LoadingSpinner/LoadingSpinner.js.map +1 -0
- package/dist/cjs/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts +6 -0
- package/dist/cjs/components/atoms/LoadingSpinner/LoadingSpinner.stories.js +19 -0
- package/dist/cjs/components/atoms/LoadingSpinner/LoadingSpinner.stories.js.map +1 -0
- package/dist/cjs/components/atoms/index.d.ts +3 -0
- package/dist/cjs/components/atoms/index.js +13 -0
- package/dist/cjs/components/atoms/index.js.map +1 -0
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.js +20 -0
- package/dist/cjs/components/index.js.map +1 -0
- package/dist/cjs/components/molecules/index.d.ts +0 -0
- package/dist/cjs/components/molecules/index.js +2 -0
- package/dist/cjs/components/molecules/index.js.map +1 -0
- package/dist/cjs/components/organisms/index.d.ts +0 -0
- package/dist/cjs/components/organisms/index.js +2 -0
- package/dist/cjs/components/organisms/index.js.map +1 -0
- package/dist/cjs/esm/components/atoms/Button/Button.d.ts +17 -0
- package/dist/cjs/esm/components/atoms/Button/Button.stories.d.ts +7 -0
- package/dist/cjs/esm/components/atoms/Button/Button.test.d.ts +1 -0
- package/dist/cjs/esm/components/atoms/Loading/Loading.d.ts +14 -0
- package/dist/cjs/esm/components/atoms/Loading/Loading.stories.d.ts +7 -0
- package/dist/cjs/esm/components/atoms/Loading/Loading.test.d.ts +1 -0
- package/dist/cjs/esm/components/atoms/LoadingSpinner/LoadingSpinner.d.ts +9 -0
- package/dist/cjs/esm/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts +6 -0
- package/dist/cjs/esm/components/atoms/index.d.ts +3 -0
- package/dist/cjs/esm/components/index.d.ts +1 -0
- package/dist/cjs/esm/index.d.ts +1 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +12453 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/types/components/atoms/Button/Button.d.ts +17 -0
- package/dist/cjs/types/components/atoms/Button/Button.stories.d.ts +7 -0
- package/dist/cjs/types/components/atoms/Button/Button.test.d.ts +1 -0
- package/dist/cjs/types/components/atoms/Loading/Loading.d.ts +14 -0
- package/dist/cjs/types/components/atoms/Loading/Loading.stories.d.ts +7 -0
- package/dist/cjs/types/components/atoms/Loading/Loading.test.d.ts +1 -0
- package/dist/cjs/types/components/atoms/LoadingSpinner/LoadingSpinner.d.ts +9 -0
- package/dist/cjs/types/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts +6 -0
- package/dist/cjs/types/components/atoms/index.d.ts +3 -0
- package/dist/cjs/types/components/index.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/components/atoms/Button/Button.d.ts +17 -0
- package/dist/esm/components/atoms/Button/Button.js +51 -0
- package/dist/esm/components/atoms/Button/Button.js.map +1 -0
- package/dist/esm/components/atoms/Button/Button.stories.d.ts +7 -0
- package/dist/esm/components/atoms/Button/Button.stories.js +20 -0
- package/dist/esm/components/atoms/Button/Button.stories.js.map +1 -0
- package/dist/esm/components/atoms/Button/Button.test.d.ts +1 -0
- package/dist/esm/components/atoms/Button/Button.test.js +9 -0
- package/dist/esm/components/atoms/Button/Button.test.js.map +1 -0
- package/dist/esm/components/atoms/Loading/Loading.d.ts +14 -0
- package/dist/esm/components/atoms/Loading/Loading.js +9 -0
- package/dist/esm/components/atoms/Loading/Loading.js.map +1 -0
- package/dist/esm/components/atoms/Loading/Loading.stories.d.ts +7 -0
- package/dist/esm/components/atoms/Loading/Loading.stories.js +17 -0
- package/dist/esm/components/atoms/Loading/Loading.stories.js.map +1 -0
- package/dist/esm/components/atoms/Loading/Loading.test.d.ts +1 -0
- package/dist/esm/components/atoms/Loading/Loading.test.js +9 -0
- package/dist/esm/components/atoms/Loading/Loading.test.js.map +1 -0
- package/dist/esm/components/atoms/LoadingSpinner/LoadingSpinner.d.ts +9 -0
- package/dist/esm/components/atoms/LoadingSpinner/LoadingSpinner.js +22 -0
- package/dist/esm/components/atoms/LoadingSpinner/LoadingSpinner.js.map +1 -0
- package/dist/esm/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts +6 -0
- package/dist/esm/components/atoms/LoadingSpinner/LoadingSpinner.stories.js +13 -0
- package/dist/esm/components/atoms/LoadingSpinner/LoadingSpinner.stories.js.map +1 -0
- package/dist/esm/components/atoms/index.d.ts +3 -0
- package/dist/esm/components/atoms/index.js +4 -0
- package/dist/esm/components/atoms/index.js.map +1 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.js +4 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/components/molecules/index.d.ts +0 -0
- package/dist/esm/components/molecules/index.js +2 -0
- package/dist/esm/components/molecules/index.js.map +1 -0
- package/dist/esm/components/organisms/index.d.ts +0 -0
- package/dist/esm/components/organisms/index.js +2 -0
- package/dist/esm/components/organisms/index.js.map +1 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +12447 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/types/components/atoms/Button/Button.d.ts +17 -0
- package/dist/esm/types/components/atoms/Button/Button.stories.d.ts +7 -0
- package/dist/esm/types/components/atoms/Button/Button.test.d.ts +1 -0
- package/dist/esm/types/components/atoms/Loading/Loading.d.ts +14 -0
- package/dist/esm/types/components/atoms/Loading/Loading.stories.d.ts +7 -0
- package/dist/esm/types/components/atoms/Loading/Loading.test.d.ts +1 -0
- package/dist/esm/types/components/atoms/LoadingSpinner/LoadingSpinner.d.ts +9 -0
- package/dist/esm/types/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts +6 -0
- package/dist/esm/types/components/atoms/index.d.ts +3 -0
- package/dist/esm/types/components/index.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +40 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# myRentokil-components-library
|
|
2
|
+
|
|
3
|
+
Custom components library
|
|
4
|
+
|
|
5
|
+
This library can be installed using npm.
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
npm install @myrentokil/myrentokil-components-library
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Available Scripts:
|
|
12
|
+
|
|
13
|
+
### Run tests
|
|
14
|
+
```
|
|
15
|
+
npm run test
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Run storybook locally
|
|
19
|
+
This project uses Storybook. To see the components in the browser, run:
|
|
20
|
+
```
|
|
21
|
+
npm run storybook
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Build storybook
|
|
25
|
+
```
|
|
26
|
+
npm run build-storybook
|
|
27
|
+
```
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ButtonProps {
|
|
3
|
+
/**
|
|
4
|
+
* How large should the button be?
|
|
5
|
+
*/
|
|
6
|
+
size: 'small' | 'medium' | 'large';
|
|
7
|
+
/**
|
|
8
|
+
* Button contents
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Optional click handler
|
|
13
|
+
*/
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Button: ({ size, label, ...props }: ButtonProps) => React.JSX.Element;
|
|
17
|
+
export default Button;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
const react_1 = __importDefault(require("react"));
|
|
41
|
+
const styled_components_1 = __importStar(require("styled-components"));
|
|
42
|
+
const getSizeStyles = ({ size = 'medium' }) => {
|
|
43
|
+
switch (size) {
|
|
44
|
+
case 'small': {
|
|
45
|
+
return (0, styled_components_1.css) `
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
padding: 10px 16px;
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
case 'large': {
|
|
51
|
+
return (0, styled_components_1.css) `
|
|
52
|
+
font-size: 16px;
|
|
53
|
+
padding: 12px 24px;
|
|
54
|
+
`;
|
|
55
|
+
}
|
|
56
|
+
default: {
|
|
57
|
+
return (0, styled_components_1.css) `
|
|
58
|
+
font-size: 14px;
|
|
59
|
+
padding: 11px 20px;
|
|
60
|
+
`;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
const Button = (_a) => {
|
|
65
|
+
var { size = 'medium', label = '' } = _a, props = __rest(_a, ["size", "label"]);
|
|
66
|
+
return (react_1.default.createElement(StyledButton, Object.assign({ type: "button", size: size }, props), label));
|
|
67
|
+
};
|
|
68
|
+
const StyledButton = styled_components_1.default.button `
|
|
69
|
+
background: transparent;
|
|
70
|
+
border-radius: 3px;
|
|
71
|
+
border: 2px solid palevioletred;
|
|
72
|
+
color: palevioletred;
|
|
73
|
+
margin: 0.5em 1em;
|
|
74
|
+
padding: 0.25em 1em;
|
|
75
|
+
|
|
76
|
+
${(props) => getSizeStyles({ size: props.size })}
|
|
77
|
+
`;
|
|
78
|
+
exports.default = Button;
|
|
79
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,uEAAgD;AAiBhD,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE;IAC1C,QAAQ,IAAI,EAAE;QACV,KAAK,OAAO,CAAC,CAAC;YACV,OAAO,IAAA,uBAAG,EAAA;;;aAGT,CAAC;SACL;QACD,KAAK,OAAO,CAAC,CAAC;YACV,OAAO,IAAA,uBAAG,EAAA;;;aAGT,CAAC;SACL;QACD,OAAO,CAAC,CAAC;YACL,OAAO,IAAA,uBAAG,EAAA;;;aAGT,CAAC;SACL;KACJ;AACL,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EAAsD,EAAE,EAAE;QAA1D,EAAE,IAAI,GAAG,QAAQ,EAAE,KAAK,GAAG,EAAE,OAAyB,EAApB,KAAK,cAAvC,iBAAyC,CAAF;IACnD,OAAO,CACH,8BAAC,YAAY,kBAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAM,KAAK,GAC5C,KAAK,CACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,2BAAM,CAAC,MAAM,CAAkB;;;;;;;;MAQ9C,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;CACnD,CAAC;AAEF,kBAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Button from './Button';
|
|
3
|
+
declare const meta: Meta<typeof Button>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Button>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Secondary: Story;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Secondary = exports.Primary = void 0;
|
|
7
|
+
const Button_1 = __importDefault(require("./Button"));
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'ReactComponentsLibrary/Button',
|
|
10
|
+
component: Button_1.default,
|
|
11
|
+
tags: ['autodocs']
|
|
12
|
+
};
|
|
13
|
+
exports.default = meta;
|
|
14
|
+
exports.Primary = {
|
|
15
|
+
args: {
|
|
16
|
+
label: 'Button',
|
|
17
|
+
size: 'small'
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
exports.Secondary = {
|
|
21
|
+
args: {
|
|
22
|
+
label: 'Click me',
|
|
23
|
+
size: 'large'
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.stories.ts"],"names":[],"mappings":";;;;;;AAEA,sDAA8B;AAE9B,MAAM,IAAI,GAAwB;IAC9B,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,gBAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACrB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,OAAO;KAChB;CACJ,CAAC;AAEW,QAAA,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,OAAO;KAChB;CACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const react_2 = require("@testing-library/react");
|
|
8
|
+
const Button_1 = __importDefault(require("./Button"));
|
|
9
|
+
describe('Button', () => {
|
|
10
|
+
it('renders the button component', () => {
|
|
11
|
+
(0, react_2.render)(react_1.default.createElement(Button_1.default, { label: "Hello", size: "small" }));
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=Button.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.test.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,sDAA8B;AAE9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACpB,EAAE,CAAC,8BAA8B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,8BAAC,gBAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface LoadingProps {
|
|
3
|
+
/**
|
|
4
|
+
* How large should the loader be? e.g 40px
|
|
5
|
+
* default is 40
|
|
6
|
+
*/
|
|
7
|
+
size?: number;
|
|
8
|
+
/**
|
|
9
|
+
* The color of the loader
|
|
10
|
+
*/
|
|
11
|
+
color?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const Loading: ({ color, size }: LoadingProps) => React.JSX.Element;
|
|
14
|
+
export default Loading;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
|
|
8
|
+
const Box_1 = __importDefault(require("@mui/material/Box"));
|
|
9
|
+
const Loading = ({ color = 'blue', size }) => {
|
|
10
|
+
return (react_1.default.createElement(Box_1.default, { sx: { display: 'flex' } },
|
|
11
|
+
react_1.default.createElement(CircularProgress_1.default, { sx: { color }, size: size })));
|
|
12
|
+
};
|
|
13
|
+
exports.default = Loading;
|
|
14
|
+
//# sourceMappingURL=Loading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Loading/Loading.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,sFAA8D;AAC9D,4DAAoC;AAepC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAgB,EAAE,EAAE;IACvD,OAAO,CACH,8BAAC,aAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACxB,8BAAC,0BAAgB,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,GAAI,CAC7C,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Loading from './Loading';
|
|
3
|
+
declare const meta: Meta<typeof Loading>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Loading>;
|
|
6
|
+
export declare const PrimaryLoading: Story;
|
|
7
|
+
export declare const SecondaryLoading: Story;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.SecondaryLoading = exports.PrimaryLoading = void 0;
|
|
7
|
+
const Loading_1 = __importDefault(require("./Loading"));
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'ReactComponentsLibrary/Loading',
|
|
10
|
+
component: Loading_1.default,
|
|
11
|
+
tags: ['autodocs']
|
|
12
|
+
};
|
|
13
|
+
exports.default = meta;
|
|
14
|
+
exports.PrimaryLoading = {
|
|
15
|
+
args: {}
|
|
16
|
+
};
|
|
17
|
+
exports.SecondaryLoading = {
|
|
18
|
+
args: {
|
|
19
|
+
size: 100,
|
|
20
|
+
color: 'red'
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=Loading.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loading.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Loading/Loading.stories.ts"],"names":[],"mappings":";;;;;;AAEA,wDAAgC;AAEhC,MAAM,IAAI,GAAyB;IAC/B,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,iBAAO;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;CACrB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,cAAc,GAAU;IACjC,IAAI,EAAE,EAAE;CACX,CAAC;AAEW,QAAA,gBAAgB,GAAU;IACnC,IAAI,EAAE;QACF,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,KAAK;KACf;CACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const react_2 = require("@testing-library/react");
|
|
8
|
+
const Loading_1 = __importDefault(require("./Loading"));
|
|
9
|
+
describe('Loading', () => {
|
|
10
|
+
it('renders the loading component', () => {
|
|
11
|
+
(0, react_2.render)(react_1.default.createElement(Loading_1.default, null));
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=Loading.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loading.test.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Loading/Loading.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,wDAAgC;AAEhC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACrB,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACrC,IAAA,cAAM,EAAC,8BAAC,iBAAO,OAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
// import { ReactComponent as SpinnerIcon } from '../../../assets/images/svg/spinner.svg';
|
|
8
|
+
// const SpinnerIcon = require('../../../assets/images/svg/spinner.svg') as string;
|
|
9
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
10
|
+
const LoadingSpinner = ({ show = false }) => {
|
|
11
|
+
return show ? react_1.default.createElement(LoadingSpinnerWrapper, null) : null;
|
|
12
|
+
};
|
|
13
|
+
const LoadingSpinnerWrapper = styled_components_1.default.div `
|
|
14
|
+
align-items: center;
|
|
15
|
+
bottom: 0;
|
|
16
|
+
display: flex;
|
|
17
|
+
height: 100%;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
left: 0;
|
|
20
|
+
position: absolute;
|
|
21
|
+
right: 0;
|
|
22
|
+
top: 0;
|
|
23
|
+
width: 100%;
|
|
24
|
+
z-index: 9999;
|
|
25
|
+
`;
|
|
26
|
+
exports.default = LoadingSpinner;
|
|
27
|
+
//# sourceMappingURL=LoadingSpinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../../src/components/atoms/LoadingSpinner/LoadingSpinner.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0FAA0F;AAC1F,mFAAmF;AACnF,0EAAuC;AASvC,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,GAAG,KAAK,EAAuB,EAAE,EAAE;IAC7D,OAAO,IAAI,CAAC,CAAC,CAAC,8BAAC,qBAAqB,OAAgD,CAAC,CAAC,CAAC,IAAI,CAAC;AAChG,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAYvC,CAAC;AAEF,kBAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import LoadingSpinner from './LoadingSpinner';
|
|
3
|
+
declare const meta: Meta<typeof LoadingSpinner>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LoadingSpinner>;
|
|
6
|
+
export declare const PrimaryLoadingSpinner: Story;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.PrimaryLoadingSpinner = void 0;
|
|
7
|
+
const LoadingSpinner_1 = __importDefault(require("./LoadingSpinner"));
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'ReactComponentsLibrary/LoadingSpinner',
|
|
10
|
+
component: LoadingSpinner_1.default,
|
|
11
|
+
tags: ['autodocs']
|
|
12
|
+
};
|
|
13
|
+
exports.default = meta;
|
|
14
|
+
exports.PrimaryLoadingSpinner = {
|
|
15
|
+
args: {
|
|
16
|
+
show: true
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=LoadingSpinner.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/LoadingSpinner/LoadingSpinner.stories.ts"],"names":[],"mappings":";;;;;;AAEA,sEAA8C;AAE9C,MAAM,IAAI,GAAgC;IACtC,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,wBAAc;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;CACrB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,qBAAqB,GAAU;IACxC,IAAI,EAAE;QACF,IAAI,EAAE,IAAI;KACb;CACJ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.LoadingSpinner = exports.Loading = exports.Button = void 0;
|
|
7
|
+
var Button_1 = require("./Button/Button");
|
|
8
|
+
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
|
|
9
|
+
var Loading_1 = require("./Loading/Loading");
|
|
10
|
+
Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return __importDefault(Loading_1).default; } });
|
|
11
|
+
var LoadingSpinner_1 = require("./LoadingSpinner/LoadingSpinner");
|
|
12
|
+
Object.defineProperty(exports, "LoadingSpinner", { enumerable: true, get: function () { return __importDefault(LoadingSpinner_1).default; } });
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":";;;;;;AAAA,0CAAoD;AAA3C,iHAAA,OAAO,OAAU;AAC1B,6CAAuD;AAA9C,mHAAA,OAAO,OAAW;AAC3B,kEAA4E;AAAnE,iIAAA,OAAO,OAAkB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './atoms';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./atoms"), exports);
|
|
18
|
+
// export * from './molecules';
|
|
19
|
+
// export * from './organisms';
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,+BAA+B;AAC/B,+BAA+B"}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":""}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/organisms/index.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ButtonProps {
|
|
3
|
+
/**
|
|
4
|
+
* How large should the button be?
|
|
5
|
+
*/
|
|
6
|
+
size: 'small' | 'medium' | 'large';
|
|
7
|
+
/**
|
|
8
|
+
* Button contents
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Optional click handler
|
|
13
|
+
*/
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
}
|
|
16
|
+
declare const Button: ({ size, label, ...props }: ButtonProps) => React.JSX.Element;
|
|
17
|
+
export default Button;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Button from './Button';
|
|
3
|
+
declare const meta: Meta<typeof Button>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Button>;
|
|
6
|
+
export declare const Primary: Story;
|
|
7
|
+
export declare const Secondary: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface LoadingProps {
|
|
3
|
+
/**
|
|
4
|
+
* How large should the loader be? e.g 40px
|
|
5
|
+
* default is 40
|
|
6
|
+
*/
|
|
7
|
+
size?: number;
|
|
8
|
+
/**
|
|
9
|
+
* The color of the loader
|
|
10
|
+
*/
|
|
11
|
+
color?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const Loading: ({ color, size }: LoadingProps) => React.JSX.Element;
|
|
14
|
+
export default Loading;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Loading from './Loading';
|
|
3
|
+
declare const meta: Meta<typeof Loading>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Loading>;
|
|
6
|
+
export declare const PrimaryLoading: Story;
|
|
7
|
+
export declare const SecondaryLoading: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import LoadingSpinner from './LoadingSpinner';
|
|
3
|
+
declare const meta: Meta<typeof LoadingSpinner>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LoadingSpinner>;
|
|
6
|
+
export declare const PrimaryLoadingSpinner: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './atoms';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|