@ledgerhq/native-ui 0.18.1-nightly.0 → 0.18.2-nightly.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js +11 -10
  2. package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js +1 -1
  3. package/lib/components/Layout/List/VerticalTimeline/index.d.ts +3 -1
  4. package/lib/components/Layout/List/VerticalTimeline/index.js +3 -3
  5. package/lib/components/message/Alert/index.d.ts +16 -10
  6. package/lib/components/message/Alert/index.js +49 -28
  7. package/package.json +4 -5
package/lib/components/Layout/List/VerticalTimeline/TimelineIndicator.js CHANGED
@@ -27,7 +27,7 @@ const linesWidth = 2;
27
27
  const linesLength = 5000;
28
28
  const TopSegmentSvg = ({ status, hidden, height }) => {
29
29
  const theme = useTheme();
30
- const strokeColor = status === "inactive" ? theme.colors.neutral.c50 : theme.colors.primary.c80;
30
+ const strokeColor = status === "inactive" ? theme.colors.neutral.c40 : theme.colors.primary.c80;
31
31
  const strokeDashArray = status === "inactive" ? `${dashLength}` : undefined;
32
32
  return (React.createElement(Flex, { height: height, width: "100%", overflow: "hidden" },
33
33
  React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
@@ -37,7 +37,7 @@ const TopSegmentSvg = ({ status, hidden, height }) => {
37
37
  const topSegmentDefaultHeight = Platform.OS === "android" ? 23 : 21; // difference due to how borders are drawn in android
38
38
  const BottomSegmentSvg = ({ status, hidden }) => {
39
39
  const theme = useTheme();
40
- const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c50;
40
+ const strokeColor = status === "completed" ? theme.colors.primary.c80 : theme.colors.neutral.c40;
41
41
  const strokeDashArray = status === "completed" ? undefined : `${dashLength}`;
42
42
  return (React.createElement(Flex, { flex: 1, width: "100%", style: { transform: [{ scaleY: -1 }] }, overflow: "hidden" },
43
43
  React.createElement(Flex, { style: StyleSheet.absoluteFillObject, alignItems: "center" },
@@ -45,23 +45,24 @@ const BottomSegmentSvg = ({ status, hidden }) => {
45
45
  React.createElement(Line, { x1: "0", y1: "0", x2: "0", y2: "100%", strokeWidth: hidden ? 0 : 2 * linesWidth, stroke: strokeColor, strokeDasharray: strokeDashArray, strokeDashoffset: `${dashLength}` })))));
46
46
  };
47
47
  const getIconBackground = (theme, status, isLastItem) => {
48
- if (status === "completed") {
48
+ if (isLastItem) {
49
+ if (status === "inactive")
50
+ return theme.colors.success.c10;
49
51
  return "transparent";
50
52
  }
51
- else if (isLastItem) {
52
- return theme.colors.success.c10;
53
- }
54
53
  else if (status === "active") {
55
54
  return theme.colors.neutral.c40;
56
55
  }
57
- return theme.colors.background.main;
56
+ else {
57
+ return "transparent";
58
+ }
58
59
  };
59
60
  const getIconBorder = (theme, status, isLastItem) => {
60
61
  if (isLastItem) {
61
- return theme.colors.success.c50;
62
+ return theme.colors.success.c70;
62
63
  }
63
64
  else if (status === "inactive") {
64
- return theme.colors.neutral.c50;
65
+ return theme.colors.neutral.c40;
65
66
  }
66
67
  return theme.colors.primary.c80;
67
68
  };
@@ -79,7 +80,7 @@ export default function TimelineIndicator(_a) {
79
80
  const { colors } = useTheme();
80
81
  return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
81
82
  React.createElement(TopSegmentSvg, { status: status, hidden: isFirstItem, height: PixelRatio.roundToNearestPixel(topHeight || topSegmentDefaultHeight) }),
82
- React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c50 : colors.primary.c80, size: 20 }))),
83
+ React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))),
83
84
  React.createElement(BottomSegmentSvg, { status: status, hidden: isLastItem })));
84
85
  }
85
86
  TimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;
package/lib/components/Layout/List/VerticalTimeline/TimelineItem.js CHANGED
@@ -69,7 +69,7 @@ export default function TimelineItem({ item, formatEstimatedTime, isFirstItem, i
69
69
  : undefined }),
70
70
  React.createElement(Container, { status: item.status, isLastItem: isLastItem, mt: withExtraMarginOnActiveStep && !isFirstItem && item.status === "active" ? 4 : 0, mb: withExtraMarginOnActiveStep && !isLastItem && item.status === "active" ? 4 : 0 },
71
71
  React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
72
- React.createElement(Text, { variant: "body", fontWeight: "semiBold", flexShrink: 1, color: item.status === "completed" && isLastItem
72
+ React.createElement(Text, { variant: "body", fontWeight: status === "active" ? "semiBold" : "medium", flexShrink: 1, color: item.status === "completed" && isLastItem
73
73
  ? "success.c40"
74
74
  : item.status === "active"
75
75
  ? "primary.c80"
package/lib/components/Layout/List/VerticalTimeline/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { StyleProp, ViewStyle } from "react-native";
2
3
  import { BaseTextProps } from "../../../Text";
3
4
  import { BaseStyledProps } from "src/components/styled";
4
5
  import { Item } from "../types";
@@ -12,8 +13,9 @@ export type Props = BaseStyledProps & {
12
13
  * Defaults to true.
13
14
  * */
14
15
  autoScroll?: boolean;
16
+ contentContainerStyle?: StyleProp<ViewStyle>;
15
17
  };
16
- declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, ...props }: Props): JSX.Element;
18
+ declare function VerticalTimeline({ steps, formatEstimatedTime, setActiveIndex, header, autoScroll, contentContainerStyle, ...props }: Props): JSX.Element;
17
19
  declare namespace VerticalTimeline {
18
20
  var BodyText: React.FC<BaseTextProps>;
19
21
  var SubtitleText: React.FC<BaseTextProps>;
package/lib/components/Layout/List/VerticalTimeline/index.js CHANGED
@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React, { useRef, useCallback } from "react";
13
- import { ScrollView, View } from "react-native";
13
+ import { ScrollView, View, } from "react-native";
14
14
  import TimelineItem from "./TimelineItem";
15
15
  import Flex from "../../Flex";
16
16
  import Text from "../../../Text";
17
17
  import { ItemStatus } from "../types";
18
18
  export default function VerticalTimeline(_a) {
19
- var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll"]);
19
+ var { steps, formatEstimatedTime, setActiveIndex, header, autoScroll = true, contentContainerStyle } = _a, props = __rest(_a, ["steps", "formatEstimatedTime", "setActiveIndex", "header", "autoScroll", "contentContainerStyle"]);
20
20
  const scrollViewRef = useRef(null);
21
21
  const stepsContainerLayout = useRef();
22
22
  const onStepsContainerLayout = useCallback((evt) => {
@@ -28,7 +28,7 @@ export default function VerticalTimeline(_a) {
28
28
  const { layout } = evt.nativeEvent;
29
29
  scrollViewRef.current.scrollTo({ x: 0, y: stepsContainerLayout.current.y + layout.y });
30
30
  }, []);
31
- return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout },
31
+ return (React.createElement(ScrollView, { ref: scrollViewRef, onLayout: onStepsContainerLayout, contentContainerStyle: contentContainerStyle },
32
32
  header,
33
33
  React.createElement(Flex, Object.assign({}, props, { onLayout: onStepsContainerLayout, flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(View, { onLayout: autoScroll && step.status === "active" ? onActiveStepLayout : undefined },
34
34
  React.createElement(TimelineItem, { key: step.title, item: step, formatEstimatedTime: formatEstimatedTime, isFirstItem: index === 0, isLastItem: index === steps.length - 1, setActiveIndex: setActiveIndex, index: index })))))));
package/lib/components/message/Alert/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ /// <reference types="styled-components-react-native" />
1
2
  import React from "react";
2
- type AlertType = "info" | "warning" | "error";
3
+ type AlertType = "info" | "secondary" | "success" | "warning" | "error";
3
4
  export type IconProps = {
4
5
  size?: number;
5
6
  color?: string;
@@ -15,13 +16,18 @@ export interface AlertProps {
15
16
  title?: React.ReactNode;
16
17
  showIcon?: boolean;
17
18
  children?: React.ReactNode;
18
- /**
19
- * Alternative to using the `children` prop in order to render something using the value of `textColor`
20
- * that is passed as a parameter.
21
- */
22
- renderContent?: ({ textColor }: {
23
- textColor: string;
24
- }) => React.ReactNode | null;
25
19
  }
26
- export default function Alert({ type, Icon, title, showIcon, children, renderContent, }: AlertProps): JSX.Element;
27
- export {};
20
+ declare function Alert({ type, Icon, title, showIcon, children }: AlertProps): JSX.Element;
21
+ declare namespace Alert {
22
+ var BodyText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
23
+ flexShrink: 1;
24
+ variant: "bodyLineHeight";
25
+ fontWeight: "semiBold";
26
+ }, "fontWeight" | "variant" | "flexShrink">;
27
+ var UnderlinedText: import("styled-components").StyledComponent<({ children, bracket, textAlign, ...props }: import("../../Text").BaseTextProps) => JSX.Element, import("styled-components").DefaultTheme, {
28
+ flexShrink: 1;
29
+ variant: "bodyLineHeight";
30
+ fontWeight: "semiBold";
31
+ }, "fontWeight" | "variant" | "flexShrink">;
32
+ }
33
+ export default Alert;
package/lib/components/message/Alert/index.js CHANGED
@@ -1,51 +1,72 @@
1
1
  import React from "react";
2
2
  import styled, { useTheme } from "styled-components/native";
3
- import InfoMedium from "@ledgerhq/icons-ui/native/InfoMedium";
4
- import CircledCrossMedium from "@ledgerhq/icons-ui/native/CircledCrossMedium";
5
- import CircledAlertMedium from "@ledgerhq/icons-ui/native/CircledAlertMedium";
3
+ import InfoAltFillMedium from "@ledgerhq/icons-ui/native/InfoAltFillMedium";
4
+ import CircledCheckSolidMedium from "@ledgerhq/icons-ui/native/CircledCheckSolidMedium";
5
+ import WarningSolidMedium from "@ledgerhq/icons-ui/native/WarningSolidMedium";
6
+ import CircledCrossSolidMedium from "@ledgerhq/icons-ui/native/CircledCrossSolidMedium";
6
7
  import Text from "../../Text";
7
- import { getColor } from "../../../styles";
8
8
  import FlexBox from "../../Layout/Flex";
9
+ import { getColor } from "../../../styles";
9
10
  const icons = {
10
- info: InfoMedium,
11
- warning: CircledAlertMedium,
12
- error: CircledCrossMedium,
11
+ info: InfoAltFillMedium,
12
+ secondary: InfoAltFillMedium,
13
+ success: CircledCheckSolidMedium,
14
+ warning: WarningSolidMedium,
15
+ error: CircledCrossSolidMedium,
13
16
  };
14
17
  const alertColors = {
15
18
  info: {
16
- backgroundColor: "primary.c20",
17
- color: "primary.c90",
19
+ backgroundColor: "primary.c10",
20
+ iconColor: "primary.c80",
21
+ },
22
+ secondary: {
23
+ backgroundColor: "opacityDefault.c05",
24
+ iconColor: "neutral.c80",
25
+ },
26
+ success: {
27
+ backgroundColor: "success.c10",
28
+ iconColor: "success.c50",
18
29
  },
19
30
  warning: {
20
- backgroundColor: "warning.c20",
21
- color: "warning.c90",
31
+ backgroundColor: "warning.c10",
32
+ iconColor: "warning.c70",
22
33
  },
23
34
  error: {
24
- backgroundColor: "error.c20",
25
- color: "error.c90",
35
+ backgroundColor: "error.c10",
36
+ iconColor: "error.c50",
26
37
  },
27
38
  };
28
- const StyledIconContainer = styled.View `
29
- margin-right: 12px;
30
- display: flex;
31
- align-items: center;
32
- `;
39
+ const StyledIconContainer = styled(FlexBox).attrs({
40
+ mr: 4,
41
+ alignItems: "center",
42
+ }) ``;
33
43
  const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
34
44
  backgroundColor: alertColors[p.type || "info"].backgroundColor,
45
+ p: 6,
35
46
  })) `
36
47
  width: 100%;
37
- border-radius: ${(p) => `${p.theme.radii[1]}px`};
38
- padding: 16px;
48
+ border-radius: ${(p) => `${p.theme.radii[2]}px`};
39
49
  flex-direction: row;
40
- align-items: center;
50
+ align-items: flex-start;
51
+ `;
52
+ const AlertBodyText = styled(Text).attrs({
53
+ flexShrink: 1,
54
+ variant: "bodyLineHeight",
55
+ fontWeight: "semiBold",
56
+ }) ``;
57
+ const AlertUnderlinedText = styled(AlertBodyText) `
58
+ text-decoration-line: underline;
41
59
  `;
42
- export default function Alert({ type = "info", Icon, title, showIcon = true, children, renderContent, }) {
60
+ function Alert({ type = "info", Icon, title, showIcon = true, children }) {
43
61
  const theme = useTheme();
44
- const textColor = getColor(theme, alertColors[type || "info"].color);
45
- const iconProps = { size: 20, color: textColor };
62
+ const textColor = "neutral.c100";
63
+ const IconComponent = Icon !== null && Icon !== void 0 ? Icon : icons[type];
46
64
  return (React.createElement(StyledAlertContainer, { type: type },
47
- showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, Icon ? React.createElement(Icon, Object.assign({}, iconProps)) : icons[type || "info"](iconProps))),
48
- title && (React.createElement(Text, { color: textColor, flexShrink: 1 }, title)),
49
- children,
50
- renderContent && renderContent({ textColor })));
65
+ showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null,
66
+ React.createElement(IconComponent, { size: 20, color: getColor(theme, alertColors[type || "info"].iconColor) }))),
67
+ title ? (React.createElement(Text, { color: textColor, flexShrink: 1, variant: "bodyLineHeight", fontWeight: "semiBold" }, title)) : null,
68
+ children));
51
69
  }
