Merge branch 'master' into rm-legacy-analytics

frontend/components/badge-examples.js

@@ -5,7 +5,10 @@ import {
   badgeUrlFromPath,
   staticBadgeUrl,
 } from '../../core/badge-urls/make-badge-url'
-import { serviceDefinitionPropType } from '../lib/service-definitions/service-definition-prop-types'
+import {
+  serviceDefinitionPropType,
+  examplePropType,
+} from '../lib/service-definitions/service-definition-prop-types'
 import { Badge } from './common'
 import { StyledCode } from './snippet'
 
@@ -27,66 +30,70 @@ const ClickableCode = styled(StyledCode)`
   cursor: pointer;
 `
 
-export default class BadgeExamples extends React.Component {
-  static propTypes = {
-    definitions: PropTypes.arrayOf(serviceDefinitionPropType).isRequired,
-    baseUrl: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-  }
-
-  renderExample(exampleData) {
-    const { baseUrl, onClick } = this.props
-    const { title, example, preview } = exampleData
-
-    const { label, message, color, style, namedLogo } = preview
-    const previewUrl = staticBadgeUrl({
-      baseUrl,
-      label,
-      message,
-      color,
-      style,
-      namedLogo,
-    })
-
-    const { pattern, namedParams, queryParams } = example
-    const exampleUrl = badgeUrlFromPath({
-      baseUrl,
-      path: pattern,
-      namedParams,
-      queryParams,
-    })
+function Example({ baseUrl, onClick, exampleData }) {
+  const { title, example, preview } = exampleData
 
-    const key = `${title} ${previewUrl} ${exampleUrl}`
+  const { label, message, color, style, namedLogo } = preview
+  const previewUrl = staticBadgeUrl({
+    baseUrl,
+    label,
+    message,
+    color,
+    style,
+    namedLogo,
+  })
 
-    const handleClick = () => onClick(exampleData)
+  const { pattern, namedParams, queryParams } = example
+  const exampleUrl = badgeUrlFromPath({
+    baseUrl,
+    path: pattern,
+    namedParams,
+    queryParams,
+  })
 
-    return (
-      <tr key={key}>
-        <ClickableTh onClick={handleClick}>{title}:</ClickableTh>
-        <td>
-          <Badge clickable onClick={handleClick} src={previewUrl} />
-        </td>
-        <td>
-          <ClickableCode onClick={handleClick}>{exampleUrl}</ClickableCode>
-        </td>
-      </tr>
-    )
-  }
+  const handleClick = () => onClick(exampleData)
 
-  render() {
-    const { definitions } = this.props
+  return (
+    <tr>
+      <ClickableTh onClick={handleClick}>{title}:</ClickableTh>
+      <td>
+        <Badge clickable onClick={handleClick} src={previewUrl} />
+      </td>
+      <td>
+        <ClickableCode onClick={handleClick}>{exampleUrl}</ClickableCode>
+      </td>
+    </tr>
+  )
+}
+Example.propTypes = {
+  exampleData: examplePropType.isRequired,
+  baseUrl: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+}
 
-    const flattened = definitions.reduce((accum, current) => {
-      const { examples } = current
-      return accum.concat(examples)
-    }, [])
+export default function BadgeExamples({ definitions, baseUrl, onClick }) {
+  const flattened = definitions.reduce((accum, current) => {
+    const { examples } = current
+    return accum.concat(examples)
+  }, [])
 
-    return (
-      <ExampleTable>
-        <tbody>
-          {flattened.map(exampleData => this.renderExample(exampleData))}
-        </tbody>
-      </ExampleTable>
-    )
-  }
+  return (
+    <ExampleTable>
+      <tbody>
+        {flattened.map(exampleData => (
+          <Example
+            baseUrl={baseUrl}
+            exampleData={exampleData}
+            key={`${exampleData.title} ${exampleData.example.pattern}`}
+            onClick={onClick}
+          />
+        ))}
+      </tbody>
+    </ExampleTable>
+  )
+}
+BadgeExamples.propTypes = {
+  definitions: PropTypes.arrayOf(serviceDefinitionPropType).isRequired,
+  baseUrl: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
 }

frontend/components/category-headings.js

@@ -4,9 +4,7 @@ import styled from 'styled-components'
 import { Link } from 'gatsby'
 import { H3 } from './common'
 
-const CategoryHeading = ({ category }) => {
-  const { id, name } = category
-
+export function CategoryHeading({ category: { id, name } }) {
   return (
     <Link to={`/category/${id}`}>
       <H3 id={id}>{name}</H3>
@@ -20,13 +18,15 @@ CategoryHeading.propTypes = {
   }).isRequired,
 }
 
-const CategoryHeadings = ({ categories }) => (
-  <div>
-    {categories.map(category => (
-      <CategoryHeading category={category} key={category.id} />
-    ))}
-  </div>
-)
+export function CategoryHeadings({ categories }) {
+  return (
+    <div>
+      {categories.map(category => (
+        <CategoryHeading category={category} key={category.id} />
+      ))}
+    </div>
+  )
+}
 CategoryHeadings.propTypes = {
   categories: PropTypes.arrayOf(CategoryHeading.propTypes.category).isRequired,
 }
@@ -62,19 +62,19 @@ const StyledNav = styled.nav`
   }
 `
 
-const CategoryNav = ({ categories }) => (
-  <StyledNav>
-    <ul>
-      {categories.map(({ id, name }) => (
-        <li key={id}>
-          <Link to={`/category/${id}`}>{name}</Link>
-        </li>
-      ))}
-    </ul>
-  </StyledNav>
-)
+export function CategoryNav({ categories }) {
+  return (
+    <StyledNav>
+      <ul>
+        {categories.map(({ id, name }) => (
+          <li key={id}>
+            <Link to={`/category/${id}`}>{name}</Link>
+          </li>
+        ))}
+      </ul>
+    </StyledNav>
+  )
+}
 CategoryNav.propTypes = {
   categories: PropTypes.arrayOf(CategoryHeading.propTypes.category).isRequired,
 }
-
-export { CategoryHeading, CategoryHeadings, CategoryNav }

frontend/components/common.js

@@ -2,27 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css, createGlobalStyle } from 'styled-components'
 
-const noAutocorrect = Object.freeze({
+export const noAutocorrect = Object.freeze({
   autoComplete: 'off',
   autoCorrect: 'off',
   autoCapitalize: 'off',
   spellCheck: 'false',
 })
 
-const nonBreakingSpace = '\u00a0'
+export const nonBreakingSpace = '\u00a0'
 
-const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle`
   * {
     box-sizing: border-box;
   }
 `
 
-const BaseFont = styled.div`
+export const BaseFont = styled.div`
   font-family: Lekton, sans-serif;
   color: #534;
 `
 
-const H2 = styled.h2`
+export const H2 = styled.h2`
   font-style: italic;
 
   margin-top: 12mm;
@@ -37,7 +37,7 @@ const H2 = styled.h2`
   }
 `
 
-const H3 = styled.h3`
+export const H3 = styled.h3`
   font-style: italic;
 `
 
@@ -54,18 +54,20 @@ const BadgeWrapper = styled.span`
     `};
 `
 
-const Badge = ({
+export function Badge({
   src,
   alt = '',
   display = 'inline',
   height = '20px',
   clickable = false,
   ...rest
-}) => (
-  <BadgeWrapper clickable={clickable} display={display} height={height}>
-    {src ? <img alt={alt} src={src} {...rest} /> : nonBreakingSpace}
-  </BadgeWrapper>
-)
+}) {
+  return (
+    <BadgeWrapper clickable={clickable} display={display} height={height}>
+      {src ? <img alt={alt} src={src} {...rest} /> : nonBreakingSpace}
+    </BadgeWrapper>
+  )
+}
 Badge.propTypes = {
   src: PropTypes.string.isRequired,
   alt: PropTypes.string,
@@ -74,7 +76,7 @@ Badge.propTypes = {
   clickable: PropTypes.bool,
 }
 
-const StyledInput = styled.input`
+export const StyledInput = styled.input`
   height: 15px;
   border: solid #b9a;
   border-width: 0 0 1px 0;
@@ -89,33 +91,19 @@ const StyledInput = styled.input`
   }
 `
 
-const InlineInput = styled(StyledInput)`
+export const InlineInput = styled(StyledInput)`
   width: 70px;
   margin-left: 5px;
   margin-right: 5px;
 `
 
