feat(react): add Typography component

packages/react/.storybook/content/Foundations/Typography.stories.mdx → packages/react/.storybook/content/Foundations/Typeset.stories.mdx

@@ -3,26 +3,26 @@ import StoryConfig from '../../story-config.ts';
 import defaultTheme from '../../../src/theme/default-theme';
 
 export const meta = {
-  title: StoryConfig.Typography.hierarchy,
+  title: StoryConfig.Typeset.hierarchy,
 };
 
 export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
 <Meta title={meta.title} />
 
-# Typography
+# Typeset
 
 - [Overview](#overview)
 - [Headings](#headings)
 
 ## Overview
 
-Typography works by principle of accessibility before aesthetics. The text should be readable and help the user
+Typeset works by principle of accessibility before aesthetics. The text should be readable and help the user
 understand what’s important by well contrasted size and colors hierarchy.
 
 ## Headings
 
-Typography component used to create various levels of hierarchies between text.
+`Typography` component from the library is used to create various levels of hierarchies between text.
 
 ### H1
 

packages/react/.storybook/story-config.ts

@@ -46,6 +46,7 @@ export type Stories =
   | 'SignIn'
   | 'TextField'
   | 'Tooltip'
+  | 'Typeset'
   | 'Typography'
   | 'Welcome';
 export type StorybookConfig = Record<
@@ -121,8 +122,11 @@ const StoryConfig: StorybookConfig = {
   Tooltip: {
     hierarchy: `${StorybookCategories.DataDisplay}/Tooltip`,
   },
+  Typeset: {
+    hierarchy: `${StorybookCategories.Foundations}/Typeset`,
+  },
   Typography: {
-    hierarchy: `${StorybookCategories.Foundations}/Typography`,
+    hierarchy: `${StorybookCategories.DataDisplay}/Typography`,
   },
   Welcome: {
     hierarchy: 'Welcome',

packages/react/src/components/Typography/Typography.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 Typography from './Typography.tsx';
+
+export const meta = {
+  component: Typography,
+  title: StoryConfig.Typography.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Typography {...args} />;
+
+# Typography
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Use typography to present your design and content as clearly and efficiently as possible.
+
+<Canvas>
+  <Story name="Overview" args={{children: 'Sample Text'}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Typography` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Typography from '@oxygen-ui/react/Typography';\n
+function Demo() {
+  return (
+    <Typography>
+      Sample Text
+    </Typography>
+  );
+}`}
+/>

packages/react/src/components/Typography/Typography.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type TypographyProps = MuiTypographyProps;
+
+const COMPONENT_NAME: string = 'Typography';
+
+const Typography: FC<TypographyProps> & WithWrapperProps = (props: TypographyProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-typography', className);
+
+  return <MuiTypography className={classes} {...rest} />;
+};
+
+Typography.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Typography.muiName = COMPONENT_NAME;
+Typography.defaultProps = {};
+
+export default Typography;

packages/react/src/components/Typography/__tests__/Typography.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 Typography from '../Typography';
+
+describe('Typography', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Typography>Sample Text</Typography>);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Typography>Sample Text</Typography>);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/Typography/__tests__/__snapshots__/Typography.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography should match the snapshot 1`] = `
+<body>
+  <div>
+    <p
+      class="MuiTypography-root MuiTypography-body1 oxygen-typography css-okvhak-MuiTypography-root"
+    >
+      Sample Text
+    </p>
+  </div>
+</body>
+`;

packages/react/src/components/Typography/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 './Typography';
+export type {TypographyProps} from './Typography';

packages/react/src/components/Typography/typography.scss

@@ -0,0 +1,19 @@
+/**
+ * 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-typography {}