@openedx/frontend-base 1.0.0-alpha.9 → 1.0.0

package/shell/footer/CenterLinks.tsx

@@ -1,11 +0,0 @@
-import { useWidgets } from '../../runtime';
-
-export default function CenterLinks() {
-  const widgets = useWidgets();
-
-  return (
-    <div className="d-flex flex-wrap column-gap-6 row-gap-4">
-      {widgets}
-    </div>
-  );
-}

package/shell/footer/CopyrightNotice.tsx

@@ -1,36 +0,0 @@
-import { Hyperlink } from '@openedx/paragon';
-
-import { useSiteConfig } from '../../runtime';
-
-interface CopyrightNoticeProps {
-  title?: string,
-  /**
-   * The URL that the copyright notice should link to when a user clicks on the title.  If not set,
-   * the title will not be a link.
-   */
-  destination?: string,
-}
-
-export default function CopyrightNotice({ title, destination }: CopyrightNoticeProps) {
-  const config = useSiteConfig();
-
-  // Allow overrides via props and fallback to defaults.
-  const finalTitle = title ?? config.siteName;
-
-  return (
-    <div className="text-center x-small">
-      <span>&copy;&nbsp;{new Date().getFullYear()}&nbsp;</span>
-      {destination !== undefined ? (
-        <Hyperlink
-          destination={destination}
-          target="_blank"
-        >
-          {finalTitle}
-        </Hyperlink>
-      ) : (
-        <span>{finalTitle}</span>
-      )}
-      <span>.</span>
-    </div>
-  );
-}

package/shell/footer/Footer.tsx

@@ -1,34 +0,0 @@
-import { Slot } from '../../runtime';
-import CenterLinks from './CenterLinks';
-import LeftLinks from './LeftLinks';
-import LegalNotices from './LegalNotices';
-import PoweredBy from './PoweredBy';
-import RevealLinks from './RevealLinks';
-import RightLinks from './RightLinks';
-
-export default function Footer() {
-  return (
-    <footer className="d-flex flex-column align-items-stretch">
-      <Slot id="org.openedx.frontend.slot.footer.desktopTop.v1" layout={RevealLinks} />
-      <div className="py-3 px-3 d-flex gap-5 justify-content-between align-items-stretch">
-        <div className="flex-basis-0 d-flex align-items-start">
-          <div className="d-flex gap-3 align-items-center">
-            <Slot id="org.openedx.frontend.slot.footer.desktopLeftLinks.v1" layout={LeftLinks} />
-          </div>
-        </div>
-        <div className="flex-grow-1 flex-basis-0 d-flex justify-content-center">
-          <div className="d-flex flex-column justify-content-between gap-5">
-            <Slot id="org.openedx.frontend.slot.footer.desktopCenterLinks.v1" layout={CenterLinks} />
-            <Slot id="org.openedx.frontend.slot.footer.desktopLegalNotices.v1" layout={LegalNotices} />
-          </div>
-        </div>
-        <div className="flex-basis-0 d-flex justify-content-end">
-          <div className="d-flex flex-column justify-content-between">
-            <Slot id="org.openedx.frontend.slot.footer.desktopRightLinks.v1" layout={RightLinks} />
-            <PoweredBy />
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/shell/footer/LabeledLinkColumn.tsx

@@ -1,19 +0,0 @@
-import { useLayoutOptions, useWidgets } from '../../runtime';
-
-export default function LabeledLinkColumn() {
-  const widgets = useWidgets();
-  const options = useLayoutOptions();
-
-  if (widgets.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="d-flex flex-grow-1 flex-column gap-2 small">
-      {typeof options.label === 'string' && (
-        <div className="mb-1 font-weight-bold">{options.label}</div>
-      )}
-      {widgets}
-    </div>
-  );
-}

package/shell/footer/LanguageMenu.tsx

@@ -1,35 +0,0 @@
-import { Dropdown } from '@openedx/paragon';
-import { useContext } from 'react';
-
-import {
-  SiteContext,
-  getLocalizedLanguageName,
-  getSupportedLanguageList
-} from '../../runtime';
-
-import LanguageMenuItem from './LanguageMenuItem';
-
-export default function LanguageMenu() {
-  const { locale } = useContext(SiteContext);
-
-  const languages = getSupportedLanguageList();
-  const currentLanguageName = getLocalizedLanguageName(locale);
-
-  // Hide the menu if there's only one language.
-  if (languages.length === 1) {
-    return null;
-  }
-
-  return (
-    <Dropdown>
-      <Dropdown.Toggle id="language-menu-dropdown-trigger" variant="outline-primary" size="sm">
-        {currentLanguageName}
-      </Dropdown.Toggle>
-      <Dropdown.Menu className="overflow-auto" style={{ maxHeight: '320px' }}>
-        {languages.map((language) => (
-          <LanguageMenuItem key={language.code} language={language} />
-        ))}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-}

package/shell/footer/LanguageMenuItem.tsx

@@ -1,23 +0,0 @@
-import { Dropdown } from '@openedx/paragon';
-import { useCallback } from 'react';
-
-import { updateSiteLanguage } from './data/api';
-
-interface LanguageMenuItemProps {
-  language: {
-    code: string,
-    name: string,
-  },
-}
-
-export default function LanguageMenuItem({ language }: LanguageMenuItemProps) {
-  const handleClick = useCallback(() => {
-    updateSiteLanguage(language.code);
-  }, [language.code]);
-
-  return (
-    <Dropdown.Item key={language.code} onClick={handleClick}>
-      {language.name}
-    </Dropdown.Item>
-  );
-}

package/shell/footer/LeftLinks.tsx

@@ -1,11 +0,0 @@
-import { useWidgets } from '../../runtime';
-
-export default function LeftLinks() {
-  const widgets = useWidgets();
-
-  return (
-    <div className="d-flex flex-column">
-      {widgets}
-    </div>
-  );
-}

package/shell/footer/LegalNotices.tsx

@@ -1,17 +0,0 @@
-import { useIntl } from 'react-intl';
-
-import { useWidgets } from '../../runtime';
-import messages from '../Shell.messages';
-
-export default function LegalNotices() {
-  const intl = useIntl();
-  const widgets = useWidgets();
-
-  return (
-    <div className="d-flex flex-column justify-content-center mb-3">
-      {widgets}
-      {/* This footer trademark notice is a legal requirement and cannot be removed or modified. */}
-      <div className="text-center x-small">{intl.formatMessage(messages.footerTrademarkNotice)}</div>
-    </div>
-  );
-}

package/shell/footer/PoweredBy.tsx

@@ -1,17 +0,0 @@
-import { Hyperlink, Image } from '@openedx/paragon';
-import { useIntl } from 'react-intl';
-
-import messages from '../Shell.messages';
-
-export default function PoweredBy() {
-  const intl = useIntl();
-  return (
-    <Hyperlink destination="https://openedx.org">
-      <Image
-        width="120px"
-        alt={intl.formatMessage(messages.footerPoweredBy)}
-        src="https://logos.openedx.org/open-edx-logo-tag.png"
-      />
-    </Hyperlink>
-  );
-}

package/shell/footer/RevealLinks.tsx

@@ -1,43 +0,0 @@
-import { Button, Collapsible } from '@openedx/paragon';
-import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
-
-import { useLayoutOptions, useWidgets } from '../../runtime';
-import messages from '../Shell.messages';
-
-export default function RevealLinks() {
-  const widgets = useWidgets();
-  const options = useLayoutOptions();
-
-  const label: any = options.label ?? messages['footer.revealLinks.more'];
-
-  if (widgets.length === 0) {
-    return (
-      <div className="border-top" />
-    );
-  }
-
-  return (
-    <Collapsible.Advanced>
-      <div className="d-flex align-items-center">
-        <div className="border-top mr-2 flex-grow-1" />
-        <Collapsible.Trigger>
-          <Button
-            data-testid="helpToggleButton"
-            variant="outline-primary"
-            size="sm"
-          >
-            <span className="pr-1">{label}</span>
-            <Collapsible.Visible whenClosed><ExpandMore /></Collapsible.Visible>
-            <Collapsible.Visible whenOpen><ExpandLess /></Collapsible.Visible>
-          </Button>
-        </Collapsible.Trigger>
-        <div className="border-top ml-2 flex-grow-1" />
-      </div>
-      <Collapsible.Body>
-        <div className="d-flex justify-content-center gap-3 align-items-center my-3">
-          {widgets}
-        </div>
-      </Collapsible.Body>
-    </Collapsible.Advanced>
-  );
-}

package/shell/footer/RightLinks.tsx

@@ -1,11 +0,0 @@
-import { useWidgets } from '../../runtime';
-
-export default function RightLinks() {
-  const widgets = useWidgets();
-
-  return (
-    <div className="d-flex flex-column gap-3 align-items-end flex-grow-1 justify-content-between">
-      {widgets}
-    </div>
-  );
-}

package/shell/footer/app.tsx

@@ -1,73 +0,0 @@
-import { Slot, WidgetOperationTypes } from '../../runtime';
-import { App } from '../../types';
-import Logo from '../Logo';
-import CopyrightNotice from './CopyrightNotice';
-import LabeledLinkColumn from './LabeledLinkColumn';
-import LanguageMenu from './LanguageMenu';
-
-const app: App = {
-  appId: 'org.openedx.frontend.app.footer',
-  slots: [
-    // Center links
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopCenterLink1.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink1.v1" layout={LabeledLinkColumn} />
-      ),
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopCenterLink2.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink2.v1" layout={LabeledLinkColumn} />
-      ),
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopCenterLink3.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink3.v1" layout={LabeledLinkColumn} />
-      ),
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopCenterLinks.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopCenterLink4.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <Slot id="org.openedx.frontend.slot.footer.desktopCenterLink4.v1" layout={LabeledLinkColumn} />
-      ),
-    },
-
-    // Left Links
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopLeftLinks.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopLeftLinksLogo.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <Logo />,
-    },
-
-    // Right Links
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopRightLinks.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopRightLinksLanguageMenu.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: LanguageMenu,
-    },
-
-    // Copyright Notice
-    {
-      slotId: 'org.openedx.frontend.slot.footer.desktopLegalNotices.v1',
-      id: 'org.openedx.frontend.widget.footer.desktopCopyrightNotice.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <CopyrightNotice />
-      ),
-    }
-  ]
-};
-
-export default app;

