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

package/lib/components/fab/Fab.native.js

@@ -1,8 +1,9 @@
-import React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { Alignable, getColorStyle, TrilogyColor } from '../../objects';
-import { Icon, IconColor, IconSize } from '../icon';
-import { ComponentName } from '../enumsComponentsName';
+import * as React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import { Alignable, getColorStyle, TrilogyColor, TypographyBold, TypographyColor } from "../../objects";
+import { Icon, IconColor, IconSize } from "../../components/icon";
+import { ComponentName } from "../../components/enumsComponentsName";
+import { Text } from "../../components/text";
 /**
  * Fab Native Component
  * @param children {string} label fab button
@@ -14,35 +15,35 @@ import { ComponentName } from '../enumsComponentsName';
  * @param left {number} position left
  * @param bottom {number} position bottom
  * @param right {number} position right
+ * @param disabled {boolean} disabled button
  */
-const Fab = ({ children, accessibilityLabel, iconName, extended, onClick, top, bottom, left, right, }) => {
-    const styles = StyleSheet.create({
+var Fab = function (_a) {
+    var children = _a.children, accessibilityLabel = _a.accessibilityLabel, iconName = _a.iconName, extended = _a.extended, onClick = _a.onClick, top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, disabled = _a.disabled, testId = _a.testId;
+    var styles = StyleSheet.create({
         button: {
-            backgroundColor: getColorStyle(TrilogyColor.SECONDARY),
-            justifyContent: 'center',
-            alignItems: 'center',
+            backgroundColor: getColorStyle(TrilogyColor.MAIN),
+            justifyContent: "center",
+            alignItems: "center",
             borderRadius: 16,
             minHeight: 56,
-            height: 'auto',
-            shadowColor: '#000',
+            height: "auto",
+            shadowColor: "#000",
             shadowOffset: { width: 0, height: 3 },
             shadowOpacity: 0.2,
             shadowRadius: 6,
             elevation: 3,
-            position: top || bottom || left || right ? 'absolute' : 'relative',
-            top: top ? top : 'auto',
-            right: right ? right : 'auto',
-            left: left ? left : 'auto',
-            bottom: bottom ? bottom : 'auto',
-            width: extended ? 'auto' : 60,
-            flexDirection: 'row',
+            position: top || bottom || left || right ? "absolute" : "relative",
+            top: top ? top : "auto",
+            right: right ? right : "auto",
+            left: left ? left : "auto",
+            bottom: bottom ? bottom : "auto",
+            width: extended ? "auto" : 60,
+            flexDirection: "row",
             zIndex: 999,
         },
         label: {
-            color: 'white',
-            fontWeight: '600',
-            fontSize: 16,
-            lineHeight: 20,
+            marginTop: "auto",
+            marginBottom: "auto",
             marginLeft: 10,
             marginRight: 16,
         },
@@ -54,10 +55,10 @@ const Fab = ({ children, accessibilityLabel, iconName, extended, onClick, top, b
             height: 56,
         },
     });
-    return (React.createElement(TouchableOpacity, { style: [styles.button, extended && styles.extended], accessibilityLabel: accessibilityLabel, onPress: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e) }, extended ? (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { style: styles.icon, name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }),
-        React.createElement(Text, { style: styles.label }, children))) : (React.createElement(Icon, { style: styles.icon, name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }))));
+    return (React.createElement(TouchableOpacity, { style: [styles.button, extended && styles.extended], accessibilityLabel: accessibilityLabel, onPress: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); }, disabled: disabled, testID: testId }, extended ? (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }),
+        React.createElement(Text, { style: styles.label, typo: [TypographyColor.TEXT_WHITE, TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, children))) : (React.createElement(Icon, { name: iconName, color: IconColor.WHITE, size: IconSize.MEDIUM, align: Alignable.ALIGNED_CENTER }))));
 };
 Fab.displayName = ComponentName.Fab;
 export default Fab;
-//# sourceMappingURL=Fab.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmFiL0ZhYi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFM0QsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDbkcsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDdkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEdBQUcsR0FBRyxVQUFDLEVBWVc7UUFYVCxRQUFRLGNBQUEsRUFDUixrQkFBa0Isd0JBQUEsRUFDbEIsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsR0FBRyxTQUFBLEVBQ0gsTUFBTSxZQUFBLEVBQ04sSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBO0lBRW5CLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsTUFBTSxFQUFFO1lBQ04sZUFBZSxFQUFFLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDO1lBQ2pELGNBQWMsRUFBRSxRQUFRO1lBQ3hCLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFlBQVksRUFBRSxFQUFFO1lBQ2hCLFNBQVMsRUFBRSxFQUFFO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxXQUFXLEVBQUUsTUFBTTtZQUNuQixZ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

package/lib/components/fab/FabProps.d.ts

@@ -1,18 +1,19 @@
 /// <reference types="react" />
-import { IconName, IconNameValues } from '../icon';
-import { Accessibility, Clickable, Position } from '../../objects';
-import { DimensionValue } from 'react-native';
+import { IconName, IconNameValues } from "../../components/icon";
+import { Accessibility, Clickable, Dev } from "../../objects";
+import { DimensionValue } from "react-native";
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Fab Interface
  */
-export interface FabProps extends Accessibility, Clickable, Position {
+export interface FabProps extends Accessibility, Clickable, Dev, CommonProps {
     children: string | React.ReactNode;
     extended?: boolean;
     iconName: IconName | IconNameValues;
-    className?: string;
     fixed?: boolean;
     top?: DimensionValue | number | undefined;
     bottom?: DimensionValue | number | undefined;
     left?: DimensionValue | number | undefined;
     right?: DimensionValue | number | undefined;
+    disabled?: boolean;
 }

package/lib/components/fab/FabProps.js

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

package/lib/components/fab/FabPropsDefaults.js

@@ -0,0 +1,170 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "extended": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "iconName": {
+    "type": "enum",
+    "values": [
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa"
+    ]
+  },
+  "fixed": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "top": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "null",
+      "number",
+      "auto",
+      "`${number}%`",
+      "AnimatedNode"
+    ]
+  },
+  "bottom": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "null",
+      "number",
+      "auto",
+      "`${number}%`",
+      "AnimatedNode"
+    ]
+  },
+  "left": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "null",
+      "number",
+      "auto",
+      "`${number}%`",
+      "AnimatedNode"
+    ]
+  },
+  "right": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "null",
+      "number",
+      "auto",
+      "`${number}%`",
+      "AnimatedNode"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/fab/index.js

@@ -1,3 +1,3 @@
 import Fab from "./Fab";
 export { Fab };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZhYi9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=

package/lib/components/hero/Hero.d.ts

@@ -1,17 +1,19 @@
-/// <reference types="react" />
-import { HeroProps } from './HeroProps';
+import React from 'react';
+import type { View } from 'react-native';
+import { HeroProps } from '../../components/hero/HeroProps';
 /**
  * Hero Component
  * @param children {React.ReactNode} Hero Children
+ * @param backgroundColor {TrilogyColor} Hero background color
  * @param backgroundSrc {string} If source, it will display background option
- * @param variant {VariantState} Hero background color : primary|secondary|tertiary
+ * @param variant {VariantState} Hero background color : main/accent
  * @param onClick {Function} onClick Event
+ * @param inverted {boolean} Inverted
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  * - -------------------------- NATIVE PROPERTIES -------------------------------
- * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-declare const Hero: ({ children, className, backgroundSrc, align, justify, variant, onClick, overlap, ...others }: HeroProps) => JSX.Element;
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement | View>>;
 export default Hero;

package/lib/components/hero/Hero.js

@@ -1,31 +1,34 @@
-import React from 'react';
-import { is, has } from '../../services/classify';
-import { getAlignClassName, getVariantClassName } from '../../objects';
+import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
-import { hashClass } from '../../helpers';
+import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getBackgroundClassName } from '../../objects/atoms/Background';
+import { has, is } from '../../services/classify';
 /**
  * Hero Component
  * @param children {React.ReactNode} Hero Children
+ * @param backgroundColor {TrilogyColor} Hero background color
  * @param backgroundSrc {string} If source, it will display background option
- * @param variant {VariantState} Hero background color : primary|secondary|tertiary
+ * @param variant {VariantState} Hero background color : main/accent
  * @param onClick {Function} onClick Event
+ * @param inverted {boolean} Inverted
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
  * - -------------------------- NATIVE PROPERTIES -------------------------------
- * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-const Hero = ({ children, className, backgroundSrc, align, justify, variant, onClick, overlap, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('hero', variant && has(`background-${getVariantClassName(variant)}`), backgroundSrc && [is('primary'), has('background')], align && is(getAlignClassName(align)), justify && is(justify), overlap && is('overlapped'), className));
-    if (variant) {
-        return (React.createElement("section", { onClick: onClick && onClick, className: classes, ...others },
-            React.createElement("div", { className: hashClass(styled, clsx('hero-body')) }, children)));
-    }
-    return (React.createElement("section", { onClick: onClick && onClick, ...(backgroundSrc && { style: { backgroundImage: `url(${backgroundSrc})` } }), className: classes, ...others },
+var Hero = React.forwardRef(function (_a, ref) {
+    var children = _a.children, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, className = _a.className, id = _a.id, onClick = _a.onClick, overlap = _a.overlap, others = __rest(_a, ["children", "backgroundColor", "backgroundSrc", "inverted", "className", "id", "onClick", "overlap"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('hero', backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), (inverted && is('inverted')) || is('base'), overlap && is('overlapped'), className));
+    return (React.createElement("section", __assign({ ref: ref, id: id, onClick: onClick && onClick, className: classes }, (backgroundSrc && {
+        style: { backgroundImage: "url(".concat(backgroundSrc, ")") },
+    }), others),
         React.createElement("div", { className: hashClass(styled, clsx('hero-body')) }, children)));
-};
+});
+Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=Hero.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaGVyby9IZXJvLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUNuRSxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRTdDOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMzQixVQUNFLEVBQTZHLEVBQzdHLEdBQXFDO0lBRG5DLElBQUEsUUFBUSxjQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBSyxNQUFNLGNBQWhHLHFHQUFrRyxDQUFGO0lBR3hGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixNQUFNLEVBQ04sZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxDQUFDLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQzFDLE9BQU8sSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzNCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsMENBQ0UsR0FBRyxFQUFFLEdBQXNDLEVBQzNDLEVBQUUsRUFBRSxFQUFFLEVBQ04sT0FBTyxFQUFFLE9BQU8sSUFBSSxPQUFPLEVBQzNCLFNBQVMsRUFBRSxPQUFPLElBQ2QsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFLEVBQUUsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHLEVBQUU7S0FDcEQsQ0FBQyxFQUNFLE1BQU07UUFFViw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsSUFBRyxRQUFRLENBQU8sQ0FDOUQsQ0FDWCxDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFDckMsZUFBZSxJQUFJLENBQUEifQ==

package/lib/components/hero/Hero.native.d.ts

@@ -1,18 +1,16 @@
-/// <reference types="react" />
-import { HeroProps } from './HeroProps';
-import { ComponentName } from '../enumsComponentsName';
+import React from 'react';
+import { View } from 'react-native';
+import { HeroProps } from '../../components/hero/HeroProps';
 /**
  * Hero Component
  * @param children {ReactNode} Hero Children
  * @param backgroundSrc {string} If source, it will display background option
- * @param variant {VariantState} Hero background color : primary|secondary|tertiary
+ * @param backgroundColor {TrilogyColor} Background Color
+ * @param inverted {Boolean} Inverted Hero
  * @param onClick {Function} onClick Event
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-declare const Hero: {
-    ({ children, backgroundSrc, variant, onClick, overlap, backgroundHeight, ...others }: HeroProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<View>>;
 export default Hero;

package/lib/components/hero/Hero.native.js

@@ -1,42 +1,43 @@
+import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
-import { StyleSheet, ImageBackground, TouchableOpacity, View } from 'react-native';
-import { getVariantStyle, TrilogyColor } from '../../objects';
-import { Box } from '../box';
-import { ComponentName } from '../enumsComponentsName';
+import { ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Box } from '../../components/box';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { StatesContext } from '../../context/providerStates';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * Hero Component
  * @param children {ReactNode} Hero Children
  * @param backgroundSrc {string} If source, it will display background option
- * @param variant {VariantState} Hero background color : primary|secondary|tertiary
+ * @param backgroundColor {TrilogyColor} Background Color
+ * @param inverted {Boolean} Inverted Hero
  * @param onClick {Function} onClick Event
  * @param overlap {ReactNode[]|Boolean} Hero overlap components in tab (need to add key for each element),
  * if second element add second special overlap (only native-old) - Web (Boolean) Native (ReactNode)
  * @param backgroundHeight {BackgroundHeight} Background heigth
  */
-const Hero = ({ children, backgroundSrc, variant, onClick, overlap, backgroundHeight, ...others }) => {
-    const [overlapHeight, setOverlapHeight] = useState(0);
-    const [secondOverlapHeight, setSecondOverlapHeight] = useState(0);
-    const isSecondOverlap = overlap && Array.isArray(overlap) ? (overlap === null || overlap === void 0 ? void 0 : overlap.length) > 1 : false;
-    const isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
-    const overlapMargin = backgroundHeight ? overlapHeight - backgroundHeight / 2 : overlapHeight - 60;
-    const marginBottomOverlap = isSecondOverlapNotEmpty ? 70 : 60;
-    const styles = StyleSheet.create({
+var Hero = React.forwardRef(function (_a, ref) {
+    var children = _a.children, backgroundSrc = _a.backgroundSrc, onClick = _a.onClick, overlap = _a.overlap, inverted = _a.inverted, backgroundColor = _a.backgroundColor, others = __rest(_a, ["children", "backgroundSrc", "onClick", "overlap", "inverted", "backgroundColor"]);
+    var _b = __read(useState(0), 2), overlapHeight = _b[0], setOverlapHeight = _b[1];
+    var _c = __read(useState(0), 2), secondOverlapHeight = _c[0], setSecondOverlapHeight = _c[1];
+    var isSecondOverlap = overlap && Array.isArray(overlap) ? (overlap === null || overlap === void 0 ? void 0 : overlap.length) > 1 : false;
+    var isSecondOverlapNotEmpty = isSecondOverlap && secondOverlapHeight > 0;
+    var styles = StyleSheet.create({
         hero: {
             width: '100%',
             minHeight: 100,
             maxHeight: 300,
-            height: backgroundHeight ? backgroundHeight : 'auto',
+            height: 'auto',
         },
         content: {
-            padding: 15,
-            marginBottom: overlap ? marginBottomOverlap : 0,
+            paddingLeft: 15,
         },
-        variant: {
-            backgroundColor: variant && getVariantStyle(variant),
+        background: {
+            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : getColorStyle(TrilogyColor.BACKGROUND),
         },
         overlap: {
             position: 'absolute',
-            top: isSecondOverlapNotEmpty ? -40 : backgroundHeight ? backgroundHeight * (-1 / 2) : -60,
+            top: isSecondOverlapNotEmpty ? -40 : -60,
         },
         secondOverlap: {
             position: 'absolute',
@@ -45,45 +46,46 @@ const Hero = ({ children, backgroundSrc, variant, onClick, overlap, backgroundHe
             width: '100%',
         },
         subOverlap: {
-            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapMargin,
+            height: isSecondOverlapNotEmpty ? overlapHeight - 40 : overlapHeight,
         },
     });
-    let heroView;
-    if (variant) {
-        heroView = (React.createElement(View, { style: [styles.variant, styles.hero] },
-            React.createElement(View, { style: styles.content }, children)));
+    var heroView;
+    if (backgroundColor) {
+        heroView = (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: false, flat: false } },
+            React.createElement(View, { style: [styles.background, styles.hero], testID: 'background-id' },
+                React.createElement(View, { style: styles.content }, children))));
     }
     else {
-        heroView = (React.createElement(ImageBackground, { source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }, style: styles.hero, ...others },
-            React.createElement(View, { style: styles.content }, children)));
+        heroView = (React.createElement(ImageBackground, __assign({ source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }, style: styles.hero }, others),
+            React.createElement(View, { style: styles.content, testID: 'no-background-id' }, children)));
     }
-    let overlapView;
+    var overlapView;
     if (isSecondOverlap) {
         overlapView = (React.createElement(View, { style: styles.subOverlap },
-            React.createElement(View, { style: styles.overlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
+            React.createElement(View, { style: styles.overlap, onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
                     setOverlapHeight(height);
                 } },
-                React.createElement(Box, { background: TrilogyColor.GREY_LIGHTER },
+                React.createElement(Box, { backgroundColor: TrilogyColor.NEUTRAL_FADE },
                     React.createElement(View, { style: { marginBottom: secondOverlapHeight / 2 } }),
                     overlap && typeof overlap !== 'boolean' ? overlap[0] : null)),
-            React.createElement(View, { style: styles.secondOverlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
+            React.createElement(View, { style: styles.secondOverlap, onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
                     setSecondOverlapHeight(height);
                 } }, overlap && typeof overlap !== 'boolean' ? overlap[1] : null)));
     }
     else {
         overlapView = (React.createElement(View, { style: styles.subOverlap },
-            React.createElement(View, { style: styles.overlap, onLayout: (event) => {
-                    const { height } = event.nativeEvent.layout;
+            React.createElement(View, { style: styles.overlap, onLayout: function (event) {
+                    var height = event.nativeEvent.layout.height;
                     setOverlapHeight(height);
                 } }, overlap && typeof overlap !== 'boolean' ? overlap[0] : null)));
     }
-    return onClick ? (React.createElement(View, null,
-        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { style: { width: '100%' } },
+    return onClick ? (React.createElement(View, { ref: ref },
+        React.createElement(TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, heroView))) : (React.createElement(View, { ref: ref, style: { width: '100%' } },
         heroView,
         overlapView));
-};
+});
 Hero.displayName = ComponentName.Hero;
 export default Hero;
-//# sourceMappingURL=Hero.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGVyby5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vSGVyby5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2QyxPQUFPLEVBQUUsZUFBZSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFbEYsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3RDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRTs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDM0IsVUFDRSxFQUE4RixFQUM5RixHQUFvQjtJQURsQixJQUFBLFFBQVEsY0FBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUssTUFBTSxjQUFqRixrRkFBbUYsQ0FBRjtJQUczRSxJQUFBLEtBQUEsT0FBb0MsUUFBUSxDQUFTLENBQUMsQ0FBQyxJQUFBLEVBQXRELGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUF1QixDQUFBO0lBQ3ZELElBQUEsS0FBQSxPQUFnRCxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBbEUsbUJBQW1CLFFBQUEsRUFBRSxzQkFBc0IsUUFBdUIsQ0FBQTtJQUV6RSxJQUFNLGVBQWUsR0FBRyxPQUFPLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsTUFBTSxJQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFBO0lBQ3ZGLElBQU0sdUJBQXVCLEdBQUcsZUFBZSxJQUFJLG1CQUFtQixHQUFHLENBQUMsQ0FBQTtJQUUxRSxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLElBQUksRUFBRTtZQUNKLEtBQUssRUFBRSxNQUFNO1lBQ2IsU0FBUyxFQUFFLEdBQUc7WUFDZCxTQUFTLEVBQUUsR0FBRztZQUNkLE1BQU0sRUFBRSxNQUFNO1NBQ2Y7UUFDRCxPQUFPLEVBQUU7WUFDUCxXQUFXLEVBQUUsRUFBRTtTQUNoQjtRQUNELFVBQVUsRUFBRTtZQUNWLGVBQWUsRUFBRSxlQUFlLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUM7U0FDM0c7UUFDRCxPQUFPLEVBQUU7WUFDUCxRQUFRLEVBQUUsVUFBVTtZQUNwQixHQUFHLEVBQUUsdUJBQXVCLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7U0FDekM7UUFDRCxhQUFhLEVBQUU7WUFDYixRQUFRLEVBQUUsVUFBVTtZQUNwQixTQUFTLEVBQUUsUUFBUTtZQUNuQixHQUFHLEVBQUUsbUJBQW1CLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxFQUFFO1lBQ3hDLEtBQUssRUFBRSxNQUFNO1NBQ2Q7UUFDRCxVQUFVLEVBQUU7WUFDVixNQUFNLEVBQUUsdUJBQXVCLENBQUMsQ0FBQyxDQUFDLGFBQWEsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLGFBQWE7U0FDckU7S0FDRixDQUFDLENBQUE7SUFDRixJQUFJLFFBQXFCLENBQUE7SUFFekIsSUFBSSxlQUFlLEVBQUU7UUFDbkIsUUFBUSxHQUFHLENBQ1Qsb0JBQUMsYUFBYSxDQUFDLFFBQVEsSUFBQyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDLFFBQVEsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUU7WUFDakYsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBQyxlQUFlO2dCQUNuRSxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxPQUFPLElBQUcsUUFBUSxDQUFRLENBQ3pDLENBQ2dCLENBQzFCLENBQUE7S0FDRjtTQUFNO1FBQ0wsUUFBUSxHQUFHLENBQ1Qsb0JBQUMsZUFBZSxhQUNkLE1BQU0sRUFBRSxPQUFPLGFBQWEsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxHQUFHLEVBQUUsYUFBYSxFQUFFLEVBQ2xGLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxJQUNkLE1BQU07WUFFVixvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxPQUFPLEVBQUUsTUFBTSxFQUFDLGtCQUFrQixJQUNuRCxRQUFRLENBQ0osQ0FDUyxDQUNuQixDQUFBO0tBQ0Y7SUFFRCxJQUFJLFdBQXdCLENBQUE7SUFFNUIsSUFBSSxlQUFlLEVBQUU7UUFDbkIsV0FBVyxHQUFHLENBQ1osb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsVUFBVTtZQUM1QixvQkFBQyxJQUFJLElBQ0gsS0FBSyxFQUFFLE1BQU0sQ0FBQyxPQUFPLEVBQ3JCLFFBQVEsRUFBRSxVQUFDLEtBQUs7b0JBQ04sSUFBQSxNQUFNLEdBQUssS0FBSyxDQUFDLFdBQVcsQ0FBQyxNQUFNLE9BQTdCLENBQTZCO29CQUMzQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQTtnQkFDMUIsQ0FBQztnQkFFRCxvQkFBQyxHQUFHLElBQUMsZUFBZSxFQUFFLFlBQVksQ0FBQyxZQUFZO29CQUM3QyxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLEVBQUUsWUFBWSxFQUFFLG1CQUFtQixHQUFHLENBQUMsRUFBRSxHQUFJO29CQUN6RCxPQUFPLElBQUksT0FBTyxPQUFPLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDeEQsQ0FDRDtZQUNQLG9CQUFDLElBQUksSUFDSCxLQUFLLEVBQUUsTUFBTSxDQUFDLGFBQWEsRUFDM0IsUUFBUSxFQUFFLFVBQUMsS0FBSztvQkFDTixJQUFBLE1BQU0sR0FBSyxLQUFLLENBQUMsV0FBVyxDQUFDLE1BQU0sT0FBN0IsQ0FBNkI7b0JBQzNDLHNCQUFzQixDQUFDLE1BQU0sQ0FBQyxDQUFBO2dCQUNoQyxDQUFDLElBRUEsT0FBTyxJQUFJLE9BQU8sT0FBTyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQ3ZELENBQ0YsQ0FDUixDQUFBO0tBQ0Y7U0FBTTtRQUNMLFdBQVcsR0FBRyxDQUNaLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLFVBQVU7WUFDNUIsb0JBQUMsSUFBSSxJQUNILEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxFQUNyQixRQUFRLEVBQUUsVUFBQyxLQUFLO29CQUNOLElBQUEsTUFBTSxHQUFLLEtBQUssQ0FBQyxXQUFXLENBQUMsTUFBTSxPQUE3QixDQUE2QjtvQkFDM0MsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUE7Z0JBQzFCLENBQUMsSUFFQSxPQUFPLElBQUksT0FBTyxPQUFPLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDdkQsQ0FDRixDQUNSLENBQUE7S0FDRjtJQUVELE9BQU8sT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUNmLG9CQUFDLElBQUksSUFBQyxHQUFHLEVBQUUsR0FBRztRQUNaLG9CQUFDLGdCQUFnQixJQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLElBQUksSUFDcEQsUUFBUSxDQUNRLENBQ2QsQ0FDUixDQUFDLENBQUMsQ0FBQyxDQUNGLG9CQUFDLElBQUksSUFBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUU7UUFDckMsUUFBUTtRQUNSLFdBQVcsQ0FDUCxDQUNSLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELElBQUksQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLElBQUksQ0FBQTtBQUVyQyxlQUFlLElBQUksQ0FBQSJ9

package/lib/components/hero/HeroProps.d.ts

@@ -1,15 +1,11 @@
 /// <reference types="react" />
-import { Clickable, VariantProps } from '../../objects/facets';
-import { AlignableProps } from '../../objects/facets/Alignable';
-import { JustifiableProps } from '../../objects/facets/Justifiable';
-import { BackgroundHeight } from './heroEnum';
+import { BackgroundProps } from '../../objects/atoms/Background';
+import { Clickable } from '../../objects/facets';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Hero Interface
  */
-export interface HeroProps extends VariantProps, AlignableProps, JustifiableProps, Clickable {
+export interface HeroProps extends Clickable, BackgroundProps, CommonProps {
     children?: React.ReactNode;
-    backgroundSrc?: string | number;
-    className?: string;
     overlap?: React.ReactNode[] | boolean;
-    backgroundHeight?: BackgroundHeight;
 }

package/lib/components/hero/HeroProps.js

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