@logora/debate 0.1.0

package/src/components/dialog/dropdown/Dropdown.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useRef } from "react";
+import useOnClickOutside from 'use-onclickoutside';
+import cx from "classnames";
+import styles from "./Dropdown.module.scss";
+import PropTypes from "prop-types";
+
+export const Dropdown = ({ onClick, horizontalPosition = "left", disabled = false, className, dropdownClassName, children }) => {
+    const [active, setActive] = useState(false);
+    const dropdownRef = useRef(null);
+
+	const onToggleClick = () => {
+        if(!disabled) {
+            if (onClick) {
+                onClick();
+            }
+            setActive(!active);
+        }
+	};
+
+    useOnClickOutside(dropdownRef, () => setActive(false));
+
+	return (
+        <div ref={dropdownRef} className={cx(styles.dropdownWrapper, { [className]: className })}>
+            <button
+                type='button'
+                aria-expanded={active}
+                className={styles.dropdownHeader}
+                onClick={onToggleClick}
+            >
+                {children[0]}
+            </button>
+            { active && (
+                <div className={dropdownClassName ? dropdownClassName : cx(
+                        styles.dropdownList,
+                        { [styles[horizontalPosition]]: horizontalPosition }
+                    )}
+                    onClick={() => setActive(false)}
+                >
+                    { children[1] }
+                </div>
+            )}
+        </div>
+    );
+}
+
+Dropdown.propTypes = {
+    /** Callback triggered when clicking the dropdown button */
+    onClick: PropTypes.func,
+    /** Dropdown horizontal alignment, can be `left`, `center` or `right` */
+    horizontalPosition: PropTypes.string,
+    /** Disable dropdown */
+    disabled: PropTypes.bool,
+    /** Class name passed to the root container */
+    className: PropTypes.string,
+    /** Class name passed to the dropdown */
+    dropdownClassName: PropTypes.string,
+    /** Dropdown button and content of the dropdown */
+    children: PropTypes.node,
+};

package/src/components/dialog/dropdown/Dropdown.module.scss

@@ -0,0 +1,41 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.dropdownWrapper {
+	position: relative;
+	display: inline-block;
+}
+
+.dropdownHeader {
+	border: none;
+	padding: 0 !important;
+	cursor: pointer;
+	background-color: theme.$background-color-primary;
+	&:focus-visible {
+		outline: revert;
+	  }
+}
+
+.dropdownList {
+	position: absolute;
+	z-index: 3;
+	background: theme.$background-color-primary;
+	box-shadow: theme.$box-shadow;
+	border: theme.$box-border;
+	border-radius: theme.$box-border-radius;
+	overscroll-behavior-y: contain;
+	width: max-content;
+}
+
+.left {
+	left: 0 !important;
+}
+
+.right {
+	right: 0 !important;
+}
+
+.center {
+	left: 50%;
+	transform: translateX(-50%);
+}

package/src/components/dialog/dropdown/Dropdown.stories.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dropdown } from './Dropdown';
+
+export default {
+    title: 'Dialog/Dropdown',
+    component: Dropdown,
+    args: {
+        disabled: false,
+        horizontalPosition: 'left',
+        triggerText: 'Left'
+    },
+    argTypes: {
+        disabled: { control: 'boolean' },
+        horizontalPosition: { control: 'select', options: ['left', 'center', 'right'] },
+        triggerText: { control: 'text' }
+    },
+    render: ({ triggerText, ...args }) => (
+        <Dropdown {...args}>
+            <div style={{ padding: '5px 15px', border: '1px solid black', borderRadius: '6px' }}>{triggerText}</div>
+            <div>
+                <p>Child 1</p>
+                <p>Child 2</p>
+            </div>
+        </Dropdown>
+    )
+};
+
+export const DefaultDropdown = {};
+
+export const DisabledDropdown = {
+    args: {
+        disabled: true,
+        triggerText: 'Disabled'
+    }
+};
+
+export const RightDropdown = {
+    args: {
+        horizontalPosition: 'right',
+        triggerText: 'Right'
+    }
+};

package/src/components/dialog/dropdown/Dropdown.test.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Dropdown } from './Dropdown';
+
+describe('Dropdown', () => {
+	it('should render a dropdown with first child has button', () => {
+		const dropdown = render(
+			<Dropdown>
+				<div>Title</div>
+				<>
+					<p>Child 1</p>
+					<p>Child 2</p>
+				</>
+			</Dropdown>
+		);
+		const renderedDropdown = dropdown.getByText(/Title/i);
+		expect(renderedDropdown).toBeTruthy();
+	});
+
+	it('should display children when clicking on title', async () => {
+		const dropdown = render(
+			<Dropdown>
+				<div>Title</div>
+				<>
+					<p>Child 1</p>
+					<p>Child 2</p>
+				</>
+			</Dropdown>
+		);
+		const dropdownTitle = dropdown.getByText(/Title/i);
+		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
+		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
+
+		await userEvent.click(dropdownTitle);
+		
+		expect(dropdown.getByText(/Child 1/i)).toBeTruthy();
+		expect(dropdown.getByText(/Child 2/i)).toBeTruthy();
+	});
+
+	it('should not display children on click if disabled', async () => {
+		const dropdown = render(
+			<Dropdown disabled>
+				<div>Title</div>
+				<>
+					<p>Child 1</p>
+					<p>Child 2</p>
+				</>
+			</Dropdown>
+		);
+		const dropdownTitle = dropdown.getByText(/Title/i);
+		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
+		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
+
+		await userEvent.click(dropdownTitle);
+		
+		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
+		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
+	});
+
+	it('should close on click outside', async () => {
+		const dropdown = render(
+			<Dropdown>
+				<div>Title</div>
+				<>
+					<p>Child 1</p>
+					<p>Child 2</p>
+				</>
+			</Dropdown>
+		);
+
+		await userEvent.click(dropdown.getByText(/Title/i));
+		
+		expect(dropdown.getByText(/Child 1/i)).toBeTruthy();
+		expect(dropdown.getByText(/Child 2/i)).toBeTruthy();
+
+		await userEvent.click(document.body);
+
+		expect(dropdown.queryByText(/Child 1/i)).toBeNull();
+		expect(dropdown.queryByText(/Child 2/i)).toBeNull();
+	});
+
+	it('should close when an item from the list is clicked', async () => {
+		const ChildContainer = () => {
+			return (
+				<>
+					Child 1
+				</>
+			)
+		}
+		const dropdown = render(
+			<Dropdown closeOnContentClick>
+				<div>Title</div>
+				<ChildContainer />
+			</Dropdown>
+		);
+
+		await userEvent.click(screen.getByText(/Title/i));
+
+		expect(screen.getByText(/Child 1/i)).toBeTruthy();
+
+		await userEvent.click(screen.getByText(/Child 1/i));
+
+		expect(screen.queryByText(/Child 1/i)).toBeNull();
+	});
+
+	it('should call onClick when clicking on button', async () => {
+		const callback = vi.fn();
+
+		const dropdown = render(
+			<Dropdown onClick={callback}>
+				<div>Title</div>
+				<>
+					<p>Child 1</p>
+					<p>Child 2</p>
+				</>
+			</Dropdown>
+		);
+
+		await userEvent.click(dropdown.getByText(/Title/i));
+		expect(callback).toHaveBeenCalledTimes(1);
+
+		await userEvent.click(dropdown.getByText(/Title/i));
+		expect(callback).toHaveBeenCalledTimes(2);
+	});
+});

package/src/components/dialog/dropdown/index.js

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

package/src/components/dialog/modal/Modal.docs.mdx

