- `](https://material-ui.com/api/list/) views. It positions a title as well as optional subtitle(s), icon, and status stripe.
*/
diff --git a/components/src/core/InfoListItem/InfoListItemStyledComponents.tsx b/components/src/core/InfoListItem/InfoListItemStyledComponents.tsx
index f185b3835..52662a5ff 100644
--- a/components/src/core/InfoListItem/InfoListItemStyledComponents.tsx
+++ b/components/src/core/InfoListItem/InfoListItemStyledComponents.tsx
@@ -31,6 +31,13 @@ export const Root = styled(ListItem, {
const isWrapEnabled = (): boolean => wrapSubtitle || wrapTitle || wrapInfo;
const getHeight = (): string => (dense ? `3.25rem` : `4.5rem`);
+ let isCssColor = true;
+ try {
+ color(backgroundColor);
+ } catch (e) {
+ isCssColor = false;
+ }
+
return {
cursor: onClick ? 'pointer' : 'inherit',
backgroundColor: backgroundColor || 'inherit',
@@ -38,7 +45,7 @@ export const Root = styled(ListItem, {
height: !isWrapEnabled() ? getHeight() : 'auto',
'&:hover': {
backgroundColor: onClick
- ? backgroundColor && backgroundColor !== 'inherit' && backgroundColor !== 'transparent'
+ ? backgroundColor && backgroundColor !== 'inherit' && backgroundColor !== 'transparent' && isCssColor
? color(backgroundColor).darken(0.08).string()
: theme.palette.action.hover
: undefined,
diff --git a/components/src/core/ListItemTag/ListItemTag.tsx b/components/src/core/ListItemTag/ListItemTag.tsx
index a7f5a8093..93181b26c 100644
--- a/components/src/core/ListItemTag/ListItemTag.tsx
+++ b/components/src/core/ListItemTag/ListItemTag.tsx
@@ -96,7 +96,7 @@ const ListItemTagRender: React.ForwardRefRenderFunction
- 
-
-
-## Drawer
-
-The `
-
- 
-
-
-### Drawer Usage
-
-```tsx
-import { Drawer, DrawerHeader, DrawerSubheader, DrawerBody, DrawerNavGroup, DrawerFooter } from '@brightlayer-ui/react-components';
-
-// Constructing the drawer using the items object
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| ------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | -------- | ----------------- |
-| activeItem | itemID for the 'active' item | `string` | no | |
-| classes | Style overrides | `DrawerClasses` | no | |
-| condensed | Show condensed nav items without labels (`rail` variant only) | `boolean` | no | `false` |
-| noLayout | Set to true if used without a `` | `boolean` | no | `false` |
-| onItemSelect | A callback function to execute whenever an item is clicked | `(id: string) => void` | no | |
-| open | Controls the open/closed state of the drawer | `boolean` | yes | |
-| openOnHover | Automatically open the drawer on hover when closed (persistent variant only) | `boolean` | no | `true` |
-| openOnHoverDelay | Delay (ms) before triggering open on hover (persistent variant only) | `number` | no | `500` |
-| sideBorder | Whether to use a side border for the drawer instead of a shadow | `boolean` | no | `false` |
-| variant | The variant to use (see below) | `'permanent'` \| `'persistent'` \| `'temporary'` \| `'rail'` | no | `persistent` |
-| width | Sets the width of the drawer when open | `number` \| `string` | no | `22.5rem (360px)` |
-| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | - | - | |
-
-
-
-Any other props will be provided to the root element [**Material UI Drawer**](https://material-ui.com/api/drawer/).
-
-The `Drawer` has four `variant`s:
-
-- **Permanent**: Always open, even when `open` is set to false.
-- **Persistent**: When `open` is set to false, the `
- 
-
-
-### Drawer Header API
-
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| ----------------- | ---------------------------------------------- | --------------------- | -------- | ---------------------------- |
-| backgroundColor | The color used for the background | `string` | no | `theme.palette.primary.main` |
-| backgroundImage | An image to display in the header | `string` | no | |
-| backgroundOpacity | The opacity of the background image | `number` | no | `0.3` |
-| classes | Style overrides | `DrawerHeaderClasses` | no | |
-| divider | Optional divider which appears beneath header | `boolean` | no | `false` |
-| fontColor | The color of the text elements | `string` | no | dynamic based on background |
-| icon | A component to render for the icon | `ReactNode` | no | |
-| onIconClick | A function to execute when the icon is clicked | `function` | no | `() => {}` |
-| subtitle | The text to show on the second line | `string` | no | |
-| title | The text to show on the first line | `string` | no | |
-| titleContent | Custom content for header title area | `ReactNode` | no | |
-
-
-
-Any other props will be provided to the root element [**Material UI Toolbar**](https://material-ui.com/api/toolbar/).
-
-### Style Overrides
-
-You can override the default styles used by Brightlayer UI by:
-
-- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
-
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
-
-| Name | Global CSS Class | Description |
-| ---------------- | ---------------------------------- | ------------------------------------------------ |
-| root | .BluiDrawerHeader-root | Styles applied to the root element |
-| background | .BluiDrawerHeader-background | Styles applied to the header background |
-| content | .BluiDrawerHeader-content | Styles applied to the content container |
-| navigation | .BluiDrawerHeader-navigation | Styles applied to the icon element |
-| nonClickableIcon | .BluiDrawerHeader-nonClickableIcon | Styles applied to the non-clickable icon element |
-| railIcon | .BluiDrawerHeader-railIcon | Styles applied to the icon when using rail style |
-| subtitle | .BluiDrawerHeader-subtitle | Styles applied to the subtitle element |
-| title | .BluiDrawerHeader-title | Styles applied to the title element |
-
-## Drawer Subheader
-
-The `Custom Subheader Content
-
-
-| Prop Name | Description | Type | Required | Default |
-| --------------------- | -------------------------------------------------- | --------- | -------- | ------- |
-| divider | Optional divider which appears below the Subheader | `boolean` | no | `true` |
-| hideContentOnCollapse | Hide subheader contents when drawer is closed | `boolean` | no | `true` |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
-
-## Drawer Body
-
-The `
-
-| Prop Name | Description | Type | Required | Default |
-| ------------------------------- | ---------------------------------------------------------- | ------------------- | -------- | ------- |
-| classes | Style overrides | `DrawerBodyClasses` | no | |
-| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | - | - | |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
-
-#### Classes
-
-You can override the classes used by Brightlayer UI by passing a `classes` prop. The `
- 
-
-
-### Drawer Nav Group API
-
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| ------------------------------- | ---------------------------------------------------------- | ----------------------- | -------- | --------------------------- |
-| classes | Style overrides | `DrawerNavGroupClasses` | no | |
-| items | List of items to render | `NavItem[]` | yes | |
-| title | Text to display in the group header | `string` | no | |
-| titleColor | Color used for the title text | `string` | no | varies for light/dark theme |
-| titleContent | Custom element, substitute for title | `ReactNode` | no | |
-| titleDivider | Divider for the title | `boolean` | no | true |
-| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | - | - | |
-
-
-
-Any other props will be provided to the root element [**Material UI List**](https://material-ui.com/api/list/).
-
-### Style Overrides
-
-You can override the default styles used by Brightlayer UI by:
-
-- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
-
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
-
-| Name | Global CSS Class | Description |
-| --------- | ----------------------------- | -------------------------------------------- |
-| root | .BluiDrawerNavGroup-root | Styles applied to the root element |
-| title | .BluiDrawerNavGroup-title | Styles applied to the title text element |
-| subheader | .BluiDrawerNavGroup-subheader | Styles applied to the List subheader element |
-
-## Drawer Footer
-
-The `Custom Footer goes here
-
-
-| Prop Name | Description | Type | Required | Default |
-| --------------------- | ------------------------------------------- | --------- | -------- | ------- |
-| backgroundColor | The color used for the background | `string` | no | |
-| divider | Optional divider which appears above footer | `boolean` | no | `true` |
-| hideContentOnCollapse | Hide footer contents when drawer is closed | `boolean` | no | `true` |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
-
-#### Classes
-
-You can override the classes used by Brightlayer UI by passing a `classes` prop. The `
- 
-
-
-### Drawer Nav Item API
-
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------- | ------- |
-| classes | Style overrides | `DrawerNavItemClasses` | no | |
-| depth\* | The nested depth of the item | `number` | no | 0 |
-| hidden | Sets whether to hide the nav item | `boolean` | no | |
-| hidePadding | Remove left padding if no icon is used | `boolean` | no | false |
-| icon | A component to render for the left icon | `JSX.Element` | no | |
-| isInActiveTree\* | Sets whether the item is a parent of the currently active item (managed automatically) | `boolean` | no | |
-| itemID | A unique identifier of the NavItem. Item will have 'active' style when this matches activeItem | `string` | yes | |
-| items | The items nested under this item | `NestedNavItem[]` | no | |
-| notifyActiveParent\* | Callback function to the parent element to update active hierarchy styles | `(ids: string[]) => void` | no | |
-| onClick | A function to execute when clicked | `function` | no | |
-| rightComponent | An icon/component to display to the right | `ReactNode` | no | |
-| statusColor | Status stripe and icon color | `string` | no | |
-| subtitle | The text to show on the second line | `string` | no | |
-| title | The text to show on the first line | `string` | yes | |
-| disableRailTooltip | Sets whether to disable the tooltip on hover for the condensed `rail` variant | `boolean` | no | |
-| InfoListItemProps | Used to override [InfoListItem](https://brightlayer-ui-components.github.io/react/?path=/info/components-info-list-item--get-read-me-story) default props | `InfoListItemProps` | no | |
-| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | - | - | |
-
-
-
-> \*These props are managed automatically when using the `
- 
-
-
-### Drawer Rail Item API
-
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| ------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------- | -------- | ------- |
-| classes | Style overrides | `DrawerRailItemClasses` | no | |
-| condensed\* | Show condensed nav items without labels (`rail` variant only) | `boolean` | no | `false` |
-| hidden | Sets whether to hide the rail item | `boolean` | no | |
-| icon | A component to render for the left icon | `JSX.Element` | yes | |
-| itemID | An unique identifier of the NavItem. Item will have 'active' style when this matches activeItem | `string` | yes | |
-| onClick | A function to execute when clicked | `function` | no | |
-| statusColor | Status stripe and icon color | `string` | no | |
-| title | The text to show on the first line | `string` | no | |
-| ButtonBaseProps | Used to override [ButtonBase](https://material-ui.com/api/button-base/) default props | `InfoListItemProps` | no | |
-| disableRailTooltip | Sets whether to disable the tooltip on hover | `boolean` | no | |
-| [...sharedProps](#shared-props) | Props that can be set at any level in the drawer hierarchy | - | - | |
-
-
-
-> \*These props are managed automatically when using the `
-
-| Name | Description | Type | Required | Default |
-| ------------------------- | --------------------------------------------------------- | --------- | -------- | --------------------------- |
-| activeItemBackgroundColor | Background color for the 'active' item | `string` | no | varies for light/dark theme |
-| activeItemFontColor | Font color for the 'active' item | `string` | no | varies for light/dark theme |
-| activeItemIconColor | Icon color for the 'active' item | `string` | no | varies for light/dark theme |
-| backgroundColor | Color used for the background of the element | `string` | no | |
-| divider | Whether to show a line between all items | `boolean` | no | false |
-| itemFontColor | The color used for the item text | `string` | no | varies for light/dark theme |
-| itemIconColor | The color used for the icon | `string` | no | varies for light/dark theme |
-| ripple | Whether to apply material ripple effect to items on click | `boolean` | no | true |
-
-
-
-The following are additional shared props that will apply when using a non-rail variant of the `
-
-| Prop Name | Description | Type | Required | Default |
-| ----------------------------- | ----------------------------------------------------------------------------- | ----------------------- | -------- | ------------------------------------------------------------ |
-| activeItemBackgroundShape | shape of the active item background highlight | `'round'` \| `'square'` | no | square |
-| chevron | Whether to have chevrons for all menu items | `boolean` | no | |
-| chevronColor | Color override for the chevron icon | `string` | no | |
-| collapseIcon | Icon used to collapse drawer | `JSX.Element` | no | `expandIcon` rotated 180 degrees |
-| expandIcon | Icon used to expand drawer | `JSX.Element` | no | `
-
-# Drawer Layout
-
-The `
- 
-
-
-## Drawer Layout Usage
-
-```tsx
-import { Drawer, DrawerLayout } from '@brightlayer-ui/react-components';
-...
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| --------- | ------------------------------- | ------------------------------------ | -------- | ------- |
-| classes | Style overrides | `DrawerLayoutClasses` | no | |
-| drawer | Drawer component to be embedded | `ReactElement` | yes | |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
-
-> **Note on Scrolling**: When using client-side routing in your application, you may notice that the window scroll position does not reset when navigating to new routes. To address this issue, you will need to manually update the scroll position when new pages are loaded. If you are using React Router they have [several examples](https://reacttraining.com/react-router/web/guides/scroll-restoration) on how to implement this in your application.
-
-### Style Overrides
-
-You can override the default styles used by Brightlayer UI by:
-
-- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
-
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
-
-| Name | Global CSS Class | Description |
-| -------- | ----------------------------- | -------------------------------------------------------------- |
-| root | .BluiDrawerLayout-root | Styles applied to the root element |
-| content | .BluiDrawerLayout-content | Styles applied to the body content container |
-| drawer | .BluiDrawerLayout-drawer | Styles applied to the drawer container |
-| expanded | .Mui-expanded | Styles applied to the root element when the drawer is expanded |
diff --git a/docs/Hero.md b/docs/Hero.md
deleted file mode 100644
index 1ec17eed2..000000000
--- a/docs/Hero.md
+++ /dev/null
@@ -1,102 +0,0 @@
-# Hero
-
-The Brightlayer UI `
-
-
-
-The `
-
- 
-
-
-```tsx
-import { Hero } from '@brightlayer-ui/react-components';
-
-// Simple usage passing props
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| ------------------- | ------------------------------------------ | -------------------- | -------- | ------------- |
-| ChannelValueProps | Props passed through to ChannelValue child | `ChannelValueProps` | no | |
-| classes | Style overrides | `HeroClasses` | no | |
-| icon | The primary icon | `ReactNode` | yes | |
-| iconBackgroundColor | The color used behind the primary icon | `string` | no | 'transparent' |
-| iconSize | The size of the primary icon (min 10px) | `number` \| `string` | no | 36 |
-| label | The text shown below the `ChannelValue` | `string` | yes | |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
-
-### Style Overrides
-
-You can override the default styles used by Brightlayer UI by:
-
-- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
-
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
-
-| Name | Global CSS Class | Description |
-| ------ | ---------------- | ----------------------------------- |
-| root | .BluiHero-root | Styles applied to the root element |
-| icon | .BluiHero-icon | Styles applied to the icon element |
-| label | .BluiHero-label | Styles applied to the label element |
-| values | .BluiHero-values | Styles applied to the value element |
-
-# Hero Banner
-
-The `
-
-| Prop Name | Description | Type | Required | Default |
-| --------- | ---------------------------------- | ------------------- | -------- | ------- |
-| classes | Style overrides | `HeroBannerClasses` | no | |
-| divider | Whether to show the line separator | `boolean` | no | false |
-| limit | Max number of children to display | `number` | no | 4 |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
diff --git a/docs/ListItemTag.md b/docs/ListItemTag.md
deleted file mode 100644
index 9306f064b..000000000
--- a/docs/ListItemTag.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# List Item Tag
-
-`
-
-## Usage
-
-```tsx
-import { ListItemTag } from '@brightlayer-ui/react-components';
-
-
-
-| Prop Name | Description | Type | Required | Default |
-| --------------- | ----------------------------- | -------- | -------- | --------------------------- |
-| label | The label text | `string` | yes | |
-| fontColor | Color of the label | `string` | no | varies for light/dark theme |
-| backgroundColor | Color of the label background | `string` | no | varies for light/dark theme |
-
-
-
-Any other props will be provided to the root element [**Material UI Typography**](https://material-ui.com/api/typography/).
-
-### Style Overrides
-
-You can override the default styles used by Brightlayer UI by:
-
-- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
-
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
-
-| Name | Global CSS Class | Description |
-| ---- | --------------------- | ---------------------------------- |
-| root | .BluiListItemTag-root | Styles applied to the root element |
diff --git a/docs/README.md b/docs/README.md
index b6d250d4b..0c83cde2c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,14 +1,70 @@
-# React Components
-
-We currently have the following components available for React applications:
-
-- [Channel Value](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/ChannelValue.md)
-- [Drawer](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/Drawer.md)
-- [Drawer Layout](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/DrawerLayout.md)
-- [Empty State](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/EmptyState.md)
-- [Hero & Hero Banner](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/Hero.md)
-- [Info List Item](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/InfoListItem.md)
-- [List Item Tag](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/ListItemTag.md)
-- [Score Card](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/ScoreCard.md)
-- [Spacer](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/Spacer.md)
-- [User Menu](https://github.com/brightlayer-ui/react-component-library/blob/dev/docs/UserMenu.md)
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
diff --git a/docs/Spacer.md b/docs/Spacer.md
deleted file mode 100644
index e9355e9ca..000000000
--- a/docs/Spacer.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Spacer
-
-An invisible utility component that acts as a spacer element in various layouts. It works with flexbox sizing or fixed sizing.
-
-
- 
-
-
-## Usage
-
-```tsx
-import { Spacer } from '@brightlayer-ui/react-components';
-...
--
- {/* Left Content */}
-
- {/* Right Content */}
-
-```
-
-## API
-
-
-
-| Prop Name | Description | Type | Required | Default | Examples |
-| --------- | --------------------------------------- | -------------------- | -------- | ------- | ------------------------- |
-| classes | Classes object to override styles | `SpacerClasses` | no | | {root: 'customRootClass'} |
-| flex | Flex grow/shrink value for flex layouts | `number` | no | 1 | |
-| height | Height (in px) for static layouts | `number` \| `string` | no | | |
-| width | Width (in px) for static layouts | `number` \| `string` | no | | |
-
-
-
-Any other props supplied will be provided to the root element (`div`).
-
-### Style Overrides
-
-You can override the default styles used by Brightlayer UI by:
-
-- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
-
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
-
-| Name | Global CSS Class | Description |
-| ---- | ---------------- | ---------------------------------- |
-| root | .BluiSpacer-root | Styles applied to the root element |
diff --git a/docs/craco.config.js b/docs/craco.config.js
new file mode 100644
index 000000000..96950c118
--- /dev/null
+++ b/docs/craco.config.js
@@ -0,0 +1,23 @@
+const { addAfterLoader, loaderByName } = require('@craco/craco');
+
+const remarkGfm = require('remark-gfm');
+
+module.exports = {
+ webpack: {
+ configure(webpackConfig) {
+ addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
+ test: /\.mdx?$/,
+
+ loader: '@mdx-js/loader',
+
+ options: {
+ providerImportSource: '@mdx-js/react',
+
+ remarkPlugins: [remarkGfm],
+ },
+ });
+
+ return webpackConfig;
+ },
+ },
+};
diff --git a/docs/googleAnalytics/ga.dev.js b/docs/googleAnalytics/ga.dev.js
new file mode 100644
index 000000000..ac1506659
--- /dev/null
+++ b/docs/googleAnalytics/ga.dev.js
@@ -0,0 +1 @@
+export const gaID = 'UA-139646200-4';
diff --git a/docs/googleAnalytics/ga.master.js b/docs/googleAnalytics/ga.master.js
new file mode 100644
index 000000000..77e769552
--- /dev/null
+++ b/docs/googleAnalytics/ga.master.js
@@ -0,0 +1 @@
+export const gaID = 'UA-139646200-3';
diff --git a/docs/images/ToolbarMenuAnatomy.png b/docs/images/ToolbarMenuAnatomy.png
deleted file mode 100644
index 00e15dcf4..000000000
Binary files a/docs/images/ToolbarMenuAnatomy.png and /dev/null differ
diff --git a/docs/images/channelValue.png b/docs/images/channelValue.png
deleted file mode 100644
index 70d0d0ae6..000000000
Binary files a/docs/images/channelValue.png and /dev/null differ
diff --git a/docs/images/emptyStateAnatomy.png b/docs/images/emptyStateAnatomy.png
deleted file mode 100644
index dfca6a64b..000000000
Binary files a/docs/images/emptyStateAnatomy.png and /dev/null differ
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 000000000..a7443c9de
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,107 @@
+{
+ "name": "react-dev-docs",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@brightlayer-ui/colors": "^3.1.1",
+ "@brightlayer-ui/icons": "^1.11.0",
+ "@brightlayer-ui/icons-mui": "^3.0.0",
+ "@brightlayer-ui/react-components": "^6.1.0",
+ "@brightlayer-ui/react-themes": "^7.0.0",
+ "@craco/craco": "^6.4.3",
+ "@emotion/react": "^11.9.0",
+ "@emotion/styled": "^11.8.1",
+ "@fontsource/roboto": "^4.5.8",
+ "@fontsource/roboto-mono": "^4.5.8",
+ "@mdx-js/loader": "^2.1.3",
+ "@mdx-js/mdx": "^2.1.5",
+ "@mdx-js/react": "^2.1.3",
+ "@mui/icons-material": "^5.8.3",
+ "@mui/material": "^5.8.3",
+ "@mui/styles": "^5.8.3",
+ "@reduxjs/toolkit": "^1.8.2",
+ "@types/prismjs": "^1.26.0",
+ "lodash.debounce": "^4.0.8",
+ "prismjs": "^1.28.0",
+ "react": "^18.1.0",
+ "react-app-polyfill": "^3.0.0",
+ "react-app-rewired": "^2.2.1",
+ "react-dom": "^18.1.0",
+ "react-ga": "^3.3.1",
+ "react-redux": "^7.2.0",
+ "react-router": "^6.3.0",
+ "react-router-dom": "^6.3.0",
+ "react-scripts": "5.0.1",
+ "redux": "^4.2.0",
+ "web-vitals": "^2.1.4"
+ },
+ "scripts": {
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
+ "eject": "craco eject",
+ "webpack-dev-server": "webpack-dev-server",
+ "dev": "webpack-dev-server --mode=development",
+ "prod": "webpack --mode=production",
+ "prettier": "prettier \"src/**/**/*.{ts,tsx,js,jsx,json,css,scss,html,mdx,md}\" --write",
+ "prettier:check": "prettier \"src/**/**/*.{ts,tsx,js,jsx,json,css,scss,html,mdx,md}\" --check",
+ "lint": "eslint \"**/**/*.{ts,tsx}\"",
+ "lint:fix": "eslint \"**/**/*.{ts,tsx}\" --fix",
+ "ga:master": "cp -r ./googleAnalytics/ga.master.js ./src/ga.js",
+ "ga:dev": "cp -r ./googleAnalytics/ga.dev.js ./src/ga.js"
+ },
+ "prettier": "@brightlayer-ui/prettier-config",
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "@brightlayer-ui/eslint-config": "^3.0.1",
+ "@brightlayer-ui/prettier-config": "^1.0.3",
+ "@emotion/css": "^11.9.0",
+ "@testing-library/jest-dom": "^5.16.4",
+ "@testing-library/react": "^13.3.0",
+ "@testing-library/user-event": "^14.2.0",
+ "@types/color": "^3.0.3",
+ "@types/jest": "^27.5.2",
+ "@types/lodash.debounce": "^4.0.7",
+ "@types/mdx": "^2.0.2",
+ "@types/node": "^17.0.41",
+ "@types/react": "^18.0.12",
+ "@types/react-dom": "^18.0.5",
+ "@types/react-router-dom": "^5.3.3",
+ "@typescript-eslint/eslint-plugin": "^5.35.1",
+ "@typescript-eslint/parser": "^5.40.0",
+ "color": "^4.2.3",
+ "eslint": "^8.22.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-config-react-app": "^7.0.1",
+ "eslint-plugin-react": "^7.30.1",
+ "html-webpack-plugin": "^5.5.0",
+ "path": "^0.12.7",
+ "prettier": "^2.7.1",
+ "react-device-detect": "^2.2.2",
+ "remark-gfm": "^1.0.0",
+ "typescript": "^4.7.3",
+ "webpack": "^5.74.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.9.2"
+ },
+ "resolutions": {
+ "autoprefixer": "10.4.5"
+ }
+}
diff --git a/docs/public/404.html b/docs/public/404.html
new file mode 100644
index 000000000..28e0395fd
--- /dev/null
+++ b/docs/public/404.html
@@ -0,0 +1,45 @@
+
+
+
+
+
- 
-
+
-
- 
- 
-
-
-```tsx
-import { AppBar, ThreeLiner } from '@brightlayer-ui/react-components';
-...
-// Default: AppBar will resize between expandedHeight and collapsed height when the window is scrolled past the scrollThreshold
-
-
-
+## App Bar API
+
+
| Prop Name | Description | Type | Required | Default |
-| ----------------- | ------------------------------------------------ | ----------------------------------------- | -------- | ------------- |
+| :---------------- | :----------------------------------------------- | :---------------------------------------- | :------- | :------------ |
| animationDuration | Length of the collapse / expand animation (ms) | `number` | no | theme default |
| backgroundImage | Image to use as the app bar background | `string` | no | |
| classes | Style Overrides | `AppBarClasses` | no | |
@@ -64,24 +86,29 @@ import { AppBar, ThreeLiner } from '@brightlayer-ui/react-components';
| scrollThreshold | Distance to scroll before collapsing the app bar | `number` | no | 136 |
| variant | Behavior of the App Bar | `'expanded'` \| `'collapsed'` \| `'snap'` | no | 'snap' |
-
+
-Any other props supplied will be provided to the root element ([`AppBar`](https://material-ui.com/api/app-bar/)).
+Any other props supplied will be provided to the root element ([`AppBar`](https://mui.com/api/app-bar/)).
### Style Overrides
You can override the default styles used by Brightlayer UI by:
- using the `sx` prop
-- passing a `classes` prop with keys from the `Name` column below
-- using the `Global CSS Class` in your main stylesheet
+- passing a `classes` prop with keys from the Name column below
+- using the Global CSS Class in your main stylesheet
-For more details on styling options check out our [Styling Guide](https://github.com/brightlayer-ui/react-component-library/tree/master/docs#style-guide).
+{/* prettier-ignore */}
+For more details on styling options check out our Styling Guide.
+ +
-
-
-
-
+The `
- -
-
- 
-
+## Channel Value Usage
-```tsx
-import { ChannelValue } from '@brightlayer-ui/react-components';
-...
-
-
+
| Prop Name | Description | Type | Required | Default |
| --------- | ---------------------------------------------- | -------------------------------- | -------- | --------- |
@@ -32,22 +55,25 @@ import { ChannelValue } from '@brightlayer-ui/react-components';
| icon | The inline icon to display | `JSX.Element` | no | |
| prefix | Show units before the value | `boolean` | no | false |
| units | The text to display for the units (light text) | `string` | no | |
-| unitSpace | Show/Hide spacing between the value and units | `'auto'` \| `'hide'` \| `'show'` | yes | 'auto' |
+| unitSpace | Show/Hide spacing between the value and units | `'auto'` \| `'hide'` \| `'show'` | no | 'auto' |
| value | The value (bold text) to display | `string` \| `number` | yes | |
-
+
-Any other props supplied will be provided to the root element (`span`).
+Any other props supplied will be provided to the root element ([`For more details on styling options check out our Styling Guide.
+ +For more details on styling options check out our Styling Guide.
+ +
-
-
+import Box from '@mui/material/Box';
+import InfoListItem from '../images/infoListItem.png';
+import { DOCS_BRANCH } from '../../../shared/constants';
-## Usage
-
-```tsx
-import { InfoListItem } from '@brightlayer-ui/react-components';
-import { GradeA, Leaf, CurrentCircled, VoltageCircled, Temp } from '@brightlayer-ui/icons-mui';
-import * as Colors from '@brightlayer-ui/colors';
-...
-
