@nordicsemiconductor/pc-nrfconnect-shared 243.0.0 → 245.0.0

package/src/About/SupportCard.tsx

@@ -23,7 +23,12 @@ import AboutButton from './AboutButton';
 import Feedback from './Feedback';
 import Section from './Section';
 
-export default ({ feedbackCategories }: { feedbackCategories?: string[] }) => {
+export interface SupportCardProps {
+    feedbackCategories?: Array<string>;
+    className?: string;
+}
+
+export default ({ feedbackCategories, className }: SupportCardProps) => {
     const dispatch = useDispatch();
     const devices = useSelector(getDevices);
     const currentSerialNumber = useSelector(selectedSerialNumber);
@@ -31,8 +36,11 @@ export default ({ feedbackCategories }: { feedbackCategories?: string[] }) => {
     const currentDevice = useSelector(selectedDevice);
 
     return (
-        <Card title="Support">
-            <div className="tw-preflight tw-flex tw-flex-col tw-flex-wrap tw-gap-4">
+        <Card className={className}>
+            <Card.Header className="tw-text-center tw-text-base">
+                <Card.Header.Title cardTitle="Support" />
+            </Card.Header>
+            <Card.Body className="tw-gap-4">
                 <Section title="DevZone">
                     <p>
                         You can ask for help or open a support request on
@@ -98,7 +106,7 @@ export default ({ feedbackCategories }: { feedbackCategories?: string[] }) => {
                         </Button>
                     </Section>
                 </Section>
-            </div>
+            </Card.Body>
         </Card>
     );
 };

package/src/Button/Button.tsx

@@ -10,6 +10,7 @@ import classNames from '../utils/classNames';
 
 export type ButtonVariants =
     | 'primary'
+    | 'primary-outline'
     | 'secondary'
     | 'success'
     | 'info'
@@ -17,31 +18,31 @@ export type ButtonVariants =
     | 'danger'
     | 'link-button';
 
-export type ButtonSize = 'sm' | 'lg' | 'xl';
+type ButtonSize = 'sm' | 'lg' | 'xl';
 
-type ButtonProps = {
-    id?: string;
+type PickedButtonProps =
+    | 'ref'
+    | 'key'
+    | 'className'
+    | 'disabled'
+    | 'onClick'
+    | 'title';
+
+interface ButtonProps
+    extends Pick<React.ComponentPropsWithRef<'button'>, PickedButtonProps> {
     variant: ButtonVariants;
-    className?: string;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
-    title?: string;
     size?: ButtonSize;
-};
+}
 
 const Button: React.FC<ButtonProps> = ({
     children,
-    id,
     className,
     variant,
-    onClick,
-    disabled = false,
-    title,
     size = 'sm',
+    ...attrs
 }) => (
     <button
         type="button"
-        id={id}
         className={`${classNames(
             'tw-preflight',
             size === 'sm' && 'tw-h-6 tw-px-2 tw-text-xs',
@@ -49,6 +50,8 @@ const Button: React.FC<ButtonProps> = ({
             size === 'xl' && 'tw-h-8 tw-px-4 tw-text-base',
             variant === 'primary' &&
                 'tw-border tw-border-transparent tw-bg-nordicBlue tw-text-white active:enabled:tw-bg-nordicBlue-700',
+            variant === 'primary-outline' &&
+                'tw-border tw-border-nordicBlue tw-bg-white tw-text-nordicBlue active:enabled:tw-bg-nordicBlue-50',
             variant === 'secondary' &&
                 'tw-border tw-border-gray-700 tw-bg-white tw-text-gray-700 active:enabled:tw-bg-gray-50',
             variant === 'success' &&
@@ -63,9 +66,7 @@ const Button: React.FC<ButtonProps> = ({
                 'tw-border tw-border-nordicBlue tw-bg-white tw-text-nordicBlue active:enabled:tw-bg-gray-50',
             className,
         )}`}
-        disabled={disabled}
-        onClick={onClick}
-        title={title}
+        {...attrs}
     >
         {children}
     </button>

package/src/Card/Card.tsx

@@ -5,22 +5,109 @@
  */
 
 import React from 'react';
-import Card from 'react-bootstrap/Card';
 
-import styles from './card.module.scss';
+import classNames from '../utils/classNames';
 
-type NrfCardProps = {
-    children: React.ReactNode;
-    title: React.ReactNode;
+type PickedCardTitleProps = 'ref' | 'className';
+
+interface CardTitleProps
+    extends Pick<React.ComponentPropsWithRef<'div'>, PickedCardTitleProps> {
+    cardTitle: React.ReactNode;
+    cardSubtitle?: React.ReactNode;
+    cardTitleClassName?: string;
+    cardSubtitleClassName?: string;
+}
+
+type CardTitleComponent = React.FC<CardTitleProps>;
+
+const CardTitle: CardTitleComponent = ({
+    className,
+    cardTitle,
+    cardSubtitle,
+    ...attrs
+}) => {
+    if (cardSubtitle) {
+        return (
+            <hgroup className={className} {...attrs}>
+                <h3 className="tw-font-medium">{cardTitle}</h3>
+                <p>{cardSubtitle}</p>
+            </hgroup>
+        );
+    }
+
+    return (
+        <h3 className={classNames('tw-font-medium', className)} {...attrs}>
+            {cardTitle}
+        </h3>
+    );
 };
 
-export default ({ children, title }: NrfCardProps) => (
-    <Card className={styles.card}>
-        <Card.Header className={styles.header}>
-            <Card.Title>
-                <span className={styles.title}>{title}</span>
-            </Card.Title>
-        </Card.Header>
-        <Card.Body className={styles.body}>{children}</Card.Body>
-    </Card>
+type PickedCardHeaderProps =
+    | 'ref'
+    | 'className'
+    | 'onPointerEnter'
+    | 'onPointerLeave';
+
+type CardHeaderProps = Pick<
+    React.ComponentPropsWithRef<'header'>,
+    PickedCardHeaderProps
+>;
+
+interface CardHeaderComponent extends React.FC<CardHeaderProps> {
+    Title: CardTitleComponent;
+}
+
+const CardHeader: CardHeaderComponent = ({ children, className, ...attrs }) => (
+    <header
+        className={classNames(
+            `tw-border-b tw-border-solid tw-border-b-black tw-border-opacity-10 tw-py-4`,
+            className,
+        )}
+        {...attrs}
+    >
+        {children}
+    </header>
+);
+
+CardHeader.Title = CardTitle;
+
+type PickedCardBodyProps = 'ref' | 'className';
+
+type CardBodyProps = Pick<
+    React.ComponentPropsWithRef<'div'>,
+    PickedCardBodyProps
+>;
+
+type CardBodyComponent = React.FC<CardBodyProps>;
+
+const CardBody: CardBodyComponent = ({ className, children, ...attrs }) => (
+    <div className={classNames('tw-flex tw-flex-col', className)} {...attrs}>
+        {children}
+    </div>
+);
+
+type PickedCardProps = 'ref' | 'className';
+
+type CardProps = Pick<React.ComponentPropsWithRef<'article'>, PickedCardProps>;
+
+interface CardComponent extends React.FC<CardProps> {
+    Header: CardHeaderComponent;
+    Body: CardBodyComponent;
+}
+
+const Card: CardComponent = ({ children, className, ...attrs }) => (
+    <article
+        className={classNames(
+            `tw-preflight tw-relative tw-flex tw-flex-col tw-gap-4 tw-break-words tw-border tw-border-solid tw-border-black tw-border-opacity-10 tw-bg-white tw-px-4 tw-pb-4`,
+            className,
+        )}
+        {...attrs}
+    >
+        {children}
+    </article>
 );
+
+Card.Header = CardHeader;
+Card.Body = CardBody;
+
+export default Card;

package/src/Device/deviceInfo/deviceInfo.ts

@@ -293,6 +293,17 @@ const devicesByPca: { [P in KnownDevicePCA]: DeviceInfo } = {
                 'https://www.nordicsemi.com/About-us/BuyOnline?search_token=nRF54LV10%20DK',
         },
     },
+    PCA10214: {
+        name: 'nRF54LS05 DK',
+        cores: 1,
+        icon: nrf54logo,
+        website: {
+            productPage:
+                'https://www.nordicsemi.com/Products/Development-hardware/nRF54LS05-DK',
+            buyOnline:
+                'https://www.nordicsemi.com/About-us/BuyOnline?search_token=nRF54LS05%20DK',
+        },
+    },
     PCA10201: {
         name: 'nRF9151 SMA DK',
         cores: 1,

package/src/utils/useStopwatch.test.tsx

@@ -7,18 +7,18 @@
 import React from 'react';
 import { act, render } from '@testing-library/react';
 
-import useStopWatch, { type ITimer, type Stopwatch } from './useStopwatch';
+import useStopwatch, { type ITimer, type Stopwatch } from './useStopwatch';
 
 let appCallback = () => {};
 
 const setup = (stopwatch: Stopwatch) => {
     const returnVal = {};
     const TestComponent = () => {
-        Object.assign(returnVal, useStopWatch(stopwatch));
+        Object.assign(returnVal, useStopwatch(stopwatch));
         return null;
     };
     render(<TestComponent />);
-    return returnVal as ReturnType<typeof useStopWatch>;
+    return returnVal as ReturnType<typeof useStopwatch>;
 };
 
 describe('Stop Watch', () => {
@@ -34,7 +34,7 @@ describe('Stop Watch', () => {
     };
 
     const expectZeroElapsedTime = (
-        stopwatch: ReturnType<typeof useStopWatch>,
+        stopwatch: ReturnType<typeof useStopwatch>,
     ) => {
         expect(stopwatch.time).toBe(0);
         expect(stopwatch.seconds).toBe(0);

package/src/variables.scss

@@ -4,6 +4,9 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
+@use "sass:color";
+@use "sass:math";
+
 @import '../styles.scss';
 
 //
@@ -49,7 +52,7 @@ $h6-font-size: ($font-size-base * 0.85); // ~12px
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base: 1.428571429; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
+$line-height-computed: math.floor(($font-size-base * $line-height-base)); // ~20px
 
 //** By default, this inherits from the `<body>`.
 $headings-font-family: inherit;
@@ -335,20 +338,20 @@ $navbar-collapse-max-height: 340px;
 
 $navbar-default-color: #777;
 $navbar-default-bg: #f8f8f8;
-$navbar-default-border: darken($navbar-default-bg, 6.5%);
+$navbar-default-border: color.adjust($navbar-default-bg, $lightness: -6.5%);
 
 // Navbar links
 $navbar-default-link-color: #777;
 $navbar-default-link-hover-color: #333;
 $navbar-default-link-hover-bg: transparent;
 $navbar-default-link-active-color: #555;
-$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
+$navbar-default-link-active-bg: color.adjust($navbar-default-bg, $lightness: -6.5%);
 $navbar-default-link-disabled-color: #ccc;
 $navbar-default-link-disabled-bg: transparent;
 
 // Navbar brand label
 $navbar-default-brand-color: $navbar-default-link-color;
-$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%);
+$navbar-default-brand-hover-color: color.adjust($navbar-default-brand-color, $lightness: -10%);
 $navbar-default-brand-hover-bg: transparent;
 
 // Navbar toggle
@@ -360,14 +363,14 @@ $navbar-default-toggle-border-color: #ddd;
 // Reset inverted navbar basics
 $navbar-inverse-color: $gray-200;
 $navbar-inverse-bg: #222;
-$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
+$navbar-inverse-border: color.adjust($navbar-inverse-bg, $lightness: -10%);
 
 // Inverted navbar links
 $navbar-inverse-link-color: $gray-200;
 $navbar-inverse-link-hover-color: #fff;
 $navbar-inverse-link-hover-bg: transparent;
 $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
-$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%);
+$navbar-inverse-link-active-bg: color.adjust($navbar-inverse-bg, $lightness: -10%);
 $navbar-inverse-link-disabled-color: #444;
 $navbar-inverse-link-disabled-bg: transparent;
 
@@ -452,8 +455,8 @@ $jumbotron-padding: 30px;
 $jumbotron-color: inherit;
 $jumbotron-bg: $gray-50;
 $jumbotron-heading-color: inherit;
-$jumbotron-font-size: ceil(($font-size-base * 1.5));
-$jumbotron-heading-font-size: ceil(($font-size-base * 4.5));
+$jumbotron-font-size: math.ceil(($font-size-base * 1.5));
+$jumbotron-heading-font-size: math.ceil(($font-size-base * 4.5));
 
 //== Form states and alerts
 //
@@ -461,19 +464,18 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5));
 
 $state-success-text: #3c763d;
 $state-success-bg: #dff0d8;
-$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%);
+$state-success-border: color.adjust($state-success-bg, $hue: -10deg, $lightness: -5%);
 
 $state-info-text: #31708f;
 $state-info-bg: #d9edf7;
-$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%);
-
+$state-info-border: color.adjust($state-info-bg, $hue: -10deg, $lightness: -7%);
 $state-warning-text: #8a6d3b;
 $state-warning-bg: #fcf8e3;
-$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%);
+$state-warning-border: color.adjust($state-warning-bg, $hue: -10deg, $lightness: -5%);
 
 $state-danger-text: #a94442;
 $state-danger-bg: #f2dede;
-$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%);
+$state-danger-border: color.adjust($state-danger-bg, $hue: -10deg, $lightness: -5%);
 
 //== Tooltips
 //
@@ -506,7 +508,7 @@ $popover-border-color: rgba(0, 0, 0, 0.2);
 $popover-fallback-border-color: #ccc;
 
 //** Popover title background color
-$popover-title-bg: darken($popover-bg, 3%);
+$popover-title-bg: color.adjust($popover-bg, $lightness: -3%);
 
 //** Popover arrow width
 $popover-arrow-width: 10px;
@@ -518,9 +520,9 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1);
 //** Popover outer arrow color
 $popover-arrow-outer-color: fadein($popover-border-color, 5%);
 //** Popover outer arrow fallback color
-$popover-arrow-outer-fallback-color: darken(
+$popover-arrow-outer-fallback-color: color.adjust(
     $popover-fallback-border-color,
-    20%
+    $lightness: -20%
 );
 
 //== Labels
@@ -644,7 +646,7 @@ $list-group-active-bg: $component-active-bg;
 //** Border color of active list elements
 $list-group-active-border: $list-group-active-bg;
 //** Text color for content within active list items
-$list-group-active-text-color: lighten($list-group-active-bg, 40%);
+$list-group-active-text-color: color.adjust($list-group-active-bg, $lightness: 40%);
 
 //** Text color of disabled list items
 $list-group-disabled-color: $gray-400;
@@ -718,7 +720,7 @@ $thumbnail-caption-padding: 9px;
 //##
 
 $well-bg: #f5f5f5;
-$well-border: darken($well-bg, 7%);
+$well-border: color.adjust($well-bg, $lightness: -7%);
 
 //== Badges
 //

package/src/About/about.scss

@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables';
-
-.about {
-    display: flex;
-    align-items: center;
-    height: 100%;
-
-    .about-inner {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        flex-wrap: wrap;
-        width: 100%;
-        margin: auto;
-        padding-bottom: 16px;
-        padding-right: 16px;
-        .card {
-            min-width: 230px;
-            max-width: 20em;
-            margin-left: 8px;
-            margin-bottom: 8px;
-        }
-        .card-body {
-            margin-bottom: 1em;
-        }
-        .factory-reset-button {
-            height: 24px;
-            padding: 0;
-        }
-    }
-    button {
-        width: 100%;
-    }
-}

package/src/Card/card.module.scss

@@ -1,28 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../variables.scss';
-
-.card {
-    flex: 1;
-    flex-shrink: 0;
-    padding: 16px;
-}
-
-.header {
-    background-color: transparent !important;
-    text-align: center !important;
-    padding: 0.5em 0em 0em 0em !important;
-}
-
-.title {
-    float: inherit !important;
-    margin-bottom: 0px !important;
-}
-
-.body {
-    padding: 1em 0em 0em 0em !important;
-}