playbook_ui 7.3.0.pre.alpha12 → 7.3.0

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

@@ -0,0 +1,27 @@
+<div>
+  <%= 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,43 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+
+const DateVariants = (props) => {
+  return (
+    <div>
+      <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/example.yml

@@ -2,9 +2,13 @@ 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 +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/_date_picker.html.erb

@@ -3,20 +3,25 @@
     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
-        }) %>
+      <% if object.children %>
+        <div class="input_wrapper">
+          <%= capture(&object.children) %>
+      <% else %>
+        <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,
+          }) %>
+        <% end %>
         <% if !object.hide_icon %>
           <div
               class="<%= object.icon_wrapper_class %>"

data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb

@@ -0,0 +1,31 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <%= pb_rails("flex", props: { 
+      orientation: "row", 
+      horizontal: object.align, 
+      vertical: "baseline" }) do %>
+
+      <%= pb_rails("date", props: {
+        dark: object.dark,
+        date: object.date,
+        show_day_of_week: object.show_day_of_week,
+        size: object.size,
+        timezone: object.timezone,
+      }) %>
+
+      <%= pb_rails("time", props: {
+        margin_left: "sm",
+        show_icon: object.show_icon,
+        size: object.size,
+        tag: "caption",
+        time: object.date,
+        timezone: object.timezone,
+      }) %>
+
+    <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_date_time/_date_time.jsx

@@ -0,0 +1,73 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import {  Flex, Date as FormattedDate, Time } from '../'
+
+type DateTimeProps = {
+  align?: "left" | "center" | "right",
+  aria?: object,
+  className?: string,
+  data?: object,
+  datetime: string,
+  id?: string,
+  size?: "sm" | "md",
+  showDayOfWeek: boolean,
+  showIcon?: boolean,
+  timeZone?: string
+}
+
+const DateTime = (props: DateTimeProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    showDayOfWeek = false,
+    datetime,
+    id,
+    showIcon = false,
+    size = 'md',
+    timeZone = 'America/New_York',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_date_time', size),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Flex
+          horizontal={align}
+          vertical="baseline"
+      >
+        <FormattedDate
+            datetime={datetime}
+            showDayOfWeek={showDayOfWeek}
+            size={size}
+            timeZone={timeZone}
+        />
+        <Time
+            date={new Date()}
+            marginLeft="sm"
+            showIcon={showIcon}
+            size={size}
+            timeZone={timeZone}
+        />
+      </Flex>
+    </div>
+  )
+}
+
+export default DateTime

data/app/pb_kits/playbook/pb_date_time/_date_time.scss

@@ -0,0 +1,26 @@
+[class^=pb_date_time] {
+  [class*=pb_date_kit] > div:last-child {
+    margin-right: 0 !important;
+  }
+  &[class*=_center] {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+  &[class*=_right]  {
+    display: flex;
+    justify-content: flex-end;
+    text-align: right;
+  }
+  &[class*=dark] {
+    [class^=pb_title_kit] {
+        color: $text_dk_default !important;
+    }
+    & * {
+      @include caption_dark;
+    }
+    .pb_time {
+      color: $text_dk_default;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDateTime
+    class DateTime
+      include Playbook::Props
+
+      partial "pb_date_time/date_time"
+
+      prop :date, type: Playbook::Props::Date,
+                  default: ::DateTime.current
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
+      prop :timezone, type: Playbook::Props::String,
+                      default: "America/New_York"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md],
+                  default: "md"
+      prop :dark, type: Playbook::Props::Boolean, default: false
+      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_time_kit", align)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now
+}) %>
+    
+<br />
+
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    align:"center"
+}) %>
+    
+<br />
+
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    align:"right"
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import DateTime from '../_date_time.jsx'
+
+const DateTimeAlign = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        dayOfWeek
+        icon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        align="center"
+        datetime={new Date()}
+        dayOfWeek
+        icon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        align="right"
+        datetime={new Date()}
+        dayOfWeek
+        icon
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeAlign

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+}) %>
+<br />
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_day_of_week: true
+}) %>
+<br />
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_icon: true
+}) %>
+<br />
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    timezone: "Asia/Tokyo"
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import DateTime from '../_date_time.jsx'
+
+const DateTimeDefault = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeDefault

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb

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

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import DateTime from '../_date_time.jsx'
+
+const DateTimeDefault = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        showIcon
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showIcon
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        size="sm"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeDefault