diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index c32f7cbb..8a70ad20 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -43,6 +43,7 @@ export type Stories = | 'AlertTitle' | 'AppBar' | 'AppShell' + | 'Autocomplete' | 'Avatar' | 'Backdrop' | 'Badge' @@ -163,6 +164,9 @@ const StoryConfig: StorybookConfig = { AppShell: { hierarchy: `${StorybookCategories.Layout}/App Shell`, }, + Autocomplete: { + hierarchy: `${StorybookCategories.Inputs}/Autocomplete`, + }, Avatar: { hierarchy: `${StorybookCategories.DataDisplay}/Avatar`, }, diff --git a/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx b/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx new file mode 100644 index 00000000..734a4900 --- /dev/null +++ b/packages/react/src/components/Autocomplete/Autocomplete.stories.mdx @@ -0,0 +1,100 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Autocomplete from './Autocomplete.tsx'; +import TextField from '../TextField'; + +export const meta = { + component: Autocomplete, + title: StoryConfig.Autocomplete.hierarchy, +}; + + + +export const Template = args => ; + +# Autocomplete + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Autocomplete is a conventional text input field that is improved with a panel displaying suggested choices. + +### Combination box + +The textbox's value needs to be chosen from a predefined set of allowed values. + + + + } + } + > + {Template.bind({})} + + + +#### Props + + + +### Multiple values + +This is also known as tags, this allows the user to enter more than one value. + + + , + multiple: true, + defaultValue: [ + { label: 'The Shawshank Redemption', year: 1994 }, + { label: 'The Godfather', year: 1972 } + ] + } + } + > + {Template.bind({})} + + + +#### Props + + + +## Usage + +Import and use the `Autocomplete` component in your components as follows. + + diff --git a/packages/react/src/components/Autocomplete/Autocomplete.tsx b/packages/react/src/components/Autocomplete/Autocomplete.tsx new file mode 100644 index 00000000..5191997b --- /dev/null +++ b/packages/react/src/components/Autocomplete/Autocomplete.tsx @@ -0,0 +1,45 @@ +/** + * 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 MuiAutocomplete, {AutocompleteProps as MuiAutocompleteProps} from '@mui/material/Autocomplete'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './autocomplete.scss'; + +export type AutocompleteProps = MuiAutocompleteProps; + +const COMPONENT_NAME: string = 'Autocomplete'; + +const Autocomplete: ForwardRefExoticComponent>> & WithWrapperProps = + forwardRef( + (props: AutocompleteProps>, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-autocomplete', className); + + return ; + }, + ) as ForwardRefExoticComponent>> & WithWrapperProps; + +Autocomplete.displayName = composeComponentDisplayName(COMPONENT_NAME); +Autocomplete.muiName = COMPONENT_NAME; +Autocomplete.defaultProps = {}; + +export default Autocomplete; diff --git a/packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx b/packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx new file mode 100644 index 00000000..63e586f4 --- /dev/null +++ b/packages/react/src/components/Autocomplete/__tests__/Autocomplete.test.tsx @@ -0,0 +1,63 @@ +/** + * 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 {AutocompleteRenderInputParams} from '@mui/material/Autocomplete/Autocomplete'; +import {render} from '@unit-testing'; +import {ReactNode} from 'react'; +import TextField from '../../TextField'; +import Autocomplete from '../Autocomplete'; + +describe('Alert', () => { + 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/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap new file mode 100644 index 00000000..838729e4 --- /dev/null +++ b/packages/react/src/components/Autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -0,0 +1,85 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Alert should match the snapshot 1`] = ` + +
+
+
+ +
+
+ +
+ +
+ +
+
+
+
+
+ +`; diff --git a/packages/react/src/components/Autocomplete/autocomplete.scss b/packages/react/src/components/Autocomplete/autocomplete.scss new file mode 100644 index 00000000..8bfddad7 --- /dev/null +++ b/packages/react/src/components/Autocomplete/autocomplete.scss @@ -0,0 +1,26 @@ +/** + * 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-autocomplete { + padding-top: 14px !important; + padding-bottom: 14px !important; + + .MuiButtonBase-root { + height: 32px !important; + } +} diff --git a/packages/react/src/components/Autocomplete/index.ts b/packages/react/src/components/Autocomplete/index.ts new file mode 100644 index 00000000..67d7bc98 --- /dev/null +++ b/packages/react/src/components/Autocomplete/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 './Autocomplete'; +export type {AutocompleteProps} from './Autocomplete'; diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index d2120445..50606fe7 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -17,6 +17,9 @@ */ .oxygen-chip { + font-size: 0.8571rem !important; + padding: 7px 3px !important; + &-premium { background: var(--oxygen-customComponents-Chip-properties-premium-background); color: var(--oxygen-customComponents-Chip-properties-premium-text-color); diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 64f78e67..119dd818 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -34,6 +34,9 @@ export * from './AppBar'; export {default as AppShell} from './AppShell'; export * from './AppShell'; +export {default as Autocomplete} from './Autocomplete'; +export * from './Autocomplete'; + export {default as Avatar} from './Avatar'; export * from './Avatar';