@canonical/react-components 2.16.0 → 3.0.0

package/dist/components/LoginPageLayout/LoginPageLayout.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Card = _interopRequireDefault(require("../Card"));
 var _Col = _interopRequireDefault(require("../Col"));
 var _Navigation = _interopRequireDefault(require("../Navigation"));
 var _Row = _interopRequireDefault(require("../Row"));
 var _enums = require("../../enums");
 require("./LoginPageLayout.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const defaultLogo = {
   src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
@@ -30,20 +28,6 @@ const LoginPageLayout = _ref => {
     title,
     logo = defaultLogo
   } = _ref;
-  (0, _react.useLayoutEffect)(() => {
-    var _document$querySelect;
-    const bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
-    if (!bodyInitiallyContainsIsPaper) {
-      var _document$querySelect2;
-      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
-    }
-    return () => {
-      if (!bodyInitiallyContainsIsPaper) {
-        var _document$querySelect3;
-        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
-      }
-    };
-  }, []);
   return /*#__PURE__*/_react.default.createElement(_Row.default, {
     className: "p-strip page-row"
   }, /*#__PURE__*/_react.default.createElement(_Col.default, {

package/dist/components/ScrollableTable/ScrollableTable.scss

@@ -45,12 +45,12 @@
         display: block;
       }
 
-      tbody tr {
-        display: block;
+      tbody {
+        display: grid;
       }
 
-      tbody tr:first-child {
-        margin-top: $spv--x-large;
+      tbody tr {
+        display: block;
       }
     }
   }

package/dist/components/ScrollableTable/ScrollableTable.stories.js

@@ -76,6 +76,11 @@ const Responsive = exports.Responsive = {
   parameters: {
     docs: {
       page: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null), /*#__PURE__*/_react.default.createElement(_blocks.Subtitle, null), /*#__PURE__*/_react.default.createElement(_blocks.Description, null))
+    },
+    // Percy settings to capture at multiple widths
+    percy: {
+      responsiveSnapshotCapture: true,
+      widths: [768, 1280]
     }
   }
 };

package/dist/esm/components/LoginPageLayout/LoginPageLayout.js

@@ -1,5 +1,5 @@
 import _pt from "prop-types";
-import React, { useLayoutEffect } from "react";
+import React from "react";
 import Card from "../Card";
 import Col from "../Col";
 import Navigation from "../Navigation";
@@ -21,20 +21,6 @@ var LoginPageLayout = _ref => {
     title,
     logo = defaultLogo
   } = _ref;
-  useLayoutEffect(() => {
-    var _document$querySelect;
-    var bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
-    if (!bodyInitiallyContainsIsPaper) {
-      var _document$querySelect2;
-      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
-    }
-    return () => {
-      if (!bodyInitiallyContainsIsPaper) {
-        var _document$querySelect3;
-        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
-      }
-    };
-  }, []);
   return /*#__PURE__*/React.createElement(Row, {
     className: "p-strip page-row"
   }, /*#__PURE__*/React.createElement(Col, {

package/dist/esm/components/ScrollableTable/ScrollableTable.scss

@@ -45,12 +45,12 @@
         display: block;
       }
 
-      tbody tr {
-        display: block;
+      tbody {
+        display: grid;
       }
 
-      tbody tr:first-child {
-        margin-top: $spv--x-large;
+      tbody tr {
+        display: block;
       }
     }
   }

package/dist/esm/components/ScrollableTable/ScrollableTable.stories.js

@@ -73,6 +73,11 @@ export var Responsive = {
   parameters: {
     docs: {
       page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
+    },
+    // Percy settings to capture at multiple widths
+    percy: {
+      responsiveSnapshotCapture: true,
+      widths: [768, 1280]
     }
   }
 };

package/dist/esm/utils.js

@@ -45,8 +45,7 @@ export var getElementAbsoluteHeight = element => {
   }
   var style = window.getComputedStyle(element);
   var margin = toFloat(style.marginTop) + toFloat(style.marginBottom);
-  var padding = toFloat(style.paddingTop) + toFloat(style.paddingBottom);
-  return element.offsetHeight + margin + padding + 1;
+  return element.offsetHeight + margin + 1;
 };
 export var getAbsoluteHeightBelowById = belowId => {
   var element = belowId ? document.getElementById(belowId) : undefined;

package/dist/utils.js

@@ -55,8 +55,7 @@ const getElementAbsoluteHeight = element => {
   }
   const style = window.getComputedStyle(element);
   const margin = toFloat(style.marginTop) + toFloat(style.marginBottom);
-  const padding = toFloat(style.paddingTop) + toFloat(style.paddingBottom);
-  return element.offsetHeight + margin + padding + 1;
+  return element.offsetHeight + margin + 1;
 };
 exports.getElementAbsoluteHeight = getElementAbsoluteHeight;
 const getAbsoluteHeightBelowById = belowId => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.16.0",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.30.0",
+    "vanilla-framework": "4.32.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },