@trilogy-ds/react 0.0.1-beta.5 → 0.0.1-beta.50

package/lib/components/card/image/CardImage.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import clsx from 'clsx';
-import { is } from '../../../services/classify';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import * as React from "react";
+import clsx from "clsx";
+import { is } from "../../../services/classify";
+import { hashClass } from "../../../helpers";
+import { useTrilogyContext } from "../../../context";
 /**
  * Card Image Component
  * @param src Image source
@@ -16,14 +16,14 @@ import { useTrilogyContext } from '../../../context';
  */
 const CardImage = ({ src, alt, className, size, onClick, ...others }) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('card-image', size && is(`${size}`), className));
+    const classes = hashClass(styled, clsx("card-image", size && is(`${size}`), className));
     return (React.createElement("div", { onClick: (e) => {
             // eslint-disable-next-line no-unused-expressions
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
             e.stopPropagation();
         }, className: classes },
-        React.createElement("figure", { className: hashClass(styled, clsx('image')), ...others },
-            React.createElement("img", { ...{ src: typeof src === 'string' ? src : '', alt } }))));
+        React.createElement("figure", { className: hashClass(styled, clsx("image")), ...others },
+            React.createElement("img", { ...{ src: typeof src === "string" ? src : "" }, alt: alt }))));
 };
 export default CardImage;
 //# sourceMappingURL=CardImage.js.map

package/lib/components/card/image/CardImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardImage.js","sourceRoot":"","sources":["../../../../components/card/image/CardImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,EAAE,EAAE,MAAM,4BAA4B,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,EAAkB,EAAe,EAAE;IACnG,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAA;IAEvF,OAAO,CACL,6BACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,iDAAiD;YACjD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;YACZ,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,EACD,SAAS,EAAE,OAAO;QAElB,gCAAQ,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,KAAM,MAAM;YAC7D,gCAAS,EAAE,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAI,CACtD,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"CardImage.js","sourceRoot":"","sources":["../../../../components/card/image/CardImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAG,CAAC,EACjB,GAAG,EACH,GAAG,EACH,SAAS,EACT,IAAI,EACJ,OAAO,EACP,GAAG,MAAM,EACM,EAAe,EAAE;IAChC,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,CACrD,CAAA;IAED,OAAO,CACL,6BACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,iDAAiD;YACjD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;YACZ,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC,EACD,SAAS,EAAE,OAAO;QAElB,gCAAQ,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,KAAM,MAAM;YAC7D,gCAAS,EAAE,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAG,CAC1D,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/components/card/image/CardImage.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CardImageProps } from './CardImageProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Card Image Component
  * @param src Image source

package/lib/components/card/image/CardImage.native.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { StyleSheet, Image, View, TouchableOpacity } from 'react-native';
-import { CardContext } from '../Card.native';
-import { ComponentName } from '../../enumsComponentsName';
+import { CardContext } from '../../../components/card/Card.native';
+import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Card Image Component
  * @param src Image source

package/lib/components/card/image/CardImage.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardImage.native.js","sourceRoot":"","sources":["../../../../components/card/image/CardImage.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CardImage.native.js","sourceRoot":"","sources":["../../../../components/card/image/CardImage.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE;;;;;;;;GAQG;AACH,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,MAAM,EAAkB,EAAe,EAAE;IAC7G,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAA;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACrC,MAAM,iBAAiB,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEjD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,SAAS,EAAE;YACT,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO;YACnC,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;YACzC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;YACxC,YAAY,EAAE,CAAC;YACf,uBAAuB,EAAE,CAAC,iBAAiB,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC;YACtG,sBAAsB,EAAE,CAAC,iBAAiB,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC;YACrG,oBAAoB,EAAE,CAAC,iBAAiB,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC;YACtI,mBAAmB,EAAE,CAAC,iBAAiB,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC;SACtI;KACF,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE;YACjC,OAAO,GAAG,KAAK,QAAQ;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO,CACX,GAAG,EACH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;oBACP,CAAC,IAAI,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBACtB,CAAC,EACD,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClB;gBACH,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;SAChB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,MAAM,KAAK,GAAG,CACZ,oBAAC,KAAK,IACJ,kBAAkB,EAAE,GAAG,EACvB,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,MAAM,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAChD,MAAM,GACV,CACH,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,IAAI;QACH,oBAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,IACpD,KAAK,CACW,CACd,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAA;AAE/C,eAAe,SAAS,CAAA"}

package/lib/components/card/image/test/CardImage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/card/image/test/CardImage.test.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { fireEvent, render } from "@testing-library/react";
+import CardImage from "../CardImage";
+import { CardImageSize } from "../CardImageEnum";
+describe("CardImage", () => {
+    it("renders an image with the specified lib and alt attributes", () => {
+        const { getByAltText } = render(React.createElement(CardImage, { src: "image.jpg", alt: "Test Image" }));
+        expect(getByAltText("Test Image")).toHaveAttribute("src", "image.jpg");
+    });
+    it("applies the specified size class when provided", () => {
+        const { container } = render(React.createElement(CardImage, { src: "image.jpg", alt: "Test Image", size: CardImageSize.SIZE_1 }));
+        expect(container.firstChild).toHaveClass("card-image", "is-1");
+    });
+    it("applies additional CSS classes when provided", () => {
+        const { container } = render(React.createElement(CardImage, { src: "image.jpg", alt: "Test Image", className: "my-class" }));
+        expect(container.firstChild).toHaveClass("card-image", "my-class");
+    });
+    it("calls the onClick function when clicked", () => {
+        const handleClick = jest.fn();
+        const { container } = render(React.createElement(CardImage, { src: "image.jpg", alt: "Test Image", onClick: handleClick }));
+        fireEvent.click(container === null || container === void 0 ? void 0 : container.firstChild);
+        expect(handleClick).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=CardImage.test.js.map

package/lib/components/card/image/test/CardImage.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardImage.test.js","sourceRoot":"","sources":["../../../../../components/card/image/test/CardImage.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,4DAA4D,EAAE,GAAG,EAAE;QACpE,MAAM,EAAE,YAAY,EAAE,GAAG,MAAM,CAC7B,oBAAC,SAAS,IAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,YAAY,GAAG,CAC/C,CAAC;QACF,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,GAAG,EAAE;QACxD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,SAAS,IAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,YAAY,EAAC,IAAI,EAAE,aAAa,CAAC,MAAM,GAAI,CAC3E,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,SAAS,IAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAC,UAAU,GAAG,CACpE,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACjD,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,SAAS,IAAC,GAAG,EAAC,WAAW,EAAC,GAAG,EAAC,YAAY,EAAC,OAAO,EAAE,WAAW,GAAI,CACrE,CAAC;QACF,SAAS,CAAC,KAAK,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAyB,CAAC,CAAC;QACtD,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,69 @@
+import { fireEvent, render } from '@testing-library/react';
+import * as React from 'react';
+import Card from '../Card';
+import CardContent from '../content';
+describe('Card', () => {
+    it('should render children when passed in', () => {
+        const { getByText } = render(React.createElement(Card, null,
+            React.createElement(CardContent, null, "Hello world")));
+        expect(getByText('Hello world')).toBeInTheDocument();
+    });
+    it('should call onClick when clicked', () => {
+        const handleClick = jest.fn();
+        const { getByTestId } = render(React.createElement(Card, { onClick: handleClick, "data-testid": 'card' }));
+        fireEvent.click(getByTestId('card'));
+        expect(handleClick).toHaveBeenCalled();
+    });
+    it('should render as loading when skeleton prop is true', () => {
+        const { getByTestId } = render(React.createElement(Card, { skeleton: true, "data-testid": 'card' }));
+        expect(getByTestId('card')).toHaveClass('is-loading');
+    });
+    it('should render with the flat class when flat prop is true', () => {
+        const { getByTestId } = render(React.createElement(Card, { flat: true, "data-testid": 'card' }));
+        expect(getByTestId('card')).toHaveClass('is-flat');
+    });
+});
+describe('CardContent component', () => {
+    it('should render a div with a class of card-content', () => {
+        const { getByTestId } = render(React.createElement(CardContent, { "data-testid": 'card-content' }));
+        const cardContentDiv = getByTestId('card-content');
+        expect(cardContentDiv).toHaveClass('card-content');
+    });
+    it('should render a sup title if titleSup prop is passed', () => {
+        const titleSup = 'This is a sup title';
+        const { getByText } = render(React.createElement(CardContent, { titleSup: titleSup }));
+        const supTitleElement = getByText(titleSup);
+        expect(supTitleElement).toBeInTheDocument();
+    });
+    it('should render a title if title prop is passed', () => {
+        const title = 'This is a title';
+        const { getByText } = render(React.createElement(CardContent, { title: title }));
+        const titleElement = getByText(title);
+        expect(titleElement).toBeInTheDocument();
+    });
+    it('should render a text if text prop is passed', () => {
+        const text = 'This is some content text';
+        const { getByText } = render(React.createElement(CardContent, { text: text }));
+        const textElement = getByText(text);
+        expect(textElement).toBeInTheDocument();
+    });
+    it('should have title', () => {
+        const { getByTestId } = render(React.createElement(CardContent, { testId: 'cardContent', title: 'title', titleLevel: 'ONE' }));
+        const title = getByTestId('cardContent-title');
+        expect(title).toBeInTheDocument();
+    });
+    it('should render a button if buttonText prop is passed', () => {
+        const fn = jest.fn();
+        const buttonText = 'Click me';
+        const { getByTestId } = render(React.createElement(CardContent, { testId: 'cardContent', onClick: fn, buttonText: buttonText, buttonVariant: 'PRIMARY', buttonMarkup: 'a' }));
+        const buttonElement = getByTestId('cardContent');
+        const btn = getByTestId('cardContent-btn');
+        fireEvent.click(buttonElement);
+        expect(fn).toHaveBeenCalled();
+        expect(btn.nodeName).toBe('A');
+        expect(btn).toHaveClass('is-loaded is-primary ');
+        expect(btn).toBeInTheDocument();
+        expect(buttonElement).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Card.test.js.map

package/lib/components/card/test/Card.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.test.js","sourceRoot":"","sources":["../../../../components/card/test/Card.test.tsx"],"names":[],"mappings":"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"}

package/lib/components/checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CheckboxProps } from './CheckboxProps';
+import { CheckboxProps } from "./CheckboxProps";
 /**
  * Checkbox Component
  * @param checked {boolean} Checked Checkbox
@@ -17,5 +17,5 @@ import { CheckboxProps } from './CheckboxProps';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param value {string} Value for checkbox
  */
-declare const Checkbox: ({ checked, className, disabled, readonly, id, label, onChange, onClick, name, value, tile, description, iconTile, horizontalTile, removeControl, removeField, reversed, labelClassName, inverted, spaced, testId, ...others }: CheckboxProps) => JSX.Element;
+declare const Checkbox: ({ checked, className, disabled, readonly, id, label, onChange, onClick, name, value, tile, description, iconTile, horizontalTile, testId, ...others }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/lib/components/checkbox/Checkbox.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import shortid from 'shortid';
-import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { Icon, IconSize } from '../icon';
-import { has, is } from '../../services';
-import { useTrilogyContext } from '../../context';
+import React, { useEffect, useState } from "react";
+import shortid from "shortid";
+import clsx from "clsx";
+import { hashClass } from "../../helpers";
+import { Icon, IconSize } from "../../components/icon";
+import { is } from "../../services";
+import { useTrilogyContext } from "../../context";
 /**
  * Checkbox Component
  * @param checked {boolean} Checked Checkbox
@@ -22,7 +22,7 @@ import { useTrilogyContext } from '../../context';
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param value {string} Value for checkbox
  */
-const Checkbox = ({ checked, className, disabled, readonly, id = shortid.generate(), label, onChange, onClick, name, value, tile, description, iconTile, horizontalTile, removeControl, removeField, reversed, labelClassName, inverted, spaced, testId, ...others }) => {
+const Checkbox = ({ checked, className, disabled, readonly, id = shortid.generate(), label, onChange, onClick, name, value, tile, description, iconTile, horizontalTile, testId, ...others }) => {
     const { styled } = useTrilogyContext();
     const [_checked, setChecked] = useState(checked || false);
     useEffect(() => {
@@ -30,48 +30,15 @@ const Checkbox = ({ checked, className, disabled, readonly, id = shortid.generat
             setChecked(checked || false);
         }
     }, [checked, readonly]);
-    const classes = hashClass(styled, clsx('input', is('checkradio'), is('info'), is('hidden'), inverted && is('inverted'), className && !className.includes(is('inverted')) && has('background-color'), className));
-    const labelClasses = hashClass(styled, clsx(checked && has('text-info'), spaced && is('spaced-between'), labelClassName));
-    // Support legacy checkbox
-    if (removeControl || removeField || reversed || inverted || spaced) {
-        return (React.createElement("div", { className: hashClass(styled, clsx((!removeField && 'field') || '')) },
-            React.createElement("div", { className: hashClass(styled, clsx(!removeControl && 'control', disabled && is('disabled'))) },
-                React.createElement("input", { className: classes, type: 'checkbox', readOnly: readonly, id: id, "data-testid": testId, disabled: disabled, name: name, value: value, checked: readonly ? checked : _checked, onChange: (e) => {
-                        return e;
-                    }, onClick: (e) => {
-                        const target = e.target;
-                        if (!readonly && target.checked !== undefined) {
-                            setChecked(target.checked);
-                        }
-                        target.value = value || '';
-                        if (onChange) {
-                            onChange({
-                                checkboxId: target.id,
-                                checkboxValue: target.value,
-                                checkboxName: target.name,
-                                checkboxChecked: target.checked,
-                            });
-                        }
-                        if (onClick) {
-                            onClick({
-                                checkboxId: target.id,
-                                checkboxValue: target.value,
-                                checkboxName: target.name,
-                                checkboxChecked: target.checked,
-                            });
-                        }
-                    }, ...others }),
-                React.createElement("label", { htmlFor: id, className: labelClasses }, label))));
-    }
-    return (React.createElement("div", { className: hashClass(styled, clsx(tile ? 'checkbox-tile' : 'checkbox', horizontalTile && is('horizontal'), className)) },
-        React.createElement("input", { type: 'checkbox', readOnly: readonly, id: id, "data-testid": testId, disabled: disabled, name: name, value: value, checked: readonly ? checked : _checked, onChange: (e) => {
+    return (React.createElement("div", { className: hashClass(styled, clsx(tile ? "checkbox-tile" : "checkbox", horizontalTile && is("horizontal"), className)), tabIndex: 0 },
+        React.createElement("input", { "aria-checked": checked, type: 'checkbox', readOnly: readonly, id: id, "data-testid": testId, disabled: disabled, name: name, value: value, checked: readonly ? checked : _checked, onChange: (e) => {
                 return e;
             }, onClick: (e) => {
                 const target = e.target;
                 if (!readonly && target.checked !== undefined) {
                     setChecked(target.checked);
                 }
-                target.value = value || '';
+                target.value = value || "";
                 if (onChange) {
                     onChange({
                         checkboxId: target.id,
@@ -89,13 +56,13 @@ const Checkbox = ({ checked, className, disabled, readonly, id = shortid.generat
                     });
                 }
             }, ...others }),
-        React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('checkbox-label', labelClassName)) },
+        React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx("checkbox-label")) },
             iconTile && React.createElement(Icon, { name: iconTile, size: IconSize.MEDIUM }),
             horizontalTile ? (React.createElement("span", null,
-                tile ? React.createElement("span", { className: hashClass(styled, clsx('checkbox-title')) }, label) : label,
-                tile && description && (React.createElement("span", { className: hashClass(styled, clsx('checkbox-description')) }, description)))) : (React.createElement(React.Fragment, null,
-                tile ? React.createElement("span", { className: hashClass(styled, clsx('checkbox-title')) }, label) : label,
-                tile && description && (React.createElement("span", { className: hashClass(styled, clsx('checkbox-description')) }, description)))))));
+                tile ? (React.createElement("span", { className: hashClass(styled, clsx("checkbox-title")) }, label)) : (label),
+                tile && description && (React.createElement("span", { className: hashClass(styled, clsx("checkbox-description")) }, description)))) : (React.createElement(React.Fragment, null,
+                tile ? (React.createElement("span", { className: hashClass(styled, clsx("checkbox-title")) }, label)) : (label),
+                tile && description && (React.createElement("span", { className: hashClass(styled, clsx("checkbox-description")) }, description)))))));
 };
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/lib/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../components/checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../components/checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/lib/components/checkbox/Checkbox.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { CheckboxProps } from './CheckboxProps';
-import { ComponentName } from '../enumsComponentsName';
+import { CheckboxProps } from "./CheckboxProps";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Checkbox Native Component
  * @param checked {boolean} Checked Checkbox
@@ -11,12 +11,9 @@ import { ComponentName } from '../enumsComponentsName';
  * @param onClick {ClickEvent}
  * @param onChange {ChangeEvent}
  * @param name {string} Name for checkbox
- * @param inverted {boolean} Inveted Checkbox color
- * @param spaced {boolean} Spaced Label
- * @param reversed {boolean} Reversed Checkbox Input with Label
  */
 declare const Checkbox: {
-    ({ id, checked, name, onClick, onChange, disabled, readonly, label, inverted, spaced, reversed, tile, description, iconTile, horizontalTile, }: CheckboxProps): JSX.Element;
+    ({ id, checked, name, onClick, onChange, disabled, readonly, label, tile, description, iconTile, horizontalTile, }: CheckboxProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Checkbox;

package/lib/components/checkbox/Checkbox.native.js

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-import { IconName } from '../icon/IconNameEnum';
-import shortid from 'shortid';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { Text, TextLevels } from '../text';
-import { View } from '../view';
-import { Icon, IconSize } from '../icon';
-import { TypographyBold } from '../../objects';
-import { ComponentName } from '../enumsComponentsName';
+import React, { useEffect, useState } from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import { IconName } from "../../components/icon/IconNameEnum";
+import shortid from "shortid";
+import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
+import { Text, TextLevels } from "../../components/text";
+import { View } from "../../components/view";
+import { Icon, IconSize } from "../../components/icon";
+import { TypographyAlign, TypographyBold } from "../../objects";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Checkbox Native Component
  * @param checked {boolean} Checked Checkbox
@@ -18,66 +18,72 @@ import { ComponentName } from '../enumsComponentsName';
  * @param onClick {ClickEvent}
  * @param onChange {ChangeEvent}
  * @param name {string} Name for checkbox
- * @param inverted {boolean} Inveted Checkbox color
- * @param spaced {boolean} Spaced Label
- * @param reversed {boolean} Reversed Checkbox Input with Label
  */
-const Checkbox = ({ id = shortid.generate(), checked, name, onClick, onChange, disabled, readonly, label, inverted, spaced, reversed, tile, description, iconTile, horizontalTile, }) => {
+const Checkbox = ({ id = shortid.generate(), checked, name, onClick, onChange, disabled, readonly, label, tile, description, iconTile, horizontalTile, }) => {
     const [_checked, setChecked] = useState(checked || false);
     useEffect(() => {
         setChecked(checked || false);
     }, [checked]);
     const styles = StyleSheet.create({
         container: {
-            flexDirection: reversed ? 'row-reverse' : 'row',
-            justifyContent: spaced ? 'space-between' : 'flex-start',
+            flexDirection: "row",
+            paddingBottom: 5,
+            justifyContent: "flex-start",
         },
         checkBox: {
-            alignItems: 'center',
-            justifyContent: horizontalTile ? 'center' : 'flex-start',
-            borderColor: !inverted ? getColorStyle(TrilogyColor.TERTIARY) : getColorStyle(TrilogyColor.WHITE),
-            borderWidth: 0.5,
+            alignItems: "center",
+            justifyContent: horizontalTile ? "center" : "flex-start",
+            borderColor: getColorStyle(TrilogyColor.FONT),
+            borderWidth: 0.6,
             width: 19,
             height: 19,
             borderRadius: 4,
-            marginRight: (!spaced && reversed && 0) || (spaced && reversed && 0) || (!spaced && !reversed && 10) || 0,
-            marginLeft: !spaced && reversed ? 10 : 0,
-            backgroundColor: (tile && disabled && '#4f4f4f') || (_checked && getColorStyle(TrilogyColor.SECONDARY)) || 'transparent',
+            marginRight: 10,
+            marginLeft: 0,
+            backgroundColor: (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) ||
+                (_checked && getColorStyle(TrilogyColor.MAIN)) ||
+                "transparent",
         },
         label: {
-            color: inverted ? getColorStyle(TrilogyColor.WHITE) : getColorStyle(TrilogyColor.TERTIARY),
-            alignSelf: 'center',
+            color: (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
+                (_checked && getColorStyle(TrilogyColor.MAIN)) ||
+                getColorStyle(TrilogyColor.MAIN),
         },
         tile: {
-            paddingBottom: 8,
+            padding: _checked ? 3 : 4,
+            paddingBottom: _checked ? 7 : 8,
             maxWidth: 140,
-            borderWidth: 2,
-            borderColor: (disabled && '#e1e1e1') ||
-                (_checked && getColorStyle(TrilogyColor.SECONDARY)) ||
-                getColorStyle(TrilogyColor.GREY),
+            borderWidth: (_checked && 2) || 1,
+            width: 126,
+            borderColor: (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) ||
+                (_checked && getColorStyle(TrilogyColor.MAIN)) ||
+                getColorStyle(TrilogyColor.FONT, 1),
             borderRadius: 6,
-            textAlign: 'center',
-            alignItems: 'center',
-            backgroundColor: disabled ? '#e1e1e1' : 'transparent',
-        },
-        tileLabel: {
-            color: getColorStyle(TrilogyColor.TERTIARY),
-            alignSelf: horizontalTile ? 'flex-start' : 'center',
+            textAlign: "center",
+            alignItems: "center",
+            backgroundColor: disabled
+                ? getColorStyle(TrilogyColor.DISABLED, 1)
+                : "transparent",
         },
         tileDescription: {
-            color: getColorStyle(TrilogyColor.TERTIARY),
-            alignSelf: horizontalTile ? 'flex-start' : 'center',
+            color: disabled
+                ? getColorStyle(TrilogyColor.DISABLED, 1)
+                : getColorStyle(TrilogyColor.MAIN),
+            alignSelf: horizontalTile ? "flex-start" : "center",
         },
         horizontalTile: {
-            paddingVertical: 16,
-            width: '100%',
-            height: 'auto',
-            borderWidth: 2,
-            borderColor: (disabled && '#e1e1e1') ||
-                (_checked && getColorStyle(TrilogyColor.SECONDARY)) ||
-                getColorStyle(TrilogyColor.GREY),
+            paddingVertical: _checked ? 17 : 18,
+            paddingHorizontal: _checked ? 5 : 6,
+            width: "100%",
+            height: "auto",
+            borderWidth: (_checked && 2) || 1,
+            borderColor: (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) ||
+                (_checked && getColorStyle(TrilogyColor.MAIN)) ||
+                getColorStyle(TrilogyColor.FONT, 1),
             borderRadius: 6,
-            backgroundColor: disabled ? '#e1e1e1' : 'transparent',
+            backgroundColor: disabled
+                ? getColorStyle(TrilogyColor.DISABLED, 1)
+                : "transparent",
         },
     });
     const handleClick = () => {
@@ -86,67 +92,73 @@ const Checkbox = ({ id = shortid.generate(), checked, name, onClick, onChange, d
             if (onClick) {
                 onClick({
                     checkboxId: id,
-                    checkboxValue: '',
-                    checkboxName: name || '',
+                    checkboxValue: "",
+                    checkboxName: name || "",
                     checkboxChecked: !_checked,
                 });
             }
             if (onChange) {
                 onChange({
                     checkboxId: id,
-                    checkboxValue: '',
-                    checkboxName: name || '',
+                    checkboxValue: "",
+                    checkboxName: name || "",
                     checkboxChecked: !_checked,
                 });
             }
         }
     };
     if (horizontalTile) {
-        return (React.createElement(TouchableOpacity, { style: styles.horizontalTile, onPress: () => handleClick() },
-            React.createElement(View, { style: { flexDirection: 'row' } },
+        return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.horizontalTile, onPress: () => handleClick() },
+            React.createElement(View, { style: { flexDirection: "row" } },
                 React.createElement(View, { style: {
-                        width: '10%',
-                        height: 'auto',
-                        justifyContent: 'center',
-                        alignItems: 'center',
+                        width: "10%",
+                        height: "auto",
+                        justifyContent: "center",
+                        alignItems: "center",
                         marginLeft: 10,
                     } }, iconTile && (React.createElement(View, null,
-                    React.createElement(Icon, { size: IconSize.SMALL, name: iconTile })))),
+                    React.createElement(Icon, { size: IconSize.SMALL, name: iconTile, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN })))),
                 React.createElement(View, { style: {
-                        width: '78%',
-                        flexDirection: 'row',
-                        alignSelf: 'stretch',
-                        flexWrap: 'wrap',
-                        height: 'auto',
+                        width: "78%",
+                        flexDirection: "row",
+                        alignSelf: "stretch",
+                        flexWrap: "wrap",
+                        height: "auto",
                     } },
                     React.createElement(View, null,
-                        label && typeof label.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.ONE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, String(label))),
-                        description && typeof description.valueOf() === 'string' && (React.createElement(Text, { style: styles.tileDescription }, String(description))))),
+                        label && typeof label.valueOf() === "string" && (React.createElement(Text, { style: styles.label, level: TextLevels.TWO, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD }, String(label))),
+                        description && typeof description.valueOf() === "string" ? (React.createElement(Text, { level: TextLevels.TWO, style: styles.tileDescription }, String(description))) : (description))),
                 React.createElement(View, { style: {
-                        width: '12%',
-                        alignItems: 'flex-end',
-                        justifyContent: 'center',
+                        width: "12%",
+                        alignItems: "flex-end",
+                        justifyContent: "center",
                         paddingRight: 10,
                     } },
-                    React.createElement(TouchableOpacity, { style: styles.checkBox, disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.WHITE, name: IconName.CHECK }))))));
+                    React.createElement(TouchableOpacity, { style: styles.checkBox, disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && (React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK })))))));
     }
     if (tile) {
-        return (React.createElement(TouchableOpacity, { style: horizontalTile ? styles.horizontalTile : styles.tile, onPress: () => handleClick() },
-            React.createElement(TouchableOpacity, { style: [{ alignSelf: 'flex-end', marginTop: 10 }, styles.checkBox], disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.WHITE, name: IconName.CHECK })),
-            React.createElement(View, { style: { width: '70%' } },
+        return (React.createElement(TouchableOpacity, { disabled: disabled, style: horizontalTile ? styles.horizontalTile : styles.tile, onPress: () => handleClick() },
+            React.createElement(TouchableOpacity, { style: [{ alignSelf: "flex-end", marginTop: 10 }, styles.checkBox], disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && (React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK }))),
+            React.createElement(View, { style: { width: "70%" } },
                 iconTile && (React.createElement(View, { style: {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "center",
                         marginBottom: 5,
                     } },
-                    React.createElement(Icon, { size: IconSize.SMALL, name: iconTile }))),
-                label && typeof label.valueOf() === 'string' && (React.createElement(Text, { level: TextLevels.ONE, typo: TypographyBold.TEXT_WEIGHT_SEMIBOLD, style: styles.label }, String(label))),
-                description && typeof description.valueOf() === 'string' && React.createElement(Text, null, String(description)))));
+                    React.createElement(Icon, { size: IconSize.MEDIUM, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN, name: iconTile }))),
+                label && typeof label.valueOf() === "string" && (React.createElement(Text, { level: TextLevels.TWO, typo: [
+                        TypographyBold.TEXT_WEIGHT_SEMIBOLD,
+                        TypographyAlign.TEXT_CENTERED,
+                    ], style: styles.label }, String(label))),
+                description && typeof description.valueOf() === "string" && (React.createElement(Text, { level: TextLevels.THREE, typo: [
+                        TypographyBold.TEXT_WEIGHT_SEMIBOLD,
+                        TypographyAlign.TEXT_CENTERED,
+                    ] }, String(description))))));
     }
-    return (React.createElement(TouchableOpacity, { style: styles.container, onPress: () => handleClick() },
-        React.createElement(TouchableOpacity, { style: styles.checkBox, disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.WHITE, name: IconName.CHECK })),
-        label && typeof label.valueOf() === 'string' ? React.createElement(Text, { style: styles.label }, String(label)) : label));
+    return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.container, onPress: () => handleClick() },
+        React.createElement(TouchableOpacity, { style: styles.checkBox, disabled: disabled, testID: id, onPressIn: () => handleClick() }, _checked && (React.createElement(Icon, { size: IconSize.SMALLER, color: TrilogyColor.BACKGROUND, name: IconName.CHECK }))),
+        label && typeof label.valueOf() === "string" ? (React.createElement(Text, { style: styles.label }, String(label))) : (label)));
 };
 Checkbox.displayName = ComponentName.Checkbox;
 export default Checkbox;