diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index edea7ef7..0997504e 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -77,6 +77,7 @@ export type Stories = | 'UserDropdownMenu' | 'Navbar' | 'OutlinedInput' + | 'Select' | 'SignIn' | 'Stepper' | 'Tab' @@ -249,6 +250,9 @@ const StoryConfig: StorybookConfig = { ListItemText: { hierarchy: `${StorybookCategories.DataDisplay}/List Item Text`, }, + Select: { + hierarchy: `${StorybookCategories.Inputs}/Select`, + }, SignIn: { hierarchy: `${StorybookCategories.Patterns}/Sign In`, }, diff --git a/packages/react/src/components/Select/Select.stories.mdx b/packages/react/src/components/Select/Select.stories.mdx new file mode 100644 index 00000000..b1fd5271 --- /dev/null +++ b/packages/react/src/components/Select/Select.stories.mdx @@ -0,0 +1,69 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import {useArgs} from '@storybook/client-api'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Select from './Select.tsx'; +import MenuItem from '../MenuItem'; + +export const meta = { + component: Select, + title: StoryConfig.Select.hierarchy, +}; + + + +export const Template = args => { + const [{open, anchor, onChange, label}, updateArgs] = useArgs(); + return ( + + ) +}; + +# Select + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `Select` component is used to create a select input. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Select` component in your components as follows. + + + Ten + Twenty + Thirty + + ); +}`} +/> diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx new file mode 100644 index 00000000..fada4c25 --- /dev/null +++ b/packages/react/src/components/Select/Select.tsx @@ -0,0 +1,57 @@ +/** + * 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 MuiSelect, {SelectProps as MuiSelectProps} from '@mui/material/Select'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Box from '../Box'; +import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel'; +import './select.scss'; + +export interface SelectProps extends MuiSelectProps { + InputLabelProps?: MuiInputLabelProps; +} + +const COMPONENT_NAME: string = 'Select'; + +const Select: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: SelectProps, ref: MutableRefObject): ReactElement => { + const {className, InputLabelProps, label, id, ...rest} = props; + + const classes: string = clsx('oxygen-select', className); + + return ( + + {label && ( + + {label} + + )} + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Select.displayName = composeComponentDisplayName(COMPONENT_NAME); +Select.muiName = COMPONENT_NAME; +Select.defaultProps = {}; + +export default Select; diff --git a/packages/react/src/components/Select/__tests__/Select.test.tsx b/packages/react/src/components/Select/__tests__/Select.test.tsx new file mode 100644 index 00000000..fba25597 --- /dev/null +++ b/packages/react/src/components/Select/__tests__/Select.test.tsx @@ -0,0 +1,32 @@ +/** + * 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 {render} from '@unit-testing'; +import Select from '../Select'; + +describe('Select', () => { + it('should render successfully', () => { + const {baseElement} = render(); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap new file mode 100644 index 00000000..2d97e3cc --- /dev/null +++ b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Select should match the snapshot 1`] = ` + +
+
+
+ + + + +
+
+
+ +`; diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/Select/index.ts new file mode 100644 index 00000000..3f39c83e --- /dev/null +++ b/packages/react/src/components/Select/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 './Select'; +export type {SelectProps} from './Select'; diff --git a/packages/react/src/components/Select/select.scss b/packages/react/src/components/Select/select.scss new file mode 100644 index 00000000..78b09832 --- /dev/null +++ b/packages/react/src/components/Select/select.scss @@ -0,0 +1,21 @@ +/** + * 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-select { + /* Add Styles */ +}