@ndla/ui 28.0.0 → 30.0.0

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -10,7 +10,7 @@ import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 
-import { animations, fonts, spacing } from '@ndla/core';
+import { fonts, spacing } from '@ndla/core';
 
 import { ContentType } from '../SearchTypeResult';
 import { SearchItemType } from '../SearchItem';
@@ -23,32 +23,30 @@ type ItemTypeProps = {
 };
 
 const ImageElement = styled.img`
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   width: 100%;
   height: 100%;
   object-fit: cover;
+`;
+
+const ImageWrapper = styled.div`
   flex: 1;
-  min-height: 40px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  overflow: hidden;
 `;
 
 const NoImageElement = styled.div<ItemTypeProps>`
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   flex: 1;
-  min-height: 40px;
   background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
   position: relative;
-  transition: background-color ${animations.durations.normal} ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   .c-content-type-badge {
-    transition: all ${animations.durations.normal} ease-in-out;
-    position: absolute;
     width: 58px;
     height: 58px;
-    left: 50%;
-    margin-left: -29px;
-    top: 50%;
-    margin-top: -18px;
     opacity: 0.2;
     z-index: 3;
     svg {
@@ -68,7 +66,6 @@ const ContentTypeWrapper = styled.div<ItemTypeProps>`
   padding: 0 ${spacing.normal};
   ${fonts.sizes('12px', '16px')};
   font-weight: ${fonts.weight.semibold};
-  transition: all ${animations.durations.fast} ease-in-out;
 `;
 
 const ContentTypeIcon = styled.span<ItemTypeProps>`
@@ -85,11 +82,8 @@ const ContentTypeIcon = styled.span<ItemTypeProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: all ${animations.durations.fast} ease-in-out;
   z-index: 2;
-
   svg {
-    transition: all ${animations.durations.fast} ease-in-out;
     width: 20px;
     height: 20px;
   }
@@ -106,16 +100,18 @@ const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
   return (
     <>
       {img ? (
-        <ImageElement src={img.url} alt={img.alt} />
+        <ImageWrapper>
+          <ImageElement src={img.url} alt={img.alt} />
+        </ImageWrapper>
       ) : (
-        <NoImageElement className="resource-no-image" contentType={type}>
-          {type && <ContentTypeBadge type={type} border={false} />}
-        </NoImageElement>
+        <NoImageElement contentType={type}>{type && <ContentTypeBadge type={type} border={false} />}</NoImageElement>
       )}
       <ContentTypeWrapper className="resource-type-wrapper" contentType={type}>
-        <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
-          {img && type && <ContentTypeBadge type={type} border={false} />}
-        </ContentTypeIcon>
+        {img && type && (
+          <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
+            <ContentTypeBadge type={type} border={false} />
+          </ContentTypeIcon>
+        )}
         {type && t(`contentTypes.${type}`)}
         {labels.length > 0 && (
           <>

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { animations, colors, fonts, spacing } from '@ndla/core';
+import { colors, fonts, spacing } from '@ndla/core';
 
 import { SearchItemType } from '../SearchItem';
 import ContentTypeBadge from '../../ContentTypeBadge';
@@ -29,7 +29,6 @@ const Label = styled.div`
   display: flex;
   align-items: center;
   margin-top: ${spacing.small};
-  transition: all ${animations.durations.fast} ease-in-out;
 
   .c-content-type-badge {
     width: 26px;
@@ -38,7 +37,6 @@ const Label = styled.div`
   }
 
   svg {
-    transition: all ${animations.durations.fast} ease-in-out;
     width: 22px;
     height: 22px;
     color: ${colors.text.primary} !important;
@@ -54,14 +52,14 @@ const TopicHeaderVisualElementWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
+  border-radius: 50%;
 `;
 
 const TopicHeaderImage = styled.img`
-  border-radius: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all ${animations.durations.fast} ease-in-out;
   max-width: unset;
 `;
 

package/src/SectionHeading/SectionHeading.tsx

@@ -1,5 +1,5 @@
 import React, { ElementType, ReactNode } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import styled from '@emotion/styled';
 

package/src/SnackBar/SnackbarProvider.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import DefaultSnack from './DefaultSnackbar';

package/src/Subject/Subject.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 

package/src/Subject/SubjectAbout.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import SectionHeading from '../SectionHeading';

package/src/Subject/SubjectCarousel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Carousel, CarouselAutosize } from '@ndla/carousel';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';

package/src/Subject/SubjectHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { colors, fonts, mq, spacing, spacingUnit, breakpoints } from '@ndla/core';
 import OneColumn from '../Layout/OneColumn';
 

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/react';
+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/react';
+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;