Feature/branding

components/branding/ColorBlock.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Card, CardContent, Stack } from '@mui/material/'
+import { InfoBlock } from './InfoBlock'
+import { hexToRgb } from '@/utils/hextoRgb'
+
+const styles = {
+  card: {
+    margin: '16px',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  colorChip: {
+    flex: 1,
+    minWidth: '100px',
+    minHeight: 'auto',
+  },
+  content: {
+    flex: 3,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    flexDirection: 'row',
+    flex: 5,
+    width: '100%',
+  },
+  info: {
+    flex: 1,
+    flexBasis: '33%',
+  }
+}
+
+export const ColorBlock = ({colorName, colorHex}) => {
+  const { r, g, b } = hexToRgb(colorHex)
+  const colorRgb = `rgb(${[r, g, b].join(', ')})`
+
+  return (
+    <Card elevation={3} sx={styles.card}>
+      <CardContent sx={styles.colorChip} style={{ backgroundColor: colorHex }}/>
+      <CardContent sx={styles.content}>
+        <Stack 
+          direction={{ sm: 'column', md: 'row' }} 
+          spacing={{ xs: 1, sm: 2, md: 4 }}
+          sx={{width: '100%'}}
+        >
+          <InfoBlock copyable title="Name" body={ colorName } style={styles.info}/>
+          <InfoBlock copyable title="Hex" body={ colorHex } style={styles.info}/>
+          <InfoBlock copyable title="RGB" body={ colorRgb } style={styles.info}/>
+        </Stack>
+      </CardContent>
+    </Card>
+  )
+}

components/branding/ColorSection.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Grid from '@mui/material/Grid'
+import { ColorBlock } from './ColorBlock'
+
+export const ColorSection = (props) => {
+  const { colors } = props
+  return (
+    <Grid container >
+      {
+        Object.keys(colors).map(function(key) {
+          return (
+            <Grid item xs={12}  key={ colors[key].name }>
+              <ColorBlock colorName={ colors[key].name } colorHex={ colors[key].hex } />
+            </Grid>
+          )
+        })
+      }
+    </Grid>
+  )
+}

components/branding/InfoBlock.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Typography } from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { copyToClipboard } from '@/utils/copyToClipboard';
+
+const styles = {
+  title: {
+    color: '#666676',
+  },
+  body: {
+    color: '#666676',
+    marginBottom: '8px',
+
+  },
+  copyableBody: {
+    // color: '#666676',
+    marginBottom: '1px',
+    '&:active': {
+      color: '#474748'
+    },
+    '&:hover': {
+      cursor: 'pointer'
+    },
+    '&:hover .copyIcon': {
+      opacity: 0.7,
+    },
+  },
+  copyIcon: {
+    textTransform: 'uppercase',
+    marginLeft: '8px',
+    opacity: 0,
+    fontSize: '98%',
+  },
+}
+
+export const InfoBlock = ( props ) => {
+  const { copyable } = props
+
+  return (
+    <div style={props.style}>
+      <Typography variant="body1" sx={ styles.title }>
+        { props.title }
+      </Typography>
+      <Typography variant="body2"
+      onClick={()=> copyToClipboard(props.body)}
+      sx={copyable ? styles.copyableBody : styles.body}>
+        { props.body }
+        {
+          copyable
+          ? <ContentCopyIcon fontSize="small" sx={styles.copyIcon} className="copyIcon"/>
+          : null
+        }
+      </Typography>
+
+    </div>
+  )
+}
+

components/branding/LogoBlock.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Card, CardContent } from '@mui/material/'
+import Image from 'next/image'
+
+// to do: 
+// consider using usePathname and our custom 
+// Link component when upgrading to Nextjs v13
+
+const styles = {
+  card: {
+    padding: 0,
+    margin: '16px'
+  },
+  topper: {
+    borderBottom: `1px solid grey`,
+  },
+  content: {
+    backgroundColor: 'white',
+  },
+}
+
+export const LogoBlock = ({logo, bgColor}) => {
+  return (
+    <Card sx={ styles.card }>
+      <CardContent sx={{ ...styles.topper, backgroundColor: bgColor }}>
+        <a
+          href={logo.src} 
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image 
+            src={ logo.src } 
+            alt="Logo" 
+            width={logo.width}
+            height={logo.height}
+            layout="responsive"
+            objectFit='cover'
+          />
+        </a>
+      </CardContent>
+    </Card>
+  )
+}

components/branding/LogoSection.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import Grid from '@mui/material/Grid'
+import { LogoBlock } from './LogoBlock'
+
+const styles = {
+    logoGrid: {
+        marginBottom: '32px',
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '100%',
+    },
+    logoBlock: {
+        flexGrow: 1,
+        width: '100%',
+    },
+}
+
+export const LogoSection = ({logos}) => {
+  return (
+    <Grid container sx={ styles.logoGrid }>
+      {
+        logos.map( (logo) => {
+          return <Grid item xs={12} md={ 6 } lg={4} sx={ styles.logoBlock } key={ logo.image }>
+            <LogoBlock logo={ logo.image } bgColor={ logo.bgColor }/>
+          </Grid>
+        })
+      }
+    </Grid>
+  )
+}

components/branding/index.js

@@ -0,0 +1,5 @@
+export * from './ColorSection'
+export * from './ColorBlock'
+export * from './InfoBlock'
+export * from './LogoSection'
+export * from './LogoBlock'

components/index.js

@@ -5,3 +5,4 @@ export * from './link-tray'
 export * from './people'
 export * from './pre'
 export * from './markdown'
+export * from './branding'

components/layout/footer.js

@@ -66,6 +66,7 @@ export const Footer = () => {
             <strong>More</strong>
             <ul className="link-list">
               <li><Link to="/about">About</Link></li>
+              <li><Link to="/about/branding">Branding</Link></li>
               <li><Link to="/careers">Careers</Link></li>
               <li><Link to="https://dashboard.renci.org/">RENCI Dashboard</Link></li>
             </ul>

hooks/index.js

@@ -1 +1 @@
-export * from './use-scroll-position'
+export * from './use-scroll-position'