Merge branch 'master' into node-updates

* master: replace `description` with children and make it required in RelatedPage (#239) create playground theme for RelatedPage (#234) Create vimeo modal option for RelatedPage (#236)
mapbox · Feb 5, 2020 · bec5935 · bec5935
2 parents 846ab2c + 7e631f7
commit bec5935
Show file tree

Hide file tree

Showing 12 changed files with 1,008 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,11 @@
 
 ## Master
 
-* Fix overflow issue with `RelatedPage` in IE11. [#238](https://github.com/mapbox/dr-ui/pull/238)
+* Updates to `RelatedPage` component:
+  * 🚨 Replace `description` with children and make it required. [#239](https://github.com/mapbox/dr-ui/pull/239)
+  * Fix overflow issue in IE11. [#238](https://github.com/mapbox/dr-ui/pull/238)
+  * Create Vimeo modal option (`vimeoId` and `vimeoThumbnail`) . [#236](https://github.com/mapbox/dr-ui/pull/236)
+  * Add playground theme. [#234](https://github.com/mapbox/dr-ui/pull/234)
 
 ## 0.25.5
 

diff --git a/src/components/playground-image/__tests__/__snapshots__/playground-image.test.js.snap b/src/components/playground-image/__tests__/__snapshots__/playground-image.test.js.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`playground-image Basic renders as expected 1`] = `
+<svg
+  height={60}
+  viewBox="0 0 60 60"
+  width={60}
+>
+  <circle
+    cx="29.4"
+    cy="30.6"
+    fill="#3F5B75"
+    r="25"
+  />
+  <path
+    d="M44.4 48.1s0-.1 0 0c0-.7-.1-1.5-.5-2.4L33.5 25.6h-3.7l-3.7-.1-10.4 20.1c-.4 1-.6 1.8-.5 2.5 0 2.4 6.5 4.4 14.7 4.4 7.9 0 14.4-1.9 14.5-4.4z"
+    fill="#0E1519"
+  />
+  <path
+    d="M43.4 43.8L33.3 24.5V17h.4c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7h-7.9c-.4 0-.7.3-.7.7s.3.7.7.7h.3v7.6L16.1 44c-.3.8-.5 1.4-.4 2v.3c.4 2.3 6.5 4.1 14.1 4.1 7.8 0 14.1-2 14.1-4.3 0-.6-.1-1.5-.5-2.3z"
+    fill="#CDDCE8"
+  />
+  <path
+    d="M39.3 42l-6.9-13.4h-4.9l-7 13.4c-.3.6-.4 1.2-.4 1.6 0 1.7 4.4 3 9.8 3 5.3 0 9.7-1.3 9.7-3 0-.5-.1-1-.3-1.6z"
+    fill="#FFF"
+  />
+  <circle
+    cx="31.1"
+    cy="19.6"
+    fill="#FFF"
+    r="1.2"
+  />
+  <circle
+    cx="27"
+    cy="8.6"
+    fill="#FFF"
+    r="1.2"
+  />
+  <circle
+    cx="29"
+    cy="24"
+    fill="#FFF"
+    r="1.2"
+  />
+  <circle
+    cx="29"
+    cy="15"
+    fill="#FFF"
+    r="1.8"
+  />
+  <circle
+    cx="32.4"
+    cy="11.1"
+    fill="#FFF"
+    r="1.4"
+  />
+</svg>
+`;
+
+exports[`playground-image Bigger renders as expected 1`] = `
+<svg
+  height={120}
+  viewBox="0 0 60 60"
+  width={120}
+>
+  <circle
+    cx="29.4"
+    cy="30.6"
+    fill="#3F5B75"
+    r="25"
+  />
+  <path
+    d="M44.4 48.1s0-.1 0 0c0-.7-.1-1.5-.5-2.4L33.5 25.6h-3.7l-3.7-.1-10.4 20.1c-.4 1-.6 1.8-.5 2.5 0 2.4 6.5 4.4 14.7 4.4 7.9 0 14.4-1.9 14.5-4.4z"
+    fill="#0E1519"
+  />
+  <path
+    d="M43.4 43.8L33.3 24.5V17h.4c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7h-7.9c-.4 0-.7.3-.7.7s.3.7.7.7h.3v7.6L16.1 44c-.3.8-.5 1.4-.4 2v.3c.4 2.3 6.5 4.1 14.1 4.1 7.8 0 14.1-2 14.1-4.3 0-.6-.1-1.5-.5-2.3z"
+    fill="#CDDCE8"
+  />
+  <path
+    d="M39.3 42l-6.9-13.4h-4.9l-7 13.4c-.3.6-.4 1.2-.4 1.6 0 1.7 4.4 3 9.8 3 5.3 0 9.7-1.3 9.7-3 0-.5-.1-1-.3-1.6z"
+    fill="#FFF"
+  />
+  <circle
+    cx="31.1"
+    cy="19.6"
+    fill="#FFF"
+    r="1.2"
+  />
+  <circle
+    cx="27"
+    cy="8.6"
+    fill="#FFF"
+    r="1.2"
+  />
+  <circle
+    cx="29"
+    cy="24"
+    fill="#FFF"
+    r="1.2"
+  />
+  <circle
+    cx="29"
+    cy="15"
+    fill="#FFF"
+    r="1.8"
+  />
+  <circle
+    cx="32.4"
+    cy="11.1"
+    fill="#FFF"
+    r="1.4"
+  />
+</svg>
+`;
diff --git a/src/components/playground-image/__tests__/playground-image-test-cases.js b/src/components/playground-image/__tests__/playground-image-test-cases.js
@@ -0,0 +1,18 @@
+import PlaygroundImage from '../playground-image';
+
+const testCases = {};
+
+testCases.basic = {
+  component: PlaygroundImage,
+  description: 'Basic'
+};
+
+testCases.bigger = {
+  component: PlaygroundImage,
+  description: 'Bigger',
+  props: {
+    size: 120
+  }
+};
+
+export { testCases };
diff --git a/src/components/playground-image/__tests__/playground-image.test.js b/src/components/playground-image/__tests__/playground-image.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { testCases } from './playground-image-test-cases.js';
+
+describe('playground-image', () => {
+  describe(testCases.basic.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      testCase = testCases.basic;
+      wrapper = renderer.create(
+        React.createElement(testCase.component, testCase.props)
+      );
+      tree = wrapper.toJSON();
+    });
+
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe(testCases.bigger.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      testCase = testCases.bigger;
+      wrapper = renderer.create(
+        React.createElement(testCase.component, testCase.props)
+      );
+      tree = wrapper.toJSON();
+    });
+
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/playground-image/index.js b/src/components/playground-image/index.js
@@ -0,0 +1,3 @@
+import main from './playground-image';
+
+export default main;
diff --git a/src/components/playground-image/playground-image.js b/src/components/playground-image/playground-image.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class PlaygroundImage extends React.Component {
+  render() {
+    return (
+      <svg width={this.props.size} height={this.props.size} viewBox="0 0 60 60">
+        <circle fill="#3F5B75" cx="29.4" cy="30.6" r="25" />
+        <path
+          fill="#0E1519"
+          d="M44.4 48.1s0-.1 0 0c0-.7-.1-1.5-.5-2.4L33.5 25.6h-3.7l-3.7-.1-10.4 20.1c-.4 1-.6 1.8-.5 2.5 0 2.4 6.5 4.4 14.7 4.4 7.9 0 14.4-1.9 14.5-4.4z"
+        />
+        <path
+          fill="#CDDCE8"
+          d="M43.4 43.8L33.3 24.5V17h.4c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7h-7.9c-.4 0-.7.3-.7.7s.3.7.7.7h.3v7.6L16.1 44c-.3.8-.5 1.4-.4 2v.3c.4 2.3 6.5 4.1 14.1 4.1 7.8 0 14.1-2 14.1-4.3 0-.6-.1-1.5-.5-2.3z"
+        />
+        <path
+          fill="#FFF"
+          d="M39.3 42l-6.9-13.4h-4.9l-7 13.4c-.3.6-.4 1.2-.4 1.6 0 1.7 4.4 3 9.8 3 5.3 0 9.7-1.3 9.7-3 0-.5-.1-1-.3-1.6z"
+        />
+        <circle fill="#FFF" cx="31.1" cy="19.6" r="1.2" />
+        <circle fill="#FFF" cx="27" cy="8.6" r="1.2" />
+        <circle fill="#FFF" cx="29" cy="24" r="1.2" />
+        <circle fill="#FFF" cx="29" cy="15" r="1.8" />
+        <circle fill="#FFF" cx="32.4" cy="11.1" r="1.4" />
+      </svg>
+    );
+  }
+}
+
+PlaygroundImage.propTypes = {
+  size: PropTypes.number
+};
+
+PlaygroundImage.defaultProps = {
+  size: 60
+};