Upgrade to Assembly v1 🌝

.nvmrc

@@ -1 +1 @@
-12
+14

CHANGELOG.md

@@ -1,7 +1,12 @@
 # Changelog
 
-## Unreleased
+## 5.0.0-beta.0
 
+This release updates to Assembly v1. [#481](https://github.com/mapbox/dr-ui/pull/481)
+
+- 🚨 Replace `customStyles` prop in `Tag` with `customBorder`, `customColor,` and `customBackground`. The new props accept class names.
+- 🚨 `CardContainer` no longer accepts a number for `cardColSize`, choose: `'1/4'` for 4 cards or `'1/3'` for 3 cards per row. The default is `'1/2'` for 2 cards per row.
+- Update to mr-ui@1.1.0.
 - Handle `NavigiationAccordion` when there is no `activeItem`. [#495](https://github.com/mapbox/dr-ui/pull/495)
 - Move "I like..." category to bottom in `Feedback` component. [#518](https://github.com/mapbox/dr-ui/pull/518)
 - Decrease Sentry `tracesSampleRate` to `0.05`. [#517](https://github.com/mapbox/dr-ui/pull/517)

README.md

@@ -10,6 +10,13 @@ UI components for Mapbox documentation projects.
 
 ## Installation
 
+**Requirements**
+
+- Node 14
+- npm 7
+
+If you're not sure if your Node and NPM versions are up to date, run `nvm use` before installing dependencies. If you don't have NVM installed, you can [find installation instructions here](https://github.com/nvm-sh/nvm/blob/master/README.md#installing-and-updating).
+
 ```
 npm install @mapbox/dr-ui
 ```

docs/src/components/component-example.js

@@ -34,13 +34,11 @@ export default class ComponentExample extends React.Component {
     const { props, state } = this;
     return (
       <div>
-        <div className="flex-parent flex-parent--end-cross">
-          <div className="flex-child flex-child--grow pb6 prose">
-            {props.description}
-          </div>
-          <div className="flex-child flex-child--no-shrink w120">
-            <div className="flex-parent flex-parent--end-main">
-              <div className="flex-child">
+        <div className="flex flex--end-cross">
+          <div className="flex-child-grow pb6 prose">{props.description}</div>
+          <div className="flex-child-no-shrink w120">
+            <div className="flex flex--end-main">
+              <div>
                 <ToggleCodeButton
                   onClick={this.toggleCode}
                   codeIsVisible={state.showCode}
@@ -69,13 +67,13 @@ function ToggleCodeButton(props) {
       className="block btn btn--s btn--gray unround-b round-t"
       onClick={props.onClick}
     >
-      <span className="flex-parent flex-parent--center-cross">
-        <span className="flex-child">
+      <span className="flex flex--center-cross">
+        <span>
           <svg className="icon">
             <use xlinkHref="#icon-code" />
           </svg>
         </span>
-        <span className="ml6 flex-child">{text}</span>
+        <span className="ml6">{text}</span>
       </span>
     </button>
   );

docs/src/components/component-section.js

@@ -91,7 +91,7 @@ function sortedProps(propsData) {
 
 function PropRow(props) {
   const required = !props.required ? null : (
-    <span className="txt-xs txt-mono ml6 bg-purple-faint color-purple px6 py3 round">
+    <span className="txt-xs txt-mono ml6 bg-purple-faint color-purple-deep px6 py3 round">
       REQUIRED
     </span>
   );
@@ -128,11 +128,9 @@ function LabeledDefaultValue(props) {
   }
 
   return (
-    <div className="flex-parent mb3">
-      <div className="flex-child flex-child--no-shrink color-gray">
-        {props.title}:
-      </div>
-      <div className="ml6 flex-child flex-child--grow">
+    <div className="flex mb3">
+      <div className="flex-child-no-shrink color-gray">{props.title}:</div>
+      <div className="ml6 flex-child-grow">
         <DefaultValueDisplay value={props.value} />
       </div>
     </div>

docs/src/css/site.css

@@ -7,7 +7,7 @@
   height: 50px !important;
 }
 @media screen and (min-width: 640px) {
-  #docs-content #dr-ui--page-layout-sidebar.scroll-auto-mm {
+  #docs-content #dr-ui--page-layout-sidebar.overflow-auto-mm {
     overflow: unset !important;
   }
 }

docs/src/pages/components/index.md

@@ -18,7 +18,9 @@ overviewHeader:
   changelogLink: /dr-ui/changelog/
   installLink: https://github.com/mapbox/dr-ui/blob/main/README.md
   ghLink: https://github.com/mapbox/dr-ui
-  theme: bg-purple-faint
+  lightText: true
+  theme: bg-purple-deep
+
   # version: "" dynamic version is set in pages-shell.js
   # image: "" set in page-shell.js
 ---

docs/src/pages/guides/a11y.md → docs/src/pages/guides/test-pages/a11y.md

@@ -2,12 +2,12 @@
 title: Accessibility test page
 description: Page for testing accessibility of components.
 layout: page
-order: 6
+groupOrder: 1
 contentType: guide
 products:
   - Documentation
 prependJs:
-  - "import Note from '../../../../src/components/note/note';"
+  - "import Note from '../../../../../src/components/note/note';"
 ---
 
 Use this test page to check color contrast and other accessibility considerations.

docs/src/pages/guides/test-pages/headings.md

@@ -0,0 +1,29 @@
+---
+title: Headings
+description: Page for testing headings.
+layout: page
+groupOrder: 2
+contentType: guide
+products:
+  - Documentation
+---
+
+## Heading 2
+
+This first heading should have padding between the text and top border.
+
+### Heading 3
+
+This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section. This is a heading 3 section.
+
+#### Heading 4
+
+This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section. This is a heading 4 section.
+
+##### Heading 5
+
+This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section. This is a heading 5 section.
+
+## Heading 2
+
+This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section. This is a heading 2 section.

docs/src/pages/guides/test-pages/index.md

@@ -0,0 +1,10 @@
+---
+title: Test pages
+description: A group of test pages.
+order: 6
+contentType: guide
+layout: page
+group: true
+products:
+  - Documentation
+---