@xaypay/tui 0.0.117 → 0.0.119

package/src/components/table/table.module.css

@@ -28,11 +28,8 @@
 
 .list-text {
     cursor: pointer;
-    overflow: hidden;
-    text-align: left;
-    white-space: nowrap;
+    white-space: wrap;
     margin: 0px 0px 8px 0px;
-    text-overflow: ellipsis;
 }
 
 .dots-option-item {

package/src/components/table/td.js

@@ -23,7 +23,11 @@ const TD = ({
     tBodyFontFamily,
     tBodyFontWeight,
     handleCheckDots,
+    openListFontSize,
     handleCheckedBody,
+    openListFontFamily,
+    tableColumnMinWidth,
+    tableColumnMaxWidth,
     handleBodyActionClick,
     handleMoreOptionsClick,
     handleContentListClick,
@@ -78,13 +82,15 @@ const TD = ({
                 width: 'auto',
                 color: tBodyColor,
                 verticalAlign: 'top',
-                whiteSpace: 'nowrap',
                 padding: tBodyPadding,
                 fontSize: tBodyFontSize,
                 borderRight: borderRight,
                 textAlign: tBodyTextAlign,
                 fontFamily: tBodyFontFamily,
                 fontWeight: tBodyFontWeight,
+                minWidth: tableColumnMinWidth,
+                maxWidth: tableColumnMaxWidth,
+                whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
                 borderColor: hideBorder ? 'transparent' : '#eeeeee',
                 boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
                 borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -214,15 +220,16 @@ const TD = ({
 
                     <div
                         style={{
+                            flexShrink: 11,
                             marginLeft:
                                 hasOwnerProperty(item, 'contentList') &&
                                 (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
                                     ? hasOwnerProperty(item, 'rightArrow')
                                         ? item.rightArrow === true
                                             ? '0px'
-                                            : '10px'
+                                            : '11px'
                                         : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')
-                                        ? '10px'
+                                        ? '11px'
                                         : '0px'
                                     : '0px',
                             marginRight:
@@ -230,7 +237,7 @@ const TD = ({
                                 (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
                                     ? hasOwnerProperty(item, 'rightArrow')
                                         ? item.rightArrow === true
-                                            ? '10px'
+                                            ? '11px'
                                             : '0px'
                                         : '0px'
                                     : '0px',
@@ -238,6 +245,7 @@ const TD = ({
                     >
                         <p
                             style={{
+                                textAlign: tBodyTextAlign,
                                 margin: '0px',
                                 cursor:
                                     hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots')
@@ -347,7 +355,7 @@ const TD = ({
                                 style={{
                                     overflow: 'auto',
                                     marginTop: '10px',
-                                    maxHeight: '300px',
+                                    maxHeight: '500px',
                                     maxWidth: '100%',
                                     height: item.status === 'close' ? '0px' : 'auto',
                                 }}
@@ -358,10 +366,11 @@ const TD = ({
                                             key={`${innerItem}_${innerItemIndex}`}
                                             className={styles['list-text']}
                                             style={{
+                                                maxWidth: '100%',
                                                 color: openListColor,
-                                                maxWidth:
-                                                    (item.content.length * 9 <= 100 ? 100 : item.content.length * 9) +
-                                                    'px',
+                                                textAlign: tBodyTextAlign,
+                                                fontSize: openListFontSize,
+                                                fontFamily: openListFontFamily,
                                             }}
                                             onClick={(e) =>
                                                 handleContentList(

package/src/components/table/th.js

@@ -15,6 +15,8 @@ const TH = ({
     tHeadFontSize,
     tHeadTextAlign,
     tHeadFontWeight,
+    tableColumnMinWidth,
+    tableColumnMaxWidth,
     handleCheckedHeader,
     borderTopLeftRadius,
     borderTopRightRadius,
@@ -32,12 +34,13 @@ const TH = ({
             style={{
                 width: 'auto',
                 cursor: 'pointer',
-                whiteSpace: 'nowrap',
                 position: 'relative',
                 padding: tHeadPadding,
                 fontSize: tHeadFontSize,
                 fontFamily: tHeadFamily,
                 fontWeight: tHeadFontWeight,
+                minWidth: tableColumnMinWidth,
+                maxWidth: tableColumnMaxWidth,
                 borderTopLeftRadius: borderTopLeftRadius,
                 borderTopRightRadius: borderTopRightRadius,
                 borderColor: hideBorder ? 'transparent' : '#eeeeee',

package/src/components/textarea/index.js

@@ -7,6 +7,11 @@ import SvgRequired from './../icon/Required'
 
 import './textarea.module.css'
 
+export const PositionSide = {
+    TOP: 'top',
+    BOTTOM: 'bottom',
+}
+
 export const Textarea = ({
     size,
     label,
@@ -42,6 +47,7 @@ export const Textarea = ({
     borderHoverColor,
     labelMarginBottom,
     showCharacterCount,
+    characterCountPosition,
 }) => {
     const [error, setError] = useState('')
     const [isHover, setIsHover] = useState(false)
@@ -90,20 +96,18 @@ export const Textarea = ({
             alert('Please add onChange function on Textarea component')
         }
 
-        if (value === '') {
-            setError('')
-        }
-
-        setInnerValue(value)
-    }, [value, onChange])
-
-    useEffect(() => {
         if (errorMessage) {
             setError(errorMessage)
         } else {
             setError('')
         }
-    }, [errorMessage])
+
+        if (value === '') {
+            setError('')
+        }
+
+        setInnerValue(value)
+    }, [value, onChange, errorMessage])
 
     return (
         <div
@@ -141,7 +145,7 @@ export const Textarea = ({
                     ''
                 )}
 
-                {showCharacterCount && maxLength && (
+                {showCharacterCount && maxLength && characterCountPosition === 'top' && (
                     <span
                         style={{
                             color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
@@ -195,17 +199,42 @@ export const Textarea = ({
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             ></textarea>
+            {showCharacterCount && maxLength && characterCountPosition === 'bottom' && (
+                <div
+                    style={{
+                        float: 'right',
+                    }}
+                >
+                    <span
+                        style={{
+                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        }}
+                    >
+                        {maxLength - value.length} նիշ
+                    </span>
+                </div>
+            )}
+
             {error ? (
-                <span
+                <div
                     style={{
-                        display: 'inline-block',
-                        fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
-                        color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
-                        marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop,
+                        clear: 'both',
+                        wordBreak: 'break-all',
+                        maxWidth: width ? width : configStyles.TEXTAREA.width,
                     }}
                 >
-                    {error}
-                </span>
+                    <span
+                        style={{
+                            display: 'inline-block',
+                            fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
+                            color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+                            marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop,
+                        }}
+                    >
+                        {error}
+                    </span>
+                </div>
             ) : (
                 ''
             )}
@@ -248,4 +277,9 @@ Textarea.propTypes = {
     borderHoverColor: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     onChange: PropTypes.func.isRequired,
+    characterCountPosition: PropTypes.oneOf(Object.values(PositionSide)),
+}
+
+Textarea.defaultProps = {
+    characterCountPosition: 'top',
 }

package/src/components/textarea/textarea.stories.js

@@ -1,9 +1,14 @@
 import React, { useState } from 'react'
-import { Textarea } from '.'
+import { Textarea, PositionSide } from '.'
 
 export default {
     Comment: Textarea,
     title: 'Components/Textarea',
+    argsType: {
+        characterCountPosition: {
+            options: Object.values(PositionSide),
+        },
+    },
 }
 
 const Template = (args) => {
@@ -47,4 +52,5 @@ Default.args = {
     showCharacterCount: true, // for showing textarea character count
     borderHoverColor: '#3C393E',
     borderFocusColor: '#00236A',
+    characterCountPosition: 'top',
 }

package/src/stories/changelog.stories.mdx

@@ -116,9 +116,47 @@ import StackAlt from './assets/stackalt.svg';
 
 # Changelog
 
-### v0.0.59
-
-1. Change: errorMesage to errorMessage (in all components)
+### v0.0.119
+1. Bugfix: white space
+2. Change: Textarea show error message logic
+3. Change: errorMessage location in useEffect
+4. Add: posibility to change character coount position in textarea component
+5. Add: posibility use NewFile component without preview mode
+6. Add: props preview for NewFile, uploadBtnFont, uploadBtnSize, uploadBtnLabel, uploadBtnColor, uploadBtnHeight, uploadBtnBackgroundColor
+7. Change: captcha to uppercase, Add: second file component in story
+
+### v0.0.118
+
+1. Change: Radio component implementation 
+2. Refactor: structure Radio component, Add: possibility custom styles
+3. Add: props on table component, for min max width, open list font-size and font family
+4. Remove: dots from table open list
+
+### v0.0.117
+1. Add: call toString function on every content with value 0 in table component
+2. Add: font family prop on input, select, newautocomplete, textarea components
+3. Fix: configStyles declaration position
+
+### v0.0.116
+1. Change: property check in Select component
+2. Add: CheckboxGroup component
+3. Change: SingleCheckbox component, check props in TUI usage and configuration sections
+4. Add: hover logic on modal component for show zoom icon
+5. Change: show content logic in table component
+6. Set: prop type array or object in checkbox component
+7. Add: hideBorder boolean prop on table component for hide borders
+8. Set: css outline none, on button component
+9. Change: Proptypes.oneOf to Proptypes.oneOfType for checkbox
+10. Refactor: className props for all components
+11. Change: table body textAlign show logic, Add: the same logic for header
+12. Add: tHeadTextAlign prop in propTypes object in Table component
+13. Change: configStyles variable declaration place
+14. Add: errorSize prop in config just for set value by default
+15. Add: posibility on table to show row as items, see props in configuration tab
+
+### v0.0.115
+Refactor: table check sortingArrows property logic
+Add: maxLength prop to global config for input component, set highest value by default 255 characters
 
 ### v0.0.60
 
@@ -128,4 +166,7 @@ import StackAlt from './assets/stackalt.svg';
 4. Change: select prop jsonData to options always get an array
 5. Add: new functionality on select component, multiple mode
 
+### v0.0.59
+
+1. Change: errorMesage to errorMessage (in all components)
 

package/src/stories/configuration.stories.mdx

@@ -120,7 +120,7 @@ import StackAlt from './assets/stackalt.svg';
 
 # Configuration
 
-### Button 
+### BUTTON
 
 ```
 {
@@ -151,7 +151,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Input
+### INPUT
 
 ```
 {
@@ -196,7 +196,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Tooltip
+### TOOLTIP
 ```
 {
     type: 'top',                                       // for tooltip type (top, right, bottom, left)
@@ -214,7 +214,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Typography
+### TYPOGRAPHY
 
 ```
 {
@@ -325,7 +325,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Select
+### SELECT
 
 ```
 {
@@ -380,7 +380,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Toaster
+### TOASTER
 
 ```
 {
@@ -415,10 +415,11 @@ import StackAlt from './assets/stackalt.svg';
     position: 'top-right',              ---> one of this strings ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center']
     description: 'Toast description'    ---> description is a string for toast description
   });
+  className: ''                         // for pagination class
 }
 ```
 
-### Textarea
+### TEXTAREA
 
 ```
 {
@@ -531,7 +532,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Captcha
+### CAPTCHA
 
 ```
 {
@@ -544,7 +545,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### File
+### FILE
 ``` 
 {
   or: 'կամ',                                            // for file place text
@@ -588,10 +589,17 @@ import StackAlt from './assets/stackalt.svg';
   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
+
+  uploadBtnFont: 'Arial', // for button font familty
+  uploadBtnSize: '14px', // for button font size
+  uploadBtnLabel: 'Բեռնել', // for button text
+  uploadBtnColor: '#fff', // for button color
+  uploadBtnHeight: '30px', // for button height
+  uploadBtnBackgroundColor: 'rgba(0, 35, 106, 1)' // for button background color
 }
 ```
 
-### Modal
+### MODAL
 ```
 {
   alignItems: 'center',                                 // for modal ( flex-start, center, flex-end ) --> align-items
@@ -624,7 +632,7 @@ import StackAlt from './assets/stackalt.svg';
 }
 ```
 
-### Checkbox
+### CHECKBOX
 ```
 {
   checkedColor: '#00236A',                              // for checkbox background ( fill ) color
@@ -654,15 +662,19 @@ import StackAlt from './assets/stackalt.svg';
   tBodyPadding: '11px 20px',                            // for table body padding
   tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
   tBodyRowMarginTop: '10px',                            // for table tr margin top
-  tBodyBoxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)', // for table body box shadow
+  tBodyBoxShadow: '',                                   // for table body box shadow
 
   tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
   openListColor: '#A3A5A9',                             // for table body opened list color
+  openListFontSize: '',                                 // for table body opened list font size
+  openListFontFamily: '',                               // for table body opened list font family
   className: '',                                        // for table class
   tableRowItem: false,                                  // for table tr show item ( boolean prop )
   tableRowBGColor: 'transparent',                       // for table tr background color
   tableRowRadius: '6px',                                // for table tr border radius
-  tableRowBoxShadow: '0px 10px 30px 0px #00236A0F'      // for table tr box shadow
+  tableRowBoxShadow: '',                                // for table tr box shadow
+  tableColumnMaxWidth: '',                              // for table column max width
+  tableColumnMinWidth: '',                              // for table column min width
 }
 ```
 
@@ -672,15 +684,32 @@ import StackAlt from './assets/stackalt.svg';
   className: '' // for pagination class
 }
 ```
-### Toaster
+
+```
+### STEPPER
 ```
 {
   className: '' // for pagination class
 }
 ```
-### Stepper
+
+### RADIO
 ```
 {
-  className: '' // for pagination class
+  size: '20px',                              // for width and height
+  className: '',                             // for parent element class
+  borderSize: '2px',                         // for border width
+  borderStyle: 'solid',                      // for border style
+  borderColor: '#E7E7E7',                    // for border color
+  radioMarginRight: '10px',                  // for circle margin right
+  borderActiveColor: '#3C3D46',              // for active border color
+  radioItemMarginRight: '10px',              // for radio item margin right ( circle + label )
+  radioItemMarginBottom: '10px',             // for radio item margin bottom ( circle + label )
+
+  labelColor: '#3C3D46',                     // for label color
+  labelFontSize: '16px',                     // for label font size
+  labelFontWeight: '500',                    // for label font weight
+  labelLineHeight: '21px',                   // for label line height
+  labelFontFamily: 'Arial, sans-serif',      // for label font family
 }
-```
+```

package/src/stories/usage.stories.mdx

@@ -11,6 +11,7 @@ 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 radioImage from './static/radio-usage.png';
 import modalImage from './static/modal-usage.png';
 import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
@@ -20,7 +21,6 @@ import textareaImage from './static/textarea-usage.png';
 import buttonImageIcon from './static/button-usage-icon.png';
 import fileSingleImage from './static/file-single-usage.png';
 import checkboxGroup from './static/checkbox-group-usage.png';
-import singleCheckbox from './static/single-checkbox-usage.png';
 import tableComponent from './static/table-component-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
 import autocompleteImage from './static/autocomplete-usage.png';
@@ -192,9 +192,10 @@ import tableBodyStructureSecond from './static/table-body-data-structure-second-
 <img src={tableBodyStructureNew} alt="file image" />
 <img src={tableBodyStructureThird} alt="file image" />
 
-### Single checkbox
-<img src={singleCheckbox} alt="file image" />
-
 ### Checkbox Group
 <img src={checkboxGroup} alt="file image" />
 <img src={checkboxGroup2} alt="file image" />
+
+### Radio
+<img src={radioImage} alt="file image" />
+

package/tui.config.js

@@ -2,7 +2,6 @@ module.exports = {
     // default properties for <Button /> component
     BUTTON: {
         size: '16px', // for font size
-        font: 'Arial', // for font family
         radius: '6px', // for border radius
         width: '100%', // for width
         weight: '400', // for font weight
@@ -17,6 +16,7 @@ module.exports = {
         padding: '12px 20px', // for padding
         textTransform: 'none', // for text transform
         boxSizing: 'border-box', // for box sizing
+        font: 'Arial, sans-serif', // for font family
         disabledColor: 'rgba(60, 57, 62, 1)', // for color in disabled mode
         backgroundColor: 'rgba(0, 35, 106, 1)', // for background color
         disabledLineColor: 'rgba(60, 57, 62, 1)', // for border color (outline) in disabled mode
@@ -388,6 +388,13 @@ module.exports = {
         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: '#F6F8F8', // for file multiple mode error background color
+
+        uploadBtnFont: 'Arial', // for button font familty
+        uploadBtnSize: '14px', // for button font size
+        uploadBtnLabel: 'Բեռնել', // for button text
+        uploadBtnColor: '#fff', // for button color
+        uploadBtnHeight: '30px', // for button height
+        uploadBtnBackgroundColor: 'rgba(0, 35, 106, 1)' // for button background color
     },
     // default properties for <Modal /> component
     MODAL: {
@@ -446,15 +453,19 @@ module.exports = {
         tBodyPadding: '11px 20px',                            // for table body padding
         tBodyFontFamily: 'Noto Sans Armenia',                 // for table body font family
         tBodyRowMarginTop: '10px',                            // for table tr margin top
-        tBodyBoxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)', // for table body box shadow
+        tBodyBoxShadow: '',                                   // for table body box shadow
 
         tBodyRowBorder: '1px solid #eeeeee',                  // for table body row border
         openListColor: '#A3A5A9',                             // for table body opened list color
+        openListFontSize: '',                                 // for table body opened list font size
+        openListFontFamily: '',                               // for table body opened list font family
         className: '',                                        // for table class
         tableRowItem: false,                                  // for table tr show item ( boolean prop )
         tableRowBGColor: 'transparent',                       // for table tr background color
         tableRowRadius: '6px',                                // for table tr border radius
-        tableRowBoxShadow: '0px 10px 30px 0px #00236A0F'      // for table tr box shadow
+        tableRowBoxShadow: '',                                // for table tr box shadow
+        tableColumnMaxWidth: '',                              // for table column max width
+        tableColumnMinWidth: '',                              // for table column min width
     },
     // default properties for <Pagination /> component
     PAGINATION: {
@@ -467,5 +478,23 @@ module.exports = {
     // default properties for <Stepper /> component
     STEPPER: {
         className: '' // for stepper class
+    },
+    // default properties for <Radio /> component
+    RADIO: {
+        size: '20px', // for width and height
+        className: '', // for parent element class
+        borderSize: '2px', // for border width
+        borderStyle: 'solid', // for border style
+        borderColor: '#E7E7E7', // for border color
+        radioMarginRight: '10px', // for circle margin right
+        borderActiveColor: '#3C3D46', // for active border color
+        radioItemMarginRight: '10px', // for radio item margin right ( circle + label )
+        radioItemMarginBottom: '10px', // for radio item margin bottom ( circle + label )
+
+        labelColor: '#3C3D46', // for label color
+        labelFontSize: '16px', // for label font size
+        labelFontWeight: '500', // for label font weight
+        labelLineHeight: '21px', // for label line height
+        labelFontFamily: 'Arial, sans-serif', // for label font family
     }
 }