@trilogy-ds/react 0.0.1-beta.9 → 0.0.3-beta-v4

package/lib/components/button/Button.native.js

@@ -1,38 +1,12 @@
-import React from 'react';
-import { ActivityIndicator, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { View } from '../view';
-import { getLoadingClassName, getVariantClassName, getVariantStyle } from '../../objects';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { Icon, IconSize } from '../icon';
-import { ButtonColor } from './ButtonEnum';
-import { ComponentName } from '../enumsComponentsName';
-/*
- * Helpers (reduce complexity of component to meet sonarqube requirements)
- */
-const findBackgroundColor = ({ disabled, loading, variant }) => {
-    return ((disabled && variant === ButtonColor.TERTIARY && getColorStyle(TrilogyColor.WHITE)) ||
-        (disabled && getColorStyle(TrilogyColor.GREY_DISABLED)) ||
-        (!!loading && variant === ButtonColor.TERTIARY && getColorStyle(TrilogyColor.WHITE)) ||
-        (typeof loading === 'string' && getLoadingClassName(loading) === 'loading' && '#7F7F7F') ||
-        (typeof loading === 'boolean' && loading && '#7F7F7F') ||
-        (variant && !disabled && getVariantStyle(variant)) ||
-        (variant === ButtonColor.SECONDARY && getColorStyle(TrilogyColor.SECONDARY)) ||
-        getColorStyle(TrilogyColor.PRIMARY));
-};
-const findTextColor = ({ variant }) => {
-    return ((variant && getVariantClassName(variant) === 'secondary' && getColorStyle(TrilogyColor.WHITE)) ||
-        (variant && getVariantClassName(variant) === 'tertiary' && getColorStyle(TrilogyColor.SECONDARY)) ||
-        getColorStyle(TrilogyColor.WHITE));
-};
-const findBorderWidth = ({ variant }) => {
-    return variant === ButtonColor.TERTIARY ? 2 : 0;
-};
-const findBorderColor = ({ disabled, variant, loading }) => {
-    return ((disabled && variant === ButtonColor.TERTIARY && getColorStyle(TrilogyColor.GREY_DISABLED)) ||
-        (!disabled && !!loading && variant === ButtonColor.TERTIARY && getColorStyle(TrilogyColor.GREY_DISABLED)) ||
-        (!disabled && variant === ButtonColor.TERTIARY && getColorStyle(TrilogyColor.BG_INFO)) ||
-        getColorStyle(TrilogyColor.WHITE));
-};
+import { __assign, __rest } from "tslib";
+import * as React from "react";
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, } from "react-native";
+import { TrilogyColor, getButtonColorStyle, getColorStyle, getLoadingClassName, getVariantClassName } from "../../objects/facets";
+import { ComponentName } from "../../components/enumsComponentsName";
+import { Icon, IconSize } from "../../components/icon";
+import { View } from "../../components/view";
+import { ButtonVariant } from "./ButtonEnum";
+import { getTypographyBoldStyle, TypographyBold } from "../../objects";
 /**
  * Button Native Component
  * @param loading {boolean} Loading button
@@ -45,103 +19,163 @@ const findBorderColor = ({ disabled, variant, loading }) => {
  * @param accessibilityLabel {string}
  * @param iconName {IconName} If Icon, Button + Icon && Button IconName
  */
-const Button = ({ children, variant, onClick, disabled, loading, fullwidth, testId, accessibilityLabel, iconName, ...others }) => {
-    const styles = StyleSheet.create({
+var Button = function (_a) {
+    var children = _a.children, variant = _a.variant, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, fullwidth = _a.fullwidth, testId = _a.testId, accessibilityLabel = _a.accessibilityLabel, iconName = _a.iconName, others = __rest(_a, ["children", "variant", "onClick", "disabled", "loading", "fullwidth", "testId", "accessibilityLabel", "iconName"]);
+    var findBackgroundColor = function (_a) {
+        var disabled = _a.disabled, loading = _a.loading, variant = _a.variant;
+        return ((disabled && getColorStyle(TrilogyColor.NEUTRAL_FADE)) ||
+            (typeof loading === "string" &&
+                getLoadingClassName(loading) === "loading" &&
+                getButtonColorStyle(TrilogyColor.BACKGROUND)) ||
+            (typeof loading === "boolean" &&
+                loading &&
+                getColorStyle(TrilogyColor.NEUTRAL)) ||
+            (variant === ButtonVariant.PRIMARY && getColorStyle(TrilogyColor.MAIN)) ||
+            (variant === ButtonVariant.SECONDARY &&
+                getColorStyle(TrilogyColor.MAIN_FADE)) ||
+            (variant === ButtonVariant.CONVERSION &&
+                getColorStyle(TrilogyColor.ACCENT)) ||
+            (variant === ButtonVariant.GHOST && getColorStyle(TrilogyColor.BACKGROUND)) ||
+            getColorStyle(TrilogyColor.MAIN));
+    };
+    var findTextColor = function (_a) {
+        var variant = _a.variant;
+        return ((variant &&
+            getVariantClassName(variant) === "secondary" &&
+            getColorStyle(TrilogyColor.FONT)) ||
+            (variant &&
+                getVariantClassName(variant) === "accent" &&
+                getColorStyle(TrilogyColor.BACKGROUND)) ||
+            (variant &&
+                getVariantClassName(variant) === "primary" &&
+                getColorStyle(TrilogyColor.BACKGROUND)) ||
+            (variant &&
+                getVariantClassName(variant) === "ghost" &&
+                getColorStyle(TrilogyColor.FONT)) ||
+            getColorStyle(TrilogyColor.BACKGROUND));
+    };
+    var findBorderColor = function (_a) {
+        var disabled = _a.disabled, variant = _a.variant, loading = _a.loading;
+        return ((disabled &&
+            variant === ButtonVariant.PRIMARY &&
+            getColorStyle(TrilogyColor.DISABLED)) ||
+            (!disabled &&
+                !!loading &&
+                variant === ButtonVariant.PRIMARY &&
+                getColorStyle(TrilogyColor.DISABLED)) ||
+            (!disabled &&
+                variant === ButtonVariant.PRIMARY &&
+                getColorStyle(TrilogyColor.INFO_FADE)) ||
+            getColorStyle(TrilogyColor.BACKGROUND));
+    };
+    var styles = StyleSheet.create({
         button: {
-            maxWidth: '100%',
-            minWidth: '100%',
-            paddingTop: variant === ButtonColor.TERTIARY ? 13 : 15,
-            paddingBottom: variant === ButtonColor.TERTIARY ? 13 : 15,
-            paddingLeft: variant === ButtonColor.TERTIARY ? 13 : 15,
-            paddingRight: variant === ButtonColor.TERTIARY ? 13 : 15,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: findBackgroundColor({ disabled, loading, variant }),
+            maxWidth: "100%",
+            minWidth: "100%",
+            paddingTop: variant === ButtonVariant.PRIMARY ? 13 : 15,
+            paddingBottom: variant === ButtonVariant.PRIMARY ? 13 : 15,
+            paddingLeft: variant === ButtonVariant.PRIMARY ? 13 : 15,
+            paddingRight: variant === ButtonVariant.PRIMARY ? 13 : 15,
+            justifyContent: "center",
+            alignItems: "center",
+            backgroundColor: findBackgroundColor({ disabled: disabled, loading: loading, variant: variant }),
             borderRadius: 4,
             minHeight: 45,
-            height: loading ? 52 : 'auto',
-            borderWidth: findBorderWidth({ variant }),
-            borderColor: findBorderColor({ disabled, variant, loading }),
+            height: loading ? 52 : "auto",
+            borderColor: findBorderColor({ disabled: disabled, variant: variant, loading: loading }),
         },
         text: {
-            fontFamily: 'poppins-semibold',
-            color: findTextColor({ variant }),
-            alignSelf: 'center',
-            alignItems: 'center',
-            fontWeight: 'bold',
-            justifyContent: 'center',
+            fontFamily: getTypographyBoldStyle(TypographyBold.TEXT_WEIGHT_SEMIBOLD),
+            color: disabled
+                ? getColorStyle(TrilogyColor.BACKGROUND)
+                : findTextColor({ variant: variant }),
+            alignSelf: "center",
+            alignItems: "center",
+            fontWeight: "bold",
+            justifyContent: "center",
         },
         textDisabled: {
-            color: getColorStyle(TrilogyColor.GREY),
-            alignSelf: 'center',
-            alignItems: 'center',
-            fontWeight: 'bold',
-            justifyContent: 'center',
+            color: getColorStyle(TrilogyColor.DISABLED_FADE),
+            alignSelf: "center",
+            alignItems: "center",
+            fontWeight: "bold",
+            justifyContent: "center",
         },
         textDisabledIcon: {
-            color: getColorStyle(TrilogyColor.GREY),
-            alignSelf: 'center',
-            alignItems: 'center',
-            fontWeight: 'bold',
-            justifyContent: 'center',
+            color: getColorStyle(TrilogyColor.DISABLED_FADE),
+            alignSelf: "center",
+            alignItems: "center",
+            fontWeight: "bold",
+            justifyContent: "center",
             marginLeft: 12,
         },
         fullwidth: {
-            alignSelf: 'stretch',
+            alignSelf: "stretch",
         },
         buttonIconContainer: {
-            flexDirection: 'row',
-            alignSelf: 'center',
-            alignItems: 'center',
-            fontWeight: 'bold',
-            justifyContent: 'center',
+            flexDirection: "row",
+            alignSelf: "center",
+            alignItems: "center",
+            fontWeight: "bold",
+            justifyContent: "center",
         },
         buttonIconText: {
-            color: findTextColor({ variant }),
-            alignSelf: 'center',
-            alignItems: 'center',
-            fontWeight: 'bold',
-            justifyContent: 'center',
+            color: disabled
+                ? getColorStyle(TrilogyColor.BACKGROUND)
+                : findTextColor({ variant: variant }),
+            alignSelf: "center",
+            alignItems: "center",
+            fontWeight: "bold",
+            justifyContent: "center",
             marginLeft: 8,
         },
     });
-    const buttonTestId = testId ? testId : typeof children === 'string' ? children : 'NotSpecified';
-    const buttonAccessibilityLabel = accessibilityLabel
+    var buttonTestId = testId
+        ? testId
+        : typeof children === "string"
+            ? children
+            : "NotSpecified";
+    var buttonAccessibilityLabel = accessibilityLabel
         ? accessibilityLabel
-        : typeof children === 'string'
+        : typeof children === "string"
             ? children
-            : 'NotSpecified';
+            : "NotSpecified";
     /**
      * Returns variant's classname depending on variant type
      * @param variantType {string} - VariantType
      * @returns {string} - Variant value
      */
-    const iconColorVariant = (variantType) => {
-        if (variantType && ['PRIMARY', 'SECONDARY'].includes(variantType))
-            return TrilogyColor.WHITE;
-        if (variantType === 'TERTIARY')
-            return TrilogyColor.SECONDARY;
-        return TrilogyColor.WHITE;
+    var iconColorVariant = function (variantType) {
+        if (variantType && ["PRIMARY", "ACCENT"].includes(variantType))
+            return TrilogyColor.BACKGROUND;
+        if (variantType === "SECONDARY" || variantType === "GHOST")
+            return TrilogyColor.MAIN;
+        return TrilogyColor.BACKGROUND;
     };
-    return (React.createElement(TouchableOpacity, { accessible: !!buttonAccessibilityLabel, accessibilityLabel: buttonAccessibilityLabel, testID: buttonTestId, disabled: disabled, style: [styles.button, fullwidth && styles.fullwidth], onPress: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e), ...others },
-        loading && typeof loading === 'string' && getLoadingClassName(loading) === 'loading' && (React.createElement(View, { style: {
-                alignItems: 'center',
-                justifyContent: 'center',
+    return (React.createElement(TouchableOpacity, __assign({ accessible: !!buttonAccessibilityLabel, accessibilityLabel: buttonAccessibilityLabel, testID: buttonTestId, disabled: disabled || loading, style: [styles.button, fullwidth && styles.fullwidth], onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } }, others),
+        loading &&
+            typeof loading === "string" &&
+            getLoadingClassName(loading) === "loading" && (React.createElement(View, { style: {
+                alignItems: "center",
+                justifyContent: "center",
                 height: 45,
             } },
-            React.createElement(ActivityIndicator, { color: getColorStyle(TrilogyColor.GREY_DISABLED) }))),
-        loading && typeof loading === 'boolean' && loading === true && (React.createElement(View, { style: {
-                alignItems: 'center',
+            React.createElement(ActivityIndicator, { color: getColorStyle(TrilogyColor.BACKGROUND), testID: 'activity-indicator' }))),
+        loading && typeof loading === "boolean" && loading === true && (React.createElement(View, { style: {
+                alignItems: "center",
                 height: 45,
-                justifyContent: 'center',
+                justifyContent: "center",
             } },
-            React.createElement(ActivityIndicator, { color: getColorStyle(TrilogyColor.GREY_DISABLED) }))),
-        loading && typeof loading === 'string' && getLoadingClassName(loading) === 'loaded' && (React.createElement(Text, { style: (!disabled && styles.text) || (disabled && styles.textDisabled) }, children)),
-        !loading && children && typeof children === 'string' && !iconName && (React.createElement(Text, { style: (!disabled && styles.text) || (disabled && styles.textDisabled) }, children)),
-        !loading && children && typeof children === 'string' && iconName && (React.createElement(View, { style: styles.buttonIconContainer },
-            !disabled ? (React.createElement(Icon, { name: iconName, size: IconSize.SMALL, color: iconColorVariant(variant) })) : (React.createElement(Icon, { name: iconName, size: IconSize.SMALL, color: getColorStyle(TrilogyColor.GREY_DISABLED) })),
-            React.createElement(Text, { style: (!disabled && styles.buttonIconText) || (disabled && styles.textDisabledIcon) }, children)))));
+            React.createElement(ActivityIndicator, { color: getColorStyle(TrilogyColor.BACKGROUND), testID: 'activity-indicator' }))),
+        loading &&
+            typeof loading === "string" &&
+            getLoadingClassName(loading) === "loaded" && (React.createElement(Text, { style: (!disabled && styles.text) || (disabled && styles.textDisabled) }, children)),
+        !loading && children && typeof children === "string" && !iconName && (React.createElement(Text, { style: (!disabled && styles.text) || (disabled && styles.textDisabled) }, children)),
+        !loading && children && typeof children === "string" && iconName && (React.createElement(View, { style: styles.buttonIconContainer },
+            !disabled ? (React.createElement(Icon, { name: iconName, size: IconSize.SMALL, color: iconColorVariant(variant), testId: 'button-icon' })) : (React.createElement(Icon, { testId: 'button-icon', name: iconName, size: IconSize.SMALL, color: getColorStyle(TrilogyColor.DISABLED) })),
+            React.createElement(Text, { style: (!disabled && styles.buttonIconText) ||
+                    (disabled && styles.textDisabledIcon) }, children)))));
 };
 Button.displayName = ComponentName.Button;
 export default Button;
-//# sourceMappingURL=Button.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnV0dG9uL0J1dHRvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLFVBQVUsRUFDVixJQUFJLEVBQ0osZ0JBQWdCLEdBQ2pCLE1BQU0sY0FBYyxDQUFBO0FBQ3JCLE9BQU8sRUFDTCxZQUFZLEVBQ1osbUJBQW1CLEVBQ25CLGFBQWEsRUFDYixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ3BCLE1BQU0sa0JBQWtCLENBQUE7QUFDekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDbEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFNUMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLGNBQWMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVsRTs7Ozs7Ozs7Ozs7R0FXRztBQUNILElBQU0sTUFBTSxHQUFHLFVBQUMsRUFXRjtJQVZaLElBQUEsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsTUFBTSxZQUFBLEVBQ04sa0JBQWtCLHdCQUFBLEVBQ2xCLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FWSyxrSEFXZixDQURVO0lBR1QsSUFBTSxtQkFBbUIsR0FBRyxVQUFDLEVBSWY7WUFIWixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxPQUFPLGFBQUE7UUFFUCxPQUFPLENBQ0wsQ0FBQyxRQUFRLElB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

package/lib/components/button/ButtonEnum.d.ts

@@ -15,17 +15,18 @@ declare enum ButtonType {
     SUBMIT = "submit"
 }
 /**
- * Button Color
+ * Button Variant
  */
-export declare enum ButtonColor {
-    SECONDARY = "SECONDARY",
+export declare enum ButtonVariant {
+    CONVERSION = "CONVERSION",
     PRIMARY = "PRIMARY",
-    TERTIARY = "TERTIARY"
+    SECONDARY = "SECONDARY",
+    GHOST = "GHOST"
 }
 /**
  * List of available Markup values for Button
  */
 export type ButtonMarkupValues = `${ButtonMarkup}`;
 export type ButtonTypeValues = `${ButtonType}`;
-export type ButtonColorValues = `${ButtonColor}`;
+export type ButtonVariantValues = `${ButtonVariant}`;
 export { ButtonMarkup, ButtonType };

package/lib/components/button/ButtonEnum.js

@@ -17,13 +17,14 @@ var ButtonType;
     ButtonType["SUBMIT"] = "submit";
 })(ButtonType || (ButtonType = {}));
 /**
- * Button Color
+ * Button Variant
  */
-export var ButtonColor;
-(function (ButtonColor) {
-    ButtonColor["SECONDARY"] = "SECONDARY";
-    ButtonColor["PRIMARY"] = "PRIMARY";
-    ButtonColor["TERTIARY"] = "TERTIARY";
-})(ButtonColor || (ButtonColor = {}));
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant["CONVERSION"] = "CONVERSION";
+    ButtonVariant["PRIMARY"] = "PRIMARY";
+    ButtonVariant["SECONDARY"] = "SECONDARY";
+    ButtonVariant["GHOST"] = "GHOST";
+})(ButtonVariant || (ButtonVariant = {}));
 export { ButtonMarkup, ButtonType };
-//# sourceMappingURL=ButtonEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uRW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvYnV0dG9uL0J1dHRvbkVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxJQUFLLFlBSUo7QUFKRCxXQUFLLFlBQVk7SUFDZixpQ0FBaUIsQ0FBQTtJQUNqQiwrQkFBZSxDQUFBO0lBQ2YsdUJBQU8sQ0FBQTtBQUNULENBQUMsRUFKSSxZQUFZLEtBQVosWUFBWSxRQUloQjtBQUVEOztHQUVHO0FBQ0gsSUFBSyxVQUlKO0FBSkQsV0FBSyxVQUFVO0lBQ2IsK0JBQWlCLENBQUE7SUFDakIsNkJBQWUsQ0FBQTtJQUNmLCtCQUFpQixDQUFBO0FBQ25CLENBQUMsRUFKSSxVQUFVLEtBQVYsVUFBVSxRQUlkO0FBRUQ7O0dBRUc7QUFFSCxNQUFNLENBQU4sSUFBWSxhQUtYO0FBTEQsV0FBWSxhQUFhO0lBQ3ZCLDBDQUF5QixDQUFBO0lBQ3pCLG9DQUFtQixDQUFBO0lBQ25CLHdDQUF1QixDQUFBO0lBQ3ZCLGdDQUFlLENBQUE7QUFDakIsQ0FBQyxFQUxXLGFBQWEsS0FBYixhQUFhLFFBS3hCO0FBV0QsT0FBTyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsQ0FBQSJ9

package/lib/components/button/ButtonProps.d.ts

@@ -1,23 +1,22 @@
 /// <reference types="react" />
-import { ButtonColor, ButtonColorValues, ButtonMarkup, ButtonMarkupValues, ButtonType, ButtonTypeValues } from './ButtonEnum';
+import { ButtonMarkup, ButtonMarkupValues, ButtonType, ButtonTypeValues, ButtonVariant, ButtonVariantValues } from './ButtonEnum';
 import { Fullwidth } from '../../objects/facets/Fullwidth';
-import { Accessibility, Clickable } from '../../objects/facets';
-import { IconName, IconNameValues } from '..';
+import { Accessibility, Clickable, Dev } from '../../objects/facets';
+import { IconName, IconNameValues } from '../../components/icon';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Button Interface
  */
-export interface ButtonProps extends Accessibility, Fullwidth, Clickable {
+export interface ButtonProps extends Accessibility, Fullwidth, Clickable, Dev, CommonProps {
     children?: React.ReactNode;
     disabled?: boolean;
     markup?: ButtonMarkup | ButtonMarkupValues;
     href?: string;
-    className?: string;
     to?: string;
-    id?: string;
     loading?: boolean;
     name?: string;
     routerLink?: React.ElementType;
     type?: ButtonType | ButtonTypeValues;
     iconName?: IconName | IconNameValues;
-    variant?: ButtonColor | ButtonColorValues;
+    variant?: ButtonVariant | ButtonVariantValues;
 }

package/lib/components/button/ButtonProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=ButtonProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2J1dHRvbi9CdXR0b25Qcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=