playbook_ui 6.4.2 → 6.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 043d8ee7ffc205305e575f5a1b2dbc33a7044509a8907c19b1fdd2496df7995c
-  data.tar.gz: 7c38d3f71179c5f552836a74d7bb85c84035a304d3190b90f3a5d0a9be043a46
+  metadata.gz: 7aacc8a728ea6fd1e2c6b488b60372046190c1b8bc352c574156b70504f4d467
+  data.tar.gz: 8ea081b09cab41543fb85684ff221923c771378dc36aca624ebe267da990c336
 SHA512:
-  metadata.gz: 6c4ba1186d30795d4dc2a85ab19fe898b9ef043d1cb42e0db2aea26df4b7a0ea34ffd3e39f7272db76deb03533777d34798c3e1f9aac0a514d4d0133d3dbac2c
-  data.tar.gz: f6a7e045c41272b2a13c2035fe0b2100d792ab969f2cfd968008646b2c0c1a51bcd5ee467c831a4aba06a24fdebf7c662e7845e8d0e4f41af6af6e2d67070b80
+  metadata.gz: 1378adf616298af5873b341f3097cb8c59619c566f9d98eebfe179514f1da519083cbc47b708193054123ad196c0bfff8d98b6be6e7a9b3828241b6bcf916a96
+  data.tar.gz: b66e0d31fce9704a5470168ba435a91ac5e82554e1957c1d5852f50dbc09b18536606b8461a647eaa9f49e8608a15b4d9b31d40da07ceef75de1098c17a4029f

data/README.md

@@ -35,10 +35,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +62,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/pb_kits/playbook/_playbook.scss

@@ -15,6 +15,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

data/app/pb_kits/playbook/data/menu.yml

@@ -25,6 +25,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -14,6 +14,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -79,6 +80,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
@@ -91,6 +93,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -28,6 +28,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -87,6 +88,7 @@ import * as TimeRangeInline from 'pb_time_range_inline/docs'
 import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
+import * as Typeahead from 'pb_typeahead/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -108,6 +110,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -167,9 +170,9 @@ WebpackerReact.setup({
   ...Title,
   ...TitleCount,
   ...TitleDetail,
+  ...Typeahead,
   ...Toggle,
   ...User,
   ...UserBadge,
   ...WeekdayStacked,
 })
-

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -52,6 +52,12 @@
       top: 0;
       left: 0;
     }
+
+    code {
+      background-color: rgba($text_lt_lighter, 0.35);
+      border-radius: 5px;
+      padding: 2px;
+    }
   }
 
   .pb--codeControls {

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -97,6 +97,7 @@ const Button = (props: ButtonPropTypes) => {
     <span className="pb_button_content">
       <If condition={icon !== null}>
         <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+        {' '}
       </If>
       <span>{text || children}</span>
     </span>

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -148,7 +148,7 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button($transparent, $white);
 
   @media (hover:hover) {
     &:hover {

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -4,26 +4,22 @@ import { Button } from '../../'
 const ButtonDefault = () => (
   <div>
     <Button
-        dark
-        marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"
         variant="link"
     />
-    <Button
-        disabled
-        onClick={() => alert('button clicked!')}
-        text="Button Disabled"
-    />
+    {' '}
     <Button
         disabled
         onClick={() => alert('button clicked!')}

data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx

@@ -7,16 +7,19 @@ const ButtonDefaultDark = () => (
         dark
         text="Button Primary"
     />
+    {' '}
     <Button
         dark
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         dark
         text="Button Link"
         variant="link"
     />
+    {' '}
     <Button
         dark
         disabled

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -7,11 +7,13 @@ const ButtonLink = () => (
         link="https://google.com"
         text="A Tag Button"
     />
+    {' '}
     <Button
         link="https://google.com"
         newWindow
         text="Open in New Window"
     />
+    {' '}
     <Button
         disabled
         link="https://google.com"

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -7,11 +7,13 @@ const ButtonLoading = () => (
         loading
         text="Button Primary"
     />
+    {' '}
     <Button
         loading
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         loading
         text="A Tag Button Disabled"

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -3,8 +3,9 @@
   icon: "search",
   link: "https://google.com"
 }) %>
+<br/>
 <%= pb_rails("circle_icon_button", props: {
-  variant: "primary",
+  variant: "secondary",
   icon: "window",
   link: "https://google.com",
   new_window: true

data/app/pb_kits/playbook/pb_date/date.rb

@@ -13,6 +13,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm xs],
                   default: "sm"
+      prop :timezone, default: "America/New_York"
 
       def classname
         generate_classname("pb_date_kit")
@@ -33,7 +34,7 @@ module Playbook
     private
 
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(date, timezone)
       end
     end
   end

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

@@ -12,6 +12,13 @@
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  date: Date.new(2010, 11, 12),
   size: "xs"
 }) %>

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/_description.md

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

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

@@ -2,6 +2,7 @@ examples:
   
   rails:
   - date_default: Default
+  - date_timezone: Timezones
   
   
   react:

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -0,0 +1,39 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id) do %>
+      <div class="input_wrapper">
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          label: object.hide_label ? nil : object.label,
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required,
+          type: object.type
+        }) %>
+        <% if !object.hide_icon %>
+          <div
+              class="<%= object.icon_wrapper_class %>"
+              id="cal-icon-<%= object.picker_id %>"
+          >
+            <%= pb_rails("icon", props: { 
+              classname: "cal_icon",
+              icon: "calendar-alt"
+            }) %>
+          </div>
+        <% end %>
+      </div>
+
+      <%= javascript_tag do %>
+      window.addEventListener("DOMContentLoaded", () => {
+          datePickerHelper(<%= object.date_picker_config %>)
+      })
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -0,0 +1,149 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Icon, TextInput } from '../'
+import datePickerHelper from './date_picker_helper.js'
+
+type DatePickerProps = {
+  allowInput?: Boolean,
+  aria?: object,
+  className?: String,
+  dark?: Boolean,
+  data?: object,
+  defaultDate?: String,
+  disableDate?: Array,
+  disableInput?: Boolean,
+  disableRange?: Array,
+  disableWeekdays?: Array,
+  error?: String,
+  format?: String,
+  hideIcon?: Boolean,
+  hideLabel?: Boolean,
+  id?: String,
+  inputAria?: object,
+  inputData?: object,
+  label?: String,
+  maxDate: String,
+  minDate: String,
+  mode?: String,
+  name: String,
+  onChange: (String) => void,
+  pickerId?: String,
+  placeholder?: String,
+  type?: String,
+  yearRange?: Array,
+}
+const DatePicker = (props: DatePickerProps) => {
+  const {
+    allowInput = false,
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    defaultDate = '',
+    disableDate = null,
+    disableInput,
+    disableRange = null,
+    disableWeekdays = null,
+    error,
+    format = 'm/d/Y',
+    hideIcon = false,
+    hideLabel = false,
+    id,
+    inputAria,
+    inputData,
+    label = 'Date Picker',
+    maxDate,
+    minDate,
+    mode = 'single',
+    name,
+    onChange = () => {},
+    pickerId,
+    placeholder,
+    type,
+    yearRange = [ 1900, 2100 ],
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_date_picker_kit'),
+    className,
+    globalProps(props),
+    error ? 'error' : null,
+  )
+
+  useEffect(() => {
+    datePickerHelper({
+      allowInput: allowInput,
+      defaultDate: defaultDate,
+      disableDate: disableDate,
+      disableRange: disableRange,
+      disableWeekdays: disableWeekdays,
+      format: format,
+      hideIcon: hideIcon,
+      maxDate: maxDate,
+      minDate: minDate,
+      mode: mode,
+      pickerId: pickerId,
+      yearRange: yearRange,
+    })
+  }, [])
+
+  const iconWrapperClass = () => {
+    let base = 'cal_icon_wrapper'
+    if (dark){
+      base += ' dark'
+    }
+    if (hideLabel){
+      base += ' no_label_shift'
+    }
+    if (error){
+      base += ' error'
+    }
+    return base
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+      <div className="input_wrapper">
+        <TextInput
+            aria={inputAria}
+            autoComplete="off"
+            dark={dark}
+            data={inputData}
+            disabled={disableInput}
+            error={error}
+            id={pickerId}
+            label={hideLabel ? null : label}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            type={type}
+        />
+        <If condition={!hideIcon}>
+          <div
+              className={iconWrapperClass()}
+              id={`cal-icon-${pickerId}`}
+          >
+            <Icon
+                className="cal_icon"
+                icon="calendar-alt"
+            />
+          </div>
+        </If>
+      </div>
+    </div>
+  )
+}
+
+export default DatePicker