@trafilea/afrodita-components 2.0.1 → 2.3.0

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/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/dropdown-list-icons/DropdownListIcons.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DropdownListIconsItem } from '../../types/types';
+export interface DropdownListIconsProps {
+    items: DropdownListIconsItem[];
+}
+export declare const DropdownListIcons: ({ items }: DropdownListIconsProps) => JSX.Element;

package/build/dts/components/dropdown-list-icons/DropdownListIcons.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+import { DropdownListIconsProps } from './DropdownListIcons';
+declare const _default: {
+    title: string;
+    component: ({ items }: DropdownListIconsProps) => JSX.Element;
+};
+export default _default;
+export declare const Base: Story<DropdownListIconsProps>;

package/build/dts/components/dropdown-list-icons/DropdownListIcons.test.d.ts

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

package/build/dts/components/dropdown-list-icons/Styled.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const List: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const DropdownWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ArrowContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface StyledDropdownProps {
+    borderColor: string;
+}
+export declare const StyledDropdown: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyledDropdownProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+interface DropdownItemProps {
+    borderColor: string;
+    color: string;
+    hoverColor: string;
+}
+export declare const DropdownItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DropdownItemProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export {};

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/Actions/Question.d.ts

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

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

@@ -2,3 +2,4 @@ export * from './Check';
 export * from './ClearLight';
 export * from './LightExclamation';
 export * from './LightCheck';
+export * from './Question';

package/build/dts/components/icons/Messaging/Comment.d.ts

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

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

@@ -1,2 +1,3 @@
 export * from './QuestionCircle';
 export * from './Messenger';
+export * from './Comment';

package/build/dts/components/icons/PDP/Shipping.d.ts

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

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

@@ -7,3 +7,4 @@ export * from './Star';
 export * from './StarEmpty';
 export * from './StarHalf';
 export * from './Stopwatch';
+export * from './Shipping';

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

@@ -34,4 +34,8 @@ import { SizeTable } from './size-table/SizeTable';
 import SimpleOrderItem from './product/order/item/SimpleOrderItem';
 import Review from './review/Review';
 import SliderNavigation from './slider/SliderNavigation';
-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, };
+import { DropdownListIcons } from './dropdown-list-icons/DropdownListIcons';
+import Image from './shared/image/Image';
+import * as AmazonAndPaypalButtons from './icon-button/amazonAndPaypal/AmazonPaypalButtons';
+import * as CrossSell from './cross-sell';
+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, };

package/build/dts/components/product/order/item/SimpleOrderItem.d.ts

@@ -11,6 +11,10 @@ export interface ProductOrderItemProps {
         alt: string;
     };
     price: Price;
+    tag?: {
+        text: string;
+        backgroundColor: string;
+    };
 }
-declare const SimpleOrderItem: ({ title, subtitle, image, price }: ProductOrderItemProps) => JSX.Element;
+declare const SimpleOrderItem: ({ title, subtitle, image, price, tag }: ProductOrderItemProps) => JSX.Element;
 export default SimpleOrderItem;

package/build/dts/components/product/order/item/SimpleOrderItem.stories.d.ts

@@ -3,8 +3,9 @@ import { Story } from '@storybook/react';
 import { ProductOrderItemProps } from './SimpleOrderItem';
 declare const _default: {
     title: string;
-    component: ({ title, subtitle, image, price }: ProductOrderItemProps) => JSX.Element;
+    component: ({ title, subtitle, image, price, tag }: ProductOrderItemProps) => JSX.Element;
 };
 export default _default;
 export declare const Default: Story<ProductOrderItemProps>;
 export declare const PriceColor: Story<ProductOrderItemProps>;
+export declare const WithTag: Story<ProductOrderItemProps>;

package/build/dts/components/shared/image/Image.d.ts

@@ -3,10 +3,12 @@ interface ImageStyleProps {
     height?: string;
     width?: string;
     borderRadius?: string;
+    objectFit?: string;
+    objectPosition?: string;
 }
 export interface ImageProps extends ImageStyleProps {
     src: string;
     alt: string;
 }
-declare const Image: ({ src, alt, height, width, borderRadius }: ImageProps) => JSX.Element;
+declare const Image: ({ src, alt, height, width, borderRadius, objectFit, objectPosition, }: ImageProps) => JSX.Element;
 export default Image;

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

@@ -1,3 +1,4 @@
+import { IconType } from '../components/icons';
 import { ComponentSize } from './enums';
 export interface Theme {
     palette: {
@@ -74,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;
@@ -93,3 +98,11 @@ export interface IconWithOpacityProps extends IconProps {
 export interface WithTestId {
     dataTestId?: string;
 }
+export declare type DropdownListIconsItem = {
+    Icon: IconType;
+    items: DropdownListIconsSubItem[];
+};
+export declare type DropdownListIconsSubItem = {
+    description: string;
+    callback: () => void;
+};