playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fe0f6e73d47c5dc6e885e636aaaa37acc5354f4cffac8ba5ca8cd21fa719cf3
-  data.tar.gz: 47814061793d8e5bb67bd90747d127033dfb8f99401cb6abc674daa98168742f
+  metadata.gz: 16ea9d4af0ed12b03e2eca2770ae969f3fe3a80eac71e32ec2c718dce7347c7c
+  data.tar.gz: 0afbc57b75a606da56ce827592fc8bd3ac54f34f0040c2cf0c31d5238422b24c
 SHA512:
-  metadata.gz: fa54ac8af29c6fedfe23c06aeab73d1244d27c1935d4b3ef9db6a127b4d71e875ca10cf1f36c3d630a332170d165b8bb4f4cded58e96b553b4eb25e6389d2cb7
-  data.tar.gz: 94297d8c94a6c8c99590c492cafafc868b095ce18953150f53e965aa8a576155575f5119b51cacd8d58c3fc7ea9fe340ef26dc538d9617caa0f891ff3ce14a0b
+  metadata.gz: c19ec8adfcfd42c65d5fc2987e715076dce6f3d9765b9b00e2e860414e8c471ecf38e4856caefb7363906cfaa94bdef22c4d64bef489093d1f601076fbf0d977
+  data.tar.gz: 21f2f4a836a8753d1dd9bb836e0867abedb74d098306d577d255fd87561488a896190ab343f8a978e5dfc48fdc6c1f8590799a5f2448e546975a739235eff9df

data/README.md

