@ndla/ui 8.2.2 → 8.2.5

package/lib/model/SubjectTypes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+export declare const SUBJECT = "subject";
+export declare const RESOURCE_COLLECTION = "resourceCollection";

package/lib/model/SubjectTypes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RESOURCE_COLLECTION = exports.SUBJECT = void 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.
+ *
+ */
+var SUBJECT = 'subject';
+exports.SUBJECT = SUBJECT;
+var RESOURCE_COLLECTION = 'resourceCollection';
+exports.RESOURCE_COLLECTION = RESOURCE_COLLECTION;

package/lib/model/index.d.ts

@@ -7,8 +7,10 @@
  */
 import * as contentTypes from './ContentType';
 import * as subjectCategories from './SubjectCategories';
+import * as subjectTypes from './SubjectTypes';
 declare const model: {
     contentTypes: typeof contentTypes;
     subjectCategories: typeof subjectCategories;
+    subjectTypes: typeof subjectTypes;
 };
 export default model;

package/lib/model/index.js

@@ -11,6 +11,8 @@ var contentTypes = _interopRequireWildcard(require("./ContentType"));
 
 var subjectCategories = _interopRequireWildcard(require("./SubjectCategories"));
 
+var subjectTypes = _interopRequireWildcard(require("./SubjectTypes"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,7 +26,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
  */
 var model = {
   contentTypes: contentTypes,
-  subjectCategories: subjectCategories
+  subjectCategories: subjectCategories,
+  subjectTypes: subjectTypes
 };
 var _default = model;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "8.2.2",
+  "version": "8.2.5",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.1.4",
-    "@ndla/carousel": "^1.2.4",
-    "@ndla/core": "^2.1.0",
+    "@ndla/button": "^2.1.5",
+    "@ndla/carousel": "^1.2.5",
+    "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.3",
     "@ndla/icons": "^1.6.1",
-    "@ndla/licenses": "^4.0.4",
-    "@ndla/modal": "^1.2.4",
-    "@ndla/safelink": "^1.1.5",
-    "@ndla/switch": "^0.1.4",
+    "@ndla/licenses": "^4.0.5",
+    "@ndla/modal": "^1.2.5",
+    "@ndla/safelink": "^1.1.6",
+    "@ndla/switch": "^0.1.5",
     "@ndla/tabs": "^1.1.3",
-    "@ndla/tooltip": "^0.3.4",
+    "@ndla/tooltip": "^0.3.5",
     "@ndla/util": "^2.0.5",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6df959ff51e98a78f73ef3140bf39174b5bf2221"
+  "gitHead": "9277be43c1524139f9c1fb6282ed1525591e41c3"
 }

package/src/ResourceBox/ResourceBox.tsx

@@ -15,124 +15,75 @@ import { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import Image from '../Image';
 
-const BoxWrapper = styled.div`
+const ResourceBoxContainer = styled.div`
   display: flex;
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding: 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;
+    gap: 0;
     flex-direction: column;
-    margin: 0 auto;
-    width: 80%;
-    left: 0;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-bottom: 0;
-    margin-bottom: 24px;
-    height: auto;
+    padding-top: 30px;
     text-align: center;
   }
 `;
 
-const Boxtitle = styled.h3`
+const Title = 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`
+const Caption = styled.p`
   font-size: ${fonts.sizes(14)};
+  max-width: 600px;
 
   ${mq.range({ until: breakpoints.desktop })} {
     line-height: 22px;
   }
 `;
 
-const StyledButtonDiv = styled.div`
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   align-items: flex-start;
   ${mq.range({ until: breakpoints.desktop })} {
-    padding-bottom: 10px;
-    margin: 0 auto;
+    align-items: center;
+    padding-top: 10px;
   }
 `;
-const ResourceBoxStyledButton = styled(SafeLinkButton)`
+
+const StyledButton = styled(SafeLinkButton)`
   border: 1px solid ${colors.brand.tertiary};
   :hover {
     background-color: ${colors.brand.primary};
+    border: 1px solid ${colors.brand.primary};
     color: white;
   }
-  ${mq.range({ until: breakpoints.desktop })} {
-    width: 210px;
-  }
 `;
-const ResourceBoxLaunchIcon = styled(Launch)`
+
+const StyledLaunchIcon = 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 ImageWrapper = styled.div`
+  img {
+    object-fit: cover;
+    width: 134px;
+    height: 134px;
+    border-radius: 5px;
 
-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;
+    ${mq.range({ until: breakpoints.desktop })} {
+      width: 200px;
+      height: 200px;
+    }
   }
 `;
 
@@ -157,33 +108,27 @@ type Props = {
 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>
+    <ResourceBoxContainer>
+      <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>
+      <ImageWrapper>
+        <Image alt={title} src={image} />
+      </ImageWrapper>
+      <TextWrapper>
+        <Title>{title}</Title>
+        <Caption>{caption}</Caption>
 
-        <StyledButtonDiv>
-          <ResourceBoxStyledButton to={url} target="_blank" outline borderShape="rounded">
-            {t('license.other.itemImage.ariaLabel')}
-            <ResourceBoxLaunchIcon aria-hidden />
-          </ResourceBoxStyledButton>
-        </StyledButtonDiv>
-      </CenterItems>
-    </BoxWrapper>
+        <StyledButton to={url} target="_blank" outline borderShape="rounded">
+          {t('license.other.itemImage.ariaLabel')}
+          <StyledLaunchIcon aria-hidden />
+        </StyledButton>
+      </TextWrapper>
+    </ResourceBoxContainer>
   );
 };
 

package/src/locale/messages-en.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programme subj. SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Programme subj. YF',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Subject',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Resource collection',
+  },
   searchPage: {
     noHits: 'Your search - {{query}} - did not match any articles. ',
     noHitsShort: 'No results for search: {{query}}',

package/src/locale/messages-nb.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Fag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+  },
   searchPage: {
     noHits: 'Ingen artikler samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',

package/src/locale/messages-nn.ts

@@ -9,7 +9,7 @@
 import { contributorTypes } from '@ndla/licenses';
 import constants from '../model';
 
-export const { contentTypes, subjectCategories } = constants;
+export const { contentTypes, subjectCategories, subjectTypes } = constants;
 
 const titleTemplate = ' - NDLA';
 
@@ -53,6 +53,10 @@ const messages = {
     [subjectCategories.PROGRAMME_SUBJECTS]: 'Programfag SF',
     [subjectCategories.SPECIALIZED_SUBJECTS]: 'Yrkesfag',
   },
+  subjectTypes: {
+    [subjectTypes.SUBJECT]: 'Fag',
+    [subjectTypes.RESOURCE_COLLECTION]: 'Ressurssamling',
+  },
   searchPage: {
     noHits: 'Ingen artiklar samsvarte med søket ditt på: {{query}}',
     noHitsShort: 'Ingen treff på søk: {{query}}',