playbook_ui 2.5.0

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import classnames from 'classnames';
+import { map } from 'lodash'
+import Image from "../pb_image/_image.jsx";
+
+const propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.string,
+  size: PropTypes.string,
+  url: PropTypes.string
+};
+
+const defaultProps = {
+  name: null,
+  size: "base"
+};
+
+const initials = function(name) {
+  if (name) {
+    return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
+  }
+};
+
+const image = function(url, name) {
+  if (url) {
+    return (
+      <Image alt={name}
+          url={url}
+      />
+    )
+  }
+};
+
+class Avatar extends React.Component {
+  render() {
+    const {
+      className,
+      name,
+      size,
+      url
+    } = this.props;
+
+    const css = classnames([
+      `avatar_${size}`,
+      className,
+    ])
+
+    return (
+      <div className={css}
+          data-initials={initials(name)}
+      >
+        {image(url, name)}
+      </div>
+    )
+  }
+}
+
+Avatar.propTypes = propTypes;
+Avatar.defaultProps = defaultProps;
+
+export default Avatar;

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -0,0 +1,49 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/typography";
+
+.avatar {
+  $avatar-sizes: (
+    "xs":   28px,
+    "sm":   38px,
+    "md":   60px,
+    "base": 60px,
+    "lg":   80px,
+    "xl":   100px,
+  );
+
+  @each $name, $size in $avatar-sizes {
+    &_#{$name}, &_#{$name}_thumb {
+      width: $size;
+      height: $size;
+      object-fit: cover;
+      border-radius: $border-rad-mega;
+      background: $slate;
+      overflow: hidden;
+      position: relative;
+
+      &::before {
+        content: attr(data-initials);
+        width: 100%;
+        height: 100%;
+        display: block;
+        color: $white;
+        text-align: center;
+        font-size: $size * 0.38;
+        line-height: $size;
+        text-transform: uppercase;
+        position: relative;
+        z-index: 0;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -0,0 +1,82 @@
+module Playbook
+  module PbAvatar
+    class Avatar < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+            :configured_data,
+            :configured_id,
+            :configured_name,
+            :configured_size,
+            :configured_text,
+            :configured_url].freeze
+
+      def initialize(classname: default_configuration,
+                    data: default_configuration,
+                    id: default_configuration,
+                    name: default_configuration,
+                    size: default_configuration,
+                    text: default_configuration,
+                    url: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_name = name
+        self.configured_size = size
+        self.configured_text = text
+        self.configured_url = url
+      end
+
+      def name
+        if configured_name == default_configuration
+          ""
+        else
+          configured_name
+        end
+      end
+
+      def initials
+        if configured_name == default_configuration
+          ""
+        else
+          configured_name.split.map(&:first).join.downcase
+        end
+      end
+
+      def size
+        if configured_size == default_configuration
+          "base"
+        else
+          configured_size
+        end
+      end
+
+      def text
+        if configured_text == default_configuration
+          ""
+        else
+          configured_text
+        end
+      end
+
+      def url
+        if configured_url == default_configuration
+          ""
+        else
+          configured_url
+        end
+      end
+
+      def to_partial_path
+        "pb_avatar/avatar"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import Avatar from "../_avatar.jsx"
+
+function AvatarDefault() {
+  return (
+    <div>
+      <Avatar name="Terry Johnson" size="xs" url="https://randomuser.me/api/portraits/men/44.jpg" />
+      <Avatar name="Terry Johnson" size="sm" url="https://randomuser.me/api/portraits/men/44.jpg" />
+      <Avatar name="Terry Johnson" size="md" url="https://randomuser.me/api/portraits/men/44.jpg" />
+      <Avatar name="Terry Johnson" size="lg" url="https://randomuser.me/api/portraits/men/44.jpg" />
+      <Avatar name="Terry Johnson" size="xl" url="https://randomuser.me/api/portraits/men/44.jpg" />
+    </div>
+  )
+}
+
+export default AvatarDefault;

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import Avatar from "../_avatar.jsx"
+
+function AvatarDefault() {
+  return (
+    <div>
+      <Avatar name="Terry Johnson" size="xs" />
+      <Avatar name="Terry Johnson" size="sm" />
+      <Avatar name="Terry Johnson" size="md" />
+      <Avatar name="Terry Johnson" size="lg" />
+      <Avatar name="Terry Johnson" size="xl" />
+    </div>
+  )
+}
+
+export default AvatarDefault;

data/app/pb_kits/playbook/pb_avatar/docs/example.yml

@@ -0,0 +1,7 @@
+examples:
+  rails:
+  - avatar_default: Default
+  - avatar_monogram: Monogram
+  react:
+  - avatar_default: Default
+  - avatar_monogram: Monogram

data/app/pb_kits/playbook/pb_avatar/docs/index.js

@@ -0,0 +1,2 @@
+export {default as AvatarDefault} from './_avatar_default.jsx';
+export {default as AvatarMonogram} from './_avatar_monogram.jsx';

data/app/pb_kits/playbook/pb_body/_body.html.erb

@@ -0,0 +1,4 @@
+<%= content_tag(:"#{object.tag}", object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname("body#{object.color}#{object.dark}")) %>

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+const propTypes = {
+  text: PropTypes.string.isRequired,
+  tag: PropTypes.string,
+  color: PropTypes.string,
+  dark: PropTypes.bool
+};
+
+const defaultProps = {
+  text: "Hello Body Component",
+  tag: "p",
+  color: "",
+  dark: false
+};
+
+class Body extends Component {
+  render() {
+    const { tag, text, color, dark } = this.props;
+    // If color prop is not an empty string then render the given class
+    const colorstyle = color !== "" ? `_${color}` : "";
+
+    // If dark prop is true add the '-dark' class
+    const themestyle = dark === true ? "_dark" : "";
+
+    const Tag = `${tag}`;
+
+    return <Tag className={"body" + colorstyle + themestyle}>{text}</Tag>;
+  }
+}
+
+Body.propTypes = propTypes;
+Body.defaultProps = defaultProps;
+
+export default Body;

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -0,0 +1,37 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/line_height";
+
+.body {
+
+  $selectors: (
+    "&",
+    "&_light",
+    "&_lighter",
+    "&_dark",
+    "&_light_dark",
+    "&_lighter_dark",
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      margin: 0;
+      line-height: $lh_tight;
+      @if $selector == "&_dark" {
+        color: $white;
+      } @else if $selector == "&_light" {
+        color: $ink_lightest;
+      } @else if $selector == "&_lighter" {
+        color: $sky_dark;
+      } @else if $selector == "&_light_dark" {
+        color: $white_opacity_6;
+      } @else if $selector == "&_lighter_dark" {
+        color: $white_opacity_4;
+      } @else {
+        color: $ink;
+      }
+
+    }
+  }
+
+}

data/app/pb_kits/playbook/pb_body/body.rb

@@ -0,0 +1,76 @@
+module Playbook
+  module PbBody
+    class Body < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+          :configured_color,
+          :configured_dark,
+          :configured_data,
+          :configured_id,
+          :configured_tag,
+          :configured_text].freeze
+
+      def initialize(classname: default_configuration,
+                   color: default_configuration,
+                   dark: default_configuration,
+                   data: default_configuration,
+                   id: default_configuration,
+                   tag: default_configuration,
+                   text: default_configuration)
+        self.configured_classname = classname
+        self.configured_color = color
+        self.configured_dark = dark
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_tag = tag
+        self.configured_text = text
+      end
+
+      def color
+        if configured_color == default_configuration
+          ""
+        else
+          "_#{configured_color}"
+        end
+      end
+
+      def dark
+        if configured_dark == default_configuration
+          ""
+        else
+          if (configured_dark == true)
+            "_dark"
+          end
+        end
+      end
+
+      def tag
+        if configured_tag == default_configuration
+          "p"
+        else
+          configured_tag
+        end
+      end
+
+      def text
+        if configured_text == default_configuration
+          "This is some text"
+        else
+          configured_text
+        end
+      end
+
+      def to_partial_path
+        "pb_body/body"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("body", props: { text: "I am a body kit (Default)", dark: true }) %>
+<%= pb_rails("body", props: { text: "I am a body kit (Light)", color: "light", dark: true }) %>
+<%= pb_rails("body", props: { text: "I am a body kit (Lighter)", color: "lighter", dark: true }) %>

data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx

@@ -0,0 +1,14 @@
+import React from "react"
+import Body from "../_body.jsx"
+
+function BodyDark() {
+  return (
+    <div>
+      <Body dark text="I am a body kit (Default)" />
+      <Body dark color="light" text="I am a body kit (Light)" />
+      <Body dark color="lighter" text="I am a body kit (Lighter)" />
+    </div>
+  )
+}
+
+export default BodyDark;

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("body", props: { text: "I am a body kit (Default)"}) %>
+<%= pb_rails("body", props: { text: "I am a body kit (Light)", color: "light" }) %>
+<%= pb_rails("body", props: { text: "I am a body kit (Lighter)", color: "lighter" }) %>