@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.
@@ -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 './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';
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";
@@ -1,7 +1,7 @@
1
1
  import React, { PropsWithChildren } from "react";
2
2
  export interface TileProps {
3
- src: string;
4
- alt: string;
3
+ src?: string;
4
+ alt?: string;
5
5
  title: string;
6
6
  interactive?: boolean;
7
7
  }
@@ -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,6 @@
1
+ import React, { PropsWithChildren } from "react";
2
+ export interface ModalProps {
3
+ show: boolean;
4
+ onClose: () => void;
5
+ }
6
+ export declare const Modal: React.FCS<PropsWithChildren<ModalProps>>;
@@ -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';
@@ -1,2 +1,3 @@
1
1
  export { Menu } from './Menu';
2
2
  export { Setting } from './Setting';
3
+ export { Modal } from './Modal';
@@ -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
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://npm.pkg.github.com/integrigo"
5
5
  },
6
- "version": "1.6.15",
6
+ "version": "1.6.16",
7
7
  "main": "lib/index.js",
8
8
  "module": "lib/index.esm.js",
9
9
  "types": "lib/index.d.ts",
@@ -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 './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';
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: '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'
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: '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
- };
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: string;
9
- alt: string;
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
- <Avatar size="xl" src={src} alt={alt} />
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'
@@ -1,2 +1,3 @@
1
1
  export { Menu } from './Menu';
2
- export { Setting } from './Setting';
2
+ export { Setting } from './Setting';
3
+ 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";
@@ -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;