From bec4b15237e66f694dd222965186bbee7e1249d0 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Mon, 20 Feb 2023 08:38:41 +0530 Subject: [PATCH 1/9] feat(react): add `InputLabel` component --- packages/react/.storybook/story-config.ts | 4 ++ .../InputLabel/InputLabel.stories.mdx | 48 +++++++++++++++++++ .../src/components/InputLabel/InputLabel.tsx | 42 ++++++++++++++++ .../InputLabel/__test__/InputLabel.test.tsx | 32 +++++++++++++ .../__snapshots__/InputLabel.test.tsx.snap | 11 +++++ .../react/src/components/InputLabel/index.ts | 20 ++++++++ .../components/InputLabel/input-label.scss | 21 ++++++++ 7 files changed, 178 insertions(+) create mode 100644 packages/react/src/components/InputLabel/InputLabel.stories.mdx create mode 100644 packages/react/src/components/InputLabel/InputLabel.tsx create mode 100644 packages/react/src/components/InputLabel/__test__/InputLabel.test.tsx create mode 100644 packages/react/src/components/InputLabel/__test__/__snapshots__/InputLabel.test.tsx.snap create mode 100644 packages/react/src/components/InputLabel/index.ts create mode 100644 packages/react/src/components/InputLabel/input-label.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 088a231d..8811b91d 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -57,6 +57,7 @@ export type Stories = | 'IconButton' | 'Icons' | 'Image' + | 'InputLabel' | 'Link' | 'List' | 'ListItem' @@ -173,6 +174,9 @@ const StoryConfig: StorybookConfig = { Image: { hierarchy: `${StorybookCategories.DataDisplay}/Image`, }, + InputLabel: { + hierarchy: `${StorybookCategories.Inputs}/Input Label`, + }, IconButton: { hierarchy: `${StorybookCategories.Inputs}/Icon Button`, }, 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..1ff774b6 --- /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 */ +} From ee3eaa5ca849a67e2a40735485afc1537c3956a8 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Mon, 20 Feb 2023 15:15:03 +0530 Subject: [PATCH 2/9] feat(react): add `Input` component --- packages/react/.storybook/story-config.ts | 4 ++ .../src/components/Input/Input.stories.mdx | 44 +++++++++++++++++++ packages/react/src/components/Input/Input.tsx | 42 ++++++++++++++++++ .../components/Input/__test__/Input.test.tsx | 32 ++++++++++++++ .../__snapshots__/Input.test.tsx.snap | 17 +++++++ packages/react/src/components/Input/index.ts | 20 +++++++++ .../react/src/components/Input/input.scss | 21 +++++++++ 7 files changed, 180 insertions(+) create mode 100644 packages/react/src/components/Input/Input.stories.mdx create mode 100644 packages/react/src/components/Input/Input.tsx create mode 100644 packages/react/src/components/Input/__test__/Input.test.tsx create mode 100644 packages/react/src/components/Input/__test__/__snapshots__/Input.test.tsx.snap create mode 100644 packages/react/src/components/Input/index.ts create mode 100644 packages/react/src/components/Input/input.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 8811b91d..fe9001c8 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -57,6 +57,7 @@ export type Stories = | 'IconButton' | 'Icons' | 'Image' + | 'Input' | 'InputLabel' | 'Link' | 'List' @@ -174,6 +175,9 @@ const StoryConfig: StorybookConfig = { Image: { hierarchy: `${StorybookCategories.DataDisplay}/Image`, }, + Input: { + hierarchy: `${StorybookCategories.Inputs}/Input`, + }, InputLabel: { hierarchy: `${StorybookCategories.Inputs}/Input Label`, }, 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..94d242fe --- /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 */ +} From 228c8d24f63f1d948958c2f53b18251a0f578ca8 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Mon, 20 Feb 2023 16:00:03 +0530 Subject: [PATCH 3/9] feat(react): add `OutlinedInput` component --- packages/react/.storybook/story-config.ts | 4 ++ .../OutlinedInput/OutlinedInput.stories.mdx | 44 +++++++++++++++++++ .../OutlinedInput/OutlinedInput.tsx | 42 ++++++++++++++++++ .../__test__/OutlinedInput.test.tsx | 32 ++++++++++++++ .../__snapshots__/OutlinedInput.test.tsx.snap | 31 +++++++++++++ .../src/components/OutlinedInput/index.ts | 20 +++++++++ .../OutlinedInput/outlined-input.scss | 21 +++++++++ 7 files changed, 194 insertions(+) create mode 100644 packages/react/src/components/OutlinedInput/OutlinedInput.stories.mdx create mode 100644 packages/react/src/components/OutlinedInput/OutlinedInput.tsx create mode 100644 packages/react/src/components/OutlinedInput/__test__/OutlinedInput.test.tsx create mode 100644 packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap create mode 100644 packages/react/src/components/OutlinedInput/index.ts create mode 100644 packages/react/src/components/OutlinedInput/outlined-input.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index fe9001c8..3be6e146 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -70,6 +70,7 @@ export type Stories = | 'MenuItem' | 'UserDropdownMenu' | 'Navbar' + | 'OutlinedInput' | 'SignIn' | 'TextField' | 'Toolbar' @@ -199,6 +200,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/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..64e5468d --- /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 */ +} From 0f8702df93b574fd85d008b820b0e2526ac80820 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Mon, 20 Feb 2023 17:17:36 +0530 Subject: [PATCH 4/9] feat(react): add `FormHelperText` component --- packages/react/.storybook/story-config.ts | 4 ++ .../FormHelperText/FormHelperText.stories.mdx | 44 ++++++++++++++++++ .../FormHelperText/FormHelperText.tsx | 46 +++++++++++++++++++ .../__test__/FormHelperText.test.tsx | 32 +++++++++++++ .../FormHelperText.test.tsx.snap | 11 +++++ .../FormHelperText/form-helper-text.scss | 21 +++++++++ .../src/components/FormHelperText/index.ts | 20 ++++++++ 7 files changed, 178 insertions(+) create mode 100644 packages/react/src/components/FormHelperText/FormHelperText.stories.mdx create mode 100644 packages/react/src/components/FormHelperText/FormHelperText.tsx create mode 100644 packages/react/src/components/FormHelperText/__test__/FormHelperText.test.tsx create mode 100644 packages/react/src/components/FormHelperText/__test__/__snapshots__/FormHelperText.test.tsx.snap create mode 100644 packages/react/src/components/FormHelperText/form-helper-text.scss create mode 100644 packages/react/src/components/FormHelperText/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 3be6e146..ba6f333a 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -52,6 +52,7 @@ export type Stories = | 'Divider' | 'Drawer' | 'Footer' + | 'FormHelperText' | 'Grid' | 'Header' | 'IconButton' @@ -159,6 +160,9 @@ const StoryConfig: StorybookConfig = { Footer: { hierarchy: `${StorybookCategories.Navigation}/Footer`, }, + FormHelperText: { + hierarchy: `${StorybookCategories.Inputs}/Form Helper Text`, + }, Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, 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..50ace774 --- /dev/null +++ b/packages/react/src/components/FormHelperText/FormHelperText.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 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. + + 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'; From 9b7347cbbccda875d5bda89442a18f0e0b396e01 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Mon, 20 Feb 2023 19:21:32 +0530 Subject: [PATCH 5/9] feat(react): add `FormControl` component --- packages/react/.storybook/story-config.ts | 4 + .../FormControl/FormControl.stories.mdx | 99 +++++++++++++++++++ .../components/FormControl/FormControl.tsx | 46 +++++++++ .../FormControl/__test__/FormControl.test.tsx | 32 ++++++ .../__snapshots__/FormControl.test.tsx.snap | 11 +++ .../components/FormControl/form-control.scss | 21 ++++ .../react/src/components/FormControl/index.ts | 20 ++++ 7 files changed, 233 insertions(+) create mode 100644 packages/react/src/components/FormControl/FormControl.stories.mdx create mode 100644 packages/react/src/components/FormControl/FormControl.tsx create mode 100644 packages/react/src/components/FormControl/__test__/FormControl.test.tsx create mode 100644 packages/react/src/components/FormControl/__test__/__snapshots__/FormControl.test.tsx.snap create mode 100644 packages/react/src/components/FormControl/form-control.scss create mode 100644 packages/react/src/components/FormControl/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index ba6f333a..df1ea43c 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -53,6 +53,7 @@ export type Stories = | 'Drawer' | 'Footer' | 'FormHelperText' + | 'FormControl' | 'Grid' | 'Header' | 'IconButton' @@ -163,6 +164,9 @@ const StoryConfig: StorybookConfig = { FormHelperText: { hierarchy: `${StorybookCategories.Inputs}/Form Helper Text`, }, + FormControl: { + hierarchy: `${StorybookCategories.Inputs}/Form Control`, + }, Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, 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'; From fce6da42d206b5e2fd36642c3e98cb6b0d3f1dc7 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Wed, 22 Feb 2023 18:35:22 +0530 Subject: [PATCH 6/9] chore(react): improve Password type `TextField` --- .../primitives/src/icons/double-circle-16.svg | 21 +++++ .../primitives/src/icons/visibility-16.svg | 26 ++++++ .../src/icons/visibility-off-16.svg | 21 +++++ .../TextField/TextField.stories.mdx | 17 ++++ .../src/components/TextField/TextField.tsx | 91 +++++++++++++++++-- .../__snapshots__/TextField.test.tsx.snap | 10 +- .../src/components/TextField/text-field.scss | 18 ++++ 7 files changed, 192 insertions(+), 12 deletions(-) create mode 100644 packages/primitives/src/icons/double-circle-16.svg create mode 100644 packages/primitives/src/icons/visibility-16.svg create mode 100644 packages/primitives/src/icons/visibility-off-16.svg 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/src/components/TextField/TextField.stories.mdx b/packages/react/src/components/TextField/TextField.stories.mdx index edc07f35..55066f0d 100644 --- a/packages/react/src/components/TextField/TextField.stories.mdx +++ b/packages/react/src/components/TextField/TextField.stories.mdx @@ -57,3 +57,20 @@ A component that wraps an input filed and an input label. + +### Password + + + + diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx index 79d62a4b..e95c957f 100644 --- a/packages/react/src/components/TextField/TextField.tsx +++ b/packages/react/src/components/TextField/TextField.tsx @@ -16,29 +16,108 @@ * under the License. */ -import {InputLabel} from '@mui/material'; +import InputAdornment from '@mui/material/InputAdornment'; import MuiTextField, {TextFieldProps as MuiTextFieldProps} from '@mui/material/TextField'; +import {DoubleCircleIcon, VisibilityIcon, VisibilityOffIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {FC, MouseEvent, ReactElement, ReactNode, useState} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; +import IconButton from '../IconButton'; +import InputLabel from '../InputLabel'; +import List from '../List'; +import ListItem from '../ListItem'; +import ListItemIcon from '../ListItemIcon'; +import ListItemText from '../ListItemText'; +import Tooltip from '../Tooltip'; import './text-field.scss'; -export type TextFieldProps = MuiTextFieldProps; +export type TextFieldProps = { + /** + * Criteria for user input. + */ + criteria?: string[]; +} & MuiTextFieldProps; const COMPONENT_NAME: string = 'TextField'; const TextField: FC & WithWrapperProps = (props: TextFieldProps): ReactElement => { - const {className, label, InputLabelProps, id, ...rest} = props; + const {className, criteria, InputLabelProps, id, label, type, ...rest} = props; const classes: string = clsx('oxygen-text-field', className); + const [open, setOpen] = useState(false); + const [showPassword, setShowPassword] = useState(false); + + const handleClick = (): void => { + if (type === 'password' && criteria?.length > 0) { + setOpen(true); + } + }; + + const handleClose = (): void => { + if (open) { + setOpen(false); + } + }; + + const handleClickShowPassword = (): void => setShowPassword((show: boolean) => !show); + + const handleMouseDownPassword = (event: MouseEvent): void => { + event.preventDefault(); + }; + + const tooltipContent = (): ReactNode => ( + + {criteria?.map((criterion: string) => ( + + + + + + + ))} + + ); + return (
- + {label} - + + + + {showPassword ? : } + + + ), + } + } + onClick={handleClick} + onBlurCapture={handleClose} + onFocus={handleClick} + {...rest} + /> +
); }; diff --git a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap index 13d7960e..716fdeff 100644 --- a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap +++ b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap @@ -7,12 +7,11 @@ exports[`TextField should match the snapshot 1`] = ` class="oxygen-text-field" >