package/shell/footer/data/api.ts

@@ -1,48 +0,0 @@
-import {
-  getAuthenticatedHttpClient,
-  getAuthenticatedUser,
-  getSiteConfig,
-  updateLocale
-} from '../../../runtime';
-
-export async function updateSiteLanguage(locale: string) {
-  const user = getAuthenticatedUser();
-
-  if (user !== null) {
-    const { username } = getAuthenticatedUser();
-    await patchUserPreferences(username, locale);
-  }
-  await postSetlang(locale);
-
-  updateLocale();
-}
-
-async function patchUserPreferences(username: string, locale: string) {
-  await getAuthenticatedHttpClient().patch(
-    `${getSiteConfig().lmsBaseUrl}/api/user/v1/preferences/${username}`,
-    {
-      'pref-lang': locale
-    },
-    {
-      headers: {
-        'Content-Type': 'application/merge-patch+json'
-      },
-    }
-  );
-}
-
-async function postSetlang(locale: string) {
-  const formData = new FormData();
-  formData.append('language', locale);
-
-  await getAuthenticatedHttpClient().post(
-    `${getSiteConfig().lmsBaseUrl}/i18n/setlang/`,
-    formData,
-    {
-      headers: {
-        Accept: 'application/json',
-        'X-Requested-With': 'XMLHttpRequest',
-      },
-    }
-  );
-}

package/shell/header/AuthenticatedMenu.tsx

@@ -1,32 +0,0 @@
-import { DropdownButton } from '@openedx/paragon';
-import { Person } from '@openedx/paragon/icons';
-
-import {
-  Slot,
-  useAuthenticatedUser
-} from '../../runtime';
-
-interface AuthenticatedMenuProps {
-  className?: string,
-}
-
-export default function AuthenticatedMenu({ className }: AuthenticatedMenuProps) {
-  const authenticatedUser = useAuthenticatedUser();
-
-  // We're using '||' on purpose to detect an empty string, so ignore eslint's warning:
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  const displayUserName = authenticatedUser?.name || authenticatedUser?.username;
-
-  const title = (
-    <div className="d-flex mr-2 align-items-center gap-2">
-      <Person />
-      {displayUserName}
-    </div>
-  );
-
-  return (
-    <DropdownButton size="sm" id="user-nav-dropdown" title={title} variant="outline-primary" className={className}>
-      <Slot id="org.openedx.frontend.slot.header.authenticatedMenu.v1" />
-    </DropdownButton>
-  );
-}

package/shell/header/Header.tsx

@@ -1,17 +0,0 @@
-import { Slot, useIntl } from '../../runtime';
-
-import messages from '../Shell.messages';
-
-export default function Header() {
-  const intl = useIntl();
-
-  return (
-    <header className="border-bottom py-2">
-      <nav className="py-2">
-        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-        <Slot id="org.openedx.frontend.slot.header.desktop.v1" />
-        <Slot id="org.openedx.frontend.slot.header.mobile.v1" />
-      </nav>
-    </header>
-  );
-}

package/shell/header/anonymous-menu/AnonymousMenu.tsx

@@ -1,14 +0,0 @@
-import classNames from 'classnames';
-import { Slot } from '../../../runtime';
-
-interface AnonymousMenuProps {
-  className?: string,
-}
-
-export default function AnonymousMenu({ className }: AnonymousMenuProps) {
-  return (
-    <div className={classNames('d-flex flex-nowrap align-items-center flex-shrink-0 gap-3', className)}>
-      <Slot id="org.openedx.frontend.slot.header.anonymousMenu.v1" />
-    </div>
-  );
-}

package/shell/header/anonymous-menu/LoginButton.tsx

@@ -1,14 +0,0 @@
-import { Button } from '@openedx/paragon';
-import { useSiteConfig, useIntl } from '../../../runtime';
-import messages from '../../Shell.messages';
-
-export default function LoginButton({ ...props }) {
-  const config = useSiteConfig();
-  const intl = useIntl();
-
-  return (
-    <Button size="sm" href={config.loginUrl} {...props}>
-      {intl.formatMessage(messages['header.user.menu.login'])}
-    </Button>
-  );
-}

package/shell/header/anonymous-menu/RegisterButton.tsx

@@ -1,15 +0,0 @@
-import { Button } from '@openedx/paragon';
-
-import { useSiteConfig, useIntl } from '../../../runtime';
-import messages from '../../Shell.messages';
-
-export default function RegisterButton({ ...props }) {
-  const config = useSiteConfig();
-  const intl = useIntl();
-
-  return (
-    <Button size="sm" variant="outline-primary" href={`${config.lmsBaseUrl}/register`} {...props}>
-      {intl.formatMessage(messages['header.user.menu.register'])}
-    </Button>
-  );
-}

package/shell/header/app.tsx

@@ -1,142 +0,0 @@
-import { WidgetOperationTypes } from '../../runtime';
-import { App } from '../../types';
-import Logo from '../Logo';
-import LinkMenuItem from '../menus/LinkMenuItem';
-import ProfileLinkMenuItem from '../menus/ProfileLinkMenuItem';
-import AnonymousMenu from './anonymous-menu/AnonymousMenu';
-import AuthenticatedMenu from './AuthenticatedMenu';
-import DesktopLayout from './desktop/DesktopLayout';
-import PrimaryNavLinks from './desktop/PrimaryNavLinks';
-import SecondaryNavLinks from './desktop/SecondaryNavLinks';
-import MobileLayout from './mobile/MobileLayout';
-import MobileNavLinks from './mobile/MobileNavLinks';
-
-import messages from '../Shell.messages';
-
-const config: App = {
-  appId: 'org.openedx.frontend.app.header',
-  slots: [
-
-    // Layouts
-    {
-      slotId: 'org.openedx.frontend.slot.header.desktop.v1',
-      id: 'org.openedx.frontend.widget.header.desktopLayout.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: DesktopLayout
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.mobile.v1',
-      id: 'org.openedx.frontend.widget.header.mobileLayout.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: MobileLayout
-    },
-
-    // Desktop
-    {
-      slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1',
-      id: 'org.openedx.frontend.widget.header.desktopLogo.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <Logo />,
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.desktopLeft.v1',
-      id: 'org.openedx.frontend.widget.header.desktopPrimaryLinks.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: PrimaryNavLinks
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.desktopRight.v1',
-      id: 'org.openedx.frontend.widget.header.desktopSecondaryLinks.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: SecondaryNavLinks
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.desktopRight.v1',
-      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenu.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <AuthenticatedMenu />,
-      condition: {
-        authenticated: true,
-      }
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
-      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuProfile.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <ProfileLinkMenuItem
-          label={messages['header.user.menu.profile']}
-          role="org.openedx.frontend.role.profile"
-          variant="dropdownItem"
-        />
-      )
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
-      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuAccount.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <LinkMenuItem
-          label={messages['header.user.menu.account']}
-          role="org.openedx.frontend.role.account"
-          variant="dropdownItem"
-        />
-      )
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
-      id: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuLogout.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <LinkMenuItem
-          label={messages['header.user.menu.logout']}
-          role="org.openedx.frontend.role.logout"
-          variant="dropdownItem"
-        />
-      )
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.desktopRight.v1',
-      id: 'org.openedx.frontend.widget.header.desktopAnonymousMenu.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <AnonymousMenu />,
-      condition: {
-        authenticated: false,
-      }
-    },
-
-    // Mobile
-    {
-      slotId: 'org.openedx.frontend.slot.header.mobileCenter.v1',
-      id: 'org.openedx.frontend.widget.header.mobileLogo.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <Logo />,
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.mobileMenu.v1',
-      id: 'org.openedx.frontend.widget.header.mobileMenuLinks.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: MobileNavLinks
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.mobileRight.v1',
-      id: 'org.openedx.frontend.widget.header.mobileAuthenticatedMenu.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <AuthenticatedMenu />,
-      condition: {
-        authenticated: true,
-      }
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.mobileRight.v1',
-      id: 'org.openedx.frontend.widget.header.mobileAnonymousMenu.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: <AnonymousMenu />,
-      condition: {
-        authenticated: false,
-      }
-    },
-  ]
-};
-
-export default config;

package/shell/header/desktop/DesktopLayout.tsx

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import { useMediaQuery } from 'react-responsive';
-import { Slot } from '../../../runtime';
-
-export default function DesktopLayout() {
-  const isMobile = useMediaQuery({ maxWidth: 768 });
-
-  return (
-    <div className={classNames(
-      'align-items-center justify-content-between px-3',
-      isMobile ? 'd-none' : 'd-flex'
-    )}
-    >
-      <div className="d-flex flex-grow-1 align-items-center">
-        <Slot id="org.openedx.frontend.slot.header.desktopLeft.v1" />
-      </div>
-      <div className="d-flex align-items-center">
-        <Slot id="org.openedx.frontend.slot.header.desktopRight.v1" />
-      </div>
-    </div>
-  );
-}

package/shell/header/desktop/PrimaryNavLinks.tsx

@@ -1,10 +0,0 @@
-import { Nav } from '@openedx/paragon';
-import { Slot } from '../../../runtime';
-
-export default function PrimaryNavLinks() {
-  return (
-    <Nav className="flex-nowrap align-items-center">
-      <Slot id="org.openedx.frontend.slot.header.primaryLinks.v1" />
-    </Nav>
-  );
-}