RubyGems - playbook_ui - Versions diffs - 2.9.8 → 2.9.9 - Mend

playbook_ui 2.9.8 → 2.9.9

Files changed (82) hide show

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

@@ -1,12 +1,15 @@
 examples:
   rails:
   - card_light: Default
+  - card_highlight: Highlight Cards
   - card_selected: Selected
   - card_padding: Padding Size
   - card_shadow: Shadow Size
   - card_content: Content Size
   react:
   - card_light: Default
+  - card_highlight: Highlight Cards
   - card_selected: Selected
   - card_padding: Padding Size
   - card_shadow: Shadow Size

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

@@ -1,4 +1,5 @@
 export {default as CardLight} from './_card_light.jsx';
+export {default as CardHighlight} from './_card_highlight.jsx';
 export {default as CardSelected} from './_card_selected.jsx';
 export {default as CardPadding} from './_card_padding.jsx';
 export {default as CardShadow} from './_card_shadow.jsx';

data/app/pb_kits/playbook/pb_contact/contact.rb CHANGED Viewed

@@ -48,7 +48,6 @@ module Playbook
       def formatted_value
         contact_value.to_s.gsub(/\D/, "")
       end
     end
   end
 end

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx CHANGED Viewed

@@ -13,12 +13,12 @@ type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
   className?: String,
   id?: String,
-  stat_change?: {
+  statChange?: {
     change?: String,
     value?: String | Number
   },
-  stat_label?: String,
-  stat_value?: {
+  statLabel?: String,
+  statValue?: {
     unit?: String,
     value?: String | Number
   }
@@ -39,40 +39,22 @@ const DashboardValue = (props: DashboardValueProps) => {
     align='left',
     className,
     id,
-    stat_change,
-    stat_label,
-    stat_value,
+    statChange,
+    statLabel,
+    statValue,
   } = props
-  const statLabel = function(stat_label) {
-    if (stat_label) {
-      return (
-        <Body color="light">{stat_label}</Body>
-      )
-    }
-  }
-  const statChange = function(stat_change) {
-    if (stat_change) {
-      return (
-        <StatChange change={stat_change.change} value={stat_change.value} />
-      )
-    }
-  }
-  const statValue = function(stat_value) {
-    if (stat_value) {
-      return (
-        <StatValue value={stat_value.value} unit={stat_value.unit} />
-      )
-    }
-  }
   return (
     <div id={id} className={classnames(dashboardValueCSS(props), className)}>
-      {statLabel(stat_label)}
-      {statValue(stat_value)}
-      {statChange(stat_change)}
+      <If condition={statLabel}>
+        <Body color="light">{statLabel}</Body>
+      </If>
+      <If condition={statValue}>
+        <StatValue value={statValue.value} unit={statValue.unit} />
+      </If>
+      <If condition={statChange}>
+        <StatChange change={statChange.change} value={statChange.value} />
+      </If>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx CHANGED Viewed

@@ -5,25 +5,28 @@ function DashboardValueAlign() {
   return (
     <div>
       <DashboardValue
-          stat_label="Top Title Value"
-          stat_value={{value: "1,428", unit: "appts"}}
-          stat_change={{change: "decrease", value: "26.1"}} />
+          statChange={{change: "decrease", value: "26.1"}}
+          statLabel="Top Title Value"
+          statValue={{value: "1,428", unit: "appts"}}
+      />
       <br/><br/>
       <DashboardValue
           align="center"
-          stat_label="Top Title Value"
-          stat_value={{value: "1,428", unit: "appts"}}
-          stat_change={{change: "decrease", value: 56.1}} />
+          statChange={{change: "decrease", value: 56.1}}
+          statLabel="Top Title Value"
+          statValue={{value: "1,428", unit: "appts"}}
+      />
       <br/><br/>
       <DashboardValue
           align="right"
-          stat_label="Top Title Value"
-          stat_value={{value: "1,428", unit: "appts"}}
-          stat_change={{change: "decrease", value: 86}} />
+          statChange={{change: "decrease", value: 86}}
+          statLabel="Top Title Value"
+          statValue={{value: "1,428", unit: "appts"}}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx CHANGED Viewed

@@ -5,23 +5,26 @@ function DashboardValueDefault() {
   return (
     <div>
       <DashboardValue
-          stat_label="Decreased Value"
-          stat_value={{value: "1,428", unit: "appts"}}
-          stat_change={{change: "decrease", value: "26.1"}} />
+          statChange={{change: "decrease", value: "26.1"}}
+          statLabel="Decreased Value"
+          statValue={{value: "1,428", unit: "appts"}}
+      />
       <br/><br/>
       <DashboardValue
-          stat_label="Increased Value"
-          stat_value={{value: "938", unit: "homes"}}
-          stat_change={{change: "increase", value: 56.1}} />
+          statChange={{change: "increase", value: 56.1}}
+          statLabel="Increased Value"
+          statValue={{value: "938", unit: "homes"}}
+      />
       <br/><br/>
       <DashboardValue
-          stat_label="Neutral Value"
-          stat_value={{value: "261", unit: "windows"}}
-          stat_change={{value: 86}} />
+          statChange={{value: 86}}
+          statLabel="Neutral Value"
+          statValue={{value: "261", unit: "windows"}}
+      />
     </div>
   )
 }

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

@@ -33,7 +33,7 @@ module Playbook
     private
       def pb_date_time
-        pb_date_time ||= Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(date)
       end
     end
   end

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <div class="pb_date_stacked_day_month">
+      <%= pb_rails("caption", props: { text: object.month }) %>
+      <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
+      <% end %>
+    </div>
+    <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx ADDED Viewed

@@ -0,0 +1,83 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime.js'
+import {
+  Title,
+  Caption
+} from '../'
+type DateStackedProps = {
+  align?: 'center' | 'right',
+  className?: String | Array<String>,
+  dark?: Boolean,
+  data?: String,
+  date: String,
+  size?: 'sm' | 'md',
+  id?: String,
+  reverse?: Boolean,
+}
+const kitClasses = ({
+  align='left',
+  size='sm',
+  dark=false,
+  reverse=false,
+}: DateStackedProps) => {
+  const alignStyle = align !== '' ? `_${align}` : ''
+  const sizeStyle = size !== '' ? `_${size}` : ''
+  const themeStyle = dark === true ? '_dark' : ''
+  const reverseStyle = reverse === true ? '_reverse' : ''
+  return 'pb_date_stacked_kit' + alignStyle + sizeStyle + themeStyle + reverseStyle
+}
+const sizes = {
+  sm: 4,
+  md: 3,
+}
+const DateStacked = (props: DateStackedProps) => {
+  const {
+    align='left',
+    className,
+    dark=false,
+    reverse=false,
+    date,
+    size='sm'
+  } = props
+  const dateTimestamp = new DateTime({ value: date })
+  const css = classnames(kitClasses(props), className)
+  const current_year = new Date().getFullYear().toString()
+  const input_year = dateTimestamp.toYear().toString()
+  const print_year = dateTimestamp => {
+    if (current_year != input_year) {
+      return (
+        <Caption size='xs'>{input_year}</Caption>
+      )
+    }
+  }
+  return (
+    <div className={css}>
+      <div class="pb_date_stacked_day_month">
+        <Caption
+          text={`${dateTimestamp.toMonth().toUpperCase()}`}
+        />
+        <Title
+          dark={dark}
+          size={sizes[size]}
+          text={`${dateTimestamp.toDay()}`}
+        />
+      </div>
+        {print_year(date)}
+    </div>
+  )
+}
+export default DateStacked

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss ADDED Viewed

@@ -0,0 +1,35 @@
+@import "../pb_title/title";
+@import "../pb_caption/caption";
+@import "../tokens/colors";
+[class^=pb_date_stacked_kit]{
+  &[class*=_center]  {
+    & > * [class^=pb_title_kit],
+    & > * [class^=pb_caption_kit],
+    & > [class^=pb_date_stacked_year_kit] {
+      text-align: center;
+    }
+  }
+  &[class*=_right]  {
+    & > * [class^=pb_title_kit],
+    & > * [class^=pb_caption_kit],
+    & > [class^=pb_date_stacked_year] {
+      text-align: right;
+    }
+  }
+  &[class*=_reverse] {
+    .pb_date_stacked_day_month {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+  }
+  &[class*=_dark] {
+    & > * [class^=pb_title_kit] {
+      color: $text_dk_default;
+    }
+    & > * [class^=pb_caption_kit] {
+      color: $text_dk_light;
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+module Playbook
+  module PbDateStacked
+    class DateStacked
+      include ActionView::Helpers::TagHelper
+      include ActionView::Context
+      include Playbook::Props
+      partial "pb_date_stacked/date_stacked"
+      prop :date, type: Playbook::Props::Date, required: true
+      prop :align, type: Playbook::Props::Enum,
+                  values: %w[left center right],
+                  default: "left"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md],
+                  default: "sm"
+      prop :reverse, type: Playbook::Props::Boolean,
+                  default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      def classname
+        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
+      end
+      def title_size
+        size == "md" ? 3: 4
+      end
+      def day
+        day = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: day.to_iso) do
+          "#{day.to_day}"
+        end
+      end
+      def month
+        month = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: month.to_iso) do
+          "#{month.to_month}"
+        end
+      end
+      def year
+        current_year = DateTime.now.year.to_i
+        year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
+        if current_year != year
+          content_tag(:time, datetime: year) do
+            "#{year}"
+          end
+        else
+        end
+      end
+    private
+      def reverse_class
+        reverse ? "reverse" : nil
+      end
+      def dark_class
+        dark ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb ADDED Viewed

@@ -0,0 +1,21 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "center" }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right" }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "center" }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "right" }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from "react"
+import DateStacked from "../_date_stacked.jsx"
+function DateStackedAlign() {
+  return (
+    <div>
+      <DateStacked date={new Date()} size='sm'/>
+      <br/>
+      <DateStacked date={new Date()} align='center'/>
+      <br/>
+      <DateStacked date={new Date()} align='right'/>
+      <br/>
+      <DateStacked date={new Date()} size='md'/>
+      <br/>
+      <DateStacked date={new Date()} size='md' align='center'/>
+      <br/>
+      <DateStacked date={new Date()} size='md' align='right'/>
+    </div>
+  )
+}
+export default DateStackedAlign;