Merge pull request #81 from dabapps/button-updates

Props updates (button, ipsum, spaced block)
dabapps · Jun 16, 2017 · 30c35c8 · 30c35c8
2 parents 17480c4 + b6569a1
commit 30c35c8
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 87 deletions.
diff --git a/docs/src/ts/atomic-text.tsx b/docs/src/ts/atomic-text.tsx
@@ -45,25 +45,25 @@ const AtomicText = () => (
         </p>
 
         <p className="primary">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
         <p className="secondary">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
         <p className="tertiary">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
         <p className="info">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
         <p className="success">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
         <p className="warning">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
         <p className="error">
-          <DabIpsum type="text" />
+          <DabIpsum component="text" />
         </p>
       </Column>
     </Row>
@@ -93,25 +93,25 @@ const AtomicText = () => (
             </p>
 
             <p className="primary">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
             <p className="secondary">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
             <p className="tertiary">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
             <p className="info">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
             <p className="success">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
             <p className="warning">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
             <p className="error">
-              <DabIpsum type="text" />
+              <DabIpsum component="text" />
             </p>
           `}
         </CodeBlock>

diff --git a/docs/src/ts/buttons.tsx b/docs/src/ts/buttons.tsx
@@ -34,25 +34,25 @@ const Buttons = () => (
             <Button disabled>
               Disabled
             </Button>
-            <Button type="primary">
+            <Button className="primary">
               Primary
             </Button>
-            <Button type="secondary">
+            <Button className="secondary">
               Secondary
             </Button>
-            <Button type="tertiary">
+            <Button className="tertiary">
               Tertiary
             </Button>
-            <Button type="info">
+            <Button className="info">
               Info
             </Button>
-            <Button type="success">
+            <Button className="success">
               Success
             </Button>
-            <Button type="warning">
+            <Button className="warning">
               Warning
             </Button>
-            <Button type="error">
+            <Button className="error">
               Error
             </Button>
           </SpacedGroup>
@@ -62,7 +62,7 @@ const Buttons = () => (
           <Button block>
             Block
           </Button>
-          <Button block type="primary">
+          <Button block className="primary">
             Block Primary
           </Button>
         </p>
@@ -117,25 +117,25 @@ const Buttons = () => (
                 <Button disabled>
                   Disabled
                 </Button>
-                <Button type="primary">
+                <Button className="primary">
                   Primary
                 </Button>
-                <Button type="secondary">
+                <Button className="secondary">
                   Secondary
                 </Button>
-                <Button type="tertiary">
+                <Button className="tertiary">
                   Tertiary
                 </Button>
-                <Button type="info">
+                <Button className="info">
                   Info
                 </Button>
-                <Button type="success">
+                <Button className="success">
                   Success
                 </Button>
-                <Button type="warning">
+                <Button className="warning">
                   Warning
                 </Button>
-                <Button type="error">
+                <Button className="error">
                   Error
                 </Button>
               </SpacedGroup>
@@ -145,7 +145,7 @@ const Buttons = () => (
               <Button block>
                 Block
               </Button>
-              <Button block type="primary">
+              <Button block className="primary">
                 Block Primary
               </Button>
             </p>
@@ -202,7 +202,7 @@ const Buttons = () => (
         </p>
         <CodeBlock language="javascript" name="Custom button JSX">
           {`
-            <Button type="custom" />
+            <Button className="custom" />
           `}
         </CodeBlock>
       </Column>

diff --git a/docs/src/ts/ipsum.tsx b/docs/src/ts/ipsum.tsx
@@ -27,12 +27,12 @@ const Ipsum = () => (
         </h3>
         <p>
           <strong>
-            <DabIpsum type="text" />
+            <DabIpsum component="text" />
           </strong>
         </p>
-        <DabIpsum type="p" count={5} />
-        <DabIpsum type="ul" count={3} />
-        <DabIpsum type="ol" count={3} />
+        <DabIpsum component="p" count={5} />
+        <DabIpsum component="ul" count={3} />
+        <DabIpsum component="ol" count={3} />
       </Column>
     </Row>
     <Row>
@@ -44,12 +44,12 @@ const Ipsum = () => (
           {`
             <p>
               <strong>
-                <DabIpsum type="text" />
+                <DabIpsum component="text" />
               </strong>
             </p>
-            <DabIpsum type="p" count={5} /> // Default
-            <DabIpsum type="ul" count={3} />
-            <DabIpsum type="ol" count={3} />
+            <DabIpsum component="p" count={5} /> // Default
+            <DabIpsum component="ul" count={3} />
+            <DabIpsum component="ol" count={3} />
           `}
         </CodeBlock>
       </Column>

diff --git a/docs/src/ts/modals.tsx b/docs/src/ts/modals.tsx
@@ -53,7 +53,7 @@ class Modals extends React.Component<{}, IState> {
             </h3>
             <ModalRenderer modals={modals} />
 
-            <Button type="primary" onClick={this.onClickOpenModal}>
+            <Button className="primary" onClick={this.onClickOpenModal}>
               Open modal
             </Button>
           </Column>
@@ -97,7 +97,7 @@ class Modals extends React.Component<{}, IState> {
                         </p>
                         <ModalFooter>
                           <p>
-                            <Button type="primary" onClick={this.onClickCloseModal}>
+                            <Button className="primary" onClick={this.onClickCloseModal}>
                               Close
                             </Button>
                           </p>
@@ -115,7 +115,7 @@ class Modals extends React.Component<{}, IState> {
               {`
                 <ModalRenderer modals={modals} />
 
-                <Button type="primary" onClick={this.onClickOpenModal}>
+                <Button className="primary" onClick={this.onClickOpenModal}>
                   Open modal
                 </Button>
               `}
@@ -152,7 +152,7 @@ class Modals extends React.Component<{}, IState> {
           </p>
           <ModalFooter>
             <p>
-              <Button type="primary" onClick={this.onClickCloseModal}>
+              <Button className="primary" onClick={this.onClickCloseModal}>
                 Close
               </Button>
             </p>

diff --git a/docs/src/ts/spaced-groups.tsx b/docs/src/ts/spaced-groups.tsx
@@ -32,12 +32,23 @@ const SpacedGroups = () => (
             <Button>
               Cancel
             </Button>
-            <Button type="primary">
+            <Button className="primary">
               Continue
             </Button>
           </SpacedGroup>
         </p>
 
+        <p>
+          <SpacedGroup large block>
+            <Button>
+              Cancel
+            </Button>
+            <Button className="error">
+              Delete
+            </Button>
+          </SpacedGroup>
+        </p>
+
         <p>
           <SpacedGroup>
             <a>
@@ -65,12 +76,23 @@ const SpacedGroups = () => (
                 <Button>
                   Cancel
                 </Button>
-                <Button type="primary">
+                <Button className="primary">
                   Continue
                 </Button>
               </SpacedGroup>
             </p>
 
+            <p>
+              <SpacedGroup large block>
+                <Button>
+                  Cancel
+                </Button>
+                <Button className="error">
+                  Delete
+                </Button>
+              </SpacedGroup>
+            </p>
+
             <p>
               <SpacedGroup>
                 <a>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "roe",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

diff --git a/src/less/spaced-group.less b/src/less/spaced-group.less
@@ -1,8 +1,30 @@
-.spaced-group > * { // lesshint universalSelector: false
-  display: inline-block;
-  margin-right: @margin-base;
+.spaced-group {
+  & > * { // lesshint universalSelector: false
+    display: inline-block;
+    margin-right: @margin-base;
 
-  &:last-child {
-    margin-right: 0;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &.block {
+    display: block;
+  }
+
+  &.small > * { // lesshint universalSelector: false
+    margin-right: @margin-small;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &.large > * { // lesshint universalSelector: false
+    margin-right: @margin-large;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
diff --git a/src/ts/button.tsx b/src/ts/button.tsx
@@ -5,7 +5,6 @@ export interface IProps {
   block?: boolean;
   large?: boolean;
   small?: boolean;
-  type?: string;
 }
 
 export const Button: React.SFC<IProps & React.HTMLProps<HTMLButtonElement>> = (props) => {
@@ -15,7 +14,6 @@ export const Button: React.SFC<IProps & React.HTMLProps<HTMLButtonElement>> = (p
     block,
     large,
     small,
-    type,
     ...remainingProps
   } = props;
 
@@ -24,7 +22,6 @@ export const Button: React.SFC<IProps & React.HTMLProps<HTMLButtonElement>> = (p
     block ? 'block' : null,
     small ? 'small' : null,
     large ? 'large' : null,
-    type,
     className
   ];