playbook_ui 4.17.0.pre.alpha1 → 4.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca51dc32d53a72d5c123069a7e04a6ef47932186205e12045d43c821176dfcc9
-  data.tar.gz: bf975204f5af8b96cce1a49bdd3c0017e52b5abd355367fa1f821f1e42cba194
+  metadata.gz: 7c60678bea5dfbd0876ea029d5ee3ee8acddec0ffb70c76dbdf98834c2502af5
+  data.tar.gz: 96100434503a2403c3fcf50dea881b520a2d3ff14f93afd5542e7f149f9a31cf
 SHA512:
-  metadata.gz: a41e5ae5f1b4cd9837989b7c38afffa70fdd0a7c7fa3abc711f705adebe9ebc0848ec1b55012657c29f35cbf8e5f837e7124c3b2ed1d6333995e6a4eea5ffab0
-  data.tar.gz: c340a6d38c692fe2978a282694cc1d157f142f705b1e433d487cf4fea209a159b3410571f9ddab7b99bbfb9b00061fd0e1220f3d3ac81b97f1f175aa82c404ff
+  metadata.gz: 473b7c3b876ca669ab9a2ce799c661af6fd4689843548535d62cf16ff88e699e9330076d0dd3c35b9d935ac6a71f926572d43426a2c17f6dca34c3b3f2feb7b7
+  data.tar.gz: 9892a24ec8caa7570080db1cb329a83440a18c8a557e27df14c0421afd07ce9a1490af3aa10fd2ad2fccfb6573f3310145359248a6897da1c946253b1086d3f4

data/README.md

@@ -9,12 +9,6 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. `$ npm install playbook-ui`
-1. Import styles `@import '~playbook-ui/dist/playbook.css';`
-
-
-## Contribute
-
 1. Run `yarn && bundle`
 1. Run `make start`
 1. Install overcommit hooks `bin/overcommit`

data/app/pb_kits/playbook/_playbook.scss

@@ -4,6 +4,7 @@
 @import "pb_card/card";
 @import "pb_title/title";
 @import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
@@ -77,3 +78,5 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import './utilities/spacing';
+

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

@@ -3,6 +3,7 @@ samples:
   - something
 kits:
   - avatar
+  - avatar_action_button
   - badge
   - buttons:
     - button

data/app/pb_kits/playbook/index.js

@@ -1,9 +1,6 @@
-import './_playbook.scss'
-import 'lazysizes/plugins/attrchange/ls.attrchange'
-import 'lazysizes'
-
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
+export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'

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

@@ -14,6 +14,7 @@ import WebpackerReact from 'webpacker-react'
 
 import '../pb_form/pb_form_validation'
 import * as Avatar from 'pb_avatar/docs'
+import * as AvatarActionButton from 'pb_avatar_action_button/docs'
 import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
@@ -91,6 +92,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.setup({
   ...Avatar,
+  ...AvatarActionButton,
   ...Badge,
   ...BarGraph,
   ...Body,

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -37,7 +37,7 @@
     background: #122b3b;
     color: #faf6e4;
     padding: 0.1rem 0.3rem;
-    margin: 1rem 5px;
+    margin: 0 5px;
     box-shadow: 0 2px 10px $shadow;
     border-radius: 0.25rem;
     overflow: hidden;

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

@@ -4,34 +4,43 @@ import React from 'react'
 import classnames from 'classnames'
 import { map } from 'lodash'
 
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+
 import { Image } from '../'
 
 type AvatarProps = {
+  aria?: object,
   className?: String,
-  name: String,
+  data?: object,
+  id?: String,
   imageUrl: String,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  status: 'online' | 'away',
+  name: String,
+  size?: "md" | "lg" | "sm" | "xl" | "xs",
+  status: "away" | "offline" | "online",
 }
 
-const firstTwoInitials = (name) => (
+const firstTwoInitials = (name) =>
   map(name.split(/\s/), (name) => name[0])
     .join('')
     .substring(0, 2)
-)
-
-const Avatar = ({
-  className,
-  name = null,
-  imageUrl,
-  size = 'md',
-  status = null,
-}: AvatarProps) => {
-  const classes = classnames(['pb_avatar_kit', `avatar_${size}`, className])
+
+const Avatar = (props: AvatarProps) => {
+  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
+  const dataProps = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_avatar_kit', size), className, spacing(props))
+
   const initials = name && firstTwoInitials(name)
+  dataProps['data-initials'] = initials
 
   return (
-    <div className={classes}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <div
           className="avatar_wrapper"
           data-initials={initials}

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarStatus = () => {
+  return (
+    <>
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+      />
+
+      <br />
+
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="online"
+      />
+
+      <br />
+
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="away"
+      />
+
+      <br />
+
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="offline"
+      />
+
+      <br />
+    </>
+  )
+}
+
+export default AvatarStatus

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

@@ -1,8 +1,9 @@
 examples:
   rails:
-  - avatar_default: Default
-  - avatar_monogram: Monogram
-  - avatar_status: Status
+    - avatar_default: Default
+    - avatar_monogram: Monogram
+    - avatar_status: Status
   react:
-  - avatar_default: Default
-  - avatar_monogram: Monogram
+    - avatar_default: Default
+    - avatar_monogram: Monogram
+    - avatar_status: Status

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb

@@ -0,0 +1,32 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      
+
+    <% if object.tooltip_text.present? %>
+        <%= pb_rails("tooltip", props: {
+          trigger_element_id: object.tooltip_id,
+          tooltip_id: "tooltip-2",
+          position: 'top',
+          dark: true,
+        }) do %>
+          <%= object.tooltip_text %>
+        <% end %>
+    <% end %>
+
+    <%= link_to object.link_url, id: object.tooltip_id do %>
+
+      <%= pb_rails("avatar", props: {
+        name: object.name,
+        size: object.size,
+        image_url: object.image_url,
+        class: "avatar_action"
+      }) %>
+        <div class="icon">
+            <%= pb_rails("icon", props: {
+              icon: object.action_icons
+            }) %>
+        </div>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -0,0 +1,78 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Avatar, Icon } from '../'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type AvatarActionButtonProps = {
+  action?: String,
+  aria: Object,
+  className?: String,
+  data?: Object,
+  imageUrl?: String,
+  linkUrl?: String,
+  name?: String,
+  onClick?: String,
+  placement?: String,
+  size?: String,
+}
+
+const AvatarActionButton = ({
+  action = 'add',
+  aria = {},
+  className,
+  data = {},
+  imageUrl,
+  linkUrl,
+  name,
+  onClick,
+  placement = 'bottom left',
+  size = 'md',
+}: AvatarActionButtonProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_avatar_action_button_kit': true,
+    [action]: true,
+    [placement]: true,
+    [size]: true,
+  })
+
+  const icons = {
+    add: 'plus-circle',
+    remove: 'times-circle',
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
+      <a
+          href={linkUrl}
+          onClick={onClick}
+      >
+        <Avatar
+            imageUrl={imageUrl}
+            name={name}
+            size={size}
+        />
+        <div className="icon">
+          <Icon
+              icon={icons[action]}
+          />
+        </div>
+      </a>
+    </div>
+  )
+}
+
+export default AvatarActionButton

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -0,0 +1,63 @@
+[class^=pb_avatar_action_button_kit] {
+
+  $icon_size: 0px;
+  $border_size: 0px;
+
+  $action-colors: (
+    "add": $primary,
+    "remove": $error,
+  );
+
+  @each $key, $value in $action-colors {
+    &[class*=_#{$key}] a {
+      color: $value;
+    }
+  }
+  
+  @mixin icon-base {
+    width: $icon_size;
+    height: $icon_size;
+    position: absolute;
+    background-color: $white;
+    border-radius: $icon_size;
+    font-size: ($icon_size - $border_size * 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  @each $name, $size in $avatar-sizes {
+    
+    &[class*=_#{$name}] {
+      
+      $avatar_size: map-get($avatar-sizes, $name);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
+
+      position: relative;
+      width: $avatar_size * 1.25;
+      height: $avatar_size * 1.1;
+      display: flex;
+    
+      [class^=pb_tooltip_kit] {
+        justify-self: center;
+      }
+    
+      &[class*=_bottom] .icon {
+        @include icon-base;
+        top: $icon_size * 1.27;
+      }
+      &[class*=_top] .icon {
+        @include icon-base;
+        bottom: $icon_size * 1.27;
+      }
+      &[class*=_right] .icon {
+        left: $icon_size * 1.5;
+      }
+      &[class*=_left] [class^=pb_avatar_kit] {
+        padding-left: $icon_size / 2;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAvatarActionButton
+    class AvatarActionButton
+      include Playbook::Props
+
+      prop :action, type: Playbook::Props::String,
+                    default: "add"
+      prop :image_url, type: Playbook::Props::String
+      prop :link_url, type: Playbook::Props::String
+      prop :tooltip_text, type: Playbook::Props::String
+      prop :tooltip_id, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String,
+                  default: ""
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md lg xl],
+                  default: "md"
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[bottom_left bottom_right top_left top_right],
+                       default: "bottom_left"
+
+      partial "pb_avatar_action_button/avatar_action_button"
+
+      def classname
+        generate_classname("pb_avatar_action_button_kit", action, size, placement)
+      end
+
+      def action_icons
+        icon_hash = {
+          add: "plus-circle",
+          remove: "times-circle",
+        }
+        # if an 'action' prop is passed that isn't
+        # in the icon_hash an empty string is returned
+        # instead of a null value, which would break the page
+
+        # double pipe ruby syntax below is essentially a reduced if-else statement
+        # if icon_hash[action.to_sym] returns a falsey value, return "" instead
+        icon_hash[action.to_sym] ||= ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb

@@ -0,0 +1,15 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "add",
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "remove",
+  }) %>
+
+</div>