@openedx/paragon 22.0.0-alpha.17 → 22.0.0-alpha.19

package/dist/DataTable/RowStatus.js

@@ -10,10 +10,15 @@ function RowStatus(_ref) {
   const {
     page,
     rows,
-    itemCount
+    itemCount,
+    state
   } = useContext(DataTableContext);
-  const pageSize = page?.length || rows?.length;
-  if (!pageSize) {
+  const rowCount = page?.length || rows?.length;
+  const pageSize = state?.pageSize || 0;
+  const pageIndex = state?.pageIndex || 0;
+  const firstRow = pageSize * pageIndex + 1;
+  const lastRow = firstRow + rowCount - 1;
+  if (!rowCount) {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -21,11 +26,12 @@ function RowStatus(_ref) {
     "data-testid": "row-status"
   }, statusText || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "pgn.DataTable.RowStatus.statusText",
-    defaultMessage: "Showing {pageSize} of {itemCount}.",
+    defaultMessage: "Showing {firstRow} - {lastRow} of {itemCount}.",
     description: "A text describing how many rows is shown in the table",
     values: {
       itemCount,
-      pageSize
+      firstRow,
+      lastRow
     }
   }));
 }

package/dist/DataTable/RowStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowStatus.js","names":["React","useContext","PropTypes","FormattedMessage","DataTableContext","RowStatus","_ref","className","statusText","page","rows","itemCount","pageSize","length","createElement","id","defaultMessage","description","values","propTypes","string","oneOfType","element","defaultProps","undefined"],"sources":["../../src/DataTable/RowStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport DataTableContext from './DataTableContext';\n\nfunction RowStatus({ className, statusText }) {\n  const { page, rows, itemCount } = useContext(DataTableContext);\n  const pageSize = page?.length || rows?.length;\n\n  if (!pageSize) {\n    return null;\n  }\n  return (\n    <div className={className} data-testid=\"row-status\">\n      {statusText || (\n        <FormattedMessage\n          id=\"pgn.DataTable.RowStatus.statusText\"\n          defaultMessage=\"Showing {pageSize} of {itemCount}.\"\n          description=\"A text describing how many rows is shown in the table\"\n          values={{ itemCount, pageSize }}\n        />\n      )}\n    </div>\n  );\n}\n\nRowStatus.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** A text describing how many rows is shown in the table. */\n  statusText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nRowStatus.defaultProps = {\n  className: undefined,\n  statusText: undefined,\n};\n\nexport default RowStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,SAASC,SAASA,CAAAC,IAAA,EAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAC1C,MAAM;IAAEG,IAAI;IAAEC,IAAI;IAAEC;EAAU,CAAC,GAAGV,UAAU,CAACG,gBAAgB,CAAC;EAC9D,MAAMQ,QAAQ,GAAGH,IAAI,EAAEI,MAAM,IAAIH,IAAI,EAAEG,MAAM;EAE7C,IAAI,CAACD,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EACA,oBACEZ,KAAA,CAAAc,aAAA;IAAKP,SAAS,EAAEA,SAAU;IAAC,eAAY;EAAY,GAChDC,UAAU,iBACTR,KAAA,CAAAc,aAAA,CAACX,gBAAgB;IACfY,EAAE,EAAC,oCAAoC;IACvCC,cAAc,EAAC,oCAAoC;IACnDC,WAAW,EAAC,uDAAuD;IACnEC,MAAM,EAAE;MAAEP,SAAS;MAAEC;IAAS;EAAE,CACjC,CAEA,CAAC;AAEV;AAEAP,SAAS,CAACc,SAAS,GAAG;EACpB;EACAZ,SAAS,EAAEL,SAAS,CAACkB,MAAM;EAC3B;EACAZ,UAAU,EAAEN,SAAS,CAACmB,SAAS,CAAC,CAACnB,SAAS,CAACkB,MAAM,EAAElB,SAAS,CAACoB,OAAO,CAAC;AACvE,CAAC;AAEDjB,SAAS,CAACkB,YAAY,GAAG;EACvBhB,SAAS,EAAEiB,SAAS;EACpBhB,UAAU,EAAEgB;AACd,CAAC;AAED,eAAenB,SAAS"}
+{"version":3,"file":"RowStatus.js","names":["React","useContext","PropTypes","FormattedMessage","DataTableContext","RowStatus","_ref","className","statusText","page","rows","itemCount","state","rowCount","length","pageSize","pageIndex","firstRow","lastRow","createElement","id","defaultMessage","description","values","propTypes","string","oneOfType","element","defaultProps","undefined"],"sources":["../../src/DataTable/RowStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport DataTableContext from './DataTableContext';\n\nfunction RowStatus({ className, statusText }) {\n  const {\n    page, rows, itemCount, state,\n  } = useContext(DataTableContext);\n  const rowCount = page?.length || rows?.length;\n  const pageSize = state?.pageSize || 0;\n  const pageIndex = state?.pageIndex || 0;\n  const firstRow = pageSize * pageIndex + 1;\n  const lastRow = firstRow + rowCount - 1;\n\n  if (!rowCount) {\n    return null;\n  }\n  return (\n    <div className={className} data-testid=\"row-status\">\n      {statusText || (\n        <FormattedMessage\n          id=\"pgn.DataTable.RowStatus.statusText\"\n          defaultMessage=\"Showing {firstRow} - {lastRow} of {itemCount}.\"\n          description=\"A text describing how many rows is shown in the table\"\n          values={{ itemCount, firstRow, lastRow }}\n        />\n      )}\n    </div>\n  );\n}\n\nRowStatus.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** A text describing how many rows is shown in the table. */\n  statusText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nRowStatus.defaultProps = {\n  className: undefined,\n  statusText: undefined,\n};\n\nexport default RowStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,SAASC,SAASA,CAAAC,IAAA,EAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAW,CAAC,GAAAF,IAAA;EAC1C,MAAM;IACJG,IAAI;IAAEC,IAAI;IAAEC,SAAS;IAAEC;EACzB,CAAC,GAAGX,UAAU,CAACG,gBAAgB,CAAC;EAChC,MAAMS,QAAQ,GAAGJ,IAAI,EAAEK,MAAM,IAAIJ,IAAI,EAAEI,MAAM;EAC7C,MAAMC,QAAQ,GAAGH,KAAK,EAAEG,QAAQ,IAAI,CAAC;EACrC,MAAMC,SAAS,GAAGJ,KAAK,EAAEI,SAAS,IAAI,CAAC;EACvC,MAAMC,QAAQ,GAAGF,QAAQ,GAAGC,SAAS,GAAG,CAAC;EACzC,MAAME,OAAO,GAAGD,QAAQ,GAAGJ,QAAQ,GAAG,CAAC;EAEvC,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EACA,oBACEb,KAAA,CAAAmB,aAAA;IAAKZ,SAAS,EAAEA,SAAU;IAAC,eAAY;EAAY,GAChDC,UAAU,iBACTR,KAAA,CAAAmB,aAAA,CAAChB,gBAAgB;IACfiB,EAAE,EAAC,oCAAoC;IACvCC,cAAc,EAAC,gDAAgD;IAC/DC,WAAW,EAAC,uDAAuD;IACnEC,MAAM,EAAE;MAAEZ,SAAS;MAAEM,QAAQ;MAAEC;IAAQ;EAAE,CAC1C,CAEA,CAAC;AAEV;AAEAb,SAAS,CAACmB,SAAS,GAAG;EACpB;EACAjB,SAAS,EAAEL,SAAS,CAACuB,MAAM;EAC3B;EACAjB,UAAU,EAAEN,SAAS,CAACwB,SAAS,CAAC,CAACxB,SAAS,CAACuB,MAAM,EAAEvB,SAAS,CAACyB,OAAO,CAAC;AACvE,CAAC;AAEDtB,SAAS,CAACuB,YAAY,GAAG;EACvBrB,SAAS,EAAEsB,SAAS;EACpBrB,UAAU,EAAEqB;AACd,CAAC;AAED,eAAexB,SAAS"}

package/dist/Dropzone/index.scss

@@ -8,20 +8,27 @@
   box-sizing: border-box;
   cursor: pointer;
 
+  &:hover,
+  &:focus,
+  &.pgn__dropzone-validation-error,
+  &.pgn__dropzone-active {
+    border-color: transparent;
+  }
+
   &:hover {
-    border: var(--pgn-spacing-dropzone-border-hover) solid var(--pgn-color-dropzone-border-hover);
+    box-shadow: var(--pgn-elevation-dropzone-hover);
   }
 
   &:focus {
-    border: var(--pgn-spacing-dropzone-border-focus) solid var(--pgn-color-dropzone-border-focus);
+    box-shadow: var(--pgn-elevation-dropzone-focus);
   }
 
   &.pgn__dropzone-validation-error {
-    border: var(--pgn-spacing-dropzone-border-error) solid var(--pgn-color-dropzone-border-error);
+    box-shadow: var(--pgn-elevation-dropzone-error);
   }
 
   &.pgn__dropzone-active {
-    border: var(--pgn-spacing-dropzone-border-active) solid var(--pgn-color-dropzone-border-active);
+    box-shadow: var(--pgn-elevation-dropzone-active);
   }
 }
 

package/dist/Form/_index.scss

@@ -42,6 +42,20 @@
   flex-grow: 1;
   align-items: flex-start;
 
+  textarea {
+    &.form-control {
+      min-height: var(--pgn-size-form-input-height-base);
+    }
+
+    &.form-control-lg {
+      min-height: var(--pgn-size-form-input-height-lg);
+    }
+
+    &.form-control-sm {
+      min-height: var(--pgn-size-form-input-height-sm);
+    }
+  }
+
   @media (--pgn-size-breakpoint-min-width-sm) {
     margin-inline-end: var(--pgn-spacing-form-control-gutter);
   }

package/dist/light.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 20:38:34 GMT
+ * Generated on Wed, 06 Dec 2023 09:28:09 GMT
  */
 
 :root {
@@ -922,7 +922,6 @@
   --pgn-color-form-input-border: var(--pgn-color-gray-500);
   --pgn-color-form-input-plaintext: var(--pgn-color-body-base);
   --pgn-color-form-input-placeholder: var(--pgn-color-gray-500);
-  --pgn-color-dropzone-border-active: var(--pgn-color-primary-500);
   --pgn-color-dropzone-border-base: var(--pgn-color-gray-500);
   --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500);
   --pgn-color-dropdown-link-active-base: var(--pgn-color-active);
@@ -1131,6 +1130,7 @@
   --pgn-color-bg-active: var(--pgn-color-primary-500);
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
   --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
   --pgn-color-action-default-danger-900: #60161DFF;
@@ -1264,9 +1264,6 @@
   --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base);
   --pgn-color-form-input-focus-border: var(--pgn-color-input-focus);
   --pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border);
-  --pgn-color-dropzone-border-error: var(--pgn-color-danger-300);
-  --pgn-color-dropzone-border-focus: var(--pgn-color-info-300);
-  --pgn-color-dropzone-border-hover: var(--pgn-color-info-300);
   --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500);
   --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled);
   --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active);
@@ -1471,6 +1468,9 @@
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
+  --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
+  --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
+  --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300);
   --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
   --pgn-color-pagination-text-base: var(--pgn-color-link-base);
   --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover);