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

package/dist/shell/dev/index.d.ts

@@ -0,0 +1,4 @@
+export { devFooterApp } from './devFooter';
+export { devHeaderApp } from './devHeader';
+export { devHomeApp } from './devHome';
+export { slotShowcaseApp } from './slotShowcase';

package/dist/shell/dev/index.js

@@ -0,0 +1,5 @@
+export { devFooterApp } from './devFooter';
+export { devHeaderApp } from './devHeader';
+export { devHomeApp } from './devHome';
+export { slotShowcaseApp } from './slotShowcase';
+//# sourceMappingURL=index.js.map

package/dist/shell/dev/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../shell/dev/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { devFooterApp } from './devFooter';\nexport { devHeaderApp } from './devHeader';\nexport { devHomeApp } from './devHome';\nexport { slotShowcaseApp } from './slotShowcase';\n"]}

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.d.ts

@@ -0,0 +1 @@
+export default function HorizontalSlotLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@openedx/paragon';
+import { useWidgets } from '../../../runtime';
+export default function HorizontalSlotLayout() {
+    const widgets = useWidgets();
+    return (_jsx(Stack, { direction: "horizontal", gap: 3, children: widgets }));
+}
+//# sourceMappingURL=HorizontalSlotLayout.js.map

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalSlotLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/HorizontalSlotLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,YACjC,OAAO,GACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["import { Stack } from '@openedx/paragon';\nimport { useWidgets } from '../../../runtime';\n\nexport default function HorizontalSlotLayout() {\n  const widgets = useWidgets();\n\n  return (\n    <Stack direction=\"horizontal\" gap={3}>\n      {widgets}\n    </Stack>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/LayoutWithOptions.d.ts

@@ -0,0 +1 @@
+export default function LayoutWithOptions(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/LayoutWithOptions.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutOptions, useWidgets } from '../../../runtime';
+export default function LayoutWithOptions() {
+    const widgets = useWidgets();
+    const options = useLayoutOptions();
+    const title = typeof options.title === 'string' ? options.title : 'Foo';
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "showcase-layout-title", children: ["Layout Title: ", title] }), _jsx("div", { children: widgets })] }));
+}
+//# sourceMappingURL=LayoutWithOptions.js.map

package/dist/shell/dev/slotShowcase/LayoutWithOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/LayoutWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,uBAAuB,+BAAgB,KAAK,IAAO,EAClE,wBACG,OAAO,GACJ,IACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutOptions, useWidgets } from '../../../runtime';\n\nexport default function LayoutWithOptions() {\n  const widgets = useWidgets();\n  const options = useLayoutOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <>\n      <div className=\"showcase-layout-title\">Layout Title: {title}</div>\n      <div>\n        {widgets}\n      </div>\n    </>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/SlotShowcase.scss

@@ -0,0 +1,50 @@
+// Inline code
+.showcase-page code {
+  color: var(--pgn-color-dark-400);
+}
+
+// Page grid
+.showcase-page {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.showcase-full-width {
+  grid-column: 1 / -1;
+}
+
+.showcase-divider {
+  grid-column: 1 / -1;
+  border-bottom: 2px solid var(--pgn-color-primary-500);
+  padding-bottom: 0.25rem;
+}
+
+// Slot container (dashed boundary via Card)
+.showcase-slot {
+  border: 2px dashed var(--pgn-color-primary-300);
+  background-color: var(--pgn-color-primary-100);
+}
+
+// Widget card
+.showcase-widget {
+  background-color: var(--pgn-color-light-300);
+  border-left: 3px solid var(--pgn-color-primary-500);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  margin: 0.5rem;
+}
+
+// Highlighted widget variant
+.showcase-widget-highlighted {
+  background-color: var(--pgn-color-warning-100);
+  border-left: 3px solid var(--pgn-color-warning-300);
+}
+
+// Layout title
+.showcase-layout-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--pgn-color-primary-500);
+  margin-bottom: 0.5rem;
+}

package/dist/shell/dev/slotShowcase/SlotShowcasePage.d.ts

@@ -0,0 +1,2 @@
+import './SlotShowcase.scss';
+export default function SlotShowcasePage(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/SlotShowcasePage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Container } from '@openedx/paragon';
+import { Slot } from '../../../runtime';
+import HorizontalSlotLayout from './HorizontalSlotLayout';
+import LayoutWithOptions from './LayoutWithOptions';
+import ToggleByRoleLayout from './ToggleByRoleLayout';
+import './SlotShowcase.scss';
+function SlotContainer({ children }) {
+    return (_jsx(Card, { className: "showcase-slot", children: _jsx(Card.Body, { children: children }) }));
+}
+function Section({ title, children }) {
+    return (_jsxs("div", { children: [_jsx("h3", { className: "text-primary-500", children: title }), children] }));
+}
+export default function SlotShowcasePage() {
+    return (_jsxs(Container, { fluid: true, size: "xl", className: "showcase-page py-4", children: [_jsxs("div", { className: "showcase-full-width", children: [_jsx("h1", { children: "Slot Showcase" }), _jsxs("p", { children: ["As a best practice, widgets should pass additional props (", _jsx("code", { children: "...props" }), ") to their rendered HTMLElement.  This allows custom layouts to add ", _jsx("code", { children: "className" }), " and ", _jsx("code", { children: "style" }), " props as necessary for the layout."] })] }), _jsxs(Section, { title: "Simple slot with default layout", children: [_jsx("p", { children: "This slot has no opinionated layout, it just renders its children." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimple" }) })] }), _jsxs(Section, { title: "Simple slot with default content and props", children: [_jsx("p", { children: "This slot has default content, and it exposes a slot prop to widgets." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent", aSlotProp: "hello!", children: _jsx("div", { className: "showcase-widget", children: "Look, I'm default content!" }) }) })] }), _jsx("h2", { className: "showcase-divider", children: "UI Layout Operations" }), _jsxs(Section, { title: "Slot with custom layout (component)", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout from a component." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: HorizontalSlotLayout }) })] }), _jsxs(Section, { title: "Slot with custom layout (element)", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout from a JSX element." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: _jsx(HorizontalSlotLayout, {}) }) })] }), _jsxs(Section, { title: "Slot with override custom layout", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout, but it was added by a layout replace operation." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" }) })] }), _jsxs(Section, { title: "Slot with layout options (default)", children: [_jsx("p", { children: "This slot uses a custom layout that takes options.  It shows the default title." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault", layout: LayoutWithOptions }) })] }), _jsxs(Section, { title: "Slot with layout options (configured)", children: [_jsx("p", { children: "Same layout, but the title option is set to \"Bar\"." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions", layout: LayoutWithOptions }) })] }), _jsxs(Section, { title: "Slot with widget filtering by role", children: [_jsxs("p", { children: ["This slot has four widgets, two with a \"highlighted\" role.  The layout uses ", _jsx("code", { children: "widgets.byRole()" }), " to toggle between all and highlighted."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseFilterByRole", layout: ToggleByRoleLayout }) })] }), _jsx("h2", { className: "showcase-divider", children: "UI Widget Operations" }), _jsxs(Section, { title: "Slot with prepended element", children: [_jsx("p", { children: "This slot has a prepended element (and two appended elements)." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcasePrepending" }) })] }), _jsxs(Section, { title: "Slot with inserted elements", children: [_jsxs("p", { children: ["This slot has elements inserted before and after the second element. The insert operations are declared ", _jsx("em", { children: "before" }), " the related element, but can still insert themselves relative to it."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseInserting" }) })] }), _jsxs(Section, { title: "Slot with replaced element", children: [_jsx("p", { children: "This slot has an element replacing element two." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseReplacing" }) })] }), _jsxs(Section, { title: "Slot with removed element", children: [_jsxs("p", { children: ["This slot has removed element two (", _jsx("code", { children: "WidgetOperationTypes.REMOVE" }), ")."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseRemoving" }) })] }), _jsxs(Section, { title: "Slot with widget options (default)", children: [_jsx("p", { children: "This widget accepts options.  It shows the default title." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" }) })] })] }));
+}
+//# sourceMappingURL=SlotShowcasePage.js.map

package/dist/shell/dev/slotShowcase/SlotShowcasePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlotShowcasePage.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/SlotShowcasePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react';\nimport { Card, Container } from '@openedx/paragon';\nimport { Slot } from '../../../runtime';\nimport HorizontalSlotLayout from './HorizontalSlotLayout';\nimport LayoutWithOptions from './LayoutWithOptions';\nimport ToggleByRoleLayout from './ToggleByRoleLayout';\nimport './SlotShowcase.scss';\n\nfunction SlotContainer({ children }: { children: ReactNode }) {\n  return (\n    <Card className=\"showcase-slot\">\n      <Card.Body>\n        {children}\n      </Card.Body>\n    </Card>\n  );\n}\n\nfunction Section({ title, children }: { title: string, children: ReactNode }) {\n  return (\n    <div>\n      <h3 className=\"text-primary-500\">{title}</h3>\n      {children}\n    </div>\n  );\n}\n\nexport default function SlotShowcasePage() {\n  return (\n    <Container fluid size=\"xl\" className=\"showcase-page py-4\">\n      <div className=\"showcase-full-width\">\n        <h1>Slot Showcase</h1>\n        <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement.  This allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</p>\n      </div>\n\n      <Section title=\"Simple slot with default layout\">\n        <p>This slot has no opinionated layout, it just renders its children.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimple\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Simple slot with default content and props\">\n        <p>This slot has default content, and it exposes a slot prop to widgets.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent\" aSlotProp=\"hello!\">\n            <div className=\"showcase-widget\">Look, I&apos;m default content!</div>\n          </Slot>\n        </SlotContainer>\n      </Section>\n\n      <h2 className=\"showcase-divider\">UI Layout Operations</h2>\n\n      <Section title=\"Slot with custom layout (component)\">\n        <p>This slot uses a horizontal flexbox layout from a component.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={HorizontalSlotLayout} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with custom layout (element)\">\n        <p>This slot uses a horizontal flexbox layout from a JSX element.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={<HorizontalSlotLayout />} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with override custom layout\">\n        <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustomConfig\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with layout options (default)\">\n        <p>This slot uses a custom layout that takes options.  It shows the default title.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault\" layout={LayoutWithOptions} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with layout options (configured)\">\n        <p>Same layout, but the title option is set to &quot;Bar&quot;.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions\" layout={LayoutWithOptions} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with widget filtering by role\">\n        <p>This slot has four widgets, two with a &quot;highlighted&quot; role.  The layout uses <code>widgets.byRole()</code> to toggle between all and highlighted.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseFilterByRole\" layout={ToggleByRoleLayout} />\n        </SlotContainer>\n      </Section>\n\n      <h2 className=\"showcase-divider\">UI Widget Operations</h2>\n\n      <Section title=\"Slot with prepended element\">\n        <p>This slot has a prepended element (and two appended elements).</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcasePrepending\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with inserted elements\">\n        <p>This slot has elements inserted before and after the second element. The insert operations are declared <em>before</em> the related element, but can still insert themselves relative to it.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseInserting\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with replaced element\">\n        <p>This slot has an element replacing element two.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseReplacing\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with removed element\">\n        <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseRemoving\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with widget options (default)\">\n        <p>This widget accepts options.  It shows the default title.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions\" />\n        </SlotContainer>\n      </Section>\n\n    </Container>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.d.ts

