@trilogy-ds/react 0.0.1-beta-148 → 0.0.1-beta-149

package/lib/components/card/Card.js

@@ -1,39 +1,53 @@
-import { __assign, __rest } from "tslib";
-import React, { createContext } from 'react';
-import clsx from 'clsx';
-import { is } from '../../services/classify';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState, createContext } from "react";
+import clsx from "clsx";
+import { CardMarkup } from "./CardProps";
+import { has, is } from "../../services/classify";
+import { getAlignClassName, getBackgroundClassName } from "../../objects";
+import { hashClass } from "../../helpers";
+import { useTrilogyContext } from "../../context";
 export var CardContext = createContext({ horizontal: false });
 /**
  * Card Component
  * @param flat {boolean} Adding border for Card content
  * @param horizontal {boolean} Horizontal Card orientation
  * @param backgroundColor {TrilogyColor} Card Background Color
+ * @param inverted {boolean} Inverted Card Color
  * @param floating {boolean} Floating card
  * @param onClick {Function} onClick Event
+ * @param children {React.ReactNode}
  * @param skeleton {boolean} Loading card
  * @param reversed {boolean} Reversed card
  * @param active {boolean} Activated card
  * - ------------------ WEB PROPERTIES -----------------------
  * @param className {string} Additionnal CSS Classes
+ * @param to {string} Card link
  * @param fullheight
+ * @param markup {BoxMarkup} Clickable Card => CardMarkup.A Not clickable box => CardMarkup.DIV || null
+ * @param backgroundSrc {string} Source of background Image
+ * @param align { Alignable | AlignableValues} align content
+ * @param justify {JustifiableProps.justify?} Justifiable | "JUSTIFIED_CENTER" | "JUSTIFIED_START" | "JUSTIFIED_END" | "SPACE_BETWEEN" | undefined
+ * @param testId {string} Test Id for Test Integration
  */
-var Card = function (_a) {
-    var className = _a.className, id = _a.id, flat = _a.flat, horizontal = _a.horizontal, floating = _a.floating, skeleton = _a.skeleton, onClick = _a.onClick, reversed = _a.reversed, href = _a.href, fullheight = _a.fullheight, active = _a.active, others = __rest(_a, ["className", "id", "flat", "horizontal", "floating", "skeleton", "onClick", "reversed", "href", "fullheight", "active"]);
+var Card = React.forwardRef(function (props, ref) {
+    var className = props.className, backgroundColor = props.backgroundColor, backgroundSrc = props.backgroundSrc, inverted = props.inverted, flat = props.flat, horizontal = props.horizontal, floating = props.floating, align = props.align, justify = props.justify, skeleton = props.skeleton, onClick = props.onClick, reversed = props.reversed, testId = props.testId, markup = props.markup, to = props.to, fullheight = props.fullheight, active = props.active, others = __rest(props, ["className", "backgroundColor", "backgroundSrc", "inverted", "flat", "horizontal", "floating", "align", "justify", "skeleton", "onClick", "reversed", "testId", "markup", "to", "fullheight", "active"]);
+    var _a = __read(useState(skeleton || false), 2), isLoading = _a[0], setIsLoading = _a[1];
     var styled = useTrilogyContext().styled;
+    useEffect(function () {
+        setIsLoading(skeleton || false);
+    }, [skeleton]);
     var hoverStyle = {
-        cursor: 'pointer',
+        cursor: "pointer",
     };
-    var classes = hashClass(styled, clsx('card', flat && !floating && is('flat'), horizontal && [is('horizontal'), is('vcentered')], floating && !flat && is('floating'), skeleton && is('loading'), reversed && is('reversed'), className, fullheight && is('fullheight'), active && is('active')));
-    if (href) {
-        return (React.createElement("a", __assign({ id: id, href: href, onClick: function (e) {
+    var classes = hashClass(styled, clsx("card", backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has("background"), (inverted && is("inverted")) || is("base"), flat && !floating && is("flat"), horizontal && [is("horizontal"), is("vcentered")], floating && !flat && is("floating"), align && is(getAlignClassName(align)), justify && is(justify), isLoading ? is("loading") : is("loaded"), reversed && is("reversed"), className, fullheight && is("fullheight"), active && is("active")));
+    if (markup === CardMarkup.A) {
+        return (React.createElement("a", __assign({ "data-testid": testId, href: to, onClick: function (e) {
                 // eslint-disable-next-line no-unused-expressions
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
                 e.stopPropagation();
-            } }, others, { className: classes })));
+            } }, others, { className: classes, ref: ref })));
     }
-    return (React.createElement("div", __assign({ id: id, onClick: onClick && onClick, className: classes, style: onClick && __assign({}, hoverStyle) }, others)));
-};
+    return (React.createElement("div", __assign({ "data-testid": testId, onClick: onClick && onClick, className: classes, style: onClick && __assign({}, hoverStyle) }, others, { ref: ref })));
+});
 export default Card;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY2FyZC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxhQUFhLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDNUMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3QyxNQUFNLENBQUMsSUFBTSxXQUFXLEdBQUcsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7QUFFL0Q7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQUMsRUFhWTtJQVpWLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLFVBQVUsZ0JBQUEsRUFDVixNQUFNLFlBQUEsRUFDSCxNQUFNLGNBWlgsd0hBYUMsQ0FEVTtJQUdmLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sVUFBVSxHQUF3QjtRQUN0QyxNQUFNLEVBQUUsU0FBUztLQUNsQixDQUFBO0lBRUQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLE1BQU0sRUFDTixJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksRUFBRSxDQUFDLE1BQU0sQ0FBQyxFQUMvQixVQUFVLElBQUksQ0FBQyxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQUUsRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLEVBQ2pELFFBQVEsSUFBSSxDQUFDLElBQUksSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQ25DLFFBQVEsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3pCLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQzFCLFNBQVMsRUFDVCxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUN2QixDQUNGLENBQUE7SUFFRCxJQUFJLElBQUksRUFBRTtRQUNSLE9BQU8sQ0FDTCxvQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLElBQUksRUFBRSxJQUFJLEVBQ1YsT0FBTyxFQUFFLFVBQUMsQ0FBQztnQkFDVCxpREFBaUQ7Z0JBQ2pELE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsQ0FBQTtnQkFDWixDQUFDLENBQUMsZUFBZSxFQUFFLENBQUE7WUFDckIsQ0FBQyxJQUNHLE1BQU0sSUFDVixTQUFTLEVBQUUsT0FBTyxJQUNsQixDQUNILENBQUE7S0FDRjtJQUVELE9BQU8sQ0FDTCxzQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxFQUMzQixTQUFTLEVBQUUsT0FBTyxFQUNsQixLQUFLLEVBQUUsT0FBTyxpQkFBUyxVQUFVLENBQUUsSUFDL0IsTUFBTSxFQUNWLENBQ0gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUNELGVBQWUsSUFBSSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY2FyZC9DYXJkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNqRSxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFVBQVUsRUFBYSxNQUFNLGFBQWEsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzdDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3QyxNQUFNLENBQUMsSUFBTSxXQUFXLEdBQUcsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7QUFFL0Q7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFCRztBQUNILElBQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsVUFBQyxLQUFnQixFQUFFLEdBQWlDO0lBRTlFLElBQUEsU0FBUyxHQWtCUCxLQUFLLFVBbEJFLEVBQ1QsZUFBZSxHQWlCYixLQUFLLGdCQWpCUSxFQUNmLGFBQWEsR0FnQlgsS0FBSyxjQWhCTSxFQUNiLFFBQVEsR0FlTixLQUFLLFNBZkMsRUFDUixJQUFJLEdBY0YsS0FBSyxLQWRILEVBQ0osVUFBVSxHQWFSLEtBQUssV0FiRyxFQUNWLFFBQVEsR0FZTixLQUFLLFNBWkMsRUFDUixLQUFLLEdBV0gsS0FBSyxNQVhGLEVBQ0wsT0FBTyxHQVVMLEtBQUssUUFWQSxFQUNQLFFBQVEsR0FTTixLQUFLLFNBVEMsRUFDUixPQUFPLEdBUUws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

package/lib/components/card/Card.native.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { CardProps } from './CardProps';
-import { ComponentName } from '../../components/enumsComponentsName';
+import React from "react";
+import { CardProps } from "./CardProps";
+import { ComponentName } from "../../components/enumsComponentsName";
 export declare const CardContext: React.Context<{
     floating: boolean;
     backgroundColor: {};
@@ -18,12 +18,13 @@ export declare const CardContext: React.Context<{
  * @param skeleton {boolean} Loading card
  * @param reversed {boolean} Reversed card
  * @param backgroundColor {TrilogyColor} Card Background Color
+ * @param inverted {boolean} Inverted Card Color
  * @param fullheight {boolean}
  * @param active {boolean} Activated box
  * @param others
  */
 declare const Card: {
-    ({ children, flat, horizontal, floating, onClick, skeleton, reversed, fullheight, active, ...others }: CardProps): JSX.Element;
+    ({ children, flat, horizontal, floating, onClick, skeleton, backgroundColor, reversed, fullheight, active, inverted, ...others }: CardProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Card;

package/lib/components/card/Card.native.js

@@ -1,13 +1,13 @@
 import { __assign, __rest } from "tslib";
-import React, { createContext } from 'react';
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import ContentLoader, { Rect } from 'react-content-loader/native';
-import { ComponentName } from '../../components/enumsComponentsName';
-import { StatesContext } from '../../context/providerStates';
+import React, { createContext } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
+import ContentLoader, { Rect } from "react-content-loader/native";
+import { ComponentName } from "../../components/enumsComponentsName";
+import { StatesContext } from "../../context/providerStates";
 export var CardContext = createContext({
     floating: false,
-    backgroundColor: '' || {},
+    backgroundColor: "" || {},
     horizontal: false,
     reversed: false,
     active: false,
@@ -22,32 +22,35 @@ export var CardContext = createContext({
  * @param skeleton {boolean} Loading card
  * @param reversed {boolean} Reversed card
  * @param backgroundColor {TrilogyColor} Card Background Color
+ * @param inverted {boolean} Inverted Card Color
  * @param fullheight {boolean}
  * @param active {boolean} Activated box
  * @param others
  */
 var Card = function (_a) {
-    var children = _a.children, flat = _a.flat, horizontal = _a.horizontal, floating = _a.floating, onClick = _a.onClick, skeleton = _a.skeleton, reversed = _a.reversed, fullheight = _a.fullheight, active = _a.active, others = __rest(_a, ["children", "flat", "horizontal", "floating", "onClick", "skeleton", "reversed", "fullheight", "active"]);
-    var borderColor = '#ccc';
+    var children = _a.children, flat = _a.flat, horizontal = _a.horizontal, floating = _a.floating, onClick = _a.onClick, skeleton = _a.skeleton, backgroundColor = _a.backgroundColor, reversed = _a.reversed, fullheight = _a.fullheight, active = _a.active, inverted = _a.inverted, others = __rest(_a, ["children", "flat", "horizontal", "floating", "onClick", "skeleton", "backgroundColor", "reversed", "fullheight", "active", "inverted"]);
+    var borderColor = "#ccc";
     var cardRadius = 6;
+    var colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
     var styles = StyleSheet.create({
         card: {
-            width: '100%',
+            width: "100%",
             minHeight: 100,
             borderWidth: (flat && 1) || (active && 2) || 0,
             borderColor: (flat && borderColor) ||
                 (active && getColorStyle(TrilogyColor.MAIN)) ||
                 (active === false && getColorStyle(TrilogyColor.NEUTRAL)) ||
-                'transparent',
+                "transparent",
             borderRadius: cardRadius,
+            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
             flex: fullheight ? 1 : 0,
         },
         horizontal: {
-            flexDirection: 'row',
-            maxWidth: '100%',
+            flexDirection: "row",
+            maxWidth: "100%",
         },
         shadow: {
-            shadowColor: 'rgba(0,0,0,.1)',
+            shadowColor: "rgba(0,0,0,.1)",
             shadowOffset: { width: 2, height: 4 },
             shadowOpacity: 0.8,
             shadowRadius: 2,
@@ -60,46 +63,46 @@ var Card = function (_a) {
             minHeight: 10,
         },
         skeleton: {
-            width: '100%',
+            width: "100%",
             minHeight: 50,
             backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
-            overflow: 'hidden',
+            overflow: "hidden",
             borderRadius: cardRadius,
         },
         reversed: {
-            flexDirection: 'column-reverse',
+            flexDirection: "column-reverse",
         },
     });
     var CardSkeleton = function () { return (React.createElement(ContentLoader, __assign({ style: styles.skeleton }, others, { testID: 'skeleton-id' }),
         React.createElement(View, { style: { opacity: 0 } }, children),
-        Platform.OS === 'android' && (React.createElement(View, null,
+        Platform.OS === "android" && (React.createElement(View, null,
             React.createElement(Rect, { rx: '10', ry: '10', width: '100%', height: '100%' }))))); };
     var cardView;
     if (skeleton) {
         return React.createElement(CardSkeleton, null);
     }
     if (horizontal) {
-        cardView = (React.createElement(View, { style: [styles.horizontal, styles.card], testID: 'card-horizontal' }, children));
+        cardView = React.createElement(View, { style: [styles.horizontal, styles.card], testID: 'card-horizontal' }, children);
     }
     else if (reversed) {
-        cardView = (React.createElement(View, { style: [styles.reversed, styles.card], testID: 'card-reversed' }, children));
+        cardView = React.createElement(View, { style: [styles.reversed, styles.card], testID: 'card-reversed' }, children);
     }
     else {
         cardView = (React.createElement(View, __assign({ style: [styles.card] }, others), children));
     }
-    return onClick ? (React.createElement(StatesContext.Provider, { value: { inverted: false, active: !!active, flat: !!flat } },
+    return onClick ? (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
         React.createElement(CardContext.Provider, { value: {
                 floating: floating || false,
-                backgroundColor: 'white',
+                backgroundColor: backgroundColor || "white",
                 horizontal: horizontal || false,
                 reversed: reversed || false,
                 active: active || false,
             } },
-            React.createElement(View, { style: { width: '100%' } },
-                React.createElement(TouchableOpacity, { testID: 'card-click-test', style: { width: '100%' }, onPress: onClick, activeOpacity: 0.85 }, cardView))))) : (React.createElement(StatesContext.Provider, { value: { inverted: false, active: !!active, flat: !!flat } },
+            React.createElement(View, { style: { width: "100%" } },
+                React.createElement(TouchableOpacity, { testID: 'card-click-test', style: { width: "100%" }, onPress: onClick, activeOpacity: 0.85 }, cardView))))) : (React.createElement(StatesContext.Provider, { value: { inverted: !!inverted, active: !!active, flat: !!flat } },
         React.createElement(CardContext.Provider, { value: {
                 floating: floating || false,
-                backgroundColor: 'white',
+                backgroundColor: backgroundColor || "white",
                 horizontal: horizontal || false,
                 reversed: reversed || false,
                 active: active || false,
@@ -107,4 +110,4 @@ var Card = function (_a) {
 };
 Card.displayName = ComponentName.Card;
 export default Card;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NhcmQvQ2FyZC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUM1QyxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFM0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLGFBQWEsRUFBRSxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ2pFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFFeEQsTUFBTSxDQUFDLElBQU0sV0FBVyxHQUFHLGFBQWEsQ0FBQztJQUN2QyxRQUFRLEVBQUUsS0FBSztJQUNmLGVBQWUsRUFBRSxFQUFFLElBQUksRUFBRTtJQUN6QixVQUFVLEVBQUUsS0FBSztJQUNqQixRQUFRLEVBQUUsS0FBSztJQUNmLE1BQU0sRUFBRSxLQUFLO0NBQ2QsQ0FBQyxDQUFBO0FBRUY7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sSUFBSSxHQUFHLFVBQUMsRUFXRjtJQVZWLElBQUEsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNWLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFVBQVUsZ0JBQUEsRUFDVixNQUFNLFlBQUEsRUFDSCxNQUFNLGNBVkcseUdBV2IsQ0FEVTtJQUVULElBQU0sV0FBVyxHQUFHLE1BQU0sQ0FBQTtJQUMxQixJQUFNLFVBQVUsR0FBRyxDQUFDLENBQUE7SUFD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NhcmQvQ2FyZC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUM1QyxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFM0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLGFBQWEsRUFBRSxFQUFFLElBQUksRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ2pFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFFeEQsTUFBTSxDQUFDLElBQU0sV0FBVyxHQUFHLGFBQWEsQ0FBQztJQUN2QyxRQUFRLEVBQUUsS0FBSztJQUNmLGVBQWUsRUFBRSxFQUFFLElBQUksRUFBRTtJQUN6QixVQUFVLEVBQUUsS0FBSztJQUNqQixRQUFRLEVBQUUsS0FBSztJQUNmLE1BQU0sRUFBRSxLQUFLO0NBQ2QsQ0FBQyxDQUFBO0FBRUY7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFDSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBYUY7SUFaVixJQUFBLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLFVBQVUsZ0JBQUEsRUFDVixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixlQUFlLHFCQUFBLEVBQ2YsUUFBUSxjQUFBLEVBQ1IsVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNOLFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FaRyx3SUFhYixDQURVO0lBRVQsSUFBTSxXQUFXLEdBQUcsTUFBTSxDQUFBO0lB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

package/lib/components/card/CardProps.d.ts

@@ -1,18 +1,26 @@
 /// <reference types="react" />
 import { ClickEvent } from '../../events/OnClickEvent';
-import { Accessibility, Clickable, Fullheight } from '../../objects';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { Accessibility, BackgroundProps, Clickable, Dev, Fullheight } from '../../objects';
+import { AlignableProps } from '../../objects/facets/Alignable';
+import { JustifiableProps } from '../../objects/facets/Justifiable';
 /**
  * Card Interface
  */
-export interface CardProps extends Fullheight, Clickable, Accessibility, CommonProps {
+export declare enum CardMarkup {
+    DIV = "div",
+    A = "a"
+}
+export type CardMarkupValues = keyof typeof CardMarkup;
+export interface CardProps extends AlignableProps, Fullheight, JustifiableProps, Clickable, Accessibility, BackgroundProps, Dev {
     children?: React.ReactNode;
     flat?: boolean;
     horizontal?: boolean;
     floating?: boolean;
     skeleton?: boolean;
+    className?: string;
     onClick?: ClickEvent;
+    markup?: CardMarkup | CardMarkupValues;
     reversed?: boolean;
-    href?: string;
+    to?: string;
     active?: boolean;
 }

package/lib/components/card/CardProps.js

@@ -1,2 +1,9 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZFByb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9jYXJkL0NhcmRQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=
+/**
+ * Card Interface
+ */
+export var CardMarkup;
+(function (CardMarkup) {
+    CardMarkup["DIV"] = "div";
+    CardMarkup["A"] = "a";
+})(CardMarkup || (CardMarkup = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZFByb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9jYXJkL0NhcmRQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQTs7R0FFRztBQUVILE1BQU0sQ0FBTixJQUFZLFVBR1g7QUFIRCxXQUFZLFVBQVU7SUFDcEIseUJBQVcsQ0FBQTtJQUNYLHFCQUFPLENBQUE7QUFDVCxDQUFDLEVBSFcsVUFBVSxLQUFWLFVBQVUsUUFHckIifQ==

package/lib/components/card/CardPropsDefaults.js

@@ -45,6 +45,13 @@ export default {
       "true"
     ]
   },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "onClick": {
     "type": "function",
     "values": [
@@ -52,6 +59,16 @@ export default {
       "ClickEvent"
     ]
   },
+  "markup": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "DIV",
+      "A",
+      "div",
+      "a"
+    ]
+  },
   "reversed": {
     "type": "boolean",
     "values": [
@@ -60,7 +77,7 @@ export default {
       "true"
     ]
   },
-  "href": {
+  "to": {
     "type": "string",
     "values": [
       "undefined",
@@ -75,6 +92,30 @@ export default {
       "true"
     ]
   },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "verticalAlign": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
   "fullheight": {
     "type": "boolean",
     "values": [
@@ -83,6 +124,20 @@ export default {
       "true"
     ]
   },
+  "justify": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "justified-center",
+      "justified-start",
+      "justified-end",
+      "space-between",
+      "JUSTIFIED_CENTER",
+      "JUSTIFIED_START",
+      "JUSTIFIED_END",
+      "SPACE_BETWEEN"
+    ]
+  },
   "accessibilityLabel": {
     "type": "string",
     "values": [
@@ -90,14 +145,62 @@ export default {
       "string"
     ]
   },
-  "id": {
+  "backgroundColor": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "SUCCESS",
+      "INFO",
+      "WARNING",
+      "ERROR",
+      "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",
+      "MAIN_FADE",
+      "ACCENT",
+      "FONT",
+      "SUCCESS_FADE",
+      "INFO_FADE",
+      "WARNING_FADE",
+      "ERROR_FADE",
+      "DISABLED",
+      "DISABLED_FADE",
+      "NEUTRAL",
+      "NEUTRAL_FADE"
+    ]
+  },
+  "backgroundSrc": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "inverted": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/card/content/CardContent.d.ts

@@ -1,11 +1,22 @@
 /// <reference types="react" />
-import { CardContentProps } from './CardContentProps';
+import { CardContentProps } from "./CardContentProps";
 /**
  * Card Content Component
  * @param children {React.ReactNode} Custom Card Content Children
  * @param titleSup {string} Add a sup title
+ * @param titleSupLevel {TextLevels} Sup title level
+ * @param title {string} Add a title
+ * @param titleLevel {TitleLevels} Title level
+ * @param buttonText {string} if textButton, it will add a Button with content text
+ * @param buttonVariant {ButtonVariant} Add variant for Button - Default is primary
+ * @param buttonClick {Function} Click event for Button
+ * @param text {string} Content text of Card
+ * @param textLevel {TextLevels} Text level
+ * @param onClick {Function} onClick Event for all content
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
+ * @param buttonMarkup {ButtonMarkup} if Button, can change the button tag
+ * @param testId {string} Test Id for Test Integration
  */
-declare const CardContent: ({ children, className, id, ...others }: CardContentProps) => JSX.Element;
+declare const CardContent: ({ children, className, titleSup, titleSupLevel, title, titleLevel, buttonText, buttonMarkup, buttonVariant, buttonClick, text, textLevel, onClick, testId, ...others }: CardContentProps) => JSX.Element;
 export default CardContent;

package/lib/components/card/content/CardContent.js

@@ -1,19 +1,44 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import * as React from "react";
+import clsx from "clsx";
+import { Title, TitleLevels } from "../../../components/title";
+import { Text } from "../../../components/text";
+import { Button, ButtonMarkup } from "../../../components/button";
+import { hashClass } from "../../../helpers";
+import { useTrilogyContext } from "../../../context";
 /**
  * Card Content Component
  * @param children {React.ReactNode} Custom Card Content Children
  * @param titleSup {string} Add a sup title
+ * @param titleSupLevel {TextLevels} Sup title level
+ * @param title {string} Add a title
+ * @param titleLevel {TitleLevels} Title level
+ * @param buttonText {string} if textButton, it will add a Button with content text
+ * @param buttonVariant {ButtonVariant} Add variant for Button - Default is primary
+ * @param buttonClick {Function} Click event for Button
+ * @param text {string} Content text of Card
+ * @param textLevel {TextLevels} Text level
+ * @param onClick {Function} onClick Event for all content
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additionnal CSS Classes
+ * @param buttonMarkup {ButtonMarkup} if Button, can change the button tag
+ * @param testId {string} Test Id for Test Integration
  */
 var CardContent = function (_a) {
-    var children = _a.children, className = _a.className, id = _a.id, others = __rest(_a, ["children", "className", "id"]);
+    var children = _a.children, className = _a.className, titleSup = _a.titleSup, titleSupLevel = _a.titleSupLevel, title = _a.title, titleLevel = _a.titleLevel, buttonText = _a.buttonText, buttonMarkup = _a.buttonMarkup, buttonVariant = _a.buttonVariant, buttonClick = _a.buttonClick, text = _a.text, textLevel = _a.textLevel, onClick = _a.onClick, testId = _a.testId, others = __rest(_a, ["children", "className", "titleSup", "titleSupLevel", "title", "titleLevel", "buttonText", "buttonMarkup", "buttonVariant", "buttonClick", "text", "textLevel", "onClick", "testId"]);
     var styled = useTrilogyContext().styled;
-    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('card-content', className)) }, others), children));
+    if (children) {
+        return (React.createElement("div", __assign({ "data-testid": testId, className: hashClass(styled, clsx("card-content", className)) }, others), children));
+    }
+    return (React.createElement("div", __assign({ "data-testid": testId, onClick: function (e) {
+            // eslint-disable-next-line no-unused-expressions
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            e.stopPropagation();
+        }, className: hashClass(styled, clsx("card-content", className)) }, others),
+        titleSup && (React.createElement(Text, { level: titleSupLevel, className: "suptitle" }, titleSup)),
+        title && (React.createElement(Title, { testId: testId ? "".concat(testId, "-title") : undefined, level: titleLevel ? titleLevel : TitleLevels.THREE }, title)),
+        text && React.createElement(Text, { level: textLevel }, text),
+        buttonText && (React.createElement(Button, { testId: testId ? "".concat(testId, "-btn") : undefined, onClick: buttonClick, variant: buttonVariant ? buttonVariant : "PRIMARY", markup: buttonMarkup ? buttonMarkup : ButtonMarkup.BUTTON }, buttonText))));
 };
 export default CardContent;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZENvbnRlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2NhcmQvY29udGVudC9DYXJkQ29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLFdBQVcsR0FBRyxVQUFDLEVBQXdEO0lBQXRELElBQUEsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUssTUFBTSxjQUFwQywrQkFBc0MsQ0FBRjtJQUMvQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxPQUFPLENBQ0wsc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQU0sTUFBTSxHQUNuRixRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxXQUFXLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2FyZENvbnRlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2NhcmQvY29udGVudC9DYXJkQ29udGVudC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQ3ZELE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzFELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQUNILElBQU0sV0FBVyxHQUFHLFVBQUMsRUFnQkY7SUFmakIsSUFBQSxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxRQUFRLGNBQUEsRUFDUixhQUFhLG1CQUFBLEVBQ2IsS0FBSyxXQUFBLEVBQ0wsVUFBVSxnQkFBQSxFQUNWLFVBQVUsZ0JBQUEsRUFDVixZQUFZLGtCQUFBLEVBQ1osYUFBYSxtQkFBQSxFQUNiLFdBQVcsaUJBQUEsRUFDWCxJQUFJLFVBQUEsRUFDSixTQUFTLGVBQUEsRUFDVCxPQUFPLGFBQUEsRUFDUCxNQUFNLFlBQUEsRUFDSCxNQUFNLGNBZlUscUxBZ0JwQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBSSxRQUFRLEVBQUU7UUFDWixPQUFPLENBQ0wscURBQ2UsTUFBTSxFQUNuQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLFNBQVMsQ0FBQyxDQUFDLElBQ3pELE1BQU0sR0FFVCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0tBQ0Y7SUFFRCxPQUFPLENBQ0wscURBQ2UsTUFBTSxFQUNuQixPQUFPLEVBQUUsVUFBQyxDQUFDO1lBQ1QsaURBQWlEO1lBQ2pELE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsQ0FBQTtZQUNaLENBQUMsQ0FBQyxlQUFlLEVBQUUsQ0FBQTtRQUNyQixDQUFDLEVBQ0QsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRSxTQUFTLENBQUMsQ0FBQyxJQUN6RCxNQUFNO1FBRVQsUUFBUSxJQUFJLENBQ1gsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxhQUFhLEVBQUUsU0FBUyxFQUFFLFVBQVUsSUFDOUMsUUFBUSxDQUNKLENBQ1I7UUFDQSxLQUFLLElBQUksQ0FDUixvQkFBQyxLQUFLLElBQ0osTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsVUFBRyxNQUFNLFdBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUM5QyxLQUFLLEVBQUUsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxLQUFLLElBRWpELEtBQUssQ0FDQSxDQUNUO1FBQ0EsSUFBSSxJQUFJLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsU0FBUyxJQUFHLElBQUksQ0FBUTtRQUM3QyxVQUFVLElBQUksQ0FDYixvQkFBQyxNQUFNLElBQ0wsTUFBTSxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsVUFBRyxNQUFNLFNBQU0sQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUM1QyxPQUFPLEVBQUUsV0FBVyxFQUNwQixPQUFPLEVBQUUsYUFBYSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLFNBQVMsRUFDbEQsTUFBTSxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsTUFBTSxJQUV4RCxVQUFVLENBQ0osQ0FDVixDQUNHLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsV0FBVyxDQUFBIn0=

package/lib/components/card/content/CardContent.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CardContentProps } from './CardContentProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
+import { CardContentProps } from "./CardContentProps";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Card Content Component
  * @param children {ReactNode} Card Content Children
@@ -14,7 +14,7 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  * @param others
  */
 declare const CardContent: {
-    ({ children, ...others }: CardContentProps): JSX.Element;
+    ({ children, titleSup, title, text, buttonText, buttonClick, buttonVariant, onClick, ...others }: CardContentProps): JSX.Element;
     displayName: ComponentName;
 };
 export default CardContent;