import { Meta, Preview, Props, Description, Story } from "@storybook/addon-docs/blocks";
import { FrameConnector } from "./FrameConnector";
import { css } from "@emotion/core";

<Meta title="MDX|FrameConnector" component={FrameConnector} />

# FrameConnector component

<Description of={FrameConnector} />

# Props

<Props of={FrameConnector} />

# Usage

iframe created can be styled using inline style or `emotion` css prop.

### Using style

<Preview withSource>
  <Story name="with style">
    <FrameConnector source="https://opencerts.io" style={{ width: "100%", height: "200px" }} />
  </Story>
</Preview>

### Using emotion

<Preview withSource>
  <Story name="with emotion">
    <FrameConnector
      source="https://opencerts.io"
      css={css`
        width: 100%;
        height: 200px;
      `}
    />
  </Story>
</Preview>

Note that the current example doesn't use a frame listening for connecting and can't show example on how to use `onConnected` and `dispatch` function.
