"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ComplexResponsiveForm = exports["default"] = void 0;

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

var _addonActions = require("@storybook/addon-actions");

var _textInput = require("./text-input");

var _select = require("./select");

var _option = require("./select/option");

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

var _fieldSet = require("./field-set");

var _primitives = require("../../primitives");

var _formRecipes = _interopRequireDefault(require("./form-recipes.mdx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var _default = {
  title: 'Recipes/Forms',
  parameters: {
    docs: {
      page: _formRecipes["default"]
    }
  }
};
exports["default"] = _default;

var ComplexResponsiveForm = function ComplexResponsiveForm() {
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_primitives.Box, {
    stacked: {
      md: 'row'
    }
  }, /*#__PURE__*/_react["default"].createElement(_typography.FieldLabel, {
    "aria-hidden": true,
    basis: 200,
    shrink: 0
  }, "Full Legal Name"), /*#__PURE__*/_react["default"].createElement(_fieldSet.FieldSet, {
    label: "Full Legal Name",
    stacked: {
      sm: 'column',
      md: 'row'
    },
    align: {
      sm: 'stretch',
      md: 'center'
    },
    spacing: "mb1",
    hideLabel: true,
    grow: 1
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    basis: {
      md: 200
    },
    shrink: {
      md: 0
    },
    spacing: {
      sm: 'mb1',
      md: 'mr1'
    },
    name: "givenName",
    placeholder: "Given name",
    label: "Given name",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    grow: {
      md: 1
    },
    shrink: {
      md: 0
    },
    spacing: {
      sm: 'mb1',
      md: 'mr1'
    },
    name: "middleNames",
    placeholder: "Middle names",
    label: "Middle names",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    grow: {
      md: 1
    },
    shrink: {
      md: 0
    },
    name: "familyName",
    placeholder: "Family name",
    label: "Family name",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  }))), /*#__PURE__*/_react["default"].createElement(_primitives.Box, {
    stacked: {
      md: 'row'
    }
  }, /*#__PURE__*/_react["default"].createElement(_typography.FieldLabel, {
    "aria-hidden": true,
    basis: 200,
    shrink: 0
  }, "Residential Address"), /*#__PURE__*/_react["default"].createElement(_fieldSet.FieldSet, {
    label: "Residential Address",
    hideLabel: true,
    grow: 1
  }, /*#__PURE__*/_react["default"].createElement(_primitives.Box, {
    stacked: {
      sm: 'column',
      md: 'row'
    },
    align: {
      sm: 'stretch',
      md: 'center'
    },
    spacing: "mb1"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    grow: {
      md: 1
    },
    shrink: {
      md: 0
    },
    spacing: {
      sm: 'mb1',
      md: 'mr1'
    },
    name: "streetNameAndNumber",
    placeholder: "Street name and number",
    label: "Street name and number",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  }), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    shrink: {
      md: 0
    },
    basis: {
      md: 100
    },
    name: "unit",
    placeholder: "Unit",
    label: "Unit",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  })), /*#__PURE__*/_react["default"].createElement(_primitives.Box, {
    stacked: {
      sm: 'column',
      md: 'row'
    },
    align: {
      sm: 'stretch',
      md: 'center'
    },
    spacing: "mb1"
  }, /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    grow: {
      md: 1
    },
    spacing: {
      sm: 'mb1',
      md: 'mr1'
    },
    name: "city",
    placeholder: "City",
    label: "City",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  }), /*#__PURE__*/_react["default"].createElement(_select.Select, {
    grow: {
      md: 1
    },
    spacing: {
      sm: 'mb1',
      md: 'mr1'
    },
    placeholder: "Province",
    label: "Province",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change'),
    value: undefined
  }, /*#__PURE__*/_react["default"].createElement(_option.Option, {
    value: "on"
  }, "Ontario"), /*#__PURE__*/_react["default"].createElement(_option.Option, {
    value: "nl"
  }, "Newfoundland and Labrador")), /*#__PURE__*/_react["default"].createElement(_textInput.TextInput, {
    grow: {
      md: 1
    },
    spacing: {
      sm: 'mb1',
      md: 'mr1'
    },
    name: "postalCode",
    placeholder: "Postal code",
    label: "Postal code",
    hideLabel: true,
    onChange: (0, _addonActions.action)('change')
  }), /*#__PURE__*/_react["default"].createElement(_select.Select, {
    grow: {
      md: 1
    },
    placeholder: "Country",
    label: "Country",
    hideLabel: true,
    value: undefined,
    onChange: (0, _addonActions.action)('change')
  }, /*#__PURE__*/_react["default"].createElement(_option.Option, {
    value: "ca"
  }, "Canada"), /*#__PURE__*/_react["default"].createElement(_option.Option, {
    value: "usa"
  }, "United States"))))));
};

exports.ComplexResponsiveForm = ComplexResponsiveForm;