@openedx/frontend-base 1.0.0-alpha.0

package/shell/dev/slotShowcase/WidgetWithOptions.tsx

@@ -0,0 +1,11 @@
+import { useWidgetOptions } from '../../../runtime';
+
+export default function WidgetWithOptions() {
+  const options = useWidgetOptions();
+
+  const title = typeof options.title === 'string' ? options.title : 'Foo';
+
+  return (
+    <div>{title}</div>
+  );
+}

package/shell/dev/slotShowcase/app.tsx

@@ -0,0 +1,373 @@
+import { NavDropdownMenuSlot } from '../..';
+import LinkMenuItem from '../../menus/LinkMenuItem';
+import { LayoutOperationTypes, WidgetOperationTypes, useSlotContext } from '../../../runtime';
+import { App } from '../../../types';
+import HorizontalSlotLayout from './HorizontalSlotLayout';
+import SlotShowcasePage from './SlotShowcasePage';
+import WidgetWithOptions from './WidgetWithOptions';
+
+function Title({ title, op }: { title: string, op?: string }) {
+  return (
+    <span>
+      {title}
+      {op && (
+        <>{' '}(<code>{op}</code>)</>
+      )}
+    </span>
+  );
+}
+
+function Child({ title, op }: { title: string, op?: string }) {
+  return (
+    <div>
+      {title}
+      {op && (
+        <span>{' '}(<code>{op}</code>)</span>
+      )}
+    </div>
+  );
+}
+
+function TakesProps({ aSlotProp }: { aSlotProp: string }) {
+  return (
+    <div>And this is a slot prop that was passed down via props: <code>{aSlotProp}</code></div>
+  );
+}
+
+function TakesPropsViaContext() {
+  const slotContext = useSlotContext();
+  const aSlotProp = typeof slotContext.aSlotProp === 'string' ? slotContext.aSlotProp : 'foo';
+  return (
+    <div>And this is the same prop, but accessed via slot context: <code>{aSlotProp}</code></div>
+  );
+}
+
+const app: App = {
+  appId: 'org.openedx.frontend.app.dev.slotShowcase',
+  routes: [{
+    id: 'org.openedx.frontend.route.dev.slotShowcase',
+    path: '/slots',
+    Component: SlotShowcasePage,
+    handle: {
+      role: 'slotShowcase',
+    }
+  }],
+  slots: [
+    // Simple
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
+      id: 'org.openedx.frontend.widget.slotShowcase.simpleChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
+      id: 'org.openedx.frontend.widget.slotShowcase.simpleChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
+      id: 'org.openedx.frontend.widget.slotShowcase.simpleChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent',
+      id: 'org.openedx.frontend.widget.slotShowcase.simpleChild4',
+      op: WidgetOperationTypes.APPEND,
+      component: TakesProps
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent',
+      id: 'org.openedx.frontend.widget.slotShowcase.simpleChild5',
+      op: WidgetOperationTypes.APPEND,
+      component: TakesPropsViaContext
+    },
+
+    // Custom Layout
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustom',
+      id: 'org.openedx.frontend.widget.slotShowcase.customChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustom',
+      id: 'org.openedx.frontend.widget.slotShowcase.customChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustom',
+      id: 'org.openedx.frontend.widget.slotShowcase.customChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+
+    // Override custom layout
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+      id: 'org.openedx.frontend.widget.slotShowcase.customConfigChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+      id: 'org.openedx.frontend.widget.slotShowcase.customConfigChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+      id: 'org.openedx.frontend.widget.slotShowcase.customConfigChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+      op: LayoutOperationTypes.REPLACE,
+      element: <HorizontalSlotLayout />,
+    },
+
+    // Layout Options
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+      op: LayoutOperationTypes.OPTIONS,
+      options: {
+        title: (<Title title="Bar" op="LayoutOperationTypes.OPTIONS" />),
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+      id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+      id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+      id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault',
+      id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsDefaultChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault',
+      id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsDefaultChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault',
+      id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsDefaultChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+
+    // TODO: Override Layout
+
+    // Prepending
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
+      id: 'org.openedx.frontend.widget.slotShowcase.prependingChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" op="WidgetOperationTypes.APPEND" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
+      id: 'org.openedx.frontend.widget.slotShowcase.prependingChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" op="WidgetOperationTypes.APPEND" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
+      id: 'org.openedx.frontend.widget.slotShowcase.prependingChild3',
+      op: WidgetOperationTypes.PREPEND,
+      element: (<Child title="Child Three" op="WidgetOperationTypes.PREPEND" />)
+    },
+
+    // Inserting
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+      id: 'slot-showcase.inserting.child4',
+      op: WidgetOperationTypes.INSERT_AFTER,
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.insertingChild2',
+      element: (<Child title="Child Four" op="WidgetOperationTypes.INSERT_AFTER" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+      id: 'slot-showcase.inserting.child5',
+      op: WidgetOperationTypes.INSERT_BEFORE,
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.insertingChild2',
+      element: (<Child title="Child Five" op="WidgetOperationTypes.INSERT_BEFORE" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+      id: 'org.openedx.frontend.widget.slotShowcase.insertingChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+      id: 'org.openedx.frontend.widget.slotShowcase.insertingChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+      id: 'org.openedx.frontend.widget.slotShowcase.insertingChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+
+    // Replacing
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+      id: 'org.openedx.frontend.widget.slotShowcase.replacingChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+      id: 'org.openedx.frontend.widget.slotShowcase.replacingChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+      id: 'org.openedx.frontend.widget.slotShowcase.replacingChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+      id: 'org.openedx.frontend.widget.slotShowcase.replacingChild4',
+      op: WidgetOperationTypes.REPLACE,
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.replacingChild2',
+      element: (<Child title="Child Four" op="WidgetOperationTypes.REPLACE" />)
+    },
+
+    // Hiding
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+      id: 'org.openedx.frontend.widget.slotShowcase.removingChild1',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child One" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+      id: 'org.openedx.frontend.widget.slotShowcase.removingChild2',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Two" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+      id: 'org.openedx.frontend.widget.slotShowcase.removingChild3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<Child title="Child Three" />)
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+      op: WidgetOperationTypes.REMOVE,
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.removingChild2',
+    },
+
+    // Widget Options
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions',
+      id: 'org.openedx.frontend.widget.slotShowcase.widgetOptionsChild1',
+      op: WidgetOperationTypes.APPEND,
+      component: WidgetWithOptions,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions',
+      id: 'org.openedx.frontend.widget.slotShowcase.widgetOptionsChild2',
+      op: WidgetOperationTypes.APPEND,
+      component: WidgetWithOptions,
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions',
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.widgetOptionsChild2',
+      op: WidgetOperationTypes.OPTIONS,
+      options: {
+        title: (<Title title="Bar" op="WidgetOperationTypes.OPTIONS" />),
+      }
+    },
+
+    // Header
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.headerLink',
+      op: WidgetOperationTypes.OPTIONS,
+      options: {
+        title: 'Courses (modified)',
+      },
+      condition: {
+        active: ['slotShowcase'],
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerLinkAfter3',
+      op: WidgetOperationTypes.INSERT_AFTER,
+      relatedId: 'org.openedx.frontend.widget.slotShowcase.headerLink3',
+      element: (<LinkMenuItem label="Link After 3" url="#" variant="navLink" />),
+      condition: {
+        active: ['slotShowcase'],
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerPrimaryLinksDropdownPrepend',
+      op: WidgetOperationTypes.PREPEND,
+      element: (
+        <NavDropdownMenuSlot id="org.openedx.frontend.slot.header.primaryLinksDropdown.v1" label="Resources" />
+      ),
+      condition: {
+        active: ['slotShowcase']
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinksDropdown.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerPrimaryLinksDropdownAppend',
+      op: WidgetOperationTypes.APPEND,
+      element: (
+        <LinkMenuItem label="Resource 1" url="#" variant="dropdownItem" />
+      ),
+      condition: {
+        active: ['slotShowcase'],
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerLink3',
+      op: WidgetOperationTypes.APPEND,
+      element: (<LinkMenuItem label="Link 3" url="#" variant="navLink" />),
+      condition: {
+        active: ['slotShowcase'],
+      }
+    },
+    {
+      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+      id: 'org.openedx.frontend.widget.slotShowcase.headerLink4',
+      op: WidgetOperationTypes.APPEND,
+      element: (<LinkMenuItem label="Link 4" url="#" variant="navLink" />),
+      condition: {
+        active: ['slotShowcase'],
+      }
+    },
+  ]
+};
+
+export default app;

package/shell/dev/slotShowcase/index.ts

@@ -0,0 +1 @@
+export { default as slotShowcaseApp } from './app';

package/shell/footer/CenterLinks.tsx

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,11 @@
+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>
+  );
+}