@collectionspace/cspace-public-browser 1.5.1

package/lib/components/detail/InstitutionHoldingList.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntl = require("react-intl");
+var _FieldList = _interopRequireDefault(require("./FieldList"));
+var _ImageGalleryContainer = _interopRequireDefault(require("./ImageGalleryContainer"));
+var _PanelTitle = _interopRequireDefault(require("../layout/PanelTitle"));
+var _config = _interopRequireDefault(require("../../config"));
+var _InstitutionHoldingList = _interopRequireDefault(require("../../../styles/cspace/InstitutionHoldingList.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* global window */
+const messages = (0, _reactIntl.defineMessages)({
+  title: {
+    "id": "institutionHoldingList.title",
+    "defaultMessage": "Samples at {title}"
+  }
+});
+const propTypes = {
+  hits: _propTypes.default.arrayOf(_propTypes.default.shape({
+    _source: _propTypes.default.shape({
+      'collectionspace_core:uri': _propTypes.default.string
+    })
+  })),
+  institutionConfig: _propTypes.default.shape({
+    title: _propTypes.default.string
+  }).isRequired,
+  institutionId: _propTypes.default.string.isRequired,
+  isExpanded: _propTypes.default.bool,
+  isSelected: _propTypes.default.bool,
+  expandPanel: _propTypes.default.func,
+  referenceValue: _propTypes.default.string.isRequired,
+  togglePanel: _propTypes.default.func
+};
+const defaultProps = {
+  hits: [],
+  isExpanded: false,
+  isSelected: false,
+  expandPanel: () => undefined,
+  togglePanel: () => undefined
+};
+const renderResult = data => {
+  const {
+    'collectionspace_core:uri': uri
+  } = data;
+  return /*#__PURE__*/_react.default.createElement("li", {
+    key: uri
+  }, /*#__PURE__*/_react.default.createElement(_FieldList.default, {
+    config: _config.default.get('institutionHoldings').detailFields,
+    data: data
+  }));
+};
+class InstitutionHoldingList extends _react.Component {
+  constructor() {
+    super();
+    this.ref = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    const {
+      isSelected
+    } = this.props;
+    if (isSelected) {
+      this.focus();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      isSelected: prevIsSelected
+    } = prevProps;
+    const {
+      isSelected
+    } = this.props;
+    if (isSelected && !prevIsSelected) {
+      this.focus();
+    }
+  }
+  focus() {
+    const {
+      expandPanel
+    } = this.props;
+    const domNode = this.ref.current;
+    if (domNode) {
+      window.setTimeout(() => {
+        expandPanel();
+        domNode.scrollIntoView();
+      }, 0);
+    }
+  }
+  renderContent() {
+    const {
+      hits,
+      institutionId,
+      isExpanded,
+      referenceValue
+    } = this.props;
+    if (isExpanded) {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ImageGalleryContainer.default, {
+        institutionId: institutionId,
+        referenceValue: referenceValue
+      }), /*#__PURE__*/_react.default.createElement("ul", null, hits.map(hit => renderResult(hit._source))));
+    }
+    return null;
+  }
+  renderTitle() {
+    const {
+      hits,
+      institutionConfig,
+      isExpanded,
+      togglePanel
+    } = this.props;
+    const {
+      title
+    } = institutionConfig;
+    const formattedTitle = /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, messages.title, {
+      tagName: "h2",
+      values: {
+        title,
+        count: hits.length
+      }
+    }));
+    return /*#__PURE__*/_react.default.createElement(_PanelTitle.default, {
+      isExpanded: isExpanded,
+      title: formattedTitle,
+      onClick: togglePanel
+    });
+  }
+  render() {
+    const {
+      hits
+    } = this.props;
+    if (hits.length === 0) {
+      return null;
+    }
+    const {
+      institutionId,
+      isExpanded
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("section", {
+      className: isExpanded ? _InstitutionHoldingList.default.expanded : _InstitutionHoldingList.default.collapsed,
+      id: institutionId,
+      ref: this.ref
+    }, this.renderTitle(), this.renderContent());
+  }
+}
+exports.default = InstitutionHoldingList;
+InstitutionHoldingList.propTypes = propTypes;
+InstitutionHoldingList.defaultProps = defaultProps;

package/lib/components/detail/InstitutionHoldingListContainer.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _InstitutionHoldingList = _interopRequireDefault(require("./InstitutionHoldingList"));
+var _prefsActions = require("../../actions/prefsActions");
+var _reducers = require("../../reducers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const panelId = institutionId => `SampleList-${institutionId}`;
+const mapStateToProps = (state, ownProps) => ({
+  hits: (0, _reducers.getDetailInstitutionHits)(state, ownProps.institutionId),
+  isExpanded: (0, _reducers.isPanelExpanded)(state, panelId(ownProps.institutionId))
+});
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  expandPanel: () => dispatch((0, _prefsActions.expandPanel)(panelId(ownProps.institutionId))),
+  togglePanel: () => dispatch((0, _prefsActions.togglePanel)(panelId(ownProps.institutionId)))
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_InstitutionHoldingList.default);
+exports.default = _default;

package/lib/components/detail/InstitutionIndex.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InstitutionIndex;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _immutable = _interopRequireDefault(require("immutable"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _reactIntl = require("react-intl");
+var _config = _interopRequireDefault(require("../../config"));
+var _Link = _interopRequireDefault(require("../../../styles/cspace/Link.css"));
+var _InstitutionIndex = _interopRequireDefault(require("../../../styles/cspace/InstitutionIndex.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const messages = (0, _reactIntl.defineMessages)({
+  label: {
+    "id": "institutionIndex.label",
+    "defaultMessage": "Holdings at {title}"
+  }
+});
+const propTypes = {
+  holdingInstitutions: _propTypes.default.instanceOf(_immutable.default.Set).isRequired
+};
+function InstitutionIndex(props) {
+  const {
+    holdingInstitutions
+  } = props;
+  const institutions = _config.default.get('institutions');
+  const links = holdingInstitutions.map(institutionId => {
+    const title = (0, _get.default)(institutions, [institutionId, 'title']);
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: institutionId
+    }, /*#__PURE__*/_react.default.createElement("a", {
+      className: _Link.default.hash,
+      href: `#${institutionId}`
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , _extends({}, messages.label, {
+      values: {
+        title
+      }
+    }))));
+  });
+  if (links.size === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    className: _InstitutionIndex.default.common
+  }, /*#__PURE__*/_react.default.createElement("ul", null, links));
+}
+InstitutionIndex.propTypes = propTypes;

package/lib/components/detail/InstitutionIndexContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _InstitutionIndex = _interopRequireDefault(require("./InstitutionIndex"));
+var _reducers = require("../../reducers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mapStateToProps = state => ({
+  holdingInstitutions: (0, _reducers.getDetailHoldingInstitutions)(state)
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps)(_InstitutionIndex.default);
+exports.default = _default;

package/lib/components/detail/InstitutionSection.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InstitutionSection;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _immutable = _interopRequireDefault(require("immutable"));
+var _InstitutionHoldingListContainer = _interopRequireDefault(require("./InstitutionHoldingListContainer"));
+var _InstitutionSection = _interopRequireDefault(require("../../../styles/cspace/InstitutionSection.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  config: _propTypes.default.objectOf(_propTypes.default.object).isRequired,
+  holdingInstitutions: _propTypes.default.instanceOf(_immutable.default.Set).isRequired,
+  referenceValue: _propTypes.default.string.isRequired,
+  selectedInstitutionId: _propTypes.default.string
+};
+const defaultProps = {
+  selectedInstitutionId: undefined
+};
+function InstitutionSection(props) {
+  const {
+    config,
+    holdingInstitutions,
+    referenceValue,
+    selectedInstitutionId
+  } = props;
+  if (!holdingInstitutions || holdingInstitutions.size === 0) {
+    return null;
+  }
+  const institutions = holdingInstitutions.map(institutionId => /*#__PURE__*/_react.default.createElement(_InstitutionHoldingListContainer.default, {
+    institutionConfig: config[institutionId],
+    institutionId: institutionId,
+    isSelected: institutionId === selectedInstitutionId,
+    key: institutionId,
+    referenceValue: referenceValue
+  }));
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: _InstitutionSection.default.common
+  }, institutions);
+}
+InstitutionSection.propTypes = propTypes;
+InstitutionSection.defaultProps = defaultProps;

