Refactor TextButton

So that it is it's own component with documentation. I also removed
some unnecessary use cases of inheriting from it.

Author: Marco Segreto

app/javascript/ui/admin/AdminAudienceModal.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { Flex, Box } from 'reflexbox'
 import { map, capitalize } from 'lodash'
 import Modal from '~/ui/global/modals/Modal'
-import { TextButton } from '~/ui/global/styled/buttons'
+import { FormButton } from '~/ui/global/styled/buttons'
 import { FieldContainer, Label } from '~/ui/global/styled/forms'
 import HorizontalDivider from '~shared/components/atoms/HorizontalDivider'
 import v from '~/utils/variables'
@@ -23,14 +23,6 @@ const SelectedOption = styled.span`
 `
 SelectedOption.displayName = 'SelectedOption'
 
-const CloseModalButton = styled(TextButton)`
-  background: ${v.colors.black};
-  border-radius: 20px;
-  width: 183px;
-  height: 40px;
-  color: ${v.colors.white};
-`
-
 @inject('apiStore', 'uiStore')
 @observer
 class AdminAudienceModal extends React.Component {
@@ -107,14 +99,14 @@ class AdminAudienceModal extends React.Component {
           {this.renderCriteria()}
           {showModalButton && (
             <div style={{ textAlign: 'center', paddingBottom: '2rem' }}>
-              <CloseModalButton
+              <FormButton
                 data-cy="CloseModalButton"
                 onClick={this.handleClose}
                 width={200}
                 className="adminAudienceModalButton"
               >
                 {feedbackAudienceMenuOpen ? 'Add Audience' : 'Close'}
-              </CloseModalButton>
+              </FormButton>
             </div>
           )}
         </React.Fragment>

app/javascript/ui/global/TextButton.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+import v from '~/utils/variables'
+
+/**
+ * Button that's just text with no background styling.
+ */
+const TextButton = styled.button`
+  text-transform: uppercase;
+  max-width: ${props => (props.maxWidth ? `${props.maxWidth}px` : 'none')};
+  font-family: ${v.fonts.sans};
+  font-size: ${props => props.fontSizeEm}rem;
+  font-weight: 500;
+  letter-spacing: 0.09375rem;
+  cursor: pointer;
+  color: ${props => props.color};
+  border: none;
+  background: none;
+`
+TextButton.propTypes = {
+  /** Color for the button text */
+  color: PropTypes.oneOf(Object.values(v.colors)),
+  /** Font size in ems for the button text */
+  fontSizeEm: PropTypes.number,
+  maxWidth: PropTypes.number,
+}
+TextButton.defaultProps = {
+  color: v.colors.commonDarkest,
+  fontSizeEm: 0.9375,
+  maxWidth: null,
+}
+TextButton.displayName = 'TextButton'
+/** @component */
+export default TextButton

app/javascript/ui/global/TextButton.md

@@ -0,0 +1,23 @@
+Default button style
+
+```jsx
+  <TextButton>
+    Action
+  </TextButton>
+```
+
+
+"More" grid card button
+
+```jsx
+  <TextButton fontSizeEm={0.75}>
+    Action
+  </TextButton>
+```
+
+```jsx
+  import v from '../../utils/variables'
+  ;<TextButton color={v.colors.primaryDark}>
+    Action
+  </TextButton>
+```

app/javascript/ui/grid/GridCard.js

@@ -13,10 +13,8 @@ import ActionMenu from '~/ui/grid/ActionMenu'
 import CardActionHolder from '~/ui/icons/CardActionHolder'
 
 import EditButton from '~/ui/reporting/EditButton'
-import {
-  NamedActionButton,
-  CollectionCoverTextButton,
-} from '~/ui/global/styled/buttons'
+import TextButton from '~/ui/global/TextButton'
+import { NamedActionButton } from '~/ui/global/styled/buttons'
 import FullScreenIcon from '~/ui/icons/FullScreenIcon'
 import Loader from '~/ui/layout/Loader'
 import Download from '~/ui/grid/Download'
@@ -543,7 +541,7 @@ class GridCard extends React.Component {
         </StyledGridCardInner>
         {record.isCreativeDifferenceChartCover && (
           <BottomRightActionHolder onClick={this.handleMoreCoverClick}>
-            <CollectionCoverTextButton>More…</CollectionCoverTextButton>
+            <TextButton fontSizeEm={0.75}>More…</TextButton>
           </BottomRightActionHolder>
         )}
         <CollectionCardsTagEditorModal

app/javascript/ui/groups/GroupModify.js

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types'
 import { action, observable } from 'mobx'
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import parameterize from 'parameterize'
-import { FormButton, TextButton } from '~/ui/global/styled/buttons'
+import { FormButton } from '~/ui/global/styled/buttons'
+import TextButton from '~/ui/global/TextButton'
 import { SmallHelperText, SubduedText } from '~/ui/global/styled/typography'
 import {
   FieldContainer,

app/javascript/ui/organizations/OrganizationPeople.js

@@ -2,7 +2,7 @@ import { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
 import styled from 'styled-components'
-import { TextButton } from '~/ui/global/styled/buttons'
+import TextButton from '~/ui/global/TextButton'
 import { FormSpacer } from '~/ui/global/styled/forms'
 import { Row, RowItemRight } from '~/ui/global/styled/layout'
 import {

app/javascript/ui/test_collections/AudienceSettings/AddAudienceModal.js

@@ -19,7 +19,8 @@ import {
   getCriterionByName,
   criteriaLimitByGroup,
 } from '~/ui/test_collections/AudienceSettings/AudienceCriteria'
-import { FormButton, TextButton } from '~/ui/global/styled/buttons'
+import TextButton from '~/ui/global/TextButton'
+import { FormButton } from '~/ui/global/styled/buttons'
 import {
   Checkbox,
   CheckboxSelectOption,

app/javascript/ui/test_collections/ConfirmPriceModal.js

@@ -5,7 +5,8 @@ import Dialog from '@material-ui/core/Dialog'
 import DialogContent from '@material-ui/core/DialogContent'
 import PaperAirplane from '~/ui/test_collections/PaperAirplane'
 import { ModalCloseButton } from '~/ui/global/modals/Modal'
-import { FormButton, TextButton } from '~/ui/global/styled/buttons'
+import { FormButton } from '~/ui/global/styled/buttons'
+import TextButton from '~/ui/global/TextButton'
 import {
   DisplayText,
   SpecialDisplayHeading,

app/javascript/ui/users/MoveHelperModal.js

@@ -8,7 +8,8 @@ import FormControl from '@material-ui/core/FormControl'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import ICONS from '~/ui/icons/dialogIcons'
 const { CloseIcon } = ICONS
-import { TextButton, FormButton } from '~/ui/global/styled/buttons'
+import { FormButton } from '~/ui/global/styled/buttons'
+import TextButton from '~/ui/global/TextButton'
 import { Checkbox } from '~/ui/global/styled/forms'
 import {
   SpecialDisplayHeading,

babel.config.js

@@ -1,7 +1,7 @@
-// This file is currently being used by styleguidist but should be merged with
-// .babelrc at some point.
-
 module.exports = function(api) {
+  // Cache the returned value forever and don't call this function again.
+  api.cache(true)
+
   return {
     sourceType: 'unambiguous',
     exclude: /node_modules/,