@integrigo/integrigo-ui 1.6.15 → 1.6.16

package/lib/src/components/atoms/Gradient/Gradient.d.ts

@@ -0,0 +1,9 @@
+declare type GradientProps = {
+    size?: "s" | "m" | "l" | "xl" | "xxl";
+    width?: number;
+    height?: number;
+    variant?: number;
+    circle?: boolean;
+};
+export declare const Gradient: import("styled-components").StyledComponent<"div", any, GradientProps, never>;
+export {};

package/lib/src/components/atoms/Gradient/Gradient.stories.d.ts

@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("styled-components").StyledComponent<"div", any, {
+    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    variant?: number | undefined;
+    circle?: boolean | undefined;
+}, never>>;
+export default _default;
+export declare const Basic: ComponentStory<import("styled-components").StyledComponent<"div", any, {
+    size?: "s" | "m" | "l" | "xl" | "xxl" | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    variant?: number | undefined;
+    circle?: boolean | undefined;
+}, never>>;

package/lib/src/components/atoms/Gradient/index.d.ts

@@ -0,0 +1 @@
+export { Gradient } from './Gradient';

package/lib/src/components/atoms/index.d.ts

@@ -1,11 +1,12 @@
-export { Alert } from './Alert';
-export { Avatar } from './Avatar';
-export { Card } from './Card';
-export { Divider } from './Divider';
-export { Icon } from './Icon';
-export { Pill } from './Pill';
-export { Typography } from './Typography';
-export { Nav } from './Nav';
-export { Spinner } from './Spinner';
-export { Chip } from './Chip';
-export { Dot } from './Dot';
+export { Alert } from "./Alert";
+export { Avatar } from "./Avatar";
+export { Card } from "./Card";
+export { Divider } from "./Divider";
+export { Icon } from "./Icon";
+export { Pill } from "./Pill";
+export { Typography } from "./Typography";
+export { Nav } from "./Nav";
+export { Spinner } from "./Spinner";
+export { Chip } from "./Chip";
+export { Dot } from "./Dot";
+export { Gradient } from "./Gradient";

package/lib/src/components/molecules/Tile/Tile.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 export interface TileProps {
-    src: string;
-    alt: string;
+    src?: string;
+    alt?: string;
     title: string;
     interactive?: boolean;
 }

package/lib/src/components/molecules/Tile/Tile.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: ComponentMeta<React.FC<React.PropsWithChildren<import(".
 export default _default;
 export declare const Basic: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
 export declare const Interactive: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
+export declare const NoImage: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;

package/lib/src/components/organisms/Modal/Modal.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from "react";
+export interface ModalProps {
+    show: boolean;
+    onClose: () => void;
+}
+export declare const Modal: React.FCS<PropsWithChildren<ModalProps>>;

package/lib/src/components/organisms/Modal/Modal.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;
+export default _default;
+export declare const Basic: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>>>;

package/lib/src/components/organisms/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/lib/src/components/organisms/index.d.ts

@@ -1,2 +1,3 @@
 export { Menu } from './Menu';
 export { Setting } from './Setting';
+export { Modal } from './Modal';

package/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from "./components/atoms";
+export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, Gradient, } from "./components/atoms";
 export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, } from "./components/molecules";
