@ndla/ui 8.0.1 → 8.1.0

package/lib/index.js

@@ -92,6 +92,7 @@ var _exportNames = {
   MessageBox: true,
   MessageBoxTag: true,
   MessageBoxType: true,
+  ResourceBox: true,
   CloseButton: true,
   AudioPlayer: true,
   initAudioPlayers: true,
@@ -171,7 +172,8 @@ var _exportNames = {
   CopyParagraphButton: true,
   ContentPlaceholder: true,
   Notion: true,
-  ConceptNotion: true
+  ConceptNotion: true,
+  BannerCard: true
 };
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
@@ -689,6 +691,12 @@ Object.defineProperty(exports, "MessageBoxType", {
     return _MessageBox.MessageBoxType;
   }
 });
+Object.defineProperty(exports, "ResourceBox", {
+  enumerable: true,
+  get: function get() {
+    return _ResourceBox.ResourceBox;
+  }
+});
 Object.defineProperty(exports, "CloseButton", {
   enumerable: true,
   get: function get() {
@@ -1169,6 +1177,12 @@ Object.defineProperty(exports, "ConceptNotion", {
     return _Notion.ConceptNotion;
   }
 });
+Object.defineProperty(exports, "BannerCard", {
+  enumerable: true,
+  get: function get() {
+    return _BannerCard.BannerCard;
+  }
+});
 
 var _indexJavascript = require("./index-javascript");
 
@@ -1251,6 +1265,8 @@ var _Breadcrumblist = _interopRequireDefault(require("./Breadcrumblist"));
 
 var _MessageBox = require("./MessageBox");
 
+var _ResourceBox = require("./ResourceBox");
+
 var _CloseButton = _interopRequireDefault(require("./CloseButton"));
 
 var _AudioPlayer = _interopRequireWildcard(require("./AudioPlayer"));
@@ -1309,6 +1325,8 @@ var _ContentPlaceholder = _interopRequireDefault(require("./ContentPlaceholder")
 
 var _Notion = require("./Notion");
 
+var _BannerCard = require("./BannerCard");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -36,7 +36,7 @@
     "@ndla/core": "^2.0.1",
     "@ndla/hooks": "^1.1.2",
     "@ndla/icons": "^1.6.1",
-    "@ndla/licenses": "^4.0.2",
+    "@ndla/licenses": "^4.0.3",
     "@ndla/modal": "^1.2.3",
     "@ndla/safelink": "^1.1.4",
     "@ndla/switch": "^0.1.3",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2849894d663c9e8e7281b13de80f899fac55e8fe"
+  "gitHead": "46dc3d930947a1a3102ce6b005d9aaffab2e2aa2"
 }

package/src/BannerCard/BannerCard.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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 React from 'react';
+import { colors, fonts, breakpoints, mq } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
+import styled from '@emotion/styled';
+import { Image } from '..';
+
+const BannerWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  max-width: 669px;
+  border-radius: 8px;
+  border: 1px solid ${colors.brand.greyLight};
+  font-family: ${fonts.sans};
+  padding: 30px;
+  gap: 30px;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    flex-direction: column;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  flex: 0 0 40%;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    display: block;
+    text-align: center;
+    width: 100%;
+  }
+`;
+
+const StyledImage = styled(Image)`
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    max-height: 150px;
+  }
+`;
+
+const TextWrapper = styled.div`
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin-left: 0;
+    margin-top: 10px;
+  }
+`;
+
+const ContentText = styled.p`
+  font-size: ${fonts.sizes(16)};
+  color: ${colors.brand.grey};
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+const LinkText = styled(SafeLink)`
+  font-size: ${fonts.sizes(16)};
+  color: ${colors.brand.grey};
+`;
+const TitleText = styled.h2`
+  margin-top: 7px;
+  font-size: ${fonts.sizes(22)};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin-top: 0;
+  }
+`;
+
+type ImageProps = {
+  altText: string;
+  imageSrc: string;
+};
+type BannerProps = {
+  link: string;
+  image: ImageProps;
+  title: string;
+  content: string;
+  linkText: string;
+};
+export const BannerCard = ({ link, title, content, linkText, image }: BannerProps) => {
+  return (
+    <BannerWrapper>
+      <ImageWrapper>
+        <StyledImage alt={image.altText} src={image.imageSrc} />
+      </ImageWrapper>
+      <TextWrapper>
+        <TitleText>{title}</TitleText>
+        <ContentText>{content}</ContentText>
+        <LinkText target="_self" to={link}>
+          {linkText}
+        </LinkText>
+      </TextWrapper>
+    </BannerWrapper>
+  );
+};
+
+export default BannerCard;

package/src/BannerCard/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 BannerCard from './BannerCard';
+
+export { BannerCard };

package/src/ResourceBox/ResourceBox.tsx

