playbook_ui 7.11.1 → 7.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 750f900a7435e934c7fe3d2f382e04d1628fcf682514e62df328660c508f08a0
-  data.tar.gz: 7a01c079573dda9db0f8ca18009fcfbdeeba80df54c7cc89d1da00f1b141ef0c
+  metadata.gz: 2f0153766cfb54016c6c47a9ff05b6e8dfc9d2c13c4a993280933e76d9cd55ae
+  data.tar.gz: 42917389602507a9c1050e84c898ff760a784ea7c528e3cd88e729020b107a5d
 SHA512:
-  metadata.gz: f914cdd6e7b1be3a8bb1304ac9d2bd9eefacfffae176aead556ecb4bedb0f0b6df476d5c84e4322d240ffa42982bf5c742df90e34472a0a51a262759d4533951
-  data.tar.gz: 4721bae1266b4ede5db496a9f765c3912e2306b8c9fb97155a95ac8d85486027ba11b9f6b139de4ae0b16de4c530a42fc0d4a36aa239329ea226bbb6a8e9d6c5
+  metadata.gz: 1a15428526f2bd610955600f6fe4f5ec729bafce5c01c1b21dc6ee91358b3c2f1f9fa3c1a0cb63192d6950b1727a42c0c21c05c9fc1db9561e1140e44de14559
+  data.tar.gz: 3706963d4e763e1017ce528423ce2a3338a7ddbfb3c184b8700b44d872a5d2495e62d67ca73140150e846dbd9172e2e1aadeb6a864a1ca214191a0c37ba86101

data/app/helpers/playbook/pb_doc_helper.rb

@@ -57,8 +57,7 @@ module Playbook
     end
 
     def get_kits
-      menu = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/menu.yml")
-      menu["kits"]
+      MENU["kits"]
     end
 
     def pb_category_kits(category_kits: [], type: "rails")

data/app/helpers/playbook/pb_sample_helper.rb

@@ -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/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_dark.jsx

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

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_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>
 )

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

@@ -6,7 +6,7 @@ const chartData = [{
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphLegend = () => (
+const BarGraphLegend = (props) => (
   <div>
     <BarGraph
         axisTitle="Number of Employees"
@@ -16,6 +16,7 @@ const BarGraphLegend = () => (
         title="Bar Graph with Legend"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )