studiokit-scaffolding-js 7.0.15 → 7.0.16

package/README.md

@@ -103,7 +103,10 @@ Components and utils can be imported from `studiokit-scaffolding-js/lib/...`
 	1. Increment the **last** number in the version
 		* e.g. `1.0.0-next.2.1` => `1.0.0-next.2.2` for a feature/issue branch
 		* e.g. `1.0.1-alpha.1` => `1.0.1-alpha.2` for a hotfix branch
-	1. Push to gitlab. Azure DevOps will run a pipeline and publish this version to npmjs.org
+	1. Push to gitlab.
+    1. Publish to npmjs.org
+        * `npm publish --tag next`  
+            (You will need to be logged into npm via `npm login` if you aren't already. Use your own login, not the itap-informatics one.)
 	1. Install the new version in the project(s) you are working on by updating its `package.json` and running `yarn`
 		  * As an alternative to the two steps above, if you don't need to make changes available to other devs yet you can:
 		    1. In the studiokit directory, run `yarn build` then `yarn pack`. You'll still need to have incremented the version number to avoid having it cached.
@@ -115,7 +118,9 @@ Components and utils can be imported from `studiokit-scaffolding-js/lib/...`
 1. Release
 	* **Feature/Issue**: After merging, create a new "release" branch from `develop` and follow the "git flow" release steps as normal
 	* **Hotfix**: Finish the "git flow" hotfix steps as normal from the hotfix branch
-	* Azure DevOps will run a pipeline to publish the version merged to `master` to npmjs.org
+1. Publish to npmjs.org
+    * `npm publish`  
+        (You will need to be logged into npm via `npm login` if you aren't already. Use your own login, not the itap-informatics one.)
 
 ## Styles
 

package/lib/components/AlertDialog.d.ts

@@ -12,6 +12,7 @@ export interface AlertDialogProps {
     hideCancel?: boolean;
     onDestroy?: MouseEventHandler<HTMLElement>;
     destroyText?: string;
+    usePrimaryColorForDestroy?: boolean;
     manualBackground?: boolean;
 }
 export declare const AlertDialog: FunctionComponent<AlertDialogProps>;

package/lib/components/AlertDialog.js

@@ -9,7 +9,7 @@ var react_1 = __importDefault(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
 var ConnectedModal_1 = __importDefault(require("./ConnectedModal"));
 var AlertDialog = function (props) {
-    var isOpen = props.isOpen, title = props.title, description = props.description, onProceed = props.onProceed, proceedText = props.proceedText, onCancel = props.onCancel, cancelText = props.cancelText, hideCancel = props.hideCancel, onDestroy = props.onDestroy, destroyText = props.destroyText, manualBackground = props.manualBackground;
+    var isOpen = props.isOpen, title = props.title, description = props.description, onProceed = props.onProceed, proceedText = props.proceedText, onCancel = props.onCancel, cancelText = props.cancelText, hideCancel = props.hideCancel, onDestroy = props.onDestroy, destroyText = props.destroyText, usePrimaryColorForDestroy = props.usePrimaryColorForDestroy, manualBackground = props.manualBackground;
     return (react_1.default.createElement(ConnectedModal_1.default, { show: isOpen, onHide: onCancel, className: "z-9999" + (manualBackground ? ' bg-black-50' : '') },
         react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true },
             react_1.default.createElement(react_bootstrap_1.Modal.Title, null, title)),
@@ -17,6 +17,6 @@ var AlertDialog = function (props) {
         react_1.default.createElement(react_bootstrap_1.Modal.Footer, null,
             !!onProceed && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-proceed-btn", "aria-label": proceedText || 'Confirm', className: "btn-primary ttc fr mb1", color: "primary", onClick: onProceed }, proceedText || 'Confirm')),
             !hideCancel && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-cancel-btn", color: "primary", "aria-label": cancelText || 'Cancel', className: "btn-text ttc" + (onDestroy ? ' fr' : ' fl') + " " + (onProceed ? ' mr1' : ''), onClick: onCancel }, cancelText || 'Cancel')),
-            !!onDestroy && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-destroy-btn", "aria-label": destroyText || 'Destroy', color: "secondary", className: "btn-text color-red ttc fl", onClick: onDestroy }, destroyText || 'Destroy')))));
+            !!onDestroy && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-destroy-btn", "aria-label": destroyText || 'Destroy', color: usePrimaryColorForDestroy ? 'primary' : 'secondary', className: "btn-text fl ttc" + (usePrimaryColorForDestroy ? '' : ' color-red'), onClick: onDestroy }, destroyText || 'Destroy')))));
 };
 exports.AlertDialog = AlertDialog;

package/lib/components/HOC/FullscreenModalComponent.js

@@ -164,8 +164,8 @@ function configureFullscreenModalComponent(WrappedComponent) {
                         zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : 2000
                     }
                 }, 
-                // hide the rendered portal if this is not the top open fullscreen modal
-                portalClassName: "ReactModalPortal" + (!isTopOpenFullscreenModal ? ' dn' : ''), shouldCloseOnOverlayClick: false },
+                // apply custom class, if this is not the top open fullscreen modal, to allow targeted styling (e.g. hide when printing in Safari)
+                portalClassName: "ReactModalPortal" + (!isTopOpenFullscreenModal ? ' HiddenFullscreenModal' : ''), shouldCloseOnOverlayClick: false },
                 react_1.default.createElement(WrappedComponent, __assign({}, wrappedProps))));
         };
         return FullscreenModalComponent;

package/lib/components/Lti/CreateNonLtiGroupAlertDialog.d.ts

@@ -9,5 +9,5 @@ export interface CreateNonLtiGroupAlertDialogProps extends Omit<AlertDialogProps
 }
 export declare const CreateNonLtiGroupAlertDialog: FunctionComponent<CreateNonLtiGroupAlertDialogProps>;
 export declare const mapStateToProps: (state: BaseReduxState) => CreateNonLtiGroupAlertDialogReduxProps;
-declare const _default: import("react-redux").ConnectedComponent<React.FunctionComponent<CreateNonLtiGroupAlertDialogProps>, Pick<React.PropsWithChildren<CreateNonLtiGroupAlertDialogProps>, "description" | "id" | "children" | "onCancel" | "isOpen" | "onProceed" | "proceedText" | "cancelText" | "hideCancel" | "onDestroy" | "destroyText" | "manualBackground" | "externalHelpResourcePageUrl">>;
+declare const _default: import("react-redux").ConnectedComponent<React.FunctionComponent<CreateNonLtiGroupAlertDialogProps>, Pick<React.PropsWithChildren<CreateNonLtiGroupAlertDialogProps>, "description" | "id" | "children" | "onCancel" | "isOpen" | "onProceed" | "proceedText" | "cancelText" | "hideCancel" | "onDestroy" | "destroyText" | "usePrimaryColorForDestroy" | "manualBackground" | "externalHelpResourcePageUrl">>;
 export default _default;

package/lib/css/base/_print.css

@@ -0,0 +1,62 @@
+/*
+	Sets the default printing options for the browser print dialog,
+	while still allowing the dialog to override.
+
+	NOTE: not supported by Safari
+*/
+@page {
+	size: 8.5in 11in;
+	margin: 0.5in;
+	/* stylelint-disable-next-line at-rule-descriptor-no-unknown */
+	widows: 5;
+}
+
+@media print {
+	/* override global react fullscreen modal styles */
+	.ReactModal__Body--open {
+		overflow: visible !important;
+
+		/* always hide content underneath the fullscreen modal */
+		& #root {
+			display: none;
+		}
+	}
+
+	/* hide hidden fullscreen modal content when printing */
+	.ReactModalPortal.HiddenFullscreenModal {
+		display: none;
+	}
+
+	.ReactModal__Overlay {
+		/* safari-only */
+		@supports (-webkit-hyphens:none) {
+			position: static !important;
+		}
+	}
+
+	.ReactModal__Content {
+		overflow: visible !important;
+
+		/* safari-only */
+		@supports (-webkit-hyphens:none) {
+			position: static !important;
+			border: none !important;
+		}
+	}
+}
+
+.page-break-after {
+	break-after: page;
+}
+
+.page-break-before {
+	break-before: page;
+}
+
+.print-only {
+	display: none;
+
+	@media print {
+		display: initial;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "7.0.15",
+	"version": "7.0.16",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -25,7 +25,7 @@
 		"prepublishOnly": "yarn build",
 		"test": "jest",
 		"test:ci": "cross-env CI=true yarn test",
-		"test:ci-junit": "cross-env CI=true npm run test -- --coverage --reporters='default' --reporters='jest-junit' --coverageReporters='cobertura' --coverageReporters='html'"
+		"test:ci-junit": "cross-env CI=true yarn test --coverage --reporters='default' --reporters='jest-junit' --coverageReporters='cobertura' --coverageReporters='html'"
 	},
 	"husky": {
 		"hooks": {
@@ -101,7 +101,7 @@
 		"@types/react": "^17.0.0",
 		"@types/react-dom": "^17.0.0",
 		"@types/react-helmet": "^6.1.0",
-		"@types/react-modal": "^3.10.6",
+		"@types/react-modal": "^3.16.3",
 		"@types/react-redux": "^7.1.16",
 		"@types/react-router": "^5.1.11",
 		"@types/react-router-bootstrap": "^0.24.5",
@@ -203,5 +203,5 @@
 			"optional": true
 		}
 	},
-	"packageManager": "yarn@4.4.0"
+	"packageManager": "yarn@4.12.0"
 }