RubyGems - playbook_ui - Versions diffs - 2.9.0 → 2.9.1 - Mend

playbook_ui 2.9.0 → 2.9.1

Files changed (118) hide show

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb ADDED Viewed

@@ -0,0 +1,25 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(["pb_home_address_street", object.dark ? "dark" : nil].compact.join("_"))) do %>
+  <%= pb_rails "title", props: {
+    classname: "pb_home_address_street_address",
+    size: 4,
+    text: "#{object.address} \u00b7 #{object.house_style}"
+  } %>
+  <%= pb_rails "body", props: {
+    color: "light",
+    text: "#{object.city}, #{object.state}",
+  } %>
+  <%= pb_rails "body", props: { classname: "home-hashtag", tag: "span" } do %>
+    H#<%= object.home_id %>
+  <% end %>
+  <%= pb_rails "body", props: { color: "light", tag: "span" } do %>
+    <small><%= object.state %></small>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx ADDED Viewed

@@ -0,0 +1,64 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+import React from 'react'
+import classnames from 'classnames'
+import Body from '../pb_body/_body.jsx'
+import Title from '../pb_title/_title.jsx'
+type HomeAddressStreetProps = {
+  address: String,
+  city: String,
+  className?: String,
+  dark?: Boolean,
+  homeId: Number,
+  houseStyle: String,
+  state: String,
+  zipcode: String,
+}
+const classes = (className, dark) => (
+  classnames(className, {
+    'pb_home_address_street': !dark,
+    'pb_home_address_street_dark': dark,
+  })
+)
+const HomeAddressStreet = ({
+  address,
+  city,
+  className,
+  dark=false,
+  homeId,
+  houseStyle,
+  state,
+  zipcode,
+}: HomeAddressStreetProps) => (
+  <div className={classes(className, dark)}>
+    <Title
+        className="pb_home_address_street_address"
+        size={4}
+    >
+      {address} {`\u00b7`} {houseStyle}
+    </Title>
+    <Body color="light">
+      {city}, {state}
+    </Body>
+    <Body
+        className="home-hashtag"
+        tag="span"
+    >
+      H#{homeId}
+    </Body>
+    <Body
+        color="light"
+        tag="span"
+    >
+      <small>{state}</small>
+    </Body>
+  </div>
+)
+export default HomeAddressStreet

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss ADDED Viewed

@@ -0,0 +1,20 @@
+@import "../tokens/opacity";
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+[class^=pb_home_address_street] {
+  .home-hashtag {
+    background: rgba(6, 77, 255, $opacity_1);
+    border-radius: $border_rad_light;
+    font-weight: bold;
+    font-size: 10px;
+    color: #064DFF;
+    letter-spacing: 0;
+    padding: 1px 3px 1px 5px;
+    margin-right: 7px;
+  }
+  &[class$=_dark] .pb_home_address_street_address {
+    color: $white;
+  }
+}

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "North Arlington",
+  home_id: 8250263,
+  house_style: "Colonial",
+  state: "NJ",
+  zipcode: "07031",
+  dark: true,
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from "react"
+import HomeAddressStreet from "../_home_address_street.jsx"
+function HomeAddressStreetDark() {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        city="North Arlington"
+        dark
+        homeId={8250263}
+        houseStyle="Colonial"
+        state="NJ"
+        zipcode="07031"
+    />
+  )
+}
+export default HomeAddressStreetDark;

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb ADDED Viewed

@@ -0,0 +1,8 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "North Arlington",
+  home_id: 8250263,
+  house_style: "Colonial",
+  state: "NJ",
+  zipcode: "07031",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from "react"
+import HomeAddressStreet from "../_home_address_street.jsx"
+function HomeAddressStreetDefault() {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        city="North Arlington"
+        homeId={8250263}
+        houseStyle="Colonial"
+        state="NJ"
+        zipcode="07031"
+    />
+  )
+}
+export default HomeAddressStreetDefault;

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml ADDED Viewed