@@ -9,8 +9,7 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `make install`
-1. Run `make start`
+1. Run `make it`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8089](http://localhost:8089)
 
@@ -35,10 +34,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +61,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/pb_kits/playbook/_playbook.scss

@@ -82,3 +82,4 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+

data/app/pb_kits/playbook/data/menu.yml

@@ -7,6 +7,7 @@ samples:
 kits:
   - avatar
   - avatar_action_button
+  - background
   - buttons:
     - button
     - button_toolbar
@@ -20,7 +21,6 @@ kits:
     - gauge
     - legend
     - line_graph
-
   - filter
   - fixed_confirmation_toast
   - flex

data/app/pb_kits/playbook/index.js

@@ -1,6 +1,7 @@
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
+export Background from 'pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
@@ -9,6 +10,7 @@ export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
+export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
@@ -80,6 +82,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -15,6 +15,7 @@ import WebpackerReact from 'webpacker-react'
 import '../pb_form/pb_form_validation'
 import * as Avatar from 'pb_avatar/docs'
 import * as AvatarActionButton from 'pb_avatar_action_button/docs'
+import * as Background from 'pb_background/docs'
 import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
@@ -23,6 +24,7 @@ import * as ButtonToolbar from 'pb_button_toolbar/docs'
 import * as Caption from 'pb_caption/docs'
 import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
+import * as CircleChart from 'pb_circle_chart/docs'
 import * as CircleIconButton from 'pb_circle_icon_button/docs'
 import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
@@ -88,6 +90,7 @@ import * as TimeRangeInline from 'pb_time_range_inline/docs'
 import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
+import * as Typeahead from 'pb_typeahead/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -96,6 +99,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 WebpackerReact.setup({
   ...Avatar,
   ...AvatarActionButton,
+  ...Background,
   ...Badge,
   ...BarGraph,
   ...Body,
@@ -104,6 +108,7 @@ WebpackerReact.setup({
   ...Caption,
   ...Card,
   ...Checkbox,
+  ...CircleChart,
   ...CircleIconButton,
   ...Contact,
   ...Currency,
@@ -169,6 +174,7 @@ WebpackerReact.setup({
   ...Title,
   ...TitleCount,
   ...TitleDetail,
+  ...Typeahead,
   ...Toggle,
   ...User,
   ...UserBadge,

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -47,6 +47,27 @@
 
   .pb--kit-example {
     position: relative;
+
+    // &::after {
+    //   content: '';
+    //   width: 100%;
+    //   height: 4px;
+    //   background: $border-light;
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    // }
+    // &.dark{
+    //   &::after {
+    //     display: none;
+    //   }
+    // }
+
+    code {
+      background-color: rgba($text_lt_lighter, 0.35);
+      border-radius: 5px;
+      padding: 2px;
+    }
   }
 
   .pb--codeControls {
@@ -101,17 +122,12 @@
     display: none;
     overflow-x: auto;
     border-radius: 0 0 6px 6px;
+    background:tint($bg_dark,10);
   }
 
   &.dark_ui {
     background: none;
 
-    .pb--kit-example {
-
-      &::after {
-        background: $border-dark;
-      }
-    }
     .pb--codeCopy {
       border-color: $border-dark;
     }

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -30,7 +30,11 @@ const Avatar = (props: AvatarProps) => {
   const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_avatar_kit', size),
+    globalProps(props),
+    className
+  )
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials

data/app/pb_kits/playbook/pb_background/_background.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(object.tag,
+    aria: object.aria,
+    data: object.data,
+    id: object.id) do %>
+    <% if object.image_url.present? %>
+      <div class="<%= object.classname %>" style="background-image: url(<%= object.image_url %>); background-size: cover">
+        <%= capture(&object.children) %>
+      </div>
+    <% else %>
+      <div class="<%= object.classname %>">
+        <%= capture(&object.children) %>
+      </div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -0,0 +1,64 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+type BackgroundProps = {
+  aria?: object,
+  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  data?: object,
+  id?: string,
+  imageUrl?: string,
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+}
+
+const Background = (props: BackgroundProps) => {
+  const {
+    aria = {},
+    backgroundColor = 'light',
+    children,
+    className,
+    data = {},
+    id,
+    imageUrl = '',
+    padding = 'md',
+    tag = 'div',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_background_kit'), className, globalProps(props, { padding }))
+  const Tag = `${tag}`
+  const backgroundStyle = {
+    backgroundImage: `url(${imageUrl})`,
+    backgroundSize: 'cover',
+  }
+
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        id={id}
+    >
+      <If condition={imageUrl}>
+        <div
+            className={classes + 'lazyload blur_up'}
+            style={backgroundStyle}
+        >
+          { children }
+        </div>
+        <Else />
+        <div className={classes + `bg_${backgroundColor}`}>
+          { children }
+        </div>
+      </If>
+    </Tag>
+  )
+}
+
+export default Background

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -0,0 +1,15 @@
+[class^=pb_background_kit] {
+  max-width: 100%;
+  max-height: 100%;
+
+  .blur_up {
+    -webkit-filter: blur(6px);
+    filter: blur(6px);
+    transition: filter 550ms, -webkit-filter 550ms;
+  }
+
+  .blur_up.lazyloaded {
+    -webkit-filter: blur(0);
+    filter: blur(0);
+  }
+}

data/app/pb_kits/playbook/pb_background/background.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBackground
+    class Background
+      include Playbook::Props
+
+      partial "pb_background/background"
+
+      prop :background_color, type: Playbook::Props::Enum,
+                              values: %w[gradient dark light white],
+                              default: "light"
+      prop :image_url
+      prop :padding, type: Playbook::Props::Enum,
+                     values: %w[none xs sm md lg xl],
+                     default: "md"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                 default: "div"
+
+      def classname
+        generate_classname("pb_background_kit", image_classname, background_color_classname, padding, separator: " ")
+      end
+
+    private
+
+      def image_classname
+        image_url.present? ? "lazyload blur_up" : ""
+      end
+
+      def background_color_classname
+        !image_url.present? ? "bg_#{background_color}" : ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+<%= pb_rails("background", props: { background_color: "gradient" }) do %>
+  Background Kit Gradient Color
+<% end %>
+
+<%= pb_rails("background", props: { background_color: "dark" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { dark: true, size: 2, text: "Background Kit Dark" })%>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "right"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("body", props: { text: "Background Kit Light" })%>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("background", props: { background_color: "white", padding: "lg" }) do %>
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { size: 3, text: "Background Kit White" })%>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
+    <% end %>
+    <%= pb_rails("flex/flex_item", props: { padding: "lg" }) do %>
+      <%= pb_rails("card", props: { shadow: "deepest" }) do %>
+        We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own.
+        -Cesar Chavez
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Background } from '../../'
+import { Body, Card, Flex, FlexItem, Title } from '../../'
+
+const BackgroundDefault = () => (
+  <div>
+    <Background
+        backgroundColor="gradient"
+    >
+      {'Background Kit Gradient Color'}
+    </Background>
+    <Background
+        backgroundColor="dark"
+    >
+      <Flex
+          horizontal="center"
+          orientation="row"
+      >
+        <FlexItem>
+          <Title
+              dark
+              size={2}
+              text="Background Kit Dark"
+          />
+        </FlexItem>
+      </Flex>
+    </Background>
+    <Background
+        backgroundColor="light"
+        padding="xl"
+    >
+      <Flex
+          horizontal="right"
+          orientation="row"
+      >
+        <FlexItem>
+          <Body
+              text="Background Kit Light"
+          />
+        </FlexItem>
+      </Flex>
+    </Background>
+    <Background
+        backgroundColor="white"
+        padding="lg"
+    >
+      <Title
+          size={3}
+          text="Background Kit White"
+      />
+    </Background>
+    <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
+      <Flex
+          orientation="column"
+          vertical="center"
+      >
+        <FlexItem>
+          <Title
+              dark
+              padding="lg"
+              size={1}
+              text="Background Kit Image"
+          />
+        </FlexItem>
+        <FlexItem padding="lg">
+          <Card shadow="deepest">
+            {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
+          </Card>
+        </FlexItem>
+      </Flex>
+    </Background>
+  </div>
+)
+
+export default BackgroundDefault