MbxButton (#20)

CHANGELOG.md

@@ -2,8 +2,9 @@
 
 ## HEAD
 
-- Add *MbxIconText** component.
-- Add *MbxUnderlineTabs** component.
+- Add **MbxButton** component.
+- Add **MbxIconText** component.
+- Add **MbxUnderlineTabs** component.
 - **PopoverTrigger**
   - If the trigger responds to focus but not click, and you focus the trigger *first* and *then* click, that click *closes* the popover instead of leaving it open even after you move the mouse away.
 

package.json

@@ -62,7 +62,7 @@
     "@mapbox/batfish": "^1.9.2",
     "@mapbox/eslint-config-mapbox": "^1.2.1",
     "@mapbox/jsxtreme-markdown": "^0.9.3",
-    "@mapbox/react-test-kitchen": "^0.1.2",
+    "@mapbox/react-test-kitchen": "^0.3.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",

scripts/build-docs-data.js

@@ -34,11 +34,14 @@ function processExampleFile(filename) {
       .trim();
 
     const highlightedCode = Prism.highlight(code, Prism.languages.jsx, 'jsx');
+    const renderedDescription = encodeJsx(
+      jsxtremeMarkdown.toJsx(descriptionMatch[1].trim())
+    );
 
     return `{
       exampleModule: require('${filename}'),
-      code: \`${highlightedCode}\`,
-      description: ${jsxtremeMarkdown.toJsx(descriptionMatch[1].trim())}
+      code: \`${encodeJsx(highlightedCode)}\`,
+      description: ${renderedDescription}
     }`;
   });
 }
@@ -54,8 +57,9 @@ function processProps(props) {
   let objectBody = '';
   Object.keys(props).forEach(prop => {
     const propData = props[prop];
-    const renderedDescription =
-      jsxtremeMarkdown.toJsx(propData.description || ' ').trim() || '<div />';
+    const renderedDescription = encodeJsx(
+      jsxtremeMarkdown.toJsx(propData.description || ' ').trim() || '<div />'
+    );
     objectBody += `${prop}: {
       type: ${JSON.stringify(propData.type)},
       required: ${propData.required},
@@ -111,3 +115,8 @@ function generateDocsData() {
 }
 
 generateDocsData();
+
+// Prepare JSX to be written directly to the script without messing things up.
+function encodeJsx(x) {
+  return x.replace(/`/g, '&#96;').replace(/\$/, '&#36;');
+}

src/components/mbx-button/__tests__/__snapshots__/mbx-button.test.js.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppPrimary renders as expected 1`] = `
+<button
+  className="btn btn--gray round h24 px6 py3 txt-xs"
+  onClick={[MockFunction]}
+  type="button"
+>
+  AppPrimary
+</button>
+`;
+
+exports[`AppSecondary renders as expected 1`] = `
+<button
+  className="btn btn--gray btn--stroke round h24 px6 py3 txt-xs"
+  onClick={[MockFunction]}
+  type="button"
+>
+  AppSecondary
+</button>
+`;
+
+exports[`Destructive renders as expected 1`] = `
+<button
+  className="btn btn--red round-full py12 px24 txt-s"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Destructive
+</button>
+`;
+
+exports[`Disabled renders as expected 1`] = `
+<button
+  className="btn btn--blue round-full py12 px24 txt-s"
+  disabled={true}
+  type="button"
+>
+  Oops
+</button>
+`;
+
+exports[`Discouraging renders as expected 1`] = `
+<button
+  className="btn btn--gray btn--stroke btn--stroke--2 round-full py12 px24 txt-s"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Discouraging
+</button>
+`;
+
+exports[`Div styled like a medium destructive button with some extended props and transformed classes renders as expected 1`] = `
+<div
+  className="btn btn--red round-full py6 px24 txt-s shadow-darken75 unselectable cursor-pointer"
+  data-test="foo"
+  onClick={[MockFunction]}
+  role="button"
+>
+  Save
+</div>
+`;
+
+exports[`Full width, alternate color renders as expected 1`] = `
+<button
+  className="btn btn--purple round-full py12 w-full block txt-s"
+  type="button"
+>
+  Here we are
+</button>
+`;
+
+exports[`Link with outline and icon text, extra padding renders as expected 1`] = `
+<a
+  className="btn btn--blue btn--stroke btn--stroke--2 round-full py12 px36 txt-s"
+  href="#"
+  onClick={[MockFunction]}
+>
+  <MbxIconText
+    iconBefore="bug"
+    spacing="small"
+  >
+    Go do things
+  </MbxIconText>
+</a>
+`;
+
+exports[`Primary renders as expected 1`] = `
+<button
+  className="btn btn--blue round-full py12 px24 txt-s"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Primary
+</button>
+`;
+
+exports[`Secondary renders as expected 1`] = `
+<button
+  className="btn btn--blue btn--stroke btn--stroke--2 round-full py12 px24 txt-s"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Secondary
+</button>
+`;

src/components/mbx-button/__tests__/mbx-button-test-cases.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import safeSpy from '../../../test-utils/safe-spy';
+import MbxButton from '../mbx-button';
+import MbxIconText from '../../mbx-icon-text';
+
+const testCases = {};
+
+testCases.primary = {
+  description: 'Primary',
+  component: MbxButton,
+  props: {
+    children: 'Primary',
+    onClick: safeSpy()
+  }
+};
+
+testCases.secondary = {
+  description: 'Secondary',
+  component: MbxButton,
+  props: {
+    children: 'Secondary',
+    variant: 'secondary',
+    onClick: safeSpy()
+  }
+};
+
+testCases.discouraging = {
+  description: 'Discouraging',
+  component: MbxButton,
+  props: {
+    children: 'Discouraging',
+    variant: 'discouraging',
+    onClick: safeSpy()
+  }
+};
+
+testCases.destructive = {
+  description: 'Destructive',
+  component: MbxButton,
+  props: {
+    children: 'Destructive',
+    variant: 'destructive',
+    onClick: safeSpy()
+  }
+};
+
+testCases.appPrimary = {
+  description: 'AppPrimary',
+  component: MbxButton,
+  props: {
+    children: 'AppPrimary',
+    variant: 'appPrimary',
+    onClick: safeSpy()
+  }
+};
+
+testCases.appSecondary = {
+  description: 'AppSecondary',
+  component: MbxButton,
+  props: {
+    children: 'AppSecondary',
+    variant: 'appSecondary',
+    onClick: safeSpy()
+  }
+};
+
+testCases.linkOutlinePadding = {
+  description: 'Link with outline and icon text, extra padding',
+  component: MbxButton,
+  props: {
+    children: <MbxIconText iconBefore="bug">Go do things</MbxIconText>,
+    href: '#',
+    onClick: safeSpy(),
+    outline: true,
+    width: 'large'
+  }
+};
+
+testCases.fullWidthPurple = {
+  description: 'Full width, alternate color',
+  component: MbxButton,
+  props: {
+    children: 'Here we are',
+    color: 'purple',
+    width: 'full'
+  }
+};
+
+testCases.weird = {
+  description:
+    'Div styled like a medium destructive button with some extended props and transformed classes',
+  component: MbxButton,
+  props: {
+    children: 'Save',
+    size: 'medium',
+    variant: 'destructive',
+    onClick: safeSpy(),
+    transformClasses: classes => {
+      return classes + ' shadow-darken75 unselectable cursor-pointer';
+    },
+    component: 'div',
+    role: 'button',
+    'data-test': 'foo'
+  }
+};
+
+testCases.disabled = {
+  description: 'Disabled',
+  component: MbxButton,
+  props: {
+    children: 'Oops',
+    disabled: true
+  }
+};
+
+testCases.disabledSecondary = {
+  description: 'Disabled secondary',
+  component: MbxButton,
+  props: {
+    children: 'Oops',
+    disabled: true,
+    variant: 'secondary',
+    onClick: safeSpy()
+  }
+};
+
+testCases.disabledSpecial = {
+  description: 'Disabled appPrimary with color',
+  component: MbxButton,
+  props: {
+    children: 'Oops',
+    variant: 'appPrimary',
+    onClick: safeSpy(),
+    disabled: true,
+    color: 'gray'
+  }
+};
+
+export { testCases };