@trilogy-ds/react 0.0.2-calendar → 0.0.2-storybook

package/lib/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SkeletonProps } from './SkeletonProps';
+/**
+ * Skeleton Component - Loading placeholder with animated shimmer effect
+ * @note Web implementation is a stub — the full implementation is in Skeleton.native.tsx
+ * - -------------------------- NATIVE PROPERTIES ----------------------------
+ * @param width {DimensionValue} Width of the skeleton placeholder (default: '100%')
+ * @param height {DimensionValue} Height of the skeleton placeholder (default: 20)
+ * @param backgroundColor {string} Background color (default: '#E1E9EE')
+ * @param shimmerColor {string} Color of the shimmer animation (default: '#F7F8F8')
+ * @param duration {number} Shimmer animation duration in milliseconds (default: 1200)
+ * @param borderRadius {number} Border radius of the container (default: 4)
+ * @param children {React.ReactNode} Optional children to render inside the skeleton
+ * @param testID {string} Test identifier (React Native)
+ * @param style {ViewStyle} Custom container style (React Native)
+ */
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

package/lib/components/skeleton/Skeleton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * Skeleton Component - Loading placeholder with animated shimmer effect
+ * @note Web implementation is a stub — the full implementation is in Skeleton.native.tsx
+ * - -------------------------- NATIVE PROPERTIES ----------------------------
+ * @param width {DimensionValue} Width of the skeleton placeholder (default: '100%')
+ * @param height {DimensionValue} Height of the skeleton placeholder (default: 20)
+ * @param backgroundColor {string} Background color (default: '#E1E9EE')
+ * @param shimmerColor {string} Color of the shimmer animation (default: '#F7F8F8')
+ * @param duration {number} Shimmer animation duration in milliseconds (default: 1200)
+ * @param borderRadius {number} Border radius of the container (default: 4)
+ * @param children {React.ReactNode} Optional children to render inside the skeleton
+ * @param testID {string} Test identifier (React Native)
+ * @param style {ViewStyle} Custom container style (React Native)
+ */
+var Skeleton = function () {
+    return (React.createElement(React.Fragment, null));
+};
+export default Skeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2tlbGV0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NrZWxldG9uL1NrZWxldG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekI7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sUUFBUSxHQUE0QjtJQUN4QyxPQUFPLENBQ0wseUNBQUssQ0FDTixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxRQUFRLENBQUEifQ==

package/lib/components/skeleton/Skeleton.native.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SkeletonProps } from './SkeletonProps';
+/**
+ * Skeleton component to display a loading placeholder with shimmer effect.
+ * @param style - Custom styles for the skeleton container.
+ * @param width - Width of the skeleton. Default is '100%'.
+ * @param height - Height of the skeleton. Default is 20.
+ * @param backgroundColor - Background color of the skeleton.
+ * @param shimmerColor - Color of the shimmer effect.
+ * @param duration - Duration of the shimmer animation in milliseconds. Default is 1200.
+ * @param borderRadius - Border radius of the skeleton. Default is 4.
+ * @param children - Optional children to render inside the skeleton.
+ * @param testID - Test identifier for testing purposes.
+ */
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

package/lib/components/skeleton/Skeleton.native.js

@@ -0,0 +1,70 @@
+import { __assign, __read } from "tslib";
+import React, { useEffect, useRef } from 'react';
+import { View, Animated } from 'react-native';
+/**
+ * Skeleton component to display a loading placeholder with shimmer effect.
+ * @param style - Custom styles for the skeleton container.
+ * @param width - Width of the skeleton. Default is '100%'.
+ * @param height - Height of the skeleton. Default is 20.
+ * @param backgroundColor - Background color of the skeleton.
+ * @param shimmerColor - Color of the shimmer effect.
+ * @param duration - Duration of the shimmer animation in milliseconds. Default is 1200.
+ * @param borderRadius - Border radius of the skeleton. Default is 4.
+ * @param children - Optional children to render inside the skeleton.
+ * @param testID - Test identifier for testing purposes.
+ */
+var Skeleton = function (_a) {
+    var style = _a.style, _b = _a.width, width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? 20 : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? '#E1E9EE' : _d, _e = _a.shimmerColor, shimmerColor = _e === void 0 ? '#F7F8F8' : _e, _f = _a.duration, duration = _f === void 0 ? 1200 : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 4 : _g, children = _a.children, testID = _a.testID;
+    var shimmerValue = useRef(new Animated.Value(0)).current;
+    var _h = __read(React.useState(200), 2), containerWidth = _h[0], setContainerWidth = _h[1];
+    useEffect(function () {
+        var shimmerAnimation = Animated.loop(Animated.timing(shimmerValue, {
+            toValue: 1,
+            duration: duration,
+            useNativeDriver: true,
+        }), { iterations: -1 });
+        shimmerAnimation.start();
+        return function () { return shimmerAnimation.stop(); };
+    }, [shimmerValue, duration]);
+    var translateX = shimmerValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-containerWidth, containerWidth],
+    });
+    var opacity = shimmerValue.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0.3, 0.8, 0.3],
+    });
+    var containerStyle = __assign({ width: children ? undefined : width, height: children ? undefined : height, backgroundColor: backgroundColor, borderRadius: borderRadius, overflow: 'hidden', alignSelf: children ? 'flex-start' : undefined }, style);
+    var handleLayout = function (event) {
+        var layoutWidth = event.nativeEvent.layout.width;
+        setContainerWidth(layoutWidth);
+    };
+    if (children) {
+        return (React.createElement(View, { style: containerStyle, testID: testID, onLayout: handleLayout },
+            React.createElement(View, { style: { opacity: 0 } }, children),
+            React.createElement(Animated.View, { style: [
+                    {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: containerWidth * 0.7,
+                        height: '100%',
+                        backgroundColor: shimmerColor,
+                        opacity: opacity,
+                        transform: [{ translateX: translateX }],
+                    },
+                ] })));
+    }
+    return (React.createElement(View, { style: containerStyle, testID: testID, onLayout: handleLayout },
+        React.createElement(Animated.View, { style: [
+                {
+                    width: containerWidth * 0.7,
+                    height: '100%',
+                    backgroundColor: shimmerColor,
+                    opacity: opacity,
+                    transform: [{ translateX: translateX }],
+                },
+            ] })));
+};
+export default Skeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2tlbGV0b24ubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9za2VsZXRvbi9Ta2VsZXRvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDaEQsT0FBTyxFQUFFLElBQUksRUFBYSxRQUFRLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFHeEQ7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLFFBQVEsR0FBNEIsVUFBQyxFQVUxQztRQVRDLEtBQUssV0FBQSxFQUNMLGFBQWMsRUFBZCxLQUFLLG1CQUFHLE1BQU0sS0FBQSxFQUNkLGNBQVcsRUFBWCxNQUFNLG1CQUFHLEVBQUUsS0FBQSxFQUNYLHVCQUEyQixFQUEzQixlQUFlLG1CQUFHLFNBQVMsS0FBQSxFQUMzQixvQkFBd0IsRUFBeEIsWUFBWSxtQkFBRyxTQUFTLEtBQUEsRUFDeEIsZ0JBQWUsRUFBZixRQUFRLG1CQUFHLElBQUksS0FBQSxFQUNmLG9CQUFnQixFQUFoQixZQUFZLG1CQUFHLENBQUMsS0FBQSxFQUNoQixRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUE7SUFFTixJQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsSUFBSSxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFBO0lBQ3BELElBQUEsS0FBQSxPQUFzQyxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFBLEVBQXhELGNBQWMsUUFBQSxFQUFFLGlCQUFpQixRQUF1QixDQUFBO0lBRS9ELFNBQVMsQ0FBQztRQUNSLElBQU0sZ0JBQWdCLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FDcEMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxZQUFZLEVBQUU7WUFDNUIsT0FBTyxFQUFFLENBQUM7WUFDVixRQUFRLFVBQUE7WUFDUixlQUFlLEVB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

package/lib/components/skeleton/SkeletonProps.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ViewStyle, DimensionValue } from 'react-native';
+export interface SkeletonProps {
+    style?: ViewStyle;
+    width?: DimensionValue;
+    height?: DimensionValue;
+    backgroundColor?: string;
+    shimmerColor?: string;
+    duration?: number;
+    borderRadius?: number;
+    children?: React.ReactNode;
+    testID?: string;
+}

package/lib/components/skeleton/SkeletonProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2tlbGV0b25Qcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2tlbGV0b24vU2tlbGV0b25Qcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/lib/components/skeleton/SkeletonPropsDefaults.js

@@ -0,0 +1,80 @@
+export default {
+  "style": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "ViewStyle"
+    ]
+  },
+  "width": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "null",
+      "number",
+      "auto",
+      "`${number}%`",
+      "AnimatedNode"
+    ]
+  },
+  "height": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "null",
+      "number",
+      "auto",
+      "`${number}%`",
+      "AnimatedNode"
+    ]
+  },
+  "backgroundColor": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "shimmerColor": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "duration": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
+  "borderRadius": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "number"
+    ]
+  },
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "testID": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

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

@@ -0,0 +1,3 @@
+import Skeleton from './Skeleton';
+export * from './SkeletonProps';
+export { Skeleton };

package/lib/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import Skeleton from './Skeleton';
+export * from './SkeletonProps';
+export { Skeleton };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NrZWxldG9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxNQUFNLFlBQVksQ0FBQTtBQUVqQyxjQUFjLGlCQUFpQixDQUFBO0FBRS9CLE9BQU8sRUFBRSxRQUFRLEVBQUUsQ0FBQSJ9

package/lib/components/spacer/Spacer.d.ts

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import { SpacerProps } from './SpacerProps';
 /**
- * Spacer Component
- * @param size {SpacerSize} ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
- * @param horizontal {Boolean} If horizontal margin
+ * Spacer Component - Adds vertical or horizontal spacing
+ * @param size {SpacerSize} Spacing size: ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
+ * @param horizontal {boolean} Apply as horizontal margin instead of vertical (default: false)
+ * @param testId {string} Test Id for Test Integration
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param id {string} Custom id attribute
  */
 declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement>>;
 export default Spacer;

package/lib/components/spacer/Spacer.js

@@ -4,12 +4,16 @@ import clsx from 'clsx';
 import { useTrilogyContext } from '../../context';
 import { ComponentName } from '../enumsComponentsName';
 /**
- * Spacer Component
- * @param size {SpacerSize} ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
- * @param horizontal {Boolean} If horizontal margin
+ * Spacer Component - Adds vertical or horizontal spacing
+ * @param size {SpacerSize} Spacing size: ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT
+ * @param horizontal {boolean} Apply as horizontal margin instead of vertical (default: false)
+ * @param testId {string} Test Id for Test Integration
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additional CSS Classes
+ * @param id {string} Custom id attribute
  */
 var Spacer = React.forwardRef(function (_a, ref) {
-    var size = _a.size, horizontal = _a.horizontal, className = _a.className, id = _a.id;
+    var size = _a.size, horizontal = _a.horizontal, className = _a.className, id = _a.id, testId = _a.testId;
     var styled = useTrilogyContext().styled;
     var styles = {
         spacer: {
@@ -18,8 +22,8 @@ var Spacer = React.forwardRef(function (_a, ref) {
         },
     };
     var classes = hashClass(styled, clsx(className));
-    return React.createElement("div", { ref: ref, id: id, style: styles.spacer, className: classes });
+    return React.createElement("div", { ref: ref, id: id, style: styles.spacer, "data-testid": testId, className: classes });
 });
 Spacer.displayName = ComponentName.Spacer;
 export default Spacer;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7R0FJRztBQUNILElBQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQXlCLFVBQUMsRUFBbUMsRUFBRSxHQUFHO1FBQXRDLElBQUksVUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDaEYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxNQUFNLEdBQUc7UUFDYixNQUFNLEVBQUU7WUFDTixVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUMsQ0FBQyxVQUFHLElBQUksT0FBSSxDQUFDLENBQUMsQ0FBQyxLQUFLO1lBQzVDLFNBQVMsRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBRyxJQUFJLE9BQUksQ0FBQyxDQUFDLENBQUMsS0FBSztTQUM3QztLQUNGLENBQUE7SUFDRCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWxELE9BQU8sNkJBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUksQ0FBQTtBQUM1RSxDQUFDLENBQUMsQ0FBQTtBQUVGLE1BQU0sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUN6QyxlQUFlLE1BQU0sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2VyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zcGFjZXIvU3BhY2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7Ozs7O0dBUUc7QUFDSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUF5QixVQUFDLEVBQTJDLEVBQUUsR0FBRztRQUE5QyxJQUFJLFVBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsTUFBTSxZQUFBO0lBQ3hGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sTUFBTSxHQUFHO1FBQ2IsTUFBTSxFQUFFO1lBQ04sVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsVUFBRyxJQUFJLE9BQUksQ0FBQyxDQUFDLENBQUMsS0FBSztZQUM1QyxTQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFVBQUcsSUFBSSxPQUFJLENBQUMsQ0FBQyxDQUFDLEtBQUs7U0FDN0M7S0FDRixDQUFBO0lBQ0QsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUVsRCxPQUFPLDZCQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLE1BQU0saUJBQWUsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEdBQUksQ0FBQTtBQUNqRyxDQUFDLENBQUMsQ0FBQTtBQUVGLE1BQU0sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE1BQU0sQ0FBQTtBQUN6QyxlQUFlLE1BQU0sQ0FBQSJ9

package/lib/components/spacer/SpacerProps.d.ts

@@ -1,7 +1,8 @@
 import type { SpacerSize, SpacerSizeValues } from './SpacerEnum';
 import { CommonProps } from '../../objects/facets/CommonProps';
 import { View } from 'react-native';
-export interface SpacerProps extends CommonProps {
+import { Dev } from '../../objects/facets/Dev';
+export interface SpacerProps extends CommonProps, Dev {
     size: SpacerSize | typeof SpacerSizeValues;
     horizontal?: boolean;
 }

package/lib/components/spacer/SpacerPropsDefaults.js

@@ -37,5 +37,12 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/stepper/Stepper.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { StepperProps } from './StepperProps';
 /**
  * Stepper Component
- * @param centered Center the stepper
- * @param children {ReactNode}
+ * @param children {ReactNode} Stepper steps (Step components)
+ * @param testId {string} Test Id for Test Integration
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className Additional CSS Classes
+ * @param className {string} Additional CSS Classes
+ * @param id {string} Custom id attribute
  */
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
 export default Stepper;

package/lib/components/stepper/Stepper.js

@@ -1,22 +1,29 @@
 import { __assign, __read, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
 import { Text } from '../../components/text';
+import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { Align } from '../../objects';
+import { TypographyColor } from '../../objects/Typography/TypographyColor';
+import clsx from 'clsx';
+import * as React from 'react';
 import { ComponentName } from '../enumsComponentsName';
+import { FlexBox } from '../flex-box';
+import { Icon } from '../icon';
+import { Title } from '../title';
 /**
  * Stepper Component
- * @param centered Center the stepper
- * @param children {ReactNode}
+ * @param children {ReactNode} Stepper steps (Step components)
+ * @param testId {string} Test Id for Test Integration
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className Additional CSS Classes
+ * @param className {string} Additional CSS Classes
+ * @param id {string} Custom id attribute
  */
 var Stepper = React.forwardRef(function (_a, ref) {
-    var className = _a.className, id = _a.id, children = _a.children, others = __rest(_a, ["className", "id", "children"]);
+    var className = _a.className, id = _a.id, children = _a.children, testId = _a.testId, others = __rest(_a, ["className", "id", "children", "testId"]);
     var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('stepper-wrapper', className));
-    var _b = __read(React.useState(1), 2), currentStep = _b[0], setCurrentStep = _b[1];
+    var classes = hashClass(styled, clsx('stepper-container', className));
+    var _b = __read(React.useState({ label: null, step: 1, icon: null }), 2), currentStep = _b[0], setCurrentStep = _b[1];
+    var classesSteps = hashClass(styled, clsx('stepper-wrapper'));
     var nbChild = React.useMemo(function () {
         if (children && Array.isArray(children))
             return children.length;
@@ -25,32 +32,37 @@ var Stepper = React.forwardRef(function (_a, ref) {
         return 0;
     }, [children]);
     React.useEffect(function () {
+        var _a, _b, _c, _d;
         if (children) {
             if (Array.isArray(children)) {
                 var haveCurrentStep_1 = false;
                 children.map(function (child, index) {
-                    var _a;
+                    var _a, _b, _c;
                     if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.current) {
                         haveCurrentStep_1 = true;
-                        setCurrentStep(index + 1);
+                        setCurrentStep({ step: index + 1, label: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.label, icon: (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.iconName });
                     }
                 });
-                if (!haveCurrentStep_1)
-                    setCurrentStep(1);
+                if (!haveCurrentStep_1) {
+                    setCurrentStep({ step: 1, label: (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.label, icon: (_d = (_c = children[0]) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.iconName });
+                }
             }
             else {
-                setCurrentStep(1);
+                setCurrentStep({ label: null, step: 1, icon: null });
             }
         }
     }, [children]);
-    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others),
-        children,
-        React.createElement("div", { className: 'step-count' },
-            React.createElement(Text, null,
-                currentStep,
-                "/",
-                nbChild))));
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes, "data-testid": testId }, others),
+        React.createElement(Text, { level: 2, typo: [TypographyColor.TEXT_PLACEHOLDER], className: 'stepper-steps' },
+            "\u00C9tape ",
+            currentStep.step,
+            " sur ",
+            nbChild),
+        React.createElement(FlexBox, { align: Align.CENTER, className: 'stepper-content' },
+            currentStep.icon && React.createElement(Icon, { name: currentStep.icon, size: 'small' }),
+            React.createElement(Title, { level: 5, className: 'step-label', key: "step-".concat(currentStep.step, "-").concat(currentStep.label) }, currentStep.label)),
+        React.createElement("div", { className: classesSteps }, children)));
 });
 Stepper.displayName = ComponentName.Stepper;
 export default Stepper;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFFdEQ7Ozs7OztHQU1HO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBMkIsVUFBQyxFQUFzQyxFQUFFLEdBQUc7SUFBekMsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXBDLCtCQUFzQyxDQUFGO0lBQ3RGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGlCQUFpQixFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDL0QsSUFBQSxLQUFBLE9BQWdDLEtBQUssQ0FBQyxRQUFRLENBQVMsQ0FBQyxDQUFDLElBQUEsRUFBeEQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUE2QixDQUFBO0lBRS9ELElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQVM7UUFDcEMsSUFBSSxRQUFRLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7WUFBRSxPQUFPLFFBQVEsQ0FBQyxNQUFNLENBQUE7UUFDL0QsSUFBSSxRQUFRLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztZQUFFLE9BQU8sQ0FBQyxDQUFBO1FBQ2xELE9BQU8sQ0FBQyxDQUFBO0lBQ1YsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQTtJQUVkLEtBQUssQ0FBQyxTQUFTLENBQUM7UUFDZCxJQUFJLFFBQVEsRUFBRTtZQUNaLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRTtnQkFDM0IsSUFBSSxpQkFBZSxHQUFHLEtBQUssQ0FBQTtnQkFDM0IsUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLEtBQUssRUFBRSxLQUFLOztvQkFDeEIsSUFBSSxNQUFBLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxLQUFLLDBDQUFFLE9BQU8sRUFBRTt3QkFDekIsaUJBQWUsR0FBRyxJQUFJLENBQUE7d0JBQ3RCLGNBQWMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUE7cUJBQzFCO2dCQUNILENBQUMsQ0FBQyxDQUFBO2dCQUNGLElBQUksQ0FBQyxpQkFBZTtvQkFBRSxjQUFjLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDeEM7aUJBQU07Z0JBQ0wsY0FBYyxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQ2xCO1NBQ0Y7SUFDSCxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFBO0lBRWQsT0FBTyxDQUNMLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU07UUFDbEQsUUFBUTtRQUNULDZCQUFLLFNBQVMsRUFBQyxZQUFZO1lBQ3pCLG9CQUFDLElBQUk7Z0JBQ0YsV0FBVzs7Z0JBQUcsT0FBTyxDQUNqQixDQUNILENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNqQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUE7QUFDdEUsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sYUFBYSxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxJQUFJLEVBQVksTUFBTSxTQUFTLENBQUE7QUFDeEMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLFVBQVUsQ0FBQTtBQUtoQzs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBMkIsVUFBQyxFQUE4QyxFQUFFLEdBQUc7SUFBakQsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQTVDLHlDQUE4QyxDQUFGO0lBQzlGLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDakUsSUFBQSxLQUFBLE9BQWdDLEtBQUss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

package/lib/components/stepper/Stepper.native.d.ts

@@ -3,7 +3,6 @@ import { View } from 'react-native';
 import { StepperProps } from './StepperProps';
 /**
  * Stepper Component
- * @param centered {boolean} Center the stepper
  * @param children {ReactNode}
  */
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<View>>;

package/lib/components/stepper/Stepper.native.js

@@ -1,13 +1,12 @@
 import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconSize } from '../../components/icon';
+import { Text } from '../../components/text';
+import { TypographyBold, TypographyColor } from '../../objects';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { TypographyBold, TypographyColor } from '../../objects';
-import { Text, TextLevels } from '../../components/text';
-import { Icon, IconSize } from '../../components/icon';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Stepper Component
- * @param centered {boolean} Center the stepper
  * @param children {ReactNode}
  */
 var Stepper = React.forwardRef(function (_a, ref) {
@@ -26,14 +25,15 @@ var Stepper = React.forwardRef(function (_a, ref) {
             flexDirection: 'row',
             justifyContent: 'space-between',
             alignItems: 'center',
-            marginTop: 10,
+            marginTop: 8,
+            marginBottom: 12,
         },
         hasIcon: {
             flexDirection: 'row',
+            alignItems: 'center',
         },
         icon: {
             marginRight: 4,
-            marginTop: 3,
         },
         counter: {
             marginRight: 10,
@@ -79,17 +79,18 @@ var Stepper = React.forwardRef(function (_a, ref) {
         }
     }, [children]);
     return (React.createElement(View, { ref: ref },
-        React.createElement(View, __assign({ style: styles.steppers }, others), children),
+        React.createElement(Text, { level: 3, typo: [TypographyColor.TEXT_PLACEHOLDER] },
+            "\u00C9tape ",
+            currentStep.step,
+            " sur ",
+            nbChild),
         React.createElement(View, { style: styles.step },
             React.createElement(View, { style: styles.hasIcon },
                 currentStep.iconName && (React.createElement(Text, { style: styles.icon },
                     React.createElement(Icon, { name: currentStep.iconName, size: IconSize.SMALL }))),
-                React.createElement(Text, { level: TextLevels.ONE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, currentStep.name)),
-            React.createElement(Text, { style: styles.counter, level: TextLevels.THREE, typo: [TypographyBold.TEXT_WEIGHT_SEMIBOLD, TypographyColor.TEXT_MAIN] },
-                currentStep.step,
-                "/",
-                nbChild))));
+                React.createElement(Text, { level: 2, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, currentStep.name))),
+        React.createElement(View, __assign({ style: styles.steppers }, others), children)));
 });
 Stepper.displayName = ComponentName.Stepper;
 export default Stepper;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3N0ZXBwZXIvU3RlcHBlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUMvQyxPQUFPLEVBQUUsY0FBYyxFQUFFLGVBQWUsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUMzRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXBELE9BQU8sRUFBRSxJQUFJLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDNUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBUWhFOzs7O0dBSUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFpQyxVQUFDLEVBQXVCLEVBQUUsR0FBRztJQUExQixJQUFBLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBckIsWUFBdUIsQ0FBRjtJQUMvRSxJQUFBLEtBQUEsT0FBZ0MsS0FBSyxDQUFDLFFBQVEsQ0FBZTtRQUNqRSxJQUFJLEVBQUUsQ0FBQztRQUNQLElBQUksRUFBRSxFQUFFO1FBQ1IsUUFBUSxFQUFFLEVBQUU7S0FDYixDQUFDLElBQUEsRUFKSyxXQUFXLFFBQUEsRUFBRSxjQUFjLFFBSWhDLENBQUE7SUFFRixJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFFBQVEsRUFBRTtZQUNSLGFBQWEsRUFBRSxLQUFLO1lBQ3BCLElBQUksRUFBRSxDQUFDO1NBQ1I7UUFDRCxJQUFJLEVBQUU7WUFDSixhQUFhLEVBQUUsS0FBSztZQUNwQixjQUFjLEVBQUUsZUFBZTtZQUMvQixVQUFVLEVBQUUsUUFBUTtZQUNwQixTQUFTLEVBQUUs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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3N0ZXBwZXIvU3RlcHBlci5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBWSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUM1RCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGNBQWMsRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDM0QsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFTL0M7OztHQUdHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBaUMsVUFBQyxFQUF1QixFQUFFLEdBQUc7SUFBMUIsSUFBQSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXJCLFlBQXVCLENBQUY7SUFDL0UsSUFBQSxLQUFBLE9BQWdDLEtBQUssQ0FBQyxRQUFRLENBQWU7UUFDakUsSUFBSSxFQUFFLENBQUM7UUFDUCxJQUFJLEVBQUUsRUFBRTtRQUNSLFFBQVEsRUFBRSxFQUFFO0tBQ2IsQ0FBQyxJQUFBLEVBSkssV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUloQyxDQUFBO0lBRUYsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixRQUFRLEVBQUU7WUFDUixhQUFhLEVBQUUsS0FBSztZQUNwQixJQUFJLEVBQUUsQ0FBQztTQUNSO1FBQ0QsSUFBSSxFQUFFO1lBQ0osYUFBYSxFQUFFLEtBQUs7WUFDcEIsY0FBYyxFQUFFLGVBQWU7WUFDL0IsVUFBVSxFQUFFLFFBQVE7WUFDcEIsU0FBUyxFQUFFLENBQUM7WUFDWixZ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

package/lib/components/stepper/StepperProps.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { View } from 'react-native';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { Dev } from '../../objects/facets/Dev';
 /**
  * Stepper Interface
  */
-export interface StepperProps extends CommonProps {
+export interface StepperProps extends CommonProps, Dev {
     children?: React.ReactNode;
 }
 export type StepperRef = HTMLDivElement;

package/lib/components/stepper/StepperPropsDefaults.js

@@ -26,5 +26,12 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/stepper/step/Step.d.ts

@@ -5,11 +5,12 @@ import { StepProps } from './StepProps';
  * @param active {boolean} Active step
  * @param current {boolean} Current step
  * @param done {boolean} Step done
- * @param error {boolean} display error step
- * @param children {ReactNode} Stepper Step Children
+ * @param error {boolean} Display error step
+ * @param id {string} Custom id attribute
+ * @param iconName {IconName} Step icon name
+ * @param testId {string} Test Id for Test Integration
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additional CSS Classes
- * @param iconName {IconName | IconNameValues} display icon
  * @param label {string} Step label
  */
 declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/stepper/step/Step.js

@@ -1,37 +1,29 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
-import clsx from 'clsx';
-import { is } from '../../../services/classify';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
-import Icon from '../../../components/icon/Icon';
-import { IconSize } from '../../../components/icon';
 import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
+import { is } from '../../../services/classify';
+import clsx from 'clsx';
+import React from 'react';
 /**
  * Stepper Step Component
  * @param active {boolean} Active step
  * @param current {boolean} Current step
  * @param done {boolean} Step done
- * @param error {boolean} display error step
- * @param children {ReactNode} Stepper Step Children
+ * @param error {boolean} Display error step
+ * @param id {string} Custom id attribute
+ * @param iconName {IconName} Step icon name
+ * @param testId {string} Test Id for Test Integration
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additional CSS Classes
- * @param iconName {IconName | IconNameValues} display icon
  * @param label {string} Step label
  */
 var Step = React.forwardRef(function (_a, ref) {
-    var className = _a.className, id = _a.id, active = _a.active, current = _a.current, done = _a.done, label = _a.label, iconName = _a.iconName, error = _a.error, others = __rest(_a, ["className", "id", "active", "current", "done", "label", "iconName", "error"]);
+    var className = _a.className, id = _a.id, active = _a.active, current = _a.current, done = _a.done, label = _a.label, iconName = _a.iconName, error = _a.error, testId = _a.testId, others = __rest(_a, ["className", "id", "active", "current", "done", "label", "iconName", "error", "testId"]);
     var styled = useTrilogyContext().styled;
-    var classesStepLabel = hashClass(styled, clsx('step-label'));
     var classes = hashClass(styled, clsx('stepper-item', active && is('active'), current && is('current'), done && is('done'), error && is('error'), className));
-    /**
-     * If no markup return div
-     */
-    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes, "data-label": label }, others),
-        React.createElement("div", { className: classesStepLabel },
-            label,
-            !done && iconName && React.createElement(Icon, { name: iconName && iconName, className: 'step-icon', size: IconSize.MEDIUM }))));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes, "data-label": label, "data-testid": testId }, others));
 });
 Step.displayName = ComponentName.Step;
 export default Step;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9zdGVwL1N0ZXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDekIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLElBQUksTUFBTSx3QkFBd0IsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDNUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBcUIsVUFBQyxFQUEyRSxFQUFFLEdBQUc7SUFBOUUsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxJQUFJLFVBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBSyxNQUFNLGNBQXpFLDhFQUEyRSxDQUFGO0lBQ2xILElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sZ0JBQWdCLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQTtJQUU5RCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsY0FBYyxFQUNkLE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3RCLE9BQU8sSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hCLElBQUksSUFBSSxFQUFFLENBQUMsTUFBTSxDQUFDLEVBQ2xCLEtBQUssSUFBSSxFQUFFLENBQUMsT0FBTyxDQUFDLEVBQ3BCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFDRDs7T0FFRztJQUVILE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sZ0JBQWMsS0FBSyxJQUFNLE1BQU07UUFDdEUsNkJBQUssU0FBUyxFQUFFLGdCQUFnQjtZQUM3QixLQUFLO1lBQ0wsQ0FBQyxJQUFJLElBQUksUUFBUSxJQUFJLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsUUFBUSxJQUFJLFFBQVEsRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsTUFBTSxHQUFJLENBQ3JHLENBQ0YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixJQUFJLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUE7QUFDckMsZUFBZSxJQUFJLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc3RlcHBlci9zdGVwL1N0ZXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ3hDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekI7Ozs7Ozs7Ozs7OztHQVlHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDM0IsVUFBQyxFQUFtRixFQUFFLEdBQUc7SUFBdEYsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxJQUFJLFVBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQWpGLHdGQUFtRixDQUFGO0lBQ3hFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixjQUFjLEVBQ2QsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsT0FBTyxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFDeEIsSUFBSSxJQUFJLEVBQUUsQ0FBQyxNQUFNLENBQUMsRUFDbEIsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFDcEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLGdCQUFjLEtBQUssaUJBQWUsTUFBTSxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQzFHLENBQUMsQ0FDRixDQUFBO0FBRUQsSUFBSSxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsSUFBSSxDQUFBO0FBQ3JDLGVBQWUsSUFBSSxDQUFBIn0=