@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/StartStopButton/StartStopButton.tsx

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

@@ -0,0 +1 @@
+<?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

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

@@ -0,0 +1 @@
+<?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

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

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

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

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

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

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