@ndla/ui 22.3.0 → 23.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.3.0",
+  "version": "23.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c8439d413eefda014a9438d78a34c1639194321"
+  "gitHead": "2f0095b2f2c730ff16d8c71fa8e867db87607c66"
 }

package/src/ResourceBox/ResourceBox.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Launch } from '@ndla/icons/common';
-import { LicenseByline } from '@ndla/licenses';
 import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import Image from '../Image';
@@ -81,12 +80,6 @@ const StyledImage = styled(Image)`
   }
 `;
 
-const LincenseWrapper = styled.div`
-  position: absolute;
-  top: 9px;
-  right: 0;
-`;
-
 interface ImageMeta {
   src: string;
   alt: string;
@@ -96,25 +89,13 @@ interface Props {
   image: ImageMeta;
   title: string;
   caption: string;
-  licenseRights: string[];
-  authors?: string[];
-  locale?: string;
   url: string;
 }
 
-export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
+export const ResourceBox = ({ image, title, caption, url }: Props) => {
   const { t } = useTranslation();
   return (
     <ResourceBoxContainer>
-      <LincenseWrapper>
-        <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-          {authors && authors.length > 0 && (
-            <div className="c-figure__byline-author-buttons">
-              <span className="c-figure__byline-authors">{authors.join(' ')}</span>
-            </div>
-          )}
-        </LicenseByline>
-      </LincenseWrapper>
       <StyledImage src={image.src} alt={image.alt} />
       <ContentWrapper>
         <Title>{title}</Title>

package/src/main.scss

@@ -16,7 +16,6 @@
 @import 'Aside/component.aside';
 @import 'Article/component.footnotes';
 @import 'NoContentBox/component.no-content-box.scss';
-@import 'BackgroundImage/component.background-image';
 @import 'Portrait/component.portrait.scss';
 @import 'global/components/component.logo';
 @import 'MediaList/component.medialist';

package/es/BackgroundImage/BackgroundImage.js

@@ -1,27 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = BEMHelper('c-background-image');
-
-var BackgroundImage = function BackgroundImage(_ref) {
-  var images = _ref.images,
-      _ref$showOverlay = _ref.showOverlay,
-      showOverlay = _ref$showOverlay === void 0 ? false : _ref$showOverlay;
-  return ___EmotionJSX("div", classes('', {
-    showOverlay: showOverlay
-  }), images && images.map(function (image) {
-    return image.types.map(function (type) {
-      return ___EmotionJSX("div", _extends({
-        key: "".concat(image.url).concat(type)
-      }, classes('background', type), {
-        style: {
-          backgroundImage: "url(".concat(image.url, ")")
-        }
-      }));
-    });
-  }));
-};
-
-export default BackgroundImage;

package/es/BackgroundImage/index.js

@@ -1,2 +0,0 @@
-import BackgroundImage from './BackgroundImage';
-export default BackgroundImage;

package/lib/BackgroundImage/BackgroundImage.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-declare type ImageType = 'mobile' | 'tablet' | 'desktop' | 'wide';
-interface Props {
-    showOverlay?: boolean;
-    className?: string;
-    images: {
-        url: string;
-        types: ImageType[];
-    }[];
-}
-declare const BackgroundImage: ({ images, showOverlay }: Props) => JSX.Element;
-export default BackgroundImage;

package/lib/BackgroundImage/BackgroundImage.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
-
-var _core = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var classes = (0, _reactBemHelper["default"])('c-background-image');
-
-var BackgroundImage = function BackgroundImage(_ref) {
-  var images = _ref.images,
-      _ref$showOverlay = _ref.showOverlay,
-      showOverlay = _ref$showOverlay === void 0 ? false : _ref$showOverlay;
-  return (0, _core.jsx)("div", classes('', {
-    showOverlay: showOverlay
-  }), images && images.map(function (image) {
-    return image.types.map(function (type) {
-      return (0, _core.jsx)("div", _extends({
-        key: "".concat(image.url).concat(type)
-      }, classes('background', type), {
-        style: {
-          backgroundImage: "url(".concat(image.url, ")")
-        }
-      }));
-    });
-  }));
-};
-
-var _default = BackgroundImage;
-exports["default"] = _default;

package/lib/BackgroundImage/index.d.ts

@@ -1,2 +0,0 @@
-import BackgroundImage from './BackgroundImage';
-export default BackgroundImage;

package/lib/BackgroundImage/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _BackgroundImage = _interopRequireDefault(require("./BackgroundImage"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = _BackgroundImage["default"];
-exports["default"] = _default;

package/src/BackgroundImage/BackgroundImage.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
-
-const classes = BEMHelper('c-background-image');
-
-type ImageType = 'mobile' | 'tablet' | 'desktop' | 'wide';
-
-interface Props {
-  showOverlay?: boolean;
-  className?: string;
-  images: {
-    url: string;
-    types: ImageType[];
-  }[];
-}
-
-const BackgroundImage = ({ images, showOverlay = false }: Props) => (
-  <div {...classes('', { showOverlay })}>
-    {images &&
-      images.map((image) =>
-        image.types.map((type) => (
-          <div
-            key={`${image.url}${type}`}
-            {...classes('background', type)}
-            style={{ backgroundImage: `url(${image.url})` }}
-          />
-        )),
-      )}
-  </div>
-);
-
-export default BackgroundImage;

package/src/BackgroundImage/component.background-image.scss

@@ -1,52 +0,0 @@
-.c-background-image {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  &--showOverlay {
-    .c-background-image__background:after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.3);
-      z-index: 0;
-    }
-  }
-
-  &__background {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    &--mobile {
-      display: none;
-      @include mq($from: mobile, $until: tablet) {
-        display: block;
-      }
-    }
-    &--tablet {
-      display: none;
-      @include mq($from: tablet, $until: desktop) {
-        display: block;
-      }
-    }
-    &--desktop {
-      display: none;
-      @include mq($from: desktop, $until: wide) {
-        display: block;
-      }
-    }
-    &--wide {
-      display: none;
-      @include mq($from: wide) {
-        display: block;
-      }
-    }
-  }
-}

package/src/BackgroundImage/index.ts

@@ -1,3 +0,0 @@
-import BackgroundImage from './BackgroundImage';
-
-export default BackgroundImage;