@ledgerhq/react-ui 0.3.0 → 0.6.0

package/components/layout/Flex/index.d.ts

@@ -1,11 +1,8 @@
 import { BaseStyledProps } from "../../styled";
 export declare type FlexBoxProps = BaseStyledProps;
-declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 export default FlexBox;

package/components/layout/Popin/index.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
 import { BaseStyledProps } from "../../styled";
-export interface PopinProps {
-    width?: number;
-    height?: number;
+export interface PopinProps extends BaseStyledProps {
     isOpen: boolean;
     children: React.ReactNode;
 }
@@ -14,28 +12,22 @@ export declare type PopinHeaderProps = BaseStyledProps & {
 declare const PopinWrapper: {
     ({ children, ...popinProps }: PopinProps): React.ReactElement;
     Header: ({ children, onClose, onBack, ...props }: PopinHeaderProps) => JSX.Element;
-    Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
-        display?: string | undefined;
-        position?: string | undefined;
-        maxHeight?: number | undefined;
     } & {
         as: string;
         flexDirection: string;
         flex: number;
         overflow: string;
-    }, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "as" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+    Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
         columnGap?: string | number | undefined;
         rowGap?: string | number | undefined;
         color?: string | undefined;
-        display?: string | undefined;
-        position?: string | undefined;
-        maxHeight?: number | undefined;
     } & {
         as: string;
-    }, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "as" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+    }, "overflow" | "p" | "color" | "as" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 };
 export default PopinWrapper;

package/components/layout/Popin/index.js

@@ -20,16 +20,6 @@ import Button from "../../cta/Button";
 import TransitionInOut from "../../transitions/TransitionInOut";
 import TransitionScale from "../../transitions/TransitionScale";
 const ICON_SIZE = 20;
-const Container = styled(Flex).attrs((p) => ({
-    position: "relative",
-    flexDirection: "column",
-    rowGap: 6,
-    width: "100%",
-    height: "100%",
-    paddingY: p.theme.space[10],
-    paddingX: p.theme.space[12],
-    backgroundColor: p.theme.colors.palette.neutral.c00,
-})) ``;
 const Wrapper = styled(Flex).attrs((p) => ({
     flexDirection: "column",
     alignItems: "stretch",
@@ -41,6 +31,9 @@ const Wrapper = styled(Flex).attrs((p) => ({
     maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,
     maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,
     zIndex: p.theme.zIndexes[8],
+    p: p.p !== undefined ? p.p : p.theme.space[10],
+    rowGap: 6,
+    backgroundColor: p.theme.colors.neutral.c00,
 })) ``;
 const Overlay = styled(Flex).attrs((p) => ({
     justifyContent: "center",
@@ -51,7 +44,7 @@ const Overlay = styled(Flex).attrs((p) => ({
     position: "fixed",
     top: 0,
     left: 0,
-    backgroundColor: p.theme.colors.palette.neutral.c100a07,
+    backgroundColor: p.theme.colors.neutral.c100a07,
 })) ``;
 const Header = baseStyled.section `
   display: grid;
@@ -76,16 +69,18 @@ const PopinHeader = (_a) => {
     var { children, onClose, onBack } = _a, props = __rest(_a, ["children", "onClose", "onBack"]);
     return (React.createElement(Header, Object.assign({}, props),
         React.createElement(Flex, null, onBack ? (React.createElement(IconContainer, { onClick: onBack },
-            React.createElement(ArrowLeftIcon, { size: ICON_SIZE, color: "palette.neutral.c100" }))) : null),
+            React.createElement(ArrowLeftIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null),
         React.createElement(HeaderTitleContainer, null, children),
         React.createElement(Flex, null, onClose ? (React.createElement(IconContainer, { onClick: onClose },
-            React.createElement(CloseIcon, { size: ICON_SIZE, color: "palette.neutral.c100" }))) : null)));
+            React.createElement(CloseIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null)));
+};
+const Popin = (_a) => {
+    var { isOpen, children, width, height } = _a, props = __rest(_a, ["isOpen", "children", "width", "height"]);
+    return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true },
+        React.createElement(Overlay, null,
+            React.createElement(TransitionScale, { in: isOpen, appear: true },
+                React.createElement(Wrapper, Object.assign({ width: width, height: height }, props), children)))));
 };
-const Popin = ({ isOpen, children, width, height }) => (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true },
-    React.createElement(Overlay, null,
-        React.createElement(TransitionScale, { in: isOpen, appear: true },
-            React.createElement(Wrapper, { width: width, height: height },
-                React.createElement(Container, null, children))))));
 const PopinWrapper = (_a) => {
     var { children } = _a, popinProps = __rest(_a, ["children"]);
     const $root = React.useMemo(() => document.querySelector("#ll-popin-root"), []);

package/components/layout/Side/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SideProps {
     onBack?: () => void;
 }

package/components/loaders/InfiniteLoader/index.d.ts

@@ -1,7 +1,8 @@
-declare const InfiniteLoader: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
-    alt: "loading...";
-    src: "data:image/png;base64,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";
-    width: "28";
-    height: "28";
-}, "height" | "width" | "alt" | "src">;
-export default InfiniteLoader;
+import React from "react";
+import { SizeProps } from "styled-system";
+declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+export declare type Props = React.ComponentProps<typeof Loader> & {
+    color?: string;
+};
+export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export {};

package/components/loaders/InfiniteLoader/index.js

@@ -1,5 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
 import styled, { keyframes } from "styled-components";
-import image from "./image";
+import { system, size } from "styled-system";
 const rotate = keyframes `
   0% {
     transform: rotate(0deg);
@@ -8,13 +20,27 @@ const rotate = keyframes `
     transform: rotate(360deg);
   }
 `;
-const InfiniteLoader = styled.img.attrs({
-    alt: "loading...",
-    src: `data:image/png;base64,${image}`,
-    width: "28",
-    height: "28",
-}) `
+const Loader = styled.svg `
   animation: ${rotate} 1s linear infinite;
-  transition: 100ms linear transform;
+  ${size}
+  ${system({
+    stroke: {
+        property: "stroke",
+        scale: "colors",
+    },
+})}
 `;
-export default InfiniteLoader;
+export default function InfiniteLoader(_a) {
+    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    return (React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
+        React.createElement("linearGradient", { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+            React.createElement("stop", { offset: "0", stopColor: "white", stopOpacity: "0.5" }),
+            React.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "1" })),
+        React.createElement("linearGradient", { id: "gradient-end", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+            React.createElement("stop", { offset: "0", stopColor: "white", stopOpacity: "0.5" }),
+            React.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })),
+        React.createElement("mask", { id: "gradient-mask", maskUnits: "userSpaceOnUse" },
+            React.createElement("rect", { x: "-0", y: "-4", width: "44", height: "22", strokeWidth: "0", fill: "url(#gradient-start)", transform: "rotate(10)" }),
+            React.createElement("rect", { x: "0", y: "18", width: "44", height: "21", strokeWidth: "0", fill: "url(#gradient-end)", transform: "rotate(10)" })),
+        React.createElement("path", { d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round", mask: "url(#gradient-mask)" })));
+}

package/components/loaders/ProgressLoader/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Props {
     /**
      * Radius of the progress ring.
@@ -12,5 +11,26 @@ export interface Props {
      * Progress of the loader, in percent, between 0 and 100.
      */
     progress?: number;
+    /**
+     * Whether to display the progress, defaults to true.
+     */
+    showPercentage?: boolean;
+    /**
+     * Percentage text color
+     */
+    textColor?: string;
+    /**
+     * Front stroke color.
+     */
+    frontStrokeColor?: string;
+    /**
+     * Front stroke linecap.
+     * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap
+     */
+    frontStrokeLinecap?: "butt" | "round";
+    /**
+     * Background stroke color.
+     */
+    backgroundStrokeColor?: string;
 }
-export default function ProgressLoader({ radius, stroke, progress, }: Props): JSX.Element;
+export default function ProgressLoader({ radius, stroke, progress, showPercentage, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }: Props): JSX.Element;

package/components/loaders/ProgressLoader/index.js

@@ -11,14 +11,12 @@ const StyledCircle = styled.circle.attrs({
   transform-origin: 50% 50%;
 `;
 const StyledCircleBackground = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.palette.primary.c20,
+    stroke: props.stroke || props.theme.colors.primary.c20,
 })) ``;
 const StyledCircleFront = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.palette.primary.c60,
+    stroke: props.stroke || props.theme.colors.primary.c60,
 })) ``;
-const StyledCenteredText = styled(Text).attrs({
-    color: "palette.primary.c80",
-}) `
+const StyledCenteredText = styled(Text) `
   position: absolute;
   top: 50%;
   left: 50%;
@@ -29,18 +27,18 @@ const StyledProgressLoaderContainer = styled.div `
   display: flex;
   position: absolute;
 `;
-function ProgressCircleSvg({ radius, stroke, progress, }) {
+function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, frontStrokeColor, frontStrokeLinecap, }) {
     const normalizedRadius = radius - stroke / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - (progress / 100) * circumference;
     return (React.createElement("svg", { height: radius * 2, width: radius * 2 },
-        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, r: normalizedRadius }),
-        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, r: normalizedRadius })));
+        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, stroke: backgroundStrokeColor, r: normalizedRadius }),
+        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, stroke: frontStrokeColor, strokeLinecap: frontStrokeLinecap, r: normalizedRadius })));
 }
-export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, }) {
+export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
     return (React.createElement(StyledProgressLoaderContainer, null,
-        React.createElement(StyledCenteredText, { variant: "body" },
+        showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
             progress,
-            "%"),
-        React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress })));
+            "%")),
+        React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor })));
 }

package/components/message/Alert/index.d.ts

@@ -1,9 +1,37 @@
-/// <reference types="react" />
+import { TextVariants } from "../../../styles/theme";
 declare type AlertType = "info" | "warning" | "error";
+declare type RenderProps = (props: {
+    color: string;
+    textProps: {
+        variant?: TextVariants;
+        fontWeight?: string;
+    };
+}) => JSX.Element;
 export interface AlertProps {
+    /**
+     * Affects the colors of the background & text and what icon can be displayed.
+     */
     type?: AlertType;
-    title: string;
+    /**
+     * Title of the Alert.
+     */
+    title?: string;
+    /**
+     * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.
+     */
+    renderContent?: RenderProps;
+    /**
+     * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.
+     */
+    renderRight?: RenderProps;
+    /**
+     * Additional props to be passed to the top level container (containing icon + content).
+     */
+    containerProps?: Record<string, unknown>;
+    /**
+     * Whether or not to display an icon
+     */
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon, renderContent, renderRight, containerProps, }: AlertProps): JSX.Element;
 export {};

package/components/message/Alert/index.js

@@ -1,6 +1,7 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Text from "../../asorted/Text";
+import Flex from "../../layout/Flex";
 import ShieldSecurityMedium from "@ledgerhq/icons-ui/react/ShieldSecurityMedium";
 import CircledCrossMedium from "@ledgerhq/icons-ui/react/CircledCrossMedium";
 import CircledAlertMedium from "@ledgerhq/icons-ui/react/CircledAlertMedium";
@@ -14,35 +15,41 @@ const icons = {
     warning: React.createElement(CircledAlertMedium, { size: 20 }),
     error: React.createElement(CircledCrossMedium, { size: 20 }),
 };
