feat(components): migrate Blockquote to TypeScript (#617)

* refactor(components): switch to named export

* feat(components): migrate Blockquote to TypeScript

* fix: specify Ref props for HTMLQuoteElement

* feat(components): change default Blockquote size to mega

This makes the default size consistent with the Text component.

* docs: harmonize default quote and default quote size

* fix: update snapshots

* fix: extend BlockquotesProps from TextProps

BREAKING CHANGE:
The default size for Blockquote changed from `kilo` to `mega`.

scripts/static-styles/config.js

@@ -19,7 +19,6 @@ import { light } from '@sumup/design-tokens';
 
 import {
   Badge,
-  Blockquote,
   ButtonGroup,
   Card,
   Checkbox,
@@ -125,9 +124,9 @@ export default {
       }
     },
     // getComponentInfo(Button, { size: [KILO, MEGA] }),
-    getComponentInfo(Blockquote, {
-      size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]
-    }),
+    // getComponentInfo(Blockquote, {
+    //   size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]
+    // }),
     getComponentInfo(ButtonGroup, {
       align: [ButtonGroup.LEFT, ButtonGroup.CENTER, ButtonGroup.RIGHT]
     }),

src/__snapshots__/storyshots.spec.js.snap

@@ -23582,29 +23582,24 @@ exports[`Storyshots Typography/Blockquote Base 1`] = `
 .circuit-0 {
   font-weight: 400;
   margin-bottom: 16px;
-  font-size: 13px;
-  line-height: 20px;
+  font-size: 16px;
+  line-height: 24px;
   font-style: italic;
   padding-left: 12px;
   border-left: 2px solid #3388FF;
 }
 
 @media (min-width:480px) {
   .circuit-0 {
-    font-size: 13px;
-    line-height: 20px;
+    font-size: 16px;
+    line-height: 24px;
   }
 }
 
 <blockquote
-  class="circuit-0 circuit-1"
+  class="circuit-0"
 >
-  
-Lorem ipsum dolor amet echo park activated charcoal banjo deep
-crucifix pinterest yr af tumeric literally. Tbh four loko tattooed
-kickstarter artisan. Lumbersexual tote bag selfies truffaut, tofu vape
-tbh adaptogen green juice lo-fi kombucha.
-
+  The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
 </blockquote>
 `;
 
@@ -23628,9 +23623,10 @@ HTMLCollection [
 }
 
 <blockquote
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
-    Kilo - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
+    Kilo - 
+    The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
   </blockquote>,
   .circuit-0 {
   font-weight: 400;
@@ -23650,9 +23646,10 @@ HTMLCollection [
 }
 
 <blockquote
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
-    Mega - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
+    Mega - 
+    The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
   </blockquote>,
   .circuit-0 {
   font-weight: 400;
@@ -23674,9 +23671,10 @@ HTMLCollection [
 }
 
 <blockquote
-    class="circuit-0 circuit-1"
+    class="circuit-0"
   >
-    Giga - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
+    Giga - 
+    The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.
   </blockquote>,
 ]
 `;

src/components/Blockquote/Blockquote.docs.mdx

@@ -1,14 +1,13 @@
 import { Status, Props, Story } from '../../../.storybook/components';
-import Blockquote from './Blockquote';
+import { Blockquote } from './Blockquote';
 
 # Blockquote
 
 <Status.Stable />
 
 Blockquotes are a way of styling specific text with indention, normally used for demonstrating and highlighting textual information that comes from an external source.
 
-<Story id="components-blockquote--base" />
-
+<Story id="typography-blockquote--base" />
 <Props of={Blockquote} />
 
 ## When to use it
@@ -26,4 +25,4 @@ For instance, we should use a blockquote to highlight a quote from a user that w
 You can customize the size of the blockquote using the `size` property.
 We reccomend always sticking to mega in most cases, since it fits well with the Circuit's default body text size.
 
-<Story id="components-blockquote--size" />
+<Story id="typography-blockquote--size" />

src/components/Blockquote/Blockquote.spec.js → src/components/Blockquote/Blockquote.spec.tsx

@@ -15,14 +15,12 @@
 
 import React from 'react';
 
-import Blockquote from './Blockquote';
+import { create, render, renderToHtml, axe } from '../../util/test-utils';
+
+import { Blockquote } from './Blockquote';
 
 describe('Blockquote', () => {
-  const quote = `
-  Lorem ipsum dolor amet echo park activated charcoal banjo deep
-  crucifix pinterest yr af tumeric literally. Tbh four loko tattooed
-  kickstarter artisan.
-  `;
+  const quote = `The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.`;
 
   /**
    * Style tests.
@@ -32,16 +30,32 @@ describe('Blockquote', () => {
     expect(actual).toMatchSnapshot();
   });
 
-  it('should render with mega styles', () => {
-    const actual = create(<Blockquote size={'mega'}>{quote}</Blockquote>);
+  it('should render with kilo styles', () => {
+    const actual = create(<Blockquote size="kilo">{quote}</Blockquote>);
     expect(actual).toMatchSnapshot();
   });
 
   it('should render with giga styles', () => {
-    const actual = create(<Blockquote size={'giga'}>{quote}</Blockquote>);
+    const actual = create(<Blockquote size="giga">{quote}</Blockquote>);
     expect(actual).toMatchSnapshot();
   });
 
+  describe('business logic', () => {
+    /**
+     * Should accept a working ref
+     */
+    it('should accept a working ref', () => {
+      const tref = React.createRef<HTMLQuoteElement>();
+      const { container } = render(
+        <Blockquote size="giga" ref={tref}>
+          {quote}
+        </Blockquote>
+      );
+      const blockquote = container.querySelector('blockquote');
+      expect(tref.current).toBe(blockquote);
+    });
+  });
+
   /**
    * Accessibility tests.
    */

src/components/Blockquote/Blockquote.story.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Fragment } from 'react';
+import { select, text } from '@storybook/addon-knobs';
+
+import docs from './Blockquote.docs.mdx';
+import { Blockquote } from './Blockquote';
+
+const defaultQuote = `The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that.`;
+
+const sizes = ['kilo', 'mega', 'giga'] as const;
+
+export default {
+  title: 'Typography/Blockquote',
+  component: Blockquote,
+  parameters: {
+    docs: { page: docs },
+    jest: ['Blockquote']
+  }
+};
+
+export const base = () => (
+  <Blockquote size={select('Size', sizes, sizes[1])}>
+    {text('Quote', defaultQuote)}
+  </Blockquote>
+);
+
+export const size = () => (
+  <Fragment>
+    <Blockquote size="kilo">Kilo - {text('Quote', defaultQuote)}</Blockquote>
+    <Blockquote size="mega">Mega - {text('Quote', defaultQuote)}</Blockquote>
+    <Blockquote size="giga">Giga - {text('Quote', defaultQuote)}</Blockquote>
+  </Fragment>
+);

src/components/Blockquote/Blockquote.js → src/components/Blockquote/Blockquote.tsx

@@ -14,57 +14,49 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
-import { childrenPropType } from '../../util/shared-prop-types';
+import styled, { StyleProps } from '../../styles/styled';
 import Text from '../Text';
+import { TextProps } from '../Text/Text';
 
-const baseStyles = ({ theme }) => css`
+type Size = 'kilo' | 'mega' | 'giga';
+
+export interface BlockquoteProps extends TextProps {
+  /**
+   * A Circuit UI body text size.
+   */
+  size?: Size;
+  /**
+   * The ref to the HTML DOM element.
+   */
+  ref?: React.Ref<HTMLQuoteElement>;
+}
+
+const baseStyles = ({ theme }: StyleProps) => css`
   label: blockquote;
   padding-left: ${theme.spacings.kilo};
   border-left: 2px solid ${theme.colors.p500};
 `;
 
-const gigaStyles = ({ theme, size }) =>
+const gigaStyles = ({ theme, size = 'mega' }: StyleProps & BlockquoteProps) =>
   size === 'giga' &&
   css`
     label: blockquote--giga;
     padding-left: ${theme.spacings.mega};
     border-left: 3px solid ${theme.colors.p500};
   `;
 
-const StyledText = styled(Text)`
-  ${baseStyles};
-  ${gigaStyles};
-`;
+const StyledText = styled(Text)<BlockquoteProps>(baseStyles, gigaStyles);
 
-/**
- * Indented and italicised text to denote a quotation.
- */
-const Blockquote = ({ children, ...props }) => (
-  <StyledText {...props} as="blockquote" italic>
-    {children}
-  </StyledText>
-);
-
-Blockquote.propTypes = {
-  /**
-   * Child nodes to be rendered.
-   */
-  children: childrenPropType,
-  /**
-   * A Circuit UI body text size.
-   */
-  size: PropTypes.oneOf(['kilo', 'mega', 'giga']).isRequired
-};
-
-Blockquote.defaultProps = {
-  size: 'kilo'
-};
+export function BlockquoteComponent(
+  props: BlockquoteProps,
+  ref: BlockquoteProps['ref']
+) {
+  return <StyledText {...props} as="blockquote" italic ref={ref} />;
+}
 
 /**
- * @component
+ * Indented and italicised text to denote a quotation.
  */
-export default Blockquote;
+export const Blockquote = React.forwardRef(BlockquoteComponent);