@canonical/react-components 1.3.1 → 1.3.2

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

@@ -1,28 +0,0 @@
-var _excluded = ["children", "className", "inline", "stacked"];
-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 [Form](https://docs.vanillaframework.io/base/forms).
- *
- * Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the `<form>` parent element.
- */
-var Form = _ref => {
-  var {
-      children,
-      className,
-      inline,
-      stacked
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("form", _extends({
-    className: classNames(className, {
-      "p-form": inline || stacked,
-      "p-form--inline": inline,
-      "p-form--stacked": stacked
-    })
-  }, props), children);
-};
-export default Form;

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

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

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

@@ -1,33 +0,0 @@
-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

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

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

@@ -1,61 +0,0 @@
-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

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

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

@@ -1,103 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,110 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,63 +0,0 @@
-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

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