import React from 'react';
import { DropdownBubble, Typography } from '../..';
import { Display } from '../../common/Display';
export default {
  title: 'Atoms / DropdownBubble',
  parameters: {
    component: DropdownBubble
  }
};
export var DefaultStory = function DefaultStory() {
  return React.createElement(DropdownBubble, null, React.createElement(Typography, {
    type: "hero"
  }, "Hello world!"));
};
export var DifferentPlacementAndTrianglePosition = function DifferentPlacementAndTrianglePosition() {
  return React.createElement(Display, {
    items: [{
      component: React.createElement(DropdownBubble, {
        position: "left",
        triangle: true
      }, React.createElement(Typography, {
        type: "hero"
      }, "Hello world!")),
      title: 'Placement Bottom, Arrow Left'
    }, {
      component: React.createElement(DropdownBubble, {
        position: "right",
        triangle: true
      }, React.createElement(Typography, {
        type: "hero"
      }, "Hello world!")),
      title: 'Placement Bottom, Arrow Right'
    }, {
      component: React.createElement(DropdownBubble, {
        position: "center",
        triangle: true
      }, React.createElement(Typography, {
        type: "hero"
      }, "Hello world!")),
      title: 'Placement Bottom, Arrow Center'
    }, {
      component: React.createElement(DropdownBubble, {
        position: "left",
        placement: "top",
        triangle: true
      }, React.createElement(Typography, {
        type: "hero"
      }, "Hello world!")),
      title: 'Placement Top, Arrow Left'
    }, {
      component: React.createElement(DropdownBubble, {
        position: "right",
        placement: "top",
        triangle: true
      }, React.createElement(Typography, {
        type: "hero"
      }, "Hello world!")),
      title: 'Placement Top, Arrow Right'
    }, {
      component: React.createElement(DropdownBubble, {
        position: "center",
        placement: "top",
        triangle: true
      }, React.createElement(Typography, {
        type: "hero"
      }, "Hello world!")),
      title: 'Placement Top, Arrow Center'
    }]
  });
};
export var DifferentColors = function DifferentColors() {
  return React.createElement(Display, {
    items: [{
      component: React.createElement(DropdownBubble, {
        position: "center",
        placement: "top",
        backgroundColor: function backgroundColor(c) {
          return c.color.backgroundBlack;
        },
        borderColor: function borderColor(c) {
          return c.color.functionRed;
        },
        textColor: function textColor(c) {
          return c.color.textLight;
        }
      }, "Custom background, border and text colors"),
      title: 'Custom background'
    }, {
      component: React.createElement(DropdownBubble, {
        position: "center",
        placement: "top",
        invertedColors: true
      }, "Inverted colors"),
      title: 'Inverted colors'
    }]
  });
};