@canonical/react-components 2.15.0 → 2.15.1

package/dist/components/ScrollableTable/ScrollableTable.scss

@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  @media screen and (max-width: $breakpoint-large) {
+  @media screen and (width < $breakpoint-large) {
     .p-table--mobile-card {
       thead {
         display: none;

package/dist/components/ScrollableTable/ScrollableTable.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ScrollableTable>;
 export default meta;
 type Story = StoryObj<typeof ScrollableTable>;
 export declare const Default: Story;
+export declare const Responsive: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Responsive = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ScrollableTable = _interopRequireDefault(require("./ScrollableTable"));
 var _index = require("../../index");
@@ -23,9 +23,6 @@ const StoryExample = args => {
     content: "Size"
   }, {
     content: "ID"
-  }, {
-    "aria-label": "Actions",
-    className: "actions"
   }];
   const facts = ["Dragons are mythical creatures", "They can fly", "They breathe fire", "They hoard treasure", "They are often depicted as large reptiles", "They appear in various cultures' folklore", "They can be friendly or hostile", "They are often associated with wisdom", "They can shapeshift in some legends", "They are sometimes guardians of sacred places", "They can be found in literature and movies", "They are often depicted with wings", "They can be of various colors", "They are sometimes associated with knights"];
   const rows = facts.map(item => {
@@ -49,6 +46,7 @@ const StoryExample = args => {
   }, /*#__PURE__*/_react.default.createElement(_index.MainTable, {
     headers: headers,
     rows: rows,
+    responsive: args["responsive"],
     id: "facts-about-dragons"
   })), /*#__PURE__*/_react.default.createElement("div", {
     id: "footer"
@@ -66,4 +64,18 @@ const Default = exports.Default = {
       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))
     }
   }
+};
+const Responsive = exports.Responsive = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: args => StoryExample({
+    ...args,
+    responsive: true
+  }),
+  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))
+    }
+  }
 };

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

@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  @media screen and (max-width: $breakpoint-large) {
+  @media screen and (width < $breakpoint-large) {
     .p-table--mobile-card {
       thead {
         display: none;

package/dist/esm/components/ScrollableTable/ScrollableTable.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ScrollableTable>;
 export default meta;
 type Story = StoryObj<typeof ScrollableTable>;
 export declare const Default: Story;
+export declare const Responsive: Story;

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

@@ -1,3 +1,8 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from "react";
 import ScrollableTable from "./ScrollableTable";
 import { MainTable } from "../../index";
@@ -16,9 +21,6 @@ var StoryExample = args => {
     content: "Size"
   }, {
     content: "ID"
-  }, {
-    "aria-label": "Actions",
-    className: "actions"
   }];
   var facts = ["Dragons are mythical creatures", "They can fly", "They breathe fire", "They hoard treasure", "They are often depicted as large reptiles", "They appear in various cultures' folklore", "They can be friendly or hostile", "They are often associated with wisdom", "They can shapeshift in some legends", "They are sometimes guardians of sacred places", "They can be found in literature and movies", "They are often depicted with wings", "They can be of various colors", "They are sometimes associated with knights"];
   var rows = facts.map(item => {
@@ -42,6 +44,7 @@ var StoryExample = args => {
   }, /*#__PURE__*/React.createElement(MainTable, {
     headers: headers,
     rows: rows,
+    responsive: args["responsive"],
     id: "facts-about-dragons"
   })), /*#__PURE__*/React.createElement("div", {
     id: "footer"
@@ -59,4 +62,17 @@ export var Default = {
       page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
     }
   }
+};
+export var Responsive = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: args => StoryExample(_objectSpread(_objectSpread({}, args), {}, {
+    responsive: true
+  })),
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
+    }
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {