RubyGems - playbook_ui - Versions diffs - 7.14.0 → 7.16.0.pre.alpha3 - Mend

playbook_ui 7.14.0 → 7.16.0.pre.alpha3

Files changed (439) hide show

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbDatePicker
-    class DatePicker
-      include Playbook::Props
-      partial "pb_date_picker/date_picker"
+    class DatePicker < Playbook::KitBase
       prop :allow_input, type: Playbook::Props::Boolean,
                          default: false
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss CHANGED Viewed

@@ -289,9 +289,6 @@
 .numInputWrapper span svg path {
   fill: rgba(0,0,0,0.5);
 }
-.numInputWrapper:hover {
-  background: rgba(0,0,0,0.05);
-}
 .numInputWrapper:hover span {
   opacity: 1;
 }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss CHANGED Viewed

@@ -13,6 +13,7 @@
 }
 .flatpickr-monthDropdown-months {
   appearance: none;
+  -webkit-appearance: none;
   @include pb_title_4;
   height: $space_xl;
   width: $space_xs * 12;
@@ -29,10 +30,14 @@
 }
 .numInputWrapper {
   display: contents;
+  display: -webkit-box;
+  display: -webkit-flex;
   .numInput {
     @include pb_title_4;
     border: 0;
     appearance: none;
+    -webkit-appearance: none;
+    border-radius: 0;
     background-color: transparent;
     border-left: solid 1px $border_light;
     padding-left: $space_md - 1.5;
@@ -45,6 +50,7 @@
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
+        background-color: $white;
       }
     }
   }
@@ -61,6 +67,7 @@
 }
 .year-dropdown-icon {
   align-self: center;
+  -webkit-align-self: center;
   margin-top: $space_xs - 3;
   width: $space_xs + 2;
   position: relative;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss CHANGED Viewed

@@ -41,4 +41,11 @@
 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
   -webkit-box-shadow: none;
           box-shadow: none;
-}
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover {
+  background-color: $white;
+}
+// .numInputWrapper:hover {
+//   background-color: $white;
+// }

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx CHANGED Viewed

@@ -49,6 +49,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <If condition={icon}>
         <Body
             color="light"
+            key={Math.random()}
             tag="span"
         >
           <Icon

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <div class="pb_date_range_inline_wrapper">
+    <% if object.icon == true %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
+    <% end %>
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb CHANGED Viewed

@@ -2,13 +2,7 @@
 module Playbook
   module PbDateRangeInline
-    class DateRangeInline
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-      partial "pb_date_range_inline/date_range_inline"
+    class DateRangeInline < Playbook::KitBase
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true
       prop :icon, required: false

data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.html.erb → date_range_stacked.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbDateRangeStacked
-    class DateRangeStacked
-      include Playbook::Props
-      partial "pb_date_range_stacked/date_range_stacked"
+    class DateRangeStacked < Playbook::KitBase
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true

data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml CHANGED Viewed

@@ -2,10 +2,6 @@ examples:
   rails:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
   react:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark

data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'
2	- export { default as DateRangeStackedDark } from './_date_range_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_date_stacked/{_date_stacked.html.erb → date_stacked.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb CHANGED Viewed

@@ -2,13 +2,7 @@
 module Playbook
   module PbDateStacked
-    class DateStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-      partial "pb_date_stacked/date_stacked"
+    class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
                   values: %w[left center right],

data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml CHANGED Viewed

@@ -6,9 +6,6 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
   react:
   - date_stacked_default: Default
@@ -16,7 +13,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark

data/app/pb_kits/playbook/pb_date_stacked/docs/index.js CHANGED Viewed

@@ -3,5 +3,3 @@ export { default as DateStackedNotCurrentYear } from './_date_stacked_not_curren
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'
-export { default as DateStackedDark } from './_date_stacked_dark.jsx'

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

@@ -53,13 +53,13 @@ const DateTime = (props: DateTimeProps) => {
           vertical="baseline"
       >
         <FormattedDate
-            datetime={datetime}
             showDayOfWeek={showDayOfWeek}
             size={size}
             timeZone={timeZone}
+            value={datetime}
         />
         <Time
-            date={new Date()}
+            date={datetime}
             marginLeft="sm"
             showIcon={showIcon}
             size={size}

data/app/pb_kits/playbook/pb_date_time/{_date_time.html.erb → date_time.html.erb} RENAMED Viewed

@@ -4,9 +4,9 @@
     data: object.data,
     class: object.classname) do %>
