playbook_ui 10.16.0 → 10.19.0.pre.popover.alpha1

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

@@ -1,7 +1,10 @@
 examples:
   rails:
-  - caption_light: Default
-  - caption_block: Block
+    - caption_light: Default
+    - caption_block: Block
+    - caption_colors: Colors
+
   react:
-  - caption_light: Default
-  - caption_block: Block
+    - caption_light: Default
+    - caption_block: Block
+    - caption_colors: Colors

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

@@ -1,3 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
-export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionColors } from './_caption_colors.jsx'
 export { default as CaptionBlock } from './_caption_block.jsx'

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -20,7 +20,6 @@ type CardPropTypes = {
   },
   padding?: string,
   selected?: boolean,
-  shadow?: "none" | "deep" | "deeper" | "deepest",
   tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
 }
 
@@ -75,14 +74,13 @@ const Card = (props: CardPropTypes) => {
     data = {},
     highlight = {},
     selected = false,
-    shadow = 'none',
     tag = 'div',
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
   const backgroundCSS = background == 'none' ? '' : `background_${background}`
-  const cardCss = buildCss('pb_card_kit', selectedCSS, `shadow_${shadow}`, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
+  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })

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

@@ -45,12 +45,6 @@
     border: 0;
   }
 
-  @each $name, $shadow in $box_shadows {
-    &[class*=_#{$name}] {
-      box-shadow: $shadow;
-    }
-  }
-
   &[class*=_highlight] {
     overflow: hidden;
   }

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

@@ -11,14 +11,7 @@ $pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors),
 $pb_card_highlight_size: 4px;
 $pb_card_header_colors: map-merge($category_colors, $product_colors);
 $pb_card_header_border_radius: $border_rad_heavy;
-$pb_card_padding:(
-  none: 0,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
+
 $additional_colors: (
   "dark": $bg_dark,
   "light": $bg_light,

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -8,3 +8,5 @@
     <%= content %>
   <% end if content.present? %>
 <% end %>
+
+

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

@@ -4,9 +4,6 @@ module Playbook
   module PbCard
     class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :shadow, type: Playbook::Props::Enum,
-                    values: %w[none deep deeper deepest],
-                    default: "none"
       prop :highlight, type: Playbook::Props::Hash,
                        default: {}
       prop :tag, type: Playbook::Props::Enum,
@@ -24,7 +21,6 @@ module Playbook
       def classname
         generate_classname("pb_card_kit",
                            selected_class,
-                           shadow_class,
                            border_class,
                            border_radius_class,
                            background_class,
@@ -46,10 +42,6 @@ module Playbook
         selected ? "selected" : "deselected"
       end
 
-      def shadow_class
-        shadow != "none" ? "shadow_#{shadow}" : nil
-      end
-
       def highlight_position_class
         highlight[:position].present? ? "highlight_#{highlight[:position]}" : nil
       end

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

@@ -19,7 +19,7 @@
 
 <br>
 
-<%= pb_rails("card", props: { background: "light"})  do %>
+<%= pb_rails("card", props: { background: "light" })  do %>
   <%= pb_rails("body", props: {
   text: "Light"
 }) %>

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

@@ -1,4 +1,6 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: { 
+  cursor: "pointer" 
+}) do %>
   Card Content
 <% end %>
 

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

@@ -5,9 +5,16 @@ import Card from '../_card'
 const CardContent = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          cursor="pointer"
+          {...props}
+      >
+        {'Card content'}
+      </Card>
       <br />
-      <Card {...props}>
+      <Card
+          {...props}
+      >
         {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
 
 Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
@@ -90,3 +92,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements. 
+Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1,3 +1,5 @@
 The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
 
-If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+
+

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -2,10 +2,19 @@ import { ensureAccessible, renderKit } from '../utilities/test-utils'
 import { DateTimeStacked } from '../'
 
 /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+const currentDate = new Date()
+
+const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+  monthName = datetime.toLocaleString('en-US', { month: 'short' }),
+  day = datetime.getDate(),
+  fullYear = datetime.getFullYear(),
+  optionalYear = currentDate.getFullYear() !== fullYear ? fullYear : ''
+
+const monthDayYear = `${monthName}${day}${optionalYear}`
 
 const props = {
   data: { testid: 'datetimestacked' },
-  datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+  datetime,
 }
 
 test('Kit renders date time', () => {
@@ -19,17 +28,17 @@ it('Should be accessible', async () => {
 
 test('renders time in default timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}1:00pEDT`)
 })
 
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar312:00aJST/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
 })
 
 test('renders time in timezone', () => {
   props.timeZone = 'America/Denver'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/CaseLikeIf
+
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
@@ -44,3 +46,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/CaseLikeIf

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 module Playbook
   module PbFixedConfirmationToast
     class FixedConfirmationToast < Playbook::KitBase
@@ -53,3 +55,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -21,6 +21,7 @@ type FlexProps = {
   rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   wrap?: boolean,
+  alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 }
 
 const Flex = (props: FlexProps) => {
@@ -40,6 +41,7 @@ const Flex = (props: FlexProps) => {
     reverse = false,
     vertical = 'top',
     wrap = false,
+    alignSelf = 'none',
   } = props
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
@@ -53,6 +55,7 @@ const Flex = (props: FlexProps) => {
   const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
+  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
 
   return (
@@ -70,6 +73,7 @@ const Flex = (props: FlexProps) => {
           gapClass,
           rowGapClass,
           columnGapClass,
+          alignSelfClass
         ),
         globalProps(props),
         className

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -77,7 +77,6 @@ $gapTypes: (
     align-items: flex-start;
   }
 
-
   &[class*=align_items_right],
   &[class*=align_items_bottom],
   &[class*=align_items_end] {
@@ -96,6 +95,23 @@ $gapTypes: (
     align-items: baseline;
   }
 
+  // Alignment: Align Self - Rails & React
+  &[class*=align_self_start] {
+    align-self: flex-start;
+  }
+  
+  &[class*=align_self_end] {
+    align-self: flex-end;
+  }
+  
+  &[class*=align_self_center] {
+    align-self: center;
+  }
+  
+  &[class*=align_self_stretch] {
+    align-self: stretch;
+  }
+
   // Spacing
   &[class*=spacing_around],
   &[class*=justify_content_around] {

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -12,21 +12,25 @@ type FlexItemPropTypes = {
   className: string,
   overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
   order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  alignSelf?: "start" | "end" | "center" | "stretch",
+  displayFlex: boolean
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
   const growClass = grow === true ? 'grow' : ''
+  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
+  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -12,6 +12,28 @@
     flex-shrink: 1;
   }
 
+  // Display Flex - Rails & React
+  &[class*=display_flex] {
+    display: flex;
+  }
+
+  // Alignment: Align Self - Rails & React
+  &[class*=align_self_start] {
+    align-self: flex-start;
+  }
+  
+  &[class*=align_self_end] {
+    align-self: flex-end;
+  }
+  
+  &[class*=align_self_center] {
+    align-self: center;
+  }
+  
+  &[class*=align_self_stretch] {
+    align-self: stretch;
+  }
+
   //Order Items
   @for $i from 0 through 12 {
     &[class*=order_#{$i}]{

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb

@@ -1,5 +1,16 @@
-<%= pb_rails("title", props: {size: 4, text: "Grow"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %>
 <br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex/flex_item",props: { gap:"sm", display_flex: true }) do %>
+    <%= pb_rails("flex/flex_item") do %>We<% end %>
+    <%= pb_rails("flex/flex_item") do %>Are<% end %>
+    <%= pb_rails("flex/flex_item") do %>Being<% end %>
+    <%= pb_rails("flex/flex_item") do %>Flexed<% end %>
+  <% end %>
+</div>
+
+<br/><br/>
+
 <div class="flex-doc-example">
   <%= pb_rails("flex",props: { gap:"sm" }) do %>
     <%= pb_rails("flex/flex_item", props: { grow: true }) do %>I'm growing<% end %>

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md

@@ -1,5 +1,6 @@
 ##### Props
 
+*  `display_flex` | **Type**: Boolean
 *  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 *  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
 *  `grow` | **Type**: Boolean
@@ -10,3 +11,4 @@
 - Setting Flex to 1 is equal to setting the grow & shrink prop to true
 - Setting Flex to 0 is equal to setting the grow & shrink prop to false
 - If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
+- display_flex will either be true or false. If true, then the class will be applied to the kit

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb

@@ -0,0 +1,89 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<br/>
+  <div class="flex-doc-example">
+    <%= pb_rails("flex") do %>
+      <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+    <% end %>
+  </div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"end"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "center"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"stretch"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
+<br/>
+  <div class="flex-doc-example">
+    <%= pb_rails("flex", props: {orientation: "column"}) do %>
+      <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+    <% end %>
+  </div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "end"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"center"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding: "sm", align_self:"stretch"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>