@onewelcome/react-lib-components 0.1.1-alpha → 0.1.4-alpha

package/src/_BaseStyling_/BaseStyling.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment, HTMLAttributes, ReactChild, useEffect, useState } from 'react';
 
 interface CSSProperties {
+  colorFocus?: string;
   colorPrimary?: string;
   colorSecondary?: string;
   colorTertiary?: string;
@@ -16,6 +17,7 @@ interface CSSProperties {
   inputBorderRadius?: string;
   inputBorderWidth?: string;
   inputBorderStyle?: string;
+  inputBackgroundColor?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalHeaderBackgroundColor?: string;
@@ -24,6 +26,13 @@ interface CSSProperties {
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  tabsBackgroundColor?: string;
+  tabBorderWidth?: string;
+  tabBorderStyle?: string;
+  tablistBorderWidth?: string;
+  tablistBorderStyle?: string;
+  tablistBorderColor?: string;
+  tabTextColor?: string;
   default?: string;
   success?: string;
   error?: string;
@@ -48,6 +57,7 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
+    colorFocus: '#0085f2',
     colorPrimary: '#9e006b',
     colorSecondary: '#003b5e',
     colorTertiary: '#ff1e4e',
@@ -63,6 +73,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputBorderRadius: '8px',
     inputBorderWidth: '1px',
     inputBorderStyle: 'solid',
+    inputBackgroundColor: '#FFF',
     modalShadowColor: 'rgba(0, 0, 0, 0.16)',
     modalBackgroundColor: '#F5F8F8',
     modalHeaderBackgroundColor: '#FFF',
@@ -71,6 +82,13 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarSuccessBackgroundColor: '#008a28',
     snackbarErrorBackgroundColor: '#e22a1d',
     snackbarBorderRadius: '8px',
+    tabsBackgroundColor: '#FFF',
+    tabBorderWidth: '2px',
+    tabBorderStyle: 'solid',
+    tablistBorderWidth: '1px',
+    tablistBorderStyle: 'solid',
+    tablistBorderColor: '#C3C3C7',
+    tabTextColor: '#0f0f1e',
     default: '#0f0f1e',
     success: '#008a28',
     error: '#e22a1d',
@@ -94,7 +112,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
   /** Set the actual CSS properties on the HTML :root object */
   const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {
     for (const [key, value] of Object.entries(CSSPropertiesObject)) {
-      const formattedPropertyName = key.replaceAll(/([A-Z])/g, (val) => `-${val.toLowerCase()}`);
+      const formattedPropertyName = key.replace(/([A-Z])/g, (val) => `-${val.toLowerCase()}`);
       document.documentElement.style.setProperty(`--${formattedPropertyName}`, value);
     }
   };

package/src/hooks/useRepeater.test.tsx

@@ -0,0 +1,139 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { useRepeater } from './useRepeater';
+import { render } from '@testing-library/react';
+import { InputWrapper } from '../Form/Wrapper/InputWrapper/InputWrapper';
+import { generateID } from '../util/helper';
+import userEvent from '@testing-library/user-event';
+
+export interface RepeatedComponentProps {
+  onChange?: (state: { [key: string]: unknown }) => void;
+  identifier?: string;
+}
+
+const ComponentToRepeat = ({ onChange, identifier }: RepeatedComponentProps) => {
+  const [inputState, setInputState] = useState({
+    errorMessage: 'random error',
+    error: false,
+    value: '',
+    identifier: identifier,
+  });
+
+  useEffect(() => {
+    onChange && onChange(inputState);
+  }, [inputState]);
+
+  return (
+    <InputWrapper
+      helperText="Helper text for this field. Description should be short and not repeat the label"
+      name={`input_${identifier}`}
+      errorMessage={inputState.errorMessage}
+      type="text"
+      error={inputState.error}
+      value={inputState.value}
+      label="Label for this inputfield"
+      onChange={(event) => {
+        setInputState((prevState) => ({ ...prevState, value: event.target.value }));
+      }}
+    />
+  );
+};
+
+describe('useRepeater should render', () => {
+  it('renders without crashing and repeats 1 item', () => {
+    const onChangeHandler = jest.fn();
+
+    const App = () => {
+      const { repeatedComponents } = useRepeater({
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+      });
+
+      return (
+        <div>
+          {repeatedComponents.map((component, index) =>
+            React.cloneElement(component, {
+              identifier: `component_${index}`,
+            })
+          )}
+        </div>
+      );
+    };
+
+    const renderedItems = render(<App />);
+
+    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+
+    expect(inputWrappers.length).toBe(1);
+  });
+
+  it('should repeat 2 items', () => {
+    const onChangeHandler = jest.fn();
+
+    const App = () => {
+      const { repeatedComponents, repeat } = useRepeater({
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+      });
+
+      useEffect(() => {
+        repeat();
+      }, []);
+
+      return (
+        <div>
+          {repeatedComponents.map((component, index) =>
+            React.cloneElement(component, {
+              identifier: `component_${index}`,
+            })
+          )}
+        </div>
+      );
+    };
+
+    const renderedItems = render(<App />);
+
+    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+
+    expect(inputWrappers.length).toBe(2);
+  });
+
+  it('should repeat 3 items and remove the first index', () => {
+    const onChangeHandler = jest.fn();
+
+    const App = () => {
+      const { repeatedComponents, repeat, remove } = useRepeater({
+        componentToRepeat: <ComponentToRepeat onChange={onChangeHandler} />,
+      });
+
+      useEffect(() => {
+        repeat();
+        repeat();
+      }, []);
+
+      return (
+        <div>
+          {repeatedComponents.map((component, index) => (
+            <Fragment key={index}>
+              {React.cloneElement(component, {
+                identifier: generateID(),
+              })}
+              <button id={`remove_input_${index}`} onClick={() => remove(component)}>
+                Remove
+              </button>
+            </Fragment>
+          ))}
+        </div>
+      );
+    };
+
+    const renderedItems = render(<App />);
+
+    const secondInputID = renderedItems.container.querySelectorAll('.input-wrapper input')[1].id;
+
+    const removeButton = renderedItems.container.querySelector('#remove_input_1');
+
+    userEvent.click(removeButton!);
+
+    expect(renderedItems.container.querySelector(`#${secondInputID}`)).toBeFalsy();
+    const inputWrappers = renderedItems.container.querySelectorAll('.wrapper.input-wrapper');
+    expect(inputWrappers.length).toBe(2);
+  });
+});

package/src/hooks/useRepeater.ts

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { generateID } from '../util/helper';
+
+interface Arguments {
+  componentToRepeat: React.ReactElement;
+}
+
+export const useRepeater = <T>({ componentToRepeat }: Arguments) => {
+  const [repeatedComponents, setRepeatedComponents] = useState<JSX.Element[]>([]);
+
+  useEffect(() => {
+    repeat();
+  }, []);
+
+  const repeat = () => {
+    const clonedComponent = React.cloneElement(componentToRepeat, { key: generateID(20) });
+
+    setRepeatedComponents((prevState) => [...prevState, clonedComponent]);
+  };
+
+  const remove = (componentToRemove: React.ReactElement<T>) => {
+    const newRepeatedComponents = repeatedComponents.filter(
+      (component) => component !== componentToRemove
+    );
+
+    setRepeatedComponents(newRepeatedComponents);
+  };
+
+  return {
+    repeatedComponents,
+    repeat,
+    remove,
+  };
+};

package/src/hooks/useSpacing.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type SpacingMultiplier = 0 | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type SpacingMultiplierStringOrNumber = `${SpacingMultiplier}` | SpacingMultiplier;
 type MultiValueSpacingMultiplier =
   | `${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier} ${SpacingMultiplier}`

package/src/hooks/useWrapper.ts

@@ -10,13 +10,18 @@ export const useWrapper = (value?: string, placeholder?: string, type?: InputTyp
   const [hasFocus, setHasFocus] = useState(false);
 
   useEffect(() => {
-    if (value?.length || placeholder || type === 'datetime-local' || type === 'time') {
+    if (
+      (value?.length && value.length > 0) ||
+      placeholder ||
+      type === 'datetime-local' ||
+      type === 'time'
+    ) {
       setFloatingLabelActive(true);
     }
   }, []);
 
   useEffect(() => {
-    if (value?.length || hasFocus) {
+    if ((value?.length && value.length > 0) || hasFocus) {
       setFloatingLabelActive(true);
     } else if (!placeholder && !hasFocus && type !== 'datetime-local' && type !== 'time') {
       setFloatingLabelActive(false);

package/src/index.ts

@@ -4,15 +4,25 @@ export { Typography } from './Typography/Typography';
 export { Button } from './Button/Button';
 export { Link } from './Link/Link';
 export { IconButton } from './Button/IconButton';
-
+export {
+  Pagination,
+  Props as PaginationProps,
+  PageChangeLabels,
+  PaginationTranslations,
+  PageSize,
+} from './Pagination/Pagination';
 export { Icon, Icons } from './Icon/Icon';
 
+export { Tabs, Props as TabsProps } from './Tabs/Tabs';
+export { Tab, Props as TabProps } from './Tabs/Tab';
+
 export { Dialog } from './Notifications/Dialog/Dialog';
 export { Modal } from './Notifications/Modal/Modal';
 export { ModalActions } from './Notifications/Modal/ModalActions/ModalActions';
 export { ModalContent } from './Notifications/Modal/ModalContent/ModalContent';
 export { ModalHeader } from './Notifications/Modal/ModalHeader/ModalHeader';
 export { DiscardChangesModal } from './Notifications/DiscardChangesModal/DiscardChangesModal';
+export { TextEllipsis, Props as TextEllipsisProps } from './TextEllipsis/TextEllipsis';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Tiles } from './Tiles/Tiles';
 export { Tile } from './Tiles/Tile';
@@ -23,6 +33,10 @@ export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
 export { SnackbarProvider } from './Notifications/Snackbar/SnackbarProvider/SnackbarProvider';
 export { useSnackbar } from './Notifications/Snackbar/useSnackbar';
 
+export { useRepeater } from './hooks/useRepeater';
+
+export { generateID } from './util/helper';
+
 /** Form components */
 export { Form } from './Form/Form';
 export { Fieldset } from './Form/Fieldset/Fieldset';

package/src/interfaces.ts

@@ -1,15 +1,5 @@
-import React from 'react';
+export type DataAttributeKey = `data-${string}`;
 
-/**
- * By default typescript does not allow data-* attributes on HTMLAttributes interface. We extend the default React.HTMLAttributes interface here and add the dataAttribute possibility into it.
- * An example of this can be found in Checkbox.tsx. We assign wrapperProps to the HTMLAttributes interface below, and are now able to add a test-id inside of Checkbox.test.tsx on line 77.
- */
-type DataAttributeKey = `data-${string}`;
-
-export interface HTMLProps<T> extends React.HTMLProps<T> {
-  [dataAttribute: DataAttributeKey]: any;
-}
-
-export interface HTMLAttributes<T> extends React.HTMLAttributes<T> {
+export interface KeyValuePair {
   [dataAttribute: DataAttributeKey]: any;
 }

package/src/util/helper.test.tsx

@@ -1,4 +1,4 @@
-import { generateID } from './helper';
+import { generateID, filterProps } from './helper';
 
 /* Generate an ID of 20 characters with a string woven in */
 
@@ -13,3 +13,40 @@ describe('generateID should correctly generate IDs in the correct way', () => {
     expect(ID2.length).toBe(20);
   });
 });
+
+describe('filterprops should return the correct object', () => {
+  it('gives back the props we told it to filter', () => {
+    const propsObject = {
+      'data-filter': true,
+      'data-test': false,
+      'aria-hidden': false,
+      'aria-expanded': true,
+      title: 'test',
+      className: 'example-classname',
+    };
+
+    const returnedPropsObject = filterProps(propsObject, /^data-/);
+
+    expect(returnedPropsObject).toStrictEqual({ 'data-filter': true, 'data-test': false });
+  });
+
+  it('gives back the propsObject without the props we told it to filter', () => {
+    const propsObject = {
+      'data-filter': true,
+      'data-test': false,
+      'aria-hidden': false,
+      'aria-expanded': true,
+      title: 'test',
+      className: 'example-classname',
+    };
+
+    const returnedPropsObject = filterProps(propsObject, /^data-/, false);
+
+    expect(returnedPropsObject).toStrictEqual({
+      'aria-hidden': false,
+      'aria-expanded': true,
+      title: 'test',
+      className: 'example-classname',
+    });
+  });
+});

package/src/util/helper.tsx

@@ -1,3 +1,5 @@
+type KeyValuePair = { [key: string]: unknown };
+
 export const generateID = (length = 15, stringToWeaveIn?: string) => {
   /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
   let hashCharacters = [
@@ -78,3 +80,22 @@ export const generateID = (length = 15, stringToWeaveIn?: string) => {
 
   return id.slice(0, length);
 };
+
+export const filterProps = (props: any, regexPattern: RegExp, returnFiltered: boolean = true) => {
+  if (returnFiltered) {
+    return Object.keys(props).reduce((acc: KeyValuePair, key) => {
+      if (regexPattern.test(key)) {
+        acc[key] = props[key];
+      }
+
+      return acc;
+    }, {});
+  } else {
+    return Object.entries(props)
+      .filter(([key]) => !regexPattern.test(key))
+      .reduce(
+        (prevObj, currKeyValPair) => ({ ...prevObj, [currKeyValPair[0]]: currKeyValPair[1] }),
+        {}
+      );
+  }
+};