Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@hig/side-nav

Package Overview
Dependencies
Maintainers
5
Versions
245
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hig/side-nav - npm Package Compare versions

Comparing version 0.1.0-alpha.4e1d8727 to 0.1.0-alpha.57ad3f84

1382

build/index.es.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon, { names, sizes } from '@hig/icon';
import { ThemeContext } from '@hig/themes';
import IconButton, { types } from '@hig/icon-button';
import SkeletonItem from '@hig/skeleton-item';
import { ThemeContext } from '@hig/themes';

@@ -61,4 +64,2 @@ function createCommonjsModule(fn, module) {

var _extends = Object.assign || 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; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

@@ -72,3 +73,1228 @@

var skeletonItemStyles = [{
/** @todo Consider replacing with an IconButton */
var CollapseButton = function (_Component) {
_inherits(CollapseButton, _Component);
function CollapseButton() {
_classCallCheck(this, CollapseButton);
return _possibleConstructorReturn(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
}
_createClass(CollapseButton, [{
key: "render",
value: function render() {
var _props = this.props,
minimized = _props.minimized,
onClick = _props.onClick;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__module__collapse-button", {
"hig__side-nav__module__collapse-button--collapsed": minimized
});
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return (
/** @todo replace with a semantic HTML tag */
React.createElement(
"div",
{
className: classes(themeClass),
onClick: onClick,
role: "button",
tabIndex: 0
},
React.createElement(Icon, { name: names.CARET, size: sizes.PX_24 })
)
);
}
);
}
}]);
return CollapseButton;
}(Component);
CollapseButton.propTypes = {
/** Presents the icon in a minimized state: caret pointing right */
minimized: PropTypes.bool,
/** Called when element is clicked */
onClick: PropTypes.func
};
CollapseButton.defaultProps = {
onClick: function onClick() {},
minimized: false
};
CollapseButton.__docgenInfo = {
"description": "@todo Consider replacing with an IconButton",
"displayName": "CollapseButton",
"props": {
"minimized": {
"type": {
"name": "bool"
},
"required": false,
"description": "Presents the icon in a minimized state: caret pointing right",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when element is clicked",
"defaultValue": {
"value": "() => {}",
"computed": false
}
}
}
};
var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Group = function (_Component) {
_inherits$1(Group, _Component);
function Group() {
_classCallCheck$1(this, Group);
return _possibleConstructorReturn$1(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
}
_createClass$1(Group, [{
key: "render",
value: function render() {
var _this2 = this;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__group");
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return React.createElement(
"section",
{ className: classes(themeClass) },
_this2.props.children
);
}
);
}
}]);
return Group;
}(Component);
Group.propTypes = {
/** One or more SideNav Modules */
children: PropTypes.node
};
Group.__docgenInfo = {
"description": "",
"displayName": "Group",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "One or more SideNav Modules"
}
}
};
var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ExternalLinkIcon = function (_Component) {
_inherits$2(ExternalLinkIcon, _Component);
function ExternalLinkIcon() {
_classCallCheck$2(this, ExternalLinkIcon);
return _possibleConstructorReturn$2(this, (ExternalLinkIcon.__proto__ || Object.getPrototypeOf(ExternalLinkIcon)).apply(this, arguments));
}
_createClass$2(ExternalLinkIcon, [{
key: "render",
value: function render() {
return React.createElement(Icon, { name: names.EXTERNAL_LINK, size: this.props.size });
}
}]);
return ExternalLinkIcon;
}(Component);
ExternalLinkIcon.propTypes = {
/** Size of the icon */
size: PropTypes.oneOf(Object.values(sizes))
};
ExternalLinkIcon.defaultProps = {
size: sizes.PX_24
};
ExternalLinkIcon.__docgenInfo = {
"description": "",
"displayName": "ExternalLinkIcon",
"props": {
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "Object.values(iconSizes)"
},
"required": false,
"description": "Size of the icon",
"defaultValue": {
"value": "iconSizes.PX_24",
"computed": true
}
}
}
};
var _createClass$3 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$3(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/** @todo Consider extending TextLink */
var Link = function (_Component) {
_inherits$3(Link, _Component);
function Link() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$3(this, Link);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$3(this, (_ref = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
}, _temp), _possibleConstructorReturn$3(_this, _ret);
}
_createClass$3(Link, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
title = _props.title,
link = _props.link,
onClick = _props.onClick,
onMouseOver = _props.onMouseOver,
target = _props.target;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__link");
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React.createElement(
"a",
{
className: classes(themeClass),
href: link,
target: target,
onClick: onClick,
onMouseOver: onMouseOver
},
title,
_this2._renderExternalLinkIcon()
);
}
);
}
}]);
return Link;
}(Component);
Link.propTypes = {
/** URL to navigate to when clicking this link */
link: PropTypes.string,
/** Called when link is clicked */
onClick: PropTypes.func,
/** Called when hovering over the link */
onMouseOver: PropTypes.func,
/** Corresponds to the anchor tag's target */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
/** Link text */
title: PropTypes.string
};
Link.defaultProps = {
onClick: function onClick() {},
onMouseOver: function onMouseOver() {}
};
Link.__docgenInfo = {
"description": "@todo Consider extending TextLink",
"displayName": "Link",
"props": {
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this link"
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when link is clicked",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the link",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Corresponds to the anchor tag's target"
},
"title": {
"type": {
"name": "string"
},
"required": false,
"description": "Link text"
}
}
};
var _createClass$4 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$4(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$4(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Module = function (_Component) {
_inherits$4(Module, _Component);
function Module() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$4(this, Module);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$4(this, (_ref = Module.__proto__ || Object.getPrototypeOf(Module)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, null);
}, _temp), _possibleConstructorReturn$4(_this, _ret);
}
_createClass$4(Module, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
children = _props.children,
icon = _props.icon,
link = _props.link,
title = _props.title,
target = _props.target,
active = _props.active,
activeChildren = _props.activeChildren,
onClickTitle = _props.onClickTitle,
onMouseOver = _props.onMouseOver;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__module");
};
var linkClasses = function linkClasses(themeClass) {
return classnames(themeClass, "hig__side-nav__module__link", {
"hig__side-nav__module__link--active": active,
"hig__side-nav__module__link--active-children": activeChildren
});
};
var submodulesClasses = classnames("hig__side-nav__module__submodules", {
"hig__side-nav__module__submodules--no-icon": !icon
});
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React.createElement(
"div",
{ className: classes(themeClass), onMouseOver: onMouseOver },
React.createElement(
"div",
{ className: "hig__side-nav__module__row" },
React.createElement(
"a",
{
className: linkClasses(themeClass),
href: link,
onClick: onClickTitle,
target: target
},
React.createElement(
"div",
{ className: "hig__side-nav__module__link__icon" },
icon
),
React.createElement(
"div",
{ className: "hig__side-nav__module__link__title" },
title
),
React.createElement(
"div",
{ className: "hig__side-nav__module__link__external-link-icon" },
_this2._renderExternalLinkIcon()
)
),
_this2.props.children && React.createElement(CollapseButton, {
minimized: _this2.props.minimized,
onClick: _this2.props.onClickCollapseButton
})
),
!_this2.props.minimized && React.createElement(
"div",
{ className: submodulesClasses },
children
)
);
}
);
}
}]);
return Module;
}(Component);
Module.propTypes = {
/** Indicates this module is currently active */
active: PropTypes.bool,
/** Indicates a nested submodule is currently active */
activeChildren: PropTypes.bool,
/** Zero or more SideNav submodules */
children: PropTypes.node,
/** An instance of @hig/icon */
icon: PropTypes.node,
/** URL to navigate to when clicking this module */
link: PropTypes.string,
/** Indicates whether to display nested submodules */
minimized: PropTypes.bool,
/** Called when clicking on the collapse button */
onClickCollapseButton: PropTypes.func,
/** Called when clicking on the title */
onClickTitle: PropTypes.func,
/** Called when hovering over the title */
onMouseOver: PropTypes.func,
/** A label for rendering this Module */
title: PropTypes.string.isRequired,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
};
Module.defaultProps = {
minimized: false,
onClickCollapseButton: function onClickCollapseButton() {},
onClickTitle: function onClickTitle() {},
onMouseOver: function onMouseOver() {},
target: "_self"
};
Module.__docgenInfo = {
"description": "",
"displayName": "Module",
"props": {
"active": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates this module is currently active"
},
"activeChildren": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates a nested submodule is currently active"
},
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Zero or more SideNav submodules"
},
"icon": {
"type": {
"name": "node"
},
"required": false,
"description": "An instance of @hig/icon"
},
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this module"
},
"minimized": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates whether to display nested submodules",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClickCollapseButton": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the collapse button",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"onClickTitle": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the title",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the title",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"title": {
"type": {
"name": "string"
},
"required": true,
"description": "A label for rendering this Module"
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Anchor target. Applicable only if link is provided",
"defaultValue": {
"value": "\"_self\"",
"computed": false
}
}
}
};
var _extends = Object.assign || 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; };
var _createClass$5 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$5(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$5(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Module$1 = function (_Component) {
_inherits$5(Module$$1, _Component);
function Module$$1(props) {
_classCallCheck$5(this, Module$$1);
var _this = _possibleConstructorReturn$5(this, (Module$$1.__proto__ || Object.getPrototypeOf(Module$$1)).call(this, props));
_this.handleModuleMinimizeToggle = function (e) {
return _this.setState({ minimized: !_this.state.minimized }, function () {
return _this.props.onClickCollapseButton && _this.props.onClickCollapseButton(e);
});
};
_this.renderPresenter = function (presenterBag) {
var presenterProps = _extends({}, _this.props, presenterBag);
var children = presenterProps.children,
otherProps = _objectWithoutProperties(presenterProps, ["children"]);
return React.createElement(
Module,
otherProps,
children
);
};
_this.state = {
minimized: props.minimized
};
return _this;
}
_createClass$5(Module$$1, [{
key: "createPresenterBag",
/**
* @returns {PresenterBag}
*/
value: function createPresenterBag() {
var minimized = this.state.minimized;
return {
minimized: minimized,
onClickCollapseButton: this.handleModuleMinimizeToggle,
onClickTitle: this.handleModuleMinimizeToggle
};
}
/**
* @param {PresenterBag}
*/
}, {
key: "render",
value: function render() {
var presenterBag = this.createPresenterBag();
var renderPresenter = this.renderPresenter;
return renderPresenter(presenterBag);
}
}]);
return Module$$1;
}(Component);
Module$1.propTypes = {
/** Indicates this module is currently active */
active: PropTypes.bool,
/** Indicates a nested submodule is currently active */
activeChildren: PropTypes.bool,
/** Zero or more SideNav submodules */
children: PropTypes.node,
/** An instance of @hig/icon */
icon: PropTypes.node,
/** URL to navigate to when clicking this module */
link: PropTypes.string,
/** Indicates whether to display nested submodules */
minimized: PropTypes.bool,
/** Called when clicking on the collapse button */
onClickCollapseButton: PropTypes.func,
/** Called when clicking on the title */
onClickTitle: PropTypes.func,
/** Called when hovering over the title */
onMouseOver: PropTypes.func,
/** A label for rendering this Module */
title: PropTypes.string.isRequired,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
};
Module$1.defaultProps = {
minimized: false
};
Module$1.__docgenInfo = {
"description": "",
"displayName": "Module",
"props": {
"active": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates this module is currently active"
},
"activeChildren": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates a nested submodule is currently active"
},
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Zero or more SideNav submodules"
},
"icon": {
"type": {
"name": "node"
},
"required": false,
"description": "An instance of @hig/icon"
},
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this module"
},
"minimized": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates whether to display nested submodules",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClickCollapseButton": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the collapse button"
},
"onClickTitle": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the title"
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the title"
},
"title": {
"type": {
"name": "string"
},
"required": true,
"description": "A label for rendering this Module"
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Anchor target. Applicable only if link is provided"
}
}
};
var _createClass$6 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$6(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$6(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Submodule = function (_Component) {
_inherits$6(Submodule, _Component);
function Submodule() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$6(this, Submodule);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$6(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
}, _temp), _possibleConstructorReturn$6(_this, _ret);
}
_createClass$6(Submodule, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
active = _props.active,
title = _props.title,
link = _props.link,
onClick = _props.onClick,
onMouseOver = _props.onMouseOver,
target = _props.target;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__submodule", {
"hig__side-nav__submodule--active": active
});
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React.createElement(
"a",
{
className: classes(themeClass),
href: link,
target: target,
onClick: onClick,
onMouseOver: onMouseOver
},
title,
_this2._renderExternalLinkIcon()
);
}
);
}
}]);
return Submodule;
}(Component);
Submodule.propTypes = {
/** Indicates this submodule is currently active */
active: PropTypes.bool,
/** URL to navigate to when clicking this submodule */
link: PropTypes.string,
/** Called when clicking on the submodule */
onClick: PropTypes.func,
/** Called when hovering over the submodule */
onMouseOver: PropTypes.func,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
/** Text to render */
title: PropTypes.string
};
Submodule.__docgenInfo = {
"description": "",
"displayName": "Submodule",
"props": {
"active": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates this submodule is currently active"
},
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this submodule"
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the submodule"
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the submodule"
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Anchor target. Applicable only if link is provided"
},
"title": {
"type": {
"name": "string"
},
"required": false,
"description": "Text to render"
}
}
};
var _createClass$7 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$7(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$7(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var SideNav = function (_Component) {
_inherits$7(SideNav, _Component);
function SideNav() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$7(this, SideNav);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
var _this$props = _this.props,
headerLabel = _this$props.headerLabel,
headerLink = _this$props.headerLink,
superHeaderLabel = _this$props.superHeaderLabel,
superHeaderLink = _this$props.superHeaderLink;
if (!(superHeaderLabel || headerLabel)) {
return null;
}
return React.createElement(
"div",
{ className: "hig__side-nav__headers" },
superHeaderLabel && React.createElement(
"h3",
{ className: "hig__side-nav__super-header" },
React.createElement(
"a",
{
className: "hig__side-nav__super-header-link",
href: superHeaderLink
},
superHeaderLabel
)
),
headerLabel && React.createElement(
"h4",
{ className: "hig__side-nav__header" },
React.createElement(
"a",
{ className: "hig__side-nav__header-link", href: headerLink },
headerLabel
)
)
);
}, _temp), _possibleConstructorReturn$7(_this, _ret);
}
_createClass$7(SideNav, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
children = _props.children,
copyright = _props.copyright,
groups = _props.groups,
links = _props.links,
onMinimize = _props.onMinimize,
showMinimizeButton = _props.showMinimizeButton;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav");
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React.createElement(
"nav",
{ className: classes(themeClass) },
React.createElement(
"div",
{ className: "hig__side-nav__overflow" },
_this2._renderHeaders(),
groups && React.createElement(
"div",
{ className: "hig__side-nav__groups" },
groups
),
children && React.createElement(
"div",
{ className: "hig__side-nav__slot" },
children
),
links && React.createElement(
"div",
{ className: "hig__side-nav__links" },
links
),
copyright && React.createElement(
"div",
{ className: "hig__side-nav__copyright" },
copyright
)
),
showMinimizeButton && React.createElement(
"div",
{ className: "hig__side-nav__minimize" },
React.createElement(IconButton, {
type: types.TRANSPARENT,
name: names.BACK,
title: "Minimize",
"aria-label": "Minimize",
onClick: onMinimize
})
)
);
}
);
}
}]);
return SideNav;
}(Component);
SideNav.propTypes = {
/** Additional content to include below navigation items */
children: PropTypes.node,
/** Copyright text to include */
copyright: PropTypes.string,
/** 0 or more SideNav Groups */
groups: PropTypes.node,
/** Subtitle at the top of the SideNav */
headerLabel: PropTypes.string,
/** An href for the SideNav Subtitle */
headerLink: PropTypes.string,
/** 0 or more SideNav Links */
links: PropTypes.node,
/** Called when minimize button is clicked */
onMinimize: PropTypes.func,
/** Renders a button to minimize the SideNav */
showMinimizeButton: PropTypes.bool,
/** Title at the top of the SideNav */
superHeaderLabel: PropTypes.string,
/** An href for the SideNav Title */
superHeaderLink: PropTypes.string
};
SideNav.defaultProps = {
onMinimize: function onMinimize() {},
showMinimizeButton: false
};
SideNav.__docgenInfo = {
"description": "",
"displayName": "SideNav",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Additional content to include below navigation items"
},
"copyright": {
"type": {
"name": "string"
},
"required": false,
"description": "Copyright text to include"
},
"groups": {
"type": {
"name": "node"
},
"required": false,
"description": "0 or more SideNav Groups"
},
"headerLabel": {
"type": {
"name": "string"
},
"required": false,
"description": "Subtitle at the top of the SideNav"
},
"headerLink": {
"type": {
"name": "string"
},
"required": false,
"description": "An href for the SideNav Subtitle"
},
"links": {
"type": {
"name": "node"
},
"required": false,
"description": "0 or more SideNav Links"
},
"onMinimize": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when minimize button is clicked",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"showMinimizeButton": {
"type": {
"name": "bool"
},
"required": false,
"description": "Renders a button to minimize the SideNav",
"defaultValue": {
"value": "false",
"computed": false
}
},
"superHeaderLabel": {
"type": {
"name": "string"
},
"required": false,
"description": "Title at the top of the SideNav"
},
"superHeaderLink": {
"type": {
"name": "string"
},
"required": false,
"description": "An href for the SideNav Title"
}
}
};
var _extends$1 = Object.assign || 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; };
var _createClass$8 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$8(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$8(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var skeletonItemStyles = Object.freeze([{
maxWidth: "180px",

@@ -99,14 +1325,14 @@ marginBottom: "48px"

maxWidth: "124px"
}];
}]);
var SideNavSkeleton = function (_Component) {
_inherits(SideNavSkeleton, _Component);
_inherits$8(SideNavSkeleton, _Component);
function SideNavSkeleton() {
_classCallCheck(this, SideNavSkeleton);
_classCallCheck$8(this, SideNavSkeleton);
return _possibleConstructorReturn(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
return _possibleConstructorReturn$8(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
}
_createClass(SideNavSkeleton, [{
_createClass$8(SideNavSkeleton, [{
key: "render",

@@ -123,3 +1349,6 @@ value: function render() {

skeletonItemStyles.map(function (style, index) {
return React.createElement(SkeletonItem, _extends({ key: index }, style));
return (
// eslint-disable-next-line react/no-array-index-key
React.createElement(SkeletonItem, _extends$1({ key: index }, style))
);
})

@@ -139,2 +1368,133 @@ );

export { SideNavSkeleton };
var _createClass$9 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$9(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$9(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Docked = function (_Component) {
_inherits$9(Docked, _Component);
function Docked() {
_classCallCheck$9(this, Docked);
return _possibleConstructorReturn$9(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
}
_createClass$9(Docked, [{
key: "render",
value: function render() {
var _this2 = this;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav-container--docked");
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return React.createElement(
"div",
{ className: classes(themeClass) },
_this2.props.children
);
}
);
}
}]);
return Docked;
}(Component);
Docked.propTypes = {
/** A SideNav element */
children: PropTypes.node
};
Docked.__docgenInfo = {
"description": "",
"displayName": "Docked",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "A SideNav element"
}
}
};
var _createClass$10 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$10(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$10(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var BelowTopNav = function (_Component) {
_inherits$10(BelowTopNav, _Component);
function BelowTopNav() {
_classCallCheck$10(this, BelowTopNav);
return _possibleConstructorReturn$10(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
}
_createClass$10(BelowTopNav, [{
key: "render",
value: function render() {
var _this2 = this;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav-container--below-top-nav");
};
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return React.createElement(
"div",
{ className: classes(themeClass) },
_this2.props.children
);
}
);
}
}]);
return BelowTopNav;
}(Component);
BelowTopNav.propTypes = {
/** A SideNav element */
children: PropTypes.node
};
BelowTopNav.__docgenInfo = {
"description": "",
"displayName": "BelowTopNav",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "A SideNav element"
}
}
};
SideNav.CollapseButton = CollapseButton;
SideNav.Group = Group;
SideNav.Link = Link;
SideNav.Module = Module$1;
SideNav.Submodule = Submodule;
export default SideNav;
export { SideNavSkeleton, Docked, BelowTopNav };

1384

build/index.js

@@ -9,4 +9,9 @@ 'use strict';

var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var Icon = require('@hig/icon');
var Icon__default = _interopDefault(Icon);
var themes = require('@hig/themes');
var IconButton = require('@hig/icon-button');
var IconButton__default = _interopDefault(IconButton);
var SkeletonItem = _interopDefault(require('@hig/skeleton-item'));
var themes = require('@hig/themes');

@@ -69,4 +74,2 @@ function createCommonjsModule(fn, module) {

var _extends = Object.assign || 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; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

@@ -80,3 +83,1228 @@

var skeletonItemStyles = [{
/** @todo Consider replacing with an IconButton */
var CollapseButton = function (_Component) {
_inherits(CollapseButton, _Component);
function CollapseButton() {
_classCallCheck(this, CollapseButton);
return _possibleConstructorReturn(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
}
_createClass(CollapseButton, [{
key: "render",
value: function render() {
var _props = this.props,
minimized = _props.minimized,
onClick = _props.onClick;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__module__collapse-button", {
"hig__side-nav__module__collapse-button--collapsed": minimized
});
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return (
/** @todo replace with a semantic HTML tag */
React__default.createElement(
"div",
{
className: classes(themeClass),
onClick: onClick,
role: "button",
tabIndex: 0
},
React__default.createElement(Icon__default, { name: Icon.names.CARET, size: Icon.sizes.PX_24 })
)
);
}
);
}
}]);
return CollapseButton;
}(React.Component);
CollapseButton.propTypes = {
/** Presents the icon in a minimized state: caret pointing right */
minimized: PropTypes.bool,
/** Called when element is clicked */
onClick: PropTypes.func
};
CollapseButton.defaultProps = {
onClick: function onClick() {},
minimized: false
};
CollapseButton.__docgenInfo = {
"description": "@todo Consider replacing with an IconButton",
"displayName": "CollapseButton",
"props": {
"minimized": {
"type": {
"name": "bool"
},
"required": false,
"description": "Presents the icon in a minimized state: caret pointing right",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when element is clicked",
"defaultValue": {
"value": "() => {}",
"computed": false
}
}
}
};
var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Group = function (_Component) {
_inherits$1(Group, _Component);
function Group() {
_classCallCheck$1(this, Group);
return _possibleConstructorReturn$1(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
}
_createClass$1(Group, [{
key: "render",
value: function render() {
var _this2 = this;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__group");
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return React__default.createElement(
"section",
{ className: classes(themeClass) },
_this2.props.children
);
}
);
}
}]);
return Group;
}(React.Component);
Group.propTypes = {
/** One or more SideNav Modules */
children: PropTypes.node
};
Group.__docgenInfo = {
"description": "",
"displayName": "Group",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "One or more SideNav Modules"
}
}
};
var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ExternalLinkIcon = function (_Component) {
_inherits$2(ExternalLinkIcon, _Component);
function ExternalLinkIcon() {
_classCallCheck$2(this, ExternalLinkIcon);
return _possibleConstructorReturn$2(this, (ExternalLinkIcon.__proto__ || Object.getPrototypeOf(ExternalLinkIcon)).apply(this, arguments));
}
_createClass$2(ExternalLinkIcon, [{
key: "render",
value: function render() {
return React__default.createElement(Icon__default, { name: Icon.names.EXTERNAL_LINK, size: this.props.size });
}
}]);
return ExternalLinkIcon;
}(React.Component);
ExternalLinkIcon.propTypes = {
/** Size of the icon */
size: PropTypes.oneOf(Object.values(Icon.sizes))
};
ExternalLinkIcon.defaultProps = {
size: Icon.sizes.PX_24
};
ExternalLinkIcon.__docgenInfo = {
"description": "",
"displayName": "ExternalLinkIcon",
"props": {
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "Object.values(iconSizes)"
},
"required": false,
"description": "Size of the icon",
"defaultValue": {
"value": "iconSizes.PX_24",
"computed": true
}
}
}
};
var _createClass$3 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$3(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/** @todo Consider extending TextLink */
var Link = function (_Component) {
_inherits$3(Link, _Component);
function Link() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$3(this, Link);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$3(this, (_ref = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, { size: Icon.sizes.PX_16 });
}, _temp), _possibleConstructorReturn$3(_this, _ret);
}
_createClass$3(Link, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
title = _props.title,
link = _props.link,
onClick = _props.onClick,
onMouseOver = _props.onMouseOver,
target = _props.target;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__link");
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React__default.createElement(
"a",
{
className: classes(themeClass),
href: link,
target: target,
onClick: onClick,
onMouseOver: onMouseOver
},
title,
_this2._renderExternalLinkIcon()
);
}
);
}
}]);
return Link;
}(React.Component);
Link.propTypes = {
/** URL to navigate to when clicking this link */
link: PropTypes.string,
/** Called when link is clicked */
onClick: PropTypes.func,
/** Called when hovering over the link */
onMouseOver: PropTypes.func,
/** Corresponds to the anchor tag's target */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
/** Link text */
title: PropTypes.string
};
Link.defaultProps = {
onClick: function onClick() {},
onMouseOver: function onMouseOver() {}
};
Link.__docgenInfo = {
"description": "@todo Consider extending TextLink",
"displayName": "Link",
"props": {
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this link"
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when link is clicked",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the link",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Corresponds to the anchor tag's target"
},
"title": {
"type": {
"name": "string"
},
"required": false,
"description": "Link text"
}
}
};
var _createClass$4 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$4(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$4(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Module = function (_Component) {
_inherits$4(Module, _Component);
function Module() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$4(this, Module);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$4(this, (_ref = Module.__proto__ || Object.getPrototypeOf(Module)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, null);
}, _temp), _possibleConstructorReturn$4(_this, _ret);
}
_createClass$4(Module, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
children = _props.children,
icon = _props.icon,
link = _props.link,
title = _props.title,
target = _props.target,
active = _props.active,
activeChildren = _props.activeChildren,
onClickTitle = _props.onClickTitle,
onMouseOver = _props.onMouseOver;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__module");
};
var linkClasses = function linkClasses(themeClass) {
return classnames(themeClass, "hig__side-nav__module__link", {
"hig__side-nav__module__link--active": active,
"hig__side-nav__module__link--active-children": activeChildren
});
};
var submodulesClasses = classnames("hig__side-nav__module__submodules", {
"hig__side-nav__module__submodules--no-icon": !icon
});
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React__default.createElement(
"div",
{ className: classes(themeClass), onMouseOver: onMouseOver },
React__default.createElement(
"div",
{ className: "hig__side-nav__module__row" },
React__default.createElement(
"a",
{
className: linkClasses(themeClass),
href: link,
onClick: onClickTitle,
target: target
},
React__default.createElement(
"div",
{ className: "hig__side-nav__module__link__icon" },
icon
),
React__default.createElement(
"div",
{ className: "hig__side-nav__module__link__title" },
title
),
React__default.createElement(
"div",
{ className: "hig__side-nav__module__link__external-link-icon" },
_this2._renderExternalLinkIcon()
)
),
_this2.props.children && React__default.createElement(CollapseButton, {
minimized: _this2.props.minimized,
onClick: _this2.props.onClickCollapseButton
})
),
!_this2.props.minimized && React__default.createElement(
"div",
{ className: submodulesClasses },
children
)
);
}
);
}
}]);
return Module;
}(React.Component);
Module.propTypes = {
/** Indicates this module is currently active */
active: PropTypes.bool,
/** Indicates a nested submodule is currently active */
activeChildren: PropTypes.bool,
/** Zero or more SideNav submodules */
children: PropTypes.node,
/** An instance of @hig/icon */
icon: PropTypes.node,
/** URL to navigate to when clicking this module */
link: PropTypes.string,
/** Indicates whether to display nested submodules */
minimized: PropTypes.bool,
/** Called when clicking on the collapse button */
onClickCollapseButton: PropTypes.func,
/** Called when clicking on the title */
onClickTitle: PropTypes.func,
/** Called when hovering over the title */
onMouseOver: PropTypes.func,
/** A label for rendering this Module */
title: PropTypes.string.isRequired,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
};
Module.defaultProps = {
minimized: false,
onClickCollapseButton: function onClickCollapseButton() {},
onClickTitle: function onClickTitle() {},
onMouseOver: function onMouseOver() {},
target: "_self"
};
Module.__docgenInfo = {
"description": "",
"displayName": "Module",
"props": {
"active": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates this module is currently active"
},
"activeChildren": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates a nested submodule is currently active"
},
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Zero or more SideNav submodules"
},
"icon": {
"type": {
"name": "node"
},
"required": false,
"description": "An instance of @hig/icon"
},
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this module"
},
"minimized": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates whether to display nested submodules",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClickCollapseButton": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the collapse button",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"onClickTitle": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the title",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the title",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"title": {
"type": {
"name": "string"
},
"required": true,
"description": "A label for rendering this Module"
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Anchor target. Applicable only if link is provided",
"defaultValue": {
"value": "\"_self\"",
"computed": false
}
}
}
};
var _extends = Object.assign || 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; };
var _createClass$5 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$5(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$5(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Module$1 = function (_Component) {
_inherits$5(Module$$1, _Component);
function Module$$1(props) {
_classCallCheck$5(this, Module$$1);
var _this = _possibleConstructorReturn$5(this, (Module$$1.__proto__ || Object.getPrototypeOf(Module$$1)).call(this, props));
_this.handleModuleMinimizeToggle = function (e) {
return _this.setState({ minimized: !_this.state.minimized }, function () {
return _this.props.onClickCollapseButton && _this.props.onClickCollapseButton(e);
});
};
_this.renderPresenter = function (presenterBag) {
var presenterProps = _extends({}, _this.props, presenterBag);
var children = presenterProps.children,
otherProps = _objectWithoutProperties(presenterProps, ["children"]);
return React__default.createElement(
Module,
otherProps,
children
);
};
_this.state = {
minimized: props.minimized
};
return _this;
}
_createClass$5(Module$$1, [{
key: "createPresenterBag",
/**
* @returns {PresenterBag}
*/
value: function createPresenterBag() {
var minimized = this.state.minimized;
return {
minimized: minimized,
onClickCollapseButton: this.handleModuleMinimizeToggle,
onClickTitle: this.handleModuleMinimizeToggle
};
}
/**
* @param {PresenterBag}
*/
}, {
key: "render",
value: function render() {
var presenterBag = this.createPresenterBag();
var renderPresenter = this.renderPresenter;
return renderPresenter(presenterBag);
}
}]);
return Module$$1;
}(React.Component);
Module$1.propTypes = {
/** Indicates this module is currently active */
active: PropTypes.bool,
/** Indicates a nested submodule is currently active */
activeChildren: PropTypes.bool,
/** Zero or more SideNav submodules */
children: PropTypes.node,
/** An instance of @hig/icon */
icon: PropTypes.node,
/** URL to navigate to when clicking this module */
link: PropTypes.string,
/** Indicates whether to display nested submodules */
minimized: PropTypes.bool,
/** Called when clicking on the collapse button */
onClickCollapseButton: PropTypes.func,
/** Called when clicking on the title */
onClickTitle: PropTypes.func,
/** Called when hovering over the title */
onMouseOver: PropTypes.func,
/** A label for rendering this Module */
title: PropTypes.string.isRequired,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"])
};
Module$1.defaultProps = {
minimized: false
};
Module$1.__docgenInfo = {
"description": "",
"displayName": "Module",
"props": {
"active": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates this module is currently active"
},
"activeChildren": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates a nested submodule is currently active"
},
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Zero or more SideNav submodules"
},
"icon": {
"type": {
"name": "node"
},
"required": false,
"description": "An instance of @hig/icon"
},
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this module"
},
"minimized": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates whether to display nested submodules",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onClickCollapseButton": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the collapse button"
},
"onClickTitle": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the title"
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the title"
},
"title": {
"type": {
"name": "string"
},
"required": true,
"description": "A label for rendering this Module"
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Anchor target. Applicable only if link is provided"
}
}
};
var _createClass$6 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$6(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$6(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Submodule = function (_Component) {
_inherits$6(Submodule, _Component);
function Submodule() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$6(this, Submodule);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$6(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, { size: Icon.sizes.PX_16 });
}, _temp), _possibleConstructorReturn$6(_this, _ret);
}
_createClass$6(Submodule, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
active = _props.active,
title = _props.title,
link = _props.link,
onClick = _props.onClick,
onMouseOver = _props.onMouseOver,
target = _props.target;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav__submodule", {
"hig__side-nav__submodule--active": active
});
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React__default.createElement(
"a",
{
className: classes(themeClass),
href: link,
target: target,
onClick: onClick,
onMouseOver: onMouseOver
},
title,
_this2._renderExternalLinkIcon()
);
}
);
}
}]);
return Submodule;
}(React.Component);
Submodule.propTypes = {
/** Indicates this submodule is currently active */
active: PropTypes.bool,
/** URL to navigate to when clicking this submodule */
link: PropTypes.string,
/** Called when clicking on the submodule */
onClick: PropTypes.func,
/** Called when hovering over the submodule */
onMouseOver: PropTypes.func,
/** Anchor target. Applicable only if link is provided */
target: PropTypes.oneOf(["_self", "_blank", "_parent", "_top"]),
/** Text to render */
title: PropTypes.string
};
Submodule.__docgenInfo = {
"description": "",
"displayName": "Submodule",
"props": {
"active": {
"type": {
"name": "bool"
},
"required": false,
"description": "Indicates this submodule is currently active"
},
"link": {
"type": {
"name": "string"
},
"required": false,
"description": "URL to navigate to when clicking this submodule"
},
"onClick": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when clicking on the submodule"
},
"onMouseOver": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when hovering over the submodule"
},
"target": {
"type": {
"name": "enum",
"value": [{
"value": "\"_self\"",
"computed": false
}, {
"value": "\"_blank\"",
"computed": false
}, {
"value": "\"_parent\"",
"computed": false
}, {
"value": "\"_top\"",
"computed": false
}]
},
"required": false,
"description": "Anchor target. Applicable only if link is provided"
},
"title": {
"type": {
"name": "string"
},
"required": false,
"description": "Text to render"
}
}
};
var _createClass$7 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$7(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$7(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var SideNav = function (_Component) {
_inherits$7(SideNav, _Component);
function SideNav() {
var _ref;
var _temp, _this, _ret;
_classCallCheck$7(this, SideNav);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
var _this$props = _this.props,
headerLabel = _this$props.headerLabel,
headerLink = _this$props.headerLink,
superHeaderLabel = _this$props.superHeaderLabel,
superHeaderLink = _this$props.superHeaderLink;
if (!(superHeaderLabel || headerLabel)) {
return null;
}
return React__default.createElement(
"div",
{ className: "hig__side-nav__headers" },
superHeaderLabel && React__default.createElement(
"h3",
{ className: "hig__side-nav__super-header" },
React__default.createElement(
"a",
{
className: "hig__side-nav__super-header-link",
href: superHeaderLink
},
superHeaderLabel
)
),
headerLabel && React__default.createElement(
"h4",
{ className: "hig__side-nav__header" },
React__default.createElement(
"a",
{ className: "hig__side-nav__header-link", href: headerLink },
headerLabel
)
)
);
}, _temp), _possibleConstructorReturn$7(_this, _ret);
}
_createClass$7(SideNav, [{
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
children = _props.children,
copyright = _props.copyright,
groups = _props.groups,
links = _props.links,
onMinimize = _props.onMinimize,
showMinimizeButton = _props.showMinimizeButton;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav");
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref2) {
var themeClass = _ref2.themeClass;
return React__default.createElement(
"nav",
{ className: classes(themeClass) },
React__default.createElement(
"div",
{ className: "hig__side-nav__overflow" },
_this2._renderHeaders(),
groups && React__default.createElement(
"div",
{ className: "hig__side-nav__groups" },
groups
),
children && React__default.createElement(
"div",
{ className: "hig__side-nav__slot" },
children
),
links && React__default.createElement(
"div",
{ className: "hig__side-nav__links" },
links
),
copyright && React__default.createElement(
"div",
{ className: "hig__side-nav__copyright" },
copyright
)
),
showMinimizeButton && React__default.createElement(
"div",
{ className: "hig__side-nav__minimize" },
React__default.createElement(IconButton__default, {
type: IconButton.types.TRANSPARENT,
name: Icon.names.BACK,
title: "Minimize",
"aria-label": "Minimize",
onClick: onMinimize
})
)
);
}
);
}
}]);
return SideNav;
}(React.Component);
SideNav.propTypes = {
/** Additional content to include below navigation items */
children: PropTypes.node,
/** Copyright text to include */
copyright: PropTypes.string,
/** 0 or more SideNav Groups */
groups: PropTypes.node,
/** Subtitle at the top of the SideNav */
headerLabel: PropTypes.string,
/** An href for the SideNav Subtitle */
headerLink: PropTypes.string,
/** 0 or more SideNav Links */
links: PropTypes.node,
/** Called when minimize button is clicked */
onMinimize: PropTypes.func,
/** Renders a button to minimize the SideNav */
showMinimizeButton: PropTypes.bool,
/** Title at the top of the SideNav */
superHeaderLabel: PropTypes.string,
/** An href for the SideNav Title */
superHeaderLink: PropTypes.string
};
SideNav.defaultProps = {
onMinimize: function onMinimize() {},
showMinimizeButton: false
};
SideNav.__docgenInfo = {
"description": "",
"displayName": "SideNav",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "Additional content to include below navigation items"
},
"copyright": {
"type": {
"name": "string"
},
"required": false,
"description": "Copyright text to include"
},
"groups": {
"type": {
"name": "node"
},
"required": false,
"description": "0 or more SideNav Groups"
},
"headerLabel": {
"type": {
"name": "string"
},
"required": false,
"description": "Subtitle at the top of the SideNav"
},
"headerLink": {
"type": {
"name": "string"
},
"required": false,
"description": "An href for the SideNav Subtitle"
},
"links": {
"type": {
"name": "node"
},
"required": false,
"description": "0 or more SideNav Links"
},
"onMinimize": {
"type": {
"name": "func"
},
"required": false,
"description": "Called when minimize button is clicked",
"defaultValue": {
"value": "() => {}",
"computed": false
}
},
"showMinimizeButton": {
"type": {
"name": "bool"
},
"required": false,
"description": "Renders a button to minimize the SideNav",
"defaultValue": {
"value": "false",
"computed": false
}
},
"superHeaderLabel": {
"type": {
"name": "string"
},
"required": false,
"description": "Title at the top of the SideNav"
},
"superHeaderLink": {
"type": {
"name": "string"
},
"required": false,
"description": "An href for the SideNav Title"
}
}
};
var _extends$1 = Object.assign || 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; };
var _createClass$8 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$8(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$8(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var skeletonItemStyles = Object.freeze([{
maxWidth: "180px",

@@ -107,14 +1335,14 @@ marginBottom: "48px"

maxWidth: "124px"
}];
}]);
var SideNavSkeleton = function (_Component) {
_inherits(SideNavSkeleton, _Component);
_inherits$8(SideNavSkeleton, _Component);
function SideNavSkeleton() {
_classCallCheck(this, SideNavSkeleton);
_classCallCheck$8(this, SideNavSkeleton);
return _possibleConstructorReturn(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
return _possibleConstructorReturn$8(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
}
_createClass(SideNavSkeleton, [{
_createClass$8(SideNavSkeleton, [{
key: "render",

@@ -131,3 +1359,6 @@ value: function render() {

skeletonItemStyles.map(function (style, index) {
return React__default.createElement(SkeletonItem, _extends({ key: index }, style));
return (
// eslint-disable-next-line react/no-array-index-key
React__default.createElement(SkeletonItem, _extends$1({ key: index }, style))
);
})

@@ -147,2 +1378,135 @@ );

var _createClass$9 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$9(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$9(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Docked = function (_Component) {
_inherits$9(Docked, _Component);
function Docked() {
_classCallCheck$9(this, Docked);
return _possibleConstructorReturn$9(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
}
_createClass$9(Docked, [{
key: "render",
value: function render() {
var _this2 = this;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav-container--docked");
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return React__default.createElement(
"div",
{ className: classes(themeClass) },
_this2.props.children
);
}
);
}
}]);
return Docked;
}(React.Component);
Docked.propTypes = {
/** A SideNav element */
children: PropTypes.node
};
Docked.__docgenInfo = {
"description": "",
"displayName": "Docked",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "A SideNav element"
}
}
};
var _createClass$10 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$10(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$10(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var BelowTopNav = function (_Component) {
_inherits$10(BelowTopNav, _Component);
function BelowTopNav() {
_classCallCheck$10(this, BelowTopNav);
return _possibleConstructorReturn$10(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
}
_createClass$10(BelowTopNav, [{
key: "render",
value: function render() {
var _this2 = this;
var classes = function classes(themeClass) {
return classnames(themeClass, "hig__side-nav-container--below-top-nav");
};
return React__default.createElement(
themes.ThemeContext.Consumer,
null,
function (_ref) {
var themeClass = _ref.themeClass;
return React__default.createElement(
"div",
{ className: classes(themeClass) },
_this2.props.children
);
}
);
}
}]);
return BelowTopNav;
}(React.Component);
BelowTopNav.propTypes = {
/** A SideNav element */
children: PropTypes.node
};
BelowTopNav.__docgenInfo = {
"description": "",
"displayName": "BelowTopNav",
"props": {
"children": {
"type": {
"name": "node"
},
"required": false,
"description": "A SideNav element"
}
}
};
SideNav.CollapseButton = CollapseButton;
SideNav.Group = Group;
SideNav.Link = Link;
SideNav.Module = Module$1;
SideNav.Submodule = Submodule;
exports.default = SideNav;
exports.SideNavSkeleton = SideNavSkeleton;
exports.Docked = Docked;
exports.BelowTopNav = BelowTopNav;

22

package.json
{
"name": "@hig/side-nav",
"version": "0.1.0-alpha.4e1d8727",
"version": "0.1.0-alpha.57ad3f84",
"description": "HIG SideNav components",

@@ -18,11 +18,11 @@ "author": "Autodesk Inc.",

"dependencies": {
"@hig/icon": "0.1.0-alpha.4e1d8727",
"@hig/icon-button": "0.1.0-alpha.4e1d8727",
"@hig/skeleton-item": "0.1.0-alpha.4e1d8727",
"@hig/themes": "0.1.0-alpha.4e1d8727"
"@hig/icon": "0.1.0-alpha.57ad3f84",
"@hig/icon-button": "0.1.0-alpha.57ad3f84",
"@hig/skeleton-item": "0.1.0-alpha.57ad3f84",
"@hig/themes": "0.1.0-alpha.57ad3f84"
},
"devDependencies": {
"@hig/babel-preset": "0.2.0-alpha.4e1d8727",
"@hig/scripts": "0.2.0-alpha.4e1d8727",
"@hig/styles": "0.1.0-alpha.4e1d8727"
"@hig/babel-preset": "0.2.0-alpha.57ad3f84",
"@hig/scripts": "0.2.0-alpha.57ad3f84",
"@hig/styles": "0.1.0-alpha.57ad3f84"
},

@@ -34,4 +34,8 @@ "peerDependencies": {

"scripts": {
"build": "hig-scripts-build"
"build": "hig-scripts-build",
"lint": "eslint src --ext .js,.jsx"
},
"eslintConfig": {
"extends": "@hig"
}
}
build/index.css

Sorry, the diff of this file is not supported yet

build/index.es.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc