playbook_ui 10.21.0 → 10.21.1.pre.alpha1

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

@@ -59,7 +59,59 @@ type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
-export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
+type Flex = {
+  flex?: "none" | "initial" | "auto" | 1
+}
+
+type FlexDirection = {
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
+}
+
+type FlexGrow = {
+  flexGrow?: 0 | 1
+}
+
+type FlexShrink = {
+  flexShrink?: 0 | 1
+}
+
+type FlexWrap = {
+  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
+}
+
+type Alignment = "start" | "end" | "center"
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
+type JustifyContent = {
+  justifyContent?: Alignment & Space
+}
+
+type JustifySelf = {
+  justifySelf?: Alignment & ("auto" | "stretch")
+}
+
+type AlignContent = {
+  alignContent?: Alignment & Space
+}
+
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+}
+
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+}
+
+type Order = {
+  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+}
+
+export type GlobalProps = AlignContent & AlignItems & AlignSelf &
+  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
+  Shadow & ZIndex
 
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
@@ -135,15 +187,81 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     let css = ''
     css += cursor ? `cursor_${cursor} ` : ''
     return css
+  },
+  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
+    let css = ''
+    css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+      flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+        flexDirection ? `flex_direction_${flexDirection} ` : ''
+    return css
+  },
+  flexWrapProps: ({ flexWrap }: FlexWrap) => {
+    let css = ''
+    css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+      flexWrap == 'nowrap' ? 'flex_nowrap' :
+        flexWrap ? `flex_wrap_${flexWrap} ` : ''
+    return css
+  },
+  justifyContentProps: ({ justifyContent }: 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
+  },
+  justifySelfProps: ({ justifySelf }: JustifySelf) => {
+    let css = ''
+    css += justifySelf ? `justify_self_${justifySelf}` : ''
+    return css
+  },
+  alignItemsProps: ({ alignItems }: AlignItems) => {
+    let css = ''
+    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+      alignItems == 'flexEnd' ? 'align_items_flex_end' :
+        alignItems ? `align_items_${alignItems}` : ''
+    return css
+  },
+  alignContentProps: ({ alignContent }: 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
+  },
+  alignSelfProps: ({ alignSelf }: AlignSelf) => {
+    let css = ''
+    css += alignSelf ? `align_self_${alignSelf}` : ''
+    return css
+  },
+  flexProps: ({ flex }: Flex) => {
+    let css = ''
+    css += flex ? `flex_${flex}` : ''
+    return css
+  },
+  flexGrowProps: ({ flexGrow }: FlexGrow) => {
+    let css = ''
+    css += flexGrow ? `flex_grow_${flexGrow}` : ''
+    return css
+  },
+  flexShrinkProps: ({ flexShrink }: FlexShrink) => {
+    let css = ''
+    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+    return css
+  },
+  orderProps: ({ order }: Order) => {
+    let css = ''
+    css += order ? `order_${order}` : ''
+    return css
   }
 }
 
-// All Exported as a single function
 export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)
-  }).join("")
+  }).filter((value) => value?.length > 0).join(" ")
 }
 
 export const deprecatedProps = (kit: string, props: string[] = []): void => {

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: {}