playbook_ui 7.3.0 → 7.4.0.pre.alpha6

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { Background } from '../..'
-
-const BackgroundLight = () => (
-  <div>
-    <Background
-        backgroundColor="light"
-        padding="xl"
-    />
-  </div>
-)
-
-export default BackgroundLight

data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb

@@ -1,3 +0,0 @@
-  <%= pb_rails("background", props: { background_color: "white", padding: "xl" }) do %>
-    
-  <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Background } from '../..'
-
-const BackgroundWhite = () => (
-  <div>
-    <Background
-        backgroundColor="white"
-        className="blah"
-    />
-  </div>
-
-)
-
-export default BackgroundWhite

data/app/pb_kits/playbook/pb_background/docs/_description.md

@@ -1 +0,0 @@
-The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and white.

data/app/pb_kits/playbook/pb_background/docs/example.yml

@@ -1,15 +0,0 @@
-examples:
-
-  rails:
-  - background_light: Light
-  - background_white: White
-  - background_dark: Dark
-  - background_gradient: Gradient
-  - background_image: Image
-
-  react:
-  - background_light: Light
-  - background_white: White
-  - background_dark: Dark
-  - background_gradient: Gradient
-  - background_image: Image

data/app/pb_kits/playbook/pb_background/docs/index.js

@@ -1,6 +0,0 @@
-export { default as BackgroundLight } from './_background_light.jsx'
-export { default as BackgroundWhite } from './_background_white.jsx'
-export { default as BackgroundDark } from './_background_dark.jsx'
-export { default as BackgroundGradient } from './_background_gradient.jsx'
-export { default as BackgroundImage } from './_background_image.jsx'
-

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

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

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

@@ -1,73 +0,0 @@
-/* @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

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

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

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

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

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

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