playbook_ui 7.14.0.pre.alpha1 → 7.14.0

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

@@ -2,6 +2,8 @@ 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 +1,2 @@
 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,7 +6,6 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DistributionBarProps = {
   className?: string,
-  colors: array,
   data?: string,
   id?: string,
   size?: "lg" | "sm",
@@ -19,13 +18,13 @@ const normalizeCharacters = (widths) => {
   })
 }
 
-const barValues = (normalizedValues, colors) => {
+const barValues = (normalizedValues) => {
   const arrSum = (value) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (
       <div
-          className={classnames('pb_distribution_width', colors[i] ? `color_${colors[i]}` : '')}
+          className="pb_distribution_width"
           key={i}
           style={{ width: `${(value * 100) / widthSum}%` }}
       />
@@ -34,16 +33,12 @@ const barValues = (normalizedValues, colors) => {
 }
 
 const DistributionBar = (props: DistributionBarProps) => {
-  const {
-    size = 'lg',
-    widths = [1],
-    colors = [],
-  } = props
+  const { size = 'lg', widths = [1] } = props
   const normalizedValues = normalizeCharacters(widths)
 
   return (
     <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}>
-      {barValues(normalizedValues, colors)}
+      {barValues(normalizedValues)}
     </div>
   )
 }

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

@@ -5,26 +5,21 @@
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
-  border-radius: $large_bar;
-  overflow: auto;
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @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;
+    @for $i from 1 through length($bar_colors) {
+      &:nth-child(#{length($bar_colors)}n+#{$i}) {
+        background-color: nth($bar_colors, $i);
       }
     }
     &:first-child {
-      border-top-left-radius: $large_bar;
-      border-bottom-left-radius: $large_bar;
+      border-top-left-radius: 18px;
+      border-bottom-left-radius: 18px;
     }
     &:last-child {
-      border-top-right-radius: $large_bar;
-      border-bottom-right-radius: $large_bar;
+      border-top-right-radius: 18px;
+      border-bottom-right-radius: 18px;
     }
   }
   &[class*=_sm] {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -11,9 +11,7 @@ module Playbook
                   values: %w[lg sm],
                   default: "lg"
       prop :widths, type: Playbook::Props::NumberArray,
-                  default: [1]
-      prop :colors, type: Playbook::Props::Array,
-                  default: []
+                    default: [1]
 
       def classname
         generate_classname("pb_distribution_bar", size)
@@ -29,7 +27,6 @@ module Playbook
         {
           size: size,
           widths: widths,
-          colors: colors,
         }
       end
     end

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

@@ -2,10 +2,8 @@ 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,2 +1 @@
 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 { Body, Caption, Title } from '../../'
+import { Caption, Title } from '../../'
 
 export type FilterDescription = {
   [key: string]: ?string | boolean,
@@ -20,17 +20,6 @@ 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,44 +38,3 @@
     <% 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,98 +10,51 @@ 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' }]}
+    <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}
-      >
-        <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' }]}
+      <Select
+          blankSelection="Select One..."
+          label="Territory"
+          name="location"
+          options={options}
+          {...props}
+      />
+      <Flex
+          spacing="between"
           {...props}
       >
-        <TextInput
-            label="Example Text Field"
-            placeholder="Enter Text"
+        <Button
+            text="Apply"
             {...props}
         />
-
-        <Select
-            blankSelection="Select One..."
-            label="Example Collection Select"
-            name="Collection Select"
-            options={options}
+        <Button
+            text="Clear"
+            variant="secondary"
             {...props}
         />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              text="Apply"
-              {...props}
-          />
-          <Button
-              text="Clear"
-              variant="secondary"
-              {...props}
-          />
-        </Flex>
-      </Filter>
-    </>
+      </Flex>
+    </Filter>
   )
 }
 

data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb

@@ -6,24 +6,12 @@
       <div class="maskContainer">
         <div class="filters">
           <div class="left_gradient"></div>
-            <% object.filters.each do |filter| %>
-              <% if filter[:name]== "" %>
-                  <div>
-                    <%= pb_rails("body", props: {
-                      color: "light",
-                      padding_left: "xs",
-                      size: 4,
-                      tag:"h4",
-                      text: "No Filter Selected"
-                    }) %>
-                  </div>
-              <% else %>
-                  <div class="filter">
-                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
-                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
-                  </div>
-              <% end %>
-            <% end %>
+          <% object.filters.each do |filter| %>
+            <div class="filter">
+              <%= pb_rails("caption", props: { text: filter[:name]}) %>
+              <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+            </div>
+          <% end %>
           <div class="right_gradient"></div>
         </div>
       </div>
@@ -32,6 +20,7 @@
       <% end %>
     <% end %>
 
+
     <% if (object.template == "single" ) || (object.template == "sort_only") %>
       <% unless object.sort_menu == [{}] %>
         <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Error Message",
+  status: "error"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Items Successfully Moved",
+  status: "success"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items",
+  status: "neutral"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../..'
+
+const FixedConfirmationToastDark = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastDark

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items.\nClick here to generate report.",
+  status: "tip",
+}) %>