RubyGems - playbook_ui - Versions diffs - 10.18.2 → 10.20.0 - Mend

playbook_ui 10.18.2 → 10.20.0

Files changed (93) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e3cbc0cd92e9520cc384a83a63b0c7929db90e80ee3c14545f4cb59cea7e908
-  data.tar.gz: 3dbd612141159027a9da789d6a371cc8e8f2dccb9eaabff33f4c4ddea0c1e473
+  metadata.gz: 58801952abf6ff0d0a76aa1af436b9baa6e360c543051398d43e972f2fdf3268
+  data.tar.gz: f693eaafecd9f29945efbdf72eccd26e762c40a1887e8744e62e895bfae300ca
 SHA512:
-  metadata.gz: e5a15bb11978d3ac1e8bc98c067cfc39ca9012e8e995e758d5debe9073db0dad4b63b2222c6bf687bc739c5dfaca5e249e12b2b89345c711284000d177f00ea7
-  data.tar.gz: f5f8ad98e52dde53cd3c634757aa6ffeb9c9e6d53a4081c3861e839d1ab6b210d26dd63691be86d9c946cc7c6b4760f006b772e5bb3924be97de70d19f320ac1
+  metadata.gz: f29aa234d6d47e8cd9c851eab5c17b06fe11349c23c09eef7fa6e0e21aad7a97e7e5fafc44b1baeed7ae679a57ae6c88d5049a70dcdec4c1dd3a336c4a31e87f
+  data.tar.gz: 30bd72269287a8da66a40d0181000ce5d679675a28af2897f739d0b147b7089333e64da5e55035e88d1b8b1b25974ad966f8d9f00853dd6e82bb6160141ec050

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -98,4 +98,5 @@
 @import './utilities/positioning';
 @import './utilities/number_spacing';
 @import './utilities/shadow';
+@import './utilities/line_height';
 @import './utilities/display';

data/app/pb_kits/playbook/pb_body/_body.jsx CHANGED Viewed

@@ -12,7 +12,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color?: 'default' | 'light' | 'lighter',
+  color?: 'default' | 'light' | 'lighter' | 'link',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,
@@ -21,6 +21,7 @@ type BodyProps = {
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
+  variant: null | 'link',
 }
 const Body = (props: BodyProps) => {
@@ -36,12 +37,13 @@ const Body = (props: BodyProps) => {
     status,
     tag = 'div',
     text,
+    variant = null,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_body_kit', color, status),
+    buildCss('pb_body_kit', color, variant, status),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_body/_body_mixins.scss CHANGED Viewed

@@ -6,6 +6,7 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
+  link:           $primary,
 );
 $pb_dark_body_colors: (
@@ -63,4 +64,4 @@ $pb_body_status: (
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_body/body.rb CHANGED Viewed

@@ -4,7 +4,7 @@ module Playbook
   module PbBody
     class Body < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter],
+                   values: %w[default light lighter link],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],

data/app/pb_kits/playbook/pb_body/body.test.js ADDED Viewed

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

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb CHANGED Viewed

@@ -12,6 +12,11 @@
   color: "lighter"
 }) %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Link)",
