@omniumretail/component-library 0.1.9 → 0.1.10

package/dist/main.css

@@ -0,0 +1,263 @@
+/*!***************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Button/styles.module.scss ***!
+  \***************************************************************************************************************************************************************/
+.lCPh1mJwiXUUOgmbv_mk {
+  padding: 12px 24px;
+  border-radius: 4px;
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  text-decoration: none;
+  border: none;
+  font-size: 14px;
+  line-height: 16.8px;
+  font-weight: 700;
+  font-family: "Silka", sans-serif;
+  background-color: var(--button-default-background);
+  color: var(--button-default-text-color);
+}
+.lCPh1mJwiXUUOgmbv_mk:hover {
+  background-color: var(--button-default-background-hover-color);
+  color: var(--button-default-text-hover-color) !important;
+}
+.lCPh1mJwiXUUOgmbv_mk:focus, .lCPh1mJwiXUUOgmbv_mk:active, .lCPh1mJwiXUUOgmbv_mk:focus:active {
+  background-color: var(--button-default-background-focus-color);
+  color: var(--button-default-text-focus-color);
+}
+.lCPh1mJwiXUUOgmbv_mk:disabled, .lCPh1mJwiXUUOgmbv_mk.vwrGv_jOJcIvImjzKZNv {
+  background-color: var(--button-disabled-background-color);
+  color: var(--button-disabled-default-text-color);
+  pointer-events: none;
+}
+.PYUelyvKNnKRxaBMgCyk {
+  flex-direction: row-reverse;
+  gap: 5px;
+}
+.edzSVcT9ajLWxd6QfVI1 {
+  background-color: var(--button-style-1-background);
+  color: var(--button-style-1-text-color);
+}
+.edzSVcT9ajLWxd6QfVI1:hover {
+  background-color: var(--button-style-1-background-hover-color);
+  color: var(--button-style-1-text-hover-color) !important;
+}
+.edzSVcT9ajLWxd6QfVI1:focus, .edzSVcT9ajLWxd6QfVI1:active, .edzSVcT9ajLWxd6QfVI1:focus:active {
+  background-color: var(--button-style-1-background-focus-color);
+  color: var(--button-style-1-text-focus-color);
+}
+.edzSVcT9ajLWxd6QfVI1:disabled, .edzSVcT9ajLWxd6QfVI1.vwrGv_jOJcIvImjzKZNv {
+  background-color: var(--button-disabled-background-color);
+  color: var(--button-disabled-default-text-color);
+  pointer-events: none;
+}
+/*!***************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Header/styles.module.scss ***!
+  \***************************************************************************************************************************************************************/
+.SF5f_Q_Ggz_4JHUHS2Xa {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 75px;
+  gap: 0 24px;
+  position: relative;
+}
+@media (max-width: 767px) {
+  .SF5f_Q_Ggz_4JHUHS2Xa {
+    padding-top: 32px;
+  }
+}
+@media (min-width: 767px) {
+  .SF5f_Q_Ggz_4JHUHS2Xa {
+    padding: 0 40px;
+  }
+}
+.SF5f_Q_Ggz_4JHUHS2Xa .fVSt3bSZBcJGsOdA5nIN {
+  font-size: var(--font-size-body-4);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+}
+@media (max-width: 767px) {
+  .SF5f_Q_Ggz_4JHUHS2Xa .yVW6IeVCSAwXxdRW9PIK {
+    position: absolute;
+    top: 0;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    text-align: center;
+  }
+}
+/*!*************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Link/styles.module.scss ***!
+  \*************************************************************************************************************************************************************/
+.ii1Ag3GTfp8unGCe48A0 {
+  display: inline-flex;
+  text-decoration: none;
+  height: auto;
+  color: var(--color-black);
+  font-size: var(--font-size-body-3);
+  line-height: 100%;
+  font-weight: 300;
+  font-style: var(--font-style-italic);
+}
+
+.L9ncGwaItcjHJBLuwrKb {
+  color: var(--color-orange);
+  font-style: var(--font-style-normal);
+}
+
+.Yrb4eAglcF7FedoEB9AH span:nth-child(2) {
+  margin-inline-end: 8px;
+  margin-inline-start: 0;
+  order: -1;
+}
+/*!**************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Input/styles.module.scss ***!
+  \**************************************************************************************************************************************************************/
+.GhX1oPovx60SBqLAcIRO {
+  border-color: rgba(var(--color-black-rgb), 0.5);
+  height: 50px;
+  font-size: var(--font-size-body-3);
+  line-height: 100%;
+  color: var(--color-black);
+  border-radius: 5px;
+}
+/*!***************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Select/styles.module.scss ***!
+  \***************************************************************************************************************************************************************/
+._ox_QPqUHev1INeaUhs7 .ant-select-selector {
+  border-color: rgba(var(--color-black-rgb), 0.5) !important;
+  height: 50px !important;
+  display: flex;
+  align-items: center;
+}
+._ox_QPqUHev1INeaUhs7 .ant-select-arrow {
+  color: var(--color-black);
+}
+/*!*************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/InputCountryCode/styles.module.scss ***!
+  \*************************************************************************************************************************************************************************/
+.bisuiYUGnAaj47TMXXcY {
+  display: flex !important;
+}
+/*!**************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Label/styles.module.scss ***!
+  \**************************************************************************************************************************************************************/
+.YPXf1KvhUKPvYzjuCpbK {
+  display: block;
+  color: var(--color-black);
+  text-transform: capitalize;
+  font-size: var(--font-size-body-base);
+  line-height: 125%;
+  font-weight: var(--font-weight-semibold);
+}
+.YPXf1KvhUKPvYzjuCpbK:not(:first-child) {
+  margin-top: 8px;
+}
+.YPXf1KvhUKPvYzjuCpbK.FpsgzNaIkKnxuWthvj1T {
+  margin-top: 24px;
+}
+/*!******************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Separator/styles.module.scss ***!
+  \******************************************************************************************************************************************************************/
+.EBnBgAHgtsQFrDoso9Dw {
+  background-color: var(--color-orange);
+  height: 1px;
+  border: none;
+}
+.FLVlQ5eFtNDkCl4IcIIx {
+  opacity: 50%;
+}
+.L2HU9MLCi6B1ZsJyWfp9 {
+  background-color: var(--color-blue);
+}
+.MQcBac9Gnb9D2ONENY8Q {
+  margin: 8px 0;
+}
+.tdvYp9O5RnLEsNa3E_wz {
+  margin: 16px 0;
+}
+.hWWGCDnwP_ROWFDlyVxe {
+  margin: 24px 0;
+}
+/*!**************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Table/styles.module.scss ***!
+  \**************************************************************************************************************************************************************/
+.pwZdBKCECvzAH92fQDTI {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+.pwZdBKCECvzAH92fQDTI .ant-table-thead > tr > th {
+  background-color: transparent;
+  border: 0px;
+  color: var(--color-blue);
+}
+.pwZdBKCECvzAH92fQDTI .ant-table-thead > tr > th:before {
+  display: none;
+}
+.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr {
+  cursor: pointer;
+}
+.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr:last-child > td {
+  border-bottom: 1px solid var(--color-grey-light) !important;
+}
+.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr:first-child > td {
+  border-top: 1px solid var(--color-blue) !important;
+}
+.pwZdBKCECvzAH92fQDTI .ant-table-tbody > tr:hover td {
+  border-radius: 0 !important;
+  border-bottom-color: var(--color-grey-light) !important;
+}
+.pwZdBKCECvzAH92fQDTI .ant-space {
+  align-self: flex-end;
+}
+.pwZdBKCECvzAH92fQDTI .ant-select-selection-placeholder {
+  color: var(--color-black);
+}
+.pwZdBKCECvzAH92fQDTI .ant-select-selector,
+.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search {
+  border: none !important;
+  box-shadow: none !important;
+}
+.pwZdBKCECvzAH92fQDTI .ant-select-selector:focus, .pwZdBKCECvzAH92fQDTI .ant-select-selector:hover,
+.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:focus,
+.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:hover {
+  border: none !important;
+  box-shadow: none !important;
+}
+/*!************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/Tag/styles.module.scss ***!
+  \************************************************************************************************************************************************************/
+.yhGDUJJiYhqjPCJgNdjI {
+  contain: inline-size;
+}
+.LEywos4xlf3LV6eEFLFv {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+}
+.LEywos4xlf3LV6eEFLFv .ant-input {
+  height: 50px;
+  padding-left: 40px;
+}
+.VhQgSZHBi1swQZeQePfL {
+  height: 50px;
+}
+.Hfh5KLg4Y_g44Ajhx9aV .ant-tag {
+  background-color: var(--color-orange);
+  color: var(--color-white);
+  padding: 6px 16px;
+  max-width: 240px;
+}
+.Hfh5KLg4Y_g44Ajhx9aV .anticon-close {
+  color: var(--color-white);
+  font-size: 12px;
+}
+.Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover {
+  color: var(--color-black);
+}

package/dist/types/components/Button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from "@storybook/react";
+import { CustomButtonProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<CustomButtonProps>;
+export declare const Secondary: Story<CustomButtonProps>;

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from 'antd';
+export interface CustomButtonProps extends ButtonProps {
+    iconAlignRight?: boolean;
+    buttonStyle?: string;
+}
+export declare const Button: (props: CustomButtonProps) => JSX.Element;

package/dist/types/components/Header/Header.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { HeaderProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<HeaderProps>;

package/dist/types/components/Header/index.d.ts

@@ -0,0 +1,6 @@
+export interface HeaderProps {
+    backLink?: boolean;
+    title: string;
+    homeLink?: boolean;
+}
+export declare const Header: (props: HeaderProps) => JSX.Element;

package/dist/types/components/Input/Input.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { FormInputFieldProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<FormInputFieldProps>;

package/dist/types/components/Input/index.d.ts

@@ -0,0 +1,7 @@
+import { FormItemProps, InputProps } from 'antd';
+export interface FormInputFieldProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    inputProps?: InputProps;
+}
+export declare const InputField: (inputProps: InputProps) => JSX.Element;
+export declare const FormInputField: ({ inputProps, ...itemProps }: FormInputFieldProps) => JSX.Element;

package/dist/types/components/InputCountryCode/index.d.ts

@@ -0,0 +1,8 @@
+import { FormItemProps, InputProps, SelectProps } from 'antd';
+export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
+    name: string;
+    selectProps?: SelectProps;
+    inputProps?: InputProps;
+    inputWithSelectBoxValue?: string;
+}
+export declare const InputCountryCode: ({ inputProps, selectProps, inputWithSelectBoxValue, ...itemProps }: FormInputCountryCodeProps) => JSX.Element;

package/dist/types/components/InputCountryCode/inputCountryCode.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { FormInputCountryCodeProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<FormInputCountryCodeProps>;

package/dist/types/components/Label/Label.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from "@storybook/react";
+import { LabelProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<LabelProps>;
+export declare const Secondary: Story<LabelProps>;

package/dist/types/components/Label/index.d.ts

@@ -0,0 +1,5 @@
+export interface LabelProps {
+    forAttribute?: string;
+    children?: any;
+}
+export declare const Label: (props: LabelProps) => JSX.Element;

package/dist/types/components/Link/Link.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, Story } from "@storybook/react";
+import { CustomLinkProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<CustomLinkProps>;
+export declare const Secondary: Story<CustomLinkProps>;
+export declare const iconAlignRight: Story<CustomLinkProps>;

package/dist/types/components/Link/index.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from 'antd';
+export interface CustomLinkProps extends ButtonProps {
+    iconAlignRight?: boolean;
+    linkSecondary?: boolean;
+}
+export declare const Link: (props: CustomLinkProps) => JSX.Element;

package/dist/types/components/Select/Select.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from "@storybook/react";
+import { SelectProps } from 'antd';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<SelectProps<any, import("rc-select/lib/Select").DefaultOptionType>>;
+export declare const noArguments: Story<SelectProps<any, import("rc-select/lib/Select").DefaultOptionType>>;

package/dist/types/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+import { SelectProps } from 'antd';
+export declare const CustomSelect: (props: SelectProps) => any;

package/dist/types/components/Separator/Separator.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from "@storybook/react";
+import { SeparatorProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<SeparatorProps>;
+export declare const Secondary: Story<SeparatorProps>;

package/dist/types/components/Separator/index.d.ts

@@ -0,0 +1,11 @@
+export declare enum Spaces {
+    s = "s",
+    m = "m",
+    l = "l"
+}
+export interface SeparatorProps {
+    hasOpacity?: boolean;
+    colorIsBlue?: boolean;
+    space: Spaces;
+}
+export declare const Separator: (props: SeparatorProps) => JSX.Element;

package/dist/types/components/Table/Table.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, Story } from "@storybook/react";
+import { customTableProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<customTableProps>;
+export declare const Secondary: Story<customTableProps>;
+export declare const WithCheckbox: Story<customTableProps>;

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1,19 @@
+import { TableProps } from 'antd';
+export interface FilterOptions {
+    value: string;
+    label: string;
+    direction: string;
+}
+export declare enum sortBy {
+    asc = "asc",
+    desc = "desc"
+}
+export interface customTableProps extends TableProps<any> {
+    fieldsToSort?: any[];
+    selectPlaceholder?: string;
+    onSort?: (field: any, sortBy: any) => void;
+    sortInfo?: any;
+    paginationInfo?: any;
+    headingTranslationsKey?: string;
+}
+export declare const CustomTable: (props: customTableProps) => JSX.Element;

package/dist/types/components/Tag/Tag.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { TagProps } from 'antd';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<TagProps>;

package/dist/types/components/Tag/index.d.ts

@@ -0,0 +1,5 @@
+import { TagProps } from 'antd';
+export interface customTagProps extends TagProps {
+    customTags?: any;
+}
+export declare const TagField: (props: customTagProps) => JSX.Element;

package/dist/types/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Button';
+export * from './Header';
+export * from './Input';
+export * from './InputCountryCode';
+export * from './Label';
+export * from './Link';
+export * from './Select';
+export * from './Separator';
+export * from './Table';
+export * from './Tag';

package/dist/types/constants/i18n.d.ts

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

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": false,
-  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://bitbucket.org/product_admin/components-lib-omnium/src/"
-  },
-  "author": "",
-  "license": "MIT",
+  "main": "dist/bundle.js",
+  "typings": "./dist/types/index",
   "dependencies": {
+    "@ant-design/icons": "^4.8.0",
+    "@babel/core": "^7.16.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -18,19 +16,67 @@
     "@types/node": "^18.11.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "antd": "^5.1.2",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "classnames": "^2.3.2",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-fetch-backend": "^5.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prompts": "^2.4.2",
+    "rc-tween-one": "^3.0.6",
     "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-i18next": "^12.1.4",
+    "react-refresh": "^0.11.0",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
     "sass": "^1.56.1",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
     "typescript": "^4.9.3",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "prepublish": "rm -rf ./dist && npm run build",
+    "start": "webpack -w",
+    "build": "webpack",
+    "test": "node scripts/test.js",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public"
   },
@@ -75,6 +121,69 @@
     "@storybook/testing-library": "^0.0.13",
     "babel-plugin-named-exports-order": "^0.0.2",
     "prop-types": "^15.8.1",
-    "webpack": "^5.75.0"
+    "react-scripts": "^5.0.1",
+    "storybook-addon-sass-postcss": "^0.1.3",
+    "storybook-css-modules": "^1.0.8",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [
+      "/Users/carlossoares/Workplace/Sitoo/components-lib-omnium/component-library/src"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }

package/src/assets/scss/_global.scss

@@ -11,8 +11,8 @@
     --color-blue: #09168B;
     --color-blue-rgb: 9, 22, 139;
 
-    --color-grey-light: #D9D9D9;
-    --color-grey-light-rgb: 217, 217, 217;
+    --color-grey-light: #f0f0f0;
+    --color-grey-light-rgb: 240, 240, 240;
     --color-grey: #C7CAC9;
     --color-grey-rgb: 199, 202, 201;
     --color-grey-dark: #797979;

package/src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import { Button, CustomButtonProps } from './Button';
+import { Button, CustomButtonProps } from '.';
 
 export default {
     title: 'Button',