playbook_ui 7.1.0 → 7.3.0.pre.alpha1

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb

@@ -0,0 +1,24 @@
+ <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    alignment: "center"
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    alignment: "right"
+  }) %>
+  

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+
+const DateAlignment = (props) => {
+  return (
+    <div>
+      <FormattedDate
+          dayOfWeek
+          icon
+          value="1995-12-25"
+          {...props}
+      />
+
+      <br />
+
+      <FormattedDate
+          alignment="center"
+          dayOfWeek
+          icon
+          value="2020-12-25"
+          {...props}
+      />
+
+      <br />
+
+      <FormattedDate
+          alignment="right"
+          value={new Date()}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateAlignment

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -1,24 +1,39 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "lg"
+  size: "sm"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: DateTime.now
+  date: "2012-08-02T15:49:29Z",
+  size: "sm"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Asia/Tokyo"
+  date: "2017-12-02T15:49:29Z",
+  show_day_of_week: true,
+  size: "sm"
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("date", props: {
+  date: Date.today,
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  date: "2012-08-02T15:49:29Z",
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: Date.new(2010, 11, 12),
-  size: "xs"
+  date: "2017-12-02T15:49:29Z",
+  show_day_of_week: true
 }) %>

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

@@ -1,28 +1,59 @@
 import React from 'react'
-import { Date } from '../../'
+import { Date as FormattedDate } from '../../'
 
-const DateDefault = () => {
+const DateDefault = (props) => {
   return (
-    <div>
-      <Date
-          size="lg"
-          value="1995-12-25"
+    <>
+      <FormattedDate
+          size="sm"
+          value={new Date()}
+          {...props}
       />
 
       <br />
 
-      <Date
-          value="17 Mar 69"
+      <FormattedDate
+          size="sm"
+          value="2012-08-03"
+          {...props}
       />
 
       <br />
 
-      <Date
-          size="xs"
-          value="2020-04-20T04:20:00.000Z"
+      <FormattedDate
+          showDayOfWeek
+          size="sm"
+          value="2017-12-03"
+          {...props}
       />
-    </div>
+
+      <br />
+      <br />
+
+      <FormattedDate
+          value={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <FormattedDate
+          value="2012-08-03"
+          {...props}
+      />
+
+      <br />
+
+      <FormattedDate
+          showDayOfWeek
+          value="2017-12-03"
+          {...props}
+      />
+    </>
   )
 }
 
 export default DateDefault
+
+// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb

@@ -0,0 +1,27 @@
+<div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+  }) %>
+
+  <br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true
+  }) %>
+
+  <br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_day_of_week: true
+  }) %>
+
+  <br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+  }) %>
+</div>

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+
+const DateVariants = (props) => {
+  return (
+    <div>
+      <FormattedDate
+          value="1995-12-25"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <FormattedDate
+          showIcon
+          value="1995-12-25"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <FormattedDate
+          showDayOfWeek
+          value="1995-12-25"
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <FormattedDate
+          showDayOfWeek
+          showIcon
+          value="1995-12-25"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateVariants

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

@@ -2,9 +2,13 @@ examples:
   
   rails:
   - date_default: Default
+  - date_variants: Variants
+  - date_alignment: Alignment
   - date_timezone: Timezones
   
   
   react:
   - date_default: Default
+  - date_variants: Variants
+  - date_alignment: Alignment
   

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

@@ -1 +1,3 @@
 export { default as DateDefault } from './_date_default.jsx'
+export { default as DateVariants } from './_date_variants.jsx'
+export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_nav/_item.html.erb

@@ -5,6 +5,9 @@
   id: object.id) do %>
   <%= content_tag(object.tag,
     object.link ? object.link_options : object.options) do %>
+    <% if object.image_url %>
+      <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
+    <% end %>
     <% if object.icon_left %>
       <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Icon } from '../'
+import { Icon, Image } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
@@ -15,6 +15,7 @@ type NavItemProps = {
   iconLeft: string,
   iconRight: string,
   id?: string,
+  imageUrl: String,
   link: string,
   onClick?: EventHandler,
   text: string,
@@ -30,6 +31,7 @@ const NavItem = (props: NavItemProps) => {
     iconLeft,
     iconRight,
     id,
+    imageUrl,
     link,
     onClick = () => {},
     text = '',
@@ -53,6 +55,17 @@ const NavItem = (props: NavItemProps) => {
           href={link}
           onClick={onClick}
       >
+        <If condition={imageUrl}>
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={imageUrl}
+          >
+            <Image
+                className="pb_nav_img_wrapper"
+                url={imageUrl}
+            />
+          </div>
+        </If>
         <If condition={iconLeft}>
           <div
               className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type NavProps = {
   aria?: object,
+  borderless?: boolean,
   children?: React.Node,
   className?: string | array<string>,
   data?: object,
@@ -22,6 +23,7 @@ type NavProps = {
 const Nav = (props: NavProps) => {
   const {
     aria = {},
+    borderless = false,
     children,
     className,
     data = {},
@@ -39,6 +41,7 @@ const Nav = (props: NavProps) => {
   const cardCss = classnames(
     buildCss('pb_nav_list', variant, orientation, {
       highlight: highlight,
+      borderless: borderless,
     }),
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -40,7 +40,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
-        padding: $space_sm $space_md $space_sm ($space_md - 3px);
+        padding: $space_sm $space_sm $space_sm ($space_sm - 3px);
         border: 0 solid transparent;
         border-width: 0 0 0 3px;
         transition-property: color, border-color, background-color;
@@ -59,7 +59,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_icon_left] {
           font-size: $font_large;
-          margin-right: $space_sm;
+          margin-right: $space_xs;
           color: $text_lt_lighter;
         }
         [class*=_icon_right] {
@@ -69,10 +69,14 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           font-size: $font_base;
-          font-weight: $bold;
           color: $text_lt_default;
           flex: 1;
         }
+        [class*=_img_left] {
+          margin-right: $space_xs;
+          height: 20px;
+          width: 25px;
+        }
       }
       &:last-child {
         border-bottom: 0;
@@ -167,4 +171,19 @@ $selector: ".pb_nav_list";
     }
   }
 
+  //Borderless
+  &[class*=_borderless] {
+    [class*=pb_nav_list_kit_item] {
+      list-style: none;
+      border-bottom: 0;
+    }
+  }
+  
+}
+
+//Image Wrapper
+.pb_nav_img_wrapper {
+  width: 24px;
+  height: 24px;
+  margin-right: $space_xs;
 }

data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {borderless: true}) do %>
+  <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const BorderlessNav = () => {
+  return (
+    <Nav borderless>
+      <NavItem
+          active
+          link="#"
+          text="All Categories"
+      />
+      <NavItem
+          link="#"
+          text="Food"
+      />
+      <NavItem
+          link="#"
+          text="Digital"
+      />
+      <NavItem
+          link="#"
+          text="Design Art"
+      />
+    </Nav>
+  )
+}
+
+export default BorderlessNav

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { image_url: "https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png", text: "News Feed"  }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg", link: "#", text: "Messages", active: true }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png", icon_right: "angle-down", link: "#", text: "Events" }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png", link: "#", text: "Friends" }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg", icon_right: "angle-down", link: "#", text: "Groups" }) %>
+<% end %>