@ndla/ui 22.2.0 → 24.0.0

package/src/ContentCard/component.content-card.scss

@@ -1,109 +0,0 @@
-.c-content-card {
-  position: relative;
-  display: block;
-  width: 100%;
-
-  &__image-wrapper {
-    width: 100%;
-    height: 72px;
-    border-radius: 5px;
-    position: relative;
-    overflow: hidden;
-    background: $background-color--gray-dark;
-
-    @include mq(tablet) {
-      height: $spacing--large * 2.5;
-    }
-  }
-
-  &__link {
-    color: $primary-color;
-    &:hover,
-    &:focus {
-      .c-content-card__heading {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__type {
-    @include inuit-font-size(12px, 20px);
-    position: absolute;
-    left: $spacing--small;
-    bottom: $spacing--small;
-    display: inline-block;
-    background: $brand-grey--lightest;
-    border-radius: 2px;
-    font-weight: 600;
-    margin: 0;
-    padding: 0 $spacing--small/3;
-
-    display: none;
-
-    @include mq(tablet) {
-      display: inline-block;
-    }
-  }
-
-  &__heading {
-    font-weight: $font-weight-semibold;
-    @include font-size(14px, 16px);
-    margin: $spacing--small / 2 0;
-    color: $brand-color;
-
-    @include mq(tablet) {
-      margin: $spacing--small 0 $spacing--small / 2;
-      @include font-size(20px, 22px);
-    }
-  }
-
-  &__description {
-    @include inuit-font-size(16px);
-    line-height: 1.25rem;
-    // font-family: $font-serif;
-    margin: 0;
-    display: none;
-
-    @include mq(tablet) {
-      display: block;
-    }
-  }
-
-  &__play-background {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    height: 35px;
-    width: 35px;
-    background-color: rgba(0, 0, 0, 0.48);
-    border-radius: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include mq(tablet) {
-      height: 42px;
-      width: 42px;
-    }
-
-    .c-icon {
-      color: $white;
-      height: 20px;
-      width: 20px;
-      margin-right: -1px;
-
-      @include mq(tablet) {
-        height: 25px;
-        width: 25px;
-      }
-    }
-  }
-  &__background-image {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    background-position: center center;
-    background-size: cover;
-  }
-}

package/src/FileList/component.file-list.scss

@@ -1,102 +0,0 @@
-.c-file-list {
-  margin: $spacing--large 0;
-  padding: $spacing--small 0 $spacing $spacing;
-  border-left: 2px solid $brand-grey--lightest;
-  font-family: $font;
-
-  &__heading {
-    @include font-size(16px, 18px);
-    letter-spacing: 0.05em;
-    margin: 0 0 $spacing--small / 2 0;
-    padding-bottom: $spacing--small / 2;
-
-    border-bottom: 2px solid $brand-grey--light;
-    font-weight: $font-weight-bold;
-    text-transform: uppercase;
-  }
-
-  &__files {
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    @include font-size(18px, 26px);
-    font-weight: $font-weight-semibold;
-    min-height: 60px;
-    background: $brand-grey--lighter;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: $spacing--small / 2;
-    padding: $spacing--small;
-
-    @include mq(tablet) {
-      padding: $spacing--small $spacing;
-    }
-  }
-
-  &__link {
-    box-shadow: none;
-    position: relative;
-    color: $brand-color;
-    margin-right: $spacing;
-    display: flex;
-    align-items: center;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      .c-file-list__link-text {
-        & > span {
-          box-shadow: $link--hover;
-        }
-      }
-    }
-  }
-
-  &__link-text {
-    & > span {
-      box-shadow: $link;
-    }
-  }
-
-  &__tooltip {
-    position: absolute;
-    display: none;
-    left: 50%;
-    top: -$spacing--small;
-    transform: translate3d(-50%, -100%, 0);
-    width: 300px;
-    text-align: center;
-    z-index: 1;
-
-    &[aria-hidden='false'] {
-      display: block;
-      animation-name: fadeIn;
-      animation-duration: 0.3s;
-    }
-  }
-
-  &__tooltip-text {
-    display: inline-block;
-    text-align: left;
-    background: $brand-color;
-    padding: $spacing--small;
-    @include font-size(14px, 18px);
-    font-weight: $font-weight-normal;
-    color: $white;
-  }
-
-  .c-icon {
-    margin-top: 3px;
-    flex-shrink: 0;
-    margin-right: $spacing--small;
-    height: 18px;
-    width: 18px;
-  }
-}

package/src/InfoBox/component.info-box.scss

@@ -1,21 +0,0 @@
-.c-info-box {
-  background: $yellow-light;
-  padding: $spacing--small $spacing;
-  font-family: $font;
-  @include font-size(14px, 18px);
-
-  margin-bottom: $spacing--medium;
-
-  @include mq(tablet) {
-    @include font-size(16px, 20px);
-    padding: $spacing;
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}

package/src/InfoWidget/component.info-widget.scss

@@ -1,52 +0,0 @@
-.c-info-widget {
-  max-width: 600px;
-
-  &--center {
-    margin: 0 auto;
-  }
-
-  &__description {
-    padding: $spacing;
-    background: $brand-color--lighter;
-    color: $brand-color--dark;
-    @include font-size(18px, 26px);
-
-    p {
-      margin-top: 0;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__links {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  &__main-link {
-    color: $brand-color--dark;
-    @include font-size(16px, 24px);
-  }
-
-  &__icon-link {
-    width: 47px;
-    height: 47px;
-    border-radius: 100%;
-    background: $brand-color--lighter;
-    color: $brand-color--dark;
-    box-shadow: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .c-icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    margin-right: $spacing--small;
-  }
-}

package/src/Portrait/component.portrait.scss

@@ -1,29 +0,0 @@
-.c-portrait {
-	width: 7rem;
-	height: 7rem;
-	span {
-		display: block;
-		border-radius: 50%;
-		background-color: rgba(0,0,0,0.16);
-		background-size: cover;
-		background-position: center center;
-		width: 7rem;
-		height: 7rem;
-	}
-	&--small {
-		width: 4rem;
-		height: 4rem;
-		span {
-			width: 4rem;
-			height: 4rem;
-		}
-	}
-	&--large {
-		width: 10rem;
-		height: 10rem;
-		span {
-			width: 10rem;
-			height: 10rem;
-		}
-	}
-}

package/src/Search/SearchFilter.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-
-import { FilterList } from '../Filter';
-
-const searchFilterClasses = BEMHelper({
-  prefix: 'c-',
-  name: 'search-filter',
-  outputIsString: true,
-});
-
-const valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-const SearchFilter = ({
-  label,
-  options,
-  values,
-  defaultVisibleCount,
-  showLabel,
-  hideLabel,
-  narrowScreenOnly,
-  contextFilter,
-  onChange,
-  noFilterSelectedLabel,
-  children,
-}) => {
-  const modifiers = [];
-
-  if (narrowScreenOnly) {
-    modifiers.push('narrow-screen-only');
-  }
-
-  if (contextFilter) {
-    modifiers.push('context-filter');
-  }
-
-  return (
-    <div className={searchFilterClasses('', modifiers)}>
-      <FilterList
-        options={options}
-        label={label}
-        labelNotVisible={contextFilter}
-        values={values}
-        defaultVisibleCount={defaultVisibleCount}
-        modifiers={!contextFilter ? 'search' : null}
-        showLabel={showLabel}
-        hideLabel={hideLabel}
-        onChange={onChange}
-        alignedGroup
-        noFilterSelectedLabel={noFilterSelectedLabel}
-      />
-      {children}
-    </div>
-  );
-};
-
-SearchFilter.propTypes = {
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: valueShape.isRequired,
-      title: PropTypes.string.isRequired,
-      noResults: PropTypes.bool,
-    }),
-  ).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  defaultVisibleCount: PropTypes.number,
-  onChange: PropTypes.func,
-  showLabel: PropTypes.string,
-  hideLabel: PropTypes.string,
-  narrowScreenOnly: PropTypes.bool,
-  noFilterSelectedLabel: PropTypes.string,
-  contextFilter: PropTypes.bool,
-  children: PropTypes.node,
-};
-
-SearchFilter.defaultProps = {
-  values: [],
-};
-
-export default SearchFilter;

package/src/Search/SearchFilterList.jsx

@@ -1,110 +0,0 @@
-import React, { Fragment } from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
-
-import { FilterList, ToggleItem } from '../Filter';
-
-const searchFilterClasses = BEMHelper({
-  prefix: 'c-',
-  name: 'search-filter',
-  outputIsString: true,
-});
-
-const valueShape = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-const SearchFilterList = ({
-  label,
-  options,
-  values,
-  narrowScreenOnly,
-  onChange,
-  onSubfilterChange,
-  preid,
-  noFilterSelectedLabel,
-  subjectValues,
-  children,
-}) => {
-  return (
-    <div className={searchFilterClasses('')}>
-      <div>
-        {options.map((option, index) => {
-          const itemModifiers = [];
-          const checked = values.some((value) => value === option.value);
-
-          if (!checked && index + 1 > this.state.visibleCount) {
-            itemModifiers.push('hidden');
-          }
-
-          const disabled = option.noResults || option.hits === 0;
-
-          if (disabled) {
-            itemModifiers.push('no-results');
-          }
-
-          return (
-            <Fragment key={option.value}>
-              <ToggleItem
-                modifiers={itemModifiers}
-                id={preid + option.value}
-                value={option.value}
-                disabled={disabled}
-                tabIndex={disabled ? -1 : 0}
-                checked={checked}
-                icon={option.icon}
-                label={option.title}
-                component="div"
-                onChange={(event) => {
-                  let newValues = null;
-                  if (event.currentTarget.checked) {
-                    newValues = [...values, option.value];
-                  } else {
-                    newValues = values.filter((value) => value !== option.value);
-                  }
-                  if (onChange) {
-                    onChange(newValues, option.value);
-                  }
-                }}
-              />
-              <div className={searchFilterClasses()}>
-                <FilterList
-                  options={option.subjectFilters}
-                  label={label}
-                  labelNotVisible
-                  values={subjectValues[option.value]}
-                  onChange={(subjectFilters, subjectFilter) =>
-                    onSubfilterChange(option.value, subjectFilters, subjectFilter)
-                  }
-                  alignedGroup
-                  noFilterSelectedLabel={noFilterSelectedLabel}
-                />
-              </div>
-            </Fragment>
-          );
-        })}
-      </div>
-      {children}
-    </div>
-  );
-};
-
-SearchFilterList.propTypes = {
-  label: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: valueShape.isRequired,
-      title: PropTypes.string.isRequired,
-      noResults: PropTypes.bool,
-    }),
-  ).isRequired,
-  values: PropTypes.arrayOf(valueShape),
-  onChange: PropTypes.func,
-  onSubfilterChange: PropTypes.func,
-  noFilterSelectedLabel: PropTypes.string,
-  children: PropTypes.node,
-};
-
-SearchFilterList.defaultProps = {
-  values: [],
-};
-
-export default SearchFilterList;

package/src/Search/SearchOverlay.jsx

@@ -1,38 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-import { Cross } from '@ndla/icons/action';
-import { CSSTransition } from 'react-transition-group';
-
-import Fade from '../Animation/Fade';
-
-const classes = BEMHelper({
-  prefix: 'c-',
-  name: 'search-overlay',
-});
-
-const SearchOverlay = ({ close, isOpen, children }) => (
-  <Fragment>
-    <Fade in={isOpen}>
-      <div className="o-backdrop" />
-    </Fade>
-    <CSSTransition timeout={300} classNames={classes().className} unmountOnExit in={isOpen}>
-      <div {...classes()}>
-        <div {...classes('container o-wrapper')}>
-          {children}
-          <button {...classes('close-button')} type="button" onClick={close}>
-            <Cross />
-          </button>
-        </div>
-      </div>
-    </CSSTransition>
-  </Fragment>
-);
-
-SearchOverlay.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  close: PropTypes.func,
-  children: PropTypes.node.isRequired,
-};
-
-export default SearchOverlay;