Merge pull request #145 from 5app/grid-table

feat: New component SelectableTable, #143

.babelrc

@@ -1,5 +1,5 @@
 {
-	"presets": ["@babel/env"],
+	"presets": ["@babel/preset-env"],
 	"plugins": [
 		"@babel/transform-react-jsx",
 		"@babel/proposal-object-rest-spread",

.storybook/main.js

@@ -4,13 +4,13 @@ module.exports = {
 		'../src/**/*.stories.@(js|jsx|ts|tsx)',
 	],
 	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
 		{
 			name: '@storybook/addon-docs',
 			options: {
 				transcludeMarkdown: true,
 			},
 		},
+		'@storybook/addon-essentials',
+		'@storybook/addon-links',
 	],
 };

.storybook/preview.js

@@ -9,7 +9,7 @@ import theme from '../src/theme';
 import GlobalStyles from './GlobalStyles';
 
 const ThemeProvider = ({children}) => (
-	<ThemeSection name="page" baseTheme={theme}>
+	<ThemeSection name="card" baseTheme={theme}>
 		<GlobalStyles />
 		{children}
 	</ThemeSection>

jest.config.js

@@ -5,7 +5,6 @@ module.exports = {
 	testEnvironment: 'jsdom',
 	collectCoverageFrom: [
 		'**/*.{js}',
-		'!**/docz/**',
 		'!**/src-icons/**',
 		'!**/node_modules/**',
 		'!**/test/**',

package.json

@@ -42,13 +42,15 @@
 		"@commitlint/config-conventional": "^12.1.4",
 		"@semantic-release/changelog": "^5.0.0",
 		"@semantic-release/git": "^9.0.0",
-		"@storybook/addon-actions": "^6.2.9",
-		"@storybook/addon-essentials": "^6.2.9",
-		"@storybook/addon-links": "^6.2.9",
-		"@storybook/react": "^6.2.9",
+		"@storybook/addon-actions": "^6.3.4",
+		"@storybook/addon-essentials": "^6.3.4",
+		"@storybook/addon-links": "^6.3.4",
+		"@storybook/react": "^6.3.4",
 		"@testing-library/jest-dom": "^5.12.0",
 		"@testing-library/react": "^12.0.0",
+		"@testing-library/user-event": "^13.1.9",
 		"babel-eslint": "^10.1.0",
+		"babel-jest": "^27.0.6",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-styled-components": "^1.10.7",
 		"eslint": "^7.27.0",
@@ -66,6 +68,7 @@
 		"prop-types": "^15.7.2",
 		"react": "^17.0.0",
 		"react-dom": "^17.0.0",
+		"regenerator-runtime": "^0.13.7",
 		"semantic-release": "^17.4.3",
 		"styled-components": "^5.2.1"
 	},
@@ -76,16 +79,17 @@
 	},
 	"dependencies": {
 		"@popperjs/core": "^2.9.2",
-		"use-item-list": "0.1.2",
 		"aria-hidden": "^1.1.1",
 		"chartist": "^0.11.3",
 		"classnames": "^2.2.6",
 		"color2k": "^1.1.1",
 		"focus-visible": "^5.0.2",
+		"focusable-selectors": "^0.3.0",
 		"popper-max-size-modifier": "^0.2.0",
 		"react-focus-lock": "^2.3.1",
 		"react-merge-refs": "^1.0.0",
-		"react-popper": "^2.2.5"
+		"react-popper": "^2.2.5",
+		"use-item-list": "0.1.2"
 	},
 	"commitlint": {
 		"extends": [

src/ButtonCore/index.js

@@ -5,6 +5,8 @@ import classNames from 'classnames';
 
 import 'focus-visible';
 
+import {useTabIndexContext} from '../TabIndexContext';
+
 const Clickable = styled.button`
 	display: inline-block;
 	margin: 0;
@@ -73,9 +75,12 @@ const ButtonCore = forwardRef((props, ref) => {
 		disabled,
 		onClick: onClickProp,
 		className,
+		tabIndex,
 		...otherProps
 	} = props;
 
+	const tabIndexContext = useTabIndexContext();
+
 	const isDisabled = isDisabledProp || disabled;
 
 	const classes = classNames(className, {
@@ -119,6 +124,7 @@ const ButtonCore = forwardRef((props, ref) => {
 					? 'false'
 					: null
 			}
+			tabIndex={tabIndex || tabIndexContext}
 			onClick={onClick}
 			className={classes}
 		/>

src/ButtonCore/index.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {render, cleanup} from '@testing-library/react';
+import {render, cleanup, screen} from '@testing-library/react';
 import Wrapper from '../../test/helper/wrapper';
 import {ThemeSectionError} from '../ThemeSection';
 import ButtonCore from '.';
@@ -15,33 +15,67 @@ describe('ButtonCore', () => {
 		});
 	});
 
-	it('renders as a button by default', () => {
-		const {container} = render(
+	it('renders as a button by default, but can render as a link', () => {
+		const path = 'path/to/whatever';
+
+		render(
 			<Wrapper>
-				<ButtonCore id="ok">Ok</ButtonCore>
+				<ButtonCore>Button label</ButtonCore>
+				<ButtonCore as="a" href={path} target="_blank">
+					Regular Link label
+				</ButtonCore>
+				<ButtonCore as={RouterLink} to={path}>
+					Router Link label
+				</ButtonCore>
 			</Wrapper>
 		);
 
-		const ok = container.querySelector('#ok');
-		expect(ok.tagName).toBe('BUTTON');
+		screen.getByRole('button', {name: /Button label/});
+
+		const regularLink = screen.getByRole('link', {
+			name: /Regular Link label/,
+		});
+		expect(regularLink).toHaveAttribute('href', path);
+		expect(regularLink).toHaveAttribute('target', '_blank');
+
+		const routerLink = screen.getByRole('link', {
+			name: /Router Link label/,
+		});
+		expect(routerLink).toHaveAttribute('href', path);
 	});
 
-	it('can render as a RouterLink', () => {
-		const path = 'path/to/whatever';
-		const {container} = render(
+	it('can be disabled both as a button and a link', () => {
+		render(
 			<Wrapper>
-				<ButtonCore id="ok" as={RouterLink} to={path}>
-					Ok
+				<ButtonCore isDisabled>Disabled button</ButtonCore>
+				<ButtonCore
+					isDisabled
+					download
+					as="a"
+					href="http://example.com/download"
+					target="_blank"
+				>
+					Disabled link
 				</ButtonCore>
 			</Wrapper>
 		);
 
-		const ok = container.querySelector('#ok');
-		expect(ok.tagName).toBe('A');
-		expect(ok.href).toContain(path);
-	});
+		const button = screen.getByRole('button', {name: /Disabled button/});
 
-	it('can render as RouterLink', () => {
-		expect(true).toBe(true);
+		expect(button).toHaveAttribute('aria-disabled');
+		expect(button).not.toHaveAttribute('disabled');
+		expect(button).toHaveAttribute(
+			'class',
+			expect.stringContaining('is-disabled')
+		);
+
+		const regularLink = screen.getByText(/Disabled link/);
+		expect(regularLink).toHaveAttribute(
+			'class',
+			expect.stringContaining('is-disabled')
+		);
+		expect(regularLink).not.toHaveAttribute('href');
+		expect(regularLink).not.toHaveAttribute('target');
+		expect(regularLink).not.toHaveAttribute('download');
 	});
 });

src/Checkbox/index.js

@@ -12,6 +12,7 @@ import {
 } from '../utils';
 import {fillParent} from '../mixins';
 import Icon from '../Icon';
+import {useTabIndexContext} from '../TabIndexContext';
 
 const noop = () => {};
 
@@ -128,10 +129,12 @@ const Checkbox = forwardRef((props, ref) => {
 		onClick,
 		scale,
 		className,
+		tabIndex,
 		...otherProps
 	} = props;
 
 	const inputRef = useRef();
+	const tabIndexContext = useTabIndexContext();
 
 	useEffect(() => {
 		inputRef.current.indeterminate = indeterminate || false;
@@ -166,6 +169,7 @@ const Checkbox = forwardRef((props, ref) => {
 				indeterminate={indeterminate}
 				onChange={indeterminate ? noop : onChange}
 				onClick={handleClick}
+				tabIndex={tabIndex || tabIndexContext}
 				{...otherProps}
 			/>
 			<MockBox

src/Combobox/Combobox.js

@@ -11,6 +11,7 @@ import usePopover from '../usePopover';
 import usePopoverState from '../usePopoverState';
 import useUniqueId from '../useUniqueId';
 
+import {useTabIndexContext} from '../TabIndexContext';
 import Portal from '../Portal';
 import Status from '../Status';
 import VisuallyHidden from '../VisuallyHidden';
@@ -48,6 +49,7 @@ function Combobox({
 	const popoverRef = useRef();
 	const id = useUniqueId(idProp);
 	const statusMessage = getStatusMessage({resultCount, inputValue});
+	const tabIndexContext = useTabIndexContext();
 
 	const popover = usePopover({
 		ref: popoverRef,
@@ -141,7 +143,13 @@ function Combobox({
 
 	const highlightedItemId = itemList.useHighlightedItemId();
 
-	const getInputProps = ({onChange, onFocus, onKeyDown, ...otherProps}) => ({
+	const getInputProps = ({
+		onChange,
+		onFocus,
+		onKeyDown,
+		tabIndex,
+		...otherProps
+	}) => ({
 		...otherProps,
 		id,
 		value: inputValue,
@@ -153,6 +161,7 @@ function Combobox({
 		'aria-autocomplete': 'list',
 		autoComplete: 'off',
 		spellCheck: 'false',
+		tabIndex: tabIndex || tabIndexContext,
 		onKeyDown: mergeCallbacks(onKeyDown, handleInputKeyEvents),
 		onChange: mergeCallbacks(onChange, handleInputChange),
 		onFocus: mergeCallbacks(onFocus, () => {

src/Menu/README.stories.mdx

@@ -2,6 +2,7 @@ import {Meta, Story, Canvas, ArgsTable} from '@storybook/addon-docs/blocks';
 import LinkTo from '@storybook/addon-links/react';
 
 import {Menu, MenuButton, MenuList, MenuItem} from './';
+import Status from '../Status';
 
 <Meta title="Components/Menu" component={Menu} />
 

src/Select/Select.js

@@ -10,6 +10,7 @@ import usePopover from '../usePopover';
 import usePopoverState from '../usePopoverState';
 import useUniqueId from '../useUniqueId';
 
+import {useTabIndexContext} from '../TabIndexContext';
 import Button from '../Button';
 import * as MenuListUI from '../MenuList';
 import PopoverCard from '../PopoverCard';
@@ -31,6 +32,7 @@ function Select({
 	const popoverRef = useRef();
 	const [selectedItem, setSelectedItem] = useState();
 	const id = useUniqueId(idProp);
+	const tabIndexContext = useTabIndexContext();
 
 	const popover = usePopover({
 		ref: popoverRef,
@@ -122,7 +124,7 @@ function Select({
 				role="combobox"
 				ref={popover.setReferenceRef}
 				id={itemList.controllerId}
-				tabIndex="0"
+				tabIndex={tabIndexContext || '0'}
 				aria-labelledby={`${labelledById} ${itemList.controllerId}`}
 				aria-haspopup="listbox"
 				aria-autocomplete="none"

src/Switch/index.js

@@ -5,6 +5,7 @@ import styled, {css} from 'styled-components';
 import {alpha, contrast, getDimmedTextColor, pxToRem} from '../utils';
 
 import useMergedRefs from '../useMergedRefs';
+import {useTabIndexContext} from '../TabIndexContext';
 import OkIcon from '../icons/Ok';
 
 const Input = styled.input`
@@ -81,30 +82,34 @@ const SwitchIcon = styled(OkIcon)`
 		`}
 `;
 
-const Switch = forwardRef(({checked, disabled, id, ...otherProps}, ref) => {
-	const inputRef = useRef();
-	const mergedRefs = useMergedRefs([ref, inputRef]);
-
-	function forwardClick(e) {
-		inputRef.current.click(e);
+const Switch = forwardRef(
+	({checked, disabled, id, tabIndex, ...otherProps}, ref) => {
+		const inputRef = useRef();
+		const mergedRefs = useMergedRefs([ref, inputRef]);
+		const tabIndexContext = useTabIndexContext();
+
+		function forwardClick(e) {
+			inputRef.current.click(e);
+		}
+
+		return (
+			<Wrapper disabled={disabled} onClick={forwardClick}>
+				<Input
+					type="checkbox"
+					ref={mergedRefs}
+					id={id}
+					checked={checked}
+					disabled={disabled}
+					tabIndex={tabIndex || tabIndexContext}
+					{...otherProps}
+				/>
+				<Handle>
+					<SwitchIcon scale={0.8} checked={checked} />
+				</Handle>
+			</Wrapper>
+		);
 	}
-
-	return (
-		<Wrapper disabled={disabled} onClick={forwardClick}>
-			<Input
-				type="checkbox"
-				ref={mergedRefs}
-				id={id}
-				checked={checked}
-				disabled={disabled}
-				{...otherProps}
-			/>
-			<Handle>
-				<SwitchIcon scale={0.8} checked={checked} />
-			</Handle>
-		</Wrapper>
-	);
-});
+);
 
 Switch.displayName = 'Switch';