import React from "react";
import { storiesOf } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";

import DropdownItemWrapper from "../styledComponents/DropdownItemWrapper";
import DropdownMenuWrapper from "../styledComponents/DropdownMenuWrapper";

storiesOf("Dropdown/Styled components/Menu and item", module)
  .add(
    "Default",
    withInfo()(() => (
      <DropdownMenuWrapper>
        <ul>
          <DropdownItemWrapper>
            <div>Option 1</div>
          </DropdownItemWrapper>

          <DropdownItemWrapper>
            <div>Option 2</div>
          </DropdownItemWrapper>
        </ul>
      </DropdownMenuWrapper>
    ))
  )
  .add(
    "Selected",
    withInfo()(() => (
      <DropdownMenuWrapper>
        <ul>
          <DropdownItemWrapper>
            <div>Option 1</div>
          </DropdownItemWrapper>

          <DropdownItemWrapper selected>
            <div>Option 2</div>
          </DropdownItemWrapper>
        </ul>
      </DropdownMenuWrapper>
    ))
  )
  .add(
    "Highlighted",
    withInfo()(() => (
      <DropdownMenuWrapper>
        <ul>
          <DropdownItemWrapper>
            <div>Option 1</div>
          </DropdownItemWrapper>

          <DropdownItemWrapper highlighted>
            <div>Option 2</div>
          </DropdownItemWrapper>
        </ul>
      </DropdownMenuWrapper>
    ))
  );

@@ -1360,13 +1360,353 @@
 %0A    ))%0A
+  )%0A  .add(%0A    %22Footer%22,%0A    withInfo()(() =%3E (%0A      %3CDropdownMenuWrapper%3E%0A        %3Cul%3E%0A          %3CDropdownItemWrapper%3E%0A            %3Cdiv%3EOption 1%3C/div%3E%0A          %3C/DropdownItemWrapper%3E%0A%0A          %3CDropdownItemWrapper footer%3E%0A            %3Cdiv%3EFooter%3C/div%3E%0A          %3C/DropdownItemWrapper%3E%0A        %3C/ul%3E%0A      %3C/DropdownMenuWrapper%3E%0A    ))%0A
   );%0A

include a story for the dropdown item of type footer