Merge branch 'master' into form-shorthand-props

tabler · Jun 5, 2018 · 7281d2f · 7281d2f
2 parents cf963e7 + 3ef2495
commit 7281d2f
Show file tree

Hide file tree

Showing 30 changed files with 211 additions and 211 deletions.
diff --git a/example/public/documentation/index.html b/example/public/documentation/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.3b1ce0e9.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.d8db5f20.js"></script></body></html>
diff --git a/example/src/HomePage.react.js b/example/src/HomePage.react.js
@@ -327,23 +327,23 @@ function Home() {
                   </Card.Body>
                 </Card>
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="New feedback"
                   content="62"
                   progressColor="red"
                   progressWidth={28}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Today profit"
                   content="$652"
                   progressColor="green"
                   progressWidth={84}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Users online"
                   content="76"
@@ -359,8 +359,7 @@ function Home() {
               icon="dollar-sign"
               header={
                 <a>
-                  132
-                  <small>Sales</small>
+                  132 <small>Sales</small>
                 </a>
               }
               footer={"12 waiting payments"}
@@ -372,8 +371,7 @@ function Home() {
               icon="shopping-cart"
               header={
                 <a>
-                  78
-                  <small>Orders</small>
+                  78 <small>Orders</small>
                 </a>
               }
               footer={"32 shipped"}
@@ -385,8 +383,7 @@ function Home() {
               icon="users"
               header={
                 <a>
-                  1,352
-                  <small>Members</small>
+                  1,352 <small>Members</small>
                 </a>
               }
               footer={"163 registered today"}
@@ -398,8 +395,7 @@ function Home() {
               icon="message-square"
               header={
                 <a>
-                  132
-                  <small>Comments</small>
+                  132 <small>Comments</small>
                 </a>
               }
               footer={"16 waiting"}

diff --git a/rollup.config.js b/rollup.config.js
@@ -12,23 +12,23 @@ export default {
   output: [
     {
       file: pkg.main,
-      format: "cjs"
+      format: "cjs",
     },
     {
       file: pkg.module,
-      format: "es"
-    }
+      format: "es",
+    },
   ],
   plugins: [
     external(),
     postcss({
-      modules: true
+      modules: false,
     }),
     url(),
     babel({
-      exclude: "node_modules/**"
+      exclude: "node_modules/**",
     }),
     resolve(),
-    commonjs()
-  ]
+    commonjs(),
+  ],
 };
diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
@@ -28,6 +28,10 @@ type DefaultProps = {|
    * Is this Dropdown a Card option?
    */
   +isOption?: boolean,
+  /**
+   * Add flex classes to the Dropdown
+   */
+  +flex?: boolean | "xs" | "sm" | "md" | "lg" | "xl",
 |};
 
 type WithAnyTriggerProps = {|
@@ -159,13 +163,22 @@ class Dropdown extends React.Component<Props, State> {
   };
 
   render(): React.Node {
-    const { className, children, desktopOnly, isOption, ...props } = this.props;
+    const {
+      className,
+      children,
+      desktopOnly,
+      isOption,
+      flex = false,
+      ...props
+    } = this.props;
 
     const classes = cn(
       {
         dropdown: true,
         "d-none": desktopOnly,
-        "d-md-flex": desktopOnly,
+        "d-md-flex": desktopOnly || flex === "md",
+        [`d-{flex}-flex`]: ["xs", "sm", "lg", "xl"].includes(flex),
+        "d-flex": flex === true,
         "card-options-dropdown": isOption,
         show: this.state.isOpen,
       },

diff --git a/src/components/Header/H1.react.js b/src/components/Header/H1.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h1 HTML element with a margin below
+ */
 function H1({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

diff --git a/src/components/Header/H2.react.js b/src/components/Header/H2.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h2 HTML element with a margin below
+ */
 function H2({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

diff --git a/src/components/Header/H3.react.js b/src/components/Header/H3.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h3 HTML element with a margin below
+ */
 function H3({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

diff --git a/src/components/Header/H4.react.js b/src/components/Header/H4.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h4 HTML element with a margin below
+ */
 function H4({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

diff --git a/src/components/Header/H5.react.js b/src/components/Header/H5.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h5 HTML element with a margin below
+ */
 function H5({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

diff --git a/src/components/Header/H6.react.js b/src/components/Header/H6.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h6 HTML element with a margin below
+ */
 function H6({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (

diff --git a/src/components/Header/Header.react.js b/src/components/Header/Header.react.js
@@ -25,6 +25,7 @@ type Props = {|
 
 /**
  * A header
+ * By default renders a div not a <hX> tag and has no additional spacing classes applied
  */
 function Header({
   RootComponent,

diff --git a/src/components/List/List.react.js b/src/components/List/List.react.js
@@ -12,14 +12,22 @@ type Props = {|
   +className?: string,
   +unstyled?: boolean,
   +seperated?: boolean,
+  +inline?: boolean,
 |};
 
-function List({ className, children, unstyled, seperated }: Props): React.Node {
+function List({
+  className,
+  children,
+  unstyled,
+  seperated,
+  inline,
+}: Props): React.Node {
   const classes = cn(
     {
       list: !unstyled,
       "list-unstyled": unstyled,
       "list-seperated": seperated,
+      "list-inline": inline,
     },
     className
   );

diff --git a/src/components/List/ListItem.react.js b/src/components/List/ListItem.react.js
@@ -6,10 +6,11 @@ import cn from "classnames";
 type Props = {|
   +children?: React.Node,
   +className?: string,
+  +inline?: boolean,
 |};
 
-function ListItem({ className, children }: Props): React.Node {
-  const classes = cn(className);
+function ListItem({ className, children, inline }: Props): React.Node {
+  const classes = cn({ "list-inline-item": inline }, className);
   return <li className={classes}>{children}</li>;
 }
 

diff --git a/src/components/Media/MediaBodySocial.react.js b/src/components/Media/MediaBodySocial.react.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import { List, Media, Tooltip } from "../";
+import { List, Icon, Media, SocialNetworksList, Tooltip } from "../";
 
 export type Props = {|
   +children?: React.Node,
@@ -31,10 +31,10 @@ function MediaBodySocial({
 
   if (facebook) {
     fbIcon = (
-      <List.Item className="list-inline-item">
+      <List.Item inline>
         <Tooltip content="Facebook" placement="top">
           <a href="/Profile">
-            <i className="fa fa-facebook" />
+            <Icon prefix="fa" name="facebook" />
           </a>
         </Tooltip>
       </List.Item>
@@ -43,10 +43,10 @@ function MediaBodySocial({
 
   if (twitter) {
     twitterIcon = (
-      <List.Item className="list-inline-item">
+      <List.Item inline>
         <Tooltip content="Twitter" placement="top">
           <a href="/Profile">
-            <i className="fa fa-twitter" />
+            <Icon prefix="fa" name="twitter" />
           </a>
         </Tooltip>
       </List.Item>
@@ -55,10 +55,10 @@ function MediaBodySocial({
 
   if (phone) {
     phoneIcon = (
-      <List.Item className="list-inline-item">
+      <List.Item inline>
         <Tooltip content="+1 234-567-8901" placement="top">
           <a href="/Profile">
-            <i className="fa fa-phone" />
+            <Icon prefix="fa" name="phone" />
           </a>
         </Tooltip>
       </List.Item>
@@ -67,10 +67,10 @@ function MediaBodySocial({
 
   if (skype) {
     skypeIcon = (
-      <List.Item className="list-inline-item">
+      <List.Item inline>
         <Tooltip content="@skypename" placement="top">
           <a href="/Profile">
-            <i className="fa fa-skype" />
+            <Icon prefix="fa" name="skype" />
           </a>
         </Tooltip>
       </List.Item>
@@ -80,12 +80,12 @@ function MediaBodySocial({
     <Media.Body>
       <h4 className="m-0">{name}</h4>
       <p className="text-muted mb-0">{workTitle}</p>
-      <List className="social-links list-inline mb-0 mt-2">
+      <SocialNetworksList className="mb-0 mt-2">
         {fbIcon}
         {twitterIcon}
         {phoneIcon}
         {skypeIcon}
-      </List>
+      </SocialNetworksList>
       {children}
     </Media.Body>
   );

diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js
@@ -33,6 +33,7 @@ function NotificationTray(props: Props): React.Node {
       position="bottom-end"
       arrow={true}
       arrowPosition="right"
+      flex
       items={
         <React.Fragment>
           {(notifications &&

diff --git a/src/components/Profile/Profile.react.js b/src/components/Profile/Profile.react.js
@@ -3,7 +3,7 @@
 import * as React from "react";
 import cn from "classnames";
 
-import { Card, Header, Button, Icon } from "../../components";
+import { Card, Header, SocialNetworksList } from "../../components";
 
 import ProfileImage from "./ProfileImage.react";
 
@@ -26,19 +26,21 @@ function Profile({
   backgroundURL = "",
   bio,
 }: Props): React.Node {
-  const classes = cn("card card-profile", className);
+  const classes = cn("card-profile", className);
   return (
-    <div className={classes}>
+    <Card className={classes}>
       <Card.Header backgroundURL={backgroundURL} />
       <Card.Body className="text-center">
         <ProfileImage avatarURL={avatarURL} />
         <Header.H3 className="mb-3">{name}</Header.H3>
         <p className="mb-4">{bio || children}</p>
-        <Button outline color="primary" size="sm">
-          <Icon name="twitter" prefix="fa" /> Follow
-        </Button>
+        <SocialNetworksList
+          itemsObjects={[{ name: "twitter", label: "Follow" }]}
+          prefix="fa"
+          asButtons
+        />
       </Card.Body>
-    </div>
+    </Card>
   );
 }