-export { Menu, Setting } from "./components/organisms";
+export { Menu, Setting, Modal } from "./components/organisms";
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.15",
+  "version": "1.6.16",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/atoms/Gradient/Gradient.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Gradient } from "./Gradient";
+
+export default {
+  title: "Atoms/Gradient",
+  component: Gradient,
+  argTypes: {
+    variant: {
+      control: "number",
+      defaultValue: 0,
+    },
+  },
+} as ComponentMeta<typeof Gradient>;
+
+const Template: ComponentStory<typeof Gradient> = (args) => (
+  <Gradient {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/components/atoms/Gradient/Gradient.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+type GradientProps = {
+  size?: "s" | "m" | "l" | "xl" | "xxl";
+  width?: number;
+  height?: number;
+  variant?: number;
+  circle?: boolean;
+};
+
+const sizeVariant = {
+  s: 20,
+  m: 32,
+  l: 53,
+  xl: 64,
+  xxl: 94,
+};
+
+const colorVariant = [
+  "var(--gradient-natural-orange)",
+  "var(--gradient-orange-red)",
+  "var(--gradient-red)",
+  "var(--gradient-red-blue)",
+  "var(--gradient-green-blue)",
+  "var(--gradient-navy)",
+  "var(--gradient-cyan-blue)",
+  "var(--gradient-natural-grey)",
+];
+
+export const Gradient = styled.div<GradientProps>`
+  width: ${(p) => p.width || sizeVariant[p.size || "m"]}px;
+  height: ${(p) => p.height || sizeVariant[p.size || "m"]}px;
+  background: ${(p) => colorVariant[(p.variant || 0) % 8]};
+  border-radius: ${(p) => (p.circle ? "50%" : 0)};
+`;

package/src/components/atoms/Gradient/index.tsx

@@ -0,0 +1 @@
+export { Gradient } from './Gradient'

package/src/components/atoms/index.ts

@@ -1,11 +1,12 @@
-export { Alert } from './Alert';
-export { Avatar } from './Avatar';
-export { Card } from './Card';
-export { Divider } from './Divider';
-export { Icon } from './Icon';
-export { Pill } from './Pill';
-export { Typography } from './Typography';
-export { Nav } from './Nav';
-export { Spinner } from './Spinner';
-export { Chip } from './Chip';
-export { Dot } from './Dot';
+export { Alert } from "./Alert";
+export { Avatar } from "./Avatar";
+export { Card } from "./Card";
+export { Divider } from "./Divider";
+export { Icon } from "./Icon";
+export { Pill } from "./Pill";
+export { Typography } from "./Typography";
+export { Nav } from "./Nav";
+export { Spinner } from "./Spinner";
+export { Chip } from "./Chip";
+export { Dot } from "./Dot";
+export { Gradient } from "./Gradient";

package/src/components/molecules/Tile/Tile.stories.tsx

@@ -12,15 +12,20 @@ const Template: ComponentStory<typeof Tile> = (args) => <Tile {...args} />;
 
 export const Basic = Template.bind({});
 Basic.args = {
-  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',
-  alt: 'Jane Doe',
-  title: 'Tile Card'
+  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",
+  alt: "Jane Doe",
+  title: "Tile Card",
 };
 
 export const Interactive = Template.bind({});
 Interactive.args = {
-  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',
-  alt: 'Jane Doe',
-  title: 'Tile Card',
-  interactive: true
-};
+  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",
+  alt: "Jane Doe",
+  title: "Tile Card",
+  interactive: true,
+};
+
+export const NoImage = Template.bind({});
+NoImage.args = {
+  title: "Tile Card",
+};

package/src/components/molecules/Tile/Tile.tsx

@@ -1,16 +1,19 @@
 import React, { PropsWithChildren } from "react";
 import styled, { css } from "styled-components";
-import { Avatar, Card, Typography } from "../../atoms";
+import { Avatar, Card, Gradient, Typography } from "../../atoms";
 
 const { Hero } = Typography;
 
 export interface TileProps {
-  src: string;
-  alt: string;
+  src?: string;
+  alt?: string;
   title: string;
   interactive?: boolean;
 }
 
+const stringToNumber = (name: string): number =>
+  name.split("").reduce((sum, element) => sum + element.charCodeAt(0), 0);
+
 export const Tile: React.FC<PropsWithChildren<TileProps>> = ({
   src,
   alt,
@@ -21,7 +24,11 @@ export const Tile: React.FC<PropsWithChildren<TileProps>> = ({
   return (
     <Root size="s" flat interactive={interactive}>
       <Info>
-        <Avatar size="xl" src={src} alt={alt} />
+        {src && alt ? (
+          <Avatar size="xl" src={src} alt={alt} />
+        ) : (
+          <Gradient size="xl" variant={stringToNumber(title)} circle />
+        )}
         <Hero size="s">{title}</Hero>
       </Info>
 
@@ -53,4 +60,8 @@ const Info = styled.div`
   gap: var(--padding-m);
 `;
 
-const Action = styled.div``;
+const Action = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--padding-s);
+`;

package/src/components/organisms/Modal/Modal.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Modal } from "./Modal";
+
+export default {
+  title: "Organisms/Modal",
+  component: Modal,
+  argTypes: {
+    show: {
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => (
+  <>
+    Some other content
+    <Modal show={args.show} onClose={() => null}>
+      hey
+    </Modal>
+  </>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/components/organisms/Modal/Modal.tsx

@@ -0,0 +1,84 @@
+import React, { PropsWithChildren } from "react";
+import styled from "styled-components";
+import { Card, Icon } from "../../atoms";
+
+export interface ModalProps {
+  show: boolean;
+  onClose: () => void;
+}
+
+export const Modal: React.FCS<PropsWithChildren<ModalProps>> = ({
+  className,
+  children,
+  show,
+  onClose,
+}) => {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Root>
+      <ModalCard size="s" flat className={className}>
+        <CloseModal>
+          <CloseIcon onClick={onClose}>
+            <Icon type="close" />
+          </CloseIcon>
+        </CloseModal>
+        {children}
+      </ModalCard>
+    </Root>
+  );
+};
+
+const Root = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    backdrop-filter: blur(8px);
+    background-color: var(--color-shadow);
+  }
+`;
+
+const ModalCard = styled(Card)`
+  padding: var(--padding-s);
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  max-width: 320px;
+  width: calc(100vw - 2 * var(--padding-m));
+  transform: translate(-50%, -50%);
+  z-index: 101;
+`;
+
+const CloseModal = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const CloseIcon = styled.button`
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+
+  & > svg {
+    fill: var(--shades-of-grey-60);
+    transition: fill var(--transition-speed);
+
+    &:hover {
+      fill: var(--shades-of-grey-100);
+    }
+  }
+`;

package/src/components/organisms/Modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal'

package/src/components/organisms/index.ts

@@ -1,2 +1,3 @@
 export { Menu } from './Menu';
-export { Setting } from './Setting';
+export { Setting } from './Setting';
+export { Modal } from './Modal'

package/src/index.ts

@@ -10,6 +10,7 @@ export {
   Spinner,
   Chip,
   Dot,
+  Gradient,
 } from "./components/atoms";
 
 export {
@@ -24,6 +25,6 @@ export {
   Tile,
 } from "./components/molecules";
 
-export { Menu, Setting } from "./components/organisms";
+export { Menu, Setting, Modal } from "./components/organisms";
 
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/src/styles/global.ts

@@ -29,6 +29,16 @@ export const GlobalStyles = createGlobalStyle`
 
     --color-orange-80: ${Color.Orange}80;
     --color-orange-65: ${Color.Orange}65;
+    --color-shadow: ${Color.Grey100}10;
+
+    --gradient-natural-orange: linear-gradient(333.61deg, #E09A33 13.3%, #FFB241 90.98%);
+    --gradient-orange-red: radial-gradient(106.28% 106.28% at 76.05% 89.07%, #E09A33 0%, #CF544B 100%);
+    --gradient-red: linear-gradient(326.33deg, #CF544B -3.49%, #E09A33 149.87%);
+    --gradient-red-blue: linear-gradient(326.33deg, #172142 -3.49%, #CF544B 73.19%, #E09A33 149.87%);
+    --gradient-green-blue: linear-gradient(157.85deg, #6B8B4A 19.78%, #172142 117.27%);
+    --gradient-navy: linear-gradient(147.91deg, #3F4D7B 15.54%, #172142 87.63%);
+    --gradient-cyan-blue: linear-gradient(153.72deg, #008099 -10.13%, #172142 84.37%);
+    --gradient-natural-grey: linear-gradient(152.12deg, #DBDBDB -55.19%, #5F5A5A 89.06%);
 
     --padding-s: 8px;
     --padding-m: 16px;