Added component boiler plate, implemented ~8

2023-07-02 21:15:20 +05:30
parent f948d9670e
commit 3a108b7c34
326 changed files with 16051 additions and 1549 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
+STORYBOOK_DISABLE_TELEMETRY=true
--- a/.github/workflows.yml
+++ b/.github/workflows.yml
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  core: {
+    disableTelemetry: true,
+  },
+}
+export default config
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react"
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview
--- a/build.sh
+++ b/build.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+
+COMPONENT_CATEGORIES=( index atoms molecules )
+FORMATS=( es cjs )
+
+for format in "${FORMATS[@]}"
+do
+	# Order is important else index overrides atoms and molecules
+	for component_type in "${COMPONENT_CATEGORIES[@]}"
+	do
+		COMPONENT_CATEGORY=$component_type FORMAT=$format npm run build:publish
+	done
+done
+
+npm run build:types
--- a/bulkgen.sh
+++ b/bulkgen.sh
@@ -1,6 +1,6 @@
 #!/bin/zsh

-declare -a arr=("Alert", "Badge" "Breadcrumb" "BrowserIncompatibility" "Button" "Checkbox" "ColorPicker" "ContextMenu" "DateInput" "DatePicker" "DateRange" "Calendar" "PickerRange" "DetailsPanel" "Dialog" "FacetedFilter" "InlineMenu" "LabelValue" "LearnLink" "Link" "List" "Modal" "Notification" "NumericStepper" "Pagination" "Picklist" "Pill" "Pillbox" "Popover" "ProgressIndicator" "ProgressStepper" "Radio" "SearchField" "SecondaryNavigation" "SegmentedControl" "Select" "Slider" "Splitter" "Tab" "TabBar" "Table" "Tag" "TextArea" "TextInput" "Mask" "TimeEntry" "Toggle" "Toolbar" "Tooltip" "TypeAhead" "Uploader" "Widget")
+declare -a arr=("Alert", "Badge" "Breadcrumb" "BrowserIncompatibility" "Button" "Checkbox" "ColorPicker" "ContextMenu" "DateInput" "DatePicker" "DateRange" "Calendar" "PickerRange" "DetailsPanel" "Dialog" "FacetedFilter" "Icon" "InlineMenu" "LabelValue" "LearnLink" "Link" "List" "Modal" "Notification" "NumericStepper" "Pagination" "Picklist" "Pill" "Pillbox" "Popover" "ProgressIndicator" "ProgressStepper" "Radio" "SearchField" "SecondaryNavigation" "SegmentedControl" "Select" "Slider" "Splitter" "Tab" "TabBar" "Table" "Tag" "TextArea" "TextInput" "Mask" "TimeEntry" "Toggle" "Toolbar" "Tooltip" "TypeAhead" "Uploader" "Widget")
 for i in "${arr[@]}"
 do
   npm run component "$i"
--- a/index.html
+++ b/index.html
@@ -4,11 +4,11 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Redux App</title>
+    <title>Armory React Repository</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div class="theme-light" id="root"></div>
+    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,16 +1,16 @@
 {
  "name": "@armco/armory-react-components",
  "description": "React Component Library for Armco's stack of products and services",
-  "version": "0.0.8",
+  "version": "0.0.21",
  "type": "module",
  "author": "Armco (@restruct-corporate-advantage)",
  "scripts": {
    "dev": "vite",
    "start": "vite",
-    "build": "tsc --project ./tsconfig-vite.json && vite build",
-    "build:publish": "npm run build:esm && npm run build:cjs",
-    "build:esm": "tsc",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "shbuild": "./build.sh",
+    "build": "tsc && vite build",
+    "build:publish": "vite --config vite-publish.config.ts build",
+    "build:types": "tsc --project ./tsconfig-publish.json",
    "generate": "plop",
    "atom": "plop atom",
    "molecule": "plop molecule",
@@ -23,21 +23,30 @@
    "type-check": "tsc",
    "publish:dry": "npm publish --dry-run",
    "publish:public": "npm publish --access public",
-    "prepublishOnly": "npm run build:publish && npm --no-git-tag-version version patch"
+    "shpublish": "./publish.sh",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
  },
  "dependencies": {
-    "@armco/armory-react-components": "^0.0.8",
+    "@armco/armory-react-components": "^0.0.20",
    "@popperjs/core": "^2.11.8",
    "@reduxjs/toolkit": "^1.8.1",
+    "@storybook/cli": "^7.0.23",
    "bootstrap": "^5.3.0",
-    "react": "^18.2.0",
    "react-app-polyfill": "^3.0.0",
+    "react-bootstrap": "^2.7.4",
    "react-dev-utils": "^12.0.1",
-    "react-dom": "^18.2.0",
    "react-redux": "^8.0.1",
    "react-router-dom": "^6.13.0"
  },
  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-interactions": "^7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/blocks": "^7.0.23",
+    "@storybook/react": "^7.0.23",
+    "@storybook/react-vite": "^7.0.23",
+    "@storybook/testing-library": "^0.0.14-next.2",
    "@testing-library/dom": "^9.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^14.0.0",
@@ -50,11 +59,16 @@
    "eslint": "^8.0.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.12",
    "jsdom": "^21.1.0",
    "plop": "^3.1.2",
    "prettier": "^2.7.1",
    "prettier-config-nick": "^1.0.2",
+    "prop-types": "^15.8.1",
+    "react": ">=16",
+    "react-dom": "^18.2.0",
    "sass": "^1.63.4",
+    "storybook": "^7.0.23",
    "typescript": "^5.0.2",
    "vite": "^4.0.0",
    "vitest": "^0.30.1"
@@ -62,7 +76,8 @@
  "eslintConfig": {
    "extends": [
      "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
    ],
    "plugins": [
      "prettier"
@@ -73,7 +88,14 @@
    }
  },
  "prettier": "prettier-config-nick",
-  "main": "index.tsx",
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./cjs/index.js"
+    }
+  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ReStruct-Corporate-Advantage/armory-react-components.git"
@@ -89,7 +111,8 @@
    "foundation"
  ],
  "files": [
-    "dist"
+    "build/cjs",
+    "build/es"
  ],
  "license": "ISC",
  "bugs": {
@@ -97,6 +120,7 @@
  },
  "homepage": "https://github.com/ReStruct-Corporate-Advantage/armory-react-components#readme",
  "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-dom": "^18.2.0"
  }
 }
--- a/plop-templates/Component/Component.component.scss.hbs
+++ b/plop-templates/Component/Component.component.scss.hbs
@@ -1,3 +1,3 @@
-.c-{{pascalCase name}} {
+.ar-{{pascalCase name}} {
  
 }
--- a/plop-templates/Component/Component.tsx.hbs
+++ b/plop-templates/Component/Component.tsx.hbs
@@ -3,7 +3,7 @@ import "./{{pascalCase name}}.component.scss"
 interface {{pascalCase name}}Props {}

 const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
-  return <div className="c-{{pascalCase name}}">In Component {{pascalCase name}}</div>
+  return <div className="ar-{{pascalCase name}}">In Component {{pascalCase name}}</div>
 }

 export default {{pascalCase name}}
