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

package/src/StartStopButton/StartStopButton.tsx

@@ -1,60 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { FC, ReactNode } from 'react';
-
-import Button, { ButtonVariants } from '../Button/Button';
-import classNames from '../utils/classNames';
-import playSvg from './play-circle.svg';
-import stopSvg from './stop-circle.svg';
-
-import './start-stop-button.scss';
-
-interface Props {
-    startText?: ReactNode;
-    stopText?: ReactNode;
-    onClick: () => void;
-    started: boolean;
-    disabled?: boolean;
-    large?: boolean;
-    showIcon?: boolean;
-    variant?: ButtonVariants;
-    className?: string;
-}
-
-const StartStopButton: FC<Props> = ({
-    startText = 'Start',
-    stopText = 'Stop',
-    onClick,
-    started,
-    disabled = false,
-    variant = 'secondary',
-    className,
-    large = true,
-    showIcon = true,
-}) => {
-    const label = started ? stopText : startText;
-    const src = started ? stopSvg : playSvg;
-
-    return (
-        <Button
-            className={classNames(
-                'start-stop',
-                `${started ? 'active-animation' : ''}`,
-                className
-            )}
-            disabled={disabled}
-            large={large}
-            onClick={() => onClick()}
-            variant={variant}
-        >
-            {showIcon && <img alt="" src={src} />}
-            {label}
-        </Button>
-    );
-};
-
-export default StartStopButton;

package/src/StartStopButton/play-circle.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#455a64" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>

package/src/StartStopButton/start-stop-button.scss

@@ -1,47 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables';
-
-.start-stop {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    background-color: $white;
-    border-color: $gray-200;
-
-    img {
-        height: 20px;
-        width: 20px;
-        margin-right: 8px;
-    }
-
-    &.active-animation {
-        overflow: hidden;
-        position: relative;
-
-        &::after {
-            content: '';
-            background: $gray-700;
-            height: 2px;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            animation: snake 4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-        }
-    }
-}
-
-@keyframes snake {
-    0% {
-        transform: translate(-100%);
-    }
-    100% {
-        transform: translate(100%);
-    }
-}

package/src/StartStopButton/stop-circle.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#455a64" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M9,9H15V15H9" /></svg>

package/src/StateSelector/StateSelector.tsx

@@ -1,64 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-import { Button, ButtonGroup } from 'react-bootstrap';
-
-import './state-selector.scss';
-
-interface ComplexItem {
-    key: string;
-    renderItem: React.ReactNode;
-}
-
-type SelectItem = string | ComplexItem;
-
-const convertToComplex = (item: SelectItem): ComplexItem => {
-    if (typeof item === 'string') {
-        return {
-            key: item,
-            renderItem: item,
-        } as ComplexItem;
-    }
-
-    return item as ComplexItem;
-};
-export interface Props {
-    items: SelectItem[];
-    onSelect: (index: number) => void;
-    disabled?: boolean;
-    selectedItem: SelectItem;
-}
-
-export default ({ items, onSelect, disabled = false, selectedItem }: Props) => {
-    const selectionButton = (item: SelectItem, index: number) => {
-        const complexItem = convertToComplex(item);
-        const complexSelectedItem = convertToComplex(selectedItem);
-        return (
-            <Button
-                key={complexItem.key}
-                variant={
-                    complexSelectedItem.key === complexItem.key
-                        ? 'set'
-                        : 'unset'
-                }
-                onClick={() => {
-                    onSelect(index);
-                }}
-                active={complexSelectedItem.key === complexItem.key}
-                disabled={disabled}
-            >
-                {complexItem.renderItem}
-            </Button>
-        );
-    };
-
-    return (
-        <ButtonGroup className="w-100 d-flex flex-row channel-selection">
-            {items.map((item, index) => selectionButton(item, index))}
-        </ButtonGroup>
-    );
-};

package/src/StateSelector/state-selector.scss

@@ -1,38 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables';
-
-.channel-selection {
-    margin-bottom: 16px !important;
-    padding: 4px;
-    background-color: $gray-700;
-    button {
-        padding: 4px;
-        border-radius: 4px !important;
-    }
-    .btn:disabled {
-        opacity: initial;
-    }
-    .dot {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        width: 6px;
-        height: 6px;
-        border-radius: 3px;
-    }
-    .btn-set {
-        color: $gray-700;
-        background-color: $white;
-        border-color: $gray-700;
-    }
-    .btn-unset {
-        color: $white;
-        background-color: $gray-700;
-        border-color: $gray-700;
-    }
-}

package/src/Stepper/Stepper.tsx