package/lib/components/detail/InstitutionSectionContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _InstitutionSection = _interopRequireDefault(require("./InstitutionSection"));
+var _reducers = require("../../reducers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mapStateToProps = state => ({
+  holdingInstitutions: (0, _reducers.getDetailHoldingInstitutions)(state)
+});
+var _default = (0, _reactRedux.connect)(mapStateToProps)(_InstitutionSection.default);
+exports.default = _default;

package/lib/components/layout/Fixed.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Fixed;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Fixed = _interopRequireDefault(require("../../../styles/cspace/Fixed.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)])
+};
+const defaultProps = {
+  children: undefined
+};
+function Fixed(props) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _Fixed.default.common
+  }, children);
+}
+Fixed.propTypes = propTypes;
+Fixed.defaultProps = defaultProps;

package/lib/components/layout/IconButton.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconButton;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntl = require("react-intl");
+var _IconButton = _interopRequireDefault(require("../../../styles/cspace/IconButton.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const propTypes = {
+  className: _propTypes.default.string,
+  labelMessage: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    defaultMessage: _propTypes.default.string.isRequired
+  }).isRequired,
+  onClick: _propTypes.default.func
+};
+const defaultProps = {
+  className: undefined,
+  onClick: undefined
+};
+function IconButton(props) {
+  const {
+    className,
+    labelMessage,
+    onClick
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames.default)(className, _IconButton.default.common),
+    type: "button",
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _extends({}, labelMessage, {
+    tagName: "span"
+  })));
+}
+IconButton.propTypes = propTypes;
+IconButton.defaultProps = defaultProps;

package/lib/components/layout/Panel.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Panel = _interopRequireDefault(require("../../../styles/cspace/Panel.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const propTypes = {
+  id: _propTypes.default.string.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.arrayOf(_propTypes.default.element)]),
+  title: _propTypes.default.element,
+  isExpanded: _propTypes.default.bool,
+  onHeaderClick: _propTypes.default.func
+};
+const defaultProps = {
+  children: undefined,
+  isExpanded: false,
+  onHeaderClick: () => undefined,
+  title: undefined
+};
+class Panel extends _react.Component {
+  constructor() {
+    super();
+    this.handleHeaderButtonClick = this.handleHeaderButtonClick.bind(this);
+  }
+  handleHeaderButtonClick() {
+    const {
+      id,
+      onHeaderClick
+    } = this.props;
+    onHeaderClick(id);
+  }
+  render() {
+    const {
+      children,
+      isExpanded,
+      title
+    } = this.props;
+    const className = isExpanded ? _Panel.default.expanded : _Panel.default.collapsed;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/_react.default.createElement("header", null, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: this.handleHeaderButtonClick,
+      "aria-expanded": isExpanded,
+      type: "button"
+    }, title)), isExpanded ? children : undefined);
+  }
+}
+exports.default = Panel;
+Panel.propTypes = propTypes;
+Panel.defaultProps = defaultProps;

