playbook_ui 4.6.1 → 4.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d387fc92462067f8aa0256e096f6b906a60d8ea8b5cd9d867a77aea89c1e375
-  data.tar.gz: df93c9c4209ac327a842979430b307016b6575b42f674a8d0f13080cafe05e01
+  metadata.gz: f34f10c04ef659f3679d3b315a4feb7262222f64e1e9d0a426b4351b6ebee6f9
+  data.tar.gz: 936991948f07486bd253c898c16c3f81976f61d690334afcedfd6f607642c7e3
 SHA512:
-  metadata.gz: 03d82fd5acaf38690231c80dd866191d704dec573cf5cece1a2d5ebcf2e58d917bf254ebfbf82e8e657592f0f58cc8e959e557edded130e9c924516ce737f71a
-  data.tar.gz: 90a51793ae0583ae8c5232d3adb64e12254d2eb2c4d187518c8d0cf51653a7a6c5c5f758e46445c516901015fbb148027ecbe9d6f1c264b84c165787724fed12
+  metadata.gz: 9cd4cf22cbcd44c01c45bbf4a988b3148014aca56b54e5e3db882e993b391204f11be7955dac5579654811a8a31e034fd4ed88cd1bc6d3fc6be5da9ee39168f6
+  data.tar.gz: 5c5bf0132b7ba17aebbc093f334f47bd05e352cc4370aba887b38135ab6c1675bbb02a1bd8876076e3c6bb08dfae69bd002fc6de0f883f0dc278cd61d30e6683

data/app/pb_kits/playbook/_playbook.scss

@@ -19,6 +19,7 @@
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
 @import 'pb_form/form';
+@import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';

data/app/pb_kits/playbook/data/menu.yml

@@ -1,4 +1,4 @@
-samples: 
+samples:
   - dashboards
 kits:
   - avatar
@@ -18,6 +18,7 @@ kits:
   - flex
   - forms:
     - form
+    - form_pill
     - radio
     - select
     - selectable_card

data/app/pb_kits/playbook/index.js

@@ -21,6 +21,7 @@ export Filter from './pb_filter/_filter.jsx'
 export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
+export FormPill from './pb_form_pill/_form_pill.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
 export Highlight from './pb_highlight/_highlight.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -34,6 +34,7 @@ import * as DistributionBar from 'pb_distribution_bar/docs'
 import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
+import * as FormPill from 'pb_form_pill/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -101,6 +102,7 @@ WebpackerReact.setup({
   ...Filter,
   ...FixedConfirmationToast,
   ...Flex,
+  ...FormPill,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,

data/app/pb_kits/playbook/packs/kits/pb_form_pill.js

@@ -0,0 +1 @@
+import '../../pb_form_pill/_form_pill.jsx'

data/app/pb_kits/playbook/pb_form_pill/_form_pill.html.erb

@@ -0,0 +1,22 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <% if object.name.present? %>
+      <%= pb_rails("avatar", props: {
+        name: object.name,
+        image_url: object.avatar_url,
+        size: "xs"
+      }) %>
+      <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+
+    <% elsif object.text.present? %>
+      <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+    <% end %>
+
+    <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+      <%= pb_rails("icon", props: { icon: 'times', fixed_width: true }) %>
+    <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -0,0 +1,60 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import Title from '../pb_title/_title.jsx'
+import Icon from '../pb_icon/_icon.jsx'
+import Avatar from '../pb_avatar/_avatar.jsx'
+
+type FormPillProps = {
+
+className?: String,
+id?: String,
+text: String,
+name: String,
+onClick?: EventHandler,
+avatar?: Boolean,
+avatarUrl?: String,
+}
+const FormPill = ({
+  className,
+  text,
+  name,
+  onClick = () => {},
+  avatarUrl,
+}: FormPillProps) => {
+  const css = classnames([
+    `pb_form_pill_kit_${'primary'}`,
+    className,
+  ])
+  return (
+    <div className={css}>
+      <If condition={name}>
+        <Avatar
+            imageUrl={avatarUrl}
+            name={name}
+            size="xs"
+        />
+        <Title
+            className="pb_form_pill_text"
+            size={4}
+            text={name}
+        />
+      </If>
+      <If condition={text}>
+        <Title
+            className="pb_form_pill_tag"
+            size={4}
+            text={text}
+        />
+      </If>
+      <div className="pb_form_pill_close">
+        <Icon
+            fixedWidth
+            icon="times"
+            onClick={onClick}
+        />
+      </div>
+    </div>
+  )
+}
+export default FormPill

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -0,0 +1,49 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/shadows";
+@import "../pb_avatar/avatar";
+
+$selector: ".pb_form_pill";
+$pb_form_pill_height: 37px;
+$form_pill_colors: (
+  primary: map-get($status_color_text, "primary"),
+);
+
+
+[class^=pb_form_pill_kit] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 $space-sm/3;
+  height: $pb_form_pill_height;
+  border-radius: $pb_form_pill_height/2;
+  @each $color_name, $color_value in $form_pill_colors {
+    &[class*=_#{$color_name}]  {
+      background-color: rgba($color_value, $opacity-1);
+      transition: background-color 0.2s ease;
+      box-shadow: none;
+      &:hover {
+        background-color: rgba($color_value, $opacity-2);
+      }
+      #{$selector}_text {
+        color: $color_value;
+        padding-left: $space-sm;
+        padding-right: $space-sm/4;
+      }
+      #{$selector}_close {
+        color: $color_value;
+        padding-left: $space-sm/2;
+        padding-right: $space-sm/4;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        cursor: pointer;
+      }
+      #{$selector}_tag {
+        color: $color_value;
+        padding-left: $space-sm;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("form_pill", props: {
+   text: "this is a tag"
+
+   }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+
+const FormPillDefault = () => {
+  return (
+    <div>
+      <FormPill text="this is a tag" />
+    </div>
+  )
+}
+export default FormPillDefault

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+
+   }) %>
+
+<br>
+<br>
+
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+
+const FormPillDefault = () => {
+  return (
+
+    <div>
+      <FormPill
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+      />
+      <br />
+      <br />
+      <FormPill name="Anna Black" />
+    </div>
+  )
+}
+
+export default FormPillDefault

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

@@ -0,0 +1,10 @@
+examples:
+
+  rails:
+  - form_pill_user: Form Pill User
+  - form_pill_tag: Form Pill Tag
+
+
+  react:
+  - form_pill_user: Form Pill User
+  - form_pill_tag: Form Pill Tag

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

@@ -0,0 +1,2 @@
+export { default as FormPillUser } from './_form_pill_user.jsx'
+export { default as FormPillTag } from './_form_pill_tag.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFormPill
+    class FormPill
+      include Playbook::Props
+
+      partial "pb_form_pill/form_pill"
+
+      prop :avatar_url
+      prop :name
+      prop :text
+
+      def classname
+        generate_classname("pb_form_pill_kit", "primary", name, text)
+      end
+
+      def display_text
+        name.downcase
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_home_address_street/_city_emphasis.html.erb

@@ -0,0 +1,40 @@
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
+<div>
+  <%= pb_rails "title", props: {
+    tag: "span",
+    size: 4,
+    text: object.city_state,
+    dark: object.dark
+  } %>
+  <%= pb_rails "body", props: {
+    tag: "span",
+    classname: "pb_home_zip",
+    color: "light",
+    text: object.zip,
+    dark: object.dark
+  } %>
+</div>
+
+<% if object.home_id %>
+  <%= pb_rails("hashtag", props: {
+    text: "#{object.home_id}",
+    url: object.home_url || "#",
+    type: "home",
+    dark: object.dark,
+    classname: "home-hashtag"}) %>
+<% end %>
+
+<%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
+  <small><%= object.territory %></small>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb

@@ -2,38 +2,9 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-
-  <%= pb_rails "body", props: {
-    color: "light",
-    text: object.city_state_zip,
-    dark: object.dark
-  } %>
-
-  <% if object.home_id %>
-    <%= pb_rails("hashtag", props: {
-      text: "#{object.home_id}",
-      url: object.home_url || "#",
-      type: "home",
-      dark: object.dark,
-      classname: "home-hashtag"}) %>
-  <% end %>
-
-  <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
-    <small><%= object.territory %></small>
-  <% end %>
-
-<% end %>
+  <% if object.emphasis == "city" %>
+		<%= render partial:"pb_home_address_street/city_emphasis.html.erb", locals: {object: object}%>
+	<% elsif object.emphasis == "street" %>
+		<%= render partial:"pb_home_address_street/street_emphasis.html.erb", locals: {object: object} %>
+	<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -12,6 +12,7 @@ type HomeAddressStreetProps = {
   city: String,
   className?: String,
   dark?: Boolean,
+  emphasis: 'street' | 'city',
   homeId: Number,
   houseStyle: String,
   homeUrl: String,
@@ -33,6 +34,7 @@ const HomeAddressStreet = ({
   city,
   className,
   dark = false,
+  emphasis = 'street',
   homeId,
   homeUrl,
   houseStyle,
@@ -41,24 +43,58 @@ const HomeAddressStreet = ({
   territory,
 }: HomeAddressStreetProps) => (
   <div className={classes(className, dark)}>
-    <Title
-        className="pb_home_address_street_address"
-        dark={dark}
-        size={4}
-    >
-      {joinPresent([titleize(address), houseStyle], ' · ')}
-    </Title>
+    {
+      <Choose>
+        <When condition={emphasis == 'street'}>
+          <div>
+            <Title
+                className="pb_home_address_street_address"
+                dark={dark}
+                size={4}
+            >
+              {joinPresent([titleize(address), houseStyle], ' · ')}
+            </Title>
+            <Title
+                className="pb_home_address_street_address"
+                dark={dark}
+                size={4}
+            >
+              {titleize(addressCont)}
+            </Title>
+            <Body color="light">
+              {`${titleize(city)}, ${state} ${zipcode}`}
+            </Body>
+          </div>
+        </When>
+        <When condition={emphasis == 'city'}>
+          <div>
+            <Body color="light">
+              {joinPresent([titleize(address), houseStyle], ' · ')}
+            </Body>
+            <Body color="light">
+              {titleize(addressCont)}
+            </Body>
+            <div>
+              <Title
+                  className="pb_home_address_street_address"
+                  dark={dark}
+                  size={4}
+                  tag="span"
+              >
+                {`${titleize(city)}, ${state}`}
+              </Title>
+              <Body
+                  color="light"
+                  tag="span"
+              >
+                {` ${zipcode}`}
+              </Body>
+            </div>
+          </div>
+        </When>
+      </Choose>
+    }
 
-    <Title
-        className="pb_home_address_street_address"
-        dark={dark}
-        size={4}
-    >
-      {titleize(addressCont)}
-    </Title>
-    <Body color="light">
-      {`${titleize(city)}, ${state} ${zipcode}`}
-    </Body>
     <If condition={homeId}>
       <Hashtag
           classname="home-hashtag"