@ndla/ui 48.0.0 → 49.0.0

package/src/Search/ToggleSearchButton.tsx

@@ -1,64 +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 { forwardRef } from 'react';
-import { spacing, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
-import { Search } from '@ndla/icons/common';
-import { ButtonProps, ButtonV2 } from '@ndla/button';
-import styled from '@emotion/styled';
-
-interface Props extends ButtonProps {
-  ndlaFilm?: boolean;
-}
-
-const StyledButton = styled(ButtonV2)`
-  border-radius: ${misc.borderRadius};
-  border: 0;
-  color: ${colors.brand.primary};
-  align-items: center;
-  background: transparent;
-
-  svg {
-    height: 24px;
-    width: 24px;
-  }
-
-  ${fonts.sizes('16px', '32px')};
-
-  &[data-film='true'] {
-    background: ${colors.ndlaFilm.filmColorBright};
-    color: ${colors.white};
-  }
-
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.small} ${spacing.normal};
-    background: ${colors.brand.greyLighter};
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    border: 0;
-  }
-`;
-
-const StyledSpan = styled.span`
-  margin-right: ${spacing.normal};
-  font-weight: ${fonts.weight.normal};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: none;
-  }
-`;
-
-const ToggleSearchButton = forwardRef<HTMLButtonElement, Props>(({ children, ndlaFilm, ...rest }, ref) => (
-  <StyledButton data-film={ndlaFilm} type="button" ref={ref} {...rest}>
-    <StyledSpan>{children}</StyledSpan>
-    <Search />
-  </StyledButton>
-));
-
-export default ToggleSearchButton;

package/src/Translation/Translation.tsx

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2016-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 { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-
-const classes = new BEMHelper({
-  name: 'translation',
-  prefix: 'c-',
-});
-
-interface Props {
-  children: ReactNode;
-  index: number;
-}
-
-const Translation = ({ children, index }: Props) => (
-  <div {...classes('')}>
-    <div {...classes('index')}>{index}</div>
-    <dl {...classes('wrapper')}>{children}</dl>
-  </div>
-);
-
-export default Translation;

package/src/Translation/TranslationLine.tsx

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) 2016-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 { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-
-const classes = new BEMHelper({
-  name: 'translation',
-  prefix: 'c-',
-});
-
-interface Props {
-  isTerm?: boolean;
-  children: ReactNode;
-  lang?: string;
-  langName?: string;
-}
-
-const TranslationLine = ({ children, lang, langName, isTerm = false }: Props) => {
-  const hasLang = langName && lang;
-  const content = (
-    <>
-      <div {...classes('line-body')} lang={lang}>
-        {children}
-      </div>
-      {hasLang && <div {...classes('line-lang')}>{langName}</div>}
-    </>
-  );
-
-  if (isTerm) {
-    return <dt {...classes('line', hasLang ? 'lang' : '')}>{content}</dt>;
-  }
-
-  return <dd {...classes('line', hasLang ? 'lang' : '')}>{content}</dd>;
-};
-
-export default TranslationLine;

package/src/Translation/component.translation.scss

@@ -1,53 +0,0 @@
-.c-translation {
-  display: flex;
-  margin: $spacing 0;
-  padding: 0 0 $spacing 0;
-  border-bottom: 2px solid $brand-color--lighter;
-}
-.c-translation__line-lang {
-  margin: auto 0 auto $spacing--small;
-  background: $brand-color--secondary;
-  color: $white;
-  display: flex;
-  flex-wrap: wrap;
-  @include font-size(12px, 20px);
-  border-radius: 2px;
-  font-weight: 600;
-  padding: 0 $spacing--small/3;
-
-  @include mq(tablet) {
-    margin: auto 0 auto $spacing--small;
-    display: none;
-  }
-}
-.c-translation__index {
-  width: 7%;
-  height: 100%;
-  padding-right: $spacing--small;
-  color: $brand-color--secondary;
-}
-.c-translation__wrapper {
-  width: 90%;
-  display: block;
-  margin: 0;
-}
-.c-translation__line {
-  padding: 2px 4px;
-  vertical-align: middle;
-  display: flex;
-  margin-left: 0;
-}
-.c-translation__line-body {
-  @include font-size(16px, 26px);
-
-  @include mq(tablet) {
-    @include font-size(18px, 30px);
-  }
-}
-
-.c-translation__line--lang:hover {
-  background: $brand-color--lighter;
-  .c-translation__line-lang {
-    display: inline-block;
-  }
-}

package/src/Translation/index.ts

@@ -1,2 +0,0 @@
-export { default as Translation } from './Translation';
-export { default as TranslationLine } from './TranslationLine';