package/lib/components/layout/PanelContainer.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _reducers = require("../../reducers");
+var _prefsActions = require("../../actions/prefsActions");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const mapStateToProps = (state, ownProps) => ({
+  isExpanded: (0, _reducers.isPanelExpanded)(state, ownProps.id)
+});
+const mapDispatchToProps = {
+  onHeaderClick: _prefsActions.togglePanel
+};
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_Panel.default);
+exports.default = _default;

package/lib/components/layout/PanelTitle.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PanelTitle;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _PanelTitle = _interopRequireDefault(require("../../../styles/cspace/PanelTitle.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const propTypes = {
+  isExpanded: _propTypes.default.bool,
+  styles: _propTypes.default.shape({
+    expanded: _propTypes.default.string,
+    collapsed: _propTypes.default.string
+  }),
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]).isRequired
+};
+const defaultProps = {
+  styles: _PanelTitle.default,
+  isExpanded: false
+};
+function PanelTitle(props) {
+  const {
+    isExpanded,
+    styles,
+    title,
+    ...remainingProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("button", _extends({
+    className: isExpanded ? styles.expanded : styles.collapsed,
+    type: "button"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, remainingProps), /*#__PURE__*/_react.default.createElement("div", null, title));
+}
+PanelTitle.propTypes = propTypes;
+PanelTitle.defaultProps = defaultProps;

package/lib/components/layout/ScrollTopButton.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _ScrollTopButton = _interopRequireDefault(require("../../../styles/cspace/ScrollTopButton.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* global window */
+
+const messages = (0, _reactIntl.defineMessages)({
+  label: {
+    "id": "scrollTopButton.label",
+    "defaultMessage": "Back to top"
+  }
+});
+const scrollTop = () => {
+  if (window.scrollTo) {
+    window.scrollTo({
+      left: 0,
+      top: 0
+    });
+  }
+};
+class ScrollTopButton extends _react.Component {
+  constructor() {
+    super();
+    this.handleScroll = this.handleScroll.bind(this);
+    this.state = {
+      visible: false
+    };
+  }
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+    this.setVisibility();
+  }
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+  handleScroll() {
+    this.setVisibility();
+  }
+  setVisibility() {
+    const {
+      visible
+    } = this.state;
+    const nextVisible = window.document.scrollingElement.scrollTop > 0;
+    if (visible !== nextVisible) {
+      this.setState({
+        visible: nextVisible
+      });
+    }
+  }
+  render() {
+    const {
+      visible
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      className: visible ? _ScrollTopButton.default.common : _ScrollTopButton.default.hidden,
+      labelMessage: messages.label,
+      onClick: scrollTop
+    });
+  }
+}
+exports.default = ScrollTopButton;

package/lib/components/layout/ToggleFilterPanelButton.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToggleFilterPanelButton;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntl = require("react-intl");
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _ToggleFilterPanelButton = _interopRequireDefault(require("../../../styles/cspace/ToggleFilterPanelButton.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const propTypes = {
+  isFilterPanelExpanded: _propTypes.default.bool,
+  onClick: _propTypes.default.func.isRequired
+};
+const defaultProps = {
+  isFilterPanelExpanded: false
+};
+const messages = (0, _reactIntl.defineMessages)({
+  hideLabel: {
+    "id": "toggleFilterPanelButton.hide.label",
+    "defaultMessage": "Hide filters"
+  },
+  showLabel: {
+    "id": "toggleFilterPanelButton.show.label",
+    "defaultMessage": "Show filters"
+  }
+});
+function ToggleFilterPanelButton(props) {
+  const {
+    isFilterPanelExpanded,
+    onClick
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: isFilterPanelExpanded ? _ToggleFilterPanelButton.default.expanded : _ToggleFilterPanelButton.default.collapsed,
+    labelMessage: isFilterPanelExpanded ? messages.hideLabel : messages.showLabel,
+    onClick: onClick
+  });
+}
+ToggleFilterPanelButton.propTypes = propTypes;
+ToggleFilterPanelButton.defaultProps = defaultProps;