@ndla/ui 42.0.6 → 42.1.1

package/lib/types.d.ts

@@ -87,9 +87,11 @@ export type elementRectType = {
     fromY: number;
     fromScale: number;
 };
-export type CompetenceGoalsItemType = {
+interface GrepCode {
     id: string;
     title: string;
+}
+export interface CompetenceGoalsItemType extends GrepCode {
     goals: {
         id: string;
         text: string;
@@ -97,7 +99,12 @@ export type CompetenceGoalsItemType = {
     }[];
     selected?: boolean;
     isOembed?: boolean;
-};
+}
+export interface CoreElementsItemType extends GrepCode {
+    text?: string;
+    url?: string;
+    isOembed?: boolean;
+}
 export type NotionMedia = {
     type: 'video' | 'other';
     element: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "42.0.6",
+  "version": "42.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,21 +31,21 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.12",
+    "@ndla/accordion": "^2.2.13",
     "@ndla/article-scripts": "^3.0.18",
-    "@ndla/button": "^10.1.11",
-    "@ndla/carousel": "^3.1.9",
+    "@ndla/button": "^10.1.12",
+    "@ndla/carousel": "^3.1.10",
     "@ndla/core": "^4.1.4",
-    "@ndla/forms": "^4.3.12",
+    "@ndla/forms": "^4.3.13",
     "@ndla/hooks": "^2.0.7",
-    "@ndla/icons": "^3.0.7",
+    "@ndla/icons": "^4.0.0",
     "@ndla/licenses": "^7.1.1",
-    "@ndla/modal": "^3.0.9",
-    "@ndla/notion": "^5.0.10",
-    "@ndla/safelink": "^4.1.11",
+    "@ndla/modal": "^3.0.10",
+    "@ndla/notion": "^5.0.11",
+    "@ndla/safelink": "^4.1.12",
     "@ndla/switch": "^1.1.8",
     "@ndla/tabs": "^3.0.4",
-    "@ndla/tooltip": "^4.1.11",
+    "@ndla/tooltip": "^4.1.12",
     "@ndla/util": "^3.1.13",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-popover": "^1.0.6",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a89e0fa5877b3ad21cc5f140ebc269e0d2e2061"
+  "gitHead": "4c4276e39a7529a8043ef1dcc3c1e9858f2ddca8"
 }

package/src/Article/ArticleByline.tsx

@@ -51,6 +51,8 @@ type SupplierProps = {
   name: string;
 };
 
+type AccordionHeaderVariants = 'white' | 'blue';
+
 type Props = {
   authors?: AuthorProps[];
   suppliers?: SupplierProps[];
@@ -59,6 +61,7 @@ type Props = {
   licenseBox?: ReactNode;
   locale?: string;
   footnotes?: FootNote[];
+  accordionHeaderVariant?: AccordionHeaderVariants;
 };
 
 const renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {
@@ -85,7 +88,7 @@ const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
 const LicenseWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
-  padding-right: ${spacing.xsmall}}
+  padding-right: ${spacing.xsmall};
 `;
 
 const StyledAccordionHeader = styled(AccordionHeader)`
@@ -93,6 +96,10 @@ const StyledAccordionHeader = styled(AccordionHeader)`
   border: 1px solid ${colors.brand.tertiary};
   font-size: ${fonts.sizes('16px', '29px')};
   font-weight: ${fonts.weight.semibold};
+
+  &[data-background-color='white'] {
+    background-color: ${colors.background.default};
+  }
 `;
 
 const refRegexp = /note\d/;
@@ -106,6 +113,7 @@ const ArticleByline = ({
   licenseBox,
   published,
   locale,
+  accordionHeaderVariant = 'blue',
 }: Props) => {
   const { t } = useTranslation();
   const [openAccordions, setOpenAccordions] = useState<string[]>([]);
@@ -157,7 +165,9 @@ const ArticleByline = ({
       <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
           <AccordionItem value="rulesForUse">
-            <StyledAccordionHeader headingLevel="h2">{t('article.useContent')}</StyledAccordionHeader>
+            <StyledAccordionHeader headingLevel="h2" data-background-color={accordionHeaderVariant}>
+              {t('article.useContent')}
+            </StyledAccordionHeader>
             <AccordionContent>{licenseBox}</AccordionContent>
           </AccordionItem>
         )}

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -7,58 +7,10 @@
  */
 
 import React from 'react';
-import styled from '@emotion/styled';
-import { fonts, spacing, mq, breakpoints } from '@ndla/core';
-import { Search } from '@ndla/icons/common';
-import { SafeLinkButton } from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import { CompetenceGoalsItemType } from '../types';
-
-const GoalItem = styled.li`
-  margin: ${spacing.medium} 0;
-  border-bottom: 1px solid #d1d6db;
-`;
-
-const GoalsHeading = styled.h3`
-  margin-top: 0;
-`;
-
-const StyledSearch = styled(Search)`
-  height: 24px;
-  width: 24px;
-  min-width: 24px;
-`;
-
-const GoalList = styled.ul`
-  padding: 0;
-`;
-
-const GoalText = styled.p`
-  margin: 0;
-`;
-
-const ListItemContent = styled.div`
-  display: flex;
-  justify-content: space-between;
-  ${fonts.sizes('22px', '32px')};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    flex-direction: column;
-  }
-`;
-
-const GoalSearchWrapper = styled.div`
-  margin-left: ${spacing.normal};
-  flex: 0 0 289px;
-  span {
-    text-align: left;
-  }
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    margin-left: 0;
-    margin-top: ${spacing.normal};
-    flex-basis: auto;
-  }
-`;
+import SearchButton from './SearchButton';
+import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from './styles';
 
 const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType) => {
   const { t } = useTranslation();
@@ -71,12 +23,11 @@ const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType)
             <ListItemContent>
               <GoalText>{goal.text}</GoalText>
               {goal.url && (
-                <GoalSearchWrapper>
-                  <SafeLinkButton variant="outline" to={goal.url} target={isOembed ? '_blank' : '_self'}>
-                    <StyledSearch size="large" />
-                    <span>{t('competenceGoals.competenceGoalResourceSearchText', { goal: goal.id })}</span>
-                  </SafeLinkButton>
-                </GoalSearchWrapper>
+                <SearchButton
+                  url={goal.url}
+                  isOembed={isOembed}
+                  searchText={t('competenceGoals.competenceGoalResourceSearchText', { code: goal.id })}
+                />
               )}
             </ListItemContent>
           </li>

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -30,8 +30,8 @@ const ButtonWrapper = styled.div`
 `;
 
 const LicenseIconsTextWrapper = styled.span`
-  padding-bottom: 5px;
-  margin-left: 5px;
+  padding-bottom: ${spacing.xxsmall};
+  margin-left: ${spacing.xxsmall};
 `;
 
 const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -9,25 +9,26 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { MenuBook } from '@ndla/icons/action';
-import { spacing } from '@ndla/core';
+import { colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import CompetenceGoalItem from './CompetenceGoalItem';
-import { CompetenceGoalsItemType } from '../types';
+import { CompetenceGoalsItemType, CoreElementsItemType } from '../types';
+import CoreElementItem from './CoreElementItem';
 
-const GroupedGoalsWrapper = styled.div`
-  margin: 24px 0 52px;
+const GroupedElementWrapper = styled.div`
+  margin: ${spacing.normal} 0 ${spacing.large};
 `;
 
 const GroupedGoalsTitleWrapper = styled.div`
-  border-bottom: 1px solid #d1d6db;
+  border-bottom: 1px solid ${colors.brand.neutral7};
 `;
 const GroupedGoalsTitle = styled.h2`
   display: flex;
   align-items: center;
   gap: ${spacing.xsmall};
   svg {
-    width: 24px;
-    height: 24px;
+    width: ${spacing.normal};
+    height: ${spacing.normal};
   }
 `;
 
@@ -42,10 +43,6 @@ const GoalList = styled.ul`
   list-style-image: none;
 `;
 
-const GroupedCoreItemsWrapper = styled.div`
-  margin: 24px 0 52px;
-`;
-
 export type CompetenceTypeProps = 'competenceGoals' | 'coreElement';
 export type CompetenceGoals = {
   title: string;
@@ -53,11 +50,7 @@ export type CompetenceGoals = {
 };
 export type CoreElementItems = {
   title?: string;
-  elements: {
-    id: string;
-    name: string;
-    text: string;
-  }[];
+  elements: CoreElementsItemType[];
 };
 export type ListItemProp = {
   id: string;
@@ -74,12 +67,13 @@ export type ListItemProps = {
 const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
   const { t } = useTranslation();
   const { type, groupedCompetenceGoals, groupedCoreElementItems } = item;
+
   switch (type) {
     case 'competenceGoals':
       return (
         <>
           {groupedCompetenceGoals?.map((group) => (
-            <GroupedGoalsWrapper key={group.title}>
+            <GroupedElementWrapper key={group.title}>
               <GroupedGoalsTitleWrapper>
                 <hgroup>
                   <GroupedGoalsTitle>
@@ -102,7 +96,7 @@ const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
                   ))}
                 </GoalList>
               )}
-            </GroupedGoalsWrapper>
+            </GroupedElementWrapper>
           ))}
         </>
       );
@@ -110,18 +104,24 @@ const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
       return (
         <>
           {groupedCoreElementItems?.map((group) => (
-            <GroupedCoreItemsWrapper key={group.title}>
+            <GroupedElementWrapper key={group.title}>
               <GroupedGoalsTitle>
                 <MenuBook />
                 {group.title}
               </GroupedGoalsTitle>
-              {group.elements.map((coreItem) => (
-                <div key={coreItem.id}>
-                  <h3>{coreItem.name}</h3>
-                  <p>{coreItem.text}</p>
-                </div>
-              ))}
-            </GroupedCoreItemsWrapper>
+              <GoalList>
+                {group.elements.map((coreItem) => (
+                  <CoreElementItem
+                    key={coreItem.id}
+                    id={coreItem.id}
+                    title={coreItem.title}
+                    text={coreItem.text}
+                    url={coreItem.url}
+                    isOembed={isOembed}
+                  />
+                ))}
+              </GoalList>
+            </GroupedElementWrapper>
           ))}
         </>
       );

package/src/CompetenceGoalTab/CoreElementItem.tsx

@@ -0,0 +1,38 @@
+/**
+ * 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 { useTranslation } from 'react-i18next';
+import { CoreElementsItemType } from '../types';
+import SearchButton from './SearchButton';
+import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from './styles';
+
+const CoreElementItem = ({ title, text, url, id, isOembed }: CoreElementsItemType) => {
+  const { t } = useTranslation();
+  return (
+    <GoalItem>
+      <GoalsHeading>{title}</GoalsHeading>
+      <GoalList>
+        <li>
+          <ListItemContent>
+            <GoalText>{text}</GoalText>
+            {url && (
+              <SearchButton
+                url={url}
+                isOembed={isOembed}
+                searchText={t('competenceGoals.coreResourceSearchText', { code: id })}
+              />
+            )}
+          </ListItemContent>
+        </li>
+      </GoalList>
+    </GoalItem>
+  );
+};
+
+export default CoreElementItem;

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { spacing, mq, breakpoints } from '@ndla/core';
+import { Search } from '@ndla/icons/common';
+import { SafeLinkButton } from '@ndla/safelink';
+
+const StyledSearch = styled(Search)`
+  height: ${spacing.normal};
+  width: ${spacing.normal};
+  min-width: ${spacing.normal};
+`;
+
+const GoalSearchWrapper = styled.div`
+  margin-left: ${spacing.normal};
+  flex: 0 0 30%;
+  span {
+    text-align: left;
+  }
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    margin-left: 0;
+    margin-top: ${spacing.normal};
+    flex-basis: auto;
+  }
+`;
+
+interface SearchButtonProps {
+  url: string;
+  searchText: string;
+  isOembed?: boolean;
+}
+
+const SearchButton = ({ url, isOembed, searchText }: SearchButtonProps) => {
+  return (
+    <GoalSearchWrapper>
+      <SafeLinkButton variant="outline" to={url} target={isOembed ? '_blank' : '_self'}>
+        <StyledSearch size="large" />
+        <span>{searchText}</span>
+      </SafeLinkButton>
+    </GoalSearchWrapper>
+  );
+};
+export default SearchButton;

package/src/CompetenceGoalTab/styles.ts

@@ -0,0 +1,36 @@
+/**
+ * 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, fonts, mq, spacing } from '@ndla/core';
+
+export const ListItemContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${fonts.sizes('22px', '32px')};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    flex-direction: column;
+  }
+`;
+
+export const GoalItem = styled.li`
+  margin: ${spacing.medium} 0;
+  border-bottom: 1px solid ${colors.brand.neutral7};
+`;
+
+export const GoalsHeading = styled.h3`
+  margin-top: 0;
+`;
+
+export const GoalList = styled.ul`
+  padding: 0;
+`;
+
+export const GoalText = styled.p`
+  margin: 0;
+`;

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -7,17 +7,19 @@
  */
 
 import { ReactNode } from 'react';
-import { breakpoints, fonts, mq, spacing, utils } from '@ndla/core';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import styled from '@emotion/styled';
 import { Article } from '../types';
 import LayoutItem from '../Layout';
 import { Heading } from '../Typography';
+import { ArticleByline } from '../Article';
 
 interface Props {
   article: Article;
   children?: ReactNode;
   id: string;
   isWide?: boolean;
+  licenseBox?: ReactNode;
 }
 
 const StyledArticle = styled.article`
@@ -39,7 +41,7 @@ const StyledIntroduction = styled.div`
   }
 `;
 
-export const FrontpageArticle = ({ article, id, isWide }: Props) => {
+export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) => {
   const { title, introduction, content } = article;
 
   if (isWide) {
@@ -50,6 +52,10 @@ export const FrontpageArticle = ({ article, id, isWide }: Props) => {
     );
   }
 
+  const authors =
+    article.copyright.creators.length || article.copyright.rightsholders.length
+      ? article.copyright.creators
+      : article.copyright.processors;
   return (
     <StyledArticle>
       <LayoutItem>
@@ -59,6 +65,15 @@ export const FrontpageArticle = ({ article, id, isWide }: Props) => {
         <StyledIntroduction>{introduction}</StyledIntroduction>
       </LayoutItem>
       <LayoutItem>{content}</LayoutItem>
+      <ArticleByline
+        authors={authors}
+        suppliers={article.copyright.rightsholders}
+        license={article.copyright.license?.license!}
+        published={article.published}
+        footnotes={article.footNotes}
+        accordionHeaderVariant={'white'}
+        licenseBox={licenseBox}
+      />
     </StyledArticle>
   );
 };

package/src/Hero/Hero.tsx

@@ -56,6 +56,10 @@ const StyledDiv = styled.div`
     background-color: ${colors.brand.primary};
   }
 
