Merge branch 'master' into account-pages

Author: jonthomp

package.json

@@ -26,7 +26,9 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "copytablercsstodist":
       "mkdir -p dist && cp src/Tabler.css src/Tabler.RTL.css dist/ && cp -r src/fonts src/images dist/",
-    "cm": "git-cz"
+    "cm": "git-cz",
+    "startagain":
+      "rm -rf dist node_modules example/node_modules yarn.lock example/yarn.lock && yarn install && cd example && yarn install && cd .. && yarn build"
   },
   "lint-staged": {
     "src/**/*.js": "eslint --max-warnings=0"
@@ -68,7 +70,7 @@
     "gh-pages": "^1.1.0",
     "husky": "^0.14.3",
     "lint-staged": "^7.0.4",
-    "prettier": "1.12.1",
+    "prettier": "1.13.0",
     "pretty-quick": "^1.4.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

src/components/BlogCard/BlogCard.examples.md

@@ -0,0 +1,15 @@
+```jsx
+<BlogCard
+  title="And this isn't my nose. This is a false one."
+  postUrl="#"
+  description="Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr..."
+  avatarUrl="https://tabler.github.io/tabler/demo/faces/female/18.jpg"
+  authorName="Rose Bradley"
+  profileHref="/profile.html"
+  date="3 days ago"
+  imgUrl="https://tabler.github.io/tabler/demo/photos/david-klaasen-54203-500.jpg"
+  imgAlt="Penguin"
+  iconName="heart"
+  iconHref="#"
+/>
+```

src/components/BlogCard/BlogCard.react.js

@@ -0,0 +1,108 @@
+//@flow
+
+import * as React from "react";
+import Card from "../Card/Card.react";
+import Icon from "../Icon/Icon.react";
+
+type Props = {|
+  +children?: React.Node,
+  +title?: string,
+  +titleUrl?: string,
+  +avatarUrl?: string,
+  +description?: string,
+  +date?: string,
+  +imgUrl?: string,
+  +iconName?: string,
+  +iconHref?: string,
+  +authorName?: string,
+  +avatarImgSrc?: string,
+  +imgSrc?: string,
+  +imgAlt?: string,
+  +aside?: boolean,
+  +postHref?: string,
+  +profileHref?: string,
+|};
+
+function BlogCard({
+  children,
+  title,
+  description,
+  avatarUrl,
+  imgUrl,
+  imgAlt,
+  aside,
+  authorName,
+  date,
+  imgSrc = "",
+  avatarImgSrc = "",
+  iconName,
+  iconHref,
+  postHref,
+  profileHref,
+}: Props): React.Node {
+  return !aside ? (
+    <Card>
+      <a href={postHref}>
+        <img className="card-img-top" src={imgSrc} alt={imgAlt} />
+      </a>
+      <Card.Body className="d-flex flex-column">
+        <h4>
+          <a href={postHref}>{title}</a>
+        </h4>
+        <div className="text-muted">{description}</div>
+        <div className="d-flex align-items-center pt-5 mt-auto">
+          <div
+            className="avatar avatar-md mr-3"
+            style={{ backgroundImage: `url(${avatarImgSrc}` }}
+          />
+          <div>
+            <a href={profileHref} className="text-default">
+              {authorName}
+            </a>
+            <small className="d-block text-muted">{date}</small>
+          </div>
+          <div className="ml-auto text-muted">
+            <a href={iconHref} className="icon d-none d-md-inline-block ml-3">
+              <Icon prefix="fe" name={iconName || "heart"} />
+            </a>
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
+  ) : (
+    <Card className="card-aside">
+      <a
+        href={postHref}
+        className="card-aside-column"
+        style={{ backgroundImage: `url(${imgSrc})` }}
+      >
+        {""}
+      </a>
+      <Card.Body className="d-flex flex-column">
+        <h4>
+          <a href={postHref}>{title}</a>
+        </h4>
+        <div className="text-muted">{description}</div>
+        <div className="d-flex align-items-center pt-5 mt-auto">
+          <div
+            className="avatar avatar-md mr-3"
+            style={{ backgroundImage: `url(${avatarImgSrc}` }}
+          />
+          <div>
+            <a href={profileHref} className="text-default">
+              {authorName}
+            </a>
+            <small className="d-block text-muted">{date}</small>
+          </div>
+          <div className="ml-auto text-red">
+            <a href={iconHref} className="icon d-none d-md-inline-block ml-3">
+              <Icon prefix="fe" name={iconName || "heart"} />
+            </a>
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}
+
+export default BlogCard;

src/components/BlogCard/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+import BlogCard from "./BlogCard.react.js";
+
+export { BlogCard as default };

src/components/Card/Card.react.js

@@ -29,6 +29,7 @@ type Props = {|
   +alert?: React.Node,
   +alertColor?: string,
   +footer?: string,
+  +aside?: boolean,
 |};
 
 type State = {|
@@ -83,6 +84,7 @@ class Card extends React.PureComponent<Props, State> {
       isCollapsible,
       isClosable,
       isFullscreenable,
+      aside,
       statusColor,
       statusSide,
       alert,
@@ -96,6 +98,7 @@ class Card extends React.PureComponent<Props, State> {
     const classes = cn(
       {
         card: true,
+        aside: aside,
         "card-collapsed": isCollapsed,
         "card-fullscreen": isFullscreen,
       },

src/components/index.js

@@ -4,6 +4,7 @@ export { default as AccountDropdown } from "./AccountDropdown";
 export { default as Alert } from "./Alert";
 export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
+export { default as BlogCard } from "./BlogCard";
 export { default as Button } from "./Button";
 export { default as Card } from "./Card";
 export { default as ContactCard } from "./ContactCard";
@@ -15,8 +16,8 @@ export { default as GalleryCard } from "./GalleryCard";
 export { default as Grid } from "./Grid";
 export { default as Header } from "./Header";
 export { default as Icon } from "./Icon";
-export { default as Loader } from "./Loader";
 export { default as List } from "./List";
+export { default as Loader } from "./Loader";
 export { default as Media } from "./Media";
 export { default as Nav } from "./Nav";
 export { default as Notification } from "./Notification";
@@ -30,9 +31,9 @@ export { default as Stamp } from "./Stamp";
 export { default as StampCard } from "./StampCard";
 export { default as StatsCard } from "./StatsCard";
 export { default as StoreCard } from "./StoreCard";
+export { default as TabbedCard } from "./TabbedCard";
 export { default as Table } from "./Table";
 export { default as Tag } from "./Tag";
 export { default as Text } from "./Text";
-export { default as TabbedCard } from "./TabbedCard";
-export { Tab, Tabs, TabbedContainer, TabbedHeader } from "./Tabs";
 export { default as Timeline } from "./Timeline";
+export { Tab, Tabs, TabbedContainer, TabbedHeader } from "./Tabs";