Add <TextButton> to Radiance ✨

docs/linkButton.md → docs/button/linkButton.md

@@ -27,7 +27,7 @@ import { LinkButton } from 'radiance-ui';
       I am Disabled
     </LinkButton>
   </LinkButton.Container>
-</React.Fragment>;
+</React.Fragment>
 ```
 
 #### React Router Link
@@ -38,7 +38,7 @@ import { Link } from 'react-router';
 
 <LinkButton to="/somepath" as={Link}>
   Router Link
-</LinkButton>;
+</LinkButton>
 ```
 
 <!-- STORY -->

docs/button/textButton.md

@@ -0,0 +1,30 @@
+# TextButton
+
+### Usage
+
+```jsx
+import { TextButton } from 'radiance-ui';
+
+<TextButton onClick={this.handleClick}>
+  This text is clickable
+</TextButton>
+
+<TextButton disabled>
+  This is disabled
+</TextButton>
+```
+
+<!-- STORY -->
+
+### Proptypes
+
+
+| prop     | propType | required | default  | description                                             |
+| -------- | -------- | -------- | -------- | ------------------------------------------------------- |
+| onClick  | func     | no       | () => {} | The callback funciton to call when component is clicked |
+| disabled | bool     | no       | false    | When true, `onClick` will not be called                 |
+| children | node     | yes      | -        | Node/text to be rendered inside the button              |
+
+
+### Notes
+`TextButton` will render a block of text (or node) that will function as a button. The component renders with padding and should not be used inline within body text, etc. Useful for rendering a chunk of text that can be clicked but can also be disabled if needed.

src/shared-components/button/components/textButton/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ButtonContents } from '../../style';
+import { BaseTextButton } from './style';
+
+const propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func,
+};
+
+const defaultProps = {
+  disabled: false,
+  onClick() {},
+};
+
+const TextButton = ({
+  disabled, children, onClick, ...rest
+}) => (
+  <BaseTextButton
+    disabled={disabled}
+    onClick={!disabled ? onClick : event => event.preventDefault()}
+    {...rest}
+  >
+    <ButtonContents hasIcon={false}>{children}</ButtonContents>
+  </BaseTextButton>
+);
+
+TextButton.propTypes = propTypes;
+TextButton.defaultProps = defaultProps;
+
+export default TextButton;

src/shared-components/button/components/textButton/style.js

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { COLORS } from '../../../../constants';
+
+/* eslint-disable-next-line import/prefer-default-export */
+export const BaseTextButton = styled.button`
+  border-color: transparent;
+  background-color: transparent;
+
+  color: ${({ disabled }) => `${disabled ? COLORS.textDisabled : COLORS.primary}` };
+  cursor: ${({ disabled }) => disabled ? 'not-allowed' : 'pointer' };
+
+  &:hover {
+    opacity: 0.8;
+    background-color: transparent;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+`;

src/shared-components/button/index.js

@@ -77,4 +77,5 @@ class Button extends React.Component {
 
 export LinkButton from './components/linkButton';
 export RoundButton from './components/roundButton';
+export TextButton from './components/textButton';
 export default Button;

src/shared-components/index.js

@@ -1,7 +1,7 @@
 export { default as Accordion } from './accordion';
 export { default as Alert } from './alert';
 export { default as Banner } from './banner';
-export { default as Button, RoundButton, LinkButton  } from './button';
+export { default as Button, RoundButton, LinkButton, TextButton } from './button';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Container } from './container';

stories/button/index.js

@@ -5,11 +5,12 @@ import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { css } from '@emotion/core';
 
-import ButtonReadme from 'docs/button.md';
-import RoundButtonReadme from 'docs/roundButton.md';
-import LinkButtonReadme from 'docs/linkButton.md';
+import ButtonReadme from 'docs/button/button.md';
+import RoundButtonReadme from 'docs/button/roundButton.md';
+import LinkButtonReadme from 'docs/button/linkButton.md';
+import TextButtonReadme from 'docs/button/textButton.md';
 import { CheckmarkIcon, ArrowLeftIcon, ArrowRightIcon } from 'src/svgs/icons';
-import { Button, RoundButton, LinkButton, Typography } from 'src/shared-components';
+import { Button, RoundButton, LinkButton, TextButton, Typography } from 'src/shared-components';
 import { SPACING } from 'src/constants';
 
 const stories = storiesOf('Buttons', module);
@@ -191,3 +192,20 @@ stories.add(
     </React.Fragment>
   ))
 );
+
+stories.add(
+  'TextButton',
+  withDocs(TextButtonReadme, () => (
+    <React.Fragment>
+      <Container>
+        <TextButton onClick={action('Button was clicked')}>
+          All of this text is clickable
+        </TextButton>
+        <br/>
+        <TextButton disabled>
+          This text button is disabled
+        </TextButton>
+      </Container>
+    </React.Fragment>
+  ))
+);