From 555ac95c316e9c8f2e0c20a8313ad146988af7b6 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 1 Jun 2023 19:46:59 +0100
Subject: [PATCH] Added WIP `IconButton` component

refs https://github.com/TryGhost/Team/issues/3351
---
 .../admin-x-ds/global/IconButton.stories.tsx   | 18 ++++++++++++++++++
 .../src/admin-x-ds/global/IconButton.tsx       | 17 +++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 ghost/admin-x-settings/src/admin-x-ds/global/IconButton.stories.tsx
 create mode 100644 ghost/admin-x-settings/src/admin-x-ds/global/IconButton.tsx

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/IconButton.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/IconButton.stories.tsx
new file mode 100644
index 0000000000..0c809b582e
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/IconButton.stories.tsx
@@ -0,0 +1,18 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import IconButton from './IconButton';
+
+const meta = {
+    title: 'Global / Icon Button',
+    component: IconButton,
+    tags: ['autodocs']
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Default: Story = {
+    args: {
+        iconName: 'menu-horizontal'
+    }
+};
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/IconButton.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/IconButton.tsx
new file mode 100644
index 0000000000..9f8efbdc62
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/IconButton.tsx
@@ -0,0 +1,17 @@
+import Icon from './Icon';
+import React from 'react';
+
+interface IconButtonProps {
+    iconName: string;
+}
+
+const IconButton: React.FC<IconButtonProps> = ({iconName}) => {
+    return (
+        <button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button">
+            <span className="sr-only">Open menu</span>
+            <Icon color="grey-900" name={iconName} />
+        </button>
+    );
+};
+
+export default IconButton;