playbook_ui 10.21.0 → 10.22.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a59d79cb7efc701b2cfcda8f853e5d47f6e7a8bb0c63a26ea1fb1a0d1352d7ef
-  data.tar.gz: 4ce8a5b16f4dd0d58a56793bc8aaf8f7e285104fae767a7e4867853ea6531a5f
+  metadata.gz: 8d716c8b2fb0fb3cb78211c502bf2049420b05f536fdcc4ad183bce41703d364
+  data.tar.gz: dcb16d5fc153dc5eba40f0ae8b32299e782a4f3ca929540179a6d08002f15572
 SHA512:
-  metadata.gz: 36e213335bf164b63b39d2958360e6629c0f16cc07ea01fa2a645f36878fc531c5d4a4e84d8f8aa388c68bb9a92961727399297f45048e9cc7ea5e4d54078b18
-  data.tar.gz: 341993d316fbe3a2cad5b26861ae255128657a13505100aa12b46afd2694aa993fa7210f67faa86b2a2f79b9a8ed999d4786cb7a31512c75080aef5198283d72
+  metadata.gz: 523973d2fa615911426199d7d49d22748926f40e2f704e0fbf6958d632cd7301dade5a6971659fc41fbc7844b98bcff8f80d3efe16554a60fe782d00dfa5dedc
+  data.tar.gz: f0a6509496789efbbfa0884d08c87fe7d902fe4d09feb07d7f918c7e2d034ce8213d9f01fd48b8132bdcfc584192c7357c6269604912d70356b80b45c1e20fff

data/app/pb_kits/playbook/_playbook.scss

@@ -100,3 +100,4 @@
 @import './utilities/shadow';
 @import './utilities/line_height';
 @import './utilities/display';
+@import './utilities/flexbox';

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -15,6 +15,7 @@ type ButtonPropTypes = {
   data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
+  form?: string,
   fullWidth?: boolean,
   icon?: string,
   id?: string,
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    form = null
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -119,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
           {...dataProps}
           className={css}
           disabled={disabled}
+          form={form}
           id={id}
           onClick={onClick}
           role="button"

data/app/pb_kits/playbook/pb_button/button.rb

@@ -21,6 +21,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: ["sm", "md", "lg", nil],
                   default: nil
+      prop :form, default: nil
 
       def options
         {
@@ -32,6 +33,7 @@ module Playbook
           role: "button",
           type: type,
           value: value,
+          form: form,
         }.compact
       end
 

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonForm = (props) => (
+  <div>
+    <Button
+        form="form-id"
+        text="Button with Form Attribute"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonForm

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

@@ -8,6 +8,7 @@ examples:
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
   - button_size: Button Size
+  - button_form: Button Form Attribute
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -17,3 +18,4 @@ examples:
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
+  - button_form: Button Form Attribute

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

@@ -6,3 +6,4 @@ export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
+export { default as ButtonForm } from './_button_form.jsx'

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

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
     <%= content %>
   <% end if content.present? %>
 <% end %>

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

@@ -36,6 +36,94 @@ module Playbook
         end
       end
 
+      def body_flex_direction
+        if flex_direction.present?
+          "flex_direction_#{flex_direction}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_wrap
+        if flex_wrap.present?
+          "flex_wrap_#{flex_wrap}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_content
+        if justify_content.present?
+          "justify_content_#{justify_content}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_self
+        if justify_self.present?
+          "justify_self_#{justify_self}"
+        else
+          ""
+        end
+      end
+
+      def body_align_items
+        if align_items.present?
+          "align_items_#{align_items}"
+        else
+          ""
+        end
+      end
+
+      def body_align_content
+        if align_content.present?
+          "align_content_#{align_content}"
+        else
+          ""
+        end
+      end
+
+      def body_align_self
+        if align_self.present?
+          "align_self_#{align_self}"
+        else
+          ""
+        end
+      end
+
+      def body_flex
+        if flex.present?
+          "flex_#{flex}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_grow
+        if flex_grow.present?
+          "flex_grow_#{flex_grow}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_shrink
+        if flex_shrink.present?
+          "flex_shrink_#{flex_shrink}"
+        else
+          ""
+        end
+      end
+
+      def body_order
+        if order.present?
+          "order_#{order}"
+        else
+          ""
+        end
+      end
+
     private
 
       def selected_class

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

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        generate_classname("pb_card_body_kit", padding, separator: " ")
+        generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -7,7 +7,7 @@ const FlexAlign = (props) => {
 
       <Title
           size={4}
-          text="Row"
+          text="row"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -8,17 +8,11 @@ module Playbook
                   default: false
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
-      prop :flex, type: Playbook::Props::Enum,
-                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
-                  default: "none"
+
       prop :overflow, type: Playbook::Props::Enum,
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
 
-      prop :order, type: Playbook::Props::Enum,
-                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
-                   default: "none"
-
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -27,7 +21,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
       end
 
       def style_value
@@ -59,22 +53,6 @@ module Playbook
       def shrink_class
         shrink ? "shrink" : nil
       end
-
-      def flex_class
-        if flex == "none"
-          nil
-        else
-          "flex_#{flex}"
-        end
-      end
-
-      def order_class
-        if order == "none"
-          ""
-        else
-          "order_#{order}"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -11,6 +11,7 @@ const LineGraphDefault = (props) => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
+        height="300px"
         id="line-fixed-height"
         title="Fixed Height (300px)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

data/app/pb_kits/playbook/utilities/_align_content.scss

@@ -0,0 +1,29 @@
+.align_content_start {
+  display: flex;
+  align-content: start !important;
+}
+
+.align_content_end {
+  display: flex;
+  align-content: end !important;
+}
+
+.align_content_center {
+  display: flex;
+  align-content: center !important;
+}
+
+.align_content_space_between {
+  display: flex;
+  align-content: space-between !important;
+}
+
+.align_content_space_around {
+  display: flex;
+  align-content: space-around !important;
+}
+
+.align_content_space_evenly {
+  display: flex;
+  align-content: space-evenly !important;
+}

data/app/pb_kits/playbook/utilities/_align_items.scss

@@ -0,0 +1,35 @@
+.align_items_flex_start {
+  display: flex;
+  align-items: flex-start !important;
+}
+
+.align_items_flex_end {
+  display: flex;
+  align-items: flex-end !important;
+}
+
+.align_items_start {
+  display: flex;
+  align-items: start !important;
+}
+
+.align_items_end {
+  display: flex;
+  align-items: end !important;
+}
+
+
+.align_items_center {
+  display: flex;
+  align-items: center !important;
+}
+
+.align_items_baseline {
+  display: flex;
+  align-items: baseline !important;
+}
+
+.align_items_stretch {
+  display: flex;
+  align-items: stretch !important;
+}

data/app/pb_kits/playbook/utilities/_align_self.scss

@@ -0,0 +1,29 @@
+.align_self_start {
+  display: flex;
+  align-self: start !important;
+}
+
+.align_self_end {
+  display: flex;
+  align-self: end !important;
+}
+
+.align_self_auto {
+  display: flex;
+  align-self: auto !important;
+}
+
+.align_self_center {
+  display: flex;
+  align-self: center !important;
+}
+
+.align_self_stretch {
+  display: flex;
+  align-self: stretch !important;
+}
+
+.align_self_baseline {
+  display: flex;
+  align-self: baseline !important;
+}

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

@@ -0,0 +1,15 @@
+.flex_auto {
+  flex: auto !important;
+}
+
+.flex_initial {
+  flex: initial !important;
+}
+
+.flex_none {
+  flex: none !important;
+}
+
+.flex_1 {
+  flex: 1 !important;
+}

data/app/pb_kits/playbook/utilities/_flex_direction.scss

@@ -0,0 +1,19 @@
+.flex_direction_row {
+  display: flex;
+  flex-direction: row !important;
+}
+
+.flex_direction_column {
+  display: flex;
+  flex-direction: column !important;
+}
+
+.flex_direction_row_reverse {
+  display: flex;
+  flex-direction: row-reverse !important;
+}
+
+.flex_direction_column_reverse {
+  display: flex;
+  flex-direction: column-reverse !important;
+}

data/app/pb_kits/playbook/utilities/_flex_grow.scss

@@ -0,0 +1,9 @@
+.flex_grow_1 {
+  display: flex;
+  flex-grow: 1 !important;
+}
+
+.flex_grow_0 {
+  display: flex;
+  flex-grow: 0 !important;
+}

data/app/pb_kits/playbook/utilities/_flex_shrink.scss

@@ -0,0 +1,9 @@
+.flex_shrink_1 {
+  display: flex;
+  flex-shrink: 1 !important;
+}
+
+.flex_shrink_0 {
+  display: flex;
+  flex-shrink: 0 !important;
+}

data/app/pb_kits/playbook/utilities/_flex_wrap.scss

@@ -0,0 +1,14 @@
+.flex_wrap_wrap {
+  display: flex;
+  flex-wrap: wrap !important;
+}
+
+.flex_wrap_nowrap {
+  display: flex;
+  flex-wrap: nowrap !important;
+}
+
+.flex_wrap_wrap_reverse {
+  display: flex;
+  flex-wrap: wrap-reverse !important;
+}

data/app/pb_kits/playbook/utilities/_flexbox.scss

@@ -0,0 +1,11 @@
+@import './utilities/flex_direction';
+@import './utilities/justify_content';
+@import './utilities/flex_wrap';
+@import './utilities/justify_self';
+@import './utilities/align_items';
+@import './utilities/align_content';
+@import './utilities/align_self';
+@import './utilities/flex';
+@import './utilities/flex_grow';
+@import './utilities/flex_shrink';
+@import './utilities/order';

data/app/pb_kits/playbook/utilities/_justify_content.scss

@@ -0,0 +1,23 @@
+.justify_content_start {
+  justify-content: start !important;
+}
+
+.justify_content_end {
+  justify-content: end !important;
+}
+
+.justify_content_center {
+  justify-content: center !important;
+}
+
+.justify_content_space_between {
+  justify-content: space-between !important;
+}
+
+.justify_content_space_around {
+  justify-content: space-around !important;
+}
+
+.justify_content_space_evenly {
+  justify-content: space-evenly !important;
+}

data/app/pb_kits/playbook/utilities/_justify_self.scss

@@ -0,0 +1,19 @@
+.justify_self_auto {
+  justify-self: auto !important;
+}
+
+.justify_self_start {
+  justify-self: start !important;
+}
+
+.justify_self_end {
+  justify-self: end !important;
+}
+
+.justify_self_center {
+  justify-self: center !important;
+}
+
+.justify_self_stretch {
+  justify-self: stretch !important;
+}

data/app/pb_kits/playbook/utilities/_order.scss

@@ -0,0 +1,55 @@
+.order_1 {
+  order: 1 !important;
+}
+
+.order_2 {
+  order: 2 !important;
+}
+
+.order_3 {
+  order: 3 !important;
+}
+
+.order_4 {
+  order: 4 !important;
+}
+
+.order_5 {
+  order: 5 !important;
+}
+
+.order_6 {
+  order: 6 !important;
+}
+
+.order_7 {
+  order: 7 !important;
+}
+
+.order_8 {
+  order: 8 !important;
+}
+
+.order_9 {
+  order: 9 !important;
+}
+
+.order_10 {
+  order: 10 !important;
+}
+
+.order_11 {
+  order: 11 !important;
+}
+
+.order_12 {
+  order: 12 !important;
+}
+
+.order_none {
+  order: none !important;
+}
+
+.order_first {
+  order: -1 !important;
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -0,0 +1,175 @@
+// Prop categories
+const spacingProps = ({
+  marginRight,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginX,
+  marginY,
+  margin,
+  paddingRight,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingX,
+  paddingY,
+  padding,
+}) => {
+  let css = ''
+  css += marginRight ? `mr_${marginRight} ` : ''
+  css += marginLeft ? `ml_${marginLeft} ` : ''
+  css += marginTop ? `mt_${marginTop} ` : ''
+  css += marginBottom ? `mb_${marginBottom} ` : ''
+  css += marginX ? `mx_${marginX} ` : ''
+  css += marginY ? `my_${marginY} ` : ''
+  css += margin ? `m_${margin} ` : ''
+  css += paddingRight ? `pr_${paddingRight} ` : ''
+  css += paddingLeft ? `pl_${paddingLeft} ` : ''
+  css += paddingTop ? `pt_${paddingTop} ` : ''
+  css += paddingBottom ? `pb_${paddingBottom} ` : ''
+  css += paddingX ? `px_${paddingX} ` : ''
+  css += paddingY ? `py_${paddingY} ` : ''
+  css += padding ? `p_${padding} ` : ''
+  return css
+}
+
+const darkProps = ({ dark }) => {
+  let css = ''
+  css += dark ? 'dark' : ''
+  return css
+}
+
+const numberSpacingProps = ({ numberSpacing }) => {
+  let css = ''
+  css += numberSpacing ? `ns_${numberSpacing} ` : ''
+  return css
+}
+
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  css += maxWidth ? `max_width_${maxWidth} ` : ''
+  return css
+}
+
+const zIndexProps = ({ zIndex }) => {
+  let css = ''
+  css += zIndex ? `z_index_${zIndex} ` : ''
+  return css
+}
+
+const shadowProps = ({ shadow }) => {
+  let css = ''
+  css += shadow ? `shadow_${shadow} ` : ''
+  return css
+}
+
+const lineHeightProps = ({ lineHeight }) => {
+  let css = ''
+  css += lineHeight ? `line_height_${lineHeight} ` : ''
+  return css
+}
+
+const displayProps = ({ display }) => {
+  let css = ''
+  css += display ? `display_${display} ` : ''
+  return css
+}
+
+const cursorProps = ({ cursor }) => {
+  let css = ''
+  css += cursor ? `cursor_${cursor} ` : ''
+  return css
+}
+
+const flexDirectionProps = ({ flexDirection }) => {
+  let css = ''
+  css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+    flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+      flexDirection ? `flex_direction_${flexDirection} ` : ''
+  return css
+}
+
+const flexWrapProps = ({ flexWrap }) => {
+  let css = ''
+  css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+    flexWrap == 'noWrap' ? 'flex_nowrap' :
+      flexWrap ? `flex_wrap_${flexWrap} ` : ''
+  return css
+}
+
+const justifyContentProps = ({ justifyContent }) => {
+  let css = ''
+  css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
+    justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
+      justifyContent == 'spaceAround' ? 'justify_content_space_around' :
+        justifyContent ? `justify_content_${justifyContent}` : ''
+  return css
+}
+
+const justifySelfProps = ({ justifySelf }) => {
+  let css = ''
+  css += justifySelf ? `justify_self_${justifySelf}` : ''
+  return css
+}
+
+const alignItemsProps = ({ alignItems }) => {
+  let css = ''
+  css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+    alignItems == 'flexEnd' ? 'align_items_flex_end' :
+      alignItems ? `align_items_${alignItems}` : ''
+  return css
+}
+
+const alignContentProps = ({ alignContent }) => {
+  let css = ''
+  css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
+    alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
+      alignContent == 'spaceAround' ? 'align_content_space_around' :
+        alignContent ? `align_content_${alignContent}` : ''
+  return css
+}
+
+const alignSelfProps = ({ alignSelf }) => {
+  let css = ''
+  css += alignSelf ? `align_self_${alignSelf}` : ''
+  return css
+}
+
+const flexProps = ({ flex }) => {
+  let css = ''
+  css += flex ? `flex_${flex}` : ''
+  return css
+}
+
+const flexGrowProps = ({ flexGrow }) => {
+  let css = ''
+  css += flexGrow ? `flex_grow_${flexGrow}` : ''
+  return css
+}
+
+const flexShrinkProps = ({ flexShrink }) => {
+  let css = ''
+  css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+  return css
+}
+
+const orderProps = ({ order }) => {
+  let css = ''
+  css += order ? `order_${order}` : ''
+  return css
+}
+
+// All Exported as a single function
+export const globalProps = (props, defaultProps = {}) => {
+  const allProps = { ...props, ...defaultProps }
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps) + flexDirectionProps(allProps) + flexWrapProps(allProps) + justifyContentProps(allProps) + justifySelfProps(allProps) + alignItemsProps(allProps) + alignContentProps(allProps) + alignSelfProps(allProps) + flexProps(allProps) + flexGrowProps(allProps) + flexShrinkProps(allProps) + orderProps(allProps)
+}
+
+export const deprecatedProps = (kit, props = []) => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}

data/lib/playbook/align_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignContent
+    def self.included(base)
+      base.prop :align_content
+    end
+
+    def align_content_props
+      selected_props = align_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_content_value = send(k)
+        "align_content_#{align_content_value}" if align_content_values.include? align_content_value
+      end.compact.join(" ")
+    end
+
+    def align_content_options
+      {
+        align_content: "align_content",
+      }
+    end
+
+    def align_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/align_items.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignItems
+    def self.included(base)
+      base.prop :align_items
+    end
+
+    def align_items_props
+      selected_props = align_items_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_items_value = send(k)
+        "align_items_#{align_items_value}" if align_items_values.include? align_items_value
+      end.compact.join(" ")
+    end
+
+    def align_items_options
+      {
+        align_items: "align_items",
+      }
+    end
+
+    def align_items_values
+      %w[flex_start flex_end start end center baseline stretch]
+    end
+  end
+end

data/lib/playbook/align_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module AlignSelf
+    def self.included(base)
+      base.prop :align_self
+    end
+
+    def align_self_props
+      selected_props = align_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        align_self_value = send(k)
+        "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+      end.compact.join(" ")
+    end
+
+    def align_self_options
+      {
+        align_self: "align_self",
+      }
+    end
+
+    def align_self_values
+      %w[auto start end center stretch baseline]
+    end
+  end
+end

data/lib/playbook/classnames.rb

@@ -20,6 +20,17 @@ module Playbook
         line_height_props,
         display_props,
         cursor_props,
+        flex_direction_props,
+        flex_wrap_props,
+        justify_content_props,
+        justify_self_props,
+        align_items_props,
+        align_content_props,
+        align_self_props,
+        flex_props,
+        flex_grow_props,
+        flex_shrink_props,
+        order_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/flex.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Flex
+    def self.included(base)
+      base.prop :flex
+    end
+
+    def flex_props
+      selected_props = flex_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_value = send(k)
+        "flex_#{flex_value}" if flex_values.include? flex_value
+      end.compact.join(" ")
+    end
+
+    def flex_options
+      {
+        flex: "flex",
+      }
+    end
+
+    def flex_values
+      %w[auto initial 0 1 2 3 4 5 6 7 8 9 10 11 12 none]
+    end
+  end
+end

data/lib/playbook/flex_direction.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexDirection
+    def self.included(base)
+      base.prop :flex_direction
+    end
+
+    def flex_direction_props
+      selected_props = flex_direction_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_direction_value = send(k)
+        "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
+      end.compact.join(" ")
+    end
+
+    def flex_direction_options
+      {
+        flex_direction: "flex_direction",
+      }
+    end
+
+    def flex_direction_values
+      %w[row column row_reverse column_reverse]
+    end
+  end
+end

data/lib/playbook/flex_grow.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexGrow
+    def self.included(base)
+      base.prop :flex_grow
+    end
+
+    def flex_grow_props
+      selected_props = flex_grow_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_grow_value = send(k)
+        "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value
+      end.compact.join(" ")
+    end
+
+    def flex_grow_options
+      {
+        flex_grow: "flex_grow",
+      }
+    end
+
+    def flex_grow_values
+      %w[1 0]
+    end
+  end
+end

data/lib/playbook/flex_shrink.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexShrink
+    def self.included(base)
+      base.prop :flex_shrink
+    end
+
+    def flex_shrink_props
+      selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_shrink_value = send(k)
+        "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value
+      end.compact.join(" ")
+    end
+
+    def flex_shrink_options
+      {
+        flex_shrink: "flex_shrink",
+      }
+    end
+
+    def flex_shrink_values
+      %w[1 0]
+    end
+  end
+end

data/lib/playbook/flex_wrap.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module FlexWrap
+    def self.included(base)
+      base.prop :flex_wrap
+    end
+
+    def flex_wrap_props
+      selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        flex_wrap_value = send(k)
+        "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
+      end.compact.join(" ")
+    end
+
+    def flex_wrap_options
+      {
+        flex_wrap: "flex_wrap",
+      }
+    end
+
+    def flex_wrap_values
+      %w[wrap nowrap wrap_reverse]
+    end
+  end
+end

data/lib/playbook/justify_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module JustifyContent
+    def self.included(base)
+      base.prop :justify_content
+    end
+
+    def justify_content_props
+      selected_props = justify_content_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        justify_content_value = send(k)
+        "justify_content_#{justify_content_value}" if justify_content_values.include? justify_content_value
+      end.compact.join(" ")
+    end
+
+    def justify_content_options
+      {
+        justify_content: "justify_content",
+      }
+    end
+
+    def justify_content_values
+      %w[start end center space_between space_around space_evenly]
+    end
+  end
+end

data/lib/playbook/justify_self.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module JustifySelf
+    def self.included(base)
+      base.prop :justify_self
+    end
+
+    def justify_self_props
+      selected_props = justify_self_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        justify_self_value = send(k)
+        "justify_self_#{justify_self_value}" if justify_self_values.include? justify_self_value
+      end.compact.join(" ")
+    end
+
+    def justify_self_options
+      {
+        justify_self: "justify_self",
+      }
+    end
+
+    def justify_self_values
+      %w[auto start end center stretch]
+    end
+  end
+end

data/lib/playbook/kit_base.rb

@@ -8,6 +8,17 @@ require "playbook/shadow"
 require "playbook/line_height"
 require "playbook/display"
 require "playbook/cursor"
+require "playbook/flex_direction"
+require "playbook/flex_wrap"
+require "playbook/justify_content"
+require "playbook/justify_self"
+require "playbook/align_items"
+require "playbook/align_content"
+require "playbook/align_self"
+require "playbook/flex"
+require "playbook/flex_grow"
+require "playbook/flex_shrink"
+require "playbook/order"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -21,6 +32,17 @@ module Playbook
     include Playbook::LineHeight
     include Playbook::Display
     include Playbook::Cursor
+    include Playbook::FlexDirection
+    include Playbook::FlexWrap
+    include Playbook::JustifyContent
+    include Playbook::JustifySelf
+    include Playbook::AlignItems
+    include Playbook::AlignContent
+    include Playbook::AlignSelf
+    include Playbook::Flex
+    include Playbook::FlexGrow
+    include Playbook::FlexShrink
+    include Playbook::Order
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/order.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Order
+    def self.included(base)
+      base.prop :order
+    end
+
+    def order_props
+      selected_props = order_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        order_value = send(k)
+        "order_#{order_value}" if order_values.include? order_value
+      end.compact.join(" ")
+    end
+
+    def order_options
+      {
+        order: "order",
+      }
+    end
+
+    def order_values
+      %w[1 2 3 4 5 6 7 8 9 10 11 12 first none]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.20.0"
-  VERSION = "10.21.0"
+  PREVIOUS_VERSION = "10.22.0"
+  VERSION = "10.22.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.21.0
+  version: 10.22.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-15 00:00:00.000000000 Z
+date: 2022-03-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -417,6 +417,8 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_default.md
+- app/pb_kits/playbook/pb_button/docs/_button_form.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
@@ -2062,16 +2064,29 @@ files:
 - app/pb_kits/playbook/tokens/exports/_spacing.scss
 - app/pb_kits/playbook/tokens/exports/_typography.scss
 - app/pb_kits/playbook/tokens/index.scss
+- app/pb_kits/playbook/utilities/_align_content.scss
+- app/pb_kits/playbook/utilities/_align_items.scss
+- app/pb_kits/playbook/utilities/_align_self.scss
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/_cursor.scss
 - app/pb_kits/playbook/utilities/_display.scss
+- app/pb_kits/playbook/utilities/_flex.scss
+- app/pb_kits/playbook/utilities/_flex_direction.scss
+- app/pb_kits/playbook/utilities/_flex_grow.scss
+- app/pb_kits/playbook/utilities/_flex_shrink.scss
+- app/pb_kits/playbook/utilities/_flex_wrap.scss
+- app/pb_kits/playbook/utilities/_flexbox.scss
+- app/pb_kits/playbook/utilities/_justify_content.scss
+- app/pb_kits/playbook/utilities/_justify_self.scss
 - app/pb_kits/playbook/utilities/_line_height.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
+- app/pb_kits/playbook/utilities/_order.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
+- app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/globalProps.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
@@ -2080,10 +2095,18 @@ files:
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
 - lib/playbook.rb
+- lib/playbook/align_content.rb
+- lib/playbook/align_items.rb
+- lib/playbook/align_self.rb
 - lib/playbook/classnames.rb
 - lib/playbook/cursor.rb
 - lib/playbook/display.rb
 - lib/playbook/engine.rb
+- lib/playbook/flex.rb
+- lib/playbook/flex_direction.rb
+- lib/playbook/flex_grow.rb
+- lib/playbook/flex_shrink.rb
+- lib/playbook/flex_wrap.rb
 - lib/playbook/forms.rb
 - lib/playbook/forms/builder.rb
 - lib/playbook/forms/builder/action_area.rb
@@ -2093,6 +2116,8 @@ files:
 - lib/playbook/forms/builder/form_field_builder.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
+- lib/playbook/justify_content.rb
+- lib/playbook/justify_self.rb
 - lib/playbook/kit_base.rb
 - lib/playbook/kit_resolver.rb
 - lib/playbook/line_height.rb
@@ -2100,6 +2125,7 @@ files:
 - lib/playbook/markdown/helper.rb
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
+- lib/playbook/order.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb