@nordicsemiconductor/pc-nrfconnect-shared 244.0.0 → 245.0.0

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/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;
-}