@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1 → 60.0.0-pre2

package/src/Dialog/Dialog.test.tsx

@@ -1,134 +0,0 @@
-/*
- * 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

@@ -1,236 +0,0 @@
-/*
- * 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

@@ -1,60 +0,0 @@
-/*
- * 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

@@ -1,83 +0,0 @@
-/*
- * 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

@@ -1,62 +0,0 @@
-/*
- * 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

@@ -1,106 +0,0 @@
-/*
- * 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>
-    );
-};