Merge branch 'master' into video-controls

* master: 0.29.1 Update CHANGELOG.md Remove `limiter` from Topbar (#282) 0.29.0 Prepare 0.29.0 Allow Kotlin-only activities (#278) 0.28.0 Prepare 0.28.0 Prevent `ProductMenu` from truncating `tag` (#277) Update mr-ui and npm audit (#266) Add `Topbar` component (#274)
mapbox · Jun 13, 2020 · 6eb3fd7 · 6eb3fd7
2 parents 67e6258 + 27e85bb
commit 6eb3fd7
Show file tree

Hide file tree

Showing 24 changed files with 5,355 additions and 1,952 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,20 @@
 # Changelog
 
-## Master
+## 0.29.1
+
+- Remove `limiter` from `Topbar`. [#282](https://github.com/mapbox/dr-ui/pull/282)
+
+## 0.29.0
+
+- Allow Kotlin-only activities in `ContextlessAndroidActivityToggle`. [#278](https://github.com/mapbox/dr-ui/pull/278)
+
+## 0.28.0
 
 * Fix padding, background, and color contrast in `NumberedCodeSnippet` component. [#269](https://github.com/mapbox/dr-ui/pull/269)
 * Fix a bug in `NumberedCodeSnippet` where if the last line was included in `copyRanges` that code chunk would not be highlighted. [#268](https://github.com/mapbox/dr-ui/pull/268)
+* Add `Topbar` component. [#274](https://github.com/mapbox/dr-ui/pull/274)
+* Update mr-ui and other dependencies for security fixes. [#266](https://github.com/mapbox/dr-ui/pull/266)
+* Prevent `ProductMenu` from truncating `tag`. [#277](https://github.com/mapbox/dr-ui/pull/277)
 
 ## 0.27.0
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mapbox/dr-ui",
-  "version": "0.27.0",
+  "version": "0.29.1",
   "description": "Mapbox frontend tools for documentation websites.",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/mapbox/dr-ui#readme",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
+    "@babel/cli": "^7.8.4",
     "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-transform-arrow-functions": "^7.2.0",
@@ -46,7 +46,7 @@
     "budo": "^11.6.3",
     "color-contrast-checker": "^1.5.0",
     "cpy": "^7.0.1",
-    "cpy-cli": "^2.0.0",
+    "cpy-cli": "^3.1.1",
     "del": "^3.0.0",
     "del-cli": "^1.1.0",
     "enzyme": "^3.11.0",
@@ -64,7 +64,7 @@
     "hard-rejection": "^1.0.0",
     "highlight.js": "^9.13.1",
     "husky": "^0.14.3",
-    "jest": "^24.1.0",
+    "jest": "^25.2.4",
     "lint-staged": "^7.3.0",
     "make-dir": "^1.3.0",
     "pify": "^4.0.1",
@@ -80,8 +80,8 @@
     "@elastic/react-search-ui-views": "^1.3.2",
     "@elastic/search-ui-site-search-connector": "^1.3.2",
     "@mapbox/mapbox-gl-supported": "^1.4.1",
-    "@mapbox/mr-ui": "^0.7.4",
-    "@sentry/browser": "^5.13.0",
+    "@mapbox/mr-ui": "^0.9.1",
+    "@sentry/browser": "^5.15.5",
     "classnames": "^2.2.6",
     "compare-versions": "^3.4.0",
     "debounce": "^1.2.0",

diff --git a/...-activity-toggle/__tests__/__snapshots__/contextless-android-activity-toggle.test.js.snap b/...-activity-toggle/__tests__/__snapshots__/contextless-android-activity-toggle.test.js.snap
@@ -277,6 +277,129 @@ exports[`contextless-android-activity-toggle Basic renders as expected 1`] = `
 </div>
 `;
 
+exports[`contextless-android-activity-toggle Kotlin only renders as expected 1`] = `
+<div
+  className="my24 prose"
+>
+  <div
+    className="my24"
+  >
+    
+    <div
+      className="relative round z0 scroll-styled scroll-auto"
+      style={
+        Object {
+          "maxHeight": 480,
+        }
+      }
+    >
+      <pre>
+        <code
+          className="px0 hljs"
+        >
+          <div
+            className="relative z2"
+            data-chunk-code="chunk-0"
+          >
+            <div
+              className="pr12"
+              style={
+                Object {
+                  "paddingLeft": 12,
+                }
+              }
+            >
+              <div
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "map<span class=\\"token operator\\">?</span><span class=\\"token punctuation\\">.</span>getStyle <span class=\\"token punctuation\\">{</span>",
+                  }
+                }
+                style={
+                  Object {
+                    "marginLeft": 14.45,
+                    "textIndent": -14.45,
+                  }
+                }
+              />
+            </div>
+            <div
+              className="pr12"
+              style={
+                Object {
+                  "paddingLeft": 26.45,
+                }
+              }
+            >
+              <div
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "val settlementLabelLayer <span class=\\"token operator\\">=</span> it<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getLayer</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">\\"settlement-label\\"</span><span class=\\"token punctuation\\">)</span>",
+                  }
+                }
+                style={
+                  Object {
+                    "marginLeft": 14.45,
+                    "textIndent": -14.45,
+                  }
+                }
+              />
+            </div>
+            <div
+              className="pr12"
+              style={
+                Object {
+                  "paddingLeft": 26.45,
+                }
+              }
+            >
+              <div
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "settlementLabelLayer<span class=\\"token operator\\">?</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">setProperties</span><span class=\\"token punctuation\\">(</span><span class=\\"token function\\">textField</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">\\"{name_ru}\\"</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">)</span>",
+                  }
+                }
+                style={
+                  Object {
+                    "marginLeft": 14.45,
+                    "textIndent": -14.45,
+                  }
+                }
+              />
+            </div>
+            <div
+              className="pr12"
+              style={
+                Object {
+                  "paddingLeft": 12,
+                }
+              }
+            >
+              <div
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<span class=\\"token punctuation\\">}</span>",
+                  }
+                }
+                style={
+                  Object {
+                    "marginLeft": 14.45,
+                    "textIndent": -14.45,
+                  }
+                }
+              />
+            </div>
+          </div>
+        </code>
+      </pre>
+      <div
+        className="absolute z2 top right mr6 mt6 color-white"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`contextless-android-activity-toggle Two languages renders as expected 1`] = `
 <div
   className="my24 prose"

diff --git a/...tless-android-activity-toggle/__tests__/contextless-android-activity-toggle-test-cases.js b/...tless-android-activity-toggle/__tests__/contextless-android-activity-toggle-test-cases.js
@@ -86,6 +86,18 @@ testCases.twoLang = {
   }
 };
 
+testCases.kotlinOnly = {
+  component: ContextlessAndroidActivityToggle,
+  description: 'Kotlin only',
+  props: {
+    context: contextJava,
+    id: 'test-kotlin-only',
+    kotlin: kotlin,
+    limitHeight: true,
+    onCopy: () => {}
+  }
+};
+
 testCases.filename = {
   component: ContextlessAndroidActivityToggle,
   description: 'Two languages with filename',

diff --git a/...contextless-android-activity-toggle/__tests__/contextless-android-activity-toggle.test.js b/...contextless-android-activity-toggle/__tests__/contextless-android-activity-toggle.test.js
@@ -38,4 +38,22 @@ describe('contextless-android-activity-toggle', () => {
       expect(tree).toMatchSnapshot();
     });
   });
+
+  describe(testCases.kotlinOnly.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      testCase = testCases.kotlinOnly;
+      wrapper = renderer.create(
+        React.createElement(testCase.component, testCase.props)
+      );
+      tree = wrapper.toJSON();
+    });
+
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/components/contextless-android-activity-toggle/__tests__/find-selected-code.test.js b/src/components/contextless-android-activity-toggle/__tests__/find-selected-code.test.js
@@ -0,0 +1,41 @@
+import { findSelectedCode } from '../contextless-android-activity-toggle';
+
+test(`twoLanguagesKotlinPreferred`, () => {
+  expect(
+    findSelectedCode(
+      'some kotlin code string',
+      'some java code string',
+      'kotlin'
+    )
+  ).toEqual('some kotlin code string');
+});
+
+test(`twoLanguagesJavaPreferred`, () => {
+  expect(
+    findSelectedCode('some kotlin code string', 'some java code string', 'java')
+  ).toEqual('some java code string');
+});
+
+test(`onlyKotlinAvailableJavaPreferred`, () => {
+  expect(
+    findSelectedCode('some kotlin code string', undefined, 'java')
+  ).toEqual('some kotlin code string');
+});
+
+test(`onlyKotlinAvailableKotlinPreferred`, () => {
+  expect(
+    findSelectedCode('some kotlin code string', undefined, 'kotlin')
+  ).toEqual('some kotlin code string');
+});
+
+test(`onlyJavaAvailableKotlinPreferred`, () => {
+  expect(
+    findSelectedCode(undefined, 'some java code string', 'kotlin')
+  ).toEqual('some java code string');
+});
+
+test(`onlyJavaAvailableJavaPreferred`, () => {
+  expect(findSelectedCode(undefined, 'some java code string', 'java')).toEqual(
+    'some java code string'
+  );
+});
diff --git a/src/components/contextless-android-activity-toggle/contextless-android-activity-toggle.js b/src/components/contextless-android-activity-toggle/contextless-android-activity-toggle.js
@@ -4,6 +4,24 @@ import ToggleableCodeBlock from '../toggleable-code-block/toggleable-code-block'
 import { highlightJava } from '../highlight/java';
 import { highlightKotlin } from '../highlight/kotlin';
 
+export function findSelectedCode(kotlin, java, preference) {
+  let selectedCode = '';
+  if (kotlin === undefined) {
+    /* If there is no kotlin code, use java. */
+    selectedCode = java;
+  } else if (java === undefined) {
+    /* If there is no java code, use kotlin. */
+    selectedCode = kotlin;
+  } else if (preference === 'kotlin') {
+    /** If there is both java and kotlin code,
+     * use the preferred language. */
+    selectedCode = kotlin;
+  } else {
+    selectedCode = java;
+  }
+  return selectedCode;
+}
+
 export default class ContextlessAndroidActivityToggle extends React.Component {
   checkPreference = language => {
     return this.props.context.preferredLanguage.android === language;
@@ -21,10 +39,11 @@ export default class ContextlessAndroidActivityToggle extends React.Component {
       limitHeight
     } = this.props;
 
-    let selectedCode = '';
-    if (context) {
-      selectedCode = this.checkPreference('kotlin') ? kotlin : java;
-    }
+    const selectedCode = findSelectedCode(
+      kotlin,
+      java,
+      context.preferredLanguage.android
+    );
 
     const snippetProps = {
       copyRanges: copyRanges || undefined,
@@ -89,7 +108,7 @@ ContextlessAndroidActivityToggle.propTypes = {
   /* A unique `id` is required for the language toggle. */
   id: PropTypes.string.isRequired,
   /* Every code snippet must include raw Java code. */
-  java: PropTypes.string.isRequired,
+  java: PropTypes.string,
   /* Optionally, the code snippet can include raw Kotlin code.
   If this is included, the language toggle will be displayed. */
   kotlin: PropTypes.string,

diff --git a/src/components/feedback/__tests__/__snapshots__/feedback.test.js.snap b/src/components/feedback/__tests__/__snapshots__/feedback.test.js.snap
@@ -67,47 +67,35 @@ exports[`feedback Change type (sends anonymous user information) renders as expe
 exports[`feedback Feedback placement (sends anonymous user information) renders as expected 1`] = `
 <div>
   <div
-    className="sticky-outer-wrapper"
-    style={Object {}}
+    className="border-t border-b border--gray-light bg-white"
+    data-swiftype-index="false"
   >
     <div
-      className="sticky-inner-wrapper"
-      style={
-        Object {
-          "position": "relative",
-          "top": "0px",
-          "zIndex": 4,
-        }
-      }
+      className="limiter"
     >
       <div
-        className="border-t border-b border--gray-light bg-white"
-        data-swiftype-index="false"
+        className="grid grid--gut36 mr-neg36 mr0-mm"
       >
         <div
-          className="limiter"
+          className="col col--4-mm col--12"
         >
           <div
-            className="grid grid--gut36 mr-neg36 mr0-mm"
+            className="ml24-mm  flex-parent flex-parent--center-cross"
+            style={
+              Object {
+                "height": 52,
+              }
+            }
           >
             <div
-              className="col col--4-mm col--12"
+              className="flex-parent"
             >
-              <div
-                className="ml24-mm  flex-parent flex-parent--center-cross"
-                style={
-                  Object {
-                    "height": 52,
-                  }
-                }
+              <a
+                className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+                href="/api/"
               >
-                <a
-                  className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-                  href="/api/"
-                >
-                  API Documentation
-                </a>
-              </div>
+                API Documentation
+              </a>
             </div>
           </div>
         </div>