initial commit

packages/woocommerce-blocks/assets/js/base/components/tabs/index.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { withInstanceId } from '@wordpress/compose';
+import classnames from 'classnames';
+import { __ } from '@wordpress/i18n';
+import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab';
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Tabs = ( {
+	className,
+	onSelect = () => null,
+	tabs,
+	activeClass = 'is-active',
+	initialTabName,
+	ariaLabel = __( 'Tabbed Content', 'woocommerce' ),
+	instanceId,
+	id,
+} ) => {
+	const initialTab = initialTabName
+		? { selectedId: `${ instanceId }-${ initialTabName }` }
+		: undefined;
+	const tabState = useTabState( initialTab );
+	if ( tabs.length === 0 ) {
+		return null;
+	}
+	return (
+		<div className={ classnames( 'wc-block-components-tabs', className ) }>
+			<TabList
+				{ ...tabState }
+				id={ id }
+				className={ 'wc-block-components-tabs__list' }
+				aria-label={ ariaLabel }
+			>
+				{ tabs.map( ( { name, title, ariaLabel: tabAriaLabel } ) => (
+					<Tab
+						{ ...tabState }
+						id={ `${ instanceId }-${ name }` }
+						manual={ true }
+						className={ classnames(
+							'wc-block-components-tabs__item',
+							{
+								[ activeClass ]:
+									// reakit uses the ID as the selectedId
+									`${ instanceId }-${ name }` ===
+									tabState.selectedId,
+							}
+						) }
+						onClick={ () => onSelect( name ) }
+						type="button"
+						key={ name }
+						aria-label={ tabAriaLabel }
+					>
+						<span className="wc-block-components-tabs__item-content">
+							{ title }
+						</span>
+					</Tab>
+				) ) }
+			</TabList>
+
+			{ tabs.map( ( { name, content } ) => (
+				<TabPanel
+					{ ...tabState }
+					key={ name }
+					id={ `${ instanceId }-${ name }-view` }
+					tabId={ `${ instanceId }-${ name }` }
+					className="wc-block-components-tabs__content"
+				>
+					{ tabState.selectedId === `${ instanceId }-${ name }` &&
+						content }
+				</TabPanel>
+			) ) }
+		</div>
+	);
+};
+
+export default withInstanceId( Tabs );

packages/woocommerce-blocks/assets/js/base/components/tabs/style.scss

@@ -0,0 +1,60 @@
+.wc-block-components-tabs {
+	.wc-block-components-tabs__list {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 100%;
+		> .wc-block-components-tabs__item {
+			border: none;
+			flex: auto;
+			background: transparent;
+			padding: $gap-small $gap;
+			color: inherit;
+			outline-offset: -1px;
+			text-align: center;
+			transition: box-shadow 0.1s linear;
+			box-shadow: inset 0 -1px currentColor;
+			border-radius: 0;
+			&.is-active {
+				box-shadow: inset 0 -3px currentColor;
+				font-weight: 600;
+				position: relative;
+			}
+			&:focus {
+				outline-offset: -1px;
+				outline: 1px dotted currentColor;
+			}
+			&:hover,
+			&:active {
+				background: transparent;
+			}
+			.wc-block-components-tabs__item-content {
+				@include font-size(regular);
+				line-height: 1;
+				width: fit-content;
+				display: inline-block;
+				font-weight: bold;
+
+				> img,
+				> svg {
+					height: 1.2em;
+					vertical-align: middle;
+					margin: 0.2em 0 -0.2em;
+				}
+
+				.wc-block-components-payment-method-icons {
+					margin: 0.2em 0 -0.2em;
+
+					.wc-block-components-payment-method-icon {
+						height: 1.2em;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+	}
+	.wc-block-components-tabs__content {
+		padding: $gap 0;
+		text-transform: none;
+	}
+}