@@ -0,0 +1 @@
+export default function ToggleByRoleLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@openedx/paragon';
+import { useWidgets } from '../../../runtime';
+const highlitedRole = 'org.openedx.frontend.role.slotShowcase.highlighted';
+export default function ToggleByRoleLayout() {
+    const widgets = useWidgets();
+    const [showHighlighted, setShowHighlighted] = useState(false);
+    return (_jsxs("div", { children: [_jsx(Button, { size: "sm", variant: "outline-primary", className: "mb-2", onClick: () => setShowHighlighted(!showHighlighted), children: showHighlighted ? 'Show all widgets' : 'Show only highlighted widgets' }), _jsx("div", { children: showHighlighted ? widgets.byRole(highlitedRole) : widgets })] }));
+}
+//# sourceMappingURL=ToggleByRoleLayout.js.map

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleByRoleLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/ToggleByRoleLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,aAAa,GAAG,oDAAoD,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,YAC7G,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,+BAA+B,GAChE,EACT,wBACG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,GACtD,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useWidgets } from '../../../runtime';\n\nconst highlitedRole = 'org.openedx.frontend.role.slotShowcase.highlighted';\n\nexport default function ToggleByRoleLayout() {\n  const widgets = useWidgets();\n  const [showHighlighted, setShowHighlighted] = useState(false);\n\n  return (\n    <div>\n      <Button size=\"sm\" variant=\"outline-primary\" className=\"mb-2\" onClick={() => setShowHighlighted(!showHighlighted)}>\n        {showHighlighted ? 'Show all widgets' : 'Show only highlighted widgets'}\n      </Button>\n      <div>\n        {showHighlighted ? widgets.byRole(highlitedRole) : widgets}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/WidgetWithOptions.d.ts

@@ -0,0 +1 @@
+export default function WidgetWithOptions(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/WidgetWithOptions.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetOptions } from '../../../runtime';
+export default function WidgetWithOptions() {
+    const options = useWidgetOptions();
+    const title = typeof options.title === 'string' ? options.title : 'Foo';
+    return (_jsx("div", { className: "showcase-widget", children: title }));
+}
+//# sourceMappingURL=WidgetWithOptions.js.map

package/dist/shell/dev/slotShowcase/WidgetWithOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/WidgetWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAO,CAC/C,CAAC;AACJ,CAAC","sourcesContent":["import { useWidgetOptions } from '../../../runtime';\n\nexport default function WidgetWithOptions() {\n  const options = useWidgetOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <div className=\"showcase-widget\">{title}</div>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '../../../types';
+declare const app: App;
+export default app;

package/dist/shell/dev/slotShowcase/app.js

@@ -0,0 +1,372 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavDropdownMenuSlot } from '../..';
+import LinkMenuItem from '../../menus/LinkMenuItem';
+import { LayoutOperationTypes, WidgetOperationTypes, useSlotContext } from '../../../runtime';
+import HorizontalSlotLayout from './HorizontalSlotLayout';
+import SlotShowcasePage from './SlotShowcasePage';
+import WidgetWithOptions from './WidgetWithOptions';
+function Widget(_a) {
+    var { title, op, className } = _a, props = __rest(_a, ["title", "op", "className"]);
+    return (_jsxs("div", Object.assign({ className: `showcase-widget ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [title, op && (_jsxs("span", { children: [' ', "(", _jsx("code", { children: op }), ")"] }))] })));
+}
+function TakesProps({ aSlotProp }) {
+    return (_jsxs("div", { className: "showcase-widget", children: ["And this is a slot prop that was passed down via props: ", _jsx("code", { children: aSlotProp })] }));
+}
+function TakesPropsViaContext() {
+    const slotContext = useSlotContext();
+    const aSlotProp = typeof slotContext.aSlotProp === 'string' ? slotContext.aSlotProp : 'foo';
+    return (_jsxs("div", { className: "showcase-widget", children: ["And this is the same prop, but accessed via slot context: ", _jsx("code", { children: aSlotProp })] }));
+}
+const app = {
+    appId: 'org.openedx.frontend.app.slotShowcase',
+    routes: [{
+            id: 'org.openedx.frontend.route.slotShowcase',
+            path: '/slots',
+            Component: SlotShowcasePage,
+            handle: {
+                roles: ['org.openedx.frontend.role.slotShowcase'],
+            }
+        }],
+    slots: [
+        // Simple
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
+            id: 'org.openedx.frontend.widget.slotShowcase.simpleChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
+            id: 'org.openedx.frontend.widget.slotShowcase.simpleChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
+            id: 'org.openedx.frontend.widget.slotShowcase.simpleChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget 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: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustom',
+            id: 'org.openedx.frontend.widget.slotShowcase.customChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustom',
+            id: 'org.openedx.frontend.widget.slotShowcase.customChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Three" }))
+        },
+        // Override custom layout
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+            id: 'org.openedx.frontend.widget.slotShowcase.customConfigChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+            id: 'org.openedx.frontend.widget.slotShowcase.customConfigChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+            id: 'org.openedx.frontend.widget.slotShowcase.customConfigChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Three" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
+            op: LayoutOperationTypes.REPLACE,
+            element: _jsx(HorizontalSlotLayout, {}),
+        },
+        // Layout Options
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+            op: LayoutOperationTypes.OPTIONS,
+            options: {
+                title: 'Bar',
+            }
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+            id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+            id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
+            id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Three" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault',
+            id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsDefaultChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault',
+            id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsDefaultChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault',
+            id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsDefaultChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Three" }))
+        },
+        // TODO: Override Layout
+        // Prepending
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
+            id: 'org.openedx.frontend.widget.slotShowcase.prependingChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One", op: "WidgetOperationTypes.APPEND" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
+            id: 'org.openedx.frontend.widget.slotShowcase.prependingChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two", op: "WidgetOperationTypes.APPEND" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
+            id: 'org.openedx.frontend.widget.slotShowcase.prependingChild3',
+            op: WidgetOperationTypes.PREPEND,
+            element: (_jsx(Widget, { title: "Widget 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: (_jsx(Widget, { title: "Widget 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: (_jsx(Widget, { title: "Widget Five", op: "WidgetOperationTypes.INSERT_BEFORE" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+            id: 'org.openedx.frontend.widget.slotShowcase.insertingChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+            id: 'org.openedx.frontend.widget.slotShowcase.insertingChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseInserting',
+            id: 'org.openedx.frontend.widget.slotShowcase.insertingChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Three" }))
+        },
+        // Replacing
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+            id: 'org.openedx.frontend.widget.slotShowcase.replacingChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+            id: 'org.openedx.frontend.widget.slotShowcase.replacingChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseReplacing',
+            id: 'org.openedx.frontend.widget.slotShowcase.replacingChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget 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: (_jsx(Widget, { title: "Widget Four", op: "WidgetOperationTypes.REPLACE" }))
+        },
+        // Hiding
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+            id: 'org.openedx.frontend.widget.slotShowcase.removingChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+            id: 'org.openedx.frontend.widget.slotShowcase.removingChild2',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
+            id: 'org.openedx.frontend.widget.slotShowcase.removingChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget 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: 'Bar',
+            }
+        },
+        // Widget filtering by role
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseFilterByRole',
+            id: 'org.openedx.frontend.widget.slotShowcase.filterChild1',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget One" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseFilterByRole',
+            id: 'org.openedx.frontend.widget.slotShowcase.filterChild2',
+            role: 'org.openedx.frontend.role.slotShowcase.highlighted',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Two (highlighted)", className: "showcase-widget-highlighted" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseFilterByRole',
+            id: 'org.openedx.frontend.widget.slotShowcase.filterChild3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Three" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.dev.slotShowcaseFilterByRole',
+            id: 'org.openedx.frontend.widget.slotShowcase.filterChild4',
+            role: 'org.openedx.frontend.role.slotShowcase.highlighted',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(Widget, { title: "Widget Four (highlighted)", className: "showcase-widget-highlighted" }))
+        },
+        // 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: ['org.openedx.frontend.role.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: (_jsx(LinkMenuItem, { label: "Link After 3", url: "#", variant: "navLink" })),
+            condition: {
+                active: ['org.openedx.frontend.role.slotShowcase'],
+            }
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerPrimaryLinksDropdownPrepend',
+            op: WidgetOperationTypes.PREPEND,
+            element: (_jsx(NavDropdownMenuSlot, { id: "org.openedx.frontend.slot.header.primaryLinksDropdown.v1", label: "Resources" })),
+            condition: {
+                active: ['org.openedx.frontend.role.slotShowcase']
+            }
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinksDropdown.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerPrimaryLinksDropdownAppend',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(LinkMenuItem, { label: "Resource 1", url: "#", variant: "dropdownItem" })),
+            condition: {
+                active: ['org.openedx.frontend.role.slotShowcase'],
+            }
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerLink3',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(LinkMenuItem, { label: "Link 3", url: "#", variant: "navLink" })),
+            condition: {
+                active: ['org.openedx.frontend.role.slotShowcase'],
+            }
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerLink4',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(LinkMenuItem, { label: "Link 4", url: "#", variant: "navLink" })),
+            condition: {
+                active: ['org.openedx.frontend.role.slotShowcase'],
+            }
+        },
+    ]
+};
+export default app;
+//# sourceMappingURL=app.js.map