@opencraft/frontend-plugin-sandbox 1.2.0-alpha.3 → 1.3.0

package/dist/components/CatalogBanner.js

@@ -1,39 +1,39 @@
 import React from 'react';
-import { Image, Row, Col, Stack } from '@openedx/paragon';
-import bannerBg from '../assets/banner-bg.png';
+import { Image, Row, Col } from '@openedx/paragon';
+import largeBannerBg from '../assets/desktop-openclass.jpg';
+import smallBannerBg from '../assets/mobile-openclass.jpg';
 export const CatalogBanner = () => /*#__PURE__*/React.createElement(Row, {
   direction: "horizontal",
   className: "bg-primary"
 }, /*#__PURE__*/React.createElement(Col, {
-  xl: 7,
-  xs: 12,
-  className: "d-flex align-content-middle"
-}, /*#__PURE__*/React.createElement(Stack, {
   direction: "vertical",
-  className: "justify-content-center px-6 py-lg-6 py-5 my-lg-4",
-  style: {
-    maxWidth: '55rem'
-  }
+  className: "justify-content-center align-content-center px-6 col-12 col-lg-6 col-xl-5"
 }, /*#__PURE__*/React.createElement("h1", {
-  className: "display-2 text-light-100"
+  className: "intro-header text-light-100"
 }, "You\u2019re viewing a live", /*#__PURE__*/React.createElement("span", {
   className: "text-brand-500"
 }, ' Open edX® '), "demo"), /*#__PURE__*/React.createElement("p", {
-  className: "h4 text-light-100 "
-}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author."))), /*#__PURE__*/React.createElement(Col, {
-  xl: 5,
-  xs: 12,
-  className: "d-flex align-content-middle"
-}, /*#__PURE__*/React.createElement(Stack, {
-  className: "justify-content-lg-end justify-content-center"
+  className: "text-light-100"
+}, "OpenClass is a demo site by OpenCraft where you can explore the Open edX platform as a learner or course author.")), /*#__PURE__*/React.createElement(Col, {
+  className: 'col-12 col-lg-6 col-xl-7'
 }, /*#__PURE__*/React.createElement(Image, {
-  src: bannerBg,
-  className: "mt-lg-6",
+  src: largeBannerBg,
   style: {
     height: '100%',
     width: '100%',
-    objectFit: "contain"
+    maxHeight: '550px',
+    objectFit: 'contain',
+    objectPosition: 'right top'
+  },
+  className: 'd-none d-xl-block',
+  alt: "illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+}), /*#__PURE__*/React.createElement(Image, {
+  src: smallBannerBg,
+  style: {
+    width: '100%',
+    objectFit: 'contain'
   },
+  className: 'd-block d-xl-none',
   alt: "illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
-}))));
+})));
 //# sourceMappingURL=CatalogBanner.js.map