-const BlockInput = styled(StyledInput)`
+export const BlockInput = styled(StyledInput)`
   width: 40%;
   background-color: transparent;
 `
 
-const VerticalSpace = styled.hr`
+export const VerticalSpace = styled.hr`
   border: 0;
   display: block;
   height: 3mm;
 `
-
-export {
-  noAutocorrect,
-  nonBreakingSpace,
-  GlobalStyle,
-  BaseFont,
-  H2,
-  H3,
-  Badge,
-  StyledInput,
-  InlineInput,
-  BlockInput,
-  VerticalSpace,
-}

frontend/components/dynamic-badge-maker.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types'
 import { dynamicBadgeUrl } from '../../core/badge-urls/make-badge-url'
 import { InlineInput } from './common'
 
-function DynamicBadgeMaker({ baseUrl = document.location.href }) {
+export default function DynamicBadgeMaker({
+  baseUrl = document.location.href,
+}) {
   const [values, setValues] = useState({
     datatype: '',
     label: '',
@@ -62,6 +64,7 @@ function DynamicBadgeMaker({ baseUrl = document.location.href }) {
       </select>{' '}
       {inputs.map(({ name, placeholder = name }) => (
         <InlineInput
+          key={name}
           name={name}
           onChange={onChange}
           placeholder={placeholder}
@@ -72,7 +75,6 @@ function DynamicBadgeMaker({ baseUrl = document.location.href }) {
     </form>
   )
 }
-export default DynamicBadgeMaker
 DynamicBadgeMaker.propTypes = {
   baseUrl: PropTypes.string,
 }