primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-29 09:06:07 +03:00
Code Issues Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Joshua Shao 2019-02-21 20:59:16 -05:00
parent 05b66d8f20
commit 95a1188620
6 changed files with 57 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/landing/PrimerCSSAnimation.js Normal file
View File

@ -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

1
docs/landing/PrimerCSSAnimation.json Normal file
View File

File diff suppressed because one or more lines are too long

18
docs/landing/index.js
View File

@ -1,14 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import {BorderBox, Box, Flex, Heading, Link, Text} from '@primer/components'
import {getAssetPath} from '../utils'
import { BorderBox, Box, Flex, Heading, Link, Text } from '@primer/components'
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}) {
const {name, imports = []} = meta
export function MetaPackageBox({ children, meta = {}, title, ...rest }) {
const { name, imports = [] } = meta
const bundles = imports.filter(bundle => !/support/.test(bundle))
return (
<Flex.Item is={BorderBox} bg="white" maxWidth={220} {...rest}>

54
package-lock.json generated
View File

@ -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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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,
"optional": true
"dev": 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",

3
package.json
View File

@ -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"
}
}

4
pages/css/index.md
View File

@ -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>