@ndla/ui 4.3.2 → 4.3.3-alpha.12

package/lib/SearchTypeResult/components/ItemTopicHeader.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _core = require("@ndla/core");
+
+var _ContentTypeBadge = _interopRequireDefault(require("../../ContentTypeBadge"));
+
+var _core2 = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var Wrapper = (0, _styledBase["default"])("div", {
+  target: "e1kvpkml0",
+  label: "Wrapper"
+})("padding:", _core.spacing.small, " ", _core.spacing.normal, ";position:relative;min-height:0;flex:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIwQiIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTEycHg7XG4gIGhlaWdodDogMTEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+var Label = (0, _styledBase["default"])("div", {
+  target: "e1kvpkml1",
+  label: "Label"
+})(_core.fonts.sizes('12px', '16px'), ";font-weight:", _core.fonts.weight.semibold, ";height:26px;display:flex;align-items:center;margin-top:", _core.spacing.small, ";transition:all ", _core.animations.durations.fast, " ease-in-out;.c-content-type-badge{width:26px;height:26px;margin-right:", _core.spacing.xsmall, ";}svg{transition:all ", _core.animations.durations.fast, " ease-in-out;width:22px;height:22px;color:", _core.colors.text.primary, " !important;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0J3QiIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTEycHg7XG4gIGhlaWdodDogMTEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+var TopicHeaderVisualElementWrapper = (0, _styledBase["default"])("div", {
+  target: "e1kvpkml2",
+  label: "TopicHeaderVisualElementWrapper"
+})("float:right;margin-left:", _core.spacing.small, ";position:relative;width:112px;height:112px;display:flex;justify-content:center;align-items:center;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0NrRCIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTEycHg7XG4gIGhlaWdodDogMTEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+var TopicHeaderImage = (0, _styledBase["default"])("img", {
+  target: "e1kvpkml3",
+  label: "TopicHeaderImage"
+})("border-radius:50%;width:100%;height:100%;object-fit:cover;transition:all ", _core.animations.durations.fast, " ease-in-out;max-width:unset;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMERtQyIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGFuaW1hdGlvbnMsIGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogMTEycHg7XG4gIGhlaWdodDogMTEycHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIHRyYW5zaXRpb246IGFsbCAke2FuaW1hdGlvbnMuZHVyYXRpb25zLmZhc3R9IGVhc2UtaW4tb3V0O1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+
+var ItemTopicHeader = function ItemTopicHeader(_ref) {
+  var children = _ref.children,
+      image = _ref.image,
+      type = _ref.type;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  return (0, _core2.jsx)(Wrapper, null, image && (0, _core2.jsx)(TopicHeaderVisualElementWrapper, null, (0, _core2.jsx)(TopicHeaderImage, {
+    className: "topic-header-image",
+    src: image.url,
+    alt: image.alt
+  })), (0, _core2.jsx)(Label, {
+    className: "topic-label"
+  }, type && (0, _core2.jsx)(_react["default"].Fragment, null, (0, _core2.jsx)(_ContentTypeBadge["default"], {
+    type: type,
+    border: false
+  }), t("contentTypes.".concat(type)))), children);
+};
+
+var _default = ItemTopicHeader;
+exports["default"] = _default;

package/lib/SearchTypeResult/components/SubjectFilters.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { PopupFilterProps } from '../PopupFilter';
+import { FilterProps } from '../ActiveFilterContent';
+declare type ProgrammeProps = PopupFilterProps['programmes'] & {
+    values: string[];
+    onProgrammeValuesChange: (values: string[]) => void;
+};
+declare type SubjectCategoriesProps = PopupFilterProps['subjectCategories'] & {
+    values: string[];
+    onSubjectValuesChange: (values: string[]) => void;
+};
+export declare type SubjectFilterProps = {
+    filters: {
+        programmes?: ProgrammeProps;
+        subjectCategories?: SubjectCategoriesProps;
+    };
+    activeFilters?: {
+        filters: FilterProps[];
+        onFilterRemove: (value: string, name: string) => void;
+    };
+};
+declare type Props = {
+    isNarrowScreen?: boolean;
+};
+declare const SubjectFilters: ({ filters, activeFilters, isNarrowScreen }: SubjectFilterProps & Props) => JSX.Element;
+export default SubjectFilters;

package/lib/SearchTypeResult/components/SubjectFilters.js

@@ -0,0 +1,192 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _button = _interopRequireDefault(require("@ndla/button"));
+
+var _action = require("@ndla/icons/action");
+
+var _PopupFilter = _interopRequireDefault(require("../PopupFilter"));
+
+var _ActiveFilters = _interopRequireDefault(require("../ActiveFilters"));
+
+var _core = require("@emotion/core");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var FilterButtonText = (0, _styledBase["default"])("span", {
+  target: "eruebyz0",
+  label: "FilterButtonText"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ft8vle",
+  styles: "display:inline-block;font-weight:600;margin-right:10px;"
+} : {
+  name: "1ft8vle",
+  styles: "display:inline-block;font-weight:600;margin-right:10px;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN1YmplY3RGaWx0ZXJzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQm9DIiwiZmlsZSI6IlN1YmplY3RGaWx0ZXJzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIxLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBQbHVzIGFzIFBsdXNJY29uIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcblxuaW1wb3J0IFBvcHVwRmlsdGVyLCB7IFBvcHVwRmlsdGVyUHJvcHMgfSBmcm9tICcuLi9Qb3B1cEZpbHRlcic7XG5pbXBvcnQgQWN0aXZlRmlsdGVycyBmcm9tICcuLi9BY3RpdmVGaWx0ZXJzJztcbmltcG9ydCB7IEZpbHRlclByb3BzIH0gZnJvbSAnLi4vQWN0aXZlRmlsdGVyQ29udGVudCc7XG5cbmNvbnN0IEZpbHRlckJ1dHRvblRleHQgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBmb250LXdlaWdodDogNjAwO1xuICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG5gO1xuXG50eXBlIFByb2dyYW1tZVByb3BzID0gUG9wdXBGaWx0ZXJQcm9wc1sncHJvZ3JhbW1lcyddICYge1xuICB2YWx1ZXM6IHN0cmluZ1tdO1xuICBvblByb2dyYW1tZVZhbHVlc0NoYW5nZTogKHZhbHVlczogc3RyaW5nW10pID0+IHZvaWQ7XG59O1xuXG50eXBlIFN1YmplY3RDYXRlZ29yaWVzUHJvcHMgPSBQb3B1cEZpbHRlclByb3BzWydzdWJqZWN0Q2F0ZWdvcmllcyddICYge1xuICB2YWx1ZXM6IHN0cmluZ1tdO1xuICBvblN1YmplY3RWYWx1ZXNDaGFuZ2U6ICh2YWx1ZXM6IHN0cmluZ1tdKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IHR5cGUgU3ViamVjdEZpbHRlclByb3BzID0ge1xuICBmaWx0ZXJzOiB7XG4gICAgcHJvZ3JhbW1lcz86IFByb2dyYW1tZVByb3BzO1xuICAgIHN1YmplY3RDYXRlZ29yaWVzPzogU3ViamVjdENhdGVnb3JpZXNQcm9wcztcbiAgfTtcbiAgYWN0aXZlRmlsdGVycz86IHtcbiAgICBmaWx0ZXJzOiBGaWx0ZXJQcm9wc1tdO1xuICAgIG9uRmlsdGVyUmVtb3ZlOiAodmFsdWU6IHN0cmluZywgbmFtZTogc3RyaW5nKSA9PiB2b2lkO1xuICB9O1xufTtcblxudHlwZSBQcm9wcyA9IHtcbiAgaXNOYXJyb3dTY3JlZW4/OiBib29sZWFuO1xufTtcblxuY29uc3QgU3ViamVjdEZpbHRlcnMgPSAoeyBmaWx0ZXJzLCBhY3RpdmVGaWx0ZXJzLCBpc05hcnJvd1NjcmVlbiB9OiBTdWJqZWN0RmlsdGVyUHJvcHMgJiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHsgc3ViamVjdENhdGVnb3JpZXMsIHByb2dyYW1tZXMgfSA9IGZpbHRlcnM7XG4gIGNvbnN0IFtzdWJqZWN0VmFsdWVzLCBzZXRTdWJqZWN0VmFsdWVzXSA9IHVzZVN0YXRlPEFycmF5PHN0cmluZz4+KFtdKTtcbiAgY29uc3QgW3Byb2dyYW1tZXNWYWx1ZXMsIHNldFByb2dyYW1tZXNWYWx1ZXNdID0gdXNlU3RhdGU8QXJyYXk8c3RyaW5nPj4oW10pO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIGNvbnN0IHByZXZJc09wZW5SZWYgPSB1c2VSZWY8Ym9vbGVhbj4oKTtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBwcmV2SXNPcGVuUmVmLmN1cnJlbnQgPSBpc09wZW47XG4gIH0pO1xuICBjb25zdCBwcmV2SXNPcGVuID0gcHJldklzT3BlblJlZi5jdXJyZW50O1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3BlbiAmJiBpc09wZW4gIT09IHByZXZJc09wZW4pIHtcbiAgICAgIGlmIChzdWJqZWN0Q2F0ZWdvcmllcykge1xuICAgICAgICBzZXRTdWJqZWN0VmFsdWVzKFsuLi5zdWJqZWN0Q2F0ZWdvcmllcy52YWx1ZXNdKTtcbiAgICAgIH1cbiAgICAgIGlmIChwcm9ncmFtbWVzKSB7XG4gICAgICAgIHNldFByb2dyYW1tZXNWYWx1ZXMoWy4uLnByb2dyYW1tZXMudmFsdWVzXSk7XG4gICAgICB9XG4gICAgfVxuICB9LCBbaXNPcGVuLCBwcmV2SXNPcGVuLCBzdWJqZWN0Q2F0ZWdvcmllcywgcHJvZ3JhbW1lc10pO1xuXG4gIGNvbnN0IG9uVG9nZ2xlU3ViamVjdCA9IChzdWJqZWN0SWQ6IHN0cmluZykgPT4ge1xuICAgIGxldCB1cGRhdGVkRmlsdGVyID0gWy4uLnN1YmplY3RWYWx1ZXNdO1xuICAgIGlmICh1cGRhdGVkRmlsdGVyLmluY2x1ZGVzKHN1YmplY3RJZCkpIHtcbiAgICAgIHVwZGF0ZWRGaWx0ZXIgPSBzdWJqZWN0VmFsdWVzLmZpbHRlcigob3B0aW9uKSA9PiBvcHRpb24gIT09IHN1YmplY3RJZCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHVwZGF0ZWRGaWx0ZXIucHVzaChzdWJqZWN0SWQpO1xuICAgIH1cbiAgICBzZXRTdWJqZWN0VmFsdWVzKHVwZGF0ZWRGaWx0ZXIpO1xuICAgIGlmIChzdWJqZWN0Q2F0ZWdvcmllcykge1xuICAgICAgc3ViamVjdENhdGVnb3JpZXMub25TdWJqZWN0VmFsdWVzQ2hhbmdlKHVwZGF0ZWRGaWx0ZXIpO1xuICAgIH1cbiAgfTtcblxuICBjb25zdCBvblRvZ2dsZVByb2dyYW1tZSA9IChwcm9ncmFtbWVJZDogc3RyaW5nKSA9PiB7XG4gICAgbGV0IHVwZGF0ZWRGaWx0ZXIgPSBbLi4ucHJvZ3JhbW1lc1ZhbHVlc107XG4gICAgaWYgKHVwZGF0ZWRGaWx0ZXIuaW5jbHVkZXMocHJvZ3JhbW1lSWQpKSB7XG4gICAgICB1cGRhdGVkRmlsdGVyID0gcHJvZ3JhbW1lc1ZhbHVlcy5maWx0ZXIoKG9wdGlvbikgPT4gb3B0aW9uICE9PSBwcm9ncmFtbWVJZCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHVwZGF0ZWRGaWx0ZXIucHVzaChwcm9ncmFtbWVJZCk7XG4gICAgfVxuICAgIHNldFByb2dyYW1tZXNWYWx1ZXModXBkYXRlZEZpbHRlcik7XG4gICAgaWYgKHByb2dyYW1tZXMpIHtcbiAgICAgIHByb2dyYW1tZXMub25Qcm9ncmFtbWVWYWx1ZXNDaGFuZ2UodXBkYXRlZEZpbHRlcik7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZVBvcHVwT3BlbiA9ICgpID0+IHtcbiAgICBzZXRJc09wZW4odHJ1ZSk7XG4gIH07XG5cbiAgY29uc3QgaGFuZGxlTW9kYWxDbG9zZSA9ICgpID0+IHtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICB9O1xuXG4gIGNvbnN0IE9wZW5Nb2RhbEJ1dHRvbiA9ICgpID0+IChcbiAgICA8QnV0dG9uIHR5cGU9XCJidXR0b25cIiBzaXplPVwibm9ybWFsXCIgZ3JleUxpZ2h0ZXIgYm9yZGVyU2hhcGU9XCJyb3VuZGVkXCIgb25DbGljaz17aGFuZGxlUG9wdXBPcGVufT5cbiAgICAgIDxGaWx0ZXJCdXR0b25UZXh0Pnt0KCdzZWFyY2hQYWdlLnNlYXJjaEZpbHRlck1lc3NhZ2VzLm5vVmFsdWVzQnV0dG9uVGV4dCcpfTwvRmlsdGVyQnV0dG9uVGV4dD5cbiAgICAgIDxQbHVzSWNvbiAvPlxuICAgIDwvQnV0dG9uPlxuICApO1xuXG4gIGNvbnN0IEFjdGl2ZUZpbHRlcnNFbGVtZW50ID0gKHsgc2hvd01vZGFsQnV0dG9uIH06IHsgc2hvd01vZGFsQnV0dG9uPzogYm9vbGVhbiB9KSA9PiB7XG4gICAgY29uc3QgY3VzdG9tRWxlbWVudHMgPSBzaG93TW9kYWxCdXR0b24gPyBbT3Blbk1vZGFsQnV0dG9uKCldIDogW107XG4gICAgaWYgKCFhY3RpdmVGaWx0ZXJzKSByZXR1cm4gbnVsbDtcbiAgICByZXR1cm4gKFxuICAgICAgPEFjdGl2ZUZpbHRlcnNcbiAgICAgICAgey4uLmFjdGl2ZUZpbHRlcnN9XG4gICAgICAgIHNob3dPblNtYWxsU2NyZWVuPXtpc05hcnJvd1NjcmVlbn1cbiAgICAgICAgb25DbGlja1Nob3dIaWRkZW5TdWJqZWN0cz17aGFuZGxlUG9wdXBPcGVufVxuICAgICAgICBjdXN0b21FbGVtZW50cz17Y3VzdG9tRWxlbWVudHN9XG4gICAgICAvPlxuICAgICk7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2lzTmFycm93U2NyZWVuID8gKFxuICAgICAgICA8QWN0aXZlRmlsdGVyc0VsZW1lbnQgc2hvd01vZGFsQnV0dG9uIC8+XG4gICAgICApIDogaXNOYXJyb3dTY3JlZW4gPT09IGZhbHNlID8gKFxuICAgICAgICA8PlxuICAgICAgICAgIDxPcGVuTW9kYWxCdXR0b24gLz5cbiAgICAgICAgICA8QWN0aXZlRmlsdGVyc0VsZW1lbnQgLz5cbiAgICAgICAgPC8+XG4gICAgICApIDogdW5kZWZpbmVkfVxuICAgICAgPFBvcHVwRmlsdGVyXG4gICAgICAgIHByb2dyYW1tZXM9e3Byb2dyYW1tZXN9XG4gICAgICAgIHN1YmplY3RDYXRlZ29yaWVzPXtzdWJqZWN0Q2F0ZWdvcmllc31cbiAgICAgICAgc3ViamVjdFZhbHVlcz17c3ViamVjdFZhbHVlc31cbiAgICAgICAgcHJvZ3JhbW1lc1ZhbHVlcz17cHJvZ3JhbW1lc1ZhbHVlc31cbiAgICAgICAgb25DbG9zZT17aGFuZGxlTW9kYWxDbG9zZX1cbiAgICAgICAgb25Ub2dnbGVTdWJqZWN0PXtvblRvZ2dsZVN1YmplY3R9XG4gICAgICAgIG9uVG9nZ2xlUHJvZ3JhbW1lPXtvblRvZ2dsZVByb2dyYW1tZX1cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAvPlxuICAgIDwvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgU3ViamVjdEZpbHRlcnM7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var SubjectFilters = function SubjectFilters(_ref) {
+  var filters = _ref.filters,
+      activeFilters = _ref.activeFilters,
+      isNarrowScreen = _ref.isNarrowScreen;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var subjectCategories = filters.subjectCategories,
+      programmes = filters.programmes;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      subjectValues = _useState2[0],
+      setSubjectValues = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      programmesValues = _useState4[0],
+      setProgrammesValues = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var prevIsOpenRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    prevIsOpenRef.current = isOpen;
+  });
+  var prevIsOpen = prevIsOpenRef.current;
+  (0, _react.useEffect)(function () {
+    if (isOpen && isOpen !== prevIsOpen) {
+      if (subjectCategories) {
+        setSubjectValues(_toConsumableArray(subjectCategories.values));
+      }
+
+      if (programmes) {
+        setProgrammesValues(_toConsumableArray(programmes.values));
+      }
+    }
+  }, [isOpen, prevIsOpen, subjectCategories, programmes]);
+
+  var onToggleSubject = function onToggleSubject(subjectId) {
+    var updatedFilter = _toConsumableArray(subjectValues);
+
+    if (updatedFilter.includes(subjectId)) {
+      updatedFilter = subjectValues.filter(function (option) {
+        return option !== subjectId;
+      });
+    } else {
+      updatedFilter.push(subjectId);
+    }
+
+    setSubjectValues(updatedFilter);
+
+    if (subjectCategories) {
+      subjectCategories.onSubjectValuesChange(updatedFilter);
+    }
+  };
+
+  var onToggleProgramme = function onToggleProgramme(programmeId) {
+    var updatedFilter = _toConsumableArray(programmesValues);
+
+    if (updatedFilter.includes(programmeId)) {
+      updatedFilter = programmesValues.filter(function (option) {
+        return option !== programmeId;
+      });
+    } else {
+      updatedFilter.push(programmeId);
+    }
+
+    setProgrammesValues(updatedFilter);
+
+    if (programmes) {
+      programmes.onProgrammeValuesChange(updatedFilter);
+    }
+  };
+
+  var handlePopupOpen = function handlePopupOpen() {
+    setIsOpen(true);
+  };
+
+  var handleModalClose = function handleModalClose() {
+    setIsOpen(false);
+  };
+
+  var OpenModalButton = function OpenModalButton() {
+    return (0, _core.jsx)(_button["default"], {
+      type: "button",
+      size: "normal",
+      greyLighter: true,
+      borderShape: "rounded",
+      onClick: handlePopupOpen
+    }, (0, _core.jsx)(FilterButtonText, null, t('searchPage.searchFilterMessages.noValuesButtonText')), (0, _core.jsx)(_action.Plus, null));
+  };
+
+  var ActiveFiltersElement = function ActiveFiltersElement(_ref2) {
+    var showModalButton = _ref2.showModalButton;
+    var customElements = showModalButton ? [OpenModalButton()] : [];
+    if (!activeFilters) return null;
+    return (0, _core.jsx)(_ActiveFilters["default"], _extends({}, activeFilters, {
+      showOnSmallScreen: isNarrowScreen,
+      onClickShowHiddenSubjects: handlePopupOpen,
+      customElements: customElements
+    }));
+  };
+
+  return (0, _core.jsx)(_react["default"].Fragment, null, isNarrowScreen ? (0, _core.jsx)(ActiveFiltersElement, {
+    showModalButton: true
+  }) : isNarrowScreen === false ? (0, _core.jsx)(_react["default"].Fragment, null, (0, _core.jsx)(OpenModalButton, null), (0, _core.jsx)(ActiveFiltersElement, null)) : undefined, (0, _core.jsx)(_PopupFilter["default"], {
+    programmes: programmes,
+    subjectCategories: subjectCategories,
+    subjectValues: subjectValues,
+    programmesValues: programmesValues,
+    onClose: handleModalClose,
+    onToggleSubject: onToggleSubject,
+    onToggleProgramme: onToggleProgramme,
+    isOpen: isOpen
+  }));
+};
+
+var _default = SubjectFilters;
+exports["default"] = _default;

package/lib/SearchTypeResult/index.d.ts

@@ -10,5 +10,6 @@ import SearchHeader from './SearchHeader';
 import SearchFieldHeader from './SearchFieldHeader';
 import SearchNotionsResult from './SearchNotionsResult';
 import SearchSubjectResult from './SearchSubjectResult';
+import SearchFilterContent from './SearchFilterContent';
 export type { ContentType } from './SearchTypeResult';
-export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult };
+export { SearchTypeResult, SearchHeader, SearchFieldHeader, SearchNotionsResult, SearchSubjectResult, SearchFilterContent, };

package/lib/SearchTypeResult/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "SearchSubjectResult", {
     return _SearchSubjectResult["default"];
   }
 });
+Object.defineProperty(exports, "SearchFilterContent", {
+  enumerable: true,
+  get: function get() {
+    return _SearchFilterContent["default"];
+  }
+});
 
 var _SearchTypeResult = _interopRequireDefault(require("./SearchTypeResult"));
 
@@ -44,4 +50,6 @@ var _SearchNotionsResult = _interopRequireDefault(require("./SearchNotionsResult
 
 var _SearchSubjectResult = _interopRequireDefault(require("./SearchSubjectResult"));
 
+var _SearchFilterContent = _interopRequireDefault(require("./SearchFilterContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }