Release 0.2.2 (#567)

changelog.md

@@ -5,6 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+## 0.2.2 [May 29, 2018]
+
+### Fixed
+
+* Add missing id to Switch for accessibility [#558]
+
+* Fix path for tokens in helpers [#564]
+
+### Added
+
+* Add `Radio` component to Forms [#511]
+
+* Add `Label` component [#544]
+
+* Add support for custom Form fields [#530]
+
+* Add prop to make tooltips visible by default [#562]
+
+### Changed
+
+* **BREAKING** `method` has been renamed to `handler` for all components that accept actions as a prop [#551]
+
+  ```jsx
+  <Form.Actions primaryAction={{ label: 'Save Changes', handler: () => {} }} />
+  ```
+
+* Documentation improvements for `EmptyState` and `Alert` [#491] + [#534]
+
 ## 0.2.1 [May 8, 2018]
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "engine": "^7.0.0",
   "private": true,
   "workspaces": [
@@ -42,7 +42,7 @@
       "chromatic test --storybook-addon --script-name=dev:sandbox --exit-zero-on-changes",
     "catchup": "node tooling/catchup.js && yarn install",
     "deploy": "node tooling/publish.js",
-    "codemods": "jscodeshift -t src/codemods src/",
+    "codemods": "jscodeshift -t src/codemods src/components/",
     "build:sandbox": "SKETCH=true build-storybook -o build/sandbox",
     "sketch":
       "yarn build:sandbox && story2sketch --input=build/sandbox/iframe.html --output=dist/asketch.json && node tooling/cleanup-sketch.js"

src/babel-preset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@auth0/babel-preset-cosmos",
   "description": "babel preset to use cosmos",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "repository": "auth0/cosmos",
   "main": "index.js",
   "author": "siddharthkp",

src/codemods/index.js

@@ -1,3 +1,3 @@
-const scopeUsage = require('./scope-usage')
+const namedIndex = require('./named-index')
 
-module.exports = scopeUsage
+module.exports = namedIndex

src/codemods/named-index.js

@@ -0,0 +1,56 @@
+import fs from 'fs'
+import path from 'path'
+
+const transformer = (file, api) => {
+  const j = api.jscodeshift
+
+  if (file.path.includes('index.js')) {
+    let defaultDeclaration
+    let namedDeclarations = []
+
+    const source = j(file.source)
+
+    /* default declaration */
+    const defaults = source.find(j.ExportDefaultDeclaration)
+    defaults.forEach(path => {
+      defaultDeclaration = path.value.declaration.name
+    })
+
+    /* named declarations */
+    const statements = []
+    source.find(j.ExportNamedDeclaration).forEach(path => statements.push(path.value.specifiers))
+    statements.forEach(statement =>
+      statement.forEach(specifier => namedDeclarations.push(specifier.local.name))
+    )
+
+    /* rename index.js to component-name.js */
+    const directory = path.dirname(file.path)
+    const component = directory.split('/').pop()
+
+    fs.renameSync(file.path, file.path.replace('index', component))
+
+    /* write new file */
+    let code = `import `
+    if (defaultDeclaration) code += `${defaultDeclaration}`
+
+    if (namedDeclarations.length) {
+      if (defaultDeclaration) code += ', '
+      code += `{ ${namedDeclarations.join()} }`
+    }
+    code += ` from './${component}'`
+
+    code += `\n\n`
+
+    if (defaultDeclaration) code += `export default ${defaultDeclaration}`
+    if (namedDeclarations.length) {
+      code += `\n`
+      code += `export { ${namedDeclarations.join()} }`
+    }
+
+    return code
+  }
+
+  return j(file.source).toSource()
+}
+
+export default transformer

src/components/_helpers/reset.js

@@ -1,5 +1,5 @@
 import { injectGlobal } from 'styled-components'
-import { fonts } from '../../tokens'
+import { fonts } from '@auth0/cosmos-tokens'
 
 const reset = () => injectGlobal`
   html, body, div, span, applet, object, iframe,

src/components/atoms/_box/_box.js

@@ -0,0 +1,86 @@
+/*
+  This is a demo component to show how to write a good component.
+  We will create a square box component here.
+
+  There are 5 steps to do this
+*/
+
+/*
+  Step 1: Import all the dependencies
+  - import React and styled-components, thes are the bread and butter
+  - import prop type for documentation and validation
+  - import tokens instead of hard coding values
+*/
+
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+
+import { colors, misc } from '@auth0/cosmos-tokens'
+
+/*
+  Step 2: Create a styled element with css
+  You can get the html element from styled.element like styled.a
+*/
+
+const StyledBox = styled.div`
+  /* all your css goes here */
+
+  /* you can use variables here like tokens */
+  background: ${colors.base.grayLightest};
+  border: 1px solid ${colors.base.grayDark};
+  border-radius: ${misc.radius};
+
+  /* you can use props here to customize the element */
+  width: ${props => (props.big ? '100px' : '50px')};
+  height: ${props => (props.big ? '100px' : '50px')};
+
+  /* this is how you add pseudo states */
+  &:hover {
+    background: ${colors.base.grayLight};
+  }
+`
+
+/*
+ * Step 3: Create a React component that returns the styled element,
+ * Add description above the component, this will be shown in the docs
+ */
+
+const Box = props => {
+  /* you can pass on all the props to the component like this */
+  return <StyledBox {...props} />
+}
+
+/*
+  Step 4: We need to add prop information for our component
+  - Add propTypes to make for documentation and validation
+  - Add defaultProps for documentation
+*/
+Box.propTypes = {
+  /** This comment will be picked up by the docs */
+  big: PropTypes.bool
+}
+
+Box.defaultProps = {
+  big: false
+}
+
+/* Finally, export the component */
+export default Box
+
+/*
+  We are not done yet, there is one more step to make our component usable
+  Document the examples in _box.md
+*/
+
+/*
+  Bonus step: Add your component to component/index.js
+  so that it can be imported from accross the system
+
+  import { Box } from 'src/components'
+
+  This is a step only for convenience while developing the system,
+  it will be replaced with a more explicit syntax
+
+  import { Box } from '@auth0/cosmos'
+*/

src/components/atoms/_box/index.js

@@ -1,86 +1,3 @@
-/*
-  This is a demo component to show how to write a good component.
-  We will create a square box component here.
+import Box from './_box'
 
-  There are 5 steps to do this
-*/
-
-/*
-  Step 1: Import all the dependencies
-  - import React and styled-components, thes are the bread and butter
-  - import prop type for documentation and validation
-  - import tokens instead of hard coding values
-*/
-
-import React from 'react'
-import styled from 'styled-components'
-import PropTypes from 'prop-types'
-
-import { colors, misc } from '@auth0/cosmos-tokens'
-
-/*
-  Step 2: Create a styled element with css
-  You can get the html element from styled.element like styled.a
-*/
-
-const StyledBox = styled.div`
-  /* all your css goes here */
-
-  /* you can use variables here like tokens */
-  background: ${colors.base.grayLightest};
-  border: 1px solid ${colors.base.grayDark};
-  border-radius: ${misc.radius};
-
-  /* you can use props here to customize the element */
-  width: ${props => (props.big ? '100px' : '50px')};
-  height: ${props => (props.big ? '100px' : '50px')};
-
-  /* this is how you add pseudo states */
-  &:hover {
-    background: ${colors.base.grayLight};
-  }
-`
-
-/*
- * Step 3: Create a React component that returns the styled element,
- * Add description above the component, this will be shown in the docs
- */
-
-const Box = props => {
-  /* you can pass on all the props to the component like this */
-  return <StyledBox {...props} />
-}
-
-/*
-  Step 4: We need to add prop information for our component
-  - Add propTypes to make for documentation and validation
-  - Add defaultProps for documentation
-*/
-Box.propTypes = {
-  /** This comment will be picked up by the docs */
-  big: PropTypes.bool
-}
-
-Box.defaultProps = {
-  big: false
-}
-
-/* Finally, export the component */
 export default Box
-
-/*
-  We are not done yet, there is one more step to make our component usable
-  Document the examples in _box.md
-*/
-
-/*
-  Bonus step: Add your component to component/index.js
-  so that it can be imported from accross the system
-
-  import { Box } from 'src/components'
-
-  This is a step only for convenience while developing the system,
-  it will be replaced with a more explicit syntax
-
-  import { Box } from '@auth0/cosmos'
-*/

src/components/atoms/_styled-input/_styled-input.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components'
+
+import { colors, fonts, spacing, misc } from '@auth0/cosmos-tokens'
+
+const config = {
+  basic: {
+    background: colors.input.background,
+    border: colors.input.border,
+    hoverBorder: colors.input.borderHover,
+    focusBorder: colors.input.borderFocus,
+    placeholder: colors.input.placeholder
+  },
+  readOnly: {
+    background: colors.input.backgroundReadOnly,
+    border: colors.input.border,
+    hoverBorder: colors.input.border,
+    focusBorder: colors.input.border,
+    placeholder: colors.input.placeholderReadOnly
+  },
+  error: {
+    background: colors.input.background,
+    border: colors.input.borderError,
+    hoverBorder: colors.input.borderError,
+    focusBorder: colors.input.borderError
+  }
+}
+
+const getAttributes = props => {
+  if (props.readOnly) return config.readOnly
+  else if (props.error) return config.error
+  else return config.basic
+}
+
+const StyledInput = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+
+  background: ${props => getAttributes(props).background};
+  border: 1px solid;
+  border-color: ${props => getAttributes(props).border};
+  border-radius: ${misc.radius};
+
+  font-family: ${props => (props.code ? fonts.family.code : 'inherit')};
+  font-size: ${props => (props.code ? '13px' : 'inherit')};
+  color: ${colors.text.inputs};
+
+  padding: ${misc.inputs.padding} ${spacing.small};
+
+  cursor: ${props => (props.readOnly ? 'not-allowed' : 'auto')};
+  transition: border-color ${misc.animationDuration}, box-shadow ${misc.animationDuration};
+
+  &:hover {
+    border-color: ${props => getAttributes(props).hoverBorder};
+  }
+  &:focus {
+    border-color: ${props => getAttributes(props).focusBorder};
+    box-shadow: 0px 0px 0 1px ${props => getAttributes(props).focusBorder};
+    outline: none;
+  }
+  &::-webkit-input-placeholder {
+    color: ${props => getAttributes(props).placeholder};
+  }
+`
+
+export { StyledInput }