feat(Radio): radio button base implementation (#100)

* radio button base implementation

* updating the changelog

* updating Radio variables

* cleaning the code; moving the input inside of the label for behavior compatibility

* removing typings from example

* adding type as propType

* small style tweaks

* changelog

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add basic `Radio` component @alinais ([#100](https://github.com/stardust-ui/react/pull/100))
+
 <!--------------------------------[ v0.3.0 ]------------------------------- -->
 ## [v0.3.0](https://github.com/stardust-ui/react/tree/v0.3.0) (2018-08-22)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.7...v0.3.0)

docs/src/examples/components/Radio/Types/RadioExample.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Radio } from '@stardust-ui/react'
+
+const RadioExample = () => <Radio label="Make your choice" />
+
+export default RadioExample

docs/src/examples/components/Radio/Types/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Radio"
+      description="A radio for checking."
+      examplePath="components/Radio/Types/RadioExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Radio/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const RadioExamples = () => (
+  <div>
+    <Types />
+  </div>
+)
+
+export default RadioExamples

src/components/Radio/Radio.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+
+import { createHTMLInput, customPropTypes, UIComponent } from '../../lib'
+import Label from '../Label'
+
+/**
+ * @accessibility
+ * This is shown at the top.
+ */
+class Radio extends UIComponent<any, any> {
+  static displayName = 'Radio'
+
+  static className = 'ui-radio'
+
+  static propTypes = {
+    as: customPropTypes.as,
+
+    /** Child content * */
+    children: PropTypes.node,
+
+    /** Additional classes. */
+    className: PropTypes.string,
+
+    /** The label of the radio input. */
+    label: PropTypes.string,
+
+    /** Custom styles to be applied for component. */
+    styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
+    /** The HTML input type. */
+    type: PropTypes.string,
+
+    /** Custom variables to be applied for component. */
+    variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  }
+
+  static handledProps = ['as', 'children', 'className', 'label', 'styles', 'type', 'variables']
+
+  static defaultProps = {
+    as: 'div',
+    type: 'radio',
+  }
+
+  renderComponent({ ElementType, classes, rest, styles }) {
+    const { type, label } = this.props
+
+    return (
+      <ElementType {...rest} className={classes.root}>
+        <Label styles={{ root: styles.label }}>
+          {createHTMLInput(type, {
+            overrideProps: {
+              className: classes.radio,
+            },
+          })}
+          {label}
+        </Label>
+      </ElementType>
+    )
+  }
+}
+
+export default Radio

src/components/Radio/index.ts

@@ -0,0 +1 @@
+export { default } from './Radio'

src/index.ts

@@ -14,6 +14,7 @@ export { default as Menu } from './components/Menu'
 export { MenuItem } from './components/Menu'
 export { default as Provider } from './components/Provider'
 export { default as ProviderConsumer } from './components/Provider/ProviderConsumer'
+export { default as Radio } from './components/Radio'
 export { default as Icon } from './components/Icon'
 export { default as Text } from './components/Text'
 export { default as Header } from './components/Header'

src/themes/teams/componentStyles.ts

@@ -32,9 +32,10 @@ export { default as List } from './components/List/listStyles'
 export { default as ListItem } from './components/List/listItemStyles'
 
 export { default as Menu } from './components/Menu/menuStyles'
-
 export { default as MenuItem } from './components/Menu/menuItemStyles'
 
+export { default as Radio } from './components/Radio/radioStyles'
+
 export { default as Segment } from './components/Segment/segmentStyles'
 
 export { default as Text } from './components/Text/textStyles'

src/themes/teams/componentVariables.ts

@@ -26,4 +26,6 @@ export { default as ListItem } from './components/List/listItemVariables'
 
 export { default as Menu } from './components/Menu/menuVariables'
 
+export { default as Radio } from './components/Radio/radioVariables'
+
 export { default as Text } from './components/Text/textVariables'

src/themes/teams/components/Radio/radioStyles.ts

@@ -0,0 +1,29 @@
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+
+const radioStyles: IComponentPartStylesInput = {
+  root: ({ props, variables }): ICSSInJSStyle => {
+    return {
+      outline: 0,
+      display: 'inline-block',
+    }
+  },
+
+  radio: ({ props, variables }): ICSSInJSStyle => {
+    return {
+      marginRight: variables.radioMargin,
+    }
+  },
+
+  label: ({ props, variables }): ICSSInJSStyle => {
+    return {
+      cursor: 'pointer',
+      display: 'inline-flex',
+      alignItems: 'baseline',
+      fontWeight: variables.fontWeight,
+      minHeight: '2.5rem',
+      backgroundColor: 'transparent',
+    }
+  },
+}
+
+export default radioStyles

src/themes/teams/components/Radio/radioVariables.ts

@@ -0,0 +1,10 @@
+import { pxToRem } from '../../../../lib'
+
+export default (siteVars: any) => {
+  const vars: any = {}
+
+  vars.fontWeight = 400
+  vars.radioMargin = `${pxToRem(10)}`
+
+  return vars
+}

test/specs/components/Radio/Radio-tests.ts

@@ -0,0 +1,7 @@
+import { isConformant } from 'test/specs/commonTests'
+
+import Radio from 'src/components/Radio'
+
+describe('Radio', () => {
+  isConformant(Radio)
+})