package/dist/components/CatalogBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Col","Stack","bannerBg","CatalogBanner","createElement","direction","className","xl","xs","style","maxWidth","src","height","width","objectFit","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Col, Stack } from '@openedx/paragon';\nimport bannerBg from '../assets/banner-bg.png';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Col xl={7} xs={12} className={\"d-flex align-content-middle\"}>\n        <Stack\n          direction=\"vertical\"\n          className=\"justify-content-center px-6 py-lg-6 py-5 my-lg-4\"\n          style={{ maxWidth: '55rem' }}\n        >\n          <h1 className=\"display-2 text-light-100\">\n            You’re viewing a live\n            <span className=\"text-brand-500\">\n              {' Open edX® '}\n            </span>\n            demo\n          </h1>\n          <p className=\"h4 text-light-100 \">\n            OpenClass is a demo site by OpenCraft where you can explore the\n            Open edX platform as a learner or course author.\n          </p>\n        </Stack>\n    </Col>\n    <Col xl={5} xs={12} className={\"d-flex align-content-middle\"}>\n        <Stack\n          className=\"justify-content-lg-end justify-content-center\"\n        >\n          <Image\n            src={bannerBg}\n            className=\"mt-lg-6\"\n            style={{\n              height: '100%',\n              width: '100%',\n              objectFit: \"contain\",\n            }}\n            alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n          />\n        </Stack>\n      </Col>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,QAAQ,kBAAkB;AACzD,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BN,KAAA,CAAAO,aAAA,CAACL,GAAG;EACFM,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACO,EAAE,EAAE,CAAE;EAACC,EAAE,EAAE,EAAG;EAACF,SAAS,EAAE;AAA8B,gBACzDT,KAAA,CAAAO,aAAA,CAACH,KAAK;EACJI,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC,kDAAkD;EAC5DG,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAQ;AAAE,gBAE7Bb,KAAA,CAAAO,aAAA;EAAIE,SAAS,EAAC;AAA0B,GAAC,4BAEvC,eAAAT,KAAA,CAAAO,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLT,KAAA,CAAAO,aAAA;EAAGE,SAAS,EAAC;AAAoB,GAAC,kHAG/B,CACE,CACN,CAAC,eACNT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACO,EAAE,EAAE,CAAE;EAACC,EAAE,EAAE,EAAG;EAACF,SAAS,EAAE;AAA8B,gBACzDT,KAAA,CAAAO,aAAA,CAACH,KAAK;EACJK,SAAS,EAAC;AAA+C,gBAEzDT,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJa,GAAG,EAAET,QAAS;EACdI,SAAS,EAAC,SAAS;EACnBG,KAAK,EAAE;IACLG,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE;EACb,CAAE;EACFC,GAAG,EAAC;AAA2I,CAChJ,CACI,CACJ,CACJ,CACN","ignoreList":[]}
+{"version":3,"file":"CatalogBanner.js","names":["React","Image","Row","Col","largeBannerBg","smallBannerBg","CatalogBanner","createElement","direction","className","src","style","height","width","maxHeight","objectFit","objectPosition","alt"],"sources":["../../src/components/CatalogBanner.tsx"],"sourcesContent":["import React from 'react';\nimport { Image, Row, Col } from '@openedx/paragon';\nimport largeBannerBg from '../assets/desktop-openclass.jpg';\nimport smallBannerBg from '../assets/mobile-openclass.jpg';\n\nexport const CatalogBanner = () => (\n  <Row\n    direction=\"horizontal\"\n    className=\"bg-primary\"\n  >\n    <Col\n      direction=\"vertical\"\n      className=\"justify-content-center align-content-center px-6 col-12 col-lg-6 col-xl-5\"\n    >\n      <h1 className=\"intro-header text-light-100\">\n        You’re viewing a live\n        <span className=\"text-brand-500\">\n          {' Open edX® '}\n        </span>\n        demo\n      </h1>\n      <p className=\"text-light-100\">\n        OpenClass is a demo site by OpenCraft where you can explore the\n        Open edX platform as a learner or course author.\n      </p>\n    </Col>\n    <Col className={'col-12 col-lg-6 col-xl-7'}>\n      <Image\n        src={largeBannerBg}\n        style={{\n          height: '100%',\n          width: '100%',\n          maxHeight: '550px',\n          objectFit: 'contain',\n          objectPosition: 'right top',\n        }}\n        className={'d-none d-xl-block'}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n      />\n      <Image\n        src={smallBannerBg}\n        style={{\n            width: '100%',\n            objectFit: 'contain',\n        }}\n        className={'d-block d-xl-none'}\n        alt=\"illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant\"\n    />\n    </Col>\n  </Row>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,GAAG,EAAEC,GAAG,QAAQ,kBAAkB;AAClD,OAAOC,aAAa,MAAM,iCAAiC;AAC3D,OAAOC,aAAa,MAAM,gCAAgC;AAE1D,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BN,KAAA,CAAAO,aAAA,CAACL,GAAG;EACFM,SAAS,EAAC,YAAY;EACtBC,SAAS,EAAC;AAAY,gBAEtBT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EACFK,SAAS,EAAC,UAAU;EACpBC,SAAS,EAAC;AAA2E,gBAErFT,KAAA,CAAAO,aAAA;EAAIE,SAAS,EAAC;AAA6B,GAAC,4BAE1C,eAAAT,KAAA,CAAAO,aAAA;EAAME,SAAS,EAAC;AAAgB,GAC7B,aACG,CAAC,QAEL,CAAC,eACLT,KAAA,CAAAO,aAAA;EAAGE,SAAS,EAAC;AAAgB,GAAC,kHAG3B,CACA,CAAC,eACNT,KAAA,CAAAO,aAAA,CAACJ,GAAG;EAACM,SAAS,EAAE;AAA2B,gBACzCT,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJS,GAAG,EAAEN,aAAc;EACnBO,KAAK,EAAE;IACLC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE,OAAO;IAClBC,SAAS,EAAE,SAAS;IACpBC,cAAc,EAAE;EAClB,CAAE;EACFP,SAAS,EAAE,mBAAoB;EAC/BQ,GAAG,EAAC;AAA2I,CAChJ,CAAC,eACFjB,KAAA,CAAAO,aAAA,CAACN,KAAK;EACJS,GAAG,EAAEL,aAAc;EACnBM,KAAK,EAAE;IACHE,KAAK,EAAE,MAAM;IACbE,SAAS,EAAE;EACf,CAAE;EACFN,SAAS,EAAE,mBAAoB;EAC/BQ,GAAG,EAAC;AAA2I,CAClJ,CACI,CACF,CACN","ignoreList":[]}

package/dist/index.js

@@ -18,7 +18,7 @@ export const slotSettings = {
       }
     }]
   },
