@ndla/ui 50.9.7 → 50.9.9

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2024-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 { InformationOutline } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import { UuDisclaimerMetaData } from "@ndla/types-embed";
+import { MessageBox } from "../Messages";
+interface Props {
+  embed: UuDisclaimerMetaData;
+  children?: ReactNode;
+}
+
+const StyledMessageBox = styled(MessageBox)`
+  display: flex;
+  flex-align: center;
+`;
+
+const Disclaimer = styled.div`
+  display: flow;
+`;
+
+const UuDisclaimerEmbed = ({ embed, children }: Props) => {
+  const { t } = useTranslation();
+
+  if (embed.status === "error") {
+    return null;
+  }
+
+  const { embedData, data } = embed;
+
+  const disclaimerLink = data?.disclaimerLink ? (
+    <>
+      {` ${t("uuDisclaimer.alternative")} `}
+      <SafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
+        {data.disclaimerLink.text}
+      </SafeLink>
+    </>
+  ) : null;
+
+  return (
+    <>
+      <StyledMessageBox type="info">
+        <InformationOutline />
+        <Disclaimer contentEditable={false}>
+          {embedData.disclaimer}
+          {disclaimerLink}
+        </Disclaimer>
+      </StyledMessageBox>
+      {children}
+    </>
+  );
+};
+
+export default UuDisclaimerEmbed;

package/src/Embed/index.ts

@@ -20,4 +20,5 @@ export { ConceptNotionV2 } from "./conceptComponents";
 export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { InlineConcept, BlockConcept } from "./ConceptEmbed";
+export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";

package/src/ExpandableBox/ExpandableBox.stories.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 import { defaultParameters } from "../../../../stories/defaults";
 
@@ -32,3 +32,12 @@ export default {
 } as Meta<typeof ExpandableBox>;
 
 export const Default: StoryObj<typeof ExpandableBox> = {};
+
+export const WithHeader: StoryFn<typeof ExpandableBox> = ({ ...args }) => (
+  <ExpandableBox {...args}>
+    <ExpandableBoxSummary>
+      <h2>Open me as header text</h2>
+    </ExpandableBoxSummary>
+    Everything here is only visible when the box is open
+  </ExpandableBox>
+);

package/src/ExpandableBox/ExpandableBox.tsx

@@ -7,6 +7,8 @@
  */
 
 import { HTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import { fonts } from "@ndla/core";
 
 interface Props extends HTMLAttributes<HTMLDetailsElement> {}
 
@@ -16,6 +18,14 @@ export const ExpandableBox = ({ children, ...rest }: Props) => {
 
 interface SummaryProps extends HTMLAttributes<HTMLElement> {}
 
+const StyledSummary = styled.summary`
+  & > * {
+    display: inline;
+    font-size: ${fonts.size.text.metaText.medium};
+    font-weight: ${fonts.weight.normal};
+  }
+`;
+
 export const ExpandableBoxSummary = ({ children, ...rest }: SummaryProps) => {
-  return <summary {...rest}>{children}</summary>;
+  return <StyledSummary {...rest}>{children}</StyledSummary>;
 };

package/src/Figure/component.figure.scss

@@ -90,35 +90,8 @@
   }
 }
 
-.c-figure__licensetag {
-  display: none;
-}
 .c-figure__byline {
   text-align: left;
-
-  .c-figure__toggleAlternativeVideo {
-    margin-left: 10px;
-    span.hidden {
-      display: none;
-    }
-  }
-}
-
-.c-figure__byline-author-buttons {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: $primary-color;
-}
-.c-figure__byline-author-buttons--no-siblings {
-  //styling for button in licensewrapper when there are no other elements in it. Places the button to the right
-  justify-content: flex-end;
-}
-.c-figure__byline-authors {
-  @include font-size(14px, 20px);
-  margin-right: $spacing--small;
-  font-family: $font;
 }
 
 .c-figure__info {
@@ -235,40 +208,11 @@
 }
 
 .c-figure {
-  &__link-wrapper {
-    margin-top: $spacing--small;
-
-    [data-icon] {
-      margin-left: $spacing--xsmall;
-      width: 18px;
-      height: 18px;
-    }
-  }
-
   &__link {
     color: $brand-color;
     box-shadow: none;
     display: flex;
     align-items: center;
     @include font-size(14px, 25px);
-
-    &:hover,
-    &:active,
-    &:focus {
-      .c-figure__link-text {
-        box-shadow: $link--hover;
-      }
-    }
-  }
-
-  &__link-text {
-    box-shadow: $link;
-    display: block;
-  }
-
-  &__link-description {
-    margin-top: $spacing--xsmall !important;
-    margin-bottom: 0;
-    @include font-size(14px, 25px);
   }
 }

package/src/Filter/ToggleItem.tsx

@@ -7,7 +7,9 @@
  */
 
 import { ChangeEvent, ElementType } from "react";
