@ndla/ui 28.0.0 → 29.0.0

package/lib/locale/messages-nn.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-nn.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultat tilgjengeleg',
+      disabled: 'utilgjengeleg',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltastar opp og ned for å velge emneknaggar',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere lista med emneknaggar',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknaggar',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høgre og venstre pil for å navigere mellom valgte emneknaggar, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjerna.',
+        clear: 'Alle valgte emneknaggar fjerna.',
+        initialFocus: "Emneknaggar {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikkje velgast. Velg eit anna alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen mulige val',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknaggar',
-    showAllTags: 'Vis alle emneknaggar'
+    hideTags: 'Skjul emneknaggar',
+    showTags: 'Vis emneknaggar'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,

package/lib/locale/messages-se.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-se.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultater tilgjengelig',
+      disabled: 'utilgjengelig',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere listen med emneknagger',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknagger',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjernet.',
+        clear: 'Alle valgte emneknagger fjernet.',
+        initialFocus: "Emneknagger {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen valgmuligheter',
     label: 'Bija fáddágilkora',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Čále fáddágilkora',
     removeTag: 'Váldde eret {{name}}',
-    hideAllTags: 'Čiega buot fáddágilkoriid',
-    showAllTags: 'Čájet buot fáddágilkoriid'
+    hideTags: 'Skjul emneknagger',
+    showTags: 'Vis emneknagger'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,

package/lib/locale/messages-sma.d.ts

@@ -197,11 +197,49 @@ declare const messages: {
         };
     };
     tagSelector: {
+        aria: {
+            screenReaderStatus: string;
+            disabled: string;
+            selected: string;
+            focused: string;
+            guidance: {
+                menu: {
+                    updown: string;
+                    enter: string;
+                    escape: string;
+                    tab: string;
+                };
+                input: {
+                    select: string;
+                    focused: string;
+                    refine: string;
+                    down: string;
+                    left: string;
+                    space: string;
+                };
+                value: string;
+            };
+            onChange: {
+                deselect: string;
+                clear: string;
+                initialFocus: string;
+                selectedDisabled: string;
+                selected: string;
+            };
+            onFocus: {
+                value: string;
+                menu: string;
+                of: string;
+            };
+            onFilter: string;
+        };
+        noOptions: string;
         label: string;
+        createLabel: string;
         placeholder: string;
         removeTag: string;
-        hideAllTags: string;
-        showAllTags: string;
+        hideTags: string;
+        showTags: string;
     };
     htmlTitles: {
         titleTemplate: string;

package/lib/locale/messages-sma.js

@@ -44,11 +44,49 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
+    aria: {
+      screenReaderStatus: '{{count}} resultater tilgjengelig',
+      disabled: 'utilgjengelig',
+      selected: 'valgt',
+      focused: 'fokusert',
+      guidance: {
+        menu: {
+          updown: 'Bruk piltaster opp og ned for å velge emneknagger',
+          enter: 'trykk enter for å velge den markerte emneknaggen',
+          escape: 'trykk escape for å lukke menyen',
+          tab: 'trykk tab for å velge emneknaggen og lukke menyen'
+        },
+        input: {
+          select: 'Emneknagg-meny',
+          focused: 'er fokusert',
+          refine: 'skriv for å filtrere listen med emneknagger',
+          down: 'trykk pil ned for å åpne menyen',
+          left: 'trykk venstre pil for å fokusere valgte emneknagger',
+          space: 'trykk mellomrom for å opprette ny emneknagg'
+        },
+        value: 'Bruk høyre og venstre pil for å navigere mellom valgte emneknagger, trykk backspace for å fjerne den valgte emneknaggen. Dersom ingen emneknagg er valgt fjernes den siste.'
+      },
+      onChange: {
+        deselect: 'emneknagg {{label}}, fjernet.',
+        clear: 'Alle valgte emneknagger fjernet.',
+        initialFocus: "Emneknagger {{labels}}, valgt.",
+        selectedDisabled: 'Emneknagg {{label}} kan ikke velges. Velg et annet alternativ.',
+        selected: 'Emneknagg {{label}},  valgt.'
+      },
+      onFocus: {
+        value: 'emneknagg {{label}} fokusert, {{position}}.',
+        menu: 'emneknagg {{label}} {{status}}, {{position}}.',
+        of: 'av'
+      },
+      onFilter: ' for søkeord '
+    },
+    noOptions: 'Ingen valgmuligheter',
     label: 'Legg til emneknagg',
+    createLabel: 'Legg til emneknagg {{tag}}',
     placeholder: 'Skriv inn emneknagg',
     removeTag: 'Ta vekk {{name}}',
-    hideAllTags: 'Skjul alle emneknagger',
-    showAllTags: 'Vis alle emneknagger'
+    hideTags: 'Skjul emneknagger',
+    showTags: 'Vis emneknagger'
   },
   htmlTitles: {
     titleTemplate: titleTemplate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "28.0.0",
+  "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.6.0",
-    "@ndla/notion": "^3.1.47",
-    "@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": "f7cac264e9855369dc3061fc240ece485de041bb"
+  "gitHead": "2c5d6b7038c442a871b4cd69247d243cadd129da"
 }

package/src/Resource/ListResource.tsx

@@ -216,7 +216,7 @@ const ListResource = ({
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
   const linkRef = useRef<HTMLAnchorElement>(null);
-  const firstContentType = resourceTypes?.[0].id ?? '';
+  const firstContentType = resourceTypes?.[0]?.id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
   const handleClick = () => {
     if (linkRef.current) {

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;

package/src/TagSelector/SelectContainer.tsx

@@ -0,0 +1,32 @@
+/**
+ * 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 { colors, fonts, misc } from '@ndla/core';
+import React from 'react';
+import { ContainerProps } from 'react-select';
+import { TagType } from './types';
+
+const StyledContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+
+  border: 1px solid ${colors.brand.neutral7};
+  border-radius: ${misc.borderRadius};
+  &:focus-within {
+    border-color: ${colors.brand.tertiary};
+  }
+  ${fonts.sizes(16)};
+`;
+
+const SelectContainer = ({ innerProps, selectProps, children }: ContainerProps<TagType, true>) => {
+  return <StyledContainer {...innerProps}>{children}</StyledContainer>;
+};
+
+export default SelectContainer;