Add very basic implementation of Variable component

packages/api-explorer/__tests__/Variable.test.jsx

@@ -0,0 +1,64 @@
+const React = require('react');
+const { shallow } = require('enzyme');
+
+const Variable = require('../src/Variable');
+
+test('should render variable', () => {
+  const variable = shallow(<Variable value="123456" />);
+
+  expect(variable.text()).toBe('123456');
+});
+
+test('should render the first of multiple values', () => {
+  const variable = shallow(
+    <Variable
+      k="apiKey"
+      value={[{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]}
+    />,
+  );
+
+  expect(variable.text()).toBe('123');
+});
+
+test('should render whatever the selected name is', () => {
+  const variable = shallow(
+    <Variable
+      k="apiKey"
+      value={[{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]}
+      selected="project2"
+    />,
+  );
+
+  expect(variable.text()).toBe('456');
+});
+
+test('should show dropdown when clicked', () => {
+  const variable = shallow(
+    <Variable
+      k="apiKey"
+      value={[{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]}
+      selected="project2"
+    />,
+  );
+
+  variable.simulate('click');
+
+  expect(variable.find('ul li').map(el => el.text())).toEqual(['project1', 'project2']);
+});
+
+test('should select value when clicked', () => {
+  const variable = shallow(
+    <Variable
+      k="apiKey"
+      value={[{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }, { name: 'project3'}]}
+      selected="project1"
+    />,
+  );
+
+  variable.simulate('click');
+  variable.find('ul li').at(1).simulate('click', { target: { innerText: variable.find('ul li').at(1).text() } });
+
+  expect(variable.text()).toBe('456');
+});
+
+test('should render auth dropdown if default');

packages/api-explorer/src/Variable.jsx

@@ -0,0 +1,36 @@
+const React = require('react');
+
+class Variable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { showDropdown: false, selected: props.selected };
+
+    this.showDropdown = this.showDropdown.bind(this);
+    this.selectValue = this.selectValue.bind(this);
+  }
+  showDropdown() {
+    this.setState({ showDropdown: true });
+  }
+  selectValue(event) {
+    this.setState({ selected: event.target.innerText, showDropdown: false });
+  }
+  render() {
+    const { k, value } = this.props;
+
+    const { selected } = this.state;
+
+    if (this.state.showDropdown) {
+      return (
+        <ul>{value.map(key => <li onClick={this.selectValue} key={key.name}>{key.name}</li>)}</ul>
+      );
+    }
+
+    if (Array.isArray(value)) {
+      const selectedValue = selected ? value.find(key => key.name === selected) : value[0];
+      return <span onClick={this.showDropdown}>{selectedValue[k]}</span>;
+    }
+    return <span>{value}</span>;
+  }
+}
+
+module.exports = Variable;

packages/api-explorer/src/block-types/TextArea.jsx

@@ -2,6 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const markdown = require('../lib/markdown');
 const sanitizeSchema = require('hast-util-sanitize/lib/github.json');
+const Variable = require('../Variable');
 const variableParser = require('../lib/markdown/variable-parser.js');
 
 sanitizeSchema.tagNames.push('readme-variable');
@@ -17,7 +18,7 @@ function renderMarkdown(text) {
       sanitize: sanitizeSchema,
       remarkReactComponents: {
         'readme-variable': function ({ variable }) {
-          return <span>{variable}</span>
+          return <Variable k={variable} value={[{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }]} />
         },
       },
     })