@ndla/ui 36.0.0 → 36.0.2

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/Messages/MessageBox.tsx

@@ -51,7 +51,7 @@ const MessageBoxWrapper = styled.div<StyledProps>`
     type === 'danger' &&
     css`
       background: ${colors.support.redLightest};
-      color: ${colors.support.red};
+      color: ${colors.text.primary};
     `}
 `;
 

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',
+    },
   },
 };