@trafilea/afrodita-components 2.1.0 → 2.3.2

package/README.md

@@ -1,2 +1,91 @@
-# afrodita-components
+# Afrodita Components · ![npm (tag)](https://img.shields.io/npm/v/@trafilea/afrodita-components/latest) ![npm (tag)](https://img.shields.io/npm/v/@trafilea/afrodita-components/beta)
+
 Reusable ReactJS components for Afrodita Design System.
+
+## Installation
+
+Afrodita Components is avaiable as an [npm package](https://www.npmjs.com/package/@trafilea/afrodita-components):
+
+```bash
+  npm install @trafilea/afrodita-components
+```
+
+## Usage/Examples
+
+```javascript
+import { ButtonPrimary } from '@trafilea/afrodita-components';
+
+function App() {
+  return <ButtonPrimary text="Click me!" onClick={() => console.log('Button clicked')} />;
+}
+```
+
+## Run Locally
+
+Clone the project
+
+```bash
+  git clone https://github.com/trafilea/afrodita-components.git
+```
+
+Go to the project directory
+
+```bash
+  cd afrodita-components
+```
+
+Install dependencies
+
+```bash
+  npm install
+```
+
+Start storybook
+
+```bash
+  npm run storybook
+```
+
+## Demo
+
+Visit our [Storybook](https://613911030091d9003a28fa18-hjstxthflc.chromatic.com/) deployed in [Chromatic](https://www.chromatic.com/).
+
+## Releases
+
+### Versioning policy
+
+In this section we define what versioning policy we’re using for this project. We follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html) principles, a well known and simple way of software versioning.
+
+#### Summary
+
+Given a version number MAJOR.MINOR.PATCH, increment the:
+
+- MAJOR version when you make incompatible API changes,
+- MINOR version when you add functionality in a backwards compatible manner, and
+- PATCH version when you make backwards compatible bug fixes.
+
+Additional labels for pre-release are available as extensions to the MAJOR.MINOR.PATCH format.
+
+Major releases can also contain new features, and any release can include bug fixes.
+
+For more information, visit this [confluence document](https://trafilea.atlassian.net/wiki/spaces/TRAF/pages/3023962113/Releasing).
+
+### Releasing process
+
+Note: In this project we’re using the Gitflow workflow.
+
+#### Beta versions
+
+Beta versions target the **develop** branch and they are not required. We’ll release new beta versions on demand. The CI/CD pipelines will take care of the deployment to the NPM repository every time a new version increment is detected.
+
+1. When the feature or bugfix is finished in its corresponding branch, increment the version number following the versioning policy. You can do it manually by updating the ‘version’ key in package.json or using [npm-version](https://docs.npmjs.com/cli/v7/commands/npm-version) that will increment the version number in package.json (major, minor or patch depending on the parameters), commit the change and create a tag with the same version number. For example: starting with 6.1.2 and running ‘npm version minor’, will increment to 6.2.0
+2. Start a pull request to develop and once merged the CI/CD pipelines will build and deploy the new version to the NPM repository, with the ‘beta’ tag.
+
+#### Production versions
+
+Production versions target the **main** branch. Ideally, we want to release new prod versions between medium or small intervals of time to let our consumers adopt the latest versions frequently. The CI/CD pipelines will take care of the deployment to the NPM repository every time a new version increment is detected.
+
+1. When we have a considerable amount of features or bugfixes ready to ship with the new version, increment the version number following the versioning policy. We can achieve this by incrementing the version number previously in the develop branch, or by creating a release (release/x.y.z) branch from develop and updating the version number in it. If opting for the second option, remember the [Gitflow workflow for release branches](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow).
+2. Create a tag with the version number.
+3. Start a pull request to main and once merged the CI/CD pipelines will build and deploy the new version to the NPM repository.
+4. Create a new Release in the github repository. Create the title following: **vx.y.z** (example: v1.0.1), choose the right tag, select the target branch and write a description with all the changes shipped with this new version.

package/build/dts/components/collection/index.d.ts

@@ -0,0 +1,5 @@
+import withProductGrid from './grid/WithProductGrid';
+export declare const Collection: {
+    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: import("./product/mobile/ProductItemMobile").ProductItemSmallMobileProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    withProductGrid: typeof withProductGrid;
+};

package/build/dts/components/collection/product/mobile/ProductItemMobile.d.ts

@@ -3,5 +3,5 @@ import { ProductItemProps } from '../types';
 export interface ProductItemSmallMobileProps extends ProductItemProps {
     size: ComponentSize.Medium | ComponentSize.Small;
 }
-declare const ProductItemMobile: ({ title, image, price, rating, size, tags, }: ProductItemSmallMobileProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ProductItemMobile;

package/build/dts/components/collection/product/mobile/ProductItemMobile.stories.d.ts

@@ -3,7 +3,7 @@ import { ProductItemSmallMobileProps } from './ProductItemMobile';
 import { ComponentSize } from '../../../../types/enums';
 declare const _default: {
     title: string;
-    component: ({ title, image, price, rating, size, tags, }: ProductItemSmallMobileProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+    component: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
     argTypes: {
         size: {
             options: ComponentSize[];

package/build/dts/components/collection/product/types.d.ts

@@ -10,4 +10,5 @@ export interface ProductItemProps {
         categoryTagText: string;
         seasonOfferTagText: string;
     };
+    alignName?: 'left' | 'center';
 }

package/build/dts/components/color/selector/PatternSelector.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface PatternSelectorProps {
+    url: string;
+    selected: boolean;
+    dataTestId?: string;
+}
+export declare const PatternSelector: ({ url, selected, dataTestId }: PatternSelectorProps) => JSX.Element;
+export {};

package/build/dts/components/color/selector/PatternSelector.test.d.ts

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

package/build/dts/components/cross-sell/Checkbox/CrossSellCheckbox.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface CrossSellCheckboxProps extends rightToLeftProps {
+    imageURL: string;
+    title: string;
+    description: string;
+    freeShippingText: string;
+    onChange: (checked: Boolean) => void;
+}
+interface rightToLeftProps {
+    rightToLeft: boolean;
+}
+export declare const CrossSellCheckbox: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
+export {};

package/build/dts/components/cross-sell/Checkbox/CrossSellCheckbox.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+import { CrossSellCheckboxProps } from './CrossSellCheckbox';
+declare const _default: {
+    title: string;
+    component: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
+};
+export default _default;
+export declare const Example: Story<CrossSellCheckboxProps>;

package/build/dts/components/cross-sell/Checkbox/CrossSellCheckbox.test.d.ts

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

package/build/dts/components/cross-sell/index.d.ts

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

package/build/dts/components/icon-button/IconButton.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Story } from '@storybook/react';
 import { IconButtonProps } from './IconButton';
-import { ComponentSize } from '../..';
+import { ComponentSize } from '../../types/enums';
 declare const _default: {
     title: string;
     component: ({ children, disabled, size, onClick, }: IconButtonProps) => JSX.Element;

package/build/dts/components/icon-button/amazonAndPaypal/AmazonPaypalButtons.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface AmazonPaypalBtnProps {
+    onClick: () => void;
+}
+export declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
+export declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;

package/build/dts/components/icon-button/amazonAndPaypal/AmazonPaypalButtons.stories.d.ts

@@ -0,0 +1,7 @@
+import { Story } from '@storybook/react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Paypal: Story;
+export declare const Amazon: Story;

package/build/dts/components/icon-button/amazonAndPaypal/AmazonPaypalButtons.test.d.ts

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

package/build/dts/components/icons/Payment/Amazon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from '../../../types/types';
+export declare const Amazon: ({ height, width }: IconProps) => JSX.Element;

package/build/dts/components/icons/Payment/index.d.ts

@@ -4,3 +4,4 @@ export * from './Amex';
 export * from './JCB';
 export * from './Paypal';
 export * from './Klarna';
+export * from './Amazon';

package/build/dts/components/index.d.ts

@@ -36,4 +36,7 @@ import Review from './review/Review';
 import SliderNavigation from './slider/SliderNavigation';
 import { DropdownListIcons } from './dropdown-list-icons/DropdownListIcons';
 import Image from './shared/image/Image';
-export { ThemeProvider, Icon, Card, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, SimpleDropdown, SizeSelector, SizeFitGuide, TextButton, DiscountTag, PriceLabel, SingleColorPicker, MultiColorPicker, ProductGallery, Rating, FitPredictor, ProgressBar, IconButton, Tooltip, Accordion, AccordionBox, AccordionIcon, Checkbox, RadioGroupInput, Bundle, CategoryTag, SeasonOfferTag, Timer, Input, PaymentMethod, OfferBanner, Totals, DeliveryDetails, ScrollToTop, OrderBar, SizeTable, SimpleOrderItem, Review, SliderNavigation, DropdownListIcons, Image, };
+import * as AmazonAndPaypalButtons from './icon-button/amazonAndPaypal/AmazonPaypalButtons';
+import * as CrossSell from './cross-sell';
+import { Collection } from './collection/index';
+export { ThemeProvider, Icon, Card, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, SimpleDropdown, SizeSelector, SizeFitGuide, TextButton, DiscountTag, PriceLabel, SingleColorPicker, MultiColorPicker, ProductGallery, Rating, FitPredictor, ProgressBar, IconButton, Tooltip, Accordion, AccordionBox, AccordionIcon, Checkbox, RadioGroupInput, Bundle, CategoryTag, SeasonOfferTag, Timer, Input, PaymentMethod, OfferBanner, Totals, DeliveryDetails, ScrollToTop, OrderBar, SizeTable, SimpleOrderItem, Review, SliderNavigation, DropdownListIcons, Image, AmazonAndPaypalButtons, CrossSell, Collection, };

package/build/dts/components/slider/StyledSlider.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import Slider from 'react-slick';
+import Slider from '@ant-design/react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 interface StyledSliderProps {
@@ -8,7 +8,7 @@ interface StyledSliderProps {
     dotsSpacing: number;
     arrowPaddingOffset: number;
 }
-declare const StyledSlider: import("@emotion/styled").StyledComponent<import("react-slick").Settings & {
+declare const StyledSlider: import("@emotion/styled").StyledComponent<import("@ant-design/react-slick").Settings & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyledSliderProps, {}, {
     ref?: import("react").Ref<Slider> | undefined;

package/build/dts/config/breakpoints.d.ts

@@ -0,0 +1,5 @@
+export declare const Breakpoints: {
+    desktop: number;
+    tablet: number;
+    phone: number;
+};

package/build/dts/hooks/WindowDimensions.d.ts

@@ -0,0 +1,7 @@
+export declare const useWindowDimensions: () => {
+    isMobile: boolean;
+    windowDimensions: {
+        width: number;
+        height: number;
+    };
+};

package/build/dts/types/types.d.ts

@@ -75,9 +75,13 @@ export declare type Color = {
     secondaryColor?: string;
     tertiaryColor?: string;
 };
+export declare type Pattern = {
+    url: string;
+};
 export declare type ColorPickerOption = {
     label: string;
-    color: Color;
+    color?: Color;
+    pattern?: Pattern;
 };
 export declare type RadioGroupOption = {
     value: string;

package/build/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React, { ReactNode, ElementType } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 
 declare const SixtyDaysGuarantee: ({ height, width, fill, title }: IconProps) => JSX.Element;
 
@@ -232,12 +233,15 @@ declare const Paypal: ({ height, width }: IconProps) => JSX.Element;
 
 declare const Klarna: ({ height, width }: IconProps) => JSX.Element;
 
+declare const Amazon: ({ height, width }: IconProps) => JSX.Element;
+
 declare const Payment_Visa: typeof Visa;
 declare const Payment_MasterCard: typeof MasterCard;
 declare const Payment_AMEX: typeof AMEX;
 declare const Payment_JCB: typeof JCB;
 declare const Payment_Paypal: typeof Paypal;
 declare const Payment_Klarna: typeof Klarna;
+declare const Payment_Amazon: typeof Amazon;
 declare namespace Payment {
   export {
     Payment_Visa as Visa,
@@ -246,6 +250,7 @@ declare namespace Payment {
     Payment_JCB as JCB,
     Payment_Paypal as Paypal,
     Payment_Klarna as Klarna,
+    Payment_Amazon as Amazon,
   };
 }
 
@@ -370,9 +375,13 @@ declare type Color = {
     secondaryColor?: string;
     tertiaryColor?: string;
 };
+declare type Pattern = {
+    url: string;
+};
 declare type ColorPickerOption = {
     label: string;
-    color: Color;
+    color?: Color;
+    pattern?: Pattern;
 };
 declare type RadioGroupOption = {
     value: string;
@@ -747,10 +756,10 @@ declare const Input: {
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
 };
 
-declare const index_d_Input: typeof Input;
-declare namespace index_d {
+declare const index_d$1_Input: typeof Input;
+declare namespace index_d$1 {
   export {
-    index_d_Input as Input,
+    index_d$1_Input as Input,
   };
 }
 
@@ -913,4 +922,68 @@ interface ImageProps extends ImageStyleProps {
 }
 declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, }: ImageProps) => JSX.Element;
 
-export { _default as Accordion, AccordionBox, AccordionIcon, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Color, ColorPickerOption, ComponentPosition, ComponentSize, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };
+interface AmazonPaypalBtnProps {
+    onClick: () => void;
+}
+declare const AmazonButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
+declare const PaypalButton: ({ onClick }: AmazonPaypalBtnProps) => JSX.Element;
+
+type AmazonPaypalButtons_d_AmazonPaypalBtnProps = AmazonPaypalBtnProps;
+declare const AmazonPaypalButtons_d_AmazonButton: typeof AmazonButton;
+declare const AmazonPaypalButtons_d_PaypalButton: typeof PaypalButton;
+declare namespace AmazonPaypalButtons_d {
+  export {
+    AmazonPaypalButtons_d_AmazonPaypalBtnProps as AmazonPaypalBtnProps,
+    AmazonPaypalButtons_d_AmazonButton as AmazonButton,
+    AmazonPaypalButtons_d_PaypalButton as PaypalButton,
+  };
+}
+
+interface CrossSellCheckboxProps extends rightToLeftProps {
+    imageURL: string;
+    title: string;
+    description: string;
+    freeShippingText: string;
+    onChange: (checked: Boolean) => void;
+}
+interface rightToLeftProps {
+    rightToLeft: boolean;
+}
+declare const CrossSellCheckbox: ({ imageURL, title, description, freeShippingText, rightToLeft, onChange, }: CrossSellCheckboxProps) => JSX.Element;
+
+type index_d_CrossSellCheckboxProps = CrossSellCheckboxProps;
+declare const index_d_CrossSellCheckbox: typeof CrossSellCheckbox;
+declare namespace index_d {
+  export {
+    index_d_CrossSellCheckboxProps as CrossSellCheckboxProps,
+    index_d_CrossSellCheckbox as CrossSellCheckbox,
+  };
+}
+
+interface ProductItemProps {
+    title: string;
+    image: ImageProps;
+    price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
+    rating: Pick<RatingProps, 'rating' | 'reviews'>;
+    tags?: {
+        categoryTagText: string;
+        seasonOfferTagText: string;
+    };
+    alignName?: 'left' | 'center';
+}
+
+interface ProductItemSmallMobileProps extends ProductItemProps {
+    size: ComponentSize.Medium | ComponentSize.Small;
+}
+
+declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
+    (props: Omit<P, 'title' | 'image' | 'price' | 'rating'>): JSX.Element;
+    displayName: string;
+};
+
+declare const Collection: {
+    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    withProductGrid: typeof withProductGrid;
+};
+
+export { _default as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons_d as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, index_d$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pattern, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, TextButton, Theme, ThemeProvider, Timer, Tooltip, Totals, WithTestId };