diff --git a/packages/primitives/src/icons/double-circle-16.svg b/packages/primitives/src/icons/double-circle-16.svg new file mode 100644 index 00000000..1f64e80d --- /dev/null +++ b/packages/primitives/src/icons/double-circle-16.svg @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/primitives/src/icons/visibility-16.svg b/packages/primitives/src/icons/visibility-16.svg new file mode 100644 index 00000000..4b7fae9d --- /dev/null +++ b/packages/primitives/src/icons/visibility-16.svg @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/packages/primitives/src/icons/visibility-off-16.svg b/packages/primitives/src/icons/visibility-off-16.svg new file mode 100644 index 00000000..96cf5649 --- /dev/null +++ b/packages/primitives/src/icons/visibility-off-16.svg @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index a4849194..875ec8ee 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -54,11 +54,15 @@ export type Stories = | 'Divider' | 'Drawer' | 'Footer' + | 'FormHelperText' + | 'FormControl' | 'Grid' | 'Header' | 'IconButton' | 'Icons' | 'Image' + | 'Input' + | 'InputLabel' | 'LinearProgress' | 'Link' | 'List' @@ -71,6 +75,7 @@ export type Stories = | 'MenuItem' | 'UserDropdownMenu' | 'Navbar' + | 'OutlinedInput' | 'SignIn' | 'Stepper' | 'TextField' @@ -166,6 +171,12 @@ const StoryConfig: StorybookConfig = { Footer: { hierarchy: `${StorybookCategories.Navigation}/Footer`, }, + FormHelperText: { + hierarchy: `${StorybookCategories.Inputs}/Form Helper Text`, + }, + FormControl: { + hierarchy: `${StorybookCategories.Inputs}/Form Control`, + }, Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, @@ -183,6 +194,12 @@ const StoryConfig: StorybookConfig = { Image: { hierarchy: `${StorybookCategories.DataDisplay}/Image`, }, + Input: { + hierarchy: `${StorybookCategories.Inputs}/Input`, + }, + InputLabel: { + hierarchy: `${StorybookCategories.Inputs}/Input Label`, + }, IconButton: { hierarchy: `${StorybookCategories.Inputs}/Icon Button`, }, @@ -204,6 +221,9 @@ const StoryConfig: StorybookConfig = { Navbar: { hierarchy: `${StorybookCategories.Navigation}/Navbar`, }, + OutlinedInput: { + hierarchy: `${StorybookCategories.Inputs}/Outlined Input`, + }, List: { hierarchy: `${StorybookCategories.DataDisplay}/List`, }, diff --git a/packages/react/src/components/FormControl/FormControl.stories.mdx b/packages/react/src/components/FormControl/FormControl.stories.mdx new file mode 100644 index 00000000..235cc57c --- /dev/null +++ b/packages/react/src/components/FormControl/FormControl.stories.mdx @@ -0,0 +1,99 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import FormControl from './FormControl.tsx'; +import InputLabel from '../InputLabel'; +import Input from '../Input'; + +export const meta = { + component: FormControl, + title: StoryConfig.FormControl.hierarchy, +}; + + + +export const Template = args => { + return ( + + Form Input Label + + + + ) +} + +# Form Control + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +Used to apply a common state to form inputs; `FormLabel`, `FormHelperText`, `Input`, `InputLabel`. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `FormControl` component in your components as follows. + + + +## Variants + +### Color + +#### Primary + + + + {Template.bind({})} + + + +#### Secondary + + + + {Template.bind({})} + + + +### Error + + + + {Template.bind({})} + + + +### Focused + + + + {Template.bind({})} + + + +### Disabled + + + + {Template.bind({})} + + diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx new file mode 100644 index 00000000..29f09f29 --- /dev/null +++ b/packages/react/src/components/FormControl/FormControl.tsx @@ -0,0 +1,46 @@ +/** + * 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 MuiFormControl, {FormControlProps as MuiFormControlProps} from '@mui/material/FormControl'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './form-control.scss'; + +export type FormControlProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'FormControl'; + +const FormControl: FC & WithWrapperProps = ( + props: FormControlProps, +): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-form-control', className); + + return ; +}; + +FormControl.displayName = composeComponentDisplayName(COMPONENT_NAME); +FormControl.muiName = COMPONENT_NAME; +FormControl.defaultProps = {}; + +export default FormControl; diff --git a/packages/react/src/components/FormControl/__test__/FormControl.test.tsx b/packages/react/src/components/FormControl/__test__/FormControl.test.tsx new file mode 100644 index 00000000..37ae54eb --- /dev/null +++ b/packages/react/src/components/FormControl/__test__/FormControl.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 FormControl from '../FormControl'; + +describe('FormControl', () => { + 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/FormControl/__test__/__snapshots__/FormControl.test.tsx.snap b/packages/react/src/components/FormControl/__test__/__snapshots__/FormControl.test.tsx.snap new file mode 100644 index 00000000..f370a7e9 --- /dev/null +++ b/packages/react/src/components/FormControl/__test__/__snapshots__/FormControl.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormControl should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/FormControl/form-control.scss b/packages/react/src/components/FormControl/form-control.scss new file mode 100644 index 00000000..e0f7c5b6 --- /dev/null +++ b/packages/react/src/components/FormControl/form-control.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-form-control { + /* Add Styles */ +} diff --git a/packages/react/src/components/FormControl/index.ts b/packages/react/src/components/FormControl/index.ts new file mode 100644 index 00000000..0b3076a3 --- /dev/null +++ b/packages/react/src/components/FormControl/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 './FormControl'; +export type {FormControlProps} from './FormControl'; diff --git a/packages/react/src/components/FormHelperText/FormHelperText.stories.mdx b/packages/react/src/components/FormHelperText/FormHelperText.stories.mdx new file mode 100644 index 00000000..83c1ef2c --- /dev/null +++ b/packages/react/src/components/FormHelperText/FormHelperText.stories.mdx @@ -0,0 +1,52 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import FormHelperText from './FormHelperText.tsx'; + +export const meta = { + component: FormHelperText, + title: StoryConfig.FormHelperText.hierarchy, +}; + + + +export const Template = args => + +# Form Helper Text + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use `FormHelperText` to get data from the user. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `FormHelperText` component in your components as follows. + + + {/* Helper Text */} + + ); +}`} +/> diff --git a/packages/react/src/components/FormHelperText/FormHelperText.tsx b/packages/react/src/components/FormHelperText/FormHelperText.tsx new file mode 100644 index 00000000..7d217723 --- /dev/null +++ b/packages/react/src/components/FormHelperText/FormHelperText.tsx @@ -0,0 +1,46 @@ +/** + * 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 MuiFormHelperText, {FormHelperTextProps as MuiFormHelperTextProps} from '@mui/material/FormHelperText'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './form-helper-text.scss'; + +export type FormHelperTextProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'FormHelperText'; + +const FormHelperText: FC & WithWrapperProps = ( + props: FormHelperTextProps, +): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-form-helper-text', className); + + return ; +}; + +FormHelperText.displayName = composeComponentDisplayName(COMPONENT_NAME); +FormHelperText.muiName = COMPONENT_NAME; +FormHelperText.defaultProps = {}; + +export default FormHelperText; diff --git a/packages/react/src/components/FormHelperText/__test__/FormHelperText.test.tsx b/packages/react/src/components/FormHelperText/__test__/FormHelperText.test.tsx new file mode 100644 index 00000000..38fd7e90 --- /dev/null +++ b/packages/react/src/components/FormHelperText/__test__/FormHelperText.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 FormHelperText from '../FormHelperText'; + +describe('FormHelperText', () => { + 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/FormHelperText/__test__/__snapshots__/FormHelperText.test.tsx.snap b/packages/react/src/components/FormHelperText/__test__/__snapshots__/FormHelperText.test.tsx.snap new file mode 100644 index 00000000..ea8df8ea --- /dev/null +++ b/packages/react/src/components/FormHelperText/__test__/__snapshots__/FormHelperText.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormHelperText should match the snapshot 1`] = ` + +
+

+

+ +`; diff --git a/packages/react/src/components/FormHelperText/form-helper-text.scss b/packages/react/src/components/FormHelperText/form-helper-text.scss new file mode 100644 index 00000000..ba5bf665 --- /dev/null +++ b/packages/react/src/components/FormHelperText/form-helper-text.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-form-helper-text { + /* Add Styles */ +} diff --git a/packages/react/src/components/FormHelperText/index.ts b/packages/react/src/components/FormHelperText/index.ts new file mode 100644 index 00000000..9281e6bf --- /dev/null +++ b/packages/react/src/components/FormHelperText/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 './FormHelperText'; +export type {FormHelperTextProps} from './FormHelperText'; diff --git a/packages/react/src/components/Input/Input.stories.mdx b/packages/react/src/components/Input/Input.stories.mdx new file mode 100644 index 00000000..d8990fe1 --- /dev/null +++ b/packages/react/src/components/Input/Input.stories.mdx @@ -0,0 +1,44 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Input from './Input.tsx'; + +export const meta = { + component: Input, + title: StoryConfig.Input.hierarchy, +}; + + + +export const Template = args => + +# Input + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use `Input` to get data from the user. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Input` component in your components as follows. + + diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx new file mode 100644 index 00000000..248592cc --- /dev/null +++ b/packages/react/src/components/Input/Input.tsx @@ -0,0 +1,42 @@ +/** + * 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 MuiInput, {InputProps as MuiInputProps} from '@mui/material/Input'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './input.scss'; + +export type InputProps = MuiInputProps; + +const COMPONENT_NAME: string = 'Input'; + +const Input: FC & WithWrapperProps = (props: InputProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-input', className); + + return ; +}; + +Input.displayName = composeComponentDisplayName(COMPONENT_NAME); +Input.muiName = COMPONENT_NAME; +Input.defaultProps = {}; + +export default Input; diff --git a/packages/react/src/components/Input/__test__/Input.test.tsx b/packages/react/src/components/Input/__test__/Input.test.tsx new file mode 100644 index 00000000..05022a56 --- /dev/null +++ b/packages/react/src/components/Input/__test__/Input.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 Input from '../Input'; + +describe('Input', () => { + 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/Input/__test__/__snapshots__/Input.test.tsx.snap b/packages/react/src/components/Input/__test__/__snapshots__/Input.test.tsx.snap new file mode 100644 index 00000000..6fc6b6dd --- /dev/null +++ b/packages/react/src/components/Input/__test__/__snapshots__/Input.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Input should match the snapshot 1`] = ` + +
+
+ +
+
+ +`; diff --git a/packages/react/src/components/Input/index.ts b/packages/react/src/components/Input/index.ts new file mode 100644 index 00000000..8d6c8eff --- /dev/null +++ b/packages/react/src/components/Input/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 './Input'; +export type {InputProps} from './Input'; diff --git a/packages/react/src/components/Input/input.scss b/packages/react/src/components/Input/input.scss new file mode 100644 index 00000000..263795dd --- /dev/null +++ b/packages/react/src/components/Input/input.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-input { + /* Add Styles */ +} diff --git a/packages/react/src/components/InputLabel/InputLabel.stories.mdx b/packages/react/src/components/InputLabel/InputLabel.stories.mdx new file mode 100644 index 00000000..5f9d02db --- /dev/null +++ b/packages/react/src/components/InputLabel/InputLabel.stories.mdx @@ -0,0 +1,48 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import InputLabel from './InputLabel.tsx'; + +export const meta = { + component: InputLabel, + title: StoryConfig.InputLabel.hierarchy, +}; + + + +export const Template = args => ; + +# Input Label + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Elements that allows users to edit text on interfaces. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `InputLabel` component in your components as follows. + +; +}`} +/> diff --git a/packages/react/src/components/InputLabel/InputLabel.tsx b/packages/react/src/components/InputLabel/InputLabel.tsx new file mode 100644 index 00000000..12b89268 --- /dev/null +++ b/packages/react/src/components/InputLabel/InputLabel.tsx @@ -0,0 +1,42 @@ +/** + * 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 MuiInputLabel, {InputLabelProps as MuiInputLabelProps} from '@mui/material/InputLabel'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './input-label.scss'; + +export type InputLabelProps = MuiInputLabelProps; + +const COMPONENT_NAME: string = 'InputLabel'; + +const InputLabel: FC & WithWrapperProps = (props: InputLabelProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-input-label', className); + + return ; +}; + +InputLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); +InputLabel.muiName = COMPONENT_NAME; +InputLabel.defaultProps = {}; + +export default InputLabel; diff --git a/packages/react/src/components/InputLabel/__test__/InputLabel.test.tsx b/packages/react/src/components/InputLabel/__test__/InputLabel.test.tsx new file mode 100644 index 00000000..b493f12e --- /dev/null +++ b/packages/react/src/components/InputLabel/__test__/InputLabel.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 InputLabel from '../InputLabel'; + +describe('InputLabel', () => { + 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/InputLabel/__test__/__snapshots__/InputLabel.test.tsx.snap b/packages/react/src/components/InputLabel/__test__/__snapshots__/InputLabel.test.tsx.snap new file mode 100644 index 00000000..42954b11 --- /dev/null +++ b/packages/react/src/components/InputLabel/__test__/__snapshots__/InputLabel.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InputLabel should match the snapshot 1`] = ` + +
+
+ +`; diff --git a/packages/react/src/components/InputLabel/index.ts b/packages/react/src/components/InputLabel/index.ts new file mode 100644 index 00000000..e90e1ca6 --- /dev/null +++ b/packages/react/src/components/InputLabel/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 './InputLabel'; +export type {InputLabelProps} from './InputLabel'; diff --git a/packages/react/src/components/InputLabel/input-label.scss b/packages/react/src/components/InputLabel/input-label.scss new file mode 100644 index 00000000..94134704 --- /dev/null +++ b/packages/react/src/components/InputLabel/input-label.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-input-label { + /* Add Styles */ +} diff --git a/packages/react/src/components/OutlinedInput/OutlinedInput.stories.mdx b/packages/react/src/components/OutlinedInput/OutlinedInput.stories.mdx new file mode 100644 index 00000000..7bfd4133 --- /dev/null +++ b/packages/react/src/components/OutlinedInput/OutlinedInput.stories.mdx @@ -0,0 +1,44 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import OutlinedInput from './OutlinedInput.tsx'; + +export const meta = { + component: OutlinedInput, + title: StoryConfig.OutlinedInput.hierarchy, +}; + + + +export const Template = args => + +# Outlined Input + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use `OutlinedInput` to get data from the user. This input will have an outlined border. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `OutlinedInput` component in your components as follows. + + diff --git a/packages/react/src/components/OutlinedInput/OutlinedInput.tsx b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx new file mode 100644 index 00000000..62e7ea1a --- /dev/null +++ b/packages/react/src/components/OutlinedInput/OutlinedInput.tsx @@ -0,0 +1,42 @@ +/** + * 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 MuiOutlinedInput, {OutlinedInputProps as MuiOutlinedInputProps} from '@mui/material/OutlinedInput'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './outlined-input.scss'; + +export type OutlinedInputProps = MuiOutlinedInputProps; + +const COMPONENT_NAME: string = 'OutlinedInput'; + +const OutlinedInput: FC & WithWrapperProps = (props: OutlinedInputProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-outlined-input', className); + + return ; +}; + +OutlinedInput.displayName = composeComponentDisplayName(COMPONENT_NAME); +OutlinedInput.muiName = COMPONENT_NAME; +OutlinedInput.defaultProps = {}; + +export default OutlinedInput; diff --git a/packages/react/src/components/OutlinedInput/__test__/OutlinedInput.test.tsx b/packages/react/src/components/OutlinedInput/__test__/OutlinedInput.test.tsx new file mode 100644 index 00000000..8e78a6b0 --- /dev/null +++ b/packages/react/src/components/OutlinedInput/__test__/OutlinedInput.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 OutlinedInput from '../OutlinedInput'; + +describe('OutlinedInput', () => { + 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/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap b/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap new file mode 100644 index 00000000..1dd45e6e --- /dev/null +++ b/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OutlinedInput should match the snapshot 1`] = ` + +
+
+ + +
+
+ +`; diff --git a/packages/react/src/components/OutlinedInput/index.ts b/packages/react/src/components/OutlinedInput/index.ts new file mode 100644 index 00000000..2ae40e89 --- /dev/null +++ b/packages/react/src/components/OutlinedInput/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 './OutlinedInput'; +export type {OutlinedInputProps} from './OutlinedInput'; diff --git a/packages/react/src/components/OutlinedInput/outlined-input.scss b/packages/react/src/components/OutlinedInput/outlined-input.scss new file mode 100644 index 00000000..634304b4 --- /dev/null +++ b/packages/react/src/components/OutlinedInput/outlined-input.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-outlined-input { + /* Add Styles */ +} diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap index 37e4f994..7b861784 100644 --- a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap +++ b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap @@ -26,14 +26,14 @@ exports[`SignIn should match the snapshot 1`] = ` class="oxygen-text-field" >
+
+ +