@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/TransitionReplace/README.md

@@ -25,10 +25,10 @@ TransitionReplace expects only one child at any time. Swap content inside the co
     <div>
       <TransitionReplace className="mb-3">
         {isEditing ? (
-          <form key="the-form">
-            <label htmlFor="name">First Name</label>
-            <Input type="text" value="some name" />
-          </form>
+          <Form.Group>
+            <Form.Label>First Name</Form.Label>
+            <Form.Control value="some name" />
+          </Form.Group>
         ) : (
           <div key="other">
             <h4 className="mt-0">First Name</h4>

package/src/ValidationMessage/index.scss

@@ -1,5 +1,5 @@
 .form-control.is-invalid ~ .invalid-feedback-nodanger {
-  color: $body-color;
+  color: var(--pgn-color-body-base);
 }
 
 .fa-icon-spacing {

package/src/index.d.ts

@@ -5,10 +5,8 @@
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 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 Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -22,6 +20,7 @@ export const Avatar: any; // from './Avatar';
 export const AvatarButton: any; // from './AvatarButton';
 export const Badge: any; // from './Badge';
 export const Breadcrumb: any; // from './Breadcrumb';
+export const Button: any, ButtonGroup: any, ButtonToolbar: any; // from './Button';
 export const
   Card: any,
   CardColumns: any,
@@ -73,6 +72,7 @@ export const
   FormAutosuggestOption: any,
   InputGroup: any;
 // from './Form';
+export const Hyperlink: any, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT: string, HYPER_LINK_EXTERNAL_LINK_TITLE: string; // from './Hyperlink';
 export const IconButton: any, IconButtonWithTooltip: any; // from './IconButton';
 export const IconButtonToggle: any; // from './IconButtonToggle';
 export const Input: any; // from './Input';

package/src/index.js

@@ -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.
+// To keep this file in sync with the .d.ts file, it's in the same order
+// and each line number is the same
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that have types
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 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 Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -22,6 +20,7 @@ export { default as Avatar } from './Avatar';
 export { default as AvatarButton } from './AvatarButton';
 export { default as Badge } from './Badge';
 export { default as Breadcrumb } from './Breadcrumb';
+export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export {
   default as Card,
   CardColumns,
@@ -35,8 +34,6 @@ export {
 export {
   default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
 } from './Carousel';
-export { default as CheckBox } from './CheckBox';
-export { default as CheckBoxGroup } from './CheckBoxGroup';
 export { default as CloseButton } from './CloseButton';
 export { default as Container } from './Container';
 export { default as Layout, Col, Row } from './Layout';
@@ -50,7 +47,6 @@ export {
   SplitButton,
 } from './Dropdown';
 export { default as Fade } from './Fade';
-export { default as Fieldset } from './Fieldset';
 export {
   default as Form,
   RadioControl,
@@ -73,20 +69,15 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
+export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as IconButtonToggle } from './IconButtonToggle';
-export { default as Input } from './Input';
-export { default as InputSelect } from './InputSelect';
-export { default as InputText } from './InputText';
 export { default as Image, Figure } from './Image';
-export { default as ListBox } from './ListBox';
-export { default as ListBoxOption } from './ListBoxOption';
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
 export { default as Media } from './Media';
 export { default as Menu } from './Menu';
 export { default as MenuItem } from './Menu/MenuItem';
 export { default as SelectMenu, SELECT_MENU_DEFAULT_MESSAGE } from './Menu/SelectMenu';
-export { default as Modal } from './Modal';
 export { default as ModalCloseButton } from './Modal/ModalCloseButton';
 export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Modal/FullscreenModal';
 export { default as MarketingModal } from './Modal/MarketingModal';
@@ -121,7 +112,6 @@ export {
 export { default as Popover, PopoverTitle, PopoverContent } from './Popover';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProductTour } from './ProductTour';
-export { default as RadioButtonGroup, RadioButton } from './RadioButtonGroup';
 export { default as ResponsiveEmbed } from './ResponsiveEmbed';
 export {
   default as SearchField,
@@ -134,8 +124,6 @@ export { default as Sheet } from './Sheet';
 export { default as Spinner } from './Spinner';
 export { default as Stepper } from './Stepper';
 export { default as StatefulButton } from './StatefulButton';
-export { default as StatusAlert } from './StatusAlert';
-export { default as Table } from './Table';
 export {
   default as Tabs,
   Tab,
@@ -143,10 +131,8 @@ export {
   TabContent,
   TabPane,
 } from './Tabs';
-export { default as TextArea } from './TextArea';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
-export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';
 export { default as DataTable } from './DataTable';

package/src/index.scss

@@ -14,7 +14,6 @@
 @import "./ChipCarousel";
 @import "./Code";
 @import "./Dropdown";
-@import "./Fieldset";
 @import "./Figure";
 @import "./Form";
 @import "./Hyperlink";
@@ -29,7 +28,6 @@
 @import "./Pagination";
 @import "./Popover";
 @import "./ProgressBar";
-@import "./OverflowScroll";
 @import "./SearchField";
 @import "./Scrollable";
 @import "./Sheet";
@@ -37,12 +35,10 @@
 @import "./Spinner";
 @import "./Stepper";
 @import "./StatefulButton";
-@import "./Table";
 @import "./Tooltip";
 @import "./DataTable";
 @import "./TransitionReplace";
 @import "./ValidationMessage";
-@import "./Tabs/deprecated/Tabs";
 @import "./IconButton";
 @import "./IconButtonToggle";
 @import "./Toast";

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

@@ -1,10 +1,7 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import 'regenerator-runtime/runtime';
 
 import '@testing-library/jest-dom';
 
-const crypto = require('crypto');
-
 class ResizeObserver {
   observe() {
     // do nothing
@@ -20,7 +17,3 @@ class ResizeObserver {
 }
 
 window.ResizeObserver = ResizeObserver;
-
-(window as any).crypto = {
-  getRandomValues: (arr: any) => crypto.randomBytes(arr.length),
-};

package/src/utils/breakpoints.js

@@ -1,4 +1,4 @@
-import breakpointSizes from '../../scss/core/_exports.module.scss';
+import breakpointSizes from '../../styles/scss/core/_exports.module.scss';
 
 const {
   sm, md, lg, xl, xxl,

package/styles/css/core/custom-media-breakpoints.css

@@ -0,0 +1,17 @@
+/**
+ * IMPORTANT: This file is the result of assembling design tokens
+ * Do not edit directly
+ * Generated on Fri, 22 Sep 2023 08:20:17 GMT
+ */
+
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
+@custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
+@custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
+@custom-media --pgn-size-breakpoint-min-width-md (min-width: 768px);
+@custom-media --pgn-size-breakpoint-max-width-md (max-width: 992px);
+@custom-media --pgn-size-breakpoint-min-width-lg (min-width: 992px);
+@custom-media --pgn-size-breakpoint-max-width-lg (max-width: 1200px);
+@custom-media --pgn-size-breakpoint-min-width-xl (min-width: 1200px);
+@custom-media --pgn-size-breakpoint-max-width-xl (max-width: 1400px);
+@custom-media --pgn-size-breakpoint-min-width-xxl (min-width: 1400px);

package/styles/css/core/index.css

@@ -0,0 +1,2 @@
+@import "custom-media-breakpoints.css";
+@import "variables.css";