diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 276b502c..2e72b119 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -37,6 +37,7 @@ export type Stories = | 'ColorModeToggle' | 'Colors' | 'Grid' + | 'IconButton' | 'Icons' | 'Link' | 'List' @@ -96,6 +97,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 new file mode 100644 index 00000000..36a9cc97 --- /dev/null +++ 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, +}; + + + +export const Template = 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. + + + + ) + }}> + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `IconButton` component in your components as follows. + + + {/* SVG Icon */} + + ); +}`} +/> diff --git a/packages/react/src/components/IconButton/IconButton.tsx b/packages/react/src/components/IconButton/IconButton.tsx new file mode 100644 index 00000000..ffe21c2c --- /dev/null +++ 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 & WithWrapperProps = (props: IconButtonProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-icon-button', className); + + return ; +}; + +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 new file mode 100644 index 00000000..5d1d79b4 --- /dev/null +++ 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( + + + , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + + + , + ); + 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 new file mode 100644 index 00000000..b6d328b6 --- /dev/null +++ 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`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/IconButton/icon-button.scss b/packages/react/src/components/IconButton/icon-button.scss new file mode 100644 index 00000000..ed7b2b4d --- /dev/null +++ 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 new file mode 100644 index 00000000..d27b7a56 --- /dev/null +++ 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';