@@ -0,0 +1,190 @@
+/**
+ *
+ * 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 React from 'react';
+import { breakpoints, fonts, mq, colors } 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';
+
+const BoxWrapper = styled.div`
+  display: flex;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-radius: 5px;
+  border: 1px solid ${colors.brand.light};
+  position: relative;
+  left: -16.6666666667%;
+  width: 133.3333333333%;
+  align-items: stretch;
+  margin-bottom: 24px;
+  font-family: ${fonts.sans};
+  box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
+  gap: 40px;
+
+  ${mq.range({ until: breakpoints.desktop })} {
+    gap: 1px;
+    flex-direction: column;
+    margin: 0 auto;
+    width: 80%;
+    left: 0;
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-bottom: 0;
+    margin-bottom: 24px;
+    height: auto;
+    text-align: center;
+  }
+`;
+
+const Boxtitle = styled.h3`
+  font-weight: ${fonts.weight.bold};
+  font-size: ${fonts.sizes(18)};
+  margin-top: 0;
+  ${mq.range({ until: breakpoints.desktop })} {
+    text-align: center;
+    width: 100%;
+  }
+`;
+
+const Boxcaption = styled.p`
+  font-size: ${fonts.sizes(14)};
+
+  ${mq.range({ until: breakpoints.desktop })} {
+    line-height: 22px;
+  }
+`;
+
+const StyledButtonDiv = styled.div`
+  align-items: flex-start;
+  ${mq.range({ until: breakpoints.desktop })} {
+    padding-bottom: 10px;
+    margin: 0 auto;
+  }
+`;
+const ResourceBoxStyledButton = styled(SafeLinkButton)`
+  border: 1px solid ${colors.brand.tertiary};
+  :hover {
+    background-color: ${colors.brand.primary};
+    color: white;
+  }
+  ${mq.range({ until: breakpoints.desktop })} {
+    width: 210px;
+  }
+`;
+const ResourceBoxLaunchIcon = styled(Launch)`
+  margin-left: 8px;
+  height: 15px;
+  width: 15px;
+`;
+
+const BoxImage = styled(Image)`
+  object-fit: cover;
+  width: 134px;
+  height: 134px;
+  border-radius: 5px;
+
+  ${mq.range({ until: breakpoints.desktop })} {
+    width: 200px;
+    height: 200px;
+  }
+`;
+const ImageSectionWrapper = styled.div`
+  align-items: flex-start;
+  display: flex;
+  justify-content: center;
+  margin-left: 20px;
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin: 0 auto;
+    padding-top: 10px;
+  }
+`;
+
+const CaptionSectionWrapper = styled.div`
+  max-width: 600px;
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin: 0 auto;
+  }
+`;
+
+const CenterItems = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-flow: column;
+  ${mq.range({ until: breakpoints.desktop })} {
+    width: 100%;
+  }
+`;
+
+const TitleAndLicence = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${mq.range({ until: breakpoints.desktop })} {
+    text-align: center;
+    padding-top: 10px;
+    max-width: 200px;
+    margin: 0 auto;
+  }
+`;
+
+const LincenseWrapper = styled.div`
+  top: 9px;
+  position: absolute;
+  right: 1px;
+  ul {
+    margin-right: 0;
+  }
+`;
+
+type Props = {
+  image: string;
+  title: string;
+  caption: string;
+  licenseRights: string[];
+  authors?: { name: string }[];
+  locale?: string;
+  url: string;
+};
+export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <BoxWrapper>
+      <ImageSectionWrapper>
+        <BoxImage alt={title} src={image} sizes="25, 25" />
+      </ImageSectionWrapper>
+      <CenterItems>
+        <CaptionSectionWrapper>
+          <TitleAndLicence>
+            <Boxtitle>{title}</Boxtitle>
+            <LincenseWrapper>
+              <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
+                <div className="c-figure__byline-author-buttons">
+                  <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
+                </div>
+              </LicenseByline>
+            </LincenseWrapper>
+          </TitleAndLicence>
+          <Boxcaption>{caption}</Boxcaption>
+        </CaptionSectionWrapper>
+
+        <StyledButtonDiv>
+          <ResourceBoxStyledButton to={url} target="_blank" outline borderShape="rounded">
+            {t('license.other.itemImage.ariaLabel')}
+            <ResourceBoxLaunchIcon aria-hidden />
+          </ResourceBoxStyledButton>
+        </StyledButtonDiv>
+      </CenterItems>
+    </BoxWrapper>
+  );
+};
+
+export default ResourceBox;

package/src/ResourceBox/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 ResourceBox from './ResourceBox';
+
+export { ResourceBox };

package/src/TopicMenu/TopicMenu.jsx

@@ -74,6 +74,8 @@ export const TopicMenu = ({
   currentProgramme,
   initialSelectedMenu,
   messages,
+  selectedGrade,
+  onGradeChange,
 }) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
@@ -242,7 +244,8 @@ export const TopicMenu = ({
           <div {...classes('all-subjects')}>
             <ProgrammeSubjects
               grades={currentProgramme.grades}
-              preSelectedGradeIndex={currentProgramme.selectedGradeIndex ? currentProgramme.selectedGradeIndex : 0}
+              selectedGrade={selectedGrade}
+              onChangeGrade={onGradeChange}
               onNavigate={closeMenu}
             />
           </div>

package/src/index.ts

@@ -117,6 +117,8 @@ export { default as Breadcrumblist } from './Breadcrumblist';
 
 export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';
 
+export { ResourceBox } from './ResourceBox';
+
 export { default as CloseButton } from './CloseButton';
 export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
 
@@ -218,3 +220,4 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
+export { BannerCard } from './BannerCard';