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

package/lib/components/hero/HeroPropsDefaults.js

@@ -0,0 +1,101 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "overlap": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "ReactNode[]"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "backgroundColor": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "MAIN",
+      "ACCENT",
+      "WHITE",
+      "MAIN",
+      "MAIN_FADE",
+      "ACCENT",
+      "FONT",
+      "SUCCESS",
+      "SUCCESS_FADE",
+      "INFO",
+      "INFO_FADE",
+      "WARNING",
+      "WARNING_FADE",
+      "ERROR",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE",
+      "WHITE",
+      "MAIN_FADE",
+      "FONT",
+      "SUCCESS_FADE",
+      "INFO_FADE",
+      "WARNING_FADE",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE"
+    ]
+  },
+  "backgroundSrc": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/hero/heroEnum.js

@@ -5,4 +5,4 @@ export var BackgroundHeight;
     BackgroundHeight[BackgroundHeight["LARGE"] = 200] = "LARGE";
     BackgroundHeight[BackgroundHeight["HUGE"] = 300] = "HUGE";
 })(BackgroundHeight || (BackgroundHeight = {}));
-//# sourceMappingURL=heroEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVyb0VudW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vaGVyb0VudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFOLElBQVksZ0JBS1g7QUFMRCxXQUFZLGdCQUFnQjtJQUMxQiwyREFBVyxDQUFBO0lBQ1gsNkRBQVksQ0FBQTtJQUNaLDJEQUFXLENBQUE7SUFDWCx5REFBVSxDQUFBO0FBQ1osQ0FBQyxFQUxXLGdCQUFnQixLQUFoQixnQkFBZ0IsUUFLM0IifQ==

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

@@ -1,2 +1 @@
-import Hero from './Hero';
-export { Hero };
+export { default as Hero } from '../../components/hero/Hero';

package/lib/components/hero/index.js

@@ -1,3 +1,2 @@
-import Hero from './Hero';
-export { Hero };
-//# sourceMappingURL=index.js.map
+export { default as Hero } from '../../components/hero/Hero';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2hlcm8vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sSUFBSSxJQUFJLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQSJ9

package/lib/components/icon/Icon.d.ts

@@ -7,22 +7,15 @@ import { IconProps } from './IconProps';
  * @param status SUCCESS|ERROR If CircleIcon or not
  * @param circled true-false if CircleIcon
  * @param content If TextIcon use it for text
- * @param position UP|DOWN|LEFT|RIGHT
- * @param stacked {boolean} Stacked icon
  * @param badgeContent {string} Icon with bage content
- * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
  * @param color {IconColor} Custom Icon Color
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param onClick {Function} onClick Event Icon
  * @param skeleton {boolean} Icon Skeleton
- * @param marginless {boolean}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param textClassName {string} Text's className
  * @param className Additionnal css classes
- * @param markup {TextIconMarkup} Available markup for Icon DIV|P|SPAN|A
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param style {object} Additional styles
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-declare const Icon: ({ className, textClassName, size, name, status, circled, content, position, markup, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, verticalAlign, testId, marginless, ...others }: IconProps) => JSX.Element;
+declare const Icon: ({ className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, ...others }: IconProps) => JSX.Element;
 export default Icon;

package/lib/components/icon/Icon.js

@@ -1,13 +1,11 @@
-import React from 'react';
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
 import clsx from 'clsx';
-import StatusIcon from './status/index';
-import CircleIcon from './circle/index';
-import TextIcon from './text/index';
-import { has, is } from '../../services/index';
-import { getColorClassName } from '../../objects/facets/Color';
-import { getAlignClassName } from '../../objects/facets/Alignable';
+import { getColorClassName, TrilogyColor } from '../../objects/facets/Color';
 import { hashClass } from '../../helpers';
 import { useTrilogyContext } from '../../context';
+import { getBackgroundClassName } from '../../objects/atoms/Background';
+import { has, is } from '../../services';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -15,98 +13,25 @@ import { useTrilogyContext } from '../../context';
  * @param status SUCCESS|ERROR If CircleIcon or not
  * @param circled true-false if CircleIcon
  * @param content If TextIcon use it for text
- * @param position UP|DOWN|LEFT|RIGHT
- * @param stacked {boolean} Stacked icon
  * @param badgeContent {string} Icon with bage content
- * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
  * @param color {IconColor} Custom Icon Color
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param onClick {Function} onClick Event Icon
  * @param skeleton {boolean} Icon Skeleton
- * @param marginless {boolean}
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param textClassName {string} Text's className
  * @param className Additionnal css classes
- * @param markup {TextIconMarkup} Available markup for Icon DIV|P|SPAN|A
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param style {object} Additional styles
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
  */
-const Icon = ({ className, textClassName, size, name, status, circled, content, position, markup, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, verticalAlign, testId, marginless, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('icon', stretched && is('stretched'), size && is(size), stacked && is('stacked'), color && is(`${getColorClassName(color)}`), skeleton && is('loading'), badgeContent && is('stacked'), marginless && is('marginless'), className));
-    // TextIcon uses className instead of classes, verticalAlignment only affect TextIcon
-    className = clsx(content && verticalAlign && is(`${getAlignClassName(verticalAlign)}`), className);
-    const alignClasses = hashClass(styled, clsx((align && getAlignClassName(align) === 'aligned-start' && has('text-left')) ||
-        (getAlignClassName(align) === 'aligned-center' && has('text-centered')) ||
-        (getAlignClassName(align) === 'aligned-end' && has('text-right'))));
-    // circled icons
-    if (circled || (circled && status)) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement(CircleIcon, { testId: testId, onClick: onClick && onClick, className: className, name: name, status: status, size: size, color: color, backgroundColor: backgroundColor, ...others })));
-        }
-        return (React.createElement(CircleIcon, { testId: testId, onClick: onClick && onClick, className: className, name: name, status: status, size: size, color: color, backgroundColor: backgroundColor, ...others }));
-    }
-    // status icons
-    if (status) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement(StatusIcon, { testId: testId, onClick: onClick && onClick, statusPosition: statusPosition, className: className, name: name, size: size, status: status, ...others })));
-        }
-        return (React.createElement(StatusIcon, { testId: testId, onClick: onClick && onClick, statusPosition: statusPosition, className: className, name: name, size: size, status: status, ...others }));
-    }
-    // Text icon
-    if (content && !badgeContent) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement(TextIcon, { testId: testId, onClick: onClick && onClick, className: className, name: name, content: content, position: position, textClassName: textClassName, size: size, markup: markup, status: status, color: color, ...others })));
-        }
-        return (React.createElement(TextIcon, { onClick: onClick && onClick, className: className, name: name, content: content, position: position, textClassName: textClassName, size: size, markup: markup, status: status, color: color, ...others }));
-    }
-    // Icon with badge + badge content
-    if (badgeContent) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                    React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }),
-                    React.createElement("span", { className: hashClass(styled, clsx('badge', is('up'))) }, badgeContent)),
-                content && React.createElement("span", { className: hashClass(styled, clsx(textClassName)) }, content)));
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }),
-                React.createElement("span", { className: hashClass(styled, clsx('badge', is('up'))) }, badgeContent)),
-            content && React.createElement("span", { className: hashClass(styled, clsx(textClassName)) }, content)));
-    }
-    // Stretched icon
-    if (stretched) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                    React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }))));
-        }
-        return (React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-            React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' })));
-    }
-    // Custom Colored Icon
-    if (color) {
-        if (align) {
-            return (React.createElement("div", { className: alignClasses },
-                React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                    React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }))));
-        }
-        return (React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-            React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' })));
-    }
-    if (align) {
-        return (React.createElement("div", { className: alignClasses },
-            React.createElement("span", { onClick: onClick && onClick, className: classes, ...others },
-                React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' }))));
-    }
-    // Static default Icon
-    return (React.createElement("span", { "data-testid": testId, onClick: onClick && onClick, className: classes, ...others },
-        React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": 'true' })));
+var Icon = function (_a) {
+    var className = _a.className, id = _a.id, size = _a.size, name = _a.name, circled = _a.circled, stretched = _a.stretched, color = _a.color, backgroundColor = _a.backgroundColor, onClick = _a.onClick, skeleton = _a.skeleton, others = __rest(_a, ["className", "id", "size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "skeleton"]);
+    var styled = useTrilogyContext().styled;
+    var background = (backgroundColor && has(getBackgroundClassName(backgroundColor))) ||
+        (circled && has(getBackgroundClassName(TrilogyColor.MAIN))) ||
+        '';
+    var classes = hashClass(styled, clsx('icon', stretched && is('stretched'), size && is(size), circled && is('circled'), circled && !color && has('text-white'), color && is("".concat(getColorClassName(color))), skeleton && is('loading'), background, className));
+    return (React.createElement("span", __assign({ id: id, onClick: onClick && onClick, className: classes }, others),
+        React.createElement("i", { className: hashClass(styled, clsx(name)), "aria-hidden": "true" })));
 };
 export default Icon;
-//# sourceMappingURL=Icon.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaWNvbi9JY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxZQUFZLEVBQXNCLE1BQU0sd0JBQXdCLENBQUE7QUFDNUYsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDbkUsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFcEM7Ozs7Ozs7Ozs7Ozs7Ozs7R0FnQkc7QUFFSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBWVk7SUFYVixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLElBQUksVUFBQSxFQUNKLElBQUksVUFBQSxFQUNKLE9BQU8sYUFBQSxFQUNQLFNBQVMsZUFBQSxFQUNULEtBQUssV0FBQSxFQUNMLGVBQWUscUJBQUEsRUFDZixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBWFgsOEdBWUMsQ0FEVTtJQUVmLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sVUFBVSxHQUNkLENBQUMsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLENBQUMsT0FBTyxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUMzRCxFQUFFLENBQUE7SUFFSixJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsTUFBTSxFQUNOLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLElBQUksSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQ2hCLE9BQU8sSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hCLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ3RDLEtBQUssSUFBSSxFQUFFLENBQUMsVUFBRyxpQkFBaUIsQ0FBQyxLQUEwQyxDQUFDLENBQUUsQ0FBQyxFQUMvRSxRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN6QixVQUFVLEVBQ1YsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCx1Q0FBTSxFQUFFLEVBQUUsRUFBRSxFQUFFLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtRQUN2RSwyQkFBRyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsaUJBQWMsTUFBTSxHQUFHLENBQzdELENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsSUFBSSxDQUFBIn0=

package/lib/components/icon/Icon.native.d.ts

@@ -9,19 +9,17 @@ import { ComponentName } from '../enumsComponentsName';
  * @param status SUCCESS|ERROR|WARNING|PRIMARY|TERTIARY|WHITE|GREY If CircleIcon or not
  * @param circled true-false if CircleIcon
  * @param content If TextIcon use it for text
- * @param position UP|DOWN|LEFT|RIGHT
  * @param stacked {boolean} Stacked icon
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param color {IconColor} Custom Icon Color
  * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
- * @param style {Object} Additional styles
  * @param onClick {Function} onClick Event Icon
- * @param align {Alignable} Progress Radial Alignement
+ * @param align { Alignable | AlignableValues} align content
  * @param skeleton {boolean} Icon Skeleton
  */
 declare const Icon: {
-    ({ size, name, status, circled, content, position, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, style, testId, ...others }: IconProps): JSX.Element;
+    ({ size, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }: IconProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Icon;

package/lib/components/icon/Icon.native.js

@@ -1,15 +1,15 @@
+import { __assign, __rest } from "tslib";
 import React, { useContext } from 'react';
-import { View, StyleSheet, Platform, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { WithLocalSvg } from 'react-native-svg/css';
 import ContentLoader, { Circle } from 'react-content-loader/native';
 import { IconSize } from './IconEnum';
-import CircleIcon from './circle/CircleIcon.native';
-import StatusIcon from './status/StatusIcon.native';
-import TextIcon from './text/TextIcon.native';
 import { getAlignStyle } from '../../objects/facets/Alignable';
 import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 import { ComponentName } from '../enumsComponentsName';
 import { TrilogyThemeContext } from '../../context/providerTheme.native';
+import { StatesContext } from '../../context/providerStates';
+import Text from '../../components/text/Text.native';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -18,39 +18,43 @@ import { TrilogyThemeContext } from '../../context/providerTheme.native';
  * @param status SUCCESS|ERROR|WARNING|PRIMARY|TERTIARY|WHITE|GREY If CircleIcon or not
  * @param circled true-false if CircleIcon
  * @param content If TextIcon use it for text
- * @param position UP|DOWN|LEFT|RIGHT
  * @param stacked {boolean} Stacked icon
  * @param backgroundColor {TrilogyColor} Custom Background color only if circled
  * @param color {IconColor} Custom Icon Color
  * @param statusPosition {IconStatusPosition} Position for icon with status (TOP|BOTTOM)
  * @param stretched {boolean} Stretched icon
- * @param style {Object} Additional styles
  * @param onClick {Function} onClick Event Icon
- * @param align {Alignable} Progress Radial Alignement
+ * @param align { Alignable | AlignableValues} align content
  * @param skeleton {boolean} Icon Skeleton
  */
-const Icon = ({ size, name, status, circled, content, position, stacked, badgeContent, statusPosition, stretched, color, backgroundColor, onClick, align, skeleton, style, testId, ...others }) => {
-    const { theme: { icons }, } = useContext(TrilogyThemeContext);
-    const defaultSize = (size === IconSize.HUGE && 66) ||
+var Icon = function (_a) {
+    var size = _a.size, name = _a.name, circled = _a.circled, stretched = _a.stretched, color = _a.color, backgroundColor = _a.backgroundColor, onClick = _a.onClick, align = _a.align, skeleton = _a.skeleton, testId = _a.testId, others = __rest(_a, ["size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "align", "skeleton", "testId"]);
+    var icons = useContext(TrilogyThemeContext).theme.icons;
+    var statesContext = useContext(StatesContext);
+    var content = '';
+    var style = {};
+    var defaultSize = (size === IconSize.HUGE && 66) ||
         (size === IconSize.LARGE && 44) ||
         (size === IconSize.MEDIUM && 30) ||
         (size === IconSize.SMALL && 20) ||
         (size === IconSize.SMALLER && 16) ||
         20;
-    const iconColor = (color && getColorStyle(color)) || (status && getColorStyle(status)) || getColorStyle(TrilogyColor.TERTIARY);
-    const iconSkeletonRadius = (size === IconSize.HUGE && 50) ||
+    var iconColor = (color && getColorStyle(color)) ||
+        (statesContext.inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
+        getColorStyle(TrilogyColor.MAIN);
+    var iconSkeletonRadius = (size === IconSize.HUGE && 50) ||
         (size === IconSize.LARGE && 35) ||
         (size === IconSize.MEDIUM && 25) ||
         (size === IconSize.SMALL && 15) ||
         (size === IconSize.SMALLER && 10) ||
         15;
-    const circledWidth = (size === IconSize.HUGE && 99) ||
+    var circledWidth = (size === IconSize.HUGE && 99) ||
         (size === IconSize.LARGE && 66) ||
         (size === IconSize.MEDIUM && 48) ||
         (size === IconSize.SMALL && 32) ||
         (size === IconSize.SMALLER && 38) ||
         32;
-    const styles = StyleSheet.create({
+    var styles = StyleSheet.create({
         rootView: {
             alignSelf: getAlignStyle(align),
         },
@@ -75,43 +79,36 @@ const Icon = ({ size, name, status, circled, content, position, stacked, badgeCo
             width: circledWidth,
             height: circledWidth,
             borderRadius: iconSkeletonRadius,
-            backgroundColor: getColorStyle(TrilogyColor.GREY_LIGHTER),
+            backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
             overflow: 'hidden',
         },
     });
-    const IconSkeleton = () => (React.createElement(ContentLoader, { style: styles.skeleton, ...others },
+    var IconSkeleton = function () { return (React.createElement(ContentLoader, __assign({ style: styles.skeleton }, others),
         React.createElement(View, { style: { opacity: 0 } }),
         Platform.OS === 'android' && (React.createElement(View, null, (size === IconSize.HUGE && React.createElement(Circle, { cx: '50', cy: '50', r: '50' })) ||
             (size === IconSize.LARGE && React.createElement(Circle, { cx: '33', cy: '33', r: '33' })) ||
             (size === IconSize.MEDIUM && React.createElement(Circle, { cx: '23', cy: '23', r: '23' })) ||
-            (size === IconSize.SMALL && React.createElement(Circle, { cx: '15', cy: '15', r: '15' })) || React.createElement(Circle, { cx: '15', cy: '15', r: '15' })))));
+            (size === IconSize.SMALL && React.createElement(Circle, { cx: '15', cy: '15', r: '15' })) || React.createElement(Circle, { cx: '15', cy: '15', r: '15' }))))); };
     if (skeleton) {
         return React.createElement(IconSkeleton, null);
     }
-    let iconView = React.createElement(View, null);
+    var iconView = React.createElement(View, null);
     if (name && icons) {
         if (stretched && !circled) {
-            iconView = (React.createElement(View, { style: styles.stretched },
-                React.createElement(WithLocalSvg, { style: [styles.iconCircled, styles.icon], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: getColorStyle(TrilogyColor.WHITE) })));
-        } /* status icon */
-        else if (status && !circled && !stretched) {
-            // TODO: fix status icon
-            iconView = (React.createElement(StatusIcon, { name: name, status: status, statusPosition: statusPosition, size: defaultSize, stretched: stretched, color: iconColor }));
+            iconView = (React.createElement(View, { style: styles.stretched, testID: "".concat(testId, "-stretched") },
+                React.createElement(WithLocalSvg, { style: [styles.iconCircled, styles.icon], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: getColorStyle(TrilogyColor.BACKGROUND) })));
         }
         else if (circled) {
-            iconView = (React.createElement(CircleIcon, { name: name, size: defaultSize, color: iconColor, content: content, circledWidth: circledWidth, position: position, stacked: stacked, backgroundColor: backgroundColor }));
-        } /* Text icon */
-        else if (content && !badgeContent) {
-            iconView = (React.createElement(TextIcon, { name: name, content: content, size: defaultSize, position: position, stretched: stretched, color: iconColor, stacked: stacked }));
+            iconView = React.createElement(Text, null, "FAUT CORRIGER \u00C7A (circled icon)");
         }
         else {
-            iconView = (React.createElement(View, { ...others },
+            iconView = (React.createElement(View, __assign({}, others),
                 React.createElement(WithLocalSvg, { style: [styles.icon, style], asset: icons[name.toString().replace('tri-picto-', '').replace('tri-', '')], width: defaultSize, height: defaultSize, color: iconColor })));
         }
     }
     return onClick ? (React.createElement(View, { style: styles.rootView, testID: testId },
-        React.createElement(TouchableOpacity, { style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85 }, iconView))) : (React.createElement(View, { style: styles.rootView, testID: testId }, iconView));
+        React.createElement(TouchableOpacity, { style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85, testID: "".concat(testId, "-pressable") }, iconView))) : (React.createElement(View, { style: styles.rootView, testID: testId }, iconView));
 };
 Icon.displayName = ComponentName.Icon;
 export default Icon;
-//# sourceMappingURL=Icon.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vSWNvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN6QyxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDM0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ25ELE9BQU8sYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sNkJBQTZCLENBQUE7QUFFbkUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUNyQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDMUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQXNCLE1BQU0sd0JBQXdCLENBQUE7QUFDeEYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3RELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLElBQUksTUFBTSwrQkFBK0IsQ0FBQTtBQUVoRDs7Ozs7Ozs7Ozs7Ozs7OztHQWdCRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQUMsRUFZRjtJQVhWLElBQUEsSUFBSSxVQUFBLEVBQ0osSUFBSSxVQUFBLEVBQ0osT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsS0FBSyxXQUFBLEVBQ0wsZUFBZSxxQkFBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FYRyw4R0FZYixDQURVO0lBR0UsSUFB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

package/lib/components/icon/IconEnum.d.ts

@@ -16,14 +16,11 @@ export type IconSizeValues = `${IconSize}`;
  * Icon Status
  */
 export declare enum IconStatus {
-    SUCCESS = "success",
-    ERROR = "error",
-    WARNING = "warning",
-    TERTIARY = "tertiary",
-    PRIMARY = "primary",
-    INFO = "info",
-    WHITE = "white",
-    GREY = "grey"
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR",
+    WARNING = "WARNING",
+    INFO = "INFO",
+    WHITE = "WHITE"
 }
 /**
  * Icon Status values
@@ -37,10 +34,12 @@ export declare enum IconColor {
     ERROR = "ERROR",
     INFO = "INFO",
     WARNING = "WARNING",
-    TERTIARY = "TERTIARY",
+    MAIN = "MAIN",
+    BACKGROUND = "BACKGROUND",
+    ACCENT = "ACCENT",
+    NEUTRAL = "NEUTRAL",
     WHITE = "WHITE",
-    GREY = "GREY",
-    PRIMARY = "PRIMARY"
+    GREY = "NEUTRAL"
 }
 /**
  * Icon Color values

package/lib/components/icon/IconEnum.js

@@ -14,14 +14,11 @@ export var IconSize;
  */
 export var IconStatus;
 (function (IconStatus) {
-    IconStatus["SUCCESS"] = "success";
-    IconStatus["ERROR"] = "error";
-    IconStatus["WARNING"] = "warning";
-    IconStatus["TERTIARY"] = "tertiary";
-    IconStatus["PRIMARY"] = "primary";
-    IconStatus["INFO"] = "info";
-    IconStatus["WHITE"] = "white";
-    IconStatus["GREY"] = "grey";
+    IconStatus["SUCCESS"] = "SUCCESS";
+    IconStatus["ERROR"] = "ERROR";
+    IconStatus["WARNING"] = "WARNING";
+    IconStatus["INFO"] = "INFO";
+    IconStatus["WHITE"] = "WHITE";
 })(IconStatus || (IconStatus = {}));
 /**
  * Icon Color
@@ -32,10 +29,12 @@ export var IconColor;
     IconColor["ERROR"] = "ERROR";
     IconColor["INFO"] = "INFO";
     IconColor["WARNING"] = "WARNING";
-    IconColor["TERTIARY"] = "TERTIARY";
+    IconColor["MAIN"] = "MAIN";
+    IconColor["BACKGROUND"] = "BACKGROUND";
+    IconColor["ACCENT"] = "ACCENT";
+    IconColor["NEUTRAL"] = "NEUTRAL";
     IconColor["WHITE"] = "WHITE";
-    IconColor["GREY"] = "GREY";
-    IconColor["PRIMARY"] = "PRIMARY";
+    IconColor["GREY"] = "NEUTRAL";
 })(IconColor || (IconColor = {}));
 /**
  * Text Icon Direction
@@ -59,4 +58,4 @@ export var IconStatusPosition;
     IconStatusPosition["TOP"] = "top";
     IconStatusPosition["BOTTOM"] = "bottom";
 })(IconStatusPosition || (IconStatusPosition = {}));
-//# sourceMappingURL=IconEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbkVudW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vSWNvbkVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxRQU1YO0FBTkQsV0FBWSxRQUFRO0lBQ2xCLDJCQUFlLENBQUE7SUFDZiw2QkFBaUIsQ0FBQTtJQUNqQiwyQkFBZSxDQUFBO0lBQ2YseUJBQWEsQ0FBQTtJQUNiLCtCQUFtQixDQUFBO0FBQ3JCLENBQUMsRUFOVyxRQUFRLEtBQVIsUUFBUSxRQU1uQjtBQU9EOztHQUVHO0FBQ0gsTUFBTSxDQUFOLElBQVksVUFNWDtBQU5ELFdBQVksVUFBVTtJQUNwQixpQ0FBbUIsQ0FBQTtJQUNuQiw2QkFBZSxDQUFBO0lBQ2YsaUNBQW1CLENBQUE7SUFDbkIsMkJBQWEsQ0FBQTtJQUNiLDZCQUFlLENBQUE7QUFDakIsQ0FBQyxFQU5XLFVBQVUsS0FBVixVQUFVLFFBTXJCO0FBT0Q7O0dBRUc7QUFDSCxNQUFNLENBQU4sSUFBWSxTQVdYO0FBWEQsV0FBWSxTQUFTO0lBQ25CLGdDQUFtQixDQUFBO0lBQ25CLDRCQUFlLENBQUE7SUFDZiwwQkFBYSxDQUFBO0lBQ2IsZ0NBQW1CLENBQUE7SUFDbkIsMEJBQWEsQ0FBQTtJQUNiLHNDQUF5QixDQUFBO0lBQ3pCLDhCQUFpQixDQUFBO0lBQ2pCLGdDQUFtQixDQUFBO0lBQ25CLDRCQUFlLENBQUE7SUFDZiw2QkFBZ0IsQ0FBQTtBQUNsQixDQUFDLEVBWFcsU0FBUyxLQUFULFNBQVMsUUFXcEI7QUFPRDs7R0FFRztBQUVILE1BQU0sQ0FBTixJQUFZLFlBS1g7QUFMRCxXQUFZLFlBQVk7SUFDdEIseUJBQVMsQ0FBQTtJQUNULDZCQUFhLENBQUE7SUFDYiw2QkFBYSxDQUFBO0lBQ2IsK0JBQWUsQ0FBQTtBQUNqQixDQUFDLEVBTFcsWUFBWSxLQUFaLFlBQVksUUFLdkI7QUFPRCxNQUFNLENBQU4sSUFBWSxjQUtYO0FBTEQsV0FBWSxjQUFjO0lBQ3hCLDZCQUFXLENBQUE7SUFDWCx5QkFBTyxDQUFBO0lBQ1AseUJBQU8sQ0FBQTtJQUNQLCtCQUFhLENBQUE7QUFDZixDQUFDLEVBTFcsY0FBYyxLQUFkLGNBQWMsUUFLekI7QUFJRCxNQUFNLENBQU4sSUFBWSxrQkFHWDtBQUhELFdBQVksa0JBQWtCO0lBQzVCLGlDQUFXLENBQUE7SUFDWCx1Q0FBaUIsQ0FBQTtBQUNuQixDQUFDLEVBSFcsa0JBQWtCLEtBQWxCLGtCQUFrQixRQUc3QiJ9

package/lib/components/icon/IconNameEnum.js

@@ -25,4 +25,4 @@ export var IconName;
     IconName["PICTO_PAYMENT_PAYPAL"] = "tri-picto-payment-paypal";
     IconName["PICTO_PAYMENT_VISA"] = "tri-picto-payment-visa";
 })(IconName || (IconName = {}));
-//# sourceMappingURL=IconNameEnum.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbk5hbWVFbnVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9pY29uL0ljb25OYW1lRW51bS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQU4sSUFBWSxRQXlCWDtBQXpCRCxXQUFZLFFBQVE7SUFDbEIsK0JBQW1CLENBQUE7SUFDbkIseUNBQTZCLENBQUE7SUFDN0IseUNBQTZCLENBQUE7SUFDN0IsMkNBQStCLENBQUE7SUFDL0IscUNBQXlCLENBQUE7SUFDekIsNkJBQWlCLENBQUE7SUFDakIsNkNBQWlDLENBQUE7SUFDakMsK0JBQW1CLENBQUE7SUFDbkIseURBQTZDLENBQUE7SUFDN0MsdUNBQTJCLENBQUE7SUFDM0IsMkJBQWUsQ0FBQTtJQUNmLDZDQUFpQyxDQUFBO0lBQ2pDLGlDQUFxQixDQUFBO0lBQ3JCLCtCQUFtQixDQUFBO0lBQ25CLHNDQUEwQixDQUFBO0lBQzFCLCtCQUFtQixDQUFBO0lBQ25CLGlEQUFxQyxDQUFBO0lBQ3JDLHlEQUE2QyxDQUFBO0lBQzdDLGlEQUFxQyxDQUFBO0lBQ3JDLCtFQUFtRSxDQUFBO0lBQ25FLHFEQUF5QyxDQUFBO0lBQ3pDLHFFQUF5RCxDQUFBO0lBQ3pELDZEQUFpRCxDQUFBO0lBQ2pELHlEQUE2QyxDQUFBO0FBQy9DLENBQUMsRUF6QlcsUUFBUSxLQUFSLFFBQVEsUUF5Qm5CIn0=

package/lib/components/icon/IconProps.d.ts

@@ -1,32 +1,16 @@
-/// <reference types="react" />
-import { IconSize, IconStatus, IconPosition, TextIconMarkup, IconStatusPosition, IconColor, IconStatusValues, IconSizeValues, IconPositionValues, IconStatusPositionValues, IconColorValues, TextIconMarkupValues } from './IconEnum';
+import { IconColor, IconColorValues, IconSize, IconSizeValues } from './IconEnum';
 import { IconName, IconNameValues } from './IconNameEnum';
-import { Stacked } from '../../objects/facets/Stacked';
-import { AlignableProps } from '../../objects/facets/Alignable';
-import { Accessibility, Clickable, TrilogyColor, TrilogyColorValues } from '../../objects';
-type Styles = {
-    [key: string]: unknown;
-};
+import { Accessibility, AlignableProps, Clickable, Dev, Stacked, TrilogyColor, TrilogyColorValues } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Icon Interface
  */
-export interface IconProps extends Stacked, AlignableProps, Clickable, Accessibility {
+export interface IconProps extends Stacked, AlignableProps, Clickable, Accessibility, Dev, CommonProps {
     name: IconName | IconNameValues;
-    status?: IconStatus | IconStatusValues;
-    badgeContent?: string;
     size?: IconSize | IconSizeValues;
     circled?: boolean;
-    content?: string | React.ReactNode;
-    position?: IconPosition | IconPositionValues;
-    markup?: TextIconMarkup | TextIconMarkupValues;
-    statusPosition?: IconStatusPosition | IconStatusPositionValues;
     stretched?: boolean;
     color?: IconColor | IconColorValues | TrilogyColorValues | TrilogyColor | string;
     backgroundColor?: TrilogyColor | TrilogyColorValues;
-    className?: string;
-    textClassName?: string;
-    style?: Styles;
     skeleton?: boolean;
-    marginless?: boolean;
 }
-export {};

package/lib/components/icon/IconProps.js

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