diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 27b57e6f..c32f7cbb 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -80,6 +80,7 @@ export type Stories = | 'Icons' | 'Image' | 'Input' + | 'InputAdornment' | 'InputLabel' | 'LinearProgress' | 'Link' @@ -102,6 +103,7 @@ export type Stories = | 'RadioGroup' | 'Select' | 'SignIn' + | 'Skeleton' | 'Snackbar' | 'Stepper' | 'Tab' @@ -274,6 +276,9 @@ const StoryConfig: StorybookConfig = { Input: { hierarchy: `${StorybookCategories.Inputs}/Input`, }, + InputAdornment: { + hierarchy: `${StorybookCategories.ComponentAPI}/Input Adornment`, + }, InputLabel: { hierarchy: `${StorybookCategories.Inputs}/Input Label`, }, @@ -343,6 +348,9 @@ const StoryConfig: StorybookConfig = { SignIn: { hierarchy: `${StorybookCategories.Patterns}/Sign In`, }, + Skeleton: { + hierarchy: `${StorybookCategories.Feedback}/Skeleton`, + }, Snackbar: { hierarchy: `${StorybookCategories.Feedback}/Snackbar`, }, diff --git a/packages/react/src/components/InputAdornment/InputAdornment.stories.mdx b/packages/react/src/components/InputAdornment/InputAdornment.stories.mdx new file mode 100644 index 00000000..1aae2f5b --- /dev/null +++ b/packages/react/src/components/InputAdornment/InputAdornment.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 InputAdornment from './InputAdornment.tsx'; +import TextField from '../TextField/TextField.tsx'; +import LinkTo from '@storybook/addon-links/react'; + +export const meta = { + component: InputAdornment, + title: StoryConfig.InputAdornment.hierarchy, +}; + + + +export const Template = args => ; + +# Input Adornment + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Display a prefix, a suffix, or an action to an input. For instance, you can use an icon button to hide or reveal the password. + +For examples and details on the usage of this React component, visit the component demo pages: + +- Text Field + +## Props + + + +## Usage + +Import and use the `InputAdornment` component in your components as follows. + +; +}`} +/> diff --git a/packages/react/src/components/InputAdornment/InputAdornment.tsx b/packages/react/src/components/InputAdornment/InputAdornment.tsx new file mode 100644 index 00000000..d1a50c73 --- /dev/null +++ b/packages/react/src/components/InputAdornment/InputAdornment.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 MuiInputAdornment, {InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type InputAdornmentProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'InputAdornment'; + +const InputAdornment: FC & WithWrapperProps = ( + props: InputAdornmentProps, +): ReactElement => { + const {className, position, ...rest} = props; + + const classes: string = clsx('oxygen-input-adornment', className); + + return ; +}; + +InputAdornment.displayName = composeComponentDisplayName(COMPONENT_NAME); +InputAdornment.muiName = COMPONENT_NAME; +InputAdornment.defaultProps = {}; + +export default InputAdornment; diff --git a/packages/react/src/components/InputAdornment/__test__/InputAdornment.test.tsx b/packages/react/src/components/InputAdornment/__test__/InputAdornment.test.tsx new file mode 100644 index 00000000..254f8606 --- /dev/null +++ b/packages/react/src/components/InputAdornment/__test__/InputAdornment.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 InputAdornment from '../InputAdornment'; + +describe('InputAdornment', () => { + 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/InputAdornment/__test__/__snapshots__/InputAdornment.test.tsx.snap b/packages/react/src/components/InputAdornment/__test__/__snapshots__/InputAdornment.test.tsx.snap new file mode 100644 index 00000000..52a19556 --- /dev/null +++ b/packages/react/src/components/InputAdornment/__test__/__snapshots__/InputAdornment.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InputAdornment should match the snapshot 1`] = ` + +
+
+ + ​ + +
+
+ +`; diff --git a/packages/react/src/components/InputAdornment/index.ts b/packages/react/src/components/InputAdornment/index.ts new file mode 100644 index 00000000..824a71ae --- /dev/null +++ b/packages/react/src/components/InputAdornment/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 './InputAdornment'; +export type {InputAdornmentProps} from './InputAdornment'; diff --git a/packages/react/src/components/Skeleton/Skeleton.stories.mdx b/packages/react/src/components/Skeleton/Skeleton.stories.mdx new file mode 100644 index 00000000..cf22f96f --- /dev/null +++ b/packages/react/src/components/Skeleton/Skeleton.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 Skeleton from './Skeleton.tsx'; + +export const meta = { + component: Skeleton, + title: StoryConfig.Skeleton.hierarchy, +}; + + + +export const Template = args => ; + +# Skeleton + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Skeleton` component in your components as follows. + +; +}`} +/> diff --git a/packages/react/src/components/Skeleton/Skeleton.tsx b/packages/react/src/components/Skeleton/Skeleton.tsx new file mode 100644 index 00000000..9fc404b0 --- /dev/null +++ b/packages/react/src/components/Skeleton/Skeleton.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 MuiSkeleton, {SkeletonProps as MuiSkeletonProps} from '@mui/material/Skeleton'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type SkeletonProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'Skeleton'; + +const Skeleton: FC & WithWrapperProps = ( + props: SkeletonProps, +): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-Skeleton', className); + + return ; +}; + +Skeleton.displayName = composeComponentDisplayName(COMPONENT_NAME); +Skeleton.muiName = COMPONENT_NAME; +Skeleton.defaultProps = {}; + +export default Skeleton; diff --git a/packages/react/src/components/Skeleton/__test__/Skeleton.test.tsx b/packages/react/src/components/Skeleton/__test__/Skeleton.test.tsx new file mode 100644 index 00000000..2ecf5ce2 --- /dev/null +++ b/packages/react/src/components/Skeleton/__test__/Skeleton.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 Skeleton from '../Skeleton'; + +describe('Skeleton', () => { + 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/Skeleton/__test__/__snapshots__/Skeleton.test.tsx.snap b/packages/react/src/components/Skeleton/__test__/__snapshots__/Skeleton.test.tsx.snap new file mode 100644 index 00000000..e16ca409 --- /dev/null +++ b/packages/react/src/components/Skeleton/__test__/__snapshots__/Skeleton.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Skeleton should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/Skeleton/index.ts b/packages/react/src/components/Skeleton/index.ts new file mode 100644 index 00000000..b473006a --- /dev/null +++ b/packages/react/src/components/Skeleton/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 './Skeleton'; +export type {SkeletonProps} from './Skeleton'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 65525944..64f78e67 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -130,6 +130,9 @@ export * from './Image'; export {default as Input} from './Input'; export * from './Input'; +export {default as InputAdornment} from './InputAdornment'; +export * from './InputAdornment'; + export {default as InputLabel} from './InputLabel'; export * from './InputLabel'; @@ -190,6 +193,9 @@ export * from './Select'; export {default as SignIn} from './SignIn'; export * from './SignIn'; +export {default as Skeleton} from './Skeleton'; +export * from './Skeleton'; + export {default as Stepper} from './Stepper'; export * from './Stepper';