playbook_ui 13.3.0 → 13.4.0.pre.alpha.PLAY973Hash1181

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f58a60dbe08112a0b7b1cea36c7838386d7b7577809d4030a9b139b179df83d
-  data.tar.gz: 4bfb13a37f222531335ffa4b950026c1f0c7daeb2b33aecf3cf06fd02fa3684a
+  metadata.gz: 6d6551f1772a9fb33867a19c0226859cf491c986ccb503c2c7601588582d55c3
+  data.tar.gz: 86d1ebafb210c29139963d232e1c52d071ca862cde8aaa283420e756fc39aaab
 SHA512:
-  metadata.gz: 8554a0a8db1af2d8ca5e08f92f03354c68df334eeea9c8d33f103e825295fabc25e28c8a2466dadb381e4a11810d0059771ddeff2dd60505ba3f181f1af5e211
-  data.tar.gz: 06dd58fecce7e733a01e77d54cdad22b051f7ec5036e881726ecc283407d28451c98fce6b05b4649fa13bd7868d601d9d1767dc0cb52393f55352314177b7210
+  metadata.gz: 2aabad2326332a49ce487e0ab62d606c76c53bab395b3f04d3aa396342afca0ec57a941fb032da36a6eb13b1a73cff2a0e522256de643fb0bc3ea375f71a4088
+  data.tar.gz: 414ad28883507217cc57ed460ad78c83188d0b94d87a7ce8964409d89554af5260e5053b5ff02fbe71149bf3de1a933deff958d82d77e5192fa4db1e67813d53

data/app/pb_kits/playbook/_playbook.scss

@@ -112,5 +112,6 @@
 @import './utilities/focus';
 @import './utilities/border_radius';
 @import './utilities/hover';
+@import './utilities/text_align';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -18,14 +18,14 @@
     <% else %>
     <% if object.icon && !object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -29,6 +29,9 @@ module Playbook
                   values: ["sm", "md", "lg", nil],
                   default: nil
       prop :form, default: nil