@@ -1,139 +0,0 @@
-/*
- * Copyright (c) 2023 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
-
-import Button from '../Button/Button';
-import classNames from '../utils/classNames';
-
-import './stepper.scss';
-
-type ActionCaption = StringCaption & {
-    action: () => void;
-};
-
-type TooltipCaption = StringCaption & {
-    tooltip: string;
-};
-
-type StringCaption = {
-    id: string;
-    caption: string;
-};
-
-type StepState = 'active' | 'success' | 'warning' | 'failure';
-
-type StepCaption = StringCaption | ActionCaption | TooltipCaption;
-
-export type Step = {
-    id: string;
-    title: string;
-    caption?: string | (StepCaption | StepCaption[]);
-    state?: StepState;
-};
-
-export interface Steppers {
-    title?: string;
-    steps: Step[];
-}
-
-const isToolTipCaption = (caption: StepCaption): caption is ActionCaption =>
-    (caption as TooltipCaption).tooltip !== undefined;
-
-const isActionCaption = (caption: StepCaption): caption is ActionCaption =>
-    (caption as ActionCaption).action !== undefined;
-
-const isStringCaption = (
-    caption: string | StringCaption
-): caption is string | StringCaption =>
-    typeof caption === 'string' ||
-    (!isToolTipCaption(caption) && !isActionCaption(caption));
-
-const StepActionCaption = ({ caption }: { caption: ActionCaption }) => (
-    <Button variant="custom" className="action-link" onClick={caption.action}>
-        {`${caption.caption}`}
-    </Button>
-);
-
-const StepTooltipCaption = ({ caption }: { caption: TooltipCaption }) => (
-    <OverlayTrigger
-        placement="bottom-end"
-        overlay={
-            <Tooltip id={`tooltip-${caption.caption}`}>
-                {caption.tooltip}
-            </Tooltip>
-        }
-    >
-        <span>
-            <span className="tool-tip-trigger">{`${caption.caption}`}</span>
-            &nbsp;
-        </span>
-    </OverlayTrigger>
-);
-
-const StepStringCaption = ({
-    caption,
-}: {
-    caption: string | StringCaption;
-}) => {
-    if (typeof caption === 'string') {
-        return <span>{`${caption}`} </span>;
-    }
-
-    return <span>{`${caption.caption}`} </span>;
-};
-
-const Caption = ({ caption }: { caption: string | StepCaption }) => {
-    if (isStringCaption(caption)) {
-        return <StepStringCaption caption={caption} />;
-    }
-
-    if (isActionCaption(caption)) {
-        return <StepActionCaption caption={caption} />;
-    }
-
-    return <StepTooltipCaption caption={caption} />;
-};
-
-export default ({ title, steps }: Steppers) => (
-    <>
-        <div className="stepper-reset" />
-        {title && <div>{title}</div>}
-        {steps.map(step => (
-            <div
-                key={step.id}
-                className={classNames(
-                    'step',
-                    step.state && `step-${step.state}`
-                )}
-            >
-                <div>
-                    <div className="circle">
-                        <div className="step-icon" />
-                    </div>
-                    <div className="line" />
-                </div>
-                <div>
-                    <div className="title">{step.title}</div>
-                    <div className="caption">
-                        {step.caption &&
-                            (Array.isArray(step.caption) ? (
-                                step.caption?.map(caption => (
-                                    <Caption
-                                        key={caption.id}
-                                        caption={caption}
-                                    />
-                                ))
-                            ) : (
-                                <Caption caption={step.caption} />
-                            ))}
-                    </div>
-                </div>
-            </div>
-        ))}
-    </>
-);

package/src/Stepper/stepper.scss

@@ -1,127 +0,0 @@
-/*
- * Copyright (c) 2023 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../../styles.scss';
-@import '../variables';
-
-.stepper-reset {
-    counter-reset: stepper;
-}
-
-.step {
-    display: flex;
-    min-height: 36px;
-    color: $gray-600;
-
-    .action-link {
-        color: $gray-600;
-        padding: 0;
-        border: none;
-        background: none;
-        text-decoration: underline;
-    }
-
-    .tool-tip-trigger {
-        text-decoration: underline;
-    }
-
-    .circle {
-        background: $tooltip-bg;
-        position: relative;
-        width: 13px;
-        height: 13px;
-        line-height: 13px;
-        border-radius: 100%;
-        text-align: center;
-    }
-
-    .step-icon::after {
-        counter-increment: stepper;
-        font-family: 'Material Design Icons', 'Roboto';
-        color: white;
-        font-size: 10px;
-        vertical-align: bottom;
-        content: counter(stepper);
-    }
-
-    &.step-success {
-        .circle {
-            background-color: $green;
-        }
-        .step-icon::after {
-            content: '\F012C';
-        }
-    }
-
-    &.step-warning {
-        .circle {
-            background-color: $amber;
-        }
-        .step-icon::after {
-            content: '\F1238';
-        }
-    }
-
-    &.step-failure {
-        .circle {
-            background-color: $red;
-        }
-        .step-icon::after {
-            content: '\F1398';
-        }
-    }
-
-    &.step-active {
-        .step-icon::after {
-            content: '\F0450';
-        }
-        .step-icon {
-            animation: rotate 3s linear infinite;
-        }
-    }
-
-    .line {
-        height: 100%;
-        left: 50%;
-        position: relative;
-        width: 2px;
-        background: #90a4ae;
-        margin-left: -1px;
-    }
-
-    &:last-child .line {
-        display: none;
-    }
-
-    & > div:not(:first-child) {
-        flex-grow: 1;
-        padding-left: 1em;
-    }
-}
-
-@keyframes rotate {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.title {
-    line-height: 12px;
-    font-size: 12px;
-    font-weight: bold;
-}
-
-.caption {
-    font-size: 12px;
-
-    .action-link {
-        font-style: italic;
-    }
-
-    .action-link+.action-link  {
-        margin-left: 4px;
-    }
-}

package/src/Toggle/Toggle.tsx

@@ -1,120 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { FC, ReactNode } from 'react';
-
-import classNames from '../utils/classNames';
-
-import './toggle.scss';
-
-export interface Props {
-    id?: string;
-    title?: string;
-    isToggled: boolean;
-    onToggle?: (isToggled: boolean) => void;
-    label?: ReactNode;
-    labelRight?: boolean;
-    variant?: 'primary' | 'secondary';
-    barColor?: string;
-    barColorToggled?: string;
-    handleColor?: string;
-    handleColorToggled?: string;
-    width?: string;
-    disabled?: boolean;
-    children?: ReactNode;
-}
-
-export const Toggle: FC<Props> = ({
-    id,
-    title,
-    isToggled,
-    onToggle,
-    label,
-    labelRight = false,
-    variant = 'primary',
-    barColor,
-    barColorToggled,
-    handleColor,
-    handleColorToggled,
-    width,
-    disabled = false,
-    children,
-}) => {
-    const isPrimary = variant === 'primary';
-    const isSecondary = variant === 'secondary';
-
-    const handleToggle = () => {
-        if (onToggle) {
-            onToggle(!isToggled);
-        }
-    };
-
-    const [labelText, ...remainingChildren] = Array.isArray(children)
-        ? children
-        : [children || label];
-
-    const labelElement = labelText && (
-        <span className="toggle-label">{labelText}</span>
-    );
-
-    return (
-        <div
-            title={title}
-            className={classNames('toggle', disabled && 'disabled')}
-            style={{ width }}
-        >
-            <label htmlFor={id}>
-                {!labelRight && labelElement}
-                <div
-                    className={classNames(
-                        'toggle-bar',
-                        isPrimary &&
-                            `toggle-bar-primary${isToggled ? '-toggled' : ''}`,
-                        isSecondary &&
-                            `toggle-bar-secondary${isToggled ? '-toggled' : ''}`
-                    )}
-                    style={{
-                        backgroundColor: isToggled ? barColorToggled : barColor,
-                    }}
-                >
-                    <input
-                        id={id}
-                        type="checkbox"
-                        checked={isToggled}
-                        onChange={disabled ? undefined : handleToggle}
-                        aria-checked={isToggled}
-                        disabled={disabled}
-                    />
-                    <span
-                        className={classNames(
-                            'toggle-handle',
-                            isToggled && 'toggle-handle-toggled',
-                            isPrimary &&
-                                `toggle-handle-primary${
-                                    isToggled ? '-toggled' : ''
-                                }`,
-                            isSecondary &&
-                                `toggle-handle-secondary${
-                                    isToggled ? '-toggled' : ''
-                                }`
-                        )}
-                        style={{
-                            backgroundColor: isToggled
-                                ? handleColorToggled
-                                : handleColor,
-                        }}
-                    />
-                </div>
-                {labelRight && labelElement}
-            </label>
-            {remainingChildren.length > 0 && (
-                <div className="toggle-label toggle-label-rest">
-                    {remainingChildren}
-                </div>
-            )}
-        </div>
-    );
-};

package/src/Toggle/toggle.scss

@@ -1,109 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../variables";
-
-.toggle {
-  display: flex;
-  flex-direction: column;
-}
-
-.toggle.disabled .toggle-handle {
-  cursor: default;
-}
-
-.toggle-bar {
-  position: relative;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: row;
-  min-width: 28px;
-  border-radius: 8px;
-  height: 16px;
-}
-
-.toggle-bar-primary {
-  background: $gray-700;
-}
-
-.toggle-bar-primary-toggled {
-  background: $primary;
-}
-
-.toggle-bar-secondary {
-  background: $gray-300;
-}
-
-.toggle-bar-secondary-toggled {
-  background: $primary;
-}
-
-.toggle-handle {
-  position: absolute;
-  transform: translate3d(0px, 0, 0);
-  top: 2px;
-  left: 2px;
-  height: 12px;
-  width: 12px;
-  transition: all 0.2s ease;
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 1;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-}
-
-.toggle-handle-toggled {
-  transform: translate3d(12px, 0, 0);
-  transition: all 0.1s ease;
-  transition-property: transform;
-}
-
-.toggle-handle-primary {
-  background: $gray-300;
-}
-
-.toggle-handle-primary-toggled {
-  background: $white;
-}
-
-.toggle-handle-secondary {
-  background: $gray-700;
-}
-
-.toggle-handle-secondary-toggled {
-  background: $white;
-}
-
-.toggle label {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0;
-  margin-right: -0.5rem;
-}
-
-.toggle label > * {
-  margin-right: 0.5rem;
-}
-
-.toggle-label {
-  font-size: 0.8rem;
-  white-space: pre-wrap;
-}
-
-.toggle-label-rest {
-  text-align: end;
-}
-
-.toggle input {
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  position: absolute;
-}