Upgrade to Assembly v1 🌝 (#481)

* update to Node 14 * add requirements section to readme.md * update assembly and mr-ui * remove font-size from docs-prose.css * remove classes with position: sticky * spacing fix * replace limiter class * replace limiter--wide class * remove unused txt-spacing0 class * update limiter--wide class * remove fr-ui--feedback color-gray from docs-prose.css * remove color-gray code class * scroll-auto → overflow-auto * remove double selectors * add back heading prose selectors * add mr-ui back as peerdependency * update snapshots * update package lock * Update package-lock.json * Update CHANGELOG.md * LevelIndicator (#482) * Update Assembly v1, remove unneeded classes * Remove unused align-middle class * Prevent level squares from shrinking * [Assembly v1] Browser (#483) * make w70 inline * update snapshots * updae package-lock.json * update package-lock.json with assembly-v1-update branch * Update src/components/browser/browser.js Co-authored-by: Katy DeCorah <decorah@mapbox.com> * update browser snapshot Co-authored-by: Katy DeCorah <decorah@mapbox.com> * [Assembly v1] BackToTopButton (#486) * [Assembly v1] Themes, Note, Tag (#487) * [Assembly v1] Themes, Note, Tag * Update CHANGELOG.md * [Assembly v1] Card (#489) * [Assembly v1] Card * Update snapshots * [Assembly v1] Phone (#488) * [Assembly v1] Phone * Fix border-radius on iOS/Safari by adding overflow-hidden and z-index * Update background * [Assembly v1] CardContainer (#493) * [Assembly v1] CardContainer * Update CHANGELOG.md * [Assembly v1] Feedback (#496) * codemod changes * update snapshots * Update src/components/feedback/feedback.js Co-authored-by: Katy DeCorah <decorah@mapbox.com> * update snapshots Co-authored-by: Katy DeCorah <decorah@mapbox.com> * [Assembly v1] CodeSnippetTitle (#491) * codemod changes * update snapshots * update snapshots from assembly-v1-update * update snapshots * fix stacking behavior on small screens * update snapshots * [Assembly v1] OverviewHeader (#501) * [Assembly v1] OverviewHeader * Reduce changes * Reduce changes * Reduce changes * Reduce changes * [Assembly v1] OnThisPage (#497) * codemod changes * update snapshot * [Assembly v1] NavigationAccordion (#499) * [Assembly v1] ProductMenu (#503) * [Assembly v1] Update mr-ui@1.1.0 (#502) * [Assembly v1] Update mr-ui * Update CHANGELOG.md * Update package-lock.json * [Assembly v1] Search (#500) * [Assembly v1] Search * Clean up * [Assembly v1] NumberedCodeSnippet (#504) * codemod changes * increase line number contrast * increase contrast of hide code text * update snapshots * Update src/components/numbered-code-snippet/show-hide-lines.js Co-authored-by: Katy DeCorah <decorah@mapbox.com> * update snapshots Co-authored-by: Katy DeCorah <decorah@mapbox.com> * [Assembly v1] RelatedPage (#507) * codemod changes * update snapshots * remove a11y colors * update snapshots * [Assembly v1] PageLayout (#510) * [Assembly v1] PageLayout * Make `color-text` cascade from PageLayout instead * Reduce changes * Add stroke to select, make size match input--s * Remove `color-text` from NavigationAccordion (allow the color to cascade from PageLayout) * [Assembly v1] Video (#511) * codemod changes * update snapshots * [Assembly v1] Update catalog site (#512) * codemode changes * fix required badge contrast * darken links in overview header * remove overview header docs prose css * change header background color and text color * Fix package-lock.json * 5.0.0-beta.0 * Update class in make-table-scroll plugin (#520) * Update dependencies * 5.0.0-beta.1 * mbx-assembly@1.2.0 * [Assembly v1] Update default theme to use `color-text` (#522) * Fix border color and set icon color for `lightText` (#521) * [Assembly v1] h2 fix (#523) * Add back `padding-top: 30px;` * Create "Test pages" group on catalog site * 5.0.0-beta.2 * [Assembly v1] Replace viewport and scroll classes in PageLayout (#524) * Fix deprecated viewport classes * Fix overflow- class * 5.0.0-beta.3 Co-authored-by: Katy DeCorah <decorah@mapbox.com>
mapbox · Oct 11, 2021 · e75a178 · e75a178
1 parent 876e599
commit e75a178
Show file tree

Hide file tree

Showing 85 changed files with 31,756 additions and 11,864 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-12
+14
diff --git a/CHANGELOG.md b/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)

diff --git a/README.md b/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
 ```

diff --git a/docs/src/components/component-example.js b/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>
   );

diff --git a/docs/src/components/component-section.js b/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>

diff --git a/docs/src/css/site.css b/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;
   }
 }

diff --git a/docs/src/pages/components/index.md b/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
 ---

diff --git a/docs/src/pages/guides/a11y.md → docs/src/pages/guides/test-pages/a11y.md b/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.

diff --git a/docs/src/pages/guides/test-pages/headings.md b/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.
diff --git a/docs/src/pages/guides/test-pages/index.md b/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
+---