@ndla/ui 47.4.1 → 48.0.0

package/src/InfoBlock/InfoBlock.tsx

@@ -1,61 +0,0 @@
-/*
- * Copyright (c) 2022-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 styled from '@emotion/styled';
-import { spacing, fonts, colors } from '@ndla/core';
-
-const InfoBlockWrapper = styled.div`
-  border-bottom: 1px solid ${colors.brand.neutral7};
-  padding: ${spacing.small} 0;
-`;
-
-const IconWrapper = styled.div`
-  align-items: flex-start;
-  display: flex;
-
-  svg {
-    height: 25px;
-    width: 25px;
-  }
-`;
-
-const StyledTextWrapper = styled.div`
-  ${fonts.sizes(18)}
-`;
-
-const TitleWrapper = styled.div`
-  display: flex;
-
-  gap: ${spacing.small};
-`;
-
-const StyledTitle = styled.h2`
-  ${fonts.sizes('18')}
-  font-weight: 700;
-  margin: 0;
-`;
-
-interface InfoBlockProps {
-  icon?: ReactNode;
-  title?: string;
-  children?: ReactNode;
-}
-export const InfoBlock = ({ icon, title, children }: InfoBlockProps) => {
-  return (
-    <InfoBlockWrapper>
-      <TitleWrapper>
-        <IconWrapper>{icon}</IconWrapper>
-        <StyledTitle>{title}</StyledTitle>
-      </TitleWrapper>
-      <StyledTextWrapper>{children}</StyledTextWrapper>
-    </InfoBlockWrapper>
-  );
-};
-
-export default InfoBlock;

package/src/InfoBlock/index.ts

@@ -1 +0,0 @@
-export { InfoBlock } from './InfoBlock';

package/src/InfoBox/InfoBox.tsx

@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { ReactNode } from 'react';
-
-interface Props {
-  children?: ReactNode;
-}
-
-const StyledInfoBox = styled.div`
-  background: ${colors.support.yellowLight};
-  padding: ${spacing.small} ${spacing.normal};
-  font-family: ${fonts.sans};
-  ${fonts.sizes('14px', '18px')};
-  margin-bottom: ${spacing.medium};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('16px', '20px')};
-    padding: ${spacing.normal};
-  }
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const InfoBox = ({ children }: Props) => <StyledInfoBox>{children}</StyledInfoBox>;
-
-export default InfoBox;

package/src/InfoBox/index.ts

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

package/src/InfoWidget/InfoWidget.tsx

@@ -1,127 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { ReactNode } from 'react';
-import { Forward } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import { colors, fonts, spacing } from '@ndla/core';
-
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-
-interface InfoWidgetSectionProps {
-  center?: boolean;
-}
-const InfoWidgetSection = styled.section<InfoWidgetSectionProps>`
-  max-width: 600px;
-  margin: ${(p) => p.center && '0 auto'};
-`;
-
-const InfoWidgetDescription = styled.div`
-  padding: ${spacing.normal};
-  background: ${colors.brand.lighter};
-  color: ${colors.brand.dark};
-  ${fonts.sizes('18px', '26px')};
-
-  p {
-    margin-top: 0;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-`;
-
-const InfoWidgetLinksContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`;
-
-const iconLinkStyle = css`
-  width: 47px;
-  height: 47px;
-  border-radius: 100%;
-  background: ${colors.brand.lighter};
-  color: ${colors.brand.dark};
-  box-shadow: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: ${spacing.small};
-
-  .c-icon {
-    width: 20px;
-    height: 20px;
-  }
-`;
-
-const IconSafeLink = styled(SafeLink)(iconLinkStyle);
-
-const IconAnchor = styled.a(iconLinkStyle);
-const IconSpan = styled.span(iconLinkStyle);
-
-const StyledMainLink = styled.a`
-  color: ${colors.brand.dark};
-  ${fonts.sizes('16px', '24px')};
-`;
-interface Props {
-  heading: string;
-  headingLevel: HeadingLevel;
-  description: string;
-  mainLink: {
-    name: string;
-    url?: string;
-    href?: string;
-  };
-  iconLinks: {
-    name: string;
-    url?: string;
-    href?: string;
-    icon: ReactNode;
-  }[];
-  center?: boolean;
-}
-
-const InfoWidget = ({ heading, description, mainLink, iconLinks, headingLevel, center = false }: Props) => (
-  <InfoWidgetSection center={center}>
-    <SectionHeading headingLevel={headingLevel} large>
-      {heading}
-    </SectionHeading>
-    <InfoWidgetDescription>
-      <p>{description}</p>
-    </InfoWidgetDescription>
-    <InfoWidgetLinksContainer>
-      {iconLinks?.map((link) => {
-        if (link.url) {
-          return (
-            <IconSafeLink key={link.url} to={link.url} aria-label={link.name}>
-              {link.icon}
-            </IconSafeLink>
-          );
-        }
-        if (link.href) {
-          return (
-            <IconAnchor key={link.href} href={link.href} aria-label={link.name}>
-              {link.icon}
-            </IconAnchor>
-          );
-        }
-        return (
-          <IconSpan key={link.name} aria-label={link.name}>
-            {link.icon}
-          </IconSpan>
-        );
-      })}
-      {mainLink.url ? (
-        <div className="o-text-link__wrapper o-text-link__wrapper--right">
-          <SafeLink className="o-text-link" to={mainLink.url}>
-            <span>{mainLink.name}</span> <Forward />
-          </SafeLink>
-        </div>
-      ) : (
-        <StyledMainLink href={mainLink.href}>{mainLink.name}</StyledMainLink>
-      )}
-    </InfoWidgetLinksContainer>
-  </InfoWidgetSection>
-);
-
-export default InfoWidget;

package/src/InfoWidget/index.ts

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

package/src/Subject/Subject.tsx

@@ -1,199 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-
-const SubjectContentWrapper = styled.div`
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 100px;
-  }
-`;
-
-const StyledBreadcrumb = styled.div`
-  display: none;
-  margin: ${spacing.medium} 0 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: block;
-    margin-left: ${spacingUnit * 3}px;
-  }
-`;
-
-interface StyledSubjectContentProps {
-  twoColumns: boolean;
-}
-const StyledSubjectContent = styled.div<StyledSubjectContentProps>`
-  display: block;
-  flex-flow: column;
-  margin-top: ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: flex;
-    flex-flow: row;
-    margin-top: ${spacing.large};
-    > *:not(:only-child):last-child {
-      padding-left: ${spacingUnit * 3}px;
-    }
-  }
-
-  & > *:first-child {
-    margin-bottom: ${spacing.large};
-    ${mq.range({ from: breakpoints.tablet })} {
-      margin-right: 80px;
-    }
-  }
-
-  ${(p) =>
-    !p.twoColumns &&
-    css`
-      ${mq.range({ from: breakpoints.desktop })} {
-        > *:not(:only-child) {
-          max-width: 50%;
-        }
-      }
-      ${mq.range({ until: breakpoints.desktop })} {
-        flex-direction: column;
-      }
-      ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-        > *:not(:only-child):last-child {
-          padding-left: $subject-margin;
-        }
-      }
-    `};
-
-  ${(p) =>
-    p.twoColumns &&
-    css`
-      flex-flow: column;
-      & > *:first-child {
-        ${mq.range({ from: breakpoints.tablet })} {
-          margin-right: 0;
-        }
-      }
-    `};
-`;
-export const SubjectContent = ({
-  children,
-  breadcrumb,
-  twoColumns = false,
-}: {
-  children: ReactNode;
-  breadcrumb: ReactNode;
-  twoColumns?: boolean;
-}) => (
-  <SubjectContentWrapper>
-    <StyledBreadcrumb>{breadcrumb}</StyledBreadcrumb>
-    <StyledSubjectContent twoColumns={twoColumns}>{children}</StyledSubjectContent>
-  </SubjectContentWrapper>
-);
-
-const StyledSecondaryContent = styled.div`
-  background: ${colors.brand.greyLightest};
-  padding: ${spacing.large} 0;
-  margin-top: ${spacing.large};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacingUnit * 3}px 0 ${spacing.large};
-    margin-bottom: 100px;
-    margin-top: 0;
-  }
-`;
-
-export const SubjectSecondaryContent = ({ children }: { children: ReactNode }) => (
-  <StyledSecondaryContent>{children}</StyledSecondaryContent>
-);
-
-const StyledChildContent = styled.div`
-  padding: 0 ${spacing.normal};
-`;
-
-export const SubjectChildContent = ({ children }: { children: ReactNode }) => (
-  <StyledChildContent>{children}</StyledChildContent>
-);
-
-export const SubjectTopics = ({ messages, children }: { messages: { heading: string }; children: ReactNode }) => (
-  <section>
-    <header>
-      <h1>{messages.heading}</h1>
-    </header>
-    <div>{children}</div>
-  </section>
-);
-
-const SidebarWrapper = styled.div`
-  display: block;
-  margin: 0 ${spacing.normal};
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-basis: 390px;
-    flex-shrink: 0;
-    margin: 0px 0 0 0;
-  }
-`;
-
-export const SubjectSidebarWrapper = ({ children }: { children: ReactNode }) => (
-  <SidebarWrapper>{children}</SidebarWrapper>
-);
-
-interface StyledSubjectFlexWrapperProps {
-  noMargin: boolean;
-}
-const StyledSubjectFlexWrapper = styled.div<StyledSubjectFlexWrapperProps>`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${(p) => !p.noMargin && spacing.large};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-direction: row;
-  }
-`;
-
-export const SubjectFlexWrapper = ({ children, noMargin = false }: { children: ReactNode; noMargin?: boolean }) => (
-  <StyledSubjectFlexWrapper noMargin={noMargin}>{children}</StyledSubjectFlexWrapper>
-);
-
-const StyledSubjectFlexChild = styled.div`
-  box-sizing: border-box;
-  padding: 0 ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-basis: 50%;
-    flex-grow: 1;
-    flex-direction: row;
-  }
-
-  &:last-child {
-    & > * {
-      ${mq.range({ until: breakpoints.tablet })} {
-        margin-bottom: 0;
-      }
-    }
-  }
-  & > * {
-    ${mq.range({ from: breakpoints.tablet })} {
-      margin-bottom: o;
-    }
-  }
-`;
-
-const StyledSectionHeading = styled(SectionHeading)`
-  margin: 0 0 ${spacing.small} 0;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: 0 0 ${spacing.normal} 0;
-  }
-`;
-
-interface SubjectSectionTitleProps {
-  headingLevel: HeadingLevel;
-  children: ReactNode;
-}
-
-export const SubjectSectionTitle = ({ children, headingLevel = 'h2' }: SubjectSectionTitleProps) => (
-  <StyledSectionHeading large headingLevel={headingLevel}>
-    {children}
-  </StyledSectionHeading>
-);

package/src/Subject/SubjectNewContent.tsx

@@ -1,111 +0,0 @@
-import styled from '@emotion/styled';
-import SafeLink from '@ndla/safelink';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { HeadingLevel } from '@ndla/typography';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { SubjectSectionTitle } from './Subject';
-
-interface Props {
-  headingLevel: HeadingLevel;
-  heading: string;
-  content: {
-    name: string;
-    url: string;
-    formattedDate: string;
-    contentType: string;
-  }[];
-}
-
-const StyledSection = styled.section`
-  ${mq.range({ until: breakpoints.tablet })} {
-    margin-bottom: ${spacing.large};
-  }
-`;
-
-const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    margin-left: ${spacing.large} !important;
-  }
-`;
-
-const StyledUl = styled.ul`
-  margin: 0;
-  padding: 0;
-`;
-
-const StyledListItem = styled.li`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const LeftWrapper = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  .c-icon {
-    width: 14px;
-    height: 14px;
-    margin-left: ${spacing.xsmall};
-    margin-right: ${spacing.xsmall};
-  }
-
-  .c-content-type-badge {
-    margin-top: 23px;
-    ${mq.range({ until: breakpoints.tabletWide })} {
-      display: none;
-    }
-  }
-`;
-
-const ContentLinkWrapper = styled.div`
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding-left: ${spacing.normal};
-  }
-  padding-bottom: ${spacing.small};
-`;
-
-const DateWrapper = styled.div`
-  color: ${colors.text.light};
-  ${fonts.sizes('14px', '18px')};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('16px', '20px')};
-  }
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  color: ${colors.brand.dark};
-  font-weight: 600;
-  ${fonts.sizes('16px', '20px')};
-  margin-bottom: ${spacing.xsmall};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('18px', '30px')};
-  }
-`;
-
-const SubjectNewContent = ({ heading, content, headingLevel }: Props) => (
-  <StyledSection>
-    <StyledSubjectSectionTitle headingLevel={headingLevel}>{heading}</StyledSubjectSectionTitle>
-    <nav>
-      <StyledUl>
-        {content.map((item, index) => (
-          <StyledListItem key={index}>
-            <LeftWrapper>
-              <ContentTypeBadge type={item.contentType} size="x-small" background border />
-              <ContentLinkWrapper>
-                <DateWrapper>{item.formattedDate}</DateWrapper>
-                <StyledSafeLink to={item.url}>{item.name}</StyledSafeLink>
-              </ContentLinkWrapper>
-            </LeftWrapper>
-          </StyledListItem>
-        ))}
-      </StyledUl>
-    </nav>
-  </StyledSection>
-);
-
-export default SubjectNewContent;

package/src/Subject/SubjectSocial.tsx

@@ -1,36 +0,0 @@
-import styled from '@emotion/styled';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { ReactNode } from 'react';
-import { HeadingLevel } from '@ndla/typography';
-import { SubjectSectionTitle } from './Subject';
-
-const StyledSubjectSocialContent = styled.div`
-  display: none;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    display: flex;
-  }
-`;
-
-export const SubjectSocialContent = ({ children }: { children: ReactNode }) => (
-  <StyledSubjectSocialContent>{children}</StyledSubjectSocialContent>
-);
-
-const StyledSection = styled.section`
-  flex-basis: 50%;
-  &:nth-child(odd) {
-    margin-right: ${spacing.normal};
-  }
-`;
-
-interface SubjectSocialSectionProps {
-  children: ReactNode;
-  title?: string;
-  headingLevel: HeadingLevel;
-}
-
-export const SubjectSocialSection = ({ children, title = '', headingLevel }: SubjectSocialSectionProps) => (
-  <StyledSection>
-    <SubjectSectionTitle headingLevel={headingLevel}>{title}</SubjectSectionTitle>
-    {children}
-  </StyledSection>
-);