Feat(web-react): Introduce ActionGroup component #DS-1621

packages/web-react/scripts/entryPoints.js

@@ -11,6 +11,7 @@ const entryPoints = [
   { dirs: ['utils'] },
   { dirs: ['components'] },
   { dirs: ['components', 'Accordion'] },
+  { dirs: ['components', 'ActionGroup'] },
   { dirs: ['components', 'Alert'] },
   { dirs: ['components', 'Breadcrumbs'] },
   { dirs: ['components', 'Box'] },

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

@@ -0,0 +1,36 @@
+'use client';
+
+import classNames from 'classnames';
+import React, { ReactElement } from 'react';
+import { AlignmentX, DirectionExtended } from '../../constants';
+import { useStyleProps } from '../../hooks';
+import { SpiritActionGroupProps } from '../../types';
+import { Flex } from '../Flex';
+import { useActionGroupStyleProps } from './useActionGroupStyleProps';
+
+const defaultProps: Partial<SpiritActionGroupProps> = {
+  alignmentX: AlignmentX.LEFT,
+  direction: {
+    mobile: DirectionExtended.VERTICAL,
+    tablet: DirectionExtended.HORIZONTAL_REVERSE,
+  },
+};
+
+const ActionGroup = (props: SpiritActionGroupProps): ReactElement => {
+  const { children, ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...restProps };
+  const { classProps, props: modifiedProps } = useActionGroupStyleProps(propsWithDefaults);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  return (
+    <Flex
+      {...otherProps}
+      UNSAFE_className={classNames(styleProps.className, classProps.root)}
+      UNSAFE_style={styleProps.style}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export default ActionGroup;

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

@@ -0,0 +1,30 @@
+# ActionGroup
+
+ActionGroup component is a container component that is used to position action components in a predefined layout.
+
+- For desktop and tablet views, actions are positioned in a horizontal direction with reverse order.
+- For mobile view, actions are positioned in a vertical layout and are stretched to the full width of the container.
+
+```jsx
+<ActionGroup>
+  <!-- Actions components goes here -->
+</ActionGroup>
+```
+
+## Full Example
+
+```jsx
+<ActionGroup>
+  <ButtonLink href="#" color="primary">
+    Primary Action
+  </ButtonLink>
+  <ButtonLink href="#" color="secondary">
+    Secondary Action
+  </ButtonLink>
+</ActionGroup>
+```
+
+This component uses the `Flex` component internally.
+For more customization options, refer to the props available in the [Flex documentation][web-react-flex-documentation].
+
+[web-react-flex-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Flex/README.md

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

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
+import ActionGroup from '../ActionGroup';
+
+describe('ActionGroup', () => {
+  const text = 'Hello world';
+  const testId = 'action-group-test-id';
+
+  classNamePrefixProviderTest(ActionGroup, 'ActionGroup');
+
+  stylePropsTest(ActionGroup);
+
+  restPropsTest(ActionGroup, 'div');
+
+  it('should render text children', () => {
+    render(<ActionGroup data-testid={testId}>{text}</ActionGroup>);
+
+    expect(screen.getByText(text)).toBeInTheDocument();
+    expect(screen.getByTestId(testId)).toHaveClass(
+      'Flex Flex--noWrap Flex--alignmentXLeft Flex--alignmentYStretch Flex--vertical Flex--tablet--horizontalReverse ActionGroup',
+    );
+  });
+
+  it('should transfer props to Flex', () => {
+    render(
+      <ActionGroup
+        data-testid={testId}
+        direction="vertical"
+        alignmentX="right"
+        alignmentY="center"
+        spacing="space-100"
+        isWrapping
+      >
+        {text}
+      </ActionGroup>,
+    );
+
+    const element = screen.getByTestId(testId);
+
+    expect(screen.getByText(text)).toBeInTheDocument();
+    expect(element).toHaveClass(
+      'Flex Flex--wrap Flex--alignmentXRight Flex--alignmentYCenter Flex--vertical ActionGroup',
+    );
+    expect(element).toHaveStyle({
+      '--flex-spacing-x': 'var(--spirit-space-100)',
+      '--flex-spacing-y': 'var(--spirit-space-100)',
+    });
+  });
+});

packages/web-react/src/components/ActionGroup/__tests__/useActionGroupStyleProps.test.ts

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

packages/web-react/src/components/ActionGroup/demo/Basic.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const BasicLayout = () => {
+  return (
+    <ActionGroup>
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default BasicLayout;

packages/web-react/src/components/ActionGroup/demo/CustomHorizontalSpacing.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const CustomHorizontalSpacing = () => {
+  return (
+    <ActionGroup spacingX="space-1200">
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default CustomHorizontalSpacing;

packages/web-react/src/components/ActionGroup/demo/CustomVerticalSpacing.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const CustomVerticalSpacing = () => {
+  return (
+    <ActionGroup direction="vertical" spacingY="space-1200">
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default CustomVerticalSpacing;

packages/web-react/src/components/ActionGroup/demo/HorizontalAlignment.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const HorizontalAlignment = () => {
+  return (
+    <>
+      <ActionGroup alignmentX="left">
+        <ButtonLink href="#" color="primary">
+          Primary Action
+        </ButtonLink>
+        <ButtonLink href="#" color="secondary">
+          Secondary Action
+        </ButtonLink>
+        <ButtonLink href="#" color="tertiary">
+          Tertiary Action
+        </ButtonLink>
+      </ActionGroup>
+      <ActionGroup alignmentX="center">
+        <ButtonLink href="#" color="primary">
+          Primary Action
+        </ButtonLink>
+        <ButtonLink href="#" color="secondary">
+          Secondary Action
+        </ButtonLink>
+        <ButtonLink href="#" color="tertiary">
+          Tertiary Action
+        </ButtonLink>
+      </ActionGroup>
+      <ActionGroup alignmentX="right">
+        <ButtonLink href="#" color="primary">
+          Primary Action
+        </ButtonLink>
+        <ButtonLink href="#" color="secondary">
+          Secondary Action
+        </ButtonLink>
+        <ButtonLink href="#" color="tertiary">
+          Tertiary Action
+        </ButtonLink>
+      </ActionGroup>
+    </>
+  );
+};
+
+export default HorizontalAlignment;

packages/web-react/src/components/ActionGroup/demo/HorizontalLayout.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const HorizontalLayout = () => {
+  return (
+    <ActionGroup direction="horizontal">
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default HorizontalLayout;

packages/web-react/src/components/ActionGroup/demo/HorizontalReverseLayout.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const HorizontalReverseLayout = () => {
+  return (
+    <ActionGroup direction="horizontal-reverse">
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default HorizontalReverseLayout;

packages/web-react/src/components/ActionGroup/demo/ResponsiveCustomHorizontalSpacing.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const ResponsiveCustomHorizontalSpacing = () => {
+  return (
+    <ActionGroup spacingX={{ mobile: 'space-700', tablet: 'space-1200' }}>
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default ResponsiveCustomHorizontalSpacing;

packages/web-react/src/components/ActionGroup/demo/ResponsiveCustomVerticalSpacing.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const ResponsiveCustomVerticalSpacing = () => {
+  return (
+    <ActionGroup direction="vertical" spacingY={{ mobile: 'space-700', tablet: 'space-1200' }}>
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default ResponsiveCustomVerticalSpacing;

packages/web-react/src/components/ActionGroup/demo/ResponsiveHorizontalAlignment.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const ResponsiveHorizontalAlignment = () => {
+  return (
+    <ActionGroup alignmentX={{ mobile: 'right', tablet: 'center', desktop: 'left' }}>
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default ResponsiveHorizontalAlignment;

packages/web-react/src/components/ActionGroup/demo/ResponsiveHorizontalReverseLayout.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonLink } from '../../ButtonLink';
+import ActionGroup from '../ActionGroup';
+
+const ResponsiveHorizontalReverseLayout = () => {
+  return (
+    <ActionGroup direction={{ mobile: 'horizontal-reverse', tablet: 'horizontal', desktop: 'horizontal' }}>
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="tertiary">
+        Tertiary Action
+      </ButtonLink>
+    </ActionGroup>
+  );
+};
+
+export default ResponsiveHorizontalReverseLayout;