@openedx/frontend-base 1.0.0-alpha.14 → 1.0.0-alpha.15

package/dist/shell/dev/devHome/HomePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/HomePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,MAAM,aAAa,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC1D,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,sBAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,EACjD,yBACG,aAAa,KAAK,IAAI,IAAI,CACzB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,sCAA8B,GAAK,CAC/D,EACA,YAAY,KAAK,IAAI,IAAI,CACxB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,qCAA6B,GAAK,CAC7D,EACA,eAAe,KAAK,IAAI,IAAI,CAC3B,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,yCAAiC,GAAK,CACpE,IACE,IACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Link } from 'react-router-dom';\nimport { useIntl } from '../../../runtime';\nimport { getUrlByRouteRole } from '../../../runtime/routing';\nimport messages from './messages';\n\nexport default function HomePage() {\n  const coursewareUrl = getUrlByRouteRole('courseware');\n  const dashboardUrl = getUrlByRouteRole('learnerDashboard');\n  const slotShowcaseUrl = getUrlByRouteRole('slotShowcase');\n  const intl = useIntl();\n\n  return (\n    <div className=\"p-3\">\n      <p>{intl.formatMessage(messages.homeContent)}</p>\n      <ul>\n        {coursewareUrl !== null && (\n          <li><Link to={coursewareUrl}>Go to courseware page</Link></li>\n        )}\n        {dashboardUrl !== null && (\n          <li><Link to={dashboardUrl}>Go to dashboard page</Link></li>\n        )}\n        {slotShowcaseUrl !== null && (\n          <li><Link to={slotShowcaseUrl}>Go to slot showcase page</Link></li>\n        )}\n      </ul>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HomePage.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/HomePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,MAAM,aAAa,GAAG,iBAAiB,CAAC,sCAAsC,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,iBAAiB,CAAC,wCAAwC,CAAC,CAAC;IACpF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,sBAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,EACjD,yBACG,aAAa,KAAK,IAAI,IAAI,CACzB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,sCAA8B,GAAK,CAC/D,EACA,YAAY,KAAK,IAAI,IAAI,CACxB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,qCAA6B,GAAK,CAC7D,EACA,eAAe,KAAK,IAAI,IAAI,CAC3B,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,yCAAiC,GAAK,CACpE,IACE,IACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Link } from 'react-router-dom';\nimport { useIntl } from '../../../runtime';\nimport { getUrlByRouteRole } from '../../../runtime/routing';\nimport messages from './messages';\n\nexport default function HomePage() {\n  const coursewareUrl = getUrlByRouteRole('org.openedx.frontend.role.courseware');\n  const dashboardUrl = getUrlByRouteRole('org.openedx.frontend.role.dashboard');\n  const slotShowcaseUrl = getUrlByRouteRole('org.openedx.frontend.role.slotShowcase');\n  const intl = useIntl();\n\n  return (\n    <div className=\"p-3\">\n      <p>{intl.formatMessage(messages.homeContent)}</p>\n      <ul>\n        {coursewareUrl !== null && (\n          <li><Link to={coursewareUrl}>Go to courseware page</Link></li>\n        )}\n        {dashboardUrl !== null && (\n          <li><Link to={dashboardUrl}>Go to dashboard page</Link></li>\n        )}\n        {slotShowcaseUrl !== null && (\n          <li><Link to={slotShowcaseUrl}>Go to slot showcase page</Link></li>\n        )}\n      </ul>\n    </div>\n  );\n}\n"]}

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

@@ -1,7 +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("div", { className: "d-flex gap-3", children: widgets }));
+    return (_jsx(Stack, { direction: "horizontal", gap: 3, children: widgets }));
 }
 //# sourceMappingURL=HorizontalSlotLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalSlotLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/HorizontalSlotLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACL,cAAK,SAAS,EAAC,cAAc,YAC1B,OAAO,GACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useWidgets } from '../../../runtime';\n\nexport default function HorizontalSlotLayout() {\n  const widgets = useWidgets();\n\n  return (\n    <div className=\"d-flex gap-3\">\n      {widgets}\n    </div>\n  );\n}\n"]}
