<commit_before>import React from 'react';
import { storiesOf } from '@storybook/react';
import { baseFonts } from '@storybook/components';
import { Viewport, withViewport } from '@storybook/addon-viewport';
import EventEmitter from 'eventemitter3';

import Logger from './Logger';

// eslint-disable-next-line react/prop-types
const Panel = ({ children }) => <div style={baseFonts}>{children}</div>;

storiesOf('Addons|Viewport', module).add('default', () => (
  <Panel>I don't have problems being rendered using the default viewport.</Panel>
));

storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
  .addDecorator(withViewport('kindleFire2'))
  .add('Inherited', () => (
    <Panel>
      I've inherited <b>Kindle Fire 2</b> viewport from my parent.
    </Panel>
  ))
  .add(
    'Overridden via "withViewport" decorator',
    withViewport('iphone6')(() => (
      <Panel>
        I respect my parents but I should be looking good on <b>iPhone 6</b>.
      </Panel>
    ))
  )
  .add('Overridden via "Viewport" component (deprecated)', () => (
    <Viewport name="iphone6p">
      <Panel><commit_msg>REFACTOR addon viewport story to use emotion for styling<commit_after>import React from 'react';
import { storiesOf } from '@storybook/react';

import styled from 'react-emotion';

import { baseFonts } from '@storybook/components';
import { Viewport, withViewport } from '@storybook/addon-viewport';
import EventEmitter from 'eventemitter3';

import Logger from './Logger';

const Panel = styled('div')({ baseFonts });

storiesOf('Addons|Viewport', module).add('default', () => (
  <Panel>I don't have problems being rendered using the default viewport.</Panel>
));

storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
  .addDecorator(withViewport('kindleFire2'))
  .add('Inherited', () => (
    <Panel>
      I've inherited <b>Kindle Fire 2</b> viewport from my parent.
    </Panel>
  ))
  .add(
    'Overridden via "withViewport" decorator',
    withViewport('iphone6')(() => (
      <Panel>
        I respect my parents but I should be looking good on <b>iPhone 6</b>.
      </Panel>
    ))
  )
  .add('Overridden via "Viewport" component (deprecated)', () => (
    <Viewport name="iphone6p">
      <Panel>
{'fraction_non_alphanumeric': 0.15559518502006242, 'fraction_numerical': 0.006241640659830584, 'mean_word_length': 4.1, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3833276', 'n_tokens_mistral': 720, 'n_tokens_neox': 711, 'n_words': 192}