@ndla/ui 27.1.7 → 29.0.0

package/lib/model/ContentType.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ListOfContentTypes = exports.MULTIDISCIPLINARY_TOPIC = exports.TOPIC = exports.LEARNING_PATH = exports.SOURCE_MATERIAL = exports.EXTERNAL_LEARNING_RESOURCES = exports.SUBJECT = exports.ASSESSMENT_RESOURCES = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = void 0;
+exports.contentTypeMapping = exports.ListOfContentTypes = exports.RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_LEARNING_PATH = exports.contentTypes = exports.MULTIDISCIPLINARY_TOPIC = exports.TOPIC = exports.LEARNING_PATH = exports.SOURCE_MATERIAL = exports.EXTERNAL_LEARNING_RESOURCES = exports.SUBJECT = exports.ASSESSMENT_RESOURCES = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = void 0;
+
+var _contentTypeMapping;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /**
  * Copyright (c) 2017-present, NDLA.
@@ -30,5 +34,31 @@ var TOPIC = 'topic';
 exports.TOPIC = TOPIC;
 var MULTIDISCIPLINARY_TOPIC = 'multidisciplinary-topic';
 exports.MULTIDISCIPLINARY_TOPIC = MULTIDISCIPLINARY_TOPIC;
+var contentTypes = {
+  SUBJECT_MATERIAL: SUBJECT_MATERIAL,
+  TASKS_AND_ACTIVITIES: TASKS_AND_ACTIVITIES,
+  ASSESSMENT_RESOURCES: ASSESSMENT_RESOURCES,
+  SUBJECT: SUBJECT,
+  EXTERNAL_LEARNING_RESOURCES: EXTERNAL_LEARNING_RESOURCES,
+  SOURCE_MATERIAL: SOURCE_MATERIAL,
+  LEARNING_PATH: LEARNING_PATH,
+  TOPIC: TOPIC,
+  MULTIDISCIPLINARY_TOPIC: MULTIDISCIPLINARY_TOPIC
+};
+exports.contentTypes = contentTypes;
+var RESOURCE_TYPE_LEARNING_PATH = 'urn:resourcetype:learningPath';
+exports.RESOURCE_TYPE_LEARNING_PATH = RESOURCE_TYPE_LEARNING_PATH;
+var RESOURCE_TYPE_SUBJECT_MATERIAL = 'urn:resourcetype:subjectMaterial';
+exports.RESOURCE_TYPE_SUBJECT_MATERIAL = RESOURCE_TYPE_SUBJECT_MATERIAL;
+var RESOURCE_TYPE_TASKS_AND_ACTIVITIES = 'urn:resourcetype:tasksAndActivities';
+exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = RESOURCE_TYPE_TASKS_AND_ACTIVITIES;
+var RESOURCE_TYPE_ASSESSMENT_RESOURCES = 'urn:resourcetype:reviewResource';
+exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = RESOURCE_TYPE_ASSESSMENT_RESOURCES;
+var RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = 'urn:resourcetype:externalResource';
+exports.RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES = RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES;
+var RESOURCE_TYPE_SOURCE_MATERIAL = 'urn:resourcetype:SourceMaterial';
+exports.RESOURCE_TYPE_SOURCE_MATERIAL = RESOURCE_TYPE_SOURCE_MATERIAL;
 var ListOfContentTypes = ['SUBJECT_MATERIAL', 'TASKS_AND_ACTIVITIES', 'ASSESSMENT_RESOURCES', 'SUBJECT', 'EXTERNAL_LEARNING_RESOURCES', 'SOURCE_MATERIAL', 'LEARNING_PATH', 'TOPIC', 'MULTIDISIPLINARY_TOPIC'];
-exports.ListOfContentTypes = ListOfContentTypes;
+exports.ListOfContentTypes = ListOfContentTypes;
+var contentTypeMapping = (_contentTypeMapping = {}, _defineProperty(_contentTypeMapping, RESOURCE_TYPE_LEARNING_PATH, LEARNING_PATH), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_SUBJECT_MATERIAL, SUBJECT_MATERIAL), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_TASKS_AND_ACTIVITIES, TASKS_AND_ACTIVITIES), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_ASSESSMENT_RESOURCES, ASSESSMENT_RESOURCES), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_EXTERNAL_LEARNING_RESOURCES, EXTERNAL_LEARNING_RESOURCES), _defineProperty(_contentTypeMapping, RESOURCE_TYPE_SOURCE_MATERIAL, SOURCE_MATERIAL), _defineProperty(_contentTypeMapping, "default", SUBJECT_MATERIAL), _contentTypeMapping);
+exports.contentTypeMapping = contentTypeMapping;

package/lib/model/SubjectCategories.d.ts

@@ -8,6 +8,3 @@
 export declare const ACTIVE_SUBJECTS = "active";
 export declare const BETA_SUBJECTS = "beta";
 export declare const ARCHIVE_SUBJECTS = "archive";
-export declare const COMMON_SUBJECTS = "common";
-export declare const PROGRAMME_SUBJECTS = "programme";
-export declare const SPECIALIZED_SUBJECTS = "specialized";

package/lib/model/SubjectCategories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPECIALIZED_SUBJECTS = exports.PROGRAMME_SUBJECTS = exports.COMMON_SUBJECTS = exports.ARCHIVE_SUBJECTS = exports.BETA_SUBJECTS = exports.ACTIVE_SUBJECTS = void 0;
+exports.ARCHIVE_SUBJECTS = exports.BETA_SUBJECTS = exports.ACTIVE_SUBJECTS = void 0;
 
 /**
  * Copyright (c) 2021-present, NDLA.
@@ -16,12 +16,5 @@ var ACTIVE_SUBJECTS = 'active';
 exports.ACTIVE_SUBJECTS = ACTIVE_SUBJECTS;
 var BETA_SUBJECTS = 'beta';
 exports.BETA_SUBJECTS = BETA_SUBJECTS;
-var ARCHIVE_SUBJECTS = 'archive'; // deprecated
-
-exports.ARCHIVE_SUBJECTS = ARCHIVE_SUBJECTS;
-var COMMON_SUBJECTS = 'common';
-exports.COMMON_SUBJECTS = COMMON_SUBJECTS;
-var PROGRAMME_SUBJECTS = 'programme';
-exports.PROGRAMME_SUBJECTS = PROGRAMME_SUBJECTS;
-var SPECIALIZED_SUBJECTS = 'specialized';
-exports.SPECIALIZED_SUBJECTS = SPECIALIZED_SUBJECTS;
+var ARCHIVE_SUBJECTS = 'archive';
+exports.ARCHIVE_SUBJECTS = ARCHIVE_SUBJECTS;

package/lib/model/index.d.ts

@@ -5,12 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import * as contentTypes from './ContentType';
 import * as subjectCategories from './SubjectCategories';
 import * as subjectTypes from './SubjectTypes';
 declare const model: {
-    contentTypes: typeof contentTypes;
+    contentTypes: {
+        SUBJECT_MATERIAL: string;
+        TASKS_AND_ACTIVITIES: string;
+        ASSESSMENT_RESOURCES: string;
+        SUBJECT: string;
+        EXTERNAL_LEARNING_RESOURCES: string;
+        SOURCE_MATERIAL: string;
+        LEARNING_PATH: string;
+        TOPIC: string;
+        MULTIDISCIPLINARY_TOPIC: string;
+    };
     subjectCategories: typeof subjectCategories;
     subjectTypes: typeof subjectTypes;
+    contentTypeMapping: Record<string, string>;
 };
 export default model;

package/lib/model/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var contentTypes = _interopRequireWildcard(require("./ContentType"));
+var _ContentType = require("./ContentType");
 
 var subjectCategories = _interopRequireWildcard(require("./SubjectCategories"));
 
@@ -25,9 +25,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  *
  */
 var model = {
-  contentTypes: contentTypes,
+  contentTypes: _ContentType.contentTypes,
   subjectCategories: subjectCategories,
-  subjectTypes: subjectTypes
+  subjectTypes: subjectTypes,
+  contentTypeMapping: _ContentType.contentTypeMapping
 };
 var _default = model;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "27.1.7",
+  "version": "29.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.6.1",
-    "@ndla/carousel": "^1.2.23",
-    "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.3.5",
+    "@ndla/button": "^3.7.0",
+    "@ndla/carousel": "^1.2.24",
+    "@ndla/core": "^2.3.6",
+    "@ndla/forms": "^3.3.6",
     "@ndla/hooks": "^1.1.6",
-    "@ndla/icons": "^1.13.0",
-    "@ndla/licenses": "^5.0.17",
-    "@ndla/modal": "^1.5.0",
-    "@ndla/notion": "^3.1.46",
-    "@ndla/safelink": "^2.2.19",
-    "@ndla/switch": "^0.1.13",
-    "@ndla/tabs": "^1.1.22",
-    "@ndla/tooltip": "^2.2.1",
+    "@ndla/icons": "^1.14.0",
+    "@ndla/licenses": "^5.0.18",
+    "@ndla/modal": "^1.6.1",
+    "@ndla/notion": "^3.1.48",
+    "@ndla/safelink": "^2.2.20",
+    "@ndla/switch": "^0.1.14",
+    "@ndla/tabs": "^1.1.23",
+    "@ndla/tooltip": "^2.2.2",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.0",
     "@reach/menu-button": "^0.16.2",
@@ -58,6 +58,7 @@
     "lodash": "^4.17.20",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.1.2",
