playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a43c45f7c02be5a750af086ebfcefc86725299eb31719a0a2dd8a6a79e97fd8d
-  data.tar.gz: 859745ed6bd9388339f3ed65fbec574d07f2d3b109b7e8c79353272dcd7f888e
+  metadata.gz: 194c10ec06ce124dbe76ef242188655e8858047a6390fbf32471f54aabdd9c10
+  data.tar.gz: f17c05ef7b24bf389b1d646559faaa89862d684b0ff3bb6c81fd6f7e81e1c43f
 SHA512:
-  metadata.gz: 96f4466b2ef7b76c1a35cea42bc83bdad24749c7e0bcfcba2b14a3d71f7215ab21a1400ec222976a96171a8b95bb9c77d3638b245a56856902532bbbdf4cbd42
-  data.tar.gz: 9e29349a5a6b132d926b48ea385458153886e3f5df9d1eb340d6d7d710ef7506745cd90a59e50c876bdd03c8a697f995c02504c94bf3ab1765ddb4a4e542565b
+  metadata.gz: b5eb92a1873b2e77da0083aa018dada538cd2642ec23135a4b299ed75d21a0fee7d76f41954862a214c9b201c62cce3da9c9f4dac567b8d3671e55a47e16a64e
+  data.tar.gz: fcd1e7d53968d610fff6919e56341621d3286b331181861bc286e6483e1580d0732ece53915ce0ecd1f2a5818f813aacd59f8a5d370de8e66d4802ee153708d5

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

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

@@ -18,6 +18,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'
@@ -83,6 +84,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'
@@ -95,6 +97,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/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.html.erb

@@ -1,38 +1,14 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-
-  <!-- icon -->
-  <% if object.show_icon %>
-    <%= pb_rails("body", props: {
-      color: "light",
-      tag: "div",
-    }) do %>
-      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
-    <% end %>
-  <% end %>
-
-  <!-- day_of_week -->
-  <% if object.show_day_of_week %>
-    <%= pb_rails("title", props: { tag: "div", text: object.date_day_of_week, size: 4 }) %>
-    <%= pb_rails("body", props: {
-    text: "•",
-    color: "light",
-    tag: "div",
-  }) %>
-  <% end %>
-
-  <!-- month day, year -->
-  
-  <%# if not current year %>
-  <% if object.year.to_s == DateTime.now.year.to_s %>
-    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
-  <%# if is current year %>
-  <% else %>
-    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+    class: object.classname) do %>
+    <% if object.size == "lg" %>
+      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
+    <% elsif object.size == "sm" %>
+      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
+      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
+    <% else %>
+      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
   <% end %>
-  
 <% end %>
 

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -2,91 +2,82 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Body, Icon, Title } from '../'
+import { Icon } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-type PbDateProps = {
-  aria: Object,
-  date: string | date,
-  className?: string,
-  data?: Object,
-  id?: string,
-  showIcon?: boolean,
-  showDayOfWeek?: boolean,
-  alignment?: "left" | "center" | "right"
+const defaultDateString = (value: DateTime) => {
+  const weekday = value.toWeekday().toUpperCase()
+  const month = value.toMonth().toUpperCase()
+  const day = value.toDay()
+
+  return `${weekday} · ${month} ${day}`
 }
 
-const PbDate = (props: PbDateProps) => {
-  const {
-    aria = {},
-    alignment = 'left',
-    className,
-    date,
-    data = {},
-    id,
-    showDayOfWeek = false,
-    showIcon = false,
-  } = props
+const largeDateString = (value: DateTime) => {
+  const month = value.toMonth().toUpperCase()
+  const day = value.toDay()
+
+  return `${month} ${day}`
+}
 
-  const dateTimestamp = new DateTime({ value: date })
-  const weekday = dateTimestamp.toWeekday()
-  const month = dateTimestamp.toMonth()
-  const day = dateTimestamp.toDay()
-  const year = dateTimestamp.toYear()
-  const currentYear = new Date().getFullYear().toString()
+type DateSubcomponent = {
+  value: DateTime,
+}
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
+    {defaultDateString(value)}
+  </h3>
+)
 
-  const classes = classnames(
-    className,
-    buildCss('pb_date_kit', alignment),
-    globalProps(props)
-  )
+const SmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
+    <Icon
+        fixedWidth
+        icon="calendar"
+    />
+    {defaultDateString(value)}
+  </h3>
+)
+
+const LargeDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_3', globalProps(props))}>
+    {largeDateString(value)}
+  </h3>
+)
+
+type PbDateProps = {
+  size?: "xs" | "sm" | "lg",
+  value?: string,
+  className?: string
+}
+
+const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
+  const date = new DateTime({ value: value })
+
+  if (size == 'xs')
+    return (
+      <ExtraSmallDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  if (size == 'lg')
+    return (
+      <LargeDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <Title
-          size={4}
-          tag="h4"
-      >
-        <If condition={showIcon}>
-          <Body
-              color="light"
-              tag="span"
-          >
-            <Icon
-                fixedWidth
-                icon="calendar-alt"
-            />
-          </Body>
-        </If>
-        <If condition={showDayOfWeek}>
-          {weekday}
-          <Body
-              color="light"
-              tag="span"
-              text=" • "
-          />
-        </If>
-        <span>
-          {month}
-          {' '}
-          {day}
-        </span>
-        <If condition={currentYear != year}>
-          <span>
-            {` , ${year}`}
-          </span>
-        </If>
-      </Title>
-    </div>
+    <SmallDate
+        {...props}
+        className={className}
+        value={date}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,27 +1,2 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
-
-[class^=pb_date_kit] {  
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    > div {
-        margin-right: 4px !important;
-    }
-
-    &[class*=_center] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-right: 4px !important;
-    }
-
-    &[class*=_right] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        margin-left: 4px !important;
-    }
-}

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

@@ -10,33 +10,25 @@ module Playbook
       partial "pb_date/date"
 
       prop :date, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[lg sm xs],
+                  default: "sm"
       prop :timezone, default: "America/New_York"
-      prop :alignment, type: Playbook::Props::Enum,
-                       values: %w[left center right],
-                       default: "left"
-      prop :show_icon, type: Playbook::Props::Boolean,
-                       default: false
-      prop :show_day_of_week, type: Playbook::Props::Boolean,
-                              default: false
 
       def classname
-        generate_classname("pb_date_kit", alignment)
+        generate_classname("pb_date_kit")
       end
 
-      def date_day_of_week
-        pb_date_time.to_day_of_week
+      def xs_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
-      def day
-        pb_date_time.to_day
+      def lg_date
+        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
       end
 
-      def month
-        pb_date_time.to_month.capitalize
-      end
-
-      def year
-        pb_date_time.to_year
+      def sm_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
     private