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

package/src/Table/Table.tsx

@@ -1,284 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-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";
-
-const MARGIN = 5;
-
-interface Props {
-  id?: string;
-  children?: ReactNode;
-  dangerouslySetInnerHTML?: {
-    __html: string;
-  };
-  lang?: string;
-}
-
-const ScrollBorder = styled.div`
-  position: absolute;
-  top: 0;
-  height: calc(100% - ${spacing.mediumlarge});
-  width: 3px;
-  background: ${colors.background.dark};
-  display: none;
-
-  &[data-block="true"] {
-    display: block;
-  }
-`;
-
-const RightScrollBorder = styled(ScrollBorder)`
-  right: 0;
-`;
-
-const LeftScrollBorder = styled(ScrollBorder)`
-  left: 0;
-`;
-
-export const TableStyling = css`
-  &::-webkit-scrollbar {
-    height: ${spacing.xsmall};
-  }
-  &::-webkit-scrollbar-track-piece {
-    background: ${colors.brand.lighter};
-    border-radius: ${spacing.xsmall};
-  }
-  &::-webkit-scrollbar-thumb {
-    background: ${colors.brand.dark};
-    border-radius: ${spacing.xsmall};
-  }
-  display: inline-block;
-
-  font-size: 85%;
-  max-width: 100%;
-
-  padding-left: ${spacing.xxsmall};
-  padding-right: ${spacing.xxsmall};
-
-  vertical-align: top;
-  table-layout: fixed;
-  overflow-x: auto;
-
-  // optional - enable iOS momentum scrolling
-  -webkit-overflow-scrolling: touch;
-
-  // scrolling shadows on left/right
-  &:after,
-  &:before {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-  > caption {
-    background-color: transparent;
-    font-weight: ${fonts.weight.bold};
-    font-family: ${fonts.sans};
-    ${fonts.sizes("16px", "20px")}
-    text-align: left;
-    text-transform: uppercase;
-    margin-bottom: ${spacing.small};
-  }
-
-  thead {
-    overflow: hidden;
-  }
-
-  thead tr td,
-  th {
-    font-weight: ${fonts.weight.bold};
-    border-bottom: 3px solid ${colors.brand.tertiary};
-    font-family: ${fonts.sans};
-    vertical-align: text-top;
-
-    ${fonts.sizes("16px", "22px")};
-    ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes("16px", "30px")};
-    }
-  }
-
-  tbody th {
-    border-bottom: 0;
-    border-right: 3px solid ${colors.brand.tertiary};
-    padding: ${spacing.xsmall};
-  }
-
-  thead tr:nth-child(2) th {
-    border: 1px solid ${colors.brand.lighter};
-    text-transform: none;
-
-    ${fonts.sizes("14px", "18px")};
-    ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes("15px", "26px")};
-    }
-
-    font-weight: ${fonts.weight.semibold};
-    height: 40px;
-    background-color: ${colors.brand.lighter};
-    padding: ${spacing.xxsmall} ${spacing.normal} ${spacing.xxsmall} ${spacing.xsmall};
-
-    &:empty {
-      background-color: transparent;
-    }
-  }
-
-  td {
-    border: 1px solid ${colors.brand.lighter};
-    vertical-align: top;
-
-    ${fonts.sizes("14px", "22px")};
-    ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes("15px", "30px")};
-    }
-
-    ol,
-    ul {
-      li,
-      li p {
-        ${fonts.sizes("14px", "22px")};
-        ${mq.range({ from: breakpoints.tablet })} {
-          ${fonts.sizes("15px", "30px")};
-        }
-        margin: ${spacing.xsmall} 0 !important;
-      }
-    }
-
-    p {
-      line-height: 1.6em;
-    }
-
-    p:last-child {
-      margin: 0;
-    }
-
-    img {
-      max-width: 100%;
-      min-width: 120px;
-    }
-  }
-
-  td,
-  th {
-    display: table-cell;
-    padding: ${spacing.xsmall} ${spacing.small};
-
-    &[data-align="center"] {
-      text-align: center;
-    }
-
-    &[data-align="right"] {
-      text-align: right;
-    }
-
-    &[data-align="left"] {
-      text-align: left;
-    }
-    p {
-      margin: 0;
-    }
-  }
-
-  // Remove excess spacing on headings inside table
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    margin-top: 0;
-  }
-
-  ul {
-    padding: 0 0 0 ${spacing.nsmall};
-  }
-
-  figure {
-    margin: 0;
-    padding: 0;
-    width: 100% !important;
-    left: 0 !important;
-  }
-`;
-
-const TableWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-`;
-
-const OverflowWrapper = styled.div`
-  position: relative;
-  overflow-x: auto;
-`;
-
-const StyledTable = styled.table`
-  ${TableStyling};
-`;
-
-const Table = ({ children, id, ...rest }: Props) => {
-  const [scrollPosition, setScrollPosition] = useState<ScrollPosition | undefined>(undefined);
-  const tableRef = useRef<HTMLTableElement>(null);
-
-  const checkScrollPosition = useCallback((el: HTMLTableElement) => {
-    const { scrollLeft, offsetWidth, scrollWidth, clientWidth } = el;
-    const hasScrollbar = scrollWidth > clientWidth;
-
-    if (!hasScrollbar) {
-      setScrollPosition(undefined);
-      return;
-    }
-
-    const isStart = scrollLeft <= MARGIN;
-    const isEnd = offsetWidth + scrollLeft >= scrollWidth - MARGIN;
-
-    if (isStart) {
-      setScrollPosition("start");
-    } else if (isEnd) {
-      setScrollPosition("end");
-    } else {
-      setScrollPosition("center");
-    }
-  }, []);
-
-  const onScroll = useMemo(
-    () =>
-      throttle((event: UIEvent<HTMLTableElement>) => {
-        const el = event.target as HTMLTableElement | undefined;
-        if (el) {
-          checkScrollPosition(el);
-        }
-      }, 100),
-    [checkScrollPosition],
-  );
-
-  useEffect(() => {
-    const el = tableRef.current;
-    if (el) {
-      checkScrollPosition(el);
-    }
-  }, [checkScrollPosition]);
-
-  return (
-    <TableWrapper>
-      <OverflowWrapper>
-        <LeftScrollBorder data-block={scrollPosition === "end" || scrollPosition === "center"} />
-        <StyledTable ref={tableRef} id={id} onScroll={onScroll} {...rest}>
-          {children}
-        </StyledTable>
-        <RightScrollBorder data-block={scrollPosition === "start" || scrollPosition === "center"} />
-      </OverflowWrapper>
-    </TableWrapper>
-  );
-};
-
-export default Table;

package/src/Table/index.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) 2018-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 Table from "./Table";
-
-export { TableStyling } from "./Table";
-export default Table;

package/src/TagSelector/Control.tsx

@@ -1,34 +0,0 @@
-/**
- * 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 { 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;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin: ${spacing.xxsmall};
-
-  overflow: auto;
-  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

@@ -1,55 +0,0 @@
-/**
- * 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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-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 {
-    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

@@ -1,31 +0,0 @@
-/**
- * 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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-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`
-  && {
-    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

@@ -1,38 +0,0 @@
-/**
- * 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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-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;
-  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

@@ -1,30 +0,0 @@
-/**
- * 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 { 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;
-  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

@@ -1,58 +0,0 @@
-/**
- * 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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-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;
-  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

@@ -1,31 +0,0 @@
-/**
- * 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 { 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;
-  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;

package/src/TagSelector/ValueButton.tsx

@@ -1,47 +0,0 @@
-/**
- * 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.
- *
- */
-
-/** @jsxImportSource @emotion/react */
-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;
-}
-
-export const StyledValueButton = styled.div<StyledProps>`
-  && {
-    background: ${({ selected }) => selected && colors.brand.primary};
-    color: ${({ selected }) => selected && colors.white};
-    padding: ${spacing.xxsmall} ${spacing.small};
-    margin: ${spacing.xxsmall};
-    border: none;
-  }
-`;
-
-const ValueButton = ({ innerProps, children, removeProps, isFocused }: MultiValueProps<TagType, true>) => {
-  return (
-    <StyledValueButton
-      selected={isFocused}
-      role="button"
-      css={buttonStyle({ colorTheme: "lighter", shape: "pill", size: "small" })}
-      {...innerProps}
-      {...removeProps}
-    >
-      <span aria-hidden>#</span>
-      {children}
-      <Cross />
-    </StyledValueButton>
-  );
-};
-
-export default ValueButton;