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

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/ZendeskButton/ZendeskButton.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 { forwardRef, useState } from "react";
+import { Button, ButtonProps } from "@ndla/primitives";
+
+// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
+
+export interface ZendeskButtonProps extends ButtonProps {
+  widgetKey: string;
+  locale: string;
+}
+
+declare global {
+  interface Window {
+    zE: (modifier: string, action: string, callback?: (() => void) | string) => void;
+  }
+}
+
+export const ZendeskButton = forwardRef<HTMLButtonElement, ZendeskButtonProps>(
+  ({ locale, variant = "secondary", widgetKey, children, ...rest }, ref) => {
+    const [loading, setLoading] = useState(false);
+    const handleClick = () => {
+      if (window && !window.zE) {
+        setLoading(true);
+        // Asynchronously load zendesk scripts for better performance
+        const script = document.createElement("script");
+        script.id = "ze-snippet";
+        script.type = "text/javascript";
+        script.async = true;
+        script.onload = () => {
+          if (window.zE) {
+            window.zE("webWidget", "setLocale", locale);
+            window.zE("webWidget:on", "close", () => {
+              setLoading(false);
+            });
+            window.zE("webWidget", "open");
+          }
+        };
+        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;
+        document.body.appendChild(script);
+      } else if (window?.zE) {
+        window.zE("webWidget", "open");
+      }
+    };
+
+    return (
+      <Button onClick={handleClick} variant={variant} id="zendeskButton" disabled={loading} {...rest} ref={ref}>
+        {children}
+      </Button>
+    );
+  },
+);

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";
@@ -172,3 +177,7 @@ export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export type { Article as ArticleType } from "./types";
 
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
+
+export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
+
+export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";

package/src/locale/messages-en.ts

@@ -203,7 +203,7 @@ const messages = {
     alphabeticSort: "Subjects grouped alphabetically",
     subjectGroup: 'Group "{{ category }}"',
     allSubjects: "All subjects",
-    myFavoriteSubjects: "My favorite subjects",
+    myFavoriteSubjects: "Your favorite subjects",
     chooseSubject: "Choose subject",
     errorDescription: "Sorry, an error occurred while loading the subjects.",
     confirmRemove: "Are you sure you want to remove {{subject}} from your favorite subjects?",
@@ -334,7 +334,7 @@ const messages = {
     useCompentenceGoalsFilter: "Use filter",
     closeCompentenceGoalsFilter: "Close filter",
     competenceGoalsNarrowBackButton: "Go back",
-    competenceGoalResourceSearchText: "View resources to competence goal {{code}}",
+    competenceGoalResourceSearchText: "View resources for {{code}}",
     coreResourceSearchText: "View resources to core element {{code}}",
     competenceGoalShowExtra: "Show",
     competenceGoalCloseExtra: "Hide",
@@ -577,6 +577,8 @@ const messages = {
     podcast: "Podcast",
     h5p: "H5P",
     video: "Video",
+    missing: "Unknown",
+    external: "External",
   },
   modal: {
     closeModal: "Close",
@@ -822,6 +824,7 @@ const messages = {
       url: "Error loading the audio.",
       caption: "Sorry, an error occurred while loading the audio.",
     },
+    valueText: "{{start}} of {{end}}",
     controls: {
       forward15sec: "Forward 15 seconds",
       rewind15sec: "Rewind 15 seconds",
@@ -1418,6 +1421,7 @@ const messages = {
   },
   gloss: {
     examples: "Examples",
+    showExamples: "Show examples",
     wordClass: "Word class",
     play: "Play gloss",
     transcriptions: {
@@ -1469,6 +1473,29 @@ const messages = {
     menuTitle: "About NDLA",
   },
   login: "Log in",
+  component: {
+    tagsInput: {
+      clearTriggerLabel: "Clear all tags",
+      deleteTagTriggerLabel: "Remove tag {{tag}}",
+      tagAdded: "Added tag {{tag}}",
+      tagsPasted: "Pasted {{length}} tags",
+      tagEdited: "Edited tag {{tag}}. Press enter to save, or escape to cancel.",
+      tagUpdated: "Tag updated to {{tag}}",
+      tagDeleted: "Tag {{tag}} deleted",
+      tagSelected: "Tag {{tag}} selected. Press enter to edit. Press backspace or delete to delete.",
+    },
+    combobox: {
+      triggerLabel: "Show suggestions",
+      clearTriggerLabel: "Clear selection",
+    },
+    pagination: {
+      rootLabel: "Pagination",
+      prevTriggerLabel: "Previous page",
+      nextTriggerLabel: "Next page",
+      lastPage: "Last page, page {{page}}",
+      page: "Page {{page}}",
+    },
+  },
 };
 
 export default messages;