feat(react): add IconButton component

wso2 · Feb 12, 2023 · 3730411 · 3730411
1 parent 7e8af1d
commit 3730411
Show file tree

Hide file tree

Showing 7 changed files with 234 additions and 0 deletions.
diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
@@ -36,6 +36,7 @@ export type Stories =
   | 'ColorModeToggle'
   | 'Colors'
   | 'Grid'
+  | 'IconButton'
   | 'Icons'
   | 'Link'
   | 'List'
@@ -91,6 +92,9 @@ const StoryConfig: StorybookConfig = {
   Grid: {
     hierarchy: `${StorybookCategories.Layout}/Grid`,
   },
+  IconButton: {
+    hierarchy: `${StorybookCategories.Inputs}/Icon Button`,
+  },
   Icons: {
     hierarchy: `${StorybookCategories.Icons}/Icons`,
   },

diff --git a/packages/react/src/components/IconButton/IconButton.stories.mdx b/packages/react/src/components/IconButton/IconButton.stories.mdx
@@ -0,0 +1,59 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {PowerIcon} from '@oxygen-ui/react-icons';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import IconButton from './IconButton.tsx';
+
+export const meta = {
+  component: IconButton,
+  title: StoryConfig.IconButton.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <IconButton {...args} />;
+
+# IconButton
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Icon buttons are commonly found in app bars and toolbars.
+
+Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
+
+<Canvas>
+  <Story name="Overview" args={{
+    children: (
+      <PowerIcon />
+    )
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `IconButton` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import IconButton from '@oxygen-ui/react/IconButton';\n
+function Demo() {
+  return (
+    <IconButton>
+      {/* SVG Icon */}
+    </IconButton>
+  );
+}`}
+/>
diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiIconButton, {IconButtonProps as MuiIconButtonProps} from '@mui/material/IconButton';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type IconButtonProps = MuiIconButtonProps;
+
+const COMPONENT_NAME: string = 'IconButton';
+
+const IconButton: FC<IconButtonProps> & WithWrapperProps = (props: IconButtonProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-icon-button', className);
+
+  return <MuiIconButton className={classes} {...rest} />;
+};
+
+IconButton.displayName = composeComponentDisplayName(COMPONENT_NAME);
+IconButton.muiName = COMPONENT_NAME;
+IconButton.defaultProps = {};
+
+export default IconButton;
diff --git a/packages/react/src/components/IconButton/__tests__/IconButton.test.tsx b/packages/react/src/components/IconButton/__tests__/IconButton.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {PowerIcon} from '@oxygen-ui/react-icons';
+import {render} from '@unit-testing';
+import IconButton from '../IconButton';
+
+describe('IconButton', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <IconButton>
+        <PowerIcon />
+      </IconButton>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <IconButton>
+        <PowerIcon />
+      </IconButton>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/components/IconButton/__tests__/__snapshots__/IconButton.test.tsx.snap b/packages/react/src/components/IconButton/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton should match the snapshot 1`] = `
+<body>
+  <div>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium oxygen-icon-button css-lku9zg-MuiButtonBase-root-MuiIconButton-root"
+      tabindex="0"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="oxygen-icon oxygen-icon-power"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        role="img"
+        style="display: inline-block; overflow: visible; user-select: none; vertical-align: text-bottom;"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <g
+          clip-path="url(#clip0_1480_555)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M8.6678 0.666667C8.6678 0.298476 8.36932 0 8.00113 0C7.63294 0 7.33446 0.298476 7.33446 0.666667V6.16683C7.33446 6.53501 7.63294 6.83349 8.00113 6.83349C8.36932 6.83349 8.6678 6.53501 8.6678 6.16683V0.666667ZM3.28602 12.7142C0.682438 10.1106 0.682438 5.88938 3.28602 3.2858C3.54636 3.02545 3.54636 2.60334 3.28602 2.34299C3.02567 2.08264 2.60356 2.08264 2.34321 2.34299C-0.781069 5.46727 -0.781069 10.5327 2.34321 13.657C5.46748 16.7812 10.533 16.7812 13.6572 13.657C16.7815 10.5327 16.7815 5.46726 13.6572 2.34299C13.3969 2.08264 12.9748 2.08264 12.7144 2.34299C12.454 2.60334 12.454 3.02545 12.7144 3.2858C15.318 5.88938 15.318 10.1106 12.7144 12.7142C10.1108 15.3178 5.8896 15.3178 3.28602 12.7142Z"
+            fill="#CBCEDB"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="clip0_1480_555"
+          >
+            <rect
+              fill="white"
+              height="16"
+              width="16"
+            />
+          </clippath>
+        </defs>
+      </svg>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/IconButton/icon-button.scss b/packages/react/src/components/IconButton/icon-button.scss
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-icon-button {}
diff --git a/packages/react/src/components/IconButton/index.ts b/packages/react/src/components/IconButton/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './IconButton';
+export type {IconButtonProps} from './IconButton';