playbook_ui 7.14.0 → 7.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afa113290f2904fa0ce5794378b5c8e9ee247d1a213aa5911a339277738e331d
-  data.tar.gz: 5be3a1822a72e60809e8bc54e777e78bc8130f4be7f776d579d2a47a2987dfd1
+  metadata.gz: e9880537826f76dc7f18ff8b57b2172d82daafcb82f24919edfc485d47dc7883
+  data.tar.gz: 4d5f0958a3ff10a277ecc5502af44757ded31c7dd47765ede532f14b2deeef80
 SHA512:
-  metadata.gz: dcdb7c84e58b1835cdefd80e7d5e8bfdd29e08a2a16a107ebba9ac66a6b3f704c0eeef5df64db523605bb5cd80167dd17c1691ee5371271ed38e692f92b0fbdc
-  data.tar.gz: b0570e9d26ca5cba15edeece70de4db71384a916164f773f48631c6fe4c4389016142b4dd4a8c33e41092f91f778a2a690a069ab95e200892b42b52c58cfdf75
+  metadata.gz: '036039217060cb4201c7fd673b9365738fe913cb9ca0863fd785ae3467d21b80dbf75124305179f7d8daef047fc4bd610339e200ef7962369be50049e082e961'
+  data.tar.gz: be21f0886b1254b9129b1777e95513925e7afbdad13a9654c414246b654465468e6accb23a1c4342c8ac5c930fcc030a59f7e0263326f725bd0bedb3e5b8e6a9

data/app/helpers/playbook/pb_sample_helper.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbSampleHelper
     def kits_used(sample)
       code = get_raw_code(sample, "rails")
-      kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
+      kits_array = code.scan(%r{pb_rails\("(\w+)(?:"|/)})
       kits_array.uniq
     end
 

data/app/pb_kits/playbook/index.js

@@ -112,3 +112,4 @@ export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
 export PbTooltip from './pb_tooltip'
+export PbTextarea from './pb_textarea'

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

@@ -3,13 +3,11 @@ 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 +1,5 @@
 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_range_stacked/docs/example.yml

@@ -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

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

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

@@ -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

@@ -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_stacked/docs/example.yml

@@ -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

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

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

@@ -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

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

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

@@ -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

@@ -5,21 +5,26 @@
   $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 $data_colors {
+      &:nth-child(#{length($data_colors)}n+#{index(($data_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.rb

@@ -11,7 +11,9 @@ module Playbook
                   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 +29,7 @@ module Playbook
         {
           size: size,
           widths: widths,
+          colors: colors,
         }
       end
     end

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("distribution_bar", props: {
+  widths: [4,5,3],
+  colors: ["data_7", "data_1", "data_6"]
+}) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import DistributionBar from '../_distribution_bar.jsx'
+
+const DistributionBarCustomColors = (props) => {
+  return (
+    <React.Fragment>
+      <div>
+        <DistributionBar
+            colors={['data_7', 'data_1', 'data_6']}
+            widths={[4, 5, 3]}
+            {...props}
+        />
+      </div>
+    </React.Fragment>
+  )
+}
+
+export default DistributionBarCustomColors

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -0,0 +1 @@
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

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

@@ -2,8 +2,10 @@ examples:
   
   rails:
   - distribution_bar_default: Default
+  - distribution_bar_custom_colors: Custom Colors
   
   
   react:
   - distribution_bar_default: Default
+  - distribution_bar_custom_colors: Custom Colors
   

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

@@ -1 +1,2 @@
 export { default as DistributionBarDefault } from './_distribution_bar_default.jsx'
+export { default as DistributionBarCustomColors } from './_distribution_bar_custom_colors.jsx'

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { isEmpty, map, omitBy } from 'lodash'
-import { Caption, Title } from '../../'
+import { Body, Caption, Title } from '../../'
 
 export type FilterDescription = {
   [key: string]: ?string | boolean,
@@ -20,6 +20,17 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
 
   return (
     <div className="maskContainer">
+      <If condition={isEmpty(filters)}>
+        <div className="filters">
+          <Body
+              color="light"
+              paddingLeft="xs"
+              size={4}
+              tag="h4"
+              text="No Filter Selected"
+          />
+        </div>
+      </If>
       <If condition={!isEmpty(filters)}>
         <div className="filters">
           <div className="left_gradient" />

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -38,3 +38,44 @@
     <% end %>
   <% end %>
 <% end %>
+
+<br>
+<br>
+
+<%=
+  pb_rails("filter", props: {
+    id: "def2",
+
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 0,
+  }) do
+%>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -10,51 +10,98 @@ const FilterDefault = (props) => {
     { value: 'A Galaxy Far Far Away Like Really Far Away' },
   ]
   return (
-    <Filter
-        double
-        filters={{
-          'Full Name': 'John Wick',
-          'City': 'San Francisco',
-        }}
-        results={1}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'desc' }]}
-        {...props}
-    >
-      <TextInput
-          label="Full Name"
-          placeholder="Enter name"
-          {...props}
-      />
 
-      <Select
-          blankSelection="Select One..."
-          label="Territory"
-          name="location"
-          options={options}
+    <>
+      <Filter
+          double
+          filters={{
+            'Full Name': 'John Wick',
+            'City': 'San Francisco',
+          }}
+          results={1}
+          sortOptions={{
+            popularity: 'Popularity',
+            // eslint-disable-next-line
+            manager_title: 'Manager\'s Title',
+            // eslint-disable-next-line
+            manager_name: 'Manager\'s Name',
+          }}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
-      />
-      <Flex
-          spacing="between"
+      >
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
+            {...props}
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+            {...props}
+        />
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </Filter>
+
+      <br />
+
+      <Filter
+          double
+          results={1}
+          sortOptions={{
+            popularity: 'Popularity',
+            // eslint-disable-next-line
+            manager_title: 'Manager\'s Title',
+            // eslint-disable-next-line
+            manager_name: 'Manager\'s Name',
+          }}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
-        <Button
-            text="Apply"
+        <TextInput
+            label="Example Text Field"
+            placeholder="Enter Text"
             {...props}
         />
-        <Button
-            text="Clear"
-            variant="secondary"
+
+        <Select
+            blankSelection="Select One..."
+            label="Example Collection Select"
+            name="Collection Select"
+            options={options}
             {...props}
         />
-      </Flex>
-    </Filter>
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </Filter>
+    </>
   )
 }