Feat(web-react): Introduce ActionLayout component #DS-1309

packages/web-react/scripts/entryPoints.js

@@ -45,6 +45,7 @@ const entryPoints = [
   { dirs: ['components', 'TextFieldBase'] },
   { dirs: ['components', 'Toast'] },
   { dirs: ['components', 'Tooltip'] },
+  { dirs: ['components', 'UNSTABLE_ActionLayout'] },
   { dirs: ['components', 'UNSTABLE_Avatar'] },
   { dirs: ['components', 'UNSTABLE_Divider'] },
   { dirs: ['components', 'UNSTABLE_Slider'] },

packages/web-react/src/components/UNSTABLE_ActionLayout/README.md

@@ -0,0 +1,4 @@
+# UNSTABLE ActionLayout
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.

packages/web-react/src/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import React, { ReactElement } from 'react';
+import { useStyleProps } from '../../hooks';
+import { SpiritActionLayoutProps } from '../../types/actionLayout';
+import { useActionLayoutStyleProps } from './useActionLayoutStyleProps';
+
+export const UNSTABLE_ActionLayout = (props: SpiritActionLayoutProps): ReactElement => {
+  const { children, ...restProps } = props;
+  const { classProps, props: modifiedProps } = useActionLayoutStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  return (
+    <div {...otherProps} className={classNames(classProps.root, styleProps.className)} style={styleProps.style}>
+      {children}
+    </div>
+  );
+};
+
+export default UNSTABLE_ActionLayout;

packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/UNSTABLE_ActionLayout.test.tsx

@@ -0,0 +1,27 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import UNSTABLE_ActionLayout from '../UNSTABLE_ActionLayout';
+
+describe('UNSTABLE_ActionLayout', () => {
+  classNamePrefixProviderTest(UNSTABLE_ActionLayout, 'UNSTABLE_ActionLayout');
+
+  stylePropsTest(UNSTABLE_ActionLayout);
+
+  restPropsTest(UNSTABLE_ActionLayout, 'div');
+
+  beforeEach(() => {
+    render(<UNSTABLE_ActionLayout>Content</UNSTABLE_ActionLayout>);
+  });
+
+  it('should render content', () => {
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('should render children', () => {
+    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_ActionLayout');
+  });
+});

packages/web-react/src/components/UNSTABLE_ActionLayout/__tests__/useActionLayoutStyleProps.test.ts

@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react';
+import { useActionLayoutStyleProps } from '../useActionLayoutStyleProps';
+
+describe('useActionLayoutStyleProps', () => {
+  it('should return defaults', () => {
+    const props = {};
+    const { result } = renderHook(() => useActionLayoutStyleProps(props));
+
+    expect(result.current.classProps.root).toBe('UNSTABLE_ActionLayout');
+  });
+});

packages/web-react/src/components/UNSTABLE_ActionLayout/demo/ActionLayoutDefault.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonLink } from '../../Button';
+import { UNSTABLE_ActionLayout } from '../index';
+
+const ActionLayoutDefault = () => (
+  <UNSTABLE_ActionLayout>
+    <ButtonLink color="primary" href="#">
+      Primary Action
+    </ButtonLink>
+    <ButtonLink color="secondary" href="#">
+      Secondary Action
+    </ButtonLink>
+  </UNSTABLE_ActionLayout>
+);
+
+export default ActionLayoutDefault;

packages/web-react/src/components/UNSTABLE_ActionLayout/demo/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import DocsSection from '../../../../docs/DocsSections';
+import ActionLayoutDefault from './ActionLayoutDefault';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <DocsSection title="Default" stackAlignment="stretch">
+      <ActionLayoutDefault />
+    </DocsSection>
+  </React.StrictMode>,
+);

packages/web-react/src/components/UNSTABLE_ActionLayout/index.html

@@ -0,0 +1 @@
+{{> web-react/demo}}

packages/web-react/src/components/UNSTABLE_ActionLayout/index.ts

@@ -0,0 +1,3 @@
+export { default as UNSTABLE_ActionLayout } from './UNSTABLE_ActionLayout';
+export * from './UNSTABLE_ActionLayout';
+export * from './useActionLayoutStyleProps';

packages/web-react/src/components/UNSTABLE_ActionLayout/stories/UNSTABLE_ActionLayout.stories.tsx

@@ -0,0 +1,36 @@
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ButtonLink } from '../../Button';
+import ReadMe from '../README.md';
+import { UNSTABLE_ActionLayout } from '..';
+
+const meta: Meta<typeof UNSTABLE_ActionLayout> = {
+  title: 'Experimental/UNSTABLE_ActionLayout',
+  component: UNSTABLE_ActionLayout,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {},
+  args: {
+    children: (
+      <>
+        <ButtonLink color="primary" href="/">
+          Primary Action
+        </ButtonLink>
+        <ButtonLink color="secondary" href="/">
+          Secondary Action
+        </ButtonLink>
+      </>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UNSTABLE_ActionLayout>;
+
+export const Playground: Story = {
+  name: 'UNSTABLE_ActionLayout',
+};

packages/web-react/src/components/UNSTABLE_ActionLayout/useActionLayoutStyleProps.ts

@@ -0,0 +1,20 @@
+import { useClassNamePrefix } from '../../hooks';
+import { SpiritActionLayoutProps } from '../../types/actionLayout';
+
+export interface ActionLayoutStyles<T> {
+  classProps: {
+    root: string;
+  };
+  props: T;
+}
+
+export function useActionLayoutStyleProps(props: SpiritActionLayoutProps): ActionLayoutStyles<SpiritActionLayoutProps> {
+  const actionLayoutClass = useClassNamePrefix('UNSTABLE_ActionLayout');
+
+  return {
+    classProps: {
+      root: actionLayoutClass,
+    },
+    props,
+  };
+}

packages/web-react/src/types/actionLayout.ts

@@ -0,0 +1,3 @@
+import { ChildrenProps, StyleProps } from './shared';
+
+export interface SpiritActionLayoutProps extends ChildrenProps, StyleProps {}