playbook_ui_docs 15.0.0.pre.alpha.PLAY2419dialogaccessibility10324 → 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10588

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb

@@ -0,0 +1,118 @@
+<% data_first = [
+  {
+    name: 'Bugs',
+    y: 8,
+  },
+  {
+    name: 'Chores',
+    y: 1,
+  },
+  {
+    name: 'Stories',
+    y: 12,
+  },
+] %>
+
+<% data_second = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+] %>
+
+<% data_third = [
+  {
+    name: '1 Point Tickets',
+    y: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    y: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    y: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    y: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    y: 1,
+  },
+] %>
+
+<% data_fourth = [
+  {
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+] %>
+
+<% chart_options_small = {
+ series: [{ 
+      data: data_first,
+      innerSize: '35%'
+    }],  } %>
+  
+<% chart_options_md = {
+ series: [{ 
+      data: data_second,
+      innerSize: '50%'
+    }],  } %>
+
+<% chart_options_lg = {
+ series: [{ 
+      data: data_third,
+      innerSize: '85%'
+    }],  } %>
+
+<% chart_options_xl = {
+ series: [{ 
+      data: data_fourth,
+      innerSize: '0%'
+    }],  } %>
+
+
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_small }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_md }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_lg }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_xl }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const dataFirst = [
+  {
+    name: 'Bugs',
+    y: 8,
+  },
+  {
+    name: 'Chores',
+    y: 1,
+  },
+  {
+    name: 'Stories',
+    y: 12,
+  },
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+]
+
+const dataThird = [
+  {
+    name: '1 Point Tickets',
+    y: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    y: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    y: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    y: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    y: 1,
+  },
+]
+
+const dataFourth = [
+  {
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+]
+
+const PbCircleChartInnerSizes= (props) => {
+const chartOptionsSmall = {
+    series: [{ 
+      data: dataFirst,
+      innerSize: '35%'
+    }],
+  }
+
+  const chartOptionsMedium = {
+    series: [{ 
+      data: dataSecond,
+      innerSize: '50%'
+    }],
+  }
+
+  const chartOptionsLarge = {
+    series: [{ 
+      data: dataThird,
+      innerSize: '85%'
+    }],
+  }
+
+  const chartOptionsNone = {
+    series: [{ 
+      data: dataFourth,
+      innerSize: '0%'
+    }],
+  }
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptionsSmall}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsMedium}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsLarge}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsNone}
+          {...props}
+      />
+    </div>
+  );
+};
+
+
+export default PbCircleChartInnerSizes;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { PbCircleChart, Button } from "playbook-ui";
+
+const chartData = [
+  {
+    name: "Waiting for Calls",
+    y: 41,
+  },
+  {
+    name: "On Call",
+    y: 49,
+  },
+  {
+    name: "After Call",
+    y: 10,
+  },
+];
+
+const chartData2 = [
+  {
+    name: "Waiting for Calls",
+    y: 48,
+  },
+  {
+    name: "On Call",
+    y: 12,
+  },
+  {
+    name: "After Call",
+    y: 140,
+  },
+];
+
+
+const PbCircleChartLiveData = (props) => {
+
+  const [data, setData] = useState(chartData);
+
+    const updateValue = () => {
+    setData(chartData2)
+  }
+    const chartOptions = {
+    series: [{ data: data }],
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+      />
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartLiveData;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb

@@ -0,0 +1,24 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: '20',
+    }],
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartRounded = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        borderColor: null,
+        borderWidth: 20,
+        innerSize: '100%',
+      },
+    },
+  };
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartRounded;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb

@@ -0,0 +1,38 @@
+<% data = [
+  {
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  title: { text: "Active Users on Social Media" },
+  } %>
+
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data= [
+{
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+]
+
+
+const PbCircleChartWithTitle = (props) => {
+const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: data }],
+  };
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartWithTitle;

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

