@canonical/react-components 1.3.0 → 1.3.1

package/dist-esm/components/FormikField/FormikField.js

@@ -0,0 +1,33 @@
+var _excluded = ["component", "displayError", "name", "value", "label"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { useField } from "formik";
+import Input from "../Input";
+/**
+ * This component makes it easier to use Vanilla form inputs with Formik. It
+ * makes use of Formik's context to automatically map errors, values, states
+ * etc. onto the provided field.
+ */
+var FormikField = _ref => {
+  var {
+      component: Component = Input,
+      displayError = true,
+      name,
+      value,
+      label
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var [field, meta] = useField({
+    name,
+    type: props.type,
+    value
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    "aria-label": label,
+    error: meta.touched && displayError ? meta.error : null,
+    label: label
+  }, field, props));
+};
+export default FormikField;

package/dist-esm/components/FormikField/index.js

@@ -0,0 +1 @@
+export { default } from "./FormikField";

package/dist-esm/components/Icon/Icon.js

@@ -0,0 +1,61 @@
+var _excluded = ["className", "light", "name"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var ICONS = {
+  anchor: "anchor",
+  chevronDown: "chevron-down",
+  chevronUp: "chevron-up",
+  close: "close",
+  code: "code",
+  collapse: "collapse",
+  copy: "copy",
+  delete: "delete",
+  drag: "drag",
+  error: "error",
+  expand: "expand",
+  externalLink: "external-link",
+  help: "help",
+  information: "information",
+  menu: "menu",
+  minus: "minus",
+  plus: "plus",
+  search: "search",
+  share: "share",
+  spinner: "spinner",
+  success: "success",
+  user: "user",
+  warning: "warning",
+  facebook: "facebook",
+  twitter: "twitter",
+  instagram: "instagram",
+  linkedin: "linkedin",
+  youtube: "youtube",
+  github: "github",
+  rss: "rss",
+  email: "email"
+};
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Icon](https://docs.vanillaframework.io/patterns/icons/).
+ *
+ * Icons provide visual context and enhance usability.
+ *
+ * @param name One of built-in Vanilla icons or a name of a custom icon that follows `p-icon--{name}` convention.
+ * @returns Icon
+ */
+var Icon = _ref => {
+  var {
+      className,
+      light,
+      name
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("i", _extends({
+    className: classNames(className, "p-icon--".concat(name), {
+      "is-light": light
+    })
+  }, props));
+};
+export default Icon;

package/dist-esm/components/Icon/index.js

@@ -0,0 +1 @@
+export { default, ICONS } from "./Icon";

package/dist-esm/components/Input/Input.js

@@ -0,0 +1,103 @@
+var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "takeFocusDelay", "type", "wrapperClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useEffect, useId, useRef } from "react";
+import Field from "../Field";
+import CheckboxInput from "../CheckboxInput";
+import RadioInput from "../RadioInput";
+
+/**
+ * The props for the Input component.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Input](https://docs.vanillaframework.io/base/forms/#input).
+ *
+ * An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
+ */
+var Input = _ref => {
+  var {
+      caution,
+      className,
+      error,
+      help,
+      helpClassName,
+      id,
+      label,
+      labelClassName,
+      required,
+      stacked,
+      success,
+      takeFocus,
+      takeFocusDelay,
+      type,
+      wrapperClassName
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var inputRef = useRef(null);
+  var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
+  var defaultInputId = useId();
+  var inputId = id || defaultInputId;
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  var description = [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" ");
+  var commonProps = _objectSpread({
+    "aria-describedby": !description ? undefined : description,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    id: inputId,
+    required: required
+  }, inputProps);
+  useEffect(() => {
+    if (takeFocus) {
+      if (takeFocusDelay) {
+        setTimeout(() => inputRef.current.focus(), takeFocusDelay);
+      } else {
+        inputRef.current.focus();
+      }
+    }
+  }, [takeFocus, takeFocusDelay]);
+  var input;
+  if (type === "checkbox") {
+    input = /*#__PURE__*/React.createElement(CheckboxInput, _extends({
+      label: label,
+      labelClassName: labelClassName
+    }, commonProps));
+  } else if (type === "radio") {
+    input = /*#__PURE__*/React.createElement(RadioInput, _extends({
+      label: label,
+      labelClassName: labelClassName
+    }, commonProps));
+  } else {
+    input = /*#__PURE__*/React.createElement("input", _extends({
+      className: classNames("p-form-validation__input", className),
+      ref: inputRef,
+      type: type
+    }, commonProps));
+  }
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    forId: inputId,
+    help: help,
+    helpClassName: helpClassName + "",
+    helpId: helpId,
+    isTickElement: type === "checkbox" || type === "radio",
+    label: fieldLabel,
+    labelClassName: labelClassName,
+    required: required,
+    stacked: stacked,
+    success: success,
+    validationId: validationId
+  }, input);
+};
+export default Input;

package/dist-esm/components/Input/index.js

@@ -0,0 +1 @@
+export { default } from "./Input";

package/dist-esm/components/Label/Label.js

@@ -0,0 +1,27 @@
+var _excluded = ["children", "className", "forId", "required"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+
+/**
+ * The props for the Label component.
+ */
+
+var Label = _ref => {
+  var {
+      children,
+      className,
+      forId,
+      required
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("label", _extends({
+    className: classNames(className, "p-form__label", {
+      "is-required": required
+    }),
+    htmlFor: forId
+  }, props), children);
+};
+export default Label;

package/dist-esm/components/Label/index.js

@@ -0,0 +1 @@
+export { default } from "./Label";

package/dist-esm/components/Link/Link.js

@@ -0,0 +1,37 @@
+var _excluded = ["children", "className", "href", "inverted", "soft", "top"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Link](https://docs.vanillaframework.io/patterns/links/).
+ *
+ * Links are used to embed actions or pathways to more information, allowing users to click their way from page to page.
+ */
+var Link = _ref => {
+  var {
+      children,
+      className,
+      href = "#",
+      inverted = false,
+      soft = false,
+      top = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var link = /*#__PURE__*/React.createElement("a", _extends({
+    className: classNames(className, {
+      "p-link--inverted": inverted,
+      "p-link--soft": soft,
+      "p-top__link": top
+    }),
+    href: href
+  }, props), children);
+  if (top) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-top"
+    }, link);
+  }
+  return link;
+};
+export default Link;

package/dist-esm/components/Link/index.js

@@ -0,0 +1 @@
+export { default } from "./Link";

package/dist-esm/components/List/List.js

@@ -0,0 +1,110 @@
+var _excluded = ["title", "className", "content", "titleElement"],
+  _excluded2 = ["title", "className", "content"],
+  _excluded3 = ["className", "detailed", "divided", "inline", "isDark", "items", "middot", "stretch", "split", "stepped", "ticked"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+var generateItems = _ref => {
+  var {
+    items,
+    ticked,
+    inline,
+    middot,
+    stepped
+  } = _ref;
+  return items.map((item, i) => {
+    var body;
+    var title;
+    var className;
+    var content;
+    var TitleComponent = "h3";
+    var liProps;
+    if ( /*#__PURE__*/React.isValidElement(item) || typeof item === "string" || typeof item === "number") {
+      content = item;
+    } else if (item && typeof item === "object" && "content" in item) {
+      if ("titleElement" in item) {
+        var _item = item;
+        ({
+          title,
+          className,
+          content,
+          titleElement: TitleComponent = "h3"
+        } = _item);
+        liProps = _objectWithoutProperties(_item, _excluded);
+        _item;
+      } else {
+        var _item2 = item;
+        ({
+          title,
+          className,
+          content
+        } = _item2);
+        liProps = _objectWithoutProperties(_item2, _excluded2);
+        _item2;
+      }
+    }
+    if (stepped) {
+      body = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleComponent, {
+        className: "p-stepped-list__title"
+      }, title), /*#__PURE__*/React.createElement("div", {
+        className: "p-stepped-list__content"
+      }, content));
+    } else {
+      body = content;
+    }
+    return /*#__PURE__*/React.createElement("li", _extends({
+      className: classNames(className, {
+        "p-list__item": !inline && !stepped,
+        "p-inline-list__item": inline,
+        "p-stepped-list__item": stepped,
+        "is-ticked": ticked
+      }),
+      key: i
+    }, liProps), body, middot ? " " : null);
+  });
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [List](https://docs.vanillaframework.io/patterns/lists/).
+ *
+ * If you want to display lists in a way that is more visually distinctive than the standard `<ol>` and `<ul>`, we have 7 list styles at your disposal.
+ */
+var List = _ref2 => {
+  var {
+      className,
+      detailed,
+      divided,
+      inline,
+      isDark,
+      items,
+      middot,
+      stretch,
+      split,
+      stepped,
+      ticked
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  var Component = stepped ? "ol" : "ul";
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(className, {
+      "p-list": !divided && !inline && !middot && !stretch && !stepped,
+      "p-list--divided": divided,
+      "p-inline-list": inline,
+      "p-inline-list--middot": middot,
+      "p-inline-list--stretch": stretch,
+      "p-stepped-list": stepped && !detailed,
+      "p-stepped-list--detailed": stepped && detailed,
+      "is-dark": isDark,
+      "is-split": split
+    })
+  }, props), generateItems({
+    items,
+    ticked,
+    inline: inline || middot || stretch,
+    middot,
+    stepped
+  }));
+};
+export default List;

package/dist-esm/components/List/index.js

@@ -0,0 +1 @@
+export { default } from "./List";

package/dist-esm/components/Loader/Loader.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Spinner from "../Spinner";
+import { IS_DEV } from "../../utils";
+
+/**
+ * @deprecated Loader component is deprecated. Use Spinner component instead.
+ */
+var Loader = props => {
+  if (IS_DEV) {
+    console.warn("The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical.github.io/react-components/?path=/story/spinner--default-story");
+  }
+  return /*#__PURE__*/React.createElement(Spinner, props);
+};
+export default Loader;

package/dist-esm/components/Loader/index.js

@@ -0,0 +1 @@
+export { default } from "./Loader";

package/dist-esm/components/LoginPageLayout/LoginPageLayout.js

@@ -0,0 +1,63 @@
+import _pt from "prop-types";
+import React, { useLayoutEffect } from "react";
+import Card from "../Card";
+import Col from "../Col";
+import Navigation from "../Navigation";
+import Row from "../Row";
+import { Theme } from "../../enums";
+import "./LoginPageLayout.scss";
+var defaultLogo = {
+  src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+  title: "Canonical",
+  url: "/"
+};
+/**
+ * This is a layout component that is used to display a page with a title and children.
+ * The LoginPageLayout recommended usages are in the login flow like registration, sign up and error pages.
+ */
+var LoginPageLayout = _ref => {
+  var {
+    children,
+    title,
+    logo = defaultLogo
+  } = _ref;
+  useLayoutEffect(() => {
+    var _document$querySelect;
+    var bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
+    if (!bodyInitiallyContainsIsPaper) {
+      var _document$querySelect2;
+      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
+    }
+    return () => {
+      if (!bodyInitiallyContainsIsPaper) {
+        var _document$querySelect3;
+        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Row, {
+    className: "p-strip page-row"
+  }, /*#__PURE__*/React.createElement(Col, {
+    emptyLarge: 4,
+    size: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "u-no-padding page-card"
+  }, /*#__PURE__*/React.createElement(Navigation, {
+    logo: logo,
+    theme: Theme.DARK
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "p-card__inner page-inner"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "p-heading--4"
+  }, title), /*#__PURE__*/React.createElement("div", null, children)))));
+};
+LoginPageLayout.propTypes = {
+  title: _pt.string.isRequired,
+  children: _pt.node,
+  logo: _pt.shape({
+    src: _pt.string.isRequired,
+    title: _pt.string.isRequired,
+    url: _pt.string.isRequired
+  })
+};
+export default LoginPageLayout;

package/dist-esm/components/LoginPageLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./LoginPageLayout";