initial commit

docs/landing/PrimerCSSAnimation.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import dynamic from 'next/dynamic'
+import animation from './PrimerCSSAnimation.json'
+
+const ReactBodymovin = dynamic(() => import('react-bodymovin'), {
+  ssr: false
+})
+
+const bodymovinOptions = {
+  loop: true,
+  autoplay: true,
+  prerender: true,
+  animationData: animation
+}
+
+const PrimerCSSAnimation = props => <ReactBodymovin options={bodymovinOptions} {...props} />
+
+export default PrimerCSSAnimation

docs/landing/index.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {BorderBox, Box, Flex, Heading, Link, Text} from '@primer/components'
+import { BorderBox, Box, Flex, Heading, Link, Text } from '@primer/components'
-import {getAssetPath} from '../utils'
+import { getAssetPath } from '../utils'
 import UtilitiesImage from './UtilitiesImage.svg'
 import ObjectsImage from './ObjectsImage.svg'
 import ComponentsImage from './ComponentsImage.svg'
 import SpacingImage from './SpacingImage.svg'
 import ColorImage from './ColorImage.svg'
 
-export {default as HeaderImage} from './HeaderImage.svg'
+export { default as PrimerCSSAnimation } from './PrimerCSSAnimation.js'
 
 const OverviewTitle = props => <Heading fontSize={3} fontWeight="normal" is="div" {...props} />
 const OverviewText = props => <Text fontSize={1} {...props} />
@@ -33,7 +33,7 @@ export function StylesOverview(props) {
   ]
   return (
     <Flex {...props}>
-      {styleTypes.map(({name, desc, image}) => (
+      {styleTypes.map(({ name, desc, image }) => (
         <Flex.Item is={Text} textAlign="center" mx={4} key={name}>
           <Image src={image} height={90} mb={2} />
           <OverviewTitle>{name}</OverviewTitle>
@@ -74,7 +74,7 @@ export function PrimitivesOverview(props) {
   ]
   return (
     <Box width={['auto', 'auto', 10 / 12]} mx="auto" {...props}>
-      {primitiveTypes.map(({name, desc, image}) => (
+      {primitiveTypes.map(({ name, desc, image }) => (
         <Flex key={name} my={6} alignItems="center">
           <Box width={300} mr={6} py={2}>
             <Image src={image} />
@@ -100,7 +100,7 @@ PrimitivesOverview.propTypes = {
 }
 
 function Image(props) {
-  const {src, ...rest} = props
+  const { src, ...rest } = props
   switch (typeof src) {
     case 'string':
       return <Box is="img" width="100%" alt="" {...props} />
@@ -111,7 +111,7 @@ function Image(props) {
   }
 }
 
-export function PrimerPackageBox({count, ...rest}) {
+export function PrimerPackageBox({ count, ...rest }) {
   return (
     <Flex justifyContent="space-around" {...rest}>
       <BorderBox bg="gray.1" width="auto" px={6} py={3} my={4}>
@@ -136,8 +136,8 @@ PrimerPackageBox.propTypes = {
   count: PropTypes.number
 }
 
-export function MetaPackageBox({children, meta = {}, title, ...rest}) {
+export function MetaPackageBox({ children, meta = {}, title, ...rest }) {
-  const {name, imports = []} = meta
+  const { name, imports = [] } = meta
   const bundles = imports.filter(bundle => !/support/.test(bundle))
   return (
     <Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>

package-lock.json

@@ -5555,6 +5555,11 @@
         }
       }
     },
+    "bodymovin": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/bodymovin/-/bodymovin-4.13.0.tgz",
+      "integrity": "sha1-Btl8ATDiM03MszvqY4E2+Ip0VAs="
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -10536,8 +10541,7 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -10561,15 +10565,13 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -10586,22 +10588,19 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -10732,8 +10731,7 @@
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -10747,7 +10745,6 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -10764,7 +10761,6 @@
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -10773,15 +10769,13 @@
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -10802,7 +10796,6 @@
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -10891,8 +10884,7 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -10906,7 +10898,6 @@
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -11002,8 +10993,7 @@
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -11045,7 +11035,6 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -11067,7 +11056,6 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -11116,15 +11104,13 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -21204,6 +21190,14 @@
         }
       }
     },
+    "react-bodymovin": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-bodymovin/-/react-bodymovin-2.0.0.tgz",
+      "integrity": "sha512-72MWWvPyF2Ah329+z0dVEvyNce+aiY2xOw7I9FzO8Xc15BWYvOQOnqzLTxSWjaZAdenk7e9vSanBCtB8Fqi7Cg==",
+      "requires": {
+        "bodymovin": "^4.13.0"
+      }
+    },
     "react-dev-utils": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.3.tgz",

package.json

@@ -136,5 +136,8 @@
     "unist-util-stringify-position": "^2.0.0",
     "unist-util-visit": "^1.4.0",
     "webpack": "4.20.2"
+  },
+  "dependencies": {
+    "react-bodymovin": "2.0.0"
   }
 }

pages/css/index.md

@@ -1,6 +1,6 @@
 import {Box, Flex, Heading, Link, Text} from '@primer/components'
 import {
-  HeaderImage,
+  PrimerCSSAnimation,
   MetaPackageBox,
   PrimerPackageBox,
   PrimitivesOverview,
@@ -20,7 +20,7 @@ export const Hero = () => (
         <Text is="div" color="blue.2" fontSize={2} mb={4}>
           v{version}
         </Text>
-        <Box is={HeaderImage} mb={6} />
+        <Box is={PrimerCSSAnimation} mb={6} />
       </Box>
     </Box>
   </Box>