Experience Brand Kit 1.0 (#1948)

* Static version of Menu us looking good

* Brand kit general layout

* Add base pages and other fun stuff

* Wip

* Section nav

* Redo pages

* Steal this from other branch

* Sane scroll behavior

* Use constants for all paths

* Mobile

* WIP fetching from air table

* Logo page basic content first pass

* Add in words (WIP)

* Better white spacing

* Move some files around and other things

* Ensure long menu would be scrollable

* Colors true

* no message

* Typeography Page A

* Fetching icons from airtbale and and displaying on page nice

* Usage Example

* Fix ilocal keys

* Right on

* Type overhaul w han

* Judement

* Improve Logo page on mobile

* LOGOGOSOGOOGOS

* Change URI to be /experience/brand/*

* LINT this and add brand redirect

* Icons view change and fix

* Create download button, fix up nav and make font page great

* Remove board and left alignment on colors

* Better gap

* Alignment of top

* Color Page Content

* Create Inline Anchor for using inline button in the trans
Remove hash hoc

Update general cleanup

* Brand home page is a ok

* Logo page content and better fit on tablet

* Logo page content
Some sizing stuff

Ensure there is a minimum size for sidebar

* Add web deps

* Tyopgraphy page

* ICONS text

* Beautiful icons

* Sweet Jesus its downloading season

* Self review

* Fix import

* Dont show border on last type example
Add margin to subtitles
Make name Celo White
Fix monochrome logo

* Glphs on backgrounds should be square on mobile

Icons make square small enough for 2x2 on mobile

Keep squares square and variable size

Add logo downloads

Thicken stroke on download icon

Remove buttons example

Converte minimums to be sag not png for better crispy scale

Better mobile spacing in general

Add new uiSmall first class type style

* Lint

* Lint

* Cleanup from PR

* Ensure the sidebar is not ever covered by the footer

* Add License

* Super duper with Laurance

* Lint

packages/web/package.json

@@ -28,6 +28,7 @@
     "apollo-boost": "^0.3.1",
     "big-integer": "^1.6.31",
     "body-parser": "^1.18.3",
+    "colortranslator": "^1.1.1",
     "compression": "^1.7.4",
     "connect-slashes": "^1.4.0",
     "cross-fetch": "^3.0.2",
@@ -74,12 +75,14 @@
     "shuffle-seed": "^1.1.6",
     "stickyfilljs": "^2.0.5",
     "svgs": "^4.1.0",
-    "tls": "^0.0.1"
+    "tls": "^0.0.1",
+    "yiq": "^3.0.1"
   },
   "devDependencies": {
     "@firebase/app-types": "^0.4.6",
     "@sentry/types": "^5.6.1",
     "@types/airtable": "^0.5.6",
+    "@types/hex-rgba": "^1.0.0",
     "@types/i18next": "^12.1.0",
     "@types/mailgun-js": "^0.16.3",
     "@types/next": "^8.0.3",

packages/web/pages/_app.tsx

@@ -29,10 +29,14 @@ class MyApp extends App {
     }
   }
 
-  // there are a few pages we dont want the header on for artistic reasons
-  // currently this is just the animation demo pages
+  // there are a few pages we dont want the header on
+  // currently this is just the animation demo pages and brand kit
   skipHeader() {
-    return this.props.router.asPath.startsWith('/animation')
+    return this.props.router.asPath.startsWith('/animation') || this.isBrand()
+  }
+
+  isBrand = () => {
+    return this.props.router.asPath.startsWith('/experience')
   }
 
   componentDidCatch = (error: Error, info: object) => {
@@ -76,5 +80,5 @@ function checkH1Count() {
 function hashScroller(id: string) {
   const element = document.getElementById(id.replace('#', ''))
 
-  scrollIntoView(element, { time: 200, align: { top: 0.2, topOffset: HEADER_HEIGHT } })
+  scrollIntoView(element, { time: 100, align: { top: 0, topOffset: HEADER_HEIGHT + 100 } })
 }

packages/web/pages/_document.tsx

@@ -54,8 +54,15 @@ export default class MyDocument extends Document {
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <link rel="stylesheet" href={'/static/normalize.css'} />
 
-          <link rel="preconnect" href="https://use.typekit.net" />
-          <link rel="stylesheet" href="https://use.typekit.net/dki6jkb.css" />
+          <link
+            rel="stylesheet"
+            href="https://indestructibletype.com/fonts/Jost.css"
+            type="text/css"
+          />
+          <link
+            href="https://fonts.googleapis.com/css?family=EB+Garamond:400,500,500i,700&display=swap"
+            rel="stylesheet"
+          />
 
           <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
         </Head>

packages/web/pages/experience/brand/color.tsx

@@ -0,0 +1,3 @@
+import Color from 'src/brandkit/Color'
+
+export default Color

packages/web/pages/experience/brand/icons.tsx

@@ -0,0 +1,3 @@
+import IconsPage from 'src/brandkit/IconsPage'
+
+export default IconsPage

packages/web/pages/experience/brand/index.tsx

@@ -0,0 +1,3 @@
+import Intro from 'src/brandkit/Intro'
+
+export default Intro

packages/web/pages/experience/brand/key-imagery.tsx

@@ -0,0 +1,2 @@
+import KeyImagery from 'src/brandkit/KeyImagery'
+export default KeyImagery

packages/web/pages/experience/brand/logo.tsx

@@ -0,0 +1,3 @@
+import Logo from 'src/brandkit/Logo'
+
+export default Logo

packages/web/pages/experience/brand/typography.tsx

@@ -0,0 +1,3 @@
+import Typography from 'src/brandkit/Typography'
+
+export default Typography

packages/web/server/AssetBase.ts

@@ -0,0 +1,66 @@
+import { Attachment, FieldSet, Table } from 'airtable'
+import getConfig from 'next/config'
+import airtableInit from './airtable'
+
+const ASSSET_FIELD_LIGHT = 'Assets (on light bg)'
+const ASSSET_FIELD_DARK = 'Assets (on dark bg)'
+
+interface Fields extends FieldSet {
+  Name: string
+  Description: string
+  [ASSSET_FIELD_LIGHT]: Attachment[]
+  [ASSSET_FIELD_DARK]: Attachment[]
+  Zip: Attachment[]
+  Terms: boolean
+  Tags: string[]
+}
+
+enum AssetSheet {
+  Icons = 'Icons',
+  Illustrations = 'Illustrations',
+  AbstractGraphics = 'Abstract Graphics',
+}
+
+export default function getAssets(sheet: AssetSheet) {
+  return getAirtable(sheet)
+    .select({
+      filterByFormula: `AND(${IS_APROVED}, ${TERMS_SIGNED})`,
+      sort: [{ field: 'Name', direction: 'desc' }],
+    })
+    .all()
+    .then((records) => {
+      return records.map((r) => normalize(r.fields))
+    })
+}
+
+function getAirtable(sheet: AssetSheet): Table<Fields> {
+  return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_BRANDKIT_ID)(sheet)
+}
+
+const IS_APROVED = 'Approved=1'
+const TERMS_SIGNED = 'Terms=1'
+
+function normalize(asset: Fields) {
+  return {
+    name: asset.Name,
+    description: asset.Description,
+    preview: getPreview(asset),
+    uri: getURI(asset),
+  }
+}
+
+function getPreview(asset: Fields) {
+  const previewField = asset[ASSSET_FIELD_LIGHT]
+
+  return (
+    (previewField &&
+      previewField[0] &&
+      previewField[0].thumbnails &&
+      previewField[0].thumbnails.large.url) ||
+    ''
+  )
+}
+
+function getURI(asset: Fields) {
+  return (asset.Zip && asset.Zip[0] && asset.Zip[0].url) || ''
+}

packages/web/server/index.ts

@@ -13,6 +13,7 @@ import ecoFundSubmission from '../server/EcoFundApp'
 import { RequestType } from '../src/fauceting/FaucetInterfaces'
 import nextI18next from '../src/i18n'
 import latestAnnouncements from './Announcement'
+import getAssets from './AssetBase'
 import { faucetOrInviteController } from './controllers'
 import getFormattedEvents from './EventHelpers'
 import { submitFellowApp } from './FellowshipApp'
@@ -74,9 +75,14 @@ function wwwRedirect(req, res, nextAction) {
     })
   })
 
+  server.get('/brand', (_, res) => {
+    res.redirect('/experience/brand')
+  })
+
   server.get('/connect', (_, res) => {
     res.redirect('/community')
   })
+
   server.get('/tos', (_, res) => {
     res.redirect('/user-agreement')
   })
@@ -141,6 +147,15 @@ function wwwRedirect(req, res, nextAction) {
     }
   })
 
+  server.get('/brand/api/assets/:asset', async (req, res) => {
+    try {
+      const assets = await getAssets(req.params.asset)
+      res.json(assets)
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ message: e.message || 'unknownError' })
+    }
+  })
+
   server.post('/partnerships-email', async (req, res) => {
     const { email } = req.body
     await mailer({

packages/web/src/brandkit/Color.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react'
+import { withNamespaces } from 'react-i18next'
+import { ImageBackground, ImageRequireSource, StyleSheet, Text, View } from 'react-native'
+import Palette from 'src/brandkit/color/Palette'
+import { brandStyles } from 'src/brandkit/common/constants'
+import {
+  ACCENT_PALETTE,
+  BACKGROUND_PALETTE,
+  GRAY_PALETTE,
+  PRIMARY_PALETTE,
+} from 'src/brandkit/common/data'
+import Page from 'src/brandkit/common/Page'
+import PageHeadline from 'src/brandkit/common/PageHeadline'
+import SectionTitle from 'src/brandkit/common/SectionTitle'
+import Judgement, { Value } from 'src/brandkit/logo/Judgement'
+import { I18nProps, NameSpaces } from 'src/i18n'
+import { ScreenProps, ScreenSizes, withScreenSize } from 'src/layout/ScreenSize'
+import { hashNav } from 'src/shared/menu-items'
+import { colors, fonts, standardStyles } from 'src/styles'
+const { brandColor } = hashNav
+
+export default React.memo(function Color() {
+  return (
+    <Page
+      sections={[
+        { id: brandColor.overview, children: <Overview /> },
+        { id: brandColor.backgrounds, children: <Backgrounds /> },
+      ]}
+    />
+  )
+})
+
+const Overview = withNamespaces(NameSpaces.brand)(function _Overview({ t }: I18nProps) {
+  return (
+    <View>
+      <PageHeadline title={t('color.title')} style={standardStyles.blockMarginBottom} />
+      <Palette
+        title={t('color.primaries')}
+        text={t('color.primariesText')}
+        colors={PRIMARY_PALETTE}
+      />
+      <Palette title={t('color.accents')} text={t('color.accentsText')} colors={ACCENT_PALETTE} />
+      <Palette title={t('color.grays')} text={t('color.graysText')} colors={GRAY_PALETTE} />
+    </View>
+  )
+})
+
+const Backgrounds = withNamespaces(NameSpaces.brand)(
+  withScreenSize<I18nProps>(function _Backgrounds({ t, screen }: I18nProps & ScreenProps) {
+    const stylesForJudgemnt = screen === ScreenSizes.DESKTOP ? styles.column : [standardStyles.row]
+
+    return (
+      <View>
+        <SectionTitle containerStyle={brandStyles.gap}>{t('color.backgroundTitle')}</SectionTitle>
+        <Palette text={t('color.backgroundText')} colors={BACKGROUND_PALETTE} />
+        <Text style={[brandStyles.gap, fonts.h5a, standardStyles.elementalMarginBottom]}>
+          {t('color.contrast')}
+        </Text>
+        <Text style={[brandStyles.gap, fonts.p]}>{t('color.contrastText')}</Text>
+        <View style={[standardStyles.elementalMargin, standardStyles.row]}>
+          <Lorem
+            color={colors.dark}
+            backgroundColor={colors.white}
+            withGap={true}
+            hasBorder={true}
+          />
+          <Lorem color={colors.white} backgroundColor={colors.dark} withGap={true} />
+        </View>
+        <Text style={[brandStyles.gap, fonts.p]}>{t('color.contrastText2')}</Text>
+        <View style={screen === ScreenSizes.DESKTOP ? brandStyles.tiling : { width: '100%' }}>
+          <View style={stylesForJudgemnt}>
+            <Judgement is={Value.Bad}>
+              <Lorem color={colors.gold} backgroundColor={colors.faintGold} />
+            </Judgement>
+            <Judgement is={Value.Good}>
+              <Lorem color={colors.dark} backgroundColor={colors.faintGold} />
+            </Judgement>
+          </View>
+          <View style={stylesForJudgemnt}>
+            <Judgement is={Value.Bad}>
+              <Lorem
+                color={colors.white}
+                backgroundColor={colors.gray}
+                image={require('src/brandkit/images/lilah.jpg')}
+              />
+            </Judgement>
+            <Judgement is={Value.Good}>
+              <Lorem
+                color={colors.white}
+                backgroundColor={colors.dark}
+                image={require('src/brandkit/images/lilahOverlay.jpg')}
+              />
+            </Judgement>
+          </View>
+          <View style={stylesForJudgemnt}>
+            <Judgement is={Value.Bad}>
+              <Lorem color={colors.primary} backgroundColor={colors.deepBlue} />
+            </Judgement>
+            <Judgement is={Value.Good}>
+              <Lorem color={colors.white} backgroundColor={colors.deepBlue} />
+            </Judgement>
+          </View>
+        </View>
+      </View>
+    )
+  })
+)
+
+interface LoremProps {
+  backgroundColor: colors
+  color: colors
+  withGap?: boolean
+  hasBorder?: boolean
+  image?: ImageRequireSource
+}
+
+function Lorem({ backgroundColor, color, withGap, hasBorder, image }: LoremProps) {
+  const Component = image ? ImageBackground : View
+
+  return (
+    // @ts-ignore : component does not have call signature?
+    <Component
+      source={image}
+      style={[
+        standardStyles.centered,
+        styles.lorem,
+        hasBorder && brandStyles.fullBorder,
+        withGap && brandStyles.gap,
+        { backgroundColor },
+      ]}
+    >
+      <Text style={[fonts.p, { color }]}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
+      </Text>
+    </Component>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 10 },
+  lorem: {
+    flex: 1,
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    minHeight: 200,
+  },
+  column: {
+    flex: 1,
+  },
+})