+  &[data-contenttype='frontpage-article'] {
+    background-color: ${colors.background.lightBlue};
+  }
+
   &[data-contenttype='ndla-film has-image'],
   &[data-contenttype='ndla-film'] {
     background: ${colors.ndlaFilm.filmColor};
@@ -112,7 +116,6 @@ interface HeroProps extends HTMLAttributes<HTMLDivElement> {
 export const Hero = ({ children, contentType }: HeroProps) => (
   <StyledDiv data-contenttype={contentType}>{children || null}</StyledDiv>
 );
-
 interface Props {
   children?: ReactNode;
   hasImage?: boolean;

package/src/Layout/OneColumn.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = BEMHelper({
@@ -15,7 +15,7 @@ const classes = BEMHelper({
   outputIsString: true,
 });
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   className?: string;
   cssModifier?: string;
@@ -24,7 +24,7 @@ interface Props {
   extraPadding?: boolean;
 }
 
-export const OneColumn = ({ children, className, cssModifier, wide, noPadding, extraPadding }: Props) => {
+export const OneColumn = ({ children, className, cssModifier, wide, noPadding, extraPadding, ...rest }: Props) => {
   const modifiers = [];
 
   if (cssModifier) {
@@ -43,7 +43,11 @@ export const OneColumn = ({ children, className, cssModifier, wide, noPadding, e
     modifiers.push('extra-padding');
   }
 
-  return <div className={`${classes('', modifiers)} ${className}`}>{children}</div>;
+  return (
+    <div className={`${classes('', modifiers)} ${className}`} {...rest}>
+      {children}
+    </div>
+  );
 };
 
 export default OneColumn;

package/src/MyNdla/Resource/FolderInput.tsx

@@ -24,6 +24,10 @@ interface Props extends ComponentProps<typeof InputV2> {
   onSave: () => void;
 }
 
+const StyledSpinner = styled(Spinner)`
+  margin: ${spacing.small};
+`;
+
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = (error?: boolean) =>
   `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
@@ -102,7 +106,7 @@ const FolderInput = forwardRef<HTMLInputElement, Props>(({ loading, error, onClo
             </>
           )}
           <div aria-live="assertive">
-            {loading && <Spinner size="normal" margin={spacing.small} id="folder-spinner" aria-label={t('loading')} />}
+            {loading && <StyledSpinner size="normal" id="folder-spinner" aria-label={t('loading')} />}
           </div>
         </Row>
       }

package/src/SearchTypeResult/SearchHeader.tsx

@@ -13,9 +13,10 @@ import { ButtonV2 } from '@ndla/button';
 import { Spinner } from '@ndla/icons';
 
 import SearchFieldHeader from './SearchFieldHeader';
-import { CompetenceGoalsItemType } from '../types';
+import { CompetenceGoalsItemType, CoreElementsItemType } from '../types';
 import CompetenceGoalItem from '../CompetenceGoalTab/CompetenceGoalItem';
 import SubjectFilters, { SubjectFilterProps } from './components/SubjectFilters';
+import CoreElementItem from '../CompetenceGoalTab/CoreElementItem';
 
 const Wrapper = styled.div`
   margin-top: ${spacing.normal};
@@ -36,13 +37,13 @@ const PhraseWrapper = styled.div`
   margin: ${spacing.normal} 0 ${spacing.medium};
 `;
 
-const CompetenceGoalsWrapper = styled.div`
+const GrepCodesWrapper = styled.div`
   font-size: 16px;
   width: 100%;
   margin-top: ${spacing.normal};
 `;
 
-const CompetenceGoalsList = styled.ul`
+const GrepCodesList = styled.ul`
   padding: 0;
   margin: 0;
   li {
@@ -56,7 +57,7 @@ const PhraseText = styled.div`
 `;
 const PhraseSuggestionText = styled.div``;
 
-const GoalsLabel = styled.div`
+const GrepCodesLabel = styled.div`
   ${fonts.sizes('16px', '32px')};
   text-transform: uppercase;
 `;
@@ -69,6 +70,7 @@ type Props = {
   filters: SubjectFilterProps['filters'];
   activeFilters?: SubjectFilterProps['activeFilters'];
   competenceGoals?: CompetenceGoalsItemType[];
+  coreElements?: CoreElementsItemType[];
   onSearchValueChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   noResults?: boolean;
@@ -85,6 +87,7 @@ const SearchHeader = ({
   activeFilters,
   filters,
   competenceGoals,
+  coreElements,
   noResults,
   loading,
 }: Props) => {
@@ -143,18 +146,30 @@ const SearchHeader = ({
           </PhraseSuggestionText>
         )}
         {!!competenceGoals?.length && (
-          <CompetenceGoalsWrapper>
+          <GrepCodesWrapper>
             {competenceGoals?.length && (
               <>
-                <GoalsLabel>{t('competenceGoals.competenceGoalItem.title')}</GoalsLabel>
-                <CompetenceGoalsList>
+                <GrepCodesLabel>{t('competenceGoals.competenceGoalItem.title')}</GrepCodesLabel>
+                <GrepCodesList>
                   {competenceGoals.map((e) => (
                     <CompetenceGoalItem key={e.id} id={e.id} title={e.title} goals={e.goals} />
                   ))}
-                </CompetenceGoalsList>
+                </GrepCodesList>
               </>
             )}
-          </CompetenceGoalsWrapper>
+          </GrepCodesWrapper>
+        )}
+        {!!coreElements?.length && (
+          <GrepCodesWrapper>
+            <>
+              <GrepCodesLabel>{t('competenceGoals.competenceTabCorelabel')}</GrepCodesLabel>
+              <GrepCodesList>
+                {coreElements.map((e) => (
+                  <CoreElementItem key={e.id} id={e.id} title={e.title} text={e.text} url={e.url} />
+                ))}
+              </GrepCodesList>
+            </>
+          </GrepCodesWrapper>
         )}
       </PhraseWrapper>
       {isNarrowScreen && (