From a4f6a2d3f963aee5a9176a5b499ec709ef6a67a3 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 19:22:01 +0530 Subject: [PATCH 01/23] feat(react): add `Fab` component --- packages/react/.storybook/story-config.ts | 4 ++ .../react/src/components/Fab/Fab.stories.mdx | 62 +++++++++++++++++++ packages/react/src/components/Fab/Fab.tsx | 45 ++++++++++++++ .../src/components/Fab/__tests__/Fab.test.tsx | 32 ++++++++++ .../__tests__/__snapshots__/Fab.test.tsx.snap | 17 +++++ packages/react/src/components/Fab/index.ts | 20 ++++++ packages/react/src/components/index.ts | 3 + 7 files changed, 183 insertions(+) create mode 100644 packages/react/src/components/Fab/Fab.stories.mdx create mode 100644 packages/react/src/components/Fab/Fab.tsx create mode 100644 packages/react/src/components/Fab/__tests__/Fab.test.tsx create mode 100644 packages/react/src/components/Fab/__tests__/__snapshots__/Fab.test.tsx.snap create mode 100644 packages/react/src/components/Fab/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 486c46b9..2bf40e17 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -61,6 +61,7 @@ export type Stories = | 'Divider' | 'Drawer' | 'CountryFlag' + | 'Fab' | 'Footer' | 'FormHelperText' | 'FormControl' @@ -207,6 +208,9 @@ const StoryConfig: StorybookConfig = { CountryFlag: { hierarchy: `${StorybookCategories.Icons}/Country Flags`, }, + Fab: { + hierarchy: `${StorybookCategories.Inputs}/Fab`, + }, Footer: { hierarchy: `${StorybookCategories.Navigation}/Footer`, }, diff --git a/packages/react/src/components/Fab/Fab.stories.mdx b/packages/react/src/components/Fab/Fab.stories.mdx new file mode 100644 index 00000000..fb95f077 --- /dev/null +++ b/packages/react/src/components/Fab/Fab.stories.mdx @@ -0,0 +1,62 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Fab from './Fab.tsx'; + +export const meta = { + component: Fab, + title: StoryConfig.Fab.hierarchy, +}; + + + +export const Template = args => ; + +# Fab + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +A Floating Action Button (FAB) performs the primary, or most common, action on a screen. + +export const PlusIcon = () => ( + + + + + + + + + + +); + + + }} + > + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Fab` component in your components as follows. + + diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx new file mode 100644 index 00000000..de34688c --- /dev/null +++ b/packages/react/src/components/Fab/Fab.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 MuiFab, {FabProps as MuiFabProps} from '@mui/material/Fab'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type FabProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'Fab'; + +const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: FabProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-fab', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Fab.displayName = composeComponentDisplayName(COMPONENT_NAME); +Fab.muiName = COMPONENT_NAME; +Fab.defaultProps = {}; + +export default Fab; diff --git a/packages/react/src/components/Fab/__tests__/Fab.test.tsx b/packages/react/src/components/Fab/__tests__/Fab.test.tsx new file mode 100644 index 00000000..cc5dbaa8 --- /dev/null +++ b/packages/react/src/components/Fab/__tests__/Fab.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 Fab from '../Fab'; + +describe('Fab', () => { + 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/Fab/__tests__/__snapshots__/Fab.test.tsx.snap b/packages/react/src/components/Fab/__tests__/__snapshots__/Fab.test.tsx.snap new file mode 100644 index 00000000..7f0f66ec --- /dev/null +++ b/packages/react/src/components/Fab/__tests__/__snapshots__/Fab.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Fab should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/Fab/index.ts b/packages/react/src/components/Fab/index.ts new file mode 100644 index 00000000..5f228f4f --- /dev/null +++ b/packages/react/src/components/Fab/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 './Fab'; +export type {FabProps} from './Fab'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 207ba061..cd5e7dec 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -82,6 +82,9 @@ export * from './Divider'; export {default as Drawer} from './Drawer'; export * from './Drawer'; +export {default as Fab} from './Fab'; +export * from './Fab'; + export {default as Footer} from './Footer'; export * from './Footer'; From 3cda0608b844ce84a3401ef169109941bf62ec8e Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 19:52:06 +0530 Subject: [PATCH 02/23] feat(react): add `Checkbox` component --- packages/react/.storybook/story-config.ts | 4 ++ .../components/Checkbox/Checkbox.stories.mdx | 46 +++++++++++++++++++ .../src/components/Checkbox/Checkbox.tsx | 43 +++++++++++++++++ .../Checkbox/__tests__/Checkbox.test.tsx | 32 +++++++++++++ .../__snapshots__/Checkbox.test.tsx.snap | 31 +++++++++++++ .../react/src/components/Checkbox/index.ts | 20 ++++++++ packages/react/src/components/index.ts | 3 ++ 7 files changed, 179 insertions(+) create mode 100644 packages/react/src/components/Checkbox/Checkbox.stories.mdx create mode 100644 packages/react/src/components/Checkbox/Checkbox.tsx create mode 100644 packages/react/src/components/Checkbox/__tests__/Checkbox.test.tsx create mode 100644 packages/react/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap create mode 100644 packages/react/src/components/Checkbox/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 2bf40e17..e4990089 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -51,6 +51,7 @@ export type Stories = | 'CardContent' | 'CardHeader' | 'Carousel' + | 'Checkbox' | 'CircularProgressAvatar' | 'Chip' | 'CollapsibleNavbarItem' @@ -160,6 +161,9 @@ const StoryConfig: StorybookConfig = { Button: { hierarchy: `${StorybookCategories.Inputs}/Button`, }, + Checkbox: { + hierarchy: `${StorybookCategories.Inputs}/Checkbox`, + }, CircularProgress: { hierarchy: `${StorybookCategories.Feedback}/Circular Progress`, }, diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.mdx b/packages/react/src/components/Checkbox/Checkbox.stories.mdx new file mode 100644 index 00000000..7ad6f996 --- /dev/null +++ b/packages/react/src/components/Checkbox/Checkbox.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Checkbox from './Checkbox.tsx'; + +export const meta = { + component: Checkbox, + title: StoryConfig.Checkbox.hierarchy, +}; + + + +export const Template = args => ; + +# Checkbox + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Checkboxes allow the user to select one or more items from a set. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Checkbox` component in your components as follows. + + diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 00000000..c4e36070 --- /dev/null +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,43 @@ +/** + * 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 MuiCheckbox, {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type CheckboxProps = MuiCheckboxProps; + +const COMPONENT_NAME: string = 'Checkbox'; + +const Checkbox: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: CheckboxProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-checkbox', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME); +Checkbox.muiName = COMPONENT_NAME; +Checkbox.defaultProps = {}; + +export default Checkbox; diff --git a/packages/react/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react/src/components/Checkbox/__tests__/Checkbox.test.tsx new file mode 100644 index 00000000..cd2d4d4c --- /dev/null +++ b/packages/react/src/components/Checkbox/__tests__/Checkbox.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 Checkbox from '../Checkbox'; + +describe('Checkbox', () => { + 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/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/react/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap new file mode 100644 index 00000000..0f1bc19e --- /dev/null +++ b/packages/react/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox should match the snapshot 1`] = ` + +
+ + + + + +
+ +`; diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts new file mode 100644 index 00000000..a33377af --- /dev/null +++ b/packages/react/src/components/Checkbox/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 './Checkbox'; +export type {CheckboxProps} from './Checkbox'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index cd5e7dec..be97ed49 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -58,6 +58,9 @@ export * from './CardHeader'; export {default as Carousel} from './Carousel'; export * from './Carousel'; +export {default as Checkbox} from './Checkbox'; +export * from './Checkbox'; + export {default as Chip} from './Chip'; export * from './Chip'; From 086aa3fb7e4d6a9065fb659384a129d28c56c47a Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 19:57:56 +0530 Subject: [PATCH 03/23] feat(react): add `Code` component --- packages/react/.storybook/story-config.ts | 4 ++ .../src/components/Code/Code.stories.mdx | 52 +++++++++++++++++++ packages/react/src/components/Code/Code.tsx | 48 +++++++++++++++++ .../components/Code/__tests__/Code.test.tsx | 42 +++++++++++++++ .../__snapshots__/Code.test.tsx.snap | 13 +++++ packages/react/src/components/Code/code.scss | 25 +++++++++ packages/react/src/components/Code/index.ts | 20 +++++++ packages/react/src/components/index.ts | 3 ++ 8 files changed, 207 insertions(+) create mode 100644 packages/react/src/components/Code/Code.stories.mdx create mode 100644 packages/react/src/components/Code/Code.tsx create mode 100644 packages/react/src/components/Code/__tests__/Code.test.tsx create mode 100644 packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap create mode 100644 packages/react/src/components/Code/code.scss create mode 100644 packages/react/src/components/Code/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index e4990089..5e93db61 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -54,6 +54,7 @@ export type Stories = | 'Checkbox' | 'CircularProgressAvatar' | 'Chip' + | 'Code' | 'CollapsibleNavbarItem' | 'ColorModeToggle' | 'Colors' @@ -188,6 +189,9 @@ const StoryConfig: StorybookConfig = { Chip: { hierarchy: `${StorybookCategories.DataDisplay}/Chip`, }, + Code: { + hierarchy: `${StorybookCategories.DataDisplay}/Code`, + }, CollapsibleNavbarItem: { hierarchy: `${StorybookCategories.Navigation}/Collapsible Navbar Item`, }, diff --git a/packages/react/src/components/Code/Code.stories.mdx b/packages/react/src/components/Code/Code.stories.mdx new file mode 100644 index 00000000..da9c929a --- /dev/null +++ b/packages/react/src/components/Code/Code.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 Code from './Code.tsx'; + +export const meta = { + component: Code, + title: StoryConfig.Code.hierarchy, +}; + + + +export const Template = args => ; + +# Code + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use `Code` to present Inline or block code without syntax highlight. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Code` component in your components as follows. + + + var text = "Hello World"; + + ); +}`} +/> diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx new file mode 100644 index 00000000..821cc62d --- /dev/null +++ b/packages/react/src/components/Code/Code.tsx @@ -0,0 +1,48 @@ +/** + * 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 MuiTypography, {TypographyProps as MuiTypographyProps} from '@mui/material/Typography'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './code.scss'; + +export type CodeProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'Code'; + +const Code: FC & WithWrapperProps = (props: CodeProps): ReactElement => { + const {className, children, ...rest} = props; + + const classes: string = clsx('oxygen-code', className); + + return ( + + {children} + + ); +}; + +Code.displayName = composeComponentDisplayName(COMPONENT_NAME); +Code.muiName = COMPONENT_NAME; +Code.defaultProps = {}; + +export default Code; diff --git a/packages/react/src/components/Code/__tests__/Code.test.tsx b/packages/react/src/components/Code/__tests__/Code.test.tsx new file mode 100644 index 00000000..82bc7600 --- /dev/null +++ b/packages/react/src/components/Code/__tests__/Code.test.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 {render} from '@unit-testing'; +import Code from '../Code'; + +describe('Code', () => { + it('should render successfully', () => { + const {baseElement} = render(Code Block); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(Code Block); + expect(baseElement).toMatchSnapshot(); + }); + + it('should have the correct class name', () => { + const {container} = render(Code Block); + expect(container.firstChild).toHaveClass('oxygen-code'); + }); + + it('should have the correct text', () => { + const {container} = render(Code Block); + expect(container.firstChild).toHaveTextContent('Code Block'); + }); +}); diff --git a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap new file mode 100644 index 00000000..1ada0580 --- /dev/null +++ b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Code should match the snapshot 1`] = ` + +
+ + Code Block + +
+ +`; diff --git a/packages/react/src/components/Code/code.scss b/packages/react/src/components/Code/code.scss new file mode 100644 index 00000000..cd03436c --- /dev/null +++ b/packages/react/src/components/Code/code.scss @@ -0,0 +1,25 @@ +/** + * 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-code { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + padding: 1px 3px; + background-color: var(--oxygen-palette-action-selected); + border-radius: 5px; + border: 1px solid var(--oxygen-palette-divider); +} diff --git a/packages/react/src/components/Code/index.ts b/packages/react/src/components/Code/index.ts new file mode 100644 index 00000000..30e6abc8 --- /dev/null +++ b/packages/react/src/components/Code/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 './Code'; +export type {CodeProps} from './Code'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index be97ed49..dbb3d87f 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -70,6 +70,9 @@ export * from './CircularProgress'; export {default as CircularProgressAvatar} from './CircularProgressAvatar'; export * from './CircularProgressAvatar'; +export {default as Code} from './Code'; +export * from './Code'; + export {default as ColorModeToggle} from './ColorModeToggle'; export * from './ColorModeToggle'; From 493714b88a2a09db1ed1d1c0d1758bb271697708 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:10:34 +0530 Subject: [PATCH 04/23] feat(react): add `Paper` component --- packages/react/.storybook/story-config.ts | 4 ++ .../src/components/Paper/Paper.stories.mdx | 60 +++++++++++++++++++ packages/react/src/components/Paper/Paper.tsx | 45 ++++++++++++++ .../components/Paper/__tests__/Paper.test.tsx | 32 ++++++++++ .../__snapshots__/Paper.test.tsx.snap | 11 ++++ packages/react/src/components/Paper/index.ts | 20 +++++++ packages/react/src/components/index.ts | 3 + 7 files changed, 175 insertions(+) create mode 100644 packages/react/src/components/Paper/Paper.stories.mdx create mode 100644 packages/react/src/components/Paper/Paper.tsx create mode 100644 packages/react/src/components/Paper/__tests__/Paper.test.tsx create mode 100644 packages/react/src/components/Paper/__tests__/__snapshots__/Paper.test.tsx.snap create mode 100644 packages/react/src/components/Paper/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 5e93db61..0fefbf3e 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -88,6 +88,7 @@ export type Stories = | 'Navbar' | 'NavbarItem' | 'OutlinedInput' + | 'Paper' | 'PhoneNumberInput' | 'Select' | 'SignIn' @@ -296,6 +297,9 @@ const StoryConfig: StorybookConfig = { ListItemText: { hierarchy: `${StorybookCategories.DataDisplay}/List Item Text`, }, + Paper: { + hierarchy: `${StorybookCategories.Surfaces}/Paper`, + }, PhoneNumberInput: { hierarchy: `${StorybookCategories.Inputs}/Phone Number Input`, }, diff --git a/packages/react/src/components/Paper/Paper.stories.mdx b/packages/react/src/components/Paper/Paper.stories.mdx new file mode 100644 index 00000000..c9609e72 --- /dev/null +++ b/packages/react/src/components/Paper/Paper.stories.mdx @@ -0,0 +1,60 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Paper from './Paper.tsx'; + +export const meta = { + component: Paper, + title: StoryConfig.Paper.hierarchy, +}; + + + +export const Template = args => ( + :not(style)': { + m: 1, + width: 128, + height: 128, + }, + }} + > + + +) + +# Paper + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +In Material Design, the physical properties of paper are translated to the screen. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Paper` component in your components as follows. + + diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx new file mode 100644 index 00000000..265c8c6f --- /dev/null +++ b/packages/react/src/components/Paper/Paper.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 MuiPaper, {PaperProps as MuiPaperProps} from '@mui/material/Paper'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type PaperProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'Paper'; + +const Paper: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: PaperProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-paper', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Paper.displayName = composeComponentDisplayName(COMPONENT_NAME); +Paper.muiName = COMPONENT_NAME; +Paper.defaultProps = {}; + +export default Paper; diff --git a/packages/react/src/components/Paper/__tests__/Paper.test.tsx b/packages/react/src/components/Paper/__tests__/Paper.test.tsx new file mode 100644 index 00000000..5c92dc59 --- /dev/null +++ b/packages/react/src/components/Paper/__tests__/Paper.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 Paper from '../Paper'; + +describe('Paper', () => { + 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/Paper/__tests__/__snapshots__/Paper.test.tsx.snap b/packages/react/src/components/Paper/__tests__/__snapshots__/Paper.test.tsx.snap new file mode 100644 index 00000000..1bebe020 --- /dev/null +++ b/packages/react/src/components/Paper/__tests__/__snapshots__/Paper.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Paper should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/Paper/index.ts b/packages/react/src/components/Paper/index.ts new file mode 100644 index 00000000..7bd2fafd --- /dev/null +++ b/packages/react/src/components/Paper/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 './Paper'; +export type {PaperProps} from './Paper'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index dbb3d87f..31020cdb 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -154,6 +154,9 @@ export * from './Navbar'; export {default as OutlinedInput} from './OutlinedInput'; export * from './OutlinedInput'; +export {default as Paper} from './Paper'; +export * from './Paper'; + export {default as PhoneNumberInput} from './PhoneNumberInput'; export * from './PhoneNumberInput'; From f35d4a50529297831340918ab68fd20a4e99196b Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:13:51 +0530 Subject: [PATCH 05/23] feat(react): add `Radio` component --- packages/react/.storybook/story-config.ts | 4 ++ .../src/components/Radio/Radio.stories.mdx | 50 +++++++++++++++++++ packages/react/src/components/Radio/Radio.tsx | 43 ++++++++++++++++ .../components/Radio/__tests__/Radio.test.tsx | 32 ++++++++++++ .../__snapshots__/Radio.test.tsx.snap | 46 +++++++++++++++++ packages/react/src/components/Radio/index.ts | 20 ++++++++ packages/react/src/components/index.ts | 3 ++ 7 files changed, 198 insertions(+) create mode 100644 packages/react/src/components/Radio/Radio.stories.mdx create mode 100644 packages/react/src/components/Radio/Radio.tsx create mode 100644 packages/react/src/components/Radio/__tests__/Radio.test.tsx create mode 100644 packages/react/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap create mode 100644 packages/react/src/components/Radio/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 0fefbf3e..a120df2c 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -90,6 +90,7 @@ export type Stories = | 'OutlinedInput' | 'Paper' | 'PhoneNumberInput' + | 'Radio' | 'Select' | 'SignIn' | 'Snackbar' @@ -303,6 +304,9 @@ const StoryConfig: StorybookConfig = { PhoneNumberInput: { hierarchy: `${StorybookCategories.Inputs}/Phone Number Input`, }, + Radio: { + hierarchy: `${StorybookCategories.ComponentAPI}/Radio`, + }, Select: { hierarchy: `${StorybookCategories.Inputs}/Select`, }, diff --git a/packages/react/src/components/Radio/Radio.stories.mdx b/packages/react/src/components/Radio/Radio.stories.mdx new file mode 100644 index 00000000..f528ee43 --- /dev/null +++ b/packages/react/src/components/Radio/Radio.stories.mdx @@ -0,0 +1,50 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Radio from './Radio.tsx'; + +export const meta = { + component: Radio, + title: StoryConfig.Radio.hierarchy, +}; + + + +export const Template = args => ; + +# Radio + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +API reference docs for the React Radio component. Learn about the props, CSS, and other APIs of this exported module. + +For examples and details on the usage of this React component, visit the component demo pages: + +- Radio Group + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Radio` component in your components as follows. + + diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx new file mode 100644 index 00000000..7687c91f --- /dev/null +++ b/packages/react/src/components/Radio/Radio.tsx @@ -0,0 +1,43 @@ +/** + * 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 MuiRadio, {RadioProps as MuiRadioProps} from '@mui/material/Radio'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type RadioProps = MuiRadioProps; + +const COMPONENT_NAME: string = 'Radio'; + +const Radio: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: RadioProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-radio', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Radio.displayName = composeComponentDisplayName(COMPONENT_NAME); +Radio.muiName = COMPONENT_NAME; +Radio.defaultProps = {}; + +export default Radio; diff --git a/packages/react/src/components/Radio/__tests__/Radio.test.tsx b/packages/react/src/components/Radio/__tests__/Radio.test.tsx new file mode 100644 index 00000000..074b9247 --- /dev/null +++ b/packages/react/src/components/Radio/__tests__/Radio.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 Radio from '../Radio'; + +describe('Radio', () => { + 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/Radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/react/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap new file mode 100644 index 00000000..a0483561 --- /dev/null +++ b/packages/react/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Radio should match the snapshot 1`] = ` + +
+ + + + + + + + +
+ +`; diff --git a/packages/react/src/components/Radio/index.ts b/packages/react/src/components/Radio/index.ts new file mode 100644 index 00000000..e80f2e7b --- /dev/null +++ b/packages/react/src/components/Radio/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 './Radio'; +export type {RadioProps} from './Radio'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 31020cdb..e885835b 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -160,6 +160,9 @@ export * from './Paper'; export {default as PhoneNumberInput} from './PhoneNumberInput'; export * from './PhoneNumberInput'; +export {default as Radio} from './Radio'; +export * from './Radio'; + export {default as Select} from './Select'; export * from './Select'; From 5a02d8beecaf303ab4ad158a5a4b51ede348702c Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:15:31 +0530 Subject: [PATCH 06/23] feat(react): add `RadioGroup` component --- packages/react/.storybook/story-config.ts | 4 ++ .../RadioGroup/RadioGroup.stories.mdx | 63 +++++++++++++++++++ .../src/components/RadioGroup/RadioGroup.tsx | 43 +++++++++++++ .../RadioGroup/__tests__/RadioGroup.test.tsx | 32 ++++++++++ .../__snapshots__/RadioGroup.test.tsx.snap | 12 ++++ .../react/src/components/RadioGroup/index.ts | 20 ++++++ packages/react/src/components/index.ts | 3 + 7 files changed, 177 insertions(+) create mode 100644 packages/react/src/components/RadioGroup/RadioGroup.stories.mdx create mode 100644 packages/react/src/components/RadioGroup/RadioGroup.tsx create mode 100644 packages/react/src/components/RadioGroup/__tests__/RadioGroup.test.tsx create mode 100644 packages/react/src/components/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap create mode 100644 packages/react/src/components/RadioGroup/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index a120df2c..a2bea6f1 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -91,6 +91,7 @@ export type Stories = | 'Paper' | 'PhoneNumberInput' | 'Radio' + | 'RadioGroup' | 'Select' | 'SignIn' | 'Snackbar' @@ -307,6 +308,9 @@ const StoryConfig: StorybookConfig = { Radio: { hierarchy: `${StorybookCategories.ComponentAPI}/Radio`, }, + RadioGroup: { + hierarchy: `${StorybookCategories.Inputs}/Radio Group`, + }, Select: { hierarchy: `${StorybookCategories.Inputs}/Select`, }, diff --git a/packages/react/src/components/RadioGroup/RadioGroup.stories.mdx b/packages/react/src/components/RadioGroup/RadioGroup.stories.mdx new file mode 100644 index 00000000..e68daf54 --- /dev/null +++ b/packages/react/src/components/RadioGroup/RadioGroup.stories.mdx @@ -0,0 +1,63 @@ +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/FormControl.tsx'; +import FormLabel from '../FormLabel/FormLabel.tsx'; +import FormControlLabel from '../FormControlLabel/FormControlLabel.tsx'; +import Radio from '../Radio/Radio.tsx'; +import RadioGroup from './RadioGroup.tsx'; + +export const meta = { + component: RadioGroup, + title: StoryConfig.RadioGroup.hierarchy, +}; + + + +export const Template = args => ( + + Gender + + } label="Female" /> + } label="Male" /> + } label="Other" /> + + +); + +# RadioGroup + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The Radio Group allows the user to select one option from a set. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `RadioGroup` component in your components as follows. + + diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx new file mode 100644 index 00000000..236fdef1 --- /dev/null +++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx @@ -0,0 +1,43 @@ +/** + * 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 MuiRadioGroup, {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type RadioGroupProps = MuiRadioGroupProps; + +const COMPONENT_NAME: string = 'RadioGroup'; + +const RadioGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: RadioGroupProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-radio-group', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +RadioGroup.displayName = composeComponentDisplayName(COMPONENT_NAME); +RadioGroup.muiName = COMPONENT_NAME; +RadioGroup.defaultProps = {}; + +export default RadioGroup; diff --git a/packages/react/src/components/RadioGroup/__tests__/RadioGroup.test.tsx b/packages/react/src/components/RadioGroup/__tests__/RadioGroup.test.tsx new file mode 100644 index 00000000..deb89b4c --- /dev/null +++ b/packages/react/src/components/RadioGroup/__tests__/RadioGroup.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 RadioGroup from '../RadioGroup'; + +describe('RadioGroup', () => { + 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/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/packages/react/src/components/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap new file mode 100644 index 00000000..5aceef45 --- /dev/null +++ b/packages/react/src/components/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RadioGroup should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/RadioGroup/index.ts b/packages/react/src/components/RadioGroup/index.ts new file mode 100644 index 00000000..22ba0f57 --- /dev/null +++ b/packages/react/src/components/RadioGroup/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 './RadioGroup'; +export type {RadioGroupProps} from './RadioGroup'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index e885835b..0116f1df 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -163,6 +163,9 @@ export * from './PhoneNumberInput'; export {default as Radio} from './Radio'; export * from './Radio'; +export {default as RadioGroup} from './RadioGroup'; +export * from './RadioGroup'; + export {default as Select} from './Select'; export * from './Select'; From 092475c09f57cfd6ba3cb11ba8aaaafc2b74102c Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:17:51 +0530 Subject: [PATCH 07/23] feat(react): add `FormLabel` component --- packages/react/.storybook/story-config.ts | 4 ++ .../FormLabel/FormLabel.stories.mdx | 53 +++++++++++++++++++ .../src/components/FormLabel/FormLabel.tsx | 45 ++++++++++++++++ .../FormLabel/__tests__/FormLabel.test.tsx | 32 +++++++++++ .../__snapshots__/FormLabel.test.tsx.snap | 11 ++++ .../react/src/components/FormLabel/index.ts | 20 +++++++ packages/react/src/components/index.ts | 3 ++ 7 files changed, 168 insertions(+) create mode 100644 packages/react/src/components/FormLabel/FormLabel.stories.mdx create mode 100644 packages/react/src/components/FormLabel/FormLabel.tsx create mode 100644 packages/react/src/components/FormLabel/__tests__/FormLabel.test.tsx create mode 100644 packages/react/src/components/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap create mode 100644 packages/react/src/components/FormLabel/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index a2bea6f1..974db5aa 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -65,6 +65,7 @@ export type Stories = | 'CountryFlag' | 'Fab' | 'Footer' + | 'FormLabel' | 'FormHelperText' | 'FormControl' | 'Grid' @@ -231,6 +232,9 @@ const StoryConfig: StorybookConfig = { FormControl: { hierarchy: `${StorybookCategories.Inputs}/Form Control`, }, + FormLabel: { + hierarchy: `${StorybookCategories.ComponentAPI}/Form Label`, + }, Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, diff --git a/packages/react/src/components/FormLabel/FormLabel.stories.mdx b/packages/react/src/components/FormLabel/FormLabel.stories.mdx new file mode 100644 index 00000000..ce796ea3 --- /dev/null +++ b/packages/react/src/components/FormLabel/FormLabel.stories.mdx @@ -0,0 +1,53 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import FormLabel from './FormLabel.tsx'; + +export const meta = { + component: FormLabel, + title: StoryConfig.FormLabel.hierarchy, +}; + + + +export const Template = args => ; + +# FormLabel + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +API reference docs for the React FormLabel component. Learn about the props, CSS, and other APIs of this exported module. + +For examples and details on the usage of this React component, visit the component demo pages: + +- Checkbox +- Radio Group +- Switch + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `FormLabel` component in your components as follows. + + diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx new file mode 100644 index 00000000..1089810d --- /dev/null +++ b/packages/react/src/components/FormLabel/FormLabel.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 MuiFormLabel, {FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type FormLabelProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'FormLabel'; + +const FormLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: FormLabelProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-form-label', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +FormLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); +FormLabel.muiName = COMPONENT_NAME; +FormLabel.defaultProps = {}; + +export default FormLabel; diff --git a/packages/react/src/components/FormLabel/__tests__/FormLabel.test.tsx b/packages/react/src/components/FormLabel/__tests__/FormLabel.test.tsx new file mode 100644 index 00000000..f780b434 --- /dev/null +++ b/packages/react/src/components/FormLabel/__tests__/FormLabel.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 FormLabel from '../FormLabel'; + +describe('FormLabel', () => { + 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/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap b/packages/react/src/components/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap new file mode 100644 index 00000000..427b8409 --- /dev/null +++ b/packages/react/src/components/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormLabel should match the snapshot 1`] = ` + +
+
+ +`; diff --git a/packages/react/src/components/FormLabel/index.ts b/packages/react/src/components/FormLabel/index.ts new file mode 100644 index 00000000..d1987cd7 --- /dev/null +++ b/packages/react/src/components/FormLabel/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 './FormLabel'; +export type {FormLabelProps} from './FormLabel'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 0116f1df..78d06876 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -100,6 +100,9 @@ export * from './FormControl'; export {default as FormHelperText} from './FormHelperText'; export * from './FormHelperText'; +export {default as FormLabel} from './FormLabel'; +export * from './FormLabel'; + export {default as Grid} from './Grid'; export * from './Grid'; From 8171f6281a767b808ded70f08acfc2d618f4b5e6 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:20:23 +0530 Subject: [PATCH 08/23] feat(react): add `FormControlLabel` component --- packages/react/.storybook/story-config.ts | 5 ++ .../FormControlLabel.stories.mdx | 46 +++++++++++++++++++ .../FormControlLabel/FormControlLabel.tsx | 43 +++++++++++++++++ .../__tests__/FormControlLabel.test.tsx | 33 +++++++++++++ .../FormControlLabel.test.tsx.snap | 41 +++++++++++++++++ .../src/components/FormControlLabel/index.ts | 20 ++++++++ packages/react/src/components/index.ts | 3 ++ 7 files changed, 191 insertions(+) create mode 100644 packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx create mode 100644 packages/react/src/components/FormControlLabel/FormControlLabel.tsx create mode 100644 packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx create mode 100644 packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap create mode 100644 packages/react/src/components/FormControlLabel/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 974db5aa..6199de60 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -18,6 +18,7 @@ */ enum StorybookCategories { + ComponentAPI = 'Component API', DataDisplay = 'Data Display', Foundations = 'Foundations', Feedback = 'Feedback', @@ -65,6 +66,7 @@ export type Stories = | 'CountryFlag' | 'Fab' | 'Footer' + | 'FormControlLabel' | 'FormLabel' | 'FormHelperText' | 'FormControl' @@ -232,6 +234,9 @@ const StoryConfig: StorybookConfig = { FormControl: { hierarchy: `${StorybookCategories.Inputs}/Form Control`, }, + FormControlLabel: { + hierarchy: `${StorybookCategories.ComponentAPI}/Form Control Label`, + }, FormLabel: { hierarchy: `${StorybookCategories.ComponentAPI}/Form Label`, }, diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx b/packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx new file mode 100644 index 00000000..acebd6a8 --- /dev/null +++ b/packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import FormControlLabel from './FormControlLabel.tsx'; + +export const meta = { + component: FormControlLabel, + title: StoryConfig.FormControlLabel.hierarchy, +}; + + + +export const Template = args => ; + +# FormControlLabel + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component. Use this component if you want to display an extra label. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `FormControlLabel` component in your components as follows. + + diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx new file mode 100644 index 00000000..ef137acd --- /dev/null +++ b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx @@ -0,0 +1,43 @@ +/** + * 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 MuiFormControlLabel, {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type FormControlLabelProps = MuiFormControlLabelProps; + +const COMPONENT_NAME: string = 'FormControlLabel'; + +const FormControlLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: FormControlLabelProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-form-control-label', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +FormControlLabel.displayName = composeComponentDisplayName(COMPONENT_NAME); +FormControlLabel.muiName = COMPONENT_NAME; +FormControlLabel.defaultProps = {}; + +export default FormControlLabel; diff --git a/packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx b/packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx new file mode 100644 index 00000000..4145ef79 --- /dev/null +++ b/packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx @@ -0,0 +1,33 @@ +/** + * 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 Checkbox from '../../Checkbox'; +import FormControlLabel from '../FormControlLabel'; + +describe('FormControlLabel', () => { + it('should render successfully', () => { + const {baseElement} = render(} label="Label" />); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(} label="Label" />); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap b/packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap new file mode 100644 index 00000000..baea57af --- /dev/null +++ b/packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormControlLabel should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/FormControlLabel/index.ts b/packages/react/src/components/FormControlLabel/index.ts new file mode 100644 index 00000000..455daf14 --- /dev/null +++ b/packages/react/src/components/FormControlLabel/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 './FormControlLabel'; +export type {FormControlLabelProps} from './FormControlLabel'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 78d06876..98823cf8 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -103,6 +103,9 @@ export * from './FormHelperText'; export {default as FormLabel} from './FormLabel'; export * from './FormLabel'; +export {default as FormControlLabel} from './FormControlLabel'; +export * from './FormControlLabel'; + export {default as Grid} from './Grid'; export * from './Grid'; From cb159dbb9217bf976ae64e8d6632907b04a39875 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:21:47 +0530 Subject: [PATCH 09/23] feat(react): add `FormGroup` component --- packages/react/.storybook/story-config.ts | 4 ++ .../FormGroup/FormGroup.stories.mdx | 46 +++++++++++++++++++ .../src/components/FormGroup/FormGroup.tsx | 43 +++++++++++++++++ .../FormGroup/__tests__/FormGroup.test.tsx | 32 +++++++++++++ .../__snapshots__/FormGroup.test.tsx.snap | 11 +++++ .../react/src/components/FormGroup/index.ts | 20 ++++++++ packages/react/src/components/index.ts | 3 ++ 7 files changed, 159 insertions(+) create mode 100644 packages/react/src/components/FormGroup/FormGroup.stories.mdx create mode 100644 packages/react/src/components/FormGroup/FormGroup.tsx create mode 100644 packages/react/src/components/FormGroup/__tests__/FormGroup.test.tsx create mode 100644 packages/react/src/components/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap create mode 100644 packages/react/src/components/FormGroup/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 6199de60..cdd57250 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -67,6 +67,7 @@ export type Stories = | 'Fab' | 'Footer' | 'FormControlLabel' + | 'FormGroup' | 'FormLabel' | 'FormHelperText' | 'FormControl' @@ -237,6 +238,9 @@ const StoryConfig: StorybookConfig = { FormControlLabel: { hierarchy: `${StorybookCategories.ComponentAPI}/Form Control Label`, }, + FormGroup: { + hierarchy: `${StorybookCategories.ComponentAPI}/Form Group`, + }, FormLabel: { hierarchy: `${StorybookCategories.ComponentAPI}/Form Label`, }, diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.mdx b/packages/react/src/components/FormGroup/FormGroup.stories.mdx new file mode 100644 index 00000000..168b1713 --- /dev/null +++ b/packages/react/src/components/FormGroup/FormGroup.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import FormGroup from './FormGroup.tsx'; + +export const meta = { + component: FormGroup, + title: StoryConfig.FormGroup.hierarchy, +}; + + + +export const Template = args => ; + +# FormGroup + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +`FormGroup` wraps controls such as `Checkbox` and `Switch`. It provides compact row layout. For the `Radio`, you should be using the `RadioGroup` component instead of this one. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `FormGroup` component in your components as follows. + + diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx new file mode 100644 index 00000000..912ca2ea --- /dev/null +++ b/packages/react/src/components/FormGroup/FormGroup.tsx @@ -0,0 +1,43 @@ +/** + * 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 MuiFormGroup, {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type FormGroupProps = MuiFormGroupProps; + +const COMPONENT_NAME: string = 'FormGroup'; + +const FormGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: FormGroupProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-form-group', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +FormGroup.displayName = composeComponentDisplayName(COMPONENT_NAME); +FormGroup.muiName = COMPONENT_NAME; +FormGroup.defaultProps = {}; + +export default FormGroup; diff --git a/packages/react/src/components/FormGroup/__tests__/FormGroup.test.tsx b/packages/react/src/components/FormGroup/__tests__/FormGroup.test.tsx new file mode 100644 index 00000000..d857c7d4 --- /dev/null +++ b/packages/react/src/components/FormGroup/__tests__/FormGroup.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 FormGroup from '../FormGroup'; + +describe('FormGroup', () => { + 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/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react/src/components/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap new file mode 100644 index 00000000..f16d1c6f --- /dev/null +++ b/packages/react/src/components/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormGroup should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/FormGroup/index.ts b/packages/react/src/components/FormGroup/index.ts new file mode 100644 index 00000000..a6ed1763 --- /dev/null +++ b/packages/react/src/components/FormGroup/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 './FormGroup'; +export type {FormGroupProps} from './FormGroup'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 98823cf8..e5d1fead 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -97,6 +97,9 @@ export * from './Footer'; export {default as FormControl} from './FormControl'; export * from './FormControl'; +export {default as FormGroup} from './FormGroup'; +export * from './FormGroup'; + export {default as FormHelperText} from './FormHelperText'; export * from './FormHelperText'; From b4ddd9f8668fe3170c939950ec1dacd6b261c319 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:23:06 +0530 Subject: [PATCH 10/23] fix(react): fix `Button` disabled state styles --- packages/react/src/components/Button/Button.stories.mdx | 8 ++++++++ packages/react/src/components/Button/button.scss | 9 ++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Button/Button.stories.mdx b/packages/react/src/components/Button/Button.stories.mdx index c6c2f37d..56a2d8c8 100644 --- a/packages/react/src/components/Button/Button.stories.mdx +++ b/packages/react/src/components/Button/Button.stories.mdx @@ -60,6 +60,14 @@ Variation that provides an extra visual weight to identify the primary action fr +### Primary Disabled + +Variation that provides an extra visual weight to identify the primary action from a set of buttons. + + + + + ### Secondary Any actions that are less important than the primary action. diff --git a/packages/react/src/components/Button/button.scss b/packages/react/src/components/Button/button.scss index f705622c..1632b1f8 100644 --- a/packages/react/src/components/Button/button.scss +++ b/packages/react/src/components/Button/button.scss @@ -17,5 +17,12 @@ */ .oxygen-button { - /** Add Styles */ + &.MuiButton-containedPrimary { + &.Mui-disabled { + cursor: default; + opacity: 0.45; + box-shadow: none; + pointer-events: none; + } + } } From 1cac282bfc61a722a1b6ea787af1ebbc21f8e399 Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:23:33 +0530 Subject: [PATCH 11/23] chore(react): add social variation story --- .../src/components/Button/Button.stories.mdx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/react/src/components/Button/Button.stories.mdx b/packages/react/src/components/Button/Button.stories.mdx index 56a2d8c8..b0da190e 100644 --- a/packages/react/src/components/Button/Button.stories.mdx +++ b/packages/react/src/components/Button/Button.stories.mdx @@ -91,3 +91,41 @@ Any actions that's less-pronounced. + +### Social + +Variation that provides an extra visual weight to identify the primary action from a set of buttons. + +export const GoogleIcon = (props) => { + return ( + + + + + + + ); +}; + + + , variant: 'contained'}} /> + From 9ed792704a34a24bd2c430d45ac199f13ffe442f Mon Sep 17 00:00:00 2001 From: Brion Date: Fri, 4 Aug 2023 20:26:08 +0530 Subject: [PATCH 12/23] chore(react): improve `SignIn` component --- .../src/components/SignIn/SignIn.stories.mdx | 55 +++++++++++++++++++ .../react/src/components/SignIn/SignIn.tsx | 54 ++++++++++-------- .../__snapshots__/SignIn.test.tsx.snap | 41 +++++++++++++- .../react/src/components/SignIn/sign-in.scss | 26 +++++++++ 4 files changed, 150 insertions(+), 26 deletions(-) diff --git a/packages/react/src/components/SignIn/SignIn.stories.mdx b/packages/react/src/components/SignIn/SignIn.stories.mdx index 2244c593..43128476 100644 --- a/packages/react/src/components/SignIn/SignIn.stories.mdx +++ b/packages/react/src/components/SignIn/SignIn.stories.mdx @@ -2,6 +2,7 @@ import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; import dedent from 'ts-dedent'; import StoryConfig from '../../../.storybook/story-config.ts'; import SignIn from './SignIn.tsx'; +import Button from '../Button/Button.tsx'; export const meta = { component: SignIn, @@ -57,3 +58,57 @@ A basic login box with username and password inputs. + +### With Sign In Options + +export const GoogleIcon = (props) => { + return ( + + + + + + + ); +}; + + + + + + ) + }} + /> + diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx index e3f6f076..719f0062 100644 --- a/packages/react/src/components/SignIn/SignIn.tsx +++ b/packages/react/src/components/SignIn/SignIn.tsx @@ -16,12 +16,13 @@ * under the License. */ -import {Box, Typography, Grid, BoxProps, Paper} from '@mui/material'; +import {Box, FormGroup, FormControlLabel, Typography, Grid, BoxProps, Paper, Checkbox} from '@mui/material'; import clsx from 'clsx'; import {FC, ReactElement} from 'react'; import {MuiWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; import Button from '../Button'; +import Divider from '../Divider'; import Link from '../Link'; import TextField from '../TextField'; import './sign-in.scss'; @@ -30,25 +31,29 @@ export interface SignInProps extends BoxProps { /** * URL for the login box logo. */ - logoUrl: string; + logoUrl?: string; + /** + * Different Sign In Options. + */ + signInOptions?: ReactElement; /** * URL for the sign up. */ - signUpUrl: string; + signUpUrl?: string; } const COMPONENT_NAME: string = 'SignIn'; const SignIn: FC & MuiWrapperProps = (props: SignInProps): ReactElement => { - const {className, signUpUrl, logoUrl, ...rest} = props; + const {className, signUpUrl, logoUrl, signInOptions, ...rest} = props; const classes: string = clsx('oxygen-sign-in', className); return ( - + {logoUrl && } - + Sign in null} noValidate sx={{mt: 1}}> @@ -71,27 +76,28 @@ const SignIn: FC & MuiWrapperProps = (props: SignInProps): ReactEle placeholder="Enter your password" autoComplete="current-password" /> - - - Don't have an account? - - - Sign up - + {signInOptions && ( +
+ OR +
{signInOptions}
+
+ )} + {signUpUrl && ( + + Don't have an account? + + + Sign up + + - + )} 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 ab42aff5..6243ef8a 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 @@ -14,7 +14,7 @@ exports[`SignIn should match the snapshot 1`] = ` class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-sign-in-box css-1fbvlaf-MuiPaper-root" > @@ -159,8 +159,45 @@ exports[`SignIn should match the snapshot 1`] = `
+
+ +
+ + The content of the Popover. + + + ); +}; + +# Popover + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +A Popover can be used to display some content on top of another. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Popover` component in your components as follows. + + diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx new file mode 100644 index 00000000..a5cf6a63 --- /dev/null +++ b/packages/react/src/components/Popover/Popover.tsx @@ -0,0 +1,43 @@ +/** + * 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 MuiPopover, {PopoverProps as MuiPopoverProps} from '@mui/material/Popover'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type PopoverProps = MuiPopoverProps; + +const COMPONENT_NAME: string = 'Popover'; + +const Popover: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: PopoverProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-popover', className); + + return ; + }, +) as unknown as ForwardRefExoticComponent & WithWrapperProps; + +Popover.displayName = composeComponentDisplayName(COMPONENT_NAME); +Popover.muiName = COMPONENT_NAME; +Popover.defaultProps = {}; + +export default Popover; diff --git a/packages/react/src/components/Popover/__tests__/Popover.test.tsx b/packages/react/src/components/Popover/__tests__/Popover.test.tsx new file mode 100644 index 00000000..e48af374 --- /dev/null +++ b/packages/react/src/components/Popover/__tests__/Popover.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 Popover from '../Popover'; + +describe('Popover', () => { + 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/Popover/__tests__/__snapshots__/Popover.test.tsx.snap b/packages/react/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap new file mode 100644 index 00000000..61969e61 --- /dev/null +++ b/packages/react/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Popover should match the snapshot 1`] = ` + +