RubyGems - playbook_ui - Versions diffs - 7.14.0 → 7.16.0.pre.alpha3 - Mend

playbook_ui 7.14.0 → 7.16.0.pre.alpha3

Files changed (439) hide show

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

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

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

@@ -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', 'neutral']}
+            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 ADDED Viewed

	@@ -0,0 +1 @@
1	+ You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status 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 CHANGED Viewed

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

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

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

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

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

@@ -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>
+    </>
   )
 }

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

@@ -6,12 +6,24 @@
       <div class="maskContainer">
         <div class="filters">
           <div class="left_gradient"></div>
-          <% 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 %>
+            <% 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 %>
           <div class="right_gradient"></div>
         </div>
       </div>
@@ -20,7 +32,6 @@
       <% 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/_fixed_confirmation_toast.jsx CHANGED Viewed

@@ -31,11 +31,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   )
   const icon = iconMap[status]
+  const handleClick = () => {
+    toggleToast(!closeable)
+  }
   return (
     <If condition={showToast}>
       <div
           className={css}
-          onClick={closeable && (() => toggleToast(false))}
+          onClick={handleClick}
       >
         <If condition={icon}>
           <Icon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml CHANGED Viewed

@@ -4,13 +4,8 @@ examples:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
-  - fixed_confirmation_toast_dark: Dark
-  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
-  - fixed_confirmation_toast_dark: Dark
-  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js CHANGED Viewed

@@ -1,5 +1,3 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
-export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
-export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/{_fixed_confirmation_toast.html.erb → fixed_confirmation_toast.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbFixedConfirmationToast
-    class FixedConfirmationToast
-      include Playbook::Props
-      partial "pb_fixed_confirmation_toast/fixed_confirmation_toast"
+    class FixedConfirmationToast < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[success error neutral tip],
                     default: "neutral"

data/app/pb_kits/playbook/pb_flex/_flex.jsx CHANGED Viewed

@@ -7,35 +7,48 @@ import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  horizontal?: "left" | "center" | "right" | "stretch",
+  horizontal?: "left" | "center" | "right" | "stretch" | "none",
+  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
   reverse?: boolean,
-  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
+  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
+  rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
+  columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   wrap?: boolean,
 }
 const Flex = (props: FlexProps) => {
   const {
+    align = 'none',
     children,
     className,
     inline = false,
     horizontal = 'left',
+    justify = 'none',
     orientation = 'row',
     spacing = 'none',
+    gap = 'none',
+    rowGap = 'none',
+    columnGap = 'none',
     reverse = false,
     vertical = 'top',
     wrap = false,
   } = props
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
-  const horizontalClass =
-    horizontal !== undefined ? `justify_content_${horizontal}` : ''
-  const verticalClass = vertical !== undefined ? `align_items_${vertical}` : ''
+  const justifyClass =
+    justify !== 'none' ? `justify_content_${justify}` : `justify_content_${horizontal}`
+  const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
+  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
+  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
+  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   return (
@@ -44,12 +57,15 @@ const Flex = (props: FlexProps) => {
         buildCss(
           'pb_flex_kit',
           orientationClass,
-          horizontalClass,
-          verticalClass,
+          justifyClass,
+          alignClass,
           inlineClass,
-          spacingClass,
           reverseClass,
-          wrapClass
+          wrapClass,
+          spacingClass,
+          gapClass,
+          rowGapClass,
+          columnGapClass
         ),
         globalProps(props),
         className

data/app/pb_kits/playbook/pb_flex/_flex.scss CHANGED Viewed

@@ -1,4 +1,19 @@
 @import "flex_item";
+@import "../tokens/spacing";
+$gapSpaces:(
+  xs:   $space_xs,
+  sm:   $space_sm,
+  md:   $space_md,
+  lg:   $space_lg,
+  xl:   $space_xl
+);
+$gapTypes: (
+  gap: gap,
+  columnGap: column-gap,
+  rowGap: row-gap
+  );
 [class^=pb_flex_kit] {
   display: flex;
@@ -33,7 +48,8 @@
   // Alignment: Justify Content
   &[class*=justify_content_left],
-  &[class*=justify_content_top] {
+  &[class*=justify_content_top],
+  &[class*=justify_content_start] {
     justify-content: flex-start;
     &[class*=_reverse] {
       justify-content: flex-end;
@@ -41,7 +57,8 @@
   }
   &[class*=justify_content_right],
-  &[class*=justify_content_bottom] {
+  &[class*=justify_content_bottom],
+  &[class*=justify_content_end] {
     justify-content: flex-end;
      &[class*=_reverse] {
       justify-content: flex-start;
@@ -54,12 +71,14 @@
   // Alignment: Align Items
   &[class*=align_items_left],
-  &[class*=align_items_top] {
+  &[class*=align_items_top],
+  &[class*=align_items_start] {
     align-items: flex-start;
   }
   &[class*=align_items_right],
-  &[class*=align_items_bottom] {
+  &[class*=align_items_bottom],
+  &[class*=align_items_end] {
     align-items: flex-end;
   }
@@ -76,15 +95,29 @@
   }
   // Spacing
-  &[class*=spacing_around] {
+  &[class*=spacing_around],
+  &[class*=justify_content_around] {
     justify-content: space-around;
   }
-  &[class*=spacing_between] {
+  &[class*=spacing_between],
+  &[class*=justify_content_between] {
     justify-content: space-between;
   }
-  &[class*=spacing_evenly] {
+  &[class*=spacing_evenly],
+  &[class*=justify_content_evenly] {
     justify-content: space-evenly;
   }
+  //Gap
+  @each $gapType, $gapValue in $gapTypes{
+    @each $sizeName, $sizeValue in $gapSpaces {
+      &[class*=_#{$gapType}_#{$sizeName}]{
+        #{$gapValue}: $sizeValue;
+      }
+    }
+  }
 }