@asante-org/atlascopco-vt-litesitegenerator 3.6.18 → 3.6.21

package/dist/index.esm.scss

@@ -3596,6 +3596,90 @@
   display: block;
 }
 
+.table-focus,
+.table-focus * {
+  box-sizing: border-box;
+}
+
+.table-focus {
+  --lsg-table-background-color: var(--lsg-color-primary);
+  --lsg-table-accent-color: var(--lsg-color-black);
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  color: var(--lsg-table-accent-color);
+  font-family: var(--lsg-font-family-primary);
+}
+.table-focus.background-color-white {
+  --lsg-table-background-color: var(--lsg-color-white);
+}
+.table-focus.accent-color-white {
+  --lsg-table-accent-color: var(--lsg-color-white);
+}
+.table-focus.background-color-black {
+  --lsg-table-background-color: var(--lsg-color-black);
+}
+.table-focus.accent-color-black {
+  --lsg-table-accent-color: var(--lsg-color-black);
+}
+.table-focus.background-color-primary {
+  --lsg-table-background-color: var(--lsg-color-primary);
+}
+.table-focus.accent-color-primary {
+  --lsg-table-accent-color: var(--lsg-color-primary);
+}
+.table-focus.background-color-secondary {
+  --lsg-table-background-color: var(--lsg-color-secondary);
+}
+.table-focus.accent-color-secondary {
+  --lsg-table-accent-color: var(--lsg-color-secondary);
+}
+.table-focus.background-color-tertiary {
+  --lsg-table-background-color: var(--lsg-color-tertiary);
+}
+.table-focus.accent-color-tertiary {
+  --lsg-table-accent-color: var(--lsg-color-tertiary);
+}
+.table-focus.background-color-light {
+  --lsg-table-background-color: var(--lsg-color-light);
+}
+.table-focus.accent-color-light {
+  --lsg-table-accent-color: var(--lsg-color-light);
+}
+.table-focus.background-color-dark {
+  --lsg-table-background-color: var(--lsg-color-dark);
+}
+.table-focus.accent-color-dark {
+  --lsg-table-accent-color: var(--lsg-color-dark);
+}
+.table-focus table {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.table-focus tr,
+.table-focus td,
+.table-focus th {
+  border: 0;
+}
+.table-focus td,
+.table-focus th {
+  vertical-align: middle;
+  word-break: break-word;
+}
+.table-focus p {
+  margin: 0;
+}
+
+.table-caption {
+  font-family: var(--lsg-font-family-primary);
+}
+
 .lsg-video {
   position: relative;
   width: 100%;
@@ -8819,6 +8903,89 @@
 .lsg-tabs[data-panelcontainer] .lsg-tabs__panel.cmp-tabs__tabpanel--active {
   display: block;
 }
+.table-focus,
+.table-focus * {
+  box-sizing: border-box;
+}
+
+.table-focus {
+  --lsg-table-background-color: var(--lsg-color-primary);
+  --lsg-table-accent-color: var(--lsg-color-black);
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  color: var(--lsg-table-accent-color);
+  font-family: var(--lsg-font-family-primary);
+}
+.table-focus.background-color-white {
+  --lsg-table-background-color: var(--lsg-color-white);
+}
+.table-focus.accent-color-white {
+  --lsg-table-accent-color: var(--lsg-color-white);
+}
+.table-focus.background-color-black {
+  --lsg-table-background-color: var(--lsg-color-black);
+}
+.table-focus.accent-color-black {
+  --lsg-table-accent-color: var(--lsg-color-black);
+}
+.table-focus.background-color-primary {
+  --lsg-table-background-color: var(--lsg-color-primary);
+}
+.table-focus.accent-color-primary {
+  --lsg-table-accent-color: var(--lsg-color-primary);
+}
+.table-focus.background-color-secondary {
+  --lsg-table-background-color: var(--lsg-color-secondary);
+}
+.table-focus.accent-color-secondary {
+  --lsg-table-accent-color: var(--lsg-color-secondary);
+}
+.table-focus.background-color-tertiary {
+  --lsg-table-background-color: var(--lsg-color-tertiary);
+}
+.table-focus.accent-color-tertiary {
+  --lsg-table-accent-color: var(--lsg-color-tertiary);
+}
+.table-focus.background-color-light {
+  --lsg-table-background-color: var(--lsg-color-light);
+}
+.table-focus.accent-color-light {
+  --lsg-table-accent-color: var(--lsg-color-light);
+}
+.table-focus.background-color-dark {
+  --lsg-table-background-color: var(--lsg-color-dark);
+}
+.table-focus.accent-color-dark {
+  --lsg-table-accent-color: var(--lsg-color-dark);
+}
+.table-focus table {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.table-focus tr,
+.table-focus td,
+.table-focus th {
+  border: 0;
+}
+.table-focus td,
+.table-focus th {
+  vertical-align: middle;
+  word-break: break-word;
+}
+.table-focus p {
+  margin: 0;
+}
+
+.table-caption {
+  font-family: var(--lsg-font-family-primary);
+}
 .cmp-vtba-form__field {
   display: flex;
   flex-direction: column;

package/dist/index.js

@@ -4546,6 +4546,43 @@ var LsgTabs = function (_a) {
   }));
 };
 
+/**
+ * Storybook representation of the AEM LSG table markup.
+ * It deliberately emits the same Style System class contract as AEM.
+ */
+var LsgTable = function (_a) {
+  var headers = _a.headers,
+    rows = _a.rows,
+    _b = _a.headerBackground,
+    headerBackground = _b === void 0 ? "primary" : _b,
+    _c = _a.accentColors,
+    accentColors = _c === void 0 ? "black" : _c,
+    _d = _a.noAlternatingRows,
+    noAlternatingRows = _d === void 0 ? false : _d,
+    caption = _a.caption,
+    id = _a.id,
+    className = _a.className;
+  var wrapperClassName = ["table-focus", "background-color-".concat(headerBackground), "accent-color-".concat(accentColors), "no-alternating-rows-".concat(noAlternatingRows), className].filter(Boolean).join(" ");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, headers.map(function (cell, index) {
+    return /*#__PURE__*/React.createElement("td", {
+      key: "header-".concat(index)
+    }, cell);
+  })), rows.map(function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: "row-".concat(rowIndex)
+    }, row.map(function (cell, cellIndex) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: "cell-".concat(rowIndex, "-").concat(cellIndex)
+      }, cell);
+    }));
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "table-caption"
+  }, caption));
+};
+
 var LsgFormFieldText = function (_a) {
   var _b = _a.id,
     id = _b === void 0 ? "field-text" : _b,
@@ -5306,6 +5343,7 @@ var BASE_COMPONENTS = {
   LsgFooter: LsgFooter,
   LsgHero: LsgHero,
   LsgTabs: LsgTabs,
+  LsgTable: LsgTable,
   LsgFormContainer: LsgFormContainer,
   LsgFormFieldText: LsgFormFieldText,
   LsgFormFieldEmail: LsgFormFieldEmail,
@@ -5354,7 +5392,8 @@ function createThemeComponents(themeName) {
     LsgFormFieldConsent: createThemeComponent(themeName, "form-field-consent", BASE_COMPONENTS.LsgFormFieldConsent),
     LsgFormPolicyNotice: createThemeComponent(themeName, "form-policy-notice", BASE_COMPONENTS.LsgFormPolicyNotice),
     LsgFormStep: createThemeComponent(themeName, "form-step", BASE_COMPONENTS.LsgFormStep),
-    LsgTabs: createThemeComponent(themeName, "tabs", BASE_COMPONENTS.LsgTabs)
+    LsgTabs: createThemeComponent(themeName, "tabs", BASE_COMPONENTS.LsgTabs),
+    LsgTable: createThemeComponent(themeName, "table", BASE_COMPONENTS.LsgTable)
   };
 }
 
@@ -5376,6 +5415,7 @@ var Theme1LsgButton = theme1Components.LsgButton,
   Theme1LsgFooter = theme1Components.LsgFooter,
   Theme1LsgHero = theme1Components.LsgHero;
   theme1Components.LsgTabs;
+  var Theme1LsgTable = theme1Components.LsgTable;
   // Form components
   theme1Components.LsgFormContainer;
   theme1Components.LsgFormFieldText;
@@ -5404,7 +5444,8 @@ var Theme2LsgButton = theme2Components.LsgButton,
   Theme2LsgQuickLinks = theme2Components.LsgQuickLinks,
   Theme2LsgSocialMediaIcons = theme2Components.LsgSocialMediaIcons,
   Theme2LsgFooter = theme2Components.LsgFooter,
-  Theme2LsgHero = theme2Components.LsgHero;
+  Theme2LsgHero = theme2Components.LsgHero,
+  Theme2LsgTable = theme2Components.LsgTable;
   // Form components
   theme2Components.LsgFormContainer;
   theme2Components.LsgFormFieldText;
@@ -5432,7 +5473,8 @@ var Theme3LsgButton = theme3Components.LsgButton,
   Theme3LsgQuickLinks = theme3Components.LsgQuickLinks,
   Theme3LsgSocialMediaIcons = theme3Components.LsgSocialMediaIcons,
   Theme3LsgFooter = theme3Components.LsgFooter,
-  Theme3LsgHero = theme3Components.LsgHero;
+  Theme3LsgHero = theme3Components.LsgHero,
+  Theme3LsgTable = theme3Components.LsgTable;
   // Form components
   theme3Components.LsgFormContainer;
   theme3Components.LsgFormFieldText;
@@ -5463,6 +5505,7 @@ exports.LsgQuickLinks = LsgQuickLinks;
 exports.LsgSearchOverlay = LsgSearchOverlay;
 exports.LsgSearchTrigger = LsgSearchTrigger;
 exports.LsgSocialMediaIcons = LsgSocialMediaIcons;
+exports.LsgTable = LsgTable;
 exports.Theme1LsgBanner = Theme1LsgBanner;
 exports.Theme1LsgBreadcrumb = Theme1LsgBreadcrumb;
 exports.Theme1LsgButton = Theme1LsgButton;
@@ -5479,6 +5522,7 @@ exports.Theme1LsgQuickLinks = Theme1LsgQuickLinks;
 exports.Theme1LsgSearchOverlay = Theme1LsgSearchOverlay;
 exports.Theme1LsgSearchTrigger = Theme1LsgSearchTrigger;
 exports.Theme1LsgSocialMediaIcons = Theme1LsgSocialMediaIcons;
+exports.Theme1LsgTable = Theme1LsgTable;
 exports.Theme2LsgBanner = Theme2LsgBanner;
 exports.Theme2LsgBreadcrumb = Theme2LsgBreadcrumb;
 exports.Theme2LsgButton = Theme2LsgButton;
@@ -5495,6 +5539,7 @@ exports.Theme2LsgQuickLinks = Theme2LsgQuickLinks;
 exports.Theme2LsgSearchOverlay = Theme2LsgSearchOverlay;
 exports.Theme2LsgSearchTrigger = Theme2LsgSearchTrigger;
 exports.Theme2LsgSocialMediaIcons = Theme2LsgSocialMediaIcons;
+exports.Theme2LsgTable = Theme2LsgTable;
 exports.Theme3LsgBanner = Theme3LsgBanner;
 exports.Theme3LsgBreadcrumb = Theme3LsgBreadcrumb;
 exports.Theme3LsgButton = Theme3LsgButton;
@@ -5511,6 +5556,7 @@ exports.Theme3LsgQuickLinks = Theme3LsgQuickLinks;
 exports.Theme3LsgSearchOverlay = Theme3LsgSearchOverlay;
 exports.Theme3LsgSearchTrigger = Theme3LsgSearchTrigger;
 exports.Theme3LsgSocialMediaIcons = Theme3LsgSocialMediaIcons;
+exports.Theme3LsgTable = Theme3LsgTable;
 exports.getTelValue = getTelValue;
 exports.initTelPickers = initTelPickers;
 exports.theme1Components = theme1Components;