@ledgerhq/react-ui 0.4.0 → 0.5.0

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,42 @@ 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.warning.c30};
-          color: ${p.theme.colors.warning.c100};
-        `;
+            return {
+                background: theme.colors.warning.c30,
+                color: theme.colors.warning.c100,
+            };
         case "error":
-            return css `
-          background: ${p.theme.colors.error.c30};
-          color: ${p.theme.colors.error.c100};
-        `;
+            return {
+                background: theme.colors.error.c30,
+                color: theme.colors.error.c100,
+            };
         case "info":
         default:
-            return css `
-          background: ${p.theme.colors.primary.c20};
-          color: ${p.theme.colors.primary.c90};
-        `;
+            return {
+                background: theme.colors.primary.c20,
+                color: theme.colors.primary.c90,
+            };
     }
-}}
-
+};
+const StyledAlertContainer = styled(Flex).attrs(() => ({
+    padding: 6,
+})) `
   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, }) {
+    const theme = useTheme();
+    const { color, background } = getColors({ theme, type });
+    const textProps = {
+        variant: "paragraph",
+        fontWeight: "medium",
+    };
+    return (React.createElement(StyledAlertContainer, { color: color, backgroundColor: background },
         showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
-        React.createElement(Text, { variant: "body", color: "inherit" }, title)));
+        React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", rowGap: "6px" },
+            title && (React.createElement(Text, Object.assign({}, textProps, { color: "inherit" }), title)),
+            renderContent && renderContent({ color, textProps }))));
 }

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/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/navigation/Aside/index.d.ts

@@ -6,13 +6,10 @@ export declare type Props = React.PropsWithChildren<{
 }> & React.ComponentProps<typeof Wrapper>;
 interface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {
 }
-declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & 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 Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & 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;
-} & ExtraWrapperProps, "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">;
+} & ExtraWrapperProps, "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 function Aside({ header, footer, children, ...props }: Props): JSX.Element;
 export {};

package/components/navigation/Breadcrumb/index.js

@@ -28,7 +28,7 @@ export default memo(function Breadcrumb({ segments, onChange }) {
         renderArray.push(React.createElement(React.Fragment, null,
             index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "neutral.c40", variant: "paragraph" }, "/")) : null,
             isMultiSegment(segment) ? (React.createElement(Dropdown, { label: "", options: segment.options, value: segment.value, onChange: (elt) => elt && onChange([...values, elt.value]), styles: {
-                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles()(provided, state)), { cursor: "pointer" })),
+                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles(theme)(provided, state)), { cursor: "pointer" })),
                     singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.neutral.c80, ":hover": {
                             color: theme.colors.neutral.c100,
                             textDecoration: "underline",

package/components/navigation/progress/ProgressBar/Onboarding.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Step {
     key: string;
     label: string;

package/components/navigation/sideBar/Item/Item.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps, keyof import("../../../asorted/Text").TextProps>;
 export declare type ItemType = {
     label: string;

package/components/navigation/sideBar/Logo/Logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Logo: () => JSX.Element;
 export default Logo;

package/components/navigation/sideBar/SideBar/SideBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type SideBarProps = {
     children: Array<JSX.Element>;
     onToggle: () => void;

package/components/navigation/sideBar/Toggle/Toggle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type ToggleButtonProps = {
     isDisplayed: boolean;
 };

package/components/styled.d.ts

@@ -1,12 +1,15 @@
 import { StyledInterface, InterpolationFunction } from "styled-components";
-import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps } from "styled-system";
-export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & OverflowProps & {
+import { FlexboxProps, SpaceProps, PositionProps, ColorProps, LayoutProps, OverflowProps, BorderProps } from "styled-system";
+export declare type BaseStyledProps = SpaceProps & FlexboxProps & PositionProps & ColorProps & LayoutProps & BorderProps & OverflowProps & {
+    /**
+     * The columnGap CSS property sets the size of the gap (gutter) between an element's grid columns.
+     */
     columnGap?: string | number;
+    /**
+     * The rowGap CSS property sets the size of the gap (gutter) between an element's grid rows.
+     */
     rowGap?: string | number;
     color?: string;
-    display?: string;
-    position?: string;
-    maxHeight?: number;
 };
 export declare const baseStyles: InterpolationFunction<unknown>;
 declare const _default: StyledInterface;

package/components/styled.js

@@ -1,7 +1,7 @@
 import gaps from "../styles/system/gaps";
 import styled from "styled-components";
-import { compose, flexbox, space, position, color, layout, overflow, } from "styled-system";
-export const baseStyles = compose(flexbox, space, position, color, layout, overflow, gaps);
+import { compose, flexbox, space, position, color, layout, overflow, border, } from "styled-system";
+export const baseStyles = compose(flexbox, space, position, color, layout, overflow, gaps, border);
 const proxyStyled = new Proxy(styled, {
     apply(target, thisArg, argumentsList) {
         return styled(target.apply(thisArg, argumentsList)(baseStyles));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@ledgerhq/ui-shared": "^0.1.3",
     "@tippyjs/react": "^4.2.6",
     "@types/color": "^3.0.2",
-    "@types/react": "~17.0.34",
+    "@types/react": "~17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/react-select": "^4.0.18",
     "@types/react-transition-group": "^4.4.2",

package/styles/theme.js

@@ -34,7 +34,7 @@ const fontWeights = {
     bold: "700",
     extraBold: "800",
 };
-export const radii = [0, 4, 8, 12];
+export const radii = [0, 4, 8, 12, 16, 20];
 export const shadows = ["0 4px 8px 0 rgba(0, 0, 0, 0.03)"];
 export const zIndexes = [-1, 0, 1, 9, 10, 90, 100, 900, 1000];
 // Those fonts are now defined in global.css, this is just a mapping for styled-system