Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: upgrade paragon version (#263)

Browse Source 
* chore: upgrade paragon version
This commit is contained in:
Awais Ansari
2022-03-16 11:42:19 +05:00
committed by GitHub
parent 6a06f22ca5
commit abc7e018fc
11 changed files with 196 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
package-lock.json generated
View File

@@ -3798,44 +3798,44 @@
}
},
"@edx/paragon": {
"version": "16.17.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.17.0.tgz",
"integrity": "sha512-Y0gdOtOLupq+9fiXAVhgz7KoyxRCnApxffaYC9g+JcQGzA4bHRQx37betY9iKgGk+Nh9NYL8B4qizsIuj6zoEA==",
"version": "19.9.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-19.9.0.tgz",
"integrity": "sha512-yPtSdm1I5as857dYDpeuOIushHx50/S6QjWkVkrbQXNNMt36OKr8YV/vIYOwfedZAzaST3QIz615zzfXcQ7mSA==",
"requires": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@popperjs/core": "^2.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@popperjs/core": "^2.11.2",
"airbnb-prop-types": "^2.12.0",
"bootstrap": "4.6.0",
"classnames": "^2.2.6",
"classnames": "^2.3.1",
"email-prop-type": "^3.0.0",
"font-awesome": "^4.7.0",
"lodash.uniqby": "^4.7.0",
"mailto-link": "^1.0.0",
"prop-types": "^15.7.2",
"react-bootstrap": "^1.3.0",
"react-focus-on": "^3.5.0",
"react-popper": "^2.2.4",
"prop-types": "^15.8.1",
"react-bootstrap": "^1.6.4",
"react-focus-on": "^3.5.4",
"react-popper": "^2.2.5",
"react-proptype-conditional-require": "^1.0.4",
"react-responsive": "^8.2.0",
"react-table": "^7.6.1",
"react-transition-group": "^4.0.0",
"react-table": "^7.7.0",
"react-transition-group": "^4.4.2",
"tabbable": "^4.0.0",
"uncontrollable": "7.2.1"
},
"dependencies": {
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz",
"integrity": "sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz",
"integrity": "sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
"@fortawesome/fontawesome-common-types": "^0.3.0"
}
},
"@fortawesome/free-solid-svg-icons": {
@@ -3844,14 +3844,36 @@
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"dependencies": {
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
}
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.16",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
"integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
"version": "0.1.17",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.17.tgz",
"integrity": "sha512-dX43Z5IvMaW7fwzU8farosYjKNGfRb2HB/DgjVBHeJZ/NSnuuaujPPx0YOdcAq+n3mqn70tyCde2HM1mqbhiuw==",
"requires": {
"prop-types": "^15.7.2"
"prop-types": "^15.8.1"
}
},
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"react-responsive": {
@@ -3864,6 +3886,17 @@
"prop-types": "^15.6.1",
"shallow-equal": "^1.1.0"
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
}
}
},
@@ -5057,9 +5090,9 @@
}
},
"@popperjs/core": {
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
"integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
"version": "2.11.4",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
"integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
},
"@reduxjs/toolkit": {
"version": "1.5.0",
@@ -6379,9 +6412,9 @@
"dev": true
},
"@types/react": {
"version": "17.0.34",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.34.tgz",
"integrity": "sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==",
"version": "17.0.40",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz",
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -6389,9 +6422,9 @@
},
"dependencies": {
"csstype": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
}
}
},
@@ -7185,9 +7218,9 @@
}
},
"has-symbols": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
},
"is-callable": {
"version": "1.2.4",
@@ -7204,9 +7237,9 @@
}
},
"object-inspect": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
"integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
},
"object.assign": {
"version": "4.1.2",
@@ -11776,9 +11809,9 @@
"dev": true
},
"focus-lock": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.2.tgz",
"integrity": "sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==",
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.10.2.tgz",
"integrity": "sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==",
"requires": {
"tslib": "^2.0.3"
},
@@ -12007,9 +12040,9 @@
}
},
"has-symbols": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
},
"is-callable": {
"version": "1.2.4",
@@ -12026,9 +12059,9 @@
}
},
"object-inspect": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
"integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g=="
},
"object.assign": {
"version": "4.1.2",
@@ -21063,9 +21096,9 @@
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@@ -21076,9 +21109,9 @@
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"csstype": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
},
"dom-helpers": {
"version": "5.2.1",
@@ -21100,9 +21133,9 @@
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@@ -21276,12 +21309,12 @@
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"react-focus-lock": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.6.0.tgz",
"integrity": "sha512-2yB5KWyaefbvFDgqvsg/KpIjbqVlhIY2c/dyDcokDLhB3Ib7I4bjsrta5OkI5euUoIu5xBTyBwIQZPykUJAr1g==",
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.8.1.tgz",
"integrity": "sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg==",
"requires": {
"@babel/runtime": "^7.0.0",
"focus-lock": "^0.9.2",
"focus-lock": "^0.10.2",
"prop-types": "^15.6.2",
"react-clientside-effect": "^1.2.5",
"use-callback-ref": "^1.2.5",
@@ -21347,17 +21380,17 @@
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"csstype": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
},
"dom-helpers": {
"version": "5.2.1",
@@ -21411,9 +21444,9 @@
"dev": true
},
"react-remove-scroll": {
"version": "2.4.3",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
"integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.4.tgz",
"integrity": "sha512-EyC5ohYhaeKbThMSQxuN2i+QC5HqV3AJvNZKEdiATITexu0gHm00+5ko0ltNS1ajYJVeDgVG2baRSCei0AUWlQ==",
"requires": {
"react-remove-scroll-bar": "^2.1.0",
"react-style-singleton": "^2.1.0",

2
package.json
View File

@@ -39,7 +39,7 @@
"@edx/frontend-component-footer": "10.1.6",
"@edx/frontend-lib-content-components": "1.2.0",
"@edx/frontend-platform": "1.14.0",
"@edx/paragon": "16.17.0",
"@edx/paragon": "19.9.0",
"@fortawesome/fontawesome-svg-core": "1.2.28",
"@fortawesome/free-brands-svg-icons": "5.11.2",
"@fortawesome/free-regular-svg-icons": "5.11.2",

14
src/generic/DeletePopup.jsx
View File

@@ -10,18 +10,22 @@ const DeletePopup = ({
onCancel,
cancelLabel,
}) => (
<Card className="rounded mb-3 p-1">
<Card className="rounded mb-3 px-1">
<Card.Header
className="text-primary-500"
title={label}
size="sm"
/>
<Card.Body>
<div className="text-primary-500 mb-2 h4">{label}</div>
<Card.Text className="text-justify text-muted">{bodyText}</Card.Text>
<div className="d-flex justify-content-end">
<Card.Section className="text-justify text-muted pt-2 pb-3">{bodyText}</Card.Section>
<Card.Footer>
<Button variant="tertiary" onClick={onCancel}>
{cancelLabel}
</Button>
<Button variant="outline-brand" className="ml-2" onClick={onDelete}>
{deleteLabel}
</Button>
</div>
</Card.Footer>
</Card.Body>
</Card>
);

23
src/generic/Loading.jsx
View File

@@ -10,15 +10,20 @@ export default function Loading() {
height: '50vh',
}}
>
<Spinner className animation="border" role="status" variant="primary">
<span className="sr-only">
<FormattedMessage
id="authoring.loading"
defaultMessage="Loading..."
description="Screen-reader message for when a page is loading."
/>
</span>
</Spinner>
<Spinner
animation="border"
role="status"
variant="primary"
screenReaderText={(
<span className="sr-only">
<FormattedMessage
id="authoring.loading"
defaultMessage="Loading..."
description="Screen-reader message for when a page is loading."
/>
</span>
)}
/>
</div>
);
}

18
src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
View File

@@ -70,15 +70,17 @@ const TopicItem = ({
};
const deleteTopicPopup = (
<Card className="rounded mb-3 p-1">
<Card className="rounded mb-3 px-1">
<Card.Header
className="text-primary-500"
title={intl.formatMessage(messages.discussionTopicDeletionLabel)}
size="sm"
/>
<Card.Body>
<div className="text-primary-500 mb-2 h4">
{intl.formatMessage(messages.discussionTopicDeletionLabel)}
</div>
<Card.Text className="text-justify text-muted">
<Card.Section className="text-justify text-muted pt-2 pb-3">
{intl.formatMessage(messages.discussionTopicDeletionHelp)}
</Card.Text>
<div className="d-flex justify-content-end">
</Card.Section>
<Card.Footer>
<Button variant="tertiary" onClick={() => setShowDeletePopup(false)}>
{intl.formatMessage(messages.cancelButton)}
</Button>
@@ -89,7 +91,7 @@ const TopicItem = ({
>
{intl.formatMessage(messages.deleteButton)}
</Button>
</div>
</Card.Footer>
</Card.Body>
</Card>
);

58
src/pages-and-resources/discussions/app-list/AppCard.jsx
View File

@@ -21,46 +21,44 @@ function AppCard({
return (
<Card
tabIndex="-1"
isClickable
onClick={() => canChangeProviders && onClick(app.id)}
onKeyPress={() => canChangeProviders && onClick(app.id)}
role="radio"
aria-checked={selected}
style={{
cursor: 'pointer',
}}
className={classNames({
'border-primary': selected,
}, 'w-100')}
>
<div
className="position-absolute mt-3 mr-3"
style={{
top: '0.75rem',
right: '0.75rem',
}}
>
<CheckboxControl
checked={selected}
disabled={!canChangeProviders}
readOnly
aria-label={intl.formatMessage(messages.selectApp, {
appName: intl.formatMessage(appMessages[`appName-${app.id}`]),
})}
/>
</div>
<Card.Header
title={<div data-testid="card-title">{intl.formatMessage(appMessages[`appName-${app.id}`])}</div>}
subtitle={<div className="h6 text-muted" data-testid="card-subtitle">{supportText}</div>}
actions={(
<div className="mt-2.5">
<CheckboxControl
checked={selected}
disabled={!canChangeProviders}
readOnly
aria-label={intl.formatMessage(messages.selectApp, {
appName: intl.formatMessage(appMessages[`appName-${app.id}`]),
})}
/>
</div>
)}
size="sm"
/>
<Card.Body>
<div className="h4 card-title">
{intl.formatMessage(appMessages[`appName-${app.id}`])}
<div data-testid="card-text">
<Card.Section className="pt-2">
{intl.formatMessage(messages[`appDescription-${app.id}`])}
<Responsive maxWidth={breakpoints.extraSmall.maxWidth}>
<FeaturesList
features={features}
app={app}
/>
</Responsive>
</Card.Section>
</div>
<Card.Subtitle className="mb-3 text-muted">{supportText}</Card.Subtitle>
<Card.Text>{intl.formatMessage(messages[`appDescription-${app.id}`])}</Card.Text>
<Responsive maxWidth={breakpoints.extraSmall.maxWidth}>
<FeaturesList
features={features}
app={app}
/>
</Responsive>
</Card.Body>
</Card>
);

10
src/pages-and-resources/discussions/app-list/AppCard.test.jsx
View File

@@ -4,7 +4,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
import { AppProvider } from '@edx/frontend-platform/react';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import MockAdapter from 'axios-mock-adapter';
import { render, queryByLabelText } from '@testing-library/react';
import { render, queryByLabelText, queryByTestId } from '@testing-library/react';
import AppCard from './AppCard';
import messages from './messages';
@@ -85,8 +85,8 @@ describe('AppCard', () => {
await mockStore(legacyApiResponse);
createComponent(appWithCustomSupport);
expect(container.querySelector('.card-title')).toHaveTextContent(title);
expect(container.querySelector('.card-text')).toHaveTextContent(text);
expect(queryByTestId(container, 'card-title')).toHaveTextContent(title);
expect(queryByTestId(container, 'card-text')).toHaveTextContent(text);
});
test('full support subtitle shown when hasFullSupport is true', async () => {
@@ -95,7 +95,7 @@ describe('AppCard', () => {
await mockStore(legacyApiResponse);
createComponent(app);
expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
expect(queryByTestId(container, 'card-subtitle')).toHaveTextContent(subtitle);
});
test('partial support subtitle shown when hasFullSupport is false', async () => {
@@ -105,6 +105,6 @@ describe('AppCard', () => {
await mockStore(legacyApiResponse);
createComponent(appWithBasicSupport);
expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
expect(queryByTestId(container, 'card-subtitle')).toHaveTextContent(subtitle);
});
});

3
src/pages-and-resources/discussions/app-list/AppList.jsx
View File

@@ -55,7 +55,7 @@ function AppList({ intl }) {
}
return (
<div className="m-1 my-sm-5" data-testid="appList">
<div className="my-sm-5 m-1" data-testid="appList">
<h3 className="my-sm-5 my-4">
{intl.formatMessage(messages.heading)}
</h3>
@@ -64,6 +64,7 @@ function AppList({ intl }) {
xs: 12,
sm: 6,
lg: 4,
xl: 4,
}}
>
{apps.map(app => (

43
src/pages-and-resources/pages/PageCard.jsx
View File

@@ -37,7 +37,6 @@ function PageCard({
return (
<Hyperlink destination={page.legacyLink}>
<IconButton
className="mb-0 mr-1"
src={ArrowForward}
iconAs={Icon}
size="inline"
@@ -48,7 +47,6 @@ function PageCard({
}
return (page.allowedOperations.configure || page.allowedOperations.enable) && (
<IconButton
className="mb-0 mr-1"
src={Settings}
iconAs={Icon}
size="inline"
@@ -60,32 +58,25 @@ function PageCard({
return (
<Card
className={classNames(
'shadow card',
{
'desktop-card': isDesktop,
'mobile-card': !isDesktop,
},
)}
className={classNames('shadow justify-content-between', {
'desktop-card': isDesktop,
'mobile-card': !isDesktop,
})}
>
<Card.Body className="d-flex flex-column justify-content-between">
<div>
<Card.Title className="d-flex mb-1 align-items-center justify-content-between">
<h4 className="m-0 p-0">{page.name}</h4>
<SettingsButton />
</Card.Title>
{
page.enabled && (
<Badge variant="success">
{intl.formatMessage(messages.enabled)}
</Badge>
)
}
</div>
<Card.Text className="m-0">
<Card.Header
title={page.name}
subtitle={page.enabled && (
<Badge variant="success" className="mt-1">
{intl.formatMessage(messages.enabled)}
</Badge>
)}
actions={<div className="mt-1"><SettingsButton /></div>}
size="sm"
/>
<Card.Body>
<Card.Section>
{page.description}
</Card.Text>
</Card.Section>
</Card.Body>
</Card>
);

5
src/pages-and-resources/pages/PageCard.scss
View File

@@ -7,3 +7,8 @@
width: 100%;
height: 14rem;
}
.shadow {
-webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

4
src/pages-and-resources/pages/PageGrid.jsx
View File

@@ -14,9 +14,7 @@ function PageGrid({ pages }) {
}}
>
{pages.map((page) => (
<div key={page.id} className="justify-content-center w-100 d-flex">
<PageCard page={page} />
</div>
<PageCard page={page} key={page.id} />
))}
</CardGrid>
);