@ndla/ui 50.2.1 → 50.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.2.1",
+  "version": "50.2.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6f041fcaaf82427200c03a36b4c71cb5d8416731"
+  "gitHead": "55f97f38adf946d72fbc513ca3a7b00301d24a8a"
 }

package/src/FactBox/FactBox.tsx

@@ -6,51 +6,147 @@
  *
  */
 
-import { ReactNode, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
+import { ComponentProps, ReactNode, forwardRef, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { IconButtonV2 } from '@ndla/button';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import { css } from '@emotion/react';
 
-const classes = new BEMHelper({
-  name: 'factbox',
-  prefix: 'c-',
-});
-
-interface Props {
+interface Props extends ComponentProps<'aside'> {
   children?: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 const StyledAside = styled.aside`
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+  z-index: 1;
+  margin: ${spacing.large} 0 calc(${spacing.large} - ${spacing.nsmall}) 0;
+  overflow: hidden;
+  padding-bottom: ${spacing.nsmall};
+
+  @media print {
+    overflow: visible;
+  }
+
+  h2:first-of-type {
+    border-bottom: 2px solid ${colors.brand.primary};
+    margin-top: 0;
+    margin-bottom: ${spacing.normal};
+  }
+
+  h2,
+  h3,
+  h4,
+  h5 {
+    display: block;
+    margin-top: ${spacing.normal};
+    margin-bottom: ${spacing.small};
+    border-bottom: 1px solid ${colors.brand.light};
+  }
 `;
 
 const StyledDiv = styled.div`
   width: 100%;
+  position: relative;
+  color: ${colors.brand.greyDark};
+  padding: ${spacing.normal} ${spacing.normal} ${spacing.large};
+  border: 1px solid ${colors.brand.greyLight};
+  max-height: 190px;
+  transition: max-height 0.6s ease-in-out;
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 99%;
+    margin: 0.5% 0.5% 0 0.5%;
+    transition: opacity 0.5s cubic-bezier(0.74, -0.04, 0.96, 0.97);
+    /* The 00 after our color is to set its opacity to 0 */
+    background: linear-gradient(${colors.brand.light}00, ${colors.white});
+    opacity: 1;
+    z-index: 0;
+  }
+
+  @media print {
+    max-height: revert;
+    &:after {
+      display: none;
+    }
+  }
+
+  & > ul:not([class]),
+  :not(li) > ul:not([class]) {
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin-left: ${spacing.normal};
+    }
+  }
+
+  & > ol:not([class]),
+  :not(li) > ol:not([class]) {
+    ${mq.range({ from: breakpoints.desktop })} {
+      margin-left: ${spacing.large};
+    }
+  }
 `;
 
 const StyledIconButton = styled(IconButtonV2)`
   margin-top: -20px;
   z-index: 1;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const expandedStyle = css`
+  max-height: 500vh;
+`;
+
+const expandedContentStyle = css`
+  max-height: 500vh;
+  &:after {
+    opacity: 0;
+    z-index: -1;
+  }
 `;
 
-const FactBox = ({ children }: Props) => {
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const additional = isOpen ? 'expanded' : '';
-
-  return (
-    <StyledAside {...classes(undefined, undefined, additional)}>
-      <StyledDiv {...classes('content')}>{children}</StyledDiv>
-      <StyledIconButton onClick={() => setIsOpen((p) => !p)} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
-        {isOpen ? <ChevronUp /> : <ChevronDown />}
-      </StyledIconButton>
-    </StyledAside>
-  );
-};
+const FactBox = forwardRef<HTMLElement, Props>(
+  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    useEffect(() => {
+      if (open !== undefined) {
+        setIsOpen(open);
+      }
+    }, [open]);
+
+    const onClick = useCallback(() => {
+      const newOpen = !isOpen;
+      setIsOpen(newOpen);
+      onOpenChange?.(newOpen);
+    }, [isOpen, onOpenChange]);
+
+    return (
+      <StyledAside {...rest} css={[isOpen ? expandedStyle : undefined]} ref={ref}>
+        <StyledDiv css={isOpen ? expandedContentStyle : undefined}>{children}</StyledDiv>
+        <StyledIconButton onClick={onClick} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </StyledIconButton>
+      </StyledAside>
+    );
+  },
+);
 
 export default FactBox;

package/src/MediaList/MediaList.tsx

@@ -104,7 +104,7 @@ interface MediaListCCLinkProps {
   url: string;
 }
 export const MediaListCCLink = ({ children, url }: MediaListCCLinkProps) => (
-  <a className="c-figure-license__link" target="_blank" rel="noopener noreferrer license" href={url}>
+  <a rel="noopener noreferrer license" href={url}>
     {children}
   </a>
 );

package/src/main.scss

@@ -6,8 +6,6 @@
 
 @import 'global/components/component.bodybox';
 @import 'Figure/component.figure';
-@import 'Figure/component.figure-license';
-@import 'FactBox/component.factbox';
 @import 'Aside/component.aside';
 @import 'global/components/component.logo';
 @import 'MediaList/component.medialist';

package/src/FactBox/component.factbox.scss

@@ -1,167 +0,0 @@
-$padding-bottom: 17px;
-
-.c-factbox {
-  position: relative;
-  z-index: 1;
-  margin: $spacing--large 0 ($spacing--large - $padding-bottom) 0;
-  overflow: hidden;
-  padding-bottom: $padding-bottom;
-
-  @include font-size(16px, 1.5);
-
-  &__content {
-    position: relative;
-    color: $brand-grey-dark;
-    padding: $spacing $spacing $spacing--large;
-    border: 1px solid $brand-grey--light;
-    max-height: 190px;
-    transition: max-height 0.6s ease-in-out;
-    overflow: hidden;
-
-    &:after {
-      content: '';
-      text-align: center;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      width: 99%;
-      margin: 0.5% 0.5% 0 0.5%;
-      transition: opacity 0.5s cubic-bezier(0.74, -0.04, 0.96, 0.97);
-      background: linear-gradient(rgba($brand-color--light, 0), $white);
-      opacity: 1;
-      z-index: 0;
-    }
-
-    & > ul:not([class]),
-    :not(li) > ul:not([class]) {
-      @include mq(desktop) {
-        margin-left: $spacing;
-      }
-    }
-
-    & > ol:not([class]),
-    :not(li) > ol:not([class]) {
-      @include mq(desktop) {
-        margin-left: $spacing--large;
-      }
-    }
-  }
-
-  @media print {
-    overflow: visible;
-    &__content {
-      max-height: revert;
-      &:after {
-        display: none;
-      }
-    }
-  }
-
-  &.expanded {
-    max-height: 500vh;
-
-    .c-factbox {
-      &__content {
-        max-height: 500vh;
-
-        > div > * {
-          // Hack to fix links and interactions inside aside
-          z-index: 9;
-          position: relative;
-        }
-
-        &:after {
-          opacity: 0;
-          z-index: -1;
-        }
-      }
-
-      &__button:after {
-        transform: rotate(180deg);
-        top: 38%;
-      }
-      &__button--open {
-        visibility: visible;
-      }
-      &__button--collapsed {
-        visibility: hidden;
-      }
-    }
-  }
-  &__button--open {
-    visibility: hidden;
-  }
-  &__button--collapsed {
-    visibility: visible;
-  }
-
-  &__button {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 2px;
-    z-index: 9;
-    box-shadow: 0 0px 15px rgba(gray, 0.3);
-    margin: auto;
-    padding: 5px 15px !important;
-    width: 0px;
-    height: 33px;
-    text-align: center;
-    font-size: 14px;
-    border-radius: 50% !important;
-
-    &:after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      top: 45%;
-      left: 32%;
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid $white;
-    }
-    &:hover,
-    &:active {
-      background: $brand-color--dark !important;
-    }
-    @media print {
-      display: none !important;
-    }
-  }
-
-  img {
-    box-shadow: 0px 0px 9px -3px $brand-grey;
-  }
-
-  figure {
-    // Overrule default images width
-    width: 100% !important;
-    left: 0 !important;
-    padding: 0;
-  }
-
-  h2:first-child {
-    border-bottom: 2px solid $brand-color;
-    margin-top: 0;
-    margin-bottom: $spacing;
-    @include font-size(22px, 34px);
-    font-weight: $font-weight-bold;
-    position: relative;
-    z-index: 2;
-  }
-
-  h2,
-  h3,
-  h4,
-  h5 {
-    display: block;
-    @include font-size(16px, 1.5);
-    letter-spacing: 0.1em;
-    margin-top: $spacing;
-    margin-bottom: $spacing--small;
-    border-bottom: 1px solid $brand-color--light;
-  }
-}

package/src/Figure/component.figure-license.scss

@@ -1,129 +0,0 @@
-/**
-** FIGURE LICENSE
-** Popup displaying license info
-**
-**  PRINCIPLE:
-**
-**/
-
-.c-figure-license {
-  @include font-size(16px, 1.5);
-  font-family: $font-serif;
-}
-
-.c-figure-license__cta-block {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-self: flex-end;
-
-  > * {
-    margin-top: $spacing--small;
-  }
-
-  @include mq(tablet) {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-}
-
-.c-figure-license__button {
-  margin-bottom: $spacing--small;
-}
-
-.c-figure-license__link {
-  color: $brand-color;
-}
-
-.c-figure-license__list {
-  background: $white;
-  list-style: none;
-  padding: 0 $spacing--small $spacing--small $spacing--small;
-  margin-top: 0;
-  margin-bottom: 0;
-  li {
-    list-style: none;
-  }
-}
-
-.c-figure-license__item {
-  margin-bottom: 0;
-}
-
-.c-figure-license__close {
-  position: absolute;
-  top: $spacing;
-  right: $spacing;
-  background: transparent;
-  border: none;
-  color: $brand-color;
-  @include font-size(18px, 1.33);
-  font-weight: $font-weight-normal;
-  z-index: 9;
-  cursor: pointer;
-}
-
-.c-figure-license__cta-wrapper {
-  background-color: $white;
-  padding: $spacing;
-  margin-top: $spacing;
-}
-
-.c-figure-license__title {
-  margin: 0 0 $spacing--small;
-  @include font-size(18px, 1.33);
-  color: $brand-color;
-}
-.c-figure-license--fullscreen {
-  text-align: center;
-}
-.c-figure-license__content {
-  margin: auto;
-  display: inline-block;
-  text-align: left;
-}
-
-.c-figure-license__image-title {
-  @include font-size(28px, 30px);
-  margin: $spacing 0 0;
-  text-align: left;
-}
-
-.c-figure-license__hidden-content {
-  display: none;
-  flex-wrap: wrap;
-  > div {
-    width: 48%;
-    margin: 1%;
-  }
-}
-.c-figure-license__hidden-content--active {
-  display: flex;
-}
-
-.c-figure-license__image-wrapper {
-  display: block;
-  cursor: zoom-in;
-  margin: 0 auto;
-  padding: 0;
-  background: none;
-  border: 0;
-  overflow: hidden;
-  margin-top: $spacing--large;
-
-  img {
-    transition: transform 0.5s ease-out;
-    max-width: 100%;
-    max-height: 90vh;
-    height: auto;
-    margin: auto;
-  }
-
-  &--zoom {
-    cursor: zoom-out;
-
-    img {
-      transform: scale3d(2, 2, 2);
-    }
-  }
-}