playbook_ui 6.3.1 → 6.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18865e3e500c379cda9c48bca36f73691ffb01cc29c03fc2d758612bcec45c33
-  data.tar.gz: 60795da94ab1b4c14909ac9f6028470866af82b02b7a22b26a9223a7a2585c46
+  metadata.gz: 0c5b7e2c43b42ee78da647dd0633e8377ec033c91290dc4bc2cedcd6c4d8afff
+  data.tar.gz: 42acc945643e2a6269fd8fc900fdc8874c5a4fcb27b26daab9b362d4851a1c6a
 SHA512:
-  metadata.gz: eab31af5787a1bfef070b228d13a7369b7d1f4037e11b81798d34eebbfcba3dd476290730214e999f0a8c8583f8c2c93abae6ac1921b92da74e7db35cb987b00
-  data.tar.gz: '08c04a8e5cffe38491eb21971596f1003708b5a04c1bd7e18f2bedbc42c8b4cb955da9ac60af293e12e42cf57e7b55918b9936a30c7c8a91df460cbd3d41c833'
+  metadata.gz: 4c07c0929e4c7a4cb31de00fad7a166bdbe07cdb55bc64c2fc268afd1509acfbd2b2f3814393d38c044289d930b56c1ede0e7a0dc687730fe67e5caf19b6d241
+  data.tar.gz: 2964f0ebeec2ae295b307f628d4a1076cc6d6a034aefafe98c8bd7db1675dbabe451b8faf6d93326b8bb83c9e1245d9a34572a7d00edb6a2028cc204464cd47a

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

@@ -114,7 +114,6 @@
     background: $bg_dark;
 
     .pb--kit-example {
-      color: $white;
 
       &::after {
         background: $border-dark;

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

@@ -10,7 +10,8 @@ $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
 $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
-$pb_button_border_width: 1px;
+$pb_button_border_width: 0px;
+
 
 @mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
   text-rendering: optimizeLegibility;
@@ -47,16 +48,17 @@ $pb_button_border_width: 1px;
     visibility: visible;
   }
 
-  &:hover {
+  &:hover, &:focus {
     outline: none;
+    
   }
 
-  &:active,
-  &:focus {
+  &:active {
     outline: none;
     border-width: $pb_button_border_width;
     border-color: darken($bg, $pb_button_hover_darken);
   }
+  
 };
 
 @mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
@@ -67,8 +69,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary {
   @include pb_button;
 
-  &:hover {
-    @include pb_button_hover;
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover;
+    }
   }
 }
 
@@ -76,17 +80,21 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary {
   @include pb_button(rgba($primary_action, 0.05), $primary_action);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_3));
-  }
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_3));
+    }
+  } 
 }
 
 // Link =========================
 @mixin pb_button_link {
   @include pb_button($transparent, $primary_action);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 
@@ -120,8 +128,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary_dark{
   @include pb_button($primary_action);
 
-  &:hover {
-    @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+    }
   }
 }
 
@@ -129,8 +139,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary_dark{
   @include pb_button(rgba($white, 0.2), $white);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_2));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_2));
+    }
   }
 }
 
@@ -138,8 +150,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_link_dark {
   @include pb_button($transparent, $primary_action);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -13,13 +13,17 @@
       & > [class^=pb_button]  {
         margin-right: $space-xs;
 
-        &:hover {
-          background-color:darken($royal, 20%);
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
         }
 
         &[class*=secondary] {
-          &:hover {
-            background-color:rgba($primary_action, $opacity_3)
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
           }
         }
   
@@ -42,13 +46,17 @@
         width: 100%;
         margin-bottom: $space-xs;
 
-        &:hover {
-          background-color:darken($royal, 20%);
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
         }
 
         &[class*=secondary] {
-          &:hover {
-            background-color:rgba($primary_action, $opacity_3)
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
           }
         }
   

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -14,6 +14,7 @@ type CaptionProps = {
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
   text?: string,
+  variant?: null | "link",
 }
 
 const Caption = (props: CaptionProps) => {
@@ -26,13 +27,14 @@ const Caption = (props: CaptionProps) => {
     size = 'md',
     tag = 'div',
     text,
+    variant = null,
   } = props
   const Tag = `${tag}`
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size),
+    buildCss('pb_caption_kit', size, variant),
     className,
     globalProps(props)
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -9,6 +9,9 @@
 
   &[class^=pb_caption_kit_xs] {
     @include caption_xs;
+    &[class*=_link]  {
+      color: $primary;
+    }
   }
   &[class*=dark]{
     @include caption_dark

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -14,9 +14,12 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
       prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                     values: [nil, "link"],
+                     default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size)
+        generate_classname("pb_caption_kit", size, variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("caption", props: { text: "Subcaption (link)", size: 'xs', variant: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionVariants = () => {
+  return (
+    <div>
+      <Caption
+          size="xs"
+          text="Subcaption (link)"
+          variant="link"
+      />
+    </div>
+  )
+}
+
+export default CaptionVariants

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md

@@ -0,0 +1,3 @@
+Wrap anchor tags around the kit to make it clickable.
+
+Link variant can only be applied to size `xs`.

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

@@ -1,7 +1,9 @@
 examples:
   rails:
   - caption_light: Light UI
+  - caption_variants: Variants
   - caption_dark: Dark UI
   react:
   - caption_light: Light UI
+  - caption_variants: Variants
   - caption_dark: Dark UI

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

@@ -1,2 +1,3 @@
 export { default as CaptionDark } from './_caption_dark.jsx'
 export { default as CaptionLight } from './_caption_light.jsx'
+export { default as CaptionVariants } from './_caption_variants.jsx'

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -53,6 +53,7 @@ $pb_card_padding:(
 }
 
 @mixin pb_card_dark {
+  color: $white;
   @include pb_card($card_dark, $border_dark);
 }
 

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -1,8 +1,10 @@
 @import "../tokens/colors";
+@import "../tokens/transition";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
   display: inline-flex;
+  cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
     cursor: pointer;
@@ -15,7 +17,8 @@ $transition: $transition_cubic;
     width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    .check_icon{
+    transition: background $transition_default ease, border-color $transition_default ease;
+    .check_icon {
       opacity: 0;
       position: relative;
       top: -2px;
@@ -26,9 +29,10 @@ $transition: $transition_cubic;
 
     }
   }
-
-  &:hover input ~ .pb_checkbox_checkmark {
-    border-color: $primary_action;
+  @media (hover:hover) {
+    &:hover input ~ .pb_checkbox_checkmark {
+      border-color: $primary_action;
+    }
   }
 
   input {
@@ -58,8 +62,10 @@ $transition: $transition_cubic;
       border-color: $primary_action;
     }
 
-    &:hover .pb_checkbox_checkmark {
-      border-color: $primary_action;
+    @media (hover:hover) {
+      &:hover .pb_checkbox_checkmark {
+        border-color: $primary_action;
+      }
     }
 
     &.error {

data/app/pb_kits/playbook/pb_date/_date.html.erb

@@ -1,14 +1,38 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
-    <% if object.size == "lg" %>
-      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
-    <% elsif object.size == "sm" %>
-      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
-      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
-    <% else %>
-      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
+    class: object.classname,
+    aria: object.aria) do %>
+
+  <!-- icon -->
+  <% if object.show_icon %>
+    <%= pb_rails("body", props: {
+      color: "light",
+      tag: "div",
+    }) do %>
+      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+    <% end %>
+  <% end %>
+
+  <!-- day_of_week -->
+  <% if object.show_day_of_week %>
+    <%= pb_rails("title", props: { tag: "div", text: object.date_day_of_week, size: 4 }) %>
+    <%= pb_rails("body", props: {
+    text: "•",
+    color: "light",
+    tag: "div",
+  }) %>
+  <% end %>
+
+  <!-- month day, year -->
+  
+  <%# if not current year %>
+  <% if object.year.to_s == DateTime.now.year.to_s %>
+    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
+  <%# if is current year %>
+  <% else %>
+    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
   <% end %>
+  
 <% end %>
 

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

@@ -2,82 +2,91 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Icon } from '../'
+import { Body, Icon, Title } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-const defaultDateString = (value: DateTime) => {
-  const weekday = value.toWeekday().toUpperCase()
-  const month = value.toMonth().toUpperCase()
-  const day = value.toDay()
-
-  return `${weekday} · ${month} ${day}`
-}
-
-const largeDateString = (value: DateTime) => {
-  const month = value.toMonth().toUpperCase()
-  const day = value.toDay()
-
-  return `${month} ${day}`
-}
-
-type DateSubcomponent = {
-  value: DateTime,
+type PbDateProps = {
+  aria: Object,
+  date: string | date,
+  className?: string,
+  data?: Object,
+  id?: string,
+  showIcon?: boolean,
+  showDayOfWeek?: boolean,
+  alignment?: "left" | "center" | "right"
 }
 
-const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
-    {defaultDateString(value)}
-  </h3>
-)
-
-const SmallDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
-    <Icon
-        fixedWidth
-        icon="calendar"
-    />
-    {defaultDateString(value)}
-  </h3>
-)
-
-const LargeDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_3', globalProps(props))}>
-    {largeDateString(value)}
-  </h3>
-)
+const PbDate = (props: PbDateProps) => {
+  const {
+    aria = {},
+    alignment = 'left',
+    className,
+    date,
+    data = {},
+    id,
+    showDayOfWeek = false,
+    showIcon = false,
+  } = props
 
-type PbDateProps = {
-  size?: "xs" | "sm" | "lg",
-  value?: string,
-  className?: string
-}
+  const dateTimestamp = new DateTime({ value: date })
+  const weekday = dateTimestamp.toWeekday()
+  const month = dateTimestamp.toMonth()
+  const day = dateTimestamp.toDay()
+  const year = dateTimestamp.toYear()
+  const currentYear = new Date().getFullYear().toString()
 
-const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
-  const date = new DateTime({ value: value })
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-  if (size == 'xs')
-    return (
-      <ExtraSmallDate
-          {...props}
-          className={className}
-          value={date}
-      />
-    )
-  if (size == 'lg')
-    return (
-      <LargeDate
-          {...props}
-          className={className}
-          value={date}
-      />
-    )
+  const classes = classnames(
+    className,
+    buildCss('pb_date_kit', alignment),
+    globalProps(props)
+  )
   return (
-    <SmallDate
-        {...props}
-        className={className}
-        value={date}
-    />
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Title
+          size={4}
+          tag="h4"
+      >
+        <If condition={showIcon}>
+          <Body
+              color="light"
+              tag="span"
+          >
+            <Icon
+                fixedWidth
+                icon="calendar-alt"
+            />
+          </Body>
+        </If>
+        <If condition={showDayOfWeek}>
+          {weekday}
+          <Body
+              color="light"
+              tag="span"
+              text=" • "
+          />
+        </If>
+        <span>
+          {month}
+          {' '}
+          {day}
+        </span>
+        <If condition={currentYear != year}>
+          <span>
+            {` , ${year}`}
+          </span>
+        </If>
+      </Title>
+    </div>
   )
 }