-import { classes } from "./filterClasses";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 
 interface Props {
   id: string;
@@ -16,16 +18,137 @@ interface Props {
   checked?: boolean;
   disabled?: boolean;
   tabIndex?: number;
-  modifiers?: string[] | string;
   value?: string;
   component?: ElementType;
   hits?: number;
 }
 
+const StyledText = styled.span`
+  flex-grow: 1;
+  z-index: ${stackOrder.offsetDouble};
+`;
+
+const StyledInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  z-index: ${stackOrder.trigger};
+  cursor: pointer;
+
+  &:checked {
+    & + label [data-checkbox] {
+      border: 2px solid ${colors.brand.primary};
+      background: ${colors.brand.primary};
+      ::before {
+        background: white;
+        width: 5px;
+      }
+      ::after {
+        background: white;
+        width: 10px;
+      }
+    }
+  }
+`;
+
+const StyledItemCheckbox = styled.span`
+  content: "";
+  display: inline-block;
+  position: relative;
+  width: ${spacing.normal};
+  height: ${spacing.normal};
+  padding: 0;
+  background: ${colors.white};
+  border: 2px solid ${colors.brand.tertiary};
+  margin: 2px ${spacing.small} 2px 3px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    width: 20px;
+    height: 20px;
+    margin: 4px ${spacing.small} 4px 3px;
+  }
+  &::before {
+    content: "";
+    width: 0px;
+    height: 2px;
+    border-radius: 2px;
+    background: ${colors.brand.tertiary};
+    position: absolute;
+    transform: rotate(45deg);
+    top: 10px;
+    left: 7px;
+    ${mq.range({ from: breakpoints.tablet })} {
+      top: 8px;
+      left: 5px;
+    }
+    transition: width 50ms ease 50ms;
+    transform-origin: 0% 0%;
+  }
+
+  &::after {
+    content: "";
+    width: 0;
+    height: 2px;
+    border-radius: 2px;
+    background: ${colors.brand.tertiary};
+    position: absolute;
+    transform: rotate(305deg);
+    top: 13px;
+    left: 8px;
+
+    ${mq.range({ from: breakpoints.tablet })} {
+      top: 11px;
+      left: 6px;
+    }
+    transition: width 50ms ease;
+    transform-origin: 0% 0%;
+  }
+`;
+
+const toggleItemCss = css`
+  display: inline-block;
+  position: relative;
+  margin: 0 ${spacing.small} 0 2px;
+  color: ${colors.brand.primary};
+  border-radius: ${misc.borderRadius};
+  transition: all 0.2s cubic-bezier(0.17, 0.04, 0.03, 0.94);
+  cursor: pointer;
+  ${fonts.sizes("16px", "18px")};
+
+  &:hover {
+    [data-checkbox] {
+      border: 2px solid ${colors.brand.tertiary};
+    }
+    [data-checkbox]::before {
+      width: 5px;
+      transition: width 100ms ease;
+    }
+
+    [data-checkbox]::after {
+      width: 10px;
+      transition: width 150ms ease 100ms;
+    }
+  }
+  label {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    ${mq.range({ until: breakpoints.tabletWide })} {
+      width: 100%;
+    }
+    ${mq.range({ until: breakpoints.mobileWide })} {
+      width: 100%;
+      padding: $spacing--xsmall 0;
+      justify-content: space-between;
+      min-height: 52px;
+      align-items: center;
+    }
+  }
+`;
+
 const ToggleItem = ({
   id,
   checked = false,
-  modifiers,
   label,
   component: Component = "li",
   onChange,
@@ -34,9 +157,8 @@ const ToggleItem = ({
   disabled,
   hits,
 }: Props) => (
-  <Component {...classes("item", modifiers)}>
-    <input
-      {...classes("input")}
+  <Component css={toggleItemCss}>
+    <StyledInput
       type="checkbox"
       id={id}
       value={value}
@@ -46,11 +168,11 @@ const ToggleItem = ({
       onChange={onChange}
     />
     <label htmlFor={id}>
-      <span {...classes("item-checkbox")} />
-      <span {...classes("text")}>
+      <StyledItemCheckbox data-checkbox="" />
+      <StyledText>
         {label}
         {hits !== undefined && ` (${hits})`}
-      </span>
+      </StyledText>
     </label>
   </Component>
 );

package/src/Filter/index.ts

@@ -6,8 +6,5 @@
  *
  */
 
-export { default as FilterList } from "./FilterList";
-export { default as FilterListPhone } from "./FilterListPhone";
 export { default as ToggleItem } from "./ToggleItem";
-export { classes as filterClasses } from "./filterClasses";
 export { default as FilterButtons } from "./FilterButtons";

package/src/Logo/Logo.tsx

@@ -5,17 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/* eslint-disable max-len */
 
-import BEMHelper from "react-bem-helper";
+import { useMemo } from "react";
+import { SerializedStyles, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
 import SafeLink from "@ndla/safelink";
 import SvgLogo from "./SvgLogo";
 
-export const logoClasses = new BEMHelper({
-  name: "logo",
-  prefix: "c-",
-});
-
 interface Props {
   to?:
     | string
@@ -32,23 +29,46 @@ interface Props {
   color?: string;
 }
 
-export const Logo = ({ name = true, to, cssModifier, color, large = false, locale, label }: Props) => {
-  const modifiers: Record<string, boolean> = { large };
-
-  if (cssModifier) {
-    modifiers[cssModifier] = true;
+const StyledLogoWrapper = styled.div`
+  a {
+    box-shadow: none;
   }
+  width: 120px;
+  margin: 0;
+  position: relative;
+`;
+
+const modifierStyles: Record<string, SerializedStyles> = {
+  large: css`
+    width: 287px;
+  `,
+  white: css`
+    svg {
+      fill: ${colors.white};
+    }
+  `,
+};
+
+export const Logo = ({ name = true, to, cssModifier, color, large = false, locale, label }: Props) => {
+  const modifiers = useMemo(() => {
+    const mods = [];
+    if (large) {
+      mods.push(modifierStyles.large);
+    }
+    if (cssModifier && modifierStyles[cssModifier]) {
+      mods.push(modifierStyles[cssModifier]);
+    }
+    return mods;
+  }, [large, cssModifier]);
 
   const logo = to ? (
     <SafeLink to={to} aria-label={label} title={label}>
       <SvgLogo name={name} color={color} locale={locale} />
     </SafeLink>
   ) : (
-    <>
-      <SvgLogo name={name} color={color} locale={locale} />
-    </>
+    <SvgLogo name={name} color={color} locale={locale} />
   );
-  return <div {...logoClasses("", modifiers)}>{logo}</div>;
+  return <StyledLogoWrapper css={modifiers}>{logo}</StyledLogoWrapper>;
 };
 
 export default Logo;

package/src/Logo/SvgLogo.tsx

@@ -7,7 +7,8 @@
  */
 /* eslint-disable max-len */
 
-import { logoClasses } from "./Logo";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
 
 const LogoText = (locale?: string) => {
   if (locale === "en") {
@@ -30,20 +31,18 @@ interface Props {
   locale?: string;
 }
 
+const StyledSvg = styled.svg`
+  fill: ${colors.brand.primary};
+`;
+
 export const SvgLogo = ({ name = true, color = "#000000", locale }: Props) => (
-  <svg
-    {...logoClasses("graphic")}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 376 152"
-    fill={color}
-    fillRule="evenodd"
-  >
+  <StyledSvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376 152" fill={color} fillRule="evenodd">
     <path d="M355 67h-84v51h102V51h-18v16zm0 14h-66v19h66V81zm-84-48v18h84V33h-84z" />
     <rect width="18" height="118" x="236" transform="matrix(-1 0 0 1 490 0)" />
     <path d="M201 100V51h-65v49h65zm18 18V0h-18v33h-83v85h101z" />
     <polygon points="18 51 18 118 0 118 0 33 101 33 101 118 83 118 83 51" />
     {name && LogoText(locale)}
-  </svg>
+  </StyledSvg>
 );
 
 export default SvgLogo;

package/src/Messages/MessageBox.tsx

@@ -13,7 +13,7 @@ import { CloseButton } from "@ndla/button";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { Forward } from "@ndla/icons/common";
 
-type MessageBoxType = "ghost" | "danger";
+type MessageBoxType = "ghost" | "danger" | "info";
 
 interface LinkProps {
   href?: string;

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -125,7 +125,7 @@ const StyledSection = styled.section`
 export const RelatedArticleList = ({
   children = [],
   articleCount,
-  headingLevel = "h3",
+  headingLevel = "h2",
   headingButtons,
   ...rest
 }: Props) => {

package/src/index.ts

@@ -27,6 +27,7 @@ export {
   UnknownEmbed,
   InlineConcept,
   BlockConcept,
+  UuDisclaimerEmbed,
 } from "./Embed";
 
 export { LicenseLink } from "./LicenseByline";
@@ -79,7 +80,7 @@ export {
   HeroContent,
 } from "./Hero";
 
-export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from "./Filter";
+export { FilterButtons, ToggleItem } from "./Filter";
 
 export { Footer, EditorName, FooterText } from "./Footer";
 

package/src/locale/messages-en.ts

@@ -1355,6 +1355,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "You can find alternative content in the article",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nb.ts

@@ -1353,6 +1353,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhold i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nn.ts

@@ -1353,6 +1353,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhald i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-se.ts

@@ -1355,6 +1355,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhold i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/src/locale/messages-sma.ts

@@ -1357,6 +1357,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhold i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/main.scss

@@ -1,8 +1,6 @@
 // @import '~ndla-core/scss/core';
 
 // COMPONENTS
-@import "Logo/component.logo";
 @import "Article/component.article";
 
 @import "Figure/component.figure";
-@import "Filter/component.filter";