feat(react): add components

packages/react/.storybook/static/storybook-common.overrides.css

@@ -68,7 +68,6 @@
 
 :root {
   --oxygen-font-family: 'Gilmer';
-  --oxygen-palette-divider: rgba(255, 255, 255, 0.12);
 }
 
 body {

packages/react/.storybook/static/storybook-preview.overrides.css

@@ -19,5 +19,5 @@
 @import url(./storybook-common.overrides.css);
 
 * {
-  font-family: var(--oxygen-font-family) !important;
+  font-family: var(--oxygen-font-family);
 }

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

@@ -18,6 +18,7 @@
  */
 
 enum StorybookCategories {
+  ComponentAPI = 'Component API',
   DataDisplay = 'Data Display',
   Foundations = 'Foundations',
   Feedback = 'Feedback',
@@ -29,6 +30,7 @@ enum StorybookCategories {
   Theme = 'Theme',
   Typography = 'Typography',
   Surfaces = 'Surfaces',
+  Utils = 'Utils'
 }
 
 export type Stories =
@@ -51,8 +53,10 @@ export type Stories =
   | 'CardContent'
   | 'CardHeader'
   | 'Carousel'
+  | 'Checkbox'
   | 'CircularProgressAvatar'
   | 'Chip'
+  | 'Code'
   | 'CollapsibleNavbarItem'
   | 'ColorModeToggle'
   | 'Colors'
@@ -61,7 +65,11 @@ export type Stories =
   | 'Divider'
   | 'Drawer'
   | 'CountryFlag'
+  | 'Fab'
   | 'Footer'
+  | 'FormControlLabel'
+  | 'FormGroup'
+  | 'FormLabel'
   | 'FormHelperText'
   | 'FormControl'
   | 'Grid'
@@ -85,7 +93,11 @@ export type Stories =
   | 'Navbar'
   | 'NavbarItem'
   | 'OutlinedInput'
+  | 'Paper'
+  | 'Popover'
   | 'PhoneNumberInput'
+  | 'Radio'
+  | 'RadioGroup'
   | 'Select'
   | 'SignIn'
   | 'Snackbar'
@@ -159,6 +171,9 @@ const StoryConfig: StorybookConfig = {
   Button: {
     hierarchy: `${StorybookCategories.Inputs}/Button`,
   },
+  Checkbox: {
+    hierarchy: `${StorybookCategories.Inputs}/Checkbox`,
+  },
   CircularProgress: {
     hierarchy: `${StorybookCategories.Feedback}/Circular Progress`,
   },
@@ -183,6 +198,9 @@ const StoryConfig: StorybookConfig = {
   Chip: {
     hierarchy: `${StorybookCategories.DataDisplay}/Chip`,
   },
+  Code: {
+    hierarchy: `${StorybookCategories.DataDisplay}/Code`,
+  },
   CollapsibleNavbarItem: {
     hierarchy: `${StorybookCategories.Navigation}/Collapsible Navbar Item`,
   },
@@ -207,6 +225,9 @@ const StoryConfig: StorybookConfig = {
   CountryFlag: {
     hierarchy: `${StorybookCategories.Icons}/Country Flags`,
   },
+  Fab: {
+    hierarchy: `${StorybookCategories.Inputs}/Fab`,
+  },
   Footer: {
     hierarchy: `${StorybookCategories.Navigation}/Footer`,
   },
@@ -216,6 +237,15 @@ const StoryConfig: StorybookConfig = {
   FormControl: {
     hierarchy: `${StorybookCategories.Inputs}/Form Control`,
   },
+  FormControlLabel: {
+    hierarchy: `${StorybookCategories.ComponentAPI}/Form Control Label`,
+  },
+  FormGroup: {
+    hierarchy: `${StorybookCategories.ComponentAPI}/Form Group`,
+  },
+  FormLabel: {
+    hierarchy: `${StorybookCategories.ComponentAPI}/Form Label`,
+  },
   Grid: {
     hierarchy: `${StorybookCategories.Layout}/Grid`,
   },
@@ -284,9 +314,21 @@ const StoryConfig: StorybookConfig = {
   ListItemText: {
     hierarchy: `${StorybookCategories.DataDisplay}/List Item Text`,
   },
+  Paper: {
+    hierarchy: `${StorybookCategories.Surfaces}/Paper`,
+  },
   PhoneNumberInput: {
     hierarchy: `${StorybookCategories.Inputs}/Phone Number Input`,
   },
+  Popover: {
+    hierarchy: `${StorybookCategories.Utils}/Popover`,
+  },
+  Radio: {
+    hierarchy: `${StorybookCategories.ComponentAPI}/Radio`,
+  },
+  RadioGroup: {
+    hierarchy: `${StorybookCategories.Inputs}/Radio Group`,
+  },
   Select: {
     hierarchy: `${StorybookCategories.Inputs}/Select`,
   },

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

@@ -28,7 +28,7 @@ exports[`ActionCard should match the snapshot 1`] = `
         class="MuiCardActions-root MuiCardActions-spacing oxygen-card-actions css-1t6e9jv-MuiCardActions-root"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium oxygen-button css-174p0nd-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation oxygen-button css-1w4rwqf-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
           id=":r1:"
           tabindex="0"
           type="button"

packages/react/src/components/Button/Button.stories.mdx

@@ -60,6 +60,14 @@ Variation that provides an extra visual weight to identify the primary action fr
   <Story name="Primary" args={{color: 'primary', children: 'Button', variant: 'contained'}} parameters={withDesign("Button", "Primary", {})} />
 </Canvas>
 
+### Primary Disabled
+
+Disabled state of the primary button variation.
+
+<Canvas>
+  <Story name="Primary Disabled" args={{disabled: true, color: 'primary', children: 'Button', variant: 'contained'}} parameters={withDesign("Button", "Primary", {})} />
+</Canvas>
+
 ### Secondary
 
 Any actions that are less important than the primary action.
@@ -83,3 +91,41 @@ Any actions that's less-pronounced.
 <Canvas>
   <Story name="Text" args={{children: 'Button', variant: 'text'}} />
 </Canvas>
+
+### Social
+
+Button variation to showcase social connections.
+
+export const GoogleIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 262"
+      width="0.9rem"
+      height="0.9rem"
+      {...props}
+    >
+      <path
+        fill="#4285F4"
+        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+      />
+      <path
+        fill="#34A853"
+        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+      />
+      <path
+        fill="#FBBC05"
+        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+      />
+      <path
+        fill="#EB4335"
+        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+      />
+    </svg>
+  );
+};
+
+<Canvas>
+  <Story name="Social" args={{children: 'Sign In With Google', startIcon: <GoogleIcon />, variant: 'contained'}} />
+</Canvas>

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

@@ -4,7 +4,7 @@ exports[`Button should match the snapshot 1`] = `
 <body>
   <div>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium oxygen-button css-13afup8-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-disableElevation MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-disableElevation oxygen-button css-5vrczm-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
       id=":r1:"
       tabindex="0"
       type="button"

packages/react/src/components/Button/button.scss

@@ -17,5 +17,12 @@
  */
 
 .oxygen-button {
-  /** Add Styles */
+  &.MuiButton-containedPrimary {
+    &.Mui-disabled {
+      cursor: default;
+      opacity: 0.45;
+      box-shadow: none;
+      pointer-events: none;
+    }
+  }
 }

packages/react/src/components/Checkbox/Checkbox.stories.mdx

@@ -0,0 +1,46 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Checkbox from './Checkbox.tsx';
+
+export const meta = {
+  component: Checkbox,
+  title: StoryConfig.Checkbox.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Checkbox {...args} />;
+
+# Checkbox
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Checkboxes allow the user to select one or more items from a set.
+
+<Canvas>
+  <Story
+    name="Overview"
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Checkbox` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import Checkbox from '@oxygen-ui/react/Checkbox';\n`}
+/>

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 MuiCheckbox, {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type CheckboxProps = MuiCheckboxProps;
+
+const COMPONENT_NAME: string = 'Checkbox';
+
+const Checkbox: ForwardRefExoticComponent<CheckboxProps> & WithWrapperProps = forwardRef(
+  (props: CheckboxProps, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx('oxygen-checkbox', className);
+
+    return <MuiCheckbox className={classes} {...rest} ref={ref} />;
+  },
+) as ForwardRefExoticComponent<CheckboxProps> & WithWrapperProps;
+
+Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Checkbox.muiName = COMPONENT_NAME;
+Checkbox.defaultProps = {};
+
+export default Checkbox;

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