playbook_ui 10.17.0 → 10.19.0.pre.lightbox

data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("nav", props: {variant: "subtle"}) do %>
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
   <%= pb_rails("nav/item", props: { text: "Overview", link: "#" }) %>
   <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true  }) %>
   <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#" }) %>

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

@@ -8,8 +8,10 @@ examples:
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
+  - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
+  - bold_horizontal_nav: Bold Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -23,8 +25,10 @@ examples:
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
+  - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
+  - bold_horizontal_nav: Bold Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -11,3 +11,5 @@ export { default as WithIconsNav } from './_with_icons_nav.jsx'
 export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
 export { default as WithImgNav } from './_with_img_nav.jsx'
 export { default as NewTab } from './_new_tab.jsx'
+export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
+export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -9,7 +9,7 @@ module Playbook
                          values: %w[vertical horizontal],
                          default: "vertical"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[normal subtle],
+                     values: %w[normal subtle bold],
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -31,6 +31,9 @@ const PopoverScrollHeight = (props) => {
         maxHeight="150px"
         maxWidth="240px"
         offset
+        padding="md"
+        paddingBottom="sm"
+        paddingTop="sm"
         placement="top"
         reference={popoverTrigger}
         shouldClosePopover={handleShouldClosePopover}

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -36,6 +36,7 @@ const PopoverZIndex = (props) => {
       <PbReactPopover
           closeOnClick="outside"
           offset
+          padding="sm"
           placement="top"
           reference={popoverTrigger}
           shouldClosePopover={handleShouldClosePopover}

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -88,6 +88,56 @@
         border-color: $error;
       }
     }
+    .text_input_wrapper_add_on {
+      .add-on {
+        &-right {
+          .add-on-card {
+            border: 1px solid $error;
+            border-left: 0;
+          }
+        }
+        &-left {
+          .add-on-card {
+            border: 1px solid $error;
+            border-right: 0;
+          }
+        }
+      }
+      .border {
+        &_left {
+          &_on {
+            .card-right-aligned {
+              border-left: 0;
+            }
+          }
+          &_off {
+            .card-right-aligned {
+              border-left: 0;
+            }
+            .text_input {
+              border-right: 0;
+              padding-right: 0;
+            }
+          }
+        }
+        &_right {
+          &_on {
+            .card-left-aligned {
+              border-right: 0;
+            }
+          }
+          &_off {
+            .card-left-aligned {
+              border-right: 0;
+            }
+            .text_input {
+              border-left: 0;
+              padding-left: 0;
+            }
+          }
+        }
+      }
+    }
   }
   &.inline {
     .text_input_wrapper input::placeholder,
@@ -132,15 +182,15 @@
     }
     &-left {
       .text_input {
-        border-top-left-radius: 0 !important;
-        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
       }
     }
 
     &-right {
       .text_input{
-        border-top-right-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
   }
@@ -148,15 +198,14 @@
     background-color: $focus_input_dark;
     border-width: 0px;
   }
-
   .card-left-aligned {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .card-right-aligned {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
   .border {
@@ -165,8 +214,8 @@
         border-right: 0;
       }
       .text_input {
-        border-left: 0 !important;
-        padding-left: 0 !important;
+        border-left: 0;
+        padding-left: 0;
       }
     }
     &_left_on {
@@ -184,8 +233,8 @@
         border-left: 0;
       }
       .text_input {
-        border-right: 0 !important;
-        padding-right: 0 !important;
+        border-right: 0;
+        padding-right: 0;
       }
     }
   }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -1,2 +1,21 @@
