@ndla/ui 19.2.0 → 20.0.0

package/src/MyNdla/Resource/FolderInput.tsx

@@ -10,24 +10,17 @@ import styled from '@emotion/styled';
 import { IconButton } from '@ndla/button';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { Cross } from '@ndla/icons/action';
-import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import React, { ChangeEvent, KeyboardEvent, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';
+import { Input } from '@ndla/forms';
+import { css } from '@emotion/core';
 
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
   colors.brand.tertiary,
 )}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
 
-const FolderInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: ${spacing.small};
-
-  background-image: ${borderStyle};
-`;
-
 const StyledFolderIcon = styled.span`
   display: flex;
   padding: ${spacing.small};
@@ -38,29 +31,33 @@ const StyledFolderIcon = styled.span`
   }
 `;
 
-const StyledInput = styled.input`
-  color: ${colors.brand.primary};
-  outline: none;
+const inputWrapperStyle = css`
+  padding: ${spacing.small};
+  background: none;
+  background-image: ${borderStyle};
   border: none;
-  margin-right: auto;
-  line-height: 1.75em;
+`;
 
-  ::selection {
-    background: ${colors.brand.lighter};
+const StyledInput = styled(Input)`
+  && {
+    line-height: 1.75em;
+    color: ${colors.brand.primary};
+    ::selection {
+      background: ${colors.brand.lighter};
+    }
   }
 `;
 
 interface Props {
   onAddFolder: (name: string) => void;
   onClose: () => void;
-  autoFocus?: boolean;
+  autoSelect?: boolean;
 }
 
-const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
+const FolderInput = ({ onAddFolder, onClose, autoSelect }: Props) => {
   const { t } = useTranslation();
   const newFolderText = t('treeStructure.newFolder.defaultName');
   const [input, setInput] = useState<string>(newFolderText);
-  const [mounted, setMounted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -68,36 +65,36 @@ const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
   };
 
   const onKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input) {
+    if (e.key === 'Enter' && input.trim()) {
       e.preventDefault();
       onAddFolder(input);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
     }
   };
 
-  useEffect(() => {
-    if (mounted && autoFocus) {
-      inputRef.current?.select();
-    } else {
-      setMounted(true);
-    }
-  }, [mounted, autoFocus]);
-
   return (
-    <FolderInputWrapper>
-      <StyledFolderIcon>
-        <FolderOutlined />
-      </StyledFolderIcon>
-      <StyledInput
-        ref={inputRef}
-        value={input}
-        onChange={handleInputChange}
-        onKeyDown={onKeydown}
-        aria-label={newFolderText}
-      />
-      <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
-        <Cross />
-      </IconButton>
-    </FolderInputWrapper>
+    <StyledInput
+      autoSelect={autoSelect}
+      customCss={inputWrapperStyle}
+      warningText={!input.trim() ? t('myNdla.folder.missingName') : undefined}
+      ref={inputRef}
+      value={input}
+      onChange={handleInputChange}
+      onKeyDown={onKeydown}
+      aria-label={newFolderText}
+      iconLeft={
+        <StyledFolderIcon>
+          <FolderOutlined />
+        </StyledFolderIcon>
+      }
+      iconRight={
+        <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
+          <Cross />
+        </IconButton>
+      }
+    />
   );
 };
 

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -12,8 +12,8 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
+import { Spinner } from '@ndla/icons';
 import { OneColumn } from '../Layout';
-import Spinner from '../Spinner';
 import NavigationArrow, { StyledNavigationArrow } from './NavigationArrow';
 import SlideshowIndicator from './SlideshowIndicator';
 import { MovieType } from './types';

package/src/Search/LoadingWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, animations } from '@ndla/core';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 
 const StyledWrapper = styled.div`
   position: absolute;

package/src/Search/SearchResult.jsx

@@ -9,7 +9,7 @@ import Button from '@ndla/button';
 import { FilterTabs } from '@ndla/tabs';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
-import Spinner from '../../lib/Spinner';
+import { Spinner } from '@ndla/icons';
 
 const resultClasses = BEMHelper('c-search-result');
 

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -9,7 +9,7 @@
 import React, { memo, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 import constants from '../model';
 import SearchTypeHeader, { FilterOptionsType } from './SearchTypeHeader';
 import SearchItems from './SearchItems';

package/src/TreeStructure/FolderNameInput.tsx

@@ -13,7 +13,7 @@ import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
 import { spacing, colors, misc, animations } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { isMobile } from 'react-device-detect';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 
 const ArrowRight = styled(ArrowDropDownRaw)`
   color: ${colors.text.primary};

package/src/index.ts

@@ -109,8 +109,6 @@ export {
 } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';
 
-export { default as Spinner } from './Spinner';
-
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 
 export { default as ContentTypeResult } from './Search/ContentTypeResult';

package/src/locale/messages-en.ts

@@ -861,8 +861,10 @@ const messages = {
     open: 'Open menu',
     close: 'Close menu',
   },
+  cancel: 'Cancel',
   close: 'Close',
   title: 'Title',
+  save: 'Save',
   image: {
     altText: 'Alt-text',
     caption: 'Caption',
@@ -993,6 +995,7 @@ const messages = {
       folder: 'Folder',
       delete: 'Delete',
       edit: 'Edit',
+      missingName: 'Folder name required',
     },
     confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',

package/src/locale/messages-nb.ts

@@ -861,6 +861,8 @@ const messages = {
   },
   close: 'Lukk',
   title: 'Tittel',
+  cancel: 'Avbryt',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bildetekst',
@@ -991,6 +993,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/src/locale/messages-nn.ts

@@ -860,8 +860,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -992,6 +994,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',

package/src/locale/messages-se.ts

@@ -859,8 +859,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -991,6 +993,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/src/locale/messages-sma.ts

@@ -859,8 +859,10 @@ const messages = {
     open: 'Åpne meny',
     close: 'Lukk meny',
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -991,6 +993,7 @@ const messages = {
       folder: 'Mappe',
       delete: 'Slett',
       edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd',
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/es/Spinner/Spinner.js

@@ -1,42 +0,0 @@
-import _styled from "@emotion/styled-base";
-
-/**
- * Copyright (c) 2018-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 { colors, spacing } from '@ndla/core';
-import { jsx as ___EmotionJSX } from "@emotion/core";
-
-var SpinnerDiv = /*#__PURE__*/_styled('div', {
-  target: "eecx2hs0",
-  label: "SpinnerDiv"
-})("border:calc(", function (props) {
-  return spacing[props.size];
-}, " / 6.5) solid rgba(0,0,0,0.1);border-bottom-color:", function (props) {
-  return props.inverted ? '#fff' : colors.brand.primary;
-}, ";border-radius:50%;animation:spinnerAnimation 0.7s linear infinite;height:", function (props) {
-  return spacing[props.size];
-}, ";width:", function (props) {
-  return spacing[props.size];
-}, ";margin:", function (props) {
-  return props.margin;
-}, ";display:block;@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNkMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplPzogU3BhY2luZ05hbWVzO1xuICBtYXJnaW4/OiBzdHJpbmc7XG4gIGludmVydGVkPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIGV4dGVuZHMgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG59XG5cbmNvbnN0IFNwaW5uZXJEaXYgPSBzdHlsZWQoJ2RpdicpPFN0eWxlZFByb3BzPmBcbiAgYm9yZGVyOiBjYWxjKCR7KHByb3BzKSA9PiBzcGFjaW5nW3Byb3BzLnNpemVdfSAvIDYuNSkgc29saWQgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItYm90dG9tLWNvbG9yOiAkeyhwcm9wcykgPT4gKHByb3BzLmludmVydGVkID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBhbmltYXRpb246IHNwaW5uZXJBbmltYXRpb24gMC43cyBsaW5lYXIgaW5maW5pdGU7XG4gIGhlaWdodDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICB3aWR0aDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBkaXNwbGF5OiBibG9jaztcbiAgQGtleWZyYW1lcyBzcGlubmVyQW5pbWF0aW9uIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3Bpbm5lciA9ICh7IHNpemUgPSAnbGFyZ2UnLCBtYXJnaW4gPSBgJHtzcGFjaW5nLm5vcm1hbH0gYXV0b2AsIGludmVydGVkIH06IFBhcnRpYWw8UHJvcHM+KSA9PiAoXG4gIDxTcGlubmVyRGl2IHNpemU9e3NpemV9IG1hcmdpbj17bWFyZ2lufSBpbnZlcnRlZD17ISFpbnZlcnRlZH0gLz5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFNwaW5uZXI7XG4iXX0= */"));
-
-var Spinner = function Spinner(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'large' : _ref$size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? "".concat(spacing.normal, " auto") : _ref$margin,
-      inverted = _ref.inverted;
-  return ___EmotionJSX(SpinnerDiv, {
-    size: size,
-    margin: margin,
-    inverted: !!inverted
-  });
-};
-
-export default Spinner;

package/es/Spinner/index.js

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

package/lib/Spinner/Spinner.d.ts

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) 2018-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-/// <reference types="react" />
-import { SpacingNames } from '@ndla/core';
-interface Props {
-    size?: SpacingNames;
-    margin?: string;
-    inverted?: boolean;
-}
-declare const Spinner: ({ size, margin, inverted }: Partial<Props>) => JSX.Element;
-export default Spinner;

package/lib/Spinner/Spinner.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@ndla/core");
-
-var _core2 = require("@emotion/core");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * Copyright (c) 2018-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-var SpinnerDiv = ( /*#__PURE__*/0, _styledBase["default"])('div', {
-  target: "eecx2hs0",
-  label: "SpinnerDiv"
-})("border:calc(", function (props) {
-  return _core.spacing[props.size];
-}, " / 6.5) solid rgba(0,0,0,0.1);border-bottom-color:", function (props) {
-  return props.inverted ? '#fff' : _core.colors.brand.primary;
-}, ";border-radius:50%;animation:spinnerAnimation 0.7s linear infinite;height:", function (props) {
-  return _core.spacing[props.size];
-}, ";width:", function (props) {
-  return _core.spacing[props.size];
-}, ";margin:", function (props) {
-  return props.margin;
-}, ";display:block;@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNkMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplPzogU3BhY2luZ05hbWVzO1xuICBtYXJnaW4/OiBzdHJpbmc7XG4gIGludmVydGVkPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIGV4dGVuZHMgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG59XG5cbmNvbnN0IFNwaW5uZXJEaXYgPSBzdHlsZWQoJ2RpdicpPFN0eWxlZFByb3BzPmBcbiAgYm9yZGVyOiBjYWxjKCR7KHByb3BzKSA9PiBzcGFjaW5nW3Byb3BzLnNpemVdfSAvIDYuNSkgc29saWQgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItYm90dG9tLWNvbG9yOiAkeyhwcm9wcykgPT4gKHByb3BzLmludmVydGVkID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBhbmltYXRpb246IHNwaW5uZXJBbmltYXRpb24gMC43cyBsaW5lYXIgaW5maW5pdGU7XG4gIGhlaWdodDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICB3aWR0aDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBkaXNwbGF5OiBibG9jaztcbiAgQGtleWZyYW1lcyBzcGlubmVyQW5pbWF0aW9uIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3Bpbm5lciA9ICh7IHNpemUgPSAnbGFyZ2UnLCBtYXJnaW4gPSBgJHtzcGFjaW5nLm5vcm1hbH0gYXV0b2AsIGludmVydGVkIH06IFBhcnRpYWw8UHJvcHM+KSA9PiAoXG4gIDxTcGlubmVyRGl2IHNpemU9e3NpemV9IG1hcmdpbj17bWFyZ2lufSBpbnZlcnRlZD17ISFpbnZlcnRlZH0gLz5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFNwaW5uZXI7XG4iXX0= */"));
-
-var Spinner = function Spinner(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'large' : _ref$size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? "".concat(_core.spacing.normal, " auto") : _ref$margin,
-      inverted = _ref.inverted;
-  return (0, _core2.jsx)(SpinnerDiv, {
-    size: size,
-    margin: margin,
-    inverted: !!inverted
-  });
-};
-
-var _default = Spinner;
-exports["default"] = _default;

package/lib/Spinner/index.d.ts

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

package/lib/Spinner/index.js

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

package/src/Spinner/Spinner.tsx

@@ -1,46 +0,0 @@
-/**
- * Copyright (c) 2018-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 styled from '@emotion/styled';
-import { colors, spacing, SpacingNames } from '@ndla/core';
-
-interface Props {
-  size?: SpacingNames;
-  margin?: string;
-  inverted?: boolean;
-}
-
-interface StyledProps extends Props {
-  size: SpacingNames;
-}
-
-const SpinnerDiv = styled('div')<StyledProps>`
-  border: calc(${(props) => spacing[props.size]} / 6.5) solid rgba(0, 0, 0, 0.1);
-  border-bottom-color: ${(props) => (props.inverted ? '#fff' : colors.brand.primary)};
-  border-radius: 50%;
-  animation: spinnerAnimation 0.7s linear infinite;
-  height: ${(props) => spacing[props.size]};
-  width: ${(props) => spacing[props.size]};
-  margin: ${(props) => props.margin};
-  display: block;
-  @keyframes spinnerAnimation {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-const Spinner = ({ size = 'large', margin = `${spacing.normal} auto`, inverted }: Partial<Props>) => (
-  <SpinnerDiv size={size} margin={margin} inverted={!!inverted} />
-);
-
-export default Spinner;

package/src/Spinner/index.ts

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