playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

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

@@ -20,7 +20,7 @@ type CardPropTypes = {
 }
 
 type CardHeaderProps = {
-  categoryColor?: number,
+  headerColor?: string,
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
   padding?: string,
@@ -34,13 +34,13 @@ type CardBodyProps = {
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, categoryColor = 1, padding = 'sm' } = props
-  const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
+  const { children, className, headerColor = 'category_1', padding = 'sm' } = props
+  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`)
 
   const headerSpacing = globalProps(props, { padding })
 
   return (
-    <div className={classnames(headerCSS, className, headerSpacing)}>
+    <div className={classnames(headerCSS, headerSpacing, className)}>
       {children}
     </div>
   )
@@ -48,13 +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>
   )
@@ -70,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,
@@ -94,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_card/_card.scss

@@ -27,7 +27,7 @@
     min-height: 1px;
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;  
-    @each $color_name, $color_value in $category_colors {
+    @each $color_name, $color_value in $pb_card_header_colors {
       &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
       }

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

@@ -9,7 +9,7 @@ $pb_card_border_width: 1px;
 $pb_card_border_radius: $border_rad_heavier;
 $pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
 $pb_card_highlight_size: 4px;
-$pb_card_header_colors: $category_colors;
+$pb_card_header_colors: map-merge($category_colors, $product_colors);
 $pb_card_header_border_radius: $border_rad_heavy;
 $pb_card_padding:(
   none: 0,
@@ -67,6 +67,6 @@ $pb_card_padding:(
   z-index: 10;
 }
 
-@mixin pb_card_header_color($category_color) {
-  background: $category_color;
-}
+@mixin pb_card_header_color($header_color) {
+  background: $header_color;
+}

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -7,11 +7,11 @@ module Playbook
   
         partial "pb_card/child_kits/card_header"
   
-        prop :category_color, type: Playbook::Props::Numeric,
-                              default: 1
+        prop :header_color, type: Playbook::Props::String,
+                            default: "category_1"
 
         def classname
-          generate_classname("pb_card_header_kit", padding, "category_#{category_color}")
+          generate_classname("pb_card_header_kit", header_color)
         end
       end
     end

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -1,19 +1,50 @@
+<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
+ 
+<br>  
+
+  <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+    <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
+      <%= pb_rails("body", props: { text: "category_1", dark: true }) %>
+    <% end %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      Body
+    <% end %>
+  <% end %>
+
+<br> 
+
+  <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+    <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
+      <%= pb_rails("body", props: { text: "category_2", dark: true }) %>
+
+    <% end %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      Body
+    <% end %>
+  <% end %>
+
+<br>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %> 
+
+<br>
+
 <%= pb_rails("card", props: { padding: "none", header: true}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
-      <%= pb_rails("body", props: { text: "Header", dark: true }) %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "siding" }) do %>
+    <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
   <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>
 
-<br />
+<br>
 
 <%= pb_rails("card", props: { padding: "none", header: true}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "md", category_color: 2 }) do %>
-    <%= pb_rails("body", props: { text: "Header", dark: true }) %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
+    <%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
   <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "lg" }) do %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -1,14 +1,22 @@
 import React from 'react'
-import { Body, Card } from '../../'
+import { Body, Card, Title } from '../../'
 
 const CardHeader = () => {
   return (
     <div>
+      <Title
+          size={4}
+          tag="h4"
+          text="Category Colors"
+      />
+
+      <br />
+
       <Card padding="none">
         <Card.Header>
           <Body
               dark
-              text="Header"
+              text="category_1"
           />
         </Card.Header>
         <Card.Body>
@@ -20,20 +28,60 @@ const CardHeader = () => {
 
       <Card padding="none">
         <Card.Header
-            categoryColor={2}
-            padding="md"
+            headerColor="category_2"
         >
           <Body
               dark
-              text="Header"
+              text="category_2"
           />
         </Card.Header>
         <Card.Body
-            padding="lg"
+            padding="md"
         >
           <Body text="Body" />
         </Card.Body>
       </Card>
+
+      <br />
+
+      <Title
+          size={4}
+          tag="h4"
+          text="Product Colors"
+      />
+
+      <br />
+
+      <Card padding="none">
+        <Card.Header
+            headerColor="siding"
+        >
+          <Body
+              dark
+              text="Siding"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body text="Body" />
+        </Card.Body>
+      </Card>
+
+      <br />
+
+      <Card padding="none">
+        <Card.Header
+            headerColor="gutters"
+        >
+          <Body
+              dark
+              text="Gutters"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body text="Body" />
+        </Card.Body>
+      </Card>
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers passes category colors only. List of all category colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card headers passes category and product colors only. List of all category and product colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

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 %>