@ndla/ui 50.8.0 → 50.8.1

package/src/Table/Table.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import throttle from 'lodash/throttle';
-import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import throttle from "lodash/throttle";
+import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 
-type ScrollPosition = 'start' | 'end' | 'center';
+type ScrollPosition = "start" | "end" | "center";
 
 const MARGIN = 5;
 
@@ -33,7 +33,7 @@ const ScrollBorder = styled.div`
   background: ${colors.background.dark};
   display: none;
 
-  &[data-block='true'] {
+  &[data-block="true"] {
     display: block;
   }
 `;
@@ -76,7 +76,7 @@ export const TableStyling = css`
   // scrolling shadows on left/right
   &:after,
   &:before {
-    content: '';
+    content: "";
     display: table;
     clear: both;
   }
@@ -85,7 +85,7 @@ export const TableStyling = css`
     background-color: transparent;
     font-weight: ${fonts.weight.bold};
     font-family: ${fonts.sans};
-    ${fonts.sizes('16px', '20px')}
+    ${fonts.sizes("16px", "20px")}
     text-align: left;
     text-transform: uppercase;
     margin-bottom: ${spacing.small};
@@ -102,9 +102,9 @@ export const TableStyling = css`
     font-family: ${fonts.sans};
     vertical-align: text-top;
 
-    ${fonts.sizes('16px', '22px')};
+    ${fonts.sizes("16px", "22px")};
     ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes('16px', '30px')};
+      ${fonts.sizes("16px", "30px")};
     }
   }
 
@@ -118,9 +118,9 @@ export const TableStyling = css`
     border: 1px solid ${colors.brand.lighter};
     text-transform: none;
 
-    ${fonts.sizes('14px', '18px')};
+    ${fonts.sizes("14px", "18px")};
     ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes('15px', '26px')};
+      ${fonts.sizes("15px", "26px")};
     }
 
     font-weight: ${fonts.weight.semibold};
@@ -137,18 +137,18 @@ export const TableStyling = css`
     border: 1px solid ${colors.brand.lighter};
     vertical-align: top;
 
-    ${fonts.sizes('14px', '22px')};
+    ${fonts.sizes("14px", "22px")};
     ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes('15px', '30px')};
+      ${fonts.sizes("15px", "30px")};
     }
 
     ol,
     ul {
       li,
       li p {
-        ${fonts.sizes('14px', '22px')};
+        ${fonts.sizes("14px", "22px")};
         ${mq.range({ from: breakpoints.tablet })} {
-          ${fonts.sizes('15px', '30px')};
+          ${fonts.sizes("15px", "30px")};
         }
         margin: ${spacing.xsmall} 0 !important;
       }
@@ -226,11 +226,11 @@ const Table = ({ children, id, ...rest }: Props) => {
     const isEnd = offsetWidth + scrollLeft >= scrollWidth - MARGIN;
 
     if (isStart) {
-      setScrollPosition('start');
+      setScrollPosition("start");
     } else if (isEnd) {
-      setScrollPosition('end');
+      setScrollPosition("end");
     } else {
-      setScrollPosition('center');
+      setScrollPosition("center");
     }
   }, []);
 
@@ -255,11 +255,11 @@ const Table = ({ children, id, ...rest }: Props) => {
   return (
     <TableWrapper>
       <OverflowWrapper>
-        <LeftScrollBorder data-block={scrollPosition === 'end' || scrollPosition === 'center'} />
+        <LeftScrollBorder data-block={scrollPosition === "end" || scrollPosition === "center"} />
         <table ref={tableRef} id={id} onScroll={onScroll} css={TableStyling} {...rest}>
           {children}
         </table>
-        <RightScrollBorder data-block={scrollPosition === 'start' || scrollPosition === 'center'} />
+        <RightScrollBorder data-block={scrollPosition === "start" || scrollPosition === "center"} />
       </OverflowWrapper>
     </TableWrapper>
   );

package/src/Table/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import Table from './Table';
+import Table from "./Table";
 
-export { TableStyling } from './Table';
+export { TableStyling } from "./Table";
 export default Table;

package/src/TagSelector/Control.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { ControlProps } from 'react-select';
-import styled from '@emotion/styled';
-import { spacing, utils } from '@ndla/core';
-import { TagType } from './types';
+import { ControlProps } from "react-select";
+import styled from "@emotion/styled";
+import { spacing, utils } from "@ndla/core";
+import { TagType } from "./types";
 
 const StyledTagSelectorControl = styled.div`
   display: flex;

package/src/TagSelector/DropdownIndicator.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { DropdownIndicatorProps, components } from 'react-select';
-import styled from '@emotion/styled';
-import { iconButtonStyle } from '@ndla/button';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { TagType } from './types';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { DropdownIndicatorProps, components } from "react-select";
+import styled from "@emotion/styled";
+import { iconButtonStyle } from "@ndla/button";
+import { ChevronDown, ChevronUp } from "@ndla/icons/common";
+import { TagType } from "./types";
 
 const StyledIconWrapper = styled.span`
   svg {
@@ -27,7 +27,13 @@ const DropdownIndicator = ({ selectProps, children, ...props }: DropdownIndicato
   const Icon = menuIsOpen ? ChevronUp : ChevronDown;
 
   const css = useMemo(
-    () => iconButtonStyle({ colorTheme: 'greyLighter', variant: 'ghost', shape: 'pill', size: 'small' }),
+    () =>
+      iconButtonStyle({
+        colorTheme: "greyLighter",
+        variant: "ghost",
+        shape: "pill",
+        size: "small",
+      }),
     [],
   );
 
@@ -36,7 +42,7 @@ const DropdownIndicator = ({ selectProps, children, ...props }: DropdownIndicato
       css={css}
       {...props}
       selectProps={selectProps}
-      aria-label={menuIsOpen ? t('tagSelector.hideTags') : t('tagSelector.showTags')}
+      aria-label={menuIsOpen ? t("tagSelector.hideTags") : t("tagSelector.showTags")}
     >
       <StyledIconWrapper aria-hidden>
         <Icon />

package/src/TagSelector/Input.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { components, InputProps } from 'react-select';
-import { css } from '@emotion/react';
-import { colors, spacing } from '@ndla/core';
-import { TagType } from './types';
-import { StyledValueButton } from './ValueButton';
+import { components, InputProps } from "react-select";
+import { css } from "@emotion/react";
+import { colors, spacing } from "@ndla/core";
+import { TagType } from "./types";
+import { StyledValueButton } from "./ValueButton";
 
 const inputStyle = css`
   && {

package/src/TagSelector/Menu.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { MenuProps, components } from 'react-select';
-import { css } from '@emotion/react';
-import { colors } from '@ndla/core';
-import { StyledMenuList } from './MenuList';
-import { TagType } from './types';
+import { MenuProps, components } from "react-select";
+import { css } from "@emotion/react";
+import { colors } from "@ndla/core";
+import { StyledMenuList } from "./MenuList";
+import { TagType } from "./types";
 
 const menuStyle = css`
   display: flex;

package/src/TagSelector/MenuList.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { MenuListProps } from 'react-select';
-import styled from '@emotion/styled';
-import { utils } from '@ndla/core';
-import { TagType } from './types';
+import { MenuListProps } from "react-select";
+import styled from "@emotion/styled";
+import { utils } from "@ndla/core";
+import { TagType } from "./types";
 
 export const StyledMenuList = styled.div`
   overflow: auto;

package/src/TagSelector/Option.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { OptionProps } from 'react-select';
-import styled from '@emotion/styled';
-import { buttonStyleV2 as buttonStyle } from '@ndla/button';
-import { colors, fonts } from '@ndla/core';
-import { Done } from '@ndla/icons/editor';
-import { TagType } from './types';
+import { OptionProps } from "react-select";
+import styled from "@emotion/styled";
+import { buttonStyleV2 as buttonStyle } from "@ndla/button";
+import { colors, fonts } from "@ndla/core";
+import { Done } from "@ndla/icons/editor";
+import { TagType } from "./types";
 
 interface StyledProps {
   selected: boolean;
@@ -40,7 +40,11 @@ const Option = ({ innerProps, innerRef, children, isSelected, isFocused }: Optio
     <StyledMenuOption
       focused={isFocused}
       selected={isSelected}
-      css={buttonStyle({ colorTheme: 'lighter', variant: 'ghost', shape: 'sharp' })}
+      css={buttonStyle({
+        colorTheme: "lighter",
+        variant: "ghost",
+        shape: "sharp",
+      })}
       ref={innerRef}
       {...innerProps}
     >

package/src/TagSelector/SelectContainer.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { ContainerProps } from 'react-select';
-import styled from '@emotion/styled';
-import { colors, fonts, misc } from '@ndla/core';
-import { TagType } from './types';
+import { ContainerProps } from "react-select";
+import styled from "@emotion/styled";
+import { colors, fonts, misc } from "@ndla/core";
+import { TagType } from "./types";
 
 const StyledContainer = styled.div`
   display: grid;

package/src/TagSelector/TagSelector.stories.tsx

@@ -6,19 +6,19 @@
  *
  */
 
-import { useState } from 'react';
-import styled from '@emotion/styled';
-import { Meta, StoryFn } from '@storybook/react';
-import TagSelector from './TagSelector';
-import { defaultParameters } from '../../../../stories/defaults';
+import { useState } from "react";
+import styled from "@emotion/styled";
+import { Meta, StoryFn } from "@storybook/react";
+import TagSelector from "./TagSelector";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Komponent for å tagge noe, primært tiltenkt Min NDLA
  */
 export default {
-  title: 'Patterns/TagSelector',
+  title: "Patterns/TagSelector",
   component: TagSelector,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -30,7 +30,7 @@ export default {
     selected: { control: false },
   },
   args: {
-    label: 'Select tags',
+    label: "Select tags",
     labelHidden: false,
   },
 } as Meta<typeof TagSelector>;
@@ -45,24 +45,24 @@ const Container = styled.div`
 
 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',
+    "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));
@@ -85,4 +85,4 @@ export const TagSelectorStory: StoryFn<typeof TagSelector> = (args) => {
   );
 };
 
-TagSelectorStory.storyName = 'TagSelect';
+TagSelectorStory.storyName = "TagSelect";

package/src/TagSelector/TagSelector.tsx

@@ -6,22 +6,22 @@
  *
  */
 
-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';
+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: () => ({}),
@@ -34,11 +34,11 @@ const styles: StylesConfig<TagType, true> = {
   }),
   valueContainer: (provided) => ({ ...provided, padding: 0 }),
   indicatorSeparator: () => ({
-    display: 'none',
+    display: "none",
   }),
   indicatorsContainer: (provided) => ({
     ...provided,
-    alignSelf: 'flex-end',
+    alignSelf: "flex-end",
   }),
 };
 
@@ -78,17 +78,17 @@ const TagSelector = ({
   labelHidden,
 }: Props) => {
   const { t } = useTranslation();
-  const [input, setInput] = useState('');
+  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 === ' ') {
+    if (e.key === " ") {
       e.preventDefault();
-      if (!_selected.find((tag) => tag === input) && input !== '') {
+      if (!_selected.find((tag) => tag === input) && input !== "") {
         onChange(_selected.concat(input));
       }
-      setInput('');
+      setInput("");
     }
   };
 
@@ -96,7 +96,7 @@ const TagSelector = ({
     onChange(tags.map((tag) => tag.value));
   };
 
-  const createLabel = (tag: string) => t('tagSelector.createLabel', { tag });
+  const createLabel = (tag: string) => t("tagSelector.createLabel", { tag });
 
   return (
     <StyledTagSelector className={className}>
@@ -107,7 +107,7 @@ const TagSelector = ({
       )}
       <CreatableSelect
         id="tagselector-creatable"
-        aria-labelledby={label ? 'tagselector-label' : undefined}
+        aria-labelledby={label ? "tagselector-label" : undefined}
         ariaLiveMessages={createAriaMessages(t)}
         components={{
           DropdownIndicator,
@@ -123,14 +123,14 @@ const TagSelector = ({
         inputValue={input}
         isClearable={false}
         isMulti
-        noOptionsMessage={() => t('tagSelector.noOptions')}
+        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 })}
+        placeholder={t("tagSelector.placeholder")}
+        screenReaderStatus={({ count }) => t("tagSelector.aria.screenReaderStatus", { count })}
         styles={styles}
         tabSelectsValue={false}
         value={selected}

package/src/TagSelector/ValueButton.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { MultiValueProps } from 'react-select';
-import styled from '@emotion/styled';
-import { buttonStyleV2 as buttonStyle } from '@ndla/button';
-import { colors, spacing } from '@ndla/core';
-import { Cross } from '@ndla/icons/action';
-import { TagType } from './types';
+import { MultiValueProps } from "react-select";
+import styled from "@emotion/styled";
+import { buttonStyleV2 as buttonStyle } from "@ndla/button";
+import { colors, spacing } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
+import { TagType } from "./types";
 
 interface StyledProps {
   selected: boolean;
@@ -32,7 +32,7 @@ const ValueButton = ({ innerProps, children, removeProps, isFocused }: MultiValu
     <StyledValueButton
       selected={isFocused}
       role="button"
-      css={buttonStyle({ colorTheme: 'lighter', shape: 'pill', size: 'small' })}
+      css={buttonStyle({ colorTheme: "lighter", shape: "pill", size: "small" })}
       {...innerProps}
       {...removeProps}
     >

package/src/TagSelector/ariaMessages.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { TFunction } from 'i18next';
+import { TFunction } from "i18next";
 import {
   AriaGuidanceProps,
   AriaOnChangeProps,
@@ -14,74 +14,83 @@ import {
   AriaOnFocusProps,
   GroupBase,
   OptionsOrGroups,
-} from 'react-select';
-import { TagType } from './types';
+} from "react-select";
+import { TagType } from "./types";
 
 export const createAriaMessages = (t: TFunction) => ({
   guidance: (props: AriaGuidanceProps) => {
     const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } = props;
     switch (context) {
-      case 'menu':
-        return `${t('tagSelector.aria.guidance.menu.updown')}${
-          isDisabled ? '' : `, ${t('tagSelector.aria.guidance.menu.enter')}`
-        }, ${t('tagSelector.aria.guidance.menu.escape')}${
-          tabSelectsValue ? `, ${t('tagSelector.aria.guidance.menu.tab')}` : ''
+      case "menu":
+        return `${t("tagSelector.aria.guidance.menu.updown")}${
+          isDisabled ? "" : `, ${t("tagSelector.aria.guidance.menu.enter")}`
+        }, ${t("tagSelector.aria.guidance.menu.escape")}${
+          tabSelectsValue ? `, ${t("tagSelector.aria.guidance.menu.tab")}` : ""
         }.`;
-      case 'input':
-        return `${props['aria-label'] || t('tagSelector.aria.guidance.input.select')} ${t(
-          'tagSelector.aria.guidance.input.focused',
-        )} ${isSearchable ? `, ${t('tagSelector.aria.guidance.input.refine')}` : ''}, ${t(
-          'tagSelector.aria.guidance.input.down',
-        )}, ${isMulti ? ` ${t('tagSelector.aria.guidance.input.left')}` : ''}, ${t(
-          'tagSelector.aria.guidance.input.space',
+      case "input":
+        return `${props["aria-label"] || t("tagSelector.aria.guidance.input.select")} ${t(
+          "tagSelector.aria.guidance.input.focused",
+        )} ${isSearchable ? `, ${t("tagSelector.aria.guidance.input.refine")}` : ""}, ${t(
+          "tagSelector.aria.guidance.input.down",
+        )}, ${isMulti ? ` ${t("tagSelector.aria.guidance.input.left")}` : ""}, ${t(
+          "tagSelector.aria.guidance.input.space",
         )}`;
-      case 'value':
-        return t('tagSelector.aria.guidance.value');
+      case "value":
+        return t("tagSelector.aria.guidance.value");
       default:
-        return '';
+        return "";
     }
   },
 
   onChange: (props: AriaOnChangeProps<TagType, true>) => {
-    const { action, label = '', labels, isDisabled } = props;
+    const { action, label = "", labels, isDisabled } = props;
     switch (action) {
-      case 'deselect-option':
-      case 'pop-value':
-      case 'remove-value':
-        return t('tagSelector.aria.onChange.deselect', { label });
-      case 'clear':
-        return t('tagSelector.aria.onChange.clear');
-      case 'initial-input-focus':
-        return t('tagSelector.aria.onChange.initialFocus', { labels: labels.join(',') });
-      case 'select-option':
+      case "deselect-option":
+      case "pop-value":
+      case "remove-value":
+        return t("tagSelector.aria.onChange.deselect", { label });
+      case "clear":
+        return t("tagSelector.aria.onChange.clear");
+      case "initial-input-focus":
+        return t("tagSelector.aria.onChange.initialFocus", {
+          labels: labels.join(","),
+        });
+      case "select-option":
         return isDisabled
-          ? t('tagSelector.aria.onChange.selectedDisabled', { label })
-          : t('tagSelector.aria.onChange.selected', { label });
+          ? t("tagSelector.aria.onChange.selectedDisabled", { label })
+          : t("tagSelector.aria.onChange.selected", { label });
       default:
-        return '';
+        return "";
     }
   },
 
   onFocus: (props: AriaOnFocusProps<TagType, GroupBase<TagType>>) => {
-    const { context, focused, options, label = '', selectValue, isDisabled, isSelected } = props;
+    const { context, focused, options, label = "", selectValue, isDisabled, isSelected } = props;
 
     const getArrayIndex = (arr: OptionsOrGroups<TagType, GroupBase<TagType>>, item: TagType) =>
-      arr && arr.length ? `${arr.indexOf(item) + 1} ${t('tagSelector.aria.onFocus.of')} ${arr.length}` : '';
+      arr && arr.length ? `${arr.indexOf(item) + 1} ${t("tagSelector.aria.onFocus.of")} ${arr.length}` : "";
 
-    if (context === 'value' && selectValue) {
-      return t('tagSelector.aria.onFocus.value', { label, position: getArrayIndex(selectValue, focused) });
+    if (context === "value" && selectValue) {
+      return t("tagSelector.aria.onFocus.value", {
+        label,
+        position: getArrayIndex(selectValue, focused),
+      });
     }
 
-    if (context === 'menu') {
-      const disabled = isDisabled ? ` ${t('tagSelector.aria.disabled')}` : '';
-      const status = `${isSelected ? t('tagSelector.aria.selected') : t('tagSelector.aria.focused')}${disabled}`;
-      return t('tagSelector.aria.onFocus.menu', { label, status, position: getArrayIndex(options, focused) });
+    if (context === "menu") {
+      const disabled = isDisabled ? ` ${t("tagSelector.aria.disabled")}` : "";
+      const status = `${isSelected ? t("tagSelector.aria.selected") : t("tagSelector.aria.focused")}${disabled}`;
+      return t("tagSelector.aria.onFocus.menu", {
+        label,
+        status,
+        position: getArrayIndex(options, focused),
+      });
     }
-    return '';
+    return "";
   },
 
   onFilter: (props: AriaOnFilterProps) => {
     const { inputValue, resultsMessage } = props;
-    return `${resultsMessage}${inputValue ? ` ${t('tagSelector.aria.onFilter')} ` + inputValue : ''}.`;
+    return `${resultsMessage}${inputValue ? ` ${t("tagSelector.aria.onFilter")} ` + inputValue : ""}.`;
   },
 });