@@ -0,0 +1,39 @@
+---
+description: A modal component and its context to create modals.
+labels: ['modal', 'modal-context']
+---
+
+import { Modal } from './Modal';
+import { ModalProvider } from './ModalProvider';
+import { useModal } from './useModal';
+
+A component that renders a modal (dialog). Modal is closed when user clicks outside it and a close button can also be displayed.
+
+Component must be wrapped with the ModalProvider context.
+
+ModalProvider is a helper based on [Context API](https://en.reactjs.org/docs/context.html) and React hooks for simplified work
+with modals (dialogs).
+
+To use the context, first wrap your application with _ModalProvider_. Then, use the hook _useModal_ that exposes _showModal_ and _hideModal_ functions.
+
+### Component usage
+
+```js
+import { Modal, ModalProvider, useModal } from '@logora/debate.dialog.modal';
+
+const Modal = () => {
+	const { showModal, hideModal } = useModal();
+
+	return <div onClick={hideModal}>Close modal</div>
+}
+
+const ModalConsumer = () => {
+	const { showModal, hideModal } = useModal();
+
+	return <div onClick={() => showModal(<Modal />)}>Open modal</div>;
+}
+
+<ModalProvider>
+    <ModalConsumer />
+</ModalProvider>
+```

package/src/components/dialog/modal/Modal.jsx

@@ -0,0 +1,101 @@
+import React, { useRef, useEffect } from "react";
+import { useIntl } from 'react-intl';
+import PropTypes from "prop-types";
+import { useModal } from './useModal';
+import cx from 'classnames';
+import styles from './Modal.module.scss';
+import { Icon } from "@logora/debate/icons/icon";
+
+export const Modal = ({ title, showCloseButton = false, fullScreen, children, disableClickOutside = false, ...rest }) => {
+  const dialogRef = useRef();
+  const intl = useIntl();
+  const { hideModal } = useModal();
+  
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+  
+    if (!dialog.open) dialog.showModal();
+    dialog.focus();
+  
+    const prevHtmlOverflow = document.documentElement.style.overflow;
+    const prevBodyOverflow = document.body.style.overflow;
+  
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+  
+    return () => {
+      document.documentElement.style.overflow = prevHtmlOverflow;
+      document.body.style.overflow = prevBodyOverflow;
+  
+      if (dialog.open) dialog.close();
+    };
+  }, []);
+  
+
+  const handleClickBackdrop = (e) => {
+    if (disableClickOutside) return;
+    
+    if (e.currentTarget !== e.target) return;
+    
+    hideModal();
+  };
+
+  const handleClose = () => {
+    hideModal();
+  };
+
+  return (
+    <dialog 
+      ref={dialogRef}
+      className={cx(styles.modalDialog, { [styles.modalDialogFullScreen]: fullScreen })} 
+      aria-labelledby={title ? "modal-title" : undefined}
+      onClick={handleClickBackdrop}
+      onClose={handleClose}
+      {...rest}
+    >
+      <div className={cx(styles.modalContainer)}>
+        <div className={cx(styles.modalHeader, { [styles.modalHeaderWithTitle]: title })}>
+          {title &&
+            <div id="modal-title">{title}</div>
+          }
+          {showCloseButton &&
+            <button
+              type="button"
+              className={styles.modalExitButton}
+              onClick={hideModal}
+              aria-label={intl.formatMessage({ id: "dialog.modal.aria_label", defaultMessage: "Close dialog" })}
+              data-testid="close-button"
+            >
+              <Icon
+                name="close"
+                height={18}
+                width={18}
+                aria-hidden="true"
+                focusable="false"
+              />
+            </button>
+          }
+        </div>
+        <div className={styles.modalContent}>
+          {children}
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+Modal.propTypes = {
+  /** Modal title */
+  title: PropTypes.string,
+  /** If true, a close button will be shown */
+  showCloseButton: PropTypes.bool,
+  /** If true, the modal will be full screen with a white background */
+  fullScreen: PropTypes.bool,
+  /** Modal content */
+  children: PropTypes.node,
+  /** Disable the click outside to close modal option */
+  disableClickOutside: PropTypes.bool,
+  /** Other props passed to the modal */
+  rest: PropTypes.object
+};

package/src/components/dialog/modal/Modal.module.scss

@@ -0,0 +1,99 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.modalDialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+
+  width: 100%;
+  max-width: 500px;
+
+  margin: auto;              
+  position: fixed;          
+  inset: 0;                  
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}
+
+.modalDialog:focus {
+  outline: none;
+}
+
+
+.modalDialogFullScreen {
+  max-width: none;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  
+  &::backdrop {
+    background: theme.$background-color-primary;
+  }
+}
+
+.modalContainer {
+  background: theme.$background-color-primary;
+  border-radius: theme.$box-border-radius;
+  width: 100%;
+  position: relative;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  @include spacing.p(3, xs);
+
+  @include display.media-breakpoint-down(xs) {
+    margin: 0.75em;
+  }
+}
+
+.modalHeader {
+  display: flex !important;
+  align-items: flex-start !important;
+  justify-content: space-between !important;
+  width: 100%;
+  font-weight: theme.$font-weight-bold;
+  color: theme.$text-primary;
+  @include spacing.px(3, xs);
+  @include spacing.pb(1, xs);
+
+  .modalExitButton {
+    line-height: theme.$line-height-none;
+    opacity: 1;
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    padding: 0;
+    appearance: none;
+    &:hover {
+      color: theme.$text-secondary;
+      cursor: pointer;
+    }
+
+    &:not(:disabled):not(.disabled) {
+      &:hover {
+        opacity: .75;
+      }
+    }
+  }
+}
+
+.modalExitButton:focus {
+  outline: none;
+}
+
+.modalHeaderWithTitle {
+  @include spacing.mb(3, xs);
+}
+
+.modalContent {
+  width: 100%;
+  @include spacing.px(3, xs);
+}

package/src/components/dialog/modal/Modal.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Modal } from './Modal';
+import { ModalProvider } from './ModalProvider';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { IntlProvider } from "react-intl";
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+    title: 'Dialog/Modal',
+    component: Modal,
+    args: {
+        title: null,
+        showCloseButton: false,
+        fullScreen: false,
+        children: 'Are you sure you want to continue ?'
+    },
+    argTypes: {
+        title: { control: 'text' },
+        showCloseButton: { control: 'boolean' },
+        fullScreen: { control: 'boolean' },
+        children: { control: 'text' }
+    },
+    render: ({ children, ...args }) => (
+        <div style={{ width: '150px', height: '80px' }}>
+            <IconProvider library={regularIcons}>
+                <IntlProvider locale="en">
+                    <ModalProvider>
+                        <Modal {...args}>
+                            <div>{children}</div>
+                        </Modal>
+                    </ModalProvider>
+                </IntlProvider>
+            </IconProvider>
+        </div>
+    )
+};
+
+export const DefaultModal = {};
+
+export const ModalWithCloseButton = {
+    args: {
+        title: 'Confirm your action',
+        showCloseButton: true
+    }
+};
+
+export const ModalFullScreen = {
+    args: {
+        title: 'Confirm your action',
+        fullScreen: true,
+        showCloseButton: true
+    }
+};

package/src/components/dialog/modal/Modal.test.jsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Modal } from './Modal';
+import { ModalProvider } from './ModalProvider';
+import { useModal } from './useModal';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import { IntlProvider } from "react-intl";
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+beforeAll(() => {
+  if (typeof HTMLDialogElement !== 'undefined') {
+    if (!HTMLDialogElement.prototype.showModal) {
+      HTMLDialogElement.prototype.showModal = function () {
+        this.setAttribute('open', '');
+      };
+    }
+    if (!HTMLDialogElement.prototype.close) {
+      HTMLDialogElement.prototype.close = function () {
+        this.removeAttribute('open');
+        this.dispatchEvent(new Event('close'));
+      };
+    }
+  }
+});
+
+const TestModal = () => {
+  const { showModal } = useModal();
+
+  return (
+    <div>
+      <button
+        data-testid="show-modal-button"
+        onClick={() =>
+          showModal(
+            <Modal title="my title" showCloseButton>
+              <div data-testid="modal-content">modal content</div>
+            </Modal>
+          )
+        }
+      >
+        show modal
+      </button>
+    </div>
+  );
+};
+
+describe('Modal', () => {
+  it('should render modal with content and title', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <IconProvider library={regularIcons}>
+        <IntlProvider locale="en">
+          <ModalProvider>
+            <TestModal />
+          </ModalProvider>
+        </IntlProvider>
+      </IconProvider>
+    );
+
+    expect(screen.queryByText("modal content")).toBeNull();
+
+    await user.click(screen.getByTestId("show-modal-button"));
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("modal content")).toBeInTheDocument();
+    expect(screen.getByText("my title")).toBeInTheDocument();
+  });
+
+  it('should render close button if showCloseButton is true', () => {
+    render(
+      <IconProvider library={regularIcons}>
+        <IntlProvider locale="en">
+          <ModalProvider>
+            <Modal title="my title" showCloseButton>
+              <div data-testid="modal-content">modal content</div>
+            </Modal>
+          </ModalProvider>
+        </IntlProvider>
+      </IconProvider>
+    );
+
+    expect(screen.getByText("modal content")).toBeInTheDocument();
+    expect(screen.getByText("my title")).toBeInTheDocument();
+    expect(screen.getByTestId("close-button")).toBeInTheDocument();
+  });
+
+  it('should close when clicking on close button', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <IconProvider library={regularIcons}>
+        <IntlProvider locale="en">
+          <ModalProvider>
+            <TestModal />
+          </ModalProvider>
+        </IntlProvider>
+      </IconProvider>
+    );
+
+    expect(screen.queryByRole("dialog")).toBeNull();
+
+    await user.click(screen.getByTestId("show-modal-button"));
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("modal content")).toBeInTheDocument();
+    expect(screen.getByTestId("close-button")).toBeInTheDocument();
+
+    await user.click(screen.getByTestId("close-button"));
+
+    expect(screen.queryByText("modal content")).toBeNull();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});