-<%= pb_rails("text_input", props: { error: "Please enter a valid email address", label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
-<%= pb_rails("text_input", props: { label: "Confirm Email Address", type: "email", placeholder: "Confirm email address" }) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  error: "Please enter a valid email address",
+  label: "Email Address",
+  placeholder: "Enter email address",
+  type: "email"
+}) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  label: "Confirm Email Address",
+  placeholder: "Confirm email address",
+  type: "email"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import {
-  TextInput,
-} from '../..'
+
+import TextInput from '../_text_input'
 
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -12,6 +11,7 @@ const TextInputError = (props) => {
   return (
     <div>
       <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
           error="Please enter a valid email address"
           label="Email Address"
           onChange={handleUpdateEmail}
@@ -20,6 +20,15 @@ const TextInputError = (props) => {
           value={email}
           {...props}
       />
+      <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
+          label="Confirm Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Confirm email address"
+          type="email"
+          value={email}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -3,12 +3,13 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 type TitleProps = {
   aria?: object,
   children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: 1 | 2 | 3 | 4,
@@ -18,24 +19,25 @@ type TitleProps = {
 }
 
 const Title = (props: TitleProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,
     className,
+    color,
     data = {},
     id,
     size = 3,
     tag = 'h3',
     text,
-    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, variant),
+    buildCss('pb_title_kit', size, color),
     globalProps(props),
-    className
+    className,
   )
   const Tag = `${tag}`
 

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,26 +1,26 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import './title_mixin';
 
 [class^=pb_title_kit]{
   &[class*=_1] {
     @include pb_title_1;
+    @include title_colors;
   }
 
   &[class*=_2] {
     @include pb_title_2;
+    @include title_colors;
   }
 
   &[class*=_3] {
     @include pb_title_3;
+    @include title_colors;
   }
 
   &[class*=_4] {
     @include pb_title_4;
-
-    &[class*=_link]  {
-      color: $primary;
-    }
-
+    @include title_colors;
   }
 
   &.dark {

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -1 +1,18 @@
 @import "../tokens/titles";
+
+$pb_title_colors: (
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  success: $success,
+  error: $error,
+  link: $primary
+);
+
+@mixin title_colors {
+  @each $name, $color in $pb_title_colors {
+    &[class*=_#{$name}] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> 
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleColors = (props) => {
+  return (
+    <div>
+      <Title
+          text="Default Color"
+          {...props}
+      />
+      <Title
+          color="link"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="success"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="error"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleColors

data/app/pb_kits/playbook/pb_title/docs/_title_colors.md

@@ -0,0 +1,6 @@
+##### Prop
+Title kit will use `default` color by default. Other available colors are:
+
+*`light` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -1,4 +1,7 @@
-<%= pb_rails("title", props: { text: "Default Title" }) %>
+<%= pb_rails("title", props: {
+})  do %>
+    Default Title
+<% end %>
 
 <br/>
 

data/app/pb_kits/playbook/pb_title/docs/_title_light.md

@@ -0,0 +1,3 @@
+##### Prop
+Title kit will use `h3` tag by default, and `size 3` as well. 
+Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.

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

@@ -1,8 +1,8 @@
 examples:
   rails:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_colors: Colors
 
   react:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_colors: Colors

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

@@ -1,2 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
-export { default as TitleVariants } from './_title_variants.jsx'
+export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,5 +1,6 @@
-<%= content_tag(object.tag, object.text,
+<%= content_tag(object.tag,
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) %>
+    class: object.classname) do %><%= content.presence || object.text %><% end %>
+    

data/app/pb_kits/playbook/pb_title/title.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbTitle
     class Title < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: [nil, "default", "light", "lighter", "success", "error", "link"],
+                   default: nil
       prop :size, type: Playbook::Props::Enum,
                   values: [1, 2, 3, 4],
                   default: 3
@@ -10,12 +13,10 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
       prop :text
-      prop :variant, type: Playbook::Props::Enum,
-                     values: [nil, "link"],
-                     default: nil
+      prop :variant, deprecated: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant)
+        generate_classname("pb_title_kit", size, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Title from './_title'
+
+test('returns namespaced class name', () => {
+  render(
+    <Title
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_3')
+})
+
+test('with colors', () => {
+  render(
+    <Title
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_3_success')
+})

data/app/pb_kits/playbook/playbook-doc.js

@@ -51,6 +51,7 @@ import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
 import * as LegendDocs from 'pb_legend/docs'
+import * as Lightbox from 'pb_lightbox/docs'
 import * as LineGraphDocs from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
@@ -145,6 +146,7 @@ WebpackerReact.setup({
   ...LabelValue,
   ...Layout,
   ...LegendDocs,
+  ...Lightbox,
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -10,25 +10,14 @@ import solidGauge from 'highcharts/modules/solid-gauge'
 pie(Highcharts)
 
 // Map Data Color String Props to our SCSS Variables
+
 const mapColors = (array) => {
+  const regex = /(data)\-[1-8]/ //eslint-disable-line
+
   const newArray = array.map((item) => {
-    return item == 'data-1'
-      ? `${colors.data_1}`
-      : item == 'data-2'
-        ? `${colors.data_2}`
-        : item == 'data-3'
-          ? `${colors.data_3}`
-          : item == 'data-4'
-            ? `${colors.data_4}`
-            : item == 'data-5'
-              ? `${colors.data_5}`
-              : item == 'data-6'
-                ? `${colors.data_6}`
-                : item == 'data-7'
-                  ? `${colors.data_7}`
-                  : item == 'data-8'
-                    ? `${colors.data_8}`
-                    : ''
+    return regex.test(item)
+      ? `${colors[`data_${item[item.length - 1]}`]}`
+      : item
   })
   return newArray
 }
@@ -72,13 +61,13 @@ class pbChart {
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart(options)
     } else if (this.options.type == 'gauge') {
-      this.setupGauge()
+      this.setupGauge(options)
     } else {
       this.setupChart(options)
     }
   }
 
-  setupGauge() {
+  setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
     Highcharts.setOptions(highchartsTheme)
@@ -128,19 +117,21 @@ class pbChart {
         pointFormat: this.defaults.tooltipHtml,
         followPointer: true,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           animation: !this.defaults.disableAnimation,
         },
         solidgauge: {
+          borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
           dataLabels: {
             format: `<span class="prefix">${this.defaults.prefix}</span>` +
             '<span class="fix">{y:,f}</span>' +
             `<span class="suffix">${this.defaults.suffix}</span>`,
-          },
-        },
+          }        },
       },
-    })
+    },
+    )
     document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
     if (document.querySelector('.prefix')) {
       document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -12,6 +12,7 @@ $red:                 #FF2229;
 $yellow:              #F9BB00;
 $green:               #00CA74;
 $orange:              #FD804C;
+$default:             #93a8b8;
 $colors: (
   royal:              $royal,
   purple:             $purple,
@@ -19,7 +20,8 @@ $colors: (
   red:                $red,
   yellow:             $yellow,
   green:              $green,
-  orange:             $orange
+  orange:             $orange,
+  default:            $default,
 );
 
 /* Specialty Gradient -----------------*/

data/app/pb_kits/playbook/utilities/_cursor.scss

@@ -0,0 +1,3 @@
+.cursor_pointer {
+  cursor: pointer;
+}

data/app/pb_kits/playbook/utilities/_display.scss

@@ -0,0 +1,23 @@
+.display_block {
+    display: block;
+}
+
+.display_inline_block {
+    display: inline-block;
+}
+
+.display_inline {
+    display: inline;
+}
+
+.display_flex {
+    display: flex;
+}
+
+.display_inline_flex {
+    display: inline-flex;
+}
+
+.display_hidden {
+    display: none;
+}

data/app/pb_kits/playbook/utilities/_line_height.scss

@@ -0,0 +1,11 @@
+@import "../tokens/exports/line_height";
+
+@mixin line-height-classes($line-height-list) {
+  @each $name, $line-height in $line-height-list {
+    [class*=pb_] .line_height_#{$name} {
+      line-height: $line-height;
+    }
+  }
+}
+@include line-height-classes($line_height);
+ 

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -63,10 +63,28 @@ const shadowProps = ({ shadow }) => {
   return css
 }
 
+const lineHeightProps = ({ lineHeight }) => {
+  let css = ''
+  css += lineHeight ? `line_height_${lineHeight} ` : ''
+  return css
+}
+
+const displayProps = ({ display }) => {
+  let css = ''
+  css += display ? `display_${display} ` : ''
+  return css
+}
+
+const cursorProps = ({ cursor }) => {
+  let css = ''
+  css += cursor ? `cursor_${cursor} ` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {