docs: convert js docs to mdx (#6147)

www/src/css/examples.module.scss

@@ -12,7 +12,7 @@
     background-color: #f8f9fa;
     border: 1px solid #dee2e6;
     margin-right: 5px;
-  
+
     & > div {
       display: flex;
       align-items: center;
@@ -60,3 +60,16 @@
     margin-top: 1rem;
   }
 }
+
+// has to be fully global because of modal portals
+:global(.modal-90w) {
+  width: 90%;
+  max-width: none !important;
+}
+
+.overlay-contained {
+  height: 200px;
+  & > div {
+    position: relative;
+  }
+}

www/src/pages/components/figures.mdx

@@ -0,0 +1,39 @@
+import { graphql } from 'gatsby';
+
+import ComponentApi from '../../components/ComponentApi';
+import ReactPlayground from '../../components/ReactPlayground';
+import Figure from '../../examples/Figure';
+
+# Figures
+
+Anytime you need to display a piece of content, like an image with an
+optional caption, consider using a `Figure`.
+
+## Figure
+
+Displaying related images and text with the Figure component.
+
+<ReactPlayground codeText={Figure} />
+
+## API
+
+<ComponentApi metadata={props.data.figure} />
+<ComponentApi metadata={props.data.image} />
+<ComponentApi metadata={props.data.caption} />
+
+export const query = graphql`
+  query FigureQuery {
+    figure: componentMetadata(displayName: { eq: "Figure" }) {
+      displayName
+      ...ComponentApi_metadata
+    }
+    image: componentMetadata(displayName: { eq: "FigureImage" }) {
+      displayName
+      ...ComponentApi_metadata
+    }
+    caption: componentMetadata(displayName: { eq: "FigureCaption" }) {
+      displayName
+      ...ComponentApi_metadata
+    }
+  }
+`;

www/src/pages/components/images.mdx

@@ -0,0 +1,29 @@
+import { graphql } from 'gatsby';
+
+import ComponentApi from '../../components/ComponentApi';
+import ReactPlayground from '../../components/ReactPlayground';
+import Fluid from '../../examples/Image/Fluid';
+import Shape from '../../examples/Image/Shape';
+
+# Images
+
+## Shape
+
+Use the `rounded`, `roundedCircle` and `thumbnail` props to customise
+the image.
+
+## Fluid
+
+Use the `fluid` to scale image nicely to the parent element.
+
+## API
+
+<ComponentApi metadata={props.data.Image} />
+
+export const query = graphql`
+  query ImageQuery {
+    Image: componentMetadata(displayName: { eq: "Image" }) {
+      ...ComponentApi_metadata
+    }
+  }
+`;

www/src/pages/components/input-group.mdx

@@ -0,0 +1,73 @@
+import { graphql } from 'gatsby';
+
+import ComponentApi from '../../components/ComponentApi';
+import ReactPlayground from '../../components/ReactPlayground';
+import Basic from '../../examples/InputGroup/Basic';
+import ButtonDropdowns from '../../examples/InputGroup/ButtonDropdowns';
+import Buttons from '../../examples/InputGroup/Buttons';
+import Checkboxes from '../../examples/InputGroup/Checkboxes';
+import MultipleAddons from '../../examples/InputGroup/MultipleAddons';
+import MultipleInputs from '../../examples/InputGroup/MultipleInputs';
+import SegmentedButtonDropdowns from '../../examples/InputGroup/SegmentedButtonDropdowns';
+import Sizes from '../../examples/InputGroup/Sizes';
+
+# InputGroup
+
+Place one add-on or button on either side of an input. You may also
+place one on both sides of an input. Remember to place
+`<label>`s outside the input group.
+
+<ReactPlayground codeText={Basic} />
+
+## Sizing
+
+Add the relative form sizing classes to the `InputGroup` and
+contents within will automatically resize—no need for repeating the form
+control size classes on each element.
+
+<ReactPlayground codeText={Sizes} />
+
+## Checkboxes and radios
+
+Use the `InputGroup.Radio` or
+`InputGroup.Checkbox` to add options to an input group.
+
+<ReactPlayground codeText={Checkboxes} />
+
+## Multiple inputs
+
+While multiple inputs are supported visually, validation styles are only
+available for input groups with a single input.
+
+<ReactPlayground codeText={MultipleInputs} />
+
+## Multiple addons
+
+Multiple add-ons are supported and can be mixed with checkbox and radio
+input versions.
+
+<ReactPlayground codeText={MultipleAddons} />
+
+## Button addons
+
+<ReactPlayground codeText={Buttons} />
+
+## Buttons with Dropdowns
+
+<ReactPlayground codeText={ButtonDropdowns} />
+
+## Segmented buttons
+
+<ReactPlayground codeText={SegmentedButtonDropdowns} />
+
+## API
+
+<ComponentApi metadata={props.data.InputGroup} />
+
+export const query = graphql`
+  query InputGroupQuery {
+    InputGroup: componentMetadata(displayName: { eq: "InputGroup" }) {
+      ...ComponentApi_metadata
+    }
+  }
+`;