Merge pull request #328 from ebs-integrator/development

Development

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebs-design",
-  "version": "0.0.1-beta.102",
+  "version": "0.0.1-beta.103",
   "description": "EBS Design System React UI elements.",
   "author": "EBS Integrator <[email protected]> (https://ebs-integrator.com/)",
   "maintainers": [

src/components/atoms/Avatar/Avatar.tsx

@@ -26,6 +26,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   shortLetters,
   alt = '',
   img,
+  children,
   status,
   ...props
 }) => {
@@ -47,6 +48,8 @@ export const Avatar: React.FC<AvatarProps> = ({
         <div className="ebs-avatar__short-alt">{shortAlt}</div>
       )}
 
+      {children}
+
       {status ? <div className={`ebs-avatar__status ebs-avatar__status--${status}`} /> : null}
     </div>
   );

src/components/atoms/Button/Button.scss

@@ -216,6 +216,10 @@
     padding: rem($btn-padding-y-lg $btn-padding-x-lg);
     font-weight: $btn-font-weight-lg;
     font-size: rem($btn-font-size-lg);
+
+    &.ebs-button--is-icon {
+      padding: rem($btn-padding-y-lg);
+    }
   }
 
   &--medium {
@@ -226,6 +230,10 @@
     padding: rem($btn-padding-y $btn-padding-x);
     font-weight: $btn-font-weight;
     font-size: rem($btn-font-size);
+
+    &.ebs-button--is-icon {
+      padding: rem($btn-padding-y);
+    }
   }
 
   &--small {
@@ -237,6 +245,10 @@
     font-weight: $btn-font-weight-sm;
     font-size: rem($btn-font-size-sm);
     line-height: rem($btn-line-height-sm);
+
+    &.ebs-button--is-icon {
+      padding: rem($btn-padding-y-sm);
+    }
   }
 
   &__wrapper {

src/components/atoms/Button/Button.tsx

@@ -16,7 +16,7 @@ export interface ButtonProps extends Omit<Omit<React.ButtonHTMLAttributes<HTMLBu
   submit?: boolean;
   buttonClass?: string;
   form?: string;
-  icon?: string;
+  icon?: any;
   block?: boolean;
   round?: boolean;
 }
@@ -66,7 +66,14 @@ export const Button: React.FC<ButtonProps> = ({
         disabled={props.disabled || loading}
         {...props}
       >
-        {icon ? <Icon type={icon} /> : props.children}
+        {icon ? (
+          <Icon
+            component={typeof icon !== 'string' ? icon : undefined}
+            type={typeof icon === 'string' ? icon : undefined}
+          />
+        ) : (
+          props.children
+        )}
       </button>
     </div>
   );

src/components/atoms/Icon/Icon.stories.tsx

@@ -28,8 +28,8 @@ export const Regular = (): React.ReactNode => {
             return Object.keys(icons[model]).map((icon) => {
               const iconName = `<Icon type="${icon}" ${model === 'bold' ? 'model="bold"' : ''} />`;
 
-              const onCopy = (): void => {
-                copyToClipboard(iconName);
+              const onCopy = async (): Promise<void> => {
+                await copyToClipboard(iconName);
                 onCopied();
               };
 

src/components/atoms/Input/Input.scss

@@ -47,7 +47,7 @@
     }
   }
 
-  &.ebs-input__style-grey {
+  &.ebs-input-style--grey {
     background-color: $grey-50;
   }
 

src/components/atoms/Input/Input.tsx

@@ -88,7 +88,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             `ebs-input__wrapper`,
             `ebs-input__wrapper--${hasValue ? `active` : `unactive`}`,
             `ebs-input__type--${type}`,
-            `ebs-input-style-${styleType}`,
+            `ebs-input-style--${styleType}`,
             className,
             {
               'ebs-input__empty': value === '',
@@ -104,16 +104,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               className={cn(`ebs-input__prefix`, !loading && props.onClickPrefix ? `clickable` : `not-clickable`)}
               onClick={onClickPrefixHandler}
             >
-              {loading ? <Loader.Spinner size="small" /> : prefix}
+              {loading && !suffix ? <Loader.Spinner size="small" /> : prefix}
             </div>
           ) : null}
 
-          {suffix ? (
+          {loading || suffix ? (
             <div
               className={cn(`ebs-input__suffix`, !loading && props.onClickSuffix ? `clickable` : `not-clickable`)}
               onClick={onClickSuffixHandler}
             >
-              {loading && !prefix ? <Loader.Spinner size="small" /> : suffix}
+              {loading && (!prefix || (prefix && suffix)) ? <Loader.Spinner size="small" /> : suffix}
             </div>
           ) : null}
 

src/components/atoms/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ export interface TabsComposition {
 
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
   activeTab?: string;
+  contentClass?: string;
   setActiveTab?: (key: string) => void;
 }
 
@@ -20,7 +21,14 @@ export interface TabsContext {
 
 const TabsContext = React.createContext<TabsContext | undefined>(undefined);
 
-const Tabs: React.FC<TabsProps> & TabsComposition = ({ activeTab, setActiveTab, className, children, ...props }) => {
+const Tabs: React.FC<TabsProps> & TabsComposition = ({
+  activeTab,
+  setActiveTab,
+  className,
+  contentClass,
+  children,
+  ...props
+}) => {
   const memoizedContextValue = React.useMemo(
     () => ({
       activeTab,
@@ -39,7 +47,7 @@ const Tabs: React.FC<TabsProps> & TabsComposition = ({ activeTab, setActiveTab,
             }
           })}
       </div>
-      <div className={`ebs-tabs__content`}>
+      <div className={cn(`ebs-tabs__content`, contentClass)}>
         {children &&
           React.Children.map(children, (child) => {
             if (child && (child as React.ReactElement).type !== Tab) {

src/components/molecules/DatePicker/RangeInputPicker/CustomRangeInput.tsx

@@ -3,13 +3,20 @@ import type { ReactDatePickerProps } from 'react-datepicker';
 import { omitKeys } from 'libs';
 import { getOutputDate } from '../utils';
 
-const keysToOmit = ['autoComplete', 'autoFocus', 'dateFormat', 'endDate', 'startDate', 'value'];
+const keysToOmit: (keyof ReactDatePickerProps)[] = [
+  'autoComplete',
+  'autoFocus',
+  'dateFormat',
+  'endDate',
+  'startDate',
+  'value',
+];
 
 const CustomRangeInput = React.forwardRef<HTMLInputElement, Partial<ReactDatePickerProps>>((props, ref) => {
   const range = [getOutputDate(props.startDate, props.dateFormat), getOutputDate(props.endDate, props.dateFormat)];
   const value = range.filter((r) => !r).length === range.length ? '' : range.join(' - ');
 
-  return <input ref={ref} {...omitKeys(keysToOmit, props)} title={value} value={value} />;
+  return <input ref={ref} {...omitKeys(props, keysToOmit)} title={value} value={value} />;
 });
 
 export default CustomRangeInput;

src/components/organisms/Table/Table.scss

@@ -1,6 +1,6 @@
 @import '~rc-table/assets/index.css';
 
-.ebs-table {
+.rc-table.ebs-table {
   box-shadow: $table-box-shadow;
 
   // FIXME: Fix table on mobile

src/libs/object.ts

@@ -16,12 +16,14 @@ export const validate = (errors: string[] | { [key: string]: string[] }): string
   return [];
 };
 
-export const isObject = (val: any): boolean => typeof val === 'object';
+export const isObject = (val: any): boolean => typeof val === 'object' && val !== null;
 
-export const omitKeys = (keys: string[], obj: object): object => {
+export const omitKeys = <T extends object, K extends Extract<keyof T, string>>(obj: T, keys: K[]): Omit<T, K> => {
   const updatedObj = { ...obj };
 
-  for (const n of keys) delete updatedObj[n];
+  for (const key of keys) {
+    delete updatedObj[key];
+  }
 
   return updatedObj;
 };

src/libs/string.ts

@@ -24,14 +24,24 @@ export const firstLetters = (target: string, count = 1): string =>
         .substr(0, count)
     : '';
 
-export const copyToClipboard = (str: string): void => {
-  const el = document.createElement('textarea');
+export const copyToClipboard = (str: string): Promise<void> => {
+  if (navigator.clipboard) {
+    try {
+      return navigator.clipboard.writeText(str);
+    } catch (err) {}
+  }
+
+  return Promise.resolve(deprecatedCopyToClipboard(str));
 
-  el.value = str;
-  document.body.appendChild(el);
+  function deprecatedCopyToClipboard(str: string): void {
+    const el = document.createElement('textarea');
 
-  el.select();
+    el.value = str;
+    document.body.appendChild(el);
 
-  document.execCommand('copy');
-  document.body.removeChild(el);
+    el.select();
+
+    document.execCommand('copy');
+    document.body.removeChild(el);
+  }
 };