+{"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.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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", { children: ["Layout Title: ", _jsx("strong", { children: title })] }), _jsx("div", { children: widgets })] }));
+    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

@@ -1 +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,4CAAmB,2BAAS,KAAK,GAAU,IAAM,EACjD,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>Layout Title: <strong>{title}</strong></div>\n      <div>\n        {widgets}\n      </div>\n    </>\n  );\n}\n"]}
+{"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/SlotShowcasePage.d.ts

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

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

@@ -1,8 +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("div", { className: "p-3", 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 accomplishes two things:"] }), _jsxs("ul", { children: [_jsxs("li", { children: ["It allows custom layouts to add ", _jsx("code", { children: "className" }), " and ", _jsx("code", { children: "style" }), " props as necessary for the layout."] }), _jsx("li", { children: "It allows widgets to be effectively \"wrapped\" by a parent component to alter their behavior." })] }), _jsx("h3", { children: "Simple slot with default layout" }), _jsx("p", { children: "This slot has no opinionated layout, it just renders its children." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimple" }), _jsx("h3", { children: "Simple slot with default content and props" }), _jsx("p", { children: "This slot has default content, and it exposes a slot prop to widgets." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent", aSlotProp: "hello!", children: _jsx("div", { children: "Look, I'm default content!" }) }), _jsx("h2", { children: "UI Layout Operations" }), _jsx("h3", { children: "Slot with custom layout" }), _jsx("p", { children: "This slot uses a horizontal flexbox layout from a component." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: HorizontalSlotLayout }), _jsx("p", { children: "This slot uses a horizontal flexbox layout from a JSX element." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: _jsx(HorizontalSlotLayout, {}) }), _jsx("h3", { children: "Slot with override custom layout" }), _jsx("p", { children: "This slot uses a horizontal flexbox layout, but it was added by a layout replace operation." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" }), _jsx("h3", { children: "Slot with layout options" }), _jsx("p", { children: "These slots use a custom layout that takes options.  The first shows the default title, the second shows it set to \"Bar\"" }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault", layout: LayoutWithOptions }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions", layout: LayoutWithOptions }), _jsx("h2", { children: "UI Widget Operations" }), _jsx("h3", { children: "Slot with prepended element" }), _jsx("p", { children: "This slot has a prepended element (and two appended elements)." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcasePrepending" }), _jsx("h3", { children: "Slot with inserted elements" }), _jsxs("p", { children: ["This slot has elements inserted before and after the second element. Also note that the insert operations are declared ", _jsx("em", { children: "before" }), " the related element is declared, but can still insert themselves relative to it."] }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseInserting" }), _jsx("h3", { children: "Slot with replaced element" }), _jsx("p", { children: "This slot has an element replacing element two." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseReplacing" }), _jsx("h3", { children: "Slot with removed element" }), _jsxs("p", { children: ["This slot has removed element two (", _jsx("code", { children: "WidgetOperationTypes.REMOVE" }), ")."] }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseRemoving" }), _jsx("h3", { children: "Slot with widget with options." }), _jsx("p", { children: "Both widgets accept options.  The first shows the default title, the second shows it set to \"Bar\"" }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" })] }));
+    return (_jsxs(Container, { 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

@@ -1 +1 @@
-{"version":3,"file":"SlotShowcasePage.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/SlotShowcasePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,yCAAsB,EAEtB,sFAA6D,sCAAqB,sEAAkE,EACpJ,yBACE,6DAAoC,uCAAsB,WAAK,mCAAkB,2CAAwC,EACzH,0HAA+G,IAC5G,EAEL,2DAAwC,EACxC,6FAAyE,EACzE,KAAC,IAAI,IAAC,EAAE,EAAC,kDAAkD,GAAG,EAE9D,sEAAmD,EACnD,gGAA4E,EAC5E,KAAC,IAAI,IAAC,EAAE,EAAC,oEAAoE,EAAC,SAAS,EAAC,QAAQ,YAC9F,uDAA0C,GACrC,EAEP,gDAA6B,EAE7B,mDAAgC,EAChC,uFAAmE,EACnE,KAAC,IAAI,IAAC,EAAE,EAAC,kDAAkD,EAAC,MAAM,EAAE,oBAAoB,GAAI,EAC5F,yFAAqE,EACrE,KAAC,IAAI,IAAC,EAAE,EAAC,kDAAkD,EAAC,MAAM,EAAE,KAAC,oBAAoB,KAAG,GAAI,EAEhG,4DAAyC,EACzC,sHAAkG,EAClG,KAAC,IAAI,IAAC,EAAE,EAAC,wDAAwD,GAAG,EAEpE,oDAAiC,EACjC,qJAAyI,EACzI,KAAC,IAAI,IAAC,EAAE,EAAC,oEAAoE,EAAC,MAAM,EAAE,iBAAiB,GAAI,EAC3G,KAAC,IAAI,IAAC,EAAE,EAAC,6DAA6D,EAAC,MAAM,EAAE,iBAAiB,GAAI,EAEpG,gDAA6B,EAE7B,uDAAoC,EACpC,yFAAqE,EACrE,KAAC,IAAI,IAAC,EAAE,EAAC,sDAAsD,GAAG,EAElE,uDAAoC,EACpC,mJAA0H,kCAAe,yFAAqF,EAC9N,KAAC,IAAI,IAAC,EAAE,EAAC,qDAAqD,GAAG,EAEjE,sDAAmC,EACnC,0EAAsD,EACtD,KAAC,IAAI,IAAC,EAAE,EAAC,qDAAqD,GAAG,EAEjE,qDAAkC,EAClC,+DAAsC,yDAAwC,UAAM,EACpF,KAAC,IAAI,IAAC,EAAE,EAAC,oDAAoD,GAAG,EAEhE,0DAAuC,EACvC,8HAAkH,EAClH,KAAC,IAAI,IAAC,EAAE,EAAC,yDAAyD,GAAG,IACjE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Slot } from '../../../runtime';\nimport HorizontalSlotLayout from './HorizontalSlotLayout';\nimport LayoutWithOptions from './LayoutWithOptions';\n\nexport default function SlotShowcasePage() {\n  return (\n    <div className=\"p-3\">\n      <h1>Slot Showcase</h1>\n\n      <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement. This accomplishes two things:</p>\n      <ul>\n        <li>It allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</li>\n        <li>It allows widgets to be effectively &quot;wrapped&quot; by a parent component to alter their behavior.</li>\n      </ul>\n\n      <h3>Simple slot with default layout</h3>\n      <p>This slot has no opinionated layout, it just renders its children.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimple\" />\n\n      <h3>Simple slot with default content and props</h3>\n      <p>This slot has default content, and it exposes a slot prop to widgets.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent\" aSlotProp=\"hello!\">\n        <div>Look, I&apos;m default content!</div>\n      </Slot>\n\n      <h2>UI Layout Operations</h2>\n\n      <h3>Slot with custom layout</h3>\n      <p>This slot uses a horizontal flexbox layout from a component.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={HorizontalSlotLayout} />\n      <p>This slot uses a horizontal flexbox layout from a JSX element.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={<HorizontalSlotLayout />} />\n\n      <h3>Slot with override custom layout</h3>\n      <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustomConfig\" />\n\n      <h3>Slot with layout options</h3>\n      <p>These slots use a custom layout that takes options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault\" layout={LayoutWithOptions} />\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions\" layout={LayoutWithOptions} />\n\n      <h2>UI Widget Operations</h2>\n\n      <h3>Slot with prepended element</h3>\n      <p>This slot has a prepended element (and two appended elements).</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcasePrepending\" />\n\n      <h3>Slot with inserted elements</h3>\n      <p>This slot has elements inserted before and after the second element. Also note that the insert operations are declared <em>before</em> the related element is declared, but can still insert themselves relative to it.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseInserting\" />\n\n      <h3>Slot with replaced element</h3>\n      <p>This slot has an element replacing element two.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseReplacing\" />\n\n      <h3>Slot with removed element</h3>\n      <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseRemoving\" />\n\n      <h3>Slot with widget with options.</h3>\n      <p>Both widgets accept options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions\" />\n    </div>\n  );\n}\n"]}
+{"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 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.js

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

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

@@ -1 +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,wBAAM,KAAK,GAAO,CACnB,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>{title}</div>\n  );\n}\n"]}
+{"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.js

@@ -1,23 +1,32 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 Title({ title, op }) {
-    return (_jsxs("span", { children: [title, op && (_jsxs(_Fragment, { children: [' ', "(", _jsx("code", { children: op }), ")"] }))] }));
-}
-function Child({ title, op }) {
-    return (_jsxs("div", { children: [title, op && (_jsxs("span", { children: [' ', "(", _jsx("code", { children: op }), ")"] }))] }));
+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", { children: ["And this is a slot prop that was passed down via props: ", _jsx("code", { children: 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", { children: ["And this is the same prop, but accessed via slot context: ", _jsx("code", { children: aSlotProp })] }));
+    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',
@@ -35,19 +44,19 @@ const app = {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimple',
             id: 'org.openedx.frontend.widget.slotShowcase.simpleChild1',
             op: WidgetOperationTypes.APPEND,
-            element: (_jsx(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            element: (_jsx(Widget, { title: "Widget Three" }))
         },
         {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent',
@@ -66,38 +75,38 @@ const app = {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustom',
             id: 'org.openedx.frontend.widget.slotShowcase.customChild1',
             op: WidgetOperationTypes.APPEND,
-            element: (_jsx(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            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(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            element: (_jsx(Widget, { title: "Widget Three" }))
         },
         {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseCustomConfig',
@@ -109,44 +118,44 @@ const app = {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
             op: LayoutOperationTypes.OPTIONS,
             options: {
-                title: (_jsx(Title, { title: "Bar", op: "LayoutOperationTypes.OPTIONS" })),
+                title: 'Bar',
             }
         },
         {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions',
             id: 'org.openedx.frontend.widget.slotShowcase.layoutWithOptionsChild1',
             op: WidgetOperationTypes.APPEND,
-            element: (_jsx(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            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(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            element: (_jsx(Widget, { title: "Widget Three" }))
         },
         // TODO: Override Layout
         // Prepending
@@ -154,19 +163,19 @@ const app = {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcasePrepending',
             id: 'org.openedx.frontend.widget.slotShowcase.prependingChild1',
             op: WidgetOperationTypes.APPEND,
-            element: (_jsx(Child, { title: "Child One", 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(Child, { title: "Child Two", 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(Child, { title: "Child Three", op: "WidgetOperationTypes.PREPEND" }))
+            element: (_jsx(Widget, { title: "Widget Three", op: "WidgetOperationTypes.PREPEND" }))
         },
         // Inserting
         {
@@ -174,77 +183,77 @@ const app = {
             id: 'slot-showcase.inserting.child4',
             op: WidgetOperationTypes.INSERT_AFTER,
             relatedId: 'org.openedx.frontend.widget.slotShowcase.insertingChild2',
-            element: (_jsx(Child, { title: "Child Four", op: "WidgetOperationTypes.INSERT_AFTER" }))
+            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(Child, { title: "Child Five", op: "WidgetOperationTypes.INSERT_BEFORE" }))
+            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(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            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(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            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(Child, { title: "Child Four", op: "WidgetOperationTypes.REPLACE" }))
+            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(Child, { title: "Child One" }))
+            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(Child, { title: "Child Two" }))
+            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(Child, { title: "Child Three" }))
+            element: (_jsx(Widget, { title: "Widget Three" }))
         },
         {
             slotId: 'org.openedx.frontend.slot.dev.slotShowcaseRemoving',
@@ -269,9 +278,36 @@ const app = {
             relatedId: 'org.openedx.frontend.widget.slotShowcase.widgetOptionsChild2',
             op: WidgetOperationTypes.OPTIONS,
             options: {
-                title: (_jsx(Title, { title: "Bar", op: "WidgetOperationTypes.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',