playbook_ui 7.11.1 → 7.14.0

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb

@@ -0,0 +1,53 @@
+<%= pb_rails("card", props: {
+  border_radius: "rounded"
+})  do %>
+  Rounded (1000px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "xl"
+})  do %>
+  Extra large (16px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "lg"
+})  do %>
+  Large (8px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "md"
+})  do %>
+  Medium (6px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "sm"
+})  do %>
+  Small (4px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "xs"
+})  do %>
+  Extra small (4px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "none"
+})  do %>
+  None
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardLight = (props) => {
+  return (
+    <div>
+      <Card
+          borderRadius="rounded"
+          {...props}
+      >
+        {'Rounded (1000px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="xl"
+          {...props}
+      >
+        {'Extra large (16px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="lg"
+          {...props}
+      >
+        {'Large (8px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="md"
+          {...props}
+      >
+        {'Medium (6px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="sm"
+          {...props}
+      >
+        {'Small (4px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="xs"
+          {...props}
+      >
+        {'Extra small (4px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="none"
+          {...props}
+      >
+        {'None'}
+      </Card>
+    </div>
+  )
+}
+
+export default CardLight

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.md

@@ -0,0 +1 @@
+`border_radius_md` is the card kit default

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -0,0 +1 @@
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -9,6 +9,7 @@ examples:
   - card_content: Content Size
   - card_separator: Separator Card
   - card_border_none: No Border
+  - card_border_radius: Border Radius
   react:
   - card_light: Default
   - card_highlight: Highlight Cards
@@ -19,3 +20,4 @@ examples:
   - card_content: Content Size
   - card_separator: Separator Card
   - card_border_none: No Border
+  - card_border_radius: Border Radius

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

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardBorderNone } from './_card_border_none.jsx'
+export { default as CardBorderRadius } from './_card_border_radius.jsx'

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx

@@ -5,11 +5,11 @@ const CheckboxChecked = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           checked
           name="checkbox-name"
           text="Checked Checkbox"
           value="check-box value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx

@@ -15,8 +15,8 @@ const CheckboxCustom = (props) => {
       <br />
       <div>
         <Checkbox
-            {...props}
             text="Toggle Me"
+            {...props}
         >
           <input
               checked={checked}
@@ -24,6 +24,7 @@ const CheckboxCustom = (props) => {
               onChange={handleOnChange}
               type="checkbox"
               value="custom-value"
+              {...props}
           />
         </Checkbox>
       </div>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -5,10 +5,10 @@ const CheckboxDefault = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -5,11 +5,11 @@ const CheckboxError = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           error
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -16,7 +16,7 @@ const dataWithABlock = [
   },
 ]
 
-const CircleChartBlock = () => (
+const CircleChartBlock = (props) => (
 
   <div>
     <CircleChart
@@ -25,10 +25,12 @@ const CircleChartBlock = () => (
         innerSize="lg"
         marginTop="xl"
         rounded
+        {...props}
     >
       <Title
           size={1}
           tag="div"
+          {...props}
       >
         {'83'}
       </Title>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -16,12 +16,13 @@ const dataWithColors = [
   },
 ]
 
-const CircleChartColors = () => (
+const CircleChartColors = (props) => (
   <div>
     <CircleChart
         chartData={dataWithColors}
         colors={['data-6', 'data-4', 'data-2']}
         id="colors-example"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -16,11 +16,12 @@ const data = [
   },
 ]
 
-const CircleChartDefault = () => (
+const CircleChartDefault = (props) => (
   <div>
     <CircleChart
         chartData={data}
         id="circle-chart-default"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx

@@ -88,28 +88,32 @@ const dataFourth = [
   },
 ]
 
-const CircleChartInnerSizes = () => (
+const CircleChartInnerSizes = (props) => (
   <div>
     <CircleChart
         chartData={dataFirst}
         id="with-innersize-sm"
         innerSize="sm"
+        {...props}
     />
     <CircleChart
         chartData={dataSecond}
         id="with-innersize-md"
         innerSize="md"
+        {...props}
     />
     <CircleChart
         chartData={dataThird}
         id="with-innersize-lg"
         innerSize="lg"
+        {...props}
     />
     <CircleChart
         chartData={dataFourth}
         className="poop"
         id="with-innersize-none "
         innerSize="none"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, CircleChart } from '../../'
 
-const CircleChartLiveData = () => {
+const CircleChartLiveData = (props) => {
   const [data, setData] = useState([
     {
       name: 'Waiting for Calls',
@@ -41,10 +41,12 @@ const CircleChartLiveData = () => {
       <Button
           onClick={updateValue}
           text="Update Value"
+          {...props}
       />
       <CircleChart
           chartData={data}
           id="circle-chart-live-data"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -16,13 +16,14 @@ const dataRounded = [
   },
 ]
 
-const CircleChartRounded = () => (
+const CircleChartRounded = (props) => (
   <div>
     <CircleChart
         chartData={dataRounded}
         id="default-test-rounded"
         innerSize="lg"
         rounded
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -32,12 +32,13 @@ const dataWithLabels = [
   },
 ]
 
-const CircleChartWithLabels = () => (
+const CircleChartWithLabels = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLabels}
         dataLabels
         id="with-labels-example"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -17,12 +17,13 @@ const dataWithLegend = [{
 },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLegend}
         id="with-legend-example"
         legend
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -32,12 +32,13 @@ const dataWithTitle = [
   },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithTitle}
         id="with-title-example"
         title="Active Users on Social Media"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -4,10 +4,10 @@ import { CircleIconButton } from '../..'
 const CircleIconButtonClick = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         onClick={() => alert('Click!')}
         variant="primary"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -4,33 +4,33 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonDefault = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         variant="primary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="pen"
         variant="secondary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         disabled
         icon="times"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="user"
         variant="link"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -4,21 +4,20 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonLink = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="search"
         link="https://google.com"
         variant="primary"
-
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="window"
         link="https://google.com"
         newWindow
         variant="secondary"
+        {...props}
     />
 
   </div>