@trilogy-ds/react 0.0.1-beta-143 → 0.0.1-beta-sc-1

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

@@ -1,21 +1,4 @@
-/// <reference types="react" />
-import { IconProps } from './IconProps';
-/**
- * Icon Component
- * @param size Size of Icon
- * @param name IconName
- * @param status SUCCESS|ERROR If CircleIcon or not
- * @param circled true-false if CircleIcon
- * @param content If TextIcon use it for text
- * @param badgeContent {string} Icon with bage content
- * @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
- * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className Additionnal css classes
- * - -------------------------- NATIVE PROPERTIES -------------------------------
- */
-declare const Icon: ({ className, id, size, name, circled, stretched, color, backgroundColor, onClick, skeleton, ...others }: IconProps) => JSX.Element;
-export default Icon;
+import React from 'react';
+import { IconProps } from '../../components/icon/IconProps';
+declare const _default: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/components/icon/Icon.js

@@ -1,12 +1,13 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
 import clsx from 'clsx';
-import { getColorClassName, TrilogyColor } from '../../objects/facets/Color';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
-import { getBackgroundClassName } from '../../objects/atoms/Background';
-import { IconStatus } from '../../components/icon/IconEnum';
-import { getStatusBackground, has, is } from '../../services';
+import React from 'react';
+import CircleIcon from '../../components/icon/circle/index';
+import StatusIcon from '../../components/icon/status/index';
+import TextIcon from '../../components/icon/text/index';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getAlignClassName } from '../../objects/facets/Alignable';
+import { getColorClassName } from '../../objects/facets/Color';
+import { has, is } from '../../services/classify';
 /**
  * Icon Component
  * @param size Size of Icon
@@ -14,26 +15,100 @@ import { getStatusBackground, has, is } from '../../services';
  * @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} delete margin
+ * @param align { Alignable | AlignableValues} align content
  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param textClassName {string} Text's className
  * @param className Additionnal css classes
+ * @param markup {TextIconMarkup} Available markup for Icon DIV|P|SPAN|A
+ * @param verticalAlign {Alignable | AlignableValues} align vertical content
  * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param style {object} Additional styles
  */
-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))) ||
-        (status && getStatusBackground(status, IconStatus.INFO)) ||
-        (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' })));
+var Icon = function (_a, ref) {
+    var className = _a.className, textClassName = _a.textClassName, size = _a.size, name = _a.name, status = _a.status, circled = _a.circled, content = _a.content, position = _a.position, markup = _a.markup, stacked = _a.stacked, badgeContent = _a.badgeContent, statusPosition = _a.statusPosition, stretched = _a.stretched, color = _a.color, backgroundColor = _a.backgroundColor, onClick = _a.onClick, align = _a.align, skeleton = _a.skeleton, verticalAlign = _a.verticalAlign, testId = _a.testId, marginless = _a.marginless, others = __rest(_a, ["className", "textClassName", "size", "name", "status", "circled", "content", "position", "markup", "stacked", "badgeContent", "statusPosition", "stretched", "color", "backgroundColor", "onClick", "align", "skeleton", "verticalAlign", "testId", "marginless"]);
+    var classes = hashClass(clsx('icon', stretched && is('stretched'), size && is(size), stacked && is('stacked'), color && is("".concat(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("".concat(getAlignClassName(verticalAlign))), className);
+    var alignClasses = hashClass(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, ref: ref },
+                React.createElement(CircleIcon, __assign({ ref: ref, testId: testId, onClick: onClick && onClick, className: className, name: name, status: status, size: size, color: color, backgroundColor: backgroundColor }, others))));
+        }
+        return (React.createElement(CircleIcon, __assign({ ref: ref, 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, ref: ref },
+                React.createElement(StatusIcon, __assign({ ref: ref, testId: testId, onClick: onClick && onClick, statusPosition: statusPosition, className: className, name: name, size: size, status: status }, others))));
+        }
+        return (React.createElement(StatusIcon, __assign({ ref: ref, 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, ref: ref },
+                React.createElement(TextIcon, __assign({ ref: ref, 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, __assign({ ref: ref, 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, ref: ref },
+                React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others),
+                    React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' }),
+                    React.createElement("span", { className: hashClass(clsx('badge', is('up'))) }, badgeContent)),
+                content && React.createElement("span", { className: hashClass(clsx(textClassName)) }, content)));
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others, { ref: ref }),
+                React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' }),
+                React.createElement("span", { className: hashClass(clsx('badge', is('up'))) }, badgeContent)),
+            content && React.createElement("span", { className: hashClass(clsx(textClassName)) }, content)));
+    }
+    // Stretched icon
+    if (stretched) {
+        if (align) {
+            return (React.createElement("div", { className: alignClasses, ref: ref },
+                React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others),
+                    React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' }))));
+        }
+        return (React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others, { ref: ref }),
+            React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' })));
+    }
+    // Custom Colored Icon
+    if (color) {
+        if (align) {
+            return (React.createElement("div", { className: alignClasses, ref: ref },
+                React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others),
+                    React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' }))));
+        }
+        return (React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others, { ref: ref }),
+            React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' })));
+    }
+    if (align) {
+        return (React.createElement("div", { className: alignClasses, ref: ref },
+            React.createElement("span", __assign({ onClick: onClick && onClick, className: classes }, others),
+                React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' }))));
+    }
+    // Static default Icon
+    return (React.createElement("span", __assign({ "data-testid": testId, onClick: onClick && onClick, className: classes }, others, { ref: ref }),
+        React.createElement("i", { className: hashClass(clsx(name)), "aria-hidden": 'true' })));
 };
-export default Icon;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaWNvbi9JY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxZQUFZLEVBQXNCLE1BQU0sd0JBQXdCLENBQUE7QUFDNUYsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDbkUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBRXpEOzs7Ozs7Ozs7Ozs7Ozs7O0dBZ0JHO0FBRUgsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQVlGO0lBWFYsSUFBQSxTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixJQUFJLFVBQUEsRUFDSixJQUFJLFVBQUEsRUFDSixPQUFPLGFBQUEsRUFDUCxTQUFTLGVBQUEsRUFDVCxLQUFLLFdBQUEsRUFDTCxlQUFlLHFCQUFBLEVBQ2YsT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ0wsTUFBTSxjQVhHLDhHQVliLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLFVBQVUsR0FDZCxDQUFDLGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQztRQUNqRSxDQUFDLE1BQU0sSUFBSSxtQkFBbUIsQ0FBQyxNQUFNLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hELENBQUMsT0FBTyxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztRQUMzRCxFQUFFLENBQUE7SUFFSixJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsTUFBTSxFQUNOLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLElBQUksSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQ2hCLE9BQU8sSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hCLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ3RDLEtBQUssSUFBSSxFQUFFLENBQUMsVUFBRyxpQkFBaUIsQ0FBQyxLQUEwQyxDQUFDLENBQUUsQ0FBQyxFQUMvRSxRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN6QixVQUFVLEVBQ1YsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCx1Q0FBTSxFQUFFLEVBQUUsRUFBRSxFQUFFLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtRQUN2RSwyQkFBRyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsaUJBQWMsTUFBTSxHQUFHLENBQzdELENBQ1IsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsSUFBSSxDQUFBIn0=
+export default React.forwardRef(Icon);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvaWNvbi9JY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLFVBQVUsTUFBTSxnQ0FBZ0MsQ0FBQTtBQUd2RCxPQUFPLFVBQVUsTUFBTSxnQ0FBZ0MsQ0FBQTtBQUN2RCxPQUFPLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDOUQsT0FBTyxFQUFFLGlCQUFpQixFQUFvQyxNQUFNLHdCQUF3QixDQUFBO0FBQzVGLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5Qkc7QUFFSCxJQUFNLElBQUksR0FBRyxVQUNYLEVBdUJZLEVBQ1osR0FBOEI7SUF2QjVCLElBQUEsU0FBUyxlQUFBLEVBQ1QsYUFBYSxtQkFBQSxFQUNiLElBQUksVUFBQSxFQUNKLElBQUksVUFBQSxFQUNKLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLFlBQVksa0JBQUEsRUFDWixjQUFjLG9CQUFBLEVBQ2QsU0FBUyxlQUFBLEVBQ1QsS0FBSyxXQUFBLEVBQ0wsZUFBZSxxQkFBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLGFBQWEsbUJBQUEsRUFDYixNQUFNLFlBQUEsRUFDTixVQUFVLGdCQUFBLEVBQ1AsTUFBTSxjQXRCWCxtUUF1QkMsQ0FEVTtJ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

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

@@ -1,25 +1,5 @@
-/// <reference types="react" />
-import { IconProps } from './IconProps';
-import { ComponentName } from '../enumsComponentsName';
-/**
- * Icon Component
- * @param size Size of Icon
- * @param name IconName
- * @param badgeContent {string} Display badge with icon
- * @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 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 onClick {Function} onClick Event Icon
- * @param align { Alignable | AlignableValues} align content
- * @param skeleton {boolean} Icon Skeleton
- */
-declare const Icon: {
-    ({ size, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }: IconProps): JSX.Element;
-    displayName: ComponentName;
-};
-export default Icon;
+import React from 'react';
+import { View } from 'react-native';
+import { IconProps } from '../../components/icon/IconProps';
+declare const _default: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<View>>;
+export default _default;

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

@@ -1,15 +1,17 @@
 import { __assign, __rest } from "tslib";
 import React, { useContext } from 'react';
+import ContentLoader, { Circle } from 'react-content-loader/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 { ComponentName } from '../../components/enumsComponentsName';
+import { IconSize } from '../../components/icon/IconEnum';
+import CircleIcon from '../../components/icon/circle/CircleIcon.native';
+import StatusIcon from '../../components/icon/status/StatusIcon.native';
+import TextIcon from '../../components/icon/text/TextIcon.native';
+import { StatesContext } from '../../context/providerStates';
+import { TrilogyThemeContext } from '../../context/providerTheme.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,21 +20,21 @@ import Text from '../../components/text/Text.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 | AlignableValues} align content
  * @param skeleton {boolean} Icon Skeleton
  */
-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 Icon = function (_a, ref) {
+    var size = _a.size, name = _a.name, status = _a.status, circled = _a.circled, content = _a.content, position = _a.position, stacked = _a.stacked, badgeContent = _a.badgeContent, statusPosition = _a.statusPosition, stretched = _a.stretched, color = _a.color, backgroundColor = _a.backgroundColor, onClick = _a.onClick, align = _a.align, skeleton = _a.skeleton, style = _a.style, testId = _a.testId, others = __rest(_a, ["size", "name", "status", "circled", "content", "position", "stacked", "badgeContent", "statusPosition", "stretched", "color", "backgroundColor", "onClick", "align", "skeleton", "style", "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) ||
@@ -40,6 +42,7 @@ var Icon = function (_a) {
         (size === IconSize.SMALLER && 16) ||
         20;
     var iconColor = (color && getColorStyle(color)) ||
+        (status && getColorStyle(status)) ||
         (statesContext.inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         getColorStyle(TrilogyColor.MAIN);
     var iconSkeletonRadius = (size === IconSize.HUGE && 50) ||
@@ -95,20 +98,27 @@ var Icon = function (_a) {
     var iconView = React.createElement(View, null);
     if (name && icons) {
         if (stretched && !circled) {
-            iconView = (React.createElement(View, { style: styles.stretched, testID: "".concat(testId, "-stretched") },
+            iconView = (React.createElement(View, { style: styles.stretched, testID: "".concat(testId, "-stretched"), ref: ref },
                 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) })));
+        } /* status icon */
+        else if (status && !circled && !stretched) {
+            // TODO: fix status icon
+            iconView = (React.createElement(StatusIcon, { ref: ref, name: name, status: status, statusPosition: statusPosition, size: defaultSize, stretched: stretched, color: iconColor, testId: "".concat(testId, "-status") }));
         }
         else if (circled) {
-            iconView = React.createElement(Text, null, "FAUT CORRIGER \u00C7A (circled icon)");
+            iconView = (React.createElement(CircleIcon, { ref: ref, name: name, size: defaultSize, color: iconColor, content: content, circledWidth: circledWidth, position: position, stacked: stacked, backgroundColor: backgroundColor, testId: "".concat(testId, "-circled") }));
+        } /* Text icon */
+        else if (content && !badgeContent) {
+            iconView = (React.createElement(TextIcon, { ref: ref, name: name, content: content, size: defaultSize, position: position, stretched: stretched, color: iconColor, stacked: stacked, testId: "".concat(testId, "-content") }));
         }
         else {
-            iconView = (React.createElement(View, __assign({}, others),
+            iconView = (React.createElement(View, __assign({}, others, { ref: ref }),
                 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, testID: "".concat(testId, "-pressable") }, iconView))) : (React.createElement(View, { style: styles.rootView, testID: testId }, iconView));
+    return onClick ? (React.createElement(View, { style: styles.rootView, testID: testId, ref: ref },
+        React.createElement(TouchableOpacity, { style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85, testID: "".concat(testId, "-pressable") }, iconView))) : (React.createElement(View, { style: styles.rootView, testID: testId, ref: ref }, iconView));
 };
 Icon.displayName = ComponentName.Icon;
-export default Icon;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vSWNvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN6QyxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDM0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ25ELE9BQU8sYUFBYSxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sNkJBQTZCLENBQUE7QUFFbkUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUNyQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDMUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQXNCLE1BQU0sd0JBQXdCLENBQUE7QUFDeEYsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3RELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQTtBQUN4RCxPQUFPLElBQUksTUFBTSwrQkFBK0IsQ0FBQTtBQUVoRDs7Ozs7Ozs7Ozs7Ozs7OztHQWdCRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQUMsRUFZRjtJQVhWLElBQUEsSUFBSSxVQUFBLEVBQ0osSUFBSSxVQUFBLEVBQ0osT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsS0FBSyxXQUFBLEVBQ0wsZUFBZSxxQkFBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNILE1BQU0sY0FYRyw4R0FZYixDQURVO0lBR0UsSUFB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
+export default React.forwardRef(Icon);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ljb24vSWNvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN6QyxPQUFPLGFBQWEsRUFBRSxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ25FLE9BQU8sRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMzRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFFbkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUVyRCxPQUFPLFVBQVUsTUFBTSw0Q0FBNEMsQ0FBQTtBQUNuRSxPQUFPLFVBQVUsTUFBTSw0Q0FBNEMsQ0FBQTtBQUNuRSxPQUFPLFFBQVEsTUFBTSx3Q0FBd0MsQ0FBQTtBQUM3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDeEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0NBQWdDLENBQUE7QUFDcEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzFELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFzQixNQUFNLHdCQUF3QixDQUFBO0FBRXhGOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQkc7QUFDSCxJQUFNLElBQUksR0FBRyxVQUNYLEVBbUJZLEVBQ1osR0FBb0I7SUFuQmxCLElBQUEsSUFBSSxVQUFBLEVBQ0osSUFBSSxVQUFBLEVBQ0osTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ1AsT0FBTyxhQUFBLEVBQ1AsUUFBUSxjQUFBLEVBQ1IsT0FBTyxh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

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

@@ -1,16 +1,30 @@
-import { IconColor, IconColorValues, IconSize, IconSizeValues } from './IconEnum';
-import { IconName, IconNameValues } from './IconNameEnum';
+/// <reference types="react" />
+import { IconColor, IconColorValues, IconPosition, IconPositionValues, IconSize, IconSizeValues, IconStatus, IconStatusPosition, IconStatusPositionValues, IconStatusValues, TextIconMarkup, TextIconMarkupValues } from '../../components/icon/IconEnum';
+import { IconName, IconNameValues } from '../../components/icon/IconNameEnum';
 import { Accessibility, AlignableProps, Clickable, Dev, Stacked, TrilogyColor, TrilogyColorValues } from '../../objects';
-import { CommonProps } from '../../objects/facets/CommonProps';
+type Styles = {
+    [key: string]: unknown;
+};
 /**
  * Icon Interface
  */
-export interface IconProps extends Stacked, AlignableProps, Clickable, Accessibility, Dev, CommonProps {
+export interface IconProps extends Stacked, AlignableProps, Clickable, Accessibility, Dev {
     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/IconPropsDefaults.js

@@ -50,6 +50,29 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
+  "status": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "WHITE",
+      "SUCCESS",
+      "ERROR",
+      "WARNING",
+      "INFO",
+      "WHITE"
+    ]
+  },
+  "badgeContent": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "size": {
     "type": "enum",
     "values": [
@@ -74,6 +97,58 @@ export default {
       "true"
     ]
   },
+  "content": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "position": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "up",
+      "down",
+      "left",
+      "right",
+      "up",
+      "down",
+      "left",
+      "right"
+    ]
+  },
+  "markup": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "a",
+      "div",
+      "p",
+      "span",
+      "div",
+      "a",
+      "p",
+      "span"
+    ]
+  },
+  "statusPosition": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "top",
+      "bottom",
+      "top",
+      "bottom"
+    ]
+  },
   "stretched": {
     "type": "boolean",
     "values": [
@@ -97,8 +172,6 @@ export default {
       "INFO",
       "WARNING",
       "ERROR",
-      "MAIN",
-      "ACCENT",
       "WHITE",
       "MAIN",
       "MAIN_FADE",
@@ -117,7 +190,9 @@ export default {
       "NEUTRAL",
       "NEUTRAL_FADE",
       "WHITE",
+      "MAIN",
       "MAIN_FADE",
+      "ACCENT",
       "FONT",
       "SUCCESS_FADE",
       "INFO_FADE",
@@ -129,6 +204,27 @@ export default {
       "NEUTRAL_FADE"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "textClassName": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "style": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "Styles"
+    ]
+  },
   "skeleton": {
     "type": "boolean",
     "values": [
@@ -137,6 +233,14 @@ export default {
       "true"
     ]
   },
+  "marginless": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "stacked": {
     "type": "boolean",
     "values": [
@@ -189,19 +293,5 @@ export default {
       "undefined",
       "string"
     ]
-  },
-  "id": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
   }
 };

package/lib/components/icon/circle/CircleIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../../../components/icon/IconProps';
+declare const _default: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/components/icon/circle/CircleIcon.js

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import React from 'react';
+import { IconStatus } from '../../../components/icon/IconEnum';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { getBackgroundClassName, getTextClassName } from '../../../objects/atoms';
+import { TrilogyColor } from '../../../objects/facets/Color';
+import { getStatusBackground, has, is } from '../../../services/index';
+var CircleIcon = function (_a, ref) {
+    var className = _a.className, name = _a.name, status = _a.status, size = _a.size, color = _a.color, backgroundColor = _a.backgroundColor, testId = _a.testId;
+    var background = (backgroundColor && has(getBackgroundClassName(backgroundColor))) ||
+        getStatusBackground(status || '', IconStatus.INFO) ||
+        has(getBackgroundClassName(TrilogyColor.MAIN));
+    var classes = hashClass(clsx('icon', color ? has(getTextClassName(color)) : has('text-white'), color ? is(color) : is(TrilogyColor.BACKGROUND), [is("".concat(size))], is('circled'), background, className));
+    var circledIconClasses = hashClass(clsx(name));
+    return (React.createElement("span", { className: classes, "data-testid": testId, ref: ref },
+        React.createElement("i", { className: circledIconClasses })));
+};
+export default React.forwardRef(CircleIcon);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2lyY2xlSWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvaWNvbi9jaXJjbGUvQ2lyY2xlSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFFdkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBQzFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNyRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBRS9ELElBQU0sVUFBVSxHQUFHLFVBQ2pCLEVBQTRFLEVBQzVFLEdBQThCO1FBRDVCLFNBQVMsZUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxNQUFNLFlBQUE7SUFHL0QsSUFBTSxVQUFVLEdBQ2QsQ0FBQyxlQUFlLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUM7UUFDakUsbUJBQW1CLENBQUMsTUFBTSxJQUFJLEVBQUUsRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDO1FBQ2xELEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQTtJQUVoRCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLElBQUksQ0FDRixNQUFNLEVBQ04sS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUN4RCxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsRUFDL0MsQ0FBQyxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUUsQ0FBQyxDQUFDLEVBQ2YsRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUNiLFVBQVUsRUFDVixTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsSUFBTSxrQkFBa0IsR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUE7SUFFaEQsT0FBTyxDQUNMLDhCQUFNLFNBQVMsRUFBRSxPQUFPLGlCQUFlLE1BQU0sRUFBRSxHQUFHLEVBQUUsR0FBRztRQUNyRCwyQkFBRyxTQUFTLEVBQUUsa0JBQWtCLEdBQUksQ0FDL0IsQ0FDUixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxDQUFBIn0=

package/lib/components/icon/circle/CircleIcon.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+import { CircleIconProps } from '../../../components/icon/circle/CircleIconProps';
+declare const _default: React.ForwardRefExoticComponent<CircleIconProps & React.RefAttributes<View>>;
+export default _default;