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

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,149 @@
+import React, {
+  ComponentPropsWithRef,
+  createRef,
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { generateID } from '../util/helper';
+import { Props as TabProps } from './Tab';
+import { TabButton } from './TabButton';
+import { TabPanel } from './TabPanel';
+import classes from './Tabs.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  selected?: number;
+  'aria-label'?: string;
+  onTabChange?: (index: number) => void;
+}
+
+export const Tabs = ({
+  children,
+  selected = 0,
+  'aria-label': ariaLabel,
+  onTabChange,
+  className,
+  ...rest
+}: Props) => {
+  const indicatorRef = useRef<HTMLDivElement>(null);
+  const [indicatorPosition, setIndicatorPosition] = useState({ left: 0, top: 0 });
+  const [indicatorWidth, setIndicatorWidth] = useState(0);
+
+  const [max] = useState(React.Children.count(children) - 1);
+  const min = 0;
+
+  const [selectedTab, setSelectedTab] = useState(Math.min(max, Math.max(min, selected)));
+  const [focussedTab, setFocussedTab] = useState(-1);
+  const [tabIds] = useState([...Array(max)].map(() => generateID()));
+  const [tabPanelIds] = useState([...Array(max)].map(() => generateID()));
+
+  useEffect(() => {
+    setSelectedTab(Math.min(max, Math.max(min, selected)));
+    setFocussedTab(-1);
+  }, [selected]);
+
+  useEffect(() => {
+    calculateIndicatorPosition();
+  }, [selectedTab]);
+
+  const calculateIndicatorPosition = () => {
+    const selectedTabButton = (
+      tabButtons[selectedTab].ref as MutableRefObject<HTMLButtonElement | null>
+    ).current as HTMLButtonElement;
+
+    setIndicatorPosition({
+      left: selectedTabButton.offsetLeft,
+      top:
+        selectedTabButton.offsetTop +
+        selectedTabButton.offsetHeight -
+        indicatorRef.current!.offsetHeight,
+    });
+    setIndicatorWidth(selectedTabButton.offsetWidth);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    // do not show focus unless we came here before
+    let currentFocussedTab = focussedTab === -1 ? selectedTab : focussedTab;
+
+    switch (e.code) {
+      case 'ArrowLeft':
+        setFocussedTab(currentFocussedTab === min ? max : currentFocussedTab - 1);
+        break;
+      case 'ArrowRight':
+        setFocussedTab(currentFocussedTab === max ? min : currentFocussedTab + 1);
+        break;
+      case 'Home':
+        setFocussedTab(min);
+        break;
+      case 'End':
+        setFocussedTab(max);
+        break;
+      case 'Space':
+      case 'Enter':
+        activateTab(currentFocussedTab);
+        break;
+    }
+  };
+
+  const handleBlur = () => {
+    setFocussedTab(selectedTab);
+  };
+
+  const activateTab = (index: number) => {
+    setSelectedTab(index);
+    setFocussedTab(index);
+    onTabChange && onTabChange(index);
+  };
+
+  const tabButtons = React.Children.map(children, (child, index) =>
+    React.createElement(TabButton, {
+      ref: child.props.buttonRef || createRef<HTMLButtonElement>(),
+      key: generateID(),
+      tabId: tabIds[index],
+      tabPanelId: tabPanelIds[index],
+      selected: selectedTab === index,
+      focussed: focussedTab === index,
+      onTabButtonClick: () => activateTab(index),
+      children: child.props.title,
+    })
+  );
+
+  const tabPanels = React.Children.map(children, (child, index) =>
+    React.createElement(TabPanel, {
+      ref: child.props.panelRef || createRef<HTMLDivElement>(),
+      key: generateID(),
+      selected: selectedTab === index,
+      tabId: tabIds[index],
+      tabPanelId: tabPanelIds[index],
+      children: child.props.children,
+    })
+  );
+
+  return (
+    <div {...rest} className={`${classes['tabs']} ${className ?? ''}`}>
+      <div
+        role="tablist"
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        aria-label={ariaLabel}
+        className={classes['tablist']}
+      >
+        <div className={classes['tabdivider']} />
+        {tabButtons}
+        <div
+          className={classes['indicator']}
+          ref={indicatorRef}
+          aria-hidden="true"
+          tabIndex={-1}
+          style={{
+            width: indicatorWidth,
+            ...indicatorPosition,
+          }}
+        />
+      </div>
+      <div className={classes['tabpanels']}>{tabPanels}</div>
+    </div>
+  );
+};

package/src/TextEllipsis/TextEllipsis.module.scss

@@ -0,0 +1,18 @@
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popover {
+  max-width: min(75ch, 90%);
+  padding: 0.6875rem 0.6875rem 0.6875rem 0.875rem;
+  border-radius: 0.25rem;
+
+  box-shadow: 0rem 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
+  white-space: pre-wrap;
+
+  transition-property: opacity;
+  transform: scale(1);
+  z-index: 1;
+}

package/src/TextEllipsis/TextEllipsis.test.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import { Props, TextEllipsis } from './TextEllipsis';
+
+const defaultParams: Props = {};
+
+const createTextEllipsis = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TextEllipsis {...parameters} data-testid="TextEllipsis">
+      content
+    </TextEllipsis>
+  );
+  const textEllipsis = queries.getByTestId('TextEllipsis');
+
+  return {
+    ...queries,
+    textEllipsis,
+  };
+};
+
+describe('TextEllipsis should render', () => {
+  it('renders without crashing', () => {
+    const { textEllipsis, getAllByText } = createTextEllipsis();
+
+    expect(textEllipsis).toBeDefined();
+    expect(getAllByText('content')).toHaveLength(2);
+  });
+
+  it('does not show popover when full text is visible', () => {
+    const { textEllipsis, getByRole } = createTextEllipsis();
+
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    user.hover(textEllipsis);
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+  });
+
+  it('shows popover with full text when base text has ellipsis', () => {
+    const { textEllipsis, getByRole } = createTextEllipsis();
+
+    Object.defineProperty(textEllipsis, 'offsetWidth', { configurable: true, value: 1 });
+    Object.defineProperty(textEllipsis, 'scrollWidth', { configurable: true, value: 2 });
+
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+    user.hover(textEllipsis);
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'false');
+    user.unhover(textEllipsis);
+    expect(getByRole('tooltip', { hidden: true })).toHaveAttribute('data-hidden', 'true');
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <TextEllipsis data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/TextEllipsis/TextEllipsis.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, MouseEventHandler, useState, ComponentPropsWithRef } from 'react';
+import { Popover } from '../Popover/Popover';
+import classes from './TextEllipsis.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children?: string;
+  popoverClassName?: string;
+}
+
+export const TextEllipsis = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, popoverClassName, className, ...rest }: Props, ref) => {
+    const [showPopover, setShowPopover] = useState(false);
+    const textContainer = useRef<HTMLDivElement>(null);
+
+    const ellipsisVisible = () => {
+      if (
+        textContainer.current &&
+        textContainer.current.offsetWidth < textContainer.current.scrollWidth
+      ) {
+        return true;
+      }
+      return false;
+    };
+
+    const onMouseEnter: MouseEventHandler<HTMLDivElement> = () => {
+      ellipsisVisible() && setShowPopover(true);
+    };
+
+    const onMouseLeave: MouseEventHandler<HTMLDivElement> = () => {
+      ellipsisVisible() && setShowPopover(false);
+    };
+
+    return (
+      <div
+        {...rest}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className={`${classes['text-ellipsis']} ${className ?? ''}`}
+        ref={ref || textContainer}
+      >
+        {children}
+        <Popover
+          aria-hidden={true}
+          data-hidden={!showPopover}
+          show={showPopover}
+          role="tooltip"
+          anchorEl={textContainer}
+          className={`${classes.popover} ${popoverClassName ?? ''}`}
+        >
+          {children}
+        </Popover>
+      </div>
+    );
+  }
+);

package/src/Tiles/Tile.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tile, Props } from './Tile';
 import { render, getByRole } from '@testing-library/react';
 import { Icon, Icons } from '../Icon/Icon';
@@ -137,3 +137,29 @@ describe('contextmenu', () => {
     expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tile {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Tiles/Tile.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLProps, ReactElement, useState } from 'react';
+import React, { ComponentPropsWithRef, ReactElement, useState } from 'react';
 import { Icon, Icons } from '../Icon/Icon';
 import classes from './Tile.module.scss';
 import readyClasses from '../readyclasses.module.scss';
@@ -11,7 +11,7 @@ interface ImageProps {
   src: string;
 }
 
-export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'contextMenu'> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   title: string;
   imageProps?: ImageProps;
   enabled?: boolean;
@@ -19,67 +19,64 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'contextMenu'> {
   tileAction?: ReactElement<ContextMenuProps> | ReactElement<IconButtonProps>;
 }
 
-export const Tile = ({
-  title,
-  imageProps,
-  enabled,
-  className,
-  loading,
-  tileAction,
-  ...rest
-}: Props) => {
-  const [tileDescriptionID] = useState(generateID(20));
+export const Tile = React.forwardRef<HTMLDivElement, Props>(
+  ({ title, imageProps, enabled, className, loading, tileAction, ...rest }: Props, ref) => {
+    const [tileDescriptionID] = useState(generateID(20));
 
-  if (!title) {
-    throw new Error('Please make sure to pass a title prop to your Tile component.');
-  }
-
-  const statusMessage = () => {
-    if (enabled) {
-      return 'Status: enabled';
+    if (!title) {
+      throw new Error('Please make sure to pass a title prop to your Tile component.');
     }
 
-    return 'Status: disabled';
-  };
+    const statusMessage = () => {
+      if (enabled) {
+        return 'Status: enabled';
+      }
 
-  return (
-    <article
-      tabIndex={0}
-      aria-labelledby={tileDescriptionID}
-      {...rest}
-      className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}
-    >
-      <header style={{ justifyContent: enabled === undefined ? 'flex-end' : 'space-between' }}>
-        {enabled === true && (
-          <Icon
-            color="var(--success)"
-            icon={Icons.Checkmark}
-            className={`${classes['icon']} ${className ?? ''}`}
-          />
-        )}
-        {enabled === false && (
-          <Icon
-            color="var(--greyed-out)"
-            icon={Icons.Forbidden}
-            className={`${classes['icon']} ${className ?? ''}`}
-          />
-        )}
-        {enabled !== undefined && (
-          <span id={tileDescriptionID} className={readyClasses['sr-only']}>
-            {`${title}. ${statusMessage()}`}
-          </span>
-        )}
-        {tileAction ?? null}
-      </header>
-      <div className={classes['content']}>
-        {imageProps && imageProps.src.length > 0 && (
-          <figure className={classes['image']}>{!loading && <img {...imageProps} alt="" />}</figure>
-        )}
-        {(!imageProps || imageProps.src.length === 0) && (
-          <Icon className={classes['placeholder']} icon={Icons.Image} />
-        )}
-        <span className={classes['title']}>{title}</span>
-      </div>
-    </article>
-  );
-};
+      return 'Status: disabled';
+    };
+
+    return (
+      <article
+        {...rest}
+        tabIndex={0}
+        aria-labelledby={tileDescriptionID}
+        ref={ref}
+        className={`${classes['tile']} ${loading ? classes['loading'] : ''}`}
+      >
+        <header style={{ justifyContent: enabled === undefined ? 'flex-end' : 'space-between' }}>
+          {enabled === true && (
+            <Icon
+              color="var(--success)"
+              icon={Icons.Checkmark}
+              className={`${classes['icon']} ${className ?? ''}`}
+            />
+          )}
+          {enabled === false && (
+            <Icon
+              color="var(--greyed-out)"
+              icon={Icons.Forbidden}
+              className={`${classes['icon']} ${className ?? ''}`}
+            />
+          )}
+          {enabled !== undefined && (
+            <span id={tileDescriptionID} className={readyClasses['sr-only']}>
+              {`${title}. ${statusMessage()}`}
+            </span>
+          )}
+          {tileAction ?? null}
+        </header>
+        <div className={classes['content']}>
+          {imageProps && imageProps.src.length > 0 && (
+            <figure className={classes['image']}>
+              {!loading && <img {...imageProps} alt="" />}
+            </figure>
+          )}
+          {(!imageProps || imageProps.src.length === 0) && (
+            <Icon className={classes['placeholder']} icon={Icons.Image} />
+          )}
+          <span className={classes['title']}>{title}</span>
+        </div>
+      </article>
+    );
+  }
+);

package/src/Tiles/Tiles.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tiles, Props } from './Tiles';
 import { Tile } from './Tile';
 import { render } from '@testing-library/react';
@@ -118,3 +118,29 @@ describe('loading state should be handled properly', () => {
     expect(tiles.querySelectorAll('.tile.loading').length).toBe(3);
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tiles {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

package/src/Tiles/Tiles.tsx

@@ -1,48 +1,51 @@
-import React, { HTMLProps, ReactNode } from 'react';
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
 import classes from './Tiles.module.scss';
 import { Tile } from './Tile';
 
-export interface Props extends HTMLProps<HTMLDivElement> {
+export interface Props extends ComponentPropsWithRef<'div'> {
   children: ReactNode;
   loading?: boolean;
 }
 
-export const Tiles = ({ children, className, loading = false, ...rest }: Props) => {
-  const renderChildren = () => {
-    if (loading) {
-      return [
-        <Tile
-          key="placeholder1"
-          title="placeholder"
-          imageProps={{ src: 'placeholder' }}
-          loading={true}
-        />,
-        <Tile
-          key="placeholder2"
-          title="placeholder"
-          imageProps={{ src: 'placeholder' }}
-          loading={true}
-        />,
-        <Tile
-          key="placeholder3"
-          title="placeholder"
-          imageProps={{ src: 'placeholder' }}
-          loading={true}
-        />,
-      ];
-    }
+export const Tiles = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, className, loading = false, ...rest }: Props, ref) => {
+    const renderChildren = () => {
+      if (loading) {
+        return [
+          <Tile
+            key="placeholder1"
+            title="placeholder"
+            imageProps={{ src: 'placeholder' }}
+            loading={true}
+          />,
+          <Tile
+            key="placeholder2"
+            title="placeholder"
+            imageProps={{ src: 'placeholder' }}
+            loading={true}
+          />,
+          <Tile
+            key="placeholder3"
+            title="placeholder"
+            imageProps={{ src: 'placeholder' }}
+            loading={true}
+          />,
+        ];
+      }
 
-    return children;
-  };
+      return children;
+    };
 
-  return (
-    <div
-      {...rest}
-      className={`${classes['tiles']} ${className ?? ''}`}
-      aria-live="polite"
-      aria-busy={loading}
-    >
-      {renderChildren()}
-    </div>
-  );
-};
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={`${classes['tiles']} ${className ?? ''}`}
+        aria-live="polite"
+        aria-busy={loading}
+      >
+        {renderChildren()}
+      </div>
+    );
+  }
+);

package/src/Tooltip/Tooltip.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tooltip, Props } from './Tooltip';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -70,3 +70,29 @@ describe('It opens the tooltip', () => {
     expect(tooltipHover).toHaveAttribute('aria-hidden', 'true');
   });
 });
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <Tooltip {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});