-  desktop_user_menu_slot: {
+  'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
     keepDefault: true,
     plugins: [{
       op: PLUGIN_OPERATIONS.Wrap,
@@ -26,7 +26,7 @@ export const slotSettings = {
       wrapper: MenuWrapper
     }]
   },
-  mobile_user_menu_slot: {
+  'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
     keepDefault: true,
     plugins: [{
       op: PLUGIN_OPERATIONS.Wrap,
@@ -34,7 +34,7 @@ export const slotSettings = {
       wrapper: MenuWrapper
     }]
   },
-  footer_slot: {
+  'org.openedx.frontend.layout.footer.v1': {
     plugins: [{
       op: PLUGIN_OPERATIONS.Hide,
       widgetId: 'default_contents'

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DIRECT_PLUGIN","PLUGIN_OPERATIONS","MenuWrapper","SandboxFooter","DropDownToggler","CatalogBanner","slotSettings","keepDefault","plugins","op","Insert","widget","id","type","RenderWidget","desktop_user_menu_slot","Wrap","widgetId","wrapper","mobile_user_menu_slot","footer_slot","Hide"],"sources":["../src/index.ts"],"sourcesContent":["import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';\nimport { MenuWrapper } from './components/MenuWrapper';\nimport { SandboxFooter } from './components/SandboxFooter';\nimport { DropDownToggler } from './components/DropDownToggler';\nimport { CatalogBanner } from './components/CatalogBanner';\n\nexport {\n  MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner,\n};\n// Example slot settings you can use in your deployment. You may be able to import these\n// for quick development usage.\nexport const slotSettings = {\n  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_desktop_toggle',\n          type: DIRECT_PLUGIN,\n          RenderWidget: DropDownToggler,\n        },\n      },\n    ],\n  },\n  desktop_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  mobile_user_menu_slot: {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  footer_slot: {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_footer',\n          type: DIRECT_PLUGIN,\n          RenderWidget: SandboxFooter,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.catalog.home_page.banner': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_catalog_banner',\n          type: DIRECT_PLUGIN,\n          RenderWidget: CatalogBanner,\n        },\n      },\n    ],\n  },\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,oCAAoC;AACrF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SACEH,WAAW,EAAEC,aAAa,EAAEC,eAAe,EAAEC,aAAa;AAE5D;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1B,gEAAgE,EAAE;IAChEC,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEV;MAChB;IACF,CAAC;EAEL,CAAC;EACDW,sBAAsB,EAAE;IACtBR,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACe,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEhB;IACX,CAAC;EAEL,CAAC;EACDiB,qBAAqB,EAAE;IACrBZ,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACe,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEhB;IACX,CAAC;EAEL,CAAC;EACDkB,WAAW,EAAE;IACXZ,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACoB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,eAAe;QACnBC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEX;MAChB;IACF,CAAC;EAEL,CAAC;EACD,+CAA+C,EAAE;IAC/CK,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACoB,IAAI;MAC1BJ,QAAQ,EAAE;IACZ,CAAC,EACD;MACER,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAET;MAChB;IACF,CAAC;EAEL;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["DIRECT_PLUGIN","PLUGIN_OPERATIONS","MenuWrapper","SandboxFooter","DropDownToggler","CatalogBanner","slotSettings","keepDefault","plugins","op","Insert","widget","id","type","RenderWidget","Wrap","widgetId","wrapper","Hide"],"sources":["../src/index.ts"],"sourcesContent":["import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';\nimport { MenuWrapper } from './components/MenuWrapper';\nimport { SandboxFooter } from './components/SandboxFooter';\nimport { DropDownToggler } from './components/DropDownToggler';\nimport { CatalogBanner } from './components/CatalogBanner';\n\nexport {\n  MenuWrapper, SandboxFooter, DropDownToggler, CatalogBanner,\n};\n// Example slot settings you can use in your deployment. You may be able to import these\n// for quick development usage.\nexport const slotSettings = {\n  'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {\n    keepDefault: false,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_desktop_toggle',\n          type: DIRECT_PLUGIN,\n          RenderWidget: DropDownToggler,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.header_desktop_user_menu.v1': {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.header_mobile_user_menu.v1': {\n    keepDefault: true,\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Wrap,\n        widgetId: 'default_contents',\n        wrapper: MenuWrapper,\n      },\n    ],\n  },\n  'org.openedx.frontend.layout.footer.v1': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_footer',\n          type: DIRECT_PLUGIN,\n          RenderWidget: SandboxFooter,\n        },\n      },\n    ],\n  },\n  'org.openedx.frontend.catalog.home_page.banner': {\n    plugins: [\n      {\n        op: PLUGIN_OPERATIONS.Hide,\n        widgetId: 'default_contents',\n      },\n      {\n        op: PLUGIN_OPERATIONS.Insert,\n        widget: {\n          id: 'custom_catalog_banner',\n          type: DIRECT_PLUGIN,\n          RenderWidget: CatalogBanner,\n        },\n      },\n    ],\n  },\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,iBAAiB,QAAQ,oCAAoC;AACrF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SACEH,WAAW,EAAEC,aAAa,EAAEC,eAAe,EAAEC,aAAa;AAE5D;AACA;AACA,OAAO,MAAMC,YAAY,GAAG;EAC1B,gEAAgE,EAAE;IAChEC,WAAW,EAAE,KAAK;IAClBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEV;MAChB;IACF,CAAC;EAEL,CAAC;EACD,yDAAyD,EAAE;IACzDG,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACc,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEf;IACX,CAAC;EAEL,CAAC;EACD,wDAAwD,EAAE;IACxDK,WAAW,EAAE,IAAI;IACjBC,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACc,IAAI;MAC1BC,QAAQ,EAAE,kBAAkB;MAC5BC,OAAO,EAAEf;IACX,CAAC;EAEL,CAAC;EACD,uCAAuC,EAAE;IACvCM,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACiB,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MACEP,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,eAAe;QACnBC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAEX;MAChB;IACF,CAAC;EAEL,CAAC;EACD,+CAA+C,EAAE;IAC/CK,OAAO,EAAE,CACP;MACEC,EAAE,EAAER,iBAAiB,CAACiB,IAAI;MAC1BF,QAAQ,EAAE;IACZ,CAAC,EACD;MACEP,EAAE,EAAER,iBAAiB,CAACS,MAAM;MAC5BC,MAAM,EAAE;QACNC,EAAE,EAAE,uBAAuB;QAC3BC,IAAI,EAAEb,aAAa;QACnBc,YAAY,EAAET;MAChB;IACF,CAAC;EAEL;AACF,CAAC","ignoreList":[]}

package/dist/types.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.js","names":[],"sources":["../src/types.d.ts"],"sourcesContent":["declare module '*.png';\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.d.js","names":[],"sources":["../src/types.d.ts"],"sourcesContent":["declare module '*.png';\ndeclare module '*.jpg';"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencraft/frontend-plugin-sandbox",
-  "version": "1.2.0-alpha.3",
+  "version": "1.3.0",
   "description": "Plugin for custom headers and footers in OpenCraft's sandboxes",
   "repository": {
     "type": "git",

package/src/components/CatalogBanner.tsx

@@ -1,46 +1,51 @@
 import React from 'react';
-import { Image, Row, Col, Stack } from '@openedx/paragon';
-import bannerBg from '../assets/banner-bg.png';
+import { Image, Row, Col } from '@openedx/paragon';
+import largeBannerBg from '../assets/desktop-openclass.jpg';
+import smallBannerBg from '../assets/mobile-openclass.jpg';
 
 export const CatalogBanner = () => (
   <Row
     direction="horizontal"
     className="bg-primary"
   >
-    <Col xl={7} xs={12} className={"d-flex align-content-middle"}>
-        <Stack
-          direction="vertical"
-          className="justify-content-center px-6 py-lg-6 py-5 my-lg-4"
-          style={{ maxWidth: '55rem' }}
-        >
-          <h1 className="display-2 text-light-100">
-            You’re viewing a live
-            <span className="text-brand-500">
-              {' Open edX® '}
-            </span>
-            demo
-          </h1>
-          <p className="h4 text-light-100 ">
-            OpenClass is a demo site by OpenCraft where you can explore the
-            Open edX platform as a learner or course author.
-          </p>
-        </Stack>
+    <Col
+      direction="vertical"
+      className="justify-content-center align-content-center px-6 col-12 col-lg-6 col-xl-5"
+    >
+      <h1 className="intro-header text-light-100">
+        You’re viewing a live
+        <span className="text-brand-500">
+          {' Open edX® '}
+        </span>
+        demo
+      </h1>
+      <p className="text-light-100">
+        OpenClass is a demo site by OpenCraft where you can explore the
+        Open edX platform as a learner or course author.
+      </p>
+    </Col>
+    <Col className={'col-12 col-lg-6 col-xl-7'}>
+      <Image
+        src={largeBannerBg}
+        style={{
+          height: '100%',
+          width: '100%',
+          maxHeight: '550px',
+          objectFit: 'contain',
+          objectPosition: 'right top',
+        }}
+        className={'d-none d-xl-block'}
+        alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+      />
+      <Image
+        src={smallBannerBg}
+        style={{
+            width: '100%',
+            objectFit: 'contain',
+        }}
+        className={'d-block d-xl-none'}
+        alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
+    />
     </Col>
-    <Col xl={5} xs={12} className={"d-flex align-content-middle"}>
-        <Stack
-          className="justify-content-lg-end justify-content-center"
-        >
-          <Image
-            src={bannerBg}
-            className="mt-lg-6"
-            style={{
-              height: '100%',
-              width: '100%',
-              objectFit: "contain",
-            }}
-            alt="illustration of a workspace with a computer screen displaying charts and graphs, accompanied by a desk lamp, coffee cup, and potted plant"
-          />
-        </Stack>
-      </Col>
   </Row>
 );

package/src/index.ts

@@ -23,7 +23,7 @@ export const slotSettings = {
       },
     ],
   },
-  desktop_user_menu_slot: {
+  'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
     keepDefault: true,
     plugins: [
       {
@@ -33,7 +33,7 @@ export const slotSettings = {
       },
     ],
   },
-  mobile_user_menu_slot: {
+  'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
     keepDefault: true,
     plugins: [
       {
@@ -43,7 +43,7 @@ export const slotSettings = {
       },
     ],
   },
-  footer_slot: {
+  'org.openedx.frontend.layout.footer.v1': {
     plugins: [
       {
         op: PLUGIN_OPERATIONS.Hide,

package/src/types.d.ts

@@ -1 +1,2 @@
 declare module '*.png';
+declare module '*.jpg';

package/dist/components/WhiteLogo.js

@@ -1,18 +0,0 @@
-import React, { useContext } from 'react';
-import { AppContext } from '@edx/frontend-platform/react';
-import { ensureConfig } from '@edx/frontend-platform';
-ensureConfig(['LOGO_WHITE_URL'], 'White Header Logo');
-export const WhiteLogo = () => {
-  const {
-    config
-  } = useContext(AppContext);
-  return /*#__PURE__*/React.createElement("a", {
-    className: "logo",
-    href: `${config.LMS_BASE_URL}/dashboard`
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "d-block",
-    src: config.LOGO_WHITE_URL,
-    alt: config.SITE_NAME
-  }));
-};
-//# sourceMappingURL=WhiteLogo.js.map

package/dist/components/WhiteLogo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"WhiteLogo.js","names":["React","useContext","AppContext","ensureConfig","WhiteLogo","config","createElement","className","href","LMS_BASE_URL","src","LOGO_WHITE_URL","alt","SITE_NAME"],"sources":["../../src/components/WhiteLogo.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport { ensureConfig } from '@edx/frontend-platform';\n\nensureConfig([\n  'LOGO_WHITE_URL',\n], 'White Header Logo');\n\nexport const WhiteLogo = () => {\n  const { config } = useContext<AppContextInterface>(AppContext);\n  return (\n    <a className=\"logo\" href={`${config.LMS_BASE_URL}/dashboard`}>\n      <img className=\"d-block\" src={config.LOGO_WHITE_URL} alt={config.SITE_NAME} />\n    </a>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAQ,8BAA8B;AACzD,SAASC,YAAY,QAAQ,wBAAwB;AAErDA,YAAY,CAAC,CACX,gBAAgB,CACjB,EAAE,mBAAmB,CAAC;AAEvB,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC;EAAO,CAAC,GAAGJ,UAAU,CAAsBC,UAAU,CAAC;EAC9D,oBACEF,KAAA,CAAAM,aAAA;IAAGC,SAAS,EAAC,MAAM;IAACC,IAAI,EAAE,GAAGH,MAAM,CAACI,YAAY;EAAa,gBAC3DT,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAC,SAAS;IAACG,GAAG,EAAEL,MAAM,CAACM,cAAe;IAACC,GAAG,EAAEP,MAAM,CAACQ;EAAU,CAAE,CAC5E,CAAC;AAER,CAAC","ignoreList":[]}