@xaypay/tui 0.0.71 → 0.0.73

package/src/components/pagination/pagination.stories.js

@@ -316,7 +316,7 @@ const data = [
     phone: "572-905-5251",
   },
 ];
-const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
+const Template = ({ goTo, offset, currentPage, siblingCount, totalCount }) => {
   const [currentPageNumber, setCurrentPageNumber] = useState(currentPage);
   const currentTableData = useMemo(() => {
     const firstPageIndex = (currentPageNumber - 1) * offset;
@@ -351,6 +351,7 @@ const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
         </tbody>
       </table>
       <Pagination
+        goTo={goTo}
         currentPage={currentPage}
         totalCount={totalCount}
         offset={offset}
@@ -364,8 +365,9 @@ const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
 export const Default = Template.bind({});
 
 Default.args = {
+  goTo: false,
   offset: 10,
-  currentPage: 4,
+  currentPage: 1,
   siblingCount: 2,
   totalCount: 44
 };

package/src/components/select/index.js

@@ -170,7 +170,14 @@ export const Select = ({
     }, [opened]);
 
     useEffect(() => {
-        selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+        if (selected) {
+            if (selected.length > 0) {
+                setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+            } else {
+                setNewSelected([]);
+            }
+        }
+
         if (!multiple) {
             options && options.length > 0 && setExistOptions(options);
         } else {
@@ -187,7 +194,7 @@ export const Select = ({
             });
             setExistOptions(modifiedOptions);
         }
-    }, [options, multiple, selected]);
+    }, [options, multiple, selected, selected.length]);
     
     return (
         <div className={classProps}>

package/src/components/select/select.stories.js

@@ -25,4 +25,3 @@ Default.args = {
     selected: [{"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     keyNames: {name: 'value', id : 'bbb'}
 };
-

package/src/components/textarea/index.js

@@ -24,17 +24,21 @@ export const Textarea = ({
     boxSizing,
     maxLength,
     labelSize,
+    errorSize,
     labelColor,
+    errorColor,
     borderColor,
     labelWeight,
     placeholder,
     labelDisplay,
+    errorMesaage,
     backgroundColor,
     borderFocusColor,
     borderHoverColor,
     showCharacterCount,
     labelRequiredColor
 }) => {
+    const [error, setError] = useState('');
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
     const [innerValue, setInnerValue] = useState('');
@@ -63,10 +67,16 @@ export const Textarea = ({
         if (maxLength) {
             if (value.length > maxLength) {
                 onChange(value.substr(0, maxLength));
+                setError('Նիշերի քանակը գերազանցում է');
+            } else {
+                setError('');
             }
         } else {
             if (value.length > configStyles.TEXTAREA.maxLength) {
+                setError('Նիշերի քանակը գերազանցում է');
                 onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+            } else {
+                setError('');
             }
         }
     };
@@ -83,6 +93,14 @@ export const Textarea = ({
         setInnerValue(value);
     }, [value, onChange]);
 
+    useEffect(() => {
+        if (errorMesaage) {
+            setError(errorMesaage);
+        } else {
+            setError('');
+        }
+    }, [errorMesaage]);
+
     return (
         <div
             style={{
@@ -140,7 +158,8 @@ export const Textarea = ({
                     maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
                     boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
                     backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-                    borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
+                    borderColor: error ? errorColor ? errorColor : configStyles.TEXTAREA.errorColor :
+                                 isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
                                  isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
                                  borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
                     resize: resize ? resize : configStyles.TEXTAREA.resize,
@@ -153,6 +172,16 @@ export const Textarea = ({
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             ></textarea>
+            {
+                error ? <span
+                    style={{
+                        marginTop: '6px',
+                        display: 'inline-block',
+                        fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
+                        color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+                    }}
+                >{ error }</span> : ''
+            }
         </div>
     );
 };

package/src/components/typography/index.js

@@ -74,7 +74,7 @@ export const Typography = ({
 				textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform'+variant],
 				textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration'+variant],
 				backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor'+variant],
-				color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
+				color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
 			},
 			...props,
 			className: classProps,

package/src/components/typography/typography.stories.js

@@ -13,9 +13,10 @@ export const Template = (args) => <>
 	{
 		staticTag.map((tag,key) => {
 			return <Typography
+				{...args}
 				key={key}
 				variant={tag} 
-				color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}
+				color='#a3d177'
 			>
 				{tag}
 			</Typography>;

package/src/stories/configuration.stories.mdx

@@ -519,4 +519,49 @@ import StackAlt from './assets/stackalt.svg';
   range: 'for example. 72',                             // for captcha range                 (add itself on each component)
   getRange: 'is must be function',                      // for captcha get current range     (add itself on each component)
 }
+```
+
+### NewFile
+``` 
+{
+  or: 'կամ',                                            // for file place text
+  weight: 400,                                          // for file place font weight
+  size: '12px',                                         // for file font size
+  radius: '6px',                                        // for file place border radius
+  width: '440px',                                       // for file width
+  height: '200px',                                      // for file choose place height
+  color: '#3C393E',                                     // for file place color
+  upload: 'Բեռնել',                                     // for file place text
+  labelSize: '16px',                                    // for file font size
+  border: '2px dashed',                                 // for file choose place border
+  errorColor: '#ee0000',                                // for file error message color
+  labelColor: '#4A4A4D',                                // for file color
+  errorColor: '#ee0000',                                // for file place error color
+  borderColor: '#D1D1D1',                               // for file choose place border color
+  listItemHeight: '70px',                               // for file list item height
+  uploadColor: '#0DA574',                               // for file place upload text color
+  progressColor: '#4A4A4D',                             // for file progress bar color
+  progressFontSize: '16px',                             // for file progress bar font size
+  listItemErrorSize: '16px',                            // for file multiple mode error font size
+  backgroundColor: '#F8F8F8',                           // for file choose place background color
+  listItemErrorColor: 'black',                          // for file multiple mode error color
+  borderHoverColor: '#00236A',                          // for file border color, when hover is happening
+  fileAreaImageHeight: 'auto',                          // for file place choosen image preview height
+  listItemPadding: '14px 20px',                         // for file list item padding
+  fileSizeText: 'Առավելագույնը',                        // for file place file size text
+  fileAreaImageWidth: '27.8rem',                        // for file place choosen image preview width
+  labelRequiredColor: '#ee0000',                        // for file label required color
+  progressTrackColor: '#E5E8E8',                        // for file item progress track background color
+  extentionsRowMarginTop: '40px',                       // for file extentions row margin top
+  progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
+  progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
+  progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+  formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
+  noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
+  listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+  maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
+  putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
+  hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+  listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
+}
 ```

package/src/stories/usage.stories.mdx

@@ -8,14 +8,17 @@ import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
+import fileImage from './static/file-usage.png';
 import captcha from './static/captcha-usage.png';
+import inputImage from './static/input-usage.png';
 import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
 import toastImage from './static/toaster-usage.png';
+import tooltipImage from './static/tooltip-usage.png';
 import textareaImage from './static/textarea-usage.png';
+import fileSingleImage from './static/file-single-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
-import inputTooltipImage from './static/input-tooltip-usage.png';
-import newAutocompleteImage from './static/new-autocomplete-usage.png';
+import autocompleteImage from './static/autocomplete-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -130,15 +133,15 @@ import newAutocompleteImage from './static/new-autocomplete-usage.png';
 # Usage
 
 ### Button
-
 <img src={buttonImage} alt="button image" />
 
-### Input / Tooltip
+### Input
+<img src={inputImage} alt="input image" />
 
-<img src={inputTooltipImage} alt="input tooltip image" />
+### Tooltip
+<img src={tooltipImage} alt="tooltip image" />
 
 ### Select
-
 <img src={selectImage} alt="select image" />
 
 ### Toaster
@@ -153,7 +156,13 @@ import newAutocompleteImage from './static/new-autocomplete-usage.png';
 <img src={textareaImage} alt="textarea image" />
 
 ### NewAutocomplete
-<img src={newAutocompleteImage} alt="autocomplete image" />
+<img src={autocompleteImage} alt="autocomplete image" />
 
 ### Captcha
-<img src={captcha} alt="captcha image" />
+<img src={captcha} alt="captcha image" />
+
+### NewFile in Multiple Mode
+<img src={fileImage} alt="file image" />
+
+### NewFile in Single Mode
+<img src={fileSingleImage} alt="file image" />

package/tui.config.js

@@ -101,14 +101,14 @@ module.exports = {
         sizeh6: '14px',                                    // for variant h6 font size
         sizespan: '12px',                                  // for variant span font size
 
-        textAlignp: '0px',                                 // for variant p text align
-        textAlignh1: '0px',                                // for variant h1 text align
-        textAlignh2: '0px',                                // for variant h2 text align
-        textAlignh3: '0px',                                // for variant h3 text align
-        textAlignh4: '0px',                                // for variant h4 text align
-        textAlignh5: '0px',                                // for variant h5 text align
-        textAlignh6: '0px',                                // for variant h6 text align
-        textAlignspan: '0px',                              // for variant span text align
+        textAlignp: 'left',                                 // for variant p text align
+        textAlignh1: 'left',                                // for variant h1 text align
+        textAlignh2: 'left',                                // for variant h2 text align
+        textAlignh3: 'left',                                // for variant h3 text align
+        textAlignh4: 'left',                                // for variant h4 text align
+        textAlignh5: 'left',                                // for variant h5 text align
+        textAlignh6: 'left',                                // for variant h6 text align
+        textAlignspan: 'left',                              // for variant span text align
 
         weightp: '500',                                    // for variant p font weight
         weighth1: '400',                                   // for variant h1 font weight
@@ -119,15 +119,6 @@ module.exports = {
         weighth6: '600',                                   // for variant h6 font weight
         weightspan: '500',                                 // for variant span font weight
 
-        colorHoverp: '#3C393E',                            // for variant p color in hover mode
-        colorHoverh1: '#3C393E',                           // for variant h1 color in hover mode
-        colorHoverh2: '#3C393E',                           // for variant h2 color in hover mode
-        colorHoverh3: '#3C393E',                           // for variant h3 color in hover mode
-        colorHoverh4: '#3C393E',                           // for variant h4 color in hover mode
-        colorHoverh5: '#3C393E',                           // for variant h5 color in hover mode
-        colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
-        colorHoverspan: '#3C393E',                         // for variant span color in hover mode
-
         backgroundColorp: 'transparent',                   // for variant p background color
         backgroundColorh1: 'transparent',                  // for variant h1 background color
         backgroundColorh2: 'transparent',                  // for variant h2 background color
@@ -238,10 +229,12 @@ module.exports = {
         minWidth: '200px',                                    // for minimum width
         maxWidth: '500px',                                    // for maximum width
         labelSize: '16px',                                    // for label font size
+        errorSize: '12px',                                    // for error font size
         minHeight: '100px',                                   // for minimum height
         maxHeight: '300px',                                   // for maximum height
         border: '2px solid',                                  // for border
         padding: '12px 15px',                                 // for padding
+        errorColor: '#E40E00',                                // for error color
         labelColor: '#3C393E',                                // for label color
         labelWeight: 'normal',                                // for label font weight
         labelDisplay: 'block',                                // for label display
@@ -329,25 +322,44 @@ module.exports = {
     },
     // default properties for <File /> component
     File: {
+        or: 'կամ',                                            // for file place text
         weight: 400,                                          // for file place font weight
         size: '12px',                                         // for file font size
-        radius: '6px',
+        radius: '6px',                                        // for file place border radius
         width: '440px',                                       // for file width
         height: '200px',                                      // for file choose place height
         color: '#3C393E',                                     // for file place color
+        upload: 'Բեռնել',                                     // for file place text
         labelSize: '16px',                                    // for file font size
         border: '2px dashed',                                 // for file choose place border
         errorColor: '#ee0000',                                // for file error message color
         labelColor: '#4A4A4D',                                // for file color
         errorColor: '#ee0000',                                // for file place error color
         borderColor: '#D1D1D1',                               // for file choose place border color
+        listItemHeight: '70px',                               // for file list item height
         uploadColor: '#0DA574',                               // for file place upload text color
+        progressColor: '#4A4A4D',                             // for file progress bar color
+        progressFontSize: '16px',                             // for file progress bar font size
+        listItemErrorSize: '16px',                            // for file multiple mode error font size
         backgroundColor: '#F8F8F8',                           // for file choose place background color
+        listItemErrorColor: 'black',                          // for file multiple mode error color
         borderHoverColor: '#00236A',                          // for file border color, when hover is happening
+        fileAreaImageHeight: 'auto',                          // for file place choosen image preview height
+        listItemPadding: '14px 20px',                         // for file list item padding
+        fileSizeText: 'Առավելագույնը',                        // for file place file size text
+        fileAreaImageWidth: '27.8rem',                        // for file place choosen image preview width
         labelRequiredColor: '#ee0000',                        // for file label required color
         progressTrackColor: '#E5E8E8',                        // for file item progress track background color
         extentionsRowMarginTop: '40px',                       // for file extentions row margin top
-        hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+        progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
+        progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
+        progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+        formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
+        noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
         listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+        maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
+        putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
+        hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
+        listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
     }
 };