@integrigo/integrigo-ui 1.6.15 → 1.6.16
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/lib/index.d.ts +2 -1
- package/lib/index.esm.js +1 -1
- package/lib/index.js +1 -1
- package/lib/src/components/atoms/Gradient/Gradient.d.ts +9 -0
- package/lib/src/components/atoms/Gradient/Gradient.stories.d.ts +16 -0
- package/lib/src/components/atoms/Gradient/index.d.ts +1 -0
- package/lib/src/components/atoms/index.d.ts +12 -11
- package/lib/src/components/molecules/Tile/Tile.d.ts +2 -2
- package/lib/src/components/molecules/Tile/Tile.stories.d.ts +1 -0
- package/lib/src/components/organisms/Modal/Modal.d.ts +6 -0
- package/lib/src/components/organisms/Modal/Modal.stories.d.ts +5 -0
- package/lib/src/components/organisms/Modal/index.d.ts +1 -0
- package/lib/src/components/organisms/index.d.ts +1 -0
- package/lib/src/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/components/atoms/Gradient/Gradient.stories.tsx +22 -0
- package/src/components/atoms/Gradient/Gradient.tsx +35 -0
- package/src/components/atoms/Gradient/index.tsx +1 -0
- package/src/components/atoms/index.ts +12 -11
- package/src/components/molecules/Tile/Tile.stories.tsx +13 -8
- package/src/components/molecules/Tile/Tile.tsx +16 -5
- package/src/components/organisms/Modal/Modal.stories.tsx +26 -0
- package/src/components/organisms/Modal/Modal.tsx +84 -0
- package/src/components/organisms/Modal/index.ts +1 -0
- package/src/components/organisms/index.ts +2 -1
- package/src/index.ts +2 -1
- package/src/styles/global.ts +10 -0
@@ -0,0 +1,9 @@
|
|
1
|
+
declare type GradientProps = {
|
2
|
+
size?: "s" | "m" | "l" | "xl" | "xxl";
|
3
|
+
width?: number;
|
4
|
+
height?: number;
|
5
|
+
variant?: number;
|
6
|
+
circle?: boolean;
|
7
|
+
};
|
8
|
+
export declare const Gradient: import("styled-components").StyledComponent<"div", any, GradientProps, never>;
|
9
|
+
export {};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
2
|
+
declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, {
|
3
|
+
size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
|
4
|
+
width?: number | undefined;
|
5
|
+
height?: number | undefined;
|
6
|
+
variant?: number | undefined;
|
7
|
+
circle?: boolean | undefined;
|
8
|
+
}, never>>;
|
9
|
+
export default _default;
|
10
|
+
export declare const Basic: ComponentStory<import("styled-components").StyledComponent<"div", any, {
|
11
|
+
size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
|
12
|
+
width?: number | undefined;
|
13
|
+
height?: number | undefined;
|
14
|
+
variant?: number | undefined;
|
15
|
+
circle?: boolean | undefined;
|
16
|
+
}, never>>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Gradient } from './Gradient';
|
@@ -1,11 +1,12 @@
|
|
1
|
-
export { Alert } from
|
2
|
-
export { Avatar } from
|
3
|
-
export { Card } from
|
4
|
-
export { Divider } from
|
5
|
-
export { Icon } from
|
6
|
-
export { Pill } from
|
7
|
-
export { Typography } from
|
8
|
-
export { Nav } from
|
9
|
-
export { Spinner } from
|
10
|
-
export { Chip } from
|
11
|
-
export { Dot } from
|
1
|
+
export { Alert } from "./Alert";
|
2
|
+
export { Avatar } from "./Avatar";
|
3
|
+
export { Card } from "./Card";
|
4
|
+
export { Divider } from "./Divider";
|
5
|
+
export { Icon } from "./Icon";
|
6
|
+
export { Pill } from "./Pill";
|
7
|
+
export { Typography } from "./Typography";
|
8
|
+
export { Nav } from "./Nav";
|
9
|
+
export { Spinner } from "./Spinner";
|
10
|
+
export { Chip } from "./Chip";
|
11
|
+
export { Dot } from "./Dot";
|
12
|
+
export { Gradient } from "./Gradient";
|
@@ -4,3 +4,4 @@ declare const _default: ComponentMeta<React.FC<React.PropsWithChildren<import(".
|
|
4
4
|
export default _default;
|
5
5
|
export declare const Basic: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
|
6
6
|
export declare const Interactive: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
|
7
|
+
export declare const NoImage: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
3
|
+
declare const _default: ComponentMeta<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;
|
4
|
+
export default _default;
|
5
|
+
export declare const Basic: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Modal } from './Modal';
|
package/lib/src/index.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from "./components/atoms";
|
1
|
+
export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from "./components/atoms";
|
2
2
|
export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, } from "./components/molecules";
|
3
|
-
export { Menu, Setting } from "./components/organisms";
|
3
|
+
export { Menu, Setting, Modal } from "./components/organisms";
|
4
4
|
export { GlobalStyles as IntegrigoUI, Color } from "./styles";
|
package/package.json
CHANGED
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
3
|
+
|
4
|
+
import { Gradient } from "./Gradient";
|
5
|
+
|
6
|
+
export default {
|
7
|
+
title: "Atoms/Gradient",
|
8
|
+
component: Gradient,
|
9
|
+
argTypes: {
|
10
|
+
variant: {
|
11
|
+
control: "number",
|
12
|
+
defaultValue: 0,
|
13
|
+
},
|
14
|
+
},
|
15
|
+
} as ComponentMeta<typeof Gradient>;
|
16
|
+
|
17
|
+
const Template: ComponentStory<typeof Gradient> = (args) => (
|
18
|
+
<Gradient {...args} />
|
19
|
+
);
|
20
|
+
|
21
|
+
export const Basic = Template.bind({});
|
22
|
+
Basic.args = {};
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import styled from "styled-components";
|
2
|
+
|
3
|
+
type GradientProps = {
|
4
|
+
size?: "s" | "m" | "l" | "xl" | "xxl";
|
5
|
+
width?: number;
|
6
|
+
height?: number;
|
7
|
+
variant?: number;
|
8
|
+
circle?: boolean;
|
9
|
+
};
|
10
|
+
|
11
|
+
const sizeVariant = {
|
12
|
+
s: 20,
|
13
|
+
m: 32,
|
14
|
+
l: 53,
|
15
|
+
xl: 64,
|
16
|
+
xxl: 94,
|
17
|
+
};
|
18
|
+
|
19
|
+
const colorVariant = [
|
20
|
+
"var(--gradient-natural-orange)",
|
21
|
+
"var(--gradient-orange-red)",
|
22
|
+
"var(--gradient-red)",
|
23
|
+
"var(--gradient-red-blue)",
|
24
|
+
"var(--gradient-green-blue)",
|
25
|
+
"var(--gradient-navy)",
|
26
|
+
"var(--gradient-cyan-blue)",
|
27
|
+
"var(--gradient-natural-grey)",
|
28
|
+
];
|
29
|
+
|
30
|
+
export const Gradient = styled.div<GradientProps>`
|
31
|
+
width: ${(p) => p.width || sizeVariant[p.size || "m"]}px;
|
32
|
+
height: ${(p) => p.height || sizeVariant[p.size || "m"]}px;
|
33
|
+
background: ${(p) => colorVariant[(p.variant || 0) % 8]};
|
34
|
+
border-radius: ${(p) => (p.circle ? "50%" : 0)};
|
35
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Gradient } from './Gradient'
|
@@ -1,11 +1,12 @@
|
|
1
|
-
export { Alert } from
|
2
|
-
export { Avatar } from
|
3
|
-
export { Card } from
|
4
|
-
export { Divider } from
|
5
|
-
export { Icon } from
|
6
|
-
export { Pill } from
|
7
|
-
export { Typography } from
|
8
|
-
export { Nav } from
|
9
|
-
export { Spinner } from
|
10
|
-
export { Chip } from
|
11
|
-
export { Dot } from
|
1
|
+
export { Alert } from "./Alert";
|
2
|
+
export { Avatar } from "./Avatar";
|
3
|
+
export { Card } from "./Card";
|
4
|
+
export { Divider } from "./Divider";
|
5
|
+
export { Icon } from "./Icon";
|
6
|
+
export { Pill } from "./Pill";
|
7
|
+
export { Typography } from "./Typography";
|
8
|
+
export { Nav } from "./Nav";
|
9
|
+
export { Spinner } from "./Spinner";
|
10
|
+
export { Chip } from "./Chip";
|
11
|
+
export { Dot } from "./Dot";
|
12
|
+
export { Gradient } from "./Gradient";
|
@@ -12,15 +12,20 @@ const Template: ComponentStory<typeof Tile> = (args) => <Tile {...args} />;
|
|
12
12
|
|
13
13
|
export const Basic = Template.bind({});
|
14
14
|
Basic.args = {
|
15
|
-
src:
|
16
|
-
alt:
|
17
|
-
title:
|
15
|
+
src: "https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2",
|
16
|
+
alt: "Jane Doe",
|
17
|
+
title: "Tile Card",
|
18
18
|
};
|
19
19
|
|
20
20
|
export const Interactive = Template.bind({});
|
21
21
|
Interactive.args = {
|
22
|
-
src:
|
23
|
-
alt:
|
24
|
-
title:
|
25
|
-
interactive: true
|
26
|
-
};
|
22
|
+
src: "https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2",
|
23
|
+
alt: "Jane Doe",
|
24
|
+
title: "Tile Card",
|
25
|
+
interactive: true,
|
26
|
+
};
|
27
|
+
|
28
|
+
export const NoImage = Template.bind({});
|
29
|
+
NoImage.args = {
|
30
|
+
title: "Tile Card",
|
31
|
+
};
|
@@ -1,16 +1,19 @@
|
|
1
1
|
import React, { PropsWithChildren } from "react";
|
2
2
|
import styled, { css } from "styled-components";
|
3
|
-
import { Avatar, Card, Typography } from "../../atoms";
|
3
|
+
import { Avatar, Card, Gradient, Typography } from "../../atoms";
|
4
4
|
|
5
5
|
const { Hero } = Typography;
|
6
6
|
|
7
7
|
export interface TileProps {
|
8
|
-
src
|
9
|
-
alt
|
8
|
+
src?: string;
|
9
|
+
alt?: string;
|
10
10
|
title: string;
|
11
11
|
interactive?: boolean;
|
12
12
|
}
|
13
13
|
|
14
|
+
const stringToNumber = (name: string): number =>
|
15
|
+
name.split("").reduce((sum, element) => sum + element.charCodeAt(0), 0);
|
16
|
+
|
14
17
|
export const Tile: React.FC<PropsWithChildren<TileProps>> = ({
|
15
18
|
src,
|
16
19
|
alt,
|
@@ -21,7 +24,11 @@ export const Tile: React.FC<PropsWithChildren<TileProps>> = ({
|
|
21
24
|
return (
|
22
25
|
<Root size="s" flat interactive={interactive}>
|
23
26
|
<Info>
|
24
|
-
|
27
|
+
{src && alt ? (
|
28
|
+
<Avatar size="xl" src={src} alt={alt} />
|
29
|
+
) : (
|
30
|
+
<Gradient size="xl" variant={stringToNumber(title)} circle />
|
31
|
+
)}
|
25
32
|
<Hero size="s">{title}</Hero>
|
26
33
|
</Info>
|
27
34
|
|
@@ -53,4 +60,8 @@ const Info = styled.div`
|
|
53
60
|
gap: var(--padding-m);
|
54
61
|
`;
|
55
62
|
|
56
|
-
const Action = styled.div
|
63
|
+
const Action = styled.div`
|
64
|
+
display: flex;
|
65
|
+
align-items: center;
|
66
|
+
gap: var(--padding-s);
|
67
|
+
`;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
2
|
+
|
3
|
+
import { Modal } from "./Modal";
|
4
|
+
|
5
|
+
export default {
|
6
|
+
title: "Organisms/Modal",
|
7
|
+
component: Modal,
|
8
|
+
argTypes: {
|
9
|
+
show: {
|
10
|
+
control: "boolean",
|
11
|
+
defaultValue: true,
|
12
|
+
},
|
13
|
+
},
|
14
|
+
} as ComponentMeta<typeof Modal>;
|
15
|
+
|
16
|
+
const Template: ComponentStory<typeof Modal> = (args) => (
|
17
|
+
<>
|
18
|
+
Some other content
|
19
|
+
<Modal show={args.show} onClose={() => null}>
|
20
|
+
hey
|
21
|
+
</Modal>
|
22
|
+
</>
|
23
|
+
);
|
24
|
+
|
25
|
+
export const Basic = Template.bind({});
|
26
|
+
Basic.args = {};
|
@@ -0,0 +1,84 @@
|
|
1
|
+
import React, { PropsWithChildren } from "react";
|
2
|
+
import styled from "styled-components";
|
3
|
+
import { Card, Icon } from "../../atoms";
|
4
|
+
|
5
|
+
export interface ModalProps {
|
6
|
+
show: boolean;
|
7
|
+
onClose: () => void;
|
8
|
+
}
|
9
|
+
|
10
|
+
export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
|
11
|
+
className,
|
12
|
+
children,
|
13
|
+
show,
|
14
|
+
onClose,
|
15
|
+
}) => {
|
16
|
+
if (!show) {
|
17
|
+
return null;
|
18
|
+
}
|
19
|
+
|
20
|
+
return (
|
21
|
+
<Root>
|
22
|
+
<ModalCard size="s" flat className={className}>
|
23
|
+
<CloseModal>
|
24
|
+
<CloseIcon onClick={onClose}>
|
25
|
+
<Icon type="close" />
|
26
|
+
</CloseIcon>
|
27
|
+
</CloseModal>
|
28
|
+
{children}
|
29
|
+
</ModalCard>
|
30
|
+
</Root>
|
31
|
+
);
|
32
|
+
};
|
33
|
+
|
34
|
+
const Root = styled.div`
|
35
|
+
position: fixed;
|
36
|
+
left: 0;
|
37
|
+
top: 0;
|
38
|
+
width: 100%;
|
39
|
+
height: 100%;
|
40
|
+
z-index: 100;
|
41
|
+
|
42
|
+
&::after {
|
43
|
+
content: "";
|
44
|
+
position: absolute;
|
45
|
+
left: 0;
|
46
|
+
top: 0;
|
47
|
+
height: 100%;
|
48
|
+
width: 100%;
|
49
|
+
backdrop-filter: blur(8px);
|
50
|
+
background-color: var(--color-shadow);
|
51
|
+
}
|
52
|
+
`;
|
53
|
+
|
54
|
+
const ModalCard = styled(Card)`
|
55
|
+
padding: var(--padding-s);
|
56
|
+
position: fixed;
|
57
|
+
left: 50%;
|
58
|
+
top: 50%;
|
59
|
+
max-width: 320px;
|
60
|
+
width: calc(100vw - 2 * var(--padding-m));
|
61
|
+
transform: translate(-50%, -50%);
|
62
|
+
z-index: 101;
|
63
|
+
`;
|
64
|
+
|
65
|
+
const CloseModal = styled.div`
|
66
|
+
display: flex;
|
67
|
+
justify-content: flex-end;
|
68
|
+
`;
|
69
|
+
|
70
|
+
const CloseIcon = styled.button`
|
71
|
+
border: none;
|
72
|
+
background: transparent;
|
73
|
+
padding: 0;
|
74
|
+
cursor: pointer;
|
75
|
+
|
76
|
+
& > svg {
|
77
|
+
fill: var(--shades-of-grey-60);
|
78
|
+
transition: fill var(--transition-speed);
|
79
|
+
|
80
|
+
&:hover {
|
81
|
+
fill: var(--shades-of-grey-100);
|
82
|
+
}
|
83
|
+
}
|
84
|
+
`;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Modal } from './Modal'
|
package/src/index.ts
CHANGED
@@ -10,6 +10,7 @@ export {
|
|
10
10
|
Spinner,
|
11
11
|
Chip,
|
12
12
|
Dot,
|
13
|
+
Gradient,
|
13
14
|
} from "./components/atoms";
|
14
15
|
|
15
16
|
export {
|
@@ -24,6 +25,6 @@ export {
|
|
24
25
|
Tile,
|
25
26
|
} from "./components/molecules";
|
26
27
|
|
27
|
-
export { Menu, Setting } from "./components/organisms";
|
28
|
+
export { Menu, Setting, Modal } from "./components/organisms";
|
28
29
|
|
29
30
|
export { GlobalStyles as IntegrigoUI, Color } from "./styles";
|
package/src/styles/global.ts
CHANGED
@@ -29,6 +29,16 @@ export const GlobalStyles = createGlobalStyle`
|
|
29
29
|
|
30
30
|
--color-orange-80: ${Color.Orange}80;
|
31
31
|
--color-orange-65: ${Color.Orange}65;
|
32
|
+
--color-shadow: ${Color.Grey100}10;
|
33
|
+
|
34
|
+
--gradient-natural-orange: linear-gradient(333.61deg, #E09A33 13.3%, #FFB241 90.98%);
|
35
|
+
--gradient-orange-red: radial-gradient(106.28% 106.28% at 76.05% 89.07%, #E09A33 0%, #CF544B 100%);
|
36
|
+
--gradient-red: linear-gradient(326.33deg, #CF544B -3.49%, #E09A33 149.87%);
|
37
|
+
--gradient-red-blue: linear-gradient(326.33deg, #172142 -3.49%, #CF544B 73.19%, #E09A33 149.87%);
|
38
|
+
--gradient-green-blue: linear-gradient(157.85deg, #6B8B4A 19.78%, #172142 117.27%);
|
39
|
+
--gradient-navy: linear-gradient(147.91deg, #3F4D7B 15.54%, #172142 87.63%);
|
40
|
+
--gradient-cyan-blue: linear-gradient(153.72deg, #008099 -10.13%, #172142 84.37%);
|
41
|
+
--gradient-natural-grey: linear-gradient(152.12deg, #DBDBDB -55.19%, #5F5A5A 89.06%);
|
32
42
|
|
33
43
|
--padding-s: 8px;
|
34
44
|
--padding-m: 16px;
|