@storybook/components 5.2.1 → 5.2.5

package/src/blocks/ColorPalette.tsx

@@ -1,168 +0,0 @@
-import React, { Fragment } from 'react';
-import { styled } from '@storybook/theming';
-import { transparentize } from 'polished';
-
-import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-import { ResetWrapper } from '../typography/DocumentFormatting';
-
-const ItemTitle = styled.div<{}>(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  color: theme.color.defaultText,
-}));
-
-const ItemSubtitle = styled.div<{}>(({ theme }) => ({
-  color:
-    theme.base === 'light'
-      ? transparentize(0.2, theme.color.defaultText)
-      : transparentize(0.6, theme.color.defaultText),
-}));
-
-const ItemDescription = styled.div({
-  flex: '0 0 30%',
-  lineHeight: '20px',
-  marginTop: 5,
-});
-
-const SwatchLabel = styled.div<{}>(({ theme }) => ({
-  flex: 1,
-  textAlign: 'center',
-  fontFamily: theme.typography.fonts.mono,
-  fontSize: theme.typography.size.s1,
-  lineHeight: 1,
-  overflow: 'hidden',
-  color:
-    theme.base === 'light'
-      ? transparentize(0.4, theme.color.defaultText)
-      : transparentize(0.6, theme.color.defaultText),
-
-  '> div': {
-    display: 'inline-block',
-    overflow: 'hidden',
-    maxWidth: '100%',
-  },
-}));
-
-const SwatchLabels = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-});
-
-const Swatch = styled.div({
-  flex: 1,
-});
-
-const SwatchColors = styled.div<{}>(({ theme }) => ({
-  ...getBlockBackgroundStyle(theme),
-  display: 'flex',
-  flexDirection: 'row',
-  height: 50,
-  marginBottom: 5,
-  overflow: 'hidden',
-}));
-
-const SwatchSpecimen = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  position: 'relative',
-  marginBottom: 30,
-});
-
-const Swatches = styled.div({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'row',
-});
-
-const Item = styled.div({
-  display: 'flex',
-  alignItems: 'flex-start',
-});
-
-const ListName = styled.div({
-  flex: '0 0 30%',
-});
-
-const ListSwatches = styled.div({
-  flex: 1,
-});
-
-const ListHeading = styled.div<{}>(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  paddingBottom: 20,
-  fontWeight: theme.typography.weight.bold,
-  color:
-    theme.base === 'light'
-      ? transparentize(0.4, theme.color.defaultText)
-      : transparentize(0.6, theme.color.defaultText),
-}));
-
-const List = styled.div<{}>(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  lineHeight: `20px`,
-
-  display: 'flex',
-  flexDirection: 'column',
-}));
-
-interface ColorProps {
-  title: string;
-  subtitle: string;
-  colors: string[];
-}
-
-/**
- * A single color row your styleguide showing title, subtitle and one or more colors, used
- * as a child of `ColorPalette`.
- */
-export const ColorItem: React.FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
-  return (
-    <Item>
-      <ItemDescription>
-        <ItemTitle>{title}</ItemTitle>
-        <ItemSubtitle>{subtitle}</ItemSubtitle>
-      </ItemDescription>
-
-      <Swatches>
-        <SwatchSpecimen>
-          <SwatchColors>
-            {colors.map(color => (
-              <Swatch
-                key={color}
-                title={color}
-                style={{
-                  backgroundColor: color,
-                }}
-              />
-            ))}
-          </SwatchColors>
-          <SwatchLabels>
-            {colors.map(color => (
-              <SwatchLabel key={color} title={color}>
-                <div>{color}</div>
-              </SwatchLabel>
-            ))}
-          </SwatchLabels>
-        </SwatchSpecimen>
-      </Swatches>
-    </Item>
-  );
-};
-
-/**
- * Styleguide documentation for colors, including names, captions, and color swatches,
- * all specified as `ColorItem` children of this wrapper component.
- */
-export const ColorPalette: React.FunctionComponent = ({ children, ...props }) => (
-  <ResetWrapper>
-    <List {...props} className="docblock-colorpalette">
-      <ListHeading>
-        <ListName>Name</ListName>
-        <ListSwatches>Swatches</ListSwatches>
-      </ListHeading>
-      {children}
-    </List>
-  </ResetWrapper>
-);

package/src/blocks/Description.stories.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Description } from './Description';
-
-import markdownCaption from './DocsPageExampleCaption.md';
-
-export default {
-  title: 'Docs|Description',
-  component: Description,
-};
-
-const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;
-
-export const text = () => <Description markdown={textCaption} />;
-
-export const markdown = () => <Description markdown={markdownCaption} />;

package/src/blocks/Description.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import Markdown from 'markdown-to-jsx';
-import { ResetWrapper } from '../typography/DocumentFormatting';
-import { components } from '../html';
-
-export interface DescriptionProps {
-  markdown: string;
-}
-
-/**
- * A markdown description for a component, typically used to show the
- * components docgen docs.
- */
-export const Description: React.FunctionComponent<DescriptionProps> = ({ markdown }) => (
-  <ResetWrapper>
-    <Markdown options={{ forceBlock: true, overrides: components }}>{markdown}</Markdown>
-  </ResetWrapper>
-);

package/src/blocks/DocsPage.stories.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { DocsPage, DocsWrapper, DocsContent } from './DocsPage';
-import * as storyStories from './Story.stories';
-import * as previewStories from './Preview.stories';
-import * as propsTableStories from './PropsTable/PropsTable.stories';
-import * as sourceStories from './Source.stories';
-import * as descriptionStories from './Description.stories';
-
-export default {
-  title: 'Docs|DocsPage',
-  component: DocsPage,
-  decorators: [
-    storyFn => (
-      <DocsWrapper>
-        <DocsContent>{storyFn()}</DocsContent>
-      </DocsWrapper>
-    ),
-  ],
-};
-
-export const withSubtitle = () => (
-  <DocsPage
-    title="DocsPage"
-    subtitle="What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab."
-  >
-    {descriptionStories.text()}
-    {previewStories.single()}
-    {propsTableStories.normal()}
-    {sourceStories.jsx()}
-  </DocsPage>
-);
-withSubtitle.story = { name: 'with subtitle' };
-
-export const empty = () => (
-  <DocsPage title={null}>
-    {storyStories.error()}
-    {propsTableStories.error()}
-    {sourceStories.sourceUnavailable()}
-  </DocsPage>
-);
-
-export const noText = () => (
-  <DocsPage title="no text">
-    {previewStories.single()}
-    {propsTableStories.normal()}
-    {sourceStories.jsx()}
-  </DocsPage>
-);
-noText.story = { name: 'no text' };
-
-export const text = () => (
-  <DocsPage title="Sensorium">
-    {descriptionStories.text()}
-    {previewStories.single()}
-    {propsTableStories.normal()}
-    {sourceStories.jsx()}
-  </DocsPage>
-);
-
-export const markdown = () => (
-  <DocsPage title="markdown">
-    {descriptionStories.markdown()}
-    {previewStories.single()}
-    {propsTableStories.normal()}
-    {sourceStories.jsx()}
-  </DocsPage>
-);

package/src/blocks/DocsPage.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { transparentize } from 'polished';
-
-import { withReset } from '../typography/withReset';
-
-const breakpoint = 600;
-const pageMargin = '5.55555';
-
-export interface DocsPageProps {
-  title: string;
-  subtitle?: string;
-}
-
-const Title = styled.h1<{}>(withReset, ({ theme }) => ({
-  color: theme.color.defaultText,
-  fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.black,
-  lineHeight: '32px',
-
-  [`@media (min-width: ${breakpoint * 1}px)`]: {
-    fontSize: theme.typography.size.l1,
-    lineHeight: '36px',
-    marginBottom: '.5rem', // 8px
-  },
-}));
-
-const Subtitle = styled.h2<{}>(withReset, ({ theme }) => ({
-  fontWeight: theme.typography.weight.regular,
-  fontSize: theme.typography.size.s3,
-  lineHeight: '20px',
-  borderBottom: 'none',
-  marginBottom: '15px',
-
-  [`@media (min-width: ${breakpoint * 1}px)`]: {
-    fontSize: theme.typography.size.m1,
-    lineHeight: '28px',
-    marginBottom: '24px',
-  },
-
-  color:
-    theme.base === 'light'
-      ? transparentize(0.25, theme.color.defaultText)
-      : transparentize(0.25, theme.color.defaultText),
-}));
-
-export const DocsContent = styled.div({
-  maxWidth: 800,
-  width: '100%',
-});
-
-export const DocsWrapper = styled.div<{}>(({ theme }) => ({
-  background: theme.background.content,
-  display: 'flex',
-  justifyContent: 'center',
-  minHeight: '100vh',
-  padding: '4rem 20px',
-
-  [`@media (min-width: ${breakpoint * 1}px)`]: {},
-}));
-
-export const DocsPageWrapper: React.FunctionComponent = ({ children }) => (
-  <DocsWrapper>
-    <DocsContent>{children}</DocsContent>
-  </DocsWrapper>
-);
-
-/**
- * An out-of-the box documentation page for components that shows the
- * title & subtitle and a collection of blocks including `Description`,
- * and `Preview`s for each of the component's stories.
- */
-const DocsPage: React.FunctionComponent<DocsPageProps> = ({ title, subtitle, children }) => (
-  <>
-    {title && <Title className="sbdocs-title">{title}</Title>}
-    {subtitle && <Subtitle className="sbdocs-subtitle">{subtitle}</Subtitle>}
-    {children}
-  </>
-);
-
-export { DocsPage };

