@pagopa/io-app-design-system 5.11.12 → 5.11.13
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.
- package/lib/commonjs/components/banner/BannerErrorState.js +3 -2
- package/lib/commonjs/components/banner/BannerErrorState.js.map +1 -1
- package/lib/commonjs/components/buttons/__test__/button.test.js +13 -9
- package/lib/commonjs/components/buttons/__test__/button.test.js.map +1 -1
- package/lib/commonjs/components/buttons/index.js +0 -33
- package/lib/commonjs/components/buttons/index.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemHeader.js +2 -1
- package/lib/commonjs/components/listitems/ListItemHeader.js.map +1 -1
- package/lib/commonjs/components/listitems/ListItemInfo.js +2 -1
- package/lib/commonjs/components/listitems/ListItemInfo.js.map +1 -1
- package/lib/commonjs/components/modules/ModuleCheckout.js +2 -1
- package/lib/commonjs/components/modules/ModuleCheckout.js.map +1 -1
- package/lib/commonjs/components/pictograms/Pictogram.js +2 -0
- package/lib/commonjs/components/pictograms/Pictogram.js.map +1 -1
- package/lib/commonjs/components/pictograms/svg/PictogramPinSecurity.js +64 -0
- package/lib/commonjs/components/pictograms/svg/PictogramPinSecurity.js.map +1 -0
- package/lib/commonjs/components/pictograms/svg/originals/PictogramPinSecurity.svg +1 -0
- package/lib/module/components/banner/BannerErrorState.js +3 -2
- package/lib/module/components/banner/BannerErrorState.js.map +1 -1
- package/lib/module/components/buttons/__test__/button.test.js +13 -9
- package/lib/module/components/buttons/__test__/button.test.js.map +1 -1
- package/lib/module/components/buttons/index.js +0 -3
- package/lib/module/components/buttons/index.js.map +1 -1
- package/lib/module/components/listitems/ListItemHeader.js +3 -2
- package/lib/module/components/listitems/ListItemHeader.js.map +1 -1
- package/lib/module/components/listitems/ListItemInfo.js +3 -2
- package/lib/module/components/listitems/ListItemInfo.js.map +1 -1
- package/lib/module/components/modules/ModuleCheckout.js +3 -2
- package/lib/module/components/modules/ModuleCheckout.js.map +1 -1
- package/lib/module/components/pictograms/Pictogram.js +2 -0
- package/lib/module/components/pictograms/Pictogram.js.map +1 -1
- package/lib/module/components/pictograms/svg/PictogramPinSecurity.js +59 -0
- package/lib/module/components/pictograms/svg/PictogramPinSecurity.js.map +1 -0
- package/lib/module/components/pictograms/svg/originals/PictogramPinSecurity.svg +1 -0
- package/lib/typescript/components/banner/BannerErrorState.d.ts.map +1 -1
- package/lib/typescript/components/buttons/index.d.ts +0 -3
- package/lib/typescript/components/buttons/index.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemHeader.d.ts +2 -2
- package/lib/typescript/components/listitems/ListItemHeader.d.ts.map +1 -1
- package/lib/typescript/components/listitems/ListItemInfo.d.ts +2 -2
- package/lib/typescript/components/listitems/ListItemInfo.d.ts.map +1 -1
- package/lib/typescript/components/pictograms/Pictogram.d.ts +1 -0
- package/lib/typescript/components/pictograms/Pictogram.d.ts.map +1 -1
- package/lib/typescript/components/pictograms/svg/PictogramPinSecurity.d.ts +5 -0
- package/lib/typescript/components/pictograms/svg/PictogramPinSecurity.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/banner/BannerErrorState.tsx +7 -2
- package/src/components/buttons/__test__/button.test.tsx +15 -13
- package/src/components/buttons/index.tsx +0 -3
- package/src/components/listitems/ListItemHeader.tsx +3 -3
- package/src/components/listitems/ListItemInfo.tsx +4 -3
- package/src/components/modules/ModuleCheckout.tsx +2 -2
- package/src/components/pictograms/Pictogram.tsx +2 -0
- package/src/components/pictograms/svg/PictogramPinSecurity.tsx +44 -0
- package/src/components/pictograms/svg/originals/PictogramPinSecurity.svg +1 -0
- package/lib/commonjs/components/buttons/ButtonLink.js +0 -157
- package/lib/commonjs/components/buttons/ButtonLink.js.map +0 -1
- package/lib/commonjs/components/buttons/ButtonOutline.js +0 -173
- package/lib/commonjs/components/buttons/ButtonOutline.js.map +0 -1
- package/lib/commonjs/components/buttons/ButtonSolid.js +0 -194
- package/lib/commonjs/components/buttons/ButtonSolid.js.map +0 -1
- package/lib/module/components/buttons/ButtonLink.js +0 -152
- package/lib/module/components/buttons/ButtonLink.js.map +0 -1
- package/lib/module/components/buttons/ButtonOutline.js +0 -168
- package/lib/module/components/buttons/ButtonOutline.js.map +0 -1
- package/lib/module/components/buttons/ButtonSolid.js +0 -188
- package/lib/module/components/buttons/ButtonSolid.js.map +0 -1
- package/lib/typescript/components/buttons/ButtonLink.d.ts +0 -36
- package/lib/typescript/components/buttons/ButtonLink.d.ts.map +0 -1
- package/lib/typescript/components/buttons/ButtonOutline.d.ts +0 -26
- package/lib/typescript/components/buttons/ButtonOutline.d.ts.map +0 -1
- package/lib/typescript/components/buttons/ButtonSolid.d.ts +0 -52
- package/lib/typescript/components/buttons/ButtonSolid.d.ts.map +0 -1
- package/src/components/buttons/ButtonLink.tsx +0 -222
- package/src/components/buttons/ButtonOutline.tsx +0 -261
- package/src/components/buttons/ButtonSolid.tsx +0 -285
|
@@ -2,12 +2,10 @@ import React from "react";
|
|
|
2
2
|
import { Alert } from "react-native";
|
|
3
3
|
import * as TestRenderer from "react-test-renderer";
|
|
4
4
|
import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
|
|
5
|
-
import ButtonLink from "../ButtonLink";
|
|
6
|
-
import ButtonOutline from "../ButtonOutline";
|
|
7
|
-
import ButtonSolid from "../ButtonSolid";
|
|
8
5
|
import IconButton from "../IconButton";
|
|
9
6
|
import IconButtonContained from "../IconButtonContained";
|
|
10
7
|
import IconButtonSolid from "../IconButtonSolid";
|
|
8
|
+
import { IOButton } from "../IOButton";
|
|
11
9
|
|
|
12
10
|
const onButtonPress = () => {
|
|
13
11
|
Alert.alert("Alert", "Action triggered");
|
|
@@ -16,29 +14,31 @@ const onButtonPress = () => {
|
|
|
16
14
|
describe("Test Buttons Components", () => {
|
|
17
15
|
it("ButtonSolid Snapshot", () => {
|
|
18
16
|
const buttonSolid = TestRenderer.create(
|
|
19
|
-
<
|
|
17
|
+
<IOButton
|
|
18
|
+
variant="solid"
|
|
20
19
|
label={"label"}
|
|
21
20
|
accessibilityLabel={"accessibilityLabel"}
|
|
22
21
|
onPress={onButtonPress}
|
|
23
|
-
|
|
22
|
+
/>
|
|
24
23
|
).toJSON();
|
|
25
24
|
expect(buttonSolid).toMatchSnapshot();
|
|
26
25
|
});
|
|
27
26
|
|
|
28
27
|
it("ButtonLink Snapshot", () => {
|
|
29
28
|
const buttonLink = TestRenderer.create(
|
|
30
|
-
<
|
|
29
|
+
<IOButton variant="link" label={"label"} onPress={onButtonPress} />
|
|
31
30
|
).toJSON();
|
|
32
31
|
expect(buttonLink).toMatchSnapshot();
|
|
33
32
|
});
|
|
34
33
|
|
|
35
34
|
it("ButtonOutline Snapshot", () => {
|
|
36
35
|
const buttonOutline = TestRenderer.create(
|
|
37
|
-
<
|
|
36
|
+
<IOButton
|
|
37
|
+
variant="outline"
|
|
38
38
|
label={"label"}
|
|
39
39
|
accessibilityLabel={"accessibilityLabel"}
|
|
40
40
|
onPress={onButtonPress}
|
|
41
|
-
|
|
41
|
+
/>
|
|
42
42
|
).toJSON();
|
|
43
43
|
expect(buttonOutline).toMatchSnapshot();
|
|
44
44
|
});
|
|
@@ -47,29 +47,31 @@ describe("Test Buttons Components", () => {
|
|
|
47
47
|
describe("Test Buttons Components - Experimental Enabled", () => {
|
|
48
48
|
it("ButtonSolid Snapshot", () => {
|
|
49
49
|
const buttonSolid = TestRendererWithExperimentalEnabledContextProvider(
|
|
50
|
-
<
|
|
50
|
+
<IOButton
|
|
51
|
+
variant="solid"
|
|
51
52
|
label={"label"}
|
|
52
53
|
accessibilityLabel={"accessibilityLabel"}
|
|
53
54
|
onPress={onButtonPress}
|
|
54
|
-
|
|
55
|
+
/>
|
|
55
56
|
).toJSON();
|
|
56
57
|
expect(buttonSolid).toMatchSnapshot();
|
|
57
58
|
});
|
|
58
59
|
|
|
59
60
|
it("ButtonLink Snapshot", () => {
|
|
60
61
|
const buttonLink = TestRendererWithExperimentalEnabledContextProvider(
|
|
61
|
-
<
|
|
62
|
+
<IOButton variant="link" label={"label"} onPress={onButtonPress} />
|
|
62
63
|
).toJSON();
|
|
63
64
|
expect(buttonLink).toMatchSnapshot();
|
|
64
65
|
});
|
|
65
66
|
|
|
66
67
|
it("ButtonOutline Snapshot", () => {
|
|
67
68
|
const buttonOutline = TestRendererWithExperimentalEnabledContextProvider(
|
|
68
|
-
<
|
|
69
|
+
<IOButton
|
|
70
|
+
variant="outline"
|
|
69
71
|
label={"label"}
|
|
70
72
|
accessibilityLabel={"accessibilityLabel"}
|
|
71
73
|
onPress={onButtonPress}
|
|
72
|
-
|
|
74
|
+
/>
|
|
73
75
|
).toJSON();
|
|
74
76
|
expect(buttonOutline).toMatchSnapshot();
|
|
75
77
|
});
|
|
@@ -11,14 +11,14 @@ import {
|
|
|
11
11
|
import { useIOFontDynamicScale } from "../../utils/accessibility";
|
|
12
12
|
import { WithTestID } from "../../utils/types";
|
|
13
13
|
import { Badge } from "../badge";
|
|
14
|
-
import {
|
|
14
|
+
import { IOButton, IOButtonLinkSpecificProps, IconButton } from "../buttons";
|
|
15
15
|
import { IOIcons, Icon } from "../icons";
|
|
16
16
|
import { VSpacer } from "../layout";
|
|
17
17
|
import { BodySmall, H6 } from "../typography";
|
|
18
18
|
|
|
19
19
|
type ButtonLinkActionProps = {
|
|
20
20
|
type: "buttonLink";
|
|
21
|
-
componentProps:
|
|
21
|
+
componentProps: Omit<IOButtonLinkSpecificProps, "variant">;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
type IconButtonActionProps = {
|
|
@@ -90,7 +90,7 @@ export const ListItemHeader = ({
|
|
|
90
90
|
|
|
91
91
|
switch (type) {
|
|
92
92
|
case "buttonLink":
|
|
93
|
-
return <
|
|
93
|
+
return <IOButton variant="link" {...componentProps} />;
|
|
94
94
|
case "iconButton":
|
|
95
95
|
return <IconButton {...componentProps} />;
|
|
96
96
|
case "badge":
|
|
@@ -7,7 +7,7 @@ import { useListItemAnimation } from "../../hooks";
|
|
|
7
7
|
import { useIOFontDynamicScale } from "../../utils/accessibility";
|
|
8
8
|
import { WithTestID } from "../../utils/types";
|
|
9
9
|
import { Badge } from "../badge";
|
|
10
|
-
import {
|
|
10
|
+
import { IOButton, IOButtonLinkSpecificProps, IconButton } from "../buttons";
|
|
11
11
|
import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
|
|
12
12
|
import { IOIconSizeScale, IOIcons, Icon } from "../icons";
|
|
13
13
|
import { IOLogoPaymentType } from "../logos";
|
|
@@ -16,7 +16,7 @@ import { VSpacer } from "../layout";
|
|
|
16
16
|
|
|
17
17
|
type ButtonLinkActionProps = {
|
|
18
18
|
type: "buttonLink";
|
|
19
|
-
componentProps:
|
|
19
|
+
componentProps: Omit<IOButtonLinkSpecificProps, "variant">;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
type IconButtonActionProps = {
|
|
@@ -144,7 +144,8 @@ export const ListItemInfo = ({
|
|
|
144
144
|
}`;
|
|
145
145
|
|
|
146
146
|
return (
|
|
147
|
-
<
|
|
147
|
+
<IOButton
|
|
148
|
+
variant="link"
|
|
148
149
|
{...componentProps}
|
|
149
150
|
accessibilityLabel={buttonLinkAccessibilityLabel}
|
|
150
151
|
/>
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
} from "react-native";
|
|
9
9
|
import { useIOTheme } from "../../context";
|
|
10
10
|
import { IOSelectionListItemVisualParams, IOSpacingScale } from "../../core";
|
|
11
|
-
import {
|
|
11
|
+
import { IOButton } from "../buttons";
|
|
12
12
|
import { HStack, VStack } from "../layout";
|
|
13
13
|
import { IOLogoPaymentType, LogoPayment } from "../logos";
|
|
14
14
|
import { IOSkeleton } from "../skeleton";
|
|
@@ -94,7 +94,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
|
|
|
94
94
|
accessibilityElementsHidden
|
|
95
95
|
importantForAccessibility="no-hide-descendants"
|
|
96
96
|
>
|
|
97
|
-
<
|
|
97
|
+
<IOButton variant="link" label={ctaText} onPress={() => null} />
|
|
98
98
|
</View>
|
|
99
99
|
</HStack>
|
|
100
100
|
</PressableModuleBase>
|
|
@@ -119,6 +119,7 @@ import PictogramStar from "./svg/PictogramStar";
|
|
|
119
119
|
import PictogramTiming from "./svg/PictogramTiming";
|
|
120
120
|
import PictogramWalletDoc from "./svg/PictogramWalletDoc";
|
|
121
121
|
import { SVGPictogramProps } from "./types";
|
|
122
|
+
import PictogramPinSecurity from "./svg/PictogramPinSecurity";
|
|
122
123
|
|
|
123
124
|
export const IOPictograms = {
|
|
124
125
|
empty: PictogramEmpty,
|
|
@@ -182,6 +183,7 @@ export const IOPictograms = {
|
|
|
182
183
|
meterLimit: PictogramMeterLimit,
|
|
183
184
|
savingMoney: PictogramSavingMoney,
|
|
184
185
|
sendAccess: PictogramSendAccess,
|
|
186
|
+
pinSecurity: PictogramPinSecurity,
|
|
185
187
|
// Start Objects Pictogram
|
|
186
188
|
ibanCard: PictogramObjIbanCard,
|
|
187
189
|
followMessage: PictogramObjFollowMessage,
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Svg, Path, Circle, Rect } from "react-native-svg";
|
|
3
|
+
import { SVGPictogramProps } from "../types";
|
|
4
|
+
|
|
5
|
+
const PictogramPinSecurity = ({
|
|
6
|
+
size,
|
|
7
|
+
colorValues,
|
|
8
|
+
...props
|
|
9
|
+
}: SVGPictogramProps) => (
|
|
10
|
+
<Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
|
|
11
|
+
<Path
|
|
12
|
+
fill={colorValues.main}
|
|
13
|
+
d="M154 155a27 27 0 1 1 0 54H45a27 27 0 1 1 0-54h81v6l3 3 8-2 6-7z"
|
|
14
|
+
/>
|
|
15
|
+
<Circle cx="44" cy="181" r="14" fill={colorValues.secondary} />
|
|
16
|
+
<Circle cx="81" cy="181" r="14" fill={colorValues.secondary} />
|
|
17
|
+
<Circle cx="118" cy="181" r="14" fill={colorValues.secondary} />
|
|
18
|
+
<Circle cx="155" cy="181" r="14" fill={colorValues.secondary} />
|
|
19
|
+
<Path
|
|
20
|
+
fill={colorValues.main}
|
|
21
|
+
d="M115 56a17 17 0 0 0-35 0v16H68V56a29 29 0 0 1 59 0v16h-12z"
|
|
22
|
+
/>
|
|
23
|
+
<Path
|
|
24
|
+
fill={colorValues.main}
|
|
25
|
+
d="M120 68c20 0 37 17 37 38l-10 3-9 7-1 5 6 7-9 12q-6 3-14 3H77a37 37 0 1 1 0-75z"
|
|
26
|
+
/>
|
|
27
|
+
<Rect
|
|
28
|
+
width="13"
|
|
29
|
+
height="29"
|
|
30
|
+
x="90"
|
|
31
|
+
y="90"
|
|
32
|
+
fill={colorValues.secondary}
|
|
33
|
+
rx="6.5"
|
|
34
|
+
/>
|
|
35
|
+
<Path
|
|
36
|
+
fill={colorValues.hands}
|
|
37
|
+
fillRule="evenodd"
|
|
38
|
+
d="M206 74c-1 0-15 17-50 43-2 2-25 24-29 40q-1 4 1 4h4c7-5 17-15 21-35l4 1-4 15q-1 3 3 7l3 1c-1-8 6-16 6-16l3 2s-6 8-5 14q1 4 6 7 13 4 16-2 2-4-3-9l-7 3-1-4s45-13 61-44l4 2q-6 15-39 35l-14 7q5 6 3 12-1 3-6 5-6 2-16-2-5-2-7-7-4 1-7-1l-3-5a51 51 0 0 1-17 18q-4 2-7-1-5-2-3-8 6-15 17-28-4-1-6-6-1-3 2-7c7-9 37-17 38-17q29-26 28-27zm-40 30c-10 4-23 9-27 13l-1 4q1 3 5 3l10-10z"
|
|
39
|
+
clipRule="evenodd"
|
|
40
|
+
/>
|
|
41
|
+
</Svg>
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
export default PictogramPinSecurity;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 240 240"><g clip-path="url(#a)"><path fill="#aaeeef" d="M154 155a27 27 0 1 1 0 54H45a27 27 0 1 1 0-54h81v6l3 3 8-2 6-7z"/><circle cx="44" cy="181" r="14" fill="#00c5ca"/><circle cx="81" cy="181" r="14" fill="#00c5ca"/><circle cx="118" cy="181" r="14" fill="#00c5ca"/><circle cx="155" cy="181" r="14" fill="#00c5ca"/><path fill="#aaeeef" d="M115 56a17 17 0 0 0-35 0v16H68V56a29 29 0 0 1 59 0v16h-12z"/><path fill="#aaeeef" d="M120 68c20 0 37 17 37 38l-10 3-9 7-1 5 6 7-9 12q-6 3-14 3H77a37 37 0 1 1 0-75z"/><rect width="13" height="29" x="90" y="90" fill="#00c5ca" rx="6.5"/><path fill="#0b3ee3" fill-rule="evenodd" d="M206 74c-1 0-15 17-50 43-2 2-25 24-29 40q-1 4 1 4h4c7-5 17-15 21-35l4 1-4 15q-1 3 3 7l3 1c-1-8 6-16 6-16l3 2s-6 8-5 14q1 4 6 7 13 4 16-2 2-4-3-9l-7 3-1-4s45-13 61-44l4 2q-6 15-39 35l-14 7q5 6 3 12-1 3-6 5-6 2-16-2-5-2-7-7-4 1-7-1l-3-5a51 51 0 0 1-17 18q-4 2-7-1-5-2-3-8 6-15 17-28-4-1-6-6-1-3 2-7c7-9 37-17 38-17q29-26 28-27zm-40 30c-10 4-23 9-27 13l-1 4q1 3 5 3l10-10z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h240v240H0z"/></clipPath></defs></svg>
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.ButtonLink = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
-
var _context = require("../../context");
|
|
11
|
-
var _core = require("../../core");
|
|
12
|
-
var _hooks = require("../../hooks");
|
|
13
|
-
var _icons = require("../icons");
|
|
14
|
-
var _typography = require("../typography");
|
|
15
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
|
-
const DISABLED_OPACITY = 0.5;
|
|
18
|
-
const ICON_MARGIN = 8;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* @deprecated Use `Button` with variant `link` instead
|
|
22
|
-
*/
|
|
23
|
-
const ButtonLink = exports.ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
24
|
-
color = "primary",
|
|
25
|
-
label,
|
|
26
|
-
disabled = false,
|
|
27
|
-
icon,
|
|
28
|
-
iconPosition = "start",
|
|
29
|
-
onPress,
|
|
30
|
-
accessibilityLabel,
|
|
31
|
-
accessibilityRole = "button",
|
|
32
|
-
accessibilityHint,
|
|
33
|
-
numberOfLines = 1,
|
|
34
|
-
textAlign = "auto",
|
|
35
|
-
testID
|
|
36
|
-
}, ref) => {
|
|
37
|
-
const theme = (0, _context.useIOTheme)();
|
|
38
|
-
const {
|
|
39
|
-
newTypefaceEnabled
|
|
40
|
-
} = (0, _context.useIONewTypeface)();
|
|
41
|
-
const {
|
|
42
|
-
progress,
|
|
43
|
-
onPressIn,
|
|
44
|
-
onPressOut,
|
|
45
|
-
scaleAnimatedStyle
|
|
46
|
-
} = (0, _hooks.useScaleAnimation)();
|
|
47
|
-
const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
|
|
48
|
-
const mapColorStates = {
|
|
49
|
-
// Primary button
|
|
50
|
-
primary: {
|
|
51
|
-
foreground: {
|
|
52
|
-
default: _core.IOColors[theme["interactiveElem-default"]],
|
|
53
|
-
pressed: _core.IOColors[theme["interactiveElem-pressed"]],
|
|
54
|
-
disabled: (0, _core.hexToRgba)(_core.IOColors[theme["interactiveElem-default"]], 0.85)
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
contrast: {
|
|
58
|
-
foreground: {
|
|
59
|
-
default: _core.IOColors.white,
|
|
60
|
-
pressed: (0, _core.hexToRgba)(_core.IOColors.white, 0.85),
|
|
61
|
-
disabled: (0, _core.hexToRgba)(_core.IOColors.white, 0.5)
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
const AnimatedIOText = _reactNativeReanimated.default.createAnimatedComponent(_typography.IOText);
|
|
66
|
-
const pressedColorLabelAnimationStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
67
|
-
// Link color states to the pressed states
|
|
68
|
-
|
|
69
|
-
const labelColor = (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [mapColorStates[color].foreground.default, mapColorStates[color].foreground.pressed]);
|
|
70
|
-
return {
|
|
71
|
-
color: labelColor
|
|
72
|
-
};
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
// Animate the <Icon> color prop
|
|
76
|
-
const pressedColorIconAnimationStyle = (0, _reactNativeReanimated.useAnimatedProps)(() => {
|
|
77
|
-
const iconColor = (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [mapColorStates[color].foreground.default, mapColorStates[color].foreground.pressed]);
|
|
78
|
-
return {
|
|
79
|
-
color: iconColor
|
|
80
|
-
};
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
// Icon size
|
|
84
|
-
const iconSize = 24;
|
|
85
|
-
const iconMargin = 8;
|
|
86
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
87
|
-
ref: ref,
|
|
88
|
-
accessibilityLabel: accessibilityLabel || label,
|
|
89
|
-
accessibilityHint: accessibilityHint,
|
|
90
|
-
accessibilityRole: accessibilityRole,
|
|
91
|
-
accessibilityState: {
|
|
92
|
-
disabled
|
|
93
|
-
},
|
|
94
|
-
testID: testID,
|
|
95
|
-
onPress: onPress,
|
|
96
|
-
onPressIn: onPressIn,
|
|
97
|
-
onPressOut: onPressOut,
|
|
98
|
-
onTouchEnd: onPressOut,
|
|
99
|
-
accessible: true,
|
|
100
|
-
disabled: disabled,
|
|
101
|
-
hitSlop: {
|
|
102
|
-
top: 14,
|
|
103
|
-
right: 24,
|
|
104
|
-
bottom: 14,
|
|
105
|
-
left: 24
|
|
106
|
-
},
|
|
107
|
-
style: {
|
|
108
|
-
alignSelf: "flex-start"
|
|
109
|
-
},
|
|
110
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
111
|
-
style: [_core.IOButtonStyles.buttonLink, iconPosition === "end" && {
|
|
112
|
-
flexDirection: "row-reverse"
|
|
113
|
-
}, {
|
|
114
|
-
columnGap: iconMargin
|
|
115
|
-
}, disabled ? {
|
|
116
|
-
opacity: DISABLED_OPACITY
|
|
117
|
-
} : {}, {
|
|
118
|
-
columnGap: ICON_MARGIN
|
|
119
|
-
},
|
|
120
|
-
/* Prevent Reanimated from overriding background colors
|
|
121
|
-
if button is disabled */
|
|
122
|
-
!disabled && !reducedMotion && scaleAnimatedStyle],
|
|
123
|
-
children: [icon && (!disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIconWithColorTransition, {
|
|
124
|
-
allowFontScaling: true,
|
|
125
|
-
name: icon,
|
|
126
|
-
animatedProps: pressedColorIconAnimationStyle,
|
|
127
|
-
color: mapColorStates[color]?.foreground?.default,
|
|
128
|
-
size: iconSize
|
|
129
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIcon, {
|
|
130
|
-
allowFontScaling: true,
|
|
131
|
-
name: icon,
|
|
132
|
-
color: mapColorStates[color]?.foreground?.disabled,
|
|
133
|
-
size: iconSize
|
|
134
|
-
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedIOText, {
|
|
135
|
-
accessible: false,
|
|
136
|
-
accessibilityElementsHidden: true,
|
|
137
|
-
importantForAccessibility: "no-hide-descendants",
|
|
138
|
-
font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
|
|
139
|
-
weight: "Semibold",
|
|
140
|
-
size: _typography.buttonTextFontSize,
|
|
141
|
-
lineHeight: _typography.buttonTextLineHeight,
|
|
142
|
-
style: [disabled ? {
|
|
143
|
-
color: mapColorStates[color]?.foreground?.disabled
|
|
144
|
-
} : {
|
|
145
|
-
...pressedColorLabelAnimationStyle
|
|
146
|
-
}, {
|
|
147
|
-
textAlign
|
|
148
|
-
}],
|
|
149
|
-
numberOfLines: numberOfLines,
|
|
150
|
-
ellipsizeMode: "tail",
|
|
151
|
-
children: label
|
|
152
|
-
})]
|
|
153
|
-
})
|
|
154
|
-
});
|
|
155
|
-
});
|
|
156
|
-
var _default = exports.default = ButtonLink;
|
|
157
|
-
//# sourceMappingURL=ButtonLink.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_context","_core","_hooks","_icons","_typography","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DISABLED_OPACITY","ICON_MARGIN","ButtonLink","exports","forwardRef","color","label","disabled","icon","iconPosition","onPress","accessibilityLabel","accessibilityRole","accessibilityHint","numberOfLines","textAlign","testID","ref","theme","useIOTheme","newTypefaceEnabled","useIONewTypeface","progress","onPressIn","onPressOut","scaleAnimatedStyle","useScaleAnimation","reducedMotion","useReducedMotion","mapColorStates","primary","foreground","IOColors","pressed","hexToRgba","contrast","white","AnimatedIOText","Animated","createAnimatedComponent","IOText","pressedColorLabelAnimationStyle","useAnimatedStyle","labelColor","interpolateColor","value","pressedColorIconAnimationStyle","useAnimatedProps","iconColor","iconSize","iconMargin","jsx","Pressable","accessibilityState","onTouchEnd","accessible","hitSlop","top","right","bottom","left","style","alignSelf","children","jsxs","View","IOButtonStyles","buttonLink","flexDirection","columnGap","opacity","AnimatedIconWithColorTransition","allowFontScaling","name","animatedProps","size","AnimatedIcon","accessibilityElementsHidden","importantForAccessibility","font","weight","buttonTextFontSize","lineHeight","buttonTextLineHeight","ellipsizeMode","_default"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonLink.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.ButtonOutline = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
-
var _context = require("../../context");
|
|
11
|
-
var _core = require("../../core/");
|
|
12
|
-
var _hooks = require("../../hooks");
|
|
13
|
-
var _icons = require("../icons");
|
|
14
|
-
var _typography = require("../typography");
|
|
15
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
|
-
// Icon size
|
|
18
|
-
const iconSize = 20;
|
|
19
|
-
const DISABLED_OPACITY = 0.5;
|
|
20
|
-
const ICON_MARGIN = 8;
|
|
21
|
-
const IOButtonStylesLocal = _reactNative.StyleSheet.create({
|
|
22
|
-
buttonWithBorder: {
|
|
23
|
-
borderWidth: 2
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* @deprecated Use `Button` with variant `outline` instead
|
|
29
|
-
*/
|
|
30
|
-
const ButtonOutline = exports.ButtonOutline = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
31
|
-
color = "primary",
|
|
32
|
-
label,
|
|
33
|
-
fullWidth = false,
|
|
34
|
-
disabled = false,
|
|
35
|
-
icon,
|
|
36
|
-
iconPosition = "start",
|
|
37
|
-
onPress,
|
|
38
|
-
accessibilityLabel,
|
|
39
|
-
accessibilityHint,
|
|
40
|
-
testID
|
|
41
|
-
}, ref) => {
|
|
42
|
-
const theme = (0, _context.useIOTheme)();
|
|
43
|
-
const {
|
|
44
|
-
newTypefaceEnabled
|
|
45
|
-
} = (0, _context.useIONewTypeface)();
|
|
46
|
-
const {
|
|
47
|
-
progress,
|
|
48
|
-
onPressIn,
|
|
49
|
-
onPressOut,
|
|
50
|
-
scaleAnimatedStyle
|
|
51
|
-
} = (0, _hooks.useScaleAnimation)();
|
|
52
|
-
const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
|
|
53
|
-
const AnimatedIOText = _reactNativeReanimated.default.createAnimatedComponent(_typography.IOText);
|
|
54
|
-
const mapColorStates = {
|
|
55
|
-
// Primary button
|
|
56
|
-
primary: {
|
|
57
|
-
background: {
|
|
58
|
-
default: (0, _core.hexToRgba)(_core.IOColors[theme["interactiveElem-pressed"]], 0),
|
|
59
|
-
pressed: (0, _core.hexToRgba)(_core.IOColors[theme["interactiveElem-pressed"]], 0.1),
|
|
60
|
-
disabled: "transparent"
|
|
61
|
-
},
|
|
62
|
-
foreground: {
|
|
63
|
-
default: _core.IOColors[theme["interactiveElem-default"]],
|
|
64
|
-
pressed: _core.IOColors[theme["interactiveElem-pressed"]],
|
|
65
|
-
disabled: _core.IOColors[theme["interactiveOutline-disabled"]]
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
// Contrast button
|
|
69
|
-
contrast: {
|
|
70
|
-
background: {
|
|
71
|
-
default: (0, _core.hexToRgba)(_core.IOColors["blueIO-600"], 0),
|
|
72
|
-
pressed: (0, _core.hexToRgba)(_core.IOColors["blueIO-600"], 0.5),
|
|
73
|
-
disabled: "transparent"
|
|
74
|
-
},
|
|
75
|
-
foreground: {
|
|
76
|
-
default: _core.IOColors.white,
|
|
77
|
-
pressed: _core.IOColors.white,
|
|
78
|
-
disabled: _core.IOColors["blueIO-200"]
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
// Interpolate animation values from `isPressed` values
|
|
84
|
-
const pressedAnimationStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
85
|
-
// Link color states to the pressed states
|
|
86
|
-
const backgroundColor = (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [mapColorStates[color].background.default, mapColorStates[color].background.pressed]);
|
|
87
|
-
const borderColor = (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [mapColorStates[color].foreground.default, mapColorStates[color].foreground.pressed]);
|
|
88
|
-
return {
|
|
89
|
-
borderColor,
|
|
90
|
-
backgroundColor
|
|
91
|
-
};
|
|
92
|
-
});
|
|
93
|
-
const pressedColorLabelAnimationStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
94
|
-
color: (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [mapColorStates[color].foreground.default, mapColorStates[color].foreground.pressed])
|
|
95
|
-
}));
|
|
96
|
-
|
|
97
|
-
// Animate the <Icon> color prop
|
|
98
|
-
const pressedColorIconAnimationStyle = (0, _reactNativeReanimated.useAnimatedProps)(() => ({
|
|
99
|
-
color: (0, _reactNativeReanimated.interpolateColor)(progress.value, [0, 1], [mapColorStates[color].foreground.default, mapColorStates[color].foreground.pressed])
|
|
100
|
-
}));
|
|
101
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
102
|
-
ref: ref,
|
|
103
|
-
accessible: true,
|
|
104
|
-
accessibilityLabel: accessibilityLabel || label,
|
|
105
|
-
accessibilityHint: accessibilityHint,
|
|
106
|
-
accessibilityRole: "button",
|
|
107
|
-
accessibilityState: {
|
|
108
|
-
disabled: disabled || false
|
|
109
|
-
},
|
|
110
|
-
onPress: onPress,
|
|
111
|
-
onPressIn: onPressIn,
|
|
112
|
-
onPressOut: onPressOut,
|
|
113
|
-
disabled: disabled,
|
|
114
|
-
style: fullWidth ? {
|
|
115
|
-
flexShrink: 0,
|
|
116
|
-
alignSelf: "stretch"
|
|
117
|
-
} : {
|
|
118
|
-
flexShrink: 1,
|
|
119
|
-
alignSelf: "auto"
|
|
120
|
-
},
|
|
121
|
-
testID: testID,
|
|
122
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
123
|
-
style: [_core.IOButtonStyles.button, _core.IOButtonStyles.buttonSizeDefault, IOButtonStylesLocal.buttonWithBorder, fullWidth && {
|
|
124
|
-
paddingHorizontal: 16
|
|
125
|
-
}, {
|
|
126
|
-
columnGap: ICON_MARGIN
|
|
127
|
-
}, iconPosition === "end" && {
|
|
128
|
-
flexDirection: "row-reverse"
|
|
129
|
-
}, disabled ? {
|
|
130
|
-
backgroundColor: mapColorStates[color]?.background?.disabled,
|
|
131
|
-
borderColor: mapColorStates[color]?.foreground?.disabled,
|
|
132
|
-
opacity: DISABLED_OPACITY
|
|
133
|
-
} : {
|
|
134
|
-
backgroundColor: mapColorStates[color]?.background?.default,
|
|
135
|
-
borderColor: mapColorStates[color]?.foreground.default
|
|
136
|
-
},
|
|
137
|
-
/* Prevent Reanimated from overriding background colors
|
|
138
|
-
if button is disabled */
|
|
139
|
-
!reducedMotion && !disabled && scaleAnimatedStyle, !disabled && pressedAnimationStyle],
|
|
140
|
-
children: [icon && (!disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIconWithColorTransition, {
|
|
141
|
-
allowFontScaling: true,
|
|
142
|
-
name: icon,
|
|
143
|
-
animatedProps: pressedColorIconAnimationStyle,
|
|
144
|
-
color: mapColorStates[color]?.foreground?.default,
|
|
145
|
-
size: iconSize
|
|
146
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIcon, {
|
|
147
|
-
allowFontScaling: true,
|
|
148
|
-
name: icon,
|
|
149
|
-
color: mapColorStates[color]?.foreground?.disabled,
|
|
150
|
-
size: iconSize
|
|
151
|
-
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedIOText, {
|
|
152
|
-
font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
|
|
153
|
-
weight: "Semibold",
|
|
154
|
-
size: _typography.buttonTextFontSize,
|
|
155
|
-
accessible: false,
|
|
156
|
-
accessibilityElementsHidden: true,
|
|
157
|
-
importantForAccessibility: "no-hide-descendants",
|
|
158
|
-
numberOfLines: 1,
|
|
159
|
-
ellipsizeMode: "tail",
|
|
160
|
-
style: [{
|
|
161
|
-
alignSelf: "center"
|
|
162
|
-
}, disabled ? {
|
|
163
|
-
color: mapColorStates[color]?.foreground?.disabled
|
|
164
|
-
} : {
|
|
165
|
-
...pressedColorLabelAnimationStyle
|
|
166
|
-
}],
|
|
167
|
-
children: label
|
|
168
|
-
})]
|
|
169
|
-
})
|
|
170
|
-
});
|
|
171
|
-
});
|
|
172
|
-
var _default = exports.default = ButtonOutline;
|
|
173
|
-
//# sourceMappingURL=ButtonOutline.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_context","_core","_hooks","_icons","_typography","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","iconSize","DISABLED_OPACITY","ICON_MARGIN","IOButtonStylesLocal","StyleSheet","create","buttonWithBorder","borderWidth","ButtonOutline","exports","forwardRef","color","label","fullWidth","disabled","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","testID","ref","theme","useIOTheme","newTypefaceEnabled","useIONewTypeface","progress","onPressIn","onPressOut","scaleAnimatedStyle","useScaleAnimation","reducedMotion","useReducedMotion","AnimatedIOText","Animated","createAnimatedComponent","IOText","mapColorStates","primary","background","hexToRgba","IOColors","pressed","foreground","contrast","white","pressedAnimationStyle","useAnimatedStyle","backgroundColor","interpolateColor","value","borderColor","pressedColorLabelAnimationStyle","pressedColorIconAnimationStyle","useAnimatedProps","jsx","Pressable","accessible","accessibilityRole","accessibilityState","style","flexShrink","alignSelf","children","jsxs","View","IOButtonStyles","button","buttonSizeDefault","paddingHorizontal","columnGap","flexDirection","opacity","AnimatedIconWithColorTransition","allowFontScaling","name","animatedProps","size","AnimatedIcon","font","weight","buttonTextFontSize","accessibilityElementsHidden","importantForAccessibility","numberOfLines","ellipsizeMode","_default"],"sourceRoot":"../../../../src","sources":["components/buttons/ButtonOutline.tsx"],"mappings":"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","ignoreList":[]}
|