-const StyledAlertContainer = styled.div `
-  ${(p) => {
-    switch (p.type) {
+const getColors = ({ theme, type }) => {
+    switch (type) {
         case "warning":
-            return css `
-          background: ${p.theme.colors.palette.warning.c30};
-          color: ${p.theme.colors.palette.warning.c100};
-        `;
+            return {
+                background: theme.colors.warning.c30,
+                color: theme.colors.warning.c100,
+            };
         case "error":
-            return css `
-          background: ${p.theme.colors.palette.error.c30};
-          color: ${p.theme.colors.palette.error.c100};
-        `;
+            return {
+                background: theme.colors.error.c30,
+                color: theme.colors.error.c100,
+            };
         case "info":
         default:
-            return css `
-          background: ${p.theme.colors.palette.primary.c20};
-          color: ${p.theme.colors.palette.primary.c90};
-        `;
+            return {
+                background: theme.colors.primary.c20,
+                color: theme.colors.primary.c90,
+            };
     }
-}}
-
+};
+const StyledAlertContainer = styled(Flex) `
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
-  padding: 16px;
-  display: flex;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true }) {
-    return (React.createElement(StyledAlertContainer, { type: type },
+export default function Alert({ type = "info", title, showIcon = true, renderContent, renderRight, containerProps, }) {
+    const theme = useTheme();
+    const { color, background } = getColors({ theme, type });
+    const textProps = {
+        variant: "paragraph",
+        fontWeight: "medium",
+    };
+    return (React.createElement(StyledAlertContainer, Object.assign({ color: color, backgroundColor: background, padding: 6 }, containerProps),
         showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
-        React.createElement(Text, { variant: "body", color: "inherit" }, title)));
+        React.createElement(Flex, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" },
+            title && (React.createElement(Text, Object.assign({}, textProps, { color: "inherit" }), title)),
+            renderContent && renderContent({ color, textProps })),
+        React.createElement(Flex, null, renderRight && renderRight({ color, textProps }))));
 }

package/components/message/Log/index.js

@@ -19,7 +19,7 @@ const Container = styled(FlexBox) `
   flex-wrap: wrap;
   align-items: stretch;
   min-height: ${(p) => p.theme.space[12]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const TextContainer = styled(FlexBox).attrs(() => ({
     flex: "1",

package/components/message/Notification/Badge.js

@@ -20,14 +20,14 @@ const ActiveCircle = styled.div `
   width: 10px;
   border-radius: 9999px;
   box-sizing: content-box;
-  background-color: ${(p) => p.theme.colors.palette.error.c100};
+  background-color: ${(p) => p.theme.colors.error.c100};
 
   border: 2px solid
     var(
       --notification-badge-border,
       ${(p) => {
     /* The CSS variable is dynamically set by the Notification component */
-    return p.theme.colors.palette.background.main;
+    return p.theme.colors.background.main;
 }}
     );
 `;

package/components/message/Notification/index.js

@@ -23,11 +23,9 @@ const Container = styled(FlexBox).attrs({
 }) `
   --notification-badge-border: ${(p) => {
     /* Set a CSS variable that will be consumed by the Badge component */
-    return p.hasBackground
-        ? p.theme.colors.palette.neutral.c30
-        : p.theme.colors.palette.background.main;
+    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;
 }};
-  background-color: ${(p) => p.hasBackground ? p.theme.colors.palette.neutral.c30 : "transparent"};
+  background-color: ${(p) => (p.hasBackground ? p.theme.colors.neutral.c30 : "transparent")};
 
   border-radius: 8px;
 `;
@@ -36,8 +34,8 @@ function Notification(_a) {
     return (React.createElement(Container, Object.assign({ hasBackground: hasBackground }, containerProps),
         badge,
         React.createElement(FlexBox, { flexDirection: "column", rowGap: 3, flex: "auto" },
-            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "palette.neutral.c100" }, title),
-            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "palette.neutral.c80" }, description)),
+            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title),
+            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description)),
             link && (React.createElement(FlexBox, { justifyContent: "flex-start" },
                 React.createElement(Link, { onClick: (event) => onLinkClick && onLinkClick(event), Icon: ExternalLinkMedium }, link))))));
 }

package/components/message/StatusNotification/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { FlexBoxProps } from "../../layout/Flex";
+interface ContainerProps extends FlexBoxProps {
+    hasBorder?: boolean;
+}
+export interface Props extends ContainerProps {
+    text: string;
+    badge: React.ReactNode;
+}
+declare function StatusNotification({ text, badge, hasBorder, ...containerProps }: Props): JSX.Element;
+export default StatusNotification;

package/components/message/StatusNotification/index.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import FlexBox from "../../layout/Flex";
+import Log from "../Log/";
+const Container = styled(FlexBox).attrs({
+    p: 8,
+    rowGap: 9,
+    alignItems: "center",
+    flexDirection: "column",
+}) `
+  border-width: 1px;
+  border-style: ${(p) => (p.hasBorder ? "solid" : "none")};
+  border-radius: 8px;
+  border-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+function StatusNotification(_a) {
+    var { text, badge, hasBorder = false } = _a, containerProps = __rest(_a, ["text", "badge", "hasBorder"]);
+    return (React.createElement(Container, Object.assign({ hasBorder: hasBorder }, containerProps),
+        badge,
+        React.createElement(Log, null, text)));
+}
+export default StatusNotification;

package/components/message/Tip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type TipType = "success" | "warning" | "error";
 export interface TipProps {
     type?: TipType;

package/components/message/Tip/index.js

@@ -13,19 +13,19 @@ const StyledIconContainer = styled.div `
     switch (p.type) {
         case "warning":
             return css `
-          background: ${p.theme.colors.palette.warning.c10};
-          color: ${p.theme.colors.palette.warning.c100};
+          background: ${p.theme.colors.warning.c10};
+          color: ${p.theme.colors.warning.c100};
         `;
         case "error":
             return css `
-          background: ${p.theme.colors.palette.error.c10};
-          color: ${p.theme.colors.palette.error.c100};
+          background: ${p.theme.colors.error.c10};
+          color: ${p.theme.colors.error.c100};
         `;
         case "success":
         default:
             return css `
-          background: ${p.theme.colors.palette.success.c30};
-          color: ${p.theme.colors.palette.success.c100};
+          background: ${p.theme.colors.success.c30};
+          color: ${p.theme.colors.success.c100};
         `;
     }
 }}
@@ -39,5 +39,5 @@ const StyledIconContainer = styled.div `
 export default function Tip({ type, label }) {
     return (React.createElement(Flex, { alignItems: "center" },
         type && React.createElement(StyledIconContainer, { type: type }, icons[type]),
-        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "palette.neutral.c100", flexShrink: 1 }, label)));
+        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c100", flexShrink: 1 }, label)));
 }

package/components/message/Tooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TippyProps } from "@tippyjs/react";
 declare type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "auto" | "auto-start" | "auto-end";
 export interface Props extends TippyProps {

package/components/message/Tooltip/index.js

@@ -36,6 +36,6 @@ const Wrapper = forwardRef((props, ref) => {
 });
 export default function Tooltip(props) {
     const { content, placement = "auto", children } = props, rest = __rest(props, ["content", "placement", "children"]);
-    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "palette.neutral.c00" }, content) }),
+    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "neutral.c00" }, content) }),
         React.createElement(Wrapper, { children: children })));
 }

package/components/message/Tooltip/styles.js

@@ -10,8 +10,8 @@ export default css `
 
   .tippy-box {
     position: relative;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c100};
-    color: ${(p) => p.theme.colors.palette.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c00};
     border-radius: 4px;
     font-size: 14px;
     line-height: 1.4;
@@ -72,7 +72,7 @@ export default css `
   .tippy-arrow {
     width: 16px;
     height: 16px;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
   }
 
   .tippy-arrow:before {

package/components/message/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";