playbook_ui 7.14.0.pre.alpha1 → 7.14.0

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { IconCircle } from '../..'
+
+const IconCircleSizesDark = (props) => {
+  return (
+    <div>
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          {...props}
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="md"
+          {...props}
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="lg"
+          {...props}
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="xl"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCircleSizesDark

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

@@ -4,8 +4,15 @@ examples:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_dark: Dark
+  - icon_circle_sizes_dark: Dark Size
+  - icon_circle_color_dark: Dark Color
+  
 
   react:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_dark: Dark
+  - icon_circle_sizes_dark: Dark Size
+  - icon_circle_color_dark: Dark Color

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

@@ -1,3 +1,6 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.jsx'
 export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
+export { default as IconCircleDark } from './_icon_circle_dark.jsx'
+export { default as IconCircleColorDark } from './_icon_circle_color_dark.jsx'
+export { default as IconCircleSizesDark } from './_icon_circle_sizes_dark.jsx'

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "comment",
+  text: "5",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "clock",
+  text: "15m",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { IconValue } from '../../'
+
+const IconValueAlignDark = (props) => {
+  return (
+    <div>
+      <IconValue
+          dark
+          icon="heart"
+          text="93"
+          {...props}
+      />
+
+      <br />
+
+      <IconValue
+          align="center"
+          dark
+          icon="comment"
+          text="5"
+          {...props}
+      />
+
+      <br />
+
+      <IconValue
+          align="right"
+          dark
+          icon="clock"
+          text="15min"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconValueAlignDark

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "comment",
+  text: "5"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "clock",
+  text: "15m"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { IconValue } from '../../'
+
+const IconValueDark = (props) => {
+  return (
+    <div>
+      <IconValue
+          dark
+          icon="clipboard"
+          text="33-123456"
+          {...props}
+      />
+
+      <br />
+
+      <IconValue
+          dark
+          icon="heart"
+          text="93"
+          {...props}
+      />
+
+      <br />
+
+      <IconValue
+          dark
+          icon="clock"
+          text="15min"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconValueDark

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

@@ -3,7 +3,12 @@ examples:
   rails:
   - icon_value_default: Default
   - icon_value_align: Align
+  - icon_value_dark: Dark
+  - icon_value_align_dark: Align Dark
+
 
   react:
   - icon_value_default: Default
   - icon_value_align: Align
+  - icon_value_dark: Dark
+  - icon_value_align_dark: Align Dark

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

@@ -1,2 +1,4 @@
 export { default as IconValueDefault } from './_icon_value_default.jsx'
 export { default as IconValueAlign } from './_icon_value_align.jsx'
+export { default as IconValueDark } from './_icon_value_dark.jsx'
+export { default as IconValueAlignDark } from './_icon_value_align_dark.jsx'

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -21,14 +21,14 @@ $card-border-radius: $border_rad_lightest;
       grid-column-gap: $space_sm;
       grid-row-gap: $space_sm;
       grid-template-columns: repeat(4, 1fr);
-
+      
       @media screen and (max-width: $screen-md-min) {
         grid-template-columns: repeat(2, 1fr);
       }
        @media screen and (max-width: $screen-xs-min) {
         grid-template-columns: repeat(1, 1fr);
       }
-    }
+    } 
   }
 
   &[class*=_collection_detail]{
@@ -36,13 +36,13 @@ $card-border-radius: $border_rad_lightest;
       width: 100%;
       height: 100%;
       padding: $space_lg;
-      grid-template-areas:
+      grid-template-areas: 
       "side-bar collection";
       grid-template-columns: .25fr 1fr;
       grid-column-gap: $space_sm;
       div.layout_body{
         @media screen and (min-width: $screen-md-min) {
-        margin-left: $space_md;
+        margin-left: $space_md;        
         }
         @media screen and (max-width: $screen-lg-min) {
           grid-template-columns: repeat(3, 1fr);
@@ -61,7 +61,7 @@ $card-border-radius: $border_rad_lightest;
         grid-template-columns: 1fr;
         grid-row-gap: $space_sm;
       }
-
+      
   }
 
   &[class*=_kanban]{
@@ -76,7 +76,7 @@ $card-border-radius: $border_rad_lightest;
       content: '';
       flex: 0 0 $gap;
     }
-
+    
     div.layout_body{
       width: $list-width;
       height: 100vh;
@@ -135,7 +135,7 @@ $card-border-radius: $border_rad_lightest;
       width: 100%;
     }
   }
-
+  
 
   &[class*=_sidebar]{
     $layout_sizes: (
@@ -188,7 +188,7 @@ $card-border-radius: $border_rad_lightest;
     // Collapse Settings
     @each $position in $positions {
       @each $breakpoint_name, $breakpoint in $breakpoints {
-        &[class*=_#{$position}_collapse_#{$breakpoint_name}] {
+        &_#{$position}_collapse_#{$breakpoint_name} {
           @include break_at($breakpoint) {
             @if $position == 'left' {
               grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
@@ -198,7 +198,7 @@ $card-border-radius: $border_rad_lightest;
               grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
               grid-template-rows: 1fr auto;
             }
-            grid-template-columns: 1fr !important;
+            grid-template-columns: 1fr;
             &.full {
               min-height: auto !important;
             }

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Layout } from '../../'
+
+const LayoutSizesDark = (props) => {
+  return (
+    <div>
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xs"
+          variant="dark"
+          {...props}
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="sm"
+          variant="dark"
+          {...props}
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="md"
+          variant="dark"
+          {...props}
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="lg"
+          variant="dark"
+          {...props}
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+
+      <br />
+      <br />
+
+      <Layout
+          collapse="xs"
+          position="left"
+          size="xl"
+          variant="dark"
+          {...props}
+      >
+        <Layout.Side>
+          {'Side'}
+        </Layout.Side>
+        <Layout.Body>
+          {'Body'}
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutSizesDark

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

@@ -3,16 +3,20 @@ examples:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
+  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
 
+
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
+  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
+

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

@@ -1,6 +1,7 @@
 export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
+export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
 export { default as LayoutCollection } from './_layout_collection.jsx'
 export { default as LayoutKanban } from './_layout_kanban.jsx'
 export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'