playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca983cabd6299f4dfad9ce14371ab208cd0a4a07d33a96a982b1d8738fdab2fe
-  data.tar.gz: b595faf637896b674152d5d99447d68afb91167b73613a0968a4dc97bebef410
+  metadata.gz: fdfd0f438e77b126a7b74b3db809043b80d2996ffe7b7d25ff222778af93ce38
+  data.tar.gz: d657df63807e0befd169fd80a095f32a999fd3c5ecc9c07fa3de6d0a886a5116
 SHA512:
-  metadata.gz: 44ec7a1bbb7d5caac83eaff177c2901369d5ca0988443256ead755384181fb4dd93821ebba314e49cd777f543fa7f151ec7677913eb3ed7554297c49418770ff
-  data.tar.gz: da094e6d8c732361affbed9a1bc563afd9ce2a4a42d95206af73482a2db773ce488d93fb97efcaf0d0bf888bb271745f0b2491bab370156de11b1e83d2ec2162
+  metadata.gz: 4cf4dfbd8fa778828660e01899c168a240ea4102148fecafa3f40b48eafbfdd8e79a6aeae99aa92005f7bd90a934e4dc7d1c254568a0b05f95d1d2dd8f056d51
+  data.tar.gz: 998dafb493bd31563299d2d78912094d83f10a9d9e3ddbda97074acd12ba560f201e7cc53689d235d977621c7723170f2fd53b35b1e3a6f51a0a2f2915d3197b

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                                default:[]
+                               default: []
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -101,7 +101,7 @@ const CircleChart = (props: CircleChartProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
+        if (chart && chart.renderTo.id === id) {
           const updatedValueArray = chartData.map((obj) => {
             return obj.value
           })

data/app/pb_kits/playbook/pb_date/_date.html.erb

@@ -1,70 +1,14 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-
-  <% if object.size == "md" %>
-    <!-- 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.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 %>
+    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: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
-    <% end %>
-
-  <% else %>
-
-    <!-- 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("caption", props: { tag: "div", text: object.day_of_week }) %>
-      <%= pb_rails("caption", 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("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
-    <%# if is current year %>
-    <% else %>
-      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
-    <% end %>
+      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
   <% end %>
 <% end %>
+

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

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

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

@@ -1,32 +1,2 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
-
-[class^=pb_date_kit] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    > div, .pb_icon_kit_container {
-        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;
-    }
-    &.dark {
-        [class^=pb_title_kit] {
-            color: $text_dk_default !important;
-        }
-    }
-}

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

@@ -10,37 +10,25 @@ module Playbook
       partial "pb_date/date"
 
       prop :date, required: true
-      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
-      # Size to be deprecated.
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg md sm xs],
-                  default: "md"
+                  values: %w[lg sm xs],
+                  default: "sm"
       prop :timezone, default: "America/New_York"
 
       def classname
-        generate_classname("pb_date_kit", alignment)
+        generate_classname("pb_date_kit")
       end
 
-      def 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

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

@@ -1,39 +1,24 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "sm"
+  size: "lg"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
-  size: "sm"
+  date: DateTime.now
 }) %>
 
 <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",
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true
+  date: Date.new(2010, 11, 12),
+  size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,59 +1,28 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date } from '../../'
 
-const DateDefault = (props) => {
+const DateDefault = () => {
   return (
-    <>
-      <FormattedDate
-          size="sm"
-          value={new Date()}
-          {...props}
+    <div>
+      <Date
+          size="lg"
+          value="1995-12-25"
       />
 
       <br />
 
-      <FormattedDate
-          size="sm"
-          value="2012-08-03"
-          {...props}
+      <Date
+          value="17 Mar 69"
       />
 
       <br />
 
-      <FormattedDate
-          showDayOfWeek
-          size="sm"
-          value="2017-12-03"
-          {...props}
+      <Date
+          size="xs"
+          value="2020-04-20T04:20:00.000Z"
       />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          value={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          value="2012-08-03"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          value="2017-12-03"
-          {...props}
-      />
-    </>
+    </div>
   )
 }
 
 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/example.yml

@@ -2,13 +2,9 @@ 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,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

@@ -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_form/docs/_form_simple_form.html.erb

@@ -52,7 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -8,12 +8,43 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
+
           props[:label] = @template.label(@object_name, name) if props[:label] == true
+          props[:label] = "Date Picker" if props[:label].nil?
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id
 
-          @template.pb_rails("date_picker", props: props)
+          input = text_field(
+            name,
+            autocomplete: "off",
+            disabled: props[:disable_input],
+            data: props[:input_data],
+            aria: props[:input_aria],
+            props: {
+              error: props[:error],
+              label: props[:hide_label] ? nil : props[:label],
+              placeholder: props[:placeholder],
+              required: props[:required],
+            }
+          )
+
+          puts "
+          
+          
+
+
+          
+          #{props}
+
+
+
+
+          "
+
+          @template.pb_rails("date_picker", props: props) do
+            input
+          end
         end
       end
     end

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -88,7 +88,7 @@ const Gauge = (props: GaugeProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
+        if (chart && chart.renderTo.id === id) {
           chart.series[0].setData([chartData[0].value])
           chart.series[0].data[0].name = chartData[0].name
         }

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                                default:[]
+                               default: []
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -16,8 +16,8 @@ module Playbook
                      values: %w[default tracker],
                      default: "default"
       prop :color, type: Playbook::Props::Enum,
-                     values: %w[primary info],
-                     default: "primary"
+                   values: %w[primary info],
+                   default: "primary"
       def classname
         generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
       end

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -6,13 +6,13 @@ module Playbook
       include Playbook::Props
 
       prop :async, type: Playbook::Props::Boolean,
-                    default: false
+                   default: false
       prop :label
       prop :load_options
       prop :name
       prop :options, type: Playbook::Props::HashArray, default: []
       prop :pills, type: Playbook::Props::Boolean,
-                    default: false
+                   default: false
 
       prop :placeholder
       prop :search_term_minimum_length, default: 3
@@ -38,13 +38,17 @@ module Playbook
           isMulti: true,
           label: label,
           options: options,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
 
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
+        if async
+          base_options.merge!(
+            {
+              async: true,
+              loadOptions: load_options,
+            }
+          )
+        end
 
         base_options
       end

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.3.0.pre.alpha1"
+  VERSION = "7.3.0.pre.alpha6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0.pre.alpha1
+  version: 7.3.0.pre.alpha6
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-19 00:00:00.000000000 Z
+date: 2020-10-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -668,14 +668,10 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
-- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -1874,8 +1870,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Playbook Design System

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

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

@@ -1,35 +0,0 @@
-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_variants.html.erb

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

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