import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import Blockquote from '.';
import Icon from '../Icon';
import Button from '../Button';
import { AddOutlineGlyph } from '@wfp/icons-react';
import markdown from './README.mdx';
import blockquoteTwig from './Blockquote.twig';
var props = {
  children: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}; // const kinds = {
//   'Info (info)': 'info',
//   'Warning (warning)': 'warning',
//   'Error (error)': 'error',
//   'Success (success)': 'success',
// };

export default {
  title: 'Components/Content Related/Blockquote',
  component: Blockquote,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    twig: blockquoteTwig
  }
};
export var Default = function Default(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
Default.args = _objectSpread({}, props);
Default.argTypes = {
  kind: {
    control: {
      type: 'select',
      options: ['info', 'warning', 'error', 'success']
    }
  }
}; // export const toogleable = (args) => <Blockquote {...args} />;
// toogleable.args = {
//   ...props,
//   kind: 'info',
//   title: 'Title',
//   toggleable: true,
// };
// toogleable.story = {
//   parameters: {
//     docs: {
//       storyDescription: `Use \`toogleable\` property to show and hide blockquote when title is clicked`,
//     },
//   },
// };

export var light = function light(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
light.args = _objectSpread(_objectSpread({}, props), {}, {
  light: true,
  title: 'Title'
});
light.story = {
  parameters: {
    docs: {
      storyDescription: "Use `light` property to display light version of blockquote"
    }
  }
};
export var Warning = function Warning(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
Warning.args = _objectSpread(_objectSpread({}, props), {}, {
  withIcon: true,
  kind: 'warning'
});
Warning.story = {
  parameters: {
    docs: {
      storyDescription: "Use `warning` for showing a warning to draw attention to a non-blocking information"
    }
  }
};
export var Error = function Error(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
Error.args = _objectSpread(_objectSpread({}, props), {}, {
  withIcon: true,
  kind: 'error'
});
Error.story = {
  parameters: {
    docs: {
      storyDescription: "Use `error` for showing a error message usually if a form fails to submit"
    }
  }
};
export var Success = function Success(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
Success.args = _objectSpread(_objectSpread({}, props), {}, {
  withIcon: true,
  kind: 'success'
});
Success.story = {
  parameters: {
    docs: {
      storyDescription: "Use `success` for showing a successful message like after submitting a form"
    }
  }
};
export var CustomIcon = function CustomIcon(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
CustomIcon.args = _objectSpread(_objectSpread({}, props), {}, {
  icon: /*#__PURE__*/React.createElement(AddOutlineGlyph, {
    height: 48,
    width: 48
  })
});
CustomIcon.story = {
  parameters: {
    docs: {
      storyDescription: "Use `icon` to add custom icon to message"
    }
  }
};
export var Togglable = function Togglable(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
Togglable.args = _objectSpread(_objectSpread({}, props), {}, {
  title: 'Togglable title',
  toggleable: true
});
Togglable.story = {
  parameters: {
    docs: {
      storyDescription: "Use `toogleable` property to show and hide blockquote when title is clicked"
    }
  }
};
export var WithButtons = function WithButtons(args) {
  return /*#__PURE__*/React.createElement(Blockquote, _extends({}, args, {
    actionButtons: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "Accept"), /*#__PURE__*/React.createElement(Button, {
      kind: "danger--primary"
    }, "Reject"))
  }));
};
WithButtons.args = _objectSpread(_objectSpread({}, props), {}, {
  withIcon: true
});
WithButtons.story = {
  parameters: {
    docs: {
      storyDescription: "Use `actionButtons` for showing buttons for inline dialogs"
    }
  }
};
export var Code = function Code(args) {
  return /*#__PURE__*/React.createElement(Blockquote, args);
};
Code.args = _objectSpread(_objectSpread({}, props), {}, {
  code: true,
  children: "<!DOCTYPE html>\n  <html>\n    <head>\n      <meta charset=\"utf-8\">\n      <title>Untitled</title>\n      <meta name=\"description\" content=\"This is an example of a meta description with a very long description so you have to scroll to the right to see the whole description.\">\n      <link rel=\"stylesheet\" type=\"text/css\" href=\"theme.css\">\n    </head>\n    <body>\n    </body>\n  </html>"
});
Code.story = {
  parameters: {
    docs: {
      storyDescription: "Use `code` property to show formated code"
    }
  }
};