+      prop :icon_font_family, type: Playbook::Props::Enum,
+                              values: %w[far fas fab fak],
+                              default: "far"
 
       def options
         {

data/app/pb_kits/playbook/pb_card/card.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :highlight, type: Playbook::Props::Hash,
+      prop :highlight, type: Playbook::Props::HashProp,
                        default: {}
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[div section footer header article aside main nav],

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :value
       prop :name
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -99,8 +99,12 @@ const CollapsibleMain = ({
   const mainSpacing = globalProps(props, { cursor })
 
   const handleCollapsibleClick = () => {
+    onClick && onClick();
+    //To disable default toggling behavior return "true" in the onClick()
+    const disableToggle = onClick && onClick();
+    if (disableToggle !== true) {
     toggle();
-    onClick && onClick()
+    }
   }
 
   return (

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -6,10 +6,10 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :stat_change, type: Playbook::Props::Hash,
+      prop :stat_change, type: Playbook::Props::HashProp,
                          default: {}
       prop :stat_label
-      prop :stat_value, type: Playbook::Props::Hash,
+      prop :stat_value, type: Playbook::Props::HashProp,
                         default: {}
 
       def formatted_stat_value

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

@@ -34,9 +34,9 @@ module Playbook
                     default: false
       prop :label, type: Playbook::Props::String,
                    default: "Date Picker"
-      prop :input_aria, type: Playbook::Props::Hash,
+      prop :input_aria, type: Playbook::Props::HashProp,
                         default: {}
-      prop :input_data, type: Playbook::Props::Hash,
+      prop :input_data, type: Playbook::Props::HashProp,
                         default: {}
       prop :max_date, type: Playbook::Props::String
       prop :min_date, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -18,7 +18,7 @@ module Playbook
       prop :full_width, type: Playbook::Props::Boolean,
                         default: false
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -121,30 +121,61 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-  const startDate = formatDate(newDate).getTime()
-  const endDate = new Date().getTime()
+  const today = new Date()
+  const formattedDate = formatDate(newDate)
+
+  const startDate = formattedDate.getTime()
+  const endDate = today.getTime()
   const elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
-
-  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
-
-  const elapsedTimeData = [
-    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
-    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
-    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
-    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
-    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
-    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
-    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
-    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
-    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
-    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
-  ];
-
-  for (const timeDate of elapsedTimeData) {
-    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
-      elapsedTimeString = timeDate.value;
-      break;
+
+  // For years/months, don't use elapsedTime due to rounding
+  const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
+  const differenceInMonths = () => {
+    let months = differenceInYears * 12
+    months -= formattedDate.getMonth()
+    months += today.getMonth()
+    return months
+  }
+
+  const FORTY_FIVE_SECONDS = 45000
+  const NINETY_SECONDS = 90000
+
+  const FORTY_FIVE_MINUTES = 2670000
+  const NINETY_MINUTES = 5400000
+
+  const TWENTY_TWO_HOURS = 77400000
+  const THIRTY_SIX_HOURS = 129600000
+
+  const TWENTY_SIX_DAYS = 2203200000
+  const FORTY_FIVE_DAYS = 3888000000
+
+  const TEN_AND_A_HALF_MONTHS = 27560000000
+
+  const MILLISECONDS_IN_A_MINUTE = 60000
+  const MILLISECONDS_IN_A_HOUR = 3600000
+  const MILLISECONDS_IN_A_DAY = 86400000
+
+  let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
+
+  // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
+  const intervals = [
+    { min: 0, max: FORTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
+    { min: FORTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
+    { min: NINETY_SECONDS, max: FORTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
+    { min: FORTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
+    { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
+    { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
+    { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
+    { min: TWENTY_SIX_DAYS, max: FORTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
+    { min: FORTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
+  ]
+
+  for (const interval of intervals) {
+    const { min, max, value } = interval
+
+    if (elapsedTime >= min && elapsedTime < max) {
+      elapsedTimeString = value
+      break
     }
   }
 

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbPassphrase
     class Passphrase < Playbook::KitBase
       prop :confirmation, type: Playbook::Props::Boolean, default: false
-      prop :input_props, type: Playbook::Props::Hash, default: {}
+      prop :input_props, type: Playbook::Props::HashProp, default: {}
       prop :label
       prop :show_tips_below, type: Playbook::Props::Enum,
                              values: %w[always xs sm md lg xl],

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -11,7 +11,7 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name, type: Playbook::Props::String,
                   default: "radio_name"

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,7 +6,7 @@ require "action_view"
 module Playbook
   module PbSelect
     class Select < Playbook::KitBase
-      prop :attributes, type: Playbook::Props::Hash,
+      prop :attributes, type: Playbook::Props::HashProp,
                         default: {}
       prop :blank_selection
       prop :compact, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -15,7 +15,7 @@ module Playbook
                    default: true
       prop :input_id, type: Playbook::Props::String
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name
       prop :text

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -23,7 +23,7 @@ module Playbook
                        default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -21,7 +21,7 @@ module Playbook
                       default: false
       prop :value
 
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       # Conditional rendering for input field

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -12,7 +12,7 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "radio"
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       def classname

data/app/pb_kits/playbook/pb_source/source.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :type, type: Playbook::Props::Enum,
                   values: %w[user retail inbound outbound prospecting events referral],
                   default: "inbound"
-      prop :user, type: Playbook::Props::Hash, default: {}
+      prop :user, type: Playbook::Props::HashProp, default: {}
 
       def type_text
         if type == "user" || (type == "referral" && user.present?)

data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx

@@ -28,7 +28,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -49,7 +49,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />
@@ -70,7 +70,7 @@ const TableOneAction = (props) => {
             <Button
                 onClick={() => alert('button clicked!')}
                 paddingLeft="none"
-                text="Tetriary Action"
+                text="Tertiary Action"
                 variant="link"
                 {...props}
             />

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -11,7 +11,7 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :label
       prop :name
@@ -19,7 +19,7 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :type, default: "text"
-      prop :validation, type: Playbook::Props::Hash,
+      prop :validation, type: Playbook::Props::HashProp,
                         default: {}
       prop :value
       prop :add_on, type: Playbook::Props::NestedProps,

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -5,7 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import DateTime from '../pb_kit/dateTime';
 
-
 import Caption from '../pb_caption/_caption'
 
 type TimestampProps = {
@@ -22,6 +21,7 @@ type TimestampProps = {
   showUser?: boolean,
   hideUpdated?: boolean,
   showTimezone?: boolean,
+  unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
 }
 
@@ -39,6 +39,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     showUser = false,
     hideUpdated = false,
     showTimezone = false,
+    unstyled = false,
     variant = 'default',
   } = props
 
@@ -85,7 +86,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
   }
 
-  const captionText = () => {
+  const timestampText = () => {
     switch (variant) {
     case 'updated':
       return formatUpdatedString()
@@ -103,11 +104,17 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
         className={classes}
     >
       <div className="pb_timestamp_kit">
-        <Caption
-            dark={dark}
-            size="xs"
-            text={captionText()}
-        />
+        {unstyled ? (
+          <div>
+            {timestampText()}
+          </div>
+        ) : (
+          <Caption
+              dark={dark}
+              size="xs"
+              text={timestampText()}
+          />
+        )}
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { size: "xs", text: "Basic unstyled example" }) %>
+
+<%= pb_rails("timestamp", props: {
+  timestamp: DateTime.now,
+  show_date: true,
+  align: "left",
+  unstyled: true,
+}) %>
+
+<br />
+
+<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
+
+<%= pb_rails("title", props: { size: 1 }) do %>
+  <%= pb_rails("timestamp", props: {
+    timestamp: DateTime.now,
+    show_date: true,
+    align: "left",
+    unstyled: true,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Caption, Timestamp, Title } from '../../'
+
+const TimestampUnstyled = (props) => {
+  return (
+    <>
+      <Caption size="xs"
+          text="Basic unstyled example"
+      />
+      <Timestamp
+          align="left"
+          showDate
+          timestamp={new Date()}
+          unstyled
+          {...props}
+      />
+
+      <br />
+
+      <Caption size="xs"
+          text="Example with wrapping typography kit"
+      />
+      <Title size={1}>
+        <Timestamp
+            align="left"
+            showDate
+            timestamp={new Date()}
+            unstyled
+            {...props}
+        />
+      </Title>
+    </>
+  )
+}
+
+export default TimestampUnstyled

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md

@@ -0,0 +1 @@
+For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Timestamp` kit and wrap it in any of our typography kits (`Title`, `Body`, etc.). This will allow the `Timestamp` kit to inherit any of our typography styles.

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

@@ -6,6 +6,7 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
+  - timestamp_unstyled: Unstyled
 
   react:
   - timestamp_default: Default
@@ -13,7 +14,8 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
-  
+  - timestamp_unstyled: Unstyled
+
   swift:
   - timestamp_default_swift: Default
   - timestamp_align_swift: Alignments

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

@@ -3,3 +3,4 @@ export { default as TimestampAlign } from './_timestamp_align.jsx'
 export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
 export { default as TimestampUpdated } from './_timestamp_updated.jsx'
 export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
+export { default as TimestampUnstyled } from './_timestamp_unstyled.jsx'

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -4,5 +4,9 @@
   data: object.data,
   class: object.classname) do %>
 
-  <%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
+  <% if object.unstyled %>
+    <div><%= object.timestamp_text %></div>
+  <% else %>
+    <%= pb_rails("caption", props: { text: object.timestamp_text, size: 'xs', dark: object.dark }) %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :show_user, type: Playbook::Props::Boolean,
                        default: false
       prop :timezone, default: "America/New_York"
+      prop :unstyled, type: Playbook::Props::Boolean,
+                      default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default elapsed updated],
                      default: "default"
@@ -29,7 +31,7 @@ module Playbook
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
 
-      def caption_text
+      def timestamp_text
         case variant
         when "updated"
           format_updated_string

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

@@ -27,10 +27,6 @@
     @include title_colors;
   }
 
-  &.dark {
-    @include pb_title_dark;
-  }
-
   &[class*=_thin] {
     @include pb_title_thin;
   }
@@ -56,4 +52,7 @@
         }
     }
   }
+  &.dark {
+    @include pb_title_dark;
+  }
 }

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -5,7 +5,7 @@ require "action_view"
 module Playbook
   module PbToggle
     class Toggle < Playbook::KitBase
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       prop :checked, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -19,7 +19,7 @@ module Playbook
       prop :name
       prop :options, type: Playbook::Props::HashArray,
                      default: []
-      prop :input_options, type: Playbook::Props::Hash,
+      prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
 
       prop :is_multi, type: Playbook::Props::Boolean,

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

@@ -4,7 +4,7 @@ $space_sm:    16px !default;
 $space_md:    24px !default;
 $space_lg:    32px !default;
 $space_xl:    40px !default;
-$spaces:(
+$spaces: (
   space_xxs:  $space_xxs,
   space_xs:   $space_xs,
   space_sm:   $space_sm,

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

@@ -0,0 +1,18 @@
+$text_align_start:          start !default;
+$text_align_end:            end !default;
+$text_align_left:           left !default;
+$text_align_right:          right !default;
+$text_align_center:         center !default;
+$text_align_justify:        justify !default;
+$text_align_justify_all:    justify-all !default;
+$text_align_match_parent:   match-parent !default;
+$text_align: (
+  start:         $text_align_start,
+  end:           $text_align_end,
+  left:          $text_align_left,
+  right:         $text_align_right,
+  center:        $text_align_center,
+  justify:       $text_align_justify,
+  justify_all:   $text_align_justify_all,
+  match_parent:  $text_align_match_parent
+);

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

@@ -6,6 +6,10 @@
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
+      .hover_color_#{$name}:hover {
+        color: $color !important;
+        transition: color $transition-speed ease;
+      }
     }
   }
   

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

@@ -23,3 +23,7 @@
 .max_width_xl {
   max-width: 1140px;
 }
+
+.max_width_xxl {
+  max-width: 1320px;
+}