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..9f76a6ae --- /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[`Flag 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'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e6d4898b..ca270174 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -260,7 +260,6 @@ importers: react-world-flags: ^1.5.1 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 @@ -331,7 +330,6 @@ importers: react-dom: 18.2.0_react@18.2.0 rollup: 3.7.4 rollup-plugin-dts: 5.0.0_fhibmf72xnv5tve6nwed265eae - rollup-plugin-peer-deps-external: 2.2.4_rollup@3.7.4 rollup-plugin-postcss: 4.0.2_postcss@8.4.16 rollup-plugin-terser: 7.0.2_rollup@3.7.4 sass: 1.56.2 @@ -487,7 +485,7 @@ packages: convert-source-map: 1.9.0 debug: 4.3.4 gensync: 1.0.0-beta.2 - json5: 2.2.2 + json5: 2.2.3 semver: 6.3.0 transitivePeerDependencies: - supports-color @@ -5039,7 +5037,7 @@ packages: glob: 7.2.3 handlebars: 4.7.7 interpret: 2.2.0 - json5: 2.2.2 + json5: 2.2.3 lazy-universal-dotenv: 3.0.1 picomatch: 2.3.1 pkg-dir: 5.0.0 @@ -5811,7 +5809,7 @@ packages: /@storybook/testing-library/0.0.13_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw==} dependencies: - '@storybook/client-logger': 6.5.14 + '@storybook/client-logger': 6.5.16 '@storybook/instrumenter': 6.5.14_biqbaboplfbrettd7655fr4n2y '@testing-library/dom': 8.19.0 '@testing-library/user-event': 13.5.0_aaq3sbffpfe3jnxzm2zngsddei @@ -6021,7 +6019,7 @@ packages: engines: {node: '>=12'} dependencies: '@babel/code-frame': 7.18.6 - '@babel/runtime': 7.20.6 + '@babel/runtime': 7.21.0 '@types/aria-query': 4.2.2 aria-query: 5.1.3 chalk: 4.1.2 @@ -6035,7 +6033,7 @@ packages: engines: {node: '>=8', npm: '>=6', yarn: '>=1'} dependencies: '@adobe/css-tools': 4.0.1 - '@babel/runtime': 7.20.6 + '@babel/runtime': 7.21.0 '@types/testing-library__jest-dom': 5.14.5 aria-query: 5.1.3 chalk: 3.0.0 @@ -6052,7 +6050,7 @@ packages: react: ^18.0.0 react-dom: ^18.0.0 dependencies: - '@babel/runtime': 7.20.6 + '@babel/runtime': 7.21.0 '@testing-library/dom': 8.19.0 '@types/react-dom': 18.0.9 react: 18.2.0 @@ -11048,7 +11046,7 @@ packages: '@typescript-eslint/eslint-plugin': 5.46.1_wqh5rj4gay6mpzzdobd4tmdy4i '@typescript-eslint/utils': 5.46.1_grqhnqpocakf5dew66i47isfme eslint: 8.25.0 - jest: 29.0.3_@types+node@16.18.9 + jest: 29.0.3_zfha7dvnw4nti6zkbsmhmn6xo4 transitivePeerDependencies: - supports-color - typescript @@ -15705,7 +15703,7 @@ packages: dependencies: big.js: 5.2.2 emojis-list: 3.0.0 - json5: 2.2.2 + json5: 2.2.3 dev: true /loader-utils/3.2.1: @@ -21430,11 +21428,11 @@ packages: vue: optional: true dependencies: - '@storybook/addons': 6.5.14_biqbaboplfbrettd7655fr4n2y - '@storybook/api': 6.5.14_biqbaboplfbrettd7655fr4n2y - '@storybook/components': 6.5.14_biqbaboplfbrettd7655fr4n2y - '@storybook/core-events': 6.5.14 - '@storybook/theming': 6.5.14_biqbaboplfbrettd7655fr4n2y + '@storybook/addons': 6.5.16_biqbaboplfbrettd7655fr4n2y + '@storybook/api': 6.5.16_biqbaboplfbrettd7655fr4n2y + '@storybook/components': 6.5.16_biqbaboplfbrettd7655fr4n2y + '@storybook/core-events': 6.5.16 + '@storybook/theming': 6.5.16_biqbaboplfbrettd7655fr4n2y core-js: 3.26.1 global: 4.4.0 memoizerific: 1.11.3 @@ -21454,11 +21452,11 @@ packages: react-dom: optional: true dependencies: - '@storybook/addons': 6.5.14_biqbaboplfbrettd7655fr4n2y - '@storybook/api': 6.5.14_biqbaboplfbrettd7655fr4n2y - '@storybook/components': 6.5.14_biqbaboplfbrettd7655fr4n2y - '@storybook/core-events': 6.5.14 - '@storybook/theming': 6.5.14_biqbaboplfbrettd7655fr4n2y + '@storybook/addons': 6.5.16_biqbaboplfbrettd7655fr4n2y + '@storybook/api': 6.5.16_biqbaboplfbrettd7655fr4n2y + '@storybook/components': 6.5.16_biqbaboplfbrettd7655fr4n2y + '@storybook/core-events': 6.5.16 + '@storybook/theming': 6.5.16_biqbaboplfbrettd7655fr4n2y fast-deep-equal: 3.1.3 global: 4.4.0 memoizerific: 1.11.3 @@ -22504,7 +22502,7 @@ packages: fast-json-stable-stringify: 2.1.0 jest: 29.0.3_zfha7dvnw4nti6zkbsmhmn6xo4 jest-util: 29.4.1 - json5: 2.2.2 + json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6 semver: 7.3.8 @@ -22537,7 +22535,7 @@ packages: fast-json-stable-stringify: 2.1.0 jest: 29.0.3_@types+node@16.18.9 jest-util: 29.4.1 - json5: 2.2.2 + json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6 semver: 7.3.8 @@ -22610,7 +22608,7 @@ packages: resolution: {integrity: sha512-VgPrtLKpRgEAJsMj5Q/I/mXouC6A/7eJ/X4Nuk6o0cRPwBtznYxTCU4FodbexbzH9somBPEXYi0ZkUViUpJ21Q==} engines: {node: '>=6'} dependencies: - json5: 2.2.2 + json5: 2.2.3 minimist: 1.2.7 strip-bom: 3.0.0 dev: true