add new components

.pre-commit-config.yaml

@@ -3,6 +3,9 @@ repos:
     rev: 'v2.5.1'
     hooks:
       - id: prettier
+        additional_dependencies:
+          - 'prettier@2.5.1'
+          - '@carbonplan/prettier@1.2.0'
         language_version: system
         files: "\\.(\
           css|less|scss\
@@ -18,6 +21,9 @@ repos:
     rev: 'v2.5.1'
     hooks:
       - id: prettier
+        additional_dependencies:
+          - 'prettier@2.5.1'
+          - '@carbonplan/prettier@1.2.0'
         language_version: system
         name: prettier-markdown
         entry: prettier --write --parser mdx

package.json

@@ -1,12 +1,12 @@
 {
   "name": "@carbonplan/components",
-  "version": "11.1.4",
+  "version": "11.2.0-develop.7",
   "description": "shared components for our websites",
   "main": "dst/index.js",
   "module": "dst/index.esm.js",
   "scripts": {
-    "build": "rimraf dst && microbundle src/index.js -o dst/index.js --no-compress --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
-    "watch": "microbundle watch src/index.js -o dst/index.js --no-compress --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
+    "build": "rimraf dst && microbundle src/index.js -o dst/index.js --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
+    "watch": "microbundle watch src/index.js -o dst/index.js --jsx React.createElement -f modern,es,cjs --jsxFragment React.Fragment",
     "format": "prettier --write 'src/**/*.js' '*.css'"
   },
   "repository": {
@@ -35,6 +35,7 @@
     "@carbonplan/icons": "^1.0.0",
     "@theme-ui/color": ">=0.11.1"
   },
+  "prettier": "@carbonplan/prettier",
   "peerDependencies": {
     "@emotion/react": "^11.1.5",
     "next": "^10.1.3 || ^11.0.1 || || ^12.0.4",
@@ -43,6 +44,7 @@
     "theme-ui": ">=0.11.1"
   },
   "devDependencies": {
+    "@carbonplan/prettier": "^1.2.0",
     "microbundle": "^0.13.0",
     "prettier": "^2.2.1",
     "rimraf": "3.0.2"

src/avatar-group.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import Avatar from './avatar'
+import Row from './row'
+import Column from './column'
+import Group from './group'
+
+const sizes = {
+  xs: [1],
+  sm: [3],
+  md: [5],
+  lg: [7],
+  xl: [9],
+}
+
+const AvatarGroup = ({
+  members,
+  direction = 'horizontal',
+  align,
+  spacing = 'md',
+  width,
+  maxWidth,
+  fixedCount,
+  sx,
+  ...props
+}) => {
+  if (members.length > fixedCount) {
+    throw Error(
+      `cannot render '${members.length}' avatars with a fixed count of '${fixedCount}'`
+    )
+  }
+
+  let gap
+  if (sizes.hasOwnProperty(spacing)) {
+    gap = sizes[spacing]
+  } else {
+    gap = spacing
+  }
+
+  let start = (idx) => 'auto'
+  if (align) {
+    if (!Array.isArray(align)) {
+      align = [align]
+    }
+    start = (idx) =>
+      align.map((d) => {
+        if (d === 'left') {
+          return 'auto'
+        } else if (d === 'right') {
+          const offset = Math.max(1, fixedCount - members.length + 1)
+          return offset + idx
+        } else {
+          throw Error(`alignment '${align}' not recognized`)
+        }
+      })
+  }
+
+  return (
+    <>
+      {fixedCount && (
+        <Row columns={fixedCount} gap={gap} sx={sx} {...props}>
+          {members.map((props, idx) => (
+            <Column key={idx} start={start(idx)}>
+              <Avatar {...props} width={width} maxWidth={maxWidth} />
+            </Column>
+          ))}
+        </Row>
+      )}
+      {!fixedCount && (
+        <Group direction={direction} spacing={spacing} sx={sx} {...props}>
+          {members.map((props, idx) => (
+            <Avatar key={idx} {...props} width={width} maxWidth={maxWidth} />
+          ))}
+        </Group>
+      )}
+    </>
+  )
+}
+
+export default AvatarGroup

src/avatar.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Box, Image } from 'theme-ui'
+
+const Avatar = ({
+  color = 'transparent',
+  width = '90px',
+  maxWidth,
+  name,
+  github,
+  alt,
+  src,
+  sx,
+  ...props
+}) => {
+  if (!name && !src && !github) {
+    console.warn('must specify either name, github, or src')
+  }
+
+  let srcProp, altProp
+  if (name) {
+    srcProp = `https://images.carbonplan.org/team/${name
+      .toLowerCase()
+      .replace(' ', '-')}.png`
+    altProp = alt || name
+  } else if (github) {
+    srcProp = `https://github.com/${github}.png`
+    altProp = alt || github
+  } else {
+    srcProp = src
+    altProp = alt
+  }
+
+  return (
+    <Box
+      sx={{
+        width: width,
+        maxWidth: maxWidth,
+        height: 'auto',
+        borderRadius: '50%',
+        position: 'relative',
+        display: 'inline-block',
+        verticalAlign: 'top',
+        bg: color,
+        ...sx,
+      }}
+      {...props}
+    >
+      <Image
+        alt={altProp}
+        src={srcProp}
+        sx={{
+          opacity: color && color !== 'transparent' ? 0.25 : 1,
+          filter:
+            color && color !== 'transparent'
+              ? 'grayscale(100%) contrast(200%) brightness(100%)'
+              : 'none',
+          width: '100%',
+          borderRadius: '50%',
+          display: 'block',
+        }}
+      />
+    </Box>
+  )
+}
+
+export default Avatar

src/blockquote.js

@@ -0,0 +1,42 @@
+import React, { cloneElement, Children } from 'react'
+import { Box } from 'theme-ui'
+
+const specialChars = ['“', '"', "'", '‘']
+
+const Blockquote = ({ children }) => {
+  let firstChar = ''
+
+  if (
+    Array.isArray(children) &&
+    children[0].props &&
+    typeof children[0].props.children === 'string'
+  ) {
+    firstChar = children[0].props.children.slice(0, 1)
+    children = Children.map(children, (d, i) => {
+      if (i == 0) {
+        return cloneElement(d, { children: d.props.children.slice(1) })
+      } else return d
+    })
+  } else if (children.props && typeof children.props.children === 'string') {
+    firstChar = children.props.children.slice(0, 1)
+    children = cloneElement(children, {
+      children: children.props.children.slice(1),
+    })
+  } else if (typeof children === 'string') {
+    firstChar = children.slice(0, 1)
+    children = children.slice(1)
+  }
+
+  return (
+    <Box variant='styles.blockquote'>
+      {specialChars.includes(firstChar) && (
+        <Box as='span' sx={{ position: 'absolute', ml: '-0.4em' }}>
+          {firstChar}
+        </Box>
+      )}
+      {children}
+    </Box>
+  )
+}
+
+export default Blockquote

src/button.js

@@ -25,7 +25,8 @@ const Button = (
 
   let offset, margin, top, height, width, strokeWidth
 
-  const color = sx && sx.color ? sx.color : null
+  const { color, ...sxProp } = sx || {}
+
   const baseColor = color || (inverted ? 'secondary' : 'primary')
   const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary'
 
@@ -162,7 +163,7 @@ const Button = (
       ...suffixHover,
       ...prefixHover,
     },
-    ...sx,
+    ...sxProp,
   }
 
   const Inner = (

src/caption.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Box } from 'theme-ui'
+
+const Caption = ({ number, children, label = 'figure' }) => {
+  return (
+    <Box
+      as='figcaption'
+      sx={{
+        color: 'secondary',
+        mt: [3, 3, 3, 4],
+        mb: [6, 6, 6, 7],
+        fontSize: [2, 2, 2, 3],
+      }}
+    >
+      {number && (
+        <>
+          <Box
+            sx={{
+              textTransform: 'uppercase',
+              letterSpacing: 'smallcaps',
+              display: 'inline-block',
+            }}
+          >
+            {label} {number}
+          </Box>{' '}
+          <Box sx={{ display: 'inline-block', mx: [1], pr: [1] }}>/</Box>
+        </>
+      )}
+      {children}
+    </Box>
+  )
+}
+
+export default Caption