@atlaskit/form 8.3.1 → 8.4.3

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/form
 
+## 8.4.3
+
+### Patch Changes
+
+- [`2cf338dd802`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2cf338dd802) - Added homepage to package.json
+
+## 8.4.2
+
+### Patch Changes
+
+- [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
+
+## 8.4.1
+
+### Patch Changes
+
+- [`b9b3ab10494`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9b3ab10494) - There was a bug in 8.4.0 where the props in FormSection were not recognized. This has now been fixed.
+
+## 8.4.0
+
+### Minor Changes
+
+- [`4e3c853e85f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e3c853e85f) - This change removes the dependency `styled-components`. It has been refactored to use `@emotion/core` instead and entrypoints have been updated. Some examples have also been updated. There should be no UI or UX change.
+
+### Patch Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Internal changes to remove `@atlaskit/theme/math` usage.
+- Updated dependencies
+
 ## 8.3.1
 
 ### Patch Changes

package/CheckboxField/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/CheckboxField",
-  "main": "../dist/cjs/CheckboxField.js",
-  "module": "../dist/esm/CheckboxField.js",
-  "module:es2019": "../dist/es2019/CheckboxField.js",
-  "types": "../dist/types/CheckboxField.d.ts"
+  "main": "../dist/cjs/entry-points/checkbox-field.js",
+  "module": "../dist/esm/entry-points/checkbox-field.js",
+  "module:es2019": "../dist/es2019/entry-points/checkbox-field.js",
+  "types": "../dist/types/entry-points/checkbox-field.d.ts"
 }

package/Field/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/Field",
-  "main": "../dist/cjs/Field.js",
-  "module": "../dist/esm/Field.js",
-  "module:es2019": "../dist/es2019/Field.js",
-  "types": "../dist/types/Field.d.ts"
+  "main": "../dist/cjs/entry-points/field.js",
+  "module": "../dist/esm/entry-points/field.js",
+  "module:es2019": "../dist/es2019/entry-points/field.js",
+  "types": "../dist/types/entry-points/field.d.ts"
 }

package/Fieldset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/Fieldset",
-  "main": "../dist/cjs/Fieldset.js",
-  "module": "../dist/esm/Fieldset.js",
-  "module:es2019": "../dist/es2019/Fieldset.js",
-  "types": "../dist/types/Fieldset.d.ts"
+  "main": "../dist/cjs/entry-points/fieldset.js",
+  "module": "../dist/esm/entry-points/fieldset.js",
+  "module:es2019": "../dist/es2019/entry-points/fieldset.js",
+  "types": "../dist/types/entry-points/fieldset.d.ts"
 }

package/Form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/Form",
-  "main": "../dist/cjs/Form.js",
-  "module": "../dist/esm/Form.js",
-  "module:es2019": "../dist/es2019/Form.js",
-  "types": "../dist/types/Form.d.ts"
+  "main": "../dist/cjs/entry-points/form.js",
+  "module": "../dist/esm/entry-points/form.js",
+  "module:es2019": "../dist/es2019/entry-points/form.js",
+  "types": "../dist/types/entry-points/form.d.ts"
 }

package/FormFooter/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/FormFooter",
-  "main": "../dist/cjs/FormFooter.js",
-  "module": "../dist/esm/FormFooter.js",
-  "module:es2019": "../dist/es2019/FormFooter.js",
-  "types": "../dist/types/FormFooter.d.ts"
+  "main": "../dist/cjs/entry-points/form-footer.js",
+  "module": "../dist/esm/entry-points/form-footer.js",
+  "module:es2019": "../dist/es2019/entry-points/form-footer.js",
+  "types": "../dist/types/entry-points/form-footer.d.ts"
 }

package/FormHeader/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/FormHeader",
-  "main": "../dist/cjs/FormHeader.js",
-  "module": "../dist/esm/FormHeader.js",
-  "module:es2019": "../dist/es2019/FormHeader.js",
-  "types": "../dist/types/FormHeader.d.ts"
+  "main": "../dist/cjs/entry-points/form-header.js",
+  "module": "../dist/esm/entry-points/form-header.js",
+  "module:es2019": "../dist/es2019/entry-points/form-header.js",
+  "types": "../dist/types/entry-points/form-header.d.ts"
 }

package/FormSection/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/FormSection",
-  "main": "../dist/cjs/FormSection.js",
-  "module": "../dist/esm/FormSection.js",
-  "module:es2019": "../dist/es2019/FormSection.js",
-  "types": "../dist/types/FormSection.d.ts"
+  "main": "../dist/cjs/entry-points/form-section.js",
+  "module": "../dist/esm/entry-points/form-section.js",
+  "module:es2019": "../dist/es2019/entry-points/form-section.js",
+  "types": "../dist/types/entry-points/form-section.d.ts"
 }

package/Messages/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/Messages",
-  "main": "../dist/cjs/Messages.js",
-  "module": "../dist/esm/Messages.js",
-  "module:es2019": "../dist/es2019/Messages.js",
-  "types": "../dist/types/Messages.d.ts"
+  "main": "../dist/cjs/entry-points/messages.js",
+  "module": "../dist/esm/entry-points/messages.js",
+  "module:es2019": "../dist/es2019/entry-points/messages.js",
+  "types": "../dist/types/entry-points/messages.d.ts"
 }

package/RangeField/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form/RangeField",
-  "main": "../dist/cjs/RangeField.js",
-  "module": "../dist/esm/RangeField.js",
-  "module:es2019": "../dist/es2019/RangeField.js",
-  "types": "../dist/types/RangeField.d.ts"
+  "main": "../dist/cjs/entry-points/range-field.js",
+  "module": "../dist/esm/entry-points/range-field.js",
+  "module:es2019": "../dist/es2019/entry-points/range-field.js",
+  "types": "../dist/types/entry-points/range-field.d.ts"
 }

package/dist/cjs/{CheckboxField.js → checkbox-field.js}

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Field = _interopRequireDefault(require("./Field"));
+var _field = _interopRequireDefault(require("./field"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -29,6 +29,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2.default)(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; }
 
+/**
+ * __Checkbox field__
+ *
+ * A checkbox field is a form field that lets users select an item. Users can check or uncheck the checkbox.
+ *
+ * - [Examples] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ * - [Code] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ * - [Usage] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ */
 var CheckboxField = function CheckboxField(props) {
   var children = props.children,
       _props$defaultIsCheck = props.defaultIsChecked,
@@ -40,7 +49,7 @@ var CheckboxField = function CheckboxField(props) {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue;
   }, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/_react.default.createElement(_Field.default, (0, _extends2.default)({}, rest, {
+  return value !== undefined ? /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, rest, {
     defaultValue: defaultValue,
     transform: function transform(event, currentValue) {
       return event.currentTarget.checked && currentValue ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue.filter(function (v) {
@@ -60,7 +69,7 @@ var CheckboxField = function CheckboxField(props) {
         value: value
       })
     }, others));
-  }) : /*#__PURE__*/_react.default.createElement(_Field.default, (0, _extends2.default)({}, rest, {
+  }) : /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, rest, {
     defaultValue: defaultIsChecked,
     transform: function transform(event) {
       return event.currentTarget.checked;

package/dist/cjs/entry-points/checkbox-field.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckboxField", {
+  enumerable: true,
+  get: function get() {
+    return _checkboxField.default;
+  }
+});
+
+var _checkboxField = _interopRequireDefault(require("../checkbox-field"));

package/dist/cjs/entry-points/field.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _field.default;
+  }
+});
+
+var _field = _interopRequireDefault(require("../field"));

package/dist/cjs/entry-points/fieldset.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Fieldset", {
+  enumerable: true,
+  get: function get() {
+    return _fieldset.default;
+  }
+});
+
+var _fieldset = _interopRequireDefault(require("../fieldset"));

package/dist/cjs/entry-points/form-footer.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormFooter", {
+  enumerable: true,
+  get: function get() {
+    return _formFooter.default;
+  }
+});
+
+var _formFooter = _interopRequireDefault(require("../form-footer"));

package/dist/cjs/entry-points/form-header.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormHeader", {
+  enumerable: true,
+  get: function get() {
+    return _formHeader.default;
+  }
+});
+
+var _formHeader = _interopRequireDefault(require("../form-header"));

package/dist/cjs/entry-points/form-section.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormSection", {
+  enumerable: true,
+  get: function get() {
+    return _formSection.default;
+  }
+});
+
+var _formSection = _interopRequireDefault(require("../form-section"));

package/dist/cjs/entry-points/form.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _form.default;
+  }
+});
+
+var _form = _interopRequireDefault(require("../form"));

package/dist/cjs/entry-points/messages.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HelperMessage", {
+  enumerable: true,
+  get: function get() {
+    return _messages.HelperMessage;
+  }
+});
+Object.defineProperty(exports, "ErrorMessage", {
+  enumerable: true,
+  get: function get() {
+    return _messages.ErrorMessage;
+  }
+});
+Object.defineProperty(exports, "ValidMessage", {
+  enumerable: true,
+  get: function get() {
+    return _messages.ValidMessage;
+  }
+});
+
+var _messages = require("../messages");

package/dist/cjs/entry-points/range-field.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RangeField", {
+  enumerable: true,
+  get: function get() {
+    return _rangeField.default;
+  }
+});
+
+var _rangeField = _interopRequireDefault(require("../range-field"));

package/dist/cjs/{Field.js → field.js}

@@ -18,13 +18,23 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _core = require("@emotion/core");
+
 var _reactUid = require("react-uid");
 
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 
-var _Form = require("./Form");
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
 
-var _Field = _interopRequireWildcard(require("./styled/Field"));
+var _typography = require("@atlaskit/theme/typography");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _form = require("./form");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -34,6 +44,49 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2.default)(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; }
 
+var gridSize = (0, _constants.gridSize)();
+var fontFamily = (0, _constants.fontFamily)();
+var fieldWrapperStyles = (0, _core.css)({
+  marginTop: "".concat(gridSize, "px")
+});
+var labelStyles = (0, _core.css)({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: "".concat(gridSize * 0.5, "px"),
+  fontFamily: "".concat(fontFamily)
+});
+var requiredIndicatorStyles = (0, _core.css)({
+  paddingLeft: "".concat(gridSize * 0.25, "px"),
+  color: "".concat((0, _tokens.token)('color.text.danger', _colors.R400)),
+  fontFamily: "".concat(fontFamily)
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = (0, _core.css)((0, _typography.h200)({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = (0, _core.css)((0, _typography.h200)({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var Label = function Label(_ref) {
+  var children = _ref.children,
+      fieldId = _ref.fieldId;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    id: "".concat(fieldId, "-label"),
+    htmlFor: fieldId
+  }, children);
+};
+
 function isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -42,8 +95,11 @@ function isFunction(x) {
   return typeof x === 'function';
 }
 
-// Provides the id of the field to message components.
-// This links the message with the field for screen-readers.
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
 var FieldId = /*#__PURE__*/_react.default.createContext(undefined);
 
 exports.FieldId = FieldId;
@@ -80,8 +136,8 @@ function isShallowEqual(previousValue, currentValue) {
 }
 
 function Field(props) {
-  var registerField = (0, _react.useContext)(_Form.FormContext);
-  var isDisabled = (0, _react.useContext)(_Form.IsDisabledContext) || props.isDisabled || false;
+  var registerField = (0, _react.useContext)(_form.FormContext);
+  var isDisabled = (0, _react.useContext)(_form.IsDisabledContext) || props.isDisabled || false;
   var defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
 
   var _useState = (0, _react.useState)({
@@ -148,12 +204,18 @@ function Field(props) {
 
     var unregister = registerField(latestPropsRef.current.name, // @ts-ignore
     latestPropsRef.current.defaultValue, function (fieldState) {
-      /** Do not update dirtySinceLastSubmit until submission has finished. */
+      /**
+       * Do not update dirtySinceLastSubmit until submission has finished.
+       */
       var modifiedDirtySinceLastSubmit = fieldState.submitting ? latestStateRef.current.meta.dirtySinceLastSubmit : fieldState.dirtySinceLastSubmit;
-      /** Do not update submitFailed until submission has finished. */
+      /**
+       * Do not update submitFailed until submission has finished.
+       */
 
       var modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
-      /** Do not use submitError if the value has changed. */
+      /**
+       * Do not use submitError if the value has changed.
+       */
 
       var modifiedSubmitError = modifiedDirtySinceLastSubmit && latestPropsRef.current.validate ? undefined : fieldState.submitError;
       var modifiedError = modifiedSubmitError || (fieldState.touched || fieldState.dirty) && fieldState.error;
@@ -230,7 +292,8 @@ function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, hasDefaultValueChanged]);
-  var fieldId = (0, _react.useMemo)(function () {
+  var fieldId = (0, _react.useMemo)( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  function () {
     return props.id ? props.id : "".concat(props.name, "-").concat((0, _reactUid.uid)({
       id: props.name
     }));
@@ -246,12 +309,14 @@ function Field(props) {
     id: fieldId
   });
 
-  return /*#__PURE__*/_react.default.createElement(_Field.default, null, props.label && /*#__PURE__*/_react.default.createElement(_Field.Label, {
-    id: "".concat(fieldId, "-label"),
-    htmlFor: fieldId
-  }, props.label, props.isRequired && /*#__PURE__*/_react.default.createElement(_Field.RequiredIndicator, {
+  return (0, _core.jsx)("div", {
+    css: fieldWrapperStyles
+  }, props.label && (0, _core.jsx)(Label, {
+    fieldId: fieldId
+  }, props.label, props.isRequired && (0, _core.jsx)("span", {
+    css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), /*#__PURE__*/_react.default.createElement(FieldId.Provider, {
+  }, "*")), (0, _core.jsx)(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/fieldset.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+/** @jsx jsx */
+var fontFamily = (0, _constants.fontFamily)();
+var gridSize = (0, _constants.gridSize)();
+var fieldsetLabelStyles = (0, _core.css)({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: 0,
+  fontFamily: "".concat(fontFamily)
+});
+var fieldSetStyles = (0, _core.css)({
+  marginTop: "".concat(gridSize, "px")
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = (0, _core.css)((0, _typography.h200)({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = (0, _core.css)((0, _typography.h200)({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var FieldsetLabel = function FieldsetLabel(_ref) {
+  var children = _ref.children;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+  }, children);
+};
+/**
+ * __Fieldset__
+ *
+ * A fieldset groups a number of fields together. For example, when multiple CheckboxFields share the same name,
+ * a fieldset can be used to group them together. This makes the form more accessible.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ */
+
+
+var Fieldset = function Fieldset(_ref2) {
+  var children = _ref2.children,
+      legend = _ref2.legend;
+  return (0, _core.jsx)("fieldset", {
+    css: fieldSetStyles
+  }, legend && (0, _core.jsx)("legend", null, (0, _core.jsx)(FieldsetLabel, null, legend)), children);
+};
+
+var _default = Fieldset;
+exports.default = _default;

package/dist/cjs/form-footer.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FormFooter;
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var formFooterWrapperStyles = (0, _core.css)({
+  display: 'flex',
+  marginTop: "".concat(gridSize * 3, "px"),
+  justifyContent: 'flex-end'
+});
+var justifyContentStyles = (0, _core.css)({
+  justifyContent: 'flex-start'
+});
+/**
+ * __Form footer__
+ *
+ * A form footer has the content to be shown at the bottom of the form. This is usually the submit button.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ */
+
+function FormFooter(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'end' : _ref$align,
+      children = _ref.children;
+  return (0, _core.jsx)("footer", {
+    css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
+  }, children);
+}