@ndla/ui 51.0.0 → 53.0.0

package/src/Breadcrumb/HeaderBreadcrumb.tsx

@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2022-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, fonts, spacing } from "@ndla/core";
-import { ChevronRight } from "@ndla/icons/common";
-import { SafeLink } from "@ndla/safelink";
-import Breadcrumb from "./Breadcrumb";
-import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
-
-interface ThemeProps {
-  light: boolean | undefined;
-}
-
-const HeaderBreadcrumbWrapper = styled.div<ThemeProps>`
-  color: ${({ light }) => (light ? colors.white : colors.brand.primary)};
-`;
-
-const StyledHeaderSafeLink = styled(SafeLink)`
-  ${fonts.sizes(14)};
-  font-weight: ${fonts.weight.bold};
-  color: inherit;
-`;
-
-const StyledRightChevron = styled(ChevronRight)`
-  margin: ${spacing.xxsmall};
-  color: inherit;
-`;
-
-interface Props {
-  items: SimpleBreadcrumbItem[];
-  light?: boolean;
-}
-
-const HeaderBreadcrumb = ({ items, light }: Props) => {
-  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {
-    if (item.index === totalCount - 1) {
-      return null;
-    }
-    return <StyledRightChevron />;
-  };
-
-  return (
-    <HeaderBreadcrumbWrapper light={light}>
-      <StyledHeaderSafeLink to={items[0]?.to}>{items[0]?.name}</StyledHeaderSafeLink>
-      <Breadcrumb items={items.slice(1)} renderSeparator={renderSeparator} autoCollapse collapseFirst />
-    </HeaderBreadcrumbWrapper>
-  );
-};
-
-export default HeaderBreadcrumb;

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) 2021-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 { useTranslation } from "react-i18next";
-import SearchButton from "./SearchButton";
-import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from "./styles";
-import { CompetenceGoalsItemType } from "../types";
-
-const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType) => {
-  const { t } = useTranslation();
-  return (
-    <GoalItem>
-      <GoalsHeading>{title}</GoalsHeading>
-      <GoalList>
-        {goals.map((goal, index) => (
-          <li key={`${goal.text}${index}`}>
-            <ListItemContent>
-              <GoalText>{goal.text}</GoalText>
-              {goal.url && (
-                <SearchButton
-                  url={goal.url}
-                  isOembed={isOembed}
-                  searchText={t("competenceGoals.competenceGoalResourceSearchText", { code: goal.id })}
-                />
-              )}
-            </ListItemContent>
-          </li>
-        ))}
-      </GoalList>
-    </GoalItem>
-  );
-};
-
-export default CompetenceGoalItem;

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -1,85 +0,0 @@
-/**
- * Copyright (c) 2021-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 { useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
-import { BY, CC } from "@ndla/licenses";
-import { LicenseByline } from "@ndla/notion";
-import { SafeLink } from "@ndla/safelink";
-import { Tooltip } from "@ndla/tooltip";
-import CompetenceItem, { ListItemProp } from "./CompetenceItem";
-
-type CompetenceProps = {
-  list: ListItemProp[];
-  isOembed?: boolean;
-};
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  padding-top: ${spacing.small};
-  gap: ${spacing.small};
-  flex-wrap: wrap;
-`;
-
-const LicenseIconsTextWrapper = styled.span`
-  padding-bottom: ${spacing.xxsmall};
-  margin-left: ${spacing.xxsmall};
-`;
-
-const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {
-  const [currentTabItem, setCurrentTab] = useState(list[0]);
-  const { t } = useTranslation();
-
-  return (
-    <>
-      {list.length > 1 && (
-        <ButtonWrapper>
-          {list.map((tabItem, index) => {
-            const { id, title: tabTitle, type } = tabItem;
-            return (
-              <Tooltip
-                tooltip={
-                  type === "coreElement"
-                    ? t("competenceGoals.competenceTabCoreTooltip")
-                    : t("competenceGoals.showCompetenceGoals")
-                }
-                key={`tabitem-${id}`}
-              >
-                <ButtonV2
-                  shape="pill"
-                  aria-current={id === currentTabItem.id}
-                  colorTheme={id !== currentTabItem.id ? "lighter" : undefined}
-                  onClick={() => setCurrentTab(list[index])}
-                >
-                  {tabTitle}
-                </ButtonV2>
-              </Tooltip>
-            );
-          })}
-        </ButtonWrapper>
-      )}
-      <CompetenceItem item={currentTabItem} isOembed={isOembed} />
-      <LicenseByline licenseRights={[CC, BY]}>
-        <LicenseIconsTextWrapper>UDIR</LicenseIconsTextWrapper>
-      </LicenseByline>
-      {`${t("competenceGoals.licenseData")} `}
-      <SafeLink to="https://data.norge.no/nlod/no" target="_blank">
-        NLOD
-      </SafeLink>
-      {`, ${t("competenceGoals.licenseFrom")} `}
-      <SafeLink to="https://data.udir.no/" target="_blank">
-        data.udir.no
-      </SafeLink>
-    </>
-  );
-};
-
-export default CompetenceGoalTab;

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -1,130 +0,0 @@
-/**
- * Copyright (c) 2021-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 { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
-import { MenuBook } from "@ndla/icons/action";
-import CompetenceGoalItem from "./CompetenceGoalItem";
-import CoreElementItem from "./CoreElementItem";
-import { CompetenceGoalsItemType, CoreElementsItemType } from "../types";
-
-const GroupedElementWrapper = styled.div`
-  margin: ${spacing.normal} 0 ${spacing.large};
-`;
-
-const GroupedGoalsTitleWrapper = styled.div`
-  border-bottom: 1px solid ${colors.brand.neutral7};
-`;
-const GroupedGoalsTitle = styled.h2`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-  svg {
-    width: ${spacing.normal};
-    height: ${spacing.normal};
-  }
-`;
-
-const GoalsInfo = styled.p`
-  margin: 0;
-`;
-
-const GoalList = styled.ul`
-  padding: 0;
-  list-style-type: none;
-`;
-
-export type CompetenceTypeProps = "competenceGoals" | "coreElement";
-export type CompetenceGoals = {
-  title: string;
-  elements: CompetenceGoalsItemType[];
-};
-export type CoreElementItems = {
-  title?: string;
-  elements: CoreElementsItemType[];
-};
-export type ListItemProp = {
-  id: string;
-  title: string;
-  type: CompetenceTypeProps;
-  groupedCompetenceGoals?: CompetenceGoals[];
-  groupedCoreElementItems?: CoreElementItems[];
-};
-export type ListItemProps = {
-  item: ListItemProp;
-  isOembed?: boolean;
-};
-
-const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
-  const { t } = useTranslation();
-  const { type, groupedCompetenceGoals, groupedCoreElementItems } = item;
-
-  switch (type) {
-    case "competenceGoals":
-      return (
-        <>
-          {groupedCompetenceGoals?.map((group) => (
-            <GroupedElementWrapper key={group.title}>
-              <GroupedGoalsTitleWrapper>
-                <hgroup>
-                  <GroupedGoalsTitle>
-                    <MenuBook />
-                    {group.title}
-                  </GroupedGoalsTitle>
-                  <GoalsInfo>{t("competenceGoals.competenceGoalTitle")}</GoalsInfo>
-                </hgroup>
-              </GroupedGoalsTitleWrapper>
-              {group.elements.length > 0 && (
-                <GoalList>
-                  {group.elements.map((goal) => (
-                    <CompetenceGoalItem
-                      key={goal.id}
-                      id={goal.id}
-                      title={goal.title}
-                      goals={goal.goals}
-                      isOembed={isOembed}
-                    />
-                  ))}
-                </GoalList>
-              )}
-            </GroupedElementWrapper>
-          ))}
-        </>
-      );
-    case "coreElement":
-      return (
-        <>
-          {groupedCoreElementItems?.map((group) => (
-            <GroupedElementWrapper key={group.title}>
-              <GroupedGoalsTitle>
-                <MenuBook />
-                {group.title}
-              </GroupedGoalsTitle>
-              <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>
-          ))}
-        </>
-      );
-    default:
-      return null;
-  }
-};
-
-export default CompetenceItem;

package/src/CompetenceGoalTab/CoreElementItem.tsx

@@ -1,39 +0,0 @@
-/**
- * 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 { useTranslation } from "react-i18next";
-import SearchButton from "./SearchButton";
-import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from "./styles";
-import { CoreElementsItemType } from "../types";
-
-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

@@ -1,50 +0,0 @@
-/**
- * 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 { 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="normal" />
-        <span>{searchText}</span>
-      </SafeLinkButton>
-    </GoalSearchWrapper>
-  );
-};
-export default SearchButton;

package/src/CompetenceGoalTab/index.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2021-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 CompetenceGoalTab from "./CompetenceGoalTab";
-export default CompetenceGoalTab;

package/src/CompetenceGoalTab/styles.ts

@@ -1,37 +0,0 @@
-/**
- * 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};
-  padding: 0;
-`;
-
-export const GoalsHeading = styled.h3`
-  margin-top: 0;
-`;
-
-export const GoalList = styled.ul`
-  padding: 0;
-`;
-
-export const GoalText = styled.p`
-  margin: 0;
-`;

package/src/Figure/component.figure.scss

@@ -1,60 +0,0 @@
-/**
-** FIGURE
-** Figure element, displaying images, embeds, videos etc.
-** 1. Figure itself
-** 2. Figcaption element w/content
-**
-** PRINCIPLE:
-** <figure class="c-figure">
-**   <div class="c-figure__img">
-**      <img>
-**   </div>
-**   <figcaption class="c-figure__caption">
-**       <div class="c-figure__info">Caption</div>
-**       <div class="c-figure__byline">License, CTA</div>
-**   </figcaption>
-** </figure>
-**/
-
-/* 1. */
-
-.c-figure {
-  img {
-    width: 100%;
-  }
-  iframe {
-    display: block;
-    border: 0;
-  }
-
-  > * {
-    max-width: 100%;
-    border: 0;
-  }
-}
-.c-figure {
-  // display: flex; // TODO: Makes h5p-iframes appear small and not fullsize
-  margin: $spacing 0 $spacing;
-  position: relative;
-  width: 100%;
-  transition:
-    transform 0.4s,
-    width 0.4s,
-    height 0.4s;
-
-  &--full-column {
-    left: auto !important;
-    right: auto !important;
-    width: auto !important;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: $spacing--large;
-    margin-bottom: 0;
-  }
-  &--left {
-    float: left;
-  }
-  &--right {
-    float: right;
-  }
-}