playbook_ui 6.1.0 → 7.0.0.pre.alpha2

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.jsx

@@ -9,17 +9,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CheckboxProps = {
   aria?: object,
-  checked?: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  error?: Boolean,
-  id?: String,
-  name: String,
-  text: String,
-  value: String,
+  error?: boolean,
+  id?: string,
+  name: string,
+  text: string,
+  value: string,
   children: Node,
-  onChange: (Boolean) => void,
+  onChange: (boolean) => void,
 }
 
 const Checkbox = (props: CheckboxProps) => {

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_circle_icon_button/_circle_icon_button.jsx

@@ -15,15 +15,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CircleIconButtonProps = {
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  disabled?: Boolean,
-  icon: String,
-  id?: String,
-  link?: String,
+  disabled?: boolean,
+  icon: string,
+  id?: string,
+  link?: string,
   onClick?: Callback,
-  newWindow?: Boolean,
+  newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset',
   variant?: 'primary' | 'secondary' | 'link',
 }

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -39,12 +39,12 @@ const formatContact = (contactString, contactType) => {
 
 type ContactProps = {
   aria?: object,
-  className?: String | Array<String>,
-  contactDetail?: String,
-  contactType?: String,
-  contactValue: String,
+  className?: string | array<string>,
+  contactDetail?: string,
+  contactType?: string,
+  contactValue: string,
   data?: object,
-  id?: String,
+  id?: string,
 }
 
 const Contact = (props: ContactProps) => {

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -9,16 +9,16 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type CurrencyProps = {
   align?: 'center' | 'left' | 'right',
-  amount: String,
+  amount: string,
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  label?: String,
+  id?: string,
+  label?: string,
   size?: 'sm' | 'md' | 'lg',
-  symbol?: String,
-  unit?: String,
+  symbol?: string,
+  unit?: string,
 }
 
 const sizes = {

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -13,17 +13,17 @@ import {
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   statChange?: {
-    change?: String,
-    value?: String | Number
+    change?: string,
+    value?: string | Number
   },
-  statLabel?: String,
+  statLabel?: string,
   statValue?: {
-    unit?: String,
-    value?: String | Number
+    unit?: string,
+    value?: string | Number
   }
 }
 

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