+    "react-select": "^5.4.0",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^2.5.3",
     "remarkable": "^2.0.1",
@@ -85,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a2bbbd2a97f3e3468c06cc1aea9849a24d9e5461"
+  "gitHead": "2c5d6b7038c442a871b4cd69247d243cadd129da"
 }

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -6,6 +6,7 @@ import SafeLink from '@ndla/safelink';
 import { colors, fonts, mq, breakpoints } from '@ndla/core';
 import { MessageBox } from '../Messages';
 import { ToggleItem } from '../Filter';
+import constants from '../model';
 
 const StyledWrapper = styled.nav`
   margin: 32px 0 0;
@@ -198,12 +199,14 @@ const FrontpageAllSubjects = ({
         content: (
           <>
             {/* Should be persistent til fall 2022 */}
-            {category.name === t('subjectCategories.beta') && (
+            {(category.name === t('subjectCategories.beta') ||
+              category.type === constants.subjectCategories.BETA_SUBJECTS) && (
               <MessageBoxWrapper>
                 <MessageBox>{t('messageBoxInfo.frontPageBeta')}</MessageBox>
               </MessageBoxWrapper>
             )}
-            {category.name === t('subjectCategories.archive') && (
+            {(category.name === t('subjectCategories.archive') ||
+              category.type === constants.subjectCategories.ARCHIVE_SUBJECTS) && (
               <MessageBoxWrapper>
                 <MessageBox>{t('messageBoxInfo.frontPageExpired')}</MessageBox>
               </MessageBoxWrapper>

package/src/Resource/BlockResource.tsx

@@ -17,12 +17,13 @@ import {
   ResourceImageProps,
   ResourceTitle,
   Row,
-  TopicList,
+  ResourceTypeList,
   ResourceTitleLink,
   LoaderProps,
   StyledContentIconWrapper,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
+import { contentTypeMapping } from '../model/ContentType';
 
 interface BlockResourceProps {
   id: string;
@@ -30,13 +31,13 @@ interface BlockResourceProps {
   tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
-  topics: string[];
   tags?: string[];
   description?: string;
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   menuItems?: MenuItemProps[];
   isLoading?: boolean;
   targetBlank?: boolean;
-  contentType: string;
+  resourceTypes?: { id: string; name: string }[];
 }
 
 const BlockElementWrapper = styled.div`
