Add incorporation modal with slides

src/modules/core/components/Dialog/Dialog.css

@@ -31,3 +31,7 @@
   stroke: var(--colony-white);
   cursor: pointer;
 }
+
+.widthAuto {
+  width: unset;
+}

src/modules/core/components/Dialog/Dialog.css.d.ts

@@ -2,3 +2,4 @@ export const modal: string;
 export const main: string;
 export const dialogOuterActions: string;
 export const closeIconButton: string;
+export const widthAuto: string;

src/modules/core/components/Dialog/Dialog.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { defineMessages } from 'react-intl';
+import classNames from 'classnames';
 
 import Icon from '~core/Icon';
 
@@ -21,6 +22,7 @@ interface Props {
   children: ReactNode;
   /** Determines if the Dialog can be dismissed */
   isDismissable?: boolean;
+  widthAuto?: boolean;
 }
 
 const displayName = 'Dialog';
@@ -29,6 +31,7 @@ const Dialog = ({
   children,
   cancel,
   isDismissable = true,
+  widthAuto,
   ...props
 }: Props) => (
   <Modal
@@ -53,7 +56,13 @@ const Dialog = ({
         </button>
       </div>
     )}
-    <div className={styles.main}>{children}</div>
+    <div
+      className={classNames(styles.main, {
+        [styles.widthAuto]: widthAuto,
+      })}
+    >
+      {children}
+    </div>
   </Modal>
 );
 

src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css

@@ -0,0 +1,110 @@
+@keyframes activeColor {
+  from {
+    background-color: var(--action-secondary);
+  }
+
+  to {
+    background-color: var(--primary);
+  }
+}
+@keyframes textColor {
+  from {
+    color: var(--temp-grey-blue-7);
+  }
+
+  to {
+    color: var(--dark);
+  }
+}
+
+.wrapper {
+  display: flex;
+  min-height: 525px;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: var(--pad-large);
+  width: 263px;
+}
+
+.content {
+  width: 670px;
+  background-color: rgb(0, 40, 75);
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font-size: var(--size-normal);
+  color: var(--temp-grey-blue-7);
+  letter-spacing: 0.1px;
+}
+
+.tab:hover {
+  cursor: pointer;
+}
+
+.marker {
+  margin-right: 18px;
+  height: 42px;
+  width: 5px;
+  border-radius: var(--radius-normal);
+  background-color: var(--action-secondary);
+}
+
+.active {
+  background-color: var(--primary);
+  animation-name: activeColor;
+  animation-duration: 500ms;
+}
+
+.textActive {
+  color: var(--dark);
+  animation-name: textColor;
+  animation-duration: 500ms;
+}
+
+.dialogWrapper div {
+  max-width: unset;
+}
+
+.buttonsWrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+}
+
+.buttonsWrapper > button {
+  height: 29px;
+  width: 48%;
+}
+
+.buttonPrevious {
+  composes: main from "~modules/core/components/Button/Button.css";
+  background-color: var(--temp-grey-blue-7);
+  color: var(--colony-white);
+}
+
+.buttonPrevious:hover {
+  background-color: color-mod(var(--temp-grey-blue-7) alpha(80%));
+}
+
+.divider {
+  margin: 0 0 30px 0;
+  background-color: var(--colony-light-blue);
+}
+
+.title {
+  margin-bottom: 18px;
+  font-size: var(--size-medium-l);
+  font-weight: var(--weight-bold);
+  color: var(--dark);
+}

src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.css.d.ts

@@ -0,0 +1,14 @@
+export const wrapper: string;
+export const sidebar: string;
+export const content: string;
+export const tab: string;
+export const marker: string;
+export const active: string;
+export const activeColor: string;
+export const textActive: string;
+export const textColor: string;
+export const dialogWrapper: string;
+export const buttonsWrapper: string;
+export const buttonPrevious: string;
+export const divider: string;
+export const title: string;

src/modules/dashboard/components/Dialogs/DAOIncorporationDialog/DAOIncorporationDialog.tsx

@@ -1,7 +1,140 @@
+import React, { useCallback, useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+
+import Dialog, { DialogProps } from '~core/Dialog';
+import Button from '~core/Button';
+
+import { CostPanel, HowPanel, WhyPanel } from './TabPanels';
+import { Step } from './constants';
+import styles from './DAOIncorporationDialog.css';
+
 const displayName = 'dashboard.DAOIncorporationDialog';
 
-const DAOIncorporationDialog = () => {
-  return null;
+const MSG = defineMessages({
+  about: {
+    id: 'dashboard.DAOIncorporationDialog.about',
+    defaultMessage: 'About incorporation',
+  },
+  why: {
+    id: 'dashboard.DAOIncorporationDialog.why',
+    defaultMessage: 'Why incorporate your DAO?',
+  },
+  how: {
+    id: 'dashboard.DAOIncorporationDialog.how',
+    defaultMessage: 'How it works?',
+  },
+  cost: {
+    id: 'dashboard.DAOIncorporationDialog.how',
+    defaultMessage: 'How much does it cost?',
+  },
+  next: {
+    id: 'dashboard.DAOIncorporationDialog.next',
+    defaultMessage: 'Next',
+  },
+  previous: {
+    id: 'dashboard.DAOIncorporationDialog.previous',
+    defaultMessage: 'Previous',
+  },
+  incorporate: {
+    id: 'dashboard.DAOIncorporationDialog.incorporate',
+    defaultMessage: 'Incorporate',
+  },
+});
+
+export const steps = [
+  {
+    id: Step.Why,
+    title: MSG.why,
+    component: <WhyPanel />,
+  },
+  {
+    id: Step.How,
+    title: MSG.how,
+    component: <HowPanel />,
+  },
+  {
+    id: Step.Cost,
+    title: MSG.cost,
+    component: <CostPanel />,
+  },
+];
+
+const DAOIncorporationDialog = ({ cancel }: DialogProps) => {
+  const [activeStep, setActiveStep] = useState(Step.Why);
+
+  const onNextClick = useCallback(() => {
+    setActiveStep((prevStep) => {
+      if (prevStep === Step.Cost) {
+        return prevStep;
+      }
+      const currStepIndex = steps.findIndex((step) => step.id === prevStep);
+      return steps[currStepIndex + 1].id;
+    });
+  }, []);
+
+  const onPrevClick = useCallback(() => {
+    setActiveStep((prevStep) => {
+      if (prevStep === Step.Why) {
+        return prevStep;
+      }
+      const currStepIndex = steps.findIndex((step) => step.id === prevStep);
+      return steps[currStepIndex - 1].id;
+    });
+  }, []);
+
+  return (
+    <div className={styles.dialogWrapper}>
+      <Dialog cancel={cancel} widthAuto>
+        <div className={styles.wrapper}>
+          <div className={styles.sidebar}>
+            <div>
+              <div className={styles.title}>
+                <FormattedMessage {...MSG.about} />
+              </div>
+              {steps.map((step) => (
+                <Button
+                  className={classNames(styles.tab, {
+                    [styles.textActive]: activeStep === step.id,
+                  })}
+                  onClick={() => setActiveStep(step.id)}
+                >
+                  <div
+                    className={classNames(styles.marker, {
+                      [styles.active]: activeStep === step.id,
+                    })}
+                  />
+                  <FormattedMessage {...step.title} />
+                </Button>
+              ))}
+              <div />
+            </div>
+            <div>
+              <hr className={styles.divider} />
+              <div className={styles.buttonsWrapper}>
+                {activeStep !== Step.Why && (
+                  <Button
+                    className={styles.buttonPrevious}
+                    onClick={onPrevClick}
+                  >
+                    <FormattedMessage {...MSG.previous} />
+                  </Button>
+                )}
+                <Button onClick={onNextClick}>
+                  <FormattedMessage
+                    {...(activeStep === Step.Cost ? MSG.incorporate : MSG.next)}
+                  />
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className={styles.content}>
+            {steps.find((step) => step.id === activeStep)?.component}
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
 };
 
 export default DAOIncorporationDialog;