@@ -0,0 +1,29 @@
+examples:
+  
+  rails:
+  - pb_circle_chart_default: Default
+  - pb_circle_chart_rounded: Rounded Corners
+  - pb_circle_chart_block_content: Accepts Any Block
+  - pb_circle_chart_color_overrides: Color Overrides
+  - pb_circle_chart_data_with_labels: Data with Labels
+  - pb_circle_chart_data_with_legend: Data with Legend
+  - pb_circle_chart_data_legend_position: Legend Position
+  - pb_circle_chart_with_title: With Title
+  - pb_circle_chart_inner_sizes: Inner Circle Size Options
+  - pb_circle_chart_custom_tooltip: Tooltip Customization
+
+  
+  react:
+  - pb_circle_chart_default: Default
+  - pb_circle_chart_live_data: Live Data
+  - pb_circle_chart_rounded: Rounded Corners
+  - pb_circle_chart_block_content: Accepts Any Block
+  - pb_circle_chart_color_overrides: Color Overrides
+  - pb_circle_chart_data_with_labels: Data with Labels
+  - pb_circle_chart_data_with_legend: Data with Legend
+  - pb_circle_chart_data_legend_position: Legend Position
+  - pb_circle_chart_with_title: With Title
+  - pb_circle_chart_inner_sizes: Inner Circle Size Options
+  - pb_circle_chart_custom_tooltip: Tooltip Customization
+  
+  

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

@@ -0,0 +1,11 @@
+export { default as PbCircleChartDefault } from './_pb_circle_chart_default.jsx'
+export { default as PbCircleChartLiveData } from './_pb_circle_chart_live_data.jsx'
+export { default as PbCircleChartRounded } from './_pb_circle_chart_rounded.jsx'
+export { default as PbCircleChartBlockContent } from './_pb_circle_chart_block_content.jsx'
+export { default as PbCircleChartColorOverrides } from './_pb_circle_chart_color_overrides.jsx'
+export { default as PbCircleChartDataWithLabels } from './_pb_circle_chart_data_with_labels.jsx'
+export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_with_legend.jsx'
+export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
+export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
+export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
+export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("text_input", props: {
+  autocomplete: false,
+  label: "autocomplete='off'",
+  name: "firstName",
+  placeholder: "Enter first name",
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "no autocomplete attribute (let browser decide- basically 'on')",
+  name: "lastName",
+  placeholder: "Enter last name"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: true,
+    label: "autocomplete='on'",
+    name: "phone",
+    type: "phone",
+    placeholder: "Enter phone number"
+}) %>
+
+<%= pb_rails("body", props: { margin_bottom: "sm" }) do %>
+  The following have the same autocomplete attributes (email), but have
+  different name attributes (email and emailAlt). Many browsers will
+  open autocomplete based on name attributes instead of autocomplete:
+<% end %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='email'",
+    name: "email",
+    placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='emailAlt'",
+    name: "emailAlt",
+    type: "email",
+    placeholder: "Enter email address"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
+
+
+const TextInputAutocomplete = (props) => {
+  const [formFields, setFormFields] = useState({
+    firstName: "",
+    lastName: "",
+    phone: "",
+    emailTest: "",
+    email: "",
+  });
+
+  const handleOnChangeFormField = ({ target }) => {
+    const { name, value } = target;
+    setFormFields({ ...formFields, [name]: value });
+  };
+
+  return (
+    <div>
+      <TextInput
+          autoComplete={false}
+          label="autocomplete='off'"
+          name="firstName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter first name"
+          value={formFields.firstName}
+          {...props}
+      />
+      <TextInput
+          label="no autocomplete attribute (let browser decide- basically 'on')"
+          name="lastName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter last name"
+          value={formFields.lastName}
+          {...props}
+      />
+      <TextInput
+          autoComplete
+          label="autocomplete='on'"
+          name="phone"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter phone number"
+          type="phone"
+          value={formFields.phone}
+          {...props}
+      />
+      <Body marginBottom="sm">
+        The following have the same autocomplete attributes (email), but have
+        different name attributes (email and emailAlt). Many browsers will
+        open autocomplete based on name attributes instead of autocomplete:
+      </Body>
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='email'"
+          name="email"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.email}
+          {...props}
+      />
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='emailAlt'"
+          marginTop="sm"
+          name="emailTest"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.emailTest}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default TextInputAutocomplete;

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md

@@ -0,0 +1 @@
+Set this prop to `false` or `"off"` to remove autocomplete from text inputs. You can also set it to a string, but browsers will often defer to other attributes like `name`. 

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

@@ -9,6 +9,8 @@ examples:
   - text_input_no_label: No Label
   - text_input_options: Input Options
   - text_input_mask: Mask
+  - text_input_autocomplete: Autocomplete
+  
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -19,6 +21,7 @@ examples:
   - text_input_no_label: No Label
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
+  - text_input_autocomplete: Autocomplete
 
 
   swift:

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

@@ -7,3 +7,4 @@ export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
+export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'