playbook_ui 12.32.0 → 12.33.0.pre.alpha.PLAY905reactionbuttons979

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a79955ccab5fc9bbdbb96a5a4d10cd3f65f6e85801573552c171032bae82ca4b
-  data.tar.gz: bb3d6b87543fbfce6c0ce0d1d006d73b670d239ae77acde85be73effcb5af1a9
+  metadata.gz: 7aa8d82bf0d62f5bc3d999c73377126bcdc6ac414183c6753274c9fbee02fb61
+  data.tar.gz: 1d197fe5c96073b458bea5753d2433029ab42d0d3ef41b3df2b42ae7751b0412
 SHA512:
-  metadata.gz: 3a9c508c6a7fef4e46f8bc0127a8afd4cfa33f3e7622428447c7beac1849bccb0a671ddb3eeb3c53344c699b067dbfd612f770e31abf643ccff9b1468ff97c13
-  data.tar.gz: e996bd743ae739a19a668a12ad4668acb3da51787e7b83f9dec559e88fb9cb75dae48191097fe5d46768ca360a57d43784fac4c3b4aae30a1b7209abc602ee68
+  metadata.gz: 49dbcc86fcabc6c775e95c181a96c336e53b4f1ff4c7439f911538eb431816a0b9c5bb3990774ef4cb4c36f05b9be53fcfbcdc9020fe1735d082d0f96d85017e
+  data.tar.gz: 7767190809b235af1b110735cb2e4df306726fa7c6ecfceb0fa31b9a4fb5f6ae0f4c99f0286cf7c50583d8764ba48063bb19f88720b3dd64174e2c0b7a416bcf

data/app/pb_kits/playbook/index.js

@@ -129,4 +129,4 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -15,6 +15,7 @@ type BackgroundProps = {
   'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
   'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
   'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle',
+  backgroundPosition?: string,
   backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
   backgroundSize?: 'auto' | 'cover' | 'contain',
   children?: React.ReactChild[] | React.ReactNode,
@@ -33,6 +34,7 @@ const Background = (props: BackgroundProps) => {
     alt = '',
     aria = {},
     backgroundColor = 'light',
+    backgroundPosition = '',
     backgroundRepeat = 'initial',
     backgroundSize = 'cover',
     children,
@@ -52,7 +54,14 @@ const Background = (props: BackgroundProps) => {
     backgroundImage: `url(${imageUrl})`,
     backgroundRepeat: `${backgroundRepeat}`,
     backgroundSize: `${backgroundSize}`,
+    backgroundPosition: backgroundPosition
   }
+
+  const backgroundPositionStyle = {
+    backgroundColor: customColor? customColor: null,
+    backgroundPosition: `${backgroundPosition}`
+  }
+
   const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
   const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
 
@@ -80,7 +89,7 @@ const Background = (props: BackgroundProps) => {
             {...dataProps}
             className={classes}
             id={id}
-            style={customColor ? { backgroundColor: customColor } : null}
+            style={backgroundPositionStyle}
         >
           { children }
         </Tag>

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -6,7 +6,8 @@
       class: object.classname,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
-              background-size: #{object.background_size};"
+              background-size: #{object.background_size};
+              background-position: #{object.background_position};"
   ) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_background/background.rb

@@ -70,7 +70,8 @@ module Playbook
                                 neutral_subtle
                               ],
                               default: "light"
-
+      prop :background_position, type: Playbook::Props::String,
+                                default: nil
       prop :background_repeat, type: Playbook::Props::Enum,
                                 values: %w[
                                   repeat
@@ -106,7 +107,8 @@ module Playbook
       end
 
       def custom_background_color
-        "background-color: #{custom_color};"
+        "background-color: #{custom_color};
+        background-position: #{background_position}"
       end
 
     private

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

@@ -15,6 +15,7 @@ $pb_dark_body_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
+  link:           $primary_action_dark,
   error:          $error,
   success:        $text_dk_success_sm,
 );

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

@@ -1,5 +1,9 @@
 @import "./button_mixins";
 @import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/typography";
 
 $pb_button_sizes: (
   "sm":   0.75rem,
@@ -30,6 +34,35 @@ $pb_button_sizes: (
   &[class*=_link]  {
     @include pb_button_link;
   }
+  &[class*=_reaction] {
+    background-color: $card_light;
+    min-width: 40px;
+    border-radius: $border_radius_rounded;
+    border: 1px solid $border_light;
+    color: $text_lt_light;
+    padding: ($space_xxs - 2) $space_xs;
+    min-height: $space_md + 2;
+
+    .icon_circle_emoji {
+      height: $space_sm - 1;
+    }
+    &:hover {
+      background-color: $bg_light;
+    }
+    &.active {
+      border-color: $primary_action;
+    }
+  }
+
+  &.reaction_default {
+    padding: ($space_xxs + 1) ($space_sm - 4);
+    color: $text_lt_lighter;
+  }
+
+  .reaction_button_icon_wrapper {
+    display: flex;
+    height: $space_sm + 1;
+  }
 
   // Disabled =================
   &[class*=_disabled]  {

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

@@ -4,6 +4,7 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
+import Caption from "../pb_caption/_caption"
 
 type EventHandler = (React.MouseEventHandler<HTMLElement>)
 
@@ -11,11 +12,13 @@ type ButtonPropTypes = {
   aria?: { [key: string]: string },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string | string[],
+  count?: number,
   data?: { [key: string]: string },
   disabled?: boolean,
   fixedWidth?: boolean,
   form?: string,
   fullWidth?: boolean,
+  highlight?: boolean,
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -30,7 +33,7 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link',
+  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
@@ -38,6 +41,8 @@ const buttonClassName = (props: ButtonPropTypes) => {
   const {
     disabled = false,
     fullWidth = false,
+    highlight,
+    icon,
     loading = false,
     type = 'inline',
     variant = 'primary',
@@ -52,6 +57,8 @@ const buttonClassName = (props: ButtonPropTypes) => {
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
   className += `${size !== null ? ` size_${size}` : ''}`
+  className += `${variant === 'reaction' && !icon ? ` reaction_default` : ''}`
+  className += `${variant === 'reaction' && highlight ? ` active` : ''}`
 
   return className
 }
@@ -61,6 +68,7 @@ const Button = (props: ButtonPropTypes) => {
     aria = {},
     children,
     className,
+    count,
     data = {},
     disabled,
     icon = null,
@@ -75,6 +83,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    variant,
     form = null
   } = props
 
@@ -131,41 +140,71 @@ const Button = (props: ButtonPropTypes) => {
     return null
   }
 
-  const displayButton = () => {    
-    if (link)
+  const displayButton = () => {
+    if (link) {
       return (
         <a
-            {...ariaProps}
-            {...dataProps}
-            className={css}
-            href={link}
-            id={id}
-            rel={target !== 'child' ? 'noreferrer' : null}
-            role="link"
-            tabIndex={tabIndex}
-            target={getTargetAttribute()}
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          href={link}
+          id={id}
+          rel={target !== "child" ? "noreferrer" : null}
+          role="link"
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
-      )
-    else
+      );
+    } else if (variant === "reaction") {
+      return (
+        <button
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
+        >
+          {icon ? (
+            <div className='reaction_button_icon_wrapper'>
+              <Icon icon={icon} />
+              {count && (
+                <Caption paddingLeft="xxs" size="xs">
+                  {count}
+                </Caption>
+              )}
+            </div>
+          ) : (
+            <Icon icon="face-smile-plus" />
+          )}
+        </button>
+      );
+    } else {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {ifLoading()}
         </button>
-      )
+      );
+    }
   }
 
   return (

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

@@ -47,9 +47,9 @@ $pb_button_border_width: 0px;
   width: fit-content;
   font-family: $font_family_base;
   white-space: nowrap;
-  
+
   @include focus;
-  
+
   &[class*=dark] {
     @include focus-dark
   }
@@ -77,7 +77,7 @@ $pb_button_border_width: 0px;
     outline: none;
     border-width: $pb_button_border_width;
   }
-  
+
 };
 
 @mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
@@ -101,7 +101,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button_variant($secondary-action, $primary_action);
+  @include pb_button_variant($secondary_action, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -109,9 +109,9 @@ $pb_button_border_width: 0px;
     }
     &:active {
       transition: none;
-      @include pb_button_variant($secondary-action, $primary_action);
+      @include pb_button_variant($secondary_action, $primary_action);
     }
-  } 
+  }
 }
 
 // Link =========================

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,17 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
+    <% if object.variant === "reaction" %>
+        <% if object.icon %>
+            <div class="reaction_button_icon_wrapper">
+                <%= pb_rails("icon", props: { icon: "#{icon}"}) %>
+                <% if object.count %>
+                    <%= pb_rails("caption", props: { text: "#{count}", size: "xs", padding_left:"xxs" }) %>
+                <% end %>
+            </div>
+        <% else %>
+            <%= pb_rails("icon", props: { icon: "face-smile-plus" }) %>
+        <% end %>
+    <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
@@ -12,5 +24,6 @@
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
         </span>
     <% end %>
+    <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -16,8 +16,11 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link],
+                     values: %w[primary secondary link reaction],
                      default: "primary"
