Remove Mbx prefix (#28)

mapbox · Aug 3, 2018 · 050d1d1 · 050d1d1
1 parent 5b19a30
commit 050d1d1
Show file tree

Hide file tree

Showing 31 changed files with 137 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,9 @@
 
 ## HEAD
 
-- Add **MbxButton** component.
-- Add **MbxIconText** component.
-- Add **MbxUnderlineTabs** component.
+- Add **Button** component.
+- Add **IconText** component.
+- Add **UnderlineTabs** 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.
 

diff --git a/...s__/__snapshots__/mbx-button.test.js.snap → ...tests__/__snapshots__/button.test.js.snap b/...s__/__snapshots__/mbx-button.test.js.snap → ...tests__/__snapshots__/button.test.js.snap
@@ -76,12 +76,12 @@ exports[`Link with outline and icon text, extra padding renders as expected 1`]
   href="#"
   onClick={[MockFunction]}
 >
-  <MbxIconText
+  <IconText
     iconBefore="bug"
     spacing="small"
   >
     Go do things
-  </MbxIconText>
+  </IconText>
 </a>
 `;
 

diff --git a/...button/__tests__/mbx-button-test-cases.js → ...nts/button/__tests__/button-test-cases.js b/...button/__tests__/mbx-button-test-cases.js → ...nts/button/__tests__/button-test-cases.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import safeSpy from '../../../test-utils/safe-spy';
-import MbxButton from '../mbx-button';
-import MbxIconText from '../../mbx-icon-text';
+import Button from '../button';
+import IconText from '../../icon-text';
 
 const testCases = {};
 
 testCases.primary = {
   description: 'Primary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Primary',
     onClick: safeSpy()
@@ -16,7 +16,7 @@ testCases.primary = {
 
 testCases.secondary = {
   description: 'Secondary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Secondary',
     variant: 'secondary',
@@ -26,7 +26,7 @@ testCases.secondary = {
 
 testCases.discouraging = {
   description: 'Discouraging',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Discouraging',
     variant: 'discouraging',
@@ -36,7 +36,7 @@ testCases.discouraging = {
 
 testCases.destructive = {
   description: 'Destructive',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Destructive',
     variant: 'destructive',
@@ -46,7 +46,7 @@ testCases.destructive = {
 
 testCases.appPrimary = {
   description: 'AppPrimary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'AppPrimary',
     variant: 'appPrimary',
@@ -56,7 +56,7 @@ testCases.appPrimary = {
 
 testCases.appSecondary = {
   description: 'AppSecondary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'AppSecondary',
     variant: 'appSecondary',
@@ -66,9 +66,9 @@ testCases.appSecondary = {
 
 testCases.linkOutlinePadding = {
   description: 'Link with outline and icon text, extra padding',
-  component: MbxButton,
+  component: Button,
   props: {
-    children: <MbxIconText iconBefore="bug">Go do things</MbxIconText>,
+    children: <IconText iconBefore="bug">Go do things</IconText>,
     href: '#',
     onClick: safeSpy(),
     outline: true,
@@ -78,7 +78,7 @@ testCases.linkOutlinePadding = {
 
 testCases.fullWidthPurple = {
   description: 'Full width, alternate color',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Here we are',
     color: 'purple',
@@ -89,7 +89,7 @@ testCases.fullWidthPurple = {
 testCases.weird = {
   description:
     'Div styled like a medium destructive button with some extended props and transformed classes',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Save',
     size: 'medium',
@@ -106,7 +106,7 @@ testCases.weird = {
 
 testCases.disabled = {
   description: 'Disabled',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Oops',
     disabled: true
@@ -115,7 +115,7 @@ testCases.disabled = {
 
 testCases.disabledSecondary = {
   description: 'Disabled secondary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Oops',
     disabled: true,
@@ -126,7 +126,7 @@ testCases.disabledSecondary = {
 
 testCases.disabledSpecial = {
   description: 'Disabled appPrimary with color',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Oops',
     variant: 'appPrimary',

diff --git a/...s/mbx-button/__tests__/mbx-button.test.js → ...omponents/button/__tests__/button.test.js b/...s/mbx-button/__tests__/mbx-button.test.js → ...omponents/button/__tests__/button.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { testCases } from './mbx-button-test-cases';
+import { testCases } from './button-test-cases';
 
 describe(testCases.primary.description, () => {
   let testCase;

diff --git a/src/components/mbx-button/mbx-button.js → src/components/button/button.js b/src/components/mbx-button/mbx-button.js → src/components/button/button.js
@@ -30,14 +30,14 @@ const propNames = [
  * render a different element altogether.)
  *
  * If you'd like to put an icon before or after the text of your button,
- * use [MbxIconText](#mbxicontext) for the content.
+ * use [IconText](#mbxicontext) for the content.
  *
  * Any props you provide other than those documented here are passed through
  * directly to the element itself. This can be useful if you want to disable
  * the button, assign an ID for testing, add an ARIA attribute, toss in some
  * custom style properties, etc.
  */
-class MbxButton extends React.Component {
+class Button extends React.Component {
   render() {
     const props = applyVariant(this.props);
 
@@ -151,11 +151,11 @@ function applyVariant(props) {
   }
 }
 
-MbxButton.propTypes = {
+Button.propTypes = {
   /**
    * The button's content. A string is recommended, but you can put an element
    * in here if you think that's right. If you do, it should be inline-level,
-   * using `<span>`s instead of `<div>`s. ([MbxIconText](#mbxicontext) is
+   * using `<span>`s instead of `<div>`s. ([IconText](#mbxicontext) is
    * inline-level.)
    */
   children: PropTypes.node.isRequired,
@@ -245,10 +245,10 @@ MbxButton.propTypes = {
   component: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
-MbxButton.defaultProps = {
+Button.defaultProps = {
   variant: 'primary',
   block: false,
   transformClasses: x => x
 };
 
-export default MbxButton;
+export default Button;
diff --git a/...nents/mbx-button/examples/mbx-button-a.js → src/components/button/examples/button-a.js b/...nents/mbx-button/examples/mbx-button-a.js → src/components/button/examples/button-a.js
@@ -2,39 +2,39 @@
 All the standard variants.
 */
 import React from 'react';
-import MbxButton from '../mbx-button';
+import Button from '../button';
 
 export default class Example extends React.Component {
   render() {
     return (
       <div>
         <div className="my6">
-          <MbxButton onClick={noop}>Primary</MbxButton>
+          <Button onClick={noop}>Primary</Button>
         </div>
         <div className="my6">
-          <MbxButton variant="secondary" onClick={noop}>
+          <Button variant="secondary" onClick={noop}>
             Secondary
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="discouraging" onClick={noop}>
+          <Button variant="discouraging" onClick={noop}>
             Discouraging
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="destructive" onClick={noop}>
+          <Button variant="destructive" onClick={noop}>
             Destructive
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="appPrimary" onClick={noop}>
+          <Button variant="appPrimary" onClick={noop}>
             AppPrimary
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="appSecondary" onClick={noop}>
+          <Button variant="appSecondary" onClick={noop}>
             AppSecondary
-          </MbxButton>
+          </Button>
         </div>
       </div>
     );

diff --git a/src/components/button/examples/button-b.js b/src/components/button/examples/button-b.js
@@ -0,0 +1,16 @@
+/*
+A slightly wider, outlined button with an alternate color, using [IconText](#mbxicontext) to prefix the text with an icon.
+*/
+import React from 'react';
+import Button from '../button';
+import IconText from '../../icon-text';
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <Button onClick={() => {}} width="large" outline={true} color="purple">
+        <IconText iconBefore="floppy">Save your map</IconText>
+      </Button>
+    );
+  }
+}
diff --git a/...nents/mbx-button/examples/mbx-button-c.js → src/components/button/examples/button-c.js b/...nents/mbx-button/examples/mbx-button-c.js → src/components/button/examples/button-c.js
@@ -6,23 +6,23 @@ The additional prop `data-test` is passed on directly to the `<a>`.
 Also, `transformClasses` is used to add the drop-shadow class.
 */
 import React from 'react';
-import MbxButton from '../mbx-button';
+import Button from '../button';
 
 export default class Example extends React.Component {
   render() {
     const btnClasses = variantClasses => {
       return `${variantClasses} shadow-darken25`;
     };
     return (
-      <div id="mbx-button-c">
-        <MbxButton
-          href="#mbx-button-c"
+      <div id="button-c">
+        <Button
+          href="#button-c"
           size="medium"
           data-test="link-to-c"
           transformClasses={btnClasses}
         >
           You are here
-        </MbxButton>
+        </Button>
       </div>
     );
   }

diff --git a/...nents/mbx-button/examples/mbx-button-d.js → src/components/button/examples/button-d.js b/...nents/mbx-button/examples/mbx-button-d.js → src/components/button/examples/button-d.js
@@ -5,59 +5,59 @@ wrapper container with an Assembly width class.
 Sometimes, for example, you might want a column or row of equal-width buttons.
 */
 import React from 'react';
-import MbxButton from '../mbx-button';
+import Button from '../button';
 
 export default class Example extends React.Component {
   render() {
     return (
       <div>
         <div className="mb24 flex-parent">
           <div className="flex-child w120 mr12">
-            <MbxButton size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop}>
               Door
-            </MbxButton>
+            </Button>
           </div>
           <div className="flex-child w120 mr12">
-            <MbxButton size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop}>
               Dog
-            </MbxButton>
+            </Button>
           </div>
           <div className="flex-child w120 mr12">
-            <MbxButton size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop}>
               Dash
-            </MbxButton>
+            </Button>
           </div>
         </div>
         <div className="w60">
           <div className="my3">
-            <MbxButton
+            <Button
               variant="secondary"
               size="medium"
               width="full"
               onClick={noop}
             >
               A
-            </MbxButton>
+            </Button>
           </div>
           <div className="my3">
-            <MbxButton
+            <Button
               variant="secondary"
               size="medium"
               width="full"
               onClick={noop}
             >
               B
-            </MbxButton>
+            </Button>
           </div>
           <div className="my3">
-            <MbxButton
+            <Button
               variant="secondary"
               size="medium"
               width="full"
               onClick={noop}
             >
               C
-            </MbxButton>
+            </Button>
           </div>
         </div>
       </div>

diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -0,0 +1,3 @@
+import main from './button';
+
+export default main;
diff --git a/.../__snapshots__/mbx-icon-text.test.js.snap → ...ts__/__snapshots__/icon-text.test.js.snap b/.../__snapshots__/mbx-icon-text.test.js.snap → ...ts__/__snapshots__/icon-text.test.js.snap