@ndla/ui 36.0.1 → 36.0.2

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';

package/src/LicenseByline/EmbedByline.tsx

@@ -0,0 +1,117 @@
+/**
+ * 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 { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
+import { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
+import { ICopyright as ImageCopyright } from '@ndla/types-backend/image-api';
+import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
+import { ICopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
+import { BrightcoveCopyright } from '@ndla/types-embed';
+import LicenseLink from './LicenseLink';
+import LicenseDescription from './LicenseDescription';
+
+interface BaseProps {
+  topRounded?: boolean;
+  description?: string;
+  children?: ReactNode;
+  visibleAlt?: string;
+}
+
+interface ImageProps extends BaseProps {
+  type: 'image';
+  copyright: ImageCopyright;
+}
+
+interface BrightcoveProps extends BaseProps {
+  type: 'video';
+  copyright: BrightcoveCopyright;
+}
+
+interface AudioProps extends BaseProps {
+  type: 'audio';
+  copyright: AudioCopyright;
+}
+
+interface PodcastProps extends BaseProps {
+  type: 'podcast';
+  copyright: AudioCopyright;
+}
+
+interface ConceptProps extends BaseProps {
+  type: 'concept';
+  copyright: ConceptCopyright;
+}
+
+type Props = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps;
+
+export type LicenseType = ReturnType<typeof getLicenseByAbbreviation>;
+
+const BylineWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+  background-color: ${colors.brand.lightest};
+  padding: ${spacing.small} ${spacing.normal};
+  border: 1px solid ${colors.brand.tertiary};
+  border-bottom-right-radius: ${misc.borderRadius};
+  border-bottom-left-radius: ${misc.borderRadius};
+
+  &[data-top-rounded='true'] {
+    border-radius: ${misc.borderRadius};
+  }
+`;
+
+const RightsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.nsmall};
+
+  ${mq.range({ until: breakpoints.tablet })} {
+    align-items: flex-start;
+    gap: ${spacing.xsmall};
+    flex-direction: column;
+  }
+`;
+
+const StyledSpan = styled.span`
+  font-style: italic;
+  color: grey;
+`;
+
+const LicenseInformationWrapper = styled.div`
+  flex: 1;
+`;
+
+const EmbedByline = ({ type, topRounded, description, copyright, children, visibleAlt }: Props) => {
+  const { t, i18n } = useTranslation();
+  const license = getLicenseByAbbreviation(copyright.license?.license ?? '', i18n.language);
+  const authors = getLicenseCredits(copyright);
+  const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+
+  return (
+    <BylineWrapper data-top-rounded={topRounded}>
+      {!!description && <LicenseDescription description={description} />}
+      {visibleAlt ? <StyledSpan>{`Alt: ${visibleAlt}`}</StyledSpan> : null}
+      <RightsWrapper>
+        <LicenseLink license={license} asLink={!!license.url.length} />
+        <LicenseInformationWrapper>
+          <span>
+            <b>{t(`embed.type.${type}`)}: </b>
+            {captionAuthors.map((author) => author.name).join(', ')}
+          </span>
+        </LicenseInformationWrapper>
+        {children}
+      </RightsWrapper>
+    </BylineWrapper>
+  );
+};
+
+export default EmbedByline;

package/src/LicenseByline/LicenseDescription.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 { colors, spacing } from '@ndla/core';
+
+interface Props {
+  description: string;
+}
+
+const StyledParagraph = styled.p`
+  margin: 0;
+  padding-bottom: ${spacing.xsmall};
+  border-bottom: 1px solid ${colors.brand.tertiary};
+`;
+
+const StyledFigCaption = styled.figcaption`
+  background: unset;
+  padding: unset;
+  font-size: unset;
+  color: unset;
+`;
+
+const LicenseDescription = ({ description }: Props) => {
+  return (
+    <StyledFigCaption>
+      <StyledParagraph>{description}</StyledParagraph>
+    </StyledFigCaption>
+  );
+};
+
+export default LicenseDescription;

package/src/LicenseByline/LicenseLink.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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 SafeLink from '@ndla/safelink';
+import { colors, fonts } from '@ndla/core';
+import { LicenseType } from './EmbedByline';
+
+interface Props {
+  license: LicenseType;
+  asLink?: boolean;
+}
+
+const StyledSafeLink = styled(SafeLink)`
+  color: ${colors.brand.primary};
+  font-weight: ${fonts.weight.bold};
+  text-decoration: underline;
+  box-shadow: none;
+  &:hover,
+  &:focus-within {
+    text-decoration: none;
+  }
+`;
+
+const StyledSpan = styled.span`
+  font-weight: ${fonts.weight.bold};
+`;
+
+const LicenseLink = ({ license, asLink = true }: Props) => {
+  if (asLink) {
+    return <StyledSafeLink to={license.url}>{license.abbreviation}</StyledSafeLink>;
+  } else {
+    return <StyledSpan>{license.abbreviation}</StyledSpan>;
+  }
+};
+
+export default LicenseLink;

package/src/LicenseByline/index.tsx

@@ -0,0 +1 @@
+export { default as EmbedByline } from './EmbedByline';

package/src/locale/messages-en.ts

@@ -1305,6 +1305,13 @@ const messages = {
     conceptListError: 'Failed to show concept list',
     linkError: 'Failed to show link.',
     unsupported: `Embed {{type}} not supported.`,
+    type: {
+      image: 'Image',
+      video: 'Video',
+      audio: 'Audio',
+      podcast: 'Podcast',
+      concept: 'Concept',
+    },
   },
 };
 

package/src/locale/messages-nb.ts

@@ -1301,6 +1301,13 @@ const messages = {
     conceptListError: 'Klarte ikke å vise forklaringsliste',
     linkError: 'Klarte ikke å vise lenke.',
     unsupported: `Embed {{type}} er ikke støttet.`,
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring',
+    },
   },
 };
 

package/src/locale/messages-nn.ts

@@ -1301,6 +1301,13 @@ const messages = {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',
     linkError: 'Klarte ikkje å vise lenke.',
     unsupported: `Embed {{type}} er ikkje støtta.`,
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring',
+    },
   },
 };
 

package/src/locale/messages-se.ts

@@ -1302,6 +1302,13 @@ const messages = {
     conceptListError: 'Ii sáhttán čájehit čilgehuslisttu',
     linkError: 'Ii sáhttán čájehit liŋkka.',
     unsupported: `Embed {{type}} ii dorjojuvvo.`,
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring',
+    },
   },
 };
 

package/src/locale/messages-sma.ts

@@ -1306,6 +1306,13 @@ const messages = {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',
     linkError: 'Klarte ikkje å vise lenke.',
     unsupported: `Embed {{type}} er ikkje støtta.`,
+    type: {
+      image: 'Bilde',
+      video: 'Video',
+      audio: 'Lyd',
+      podcast: 'Podkast',
+      concept: 'Forklaring',
+    },
   },
 };