@ndla/ui 37.1.4 → 39.0.0

package/src/CompetenceGoals/CompetenceGoalsDialog.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { breakpoints, fonts, mq } from '@ndla/core';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { breakpoints, mq } from '@ndla/core';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTitle, ModalProps } from '@ndla/modal';
 import { FooterHeaderIcon } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 
@@ -21,28 +21,9 @@ const HeaderWrapper = styled.div`
   width: 100%;
 `;
 
-const HeadingWrapper = styled.h1`
-  display: flex;
-  align-items: center;
-  ${fonts.sizes('18px', '32px')};
-  margin: 0;
-  font-weight: ${fonts.weight.semibold};
-`;
-
 interface Props {
   children?: ReactNode;
-  modalProps?: ComponentProps<typeof Modal>;
-  isOpen?: boolean;
-  onClose?: () => void;
   subjectName?: string;
-  curriculums?: {
-    id: string;
-    name: string;
-    goals?: {
-      id: string;
-      name: string;
-    }[];
-  }[];
 }
 
 const CompetenceGoalsWrapper = styled.div`
@@ -57,29 +38,23 @@ const CompetenceGoalsWrapper = styled.div`
   }
 `;
 
-export const CompetenceGoalsDialog = ({ children, isOpen, onClose, subjectName, modalProps }: Props) => {
+export const CompetenceGoalsDialog = ({
+  children,
+  subjectName,
+  ...modalProps
+}: Props & Omit<ModalProps, 'children'>) => {
   const { t } = useTranslation();
-  const iconId = 'popupCompetenceGoals';
 
   return (
-    <Modal
-      labelledBy={iconId}
-      {...modalProps}
-      controllable
-      isOpen={isOpen}
-      onClose={onClose}
-      size="fullscreen"
-      backgroundColor="light-gradient"
-      narrow
-    >
+    <Modal {...(modalProps as ModalProps)} size="full">
       {(close) => (
         <>
-          <ModalHeader modifier="menu">
+          <ModalHeader>
             <HeaderWrapper>
-              <HeadingWrapper>
-                <FooterHeaderIcon id={iconId} size="24px" style={{ marginRight: '20px' }} />
+              <ModalTitle>
+                <FooterHeaderIcon size="24px" style={{ marginRight: '20px' }} />
                 {t('competenceGoals.modalText')} {subjectName && ` \u2022 ${subjectName}`}
-              </HeadingWrapper>
+              </ModalTitle>
               <ModalCloseButton onClick={close} title={t('competenceGoals.competenceGoalClose')} />
             </HeaderWrapper>
           </ModalHeader>

package/src/Filter/FilterButtons.tsx

@@ -11,7 +11,7 @@ import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import ToggleItem from './ToggleItem';
 import FilterCarousel from './FilterCarousel';
 
@@ -127,10 +127,9 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
             </StyledButtonElementWrapper>
           ))}
           <Modal
-            label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
-            size="fullscreen"
+            aria-label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}
+            size="full"
             animation="subtle"
-            backgroundColor="white"
             activateButton={
               <StyledButtonElementWrapper>
                 <ButtonV2 colorTheme="light" size="normal" shape="pill">
@@ -144,7 +143,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
           >
             {(onClose: () => void) => (
               <>
-                <ModalHeader modifier={['left-align']}>
+                <ModalHeader>
                   <h1>{heading}</h1>
                   <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
                 </ModalHeader>

package/src/Filter/FilterListPhone.tsx

@@ -8,7 +8,7 @@
 
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
 import debounce from 'lodash/debounce';
 import { classes } from './filterClasses';
@@ -138,8 +138,7 @@ const FilterListPhone = ({
           />
         )}
         <Modal
-          size="fullscreen"
-          backgroundColor="grey"
+          size="full"
           activateButton={
             <ButtonV2 variant="outline" {...classes('modal-button')}>
               {messages.openFilter}
@@ -148,7 +147,7 @@ const FilterListPhone = ({
         >
           {(onClose) => (
             <>
-              <ModalHeader modifier={['left-align']}>
+              <ModalHeader>
                 <div {...classes('modal-header')}>
                   <div {...classes('modal-heading')}>
                     {!isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}

package/src/Footer/index.ts

@@ -9,6 +9,5 @@
 import Footer from './Footer';
 import { FooterText } from './FooterText';
 import { EditorName } from './EditorName';
-import FooterAuth from './FooterAuth';
 
-export { Footer, FooterText, EditorName, FooterAuth };
+export { Footer, FooterText, EditorName };

package/src/Grid/Grid.stories.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 Grid from './Grid';
+import { defaultParameters } from '../../../../stories/defaults';
+import { BlogPostStory } from '../BlogPost/BlogPost.stories';
+import { KeyFigureStory } from '../KeyFigure/KeyFigure.stories';
+
+export default {
+  title: 'Enkle komponenter/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+    layout: 'centered',
+  },
+  args: {
+    columns: 2,
+    border: false,
+  },
+} as Meta<typeof Grid>;
+
+export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
+  return (
+    <Grid {...args}>
+      <KeyFigureStory
+        title={KeyFigureStory.args?.title!}
+        subtitle={KeyFigureStory.args?.subtitle!}
+        image={KeyFigureStory.args?.image}
+      />
+      <KeyFigureStory
+        title={KeyFigureStory.args?.title!}
+        subtitle={KeyFigureStory.args?.subtitle!}
+        image={KeyFigureStory.args?.image}
+      />
+    </Grid>
+  );
+};
+
+export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
+  return (
+    <Grid {...args}>
+      <BlogPostStory
+        metaImage={BlogPostStory.args?.metaImage!}
+        title={BlogPostStory.args?.title!}
+        size={BlogPostStory.args?.size}
+        headingLevel={BlogPostStory.args?.headingLevel}
+        url={BlogPostStory.args?.url!}
+        author={BlogPostStory.args?.author}
+      />
+      <BlogPostStory
+        metaImage={BlogPostStory.args?.metaImage!}
+        title={BlogPostStory.args?.title!}
+        size={BlogPostStory.args?.size}
+        headingLevel={BlogPostStory.args?.headingLevel}
+        url={BlogPostStory.args?.url!}
+        author={BlogPostStory.args?.author}
+      />
+    </Grid>
+  );
+};

package/src/Grid/Grid.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 styled from '@emotion/styled';
+import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
+import { ReactNode } from 'react';
+
+export interface GridProps {
+  columns: 2 | 4;
+  border: 'none' | 'lightBlue';
+  children?: ReactNode[];
+}
+
+const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto;
+  justify-content: center;
+  gap: ${spacing.large};
+  padding: ${spacing.medium};
+
+  border-radius: ${misc.borderRadius};
+
+  &[data-border='lightBlue'] {
+    border: 1px solid ${colors.brand.light};
+  }
+
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    grid-template-columns: repeat(2, auto);
+  }
+
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    &[data-columns='4'] {
+      grid-template-columns: repeat(4, auto);
+    }
+  }
+
+  p {
+    word-break: break-word;
+  }
+
+  /** The styling here is to handle figures/text until a new figure element is developed */
+  figure,
+  iframe {
+    inset: 0;
+    width: 100% !important;
+    padding: 0;
+  }
+`;
+
+const Grid = ({ columns, border, children, ...rest }: GridProps) => {
+  return (
+    <GridContainer data-border={border} data-columns={columns} {...rest}>
+      {children}
+    </GridContainer>
+  );
+};
+
+export default Grid;

