@ndla/ui 37.0.6 → 37.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "37.0.6",
+  "version": "37.1.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,21 +31,21 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.1",
+    "@ndla/accordion": "^2.2.3",
     "@ndla/article-scripts": "^3.0.17",
-    "@ndla/button": "^10.1.0",
+    "@ndla/button": "^10.1.2",
     "@ndla/carousel": "^3.1.0",
     "@ndla/core": "^4.0.0",
-    "@ndla/forms": "^4.3.0",
-    "@ndla/hooks": "^2.0.4",
+    "@ndla/forms": "^4.3.2",
+    "@ndla/hooks": "^2.0.6",
     "@ndla/icons": "^2.3.0",
     "@ndla/licenses": "^7.0.4",
     "@ndla/modal": "^2.3.0",
-    "@ndla/notion": "^4.3.0",
-    "@ndla/safelink": "^4.1.0",
+    "@ndla/notion": "^4.3.2",
+    "@ndla/safelink": "^4.1.2",
     "@ndla/switch": "^1.1.0",
-    "@ndla/tabs": "^2.2.0",
-    "@ndla/tooltip": "^4.1.0",
+    "@ndla/tabs": "^2.2.2",
+    "@ndla/tooltip": "^4.1.2",
     "@ndla/util": "^3.1.12",
     "@radix-ui/react-dropdown-menu": "2.0.2",
     "@radix-ui/react-popover": "^1.0.3",
@@ -75,7 +75,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@ndla/types-backend": "^0.2.5",
-    "@ndla/types-embed": "^2.0.1",
+    "@ndla/types-embed": "^2.0.2",
     "@types/reach__dialog": "^0.1.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8fbb556198d4854e5a5299964b10fe67adf7adb1"
+  "gitHead": "e5a5fe7892ddafb32b82798589fce56016772ce0"
 }

package/src/Article/Article.tsx

@@ -8,7 +8,6 @@
 
 import React, { ComponentType, ReactNode, useEffect, useRef, useState, forwardRef } from 'react';
 import BEMHelper from 'react-bem-helper';
-import isString from 'lodash/isString';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 
@@ -80,7 +79,7 @@ export const ArticleIntroduction = ({
     return text;
   },
 }: ArticleIntroductionProps) => {
-  if (isString(children)) {
+  if (typeof children === 'string') {
     return <div className="article_introduction">{parse(renderMarkdown(children))}</div>;
   }
   if (children) {

package/src/Embed/BrightcoveEmbed.tsx

@@ -7,7 +7,6 @@
  */
 
 import sortBy from 'lodash/sortBy';
-import isNumber from 'lodash/isNumber';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { COPYRIGHTED } from '@ndla/licenses';
@@ -35,8 +34,8 @@ const BrightcoveIframe = styled.iframe`
 `;
 
 export const makeIframeString = (url: string, width: string | number, height: string | number, title: string = '') => {
-  const strippedWidth = isNumber(width) ? width : width.replace(/\s*px/, '');
-  const strippedHeight = isNumber(height) ? height : height.replace(/\s*px/, '');
+  const strippedWidth = typeof width === 'number' ? width : width.replace(/\s*px/, '');
+  const strippedHeight = typeof height === 'number' ? height : height.replace(/\s*px/, '');
   const urlOrTitle = title || url;
   return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
 };

package/src/Embed/IframeEmbed.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import isNumber from 'lodash/isNumber';
 import { useEffect, useRef } from 'react';
 import { IframeMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
@@ -58,8 +57,8 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
 
   const { width, height, title, url } = embedData;
 
-  const strippedWidth = isNumber(width) ? width : width?.replace(/\s*px/, '');
-  const strippedHeight = isNumber(height) ? height : height?.replace(/\s*px/, '');
+  const strippedWidth = typeof width === 'number' ? width : width?.replace(/\s*px/, '');
+  const strippedHeight = typeof height === 'number' ? height : height?.replace(/\s*px/, '');
   const urlOrTitle = title || url;
 
   return (

package/src/Embed/ImageEmbed.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import isNumber from 'lodash/isNumber';
 import { ImageEmbedData, ImageMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { MouseEventHandler, useState } from 'react';
@@ -74,7 +73,7 @@ const getSizes = (size?: string, align?: string) => {
 };
 
 const getFocalPoint = (data: ImageEmbedData) => {
-  if (isNumber(data.focalX) && isNumber(data.focalY)) {
+  if (typeof data.focalX === 'number' && typeof data.focalY === 'number') {
     return { x: data.focalX, y: data.focalY };
   }
   return undefined;
@@ -82,10 +81,10 @@ const getFocalPoint = (data: ImageEmbedData) => {
 
 const getCrop = (data: ImageEmbedData) => {
   if (
-    isNumber(data.lowerRightX) &&
-    isNumber(data.lowerRightY) &&
-    isNumber(data.upperLeftX) &&
-    isNumber(data.upperLeftY)
+    typeof data.lowerRightX === 'number' &&
+    typeof data.lowerRightY === 'number' &&
+    typeof data.upperLeftX === 'number' &&
+    typeof data.upperLeftY === 'number'
   ) {
     return {
       startX: data.lowerRightX,

package/src/KeyFigure/KeyFigure.tsx

@@ -28,22 +28,26 @@ const TitleWrapper = styled.div`
   font-weight: ${fonts.weight.bold};
   overflow-wrap: break-word;
   ${fonts.sizes('38px', '48px')};
+  text-align: center;
+  max-width: 240px;
+
   ${mq.range({ until: breakpoints.tabletWide })} {
     ${fonts.sizes('30px', '36px')};
   }
-  max-width: 240px;
 `;
 
 const SubTitleWrapper = styled.div`
   overflow-wrap: 'break-word';
+  text-align: center;
+  ${fonts.sizes('18px', '29px')};
+  color: ${colors.text.primary};
+  font-weight: ${fonts.weight.normal};
+  font-family: ${fonts.sans};
+  max-width: 240px;
+
   ${mq.range({ until: breakpoints.tabletWide })} {
     padding-top: ${spacing.xxsmall};
-    ${fonts.sizes('18px', '29px')};
-    color: ${colors.text.primary};
-    font-weight: ${fonts.weight.normal};
-    font-family: ${fonts.sans};
   }
-  max-width: 240px;
 `;
 
 interface Props {

package/src/List/OrderedList.tsx

@@ -23,8 +23,8 @@ export const generateListResets = () => {
 
 const StyledOl = styled.ol`
   margin-top: 0;
-  margin-left: ${spacing.medium};
-  ${fonts.sizes('18px', '29px')};
+  margin-left: ${spacing.normal};
+  ${fonts.sizes('20px', '29px')};
   list-style-type: none;
   padding-left: ${spacing.medium} !important;
 
@@ -35,10 +35,10 @@ const StyledOl = styled.ol`
   }
   // List item
   li {
-    margin-top: ${spacing.normal};
+    margin-top: ${spacing.nsmall};
 
     p {
-      margin-bottom: ${spacing.normal} !important;
+      margin-bottom: ${spacing.nsmall} !important;
     }
   }
 

package/src/List/UnOrderedList.tsx

@@ -12,35 +12,32 @@ import { forwardRef, HTMLAttributes } from 'react';
 import { generateListResets } from './OrderedList';
 
 const StyledUl = styled.ul`
-  padding-left: ${spacing.small} !important;
-  margin-left: ${spacing.medium} !important;
-  > li {
-    ::marker {
-      color: ${colors.brand.secondary};
-    }
-  }
+  padding-left: ${spacing.nsmall} !important;
+  margin-left: ${spacing.normal} !important;
+  margin-top: 0;
+  ${fonts.sizes('20px', '29px')};
+
   ul {
     list-style-image: none;
-    padding-left: ${spacing.small};
+    padding-left: ${spacing.nsmall};
 
     margin-left: 0 !important;
   }
-  margin-top: 0;
-  ${fonts.sizes('18px', '29px')};
 
+  > li {
+    ::marker {
+      color: ${colors.brand.secondary};
+    }
+  }
   // List item
   li {
     padding-left: ${spacing.nsmall};
-    margin-top: ${spacing.normal};
+    margin-top: ${spacing.nsmall};
     p {
-      margin-bottom: ${spacing.normal} !important;
+      margin-bottom: ${spacing.nsmall} !important;
     }
   }
 
-  // Child unordered lists
-  ul {
-    padding-left: ${spacing.nsmall};
-  }
   // List reset classes
   ${generateListResets()}
 `;

package/src/ProgrammeCard/ProgrammeCard.stories.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-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 { Meta, StoryFn } from '@storybook/react';
+import ProgrammeCard from './ProgrammeCard';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Enkle komponenter/ProgrammeCard',
+  component: ProgrammeCard,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    id: 'test ID',
+    title: { title: 'Elektro og datateknologi', language: 'nb' },
+    desktopImage: {
+      src: 'https://api.test.ndla.no/image-api/raw/ajvkVKKR.svg?width=600&ts=1682591987993',
+      alt: '',
+    },
+    mobileImage: {
+      src: 'https://api.test.ndla.no/image-api/raw/YIAprLg9.svg?width=600&ts=1682592022017',
+      alt: '',
+    },
+    url: '#',
+  },
+} as Meta<typeof ProgrammeCard>;
+
+export const ProgrammeCardStory: StoryFn<typeof ProgrammeCard> = ({ ...args }) => {
+  return <ProgrammeCard {...args} />;
+};
+
+ProgrammeCardStory.storyName = 'ProgrammeCard';

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-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 styled from '@emotion/styled';
+import SafeLink from '@ndla/safelink';
+import { spacing, colors, misc, breakpoints, mq } from '@ndla/core';
+
+interface Image {
+  src: string;
+  alt: string;
+}
+export interface Programme {
+  id: string;
+  title: {
+    title: string;
+    language: string;
+  };
+  desktopImage: Image;
+  mobileImage: Image;
+  url: string;
+}
+
+const StyledCardContainer = styled(SafeLink)`
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 350px;
+    width: 250px;
+  }
+  max-width: 350px;
+  height: 195px;
+  display: flex;
+  flex-direction: column;
+  background-color: ${colors.background.default};
+  border-radius: ${misc.borderRadius};
+  align-self: center;
+  box-shadow: none;
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline ${colors.text.primary};
+    text-underline-offset: 3px;
+  }
+`;
+
+const StyledImg = styled.img`
+  display: none;
+  border-radius: ${misc.borderRadius} ${misc.borderRadius} 0 0;
+  &[data-is-mobile='true'] {
+    ${mq.range({ until: breakpoints.tablet })} {
+      display: block;
+      width: auto;
+    }
+  }
+  &[data-is-mobile='false'] {
+    ${mq.range({ from: breakpoints.tablet })} {
+      display: block;
+      width: 350px;
+    }
+  }
+`;
+
+const StyledTitle = styled.span`
+  color: ${colors.text.primary};
+  padding: ${spacing.normal} 0 ${spacing.normal} ${spacing.nsmall};
+  border: 1px solid ${colors.brand.lighter};
+  border-radius: 0 0 ${misc.borderRadius} ${misc.borderRadius};
+`;
+
+const ProgrammeCard = ({ title, desktopImage, mobileImage, url }: Programme) => {
+  return (
+    <StyledCardContainer to={url}>
+      <StyledImg data-is-mobile="false" src={desktopImage.src} alt={desktopImage.alt} />
+      <StyledImg data-is-mobile="true" src={mobileImage.src} alt={mobileImage.alt} />
+      <StyledTitle>{title.title}</StyledTitle>
+    </StyledCardContainer>
+  );
+};
+
+export default ProgrammeCard;

package/src/ProgrammeCard/index.tsx

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-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 { default as ProgrammeCard } from './ProgrammeCard';

package/src/index.ts

@@ -273,6 +273,7 @@ export { default as LetterFilter } from './LetterFilter';
 
 export { OrderedList, UnOrderedList } from './List';
 export { BlogPostV2 } from './BlogPost';
+export { ProgrammeCard } from './ProgrammeCard';
 export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
 export type { HeartButtonType } from './Embed';