@ndla/ui 23.0.0 → 24.0.0

package/src/InfoWidget/InfoWidget.tsx

@@ -1,13 +1,67 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import React, { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
 import { Forward } from '@ndla/icons/common';
-
 import SafeLink from '@ndla/safelink';
+import { colors, fonts, spacing } from '@ndla/core';
 
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-info-widget');
+interface InfoWidgetSectionProps {
+  center?: boolean;
+}
+const InfoWidgetSection = styled.section<InfoWidgetSectionProps>`
+  max-width: 600px;
+  margin: ${(p) => p.center && '0 auto'};
+`;
+
+const InfoWidgetDescription = styled.div`
+  padding: ${spacing.normal};
+  background: ${colors.brand.lighter};
+  color: ${colors.brand.dark};
+  ${fonts.sizes('18px', '26px')};
+
+  p {
+    margin-top: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const InfoWidgetLinksContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const iconLinkStyle = css`
+  width: 47px;
+  height: 47px;
+  border-radius: 100%;
+  background: ${colors.brand.lighter};
+  color: ${colors.brand.dark};
+  box-shadow: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: ${spacing.small};
 
+  .c-icon {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+const IconSafeLink = styled(SafeLink)(iconLinkStyle);
+
+const IconAnchor = styled.a(iconLinkStyle);
+const IconSpan = styled.span(iconLinkStyle);
+
+const StyledMainLink = styled.a`
+  color: ${colors.brand.dark};
+  ${fonts.sizes('16px', '24px')};
+`;
 interface Props {
   heading: string;
   description: string;
@@ -26,36 +80,33 @@ interface Props {
 }
 
 const InfoWidget = ({ heading, description, mainLink, iconLinks, center = false }: Props) => (
-  <section {...classes('', { center })}>
-    <SectionHeading large className={classes('heading').className}>
-      {heading}
-    </SectionHeading>
-    <div {...classes('description')}>
+  <InfoWidgetSection center={center}>
+    <SectionHeading large>{heading}</SectionHeading>
+    <InfoWidgetDescription>
       <p>{description}</p>
-    </div>
-    <div {...classes('links')}>
-      {iconLinks &&
-        iconLinks.map((link) => {
-          if (link.url) {
-            return (
-              <SafeLink key={link.url} {...classes('icon-link')} to={link.url} aria-label={link.name}>
-                {link.icon}
-              </SafeLink>
-            );
-          }
-          if (link.href) {
-            return (
-              <a key={link.href} href={link.href} {...classes('icon-link')} aria-label={link.name}>
-                {link.icon}
-              </a>
-            );
-          }
+    </InfoWidgetDescription>
+    <InfoWidgetLinksContainer>
+      {iconLinks?.map((link) => {
+        if (link.url) {
+          return (
+            <IconSafeLink key={link.url} to={link.url} aria-label={link.name}>
+              {link.icon}
+            </IconSafeLink>
+          );
+        }
+        if (link.href) {
           return (
-            <span key={link.name} {...classes('icon-link')} aria-label={link.name}>
+            <IconAnchor key={link.href} href={link.href} aria-label={link.name}>
               {link.icon}
-            </span>
+            </IconAnchor>
           );
-        })}
+        }
+        return (
+          <IconSpan key={link.name} aria-label={link.name}>
+            {link.icon}
+          </IconSpan>
+        );
+      })}
       {mainLink.url ? (
         <div className="o-text-link__wrapper o-text-link__wrapper--right">
           <SafeLink className="o-text-link" to={mainLink.url}>
@@ -63,12 +114,10 @@ const InfoWidget = ({ heading, description, mainLink, iconLinks, center = false
           </SafeLink>
         </div>
       ) : (
-        <a {...classes('main-link')} href={mainLink.href}>
-          {mainLink.name}
-        </a>
+        <StyledMainLink href={mainLink.href}>{mainLink.name}</StyledMainLink>
       )}
-    </div>
-  </section>
+    </InfoWidgetLinksContainer>
+  </InfoWidgetSection>
 );
 
 export default InfoWidget;

package/src/Portrait/Portrait.tsx

@@ -6,13 +6,25 @@
  *
  */
 
+import styled from '@emotion/styled';
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 
-const classes = new BEMHelper({
-  name: 'portrait',
-  prefix: 'c-',
-});
+interface PortraitWrapperProps {
+  size: string;
+}
+const PortraitWrapper = styled.div<PortraitWrapperProps>`
+  width: ${(p) => p.size};
+  height: ${(p) => p.size};
+  span {
+    display: block;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.16);
+    background-size: cover;
+    background-position: center center;
+    width: ${(p) => p.size};
+    height: ${(p) => p.size};
+  }
+`;
 
 interface Props {
   src: string;
@@ -21,10 +33,13 @@ interface Props {
   modifier?: 'small' | 'large';
 }
 
-const Portrait = ({ src, alt, modifier, className }: Props) => (
-  <div {...classes('', modifier, className)}>
-    <span role="img" aria-label={alt} style={{ backgroundImage: `url(${src})` }} />
-  </div>
-);
+const Portrait = ({ src, alt, modifier, className }: Props) => {
+  const size = modifier === 'small' ? '4rem' : modifier === 'large' ? '10rem' : '7rem';
+  return (
+    <PortraitWrapper size={size} className={className}>
+      <span role="img" aria-label={alt} style={{ backgroundImage: `url(${src})` }} />
+    </PortraitWrapper>
+  );
+};
 
 export default Portrait;

package/src/Search/{ActiveFilterContent.jsx → ActiveFilterContent.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { Cross } from '@ndla/icons/action';
 import { spacing, mq, breakpoints, colors, misc, fonts } from '@ndla/core';
@@ -32,7 +31,17 @@ export const StyledActiveFilterTitle = styled('span')`
   padding-right: ${spacing.small};
 `;
 
-const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }) => (
+interface Props {
+  filter: {
+    value: string;
+    title: string;
+    filterName?: string;
+  };
+  onFilterRemove: (value: string, filterName?: string) => void;
+  ariaLabel: string;
+}
+
+const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }: Props) => (
   <StyledActiveFilter
     aria-label={ariaLabel}
     type="button"
@@ -42,14 +51,4 @@ const ActiveFilterContent = ({ filter, onFilterRemove, ariaLabel }) => (
   </StyledActiveFilter>
 );
 
-ActiveFilterContent.propTypes = {
-  filter: PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    filterName: PropTypes.string,
-  }),
-  onFilterRemove: PropTypes.func.isRequired,
-  ariaLabel: PropTypes.string.isRequired,
-};
-
 export default ActiveFilterContent;

package/src/Search/{ActiveFilters.jsx → ActiveFilters.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { spacing, mq, breakpoints } from '@ndla/core';
@@ -7,7 +6,12 @@ import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import ActiveFilterContent, { StyledActiveFilterTitle } from './ActiveFilterContent';
 
-const StyledActiveFilters = styled('ul')`
+interface StyledActiveFiltersProps {
+  showOnSmallScreen?: boolean;
+  filterLength?: number;
+}
+
+const StyledActiveFilters = styled('ul')<StyledActiveFiltersProps>`
   margin: 0;
   padding: 0;
   flex-direction: column;
@@ -70,10 +74,22 @@ const StyledActiveFilterWrapper = styled('li')`
   }
 `;
 
-const getFilterLength = (filters) =>
+const getFilterLength = (filters: Filter[]) =>
   filters.filter((filter) => filter.filterName === 'filter_subjects' && filter.title).length;
 
-const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
+interface Filter {
+  title: string;
+  value: string;
+  filterName?: string;
+}
+
+interface Props {
+  filters: Filter[];
+  onFilterRemove: (value: string, filterName?: string) => void;
+  showOnSmallScreen?: boolean;
+}
+
+const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }: Props) => {
   const { t } = useTranslation();
   if (filters && filters.length > 0) {
     const filterLength = getFilterLength(filters);
@@ -90,7 +106,6 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
               })}>
               <ActiveFilterContent
                 filter={filter}
-                filterLength={filterLength}
                 ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {
                   filterName: filter.title,
                 })}
@@ -100,7 +115,6 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
           ) : (
             <ActiveFilterContent
               filter={filter}
-              filterLength={filterLength}
               onFilterRemove={onFilterRemove}
               ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {
                 filterName: filter.title,
@@ -121,15 +135,4 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
   return null;
 };
 
-ActiveFilters.propTypes = {
-  filters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      filterName: PropTypes.string,
-    }),
-  ),
-  onFilterRemove: PropTypes.func.isRequired,
-};
-
 export default ActiveFilters;

package/src/Search/{SearchField.jsx → SearchField.tsx}

@@ -6,27 +6,30 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FocusEvent, MouseEvent, RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
 import BEMHelper from 'react-bem-helper';
-import { Search as SearchIcon } from '@ndla/icons/common';
 import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { Search as SearchIcon } from '@ndla/icons/common';
 import { colors, spacing, mq, breakpoints, misc, fonts } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 
 import ActiveFilters from './ActiveFilters';
 import LoadingWrapper from './LoadingWrapper';
 
-import { ContentTypeResultShape } from '../shapes';
-
 const classes = new BEMHelper('c-search-field');
 
-const inputStyle = (frontPageSearch) => css`
+interface StyledInputProps {
+  frontPageSearch?: boolean;
+  hasFilters?: boolean;
+}
+
+const StyledInput = styled.input<StyledInputProps>`
   width: 100%;
   height: 48px;
   line-height: 28px;
   border: 1px solid ${colors.brand.greyLight};
-  border-radius: ${frontPageSearch ? '100px' : misc.borderRadius};
+  border-radius: ${(p) => (p.frontPageSearch ? '100px' : misc.borderRadius)};
   padding-right: ${spacing.large};
   padding-left: ${spacing.normal};
   flex-grow: 1;
@@ -41,61 +44,71 @@ const inputStyle = (frontPageSearch) => css`
     line-height: 58px;
     ${fonts.sizes('18px', '24px')};
   }
-`;
 
-const filterStyle = css`
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding-left: ${spacing.normal};
-  }
-  padding-left: 0;
-  border-left: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  ${(p) =>
+    p.hasFilters &&
+    css`
+      ${mq.range({ from: breakpoints.desktop })} {
+        padding-left: ${spacing.normal};
+      }
+      padding-left: 0;
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
 
-  &:focus {
-    border: 1px solid ${colors.brand.primary};
-    border-left: 0;
+      &:focus {
+        border: 1px solid ${colors.brand.primary};
+        border-left: 0;
 
-    & + .c-search-field__filters {
-      border: 1px solid ${colors.brand.primary};
-      border-right: 0;
-    }
-  }
+        & + .c-search-field__filters {
+          border: 1px solid ${colors.brand.primary};
+          border-right: 0;
+        }
+      }
+    `};
 `;
 
+interface Props {
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  filters?: { value: string; title: string }[];
+  onFilterRemove?: (value: string, filterName?: string) => void;
+  onFocus?: (event?: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+  loading?: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+  frontPageSearch?: boolean;
+}
+
 const SearchField = ({
   placeholder,
   value,
   onChange,
   filters,
-  small,
   onClick,
-  onFocus = () => {},
-  onBlur = () => {},
+  onFocus,
+  onBlur,
   loading,
   onFilterRemove,
   inputRef,
   frontPageSearch = false,
-}) => {
+}: Props) => {
   const { t } = useTranslation();
-  const handleOnFilterRemove = (value, filterName) => {
-    onFilterRemove(value, filterName);
-    if (inputRef) {
-      inputRef.current.focus();
-    }
-    onFocus();
+  const handleOnFilterRemove = (value: string, filterName?: string) => {
+    onFilterRemove?.(value, filterName);
+    inputRef?.current?.focus();
+    onFocus?.();
   };
-  const hasFilters = filters && filters.length > 0;
   return (
     <div {...classes('input-wrapper')}>
       {loading && <LoadingWrapper value={value} />}
-      <input
+      <StyledInput
+        frontPageSearch={frontPageSearch}
+        hasFilters={!!filters?.length}
         ref={inputRef}
         type="search"
-        css={css`
-          ${inputStyle(frontPageSearch)};
-          ${hasFilters && filterStyle};
-        `}
         aria-autocomplete="list"
         autoComplete="off"
         id="search"
@@ -108,7 +121,7 @@ const SearchField = ({
         onFocus={onFocus}
         onClick={onClick}
       />
-      {hasFilters && (
+      {filters && filters.length > 0 && (
         <div {...classes('filters')}>
           <ActiveFilters filters={filters} onFilterRemove={handleOnFilterRemove} />
         </div>
@@ -119,41 +132,18 @@ const SearchField = ({
           type="button"
           onClick={() => {
             onChange('');
-            onFocus();
-            if (inputRef) {
-              inputRef.current.focus();
-            }
+            onFocus?.();
+            inputRef?.current?.focus();
           }}
           onBlur={onBlur}>
           {t('welcomePage.resetSearch')}
         </button>
       )}
-      <button tabIndex="-1" {...classes('button', 'searchIcon')} type="submit" value="Search">
+      <button tabIndex={-1} {...classes('button', 'searchIcon')} type="submit" value="Search">
         <SearchIcon />
       </button>
     </div>
   );
 };
 
-SearchField.propTypes = {
-  value: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  filters: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-    }),
-  ),
-  searchResult: PropTypes.arrayOf(ContentTypeResultShape),
-  allResultUrl: PropTypes.string,
-  onFilterRemove: PropTypes.func,
-  small: PropTypes.bool,
-  onNavigate: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  loading: PropTypes.bool,
-};
-
 export default SearchField;