@ndla/ui 35.0.27 → 35.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "35.0.27",
+  "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.11",
-    "@ndla/carousel": "^3.0.12",
+    "@ndla/button": "^10.0.13",
+    "@ndla/carousel": "^3.0.13",
     "@ndla/core": "^3.1.3",
-    "@ndla/forms": "^4.2.20",
+    "@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.17",
-    "@ndla/safelink": "^4.0.21",
-    "@ndla/switch": "^1.0.8",
-    "@ndla/tabs": "^2.1.18",
-    "@ndla/tooltip": "^4.0.19",
+    "@ndla/modal": "^2.2.17",
+    "@ndla/notion": "^4.2.19",
+    "@ndla/safelink": "^4.0.23",
+    "@ndla/switch": "^1.0.9",
+    "@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,16 +75,16 @@
   "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.2",
-    "sass-loader": "^13.2.0",
-    "webpack": "^5.75.0",
+    "mini-css-extract-plugin": "^2.7.5",
+    "sass-loader": "^13.2.2",
+    "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e600845e4f567e760a39c4fdb301a4543634061e"
+  "gitHead": "c055a24586a13acac494f7cecda6b301fba80249"
 }

package/src/BlogPost/BlogPost.stories.tsx

@@ -7,13 +7,14 @@
  */
 
 import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import BlogPost from './BlogPost';
 import { defaultParameters } from '../../../../stories/defaults';
 
 export default {
   title: 'Enkle komponenter/Blog Post',
   component: BlogPost,
+  tags: ['autodocs'],
   parameters: {
     ...defaultParameters,
   },
@@ -28,9 +29,9 @@ export default {
       url: 'https://api.test.ndla.no/image-api/raw/20080101-032119-ag.jpg',
     },
   },
-} as ComponentMeta<typeof BlogPost>;
+} as Meta<typeof BlogPost>;
 
-export const BlogPostStory: ComponentStory<typeof BlogPost> = ({ ...args }) => {
+export const BlogPostStory: StoryFn<typeof BlogPost> = ({ ...args }) => {
   return <BlogPost {...args} />;
 };
 

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/LanguageSelector/LanguageSelector.stories.tsx

@@ -7,13 +7,14 @@
  */
 
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { LanguageSelector } from '@ndla/ui';
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
 import { defaultParameters } from '../../../../stories/defaults';
 export default {
   title: 'Enkle komponenter/LanguageSelector',
+  tags: ['autodocs'],
   component: LanguageSelector,
   parameters: {
     ...defaultParameters,
@@ -24,7 +25,7 @@ export default {
     // eslint-disable-next-line no-console
     onSelect: (locale) => console.log(`selected ${locale}`),
   },
-} as ComponentMeta<typeof LanguageSelector>;
+} as Meta<typeof LanguageSelector>;
 
 interface ButtonWrapperProps {
   inverted?: boolean;
@@ -37,7 +38,7 @@ const ButtonWrapper = styled('div', { shouldForwardProp })<ButtonWrapperProps>`
   padding: ${spacing.normal};
 `;
 
-export const LanguageSelectorStory: ComponentStory<typeof LanguageSelector> = (args) => {
+export const LanguageSelectorStory: StoryFn<typeof LanguageSelector> = (args) => {
   return (
     <ButtonWrapper inverted={args.inverted}>
       <LanguageSelector {...args} />

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
 import React from 'react';
 import { defaultParameters } from '../../../../stories/defaults';
@@ -15,6 +15,7 @@ import LetterFilter from './LetterFilter';
 export default {
   title: 'Enkle komponenter/LetterFilter',
   component: LetterFilter,
+  tags: ['autodocs'],
   parameters: {
     ...defaultParameters,
   },
@@ -22,9 +23,9 @@ export default {
     enabledLetters: ['a', 'c'],
     onChange: (value?: string) => {},
   },
-} as ComponentMeta<typeof LetterFilter>;
+} as Meta<typeof LetterFilter>;
 
-export const LetterFilterStory: ComponentStory<typeof LetterFilter> = (args) => {
+export const LetterFilterStory: StoryFn<typeof LetterFilter> = (args) => {
   const [, updateArgs] = useArgs();
 
   return <LetterFilter {...args} onChange={(val) => updateArgs({ value: val })} />;

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
+import { defaultParameters } from '../../../../../stories/defaults';
+
+import Folder from './Folder';
+
+export default {
+  title: 'Enkle komponenter/Mappe',
+  component: Folder,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  argTypes: {
+    menuItems: {
+      control: false,
+    },
+  },
+  args: {
+    id: '3d88300c-1186-47f5-a99a-8ea93fa20981',
+    title: 'Dette er min tittel',
+    subFolders: 3,
+    subResources: 3,
+    description: '',
+    link: '',
+    type: 'list',
+    menuItems: [
+      { icon: <Pencil />, text: 'Rediger', onClick: () => {} },
+      { icon: <DeleteForever />, text: 'Slett', onClick: () => {}, type: 'danger' },
+    ],
+    isShared: true,
+  },
+} as Meta<typeof Folder>;
+
+export const FolderStory: StoryFn<typeof Folder> = (args) => {
+  return <Folder {...args} />;
+};

package/src/Resource/BlockResource.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 { Meta, StoryFn } from '@storybook/react';
+import { defaultParameters } from '../../../../stories/defaults';
+import BlockResource from './BlockResource';
+
+export default {
+  title: 'Enkle komponenter/Ressurser/BlockResource',
+  component: BlockResource,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  argTypes: {
+    resourceImage: {
+      control: false,
+    },
+    resourceTypes: {
+      control: false,
+    },
+    headingLevel: {
+      control: false,
+    },
+    menuItems: {
+      control: false,
+    },
+  },
+  args: {
+    id: '1234',
+    link: '',
+    title: 'Tittel til ressurs',
+    resourceImage: {
+      src: '',
+      alt: '',
+    },
+    resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
+    tags: ['tag', 'tag', 'tag', 'tag'],
+  },
+} as Meta<typeof BlockResource>;
+
+export const BlockResourceStory: StoryFn<typeof BlockResource> = (args) => {
+  return <BlockResource {...args} />;
+};
+
+BlockResourceStory.storyName = 'BlockResource';