-    <%= pb_rails("flex", props: {
-      orientation: "row",
-      horizontal: object.align,
+    <%= pb_rails("flex", props: {
+      orientation: "row",
+      horizontal: object.align,
       vertical: "baseline" }) do %>
       <%= pb_rails("date", props: {

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

@@ -2,11 +2,7 @@
 module Playbook
   module PbDateTime
-    class DateTime
-      include Playbook::Props
-      partial "pb_date_time/date_time"
+    class DateTime < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :align, type: Playbook::Props::Enum,

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

@@ -4,7 +4,7 @@ import DateTime from '../_date_time.jsx'
 const DateTimeDefault = (props) => (
   <div>
     <DateTime
-        datetime={new Date()}
+        datetime={new Date('2020-12-31 14:24:09')}
         showDayOfWeek
         showIcon
         {...props}
@@ -29,7 +29,7 @@ const DateTimeDefault = (props) => (
     <br />
     <DateTime
-        datetime={new Date()}
+        datetime={new Date('2020-12-31 14:24:09 -0500')}
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.html.erb → date_time_stacked.html.erb} RENAMED Viewed

@@ -2,7 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
     <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
       <%= pb_rails("flex/flex_item") do %>
         <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
@@ -11,5 +10,4 @@
         <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", date: object.date, tag: "caption" }) %>
       <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbDateTimeStacked
-    class DateTimeStacked
-      include Playbook::Props
-      partial "pb_date_time_stacked/date_time_stacked"
+    class DateTimeStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml CHANGED Viewed

@@ -2,10 +2,6 @@ examples:
   rails:
   - date_time_stacked_default: Default
-  - date_time_stacked_dark: Dark
   react:
   - date_time_stacked_default: Default
-  - date_time_stacked_dark: Dark

data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
2	- export { default as DateTimeStackedDark } from './_date_time_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.html.erb → date_year_stacked.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbDateYearStacked
-    class DateYearStacked
-      include Playbook::Props
-      partial "pb_date_year_stacked/date_year_stacked"
+    class DateYearStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml CHANGED Viewed

@@ -2,8 +2,6 @@ examples:
   rails:
   - date_year_stacked_default: Default
-  - date_year_stacked_dark: Dark
   react:
   - date_year_stacked_default: Default
-  - date_year_stacked_dark: Dark

data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx'
2	- export { default as DateYearStackedDark } from './_date_year_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ import { globalProps } from '../utilities/globalProps.js'
 type DistributionBarProps = {
   className?: string,
+  colors: array,
   data?: string,
   id?: string,
   size?: "lg" | "sm",
@@ -18,13 +19,13 @@ const normalizeCharacters = (widths) => {
   })
 }
-const barValues = (normalizedValues) => {
+const barValues = (normalizedValues, colors) => {
   const arrSum = (value) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (
       <div
-          className="pb_distribution_width"
+          className={classnames('pb_distribution_width', colors[i] ? `color_${colors[i]}` : '')}
           key={i}
           style={{ width: `${(value * 100) / widthSum}%` }}
       />
@@ -33,12 +34,16 @@ const barValues = (normalizedValues) => {
 }
 const DistributionBar = (props: DistributionBarProps) => {
-  const { size = 'lg', widths = [1] } = props
+  const {
+    size = 'lg',
+    widths = [1],
+    colors = [],
+  } = props
   const normalizedValues = normalizeCharacters(widths)
   return (
     <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}>
-      {barValues(normalizedValues)}
+      {barValues(normalizedValues, colors)}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss CHANGED Viewed

@@ -1,25 +1,30 @@
 @import "../tokens/colors";
 [class^=pb_distribution_bar] {
-  $bar_colors: map-values($data_colors);
+  $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
+  border-radius: $large_bar;
+  overflow: auto;
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @for $i from 1 through length($bar_colors) {
-      &:nth-child(#{length($bar_colors)}n+#{$i}) {
-        background-color: nth($bar_colors, $i);
+    @each $name, $color in $bar_colors {
+      &:nth-child(#{length($bar_colors)}n+#{index(($bar_colors), ($name $color))}) {
+        background-color: $color;
+      }
+      &.color_#{$name} {
+        background-color: $color !important;
       }
     }
     &:first-child {
-      border-top-left-radius: 18px;
-      border-bottom-left-radius: 18px;
+      border-top-left-radius: $large_bar;
+      border-bottom-left-radius: $large_bar;
     }
     &:last-child {
-      border-top-right-radius: 18px;
-      border-bottom-right-radius: 18px;
+      border-top-right-radius: $large_bar;
+      border-bottom-right-radius: $large_bar;
     }
   }
   &[class*=_sm] {

data/app/pb_kits/playbook/pb_distribution_bar/{_distribution_bar.html.erb → distribution_bar.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb CHANGED Viewed

@@ -2,16 +2,14 @@
 module Playbook
   module PbDistributionBar
-    class DistributionBar
-      include Playbook::Props
-      partial "pb_distribution_bar/distribution_bar"
+    class DistributionBar < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm],
                   default: "lg"
       prop :widths, type: Playbook::Props::NumberArray,
-                    default: [1]
+                  default: [1]
+      prop :colors, type: Playbook::Props::Array,
+                  default: []
       def classname
         generate_classname("pb_distribution_bar", size)
@@ -27,6 +25,7 @@ module Playbook
         {
           size: size,
           widths: widths,
+          colors: colors,
         }
       end
     end