@ndla/ui 25.0.0 → 25.1.0

package/src/Notion/FigureNotion.tsx

@@ -30,6 +30,7 @@ interface Props {
   hideFigCaption?: boolean;
   hideIconsAndAuthors?: boolean;
   figureType?: FigureType;
+  licenseButtons?: ReactNode;
 }
 
 const FigureNotion = ({
@@ -44,6 +45,7 @@ const FigureNotion = ({
   hideFigCaption,
   hideIconsAndAuthors,
   figureType,
+  licenseButtons,
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
@@ -84,8 +86,9 @@ const FigureNotion = ({
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}
-              />
+                }}>
+                {licenseButtons}
+              </FigureLicenseDialog>
             </FigureCaption>
           ) : (
             <BottomBorder />

package/src/Notion/NotionVisualElement.tsx

@@ -30,6 +30,7 @@ export type NotionVisualElementType = {
     src: string;
     alt?: string;
   };
+  licenseButtons?: ReactNode;
 };
 
 interface Props {
@@ -64,6 +65,7 @@ const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
       title={visualElement.title ?? ''}
       copyright={visualElement.copyright}
       licenseString={visualElement.copyright?.license?.license ?? ''}
+      licenseButtons={visualElement.licenseButtons}
       type={type}>
       {visualElement.image?.src ? (
         <img src={visualElement.image?.src} alt={visualElement.image.alt} />

package/src/SectionHeading/SectionHeading.tsx

@@ -1,6 +1,6 @@
 import React, { ElementType, ReactNode } from 'react';
 import { css } from '@emotion/core';
-import { breakpoints, fonts, mq, spacing } from '@ndla/core/src';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import styled from '@emotion/styled';
 
 interface StyledWrapperProps {
@@ -26,7 +26,7 @@ const StyledWrapper = styled.h2<StyledWrapperProps>`
     `};
 `;
 
-const LargeStyledWrapper = StyledWrapper.withComponent('h2');
+const LargeStyledWrapper = StyledWrapper.withComponent('h1');
 
 interface Props {
   children: ReactNode;
@@ -36,7 +36,11 @@ interface Props {
 
 const SectionHeading = ({ children, large = false, className }: Props) => {
   const Wrapper: ElementType = large ? LargeStyledWrapper : StyledWrapper;
-  return <Wrapper className={className}>{children}</Wrapper>;
+  return (
+    <Wrapper large={large} className={className}>
+      {children}
+    </Wrapper>
+  );
 };
 
 export default SectionHeading;

package/src/Subject/Subject.tsx

@@ -1,11 +1,76 @@
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-subject-content');
-
+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,
@@ -15,102 +80,116 @@ export const SubjectContent = ({
   breadcrumb: ReactNode;
   twoColumns?: boolean;
 }) => (
-  <div {...classes()}>
-    <div {...classes('breadcrumb')}>{breadcrumb}</div>
-    <div {...classes('content', { twoColumns })}>{children}</div>
-  </div>
+  <SubjectContentWrapper>
+    <StyledBreadcrumb>{breadcrumb}</StyledBreadcrumb>
+    <StyledSubjectContent twoColumns={twoColumns}>{children}</StyledSubjectContent>
+  </SubjectContentWrapper>
 );
 
-SubjectContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  breadcrumb: PropTypes.node.isRequired,
-  twoColumns: PropTypes.bool,
-};
+const StyledSecondaryContent = styled.div`
+  background: ${colors.brand.greyLightest};
+  padding: ${spacing.large} 0;
+  margin-top: ${spacing.large};
 
-const secondaryContentClass = BEMHelper('c-subject-secondary-content');
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacingUnit * 3}px 0 ${spacing.large};
+    margin-bottom: 100px;
+    margin-top: 0;
+  }
+`;
 
 export const SubjectSecondaryContent = ({ children }: { children: ReactNode }) => (
-  <div {...secondaryContentClass()}>{children}</div>
+  <StyledSecondaryContent>{children}</StyledSecondaryContent>
 );
 
-SubjectSecondaryContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const childContentClasses = BEMHelper('c-subject-child-content');
+const StyledChildContent = styled.div`
+  padding: 0 ${spacing.normal};
+`;
 
 export const SubjectChildContent = ({ children }: { children: ReactNode }) => (
-  <div {...childContentClasses()}>{children}</div>
+  <StyledChildContent>{children}</StyledChildContent>
 );
 
-SubjectChildContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const topicClasses = BEMHelper('c-subject-topics');
-
 export const SubjectTopics = ({ messages, children }: { messages: { heading: string }; children: ReactNode }) => (
-  <section {...topicClasses()}>
-    <header {...topicClasses('header')}>
-      <h1 {...topicClasses('heading')}>{messages.heading}</h1>
+  <section>
+    <header>
+      <h1>{messages.heading}</h1>
     </header>
-    <div {...topicClasses('content')}>{children}</div>
+    <div>{children}</div>
   </section>
 );
 
-SubjectTopics.propTypes = {
-  messages: PropTypes.shape({
-    heading: PropTypes.string.isRequired,
-  }),
-  children: PropTypes.node.isRequired,
-};
+const SidebarWrapper = styled.div`
+  display: block;
+  margin: 0 ${spacing.normal};
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
 
-const sidebarClasses = BEMHelper('c-subject-sidebar-wrapper');
+  ${mq.range({ from: breakpoints.tablet })} {
+    flex-basis: 390px;
+    flex-shrink: 0;
+    margin: 0px 0 0 0;
+  }
+`;
 
 export const SubjectSidebarWrapper = ({ children }: { children: ReactNode }) => (
-  <div {...sidebarClasses()}>{children}</div>
+  <SidebarWrapper>{children}</SidebarWrapper>
 );
 
-SubjectSidebarWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+interface StyledSubjectFlexWrapperProps {
+  noMargin: boolean;
+}
+const StyledSubjectFlexWrapper = styled.div<StyledSubjectFlexWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(p) => !p.noMargin && spacing.large};
 
-const subjectFlexWrapperClasses = BEMHelper('c-subject-flex');
+  ${mq.range({ from: breakpoints.tablet })} {
+    flex-direction: row;
+  }
+`;
 
 export const SubjectFlexWrapper = ({ children, noMargin = false }: { children: ReactNode; noMargin?: boolean }) => (
-  <div {...subjectFlexWrapperClasses('', { noMargin })}>{children}</div>
+  <StyledSubjectFlexWrapper noMargin={noMargin}>{children}</StyledSubjectFlexWrapper>
 );
 
-SubjectFlexWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-  noMargin: PropTypes.bool,
-};
+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;
+    }
+  }
+`;
 
 export const SubjectFlexChild = ({ children }: { children: ReactNode }) => (
-  <div className="c-subject-flex__child">{children}</div>
+  <StyledSubjectFlexChild>{children}</StyledSubjectFlexChild>
 );
 
-SubjectFlexChild.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+const StyledSectionHeading = styled(SectionHeading)`
+  margin: 0 0 ${spacing.small} 0;
 
-export const SubjectSectionTitle = ({
-  children,
-  className = null,
-}: {
-  children: ReactNode;
-  className?: string | null;
-}) => (
-  <SectionHeading large className={`c-subject-section-title ${className}`}>
-    {children}
-  </SectionHeading>
-);
-
-SubjectSectionTitle.propTypes = {
-  children: PropTypes.string.isRequired,
-  className: PropTypes.string,
-};
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin: 0 0 ${spacing.normal} 0;
+  }
+`;
 
-SubjectSectionTitle.defaultProps = {
-  className: null,
-};
+export const SubjectSectionTitle = ({ children }: { children: ReactNode }) => (
+  <StyledSectionHeading large>{children}</StyledSectionHeading>
+);

package/src/Subject/SubjectAbout.tsx

@@ -1,10 +1,9 @@
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-subject-about');
-
 interface Props {
   fixedWidth?: boolean;
   wide?: boolean;
@@ -13,30 +12,101 @@ interface Props {
   description: string;
 }
 
+interface SubjectAboutSectionProps {
+  fixedWidth: boolean;
+  wide: boolean;
+}
+
+const SubjectAboutSection = styled.section<SubjectAboutSectionProps>`
+  margin-bottom: ${spacing.large};
+  max-width: ${(p) => p.fixedWidth && '350px'};
+
+  ${(p) =>
+    p.wide &&
+    css`
+      margin: 40px 0;
+      ${mq.range({ from: breakpoints.tablet })} {
+        display: flex;
+        margin: 80px 0;
+      }
+    `};
+  ${mq.range({ from: breakpoints.tablet })} {
+    border: 1px solid ${colors.brand.greyLight};
+  }
+`;
+
+const StyledSectionHeading = styled(SectionHeading)`
+  margin: 0 0 ${spacing.small} 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: none;
+  }
+`;
+
+interface MediaWrapperProps {
+  wide?: boolean;
+}
+
+const MediaWrapper = styled.div<MediaWrapperProps>`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  & > *,
+  img {
+    width: 100%;
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    width: 50%;
+    min-width: 50%;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    width: 40%;
+    min-width: 40%;
+  }
+  ${(p) =>
+    p.wide &&
+    css`
+      margin: 40px 0;
+      ${mq.range({ from: breakpoints.tablet })} {
+        display: flex;
+        margin: 80px 0;
+      }
+    `};
+`;
+
+const StyledContent = styled.div`
+  padding: ${spacing.small} 0 0 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.normal};
+  }
+`;
+
+const StyledMainHeading = styled.h1`
+  margin: 0 0 ${spacing.small} 0;
+  ${fonts.sizes('14px', '32px')};
+  text-transform: uppercase;
+  font-weight: ${fonts.weight.bold};
+  display: none;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: block;
+  }
+`;
+
+const StyledDescription = styled.p`
+  margin: 0;
+  ${fonts.sizes('16px', '26px')};
+`;
+
 const SubjectAbout = ({ fixedWidth = false, media, heading, description, wide = false }: Props) => (
-  <section {...classes('', { fixedWidth, wide })}>
-    <SectionHeading large className={classes('top-heading').className}>
-      {heading}
-    </SectionHeading>
-    <div {...classes('media-wrapper', { wide })}>{media}</div>
-    <div {...classes('content')}>
-      <h1 {...classes('main-heading')}>{heading}</h1>
-      <p {...classes('description')}>{description}</p>
-    </div>
-  </section>
+  <SubjectAboutSection wide={wide} fixedWidth={fixedWidth}>
+    <StyledSectionHeading large>{heading}</StyledSectionHeading>
+    <MediaWrapper>{media}</MediaWrapper>
+    <StyledContent>
+      <StyledMainHeading>{heading}</StyledMainHeading>
+      <StyledDescription>{description}</StyledDescription>
+    </StyledContent>
+  </SubjectAboutSection>
 );
 
-SubjectAbout.propTypes = {
-  fixedWidth: PropTypes.bool,
-  wide: PropTypes.bool,
-  media: PropTypes.node.isRequired,
-  heading: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-};
-
-SubjectAbout.defaultProps = {
-  fixedWidth: false,
-  wide: false,
-};
-
 export default SubjectAbout;