ordercloud-api#173: Responsive Guide Graphics

content/docs/main-concepts/organization-hierarchy.mdx

@@ -4,12 +4,14 @@ section: 'Main Concepts'
 priority: 1
 ---
 
+import OrgHierarchyImage1 from 'components/Shared/GuidesImages/OrganizationHierarchy1'
+
+
 OrderCloud provides rich support for modeling a typical B2B organization. Within each organization there is a common hierarchy that is central to controlling the relationship between users and data.
 
 The following diagram depicts the B2B organization hierarchy as represented by Ordercloud:
 
-![Seller Company Hierarchy](/images/docs/main-concepts/organization-hierarchy/oc-docs__org-hierarchy--2.png)
-
+<OrgHierarchyImage1/>
 
 ## Seller Organization
 

src/components/Shared/GuidesImages/OrganizationHierarchy1.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  Grid,
+  Paper,
+  Chip,
+} from '@material-ui/core'
+import BusinessIcon from '@material-ui/icons/Business'
+import UserIcon from '@material-ui/icons/VerifiedUser'
+import { blackpearl, sherpablue } from '../../../theme/ocPalette.constants'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      margin: theme.spacing(8, 0, 16, 0),
+      flexGrow: 1,
+      padding: theme.spacing(6, 3),
+      backgroundColor: sherpablue[50],
+      position: 'relative',
+    },
+    chip: {
+      padding: theme.spacing(2, 1),
+      borderRadius: theme.spacing(7),
+      position: 'absolute',
+      top: theme.spacing(-2),
+      width: 'max-content',
+    },
+    chipUser: {
+      padding: theme.spacing(2, 1),
+      borderRadius: theme.spacing(7),
+    },
+    chipLabel: {
+      fontFamily: theme.typography.h1.fontFamily,
+      fontSize: theme.typography.h5.fontSize,
+      textTransform: 'uppercase',
+      letterSpacing: 2,
+      paddingTop: 2,
+    },
+    userGroup: {
+      position: 'relative',
+      padding: theme.spacing(6, 3),
+      backgroundColor: sherpablue[100],
+    },
+    ContainerChip: {
+      position: 'relative',
+    },
+    paper: {
+      padding: theme.spacing(2),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+      backgroundColor: 'transparent',
+    },
+  })
+)
+
+const OrgHierarchyImage1: React.FunctionComponent = () => {
+  const classes = useStyles({})
+  return (
+    <Paper className={classes.root}>
+      <Chip
+        color="primary"
+        classes={{
+          label: classes.chipLabel,
+        }}
+        className={classes.chip}
+        icon={<BusinessIcon />}
+        label="Company"
+      />
+      <Paper className={classes.userGroup}>
+        <Chip
+          color="primary"
+          classes={{
+            label: classes.chipLabel,
+          }}
+          className={classes.chip}
+          icon={<BusinessIcon />}
+          label="User Group"
+        />
+        <Grid container spacing={3}>
+          <Grid item sm className={classes.ContainerChip}>
+            <Chip
+              color="primary"
+              classes={{
+                label: classes.chipLabel,
+              }}
+              className={classes.chipUser}
+              icon={<UserIcon />}
+              label="User"
+            />
+          </Grid>
+          <Grid item sm className={classes.ContainerChip}>
+            <Chip
+              color="primary"
+              classes={{
+                label: classes.chipLabel,
+              }}
+              className={classes.chipUser}
+              icon={<UserIcon />}
+              label="User"
+            />
+          </Grid>
+          <Grid item sm className={classes.ContainerChip}>
+            <Chip
+              color="primary"
+              classes={{
+                label: classes.chipLabel,
+              }}
+              className={classes.chipUser}
+              icon={<UserIcon />}
+              label="User"
+            />
+          </Grid>
+        </Grid>
+      </Paper>
+    </Paper>
+  )
+}
+
+export default OrgHierarchyImage1