Feature/Action-Group (#535)

closes #479

---------

Co-authored-by: Sjimmie <[email protected]>
Co-authored-by: Adham AboHasson <[email protected]>

packages/storybook/src/community/action-group.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Rijkshuisstijl Community action group component

packages/storybook/src/community/action-group.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { ButtonGroup as ActionGroup } from '@utrecht/component-library-react';
+import { Button } from '@utrecht/component-library-react/dist/css-module';
+import readme from './action-group.md?raw';
+const meta = {
+  title: 'Rijkshuisstijl/ActionGroup',
+  id: 'rijkshuisstijl-action-group',
+  component: ActionGroup,
+  argTypes: {
+    direction: {
+      description: 'Layout of the button group',
+      control: 'select',
+      options: ['column', 'row'],
+    },
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} as Meta<typeof ActionGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof ActionGroup>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Button appearance="primary-action-button">Save and continue</Button>,
+      <Button appearance="secondary-action-button">Back</Button>,
+    ],
+  },
+  name: 'Default',
+};
+
+export const Column: Story = {
+  args: {
+    direction: 'column',
+    children: [
+      <Button appearance="primary-action-button">Save and continue</Button>,
+      <Button appearance="secondary-action-button">Back</Button>,
+    ],
+  },
+  name: 'Column',
+};