@ndla/ui 50.9.8 → 50.9.10

package/lib/index.d.ts

@@ -25,7 +25,7 @@ export { default as Image, ImageLink, makeSrcQueryString } from "./Image";
 export type { ImageCrop, ImageFocalPoint } from "./Image";
 export type { HeroContentType } from "./Hero";
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, HeroContent, } from "./Hero";
-export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from "./Filter";
+export { FilterButtons, ToggleItem } from "./Filter";
 export { Footer, EditorName, FooterText } from "./Footer";
 export { Figure, FigureOpenDialogButton } from "./Figure";
 export type { FigureType } from "./Figure";

package/lib/index.js

@@ -339,18 +339,6 @@ Object.defineProperty(exports, "FilterButtons", {
     return _Filter.FilterButtons;
   }
 });
-Object.defineProperty(exports, "FilterList", {
-  enumerable: true,
-  get: function () {
-    return _Filter.FilterList;
-  }
-});
-Object.defineProperty(exports, "FilterListPhone", {
-  enumerable: true,
-  get: function () {
-    return _Filter.FilterListPhone;
-  }
-});
 Object.defineProperty(exports, "Folder", {
   enumerable: true,
   get: function () {

package/lib/locale/messages-en.js

@@ -1052,7 +1052,7 @@ const messages = {
       notification: {
         title: "Notifications",
         showAll: "View all notifications",
-        description: "Welcome to NDLA Arena. Here you can discuss, share and cooperate with other teachers from all of Norway. You will find forums for the different subjects and themes.",
+        description: "Welcome to the arena for teachers in upper secondary education. This is <em>your</em> arena: a professional meeting place for discussion, inspiration, sharing, development, and collaboration.",
         myNotification: "My notifications",
         markAll: "Mark all as read",
         subscribe: "You will now be notified of new replies to this topic",

package/lib/locale/messages-nb.js

@@ -1052,7 +1052,7 @@ const messages = {
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.",
+        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",

package/lib/locale/messages-nn.js

@@ -1052,7 +1052,7 @@ const messages = {
       notification: {
         title: "Varslingar",
         showAll: "Sjå alle varslingar",
-        description: "Velkomen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærarar frå heile Noreg. Du finn forum for ulike fag og tema.",
+        description: "Velkommen inn i arenaen for lærarar i vidaregåande opplæring! Dette er <em>din</em> arena: ein fagleg møtestad for diskusjon, inspirasjon, deling og utviklande samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får no varsling om nye svar på dette innlegget",

package/lib/locale/messages-se.js

@@ -1052,7 +1052,7 @@ const messages = {
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.",
+        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",

package/lib/locale/messages-sma.js

@@ -1052,7 +1052,7 @@ const messages = {
       notification: {
         title: "Varslinger",
         showAll: "Se alle varslinger",
-        description: "Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.",
+        description: "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.8",
+  "version": "50.9.10",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.14",
+    "@ndla/types-embed": "^4.0.15",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c5d1a8f2b6c4572f5e046629828c60b78250bffc"
+  "gitHead": "7d0a10e8b9a945dcebaae4267bfe174237e9bad1"
 }

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -16,7 +16,7 @@ import { defaultParameters } from "../../../../stories/defaults";
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
   disclaimer: "Dette inholdet er ikke tastaturvennlig.",
-  articleId: 123,
+  articleId: "123",
 };
 
 const meta: Meta<typeof UuDisclaimerEmbed> = {

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -36,7 +36,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
 
   const { embedData, data } = embed;
 
-  const disclaimerLink = data.disclaimerLink ? (
+  const disclaimerLink = data?.disclaimerLink ? (
     <>
       {` ${t("uuDisclaimer.alternative")} `}
       <SafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">

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/index.ts

@@ -80,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

@@ -1062,7 +1062,7 @@ const messages = {
         title: "Notifications",
         showAll: "View all notifications",
         description:
-          "Welcome to NDLA Arena. Here you can discuss, share and cooperate with other teachers from all of Norway. You will find forums for the different subjects and themes.",
+          "Welcome to the arena for teachers in upper secondary education. This is <em>your</em> arena: a professional meeting place for discussion, inspiration, sharing, development, and collaboration.",
         myNotification: "My notifications",
         markAll: "Mark all as read",
         subscribe: "You will now be notified of new replies to this topic",

package/src/locale/messages-nb.ts

@@ -1061,7 +1061,7 @@ const messages = {
         title: "Varslinger",
         showAll: "Se alle varslinger",
         description:
-          "Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.",
+          "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",

package/src/locale/messages-nn.ts

@@ -1061,7 +1061,7 @@ const messages = {
         title: "Varslingar",
         showAll: "Sjå alle varslingar",
         description:
-          "Velkomen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærarar frå heile Noreg. Du finn forum for ulike fag og tema.",
+          "Velkommen inn i arenaen for lærarar i vidaregåande opplæring! Dette er <em>din</em> arena: ein fagleg møtestad for diskusjon, inspirasjon, deling og utviklande samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får no varsling om nye svar på dette innlegget",

package/src/locale/messages-se.ts

@@ -1063,7 +1063,7 @@ const messages = {
         title: "Varslinger",
         showAll: "Se alle varslinger",
         description:
-          "Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.",
+          "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",

package/src/locale/messages-sma.ts

@@ -1065,7 +1065,7 @@ const messages = {
         title: "Varslinger",
         showAll: "Se alle varslinger",
         description:
-          "Velkommen til NDLA Arena. Her kan du diskutere, dele og samarbeide med andre lærere fra hele Norge. Du finner forum for ulike fag og tema.",
+          "Velkommen inn i arenaen for lærere i videregående opplæring! Dette er <em>din</em> arena: et faglig møtested for diskusjon, inspirasjon, deling og utviklende samarbeid.",
         myNotification: "Mine varsler",
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",

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