+  color: "link"
+}) %>
 <%= pb_rails("body", props: {
   text: "I am a body kit (Status: negative)",
   status: "negative"

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED Viewed

@@ -18,6 +18,11 @@ const BodyLight = (props) => {
           text="I am a body kit (Lighter)"
           {...props}
       />
+      <Body
+          color="link"
+          text="I am a body kit (Link)"
+          {...props}
+      />
       <Body
           status="negative"
           text="I am a body kit (Status: negative)"

data/app/pb_kits/playbook/pb_body/docs/_body_light.md ADDED Viewed

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses `default` color by default, and can be replaced with colors below:
+* `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_caption/_caption.jsx CHANGED Viewed

@@ -3,26 +3,27 @@
 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 CaptionProps = {
   aria?: object,
-  className?: string,
   children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-  color?: "default" | "link" | "light",
 };
 const Caption = (props: CaptionProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
-    className,
     children,
+    className,
     color,
     data = {},
     id,

data/app/pb_kits/playbook/pb_caption/_caption.scss CHANGED Viewed

@@ -3,6 +3,9 @@
 [class^="pb_caption_kit"] {
   @include caption;
+  &[class*="_link"] {
+    color: $primary;
+  }
   &[class^="pb_caption_kit_lg"] {
     @include caption_lg;
@@ -10,26 +13,19 @@
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
-    &[class*="_link"] {
-      color: $primary;}
-  }
-  &[class*="light"] {
-    color: $text_lt_light;
   }
-  &[class*="default"] {
-    color: $text_lt_default;
-  }
   &[class*="link"] {
     color: $primary;
   }
-  &[class*="dark"] {
-    @each $dark_color_name, $dark_color_value in $pb_dark_caption_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
-      @include caption_color($dark_color_value);
+  @include pb_caption_kit_colors;
+  &.dark {
+    @include caption_dark;
+    @each $name, $color in $pb_dark_caption_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
       }
     }
   }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss CHANGED Viewed

@@ -4,13 +4,16 @@
 $pb_caption_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
-  link:           $primary-action,
+  link:           $primary,
+  lighter:        $text_lt_lighter,
+  success:        $success,
+  error:          $error,
 );
 $pb_dark_caption_colors: (
-  default:        #fff,
+  default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $primary-action,
+  link:           $primary,
 );
@@ -39,3 +42,10 @@ $pb_dark_caption_colors: (
 @mixin caption_dark {
   color: $text_dk_light;
 }
+@mixin pb_caption_kit_colors {
+  @each $name, $color in $pb_caption_colors {
+    &[class*="#{$name}"] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_caption/caption.rb CHANGED Viewed

@@ -12,10 +12,11 @@ module Playbook
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: [nil, "link"],
-                     default: nil
+                     default: nil,
+                     deprecated: true
       prop :color, type: Playbook::Props::Enum,
-                   values: [nil, "light", "default", "link"],
+                   values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
       def classname

data/app/pb_kits/playbook/pb_caption/caption.test.js ADDED Viewed

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

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("caption", props: { text: "Test colors" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Caption } from '../../'
+const CaptionColors = (props) => {
+  return (
+    <div>
+      <Caption
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="success"
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="link"
+          text="Test colors"
+          {...props}
+      />
+    </div>
+  )
+}
+export default CaptionColors

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md ADDED Viewed

@@ -0,0 +1,6 @@
+##### Prop
+Caption kit will use `light` color by default. Other available colors are:
+* `default` `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_caption/docs/example.yml CHANGED Viewed

@@ -2,9 +2,9 @@ examples:
   rails:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors
   react:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors

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

@@ -1,4 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
-export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionColors } from './_caption_colors.jsx'
 export { default as CaptionBlock } from './_caption_block.jsx'
-export { default as CaptionExample } from './_caption_example.jsx'

data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED Viewed

@@ -107,7 +107,7 @@ const PbDate = (props: PbDateProps) => {
               <Icon
                   fixedWidth
                   icon="calendar-alt"
-                  size="xs"
+                  size="sm"
               />
             </Caption>
           </If>

data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED Viewed

@@ -42,7 +42,7 @@
       <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx CHANGED Viewed

@@ -40,6 +40,7 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
+  plugins?: Boolean,
   type?: String,
   yearRange?: Array,
 }
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps) => {
     onChange = () => {},
     pickerId,
     placeholder = 'Select Date',
+    plugins = false,
     yearRange = [ 1900, 2100 ],
   } = props
@@ -100,6 +102,7 @@ const DatePicker = (props: DatePickerProps) => {
       mode: mode,
       onChange: onChange,
       pickerId: pickerId,
+      plugins: plugins,
       yearRange: yearRange,
     })
   }, [])

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss CHANGED Viewed

@@ -3,6 +3,7 @@
 @import "../tokens/colors";
 @import "./sass_partials/flatpickr_styles";
 @import "./sass_partials/inline_styles";
+@import "./sass_partials/month_and_year_styles";
 [class^=pb_date_picker_kit] {
   .input_wrapper {

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb CHANGED Viewed

@@ -41,6 +41,8 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
+      prop :plugins, type: Playbook::Props::Boolean,
+                     default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -64,6 +66,7 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
+          plugins: plugins,
           required: required,
           yearRange: year_range,
         }.to_json.html_safe

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr'
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 const datePickerHelper = (config) => {
   const {
@@ -13,6 +14,7 @@ const datePickerHelper = (config) => {
     mode,
     onChange = () => {},
     pickerId,
+    plugins,
     required,
     yearRange,
   } = config
@@ -50,6 +52,10 @@ const datePickerHelper = (config) => {
     }
   }
+  const setMonthAndYearPlugin = () => (
+    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
+  )
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -97,6 +103,7 @@ const datePickerHelper = (config) => {
     onYearChange: [() => {
       yearChangeHook()
     }],
+    plugins: setMonthAndYearPlugin(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -153,8 +160,10 @@ const datePickerHelper = (config) => {
   }
   // Adding dropdown icons to year and month selects
-  picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  if (picker.monthElements[0].parentElement) {
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  }
   // Remove readonly attribute for validation and or text input
   if (allowInput){

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  plugins: true,
+  picker_id: "disabled_date"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+const DatePickerMonthAndYear = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="disabled-date"
+          plugins
+          {...props}
+      />
+    </div>
+  )
+}
+export default DatePickerMonthAndYear

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default month&year plugin is disabled. To activate it set `plugins` prop to `true`. If you're using React just pass a `plugins` prop to the kit.

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

@@ -16,6 +16,7 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only
   react:
@@ -34,3 +35,4 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only

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

@@ -13,3 +13,4 @@ export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
 export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
+export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss ADDED Viewed

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+.numInput {
+  border-left: none !important;
+}
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}