@canonical/react-components 0.57.0 → 0.59.0

package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Links = exports.Default = exports.CustomContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+var _SideNavigationText = _interopRequireDefault(require("../SideNavigationText"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const meta = {
+  component: _SideNavigationItem.default,
+  render: args => /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+    dark: false,
+    items: [{
+      items: [/*#__PURE__*/_react.default.createElement(_SideNavigationItem.default, _extends({}, args, {
+        dark: false
+      }))]
+    }]
+  }),
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * The navigation item can appear as a link and accept the props from [`SideNavigationLink`](/docs/components-sidenavigation-sidenavigationlink--docs).
+ */
+const Links = exports.Links = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    href: "/models"
+  }
+};
+
+/**
+ * By providing the `nonInteractive` prop the navigation item will appear as a
+ * text entry and accept the props from
+ * [`SideNavigationText`](/docs/components-sidenavigation-sidenavigationtext--docs).
+ */
+const Text = exports.Text = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    nonInteractive: true
+  }
+};
+
+/**
+ * The navigation item can display custom content by providing the `children` prop.
+ * In this case, any other attributes provided to the object will be given to
+ * the list item.
+ */
+const CustomContent = exports.CustomContent = {
+  args: {
+    className: "custom-class",
+    children: /*#__PURE__*/_react.default.createElement(_SideNavigationText.default, null, "This item has been given a custom class")
+  }
+};

package/dist/components/SideNavigation/SideNavigationItem/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationItemProps, } from "./SideNavigationItem";

package/dist/components/SideNavigation/SideNavigationItem/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationItem.default;
+  }
+});
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { HTMLProps } from "react";
+import type { SideNavigationBaseProps } from "../SideNavigationBase";
+export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
+export type Props<L = LinkDefaultElement> = Omit<SideNavigationBaseProps<L>, "component"> & {
+    /**
+     * The component or element to use for the link element e.g. `a` or `NavLink`.
+     * @default a
+     */
+    component?: SideNavigationBaseProps<L>["component"];
+};
+declare const SideNavigationLink: <L = LinkDefaultElement>({ component, ...props }: Props<L>) => React.JSX.Element;
+export default SideNavigationLink;

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SideNavigationBase = _interopRequireDefault(require("../SideNavigationBase"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SideNavigationLink = _ref => {
+  let {
+    component,
+    ...props
+  } = _ref;
+  let className = null;
+  if ("className" in props && typeof props.className === "string") {
+    className = props.className;
+    delete props.className;
+  }
+  return /*#__PURE__*/_react.default.createElement(_SideNavigationBase.default, _extends({
+    className: (0, _classnames.default)("p-side-navigation__link", className),
+    component: component !== null && component !== void 0 ? component : "a"
+  }, props));
+};
+var _default = exports.default = SideNavigationLink;

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationLink from "./SideNavigationLink";
+declare const meta: Meta<typeof SideNavigationLink>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationLink>;
+export declare const Default: Story;
+export declare const CustomComponent: Story;

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomComponent = void 0;
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SideNavigationLink.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    label: "Models",
+    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};
+const CustomComponent = exports.CustomComponent = {
+  args: {
+    component: props => /*#__PURE__*/_react.default.createElement("button", props),
+    icon: "drag",
+    label: "Models"
+  }
+};

package/dist/components/SideNavigation/SideNavigationLink/index.d.ts

@@ -0,0 +1 @@
+export { default, type LinkDefaultElement as SideNavigationLinkDefaultElement, type Props as SideNavigationLinkProps, } from "./SideNavigationLink";

package/dist/components/SideNavigation/SideNavigationLink/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationLink.default;
+  }
+});
+var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { HTMLProps } from "react";
+import type { SideNavigationBaseProps } from "../SideNavigationBase";
+export type TextDefaultElement = HTMLProps<HTMLSpanElement>;
+export type Props = Omit<SideNavigationBaseProps<TextDefaultElement>, "component" | "label">;
+declare const SideNavigationText: ({ children, className, ...props }: Props) => React.JSX.Element;
+export default SideNavigationText;

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SideNavigationBase = _interopRequireDefault(require("../SideNavigationBase"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SideNavigationText = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_SideNavigationBase.default, _extends({
+    className: (0, _classnames.default)("p-side-navigation__text", className),
+    component: "span",
+    label: children
+  }, props));
+};
+var _default = exports.default = SideNavigationText;

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SideNavigationText from "./SideNavigationText";
+declare const meta: Meta<typeof SideNavigationText>;
+export default meta;
+type Story = StoryObj<typeof SideNavigationText>;
+export declare const Default: Story;

package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("../../Badge"));
+var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _SideNavigationText.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    icon: "drag",
+    children: "Models",
+    status: /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      value: 9,
+      isNegative: true
+    })
+  }
+};

package/dist/components/SideNavigation/SideNavigationText/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SideNavigationTextProps, } from "./SideNavigationText";

package/dist/components/SideNavigation/SideNavigationText/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationText.default;
+  }
+});
+var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/SideNavigation/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./SideNavigation";
+export type { Props as SideNavigationProps } from "./SideNavigation";
+export { default as SideNavigationItem } from "./SideNavigationItem";
+export { default as SideNavigationText } from "./SideNavigationText";
+export { default as SideNavigationLink, type SideNavigationLinkDefaultElement, } from "./SideNavigationLink";

package/dist/components/SideNavigation/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SideNavigationItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationItem.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationLink", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationLink.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationText", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationText.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigation.default;
+  }
+});
+var _SideNavigation = _interopRequireDefault(require("./SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./SideNavigationItem"));
+var _SideNavigationText = _interopRequireDefault(require("./SideNavigationText"));
+var _SideNavigationLink = _interopRequireDefault(require("./SideNavigationLink"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/index.d.ts

@@ -1,6 +1,13 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as ActionButton } from "./components/ActionButton";
 export { default as ArticlePagination } from "./components/ArticlePagination";
+export { default as ApplicationLayout } from "./components/ApplicationLayout";
+export { default as AppAside } from "./components/ApplicationLayout/AppAside";
+export { default as Application } from "./components/ApplicationLayout/Application";
+export { default as AppMain } from "./components/ApplicationLayout/AppMain";
+export { default as AppNavigation } from "./components/ApplicationLayout/AppNavigation";
+export { default as AppNavigationBar } from "./components/ApplicationLayout/AppNavigationBar";
+export { default as AppStatus } from "./components/ApplicationLayout/AppStatus";
 export { default as Badge } from "./components/Badge";
 export { default as Button, ButtonAppearance } from "./components/Button";
 export { default as Card } from "./components/Card";
@@ -38,6 +45,10 @@ export { default as Row } from "./components/Row";
 export { default as SearchAndFilter } from "./components/SearchAndFilter";
 export { default as SearchBox } from "./components/SearchBox";
 export { default as Select } from "./components/Select";
+export { default as SideNavigation } from "./components/SideNavigation";
+export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
+export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
+export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
@@ -55,6 +66,13 @@ export { default as TablePagination } from "./components/TablePagination";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
+export type { ApplicationLayoutProps } from "./components/ApplicationLayout";
+export type { AppAsideProps } from "./components/ApplicationLayout/AppAside";
+export type { ApplicationProps } from "./components/ApplicationLayout/Application";
+export type { AppMainProps } from "./components/ApplicationLayout/AppMain";
+export type { AppNavigationProps } from "./components/ApplicationLayout/AppNavigation";
+export type { AppNavigationBarProps } from "./components/ApplicationLayout/AppNavigationBar";
+export type { AppStatusProps } from "./components/ApplicationLayout/AppStatus";
 export type { BadgeProps } from "./components/Badge";
 export type { ButtonProps } from "./components/Button";
 export type { CardProps } from "./components/Card";
@@ -89,6 +107,10 @@ export type { RowProps } from "./components/Row";
 export type { SearchAndFilterProps } from "./components/SearchAndFilter";
 export type { SearchBoxProps } from "./components/SearchBox";
 export type { SelectProps } from "./components/Select";
+export type { SideNavigationProps } from "./components/SideNavigation";
+export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
+export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
+export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
 export type { StatusLabelProps } from "./components/StatusLabel";

package/dist/index.js

@@ -7,6 +7,13 @@ var _exportNames = {
   Accordion: true,
   ActionButton: true,
   ArticlePagination: true,
+  ApplicationLayout: true,
+  AppAside: true,
+  Application: true,
+  AppMain: true,
+  AppNavigation: true,
+  AppNavigationBar: true,
+  AppStatus: true,
   Badge: true,
   Button: true,
   ButtonAppearance: true,
@@ -53,6 +60,10 @@ var _exportNames = {
   SearchAndFilter: true,
   SearchBox: true,
   Select: true,
+  SideNavigation: true,
+  SideNavigationItem: true,
+  SideNavigationLink: true,
+  SideNavigationText: true,
   Slider: true,
   Switch: true,
   Spinner: true,
@@ -93,6 +104,48 @@ Object.defineProperty(exports, "ActionButton", {
     return _ActionButton.default;
   }
 });
+Object.defineProperty(exports, "AppAside", {
+  enumerable: true,
+  get: function () {
+    return _AppAside.default;
+  }
+});
+Object.defineProperty(exports, "AppMain", {
+  enumerable: true,
+  get: function () {
+    return _AppMain.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigation", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigation.default;
+  }
+});
+Object.defineProperty(exports, "AppNavigationBar", {
+  enumerable: true,
+  get: function () {
+    return _AppNavigationBar.default;
+  }
+});
+Object.defineProperty(exports, "AppStatus", {
+  enumerable: true,
+  get: function () {
+    return _AppStatus.default;
+  }
+});
+Object.defineProperty(exports, "Application", {
+  enumerable: true,
+  get: function () {
+    return _Application.default;
+  }
+});
+Object.defineProperty(exports, "ApplicationLayout", {
+  enumerable: true,
+  get: function () {
+    return _ApplicationLayout.default;
+  }
+});
 Object.defineProperty(exports, "ArticlePagination", {
   enumerable: true,
   get: function () {
@@ -345,6 +398,30 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "SideNavigation", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigation.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationItem.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationLink", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationLink.default;
+  }
+});
+Object.defineProperty(exports, "SideNavigationText", {
+  enumerable: true,
+  get: function () {
+    return _SideNavigationText.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -540,6 +617,13 @@ Object.defineProperty(exports, "useWindowFitment", {
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
 var _ArticlePagination = _interopRequireDefault(require("./components/ArticlePagination"));
+var _ApplicationLayout = _interopRequireDefault(require("./components/ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./components/ApplicationLayout/AppAside"));
+var _Application = _interopRequireDefault(require("./components/ApplicationLayout/Application"));
+var _AppMain = _interopRequireDefault(require("./components/ApplicationLayout/AppMain"));
+var _AppNavigation = _interopRequireDefault(require("./components/ApplicationLayout/AppNavigation"));
+var _AppNavigationBar = _interopRequireDefault(require("./components/ApplicationLayout/AppNavigationBar"));
+var _AppStatus = _interopRequireDefault(require("./components/ApplicationLayout/AppStatus"));
 var _Badge = _interopRequireDefault(require("./components/Badge"));
 var _Button = _interopRequireWildcard(require("./components/Button"));
 var _Card = _interopRequireDefault(require("./components/Card"));
@@ -588,6 +672,10 @@ var _Row = _interopRequireDefault(require("./components/Row"));
 var _SearchAndFilter = _interopRequireDefault(require("./components/SearchAndFilter"));
 var _SearchBox = _interopRequireDefault(require("./components/SearchBox"));
 var _Select = _interopRequireDefault(require("./components/Select"));
+var _SideNavigation = _interopRequireDefault(require("./components/SideNavigation"));
+var _SideNavigationItem = _interopRequireDefault(require("./components/SideNavigation/SideNavigationItem"));
+var _SideNavigationLink = _interopRequireDefault(require("./components/SideNavigation/SideNavigationLink"));
+var _SideNavigationText = _interopRequireDefault(require("./components/SideNavigation/SideNavigationText"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.57.0",
+  "version": "0.59.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "author": "Huw Wilkins <huw.wilkins@canonical.com>",
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
   "license": "LGPL-3.0",
   "files": [
     "dist/**/*.js",