@@ -0,0 +1,11 @@
+examples:
+  rails:
+  - home_address_street_default: Default
+  - home_address_street_dark: Dark
+  react:
+  - home_address_street_default: Default
+  - home_address_street_dark: Dark

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {default as HomeAddressStreetDefault} from './_home_address_street_default.jsx';
2	+ export {default as HomeAddressStreetDark} from './_home_address_street_dark.jsx';

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb ADDED Viewed

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+module Playbook
+  module PbHomeAddressStreet
+    class HomeAddressStreet < Playbook::PbKit::Base
+      PROPS = %i[configured_address
+                 configured_city
+                 configured_classname
+                 configured_dark
+                 configured_data
+                 configured_home_id
+                 configured_house_style
+                 configured_id
+                 configured_state
+                 configured_zipcode].freeze
+      def initialize(address: default_configuration,
+                     city: default_configuration,
+                     classname: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     home_id: default_configuration,
+                     house_style: default_configuration,
+                     id: default_configuration,
+                     state: default_configuration,
+                     zipcode: default_configuration)
+        self.configured_address = address
+        self.configured_city = city
+        self.configured_classname = classname
+        self.configured_dark = dark
+        self.configured_data = data
+        self.configured_home_id = home_id
+        self.configured_house_style = house_style
+        self.configured_state = state
+        self.configured_zipcode = zipcode
+      end
+      def address
+        default_value(configured_address, "")
+      end
+      def city
+        default_value(configured_city, "")
+      end
+      def dark
+        true_value(configured_dark, true, false)
+      end
+      def home_id
+        default_value(configured_home_id, "")
+      end
+      def house_style
+        default_value(configured_house_style, "")
+      end
+      def state
+        default_value(configured_state, "")
+      end
+      def zipcode
+        default_value(configured_zipcode, "")
+      end
+      def to_partial_path
+        "pb_home_address_street/home_address_street"
+      end
+    private
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_kit/dateTime.js ADDED Viewed

@@ -0,0 +1,45 @@
+/* @flow */
+/*eslint-disable flowtype/space-before-type-colon */
+import moment from 'moment'
+require('moment-strftime')
+require('moment-timezone')
+type DateTimeType = {
+  value: String | Date,
+  zone?: String,
+}
+export default class DateTime {
+  constructor({ value, zone='America/New_York' }: DateTimeType) {
+    this.value = this.convertToTimestampZone(value, zone)
+  }
+  convertToTimestampZone(value, zone) {
+    return moment(value).tz(zone)
+  }
+  convertToTimezone(zone='America/New_York') {
+    return this.value.strftime('%a')
+  }
+  toYear() {
+    return this.value.strftime("%Y")
+  }
+  toMonth() {
+    return this.value.strftime("%b")
+  }
+  toMonthFull() {
+    return this.value.strftime("%B")
+  }
+  toDay() {
+    return this.value.strftime("%e")
+  }
+  toIso() {
+    return this.value.toISOString();
+  }
+}

data/app/pb_kits/playbook/pb_kit/pb_date_time.rb ADDED Viewed

@@ -0,0 +1,68 @@
+module Playbook
+  module PbKit
+    class PbDateTime
+      attr_accessor :value, :zone
+      def initialize(value, zone = "America/New_York")
+        @value = self.convert_to_timestamp_and_zone(value, zone)
+      end
+      def convert_to_timestamp_and_zone(value, zone)
+        converted_time = value.is_a?(String) ? DateTime.parse(value) : value
+        converted_time.in_time_zone(zone)
+      end
+      def convert_to_timestamp
+        @value = @value.is_a?(String) ? DateTime.parse(@value) : @value
+      end
+      def convert_to_timezone(zone = "America/New_York")
+        @value = @value.in_time_zone(zone)
+      end
+      def to_day_of_week
+        @value.strftime("%a")
+      end
+      def to_year
+        @value.strftime("%Y")
+      end
+      def to_month
+        @value.strftime("%^b")
+      end
+      def to_month_downcase
+        @value.strftime("%b")
+      end
+      def to_month_full
+        @value.strftime("%B")
+      end
+      def to_day
+        @value.strftime("%e")
+      end
+      def to_hour
+        @value.strftime("%l")
+      end
+      def to_minutes
+        @value.strftime("%M")
+      end
+      def to_meridian
+        @value.strftime("%P")[0, 1]
+      end
+      def to_timezone
+        @value.strftime("%Z")
+      end
+      def to_iso
+        @value.iso8601
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+    <%= object.value %>
+<% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx ADDED Viewed

@@ -0,0 +1,31 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+import React from 'react'
+import Icon from '../pb_icon/_icon.jsx'
+import Body from '../pb_body/_body.jsx'
+type LoadingInlineProps = {
+  align?: 'left' | 'center' | 'right',
+  className?: String,
+  dark?: Boolean,
+  data?: String,
+  id?: String,
+}
+const LoadingInline = ({
+  align='left',
+  className,
+  dark=false,
+  data,
+  id
+}: LoadingInlineProps) => (
+  <div className={`pb_loading_inline_kit_${align}`}>
+    <Body color="light">
+      <Icon fixedWidth pulse icon="spinner" />&nbsp;
+      {`Loading`}
+    </Body>
+  </div>
+)
+export default LoadingInline

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss ADDED Viewed

@@ -0,0 +1,19 @@
+@import "../pb_body/body";
+@import "../pb_icon/icon";
+[class^=pb_loading_inline_kit] {
+  display: flex;
+  align-items: baseline;
+  &[class*=_center] {
+    justify-content: center;
+  }
+  &[class*=_left] {
+    justify-content: flex-start;
+  }
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
+}