🔖 Version 0.0.15

Merge pull request #20 from commitd/develop

Author: stuarthendren

.drone.yml

@@ -4,29 +4,23 @@ type: docker
 name: components
 
 steps:
-  - name: build
-    image: node:latest
+  - name: npm_auth
+    image: robertstettner/drone-npm-auth
     environment:
-      GITHUB_TOKEN:
+    settings:
+      registry: npm.pkg.github.com
+      token:
         from_secret: github_token
-    volumes:
-      - name: drone
-        path: /drone
+
+  - name: build
+    image: node:latest
     commands:
-      - . /drone/config/env
       - yarn install
       - yarn build
 
   - name: publish
     image: node:latest
-    environment:
-      GITHUB_TOKEN:
-        from_secret: github_token
-    volumes:
-      - name: drone
-        path: /drone
     commands:
-      - . /drone/config/env
       - yarn publish
       - yarn deploy-storybook --ci
     when:
@@ -43,19 +37,19 @@ steps:
         from_secret: sonar_token
     settings:
       exclusions: '**/node_modules/**/*,**/dist/**/*.js'
+    when:
+      branch:
+        - master
 
   - name: slack
     image: plugins/slack
     settings:
       channel: group-ci
       webhook:
         from_secret: slack_webhook
+      template:
+        from_secret: slack_template
     when:
       status:
         - success
         - failure
-
-volumes:
-  - name: drone
-    host:
-      path: /drone

.npmrc

@@ -0,0 +1 @@
+@commitd:registry=https://npm.pkg.github.com/

example/index.tsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import * as C from '../dist'
 import logo from './images/Committed - Yellow Trans-128px.png'
-import { Display } from '../dist'
 
 const footerHeight = '200px'
 
@@ -13,12 +12,9 @@ const Header = () => (
       <C.Box flexGrow={1}>
         <C.Heading.h1>Example</C.Heading.h1>
       </C.Box>
-      <C.IconButton
-        href="https://github.com/commitd/components"
-        target="_blank"
-      />
+      <C.Avatar src="https://i.pravatar.cc/40" />
       <C.Button color="inherit" variant="text">
-        Login
+        Logout
       </C.Button>
     </C.Toolbar>
   </C.AppBar>
@@ -44,6 +40,7 @@ const Content = () => (
       We believe we can all move forward faster by being open. Learn more about
       our contributions.
     </C.Text>
+    <C.Divider my={3} />
     <C.Flex justifyContent="center" alignContent="center" flexWrap="wrap">
       {[
         'Speedy Spotless',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commitd/components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Committed Component Library",
   "author": "Committed",
   "license": "UNLICENSED",

src/components/avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import MaterialAvatar, {
   AvatarProps as MaterialAvatarProps
 } from '@material-ui/core/Avatar'
@@ -12,25 +12,26 @@ import {
   FlexboxProps
 } from '@material-ui/system'
 import { fractionToPercent } from '../../util'
+import { Theme } from '../../theme'
 
-export const textColor = style({
+const textColor = style<'color', Theme>({
   prop: 'color',
   themeKey: 'palette'
 })
 
-export const bgcolor = style({
-  prop: 'bg',
+const bgcolor = style<'bgcolor', Theme>({
+  prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette'
 })
 
-export const width = style({
+const width = style<'size', Theme>({
   prop: 'size',
   cssProperty: 'width',
   transform: fractionToPercent
 })
 
-export const height = style({
+const height = style<'size', Theme>({
   prop: 'size',
   cssProperty: 'height',
   transform: fractionToPercent
@@ -42,18 +43,20 @@ export type AvatarProps = MaterialAvatarProps &
     /**
      * The background color
      */
-    bg?: string
+    bgcolor?: string
     /**
      * The color of the icon or text
      */
     color?: string
     /**
      * The size (width and height) of the avatar, e.g. (24px)
      */
-    size?: string
+    size?: string | number
   }
 
-export const Avatar = styled<React.ComponentType<AvatarProps>>(MaterialAvatar)(
+export const Avatar: React.ComponentType<AvatarProps> = styled<
+  React.ComponentType<AvatarProps>
+>(MaterialAvatar)(
   compose(
     spacing,
     flexbox,

src/components/card/Card.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import { palette, PaletteProps } from '@material-ui/system'
 import {
   withPositioning,

src/components/divider/Divider.tsx

@@ -3,19 +3,26 @@ import MaterialDivider, {
   DividerProps as MaterialDividerProps
 } from '@material-ui/core/Divider'
 import { styled } from '@material-ui/styles'
-import { style } from '@material-ui/system'
+import { style, SpacingProps, spacing, compose } from '@material-ui/system'
+import { Theme } from '../../theme'
 
-export type DividerProps = MaterialDividerProps & {
-  /* the color of the divider from the theme's palette */
-  color: string
-}
+export type DividerProps = MaterialDividerProps &
+  SpacingProps & {
+    /* the color of the divider from the theme's palette */
+    color?: string
+  }
 
-export const color = style({
+const color = style<'color', Theme>({
   prop: 'color',
   cssProperty: 'backgroundColor',
   themeKey: 'palette'
 })
 
-export const Divider = styled<React.ComponentType<DividerProps>>(
-  MaterialDivider
-)(color)
+export const Divider: React.ComponentType<DividerProps> = styled<
+  React.ComponentType<DividerProps>
+>(MaterialDivider)(
+  compose(
+    color,
+    spacing
+  )
+)

src/components/form/Form.tsx

@@ -15,7 +15,7 @@ export type FormProps = React.FormHTMLAttributes<HTMLFormElement> &
   FlexboxProps &
   SizingProps
 
-export const Form = styled('form')(
+export const Form: React.ComponentType<FormProps> = styled('form')(
   compose(
     spacing,
     flexbox,

src/components/form/FormControl.tsx

@@ -18,9 +18,9 @@ export type FormControlProps = MaterialFormControlProps &
   FlexboxProps &
   SizingProps
 
-export const FormControl = styled<
-  React.ComponentType<MaterialFormControlProps>
->(MaterialFormControl)(
+export const FormControl: React.ComponentType<
+  MaterialFormControlProps
+> = styled(MaterialFormControl)(
   compose(
     spacing,
     flexbox,

src/components/iconbutton/IconButton.tsx

@@ -18,7 +18,7 @@ export interface IconButtonProps
     FlexboxProps,
     AProps {}
 
-export const IconButton = styled<React.ComponentType<IconButtonProps>>(
+export const IconButton: React.ComponentType<IconButtonProps> = styled(
   withNoOpener(MaterialIconButton)
 )(
   compose(