@integrigo/integrigo-ui 1.6.15-b → 1.6.16

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, 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.15b",
+  "version": "1.6.16",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -25,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,7 @@ 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%);