package/src/Grid/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 Grid } from './Grid';
+export type { GridProps as GridType } from './Grid';

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -10,6 +10,14 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { defaultParameters } from '../../../../stories/defaults';
 import KeyFigure from './KeyFigure';
+const args = {
+  title: '500',
+  subtitle: 'TVERRFAGLIGE RESSURSER',
+  image: {
+    alt: 'Nøkkeltall tverrfaglig',
+    src: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
+  },
+};
 
 export default {
   title: 'Enkle komponenter/Nøkkeltall',
@@ -19,18 +27,12 @@ export default {
     ...defaultParameters,
     layout: 'centered',
   },
-  args: {
-    title: '500',
-    subtitle: 'TVERRFAGLIGE RESSURSER',
-    image: {
-      alt: 'Nøkkeltall tverrfaglig',
-      src: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
-    },
-  },
+  args: args,
 } as Meta<typeof KeyFigure>;
 
 export const KeyFigureStory: StoryFn<typeof KeyFigure> = ({ ...args }) => {
   return <KeyFigure {...args} />;
 };
 
+KeyFigureStory.args = args;
 KeyFigureStory.storyName = 'Nøkkeltall';

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -7,12 +7,13 @@
  */
 
 import React, { ReactChild, ReactChildren, ReactNode } from 'react';
