@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/Icon/index.js

@@ -1,23 +1,23 @@
 // @flow
-import * as React from "react";
-import styled, { css } from "styled-components";
-import type { EnumIconNames } from "../EnumIconNames";
-import iconViewBoxes from "../IconViewBoxes";
-import Container from "./styles";
-import Box from "../Box";
-import deprecatedIcons from "./deprecatedIcons";
+import * as React from 'react';
+import styled, {css} from 'styled-components';
+import type {EnumIconNames} from '../EnumIconNames';
+import iconViewBoxes from '../IconViewBoxes';
+import Container from './styles';
+import Box from '../Box';
+import deprecatedIcons from './deprecatedIcons';
 
 export type TypeProps = {
   /** Name of the icon in the svg sprite */
   name: EnumIconNames | $Keys<typeof deprecatedIcons>,
   size?:
-    | "mini" // 12x12
+    | 'mini' // 12x12
     // TODO: deprecate default  in favor of small in future release
-    | "default" // 16x16
-    | "small" // 16x16
-    | "medium" // 24x24
-    | "large" // 32x32
-    | "jumbo", // 64x64
+    | 'default' // 16x16
+    | 'small' // 16x16
+    | 'medium' // 24x24
+    | 'large' // 32x32
+    | 'jumbo', // 64x64
   /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */
   fixedWidth?: boolean,
   /** Label used to describe the icon if not used with an accompanying visual label */
@@ -26,7 +26,7 @@ export type TypeProps = {
 
 const Icon = ({
   name,
-  size = "default",
+  size = 'default',
   fixedWidth = false,
   ariaLabel,
   ...rest
@@ -81,7 +81,7 @@ type TypeToggleProps = {
   /** Whether the active icon should be shown or not */
   isActive: boolean,
   /** The size of the icon. `small` is the default */
-  size?: "mini" | "default" | "small" | "medium" | "large" | "jumbo",
+  size?: 'mini' | 'default' | 'small' | 'medium' | 'large' | 'jumbo',
   fixedWidth?: boolean,
   ariaLabel?: string,
 };
@@ -90,7 +90,7 @@ const IconToggle = ({
   activeName,
   inactiveName,
   isActive,
-  size = "default",
+  size = 'default',
   fixedWidth = false,
   ariaLabel,
   ...rest
@@ -120,6 +120,6 @@ const IconToggle = ({
 
 Icon.Toggle = IconToggle;
 
-Icon.Toggle.displayName = "Icon.Toggle";
+Icon.Toggle.displayName = 'Icon.Toggle';
 
 export default Icon;

package/__flow__/Icon/index.stories.js

@@ -1,83 +1,116 @@
 // @flow
-import React, { useState } from "react";
-import Icon, { type TypeProps } from "./";
-import Button from "../Button";
-import Box from "../Box";
-import deprecatedNames from "./deprecatedIcons";
+import React, {useState} from 'react';
+import Icon, {type TypeProps} from './';
+import Button from '../Button';
+import Box from '../Box';
+import deprecatedNames from './deprecatedIcons';
 
 export default {
-  title: "Icon",
+  title: 'Components/Icon',
 };
 
 export const mini12X12 = (args: TypeProps) => <Icon {...args} />;
 
 mini12X12.args = {
-  color: "icon.base",
-  name: "dashboard",
-  size: "mini",
+  color: 'icon.base',
+  name: 'dashboard',
+  size: 'mini',
 };
 
 mini12X12.story = {
-  name: "Mini (12 x 12)",
+  name: 'Mini (12 x 12)',
 };
 
 export const default16X16 = (args: TypeProps) => <Icon {...args} />;
 
 default16X16.args = {
-  color: "icon.base",
-  name: "dashboard",
+  color: 'icon.base',
+  name: 'dashboard',
 };
 
 default16X16.story = {
-  name: "Default (16 x 16)",
+  name: 'Default (16 x 16)',
 };
 
 export const medium24X24 = (args: TypeProps) => <Icon {...args} />;
 
 medium24X24.args = {
-  color: "icon.base",
-  name: "dashboard",
-  size: "medium",
+  color: 'icon.base',
+  name: 'dashboard',
+  size: 'medium',
 };
 
 medium24X24.story = {
-  name: "Medium (24 x 24)",
+  name: 'Medium (24 x 24)',
 };
 
 export const large32X32 = (args: TypeProps) => <Icon {...args} />;
 
 large32X32.args = {
-  color: "icon.base",
-  name: "dashboard",
-  size: "large",
+  color: 'icon.base',
+  name: 'dashboard',
+  size: 'large',
 };
 
 large32X32.story = {
-  name: "Large (32 x 32)",
+  name: 'Large (32 x 32)',
 };
 
 export const jumbo64X64 = (args: TypeProps) => <Icon {...args} />;
 
 jumbo64X64.args = {
-  color: "icon.base",
-  name: "dashboard",
-  size: "jumbo",
+  color: 'icon.base',
+  name: 'dashboard',
+  size: 'jumbo',
 };
 
 jumbo64X64.story = {
-  name: "Jumbo (64 x 64)",
+  name: 'Jumbo (64 x 64)',
 };
 
 export const defaultFixedWidth = (args: TypeProps) => <Icon {...args} />;
 
 defaultFixedWidth.args = {
-  color: "icon.success",
-  name: "dashboard",
+  color: 'icon.success',
+  name: 'dashboard',
   fixedWidth: true,
 };
 
 defaultFixedWidth.story = {
-  name: "Fixed Width (16 x 16)",
+  name: 'Fixed Width (16 x 16)',
+};
+
+// testing for color usage via the theme
+export const sentimentIcons = () => (
+  <Box p={24}>
+    <Icon
+      name="flat-positive-sentiment"
+      size="large"
+      color="icon.positive_sentiment"
+      mr={400}
+    />
+    <Icon
+      name="flat-negative-sentiment"
+      size="large"
+      color="icon.negative_sentiment"
+      mr={400}
+    />
+    <Icon
+      name="flat-neutral-sentiment"
+      size="large"
+      color="icon.neutral_sentiment"
+      mr={400}
+    />
+    <Icon
+      name="flat-neutral-sentiment-outline"
+      size="large"
+      color="icon.base"
+    />
+  </Box>
+);
+
+sentimentIcons.story = {
+  name: 'Sentiment usage',
 };
 
 export const Toggle = () => {
@@ -138,5 +171,5 @@ export const deprecatedIconNames = () => (
 );
 
 deprecatedIconNames.story = {
-  name: "Deprecated names",
+  name: 'Deprecated names',
 };

package/__flow__/Icon/index.test.js

@@ -1,25 +1,25 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import Icon from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import Icon from './';
 
-describe("Icon", () => {
-  it("should render properly", () => {
-    const { getByDataQaLabel } = render(<Icon name="reply" />);
-    expect(getByDataQaLabel({ icon: "reply" })).toBeTruthy();
+describe('Icon', () => {
+  it('should render properly', () => {
+    const {getByDataQaLabel} = render(<Icon name="reply" />);
+    expect(getByDataQaLabel({icon: 'reply'})).toBeTruthy();
   });
 
-  it("should render an svg", () => {
-    const { container } = render(<Icon name="reply" />);
-    const svg = container.querySelector(".Icon-svg");
+  it('should render an svg', () => {
+    const {container} = render(<Icon name="reply" />);
+    const svg = container.querySelector('.Icon-svg');
     expect(svg).toBeTruthy();
   });
 
-  it("should receive proper xlinkHref from name prop", () => {
-    const { container } = render(<Icon name="reply" />);
-    const use = container.querySelector("use");
-    expect(use.getAttributeNS("http://www.w3.org/1999/xlink", "href")).toBe(
-      "#ssiconsvg-reply"
+  it('should receive proper xlinkHref from name prop', () => {
+    const {container} = render(<Icon name="reply" />);
+    const use = container.querySelector('use');
+    expect(use.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(
+      '#ssiconsvg-reply'
     );
   });
 });

package/__flow__/Icon/styles.js

@@ -1,18 +1,18 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { verticalAlign } from "styled-system";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {verticalAlign} from 'styled-system';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const sizes = {
-  mini: "12px",
+  mini: '12px',
   /** TODO: deprecate default  in favor of small in future release */
-  default: "16px",
-  small: "16px",
-  medium: "24px",
-  large: "32px",
-  jumbo: "64px",
+  default: '16px',
+  small: '16px',
+  medium: '24px',
+  large: '32px',
+  jumbo: '64px',
 };
 
 const stylesForSize = (iconSize, fixedWidth) => css`
@@ -31,21 +31,10 @@ const stylesForSize = (iconSize, fixedWidth) => css`
       width: ${iconSize}
     }
   `}
-
-  /* IE 11 hack, do not remove */
-  /* stylelint-disable */
-  _:-ms-fullscreen &, html & {
-    width: ${iconSize};
-  }
-
-  ${"" /* PDF hack, do not remove */}
-  .pdf-page & {
-    width: ${iconSize};
-  }
 `;
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({
-  className: "Icon",
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
+  className: 'Icon',
 })`
   display: inline-block;
   color: inherit;

package/__flow__/IllustrationViewBoxes.js

@@ -1 +1 @@
-module.exports = {"abacus":"0 0 249 157","analytics-offering":"0 0 220 231","asset-cards":"0 0 331 204","astronaut":"0 0 277 298","binoculars":"0 0 269 200","brand-keyword":"0 0 240 230","browser-doc":"0 0 303 223","business":"0 0 88 56","calendar-event":"0 0 110 42","calendar-reporting":"0 0 248 182","cat-error":"0 0 284 180","cat-no-access":"0 0 370 273","cat":"0 0 240 171","checkbox-alert":"0 0 193 169","coffee-cup":"0 0 196 234","competitors":"0 0 355 258","compose-window":"0 0 372 188","compose":"0 0 62 45","computer-error":"0 0 237 259","connect":"0 0 242 162","contact":"0 0 305 145","conversation":"0 0 330 236","custom-branding":"0 0 168 164","customer-service":"0 0 302 155","dashboard":"0 0 337 195","exclamation-mark":"0 0 219 143","face-happy":"0 0 238 173","find-bookmark":"0 0 276 228","flask":"0 0 255 230","general-topic":"0 0 101 63","global-features":"0 0 239 226","global-trend":"0 0 56 42","grow-large":"0 0 189 137","grow":"0 0 73 45","hands-raised":"0 0 192 176","headset":"0 0 106 54","heartbeat-connection":"0 0 335 201","instagram-links":"0 0 333 250","invoice":"0 0 171 178","jewel":"0 0 154 137","keyword-tracking":"0 0 400 232","lightbulb-alt":"0 0 89 54","lightbulb":"0 0 49 43","like-conversation":"0 0 293 258","link-broken":"0 0 340 236","link-messages":"0 0 233 250","link-sections":"0 0 270 273","link-upload":"0 0 180 140","listening-pendo":"0 0 544 109","listening-sentiment":"0 0 343 154","listening-topic-templates":"0 0 337 247","listening-tour":"0 0 236 212","listening":"0 0 101 63","loading":"0 0 62 39","mailbox-empty":"0 0 309 240","mailbox-full":"0 0 352 252","message":"0 0 58 44","network-data":"0 0 369 229","no-messages-found":"0 0 272 211","no-notifications":"0 0 281 134","note":"0 0 49 47","notification":"0 0 252 194","notifications-onboarding":"0 0 352 163","organize-message":"0 0 276 220","outbox-queue":"0 0 246 176","outbox-reviews":"0 0 246 176","pdf":"0 0 36 35","planning":"0 0 251 277","podium":"0 0 106 46","pointer":"0 0 54 37","publish-assets":"0 0 336 263","publish-links":"0 0 266 252","publishing":"0 0 343 191","puzzle-piece":"0 0 56 44","question-mark":"0 0 302 191","reporting-folder":"0 0 314 247","reporting":"0 0 331 226","review-location":"0 0 251 227","review":"0 0 251 143","robot-assembly":"0 0 375 253","robot-error":"0 0 281 286","robot-happy":"0 0 222 190","rocket":"0 0 101 56","schedule-date":"0 0 386 240","schedule-messages":"0 0 372 217","search-keywords":"0 0 237 243","search-success":"0 0 235 243","search-trends":"0 0 249 187","search":"0 0 337 196","security":"0 0 216 284","sentiment":"0 0 316 246","shopping-bag":"0 0 112 58","spark-line":"0 0 227 113","stamp":"0 0 291 253","storefront":"0 0 111 45","success":"0 0 200 200","tag-message":"0 0 346 226","tag":"0 0 62 42","team-roles":"0 0 358 298","team":"0 0 347 249","telescope":"0 0 272 255","tha-mel":"0 0 181 152","thumbs-up":"0 0 169 250","toggle-switch":"0 0 299 127","toolset-strength":"0 0 348 231","tracking-time":"0 0 360 195","twitter-messages":"0 0 220 228","twitter-profiles":"0 0 335 187","under-construction":"0 0 343 243","unsubscribe":"0 0 212 163","upward-trend":"0 0 65 49","user-task":"0 0 313 176","view-connections":"0 0 356 201","vip-list":"0 0 212 228","warning":"0 0 55 38","wifi":"0 0 55 43","workflow-steps":"0 0 295 214"};
+module.exports = {"abacus":"0 0 249 157","analytics-offering":"0 0 220 231","asset-cards":"0 0 331 204","astronaut":"0 0 277 298","binoculars":"0 0 269 200","brand-keyword":"0 0 240 230","browser-doc":"0 0 303 223","business":"0 0 88 56","calendar-event":"0 0 110 42","calendar-reporting":"0 0 248 182","cat-error":"0 0 284 180","cat-no-access":"0 0 370 273","cat":"0 0 240 171","checkbox-alert":"0 0 193 169","coffee-cup":"0 0 196 234","competitors":"0 0 355 258","compose-window":"0 0 372 188","compose":"0 0 62 45","computer-error":"0 0 237 259","connect":"0 0 242 162","contact":"0 0 305 145","conversation":"0 0 330 236","custom-branding":"0 0 168 164","customer-service":"0 0 302 155","dashboard":"0 0 337 195","exclamation-mark":"0 0 219 143","face-happy":"0 0 238 173","find-bookmark":"0 0 276 228","flask":"0 0 255 230","general-topic":"0 0 101 63","global-features":"0 0 239 226","global-trend":"0 0 56 42","grow-large":"0 0 189 137","grow":"0 0 73 45","hands-raised":"0 0 192 176","headset":"0 0 106 54","heartbeat-connection":"0 0 335 201","instagram-links":"0 0 333 250","invoice":"0 0 171 178","jewel":"0 0 154 137","keyword-tracking":"0 0 400 232","lightbulb-alt":"0 0 89 54","lightbulb":"0 0 49 43","like-conversation":"0 0 293 258","link-broken":"0 0 340 236","link-messages":"0 0 233 250","link-sections":"0 0 270 273","link-upload":"0 0 180 140","listening-pendo":"0 0 544 109","listening-sentiment":"0 0 343 154","listening-topic-templates":"0 0 337 247","listening-tour":"0 0 236 212","listening":"0 0 101 63","loading":"0 0 62 39","mailbox-empty":"0 0 309 240","mailbox-full":"0 0 352 252","message":"0 0 58 44","molecule":"0 0 342 242","network-data":"0 0 369 229","no-messages-found":"0 0 272 211","no-notifications":"0 0 281 134","note":"0 0 49 47","notification":"0 0 252 194","notifications-onboarding":"0 0 352 163","organize-message":"0 0 276 220","outbox-queue":"0 0 246 176","outbox-reviews":"0 0 246 176","pdf":"0 0 36 35","planning":"0 0 251 277","podium":"0 0 106 46","pointer":"0 0 54 37","publish-assets":"0 0 336 263","publish-links":"0 0 266 252","publishing":"0 0 343 191","puzzle-piece":"0 0 56 44","question-mark":"0 0 302 191","reporting-folder":"0 0 314 247","reporting":"0 0 331 226","review-location":"0 0 251 227","review":"0 0 251 143","robot-assembly":"0 0 375 253","robot-error":"0 0 281 286","robot-happy":"0 0 222 190","rocket":"0 0 101 56","schedule-date":"0 0 386 240","schedule-messages":"0 0 372 217","search-keywords":"0 0 237 243","search-success":"0 0 235 243","search-trends":"0 0 249 187","search":"0 0 337 196","security":"0 0 216 284","sentiment":"0 0 316 246","shopping-bag":"0 0 112 58","spark-line":"0 0 227 113","stamp":"0 0 291 253","storefront":"0 0 111 45","success":"0 0 200 200","tag-message":"0 0 346 226","tag":"0 0 62 42","team-roles":"0 0 358 298","team":"0 0 347 249","telescope":"0 0 272 255","tha-mel":"0 0 181 152","thumbs-up":"0 0 169 250","toggle-switch":"0 0 299 127","toolset-strength":"0 0 348 231","tracking-time":"0 0 360 195","twitter-messages":"0 0 220 228","twitter-profiles":"0 0 335 187","under-construction":"0 0 343 243","unsubscribe":"0 0 212 163","upward-trend":"0 0 65 49","user-task":"0 0 313 176","view-connections":"0 0 356 201","vip-list":"0 0 212 228","warning":"0 0 55 38","wifi":"0 0 55 43","workflow-steps":"0 0 295 214"};

package/__flow__/Image/index.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from "react";
-import ImageContainer from "./styles";
+import * as React from 'react';
+import ImageContainer from './styles';
 
 type TypeProps = {
   src: string,
@@ -23,7 +23,7 @@ type TypeState = {
 
 export default class Image extends React.Component<TypeProps, TypeState> {
   static defaultProps = {
-    title: "",
+    title: '',
     onError: () => {},
     onClick: () => {},
     onLoad: () => {},
@@ -80,8 +80,7 @@ export default class Image extends React.Component<TypeProps, TypeState> {
   };
 
   render() {
-    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
-      this.props;
+    const {alt, title, onClick, onError, onLoad, src, qa, ...rest} = this.props;
 
     return (
       <ImageContainer
@@ -93,8 +92,8 @@ export default class Image extends React.Component<TypeProps, TypeState> {
         onLoad={this.onLoad}
         alt={alt}
         title={title}
-        data-qa-image={title ? title : alt ? alt : ""}
-        data-qa-image-src={src || ""}
+        data-qa-image={title ? title : alt ? alt : ''}
+        data-qa-image-src={src || ''}
         {...qa}
         // $FlowIssue - upgrade v0.112.0
         {...rest}

package/__flow__/Image/index.stories.js

@@ -1,9 +1,9 @@
 // @flow
-import React from "react";
-import Image from "./";
+import React from 'react';
+import Image from './';
 
 export default {
-  title: "Image",
+  title: 'Components/Image',
 };
 
 export const example = () => (
@@ -14,7 +14,7 @@ export const example = () => (
 );
 
 example.story = {
-  name: "Example",
+  name: 'Example',
 };
 
 export const exampleWithFallback = () => (
@@ -26,5 +26,5 @@ export const exampleWithFallback = () => (
 );
 
 exampleWithFallback.story = {
-  name: "Example with fallback",
+  name: 'Example with fallback',
 };

package/__flow__/Image/index.test.js

@@ -1,11 +1,11 @@
 // @flow
-import React from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import Image from "./";
+import React from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import Image from './';
 
-describe("Image", () => {
-  it("should render properly", () => {
-    const { container } = render(
+describe('Image', () => {
+  it('should render properly', () => {
+    const {container} = render(
       <Image
         alt="image"
         className="foo"
@@ -16,8 +16,8 @@ describe("Image", () => {
     expect(container).toBeTruthy();
   });
 
-  it("should find broken image src URL and render defaultImage (fallback) src URL", () => {
-    const { queryByDataQaLabel } = render(
+  it('should find broken image src URL and render defaultImage (fallback) src URL', () => {
+    const {queryByDataQaLabel} = render(
       <Image
         className="foo"
         src="https://iwontload.abc/image-doesnt-exist.jpg"
@@ -26,16 +26,16 @@ describe("Image", () => {
       />
     );
     const img = queryByDataQaLabel({
-      "image-src": "https://iwontload.abc/image-doesnt-exist.jpg",
+      'image-src': 'https://iwontload.abc/image-doesnt-exist.jpg',
     });
     fireEvent.error(img);
     expect(img).toHaveAttribute(
-      "src",
-      "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+      'src',
+      'http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif'
     );
   });
-  it("should attempt to load and display valid image", () => {
-    const { queryByDataQaLabel } = render(
+  it('should attempt to load and display valid image', () => {
+    const {queryByDataQaLabel} = render(
       <Image
         className="foo"
         src="http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
@@ -44,18 +44,18 @@ describe("Image", () => {
       />
     );
     const img = queryByDataQaLabel({
-      "image-src": "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif",
+      'image-src': 'http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif',
     });
     fireEvent.load(img);
     expect(img).toHaveAttribute(
-      "src",
-      "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+      'src',
+      'http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif'
     );
   });
-  it("should update when the src prop changes", () => {
-    const src1 = "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif";
-    const src2 = "https://media3.giphy.com/media/gYZ7qO81g4dt6/giphy.gif";
-    const { queryByDataQaLabel, rerender } = render(
+  it('should update when the src prop changes', () => {
+    const src1 = 'http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif';
+    const src2 = 'https://media3.giphy.com/media/gYZ7qO81g4dt6/giphy.gif';
+    const {queryByDataQaLabel, rerender} = render(
       <Image
         className="foo"
         src={src1}
@@ -64,10 +64,10 @@ describe("Image", () => {
       />
     );
     let img = queryByDataQaLabel({
-      "image-src": src1,
+      'image-src': src1,
     });
     fireEvent.load(img);
-    expect(img).toHaveAttribute("src", src1);
+    expect(img).toHaveAttribute('src', src1);
 
     rerender(
       <Image
@@ -78,9 +78,9 @@ describe("Image", () => {
       />
     );
     img = queryByDataQaLabel({
-      "image-src": src2,
+      'image-src': src2,
     });
     fireEvent.load(img);
-    expect(img).toHaveAttribute("src", src2);
+    expect(img).toHaveAttribute('src', src2);
   });
 });

package/__flow__/Image/styles.js

@@ -1,11 +1,12 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON, LAYOUT} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-// eslint-disable-next-line prettier/prettier
-const ImageContainer: StyledComponent<{ ... }, TypeTheme, *> = styled.img.attrs({ className: "Image" })`
+const ImageContainer: StyledComponent<{...}, TypeTheme, *> = styled.img.attrs({
+  className: 'Image',
+})`
   display: block;
 
   ${(props) =>

package/__flow__/Indicator/index.js

@@ -1,24 +1,24 @@
 // @flow
-import * as React from "react";
-import Icon from "../Icon";
-import Container from "./styles";
+import * as React from 'react';
+import Icon from '../Icon';
+import Container from './styles';
 
-type TypeProps = {
+export type TypeProps = {
   tooltip: string,
 };
 
 export default class Indicator extends React.Component<TypeProps> {
   static defaultProps = {
-    tooltip: "",
+    tooltip: '',
   };
 
   render() {
-    const { tooltip, ...rest } = this.props;
+    const {tooltip, ...rest} = this.props;
 
     return (
       <Container
         data-tip={tooltip}
-        data-qa-indicator={""}
+        data-qa-indicator={''}
         aria-label={tooltip}
         tabIndex={0}
         // $FlowIssue - upgrade v0.112.0

package/__flow__/Indicator/index.stories.js

@@ -1,22 +1,16 @@
 // @flow
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-
-import Indicator from "./";
+import React from 'react';
+import Indicator, {type TypeProps} from './';
 
 export default {
-  title: "Indicator",
+  title: 'Components/Indicator',
+  component: Indicator,
+  tooltip:
+    'I explain this Indicator, I should always be used for clarity and accessibility purposes.',
 };
 
-export const defaultStory = () => (
-  <Indicator
-    tooltip={text(
-      "tooltip",
-      "I explain this Indicator, I should always be used for clarity and accessibility purposes."
-    )}
-  />
-);
+export const defaultStory = (args: TypeProps) => <Indicator {...args} />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };

package/__flow__/Indicator/index.test.js

@@ -1,11 +1,11 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import Indicator from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import Indicator from './';
 
-describe("Indicator", () => {
-  it("should render properly", () => {
-    const { container } = render(<Indicator />);
+describe('Indicator', () => {
+  it('should render properly', () => {
+    const {container} = render(<Indicator />);
     expect(container).toBeTruthy();
   });
 });

package/__flow__/Indicator/styles.js

@@ -1,12 +1,12 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { visuallyHidden } from "../utils/mixins";
+import styled, {type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {visuallyHidden} from '../utils/mixins';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span.attrs({
-  className: "Indicator",
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.span.attrs({
+  className: 'Indicator',
 })`
   position: relative;
   display: block;