@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -1,31 +1,29 @@
 import * as React from 'react';
 import { generateUUID } from '../../Util';
-import { renderTooltipProps, renderTooltip, IToolTipConfig} from '../Tooltip';
+import { renderTooltipProps, renderTooltip, IToolTipConfig } from '../Tooltip';
 import { ICON_TIMES_CIRCLE, ICON_INFO_CIRCLE } from '../../constants/icons';
 import Button from '../button/Button';
 
 interface IFieldWrapperProps {
-    buttons? : any;
-    children : any;
-    customClass? : string;
-    label? : any;
-    tooltip? : IToolTipConfig | string;
-    info? : any;
-    width? : string | number;
-    labelPosition? : string;
+    buttons?: any;
+    children: any;
+    customClass?: string;
+    label?: any;
+    tooltip?: IToolTipConfig | string;
+    info?: any;
+    width?: string | number;
+    labelPosition?: string;
 }
 
 interface IFieldWrapperState {
-    showInfo : boolean;
+    showInfo: boolean;
 }
 
 class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapperState> {
-
-    private tooltipId : string;
-    private toggleIDInfo : any;
+    private tooltipId: string;
+    private toggleIDInfo: any;
 
     constructor(props) {
-
         super(props);
 
         this.tooltipId = generateUUID();
@@ -42,44 +40,43 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     private getLabelClass() {
-
         if (!this.props.label) {
             return 'no-label';
         } else {
-            const labelPos = (this.props.labelPosition) ? this.props.labelPosition : 'left';
+            const labelPos = this.props.labelPosition ? this.props.labelPosition : 'left';
             return `label-${labelPos}`;
         }
     }
 
     private renderLabel() {
-
-        const { showInfo} = this.state;
+        const { showInfo } = this.state;
         const { info, label } = this.props;
 
-        const iconInfo = (showInfo) ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
+        const iconInfo = showInfo ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
 
-        const btnInfo = (info) ? <Button
-            onClick = {this.toggleIDInfo}
-            size = 'small'
-            style = 'subtle'>
-            {iconInfo}
-        </Button> : null;
+        const btnInfo = info ? (
+            <Button onClick={this.toggleIDInfo} size='small' style='subtle'>
+                {iconInfo}
+            </Button>
+        ) : null;
 
         if (btnInfo || label) {
-            return <label {...renderTooltipProps(this.tooltipId, this.props.tooltip)}
-                className = {this.getLabelClass()}>
-                {btnInfo}
-                {(btnInfo) && ' '}
-                {label}
-            </label>;
+            return (
+                <label
+                    {...renderTooltipProps(this.tooltipId, this.props.tooltip)}
+                    className={this.getLabelClass()}>
+                    {btnInfo}
+                    {btnInfo && ' '}
+                    {label}
+                </label>
+            );
         } else {
             return null;
         }
     }
 
     public render() {
-
-        const {label, width, customClass} = this.props;
+        const { label, width, customClass } = this.props;
         const labelJSX = this.renderLabel();
 
         const style = {};
@@ -88,23 +85,24 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
             fieldProps = renderTooltipProps(this.tooltipId, this.props.tooltip);
         }
         if (width) {
-            style['width'] = (typeof width === 'string') ? width : `${width}px`;
+            style['width'] = typeof width === 'string' ? width : `${width}px`;
         }
 
-        return <div className = {`form-field ${customClass} ${this.getLabelClass()}`} style = {style}>
-            {labelJSX}
-            <div className = {`form-field-content ${this.getLabelClass()}`} {...fieldProps}>
-                { this.props.children }
-                { this.renderButtons() }
+        return (
+            <div className={`form-field ${customClass} ${this.getLabelClass()}`} style={style}>
+                {labelJSX}
+                <div className={`form-field-content ${this.getLabelClass()}`} {...fieldProps}>
+                    {this.props.children}
+                    {this.renderButtons()}
+                </div>
+                {renderTooltip(this.tooltipId, this.props.tooltip)}
+                {this.renderInfo()}
             </div>
-            {renderTooltip(this.tooltipId, this.props.tooltip)}
-            {this.renderInfo()}
-        </div>;
+        );
     }
 
-     private renderInfo() {
-
-        const{ info} = this.props;
+    private renderInfo() {
+        const { info } = this.props;
         const { showInfo } = this.state;
 
         if (info && showInfo) {
@@ -115,11 +113,8 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public renderButtons() {
-
         if (this.props.buttons) {
-            return <div className = 'form-field-buttons'>
-                { this.props.buttons }
-            </div>;
+            return <div className='form-field-buttons'>{this.props.buttons}</div>;
         }
     }
 }

package/src/components/h-rule/HRule.stories.tsx

@@ -9,9 +9,9 @@ export default {
 // This is hard to see
 export const defaultHRule = () => (
     <>
-        <HRule  />
-        <HRule style = 'subtle' />
-        <HRule  />
-        <HRule style = 'subtle' />
+        <HRule />
+        <HRule style='subtle' />
+        <HRule />
+        <HRule style='subtle' />
     </>
 );

package/src/components/h-rule/HRule.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 
 const HRule = (props) => {
-
     let style = props.style;
-    if (!style) { style = 'default'; }
-    return (
-        <div className = {`horizontal-rule ${style}`}/>
-    );
+    if (!style) {
+        style = 'default';
+    }
+    return <div className={`horizontal-rule ${style}`} />;
 };
 
 export default HRule;