@ndla/ui 55.0.13-alpha.0 → 55.0.14-alpha.0

package/src/TagSelector/TagSelector.stories.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * Copyright (c) 2024-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,80 +7,104 @@
  */
 
 import { useState } from "react";
-import styled from "@emotion/styled";
+import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
+
 import { Meta, StoryFn } from "@storybook/react";
-import TagSelector from "./TagSelector";
+import { Cross } from "@ndla/icons/action";
+import { ChevronDown } from "@ndla/icons/common";
+import { Done } from "@ndla/icons/editor";
+import {
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxPositioner,
+  IconButton,
+  Input,
+  InputContainer,
+} from "@ndla/primitives";
+import { HStack } from "@ndla/styled-system/jsx";
+import {
+  TagSelectorClearTrigger,
+  TagSelectorControl,
+  TagSelectorInput,
+  TagSelectorLabel,
+  TagSelectorRoot,
+  TagSelectorTrigger,
+} from "./TagSelector";
+import { useTagSelectorTranslations } from "../i18n/useComponentTranslations";
 
-/**
- * Komponent for å tagge noe, primært tiltenkt Min NDLA
- */
 export default {
-  title: "Patterns/TagSelector",
-  component: TagSelector,
+  title: "Components/TagSelector",
+  component: TagSelectorRoot,
   tags: ["autodocs"],
-  parameters: {
-    inlineStories: true,
-  },
-  argTypes: {
-    onChange: { control: false },
-    onCreateTag: { control: false },
-    tags: { control: false },
-    selected: { control: false },
-  },
-  args: {
-    label: "Select tags",
-    labelHidden: false,
-  },
-} as Meta<typeof TagSelector>;
+} satisfies Meta<typeof TagSelectorRoot>;
 
-const Container = styled.div`
-  margin: 10px auto;
-  max-width: 600px;
-  max-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
+const data = [
+  "BackToSchool",
+  "SchoolLife",
+  "Homework",
+  "SchoolDays",
+  "Classroom",
+  "StudyTime",
+  "TeacherLife",
+  "StudentLife",
+  "SchoolSpirit",
+  "Education",
+];
 
-export const TagSelectorStory: StoryFn<typeof TagSelector> = (args) => {
-  const dummyData = [
-    "Cat",
-    "Dog",
-    "Fish",
-    "Dinosaur",
-    "Frog",
-    "Dragon",
-    "Lion",
-    "Snake",
-    "Alligator",
-    "Antelope",
-    "Bear",
-    "Baboon",
-    "Kangaroo",
-    "Scorpion",
-    "Goose",
-    "Fox",
-    "Donkey",
-    "Chicken",
-  ];
-  const [exampleTags, setExampleTags] = useState<string[]>(dummyData);
-  const [exampleTagsSelected, setExampleTagsSelected] = useState<string[]>(dummyData.slice(0, 0));
+export const Default: StoryFn<typeof TagSelectorRoot> = ({ translations, ...args }) => {
+  const [options, setOptions] = useState(data);
+  const [value, setValue] = useState<string[]>([]);
+  const componentTranslations = useTagSelectorTranslations(translations);
+
+  const handleChange = (e: ComboboxInputValueChangeDetails) => {
+    const filtered = data.filter((item) => item.toLowerCase().includes(e.inputValue.toLowerCase()));
+    setOptions(filtered);
+  };
 
   return (
-    <Container>
-      <TagSelector
-        label={args.label}
-        tags={exampleTags}
-        selected={exampleTagsSelected}
-        onChange={(tags: string[]) => {
-          setExampleTagsSelected(tags);
-        }}
-        onCreateTag={(newTagName: string) => {
-          setExampleTags((prevTags) => [...prevTags, newTagName]);
-          setExampleTagsSelected((prevSelectedTags) => [...prevSelectedTags, newTagName]);
-        }}
-      />
-    </Container>
+    <TagSelectorRoot
+      {...args}
+      value={value}
+      items={options}
+      onInputValueChange={handleChange}
+      onValueChange={(details) => setValue(details.value)}
+      translations={componentTranslations}
+    >
+      <TagSelectorLabel>Emneknagger</TagSelectorLabel>
+      <HStack gap="4xsmall">
+        <TagSelectorControl asChild>
+          <InputContainer>
+            <TagSelectorInput asChild>
+              <Input placeholder="Søk etter emneknagger" />
+            </TagSelectorInput>
+
+            <TagSelectorClearTrigger asChild>
+              <IconButton variant="clear">
+                <Cross />
+              </IconButton>
+            </TagSelectorClearTrigger>
+          </InputContainer>
+        </TagSelectorControl>
+        <TagSelectorTrigger asChild>
+          <IconButton variant="secondary">
+            <ChevronDown />
+          </IconButton>
+        </TagSelectorTrigger>
+      </HStack>
+      <ComboboxPositioner>
+        <ComboboxContent>
+          {options.map((item) => (
+            <ComboboxItem key={item} item={item}>
+              <ComboboxItemText>{item}</ComboboxItemText>
+              <ComboboxItemIndicator>
+                <Done />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          ))}
+        </ComboboxContent>
+      </ComboboxPositioner>
+    </TagSelectorRoot>
   );
 };
-
-TagSelectorStory.storyName = "TagSelect";

package/src/TagSelector/TagSelector.tsx

@@ -1,142 +1,177 @@
 /**
- * Copyright (c) 2022-present, NDLA.
+ * Copyright (c) 2024-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 { KeyboardEvent, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { MultiValue, StylesConfig } from "react-select";
-import CreatableSelect from "react-select/creatable";
-import styled from "@emotion/styled";
-import { colors, fonts, spacing, utils } from "@ndla/core";
-import { createAriaMessages } from "./ariaMessages";
-import Control from "./Control";
-import DropdownIndicator from "./DropdownIndicator";
-import Input from "./Input";
-import Menu from "./Menu";
-import MenuList from "./MenuList";
-import Option from "./Option";
-import SelectContainer from "./SelectContainer";
-import { TagType } from "./types";
-import ValueButton from "./ValueButton";
-
-const styles: StylesConfig<TagType, true> = {
-  menu: () => ({}),
-  dropdownIndicator: () => ({}),
-  placeholder: (provided) => ({
-    ...provided,
-    padding: `0 ${spacing.small}`,
-    color: colors.brand.primary,
-    margin: 0,
-  }),
-  valueContainer: (provided) => ({ ...provided, padding: 0 }),
-  indicatorSeparator: () => ({
-    display: "none",
-  }),
-  indicatorsContainer: (provided) => ({
-    ...provided,
-    alignSelf: "flex-end",
-  }),
-};
+import { forwardRef, useEffect, useId, useRef } from "react";
+import type { ComboboxCollectionItem } from "@ark-ui/react";
+import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
+import { Cross } from "@ndla/icons/action";
+import {
+  ComboboxClearTrigger,
+  ComboboxControl,
+  ComboboxControlProps,
+  ComboboxInput,
+  ComboboxInputProps,
+  ComboboxLabel,
+  ComboboxRoot,
+  ComboboxRootProps,
+  ComboboxTrigger,
+  TagsInputControl,
+  TagsInputControlProps,
+  TagsInputInput,
+  TagsInputInputProps,
+  TagsInputItem,
+  TagsInputItemDeleteTrigger,
+  TagsInputItemPreview,
+  TagsInputItemText,
+  TagsInputRoot,
+  TagsInputRootProps,
+  TagsInputItemInput,
+} from "@ndla/primitives";
+import { contains } from "@ndla/util";
 
-const StyledTagSelector = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-`;
-
-interface StyledLabelProps {
-  labelHidden?: boolean;
-}
-
-const StyledLabel = styled.label<StyledLabelProps>`
-  font-weight: ${fonts.weight.semibold};
-  ${(p) => p.labelHidden && utils.labelHidden}
-`;
-
-interface Props {
-  label: string;
-  tags: string[];
-  selected: string[];
-  onChange: (tags: string[]) => void;
-  onCreateTag: (name: string) => void;
-  className?: string;
-  labelHidden?: boolean;
-}
-
-const TagSelector = ({
-  selected: _selected,
-  tags: _tags,
-  onChange,
-  onCreateTag,
-  className,
-  label,
-  labelHidden,
-}: Props) => {
-  const { t } = useTranslation();
-  const [input, setInput] = useState("");
-  const tags = useMemo(() => _tags.map((tag) => ({ value: tag, label: tag })), [_tags]);
-  const selected = useMemo(() => _selected.map((tag) => ({ value: tag, label: tag })), [_selected]);
-
-  const handleSpaceClick = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      if (!_selected.find((tag) => tag === input) && input !== "") {
-        onChange(_selected.concat(input));
-      }
-      setInput("");
-    }
-  };
+export type TagSelectorRootProps<T extends ComboboxCollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
 
-  const handleChange = (tags: MultiValue<TagType>) => {
-    onChange(tags.map((tag) => tag.value));
+export const TagSelectorRoot = <T extends ComboboxCollectionItem>({
+  allowCustomValue = true,
+  multiple = true,
+  selectionBehavior = "clear",
+  editable,
+  addOnPaste = false,
+  onValueChange,
+  children,
+  value,
+  translations,
+  ...rest
+}: TagSelectorRootProps<T>) => {
+  const ids = {
+    root: useId(),
+    input: useId(),
+    control: useId(),
   };
 
-  const createLabel = (tag: string) => t("tagSelector.createLabel", { tag });
+  const controlRef = useRef<HTMLDivElement | undefined>(undefined);
+
+  useEffect(() => {
+    if (!controlRef.current) {
+      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;
+    }
+  }, [ids.control]);
 
   return (
-    <StyledTagSelector className={className}>
-      {label && (
-        <StyledLabel labelHidden={labelHidden} htmlFor="tagselector-creatable" id="tagselector-label">
-          {label}
-        </StyledLabel>
-      )}
-      <CreatableSelect
-        id="tagselector-creatable"
-        aria-labelledby={label ? "tagselector-label" : undefined}
-        ariaLiveMessages={createAriaMessages(t)}
-        components={{
-          DropdownIndicator,
-          MultiValue: ValueButton,
-          SelectContainer,
-          MenuList,
-          Control,
-          Option,
-          Menu,
-          Input,
-        }}
-        formatCreateLabel={createLabel}
-        inputValue={input}
-        isClearable={false}
-        isMulti
-        noOptionsMessage={() => t("tagSelector.noOptions")}
-        onChange={handleChange}
-        onCreateOption={onCreateTag}
-        onInputChange={setInput}
-        onKeyDown={handleSpaceClick}
-        options={tags}
-        placeholder={t("tagSelector.placeholder")}
-        screenReaderStatus={({ count }) => t("tagSelector.aria.screenReaderStatus", { count })}
-        styles={styles}
-        tabSelectsValue={false}
-        value={selected}
-      />
-    </StyledTagSelector>
+    <ComboboxRoot
+      ids={ids}
+      asChild
+      allowCustomValue={allowCustomValue}
+      multiple={multiple}
+      selectionBehavior={selectionBehavior}
+      onValueChange={onValueChange}
+      translations={translations}
+      onPointerDownOutside={(event) => {
+        if (contains(controlRef.current, event.detail.originalEvent.target)) {
+          event.preventDefault();
+        }
+      }}
+      value={value}
+      {...rest}
+    >
+      <ComboboxContext>
+        {(api) => (
+          <TagsInputRoot
+            ids={ids}
+            value={value}
+            onInputValueChange={(details) => api.setInputValue(details.inputValue)}
+            editable={editable}
+            onValueChange={onValueChange}
+            addOnPaste={addOnPaste}
+            translations={translations}
+          >
+            {children}
+          </TagsInputRoot>
+        )}
+      </ComboboxContext>
+    </ComboboxRoot>
   );
 };
 
-export default TagSelector;
+export type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;
+
+export const TagSelectorLabel = ComboboxLabel;
+
+export const TagSelectorItemInput = TagsInputItemInput;
+
+export const TagSelectorTrigger = ComboboxTrigger;
+
+export const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {
+  return (
+    <ComboboxControl asChild>
+      <TagsInputControl {...props} ref={ref}>
+        {children}
+      </TagsInputControl>
+    </ComboboxControl>
+  );
+});
+
+export const TagSelectorClearTrigger = ComboboxClearTrigger;
+
+export type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;
+
+// If you need to modify the TagsInputItem, you can use this.
+export const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(
+  ({ children, ...props }, ref) => {
+    const tagsApi = useTagsInputContext();
+
+    return (
+      <ComboboxInput asChild>
+        <TagsInputInput
+          {...props}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              tagsApi.addValue(tagsApi.inputValue);
+            }
+          }}
+          ref={ref}
+        >
+          {children}
+        </TagsInputInput>
+      </ComboboxInput>
+    );
+  },
+);
+
+export const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {
+  const tagsApi = useTagsInputContext();
+
+  return (
+    <>
+      {tagsApi.value.map((value, index) => (
+        <TagsInputItem index={index} value={value} key={value}>
+          <TagsInputItemPreview>
+            <TagsInputItemText>{value}</TagsInputItemText>
+            <TagsInputItemDeleteTrigger>
+              <Cross />
+            </TagsInputItemDeleteTrigger>
+          </TagsInputItemPreview>
+          <TagsInputItemInput />
+        </TagsInputItem>
+      ))}
+      <ComboboxInput asChild>
+        <TagsInputInput
+          {...props}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              tagsApi.addValue(tagsApi.inputValue);
+            }
+          }}
+          ref={ref}
+        >
+          {children}
+        </TagsInputInput>
+      </ComboboxInput>
+    </>
+  );
+});

package/src/i18n/index.ts

@@ -8,3 +8,8 @@
 
 export { i18nInstance } from "./i18n";
 export { formatNestedMessages } from "./formatNestedMessages";
+export {
+  useComboboxTranslations,
+  useTagSelectorTranslations,
+  useTagsInputTranslations,
+} from "./useComponentTranslations";

package/src/i18n/useComponentTranslations.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2024-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 { useTranslation } from "react-i18next";
+import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
+import { TagSelectorRootProps } from "../TagSelector/TagSelector";
+
+export const useTagsInputTranslations = (
+  translations?: Partial<TagsInputRootProps["translations"]>,
+): TagsInputRootProps["translations"] => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.tagsInput" });
+
+  return {
+    clearTriggerLabel: t("clearTriggerLabel"),
+    deleteTagTriggerLabel: (tag) => t("deleteTagTriggerLabel", { tag }),
+    tagAdded: (tag) => t("tagAdded", { tag }),
+    tagsPasted: (tag) => t("tagsPasted", { length: tag.length }),
+    tagEdited: (tag) => t("tagEdited", { tag }),
+    tagUpdated: (tag) => t("tagUpdated", { tag }),
+    tagDeleted: (tag) => t("tagDeleted", { tag }),
+    tagSelected: (tag) => t("tagSelected", { tag }),
+    ...translations,
+  };
+};
+
+export const useComboboxTranslations = <T extends ComboboxCollectionItem>(
+  translations?: Partial<ComboboxRootProps<T>["translations"]>,
+): ComboboxRootProps<T>["translations"] => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.combobox" });
+
+  return {
+    triggerLabel: t("triggerLabel"),
+    clearTriggerLabel: t("clearTriggerLabel"),
+    ...translations,
+  };
+};
+
+export const useTagSelectorTranslations = <T extends ComboboxCollectionItem>(
+  translations?: Partial<TagSelectorRootProps<T>["translations"]>,
+): TagSelectorRootProps<T>["translations"] => {
+  const tagsInputTranslations = useTagsInputTranslations();
+  const comboboxTranslations = useComboboxTranslations();
+
+  return {
+    ...comboboxTranslations,
+    ...tagsInputTranslations,
+    ...translations,
+  } as TagSelectorRootProps<T>["translations"];
+};
+
+export const usePaginationTranslations = (
+  translations?: Partial<PaginationRootProps["translations"]>,
+): PaginationRootProps["translations"] => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.pagination" });
+
+  return {
+    rootLabel: t("rootLabel"),
+    prevTriggerLabel: t("prevTriggerLabel"),
+    nextTriggerLabel: t("nextTriggerLabel"),
+    itemLabel: (details) => {
+      const lastPage = details.totalPages > 1 && details.page === details.totalPages;
+      return lastPage ? t("lastPage", { page: details.page }) : t("page", { page: details.page });
+    },
+    ...translations,
+  };
+};

package/src/index.ts

@@ -9,10 +9,7 @@
 // Ignore typescript implicit any warning and export all javascript components
 // Move components to this file when they are migrated to typescript
 
-export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
-export { default as FramedContent } from "./FramedContent";
 export {
-  ConceptNotionV2,
   ImageEmbed,
   getCrop,
   getFocalPoint,
@@ -51,8 +48,6 @@ export type { ArticleModifier } from "./Article";
 
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 
-export { default as Table, TableStyling } from "./Table";
-
 export { default as ContentLoader } from "./ContentLoader";
 
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
@@ -65,9 +60,6 @@ export { default as Logo } from "./Logo";
 
 export { default as FactBox } from "./FactBox";
 
-export { default as Image, ImageLink, makeSrcQueryString } from "./Image";
-export type { ImageCrop, ImageFocalPoint } from "./Image";
-
 export type { HeroContentType } from "./Hero";
 export {
   SubjectMaterialHero,
@@ -83,9 +75,6 @@ export {
 
 export { FooterBlock } from "./Footer";
 
-export { Figure } from "./Figure";
-export type { FigureType } from "./Figure";
-
 export { LanguageSelector } from "./LanguageSelector";
 
 export { default as SearchResultSleeve } from "./Search/SearchResultSleeve";
@@ -115,7 +104,13 @@ export { default as messagesSMA } from "./locale/messages-sma";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
 
-export { i18nInstance, formatNestedMessages } from "./i18n";
+export {
+  i18nInstance,
+  formatNestedMessages,
+  useTagsInputTranslations,
+  useTagSelectorTranslations,
+  useComboboxTranslations,
+} from "./i18n";
 
 export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 
@@ -130,14 +125,26 @@ export {
   ConceptBadge,
 } from "./ContentTypeBadge";
 
+export type { ContentTypeBadgeProps } from "./ContentTypeBadge/ContentTypeBadgeNew";
+export {
+  ContentTypeBadge as ContentTypeBadgeNew,
+  contentTypeToBadgeVariantMap,
+} from "./ContentTypeBadge/ContentTypeBadgeNew";
+
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 
 export { default as ContentPlaceholder } from "./ContentPlaceholder";
 
-export { Notion } from "./Notion";
-
-export type { TagType } from "./TagSelector";
-export { TagSelector } from "./TagSelector";
+export {
+  TagSelectorRoot,
+  TagSelectorLabel,
+  TagSelectorItemInput,
+  TagSelectorTrigger,
+  TagSelectorControl,
+  TagSelectorClearTrigger,
+  TagSelectorInputBase,
+  TagSelectorInput,
+} from "./TagSelector/TagSelector";
 
 export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from "./SnackBar";
 export type { Snack, SnackContext } from "./SnackBar";
@@ -145,7 +152,6 @@ export { TreeStructure } from "./TreeStructure";
 export type { TreeStructureProps } from "./TreeStructure";
 
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters } from "./Search";
-export { default as LetterFilter } from "./LetterFilter";
 
 export { OrderedList, UnOrderedList } from "./List";
 export { BlogPostV2 } from "./BlogPost";
@@ -162,7 +168,6 @@ export {
   FRONTPAGE_ARTICLE_MAX_WIDTH,
   WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH,
 } from "./FrontpageArticle";
-export { DefinitionTerm, DefinitionDescription } from "./DefinitionList";
 export type { ProgrammeV2 } from "./ProgrammeCard";
 
 export { Gloss, GlossExample } from "./Gloss";