playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -1,17 +0,0 @@
-examples:
-
-  rails:
-  - currency_variants: Variants
-  - currency_size: Size
-  - currency_alignment: Alignment
-  - currency_no_symbol: No Symbol
-  - currency_abbreviated: Abbreviate Larger Amounts
-  - currency_matching_decimals: Matching Decimals
-
-  react:
-  - currency_variants: Variants
-  - currency_size: Size
-  - currency_alignment: Alignment
-  - currency_no_symbol: No Symbol
-  - currency_abbreviated: Abbreviate Larger Amounts
-  - currency_matching_decimals: Matching Decimals

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

@@ -1,6 +0,0 @@
-export { default as CurrencyVariants } from './_currency_variants.jsx'
-export { default as CurrencySize } from './_currency_size.jsx'
-export { default as CurrencyAlignment } from './_currency_alignment.jsx'
-export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
-export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
-export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("dashboard_value", props: {
-  stat_label: "Top Title Value",
-  stat_value: {value: 1428, unit: "appts"},
-  stat_change: {change: "decrease", value: 26.1}
-}) %>
-
-<br><br>
-
-<%= pb_rails("dashboard_value", props: {
-  align: "center",
-  stat_label: "Top Title Value",
-  stat_value: {value: 1428, unit: "appts"},
-  stat_change: {change: "decrease", value: 56 }
-}) %>
-
-<br><br>
-
-<%= pb_rails("dashboard_value", props: {
-  align: "right",
-  stat_label: "Top Title Value",
-  stat_value: {value: 1428, unit: "appts"},
-  stat_change: {change: "decrease", value: 86.1 }
-}) %>

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import DashboardValue from '../../pb_dashboard_value/_dashboard_value'
-
-const DashboardValueAlign = (props) => {
-  return (
-    <div>
-      <DashboardValue
-          statChange={{ change: 'decrease', value: '26.1' }}
-          statLabel="Top Title Value"
-          statValue={{ value: '1,428', unit: 'appts' }}
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <DashboardValue
-          align="center"
-          statChange={{ change: 'decrease', value: 56.1 }}
-          statLabel="Top Title Value"
-          statValue={{ value: '1,428', unit: 'appts' }}
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <DashboardValue
-          align="right"
-          statChange={{ change: 'decrease', value: 86 }}
-          statLabel="Top Title Value"
-          statValue={{ value: '1,428', unit: 'appts' }}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DashboardValueAlign

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb

@@ -1,28 +0,0 @@
-<%= pb_rails("dashboard_value", props: {
-  stat_label: "Decreased Value",
-  stat_value: { value: 1428, unit: "appts" },
-  stat_change: { change: "decrease", value: 26.1 }
-}) %>
-
-<br><br>
-
-<%= pb_rails("dashboard_value", props: {
-  stat_label: "Increased Value",
-  stat_value: { value: 938, unit: "homes" },
-  stat_change: { change: "increase", value: 56.1 }
-}) %>
-
-<br><br>
-
-<%= pb_rails("dashboard_value", props: {
-  stat_label: "Neutral Value",
-  stat_value: { value: 261, unit: "windows" },
-  stat_change: { value: 86 }
-}) %>
-
-<br><br>
-
-<%= pb_rails("dashboard_value", props: {
-  stat_label: "Pitch Rate",
-  stat_value: { value: 90.9, unit: "%" }
-}) %>

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import DashboardValue from '../../pb_dashboard_value/_dashboard_value'
-
-const DashboardValueDefault = (props) => {
-  return (
-    <div>
-      <DashboardValue
-          statChange={{ change: 'decrease', value: '26.1' }}
-          statLabel="Decreased Value"
-          statValue={{ value: '1,428', unit: 'appts' }}
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <DashboardValue
-          statChange={{ change: 'increase', value: 56.1 }}
-          statLabel="Increased Value"
-          statValue={{ value: '938', unit: 'homes' }}
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <DashboardValue
-          statChange={{ value: 86 }}
-          statLabel="Neutral Value"
-          statValue={{ value: '261', unit: 'windows' }}
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <DashboardValue
-          statLabel="Pitch Rate"
-          statValue={{ value: '90.9', unit: '%' }}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DashboardValueDefault

data/app/pb_kits/playbook/pb_dashboard_value/docs/_description.md

@@ -1 +0,0 @@
-Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use <a href="https://playbook.powerapp.cloud/kits/currency">Currency Kit</a>.

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

@@ -1,8 +0,0 @@
-examples:
-
-  rails:
-  - dashboard_value_default: Full Example
-  - dashboard_value_align: Align
-  react:
-  - dashboard_value_default: Full Example
-  - dashboard_value_align: Align

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

@@ -1,2 +0,0 @@
-export { default as DashboardValueDefault } from './_dashboard_value_default.jsx'
-export { default as DashboardValueAlign } from './_dashboard_value_align.jsx'

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb

@@ -1,24 +0,0 @@
- <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true
-  }) %>
-
-  <br><br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true,
-    alignment: "center"
-  }) %>
-
-  <br><br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true,
-    alignment: "right"
-  }) %>
-  

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Date as FormattedDate } from '../..'
-
-const DateAlignment = (props) => {
-  return (
-    <div>
-      <FormattedDate
-          dayOfWeek
-          icon
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          alignment="center"
-          dayOfWeek
-          icon
-          value="2020-12-25"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          alignment="right"
-          value={new Date()}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DateAlignment

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -1,39 +0,0 @@
-<%= pb_rails("date", props: {
-  date: Date.today,
-  size: "sm"
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
-  size: "sm"
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true,
-  size: "sm"
-}) %>
-
-<br>
-<br>
-
-<%= pb_rails("date", props: {
-  date: Date.today,
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true
-}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Date as FormattedDate } from '../../'
-
-const DateDefault = (props) => {
-  return (
-    <>
-      <FormattedDate
-          size="sm"
-          value={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          size="sm"
-          value="2012-08-03"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          size="sm"
-          value="2017-12-03"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          value={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          value="2012-08-03"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          value="2017-12-03"
-          {...props}
-      />
-    </>
-  )
-}
-
-export default DateDefault
-
-// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb

@@ -1,51 +0,0 @@
-<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "America/New_York"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "West Coast"}) %>
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "America/Los_Angeles"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Asia/Tokyo"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
-
-<%= pb_rails("date", props: {
-  date: Date.today,
-  timezone: "Australia/Sydney"
-}) %>
-<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
-
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Australia/Sydney"
-}) %>
-
-<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "String Dates"}) %>
-<%= pb_rails("date", props: {
-  date: "2012-08-02T00:49:29Z",
-}) %>
-
-<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md

@@ -1,6 +0,0 @@
-Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
-
-Don't care about timezones? Use `Date`.
-
-If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.
-

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb

@@ -1,35 +0,0 @@
-<div>
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    size: "sm"
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_day_of_week: true
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { Date as FormattedDate } from '../..'
-
-const DateVariants = (props) => {
-  return (
-    <div>
-      <FormattedDate
-          showIcon
-          size="sm"
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          showIcon
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          showIcon
-          value="1995-12-25"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DateVariants

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1,11 +0,0 @@
-Use to display the date. Year will not display if it is the current year.
-
-`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.
-
-**Please note**: this kit could potentially change the dates on you!
-
-This is because the Javascript `Date` class does not have the concept of a date without time. If you pass a Ruby `Date` string to JavaScript, you will receive a date *and* a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
-
-For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
-
-Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.

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

@@ -1,14 +0,0 @@
-examples:
-  
-  rails:
-  - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
-  - date_timezone: Timezones
-  
-  
-  react:
-  - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
-  

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

@@ -1,3 +0,0 @@
-export { default as DateDefault } from './_date_default.jsx'
-export { default as DateVariants } from './_date_variants.jsx'
-export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("date_picker", props: { allow_input: true, picker_id: "date-picker-allow-input"}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import DatePicker from '../_date_picker'
-
-const DatePickerAllowInput = (props) => (
-    <>
-        <DatePicker
-            allowInput
-            pickerId="date-picker-allow-input"
-            {...props}
-        />
-    </>
-)
-
-export default DatePickerAllowInput

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md

@@ -1 +0,0 @@
-Setting the `allowInput` prop to true permits users to key values directly into the input. This prop is set to false by default.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Unformatted Date Object",
-  default_date: Date.today,
-  picker_id: "date-picker-anti-pattern1"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  label: "Date Object Without Time - Displays Yesterday's Date",
-  default_date: Date.today.to_datetime.utc.iso8601,
-  picker_id: "date-picker-anti-pattern2"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  label: "Unformatted DateTime Object",
-  default_date: DateTime.current,
-  picker_id: "date-picker-anti-pattern3"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  label: "String Conversion Without ISO Formatting",
-  default_date: DateTime.current.utc.to_s,
-  picker_id: "date-picker-anti-pattern5"
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import DatePicker from '../_date_picker'
-
-const DatePickerDefault = (props) => (
-  <div>
-    <DatePicker
-        pickerId="date-picker-default"
-        {...props}
-    />
-  </div>
-)
-
-export default DatePickerDefault

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  default_date: "07/25/2020",
-  label: "Default Date String",
-  picker_id: "date-picker-default-date1"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  default_date: DateTime.current.utc.iso8601,
-  label: "Default Date Dynamic",
-  picker_id: "date-picker-default-date2"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
-  label: "Default Date Range",
-  mode: "range",
-  picker_id: "date-picker-default-date3"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  label: "Default Behavior",
-  picker_id: "date-picker-default-date4"
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import DatePicker from '../_date_picker'
-
-const DatePickerDefaultDate = (props) => (
-  <div>
-    <DatePicker
-        defaultDate="07/31/2020"
-        label="Default Date String"
-        pickerId="date-picker-default-date1"
-        {...props}
-    />
-    <DatePicker
-        defaultDate={new Date().fp_incr(1)}
-        label="Default Date Dynamic"
-        pickerId="date-picker-default-date2"
-        {...props}
-    />
-    <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(7)]}
-        label="Default Date Range"
-        mode="range"
-        pickerId="date-picker-default-date3"
-        {...props}
-    />
-    <DatePicker
-        label="Default Behavior"
-        pickerId="date-picker-default-date4"
-        {...props}
-    />
-  </div>
-)
-
-export default DatePickerDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1,5 +0,0 @@
-The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
-
-If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
-
-