feat(react): add Flag component

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",

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
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Flag {...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.
+
+<Canvas>
+  <Story name="Overview" args={{
+    title: "Sri Lanka",
+    countryCode: "LK"
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Flag` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Flag from '@oxygen-ui/react/Flag';\n
+function Demo() {
+  return (
+    <Flag
+      title="Sri Lanka"
+      countryCode="LK"
+    />
+  );
+}`}
+/>

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<HTMLElement & SVGElement> {
+  /**
+   * 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<FlagsProps> & WithWrapperProps = (props: FlagsProps): ReactElement => {
+  const {countryCode, height, ...rest} = props;
+
+  return <WorldFlag code={countryCode} height={height} fallback={<Typography>{countryCode}</Typography>} {...rest} />;
+};
+
+Flag.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Flag.muiName = COMPONENT_NAME;
+Flag.defaultProps = {
+  height: '16',
+};
+
+export default Flag;

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(<Flag countryCode="LK" />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Flag countryCode="LK" />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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 */
+}

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';