@openedx/frontend-base 1.0.0-alpha.12 → 1.0.0-alpha.13

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>
-  );
-}

package/shell/header/desktop/SecondaryNavLinks.tsx

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

package/shell/header/mobile/MobileLayout.tsx

@@ -1,47 +0,0 @@
-import { Button, Nav } from '@openedx/paragon';
-import { MenuIcon } from '@openedx/paragon/icons';
-import classNames from 'classnames';
-import { useCallback, useState } from 'react';
-import { FocusOn } from 'react-focus-on';
-import { useMediaQuery } from 'react-responsive';
-import { Slot } from '../../../runtime';
-
-export default function MobileLayout() {
-  const isMobile = useMediaQuery({ maxWidth: 768 });
-  const [mobileOpen, setMobileOpen] = useState<boolean>(false);
-
-  const handleMobileButtonClick = useCallback(() => {
-    setMobileOpen((value) => !value);
-  }, []);
-
-  return (
-    <>
-      <div
-        className={classNames(
-          'align-items-center justify-content-between pr-3 booyah',
-          isMobile ? 'd-flex' : 'd-none',
-        )}
-      >
-        <div className="d-flex flex-grow-1 flex-basis-0 justify-content-start align-items-center">
-          <Button onClick={handleMobileButtonClick} variant="outline">
-            <MenuIcon />
-          </Button>
-          <Slot id="org.openedx.frontend.slot.header.mobileLeft.v1" />
-        </div>
-        <div className="d-flex flex-grow-1 flex-basis-0 justify-content-center align-items-center">
-          <Slot id="org.openedx.frontend.slot.header.mobileCenter.v1" />
-        </div>
-        <div className="d-flex flex-grow-1 flex-basis-0 justify-content-end align-items-center">
-          <Slot id="org.openedx.frontend.slot.header.mobileRight.v1" />
-        </div>
-      </div>
-      {mobileOpen && (
-        <FocusOn onClickOutside={() => setMobileOpen(false)} onEscapeKey={() => setMobileOpen(false)}>
-          <Nav className="flex-column">
-            <Slot id="org.openedx.frontend.slot.header.mobileMenuLinks.v1" />
-          </Nav>
-        </FocusOn>
-      )}
-    </>
-  );
-}

package/shell/header/mobile/MobileNavLinks.tsx

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

package/shell/i18n/index.ts

@@ -1,25 +0,0 @@
-// Placeholder be overridden by `make pull_translations`
-export default {
-  ar: {},
-  'zh-hk': {},
-  'zh-cn': {},
-  uk: {},
-  'tr-tr': {},
-  th: {},
-  te: {},
-  ru: {},
-  'pt-pt': {},
-  'pt-br': {},
-  'it-it': {},
-  id: {},
-  hi: {},
-  he: {},
-  'fr-ca': {},
-  fa: {},
-  'es-es': {},
-  'es-419': {},
-  el: {},
-  'de-de': {},
-  da: {},
-  bo: {},
-};

package/shell/jest.config.js

@@ -1,31 +0,0 @@
-module.exports = {
-  setupFilesAfterEnv: [
-    './setupTest.js',
-  ],
-  moduleNameMapper: {
-    '\\.svg$': '<rootDir>/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/file.js',
-    '\\.(css|scss)$': require.resolve('identity-obj-proxy'),
-    'site.config': '<rootDir>/site.config.test.tsx',
-    '^@src/(.*)$': '<rootDir>/src/$1',
-  },
-  testEnvironment: 'jsdom',
-  testEnvironmentOptions: {
-    url: 'http://localhost/',
-  },
-  collectCoverageFrom: [
-    '<rootDir>/**/*.{js,jsx,ts,tsx}',
-  ],
-  coveragePathIgnorePatterns: [
-    '/node_modules/',
-    'setupTest.js',
-  ],
-  transformIgnorePatterns: [
-    '/node_modules/(?!(@openedx|@edx)/)',
-  ],
-  testPathIgnorePatterns: [
-    '/site.config.test.tsx',
-    '/node_modules/',
-    '/dist/',
-  ],
-};