@trafilea/afrodita-components 4.0.2-beta.6 → 4.1.0

package/build/theme/truekind.theme.d.ts

@@ -0,0 +1,383 @@
+import { CSSProperties } from 'react';
+
+declare type Theme = {
+    name: string;
+    fontSizes: number[];
+    fontWeights: number[];
+    lineHeights: number[];
+    mediaQueries: ThemeBreakpoints;
+    radius: {
+        regular: string;
+    };
+    zIndex: {
+        modal: number;
+        overlay: number;
+    };
+    colors: ThemeColors;
+    component: ThemeComponent;
+    typography: ThemeTypography;
+    fonts: ThemeFonts;
+    assets: ThemeAssets;
+};
+declare type ThemeBreakpoints = {
+    mobile: number;
+    desktop: number;
+};
+declare type ThemeBasicPallete = {
+    color: string;
+    contrast: string;
+};
+declare type ThemeColorPallete = ThemeBasicPallete & {
+    soft: ThemeBasicPallete;
+};
+declare type ThemeColorPrimaryPallete = ThemeColorPallete & {
+    20: ThemeColorPallete;
+    40: ThemeColorPallete;
+    60: ThemeColorPallete;
+    80: ThemeColorPallete;
+};
+declare type ThemeColors = {
+    pallete: {
+        primary: ThemeColorPrimaryPallete;
+        secondary: ThemeColorPrimaryPallete;
+    } & Partial<Record<string, ThemeColorPallete>>;
+    shades: {
+        black: ThemeBasicPallete;
+        white: ThemeBasicPallete;
+        5: ThemeBasicPallete;
+        10: ThemeBasicPallete;
+        50: ThemeBasicPallete;
+        100: ThemeBasicPallete;
+        150: ThemeBasicPallete;
+        200: ThemeBasicPallete;
+        250: ThemeBasicPallete;
+        300: ThemeBasicPallete;
+        350: ThemeBasicPallete;
+        400: ThemeBasicPallete;
+        450: ThemeBasicPallete;
+        500: ThemeBasicPallete;
+        550: ThemeBasicPallete;
+        600: ThemeBasicPallete;
+        650: ThemeBasicPallete;
+        700: ThemeBasicPallete;
+        750: ThemeBasicPallete;
+        800: ThemeBasicPallete;
+        850: ThemeBasicPallete;
+        900: ThemeBasicPallete;
+        950: ThemeBasicPallete;
+        990: ThemeBasicPallete;
+    };
+    semantic: {
+        positive: ThemeBasicPallete;
+        urgent: ThemeBasicPallete;
+        attention: ThemeBasicPallete;
+        informative: ThemeBasicPallete;
+    };
+    border: {
+        color: string;
+        disabled: string;
+        highlight: string;
+    };
+    background: {
+        color: string;
+        disabled: string;
+    };
+    text: {
+        color: string;
+        disabled: string;
+    };
+};
+declare type ThemeComponent = {
+    button: {
+        border: string;
+        borderRadius: string;
+        fontWeight: number;
+        size: {
+            small: {
+                fontSize: string;
+                padding: string;
+            };
+            medium: {
+                fontSize: string;
+                padding: string;
+            };
+            large: {
+                fontSize: string;
+                padding: string;
+            };
+        };
+        primary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        secondary: {
+            active: {
+                backgroundColor: string;
+                color: string;
+            };
+            hover: {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+    };
+    input: {
+        background: string;
+        color: string;
+        placeholderColor: string;
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        padding: string;
+        lineHeight: string;
+        border: string;
+        boxShadow: string;
+    };
+    inputCustom: {
+        button: {
+            borderRadius: string;
+        };
+        input: {
+            borderRadius: string;
+        };
+    };
+    selector: {
+        size: {
+            small: {
+                padding: string;
+                borderRadius: string;
+            };
+            medium: {
+                padding: string;
+                borderRadius: string;
+            };
+        };
+        default: {
+            fontWeight: number;
+            border: string;
+            background: string;
+            color: string;
+        };
+        hover: {
+            fontWeight: number;
+            background: string;
+            border: string;
+            color: string;
+        };
+        disabled: {
+            border: string;
+        };
+        fontSize: string;
+    };
+    rating: {
+        fontWeight: number;
+        size: {
+            xsmall: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
+    card: {
+        borderRadius: string;
+    };
+    radio: {
+        borderColor: string;
+        background: string;
+        size: {
+            small: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            medium: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+            large: {
+                borderWidth: string;
+                margin: string;
+                height: string;
+                active: {
+                    borderWidth: string;
+                };
+            };
+        };
+    };
+    label: {
+        fontSize: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+        lineHeight: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
+    checkbox: {
+        background: string;
+        borderColor: string;
+        active: {
+            background: string;
+        };
+        size: {
+            large: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            medium: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+            small: {
+                width: string;
+                height: string;
+                borderRadius: string;
+                borderWidth: string;
+                margin: string;
+                icon: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+    accordion: {
+        variant: {
+            box: {
+                container: {
+                    border: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+            simple: {
+                container: {
+                    borderTop: string;
+                    borderBottom: string;
+                    borderColor: string;
+                    borderRadius: string;
+                    padding: string;
+                };
+                summary: {
+                    fontWeight: number;
+                    fontSize: string;
+                    lineHeight: string;
+                    color: string;
+                };
+                details: {
+                    margin: string;
+                };
+                icon: {
+                    width: number;
+                    height: number;
+                    color: string;
+                };
+            };
+        };
+    };
+    dropdown: {
+        borderRadius: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        padding: string;
+        color: string;
+        fill: string;
+        options: {
+            borderColor: string;
+            color: string;
+        };
+    };
+    modal: {
+        minWidth: string;
+    };
+};
+declare type ThemeTypography = {
+    config: {
+        weight: {
+            heavy: number;
+            bold: number;
+            demi: number;
+            regular: number;
+        };
+    };
+    variants: Record<string, CSSProperties>;
+};
+declare type ThemeFonts = {
+    url: string;
+    config: Array<{
+        src: string;
+        family: string;
+        weight?: number | string;
+        style?: string;
+        stretch?: string;
+    }>;
+};
+declare type ThemeAssets = {
+    images: {
+        favicon: string;
+        logo: string;
+    };
+    [key: string]: any;
+};
+
+declare const truekind: Theme;
+
+export { truekind as default };

package/build/theme/truekind.theme.js

@@ -26,25 +26,6 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-/* istanbul ignore next */
-function color(color, contrast, softColor, softContrast) {
-    return {
-        color: color,
-        contrast: contrast,
-        soft: {
-            color: softColor,
-            contrast: softContrast,
-        },
-    };
-}
-/* istanbul ignore next */
-function basic(color, contrast) {
-    return {
-        color: color,
-        contrast: contrast,
-    };
-}
-
 var truekind = {
     name: 'Truekind',
     fontSizes: [10, 12, 14, 16, 18, 20, 24, 30, 36, 42, 52, 60, 68, 72, 76],
@@ -54,43 +35,89 @@ var truekind = {
         mobile: 0,
         desktop: 1200,
     },
+    radius: {
+        regular: '8px',
+    },
+    zIndex: {
+        modal: 50,
+        overlay: 49,
+    },
     colors: {
         pallete: {
-            primary: __assign(__assign({}, color('#cc4125', '--colors-shades-white-color', '', '')), { 20: color('#f5d9d3', '--colors-shades-700-color', '', ''), 40: color('#ebb3a8', '--colors-shades-700-color', '', ''), 60: color('#e08d7c', '--colors-shades-700-color', '', ''), 80: color('#d66751', '--colors-shades-700-color', '', '') }),
-            secondary: __assign(__assign({}, color('#292929', '--colors-shades-white-color', '#bbbbbb', '--colors-shades-700-color')), { 20: color('#d4d4d4', '--colors-shades-700-color', '#f1f1f1', '--colors-shades-700-color'), 40: color('#a9a9a9', '--colors-shades-700-color', '#e4e4e4', '--colors-shades-700-color'), 60: color('#7f7f7f', '--colors-shades-white-color', '#d6d6d6', '--colors-shades-700-color'), 80: color('#545454', '--colors-shades-white-color', '#c9c9c9', '--colors-shades-700-color') }),
-            cloud: color('#', '#', '#', '#'),
+            primary: __assign({
+                color: '#cc4125',
+                contrast: '--colors-shades-white-color',
+                soft: { color: '', contrast: '' },
+            }, { 20: {
+                    color: '#f5d9d3',
+                    contrast: '--colors-shades-700-color',
+                    soft: { color: '', contrast: '' },
+                }, 40: {
+                    color: '#ebb3a8',
+                    contrast: '--colors-shades-700-color',
+                    soft: { color: '', contrast: '' },
+                }, 60: {
+                    color: '#e08d7c',
+                    contrast: '--colors-shades-700-color',
+                    soft: { color: '', contrast: '' },
+                }, 80: {
+                    color: '#d66751',
+                    contrast: '--colors-shades-700-color',
+                    soft: { color: '', contrast: '' },
+                } }),
+            secondary: __assign({
+                color: '#292929',
+                contrast: '--colors-shades-white-color',
+                soft: { color: '#bbbbbb', contrast: '--colors-shades-700-color' },
+            }, { 20: {
+                    color: '#d4d4d4',
+                    contrast: '--colors-shades-700-color',
+                    soft: { color: '#f1f1f1', contrast: '--colors-shades-700-color' },
+                }, 40: {
+                    color: '#a9a9a9',
+                    contrast: '--colors-shades-700-color',
+                    soft: { color: '#e4e4e4', contrast: '--colors-shades-700-color' },
+                }, 60: {
+                    color: '#7f7f7f',
+                    contrast: '--colors-shades-white-color',
+                    soft: { color: '#d6d6d6', contrast: '--colors-shades-700-color' },
+                }, 80: {
+                    color: '#545454',
+                    contrast: '--colors-shades-white-color',
+                    soft: { color: '#c9c9c9', contrast: '--colors-shades-700-color' },
+                } }),
         },
         shades: {
-            black: basic('#000', '--colors-shades-white-color'),
-            white: basic('#fff', '--colors-shades-700-color'),
-            5: basic('#fafafa', '--colors-shades-700-color'),
-            10: basic('#f7f7f7', '--colors-shades-700-color'),
-            50: basic('#efefef', '--colors-shades-700-color'),
-            100: basic('#e5e5e5', '--colors-shades-700-color'),
-            150: basic('#d1d1d1', '--colors-shades-700-color'),
-            200: basic('#bbbbbb', '--colors-shades-700-color'),
-            250: basic('#a6a6a6', '--colors-shades-700-color'),
-            300: basic('#9e9e9e', '--colors-shades-700-color'),
-            350: basic('#949494', '--colors-shades-700-color'),
-            400: basic('#808080', '--colors-shades-700-color'),
-            450: basic('#767676', '--colors-shades-700-color'),
-            500: basic('#5a5a5a', '--colors-shades-white-color'),
-            550: basic('#3a3a3a', '--colors-shades-white-color'),
-            600: basic('#343434', '--colors-shades-white-color'),
-            650: basic('#2d2d2d', '--colors-shades-white-color'),
-            700: basic('#292929', '--colors-shades-white-color'),
-            750: basic('#232323', '--colors-shades-white-color'),
-            800: basic('#202020', '--colors-shades-white-color'),
-            850: basic('#1b1b1b', '--colors-shades-white-color'),
-            900: basic('#191919', '--colors-shades-white-color'),
-            950: basic('#141414', '--colors-shades-white-color'),
-            990: basic('#0b0b0b', '--colors-shades-white-color'),
+            black: { color: '#000', contrast: '--colors-shades-white-color' },
+            white: { color: '#fff', contrast: '--colors-shades-700-color' },
+            5: { color: '#fafafa', contrast: '--colors-shades-700-color' },
+            10: { color: '#f7f7f7', contrast: '--colors-shades-700-color' },
+            50: { color: '#efefef', contrast: '--colors-shades-700-color' },
+            100: { color: '#e5e5e5', contrast: '--colors-shades-700-color' },
+            150: { color: '#d1d1d1', contrast: '--colors-shades-700-color' },
+            200: { color: '#bbbbbb', contrast: '--colors-shades-700-color' },
+            250: { color: '#a6a6a6', contrast: '--colors-shades-700-color' },
+            300: { color: '#9e9e9e', contrast: '--colors-shades-700-color' },
+            350: { color: '#949494', contrast: '--colors-shades-700-color' },
+            400: { color: '#808080', contrast: '--colors-shades-700-color' },
+            450: { color: '#767676', contrast: '--colors-shades-700-color' },
+            500: { color: '#5a5a5a', contrast: '--colors-shades-white-color' },
+            550: { color: '#3a3a3a', contrast: '--colors-shades-white-color' },
+            600: { color: '#343434', contrast: '--colors-shades-white-color' },
+            650: { color: '#2d2d2d', contrast: '--colors-shades-white-color' },
+            700: { color: '#292929', contrast: '--colors-shades-white-color' },
+            750: { color: '#232323', contrast: '--colors-shades-white-color' },
+            800: { color: '#202020', contrast: '--colors-shades-white-color' },
+            850: { color: '#1b1b1b', contrast: '--colors-shades-white-color' },
+            900: { color: '#191919', contrast: '--colors-shades-white-color' },
+            950: { color: '#141414', contrast: '--colors-shades-white-color' },
+            990: { color: '#0b0b0b', contrast: '--colors-shades-white-color' },
         },
         semantic: {
-            positive: basic('#2579C8', '--colors-shades-white-color'),
-            urgent: basic('#D82A2D', '--colors-shades-white-color'),
-            attention: basic('#FFA877', '--colors-shades-700-color'),
-            informative: basic('#686872', '--colors-shades-white-color'),
+            positive: { color: '#2579C8', contrast: '--colors-shades-white-color' },
+            urgent: { color: '#D82A2D', contrast: '--colors-shades-white-color' },
+            attention: { color: '#FFA877', contrast: '--colors-shades-700-color' },
+            informative: { color: '#686872', contrast: '--colors-shades-white-color' },
         },
         border: {
             color: '',
@@ -487,9 +514,12 @@ var truekind = {
                 color: '#292929',
             },
         },
+        modal: {
+            minWidth: '540px',
+        },
     },
     fonts: {
-        url: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/fonts/truekind',
+        url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/fonts/truekind',
         config: [
             {
                 family: 'CircularXX',
@@ -612,7 +642,7 @@ var truekind = {
     assets: {
         images: {
             favicon: 'https://cdn.shopify.com/s/files/1/2679/8624/files/shapermint_favicon-128x128.png',
-            logo: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
+            logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
         },
     },
 };

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "4.0.2-beta.6",
+  "version": "4.1.0",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",

package/build/dts/components/Demo.stories.d.ts

@@ -1,7 +0,0 @@
-import { Story } from '@storybook/react';
-declare const _default: {
-    title: string;
-    component: null;
-};
-export default _default;
-export declare const Demo: Story<{}>;

package/build/dts/components/Icon-wrapper/IconWrapper.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface IconWrapperProps {
-    width?: number;
-    height?: number;
-    title?: string;
-    viewBoxX: number;
-    viewBoxY: number;
-    children: React.ReactNode;
-    testid?: string;
-    fill?: string;
-}
-export declare const IconWrapper: ({ height, width, title, viewBoxX, viewBoxY, children, testid, fill, }: IconWrapperProps) => JSX.Element;

package/build/dts/components/Icon-wrapper/IconWrapper.test.d.ts

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

package/build/dts/components/accordion/Accordion.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { IconType } from '../icons';
-export interface AccordionProps {
-    defaultOpen?: boolean;
-    variant: 'simple' | 'box';
-    header: ReactNode;
-    content: ReactNode;
-    disabled?: boolean;
-    openIcon: IconType;
-    closeIcon: IconType;
-}
-declare const Accordion: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: AccordionProps) => JSX.Element;
-export default Accordion;

package/build/dts/components/accordion/Accordion.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: ({ header, content, defaultOpen, variant, disabled, openIcon, closeIcon, }: import("./Accordion").AccordionProps) => JSX.Element;
-};
-export default _default;
-export declare const Box: () => JSX.Element;
-export declare const Simple: () => JSX.Element;
-export declare const SimpleWithComplexContent: () => JSX.Element;

package/build/dts/components/accordion/Accordion.test.d.ts

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

package/build/dts/components/accordion/styles.d.ts

@@ -1,16 +0,0 @@
-import { Theme } from 'src/core/theme/Theme';
-export declare const AccordionStyles: {
-    baseStyles: import("@emotion/utils").SerializedStyles;
-    simple: (theme: Theme, disabled: boolean) => import("@emotion/utils").SerializedStyles;
-    box: (theme: Theme, disabled: boolean) => import("@emotion/utils").SerializedStyles;
-};
-export declare const AccordionSummaryStyles: {
-    baseStyles: import("@emotion/utils").SerializedStyles;
-    simple: (theme: Theme, disabled: boolean) => import("@emotion/utils").SerializedStyles;
-    box: (theme: Theme, disabled: boolean) => import("@emotion/utils").SerializedStyles;
-};
-export declare const AccordionDetailsStyles: {
-    baseStyles: import("@emotion/utils").SerializedStyles;
-    simple: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-    box: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-};

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const Bundle: {
-    Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: import("./minimalistic/Minimalistic").MinimalisticProps) => JSX.Element;
-    Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: import("./simple/Simple").SimpleProps) => JSX.Element;
-};

package/build/dts/components/bundle/minimalistic/Minimalistic.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface MinimalisticProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    originalPrice: string;
-    price: string;
-    savingPrice: string;
-    getMorePayLessText: string;
-    youAreSavingText: string;
-    getQtyForText: string;
-    discount: number;
-    offText: string;
-    widthAuto?: boolean;
-}
-export declare const Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;

package/build/dts/components/bundle/minimalistic/Minimalistic.stories.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { Story } from '@storybook/react';
-import { MinimalisticProps } from './Minimalistic';
-declare const _default: {
-    title: string;
-    component: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
-};
-export default _default;
-export declare const MinimalisticBundle: Story<MinimalisticProps>;

package/build/dts/components/bundle/minimalistic/Minimalistic.test.d.ts

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

package/build/dts/components/bundle/simple/Simple.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface SimpleProps {
-    title: string;
-    freeShippingText: string;
-    price: string;
-    anyQtyForText: string;
-    backgroundColor: string;
-    widthAuto?: boolean;
-}
-export declare const Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;