@@ -128,7 +129,7 @@ const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
   }
 };
 
-const TopicAndTitleLoader = ({ children, loading }: LoaderProps) => {
+const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -148,14 +149,16 @@ const BlockResource = ({
   title,
   tags,
   resourceImage,
-  topics,
   description,
   menuItems,
   isLoading,
+  headingLevel = 'h2',
   targetBlank,
-  contentType,
+  resourceTypes,
 }: BlockResourceProps) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const firstResourceType = resourceTypes?.[0].id ?? '';
+  const Title = ResourceTitle.withComponent(headingLevel);
 
   const handleClick = () => {
     if (linkRef.current) {
@@ -166,15 +169,19 @@ const BlockResource = ({
   return (
     <BlockElementWrapper onClick={handleClick} id={id}>
       <ImageWrapper>
-        <BlockImage image={resourceImage} loading={isLoading} contentType={contentType} />
+        <BlockImage
+          image={resourceImage}
+          loading={isLoading}
+          contentType={contentTypeMapping[firstResourceType] ?? contentTypeMapping['default']}
+        />
       </ImageWrapper>
       <BlockInfoWrapper>
-        <TopicAndTitleLoader loading={isLoading}>
+        <ResourceTypeAndTitleLoader loading={isLoading}>
           <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link} ref={linkRef}>
-            <ResourceTitle>{title}</ResourceTitle>
+            <Title>{title}</Title>
           </ResourceTitleLink>
-        </TopicAndTitleLoader>
-        <TopicList topics={topics} />
+        </ResourceTypeAndTitleLoader>
+        <ResourceTypeList resourceTypes={resourceTypes} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
           {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}

package/src/Resource/ListResource.tsx

@@ -16,12 +16,13 @@ import {
   ResourceImageProps,
   ResourceTitle,
   ResourceTitleLink,
-  TopicList,
+  ResourceTypeList,
   StyledContentIconWrapper,
   LoaderProps,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
+import { contentTypeMapping } from '../model/ContentType';
 
 const StyledResourceDescription = styled.p`
   grid-area: description;
@@ -124,13 +125,13 @@ export interface ListResourceProps {
   tagLinkPrefix?: string;
   title: string;
   resourceImage: ResourceImageProps;
-  topics: string[];
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  resourceTypes: { id: string; name: string }[];
   tags?: string[];
   description?: string;
   menuItems?: MenuItemProps[];
   isLoading?: boolean;
   targetBlank?: boolean;
-  contentType: string;
 }
 
 interface ListResourceImageProps {
@@ -169,7 +170,7 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType }: ListRe
   );
 };
 
-const TopicAndTitleLoader = ({ loading, children }: LoaderProps) => {
+const ResourceTypeAndTitleLoader = ({ loading, children }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'40px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -205,16 +206,18 @@ const ListResource = ({
   title,
   tags,
   resourceImage,
-  topics,
+  resourceTypes,
+  headingLevel = 'h2',
   description,
   menuItems,
   isLoading = false,
   targetBlank,
-  contentType,
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const firstContentType = resourceTypes?.[0]?.id ?? '';
+  const Title = ResourceTitle.withComponent(headingLevel);
   const handleClick = () => {
     if (linkRef.current) {
       linkRef.current.click();
@@ -228,16 +231,16 @@ const ListResource = ({
           resourceImage={resourceImage}
           loading={isLoading}
           type={imageType}
-          contentType={contentType}
+          contentType={contentTypeMapping[firstContentType] ?? contentTypeMapping['default']}
         />
       </StyledImageWrapper>
       <TopicAndTitleWrapper>
-        <TopicAndTitleLoader loading={isLoading}>
+        <ResourceTypeAndTitleLoader loading={isLoading}>
           <ResourceTitleLink to={link} target={targetBlank ? '_blank' : undefined} ref={linkRef}>
-            <ResourceTitle>{title}</ResourceTitle>
+            <Title>{title}</Title>
           </ResourceTitleLink>
-          <TopicList topics={topics} />
-        </TopicAndTitleLoader>
+          <ResourceTypeList resourceTypes={resourceTypes} />
+        </ResourceTypeAndTitleLoader>
       </TopicAndTitleWrapper>
       {showDescription && <ResourceDescription description={description} loading={isLoading} />}
       <TagsandActionMenu>

package/src/Resource/resourceComponents.tsx

@@ -65,13 +65,12 @@ const StyledSafeLink = styled(SafeLink)`
   }
 `;
 
-const StyledTopicList = styled.ul`
+const StyledResourceTypeList = styled.ul`
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   overflow: hidden;
-  grid-area: topicList;
 `;
 
 const StyledTopicDivider = styled.span`
@@ -79,7 +78,7 @@ const StyledTopicDivider = styled.span`
   padding: 0 ${spacing.xxsmall};
 `;
 
-const StyledTopicListElement = styled.li`
+const StyledResourceListElement = styled.li`
   ${fonts.sizes(12)};
   margin: 0;
   line-height: 1.5;
@@ -187,21 +186,21 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
   );
 };
 
-interface TopicListProps {
-  topics?: string[];
+interface ResourceTypeListProps {
+  resourceTypes?: { id: string; name: string }[];
 }
 
-export const TopicList = ({ topics }: TopicListProps) => {
+export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
   const { t } = useTranslation();
-  if (!topics) return null;
+  if (!resourceTypes) return null;
   return (
-    <StyledTopicList aria-label={t('navigation.topics')}>
-      {topics.map((topic, i) => (
-        <StyledTopicListElement key={topic}>
-          {topic}
-          {i !== topics.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
-        </StyledTopicListElement>
+    <StyledResourceTypeList aria-label={t('navigation.topics')}>
+      {resourceTypes.map((resource, i) => (
+        <StyledResourceListElement key={resource.id}>
+          {resource.name}
+          {i !== resourceTypes.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
+        </StyledResourceListElement>
       ))}
-    </StyledTopicList>
+    </StyledResourceTypeList>
   );
 };

package/src/TagSelector/Control.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import { spacing, utils } from '@ndla/core';
+import React from 'react';
+import { ControlProps } from 'react-select';
+import { TagType } from './types';
+
+const StyledTagSelectorControl = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: ${spacing.xxsmall};
+
+  overflow: overlay;
+  ${utils.scrollbar}
+`;
+
+const Control = ({ innerProps, children, innerRef }: ControlProps<TagType, true>) => {
+  return (
+    <StyledTagSelectorControl ref={innerRef} {...innerProps}>
+      {children}
+    </StyledTagSelectorControl>
+  );
+};
+
+export default Control;

package/src/TagSelector/DropdownIndicator.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2022-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 { ChevronDown, ChevronUp } from '@ndla/icons/common';
+import React, { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+import { DropdownIndicatorProps, components } from 'react-select';
+import { iconButtonStyle } from '@ndla/button';
+import { TagType } from './types';
+
+const StyledIconWrapper = styled.span`
+  svg {
+    pointer-events: none;
+  }
+`;
+
+const DropdownIndicator = ({ selectProps, children, ...props }: DropdownIndicatorProps<TagType, true>) => {
+  const { t } = useTranslation();
+
+  const { menuIsOpen } = selectProps;
+  const Icon = menuIsOpen ? ChevronUp : ChevronDown;
+
+  const css = useMemo(
+    () => iconButtonStyle({ colorTheme: 'greyLighter', variant: 'ghost', shape: 'pill', size: 'small' }),
+    [],
+  );
+
+  return (
+    <components.DropdownIndicator
+      css={css}
+      {...props}
+      selectProps={selectProps}
+      aria-label={menuIsOpen ? t('tagSelector.hideTags') : t('tagSelector.showTags')}>
+      <StyledIconWrapper aria-hidden>
+        <Icon />
+      </StyledIconWrapper>
+    </components.DropdownIndicator>
+  );
+};
+
+export default DropdownIndicator;

package/src/TagSelector/Input.tsx

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2022-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 css from '@emotion/css';
+import { colors, spacing } from '@ndla/core';
+import React from 'react';
+import { components, InputProps } from 'react-select';
+import { TagType } from './types';
+import { StyledValueButton } from './ValueButton';
+
+const inputStyle = css`
+  && {
+    padding: 0 ${spacing.small};
+    color: ${colors.brand.primary};
+    margin: 0;
+    ${StyledValueButton} + & {
+      padding-left: ${spacing.xxsmall};
+    }
+  }
+`;
+
+const Input = (props: InputProps<TagType, true>) => {
+  return <components.Input css={inputStyle} {...props} />;
+};
+
+export default Input;

package/src/TagSelector/Menu.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2022-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 css from '@emotion/css';
+import { colors } from '@ndla/core';
+import React from 'react';
+import { MenuProps, components } from 'react-select';
+import { StyledMenuList } from './MenuList';
+import { TagType } from './types';
+
+const menuStyle = css`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  margin: 0;
+  overflow: hidden;
+  border-top: 1px solid ${colors.brand.tertiary};
+  min-height: 70px;
+
+  :has(${StyledMenuList}>*:only-child) {
+    min-height: 40px;
+  }
+`;
+
+const Menu = ({ children, ...props }: MenuProps<TagType, true>) => {
+  return (
+    <components.Menu css={menuStyle} {...props}>
+      {children}
+    </components.Menu>
+  );
+};
+
+export default Menu;

package/src/TagSelector/MenuList.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022-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 styled from '@emotion/styled';
+import { utils } from '@ndla/core';
+import React from 'react';
+import { MenuListProps } from 'react-select';
+import { TagType } from './types';
+
+export const StyledMenuList = styled.div`
+  overflow: overlay;
+  ${utils.scrollbar}
+  display: flex;
+  flex-direction: column;
+`;
+
+const MenuList = ({ innerProps, innerRef, children }: MenuListProps<TagType, true>) => {
+  return (
+    <StyledMenuList ref={innerRef} {...innerProps}>
+      {children}
+    </StyledMenuList>
+  );
+};
+
+export default MenuList;

package/src/TagSelector/Option.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2022-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 React from 'react';
+import { OptionProps } from 'react-select';
+import { buttonStyleV2 as buttonStyle } from '@ndla/button';
+import styled from '@emotion/styled';
+import { colors, fonts } from '@ndla/core';
+import { Done } from '@ndla/icons/editor';
+import { TagType } from './types';
+
+interface StyledProps {
+  selected: boolean;
+  focused: boolean;
+}
+
+const StyledMenuOption = styled.div<StyledProps>`
+  && {
+    background: ${({ focused }) => focused && colors.brand.lighter};
+    color: ${({ focused }) => focused && colors.brand.primary};
+    justify-content: space-between;
+    ${fonts.sizes(16)};
+    font-weight: ${fonts.weight.normal};
+    color: ${({ selected }) => selected && colors.brand.grey};
+  }
+`;
+
+const StyledCheck = styled(Done)`
+  width: 24px;
+  height: 24px;
+  fill: ${colors.brand.tertiary};
+`;
+
+const Option = ({ innerProps, innerRef, children, isSelected, isFocused }: OptionProps<TagType, true>) => {
+  return (
+    <StyledMenuOption
+      focused={isFocused}
+      selected={isSelected}
+      css={buttonStyle({ colorTheme: 'lighter', variant: 'ghost', shape: 'sharp' })}
+      ref={innerRef}
+      {...innerProps}>
+      {children}
+      {isSelected && <StyledCheck />}
+    </StyledMenuOption>
+  );
+};
+
+export default Option;