package/src/blocks/DocsPageExampleCaption.md

@@ -1,93 +0,0 @@
-# My Example Markdown
-
-The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
-
-![An image](http://placehold.it/350x150)
-
-He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
-
-## Typography
-
-# H1
-
-## H2
-
-### H3
-
-#### H4
-
-##### H5
-
-###### H6
-
-Emphasis, aka italics, with _asterisks_ or _underscores_.
-
-Strong emphasis, aka bold, with **asterisks** or **underscores**.
-
-Combined emphasis with **asterisks and _underscores_**.
-
-Strikethrough uses two tildes. ~~Scratch this.~~
-
-Maybe include a [link](http://storybook.js.org) to your project as well.
-
-## Block quote
-
-How about a block quote to spice things up?
-
-> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
-
-## Lists
-
-Mixed list:
-
-1. First ordered list item
-2. Another item
-   - Unordered sub-list.
-3. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
-   2. Yo ho ho
-4. And another item.
-
-Bullet list:
-
-- Whatever
-  - This is getting
-  - Very ...
-    - Very ...
-    - Tedious!
-- It's getting late, nothing to see here
-
-Numbered:
-
-1. You get the idea
-2. You still get the idea
-3. You really get the idea
-4. I'm done
-
-## Tables
-
-A basic table:
-
-| Tables        |      Are      |   Cool |
-| ------------- | :-----------: | -----: |
-| col 3 is      | right-aligned | \$1600 |
-| col 2 is      |   centered    |   \$12 |
-| zebra stripes |   are neat    |    \$1 |
-
-Let's throw in a crazy table, because why not?
-
-|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
-| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
-| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
-| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [centered](addons/centered)       |         +          |                                  |       +        |           +            |                        |           +            |        +         |                    |          +           |                  |         +          |          +           |
-| [contexts](addons/contexts)       |         +          |                                  |       +        |                        |                        |                        |                  |                    |                      |                  |                    |          +           |
-
-## Code
-
-Sometimes you might want to manually include some \`code\` examples? Let's do it.
-
-```js
-const Button = () => <button />;
-```

package/src/blocks/DocsPageExampleCaption.mdx

@@ -1,93 +0,0 @@
-# My Example Markdown
-
-The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
-
-![An image](http://placehold.it/350x150)
-
-He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
-
-## Typography
-
-# H1
-
-## H2
-
-### H3
-
-#### H4
-
-##### H5
-
-###### H6
-
-Emphasis, aka italics, with _asterisks_ or _underscores_.
-
-Strong emphasis, aka bold, with **asterisks** or **underscores**.
-
-Combined emphasis with **asterisks and _underscores_**.
-
-Strikethrough uses two tildes. ~~Scratch this.~~
-
-Maybe include a [link](http://storybook.js.org) to your project as well.
-
-## Block quote
-
-How about a block quote to spice things up?
-
-> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
-
-## Lists
-
-Mixed list:
-
-1. First ordered list item
-2. Another item
-   - Unordered sub-list.
-3. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
-   2. Yo ho ho
-4. And another item.
-
-Bullet list:
-
-- Whatever
-  - This is getting
-  - Very ...
-    - Very ...
-    - Tedious!
-- It's getting late, nothing to see here
-
-Numbered:
-
-1. You get the idea
-2. You still get the idea
-3. You really get the idea
-4. I'm done
-
-## Tables
-
-A basic table:
-
-| Tables        |      Are      |   Cool |
-| ------------- | :-----------: | -----: |
-| col 3 is      | right-aligned | \$1600 |
-| col 2 is      |   centered    |   \$12 |
-| zebra stripes |   are neat    |    \$1 |
-
-Let's throw in a crazy table, because why not?
-
-|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
-| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
-| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
-| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
-| [centered](addons/centered)       |         +          |                                  |       +        |           +            |                        |           +            |        +         |                    |          +           |                  |         +          |          +           |
-| [contexts](addons/contexts)       |         +          |                                  |       +        |                        |                        |                        |                  |                    |                      |                  |                    |          +           |
-
-## Code
-
-Sometimes you might want to manually include some \`code\` examples? Let's do it.
-
-```js
-const Button = () => <button />;
-```

package/src/blocks/EmptyBlock.stories.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { EmptyBlock } from './EmptyBlock';
-
-export default {
-  title: 'Docs|EmptyBlock',
-  component: EmptyBlock,
-};
-
-export const error = () => <EmptyBlock>Generic error message</EmptyBlock>;

package/src/blocks/EmptyBlock.tsx

@@ -1,23 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-import { transparentize } from 'polished';
-import { withReset } from '../typography/withReset';
-
-const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
-  backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
-  borderRadius: theme.appBorderRadius,
-  border: `1px dashed ${theme.appBorderColor}`,
-  display: 'flex',
-  fontSize: `${theme.typography.size.s2}px`,
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: '20px',
-  margin: '25px 0 40px',
-
-  color:
-    theme.base === 'light'
-      ? transparentize(0.4, theme.color.defaultText)
-      : transparentize(0.6, theme.color.defaultText),
-}));
-
-export const EmptyBlock = (props: any) => <Wrapper {...props} className="docblock-emptyblock" />;

package/src/blocks/IFrame.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import window from 'global';
-
-interface IFrameProps {
-  id: string;
-  key?: string;
-  title: string;
-  src: string;
-  allowFullScreen: boolean;
-  scale: number;
-  style?: any;
-}
-
-interface BodyStyle {
-  width: string;
-  height: string;
-  transform: string;
-  transformOrigin: string;
-}
-
-export class IFrame extends React.Component<IFrameProps> {
-  iframe: any = null;
-
-  componentDidMount() {
-    const { id } = this.props;
-    this.iframe = window.document.getElementById(id);
-  }
-
-  shouldComponentUpdate(nextProps: IFrameProps) {
-    const { scale } = nextProps;
-    // eslint-disable-next-line react/destructuring-assignment
-    if (scale !== this.props.scale) {
-      this.setIframeBodyStyle({
-        width: `${scale * 100}%`,
-        height: `${scale * 100}%`,
-        transform: `scale(${1 / scale})`,
-        transformOrigin: 'top left',
-      });
-    }
-    return false;
-  }
-
-  setIframeBodyStyle(style: BodyStyle) {
-    return Object.assign(this.iframe.contentDocument.body.style, style);
-  }
-
-  render() {
-    const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
-    return (
-      <iframe
-        scrolling="yes"
-        id={id}
-        title={title}
-        src={src}
-        allowFullScreen={allowFullScreen}
-        {...rest}
-      />
-    );
-  }
-}

package/src/blocks/IconGallery.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { IconItem, IconGallery } from './IconGallery';
-
-import { Icons as ExampleIcon } from '../icon/icon';
-
-export default {
-  title: 'Docs|IconGallery',
-  component: IconGallery,
-};
-
-export const defaultStyle = () => (
-  <IconGallery>
-    <IconItem name="add">
-      <ExampleIcon icon="add" />
-    </IconItem>
-    <IconItem name="subtract">
-      <ExampleIcon icon="subtract" />
-    </IconItem>
-    <IconItem name="home">
-      <ExampleIcon icon="home" />
-    </IconItem>
-    <IconItem name="facehappy">
-      <ExampleIcon icon="facehappy" />
-    </IconItem>
-    <IconItem name="bar">
-      <img src="https://placehold.it/50x50" alt="example" />
-    </IconItem>
-    <IconItem name="bar">
-      <img src="https://placehold.it/50x50" alt="example" />
-    </IconItem>
-  </IconGallery>
-);