--- a/plop-templates/Page/Page.page.scss.hbs
+++ b/plop-templates/Page/Page.page.scss.hbs
@@ -1,3 +1,3 @@
-.c-{{pascalCase name}} {
+.ar-{{pascalCase name}} {
  
 }
--- a/plop-templates/Page/Page.slice.ts.hbs
+++ b/plop-templates/Page/Page.slice.ts.hbs
@@ -4,8 +4,8 @@ export interface {{pascalCase name}}State {}

 const initialState: {{pascalCase name}}State = {}

-export const {{snakeCase name}}Slice = createSlice({
-  name: "{{snakeCase name}}",
+export const {{camelCase name}}Slice = createSlice({
+  name: "{{camelCase name}}",
  initialState,
  reducers: {
    increment: (state) => {},
@@ -13,6 +13,6 @@ export const {{snakeCase name}}Slice = createSlice({
  extraReducers: (builder) => {},
 })

-export const { increment } = {{snakeCase name}}Slice.actions
+export const { increment } = {{camelCase name}}Slice.actions

-export default {{snakeCase name}}Slice.reducer
+export default {{camelCase name}}Slice.reducer
--- a/plop-templates/Page/Page.tsx.hbs
+++ b/plop-templates/Page/Page.tsx.hbs
@@ -3,7 +3,7 @@ import "./{{pascalCase name}}.page.scss"
 interface {{pascalCase name}}Props {}

 const {{pascalCase name}} = (props: {{pascalCase name}}Props): JSX.Element => {
-  return <div className="c-{{pascalCase name}}">In Page {{pascalCase name}}</div>
+  return <div className="ar-{{pascalCase name}}">In Page {{pascalCase name}}</div>
 }

 export default {{pascalCase name}}
--- a/publish.sh
+++ b/publish.sh
@@ -0,0 +1,5 @@
+#!/bin/sh
+
+source ./build.sh
+npm --no-git-tag-version version patch
+npm publish --access public
--- a/src/app/Router.tsx
+++ b/src/app/Router.tsx
@@ -1,4 +1,9 @@
+import { useEffect } from "react"
 import { useRoutes } from "react-router-dom"
+import { AlertProps } from "./components/atoms/Alert/Alert"
+import { useAppSelector } from "./hooks"
+import { notification } from "./store"
+import { Alert } from "./components"
 import * as pages from "./pages"
 import Helper from "./utils/helper"
 import ROUTES from "./routes"
@@ -7,6 +12,21 @@ Helper.populateComponentsInRoutes(ROUTES, pages)

 interface RouterProps {}

-const Router = (props: RouterProps) => useRoutes(ROUTES)
+const Router = (props: RouterProps) => {
+  const alertInfo: AlertProps = useAppSelector(notification)
+
+  useEffect(() => {
+    document
+      .getElementsByTagName("html")[0]
+      .setAttribute("ar-theme", "th-light-1")
+  }, [])
+
+  return (
+    <div>
+      {useRoutes(ROUTES)}
+      <Alert {...alertInfo} />
+    </div>
+  )
+}

 export default Router
--- a/src/app/components/ComponentList/ComponentList.component.scss
+++ b/src/app/components/ComponentList/ComponentList.component.scss
@@ -1,3 +1,3 @@
-.c-ComponentList {
+.ar-ComponentList {
  
 }
--- a/src/app/components/ComponentList/ComponentList.tsx
+++ b/src/app/components/ComponentList/ComponentList.tsx
@@ -1,15 +1,29 @@
+import { useNavigate } from "react-router-dom"
 import { TreeList } from ".."
 import Adapter from "../../utils/adapters"
 import COMPONENTS from "../../config/components"
+import Network from "../../utils/network"
 import "./ComponentList.component.scss"

 interface ComponentListProps {}

 const ComponentList = (props: ComponentListProps): JSX.Element => {
  const formattedTreeData = Adapter.adaptToTree(COMPONENTS)
+  const navigate = useNavigate()
+  const handleComponentSelect = (data: TreeListData) => {
+    const params = data?.data?.props
+    data?.data?.component &&
+      navigate(
+        Network.stringifyUrl(`/component/${data?.data?.component}`, params),
+        {
+          state: data,
+        },
+      )
+  }
  return (
-    <div className="c-ComponentList h-100 w-100 overflow-auto">
+    <div className="ar-ComponentList h-100 w-100 overflow-auto">
      <TreeList
+        onItemSelect={handleComponentSelect}
        data={formattedTreeData}
        title="Component List"
        firstExpanded={true}
--- a/src/app/components/Content/Content.component.scss
+++ b/src/app/components/Content/Content.component.scss
@@ -1,5 +1,5 @@
@import "../../static/styles/variables";

-.c-Content {
+.ar-Content {
  background-color: var(--ar-bg-base);
 }
--- a/src/app/components/Content/Content.tsx
+++ b/src/app/components/Content/Content.tsx
@@ -9,7 +9,9 @@ interface ContentProps {
 const Content = (props: ContentProps): JSX.Element => {
  const { children, classes } = props
  return (
-    <div className={`c-Content${classes ? " " + classes : ""}`}>{children}</div>
+    <div className={`ar-Content${classes ? " " + classes : ""}`}>
+      {children}
+    </div>
  )
 }

--- a/src/app/components/Drawer/Drawer.component.scss
+++ b/src/app/components/Drawer/Drawer.component.scss
@@ -1,3 +1,3 @@
-.c-Drawer {
-  border-right: 1px solid #eee;
+.ar-Drawer {
+  border-right: 1px solid var(--ar-color-layout-border);
 }
--- a/src/app/components/Drawer/Drawer.tsx
+++ b/src/app/components/Drawer/Drawer.tsx
@@ -10,7 +10,7 @@ const Drawer = (props: DrawerProps): JSX.Element => {
  const { children, classes } = props

  return (
-    <aside className={`c-Drawer${classes ? " " + classes : ""}`}>
+    <aside className={`ar-Drawer${classes ? " " + classes : ""}`}>
      {children}
    </aside>
  )
--- a/src/app/components/Editor/Editor.component.scss
+++ b/src/app/components/Editor/Editor.component.scss
@@ -1,3 +1,11 @@
-.c-Editor {
-  
+.ar-Editor {
+	border: 1px solid var(--ar-color-layout-border);
+	.ar-Editor__tools {
+		border-bottom: 1px solid var(--ar-color-layout-border);
+	}
 }
+
+.background {
+	background-repeat: no-repeat;
+	background-size: 100%;
+}
--- a/src/app/components/Editor/Editor.tsx
+++ b/src/app/components/Editor/Editor.tsx
@@ -1,9 +1,165 @@
+import { useEffect, useState } from "react"
+import { useLocation } from "react-router-dom"
+import { createPortal } from "react-dom"
+import { useAppDispatch, useAppSelector } from "../../hooks"
+import {
+  selectTreeItem,
+  selectedTreeItem,
+} from "../../pages/ComponentsViewerPage/ComponentsViewerPage.slice"
+import * as Armory from ".."
+import Helper from "../../utils/helper"
+import COMPONENTS from "../../config/components"
+import * as images from "../../static/images"
 import "./Editor.component.scss"

 interface EditorProps {}

-const Editor = (props: EditorProps): JSX.Element => {
-  return <div className="c-Editor">In Component Editor</div>
+const Editor = (props: EditorProps): JSX.Element | string => {
+  const [contentRef, setContentRef] = useState<HTMLIFrameElement | null>(null)
+  const [notificationProps, setNotificationProps] = useState<any>(null)
+  const selectedTreeItemObj = useAppSelector(selectedTreeItem)
+  const dispatch = useAppDispatch()
+  const selectedItemName =
+    selectedTreeItemObj?.data?.component || selectedTreeItemObj?.label
+  const selectedItemData = selectedTreeItemObj && selectedTreeItemObj.data
+  let SelectedComponent: JSX.ElementType | null | undefined =
+    selectedItemName && Armory[selectedItemName as keyof object]
+  let selectedItemProps = {}
+  if (!SelectedComponent && selectedItemData && selectedItemData.component) {
+    SelectedComponent =
+      selectedItemData && Armory[selectedItemData.component as keyof object]
+  }
+  selectedItemProps = selectedItemData && selectedItemData.props
+  const hierarchy = selectedItemData && selectedItemData.hierarchy
+
+  const location = useLocation()
+
+  useEffect(() => {
+    window.onmessage = (e) => {
+      "ar" in e.data && setNotificationProps(e.data?.ar)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (location && location.state) {
+      dispatch(selectTreeItem(location.state))
+    } else {
+      const locationPathArr = location.pathname.split("/")
+      const componentName = locationPathArr[locationPathArr.length - 1]
+      const { selectedItem } = Helper.findComponentDescription(
+        componentName,
+        COMPONENTS,
+      )
+      dispatch(
+        selectTreeItem({
+          data: selectedItem,
+          label: selectedItem ? selectedItem.name : "",
+        }),
+      )
+    }
+  }, [location, dispatch])
+
+  useEffect(() => {
+    if (contentRef) {
+      const bsLink =
+        contentRef?.contentWindow?.document.getElementsByTagName("link")
+      if (!bsLink || bsLink.length === 0) {
+        Helper.injectBootstrapInFrame(contentRef)
+        Helper.injectVariablesInFrame(contentRef)
+        Helper.injectGlobalInFrame(contentRef)
+        Helper.injectEditorStyleInFrame(contentRef)
+        Helper.injectComponentStyleInFrame(
+          { name: "Alert" },
+          "ATOMS",
+          contentRef,
+        )
+      }
+    }
+  }, [contentRef])
+
+  useEffect(() => {
+    if (contentRef) {
+      const selectedItemName =
+        selectedTreeItemObj?.data?.component || selectedTreeItemObj?.label
+      const { selectedItem, hierarchy } = Helper.findComponentDescription(
+        selectedItemName,
+        COMPONENTS,
+      )
+      selectedItem &&
+        hierarchy &&
+        Helper.injectComponentStyleInFrame(selectedItem, hierarchy, contentRef)
+    }
+  }, [contentRef, hierarchy, selectedTreeItemObj])
+
+  // let selectedItemVariants
+  // selectedItem && (selectedItemVariants = selectedItem && selectedItem.variants)
+
+  // const currentVariants = selectedItemVariants && selectedItemVariants.map(variant => {
+
+  // })
+  let children = null
+  if (SelectedComponent) {
+    const frameBg: string = selectedItemData.test?.background
+    children = (
+      <div
+        className={`ar-Editor__main h-100 w-100 flex-center${
+          frameBg ? " background" : ""
+        }`}
+        style={{
+          // @ts-ignore
+          backgroundImage: frameBg ? `url(${images[frameBg]})` : "",
+        }}
+      >
+        {selectedItemData.type === "HOC" ? (
+          <SelectedComponent {...selectedItemProps} {...{ demo: true }}>
+            <div
+              className="ar-Editor__dummy-child"
+              style={{ height: "100vh", width: "100vw" }}
+            />
+          </SelectedComponent>
+        ) : (
+          <SelectedComponent {...selectedItemProps} {...{ demo: true }} />
+        )}
+        {notificationProps && <Armory.Alert {...notificationProps} />}
+      </div>
+    )
+  }
+
+  const mountNode = contentRef?.contentWindow?.document?.body
+  const iframeHtml =
+    contentRef?.contentWindow?.document?.getElementsByTagName("html")[0]
+  iframeHtml && iframeHtml.setAttribute("ar-theme", "th-light-1")
+
+  return (
+    <div className="ar-Editor w-100 h-100 d-flex flex-column">
+      <div className="ar-Editor__tools px-3 py-2">
+        <span className="float-end">
+          <Armory.Toggle
+            toggleOnName="Dark"
+            toggleOffName="Light"
+            onChange={(checked: boolean) => {
+              checked
+                ? iframeHtml &&
+                  iframeHtml.setAttribute("ar-theme", "th-light-1")
+                : iframeHtml && iframeHtml.setAttribute("ar-theme", "th-dark-1")
+            }}
+          />
+        </span>
+      </div>
+      {children ? (
+        <iframe
+          className="ar-Editor__frame w-100 h-100"
+          ref={setContentRef}
+          title="Armco form-componentComponent Viewer"
+        >
+          {mountNode && createPortal(children, mountNode)}
+          {/* <div className="ar-Editor__props-container d-inline-block h-100"></div> */}
+        </iframe>
+      ) : (
+        "Select an item from the side panel to view here"
+      )}
+    </div>
+  )
 }

 export default Editor
--- a/src/app/components/Footer/Footer.component.scss
+++ b/src/app/components/Footer/Footer.component.scss
@@ -1,6 +1,6 @@
@import "../../static/styles/variables";

-.c-Footer {
+.ar-Footer {
 	background-color: var(--ar-bg-base);
 	border-top: 1px solid #eee;
 }
--- a/src/app/components/Footer/Footer.tsx
+++ b/src/app/components/Footer/Footer.tsx
@@ -3,7 +3,7 @@ import "./Footer.component.scss"
 interface FooterProps {}

 const Footer = (props: FooterProps): JSX.Element => {
-  return <footer className="c-Footer w-100 mt-auto"></footer>
+  return <footer className="ar-Footer w-100 mt-auto"></footer>
 }

 export default Footer
--- a/src/app/components/Header/Header.component.scss
+++ b/src/app/components/Header/Header.component.scss
@@ -1,6 +1,4 @@
-@import "../../static/styles/variables";
-
-.c-Header {
+.ar-Header {
 	background-color: var(--ar-bg-base);
-	border-bottom: 1px solid #eee;
+	border-bottom: 1px solid var(--ar-color-layout-border);
 }
--- a/src/app/components/Header/Header.tsx
+++ b/src/app/components/Header/Header.tsx
@@ -3,7 +3,7 @@ import "./Header.component.scss"
 interface HeaderProps {}

 const Header = (props: HeaderProps): JSX.Element => {
-  return <header className="c-Header w-100"></header>
+  return <header className="ar-Header w-100"></header>
 }

 export default Header
--- a/src/app/components/IconsList/IconsList.component.scss
+++ b/src/app/components/IconsList/IconsList.component.scss
@@ -1,16 +1,16 @@
-.c-IconsList {
-  .c-IconsList__header-pagination-search {
+.ar-IconsList {
+  .ar-IconsList__header-pagination-search {
 		background-color: var(--ar-bg);
 		color: var(--ar-colora);
 		background-color: var(--ar-bg-secondary);
 	}

-	.c-IconsList__icon-tile-container {
+	.ar-IconsList__icon-tile-container {
 		background-color: var(--ar-bg);
 		color: var(--ar-color);
 	}

-	.c-IconTile {
+	.ar-IconTile {
 		cursor: pointer;
 		width: 7rem;
 		height: 8.5rem;
@@ -19,7 +19,7 @@
 			background-color: var(--ar-bg-hover);
 		}

-		.c-IconTile__image {
+		.ar-IconTile__image {
 			height: 6.5rem;
 		}

--- a/src/app/components/IconsList/IconsList.tsx
+++ b/src/app/components/IconsList/IconsList.tsx
@@ -1,4 +1,6 @@
-import { ChangeEvent, useState } from "react"
+import { ChangeEvent } from "react"
+import { useAppDispatch } from "../../hooks"
+import { notify } from "../../store"
 import { Pagination, Search } from ".."
 import Helper from "../../utils/helper"
 import "./IconsList.component.scss"
@@ -10,22 +12,22 @@ interface IconsListProps {

 interface IconTileProps {
  icon: IconResponse
+  onClick?: Function
 }

 const IconTile = (props: IconTileProps): JSX.Element => {
-  const { icon } = props
+  const { icon, onClick } = props

  return (
    <span
-      className="c-IconTile d-inline-block mx-2 mb-3 border"
+      className="ar-IconTile d-inline-block mx-2 mb-3 border"
      onClick={() => {
        const iconLink = `http://localhost:8080/icon/${icon.group}/${icon.name}`
        navigator.clipboard.writeText(iconLink)
-        // TODO: replace below line with a dispatcher to show notification
-        // alert("Copied link to clipboard: " + iconLink)
+        onClick && onClick(icon)
      }}
    >
-      <div className="c-IconTile__image text-center">
+      <div className="ar-IconTile__image text-center">
        <img
          className="h-100"
          src={`data:image/svg+xml;utf8,${icon.svg}`}
@@ -41,13 +43,22 @@ const IconTile = (props: IconTileProps): JSX.Element => {

 const IconsList = (props: IconsListProps): JSX.Element => {
  const { icons, onSearchChanged } = props
+  const dispatch = useAppDispatch()
+
  const slices =
    icons &&
    icons.length > 0 &&
    Helper.generateSlices(icons.length, 100, "index")
+
+  const onIconTileClick = (iconProps: IconResponse) => {
+    dispatch(
+      notify({ show: true, message: `Icon link for ${iconProps.name} copied` }),
+    )
+  }
+
  return (
-    <div className="c-IconsList h-100 w-100 overflow-auto p-3">
-      <div className="c-IconsList__header-pagination-search py-2 px-3 mb-3 border">
+    <div className="ar-IconsList h-100 w-100 overflow-auto p-3">
+      <div className="ar-IconsList__header-pagination-search py-2 px-3 mb-3 border">
        <div className="row">
          <div className="col-2 d-flex align-items-center">
            <h6 className="mb-0">Icon Repository</h6>
@@ -76,11 +87,13 @@ const IconsList = (props: IconsListProps): JSX.Element => {
          </div>
        </div>
      </div>
-      <div className="c-IconsList__icon-tile-container py-2 px-3 border d-flex justify-content-between flex-wrap">
+      <div className="ar-IconsList__icon-tile-container py-2 px-3 border d-flex justify-content-between flex-wrap">
        {icons &&
          icons
            .slice(0, 100)
-            .map((icon, index) => <IconTile key={index} icon={icon} />)}
+            .map((icon, index) => (
+              <IconTile key={index} icon={icon} onClick={onIconTileClick} />
+            ))}
      </div>
    </div>
  )
--- a/src/app/components/Main/Main.component.scss
+++ b/src/app/components/Main/Main.component.scss
@@ -1,9 +1,9 @@
-.c-Main {
-	.c-Drawer {
+.ar-Main {
+	.ar-Drawer {
 		width: 15%;
 	}
  
-	.c-Content {
+	.ar-Content {
 		width: 85%;
 	}
 }
--- a/src/app/components/Main/Main.tsx
+++ b/src/app/components/Main/Main.tsx
@@ -10,11 +10,9 @@ interface MainProps {
 const Main = (props: MainProps): JSX.Element => {
  const { drawerContent, mainContent } = props
  return (
-    <main className="c-Main d-flex flex-grow-1 w-100">
+    <main className="ar-Main d-flex flex-grow-1 w-100">
      <Drawer classes="d-flex h-100">{drawerContent}</Drawer>
-      <Content classes="d-flex justify-content-center align-items-center">
-        {mainContent}
-      </Content>
+      <Content classes="flex-center p-3">{mainContent}</Content>
    </main>
  )
 }
--- a/src/app/components/atoms/Alert/Alert.component.scss
+++ b/src/app/components/atoms/Alert/Alert.component.scss
@@ -1,3 +1,90 @@
-.c-Alert {
-  
+.ar-Alert {
+	width: 15rem;
+	transition: all 0.3s;
+	border-radius: 0.2rem;
+	opacity: 0;
+
+	&.show {
+		opacity: 1;
+	}
+
+  &.top-right {
+		top: 1rem;
+		right: -8rem;
+
+		&.show {
+			right: 1rem;
+		}
+	}
+  &.top-left {
+		top: 1rem;
+		left: -8rem;
+
+		&.show {
+			left: 1rem;
+		}
+	}
+  &.bottom-right {
+		bottom: 1rem;
+		right: -8rem;
+
+		&.show {
+			right: 1rem;
+		}
+	}
+  &.bottom-left {
+		bottom: 1rem;
+		left: -8rem;
+
+		&.show {
+			left: 1rem;
+		}
+	}
+  &.top-center {
+		top: -5rem;
+		left: calc(50% - 7.5rem);
+
+		&.show {
+			top: 1rem;
+		}
+	}
+  &.bottom-center {
+		bottom: -5rem;
+		left: calc(50% - 7.5rem);
+
+		&.show {
+			bottom: 1rem;
+		}
+	}
+  &.warning {
+		background-color: rgba(237, 172, 61, 0.9);
+	}
+  &.information {
+		background-color: rgba(78, 205, 255, 0.9);
+	}
+  &.error {
+		background-color: rgba(246, 95, 95, 0.9);
+	}
+  &.success {
+		background-color: var(--ar-color-success);
+		color: var(--ar-bg);
+	}
+
+	.ar-Alert__icon {
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.ar-Alert__text {
+		max-width: calc(100% - 2rem);
+		overflow: auto;
+		line-height: 1rem;
+		font-size: 0.85rem;
+	}
+
+	.ar-Alert__close-icon {
+		top: 0.5rem;
+		right: 0.5rem;
+		cursor: pointer;
+	}
 }
--- a/src/app/components/atoms/Alert/Alert.tsx
+++ b/src/app/components/atoms/Alert/Alert.tsx
@@ -1,14 +1,85 @@
-import React from "react"
+import { useEffect, useState } from "react"
+import Icon from "../Icon"
 import "./Alert.component.scss"

-interface AlertProps {}
+type AlertType = "success" | "warning" | "error" | "information"
+export interface AlertProps {
+  classes?: string
+  closeable?: boolean
+  demo?: boolean
+  position?: string
+  show?: boolean
+  type?: AlertType
+  message: string
+  timeout?: number
+}

-const Alert = (props: any): JSX.Element => {
+let timeoutRef: any
+const Alert = (props: AlertProps): JSX.Element => {
+  const {
+    classes,
+    closeable,
+    demo,
+    message,
+    position,
+    show: externalShow,
+    type,
+    timeout,
+  } = props
+  const [showClass, show] = useState<string>()
+
+  useEffect(() => {
+    if (externalShow || demo) {
+      setTimeout(() => show("show"), 0)
+      clearTimeout(timeoutRef)
+      timeoutRef = setTimeout(() => show(""), timeout || 5000)
+    }
+  }, [position, type, timeout, externalShow, message, demo])
+
+  let icon
+  switch (type) {
+    case "success":
+      icon = "bs/BsCheckCircle/white"
+      break
+    case "warning":
+      icon = "vsc/VscWarning"
+      break
+    case "error":
+      icon = "vsc/VscError"
+      break
+    case "information":
+    default:
+      icon = "vsc/VscInfo"
+  }
  return (
-    <div className="c-Alert">
-      In Component Alert
+    <div
+      className={`ar-Alert position-fixed d-flex ${position || "top-center"}${
+        classes ? " " + classes : ""
+      } ${type || "information"}${showClass ? " " + showClass : ""}`}
+    >
+      <span className="ar-Alert__icon d-inline-block p-2">
+        <Icon src={`http://localhost:8080/icon/${icon}`} />
+      </span>
+      <span className="ar-Alert__text d-inline-block p-2 me-2">
+        {message || "This is a dummy alert"}
+      </span>
+      {closeable && (
+        <span
+          className="ar-Alert__close-icon position-absolute"
+          onClick={() => {
+            show("")
+            window.top?.postMessage({ ar: null }, "*")
+          }}
+        >
+          <Icon
+            src={`http://localhost:8080/icon/io5/IoClose${
+              type === "success" ? "/white" : ""
+            }`}
+          />
+        </span>
+      )}
    </div>
  )
 }

-export default Alert
+export default Alert
--- a/src/app/components/atoms/Badge/Badge.component.scss
+++ b/src/app/components/atoms/Badge/Badge.component.scss
@@ -1,3 +1,69 @@
-.c-Badge {
-  
+.ar-Badge {
+	--ar-badge-size-small: 8px;
+	--ar-badge-size-medium: 20px;
+	--ar-badge-size-large: 40px;
+  display: flex;
+	flex-flow: row wrap;
+	-webkit-box-pack: center;
+	place-content: center;
+	-webkit-box-align: center;
+	align-items: center;
+	position: absolute;
+	box-sizing: border-box;
+	font-family: Roboto, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 0.75rem;
+	line-height: 1;
+	z-index: 1;
+	transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+	background-color: rgb(206, 147, 216);
+	color: rgba(0, 0, 0, 0.87);
+	// top: 0px;
+	// right: 0px;
+	// transform: scale(1) translate(50%, -50%);
+	transform-origin: 100% 0%;
+
+	&.small {
+		min-width: var(--ar-badge-size-small);
+		height: var(--ar-badge-size-small);
+		border-radius: calc(var(--ar-badge-size-small) / 2);
+		padding: 0;
+	}
+
+	&.medium {
+		min-width: var(--ar-badge-size-medium);
+		height: var(--ar-badge-size-medium);
+		border-radius: calc(var(--ar-badge-size-medium) / 2);
+		padding: 0 6px;
+	}
+
+	&.large {
+		min-width: var(--ar-badge-size-large);
+		height: var(--ar-badge-size-large);
+		border-radius: calc(var(--ar-badge-size-large) / 2);
+		padding: 0 12px;
+	}
+
+	&.inprogress {
+		background-color: var(--ar-color-font-warning);
+	}
+
+	&.complete {
+		background-color: var(--ar-color-font-success);
+		color: white;
+	}
+
+	&.deferred {
+		background-color: #60202d;
+		color: white;
+	}
+
+	&.atrisk {
+		background-color: var(--ar-color-font-danger);
+		color: white;
+	}
+
+	&.shadow {
+		box-shadow: 0px 4px 8px var(--ar-shadow);
+	}
 }
--- a/src/app/components/atoms/Badge/Badge.tsx
+++ b/src/app/components/atoms/Badge/Badge.tsx
@@ -1,10 +1,32 @@
-import React from "react"
+import { Icon } from "../.."
+import { ICON_ROOT } from "../../../config/constants"
 import "./Badge.component.scss"

-interface BadgeProps {}
+interface BadgeProps {
+  icon?: string
+  size?: string
+  shadow?: boolean
+  text?: string
+  type?: string
+}

-const Badge = (props: any): JSX.Element => {
-  return <div className="c-Badge">In Component Badge</div>
+const Badge = (props: BadgeProps): JSX.Element => {
+  const { icon, size, shadow, text, type } = props
+  if (icon?.indexOf("/") === -1) {
+    console.warn(
+      "Not sufficient information to render icon, needed format <icon_family>/<icon_name>",
+    )
+  }
+  return (
+    <span
+      className={`ar-Badge${size ? " " + size : " medium"}${
+        type ? " " + type : " inprogress"
+      }${shadow ? " shadow" : ""}`}
+    >
+      {icon && size !== "small" && <Icon src={`${ICON_ROOT}/${icon}`} />}
+      {size !== "small" && (text || "+2")}
+    </span>
+  )
 }

 export default Badge
--- a/src/app/components/atoms/Breadcrumb/Breadcrumb.component.scss
+++ b/src/app/components/atoms/Breadcrumb/Breadcrumb.component.scss
@@ -1,3 +1,5 @@
-.c-Breadcrumb {
-  
+.ar-Breadcrumb {
+	&>span {
+  	font-size: 0.75rem;
+	}
 }
--- a/src/app/components/atoms/Breadcrumb/Breadcrumb.tsx
+++ b/src/app/components/atoms/Breadcrumb/Breadcrumb.tsx
@@ -1,10 +1,65 @@
-import React from "react"
+import { MouseEventHandler } from "react"
+import { useNavigate } from "react-router-dom"
 import "./Breadcrumb.component.scss"

-interface BreadcrumbProps {}
+interface BaseBreadCrumbData {
+  label: string
+  data?: any
+}
+interface BreadcrumbDataWithClick extends BaseBreadCrumbData {
+  onClick: Function
+}

-const Breadcrumb = (props: any): JSX.Element => {
-  return <div className="c-Breadcrumb">In Component Breadcrumb</div>
+interface BreadcrumbDataWithRoute extends BaseBreadCrumbData {
+  route: string
+}
+
+type BreadCrumbData = BreadcrumbDataWithClick | BreadcrumbDataWithRoute
+
+interface BreadcrumbProps {
+  data: Array<BreadCrumbData>
+  separator?: string
+  onClick?: Function
+}
+
+const Breadcrumb = (props: BreadcrumbProps): JSX.Element => {
+  const { data, separator, onClick } = props
+  const navigate = useNavigate()
+
+  const demoDummy = [
+    { label: "Home", route: "/home" },
+    {
+      label: "Categories",
+    },
+    { label: "Footwear" },
+    {
+      label: "LikeMyShoe",
+    },
+  ]
+
+  const nodes = data || demoDummy
+
+  return (
+    <div className="ar-Breadcrumb">
+      {nodes.map((node: BreadCrumbData, index: number) => (
+        <>
+          <span
+            className="btn btn-link p-2"
+            onClick={
+              "onClick" in node
+                ? (e) => node.onClick(e, node.data)
+                : onClick
+                ? (e) => onClick(e, node.data)
+                : () => navigate("route" in node ? node.route : "")
+            }
+          >
+            {node.label}
+          </span>
+          {index < nodes.length - 1 && (separator || "/")}
+        </>
+      ))}
+    </div>
+  )
 }

 export default Breadcrumb
--- a/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.component.scss
+++ b/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.component.scss
@@ -1,3 +1,16 @@
-.c-BrowserIncompatibility {
-  
+.ar-BrowserIncompatibility {
+	border: var(--ar-border);
+	background-color: var(--ar-bg-base);
+	transition: box-shadow 0.3s;
+	font-size: 0.85rem;
+	&:hover {
+		box-shadow: 0px 4px 8px var(--ar-shadow);
+	}
+  .ar-BrowserIncompatibility__help-link {
+		border: var(--ar-border);
+		background-color: var(--ar-bg-hover);
+		border-radius: 3px;
+		font-size: 0.75rem;
+		cursor: pointer;
+	}
 }
--- a/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.test.ts
+++ b/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.test.ts
@@ -2,7 +2,5 @@ import React from "react"
 import BrowserIncompatibility from "./BrowserIncompatibility"

 describe("BrowserIncompatibility", () => {
-   it("renders without error", () => {
-
-   })
-})
+  it("renders without error", () => {})
+})
--- a/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx
+++ b/src/app/components/atoms/BrowserIncompatibility/BrowserIncompatibility.tsx
@@ -1,12 +1,53 @@
-import React from "react"
+import { Alert, Icon } from "../.."
+import Helper from "../../../utils/helper"
 import "./BrowserIncompatibility.component.scss"

-interface BrowserIncompatibilityProps {}
+interface BrowserIncompatibilityProps {
+  applicationName?: string
+  moreLink?: string
+}

-const BrowserIncompatibility = (props: any): JSX.Element => {
+const BrowserIncompatibility = (
+  props: BrowserIncompatibilityProps,
+): JSX.Element => {
+  const { applicationName, moreLink } = props
+  const demoDummyLink = "http://localhost:3000/armco-design-system/docs/devices"
+  const demoAppName = '"My Awesome App"'
+  const helpLink = moreLink || demoDummyLink
+  const app = applicationName || demoAppName
+  const heroIconSize = "8rem"
  return (
-    <div className="c-BrowserIncompatibility">
-      In Component BrowserIncompatibility
+    <div className="ar-BrowserIncompatibility p-3 flex-center flex-column">
+      <Icon
+        src={`http://localhost:8080/icon/vsc/VscRunErrors/black/10rem${heroIconSize}`}
+        size={heroIconSize}
+        containerClasses="mb-3"
+      />
+      <h5 className="mb-3">{app} can not run on this browser</h5>
+      <p className="mb-2">
+        Supported browsers are Google Chrome v51+ & Microsoft's Edge v32+
+      </p>
+      <p>For More details you can also check the below link</p>
+      <div
+        className="ar-BrowserIncompatibility__help-link px-3 py-2"
+        onClick={() => {
+          Helper.copyToClipboard(helpLink)
+          window.top?.postMessage(
+            {
+              ar: {
+                position: "bottom-left",
+                type: "success",
+                closeable: true,
+                message: "Link Copied!",
+              },
+            },
+            "*",
+          )
+        }}
+      >
+        {helpLink}
+        <Alert message="Link Copied!" />
+      </div>
    </div>
  )
 }
--- a/src/app/components/atoms/Button/Button.component.scss
+++ b/src/app/components/atoms/Button/Button.component.scss
@@ -1,8 +1,114 @@
-.c-Button {
+.ar-Button {
+	width: 10rem;
+	padding: 0.5rem 0.9rem;
+	border-radius: 0.2rem;
+	background-color: var(--ar-color-primary-faded);
+	color: var(--ar-color-font-invert);
+	border: 1px solid var(--ar-color-primary);
+	transition: all 0.5s;
+	font-size: 1rem;
+
+	.ar-Button__icon {
+		border-right: var(--ar-bg);
+	}
+
+	&:hover {
+		background-color: var(--ar-color-primary);
+		box-shadow: 0px 4px 8px var(--ar-shadow);
+	}
+
+	&.ar-xsmall {
+		width: 6rem;
+		padding: 0.2rem 0.4rem;
+		border-radius: 0.2rem;
+		font-size: 0.75rem;
+	}
+
+	&.ar-small {
+		width: 7rem;
+		padding: 0.3rem 0.7rem;
+		border-radius: 0.2rem;
+		font-size: 0.875rem;
+	}
+
+	&.ar-large {
+		width: 13rem;
+		padding: 0.6rem 1rem;
+		border-radius: 0.3rem;
+		font-size: 1.2rem;
+	}
  &.search-button {
 		width: 2.625rem;
 		margin-left: -0.0625rem;
 		border-bottom-right-radius: 0.125rem;
 		border-top-right-radius: 0.125rem;
 	}
+
+	&.ar-primary {
+
+	}
+
+	&.ar-secondary {
+		background-color: var(--ar-bg);
+		color: var(--ar-color-primary);
+
+		&:hover {
+			background-color: var(--ar-color-primary);
+			color: var(--ar-color-font-invert);
+		}
+	}
+
+	&.ar-danger {
+		background-color: var(--ar-color-font-danger-faded);
+		color: var(--ar-color-font-invert);
+		border-color: var(--ar-color-font-danger);
+		&:hover {
+			background-color: var(--ar-color-font-danger);
+		}
+	}
+
+	&.ar-success {
+		background-color: var(--ar-color-font-success-faded);
+		color: var(--ar-color-font-invert);
+		border-color: var(--ar-color-font-success);
+		&:hover {
+			background-color: var(--ar-color-font-success);
+		}
+	}
+
+	&.ar-info {
+		background-color: var(--ar-color-font-info-faded);
+		color: var(--ar-color-font-invert);
+		border-color: var(--ar-color-font-info);
+		&:hover {
+			background-color: var(--ar-color-font-info);
+		}
+	}
+
+	&.ar-warning {
+		background-color: var(--ar-color-font-warning-faded);
+		color: var(--ar-color-font-invert);
+		border-color: var(--ar-color-font-warning);
+		&:hover {
+			background-color: var(--ar-color-font-warning);
+		}
+	}
+
+	&.ar-dark {
+		background-color: var(--ar-color-font-dark-faded);
+		color: var(--ar-color-font-invert);
+		border-color: var(--ar-color-font-dark);
+		&:hover {
+			background-color: var(--ar-color-font-dark);
+		}
+	}
+
+	&.ar-light {
+		background-color: var(--ar-color-font-light-faded);
+		color: var(--ar-color-font);
+		border-color: var(--ar-color-font);
+		&:hover {
+			background-color: var(--ar-color-font-light);
+		}
+	}
 }
--- a/src/app/components/atoms/Button/Button.tsx
+++ b/src/app/components/atoms/Button/Button.tsx
@@ -1,16 +1,31 @@
-import React from "react"
+import { MouseEventHandler } from "react"
 import "./Button.component.scss"
+import Icon from "../Icon"

 interface ButtonProps {
  classes?: string
  content: string | JSX.Element | undefined
+  icon?: string
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  size?: string
+  variant?: string
 }

 const Button = (props: ButtonProps) => {
-  const { classes, content } = props
+  const { classes, content, icon, onClick, size, variant } = props
  return (
-    <button className={`c-Button${classes ? " " + classes : ""}`}>
-      {content}
+    <button
+      className={`ar-Button${classes ? " " + classes : ""}${
+        variant ? " ar-" + variant : ""
+      }${size ? " ar-" + size : ""}`}
+      onClick={onClick}
+    >
+      {icon && (
+        <span className="ar-Button__icon">
+          <Icon src={`http://localhost:8080/icon/${icon}/white`} />
+        </span>
+      )}
+      {content || "Button"}
    </button>
  )
 }
--- a/src/app/components/atoms/Calendar/Calendar.component.scss
+++ b/src/app/components/atoms/Calendar/Calendar.component.scss
@@ -1,3 +1,3 @@
-.c-Calendar {
+.ar-Calendar {
  
 }
--- a/src/app/components/atoms/Calendar/Calendar.tsx
+++ b/src/app/components/atoms/Calendar/Calendar.tsx
@@ -5,7 +5,7 @@ interface CalendarProps {}

 const Calendar = (props: any): JSX.Element => {
  return (
-    <div className="c-Calendar">
+    <div className="ar-Calendar">
      In Component Calendar
    </div>
  )
--- a/src/app/components/atoms/Checkbox/Checkbox.component.scss
+++ b/src/app/components/atoms/Checkbox/Checkbox.component.scss
@@ -1,3 +1,5 @@
-.c-Checkbox {
-  
+.ar-Checkbox {
+  .ar-Checkbox__state {
+		font-size: 0.75rem;
+	}
 }
--- a/src/app/components/atoms/Checkbox/Checkbox.tsx
+++ b/src/app/components/atoms/Checkbox/Checkbox.tsx
@@ -1,14 +1,36 @@
-import React from "react"
+import React, { useState } from "react"
+import { Toggle } from "../.."
 import "./Checkbox.component.scss"

-interface CheckboxProps {}
+type CheckBoxTypes = "TOGGLE" | "CHECKBOX"
+interface CheckboxProps {
+  id?: string
+  label?: string
+  type?: CheckBoxTypes
+  onChange: Function
+}

-const Checkbox = (props: any): JSX.Element => {
-  return (
-    <div className="c-Checkbox">
-      In Component Checkbox
+const Checkbox = (props: CheckboxProps): JSX.Element => {
+  const { label, id, onChange } = props
+  const [checked, setChecked] = useState<boolean>()
+  const { type, ...toggleProps } = props
+  return type === "TOGGLE" ? (
+    <Toggle {...toggleProps} />
+  ) : (
+    <div className="ar-Checkbox">
+      {label && <label htmlFor={id || "ar-checkbox-1"}>{label}</label>}
+      <span className="ar-Checkbox__state me-2">{checked ? "On" : "Off"}</span>
+      <input
+        id={id || "ar-checkbox-1"}
+        type={type || "checkbox"}
+        onChange={() => {
+          setChecked(!checked)
+          onChange && onChange()
+        }}
+        checked={checked}
+      />
    </div>
  )
 }

-export default Checkbox
+export default Checkbox
--- a/src/app/components/atoms/ColorPicker/ColorPicker.component.scss
+++ b/src/app/components/atoms/ColorPicker/ColorPicker.component.scss
@@ -1,3 +1,14 @@
-.c-ColorPicker {
-  
+.ar-ColorPicker {
+	.ar-ColorPicker__label {
+		
+	}
+	
+  .ar-ColorPicker__input {
+		cursor: pointer;
+		border: var(--ar-border);
+		border-radius: 50%;
+		block-size: 1.5rem;
+		inline-size: 1.5rem;
+		overflow: hidden;
+	}
 }
--- a/src/app/components/atoms/ColorPicker/ColorPicker.tsx
+++ b/src/app/components/atoms/ColorPicker/ColorPicker.tsx
@@ -1,10 +1,40 @@
-import React from "react"
+import { useState } from "react"
+import Helper from "../../../utils/helper"
 import "./ColorPicker.component.scss"

-interface ColorPickerProps {}
+interface ColorPickerProps {
+  id?: string
+  label?: string
+  onChange?: Function
+  value?: string
+}

-const ColorPicker = (props: any): JSX.Element => {
-  return <div className="c-ColorPicker">In Component ColorPicker</div>
+const ColorPicker = (props: ColorPickerProps): JSX.Element => {
+  const { id, label, onChange, value: externalValue } = props
+  const [value, setValue] = useState<string | undefined>(externalValue)
+  const idFinal = id || Helper.generateRandomId()
+  return (
+    <div className="ar-ColorPicker flex-v-center">
+      {label && (
+        <label
+          className="ar-ColorPicker__label form-label mb-0 me-2"
+          htmlFor={idFinal}
+        >
+          {label}
+        </label>
+      )}
+      <input
+        type="color"
+        id={idFinal}
+        className="ar-ColorPicker__input p-0"
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value)
+          onChange && onChange(e.target.value)
+        }}
+      />
+    </div>
+  )
 }

 export default ColorPicker
--- a/src/app/components/atoms/ContextMenu/ContextMenu.component.scss
+++ b/src/app/components/atoms/ContextMenu/ContextMenu.component.scss
@@ -1,3 +1,3 @@
-.c-ContextMenu {
+.ar-ContextMenu {
  
 }
--- a/src/app/components/atoms/ContextMenu/ContextMenu.tsx
+++ b/src/app/components/atoms/ContextMenu/ContextMenu.tsx
@@ -1,10 +1,57 @@
-import React from "react"
+import { useState } from "react"
+import { InlineMenu } from "../.."
 import "./ContextMenu.component.scss"

-interface ContextMenuProps {}
+interface ContextMenuProps {
+  children?: string | JSX.Element | Array<JSX.Element>
+  data: { [key: string]: any }
+  demo?: boolean
+}

-const ContextMenu = (props: any): JSX.Element => {
-  return <div className="c-ContextMenu">In Component ContextMenu</div>
+const ContextMenu = (props: ContextMenuProps): JSX.Element => {
+  const { children, data, demo } = props
+  const [clickCoordinates, setClickCoordinates] = useState<{
+    [key: string]: number
+  }>({})
+  const [clicked, setClicked] = useState<boolean>()
+  const dummyData = {
+    Create: {
+      onClick: () => setClicked(false),
+    },
+    Delete: {
+      onClick: () => setClicked(false),
+    },
+    Clone: {
+      onClick: () => setClicked(false),
+    },
+    Suspend: {
+      onClick: () => setClicked(false),
+    },
+  }
+  const finalData = data || (demo && dummyData)
+  return (
+    <div className="ar-ContextMenu">
+      <div
+        className="ar-ContextMenu__click-anchor"
+        onClick={() => setClicked(false)}
+        onContextMenu={(e) => {
+          e.preventDefault()
+          setClicked(true)
+          setClickCoordinates({ x: e.pageX, y: e.pageY })
+        }}
+      >
+        {children}
+      </div>
+      {clicked && (
+        <InlineMenu
+          top={clickCoordinates.y}
+          left={clickCoordinates.x}
+          data={finalData}
+          demo={demo}
+        />
+      )}
+    </div>
+  )
 }

 export default ContextMenu
--- a/src/app/components/atoms/DateInput/DateInput.component.scss
+++ b/src/app/components/atoms/DateInput/DateInput.component.scss
@@ -1,3 +1,3 @@
-.c-DateInput {
+.ar-DateInput {
  
 }
--- a/src/app/components/atoms/DateInput/DateInput.tsx
+++ b/src/app/components/atoms/DateInput/DateInput.tsx
@@ -4,7 +4,7 @@ import "./DateInput.component.scss"
 interface DateInputProps {}

 const DateInput = (props: any): JSX.Element => {
-  return <div className="c-DateInput">In Component DateInput</div>
+  return <div className="ar-DateInput">In Component DateInput</div>
 }

 export default DateInput
--- a/src/app/components/atoms/DatePicker/DatePicker.component.scss
+++ b/src/app/components/atoms/DatePicker/DatePicker.component.scss
@@ -1,3 +1,3 @@
-.c-DatePicker {
+.ar-DatePicker {
  
 }
--- a/src/app/components/atoms/DatePicker/DatePicker.tsx
+++ b/src/app/components/atoms/DatePicker/DatePicker.tsx
@@ -5,7 +5,7 @@ interface DatePickerProps {}

 const DatePicker = (props: any): JSX.Element => {
  return (
-    <div className="c-DatePicker">
+    <div className="ar-DatePicker">
      In Component DatePicker
    </div>
  )
--- a/src/app/components/atoms/DateRange/DateRange.component.scss
+++ b/src/app/components/atoms/DateRange/DateRange.component.scss
@@ -1,3 +1,3 @@
-.c-DateRange {
+.ar-DateRange {
  
 }
--- a/src/app/components/atoms/DateRange/DateRange.tsx
+++ b/src/app/components/atoms/DateRange/DateRange.tsx
@@ -5,7 +5,7 @@ interface DateRangeProps {}

 const DateRange = (props: any): JSX.Element => {
  return (
-    <div className="c-DateRange">
+    <div className="ar-DateRange">
      In Component DateRange
    </div>
  )
--- a/src/app/components/atoms/DetailsPanel/DetailsPanel.component.scss
+++ b/src/app/components/atoms/DetailsPanel/DetailsPanel.component.scss
@@ -1,3 +1,3 @@
-.c-DetailsPanel {
+.ar-DetailsPanel {
  
 }
--- a/src/app/components/atoms/DetailsPanel/DetailsPanel.tsx
+++ b/src/app/components/atoms/DetailsPanel/DetailsPanel.tsx
@@ -5,7 +5,7 @@ interface DetailsPanelProps {}

 const DetailsPanel = (props: any): JSX.Element => {
  return (
-    <div className="c-DetailsPanel">
+    <div className="ar-DetailsPanel">
      In Component DetailsPanel
    </div>
  )
--- a/src/app/components/atoms/Dialog/Dialog.component.scss
+++ b/src/app/components/atoms/Dialog/Dialog.component.scss
@@ -1,3 +1,3 @@
-.c-Dialog {
+.ar-Dialog {
  
 }
--- a/src/app/components/atoms/Dialog/Dialog.tsx
+++ b/src/app/components/atoms/Dialog/Dialog.tsx
@@ -5,7 +5,7 @@ interface DialogProps {}

 const Dialog = (props: any): JSX.Element => {
  return (
-    <div className="c-Dialog">
+    <div className="ar-Dialog">
      In Component Dialog
    </div>
  )
--- a/src/app/components/atoms/DropDown/DropDown.component.scss
+++ b/src/app/components/atoms/DropDown/DropDown.component.scss
@@ -1,4 +1,4 @@
-.c-DropDown {
+.ar-DropDown {
  select:focus-visible {
 		outline: none;
 		border-bottom: var(--ar-border-bottom-focus-visible);
--- a/src/app/components/atoms/DropDown/DropDown.tsx
+++ b/src/app/components/atoms/DropDown/DropDown.tsx
@@ -26,15 +26,15 @@ const DropDown = (props: DropDownProps): JSX.Element => {
      )
  }
  return (
-    <div className="c-DropDown w-100 mb-3">
+    <div className="ar-DropDown w-100 mb-3">
      {label && (
-        <label className="c-DropDown__label label" htmlFor={id}>
+        <label className="ar-DropDown__label label" htmlFor={id}>
          {label}
        </label>
      )}
      <select
        id={id}
-        className="c-DropDown__select form-component px-3 py-2 w-100"
+        className="ar-DropDown__select form-component px-3 py-2 w-100"
        onChange={onLocalChange}
      >
        {options.map((option) => (
--- a/src/app/components/atoms/FacetedFilter/FacetedFilter.component.scss
+++ b/src/app/components/atoms/FacetedFilter/FacetedFilter.component.scss
@@ -1,3 +1,3 @@
-.c-FacetedFilter {
+.ar-FacetedFilter {
  
 }
--- a/src/app/components/atoms/FacetedFilter/FacetedFilter.tsx
+++ b/src/app/components/atoms/FacetedFilter/FacetedFilter.tsx
@@ -4,7 +4,7 @@ import "./FacetedFilter.component.scss"
 interface FacetedFilterProps {}

 const FacetedFilter = (props: any): JSX.Element => {
-  return <div className="c-FacetedFilter">In Component FacetedFilter</div>
+  return <div className="ar-FacetedFilter">In Component FacetedFilter</div>
 }

 export default FacetedFilter
--- a/src/app/components/atoms/Icon/Icon.component.scss
+++ b/src/app/components/atoms/Icon/Icon.component.scss
@@ -1,3 +1,3 @@
-.c-Icon {
+.ar-Icon {
  
 }
--- a/src/app/components/atoms/Icon/Icon.tsx
+++ b/src/app/components/atoms/Icon/Icon.tsx
@@ -1,29 +1,103 @@
-import React from "react"
+import { MouseEventHandler } from "react"
 import "./Icon.component.scss"

 interface IconProps {
+  alt?: string
  classes?: string
+  color?: string
  containerClasses?: string
+  demo?: boolean
  height?: string
+  onClick?: MouseEventHandler
+  onMouseEnter?: MouseEventHandler
+  onMouseLeave?: MouseEventHandler
  size?: string
  src: string
  width?: string
 }

-const Icon = (props: IconProps): JSX.Element => {
-  const { classes, containerClasses, height, size, src, width } = props
+const Icon = (props: IconProps): JSX.Element | null => {
+  const {
+    alt,
+    classes,
+    color,
+    containerClasses,
+    demo,
+    height,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    size,
+    src,
+    width,
+  } = props
+  let qualifiedSrc = src
+  let inferredColor, inferredSize
+  if (src) {
+    let srcPart = src
+    if (src.startsWith("http")) {
+      if (src.indexOf("http://localhost:8080/icon") > -1) {
+        srcPart = src.substring("http://localhost:8080/icon/".length)
+      } else {
+        console.error(
+          "Malformed source provided, format should be <source>/<icon-name",
+        )
+        qualifiedSrc = "http://localhost:8080/icon/tb/TbError404"
+      }
+    }
+    const iconInfo = srcPart.split("/")
+    if (iconInfo.length < 2) {
+      console.error(
+        "Malformed source provided, format should be <source>/<icon-name",
+      )
+      qualifiedSrc = "http://localhost:8080/icon/tb/TbError404"
+    } else {
+      if (iconInfo[2]) {
+        inferredColor = iconInfo[2]
+      }
+      if (iconInfo[3]) {
+        inferredSize = iconInfo[3]
+      }
+      qualifiedSrc = "http://localhost:8080/icon/" + srcPart
+    }
+  } else {
+    qualifiedSrc = "http://localhost:8080/icon/tb/TbError404"
+  }
+
+  const demoDummyIconSrc = "http://localhost:8080/icon/si/SiHappycow"
+  qualifiedSrc = !src ? (demo ? demoDummyIconSrc : qualifiedSrc) : qualifiedSrc
+  let appendables = ""
+  appendables += !inferredColor
+    ? color
+      ? `/${encodeURIComponent(color)}`
+      : demo
+      ? "/blue"
+      : "/black"
+    : ""
+  appendables += !inferredSize
+    ? size
+      ? `/${encodeURIComponent(size)}`
+      : demo
+      ? "/5rem"
+      : "/1rem"
+    : ""
+
+  qualifiedSrc += appendables
  return (
    <span
-      className={`c-Icon d-inline-block ${containerClasses}`}
+      className={`ar-Icon d-inline-block ${containerClasses}`}
      style={{
        width: width || size || "1rem",
        height: height || size || "1rem",
      }}
+      onMouseEnter={(e) => onMouseEnter && onMouseEnter(e)}
+      onMouseLeave={(e) => onMouseLeave && onMouseLeave(e)}
+      onClick={(e) => onClick && onClick(e)}
    >
      <img
-        className={`c-Icon__img${classes ? " " + classes : ""}`}
-        src={src}
-        alt="Icon"
+        className={`ar-Icon__img${classes ? " " + classes : ""}`}
+        src={qualifiedSrc}
+        alt={alt || "Icon"}
      />
    </span>
  )
--- a/src/app/components/atoms/InlineMenu/InlineMenu.component.scss
+++ b/src/app/components/atoms/InlineMenu/InlineMenu.component.scss
@@ -1,3 +1,26 @@
-.c-InlineMenu {
-  
+.ar-InlineMenu {
+	height: 0;
+	width: 0;
+	transition: all 0.3s;
+	overflow: hidden;
+	background-color: var(--ar-bg-invert-fade);
+	backdrop-filter: blur(20px);
+	color: var(--ar-color-font-invert);
+	border-radius: 0.5rem;
+	font-size: 0.8rem;
+  &.show {
+		height: 20rem;
+		width: 15rem;
+		overflow: auto;
+		border: var(--ar-border);
+	}
+
+	.ar-InlineMenu__menu-item  {
+		cursor: pointer;
+		border-radius: 3px;
+		line-height: 1.5rem;
+		&:hover {
+			background-color: var(--ar-color-highlight-2);
+		}
+	}
 }
--- a/src/app/components/atoms/InlineMenu/InlineMenu.tsx
+++ b/src/app/components/atoms/InlineMenu/InlineMenu.tsx
@@ -1,14 +1,56 @@
-import React from "react"
+import { useEffect, useState } from "react"
 import "./InlineMenu.component.scss"

-interface InlineMenuProps {}
+interface InlineMenuProps {
+  data: { [key: string]: any }
+  demo?: boolean
+  top?: number
+  left?: number
+}

-const InlineMenu = (props: any): JSX.Element => {
+const InlineMenu = (props: InlineMenuProps): JSX.Element => {
+  const { data, demo, top, left } = props
+  const [displayed, show] = useState<boolean>()
+  useEffect(() => {
+    setTimeout(() => show(true), 0)
+    return () => show(false)
+  }, [])
+
+  const dummyData = {
+    Create: {},
+    Delete: {},
+    Clone: {},
+    Suspend: {},
+  }
+  const finalData = data || (demo && dummyData)
  return (
-    <div className="c-InlineMenu">
-      In Component InlineMenu
+    <div
+      className={`ar-InlineMenu position-fixed${
+        displayed ? " show px-1 py-2" : ""
+      }`}
+      style={{ top, left }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {finalData && (
+        <ul className="list-unstyled">
+          {Object.keys(finalData).map((item: string) => {
+            const itemData = finalData[item]
+            return (
+              <li
+                className="ar-InlineMenu__menu-item mb-0 px-1"
+                onClick={() => {
+                  itemData.onClick && itemData.onClick()
+                  show(false)
+                }}
+              >
+                {item}
+              </li>
+            )
+          })}
+        </ul>
+      )}
    </div>
  )
 }

-export default InlineMenu
+export default InlineMenu
--- a/src/app/components/atoms/LabelValue/LabelValue.component.scss
+++ b/src/app/components/atoms/LabelValue/LabelValue.component.scss
@@ -1,3 +1,3 @@
-.c-LabelValue {
+.ar-LabelValue {
  
 }
--- a/src/app/components/atoms/LabelValue/LabelValue.tsx
+++ b/src/app/components/atoms/LabelValue/LabelValue.tsx
@@ -4,7 +4,7 @@ import "./LabelValue.component.scss"
 interface LabelValueProps {}

 const LabelValue = (props: any): JSX.Element => {
-  return <div className="c-LabelValue">In Component LabelValue</div>
+  return <div className="ar-LabelValue">In Component LabelValue</div>
 }

 export default LabelValue
--- a/src/app/components/atoms/LearnLink/LearnLink.component.scss
+++ b/src/app/components/atoms/LearnLink/LearnLink.component.scss
@@ -1,3 +1,3 @@
-.c-LearnLink {
+.ar-LearnLink {
  
 }
--- a/src/app/components/atoms/LearnLink/LearnLink.tsx
+++ b/src/app/components/atoms/LearnLink/LearnLink.tsx
@@ -4,11 +4,7 @@ import "./LearnLink.component.scss"
 interface LearnLinkProps {}

 const LearnLink = (props: any): JSX.Element => {
-  return (
-    <div className="c-LearnLink">
-      In Component LearnLink
-    </div>
-  )
+  return <div className="ar-LearnLink">In Component LearnLink</div>
 }

-export default LearnLink
+export default LearnLink
--- a/src/app/components/atoms/Link/Link.component.scss
+++ b/src/app/components/atoms/Link/Link.component.scss
@@ -1,3 +1,3 @@
-.c-Link {
+.ar-Link {
  
 }
--- a/src/app/components/atoms/Link/Link.tsx
+++ b/src/app/components/atoms/Link/Link.tsx
@@ -4,7 +4,7 @@ import "./Link.component.scss"
 interface LinkProps {}

 const Link = (props: any): JSX.Element => {
-  return <div className="c-Link">In Component Link</div>
+  return <div className="ar-Link">In Component Link</div>
 }

 export default Link
--- a/src/app/components/atoms/List/List.component.scss
+++ b/src/app/components/atoms/List/List.component.scss
@@ -1,3 +1,3 @@
-.c-List {
+.ar-List {
  
 }
--- a/src/app/components/atoms/List/List.tsx
+++ b/src/app/components/atoms/List/List.tsx
@@ -4,7 +4,7 @@ import "./List.component.scss"
 interface ListProps {}

 const List = (props: ListProps): JSX.Element => {
-  return <div className="c-List">In Component List</div>
+  return <div className="ar-List">In Component List</div>
 }

 export default List
--- a/src/app/components/atoms/Mask/Mask.component.scss
+++ b/src/app/components/atoms/Mask/Mask.component.scss
@@ -1,3 +1,3 @@
-.c-Mask {
+.ar-Mask {
  
 }
--- a/src/app/components/atoms/Mask/Mask.tsx
+++ b/src/app/components/atoms/Mask/Mask.tsx
@@ -4,7 +4,7 @@ import "./Mask.component.scss"
 interface MaskProps {}

 const Mask = (props: any): JSX.Element => {
-  return <div className="c-Mask">In Component Mask</div>
+  return <div className="ar-Mask">In Component Mask</div>
 }

 export default Mask
--- a/src/app/components/atoms/Modal/Modal.component.scss
+++ b/src/app/components/atoms/Modal/Modal.component.scss
@@ -1,3 +1,3 @@
-.c-Modal {
+.ar-Modal {
  
 }
--- a/src/app/components/atoms/Modal/Modal.tsx
+++ b/src/app/components/atoms/Modal/Modal.tsx
@@ -4,7 +4,7 @@ import "./Modal.component.scss"
 interface ModalProps {}

 const Modal = (props: any): JSX.Element => {
-  return <div className="c-Modal">In Component Modal</div>
+  return <div className="ar-Modal">In Component Modal</div>
 }

 export default Modal
--- a/src/app/components/atoms/Notification/Notification.component.scss
+++ b/src/app/components/atoms/Notification/Notification.component.scss
@@ -1,3 +1,3 @@
-.c-Notification {
+.ar-Notification {
  
 }
--- a/src/app/components/atoms/Notification/Notification.tsx
+++ b/src/app/components/atoms/Notification/Notification.tsx
@@ -5,7 +5,7 @@ interface NotificationProps {}

 const Notification = (props: any): JSX.Element => {
  return (
-    <div className="c-Notification">
+    <div className="ar-Notification">
      In Component Notification
    </div>
  )
--- a/src/app/components/atoms/NumericStepper/NumericStepper.component.scss
+++ b/src/app/components/atoms/NumericStepper/NumericStepper.component.scss
@@ -1,3 +1,3 @@
-.c-NumericStepper {
+.ar-NumericStepper {
  
 }
--- a/src/app/components/atoms/NumericStepper/NumericStepper.tsx
+++ b/src/app/components/atoms/NumericStepper/NumericStepper.tsx
@@ -4,7 +4,7 @@ import "./NumericStepper.component.scss"
 interface NumericStepperProps {}

 const NumericStepper = (props: any): JSX.Element => {
-  return <div className="c-NumericStepper">In Component NumericStepper</div>
+  return <div className="ar-NumericStepper">In Component NumericStepper</div>
 }

 export default NumericStepper
--- a/src/app/components/atoms/Pagination/Pagination.component.scss
+++ b/src/app/components/atoms/Pagination/Pagination.component.scss
@@ -1,3 +1,3 @@
-.c-Pagination {
+.ar-Pagination {

 }
--- a/src/app/components/atoms/Pagination/Pagination.tsx
+++ b/src/app/components/atoms/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import { SelectionPill } from "../.."
+import { Icon, SelectionPill } from "../.."
 import "./Pagination.component.scss"
 interface PaginationProps {
  data: Array<Map<string, string | number>>
@@ -8,6 +8,8 @@ interface PaginationProps {
 const Pagination = (props: PaginationProps): JSX.Element => {
  const { data, maxPillsToShow } = props
  let selectorBlockRenders
+  const navItemSize = "1.2rem"
+
  if (data) {
    if (maxPillsToShow && data.length > maxPillsToShow) {
      selectorBlockRenders = []
@@ -16,7 +18,16 @@ const Pagination = (props: PaginationProps): JSX.Element => {
        <SelectionPill
          classes="me-2 border-radius"
          data={
-            new Map<string, string | number | JSX.Element>([["label", "<"]])
+            new Map<string, string | number | JSX.Element>([
+              [
+                "label",
+                <Icon
+                  src={`http://localhost:8080/icon/ai/AiOutlineLeft/grey/${navItemSize}`}
+                  alt="<"
+                  size={navItemSize}
+                />,
+              ],
+            ])
          }
          onClick={() => {}}
        />,
@@ -42,7 +53,16 @@ const Pagination = (props: PaginationProps): JSX.Element => {
        <SelectionPill
          classes="ms-2 border-radius"
          data={
-            new Map<string, string | number | JSX.Element>([["label", ">"]])
+            new Map<string, string | number | JSX.Element>([
+              [
+                "label",
+                <Icon
+                  src={`http://localhost:8080/icon/ai/AiOutlineRight/grey/${navItemSize}`}
+                  alt=">"
+                  size={navItemSize}
+                />,
+              ],
+            ])
          }
          onClick={() => {}}
        />,
@@ -55,7 +75,7 @@ const Pagination = (props: PaginationProps): JSX.Element => {
    }
  }

-  return <div className="c-Pagination">{selectorBlockRenders}</div>
+  return <div className="ar-Pagination">{selectorBlockRenders}</div>
 }

 export default Pagination
--- a/src/app/components/atoms/Password/Password.component.scss
+++ b/src/app/components/atoms/Password/Password.component.scss
@@ -1,3 +1,3 @@
-.c-Password {
+.ar-Password {
  
 }
--- a/src/app/components/atoms/PickerRange/PickerRange.component.scss
+++ b/src/app/components/atoms/PickerRange/PickerRange.component.scss
@@ -1,3 +1,3 @@
-.c-PickerRange {
+.ar-PickerRange {
  
 }
--- a/src/app/components/atoms/PickerRange/PickerRange.tsx
+++ b/src/app/components/atoms/PickerRange/PickerRange.tsx
@@ -4,7 +4,7 @@ import "./PickerRange.component.scss"
 interface PickerRangeProps {}

 const PickerRange = (props: any): JSX.Element => {
-  return <div className="c-PickerRange">In Component PickerRange</div>
+  return <div className="ar-PickerRange">In Component PickerRange</div>
 }

 export default PickerRange
--- a/src/app/components/atoms/Picklist/Picklist.component.scss
+++ b/src/app/components/atoms/Picklist/Picklist.component.scss
@@ -1,3 +1,3 @@
-.c-Picklist {
+.ar-Picklist {
  
 }
--- a/src/app/components/atoms/Picklist/Picklist.tsx
+++ b/src/app/components/atoms/Picklist/Picklist.tsx
@@ -4,7 +4,7 @@ import "./Picklist.component.scss"
 interface PicklistProps {}

 const Picklist = (props: any): JSX.Element => {
-  return <div className="c-Picklist">In Component Picklist</div>
+  return <div className="ar-Picklist">In Component Picklist</div>
 }

 export default Picklist
--- a/src/app/components/atoms/Pill/Pill.component.scss
+++ b/src/app/components/atoms/Pill/Pill.component.scss
@@ -1,3 +1,3 @@
-.c-Pill {
+.ar-Pill {
  
 }
--- a/src/app/components/atoms/Pill/Pill.tsx
+++ b/src/app/components/atoms/Pill/Pill.tsx
@@ -4,7 +4,7 @@ import "./Pill.component.scss"
 interface PillProps {}

 const Pill = (props: any): JSX.Element => {
-  return <div className="c-Pill">In Component Pill</div>
+  return <div className="ar-Pill">In Component Pill</div>
 }

 export default Pill
--- a/src/app/components/atoms/Pillbox/Pillbox.component.scss
+++ b/src/app/components/atoms/Pillbox/Pillbox.component.scss
@@ -1,3 +1,3 @@
-.c-Pillbox {
+.ar-Pillbox {
  
 }
--- a/src/app/components/atoms/Pillbox/Pillbox.tsx
+++ b/src/app/components/atoms/Pillbox/Pillbox.tsx
@@ -4,7 +4,7 @@ import "./Pillbox.component.scss"
 interface PillboxProps {}

 const Pillbox = (props: any): JSX.Element => {
-  return <div className="c-Pillbox">In Component Pillbox</div>
+  return <div className="ar-Pillbox">In Component Pillbox</div>
 }

 export default Pillbox
--- a/src/app/components/atoms/Popover/Popover.component.scss
+++ b/src/app/components/atoms/Popover/Popover.component.scss
@@ -1,3 +1,3 @@
-.c-Popover {
+.ar-Popover {
  
 }
--- a/src/app/components/atoms/Popover/Popover.tsx
+++ b/src/app/components/atoms/Popover/Popover.tsx
@@ -4,7 +4,7 @@ import "./Popover.component.scss"
 interface PopoverProps {}

 const Popover = (props: any): JSX.Element => {
-  return <div className="c-Popover">In Component Popover</div>
+  return <div className="ar-Popover">In Component Popover</div>
 }

 export default Popover
--- a/src/app/components/atoms/ProgressIndicator/ProgressIndicator.component.scss
+++ b/src/app/components/atoms/ProgressIndicator/ProgressIndicator.component.scss
@@ -1,3 +1,3 @@
-.c-ProgressIndicator {
+.ar-ProgressIndicator {
  
 }
--- a/src/app/components/atoms/ProgressIndicator/ProgressIndicator.tsx
+++ b/src/app/components/atoms/ProgressIndicator/ProgressIndicator.tsx
@@ -5,7 +5,7 @@ interface ProgressIndicatorProps {}

 const ProgressIndicator = (props: any): JSX.Element => {
  return (
-    <div className="c-ProgressIndicator">
+    <div className="ar-ProgressIndicator">
      In Component ProgressIndicator
    </div>
  )
--- a/Show More
+++ b/Show More