playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  label: "Small",
+  margin_bottom: "md",
+  size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "342",
+  label: "Medium",
+  margin_bottom: "md",
+  size: "md",
+  symbol: "€",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "45",
+  label: "Large",
+  size: "lg",
+  unit: "/mo",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencySize = (props) => {
+  return (
+    <>
+      <Currency
+          amount="2,000.50"
+          label="Small"
+          marginBottom="md"
+          size="sm"
+          {...props}
+      />
+      <Currency
+          amount="342"
+          label="Medium"
+          marginBottom="md"
+          size="md"
+          symbol="€"
+          {...props}
+      />
+      <Currency
+          amount="45"
+          label="Large"
+          size="lg"
+          unit="/mo"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencySize

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  emphasized: false,
+  label: "Emphasized False",
+  margin_bottom: "md",
+  size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "342",
+  label: "Light",
+  margin_bottom: "md",
+  size: "sm",
+  symbol: "€",
+  variant: "light",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "45",
+  label: "Bold",
+  size: "lg",
+  unit: "/mo",
+  variant: "bold",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencyVariants = (props) => {
+  return (
+    <>
+      <Currency
+          amount="2,000.50"
+          emphasized={false}
+          label="Emphasized False"
+          marginBottom="md"
+          size="sm"
+          {...props}
+      />
+      <Currency
+          amount="342"
+          label="Light"
+          marginBottom="md"
+          size="sm"
+          symbol="€"
+          variant="light"
+          {...props}
+      />
+      <Currency
+          amount="45"
+          label="Bold"
+          size="sm"
+          unit="/mo"
+          variant="bold"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyVariants

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

@@ -0,0 +1,2 @@
+Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
+Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,23 @@
+<%= 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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,28 @@
+<%= 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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,24 @@
+ <%= 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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,39 @@
+<%= 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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,51 @@
+<%= 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+<%= 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

@@ -0,0 +1,14 @@
+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

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