@ndla/ui 36.0.0 → 36.0.2

package/lib/locale/messages-en.js

@@ -1256,7 +1256,14 @@ var messages = _objectSpread(_objectSpread({
   embed: {
     conceptListError: 'Failed to show concept list',
     linkError: 'Failed to show link.',
-    unsupported: "Embed {{type}} not supported."
+    unsupported: "Embed {{type}} not supported.",
+    type: {
+      image: 'Image',
+      video: 'Video',
+      audio: 'Audio',
+      podcast: 'Podcast',
+      concept: 'Concept'
+    }
   }
 });
 var _default = messages;

package/lib/locale/messages-nb.d.ts

@@ -269,6 +269,13 @@ declare const messages: {
         conceptListError: string;
         linkError: string;
         unsupported: string;
+        type: {
+            image: string;
+            video: string;
+            audio: string;
+            podcast: string;
+            concept: string;
+        };
     };
     common: {
         subject: string;

package/lib/locale/messages-nb.js

@@ -1256,7 +1256,14 @@ var messages = _objectSpread(_objectSpread({
   embed: {
     conceptListError: 'Klarte ikke å vise forklaringsliste',
     linkError: 'Klarte ikke å vise lenke.',
-    unsupported: "Embed {{type}} er ikke st\xF8ttet."
+    unsupported: "Embed {{type}} er ikke st\xF8ttet.",
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring'
+    }
   }
 });
 var _default = messages;

package/lib/locale/messages-nn.d.ts

@@ -269,6 +269,13 @@ declare const messages: {
         conceptListError: string;
         linkError: string;
         unsupported: string;
+        type: {
+            image: string;
+            video: string;
+            audio: string;
+            podcast: string;
+            concept: string;
+        };
     };
     common: {
         subject: string;

package/lib/locale/messages-nn.js

@@ -1256,7 +1256,14 @@ var messages = _objectSpread(_objectSpread({
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',
     linkError: 'Klarte ikkje å vise lenke.',
-    unsupported: "Embed {{type}} er ikkje st\xF8tta."
+    unsupported: "Embed {{type}} er ikkje st\xF8tta.",
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring'
+    }
   }
 });
 var _default = messages;

package/lib/locale/messages-se.d.ts

@@ -269,6 +269,13 @@ declare const messages: {
         conceptListError: string;
         linkError: string;
         unsupported: string;
+        type: {
+            image: string;
+            video: string;
+            audio: string;
+            podcast: string;
+            concept: string;
+        };
     };
     common: {
         subject: string;

package/lib/locale/messages-se.js

@@ -1256,7 +1256,14 @@ var messages = _objectSpread(_objectSpread({
   embed: {
     conceptListError: 'Ii sáhttán čájehit čilgehuslisttu',
     linkError: 'Ii sáhttán čájehit liŋkka.',
-    unsupported: "Embed {{type}} ii dorjojuvvo."
+    unsupported: "Embed {{type}} ii dorjojuvvo.",
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring'
+    }
   }
 });
 var _default = messages;

package/lib/locale/messages-sma.d.ts

@@ -269,6 +269,13 @@ declare const messages: {
         conceptListError: string;
         linkError: string;
         unsupported: string;
+        type: {
+            image: string;
+            video: string;
+            audio: string;
+            podcast: string;
+            concept: string;
+        };
     };
     common: {
         subject: string;

package/lib/locale/messages-sma.js

@@ -1256,7 +1256,14 @@ var messages = _objectSpread(_objectSpread({
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',
     linkError: 'Klarte ikkje å vise lenke.',
-    unsupported: "Embed {{type}} er ikkje st\xF8tta."
+    unsupported: "Embed {{type}} er ikkje st\xF8tta.",
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring'
+    }
   }
 });
 var _default = messages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "36.0.0",
+  "version": "36.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ac2a30ed977f52019145f5e598e277ba4eece42"
+  "gitHead": "486edbc7b92bc8fc182669cec1c259438215e3cc"
 }

package/src/BlogPost/BlogPost.tsx

@@ -33,18 +33,14 @@ const Container = styled(SafeLink)`
   flex-direction: column;
   color: ${colors.text.primary};
   max-width: 350px;
-  min-width: 350px;
   max-height: 415px;
-  min-height: 415px;
   gap: ${spacing.nsmall};
   box-shadow: none;
   border: 1px solid ${colors.brand.lightest};
   border-radius: ${misc.borderRadius};
   padding: ${spacing.normal} ${spacing.medium};
   &[data-size='large'] {
-    min-width: 532px;
     max-width: 532px;
-    min-height: 550px;
     max-height: 550px;
   }
   &:hover,

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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, StoryObj } from '@storybook/react';
+import CampaignBlock from './CampaignBlock';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Enkle komponenter/Campaign Block',
+  component: CampaignBlock,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {},
+} as Meta<typeof CampaignBlock>;
+
+export const BothImages: StoryObj<typeof CampaignBlock> = {
+  args: {
+    title: { title: 'NDLA film', language: 'nb-no' },
+    description: {
+      text: 'NDLA film er en tjeneste i samarbeid med Norgesfilm. Denne tjenesten lar deg se en rekke spillefilmer, kortfilmer, dokumentarer og serier. Du kan også se undervisningsfilm og filmklipp. Velkommen inn i filmens verden!',
+      language: 'nb-no',
+    },
+    headingLevel: 'h2',
+    url: {
+      url: '#',
+      text: 'Gå til NDLA film',
+    },
+    imageBefore: {
+      alt: '',
+      src: 'https://api.test.ndla.no/image-api/raw/n2UYRxEG.png',
+    },
+    imageAfter: {
+      alt: '',
+      src: 'https://api.test.ndla.no/image-api/raw/8GOxOhjr.png',
+    },
+  },
+};
+
+export const SingleImage: StoryObj<typeof CampaignBlock> = {
+  args: {
+    title: { title: 'FN-dagen 24. oktober!', language: 'nb-no' },
+    description: {
+      text: ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  quis nostrud exercitation ',
+      language: 'nb-no',
+    },
+    url: {
+      url: '#',
+      text: 'Les mer om FN-dagen',
+    },
+    imageAfter: {
+      alt: 'FN-symbol',
+      src: 'https://api.test.ndla.no/image-api/raw/LkmDGtip.png',
+    },
+  },
+};

package/src/CampaignBlock/CampaignBlock.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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 { css } from '@emotion/react';
+import SafeLink from '@ndla/safelink';
+import { Forward } from '@ndla/icons/common';
+import { breakpoints, colors, fonts, spacing, mq, misc } from '@ndla/core';
+import { HeadingLevel } from '../types';
+
+interface Image {
+  src: string;
+  alt: string;
+}
+interface Props {
+  title: {
+    title: string;
+    language: string;
+  };
+  description: {
+    text: string;
+    language: string;
+  };
+  headingLevel?: HeadingLevel;
+  url: {
+    url: string;
+    text: string;
+  };
+  imageBefore?: Image;
+  imageAfter?: Image;
+}
+
+const Container = styled.div`
+  max-width: 390px;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.xsmall};
+  border: 1px ${colors.brand.lighter} solid;
+  border-radius: ${misc.borderRadius};
+  padding: ${spacing.normal} ${spacing.small};
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    max-width: 1100px;
+    flex-direction: row;
+  }
+`;
+
+const headingStyle = css`
+  margin: 0;
+`;
+
+const StyledDescription = styled.p`
+  font-family: ${fonts.serif};
+  margin: ${spacing.normal} 0 ${spacing.medium};
+`;
+
+const StyledImg = styled.img`
+  max-height: 200px;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    align-self: center;
+  }
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    align-self: center;
+  }
+`;
+
+const StyledLink = styled(SafeLink)`
+  box-shadow: none;
+  text-decoration: underline;
+  color: ${colors.brand.primary};
+  &:hover,
+  &:focus-visible {
+    text-decoration: none;
+  }
+`;
+
+const CampaignBlock = ({ title, imageBefore, description, headingLevel: Heading = 'h2', imageAfter, url }: Props) => {
+  return (
+    <Container>
+      {imageBefore && <StyledImg src={imageBefore.src} data-left={true} />}
+      <div>
+        <Heading css={headingStyle}>{title.title}</Heading>
+        <StyledDescription>{description.text}</StyledDescription>
+        <StyledLink to={url.url}>
+          {url.text}
+          <Forward />
+        </StyledLink>
+      </div>
+      {imageAfter && <StyledImg src={imageAfter.src} data-right={true} />}
+    </Container>
+  );
+};
+
+export default CampaignBlock;

package/src/CampaignBlock/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 CampaignBlock } from './CampaignBlock';

package/src/ContactBlock/ContactBlock.tsx

@@ -25,16 +25,16 @@ interface Props {
   name: string;
   email: string;
 }
-const CardWrapper = styled.div`
+const BlockWrapper = 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};
+  max-width: 348px;
   ${mq.range({ from: breakpoints.tabletWide })} {
+    max-width: 773px;
     flex-direction: row;
     padding: 0 0 ${spacing.medium} ${spacing.medium};
     gap: ${spacing.nsmall};
@@ -48,12 +48,13 @@ const StyledHeader = styled.div`
   padding-top: ${spacing.medium};
 `;
 
-const StyledDescriptionInformation = styled.div`
+const StyledText = 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};
@@ -70,7 +71,7 @@ const SummaryBlock = styled.p`
   }
 `;
 
-const ContentWrapper = styled.div`
+const TextWrapper = styled.div`
   display: flex;
   overflow: hidden;
   justify-content: space-between;
@@ -82,18 +83,16 @@ const BlobWrapper = styled.div`
 `;
 
 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`
+const blobStyling = css`
   width: 165px;
   height: 180px;
   transform: translate(10%, 0);
@@ -101,6 +100,15 @@ const blobStyle = css`
 const Email = styled.div`
   min-width: 60px;
 `;
+
+const ContentWrapper = styled.div`
+  width: 100%;
+`;
+
+const StyledImage = styled.img`
+  object-fit: cover;
+`;
+
 const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = 'green', blob = 'pointy' }: Props) => {
   const { t } = useTranslation();
   const isGreenBlob = blobColor === 'green';
@@ -108,11 +116,11 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
   const authors = concat(image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders);
 
   return (
-    <CardWrapper>
+    <BlockWrapper>
       <ImageWrapper>
         {image ? (
           <>
-            <img alt={image.alttext.alttext} src={`${image.image.imageUrl}?width=286`} />
+            <StyledImage alt={image.alttext.alttext} src={`${image.image.imageUrl}?width=286`} />
             {`${t('photo')}: ${authors.reduce((acc, name) => (acc = `${acc} ${name?.name}`), '')}  ${
               image.copyright.license.license
             }`}
@@ -121,23 +129,23 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
           <img alt={t('image.error.url')} src={errorSvgSrc} />
         )}
       </ImageWrapper>
-      <div>
-        <ContentWrapper>
+      <ContentWrapper>
+        <TextWrapper>
           <div>
             <StyledHeader>{name}</StyledHeader>
-            <StyledDescriptionInformation>{jobTitle}</StyledDescriptionInformation>
-            <StyledDescriptionInformation>
+            <StyledText>{jobTitle}</StyledText>
+            <StyledText>
               <Email>{`${t('email')}:`}</Email>
               <EmailLink href={`mailto:${email}?subject=Contact us`}>{email}</EmailLink>
-            </StyledDescriptionInformation>
+            </StyledText>
           </div>
           <BlobWrapper>
-            <Blob css={blobStyle} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
+            <Blob css={blobStyling} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
           </BlobWrapper>
-        </ContentWrapper>
+        </TextWrapper>
         <SummaryBlock>{description}</SummaryBlock>
-      </div>
-    </CardWrapper>
+      </ContentWrapper>
+    </BlockWrapper>
   );
 };
 

package/src/ContactBlock/Contactblock.stories.tsx

@@ -77,7 +77,6 @@ export default {
   },
   parameters: {
     ...defaultParameters,
-    layout: 'centered',
   },
 } as Meta<typeof ContactBlock>;
 

package/src/Embed/BrightcoveEmbed.tsx

@@ -144,7 +144,7 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
             size="small"
             onClick={() => setShowOriginalVideo((p) => !p)}
           >
-            {t(`figure.button.${showOriginalVideo ? 'original' : 'alternative'}`)}
+            {t(`figure.button.${!showOriginalVideo ? 'original' : 'alternative'}`)}
           </LinkedVideoButton>
         }
         licenseRights={license.rights}

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { breakpoints, mq, spacing } from '@ndla/core';
+import { IconButtonV2 } from '@ndla/button';
+import { Switch } from '@ndla/switch';
+import { HeartOutline } from '@ndla/icons/action';
+import EmbedByline from './EmbedByline';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  ${mq.range({ until: breakpoints.tablet })} {
+    flex: 1;
+    width: 100%;
+    justify-content: space-between;
+    align-items: space-between;
+  }
+`;
+
+export default {
+  title: 'Enkle komponenter/EmbedByline',
+  component: EmbedByline,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    topRounded: true,
+    visibleAlt: 'Synlig alt-tekst kan legges her, eller fjernes helt',
+    type: 'image',
+    children: (
+      <ButtonWrapper>
+        <Switch checked={false} label="Bytt til synstolket video" onChange={() => {}} id="switch" />
+        <IconButtonV2 variant="ghost" aria-label="Legg til i favoritter">
+          <HeartOutline />
+        </IconButtonV2>
+      </ButtonWrapper>
+    ),
+    description:
+      'Bildetekst som kan være ganske lang. Denne roboten er laget av DALLE2, en helt vaskeekte AI. Hvis denne teksten blir veldig lang kommer den på flere linjer.',
+    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: 'http://floradania.dk/forside/',
+      creators: [],
+      processors: [],
+      rightsholders: [
+        {
+          type: 'Supplier',
+          name: 'Floradania',
+        },
+      ],
+    },
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: null,
+      },
+    },
+  },
+} as Meta<typeof EmbedByline>;
+
+export const EmbedBylineStory: StoryFn<typeof EmbedByline> = (args) => {
+  const { children, ...rest } = args;
+  return <EmbedByline {...rest}>{children}</EmbedByline>;
+};
+
+EmbedBylineStory.storyName = 'EmbedByline';