-import { spacing, mq, breakpoints } from '@ndla/core';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { css } from '@emotion/react';
 import { ButtonV2 } from '@ndla/button';
 import { LearningPath } from '@ndla/icons/contentType';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 
 const buttonToggleCss = css`
   ${mq.range({ from: breakpoints.tablet })} {
@@ -29,6 +30,10 @@ const buttonToggleCss = css`
   }
 `;
 
+const StyledModal = styled(Modal)`
+  background-color: ${colors.brand.greyLightest};
+`;
+
 type ModalWrapperProps = {
   innerWidth: number;
   children: (arg: VoidFunction) => ReactChild | ReactChildren | ReactNode;
@@ -38,10 +43,9 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
   const { t } = useTranslation();
   if (innerWidth < 601) {
     return (
-      <Modal
-        backgroundColor="grey"
+      <StyledModal
         animationDuration={200}
-        size="fullscreen"
+        size="full"
         activateButton={
           <ButtonV2 css={buttonToggleCss}>
             <LearningPath />
@@ -57,7 +61,7 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
             <ModalBody>{children(closeModal)}</ModalBody>
           </>
         )}
-      </Modal>
+      </StyledModal>
     );
   }
   return <>{children(() => {})}</>;

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,25 +1,27 @@
-import React, { ReactChild, ReactChildren, ReactNode } from 'react';
-import Modal from '@ndla/modal';
+import React, { ReactChild, ReactChildren, ReactNode, useState } from 'react';
+import { Drawer } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
-import { isFunction } from '@ndla/util';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { spacing, mq, breakpoints, colors, shadows } from '@ndla/core';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import ToggleSearchButton from '../Search/ToggleSearchButton';
 
 interface Props {
   onClose: VoidFunction;
-  children: (arg: Function) => ReactChild | ReactChildren | ReactNode;
+  children: (arg: () => void) => ReactChild | ReactChildren | ReactNode;
   hideOnNarrowScreen?: boolean;
   ndlaFilm?: boolean;
 }
 
+const StyledDrawer = styled(Drawer)`
+  background-color: ${colors.brand.greyLightest};
+`;
+
 const StyledHeader = styled.div`
   display: flex;
   gap: ${spacing.small};
-  align-items: center;
+  align-items: flex-start;
   ${mq.range({ from: breakpoints.tablet })} {
     width: 1024px;
     max-width: calc(100vw - 100px);
@@ -33,11 +35,14 @@ const StyledHeader = styled.div`
 
   display: flex;
   padding-top: ${spacing.small};
+  padding-bottom: ${spacing.small};
   ${mq.range({ from: breakpoints.tablet })} {
     padding-top: ${spacing.normal};
+    padding-bottom: ${spacing.normal};
   }
   ${mq.range({ from: breakpoints.desktop })} {
     padding-top: calc(${spacing.normal} + ${spacing.small});
+    padding-bottom: calc(${spacing.normal} + ${spacing.small});
   }
   > input {
     width: 100%;
@@ -55,76 +60,45 @@ const StyledHeader = styled.div`
   }
 `;
 
-const modalStyles = css`
-  & > [data-reach-dialog-content] {
-    position: fixed;
-    background: none;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 74px;
-    ${mq.range({ from: breakpoints.tablet })} {
-      height: 110px;
-    }
-    ${mq.range({ from: breakpoints.desktop })} {
-      height: 136px;
-    }
-    overflow-y: visible;
-    box-shadow: none;
-  }
-`;
-
-const extraBackdrop = css`
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 74px;
-  background: ${colors.brand.greyLighter};
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 110px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 136px;
-  }
-  box-shadow: ${shadows.searchHeader};
-`;
-
 const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScreen, ndlaFilm }: Props) => {
   const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <Modal
-      label={t('searchPage.searchFieldPlaceholder')}
-      backgroundColor="grey"
-      animation="slide-down"
-      animationDuration={200}
-      size="full-width"
-      onClose={onSearchClose}
-      css={modalStyles}
-      activateButton={
-        <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} ndlaFilm={ndlaFilm}>
-          {t('masthead.menu.search')}
-        </ToggleSearchButton>
-      }
-    >
-      {(closeModal: VoidFunction) => (
-        <>
-          <div css={extraBackdrop} />
-          <StyledHeader>
-            {isFunction(children) ? children(closeModal) : children}
-            <IconButton
-              aria-label={t('welcomePage.closeSearch')}
-              variant="ghost"
-              colorTheme="light"
-              onClick={closeModal}
-            >
-              <Cross className="c-icon--medium" />
-            </IconButton>
-          </StyledHeader>
-        </>
-      )}
-    </Modal>
+    <>
+      <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} onClick={() => setIsOpen(true)} ndlaFilm={ndlaFilm}>
+        {t('masthead.menu.search')}
+      </ToggleSearchButton>
+      <StyledDrawer
+        controlled
+        aria-label={t('searchPage.searchFieldPlaceholder')}
+        position="top"
+        expands
+        size="small"
+        animation="slideIn"
+        animationDuration={200}
+        isOpen={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+          onSearchClose();
+        }}
+      >
+        {(closeModal) => (
+          <>
+            <StyledHeader>
+              {children(closeModal)}
+              <IconButton
+                aria-label={t('welcomePage.closeSearch')}
+                variant="ghost"
+                colorTheme="light"
+                onClick={closeModal}
+              >
+                <Cross className="c-icon--medium" />
+              </IconButton>
+            </StyledHeader>
+          </>
+        )}
+      </StyledDrawer>
+    </>
   );
 };
 

package/src/MyNdla/SettingsMenu.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { isMobile, isTablet } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import { IconButtonV2, MenuItemProps, MenuButton, ButtonV2 } from '@ndla/button';
-import { Drawer, ModalBody, ModalCloseButton, ModalHeaderV2 } from '@ndla/modal';
+import { Drawer, ModalBody, ModalCloseButton, ModalHeader } from '@ndla/modal';
 import { HorizontalMenu } from '@ndla/icons/contentType';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
 
@@ -58,10 +58,10 @@ const SettingsMenu = ({ menuItems, children }: Props) => {
       >
         {(close) => (
           <>
-            <ModalHeaderV2>
+            <ModalHeader>
               <h1>{t('myNdla.settings')}</h1>
               <ModalCloseButton onClick={close} />
-            </ModalHeaderV2>
+            </ModalHeader>
             <StyledModalBody>
               {children?.(close)}
               {!!menuItems?.length && (

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { ModalHeader, ModalBody, ModalCloseButton, ModalV2 } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { ButtonV2 as Button } from '@ndla/button';
 import VisualElement from './VisualElement';
@@ -64,7 +64,7 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
         <div>
           <h2 id={titleId}>{aboutNDLAVideo.title}</h2>
           <p>{aboutNDLAVideo.description}</p>
-          <ModalV2 size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
+          <Modal size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
             {(onClose) => (
               <>
                 <ModalHeader>
@@ -73,7 +73,7 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
                 <ModalBody>{moreAboutNdlaFilm}</ModalBody>
               </>
             )}
-          </ModalV2>
+          </Modal>
         </div>
       </StyledAside>
     </div>

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,9 +1,9 @@
-import React, { Fragment, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import Modal, { ModalBody, ModalHeader, ModalCloseButton } from '@ndla/modal';
+import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';
 import { LearningPathQuiz } from '@ndla/icons/contentType';
@@ -170,8 +170,6 @@ const ResourcesTopicTitle = ({
     heading = <TopicTitle css={topicTitleSingleStyle}>{messages.label}</TopicTitle>;
   }
 
-  const tooltipId = 'popupDialogTooltip';
-
   return (
     <TopicTitleWrapper css={invertedStyle ? invertedTopicTitleWrapperStyle : undefined}>
       <div>
@@ -188,15 +186,13 @@ const ResourcesTopicTitle = ({
             css={invertedStyle ? invertedSwitchCSS : switchCSS}
           />
           <Modal
-            labelledBy={tooltipId}
-            narrow
             wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
                 <Tooltip tooltip={t('resource.dialogTooltip')}>{activateButton}</Tooltip>
               </TooltipWrapper>
             )}
             activateButton={
-              <TooltipButton id={tooltipId} aria-label={t('resource.dialogTooltip')}>
+              <TooltipButton aria-label={t('resource.dialogTooltip')}>
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }
@@ -204,10 +200,10 @@ const ResourcesTopicTitle = ({
             {(onClose: () => void) => (
               <>
                 <ModalHeader>
+                  <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
                   <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
                 </ModalHeader>
                 <ModalBody>
-                  <h1>{t('resource.dialogHeading')}</h1>
                   <hr />
                   <p>{t('resource.dialogText1')}</p>
                   <p>{t('resource.dialogText2')}</p>