Merge branch 'master' into STRIPES-861

.github/workflows/build-npm-release.yml

@@ -223,6 +223,7 @@ jobs:
 
       - name: Exclude some CI-generated artifacts in package
         run: |
+          echo "artifacts" >> .npmignore
           echo ".github" >> .npmignore
           echo ".scannerwork" >> .npmignore
           cat .npmignore

.github/workflows/build-npm.yml

@@ -167,6 +167,7 @@ jobs:
       - name: Exclude some CI-generated artifacts in package
         if: ${{ github.ref == 'refs/heads/master' || github.ref  == 'refs/heads/main' }}
         run: |
+          echo "artifacts" >> .npmignore
           echo ".github" >> .npmignore
           echo ".scannerwork" >> .npmignore
           cat .npmignore

CHANGELOG.md

@@ -25,6 +25,11 @@
 * Compile translations. Refs STCOM-1162.
 * Return filled rows and query from `useAdvancedSearch` hook. Fixes STCOM-1156.
 * Remove `dom-helpers` dependency. Resolves STCOM-1170.
+* Center MCL prev-next pagination to scrollParent. Resolves STCOM-1158.
+* Add style to `<TextLink>` to account for interactionStyles' `:active` style. Refs STCOM-1159.
+* Upgrade `postcss-calc` from v8 to v9.0.1. Refs STCOM-1174.
+* Upgrade `react-transition-group` from 2.9.0 to 4.4.5. Refs STCOM-1175.
+* Expand options of MetaSection component. Refs STCOM-1171.
 
 ## [11.0.0](https://github.com/folio-org/stripes-components/tree/v11.0.0) (2023-01-30)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v10.3.0...v11.0.0)

lib/MetaSection/MetaSection.css

@@ -2,12 +2,15 @@
 
 .metaSectionRoot {
   border-radius: var(--radius);
-  background-color: var(--color-fill);
   margin-bottom: 10px;
   font-size: var(--font-size-small);
   line-height: var(--line-height);
 }
 
+.metaSectionRootBGColor {
+  background-color: var(--color-fill);
+}
+
 .metaSectionContent {
   margin-top: -0.5rem;
   padding: 0.5rem 0 0.5rem 0.33rem;
@@ -55,3 +58,7 @@
   user-select: none;
   padding: 0 4px;
 }
+
+.metaSectionInline {
+  display: flex;
+}

lib/MetaSection/MetaSection.js

@@ -27,6 +27,7 @@ const propTypes = {
   headingLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   hideSource: PropTypes.bool,
   id: PropTypes.string,
+  inlineLayout: PropTypes.bool,
   lastUpdatedBy: PropTypes.oneOfType([
     PropTypes.shape({
       id: PropTypes.string,
@@ -39,13 +40,16 @@ const propTypes = {
     PropTypes.node, // Passing a node will _not_ render a link to the user record
   ]),
   lastUpdatedDate: PropTypes.string,
+  noBackGround: PropTypes.bool,
   showUserLink: PropTypes.bool,
+  useAccordion: PropTypes.bool,
 };
 
 const defaultProps = {
   hideSource: false,
   showUserLink: false,
-  headingLevel: 4
+  headingLevel: 4,
+  useAccordion: true,
 };
 
 class MetaSection extends React.Component {
@@ -71,27 +75,16 @@ class MetaSection extends React.Component {
     }
   }
 
-  render() {
+  renderMetaSectionWithinAccordion = () => {
     const {
+      headingLevel,
       createdBy,
       createdDate,
-      headingLevel,
       hideSource,
       lastUpdatedBy,
       lastUpdatedDate,
     } = this.props;
 
-    const lastUpdatedLabel = lastUpdatedDate ?
-      <FormattedMessage
-        id="stripes-components.metaSection.recordLastUpdated"
-        values={{
-          date: <FormattedDate value={lastUpdatedDate} />,
-          time: <FormattedTime value={lastUpdatedDate} />,
-        }}
-      />
-      :
-      <FormattedMessage id="stripes-components.metaSection.recordLastUpdatedNoData" />;
-
     const lastUpdatedByLabel = lastUpdatedBy ?
       <FormattedMessage
         id="stripes-components.metaSection.source"
@@ -119,36 +112,108 @@ class MetaSection extends React.Component {
       :
       <FormattedMessage id="stripes-components.metaSection.sourceNoData" />;
 
+    const lastUpdatedLabel = lastUpdatedDate ?
+      <FormattedMessage
+        id="stripes-components.metaSection.recordLastUpdated"
+        values={{
+          date: <FormattedDate value={lastUpdatedDate} />,
+          time: <FormattedTime value={lastUpdatedDate} />,
+        }}
+      />
+      :
+      <FormattedMessage id="stripes-components.metaSection.recordLastUpdatedNoData" />;
+
     return (
-      <div className={css.metaSectionRoot} data-test-meta-section>
-        <Accordion
-          header={MetaAccordionHeader}
-          headerProps={{
-            headingLevel
-          }}
-          closedByDefault
-          id={this.props.id}
-          contentId={this.props.contentId}
-          label={lastUpdatedLabel}
-        >
-          <div className={css.metaSectionContent}>
+      <Accordion
+        header={MetaAccordionHeader}
+        headerProps={{ headingLevel }}
+        closedByDefault
+        id={this.props.id}
+        contentId={this.props.contentId}
+        label={lastUpdatedLabel}
+      >
+        <div className={css.metaSectionContent}>
+          {!hideSource &&
+          <div className={css.metaSectionContentBlock} data-test-updated-by>
+            {lastUpdatedByLabel}
+          </div>
+        }
+          <div className={css.metaSectionGroup}>
+            <div className={css.metaSectionContentBlock} data-test-created>
+              {createdLabel}
+            </div>
             {!hideSource &&
-              <div className={css.metaSectionContentBlock} data-test-updated-by>
-                {lastUpdatedByLabel}
-              </div>
-            }
-            <div className={css.metaSectionGroup}>
-              <div className={css.metaSectionContentBlock} data-test-created>
-                {createdLabel}
-              </div>
-              {!hideSource &&
-                <div className={css.metaSectionContentBlock} data-test-created-by>
-                  {createdByLabel}
-                </div>
-              }
+            <div className={css.metaSectionContentBlock} data-test-created-by>
+              {createdByLabel}
             </div>
+          }
           </div>
-        </Accordion>
+        </div>
+      </Accordion>
+    );
+  }
+
+  renderMetaSection = () => {
+    const {
+      hideSource,
+      inlineLayout,
+      lastUpdatedBy,
+      lastUpdatedDate,
+    } = this.props;
+
+    return (
+      <div
+        className={`${css.metaSectionContent} ${inlineLayout && css.metaSectionInline}`}
+        data-test-meta-section-content
+      >
+        <div style={{ marginRight: '5px' }}>
+          <FormattedMessage id="stripes-components.metaSection.lastUpdated" />
+        </div>
+        <div style={{ display: 'flex' }}>
+          <div style={{ marginRight: '5px' }}>
+            <FormattedMessage
+              id="stripes-components.metaSection.lastUpdatedDateTime"
+              values={{
+                date: <FormattedDate value={lastUpdatedDate} />,
+                time: <FormattedTime value={lastUpdatedDate} />,
+              }}
+            />
+          </div>
+          <div data-test-updated-by>
+            {
+            !hideSource && (
+              <FormattedMessage
+                id="stripes-components.metaSection.lastUpdatedBy"
+                values={{
+                  source: lastUpdatedBy ? this.renderUser(lastUpdatedBy) :
+                  <FormattedMessage
+                    id="stripes-components.metaSection.unknownUser"
+                  />
+                }}
+              />
+            )
+          }
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const {
+      noBackGround,
+      useAccordion,
+    } = this.props;
+
+    return (
+      <div
+        className={`${css.metaSectionRoot} ${!noBackGround && css.metaSectionRootBGColor}`}
+        data-test-meta-section
+      >
+        {
+          useAccordion ? this.renderMetaSectionWithinAccordion()
+            : this.renderMetaSection()
+        }
       </div>
     );
   }

lib/MetaSection/tests/MetaSection.test.js

@@ -4,12 +4,25 @@
 
 import React from 'react';
 import { describe, beforeEach, it } from 'mocha';
+import { expect } from 'chai';
 import { StaticRouter } from 'react-router'; /* eslint-disable-line import/no-extraneous-dependencies */
-import { including, not, MetaSection as MetaSectionInteractor } from '@folio/stripes-testing';
+import { including, not, HTML, MetaSection as MetaSectionInteractor } from '@folio/stripes-testing';
 
 import { mountWithContext } from '../../../tests/helpers';
 
 import MetaSection from '../MetaSection';
+import css from '../MetaSection.css';
+
+const MetaSectionContentInteractor = HTML.extend('div')
+  .selector('[data-test-meta-section-content]');
+
+const MetaSectionRootInteractor = HTML.extend('div')
+  .selector('[data-test-meta-section]')
+  .filters({
+    metaSectionAccordion: el => el.querySelector('[data-test-accordion-section]'),
+    metaSectionContent: el => el.querySelector('[data-test-meta-section-content]'),
+    className: (el) => [...el.classList].join(' '),
+  });
 
 describe('MetaSection', () => {
   const metaSection = MetaSectionInteractor();
@@ -212,4 +225,88 @@ describe('MetaSection', () => {
     it('Should not render updatedBy field',
       () => metaSection.has({ updatedByText: undefined }));
   });
+
+  describe('when useAccordion prop is false', () => {
+    const metaSectionContent = new MetaSectionContentInteractor();
+    const metaSectionRootInteractor = new MetaSectionRootInteractor();
+    beforeEach(async () => {
+      await mountWithContext(
+        <MetaSection
+          id="id"
+          lastUpdatedDate="2021-07-08T00:00:00Z"
+          useAccordion={false}
+          inlineLayout
+          noBackGround={false}
+        />
+      );
+    });
+
+    it('should not render accordion', async () => {
+      await metaSectionRootInteractor.has({ metaSectionAccordion: null });
+    });
+
+    describe('when inlineLayout prop is true', () => {
+      beforeEach(async () => {
+        await mountWithContext(
+          <MetaSection
+            lastUpdatedDate="2021-07-08T00:00:00Z"
+            useAccordion={false}
+            inlineLayout
+          />
+        );
+      });
+
+      it('should render meta section with inline layout', async () => {
+        await metaSectionContent.perform((e) => expect(e.classList.contains(css.metaSectionInline)).to.be.true);
+      });
+    });
+
+    describe('when inlineLayout prop is false', () => {
+      beforeEach(async () => {
+        await mountWithContext(
+          <MetaSection
+            lastUpdatedDate="2021-07-08T00:00:00Z"
+            useAccordion={false}
+            inlineLayout={false}
+          />
+        );
+      });
+
+      it('should render meta section with inline layout', async () => {
+        await metaSectionContent.perform((e) => expect(e.classList.contains(css.metaSectionInline)).to.be.false);
+      });
+    });
+
+    describe('when noBackGround prop is false', () => {
+      beforeEach(async () => {
+        await mountWithContext(
+          <MetaSection
+            lastUpdatedDate="2021-07-08T00:00:00Z"
+            useAccordion={false}
+            noBackGround={false}
+          />
+        );
+      });
+
+      it('should render meta section with background', async () => {
+        await metaSectionRootInteractor.has({ metaSectionContent: not(undefined), className: including(css.metaSectionRootBGColor) });
+      });
+    });
+
+    describe('when noBackGround prop is true', () => {
+      beforeEach(async () => {
+        await mountWithContext(
+          <MetaSection
+            lastUpdatedDate="2021-07-08T00:00:00Z"
+            useAccordion={false}
+            noBackGround
+          />
+        );
+      });
+
+      it('should render meta section without background', async () => {
+        await metaSectionContent.perform((e) => expect(e.classList.contains(css.metaSectionRootBGColor)).to.be.false);
+      });
+    });
+  });
 });