@openedx/paragon 23.10.0 → 23.11.0

package/src/Modal/tests/ModalDialog.test.tsx

@@ -1,33 +1,36 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { IntlProvider } from 'react-intl';
 import ModalDialog from '../ModalDialog';
 
 describe('ModalDialog', () => {
   it('renders a dialog with aria-label and content', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        isOpen
-        onClose={onClose}
-        size="md"
-        variant="default"
-        hasCloseButton
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Header>
-          <ModalDialog.Title>The title</ModalDialog.Title>
-        </ModalDialog.Header>
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={onClose}
+          size="md"
+          variant="default"
+          hasCloseButton
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Header>
+            <ModalDialog.Title>The title</ModalDialog.Title>
+          </ModalDialog.Header>
 
-        <ModalDialog.Body>
-          <p>The content</p>
-        </ModalDialog.Body>
+          <ModalDialog.Body>
+            <p>The content</p>
+          </ModalDialog.Body>
 
-        <ModalDialog.Footer>
-          <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
-        </ModalDialog.Footer>
-      </ModalDialog>,
+          <ModalDialog.Footer>
+            <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
 
     const dialogNode = screen.getByRole('dialog');
@@ -40,15 +43,17 @@ describe('ModalDialog', () => {
   it('is hidden by default', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        onClose={onClose}
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
-        <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
-        <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
-      </ModalDialog>,
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          onClose={onClose}
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
+          <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
+          <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
 
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -59,30 +64,32 @@ describe('ModalDialog with Hero', () => {
   it('renders a dialog with aria-label and hero with img', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        isOpen
-        onClose={onClose}
-        size="md"
-        variant="default"
-        hasCloseButton
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Hero>
-          <ModalDialog.Hero.Background backgroundSrc="imageurl" />
-          <ModalDialog.Hero.Content data-testid="modal-hero-content">
-            <ModalDialog.Title>The title</ModalDialog.Title>
-          </ModalDialog.Hero.Content>
-        </ModalDialog.Hero>
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={onClose}
+          size="md"
+          variant="default"
+          hasCloseButton
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Hero>
+            <ModalDialog.Hero.Background backgroundSrc="imageurl" />
+            <ModalDialog.Hero.Content data-testid="modal-hero-content">
+              <ModalDialog.Title>The title</ModalDialog.Title>
+            </ModalDialog.Hero.Content>
+          </ModalDialog.Hero>
 
-        <ModalDialog.Body>
-          <p>The content</p>
-        </ModalDialog.Body>
+          <ModalDialog.Body>
+            <p>The content</p>
+          </ModalDialog.Body>
 
-        <ModalDialog.Footer>
-          <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
-        </ModalDialog.Footer>
-      </ModalDialog>,
+          <ModalDialog.Footer>
+            <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
     const dialogNode = screen.getByRole('dialog');
 

package/src/{index.js → index.ts}

@@ -1,14 +1,12 @@
-// Keep this file in sync with the .d.ts file (manually). It's in the same order
-// and each line number is the same, to make it easier.
-
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
+export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
 export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
-export { default as Container } from './Container';
+export { default as Container, type ContainerSize } from './Container';
 export {
   default as Form,
   RadioControl,
@@ -35,29 +33,37 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
-export { default as useWindowSize } from './hooks/useWindowSizeHook';
-export { default as useToggle } from './hooks/useToggleHook';
-export { default as useArrowKeyNavigation } from './hooks/useArrowKeyNavigationHook';
+export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
+export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
+export { default as useArrowKeyNavigation, type ArrowKeyNavProps } from './hooks/useArrowKeyNavigationHook';
 export { default as useIndexOfLastVisibleChild } from './hooks/useIndexOfLastVisibleChildHook';
 export { default as useIsVisible } from './hooks/useIsVisibleHook';
+export { default as breakpoints } from './utils/breakpoints';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as asInput } from './asInput';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ActionRow } from './ActionRow';
-export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Annotation } from './Annotation';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Avatar } from './Avatar';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as AvatarButton } from './AvatarButton';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Badge } from './Badge';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Breadcrumb } from './Breadcrumb';
+
 export {
   default as Card,
   CardColumns,
@@ -67,35 +73,58 @@ export {
   CardGrid,
   CardCarousel,
   CARD_VARIANTS,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './Card';
 export {
   default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './Carousel';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as CloseButton } from './CloseButton';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Layout, Col, Row } from './Layout';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Collapse } from './Collapse';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Collapsible } from './Collapsible';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Scrollable } from './Scrollable';
 export {
   default as Dropdown,
   DropdownToggle,
   DropdownButton,
   SplitButton,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './Dropdown';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Fade } from './Fade';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as IconButtonToggle } from './IconButtonToggle';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Image, Figure } from './Image';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Media } from './Media';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Menu } from './Menu';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as MenuItem } from './Menu/MenuItem';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as SelectMenu, SELECT_MENU_DEFAULT_MESSAGE } from './Menu/SelectMenu';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ModalCloseButton } from './Modal/ModalCloseButton';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Modal/FullscreenModal';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as MarketingModal } from './Modal/MarketingModal';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as StandardModal, STANDARD_MODAL_CLOSE_LABEL } from './Modal/StandardModal';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as AlertModal } from './Modal/AlertModal';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ModalPopup } from './Modal/ModalPopup';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as PopperElement } from './Modal/PopperElement';
 
 export {
@@ -103,8 +132,11 @@ export {
   NavDropdown,
   NavItem,
   NavLink,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './Nav';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Navbar, NavbarBrand, NAVBAR_LABEL } from './Navbar';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as PageBanner, PAGE_BANNER_DISMISS_ALT_TEXT } from './PageBanner';
 export {
   default as Pagination,
@@ -115,10 +147,15 @@ export {
   PAGINATION_BUTTON_LABEL_CURRENT_PAGE,
   PAGINATION_BUTTON_LABEL_NEXT,
   PAGINATION_BUTTON_LABEL_PAGE,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './Pagination';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Popover, PopoverTitle, PopoverContent } from './Popover';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ProgressBar } from './ProgressBar';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ProductTour } from './ProductTour';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ResponsiveEmbed } from './ResponsiveEmbed';
 export {
   default as SearchField,
@@ -126,10 +163,15 @@ export {
   SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,
   SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,
   SEARCH_FIELD_BUTTON_TEXT,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './SearchField';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Sheet } from './Sheet';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Spinner } from './Spinner';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Stepper } from './Stepper';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as StatefulButton } from './StatefulButton';
 export {
   default as Tabs,
@@ -137,48 +179,80 @@ export {
   TabContainer,
   TabContent,
   TabPane,
+// @ts-ignore: has yet to be converted to TypeScript
 } from './Tabs';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TransitionReplace } from './TransitionReplace';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ValidationMessage } from './ValidationMessage';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as DataTable } from './DataTable';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TextFilter } from './DataTable/filters/TextFilter';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as CheckboxFilter } from './DataTable/filters/CheckboxFilter';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as DropdownFilter } from './DataTable/filters/DropdownFilter';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as MultiSelectDropdownFilter } from './DataTable/filters/MultiSelectDropdownFilter';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableHeaderCell } from './DataTable/TableHeaderCell';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableCell } from './DataTable/TableCell';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableFilters, TABLE_FILTERS_BUTTON_TEXT } from './DataTable/TableFilters';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableHeader } from './DataTable/TableHeaderRow';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableRow } from './DataTable/TableRow';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TablePagination } from './DataTable/TablePagination';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TablePaginationMinimal } from './DataTable/TablePaginationMinimal';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as DataTableContext } from './DataTable/DataTableContext';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as BulkActions } from './DataTable/BulkActions';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableControlBar } from './DataTable/TableControlBar';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as TableFooter } from './DataTable/TableFooter';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as CardView } from './DataTable/CardView';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Skeleton, SkeletonTheme } from './Skeleton/index';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Stack } from './Stack';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ToggleButton, ToggleButtonGroup } from './ToggleButton';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Sticky } from './Sticky';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as SelectableBox } from './SelectableBox';
-export { default as breakpoints } from './utils/breakpoints';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Variant } from './utils/constants';
 export {
   OverflowScrollContext,
   OverflowScroll,
   useOverflowScroll,
   useOverflowScrollItems,
+  // @ts-ignore: has yet to be converted to TypeScript
 } from './OverflowScroll';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Dropzone } from './Dropzone';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as messages } from './i18n';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as Truncate } from './Truncate';
+// @ts-ignore: has yet to be converted to TypeScript
 export { default as ColorPicker } from './ColorPicker';
 
+// // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Pass through any needed whole third-party library functionality
 // useTable for example is needed to use the DataTable component seamlessly
 // rather than setting a peer dependency in this project, we opt to tightly
 // couple these dependencies by passing through needed functionality.
+// // // // // // // // // // // // // // // // // // // // // // // // // // //
 export {
   default as MediaQuery,
   useMediaQuery,

package/src/utils/breakpoints.d.ts

@@ -0,0 +1,26 @@
+interface BreakpointRange {
+  minWidth?: number;
+  maxWidth?: number;
+}
+
+interface Breakpoints {
+  extraSmall: BreakpointRange;
+  small: BreakpointRange;
+  medium: BreakpointRange;
+  large: BreakpointRange;
+  extraLarge: BreakpointRange;
+  extraExtraLarge: BreakpointRange;
+}
+
+export const Size: {
+  readonly xs: 'extraSmall';
+  readonly sm: 'small';
+  readonly md: 'medium';
+  readonly lg: 'large';
+  readonly xl: 'extraLarge';
+  readonly xxl: 'extraExtraLarge';
+};
+
+declare const breakpoints: Breakpoints;
+
+export default breakpoints;

package/tokens/src/core/global/typography.json

@@ -12,7 +12,7 @@
           "serif": {
             "source": "$font-family-sans-serif",
             "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
-            "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
+              "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
             "$description": "Sans-serif font family."
           }
         },
@@ -23,7 +23,7 @@
         },
         "monospace": {
           "source": "$font-family-monospace",
-          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",  "Courier New", "monospace"],
+          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"],
           "$description": "Monospace font family."
         }
       },