@canonical/react-components 1.3.2 → 1.4.0

package/dist/components/ApplicationLayout/ApplicationLayout.d.ts

@@ -68,6 +68,10 @@ export type BaseProps<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefau
      * Classes to apply to the status area.
      */
     statusClassName?: string;
+    /**
+     * Id to apply to the main area. Used for the "Skip to main content" link.
+     */
+    mainId?: string;
 }, HTMLProps<HTMLDivElement>>;
 export type Props<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement> = BaseProps<NI, PL> & ExclusiveProps<{
     navItems?: SideNavigationProps<NI>["items"];
@@ -85,5 +89,5 @@ export type Props<NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultEl
  * specific structure and states to function correctly so there will be a
  * trade-off when using the sub-components directly.
  */
-declare const ApplicationLayout: <NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement>({ aside, children, dark, logo, mainClassName, menuCollapsed, menuPinned, navigationBarClassName, navigationClassName, navItems, navLinkComponent, onCollapseMenu, onPinMenu, sideNavigation, status, statusClassName, ...props }: Props<NI, PL>) => React.JSX.Element;
+declare const ApplicationLayout: <NI = SideNavigationLinkDefaultElement, PL = PanelLogoDefaultElement>({ aside, children, dark, logo, mainClassName, menuCollapsed, menuPinned, navigationBarClassName, navigationClassName, navItems, navLinkComponent, onCollapseMenu, onPinMenu, sideNavigation, status, statusClassName, mainId, ...props }: Props<NI, PL>) => React.JSX.Element;
 export default ApplicationLayout;

package/dist/components/ApplicationLayout/ApplicationLayout.js

@@ -15,6 +15,7 @@ var _AppStatus = _interopRequireDefault(require("./AppStatus"));
 var _Application = _interopRequireDefault(require("./Application"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _SkipLink = _interopRequireDefault(require("../SkipLink"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,6 +48,7 @@ const ApplicationLayout = _ref => {
     sideNavigation,
     status,
     statusClassName,
+    mainId = "main-content",
     ...props
   } = _ref;
   const [internalMenuPinned, setInternalMenuPinned] = (0, _react.useState)(false);
@@ -55,7 +57,9 @@ const ApplicationLayout = _ref => {
   const setMenuPinned = onPinMenu !== null && onPinMenu !== void 0 ? onPinMenu : setInternalMenuPinned;
   const menuIsCollapsed = menuCollapsed !== null && menuCollapsed !== void 0 ? menuCollapsed : internalMenuCollapsed;
   const setMenuCollapsed = onCollapseMenu !== null && onCollapseMenu !== void 0 ? onCollapseMenu : setInternalMenuCollapsed;
-  return /*#__PURE__*/_react.default.createElement(_Application.default, props, (navItems || sideNavigation) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, {
+  return /*#__PURE__*/_react.default.createElement(_Application.default, props, /*#__PURE__*/_react.default.createElement(_SkipLink.default, {
+    mainId: mainId
+  }), (navItems || sideNavigation) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppNavigationBar.default, {
     className: navigationBarClassName
   }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
     dark: dark,
@@ -110,6 +114,7 @@ const ApplicationLayout = _ref => {
     items: navItems,
     linkComponent: navLinkComponent
   }) : sideNavigation))), /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+    id: mainId,
     className: mainClassName
   }, children), aside, status && /*#__PURE__*/_react.default.createElement(_AppStatus.default, {
     className: statusClassName

package/dist/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,12 @@
+import { HTMLProps } from "react";
+export type Props = {
+    /**
+     * Id of the main content area to skip to.
+     */
+    mainId?: string;
+} & HTMLProps<HTMLAnchorElement>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
+ */
+export declare const SkipLink: ({ mainId }: Props) => JSX.Element;
+export default SkipLink;

package/dist/components/SkipLink/SkipLink.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SkipLink = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Skip link](https://vanillaframework.io/docs/patterns/links#skip-link) component.
+ */
+const SkipLink = _ref => {
+  let {
+    mainId = "main-content"
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    className: "p-link--skip",
+    href: "#".concat(mainId)
+  }, "Skip to main content");
+};
+exports.SkipLink = SkipLink;
+SkipLink.propTypes = {
+  mainId: _propTypes.default.string
+};
+var _default = exports.default = SkipLink;

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

@@ -0,0 +1,2 @@
+export { default } from "./SkipLink";
+export type { Props as SkipLinkProps } from "./SkipLink";

package/dist/components/SkipLink/index.js

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

package/dist/index.d.ts

@@ -49,6 +49,7 @@ 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 SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
@@ -112,6 +113,7 @@ 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 { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
 export type { StatusLabelProps } from "./components/StatusLabel";

package/dist/index.js

@@ -64,6 +64,7 @@ var _exportNames = {
   SideNavigationItem: true,
   SideNavigationLink: true,
   SideNavigationText: true,
+  SkipLink: true,
   Slider: true,
   Switch: true,
   Spinner: true,
@@ -423,6 +424,12 @@ Object.defineProperty(exports, "SideNavigationText", {
     return _SideNavigationText.default;
   }
 });
+Object.defineProperty(exports, "SkipLink", {
+  enumerable: true,
+  get: function () {
+    return _SkipLink.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -683,6 +690,7 @@ var _SideNavigation = _interopRequireDefault(require("./components/SideNavigatio
 var _SideNavigationItem = _interopRequireDefault(require("./components/SideNavigation/SideNavigationItem"));
 var _SideNavigationLink = _interopRequireDefault(require("./components/SideNavigation/SideNavigationLink"));
 var _SideNavigationText = _interopRequireDefault(require("./components/SideNavigation/SideNavigationText"));
+var _SkipLink = _interopRequireDefault(require("./components/SkipLink"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {