@xaypay/tui 0.2.14 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -1,5 +1,12 @@
-import { background } from '@storybook/theming';
-import React from 'react'
+// import React from 'react'
+// import info from './src/assetsTMP/info.png';
+// import error from './src/assetsTMP/error.png';
+// import close from './src/assetsTMP/close.svg';
+// import warn from './src/assetsTMP/warning.png';
+// import success from './src/assetsTMP/success.png';
+import closeCall from './src/assetsTMP/closeCall.svg';
+import greenPlus from './src/assetsTMP/greenplus.svg';
+import greenMinus from './src/assetsTMP/greenminus.svg';
 
 const boxSizing = 'border-box';
 const fontStyle = 'normal';
@@ -31,17 +38,18 @@ const fontObject = {
 export default {
     // default properties for <Button /> component
     BUTTON: {
-        type: 'button',
+        opacity: 1,
         width: '100%',
+        radius: '6px',
+        className: '',
+        type: 'button',
         height: '46px',
         color: 'white',
-        contentWidth: false,
         border: 'none',
-        radius: '6px',
+        disabled: false,
         cursor: 'pointer',
+        contentWidth: false,
         padding: '12px 20px',
-        disabled: false,
-        className: '',
         transition: 'background-color 240ms, color 240ms',
         
         box: {
@@ -54,6 +62,10 @@ export default {
             disabled: 'rgba(60, 57, 62, 1)',
             disabledLine: 'rgba(60, 57, 62, 1)',
             disabledBackground: 'rgba(238, 238, 238, 1)',
+            withoutStyling: {
+                color: '#000000',
+                hoverColor: '#121212'
+            }
         },
 
         font: {...fontObject},
@@ -66,8 +78,11 @@ export default {
         },
 
         icon: {
+            marginLeft: '10px',
             marginRight: '10px'
-        }
+        },
+
+        withoutStyling: false
     },
     // default properties for <Input /> component
     INPUT: {
@@ -82,6 +97,7 @@ export default {
         className: '',
         maxLength: 255,
         iconWidth: '64px',
+        iconPadding: '10px',
         autoComplete: 'off',
 
         box: {
@@ -102,6 +118,7 @@ export default {
             color: presetColors.dark,
             display: 'block',
             lineHeight: '22px',
+            iconMargin: '10px',
             marginBottom: '6px',
 
             font: {...fontObject}
@@ -113,8 +130,13 @@ export default {
             zIndex: '1',
             className: '',
             marginTop: '10px',
+            iconMargin: '10px',
             lineHeight: '19px',
 
+            box: {
+                shadow: '0 0 0 1px #F20918'
+            },
+
             font: {...fontObject}
         },
 
@@ -275,6 +297,7 @@ export default {
     SELECT: {
         dots: false,
         className: '',
+        arrowNoRotate: false,
         showCloseIcon: true,
         // arrowIcon: React.createElement(SvgChecked, { fill: 'green' }),
         // closeIcon: React.createElement(SvgChecked, { fill: 'green' }),
@@ -678,7 +701,13 @@ export default {
         header: {
             color: presetColors.primarySecond,
             height: '30px',
-            font: {...fontObject}
+            align: 'left',
+            font: {...fontObject},
+            icon: {
+                maxWidth: '60px',
+                maxHeight: '60px',
+                marginRight: '20px'
+            }
         },
 
         image: {
@@ -699,6 +728,34 @@ export default {
         },
         closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
     },
+    // default properties for <SwipeModal /> component
+    SWIPEMODAL: {
+        width: '300px',
+        height: '100vh',
+        titleStyle: {
+            color: '#1C212D',
+            textAlign: 'left',
+            maxHeight: '66px',
+            padding: '0px 20px',
+            font: {...fontObject},
+        },
+        parent: {
+            width: '100%',
+            height: '100vh',
+            colors: {
+                background: 'rgba(60, 61, 70, 0.2)'
+            }
+        },
+        colors: {
+            background: 'white',
+        },
+        border: {
+            radius: '10px'
+        },
+        // withParent: true,
+        outSideClose: false,
+        closeIcon: closeCall,
+    },
     // default properties for <Checkbox /> component
     CHECKBOX: {
         className: '',
@@ -785,17 +842,78 @@ export default {
     },
     // default properties for <Pagination /> component
     PAGINATION: {
+        width: '34px',
+        height: '34px',
+        lineHeight: '16px',
         className: '', // for pagination class
+        color: '#000000',
+
+        font: {
+            size: '13px',
+            style: '',
+            weight: '',
+            family: ''
+        },
+
+        colors: {
+            hover: '#000000',
+            active: '#ffffff',
+            background: '#ffffff',
+            activeHover: '#ffffff',
+            hoverBackground: '#dddddd',
+            activeBackground: '#00236a'
+        },
+
+        border: {
+            width: '1px',
+            color: 'rgba(238,238,238, 1)',
+            radius: '6px',
+        }
     },
     // default properties for <Toaster /> component
     TOASTER: {
+        width: '440px',
+        height: '83px',
         className: '',
-        icon: {
-            // info: React.createElement(SvgChecked, { just: 'must' }),
-            // warn: React.createElement(SvgUnchecked, { just: 'must' }),
-            // close: React.createElement(SvgChecked, { fill: 'green' }),      
-            // error: React.createElement(SvgChecked, { fill: 'green' }),      
-            // success: React.createElement(SvgChecked, { fill: 'green' }),      
+        marginBottom: '20px',
+        backgroundColor: '#FFFFFF',
+        padding: '14px 29px 14px 12px',
+        border: {
+            width: '2px',
+            style: 'solid',
+            radius: '40px',
+            color: '#EEEEEE'
+        },
+        title: {
+            color: '#3C393E',
+            lineHeight: '22px',
+            font: {
+                size: '16px',
+                style: 'normal',
+                weight: 600,
+                family: '',
+            },
+            props: {}
+        },
+        description: {
+            color: '#3C393E',
+            lineHeight: '16px',
+            font: {
+                size: '12px',
+                style: 'normal',
+                weight: 500,
+                family: '',
+            },
+            props: {
+                opacity: 0.8
+            }
+        },
+        icons: {
+            info: '',
+            warn: '',
+            error: '',
+            close: '',
+            success: ''
         }
     },
     // default properties for <Stepper /> component
@@ -817,11 +935,13 @@ export default {
             width: '2px',
             style: 'solid',
             color: '#E7E7E7',
+            hoverColor: '#E7E7E7',
             activeColor: '#3C3D46',
         },
 
         label: {
             color: '#3C3D46',
+            activeColor: '#3C3D46',
             lineHeight: '21px',
 
             font: {...fontObject}
@@ -830,5 +950,44 @@ export default {
     // default properties for <Form /> component
     FORM: {
         className: ''
+    },
+    // default properties for <Accordion /> component
+    ACCORDION: {
+        className: '',
+        padding: '15px',
+        color: '#121212',
+        marginBottom: '0px',
+        
+        colors: {
+            hover: '#009B8B',
+            background: '#E5E7EA',
+            backgroundHover: '#CBCED5'
+        },
+
+        border: {
+            color: '#A8ADB9',
+            width: '1px',
+            style: 'solid',
+
+            radius: '0px',
+
+            top: false,
+            left: false,
+            right: false,
+            bottom: true
+        },
+
+        font: {
+            size: '14px',
+            style: 'normal',
+            weight: 700,
+            family: 'Noto Sans Armenian'
+        },
+
+        icon: {
+            open: greenPlus,
+            close: greenMinus,
+            openHover: greenPlus,
+        }
     }
 }