"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.headerWithTotalsAndActions = exports.headerWithTotals = exports.headerWithTitleSuffix = exports.headerWithEverthingTogether = exports.headerWithActions = exports.header = exports.default = exports.composition = exports.body = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _utils = require("../../../.storybook/utils");

var _button = _interopRequireDefault(require("../button"));

var _buttonGroup = _interopRequireDefault(require("../buttonGroup"));

var _DetailPage = _interopRequireDefault(require("./DetailPage"));

var _icon = _interopRequireDefault(require("../icon"));

var _iconButton = _interopRequireDefault(require("../iconButton"));

var _uiIcons = require("@teamleader/ui-icons");

var _statusLabel = _interopRequireDefault(require("../statusLabel"));

var _box = require("../box");

var _typography = require("../typography");

var _constants = require("../../constants");

var defaultDetailPageHeaderProps = {
  backLinkProps: {
    element: 'button',
    children: 'Back to overview'
  },
  title: 'I am the detail page title',
  titleColor: 'teal'
};
var detailPageHeaderArgTypes = {
  backLinkProps: {
    element: {
      control: 'select',
      options: ['a', 'button']
    }
  }
};

var actionButtons = function actionButtons() {
  return /*#__PURE__*/_react.default.createElement(_buttonGroup.default, {
    marginLeft: 7
  }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
    icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconTrashMediumOutline, null)
  }), /*#__PURE__*/_react.default.createElement(_buttonGroup.default, {
    segmented: true
  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "Open"), /*#__PURE__*/_react.default.createElement(_button.default, {
    active: true
  }, "Won"), /*#__PURE__*/_react.default.createElement(_button.default, null, "Lost")));
};

var totals = function totals() {
  return /*#__PURE__*/_react.default.createElement(_box.Box, {
    display: "flex",
    alignSelf: "flex-end"
  }, /*#__PURE__*/_react.default.createElement(_box.Box, {
    textAlign: "right"
  }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, {
    color: "neutral"
  }, /*#__PURE__*/_react.default.createElement("strong", null, "Total")), /*#__PURE__*/_react.default.createElement(_box.Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/_react.default.createElement(_typography.Heading1, null, /*#__PURE__*/_react.default.createElement(_typography.Monospaced, null, "999h99")), /*#__PURE__*/_react.default.createElement(_icon.default, {
    color: "gold",
    tint: "dark",
    marginLeft: 2
  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningBadgedMediumFilled, null)))), /*#__PURE__*/_react.default.createElement(_box.Box, {
    textAlign: "right",
    marginLeft: 7
  }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, {
    color: "neutral"
  }, /*#__PURE__*/_react.default.createElement("strong", null, "Total")), /*#__PURE__*/_react.default.createElement(_box.Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/_react.default.createElement(_typography.Heading1, null, /*#__PURE__*/_react.default.createElement(_typography.Monospaced, null, "999h99")), /*#__PURE__*/_react.default.createElement(_icon.default, {
    color: "gold",
    tint: "dark",
    marginLeft: 2
  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningBadgedMediumFilled, null)))), /*#__PURE__*/_react.default.createElement(_box.Box, {
    textAlign: "right",
    marginLeft: 7
  }, /*#__PURE__*/_react.default.createElement(_typography.TextBody, {
    color: "neutral"
  }, /*#__PURE__*/_react.default.createElement("strong", null, "Total")), /*#__PURE__*/_react.default.createElement(_box.Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/_react.default.createElement(_typography.Heading1, null, /*#__PURE__*/_react.default.createElement(_typography.Monospaced, null, "999h99")), /*#__PURE__*/_react.default.createElement(_icon.default, {
    color: "gold",
    tint: "dark",
    marginLeft: 2
  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconWarningBadgedMediumFilled, null)))));
};

var _default = {
  component: _DetailPage.default,
  title: (0, _utils.addStoryInGroup)(_utils.COMPOSITIONS, 'DetailPage'),
  parameters: {
    backgrounds: {
      default: 'Neutral light',
      values: [{
        name: 'Neutral lightest',
        value: _constants.COLOR.NEUTRAL.LIGHTEST
      }, {
        name: 'Neutral light',
        value: _constants.COLOR.NEUTRAL.LIGHT
      }]
    },
    info: {
      propTables: false
    }
  }
};
exports.default = _default;

var body = function body() {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Body, null, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, "Here you can add arbitrary content."));
};

exports.body = body;
body.storyName = 'Body';
body.parameters = {
  info: {
    propTables: [_DetailPage.default.Body]
  }
};

var header = function header(args) {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, args);
};

exports.header = header;
header.storyName = 'Header';
header.args = defaultDetailPageHeaderProps;
header.argTypes = detailPageHeaderArgTypes;
header.parameters = {
  info: {
    propTables: [_DetailPage.default.Header]
  }
};

var headerWithTitleSuffix = function headerWithTitleSuffix(args) {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, (0, _extends2.default)({}, args, {
    titleSuffix: /*#__PURE__*/_react.default.createElement(_statusLabel.default, {
      color: "violet"
    }, "Draft")
  }));
};

exports.headerWithTitleSuffix = headerWithTitleSuffix;
headerWithTitleSuffix.storyName = 'Header with title suffix';
headerWithTitleSuffix.args = defaultDetailPageHeaderProps;
headerWithTitleSuffix.argTypes = detailPageHeaderArgTypes;
headerWithTitleSuffix.parameters = {
  info: {
    propTables: [_DetailPage.default.Header]
  }
};

var headerWithActions = function headerWithActions(args) {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, args, actionButtons());
};

exports.headerWithActions = headerWithActions;
headerWithActions.storyName = 'Header with actions';
headerWithActions.args = defaultDetailPageHeaderProps;
headerWithActions.argTypes = detailPageHeaderArgTypes;
headerWithActions.parameters = {
  info: {
    propTables: [_DetailPage.default.Header]
  }
};

var headerWithTotals = function headerWithTotals(args) {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, args, totals());
};

exports.headerWithTotals = headerWithTotals;
headerWithTotals.storyName = 'Header with totals';
headerWithTotals.args = defaultDetailPageHeaderProps;
headerWithTotals.argTypes = detailPageHeaderArgTypes;
headerWithTotals.parameters = {
  info: {
    propTables: [_DetailPage.default.Header]
  }
};

var headerWithTotalsAndActions = function headerWithTotalsAndActions(args) {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, args, totals(), actionButtons());
};

exports.headerWithTotalsAndActions = headerWithTotalsAndActions;
headerWithTotalsAndActions.storyName = 'Header with totals and actions';
headerWithTotalsAndActions.args = defaultDetailPageHeaderProps;
headerWithTotalsAndActions.argTypes = detailPageHeaderArgTypes;
headerWithTotalsAndActions.parameters = {
  info: {
    propTables: [_DetailPage.default.Header]
  }
};

var headerWithEverthingTogether = function headerWithEverthingTogether(args) {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, (0, _extends2.default)({}, args, {
    titleSuffix: /*#__PURE__*/_react.default.createElement(_statusLabel.default, {
      color: "violet"
    }, "Draft")
  }), totals(), actionButtons());
};

exports.headerWithEverthingTogether = headerWithEverthingTogether;
headerWithEverthingTogether.storyName = 'Header with everything together';
headerWithEverthingTogether.args = defaultDetailPageHeaderProps;
headerWithEverthingTogether.argTypes = detailPageHeaderArgTypes;
headerWithEverthingTogether.parameters = {
  info: {
    propTables: [_DetailPage.default.Header]
  }
};

var composition = function composition() {
  return /*#__PURE__*/_react.default.createElement(_DetailPage.default, null, /*#__PURE__*/_react.default.createElement(_DetailPage.default.Header, defaultDetailPageHeaderProps), /*#__PURE__*/_react.default.createElement(_DetailPage.default.Body, null, /*#__PURE__*/_react.default.createElement(_typography.TextBody, null, "Here you can add arbitrary content.")));
};

exports.composition = composition;
composition.storyName = 'Composition';
composition.parameters = {
  info: {
    propTables: [_DetailPage.default]
  }
};