@squiz/generic-browser-lib 1.56.1-alpha.3 → 1.56.1-alpha.31

package/lib/Modal/Modal.js

@@ -33,7 +33,7 @@ const react_aria_1 = require("react-aria");
 function ModalContent({ children, ...props }) {
     const ref = (0, react_1.useRef)(null);
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)(props, ref);
-    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg outline-0" }, children(titleProps)));
+    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[50rem] outline-0" }, children(titleProps)));
 }
 function Modal({ isDismissable, state, overlayProps, children, scope, ...props }) {
     const ref = (0, react_1.useRef)(null);

package/lib/PreviewPanel/PreviewPanel.js

@@ -43,7 +43,7 @@ const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState,
     const previewPanel = resource && (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && react_1.default.createElement(ResourceComponent, { resource: resource, selectionCallback: selectionCallback })),
         react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
-            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5" }, "Select"))));
+            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold" }, "Select"))));
     return (react_1.default.createElement("div", { className: "squiz-gb-scope h-full" },
         !isMobile && react_1.default.createElement("h3", { className: "sr-only" }, "Resource Details"),
         resource === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },

package/lib/index.css

@@ -486,8 +486,8 @@
 .squiz-gb-scope .w-screen {
   width: 100vw;
 }
-.squiz-gb-scope .max-w-screen-lg {
-  max-width: 1024px;
+.squiz-gb-scope .max-w-\[50rem\] {
+  max-width: 50rem;
 }
 .squiz-gb-scope .shrink-0 {
   flex-shrink: 0;
@@ -868,7 +868,7 @@
   }
 }
 @media (min-width: 1024px) {
-  .squiz-gb-scope .lg\:h-\[calc\(100vh-3\.5rem\)\] {
-    height: calc(100vh - 3.5rem);
+  .squiz-gb-scope .lg\:h-\[calc\(100vh-9rem\)\] {
+    height: calc(100vh - 9rem);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/generic-browser-lib",
-  "version": "1.56.1-alpha.3",
+  "version": "1.56.1-alpha.31",
   "description": "Package with reusable components used by resource/component browsers",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -21,13 +21,13 @@
     "react-stately": "3.21.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.0.0-rc.4",
-    "@storybook/addon-interactions": "7.0.0-rc.4",
-    "@storybook/addon-links": "7.0.0-rc.4",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-styling": "1.0.1",
-    "@storybook/blocks": "7.0.0-rc.4",
-    "@storybook/react": "7.0.0-rc.4",
-    "@storybook/react-vite": "7.0.0-rc.4",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "0.0.14-next.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
@@ -49,11 +49,11 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "4.1.2",
-    "storybook": "7.0.0-rc.4",
+    "storybook": "^7.5.3",
     "tailwindcss": "3.3.1",
     "ts-jest": "29.0.5",
     "typescript": "4.9.3",
-    "vite": "4.2.0"
+    "vite": "^4.5.0"
   },
   "peerDependencies": {
     "@types/react": "^16.14.0 || ^17 || ^18",
@@ -72,5 +72,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "612c5b93f4c427865ea0d2da8b46111da78bb90c"
+  "gitHead": "3dcc1ab830dd1b1b101563f0622fc06b4184caf8"
 }

package/src/Modal/Modal.tsx

@@ -21,7 +21,7 @@ function ModalContent({
     <div
       {...dialogProps}
       ref={ref}
-      className="z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg outline-0"
+      className="z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-9rem)] w-screen max-w-[50rem] outline-0"
     >
       {children(titleProps)}
     </div>

package/src/PreviewPanel/PreviewPanel.tsx

@@ -45,7 +45,7 @@ export const PreviewPanel = function ({
         <button
           type="button"
           onClick={() => onSelect(resource)}
-          className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5"
+          className="rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5 font-bold"
         >
           Select
         </button>

package/tailwind.config.cjs

@@ -32,9 +32,6 @@ module.exports = {
         'heading-3': ['1.125rem', '1.375rem'],
         'heading-4': ['1rem', '1.25rem'],
       },
-      fontFamily: {
-        base: 'Open Sans, Arial, sans-serif',
-      },
       boxShadow: {
         outline: '0 0 0 1px rgba(0,0,0,0.10)',
         sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',