playbook_ui 7.11.1 → 7.14.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 750f900a7435e934c7fe3d2f382e04d1628fcf682514e62df328660c508f08a0
-  data.tar.gz: 7a01c079573dda9db0f8ca18009fcfbdeeba80df54c7cc89d1da00f1b141ef0c
+  metadata.gz: a51b6024a6b3ca509d82f298e232022e404c173b21cd22f22d54cd448f2626ac
+  data.tar.gz: fc0ff76f76764102390ddf0c71b5b54f4e0419fc79e183f919ac09b790221a5e
 SHA512:
-  metadata.gz: f914cdd6e7b1be3a8bb1304ac9d2bd9eefacfffae176aead556ecb4bedb0f0b6df476d5c84e4322d240ffa42982bf5c742df90e34472a0a51a262759d4533951
-  data.tar.gz: 4721bae1266b4ede5db496a9f765c3912e2306b8c9fb97155a95ac8d85486027ba11b9f6b139de4ae0b16de4c530a42fc0d4a36aa239329ea226bbb6a8e9d6c5
+  metadata.gz: 7df24634215015e6133ec2da8704cb0920a2f39cb3d6cf6d2dd131cf243f56f05a61a20249f0d11a4044e9d2fb69da2504c39dce9d992cb33e06429b5b4c9445
+  data.tar.gz: fbbd607ba23335bf90d5cfdbf0221dcbfce2fbc6ee9a1d2ee07c0796a84a84c4280fdb0d1b5bf7e9999d0de5737db02be32da25c97f11b806f192b2e5265ba9c

data/app/helpers/playbook/pb_sample_helper.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbSampleHelper
     def kits_used(sample)
       code = get_raw_code(sample, "rails")
-      kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
+      kits_array = code.scan(%r{pb_rails\("(\w+)(?:"|/)})
       kits_array.uniq
     end
 
@@ -28,11 +28,18 @@ module Playbook
       raw rouge(code, rouge_type)
     end
 
+    def get_category(sample)
+      cat = ""
+      SAMPLES.each do |category, samples|
+        cat = category if samples.include?(sample)
+      end
+      cat
+    end
+
     def get_samples(kit)
-      sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
       all_samples = []
 
-      sample_yaml.each do |_category, sample|
+      SAMPLES.each do |_category, sample|
         all_samples.push(sample)
       end
 

data/app/pb_kits/playbook/_playbook.scss

@@ -89,3 +89,4 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+@import './utilities/max_width';

data/app/pb_kits/playbook/index.js

@@ -1,8 +1,9 @@
+// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
 import './_playbook.scss'
 import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
-// React Component JSX Imports from the React Kits
+// vvv React Component JSX Imports from the React Kits vvv
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
 export Background from './pb_background/_background.jsx'
@@ -96,6 +97,7 @@ export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
+// ^^^ React Component JSX Imports from the React Kits ^^^
 
 // Dashboard Settings
 export { commonSettings, dataColors } from './pb_dashboard/commonSettings'

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -4,9 +4,9 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonDefault = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
-        {...props}
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundGradient = () => (
+const BackgroundGradient = (props) => (
   <Background
       backgroundColor="gradient"
       padding="xl"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -2,11 +2,12 @@ import React from 'react'
 import { Background } from '../..'
 import { Card, Flex, FlexItem, Title } from '../..'
 
-const BackgroundImage = () => (
+const BackgroundImage = (props) => (
   <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
     <Flex
         orientation="column"
         vertical="center"
+        {...props}
     >
       <FlexItem>
         <Title
@@ -14,10 +15,17 @@ const BackgroundImage = () => (
             padding="lg"
             size={1}
             text="Background Kit Image"
+            {...props}
         />
       </FlexItem>
-      <FlexItem padding="lg">
-        <Card shadow="deepest">
+      <FlexItem
+          padding="lg"
+          {...props}
+      >
+        <Card
+            shadow="deepest"
+            {...props}
+        >
           {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
         </Card>
       </FlexItem>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundLight = () => (
+const BackgroundLight = (props) => (
   <Background
       backgroundColor="light"
       padding="xl"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Background } from '../..'
 
-const BackgroundWhite = () => (
+const BackgroundWhite = (props) => (
   <div>
     <Background
         backgroundColor="white"
         padding="xl"
+        {...props}
     />
   </div>
 

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

@@ -3,13 +3,11 @@ examples:
   rails:
   - background_light: Light
   - background_white: White
-  - background_dark: Dark
   - background_gradient: Gradient
   - background_image: Image
 
   react:
   - background_light: Light
   - background_white: White
-  - background_dark: Dark
   - background_gradient: Gradient
   - background_image: Image

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

@@ -1,6 +1,5 @@
 export { default as BackgroundLight } from './_background_light.jsx'
 export { default as BackgroundWhite } from './_background_white.jsx'
-export { default as BackgroundDark } from './_background_dark.jsx'
 export { default as BackgroundGradient } from './_background_gradient.jsx'
 export { default as BackgroundImage } from './_background_image.jsx'
 

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -6,151 +6,151 @@ const BadgeColors = (props) => {
     <div>
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="primary"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="primary"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="primary"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="success"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="success"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="success"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="warning"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="warning"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="warning"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="error"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="error"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="error"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="info"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="info"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="info"
+            {...props}
         />
       </div>
 
       <div>
         <Badge
-            {...props}
             rounded
             text="+1"
             variant="neutral"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+4"
             variant="neutral"
+            {...props}
         />
 
         &nbsp;
 
         <Badge
-            {...props}
             text="+1000"
             variant="neutral"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -5,25 +5,25 @@ const BadgeDefault = (props) => {
   return (
     <div>
       <Badge
-          {...props}
           text="+1"
           variant="primary"
+          {...props}
       />
 
       &nbsp;
 
       <Badge
-          {...props}
           text="+4"
           variant="primary"
+          {...props}
       />
 
       &nbsp;
 
       <Badge
-          {...props}
           text="+1000"
           variant="primary"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -5,28 +5,28 @@ const BadgeRounded = (props) => {
   return (
     <div>
       <Badge
-          {...props}
           rounded
           text="+1"
           variant="primary"
+          {...props}
       />
 
       &nbsp;
 
       <Badge
-          {...props}
           rounded
           text="+4"
           variant="primary"
+          {...props}
       />
 
       &nbsp;
 
       <Badge
-          {...props}
           rounded
           text="+1000"
           variant="primary"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -18,7 +18,7 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const BarGraphDefault = () => (
+const BarGraphDefault = (props) => (
   <div>
     <BarGraph
         axisTitle="Number of Employees"
@@ -28,6 +28,7 @@ const BarGraphDefault = () => (
         title="Solar Employment Growth by Sector, 2010-2016"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx

@@ -6,7 +6,7 @@ const chartData = [{
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphDefault = () => (
+const BarGraphDefault = (props) => (
   <div>
     <BarGraph
         axisTitle="Number of Employees"
@@ -16,6 +16,7 @@ const BarGraphDefault = () => (
         title="Fixed Height (300px)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
         yAxisMin={0}
+        {...props}
     />
 
     <br />
@@ -29,6 +30,7 @@ const BarGraphDefault = () => (
         title="Percentage Height (50%)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )