RubyGems - playbook_ui_docs - Versions diffs - 14.21.2 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863 - Mend

playbook_ui_docs 14.21.2 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

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

@@ -1,32 +1,41 @@
 import React from 'react'
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 const dataWithLegend = [{
   name: 'Bugs',
-  value: 8,
+  y: 8,
 },
 {
   name: 'Chores',
-  value: 1,
+  y: 1,
 },
 {
   name: 'Stories',
-  value: 12,
-},
-]
+  y: 12,
+}]
+const CircleChartWithLegendKit = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLegend }],
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLegend}
-        id="with-legend-example"
-        legend
-        {...props}
-    />
-  </div>
-)
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
-export default CircleChartWithLegendKit
+export default CircleChartWithLegendKit

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

@@ -1,47 +1,55 @@
 import React from 'react'
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 const dataWithTitle = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithTitle}
-        id="with-title-example"
-        title="Active Users on Social Media"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithTitle = () => {
+  const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: dataWithTitle }],
+  }
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
-export default CircleChartWithLegendKit
+export default CircleChartWithTitle

data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md ADDED Viewed

@@ -0,0 +1 @@

+ **Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml CHANGED Viewed

@@ -14,7 +14,6 @@ examples:
   react:
   - circle_chart_default: Default Style
-  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block

data/app/pb_kits/playbook/pb_circle_chart/docs/index.js CHANGED Viewed

@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
 export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
-export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx CHANGED Viewed

@@ -5,17 +5,20 @@ const DropdownBlankSelection = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
-  ];
+  ];
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx CHANGED Viewed

@@ -6,15 +6,18 @@ import Dropdown from '../../pb_dropdown/_dropdown'
 const options = [
     {
         label: "United States",
-        value: "United States",
+        value: "unitedStates",
+        id: "us"
     },
     {
         label: "Canada",
-        value: "Canada",
+        value: "canada",
+        id: "ca"
     },
     {
         label: "Pakistan",
-        value: "Pakistan",
+        value: "pakistan",
+        id: "pk"
     }
 ]

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx CHANGED Viewed

@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx CHANGED Viewed

@@ -5,17 +5,20 @@ const DropdownDefaultValue = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
-  ];
+  ];
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx CHANGED Viewed

@@ -10,17 +10,20 @@ const DropdownError = (props) => {
     const options = [
         {
             label: "United States",
-            value: "United States",
+            value: "unitedStates",
+            id: "us"
         },
         {
             label: "Canada",
-            value: "Canada",
+            value: "canada",
+            id: "ca"
         },
         {
             label: "Pakistan",
-            value: "Pakistan",
+            value: "pakistan",
+            id: "pk"
         }
-    ]
+    ];
     return (
         <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx CHANGED Viewed

@@ -6,39 +6,48 @@ const DropdownMultiSelect = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx CHANGED Viewed

@@ -6,39 +6,48 @@ const DropdownMultiSelectDisplay = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb CHANGED Viewed

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb CHANGED Viewed

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb CHANGED Viewed

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx CHANGED Viewed

@@ -6,41 +6,50 @@ const DropdownMultiSelectWithAutocomplete = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
-  ];
+  ];
   return (
   <div>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb CHANGED Viewed

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedsStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"