refactor: corrected max width

openedx · Dec 21, 2023 · 810c708 · 810c708
1 parent 0d95f06
commit 810c708
Show file tree

Hide file tree

Showing 77 changed files with 563 additions and 1,880 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -4,7 +4,8 @@
       "files": "*.{md,mdx}",
       "options": {
         "semi": true,
-        "singleQuote": true
+        "singleQuote": true,
+        "printWidth": 120
       }
     }
   ]

diff --git a/README.md b/README.md
@@ -148,11 +148,7 @@ module.exports = {
   dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
   */
   localModules: [
-    {
-      moduleName: '@edx/paragon/scss/core',
-      dir: '../src/paragon',
-      dist: 'scss/core',
-    },
+    { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
     { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
     // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
     // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
@@ -200,13 +196,7 @@ When developing a new component you should generally follow three rules:
                description: 'Close label for Toast component',
              });
 
-           return (
-             <IconButton
-               alt={intlCloseLabel}
-               onClick={() => {}}
-               variant="primary"
-             />
-           );
+           return <IconButton alt={intlCloseLabel} onClick={() => {}} variant="primary" />;
          }
        }
 

diff --git a/src/ActionRow/README.md b/src/ActionRow/README.md
@@ -32,9 +32,7 @@ ActionRow can also be used with a helper component `ActionRow.Spacer` to insert
 
 ```jsx live
 <ActionRow>
-  <Form.Checkbox className="flex-column flex-sm-row">
-    Don't ask me again.
-  </Form.Checkbox>
+  <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
   <ActionRow.Spacer />
   <Button variant="tertiary">Cancel</Button>
   <Button variant="primary">Submit</Button>
@@ -45,10 +43,7 @@ ActionRow can also be used with a helper component `ActionRow.Spacer` to insert
 
 ```jsx live
 <ActionRow isStacked>
-  <p className="x-small">
-    Bespoke leggings yuccie, portland umami readymade craft beer vaporware
-    sriracha.
-  </p>
+  <p className="x-small">Bespoke leggings yuccie, portland umami readymade craft beer vaporware sriracha.</p>
   <Button variant="tertiary">Go back</Button>
   <Button variant="primary">Continue</Button>
 </ActionRow>

diff --git a/src/Alert/README.md b/src/Alert/README.md
@@ -28,24 +28,16 @@ This component utilizes and extends the `Alert` component from react-bootstrap.<
 ```jsx live
 <>
   <Alert variant="success">
-    This is a "success" alert with{' '}
-    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
-    like.
+    This is a "success" alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
   </Alert>
   <Alert variant="info">
-    This is a "info" alert with{' '}
-    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
-    like.
+    This is a "info" alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
   </Alert>
   <Alert variant="danger">
-    This is a "danger" alert with{' '}
-    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
-    like.
+    This is a "danger" alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
   </Alert>
   <Alert variant="warning">
-    This is a "warning" alert with{' '}
-    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
-    like.
+    This is a "warning" alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
   </Alert>
 </>
 ```
@@ -72,26 +64,16 @@ The stacked variant should be used for:
       console.log('closed', e);
     }}
   >
-    This is a "info" alert with{' '}
-    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
-    like.
+    This is a "info" alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
   </Alert>
   <Alert variant="warning" dismissible>
-    This is a "info" alert with{' '}
-    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
-    like.
+    This is a "info" alert with <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
   </Alert>
-  <Alert
-    variant="success"
-    icon={CheckCircle}
-    dismissible
-    actions={[<Button>Hello</Button>]}
-  >
+  <Alert variant="success" icon={CheckCircle} dismissible actions={[<Button>Hello</Button>]}>
     <Alert.Heading>Hey, nice to see you</Alert.Heading>
     <p>
-      Aww yeah, you successfully read this important alert message. This example
-      text is going to run a bit longer so that you can see how spacing within
-      an alert works with this kind of content.
+      Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
+      that you can see how spacing within an alert works with this kind of content.
     </p>
   </Alert>
   <Alert
@@ -106,9 +88,8 @@ The stacked variant should be used for:
   >
     <Alert.Heading>Hey, nice to see you</Alert.Heading>
     <p>
-      Aww yeah, you successfully read this important alert message. This example
-      text is going to run a bit longer so that you can see how spacing within
-      an alert works with this kind of content.
+      Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
+      that you can see how spacing within an alert works with this kind of content.
     </p>
   </Alert>
 </>
@@ -121,25 +102,22 @@ The stacked variant should be used for:
   <Alert variant="success" dismissible icon={CheckCircle}>
     <Alert.Heading>Hey, nice to see you</Alert.Heading>
     <p>
-      Aww yeah, you successfully read this important alert message. This example
-      text is going to run a bit longer so that you can see how spacing within
-      an alert works with this kind of content.
+      Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
+      that you can see how spacing within an alert works with this kind of content.
     </p>
   </Alert>
   <Alert variant="warning" dismissible icon={WarningFilled}>
     <Alert.Heading>Hey, nice to see you</Alert.Heading>
     <p>
-      Aww yeah, you successfully read this important alert message. This example
-      text is going to run a bit longer so that you can see how spacing within
-      an alert works with this kind of content.
+      Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
+      that you can see how spacing within an alert works with this kind of content.
     </p>
   </Alert>
   <Alert variant="danger" dismissible icon={Info}>
     <Alert.Heading>Hey, nice to see you</Alert.Heading>
     <p>
-      Aww yeah, you successfully read this important alert message. This example
-      text is going to run a bit longer so that you can see how spacing within
-      an alert works with this kind of content.
+      Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
+      that you can see how spacing within an alert works with this kind of content.
     </p>
   </Alert>
 </>
@@ -151,14 +129,10 @@ The stacked variant should be used for:
 <Alert variant="success" actions={[<Button>Hello</Button>]} dismissible stacked>
   <Alert.Heading>Hey, nice to see you</Alert.Heading>
   <p>
-    Aww yeah, you successfully read this important alert message. This example
-    text is going to run a bit longer so that you can see how spacing within an
-    alert works with this kind of content.
+    Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that
+    you can see how spacing within an alert works with this kind of content.
   </p>
   <hr />
-  <p className="mb-0">
-    Whenever you need to, be sure to use margin utilities to keep things nice
-    and tidy.
-  </p>
+  <p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </Alert>
 ```
diff --git a/src/Annotation/README.md b/src/Annotation/README.md
@@ -41,10 +41,7 @@ Display informative text related to an object on screen. Unlike the tooltip an a
 ```jsx live
 () => {
   const [arrowPlacement, setArrowPlacement] = useState('left');
-  const wrapperClass =
-    arrowPlacement === 'top' || arrowPlacement === 'bottom'
-      ? 'flex-column'
-      : '';
+  const wrapperClass = arrowPlacement === 'top' || arrowPlacement === 'bottom' ? 'flex-column' : '';
   return (
     <>
       {/* start example form block */}
@@ -64,30 +61,12 @@ Display informative text related to an object on screen. Unlike the tooltip an a
         ]}
       />
       {/* end example form block */}
-      <div
-        className={`d-flex align-items-center justify-content-center ${wrapperClass}`}
-      >
-        {arrowPlacement === 'bottom' && (
-          <Annotation arrowPlacement={arrowPlacement}>
-            Annotation on top
-          </Annotation>
-        )}
-        {arrowPlacement === 'right' && (
-          <Annotation arrowPlacement={arrowPlacement}>
-            Annotation on left
-          </Annotation>
-        )}
+      <div className={`d-flex align-items-center justify-content-center ${wrapperClass}`}>
+        {arrowPlacement === 'bottom' && <Annotation arrowPlacement={arrowPlacement}>Annotation on top</Annotation>}
+        {arrowPlacement === 'right' && <Annotation arrowPlacement={arrowPlacement}>Annotation on left</Annotation>}
         <Button>This is an example button</Button>
-        {arrowPlacement === 'left' && (
-          <Annotation arrowPlacement={arrowPlacement}>
-            Annotation on right
-          </Annotation>
-        )}
-        {arrowPlacement === 'top' && (
-          <Annotation arrowPlacement={arrowPlacement}>
-            Annotation on bottom
-          </Annotation>
-        )}
+        {arrowPlacement === 'left' && <Annotation arrowPlacement={arrowPlacement}>Annotation on right</Annotation>}
+        {arrowPlacement === 'top' && <Annotation arrowPlacement={arrowPlacement}>Annotation on bottom</Annotation>}
       </div>
     </>
   );

diff --git a/src/Avatar/README.md b/src/Avatar/README.md
@@ -24,11 +24,7 @@ It is used in the global navigation’s user menu and may also be used to indica
   });
 
   return (
-    <Stack
-      className="bg-light p-2"
-      gap={2}
-      direction={isExtraSmall ? 'vertical' : 'horizontal'}
-    >
+    <Stack className="bg-light p-2" gap={2} direction={isExtraSmall ? 'vertical' : 'horizontal'}>
       <Avatar size="xxl" />
       <Avatar size="xl" />
       <Avatar size="lg" />

diff --git a/src/AvatarButton/README.md b/src/AvatarButton/README.md
@@ -58,11 +58,7 @@ Props set on Dropdown.Toggle get passed through to the "as" component
 
 ```jsx live
 <Dropdown>
-  <Dropdown.Toggle
-    as={AvatarButton}
-    size="sm"
-    src="https://picsum.photos/128/128/"
-  >
+  <Dropdown.Toggle as={AvatarButton} size="sm" src="https://picsum.photos/128/128/">
     Casey
   </Dropdown.Toggle>
 
@@ -84,39 +80,23 @@ For use in mobile viewports or constrained views.
 ```jsx live
 <>
   <div>
-    <AvatarButton
-      showLabel={false}
-      size="lg"
-      src="https://picsum.photos/128/128/"
-    >
+    <AvatarButton showLabel={false} size="lg" src="https://picsum.photos/128/128/">
       Casey
     </AvatarButton>
   </div>
   <div>
-    <AvatarButton
-      showLabel={false}
-      size="md"
-      src="https://picsum.photos/128/128/"
-    >
+    <AvatarButton showLabel={false} size="md" src="https://picsum.photos/128/128/">
       Casey
     </AvatarButton>
   </div>
   <div>
-    <AvatarButton
-      showLabel={false}
-      size="sm"
-      src="https://picsum.photos/128/128/"
-    >
+    <AvatarButton showLabel={false} size="sm" src="https://picsum.photos/128/128/">
       Casey
     </AvatarButton>
   </div>
 
   <Dropdown>
-    <Dropdown.Toggle
-      showLabel={false}
-      as={AvatarButton}
-      src="https://picsum.photos/128/128/"
-    >
+    <Dropdown.Toggle showLabel={false} as={AvatarButton} src="https://picsum.photos/128/128/">
       Casey
     </Dropdown.Toggle>