+      prop :count, type: Playbook::Props::Number
+      prop :highlight, type: Playbook::Props::Boolean,
+                       default: false
       prop :target
       prop :text
       prop :type
@@ -65,7 +68,7 @@ module Playbook
 
       def classname
         button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class
+        button_class + size_class + default_reaction_class + highlight_active
       end
 
     private
@@ -85,6 +88,14 @@ module Playbook
       def size_class
         size ? " size_#{size}" : ""
       end
+
+      def default_reaction_class
+        variant === "reaction" && !object.icon ? " reaction_default" : ""
+      end
+
+      def highlight_active
+        variant === "reaction" && object.highlight ? " active" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction" }) %>
+<%= pb_rails("button", props: { count: 153, highlight: true, icon: "&#127881;", variant: "reaction" }) %>
+<%= pb_rails("button", props: { variant: "reaction" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -0,0 +1,38 @@
+import React, {useState} from "react"
+import { Button } from "../../"
+
+const ButtonReaction = (props) => {
+
+const [highlightActive, setHighlightActive] =useState(false)
+
+return (
+  <div>
+    <Button
+        count={5}
+        icon="😍"
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        count={153}
+        highlight = {highlightActive}
+        icon="&#127881;"
+        marginLeft='lg'
+        onClick={()=> setHighlightActive(!highlightActive)}
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+    <Button
+        marginLeft='lg'
+        tabIndex={0}
+        variant="reaction"
+        {...props}
+    />
+
+    </div>
+)
+}
+
+export default ButtonReaction

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading
@@ -13,6 +14,7 @@ examples:
   
   react:
   - button_default: Button Variants
+  - button_reaction: Reaction Button
   - button_full_width: Button Full Width
   - button_link: Button Links
   - button_loading: Button Loading

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

@@ -8,4 +8,5 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
-export { default as ButtonHover } from './_button_hover.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'
+export {default as ButtonReaction } from './_button_reaction.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -26,7 +26,7 @@ $pb_button_styles: [
 @mixin pb_circle_icon_button_active {
   &:active {
     transition: none;
-    @include pb_button_variant($secondary-action, $primary_action);
+    @include pb_button_variant($secondary_action, $primary_action);
   }
 }
 

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: string | Date;
+  value: Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,12 +37,11 @@ const PbDate = (props: PbDateProps) => {
     value,
   } = props;
 
-  const dateTimestamp = new DateTime({ value: value });
-  const weekday = dateTimestamp.toWeekday();
-  const month = dateTimestamp.toMonth();
-  const day = dateTimestamp.toDay();
-  const year = dateTimestamp.toYear();
-  const currentYear = new Date().getFullYear().toString();
+  const weekday = DateTime.toWeekday(value);
+  const month = DateTime.toMonth(value);
+  const day = DateTime.toDay(value);
+  const year = DateTime.toYear(value);
+  const currentYear = new Date().getFullYear();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value="2020-12-25"
+          value={new Date('25 Dec 2020')}
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -14,7 +14,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           size="sm"
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -23,7 +23,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
 
@@ -38,7 +38,7 @@ const DateDefault = (props) => {
       <br />
 
       <FormattedDate
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -46,7 +46,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
     </div>