@ndla/ui 35.0.28 → 35.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "35.0.28",
+  "version": "35.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.17",
-    "@ndla/button": "^10.0.12",
-    "@ndla/carousel": "^3.0.12",
+    "@ndla/button": "^10.0.13",
+    "@ndla/carousel": "^3.0.13",
     "@ndla/core": "^3.1.3",
-    "@ndla/forms": "^4.2.21",
+    "@ndla/forms": "^4.2.22",
     "@ndla/hooks": "^2.0.4",
-    "@ndla/icons": "^2.2.12",
+    "@ndla/icons": "^2.2.13",
     "@ndla/licenses": "^7.0.4",
-    "@ndla/modal": "^2.2.16",
-    "@ndla/notion": "^4.2.18",
-    "@ndla/safelink": "^4.0.22",
+    "@ndla/modal": "^2.2.17",
+    "@ndla/notion": "^4.2.19",
+    "@ndla/safelink": "^4.0.23",
     "@ndla/switch": "^1.0.9",
-    "@ndla/tabs": "^2.1.19",
-    "@ndla/tooltip": "^4.0.20",
+    "@ndla/tabs": "^2.1.20",
+    "@ndla/tooltip": "^4.0.21",
     "@ndla/util": "^3.1.12",
     "@radix-ui/react-accordion": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.0.2",
@@ -75,7 +75,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@ndla/types-backend": "0.2.1",
-    "@ndla/types-embed": "^1.0.11",
+    "@ndla/types-embed": "^1.1.0",
     "@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": "5409272e9cd733486c528ae68d576721e25d4674"
+  "gitHead": "c055a24586a13acac494f7cecda6b301fba80249"
 }

package/src/ContactBlock/ContactBlock.tsx

@@ -0,0 +1,144 @@
+/**
+ * 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 { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
+import { spacing, fonts, colors, mq, breakpoints, misc } from '@ndla/core';
+import { BlobPointy, BlobRound } from '@ndla/icons/common';
+import { useTranslation } from 'react-i18next';
+import concat from 'lodash/concat';
+import { errorSvgSrc } from '../Embed/ImageEmbed';
+
+interface Props {
+  image?: IImageMetaInformationV3;
+  jobTitle: string;
+  description: string;
+  blobColor?: 'pink' | 'green';
+  blob?: 'pointy' | 'round';
+  imageWidth?: number;
+  name: string;
+  email: string;
+}
+const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 ${spacing.medium} ${spacing.medium};
+  font-family: ${fonts.sans};
+  justify-content: center;
+  border-radius: ${misc.borderRadius};
+  border: 1px solid ${colors.brand.lighter};
+  margin-top: ${spacing.mediumlarge};
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    flex-direction: row;
+    padding: 0 0 ${spacing.medium} ${spacing.medium};
+    gap: ${spacing.nsmall};
+  }
+`;
+
+const StyledHeader = styled.div`
+  ${fonts.sizes('22px', '30px')};
+  font-weight: ${fonts.weight.bold};
+  margin: 0 0 ${spacing.xsmall} 0;
+  padding-top: ${spacing.medium};
+`;
+
+const StyledDescriptionInformation = styled.div`
+  display: flex;
+  overflow-wrap: anywhere;
+  color: ${colors.text.light};
+  gap: ${spacing.xxsmall};
+`;
+const EmailLink = styled.a`
+  color: ${colors.text.light};
+  text-decoration-color: ${colors.text.light};
+  text-decoration-style: solid;
+  text-decoration: underline;
+  box-shadow: unset;
+`;
+
+const SummaryBlock = styled.p`
+  font-family: ${fonts.serif};
+  padding: 0 ${spacing.medium} 0 0;
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    padding-top: 0;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+`;
+
+const BlobWrapper = styled.div`
+  height: 180px;
+  width: 90px;
+`;
+
+const ImageWrapper = styled.div`
+  aspect-ratio: 16/9;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+  padding: ${spacing.medium} ${spacing.medium} 0 0;
+
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    padding-right: 0;
+  }
+`;
+
+const blobStyle = css`
+  width: 165px;
+  height: 180px;
+  transform: translate(10%, 0);
+`;
+const Email = styled.div`
+  min-width: 60px;
+`;
+const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = 'green', blob = 'pointy' }: Props) => {
+  const { t } = useTranslation();
+  const isGreenBlob = blobColor === 'green';
+  const Blob = blob === 'pointy' ? BlobPointy : BlobRound;
+  const authors = concat(image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders);
+
+  return (
+    <CardWrapper>
+      <ImageWrapper>
+        {image ? (
+          <>
+            <img alt={image.alttext.alttext} src={`${image.image.imageUrl}?width=286`} />
+            {`${t('photo')}: ${authors.reduce((acc, name) => (acc = `${acc} ${name?.name}`), '')}  ${
+              image.copyright.license.license
+            }`}
+          </>
+        ) : (
+          <img alt={t('image.error.url')} src={errorSvgSrc} />
+        )}
+      </ImageWrapper>
+      <div>
+        <ContentWrapper>
+          <div>
+            <StyledHeader>{name}</StyledHeader>
+            <StyledDescriptionInformation>{jobTitle}</StyledDescriptionInformation>
+            <StyledDescriptionInformation>
+              <Email>{`${t('email')}:`}</Email>
+              <EmailLink href={`mailto:${email}?subject=Contact us`}>{email}</EmailLink>
+            </StyledDescriptionInformation>
+          </div>
+          <BlobWrapper>
+            <Blob css={blobStyle} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
+          </BlobWrapper>
+        </ContentWrapper>
+        <SummaryBlock>{description}</SummaryBlock>
+      </div>
+    </CardWrapper>
+  );
+};
+
+export default ContactBlock;

package/src/ContactBlock/Contactblock.stories.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 ContactBlock from './ContactBlock';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Enkle komponenter/Kontaktblokk',
+  component: ContactBlock,
+  tags: ['autodocs'],
+  args: {
+    image: {
+      id: '65750',
+      metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65750',
+      title: {
+        title: 'Sigurd Trageton',
+        language: 'nb',
+      },
+      alttext: {
+        alttext: 'Sigurd Trageton',
+        language: 'nb',
+      },
+      copyright: {
+        license: {
+          license: 'CC-BY-SA-4.0',
+          description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+          url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+        },
+        origin: '',
+        creators: [
+          {
+            type: 'photographer',
+            name: 'Tom Knudsen',
+          },
+        ],
+        processors: [],
+        rightsholders: [],
+      },
+      tags: {
+        tags: ['Sigurd', 'Trageton', 'Portrett'],
+        language: 'nb',
+      },
+      caption: {
+        caption: 'Sigurd Trageton',
+        language: 'nb',
+      },
+      supportedLanguages: ['nb', 'nn'],
+      created: '2023-03-29T07:15:50Z',
+      createdBy: 'f-jBTU8O8kYbUW20lMeIuTSv',
+      modelRelease: 'not-set',
+      image: {
+        fileName: 'RVrVQIKh.jpg',
+        size: 404340,
+        contentType: 'image/jpeg',
+        imageUrl: 'https://api.test.ndla.no/image-api/raw/RVrVQIKh.jpg',
+        dimensions: {
+          width: 1600,
+          height: 2000,
+        },
+        language: 'nb',
+      },
+    },
+    jobTitle: 'Daglig leder og ansvarlig redaktør, Vestland fylkeskommune',
+    description:
+      'Sigurd har variert ledererfaring fra utdanningssektoren, både fra videregående skole, nasjonalt senter og fra universitets/høgskolesektoren. Ansvarsområdene dekker bl.a. utdanning/opplæring/studiekvalitet, økonomi, HR, stratgi og IT-utvikling/-drift.',
+    name: 'Sigurd Trageton',
+    email: 'sigurd@ndla.no',
+    blobColor: 'green',
+    blob: 'pointy',
+  },
+  parameters: {
+    ...defaultParameters,
+    layout: 'centered',
+  },
+} as Meta<typeof ContactBlock>;
+
+export const ContactBlockStory: StoryFn<typeof ContactBlock> = ({ ...args }) => {
+  return <ContactBlock {...args} />;
+};
+
+ContactBlockStory.storyName = 'Kontaktblokk';

package/src/ContactBlock/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 ContactBlock from './ContactBlock';
+
+export default ContactBlock;

package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.stories.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 { defaultParameters } from '../../../../stories/defaults';
+import KeyPerformanceIndicator from './KeyPerformanceIndicator';
+
+export default {
+  title: 'Enkle komponenter/Nøkkeltall',
+  component: KeyPerformanceIndicator,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+    layout: 'centered',
+  },
+  args: {
+    title: '500',
+    subTitle: 'TVERRFAGLIGE RESSURSER',
+    image: {
+      id: '65797',
+      metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65797',
+      title: {
+        title: 'Nøkkeltall tverrfaglig',
+        language: 'nb',
+      },
+      alttext: {
+        alttext: 'Nøkkeltall tverrfaglig',
+        language: 'nb',
+      },
+      copyright: {
+        license: {
+          license: 'PD',
+          description: 'Public Domain Mark',
+          url: 'https://creativecommons.org/about/pdm',
+        },
+        origin: 'NDLA',
+        creators: [
+          {
+            type: 'artist',
+            name: 'Hedvig',
+          },
+        ],
+        processors: [],
+        rightsholders: [],
+      },
+      tags: {
+        tags: ['Nøkkeltall', 'Tverrfaglig', 'svg'],
+        language: 'nb',
+      },
+      caption: {
+        caption: '',
+        language: 'nb',
+      },
+      supportedLanguages: ['nb'],
+      created: '2023-04-18T11:20:34Z',
+      createdBy: 'f-jBTU8O8kYbUW20lMeIuTSv',
+      modelRelease: 'not-set',
+      image: {
+        fileName: 'wMowCjRg.svg',
+        size: 43278,
+        contentType: 'image/svg+xml',
+        imageUrl: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
+        language: 'nb',
+      },
+    },
+  },
+} as Meta<typeof KeyPerformanceIndicator>;
+
+export const KeyPerformanceIndicatorStory: StoryFn<typeof KeyPerformanceIndicator> = ({ ...args }) => {
+  return <KeyPerformanceIndicator {...args} />;
+};
+
+KeyPerformanceIndicatorStory.storyName = 'Nøkkeltall';

package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${spacing.small};
+  align-items: center;
+`;
+
+const StyledImage = styled.img`
+  max-width: 150px;
+`;
+
+const TitleWrapper = styled.div`
+  color: ${colors.text.primary};
+  font-family: ${fonts.sans};
+  font-weight: ${fonts.weight.bold};
+  overflow-wrap: break-word;
+  ${fonts.sizes('38px', '48px')};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    ${fonts.sizes('30px', '36px')};
+  }
+  max-width: 240px;
+`;
+
+const SubTitleWrapper = styled.div`
+  overflow-wrap: 'break-word';
+  ${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 {
+  image?: IImageMetaInformationV3;
+  title: string;
+  subTitle: string;
+}
+
+const KeyPerformanceIndicator = ({ image, title, subTitle }: Props) => {
+  return (
+    <ContentWrapper>
+      <StyledImage src={image?.image.imageUrl} alt={image?.alttext.alttext} />
+      <TitleWrapper>{title}</TitleWrapper>
+      <SubTitleWrapper>{subTitle}</SubTitleWrapper>
+    </ContentWrapper>
+  );
+};
+
+export default KeyPerformanceIndicator;

package/src/KeyPerformanceIndicator/index.ts

@@ -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 KeyPerformanceIndicator } from './KeyPerformanceIndicator';

package/src/index.ts

@@ -271,3 +271,5 @@ export type { TreeStructureProps } from './TreeStructure';
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
 export { default as LetterFilter } from './LetterFilter';
 export { BlogPostV2 } from './BlogPost';
+export { KeyPerformanceIndicator } from './KeyPerformanceIndicator';
+export { default as ContactBlock } from './ContactBlock';

package/src/locale/messages-en.ts

@@ -964,6 +964,8 @@ const messages = {
   loading: 'Loading',
   title: 'Title',
   save: 'Save',
+  photo: 'Photo',
+  email: 'Email',
   image: {
     altText: 'Alt-text',
     caption: 'Caption',

package/src/locale/messages-nb.ts

@@ -963,6 +963,8 @@ const messages = {
   title: 'Tittel',
   cancel: 'Avbryt',
   save: 'Lagre',
+  photo: 'Foto',
+  email: 'E-post',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bildetekst',

package/src/locale/messages-nn.ts

@@ -963,6 +963,8 @@ const messages = {
   loading: 'Laster',
   title: 'Tittel',
   save: 'Lagre',
+  photo: 'Foto',
+  email: 'E-post',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',

package/src/locale/messages-se.ts

@@ -964,6 +964,8 @@ const messages = {
   title: 'Tihttel',
   cancel: 'Botkke',
   save: 'Vurke',
+  photo: 'Foto',
+  email: 'E-post',
   image: {
     altText: 'Molssaevttolaš teaksta',
     caption: 'Govvateaksta',

package/src/locale/messages-sma.ts

@@ -967,6 +967,8 @@ const messages = {
   title: 'Tihtele',
   cancel: 'Orrejh',
   save: 'Vöörhkh',
+  photo: 'Foto',
+  email: 'E-post',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bildetekst',