@moda/om 19.2.0 → 19.4.1

package/src/components/Confirm/Confirm.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ConfirmProvider, useConfirm } from './Confirm';
+
+const ConfirmComponent: React.FC = () => {
+  const { confirm } = useConfirm();
+
+  return (
+    <button onClick={() => confirm({ title: 'Are you sure?', confirmationText: 'Yes' })}>
+      Click Me
+    </button>
+  );
+};
+
+describe('Dialog', () => {
+  it('should show the confirmation and hide it on confirm/cancel', async () => {
+    render(
+      <ConfirmProvider>
+        <ConfirmComponent />
+      </ConfirmProvider>
+    );
+
+    // Should not show by default
+    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+
+    // Should show after clicking button
+    await userEvent.click(screen.getByRole('button', { name: 'Click Me' }));
+    await screen.findByText('Are you sure?');
+
+    // Should hide after clicking Yes
+    await userEvent.click(screen.getByRole('button', { name: 'Yes' }));
+    await waitForElementToBeRemoved(() => screen.queryByText('Are you sure?'));
+
+    // Should show after clicking button
+    await userEvent.click(screen.getByRole('button', { name: 'Click Me' }));
+    await screen.findByText('Are you sure?');
+
+    // Should hide after clicking Cancel
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitForElementToBeRemoved(() => screen.queryByText('Are you sure?'));
+  });
+});

package/src/components/Confirm/Confirm.tsx

@@ -0,0 +1,90 @@
+import React, { ReactNode, createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { Dialog } from '../Dialog';
+import { Button } from '../Button';
+
+export type TConfirmOptions = {
+  title: ReactNode;
+  message: ReactNode;
+  confirmationText: ReactNode;
+  cancellationText: ReactNode;
+};
+
+type TConfirm = (options?: Partial<TConfirmOptions>) => Promise<boolean>;
+
+const DEFAULT_OPTIONS: TConfirmOptions = {
+  title: 'Are you sure?',
+  message: '',
+  confirmationText: 'Ok',
+  cancellationText: 'Cancel'
+};
+
+const ConfirmContext = createContext<{ confirm: TConfirm }>({
+  confirm: () => Promise.resolve(false)
+});
+
+export const ConfirmProvider: React.FC<{ children?: ReactNode }> = ({ children }) => {
+  const [options, setOptions] = useState<Partial<TConfirmOptions>>({});
+  const [resolve, setResolve] = useState<((confirmed: boolean) => void) | null>(null);
+
+  const { title, message, confirmationText, cancellationText } = { ...DEFAULT_OPTIONS, ...options };
+
+  const confirm = useCallback(
+    (options?: Partial<TConfirmOptions>) =>
+      new Promise<boolean>(resolve => {
+        setOptions(options ?? {});
+        setResolve(() => resolve);
+      }),
+    []
+  );
+
+  const handleCancel = useCallback(() => {
+    resolve?.(false);
+    setResolve(null);
+  }, [resolve]);
+
+  const handleConfirm = useCallback(() => {
+    resolve?.(true);
+    setResolve(null);
+  }, [resolve]);
+
+  return (
+    <ConfirmContext.Provider value={useMemo(() => ({ confirm }), [confirm])}>
+      {children}
+      <Dialog
+        show={resolve != null}
+        onClose={handleCancel}
+        title={title}
+        message={message}
+        actions={
+          <>
+            {cancellationText && (
+              <Button secondary onClick={handleCancel}>
+                {cancellationText}
+              </Button>
+            )}
+            <Button onClick={handleConfirm}>{confirmationText}</Button>
+          </>
+        }
+      />
+    </ConfirmContext.Provider>
+  );
+};
+
+/**
+ * Shows a confirmation dialog and returns a Promise<boolean> representing the user choice (resolves with true on confirmation and with false on cancellation).
+ *
+ * Inspired by https://www.npmjs.com/package/material-ui-confirm
+ *
+ * Usage:
+ * ```
+ * const {confirm} = useConfirm();
+ *
+ * confirm({
+ *  title: 'Are you sure you want to delete this?',
+ *  confirmationText: 'Delete'
+ * }).then(confirmed => {
+ *  // ...
+ * });
+ * ```
+ */
+export const useConfirm = () => useContext(ConfirmContext);

package/src/components/Confirm/index.ts

@@ -0,0 +1 @@
+export * from './Confirm';

package/src/components/Dialog/Dialog.scss

@@ -0,0 +1,15 @@
+@import '~om';
+
+.Dialog {
+  max-width: 90vw;
+  background-color: color('snow');
+  text-align: center;
+
+  &__content {
+    padding: spacing(6);
+  }
+
+  @include breakpoint(md) {
+    max-width: 40rem;
+  }
+}

package/src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+import { Button } from '../Button';
+import { Dialog } from './Dialog';
+
+export default { title: 'Components/Dialog' };
+
+enum Mode {
+  Resting,
+  Open
+}
+
+export const Default = () => {
+  const [mode, setMode] = useState(Mode.Resting);
+
+  return (
+    <>
+      <Button onClick={() => setMode(Mode.Open)}>Open Dialog</Button>
+      <Dialog
+        show={mode === Mode.Open}
+        onClose={() => setMode(Mode.Resting)}
+        title='Exclusive Offer'
+        message='Get 20% off your next purchase when you sign up for our newsletter today. Be the first to know about our latest products, promotions, and exclusive deals!'
+        actions={<Button onClick={() => setMode(Mode.Resting)}>OK</Button>}
+      />
+    </>
+  );
+};

package/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Dialog } from './Dialog';
+
+const DialogComponent: React.FC = () => {
+  const [showDialog, setShowDialog] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowDialog(true)}>Click Me</button>
+      <Dialog
+        show={showDialog}
+        onClose={() => setShowDialog(false)}
+        title='This is a dialog'
+        actions={<button onClick={() => setShowDialog(false)}>Close</button>}
+      />
+    </>
+  );
+};
+
+describe('Dialog', () => {
+  it('should open and close the dialog', async () => {
+    render(<DialogComponent />);
+
+    // Should not show by default
+    expect(screen.queryByText('This is a dialog')).not.toBeInTheDocument();
+
+    // Should show after clicking button
+    await userEvent.click(screen.getByRole('button', { name: 'Click Me' }));
+    await screen.findByText('This is a dialog');
+
+    // Should hide after clicking Close
+    await userEvent.click(screen.getByRole('button', { name: 'Close' }));
+    await waitForElementToBeRemoved(() => screen.queryByText('This is a dialog'));
+  });
+});

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import { ModalOverlay, ModalOverlayProps } from '../ModalOverlay';
+import { Stack } from '../Stack';
+import { Text } from '../Text';
+
+import './Dialog.scss';
+
+export type DialogProps = Omit<ModalOverlayProps, 'title'> & {
+  title?: ReactNode;
+  message?: ReactNode;
+  actions?: ReactNode;
+};
+
+export const Dialog: React.FC<DialogProps> = ({
+  title,
+  message,
+  actions,
+  contentClassName,
+  ...rest
+}) => (
+  <ModalOverlay contentClassName={classNames('Dialog', contentClassName)} {...rest}>
+    <Stack className='Dialog__content' space={6}>
+      {title && <Text treatment='h5'>{title}</Text>}
+      {message && <Text>{message}</Text>}
+      {actions && (
+        <Stack direction='horizontal' space={3} alignItems='center' justifyContent='center'>
+          {actions}
+        </Stack>
+      )}
+    </Stack>
+  </ModalOverlay>
+);

package/src/components/Dialog/index.ts

@@ -0,0 +1 @@
+export * from './Dialog';

package/src/components/Select/Select.tsx

@@ -26,6 +26,7 @@ export type SelectProps = Omit<
   name?: string;
   onChange?: (value: string) => void;
   options: SelectableOption[];
+  placeholder?: string;
   searchable?: boolean;
   shiftIconLeftwards?: boolean;
   value?: string | undefined;

package/src/components/index.ts

@@ -6,13 +6,15 @@ export * from './Button';
 export * from './Checkbox';
 export * from './Clickable';
 export * from './ColorSwatch';
-export * from './ControlLink';
+export * from './Confirm';
 export * from './Constrain';
+export * from './ControlLink';
 export * from './CreditCardNumberInput';
 export * from './DefinitionList';
+export * from './Dialog';
+export * from './Divider';
 export * from './Expandable';
 export * from './Field';
-export * from './Divider';
 export * from './Label';
 export * from './Loading';
 export * from './LoadingBalls';
@@ -22,6 +24,7 @@ export * from './ModalOverlay';
 export * from './NavigationPreventer';
 export * from './Overlay';
 export * from './Paginator';
+export * from './PasswordInput';
 export * from './Popover';
 export * from './PromoBanner';
 export * from './RadioButton';
@@ -29,13 +32,12 @@ export * from './SearchInput';
 export * from './Select';
 export * from './SelectableButton';
 export * from './Shape';
+export * from './SlidingPane';
 export * from './Stack';
-export * from './Tag';
 export * from './Tabs';
+export * from './Tag';
 export * from './Text';
 export * from './Textarea';
 export * from './TextInput';
 export * from './Toast';
 export * from './VerticalDivider';
-export * from './PasswordInput';
-export * from './SlidingPane';