From 1ab2960f7cd6ab0ac71cea812495756eda90b5ca Mon Sep 17 00:00:00 2001 From: Thivi Date: Fri, 24 Mar 2023 14:38:55 +0530 Subject: [PATCH] feat(react): add Flag component --- packages/react/package.json | 1 - .../src/components/Flag/Flag.stories.mdx | 55 +++++++++++++++++++ packages/react/src/components/Flag/Flag.tsx | 50 +++++++++++++++++ .../components/Flag/__tests__/Flag.test.tsx | 32 +++++++++++ .../__snapshots__/Flag.test.tsx.snap | 12 ++++ packages/react/src/components/Flag/flag.scss | 21 +++++++ packages/react/src/components/Flag/index.ts | 20 +++++++ 7 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/components/Flag/Flag.stories.mdx create mode 100644 packages/react/src/components/Flag/Flag.tsx create mode 100644 packages/react/src/components/Flag/__tests__/Flag.test.tsx create mode 100644 packages/react/src/components/Flag/__tests__/__snapshots__/Flag.test.tsx.snap create mode 100644 packages/react/src/components/Flag/flag.scss create mode 100644 packages/react/src/components/Flag/index.ts diff --git a/packages/react/package.json b/packages/react/package.json index 04a25d1e..4977305a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -97,7 +97,6 @@ "react-dom": "^18.2.0", "rollup": "^3.5.0", "rollup-plugin-dts": "^5.0.0", - "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", "sass": "^1.56.1", diff --git a/packages/react/src/components/Flag/Flag.stories.mdx b/packages/react/src/components/Flag/Flag.stories.mdx new file mode 100644 index 00000000..9a7c9210 --- /dev/null +++ b/packages/react/src/components/Flag/Flag.stories.mdx @@ -0,0 +1,55 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import Flag from './Flag'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; + +export const meta = { + component: Flag, + title: StoryConfig.Flag.hierarchy +}; + + + +export const Template = args => ; + +# Flag + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Flag can be used to show the flag of the country for the provided country code. + + + + {Template.bind({})} + + + +## Props + + +## Usage + +Import and use the `Flag` component in your components as follows. + + + ); +}`} +/> diff --git a/packages/react/src/components/Flag/Flag.tsx b/packages/react/src/components/Flag/Flag.tsx new file mode 100644 index 00000000..18b68f9f --- /dev/null +++ b/packages/react/src/components/Flag/Flag.tsx @@ -0,0 +1,50 @@ +/** + * 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 {Typography} from '@mui/material'; +import {FC, ReactElement} from 'react'; +import WorldFlag from 'react-world-flags'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export interface FlagsProps extends React.HTMLAttributes { + /** + * The two-letter/three-letter/three-digit country code of the flag. + */ + countryCode: string; + /** + * The height of the flag. + */ + height?: string; +} + +const COMPONENT_NAME: string = 'Flag'; + +const Flag: FC & WithWrapperProps = (props: FlagsProps): ReactElement => { + const {countryCode, height, ...rest} = props; + + return {countryCode}} {...rest} />; +}; + +Flag.displayName = composeComponentDisplayName(COMPONENT_NAME); +Flag.muiName = COMPONENT_NAME; +Flag.defaultProps = { + height: '16', +}; + +export default Flag; diff --git a/packages/react/src/components/Flag/__tests__/Flag.test.tsx b/packages/react/src/components/Flag/__tests__/Flag.test.tsx new file mode 100644 index 00000000..c0a71711 --- /dev/null +++ b/packages/react/src/components/Flag/__tests__/Flag.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 Flag from '../Flag'; + +describe('Flag', () => { + 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/Flag/__tests__/__snapshots__/Flag.test.tsx.snap b/packages/react/src/components/Flag/__tests__/__snapshots__/Flag.test.tsx.snap new file mode 100644 index 00000000..5dcf6df6 --- /dev/null +++ b/packages/react/src/components/Flag/__tests__/__snapshots__/Flag.test.tsx.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Drawer should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/Flag/flag.scss b/packages/react/src/components/Flag/flag.scss new file mode 100644 index 00000000..007c4168 --- /dev/null +++ b/packages/react/src/components/Flag/flag.scss @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.oxygen-flags { + /** Add Styles */ +} diff --git a/packages/react/src/components/Flag/index.ts b/packages/react/src/components/Flag/index.ts new file mode 100644 index 00000000..987e997d --- /dev/null +++ b/packages/react/src/components/Flag/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 './Flag'; +export type {FlagsProps} from './Flag';