feat: allow full width content in library authoring

openedx · Sep 5, 2024 · b6e58d4 · b6e58d4
1 parent 34f0bf5
commit b6e58d4
Show file tree

Hide file tree

Showing 10 changed files with 1,142 additions and 470 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,8 +47,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/frontend-component-footer": "^14.0.3",
-    "@edx/frontend-component-header": "^5.3.3",
+    "@edx/frontend-component-footer": "git+ssh://github.com/open-craft/frontend-component-footer#6468e03d7384ba2cac8ac687348171c7ad6c1196",
+    "@edx/frontend-component-header": "git+ssh://github.com/open-craft/frontend-component-header#97edb99a3fe92b074bca52da5f1cbe7765cfd967",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
     "@edx/frontend-platform": "^8.0.3",
     "@edx/openedx-atlas": "^0.6.0",
@@ -63,7 +63,7 @@
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
     "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^22.5.1",
+    "@openedx/paragon": "git+ssh://github.com/open-craft/paragon#rpenido/dist/fal-3820-add-full-width-container-option",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",

diff --git a/src/header/Header.tsx b/src/header/Header.tsx
@@ -17,6 +17,7 @@ interface HeaderProps {
   title?: string,
   isHiddenMainMenu?: boolean,
   isLibrary?: boolean,
+  full?: boolean,
 }
 
 const Header = ({
@@ -26,6 +27,7 @@ const Header = ({
   title = '',
   isHiddenMainMenu = false,
   isLibrary = false,
+  full,
 }: HeaderProps) => {
   const intl = useIntl();
   const libraryHref = useHref('/library/:libraryId');
@@ -65,6 +67,7 @@ const Header = ({
         mainMenuDropdowns={mainMenuDropdowns}
         outlineLink={outlineLink}
         searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
+        full={full}
       />
       { meiliSearchEnabled && (
         <SearchModal

diff --git a/src/index.scss b/src/index.scss
@@ -61,3 +61,7 @@ body {
     background-color: $light-100;
   }
 }
+
+mark {
+  padding: 0;
+}
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -158,8 +158,9 @@ const LibraryAuthoringPage = () => {
           org={libraryData.org}
           contextId={libraryId}
           isLibrary
+          full
         />
-        <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
+        <Container className="px-4 mt-4 mb-5 library-authoring-page">
           <SearchContextProvider
             extraFilter={`context_key = "${libraryId}"`}
           >
@@ -212,7 +213,7 @@ const LibraryAuthoringPage = () => {
             </Routes>
           </SearchContextProvider>
         </Container>
-        <StudioFooter />
+        <StudioFooter full />
       </div>
       { !!sidebarBodyComponent && (
         <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">

diff --git a/src/library-authoring/components/ComponentCard.scss b/src/library-authoring/components/ComponentCard.scss
@@ -1,7 +1,4 @@
 .library-component-card {
-  .pgn__card {
-    height: 100%;
-  }
 
   .library-component-header {
     border-top-left-radius: .375rem;

diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
@@ -3,7 +3,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Card,
-  Container,
   Icon,
   IconButton,
   Dropdown,
@@ -88,44 +87,43 @@ const ComponentCard = ({ contentHit, blockTypeDisplayName } : ComponentCardProps
   const componentIcon = getItemIcon(blockType);
 
   return (
-    <Container className="library-component-card">
-      <Card
-        isClickable
-        onClick={() => openComponentInfoSidebar(usageKey)}
-        onKeyDown={(e: React.KeyboardEvent) => {
-          if (['Enter', ' '].includes(e.key)) {
-            openComponentInfoSidebar(usageKey);
-          }
-        }}
-      >
-        <Card.Header
-          className={`library-component-header ${getComponentStyleColor(blockType)}`}
-          title={
-            <Icon src={componentIcon} className="library-component-header-icon" />
-          }
-          actions={(
-            <ActionRow>
-              <ComponentMenu usageKey={usageKey} />
-            </ActionRow>
-          )}
-        />
-        <Card.Body>
-          <Card.Section>
-            <Stack direction="horizontal" className="d-flex justify-content-between">
-              <Stack direction="horizontal" gap={1}>
-                <Icon src={componentIcon} size="sm" />
-                <span className="small">{blockTypeDisplayName}</span>
-              </Stack>
-              <TagCount count={tagCount} />
+    <Card
+      isClickable
+      onClick={() => openComponentInfoSidebar(usageKey)}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (['Enter', ' '].includes(e.key)) {
+          openComponentInfoSidebar(usageKey);
+        }
+      }}
+      className="library-component-card"
+    >
+      <Card.Header
+        className={`library-component-header ${getComponentStyleColor(blockType)}`}
+        title={
+          <Icon src={componentIcon} className="library-component-header-icon" />
+        }
+        actions={(
+          <ActionRow>
+            <ComponentMenu usageKey={usageKey} />
+          </ActionRow>
+        )}
+      />
+      <Card.Body>
+        <Card.Section>
+          <Stack direction="horizontal" className="d-flex justify-content-between">
+            <Stack direction="horizontal" gap={1}>
+              <Icon src={componentIcon} size="sm" />
+              <span className="small">{blockTypeDisplayName}</span>
             </Stack>
-            <div className="text-truncate h3 mt-2">
-              <Highlight text={displayName} />
-            </div>
-            <Highlight text={description} />
-          </Card.Section>
-        </Card.Body>
-      </Card>
-    </Container>
+            <TagCount count={tagCount} />
+          </Stack>
+          <div className="text-truncate h3 mt-2">
+            <Highlight text={displayName} />
+          </div>
+          <Highlight text={description} />
+        </Card.Section>
+      </Card.Body>
+    </Card>
   );
 };
 

diff --git a/src/library-authoring/components/LibraryComponents.scss b/src/library-authoring/components/LibraryComponents.scss
@@ -0,0 +1,6 @@
+.library-components-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 2rem;
+  justify-items: center;
+}
diff --git a/src/library-authoring/components/LibraryComponents.tsx b/src/library-authoring/components/LibraryComponents.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { CardGrid } from '@openedx/paragon';
+import { Container } from '@openedx/paragon';
 
 import { useSearchContext } from '../../search-manager';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
@@ -69,23 +69,15 @@ const LibraryComponents = ({ libraryId, variant }: LibraryComponentsProps) => {
   }
 
   return (
-    <CardGrid
-      columnSizes={{
-        sm: 12,
-        md: 6,
-        lg: 4,
-        xl: 3,
-      }}
-      hasEqualColumnHeights
-    >
+    <div className="library-components-grid">
       { componentList.map((contentHit) => (
         <ComponentCard
           key={contentHit.id}
           contentHit={contentHit}
           blockTypeDisplayName={blockTypes[contentHit.blockType]?.displayName ?? ''}
         />
       )) }
-    </CardGrid>
+    </div>
   );
 };
 

diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss
@@ -1,3 +1,4 @@
 @import "library-authoring/components/ComponentCard";
+@import "library-authoring/components/LibraryComponents";
 @import "library-authoring/library-info/LibraryPublishStatus";
 @import "library-authoring/LibraryAuthoringPage";