RubyGems - playbook_ui - Versions diffs - 7.0.0.pre.alpha5 → 7.0.0.pre.alpha10 - Mend

playbook_ui 7.0.0.pre.alpha5 → 7.0.0.pre.alpha10

Files changed (151) hide show

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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} &middot; #{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} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
     private

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

@@ -1,9 +1,24 @@
 <%= pb_rails("date", props: {
   date: Date.today,
+  size: "lg"
 }) %>
-<br />
+<br>
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
+  date: DateTime.now
+}) %>
+<br>
+<%= pb_rails("date", props: {
+  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_default.jsx CHANGED

@@ -1,15 +1,25 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date } from '../../'
 const DateDefault = () => {
   return (
     <div>
-      <FormattedDate
-          date="2012-12-25"
+      <Date
+          size="lg"
+          value="1995-12-25"
       />
-      <FormattedDate
-          date={new Date()}
+      <br />
+      <Date
+          value="17 Mar 69"
+      />
+      <br />
+      <Date
+          size="xs"
+          value="2020-04-20T04:20:00.000Z"
       />
     </div>
   )

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

@@ -4,11 +4,7 @@ examples:
   - date_default: Default
   - date_timezone: Timezones
-  - date_variants: Variants
-  - date_alignment: Alignment
   react:
   - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment

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

@@ -1,3 +1 @@
 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/_date_picker.html.erb ADDED

@@ -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 ADDED

@@ -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