playbook_ui 6.2.0 → 7.0.0.pre.alpha3

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -10,7 +10,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
+  color?: 'default' | 'light' | 'lighter',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,
@@ -26,12 +26,12 @@ const Body = (props: BodyProps) => {
     aria = {},
     className,
     children,
-    color = '',
+    color = 'default',
     data = {},
     highlightedText = [],
     highlighting = false,
     id,
-    status = '',
+    status,
     tag = 'div',
     text,
   } = props

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

@@ -1,22 +1,25 @@
 @import "./body_mixins";
 
-.pb_body_kit {
-  &.dark {
-    @include pb_body_dark;
-  }
-}
-
 [class^=pb_body_kit]{
-  @include pb_body;
-
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{$color_name}] {
       @include pb_body($color_value);
     }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_default_#{$status_name}] {
+        @include pb_body($status_value);
+      }
+    }
   }
 
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_body($dark_color_value); 
+    }
+  }
+  
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=_#{$status_name}] {
+    &[class*=_default_#{$status_name}][class*=dark] {
       @include pb_body($status_value);
     }
   }

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

@@ -6,9 +6,12 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
-  dark:           $text_dk_default,
-  light_dark:     $text_dk_light,
-  lighter_dark:   $text_dk_lighter,
+);
+
+$pb_dark_body_colors: (
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
 );
 
 // Order is important here!

data/app/pb_kits/playbook/pb_body/body.rb

@@ -9,7 +9,7 @@ module Playbook
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter dark light_dark lighter_dark],
+                   values: %w[default light lighter],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],
@@ -41,11 +41,11 @@ module Playbook
       end
 
       def color_class
-        color != "default" ? color : nil
+        color
       end
 
       def status_class
-        status != "neutral" ? status : nil
+        status == "neutral" ? nil : status
       end
     end
   end

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,5 +9,11 @@
 
   &[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.jsx

@@ -40,7 +40,7 @@ const Header = (props: CardHeaderProps) => {
   const headerSpacing = globalProps(props, { padding })
 
   return (
-    <div className={classnames(headerCSS, className, headerSpacing)}>
+    <div className={classnames(headerCSS, headerSpacing, className)}>
       {children}
     </div>
   )
@@ -48,12 +48,12 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className, padding = 'md' } = props
+  const { children, padding = 'md', className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
   const bodySpacing = globalProps(props, { padding })
 
   return (
-    <div className={classnames(bodyCSS, className, bodySpacing)}>
+    <div className={classnames(bodyCSS, bodySpacing, className)}>
       {children}
     </div>
   )
@@ -69,7 +69,6 @@ const Card = (props: CardPropTypes) => {
     shadow = 'none',
     padding = 'md',
   } = props
-  const bodyCSS = buildCss('pb_card_body_kit')
   const borderCSS = borderNone == true ? 'border_none' : ''
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
     selected,
@@ -93,11 +92,9 @@ const Card = (props: CardPropTypes) => {
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
-    <div className={classnames(cardCss, globalProps(props), className)}>
+    <div className={classnames(cardCss, globalProps(props, { padding }), className)}>
       {subComponentTags('Header')}
-      <div className={classnames(bodyCSS, globalProps({ padding }))}>
-        {nonHeaderChildren}
-      </div>
+      {nonHeaderChildren}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -11,6 +11,6 @@
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
-      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
+      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
     </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,6 +15,11 @@ module Playbook
       prop :value
       prop :name
 
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :form_spacing, type: Playbook::Props::Boolean,
+                          default: false
+
       def checked_html
         checked ? "checked='true'" : nil
       end

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>
   )
 }