70
+ Alert.BodyText = AlertBodyText;
71
+ Alert.UnderlinedText = AlertUnderlinedText;
72
+ export default Alert;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/native-ui",
3
- "version": "0.18.1-nightly.0",
3
+ "version": "0.18.2-nightly.0",
4
4
  "description": "Ledger Live - Mobile UI",
5
5
  "repository": {
6
6
  "type": "git",
@@ -46,8 +46,8 @@
46
46
  "rn-range-slider": "2.1.1",
47
47
  "styled-system": "^5.1.5",
48
48
  "victory-native": "^35.5.5",
49
- "@ledgerhq/crypto-icons-ui": "^0.2.2-nightly.0",
50
- "@ledgerhq/icons-ui": "^0.4.0-nightly.1",
49
+ "@ledgerhq/crypto-icons-ui": "^0.3.0-nightly.0",
50
+ "@ledgerhq/icons-ui": "^0.4.0",
51
51
  "@ledgerhq/ui-shared": "^0.2.0-nightly.0"
52
52
  },
53
53
  "peerDependencies": {
@@ -143,13 +143,12 @@
143
143
  "react-native-safe-area-context": "^4.5.0",
144
144
  "react-native-web": "~0.18.12",
145
145
  "regenerator-runtime": "^0.13.9",
146
- "rimraf": "^4.1.2",
146
+ "rimraf": "^4.4.1",
147
147
  "styled-components": "^5.3.3",
148
148
  "stylelint": "^14.9.1",
149
149
  "stylelint-config-recommended": "^8.0.0",
150
150
  "stylelint-config-styled-components": "^0.1.1",
151
151
  "stylelint-processor-styled-components": "^1.10.0",
152
- "typescript": "^4.9.5",
153
152
  "util": "^0.12.5",
154
153
  "victory": "^35.5.5",
155
154
  "webpack": "^5.76.1",