playbook_ui 10.0.1 → 10.0.2.pre.alpha.pre.iconfix

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3d9f59712c2feedc5c8500bd521ebecd82c09fb2ea6312e8873b619d066d792
-  data.tar.gz: 3b89f01b558427fdbb5f6892ab0595cd89ba5dc6c5963c9245f917319cdbd0ce
+  metadata.gz: 62b6bcb6b36c501d383c226bf3445bc4339d43d222175f242bb68db89ef44152
+  data.tar.gz: b15b4e307f4f97a66db2761b2cba1973a67e19bd5e8a8ab6ef747655bb8985e0
 SHA512:
-  metadata.gz: 5ab31c5ca1f5be6a7c721193df7b9f0df8610e659bc08b719d57c03524c53991049df69164060b90e6c54ff8d752fce0ff5ca7df9c1d44c243c504b3f0be7a6b
-  data.tar.gz: 2910367d3d9dd7db1b2e435ecf2691c2b7116faf39a4ba6f015182a1330a5b449c817c595ca14b92301433ec05acb73409cd0637645c906184e59f892b8f88bf
+  metadata.gz: dc869834053fe2289cd31fc58350bb291d4a19658b6dce38b5a674e2ec38bc855912d3bbbe2c7dacc92a0968b6ae1f5172959721d3df469e3e4393259c63110e
+  data.tar.gz: 174f6d032e05b7e6f5718bfa4dc002959613d339265bbdebc8e2d8c48f0436ded74ada3635f08ad217f00acb0d2b059e359a6044c72bffbbeb710dfaeabcbf88

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-@import 'tokens/fonts';
 @import 'pb_background/background';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,6 +1,7 @@
 @import "./button_mixins";
 
 [class^=pb_button_kit]{
+  @include pb_button;
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -12,8 +12,17 @@ $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
+@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+  background-color: $bg;
+  color: $color;
+  border-color: $border;
+
+  &:active {
+    border-color: darken($bg, $pb_button_hover_darken);
+  }
+}
 
-@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+@mixin pb_button {
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
@@ -21,15 +30,12 @@ $pb_button_border_width: 0px;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
-  border-color: $border;
   border-style: solid;
   border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;
   cursor: pointer;
-  background-color: $bg;
-  color: $color;
   outline: none;
   transition: background $transition_default ease, color $transition_default ease;
   box-sizing: border-box;
@@ -57,7 +63,6 @@ $pb_button_border_width: 0px;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
-    border-color: darken($bg, $pb_button_hover_darken);
   }
   
 };
@@ -68,7 +73,7 @@ $pb_button_border_width: 0px;
 
 // Primary ======================
 @mixin pb_button_primary {
-  @include pb_button;
+  @include pb_button_variant($primary_action, $text_dk_default, transparent);
 
   @media (hover:hover) {
     &:hover {
@@ -79,7 +84,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button(rgba($primary_action, 0.05), $primary_action);
+  @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -90,7 +95,7 @@ $pb_button_border_width: 0px;
 
 // Link =========================
 @mixin pb_button_link {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button_variant($transparent, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -102,7 +107,7 @@ $pb_button_border_width: 0px;
 // Disabled ====================
 @mixin pb_button_disabled {
   $disabled_color: rgba($charcoal, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_4), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
 }
 
@@ -127,7 +132,7 @@ $pb_button_border_width: 0px;
 
 // Dark Primary =================
 @mixin pb_button_primary_dark{
-  @include pb_button($primary_action);
+  @include pb_button_variant($primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -138,7 +143,7 @@ $pb_button_border_width: 0px;
 
 // Dark Secondary ==============
 @mixin pb_button_secondary_dark{
-  @include pb_button(rgba($white, 0.2), $white);
+  @include pb_button_variant(rgba($white, 0.2), $white);
 
   @media (hover:hover) {
     &:hover {
@@ -149,7 +154,7 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $white);
+  @include pb_button_variant($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
@@ -161,6 +166,6 @@ $pb_button_border_width: 0px;
 // Dark Disabled ====================
 @mixin pb_button_disabled_dark {
   $disabled_color: rgba($white, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_5), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
   pointer-events: none;
 }

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -77,12 +77,13 @@ const Icon = (props: IconProps) => {
   // Lets check and see if the icon prop is referring to a custom Power icon...
   // If so, then set fa-icon to "custom"
   // this ensures the JS will not do any further operations
-  faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  if (!customIcon) faClasses[`fa-${icon}`] = icon
 
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    'far',
+    customIcon ? '' : 'far',
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -5,7 +5,7 @@ import { Icon } from '../../'
 const config = {
   moon: (
     <svg
-        aria-hidden="true"
+        ariaHidden="true"
         focusable="false"
         role="img"
         viewBox="0 0 512 512"

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -0,0 +1,11 @@
+### Experimental: Not currently available in the Rails version!
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb

@@ -0,0 +1,95 @@
+<%= pb_rails("body", props: {
+  text: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("body", props: {
+  text: "xxs",
+  margin_top: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  size: "xxs",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xxs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
-import { MultipleUsers } from '../../'
+import { Body, MultipleUsers } from '../../'
 
 const MultipleUsersSize = (props) => {
   return (
     <div>
+      <Body
+          color="light"
+          text="xs"
+      />
       <MultipleUsers
-          size="xxs"
           users={[
         {
           name: 'Patrick Welch',
@@ -32,20 +35,70 @@ const MultipleUsersSize = (props) => {
       />
 
       <br />
+
+      <MultipleUsers
+          marginTop="xs"
+          size="xs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+
+      <Body
+          color="light"
+          marginTop="xs"
+          text="xxs"
+      />
+      <MultipleUsers
+          size="xxs"
+          users={[
+            {
+              name: 'Patrick Welch',
+              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+            },
+            {
+              name: 'Lucille Sanchez',
+              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+            },
+            {
+              name: 'Beverly Reyes',
+              imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+            },
+            {
+              name: 'Keith Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+            },
+            {
+              name: 'Alicia Cooper',
+              imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+            },
+          ]}
+          {...props}
+      />
+
       <br />
 
       <MultipleUsers
+          marginTop="xs"
           size="xxs"
           users={[
-        {
-          name: 'Shawn Palmer',
-          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
-        },
-        {
-          name: 'Andrew Murray Cooper Craig',
-          imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
-        },
-      ]}
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
           {...props}
       />
     </div>

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
+  - multiple_users_size: Size
 
 
   react:

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -4,11 +4,11 @@
     data: object.data,
     id: object.id) do %>
     <% object.users.take(object.display_count).each do |user| %>
-      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item", dark: object.dark}) ) %>
+      <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge_xs">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -4,6 +4,9 @@ module Playbook
   module PbMultipleUsers
     class MultipleUsers < Playbook::KitBase
       prop :reverse, type: Playbook::Props::Boolean, default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xxs xs],
+                  default: "xs"
       prop :users, type: Playbook::Props::HashArray, required: true
 
       def more_than_four

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -23,6 +23,7 @@ type SelectableCardProps = {
   checked: boolean,
   children?: array<React.ReactChild>,
   className?: string,
+  customIcon?: SVGElement,
   dark?: boolean,
   data: object,
   disabled?: boolean,
@@ -43,6 +44,7 @@ const SelectableCard = ({
   checked = false,
   children,
   className,
+  customIcon,
   dark = false,
   data = {},
   disabled = false,
@@ -76,6 +78,7 @@ const SelectableCard = ({
       return (
         <div className="pb_selectable_card_circle">
           <Icon
+              customIcon={customIcon}
               fixedWidth
               icon="check"
           />

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -19,6 +19,7 @@ type SelectableCardIconProps = {
   checked?: boolean,
   checkmark: boolean,
   className?: string,
+  customIcon?: SVGElement,
   dark?: boolean,
   data?: Object,
   disabled?: boolean,
@@ -38,6 +39,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     checkmark = false,
     checked = false,
     className,
+    customIcon,
     dark = false,
     data = {},
     disabled = false,
@@ -72,6 +74,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
     >
       <SelectableCard
           checked={checked}
+          customIcon={customIcon}
           dark={dark}
           disabled={disabled}
           icon={checkmark}
@@ -84,6 +87,7 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
         {
           <>
             <SelectableIcon
+                customIcon={customIcon}
                 icon={icon}
                 inputs="disabled"
                 size="2x"