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

package/dist/theme-urls.json

@@ -1,11 +1,5 @@
 {
   "themeUrls": {
-    "core": {
-      "paths": {
-        "default": "./core.css",
-        "minified": "./core.min.css"
-      }
-    },
     "defaults": {
       "light": "light"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.17",
+  "version": "22.0.0-alpha.19",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Avatar/README.md

@@ -5,7 +5,6 @@ components:
 - Avatar
 categories:
 - Imagery & Iconography
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

package/src/DataTable/RowStatus.jsx

@@ -4,10 +4,16 @@ import { FormattedMessage } from 'react-intl';
 import DataTableContext from './DataTableContext';
 
 function RowStatus({ className, statusText }) {
-  const { page, rows, itemCount } = useContext(DataTableContext);
-  const pageSize = page?.length || rows?.length;
+  const {
+    page, rows, itemCount, state,
+  } = useContext(DataTableContext);
+  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 (!pageSize) {
+  if (!rowCount) {
     return null;
   }
   return (
@@ -15,9 +21,9 @@ function RowStatus({ className, statusText }) {
       {statusText || (
         <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 }}
+          values={{ itemCount, firstRow, lastRow }}
         />
       )}
     </div>

package/src/DataTable/tests/DataTable.test.jsx

@@ -135,7 +135,7 @@ describe('<DataTable />', () => {
   it('displays a control bar', () => {
     render(<DataTableWrapper {...props} />);
     expect(screen.getByTestId('table-control-bar')).toBeInTheDocument();
-    expect(screen.getAllByText('Showing 7 of 7.')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Showing 1 - 7 of 7.')[0]).toBeInTheDocument();
   });
 
   it('displays a table', () => {

package/src/DataTable/tests/RowStatus.test.jsx

@@ -32,13 +32,13 @@ describe('<RowStatus />', () => {
   it('displays the row status with pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, page: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('displays the row status without pagination', () => {
     const pageSize = 10;
     const { getByText } = render(<RowStatusWrapper value={{ ...instance, rows: Array(pageSize) }} />);
-    const statusText = getByText(`Showing ${pageSize} of ${instance.itemCount}.`);
+    const statusText = getByText(`Showing 1 - ${pageSize} of ${instance.itemCount}.`);
     expect(statusText).toBeInTheDocument();
   });
   it('sets class names on the parent', () => {

package/src/DataTable/tests/SmartStatus.test.jsx

@@ -67,13 +67,13 @@ describe('<SmartStatus />', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('Shows the number of items on the page if selection is off and there are no filters', () => {
     const { getByText } = render(
       <SmartStatusWrapper value={instance} />,
     );
-    expect(getByText(`Showing ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
+    expect(getByText(`Showing 1 - ${instance.page.length} of ${itemCount}.`)).toBeInTheDocument();
   });
   it('shows an alternate selection status', () => {
     const altStatusText = 'horses R cool';

package/src/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/src/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/src/Image/README.md

@@ -3,7 +3,6 @@ title: 'Image'
 type: 'component'
 categories:
 - Imagery & Iconography
-- Content
 components:
 - Image
 status: 'Stable'

package/src/SearchField/README.md

@@ -10,7 +10,6 @@ components:
 - SearchFieldSubmitButton
 categories:
 - Forms
-- Navigation
 status: 'Stable'
 designStatus: 'Needs Review'
 devStatus: 'Done'

package/src/SelectableBox/README.md

@@ -6,7 +6,6 @@ components:
 - SelectableBoxSet
 categories:
 - Forms
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'In progress'

package/src/Spinner/README.md

@@ -6,7 +6,6 @@ components:
 - Spinner
 categories:
 - Status & metadata
-- Choreography
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

package/src/Stepper/README.md

@@ -10,7 +10,6 @@ components:
 - StepperHeaderStep
 categories:
 - Navigation
-- Content
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

package/src/Truncate/README.md

@@ -3,6 +3,8 @@ title: 'Truncate'
 type: 'component'
 components:
 - Truncate
+categories:
+- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

package/src/hooks/useIndexOfLastVisibleChild.mdx

@@ -3,7 +3,6 @@ title: 'useIndexOfLastVisibleChild'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIndexOfLastVisibleChild
 status: 'New'

package/src/hooks/useIsVisible.mdx

@@ -3,7 +3,6 @@ title: 'useIsVisible'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIsVisible
 status: 'Stable'

package/src/hooks/useWindowSize.mdx

@@ -3,7 +3,6 @@ title: 'useWindowSize'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useWindowSize
 status: 'New'

package/styles/css/core/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 16 Nov 2023 10:44:11 GMT
+ * Generated on Wed, 06 Dec 2023 09:28:09 GMT
  */
 
 :root {
@@ -195,10 +195,6 @@
   --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
   --pgn-spacing-form-input-check-margin-x-base: .25rem;
   --pgn-spacing-form-input-check-gutter: 1.25rem;
-  --pgn-spacing-dropzone-border-error: 2px;
-  --pgn-spacing-dropzone-border-active: 2px;
-  --pgn-spacing-dropzone-border-focus: 2px;
-  --pgn-spacing-dropzone-border-hover: 2px;
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
   --pgn-spacing-dropdown-close-container-top: .625rem;

package/styles/css/themes/light/variables.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);

package/styles/scss/core/core.scss

@@ -6,6 +6,7 @@
 @import "~bootstrap/scss/reboot";
 @import "typography";
 @import "grid";
+@import "~react-loading-skeleton/dist/skeleton.css";
 @import "~bootstrap/scss/transitions";
 @import "utilities";
 @import "~bootstrap/scss/media";

package/tokens/src/core/components/Dropzone.json

@@ -14,11 +14,7 @@
     "dropzone": {
       "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" },
       "border": {
-        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" },
-        "hover": { "value": "2px", "type": "dimension", "source": "$dropzone-border-hover" },
-        "focus": { "value": "2px", "type": "dimension", "source": "$dropzone-border-focus" },
-        "active": { "value": "2px", "type": "dimension", "source": "$dropzone-border-active" },
-        "error": { "value": "2px", "type": "dimension", "source": "$dropzone-border-error" }
+        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" }
       }
     }
   }

package/tokens/src/themes/light/components/Dropzone.json

@@ -8,12 +8,16 @@
         "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
       },
       "border": {
-        "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" },
-        "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" },
-        "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" },
-        "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" },
-        "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" }
+        "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" }
       }
     }
+  },
+  "elevation": {
+    "dropzone": {
+      "hover": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-hover" },
+      "focus": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-focus" },
+      "active": { "value": "inset 0 0 0 2px {color.primary.500}", "type": "shadow", "source": "$dropzone-box-shadow-active" },
+      "error": { "value": "inset 0 0 0 2px {color.danger.300}", "type": "shadow", "source": "$dropzone-box-shadow-error" }
+    }
   }
 }