@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+
+import render from '../../test/testrenderer';
+import {
+    ConfirmationDialog,
+    Dialog,
+    DialogButton,
+    ErrorDialog,
+    InfoDialog,
+} from './Dialog';
+
+const noop = jest.fn();
+describe('Dialog', () => {
+    const dialog = (isVisible = true) => (
+        <Dialog isVisible={isVisible}>
+            <Dialog.Header title="Test Title" />
+            <Dialog.Body>Test Text</Dialog.Body>
+            <Dialog.Footer>
+                <DialogButton onClick={noop}>Close</DialogButton>
+            </Dialog.Footer>
+        </Dialog>
+    );
+
+    test('is rendered when visible', () => {
+        render(dialog());
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        test;
+    });
+
+    test('is not rendered when not visible', () => {
+        render(dialog(false));
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+        expect(screen.getByText('Test Text')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+});
+
+describe('InfoDialog creator', () => {
+    const dialog = (isVisible = true) => (
+        <InfoDialog isVisible={isVisible} onHide={noop}>
+            Test Body
+        </InfoDialog>
+    );
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Info')).toBeInTheDocument();
+        expect(screen.getByText('Test Body')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+
+    test('invokes the expected action', () => {
+        render(dialog());
+
+        const closeButton = screen.getByText('Close');
+        fireEvent.click(closeButton);
+
+        expect(noop).toHaveBeenCalled();
+    });
+});
+
+describe('ErrorDialog creator', () => {
+    const dialog = (isVisible = true) => (
+        <ErrorDialog isVisible={isVisible} onHide={noop}>
+            Test Body
+        </ErrorDialog>
+    );
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Error')).toBeInTheDocument();
+        expect(screen.getByText('Test Body')).toBeInTheDocument();
+        expect(screen.getByText('Close')).toBeInTheDocument();
+    });
+
+    test('invokes the expected action', () => {
+        render(dialog());
+
+        const closeButton = screen.getByText('Close');
+        fireEvent.click(closeButton);
+
+        expect(noop).toHaveBeenCalled();
+    });
+});
+describe('ConfirmationDialog creator', () => {
+    const dialog = (isVisible = true) => (
+        <ConfirmationDialog
+            isVisible={isVisible}
+            confirmLabel="ConfButton"
+            onConfirm={() => noop(true)}
+            onCancel={() => noop(false)}
+            optionalLabel="Optional"
+            onOptional={() => noop()}
+        >
+            Test Body
+        </ConfirmationDialog>
+    );
+
+    test('shows the expected content', () => {
+        render(dialog());
+
+        expect(screen.getByText('Confirm')).toBeInTheDocument();
+        expect(screen.getByText('Test Body')).toBeInTheDocument();
+        expect(screen.getByText('Optional')).toBeInTheDocument();
+        expect(screen.getByText('ConfButton')).toBeInTheDocument();
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    test('invokes the expected action', () => {
+        render(dialog());
+
+        fireEvent.click(screen.getByText('Optional'));
+        expect(noop).toHaveBeenCalled();
+        fireEvent.click(screen.getByText('ConfButton'));
+        expect(noop).toHaveBeenCalledWith(true);
+        fireEvent.click(screen.getByText('Cancel'));
+        expect(noop).toHaveBeenCalledWith(false);
+    });
+});

package/src/Dialog/Dialog.tsx

@@ -0,0 +1,236 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { ReactNode } from 'react';
+import { Spinner } from 'react-bootstrap';
+import Modal from 'react-bootstrap/Modal';
+
+import Button, { ButtonVariants } from '../Button/Button';
+
+import './dialog.scss';
+
+type CoreProps = {
+    isVisible: boolean;
+    onHide?: () => void;
+    className?: string;
+    size?: 'sm' | 'm' | 'lg' | 'xl';
+    children: ReactNode;
+};
+
+type DialogProps = CoreProps & {
+    closeOnUnfocus?: boolean;
+    closeOnEsc?: boolean;
+};
+
+export const Dialog = ({
+    isVisible,
+    closeOnUnfocus = false,
+    closeOnEsc = false,
+    onHide = () => {},
+    className = '',
+    size = 'm',
+    children,
+}: DialogProps) => (
+    <Modal
+        onEscapeKeyDown={() => {
+            if (closeOnEsc && onHide) {
+                onHide();
+            }
+        }}
+        show={isVisible}
+        size={size === 'm' ? undefined : size}
+        backdrop={closeOnUnfocus ? true : 'static'}
+        onHide={() => {
+            if (closeOnUnfocus && onHide) {
+                onHide();
+            }
+        }}
+        centered
+        className={`dialog ${className}`}
+    >
+        {children}
+    </Modal>
+);
+
+Dialog.Header = ({
+    title,
+    headerIcon,
+    showSpinner,
+}: {
+    title: string;
+    headerIcon?: string;
+    showSpinner?: boolean;
+}) => (
+    <Modal.Header closeButton={false}>
+        <div>
+            <b>{title}</b>
+            {showSpinner && <Spinner size="sm" animation="border" />}
+        </div>
+        {headerIcon && <span className={`mdi mdi-${headerIcon}`} />}
+    </Modal.Header>
+);
+
+Dialog.Body = ({ children }: { children: ReactNode }) => (
+    <Modal.Body>{children}</Modal.Body>
+);
+
+Dialog.Footer = ({ children }: { children: ReactNode }) => (
+    <Modal.Footer>{children}</Modal.Footer>
+);
+
+export interface DialogButtonProps {
+    onClick: () => void;
+    variant?: ButtonVariants;
+    className?: string;
+    disabled?: boolean;
+    children: ReactNode;
+}
+
+export const DialogButton = ({
+    variant = 'secondary',
+    onClick,
+    className = '',
+    disabled = false,
+    children,
+}: DialogButtonProps) => (
+    <Button
+        large
+        variant={variant}
+        onClick={onClick}
+        className={className}
+        disabled={disabled}
+    >
+        {children}
+    </Button>
+);
+
+interface GenericDialogProps extends CoreProps {
+    title: string;
+    footer: ReactNode;
+    headerIcon?: string;
+    showSpinner?: boolean;
+    closeOnUnfocus?: boolean;
+    closeOnEsc?: boolean;
+}
+
+export const GenericDialog = ({
+    isVisible,
+    onHide,
+    title,
+    headerIcon,
+    children,
+    className,
+    footer,
+    showSpinner = false,
+    closeOnUnfocus,
+    closeOnEsc,
+    size,
+}: GenericDialogProps) => (
+    <Dialog
+        onHide={onHide}
+        closeOnUnfocus={closeOnUnfocus}
+        closeOnEsc={closeOnEsc}
+        isVisible={isVisible}
+        className={className}
+        size={size}
+    >
+        <Dialog.Header
+            title={title}
+            headerIcon={headerIcon}
+            showSpinner={showSpinner}
+        />
+        <Dialog.Body>{children}</Dialog.Body>
+        <Dialog.Footer>{footer}</Dialog.Footer>
+    </Dialog>
+);
+
+interface InfoProps extends CoreProps {
+    title?: string;
+    headerIcon?: string;
+    onHide: () => void;
+}
+
+export const InfoDialog = ({
+    isVisible,
+    title = 'Info',
+    headerIcon = 'info',
+    children,
+    onHide,
+    size,
+    className,
+}: InfoProps) => (
+    <GenericDialog
+        closeOnEsc
+        closeOnUnfocus
+        onHide={onHide}
+        isVisible={isVisible}
+        headerIcon={headerIcon}
+        title={title}
+        className={className}
+        size={size}
+        footer={<DialogButton onClick={onHide}>Close</DialogButton>}
+    >
+        {children}
+    </GenericDialog>
+);
+
+export const ErrorDialog = (props: Omit<InfoProps, 'headerIcon'>) =>
+    InfoDialog({
+        ...props,
+        title: props.title ?? 'Error',
+        headerIcon: 'alert',
+    });
+
+interface ConfirmationDialogProps extends Omit<CoreProps, 'onHide'> {
+    title?: string;
+    headerIcon?: string;
+    confirmLabel?: string;
+    onConfirm: () => void;
+    cancelLabel?: string;
+    onCancel: () => void;
+    optionalLabel?: string;
+    onOptional?: () => void;
+}
+
+export const ConfirmationDialog = ({
+    isVisible,
+    title = 'Confirm',
+    headerIcon,
+    children,
+    className,
+    confirmLabel = 'Confirm',
+    onConfirm,
+    cancelLabel = 'Cancel',
+    onCancel,
+    optionalLabel,
+    onOptional = () => {},
+    size,
+}: ConfirmationDialogProps) => (
+    <GenericDialog
+        onHide={onCancel}
+        closeOnEsc
+        isVisible={isVisible}
+        headerIcon={headerIcon}
+        title={title}
+        className={className}
+        size={size}
+        footer={
+            <>
+                <DialogButton variant="primary" onClick={onConfirm}>
+                    {confirmLabel}
+                </DialogButton>
+                {optionalLabel && (
+                    <DialogButton onClick={onOptional}>
+                        {optionalLabel}
+                    </DialogButton>
+                )}
+                <DialogButton onClick={onCancel}>{cancelLabel}</DialogButton>
+            </>
+        }
+    >
+        {children}
+    </GenericDialog>
+);

package/src/Dialog/dialog.scss

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.dialog {
+    .modal-content {
+        border: 0 transparent;
+        box-shadow: 0px 3px 6px #00000029;
+        background: #ffffff 0% 0% no-repeat padding-box;
+    }
+
+    .modal-header {
+        height: 40px;
+        border: 0 transparent;
+        background: $gray-50;
+        padding: 0 16px;
+
+        flex-direction: row;
+        align-items: center;
+
+        p {
+            font-size: 14px;
+            margin: 0;
+        }
+
+        .mdi {
+            font-size: 20px;
+        }
+
+        .spinner-border {
+            margin-left: 16px;
+            border-width: 1px;
+        }
+    }
+
+    .modal-body {
+        overflow-wrap: anywhere;
+        padding: 32px 16px 16px 16px;
+        margin: 0;
+        p {
+            font-size: 14px;
+        }
+    }
+
+    .modal-footer {
+        padding: 16px;
+        border: 0 transparent;
+        flex-direction: row-reverse;
+        justify-content: end;
+        display: flex;
+
+        button {
+            padding: 0 16px;
+        }
+    }
+}

package/src/Dropdown/Dropdown.module.scss

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../../styles';
+
+$dropdown-item-height: 24px; //px unit dependency in dropdown.tsx
+
+:export {
+    dropdownItemHeight: $dropdown-item-height;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+}
+
+.label {
+    font-size: 12px;
+    margin-bottom: 4px !important;
+}
+
+.btn {
+    width: 100%;
+    height: 32px;
+    padding: 0 8px;
+    background: $gray-700;
+    color: $white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: none;
+}
+
+.mdi {
+    font-size: 18px;
+}
+
+.btnActive .mdi {
+    transform: rotate(180deg);
+}
+
+.content {
+    background: $gray-700;
+    color: $white;
+    position: absolute;
+    width: 100%;
+    right: 0;
+    padding: 0;
+    border-top: solid 2px $gray-600;
+    z-index: 2;
+
+    &[data-height='true'] {
+        overflow-y: scroll; // Make Scroll Fixed Height Scrolable
+
+        @include scrollbars($gray-700);
+    }
+}
+
+.itemsInactive {
+    display: none;
+}
+
+.item {
+    color: $white;
+    padding: 4px 8px;
+    height: $dropdown-item-height;
+    background-color: transparent;
+    border: 0;
+    width: 100%;
+    text-align: inherit;
+    display: block;
+    clear: both;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.item:hover,
+.item:focus {
+    background: $gray-600;
+}

package/src/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+
+import render from '../../test/testrenderer';
+import Dropdown from './Dropdown';
+
+const items = [
+    {
+        label: 'Foo',
+        value: 'foo',
+    },
+    {
+        label: 'Bar',
+        value: 'Bar',
+    },
+];
+
+describe('Dropdown', () => {
+    it('renders a list of items', () => {
+        render(
+            <Dropdown
+                items={items}
+                onSelect={jest.fn()}
+                selectedItem={items[0]}
+            />
+        );
+        expect(screen.getAllByText('Foo').length).toBe(2); // default selected + item
+        expect(screen.getByText('Bar')).toBeInTheDocument();
+    });
+
+    it('calls onSelect when item is clicked', () => {
+        const onSelect = jest.fn();
+        const item = items[1];
+        render(
+            <Dropdown
+                items={items}
+                onSelect={onSelect}
+                selectedItem={items[0]}
+            />
+        );
+        const dropdownItem = screen.getByText(item.label);
+        fireEvent.click(dropdownItem);
+        expect(onSelect).toHaveBeenCalledWith(item);
+    });
+
+    it('correct item is selected', () => {
+        render(
+            <Dropdown
+                items={items}
+                onSelect={jest.fn()}
+                selectedItem={items[1]}
+            />
+        );
+        expect(screen.getAllByText('Bar').length).toBe(2);
+    });
+});

package/src/Dropdown/Dropdown.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useState } from 'react';
+import FormLabel from 'react-bootstrap/FormLabel';
+
+import styles from './Dropdown.module.scss';
+
+export interface DropdownItem {
+    label: React.ReactNode;
+    value: string;
+}
+
+export interface DropdownProps {
+    id?: string;
+    label?: React.ReactNode;
+    items: DropdownItem[];
+    onSelect: (item: DropdownItem) => void;
+    disabled?: boolean;
+    selectedItem: DropdownItem;
+    numItemsBeforeScroll?: number;
+}
+
+export default ({
+    id,
+    label,
+    items,
+    onSelect,
+    disabled = false,
+    selectedItem,
+    numItemsBeforeScroll = 0,
+}: DropdownProps) => {
+    const [isActive, setIsActive] = useState(false);
+
+    const onClickItem = (item: DropdownItem) => {
+        onSelect(item);
+        setIsActive(false);
+    };
+
+    return (
+        <div
+            className={styles.container}
+            onBlur={event => {
+                if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setIsActive(false);
+                }
+            }}
+        >
+            {label && <FormLabel className={styles.label}>{label}</FormLabel>}
+            <button
+                id={id}
+                type="button"
+                className={`${styles.btn} ${
+                    isActive ? styles.btnActive : styles.btnInactive
+                }`}
+                onClick={() => setIsActive(!isActive)}
+                disabled={disabled}
+            >
+                <span>
+                    {items.findIndex(e => e.value === selectedItem.value) === -1
+                        ? ''
+                        : selectedItem.label}
+                </span>
+                <span className={`mdi mdi-chevron-down ${styles.mdi}`} />
+            </button>
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- We need an interactive handler as described below */}
+            <div
+                onMouseDown={ev => {
+                    // To prevent the dropdown from closing when users click on the scrollbar of the items
+                    ev.preventDefault();
+                }}
+                style={
+                    numItemsBeforeScroll > 0
+                        ? {
+                              maxHeight: `${
+                                  numItemsBeforeScroll *
+                                  Number.parseInt(styles.dropdownItemHeight, 10)
+                              }px`,
+                          }
+                        : {}
+                }
+                data-height={
+                    numItemsBeforeScroll > 0 &&
+                    items.length > numItemsBeforeScroll
+                }
+                className={`${styles.content} ${
+                    isActive ? styles.itemsActive : styles.itemsInactive
+                }`}
+            >
+                {items.map(item => (
+                    <button
+                        type="button"
+                        className={styles.item}
+                        key={item.value}
+                        onClick={() => onClickItem(item)}
+                    >
+                        {item.label}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};