storybook-story-with-gatsby-image.tsx

import React from "react";
import styled from "styled-components";
import { storiesOf } from "@storybook/react";
import { text, withKnobs } from "@storybook/addon-knobs";

import { mobileViewport, addFullWidthWrapperDecorator } from "../utils";
import { Instagram } from "../../src/components/shared/Instagram";

/** Important pieces here. Images located in ../static/ */
import Instagram1 from "gatsby-image-fluid!../static/instagram_1.jpg";
import Instagram2 from "gatsby-image-fluid!../static/instagram_2.jpg";
import Instagram3 from "gatsby-image-fluid!../static/instagram_3.jpg";
import Instagram4 from "gatsby-image-fluid!../static/instagram_4.jpg";

const posts = [
  {
    image: {
      fluid: Instagram1,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/Bxx-cxvFRPA/"
  },
  {
    image: {
      fluid: Instagram2,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/123123/"
  },
  {
    image: {
      fluid: Instagram3,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/123123/"
  },
  {
    image: {
      fluid: Instagram4,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/123123/"
  },

  {
    image: {
      fluid: Instagram2,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/123123/"
  },

  {
    image: {
      fluid: Instagram3,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/123123/"
  },

  {
    image: {
      fluid: Instagram1,
      alt: "Testing"
    },
    link: "https://www.instagram.com/p/123123/"
  }
];

const SBInstagram: React.FC = () => (
  <InstagramWrapper>
    <Instagram
      title={text("Title", "Test")}
      subtitle={text(
        "Subtitle",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lorem, dapibus nec venenatis viverra."
      )}
      posts={posts}
    />
  </InstagramWrapper>
);

storiesOf("Shared|Instagram", module)
  .addDecorator(withKnobs)
  .addDecorator(addFullWidthWrapperDecorator)
  .add("Desktop", () => <SBInstagram />)
  .add("Mobile", () => <SBInstagram />, mobileViewport);

const InstagramWrapper = styled.div`
  margin-top: 50px;
`;