@atlaskit/form 8.3.1 → 8.4.3

package/dist/cjs/form-header.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = 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 gridSize = (0, _constants.gridSize)();
+var fontFamily = (0, _constants.fontFamily)();
+var formHeaderContentStyles = (0, _core.css)({
+  minWidth: '100%',
+  marginTop: "".concat(gridSize, "px")
+});
+var formHeaderDescriptionStyles = (0, _core.css)({
+  marginTop: "".concat(gridSize, "px")
+});
+var formHeaderTitleStyles = (0, _core.css)({
+  marginTop: 0,
+  marginRight: "".concat(gridSize * 4, "px"),
+  lineHeight: "".concat(gridSize * 4, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var formHeaderWrapperStyles = (0, _core.css)({
+  fontFamily: "".concat(fontFamily)
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH700Styles = (0, _core.css)((0, _typography.h700)({
+  theme: {
+    mode: 'dark'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH700Styles = (0, _core.css)((0, _typography.h700)({
+  theme: {
+    mode: 'light'
+  }
+}));
+
+var FormHeaderContent = function FormHeaderContent(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: formHeaderContentStyles
+  }, children);
+};
+
+exports.FormHeaderContent = FormHeaderContent;
+
+var FormHeaderDescription = function FormHeaderDescription(_ref2) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: formHeaderDescriptionStyles
+  }, children);
+};
+
+exports.FormHeaderDescription = FormHeaderDescription;
+
+var FormHeaderTitle = function FormHeaderTitle(_ref3) {
+  var children = _ref3.children;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)("h2", {
+    css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
+  }, children);
+};
+
+exports.FormHeaderTitle = FormHeaderTitle;
+
+var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
+  var children = _ref4.children;
+  return (0, _core.jsx)("div", {
+    css: formHeaderWrapperStyles
+  }, children);
+};
+/**
+ * __Form header__
+ *
+ * A form header contains the form component's heading and subheadings. This provides the correct padding
+ * and styling for it.
+ *
+ * - [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)
+ */
+
+
+var FormHeader = function FormHeader(_ref5) {
+  var children = _ref5.children,
+      description = _ref5.description,
+      title = _ref5.title;
+  return (0, _core.jsx)(FormHeaderWrapper, null, title && (0, _core.jsx)(FormHeaderTitle, null, title), description && (0, _core.jsx)(FormHeaderDescription, null, description), (0, _core.jsx)(FormHeaderContent, null, children));
+};
+
+var _default = FormHeader;
+exports.default = _default;

package/dist/cjs/form-section.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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 gridSize = (0, _constants.gridSize)();
+var formSectionDescriptionStyles = (0, _core.css)({
+  marginTop: "".concat(gridSize, "px")
+});
+var formSectionTitleStyles = (0, _core.css)({
+  marginTop: 0,
+  marginRight: "".concat(gridSize * 4, "px"),
+  lineHeight: "".concat(gridSize * 4, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var formSectionWrapperStyles = (0, _core.css)({
+  marginTop: "".concat(gridSize * 3, "px")
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH600Styles = (0, _core.css)((0, _typography.h600)({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH600Styles = (0, _core.css)((0, _typography.h600)({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var FormSectionWrapper = function FormSectionWrapper(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: formSectionWrapperStyles
+  }, children);
+};
+
+var FormSectionTitle = function FormSectionTitle(_ref2) {
+  var children = _ref2.children;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)("h3", {
+    css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
+  }, children);
+};
+
+var FormSectionDescription = function FormSectionDescription(_ref3) {
+  var children = _ref3.children;
+  return (0, _core.jsx)("div", {
+    css: formSectionDescriptionStyles
+  }, children);
+};
+/**
+ * __Form section__
+ *
+ * A form section is used to define a section of a form layout. This contains a section title, content
+ * and a description of the section.
+ *
+ * - [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)
+ */
+
+
+var FormSection = function FormSection(_ref4) {
+  var children = _ref4.children,
+      description = _ref4.description,
+      title = _ref4.title;
+  return (0, _core.jsx)(FormSectionWrapper, null, title && (0, _core.jsx)(FormSectionTitle, null, title), description && (0, _core.jsx)(FormSectionDescription, null, description), children);
+};
+
+var _default = FormSection;
+exports.default = _default;

package/dist/cjs/{Form.js → form.js}

@@ -24,9 +24,20 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * __Form context__
+ *
+ * A form context creates a context for the field values and allows them to be accessed by the children.
+ */
 var FormContext = /*#__PURE__*/(0, _react.createContext)(function () {
   return function () {};
 });
+/**
+ * __Is disabled context__
+ *
+ * An is disabled context creates the context for when a value is disabled.
+ */
+
 exports.FormContext = FormContext;
 var IsDisabledContext = /*#__PURE__*/(0, _react.createContext)(false);
 exports.IsDisabledContext = IsDisabledContext;

package/dist/cjs/index.js

@@ -8,84 +8,84 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Form.default;
+    return _form.default;
   }
 });
 Object.defineProperty(exports, "FormHeader", {
   enumerable: true,
   get: function get() {
-    return _FormHeader.default;
+    return _formHeader.default;
   }
 });
 Object.defineProperty(exports, "FormFooter", {
   enumerable: true,
   get: function get() {
-    return _FormFooter.default;
+    return _formFooter.default;
   }
 });
 Object.defineProperty(exports, "FormSection", {
   enumerable: true,
   get: function get() {
-    return _FormSection.default;
+    return _formSection.default;
   }
 });
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function get() {
-    return _Field.default;
+    return _field.default;
   }
 });
 Object.defineProperty(exports, "CheckboxField", {
   enumerable: true,
   get: function get() {
-    return _CheckboxField.default;
+    return _checkboxField.default;
   }
 });
 Object.defineProperty(exports, "RangeField", {
   enumerable: true,
   get: function get() {
-    return _RangeField.default;
+    return _rangeField.default;
   }
 });
 Object.defineProperty(exports, "HelperMessage", {
   enumerable: true,
   get: function get() {
-    return _Messages.HelperMessage;
+    return _messages.HelperMessage;
   }
 });
 Object.defineProperty(exports, "ErrorMessage", {
   enumerable: true,
   get: function get() {
-    return _Messages.ErrorMessage;
+    return _messages.ErrorMessage;
   }
 });
 Object.defineProperty(exports, "ValidMessage", {
   enumerable: true,
   get: function get() {
-    return _Messages.ValidMessage;
+    return _messages.ValidMessage;
   }
 });
 Object.defineProperty(exports, "Fieldset", {
   enumerable: true,
   get: function get() {
-    return _Fieldset.default;
+    return _fieldset.default;
   }
 });
 
-var _Form = _interopRequireDefault(require("./Form"));
+var _form = _interopRequireDefault(require("./form"));
 
-var _FormHeader = _interopRequireDefault(require("./FormHeader"));
+var _formHeader = _interopRequireDefault(require("./form-header"));
 
-var _FormFooter = _interopRequireDefault(require("./FormFooter"));
+var _formFooter = _interopRequireDefault(require("./form-footer"));
 
-var _FormSection = _interopRequireDefault(require("./FormSection"));
+var _formSection = _interopRequireDefault(require("./form-section"));
 
-var _Field = _interopRequireDefault(require("./Field"));
+var _field = _interopRequireDefault(require("./field"));
 
-var _CheckboxField = _interopRequireDefault(require("./CheckboxField"));
+var _checkboxField = _interopRequireDefault(require("./checkbox-field"));
 
-var _RangeField = _interopRequireDefault(require("./RangeField"));
+var _rangeField = _interopRequireDefault(require("./range-field"));
 
-var _Messages = require("./Messages");
+var _messages = require("./messages");
 
-var _Fieldset = _interopRequireDefault(require("./Fieldset"));
+var _fieldset = _interopRequireDefault(require("./fieldset"));

package/dist/cjs/messages.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidMessage = exports.ErrorMessage = exports.HelperMessage = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
+
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _field = require("./field");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var fontFamily = (0, _constants.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 messageErrorColorStyles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.danger', _colors.R400)
+});
+var messageNeutralColorStyles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
+});
+var messageValidColorStyles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.success', _colors.G400)
+});
+var messageStyles = (0, _core.css)({
+  display: 'flex',
+  marginTop: "".concat(gridSize * 0.5, "px"),
+  justifyContent: 'baseline',
+  fontFamily: "".concat(fontFamily),
+  fontWeight: 'normal'
+});
+var iconWrapperStyles = (0, _core.css)({
+  display: 'flex'
+});
+
+var IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("span", {
+    css: iconWrapperStyles
+  }, children);
+};
+
+var Message = function Message(_ref2) {
+  var children = _ref2.children,
+      error = _ref2.error,
+      valid = _ref2.valid,
+      fieldId = _ref2.fieldId,
+      testId = _ref2.testId;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)("div", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    "data-testid": testId,
+    id: fieldId
+  }, children);
+};
+
+/**
+ * __Helper message__
+ *
+ * A helper message tells the user what kind of input the field takes. For example, a helper message could be
+ * 'Password should be more than 4 characters'
+ *
+ */
+var HelperMessage = function HelperMessage(_ref3) {
+  var children = _ref3.children,
+      testId = _ref3.testId;
+  return (0, _core.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _core.jsx)(Message, {
+      fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
+      testId: testId
+    }, children);
+  });
+};
+/**
+ * __Error message__
+ *
+ * An error message is used to tell a user that the field input is invalid. For example, an error message could be
+ * 'Invalid username, needs to be more than 4 characters'.
+ *
+ */
+
+
+exports.HelperMessage = HelperMessage;
+
+var ErrorMessage = function ErrorMessage(_ref4) {
+  var children = _ref4.children,
+      testId = _ref4.testId;
+  return (0, _core.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _core.jsx)(Message, {
+      error: true,
+      fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
+      testId: testId
+    }, (0, _core.jsx)(IconWrapper, null, (0, _core.jsx)(_error.default, {
+      size: "small",
+      label: "error"
+    })), children);
+  });
+};
+/**
+ * __Valid message__
+ *
+ * A valid message is used to tell a user that the field input is valid. For example,
+ * a helper message could be 'Nice one, this username is available'.
+ *
+ */
+
+
+exports.ErrorMessage = ErrorMessage;
+
+var ValidMessage = function ValidMessage(_ref5) {
+  var children = _ref5.children,
+      testId = _ref5.testId;
+  return (0, _core.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _core.jsx)(Message, {
+      fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
+      testId: testId,
+      valid: true
+    }, (0, _core.jsx)(IconWrapper, null, (0, _core.jsx)(_success.default, {
+      size: "small",
+      label: "success"
+    })), children);
+  });
+};
+
+exports.ValidMessage = ValidMessage;

package/dist/cjs/{RangeField.js → range-field.js}

@@ -15,17 +15,26 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Field = _interopRequireDefault(require("./Field"));
+var _field = _interopRequireDefault(require("./field"));
 
 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) { (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; }
 
+/**
+ * __Range field__
+ *
+ * A range field is where a user can submit a range input as a part of a form.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ */
 var RangeField = function RangeField(props) {
   var children = props.children,
       strippedProps = (0, _objectWithoutProperties2.default)(props, ["children"]); // isInvalid and isRequired are specifically invalid for range inputs
 
-  return /*#__PURE__*/_react.default.createElement(_Field.default, (0, _extends2.default)({}, strippedProps, {
+  return /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, strippedProps, {
     transform: Number
   }), function (_ref) {
     var _ref$fieldProps = _ref.fieldProps,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.3.1",
+	"version": "8.4.3",
 	"sideEffects": false
 }

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

@@ -1,7 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
-import Field from './Field';
+import Field from './field';
 
+/**
+ * __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
+ */
 const CheckboxField = props => {
   const {
     children,

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

@@ -0,0 +1 @@
+export { default as CheckboxField } from '../checkbox-field';

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

@@ -0,0 +1 @@
+export { default } from '../field';

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

@@ -0,0 +1 @@
+export { default as Fieldset } from '../fieldset';

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

@@ -0,0 +1 @@
+export { default as FormFooter } from '../form-footer';

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

@@ -0,0 +1 @@
+export { default as FormHeader } from '../form-header';

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

@@ -0,0 +1 @@
+export { default as FormSection } from '../form-section';

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

@@ -0,0 +1 @@
+export { default } from '../form';

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

@@ -0,0 +1 @@
+export { HelperMessage, ErrorMessage, ValidMessage } from '../messages';

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

@@ -0,0 +1 @@
+export { default as RangeField } from '../range-field';