playbook_ui 9.16.0 → 9.17.0.pre.decouple.website2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7050d4d194de8b32acc2659551920be5e31cb45dfff5b86d2f46a7c6b094f83f
-  data.tar.gz: 0ad0267ebc499fae6d34d06ec43563256749aeea8bc702ce208680bce6bc38ed
+  metadata.gz: 50491254a560f34bc2528feebb01b4e696045328077c3aafbec2f2b8142189b6
+  data.tar.gz: 5280bde02d6d5c84660d91e1d10e4a42f23a1f80695cdb3e375ccc97aa36a6c7
 SHA512:
-  metadata.gz: fd7c4f3864697c6f210cde9ebc9ca2fe430a1e77d58ba1a8fc7381fd084d6653139cbf9a54d4a9ec7b7eaef63cc3d9a6f5de4a3d38e546b821bd81eb8c30994d
-  data.tar.gz: a30f9a1477b35efa3d2d2b5ba93370c850e8fb4b7d87514ecadca995fe24be1c5d733b2cee0e040a1a65a3667b401c8b7fce846929f61c32f6cdaaaa88445a3f
+  metadata.gz: c5e4081a4115206dbd90913acf28543305864764b2f50024d37ca5abe639427fdae1b0070e35c82420cdbfb9e40273258a8187b8ee0b4f350c7e27af1eecf0d5
+  data.tar.gz: cfc39f72a4453eea6906f284cee3bc7840e75821189d5a48217eedd3abbb5dd8197fa2702a92a2b54a47016f33165c411385289463c8b669de32dbb18fdaef4c

data/Rakefile

@@ -1,15 +1,11 @@
+# frozen_string_literal: true
+
 begin
-  require 'bundler/setup'
+  require "bundler/setup"
 rescue LoadError
-  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
 end
 
-APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
-load 'rails/tasks/engine.rake'
-load 'rails/tasks/statistics.rake'
-
-require 'bundler/gem_tasks'
+require "bundler/gem_tasks"
 
 Dir["private/tasks/*.rake"].each(&method(:load))
-
-task default: :test

data/app/pb_kits/playbook/_reset.scss

@@ -0,0 +1,42 @@
+@import "./tokens/typography";
+@import "./tokens/colors";
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: $font_family_base;
+  font-size: $font_base;
+  line-height: 1.5;
+  background-color: $bg-light;
+  height: 100%;
+  letter-spacing: $lspace_normal;
+  font-weight: $regular;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: $charcoal;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; // REMOVE AFTER STYLED
+}
+
+a {
+  text-decoration: none;
+  color: $primary;
+}

data/app/pb_kits/playbook/index.js

@@ -4,103 +4,103 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export Avatar from './pb_avatar/_avatar.jsx'
-export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
-export Background from './pb_background/_background.jsx'
-export Badge from './pb_badge/_badge.jsx'
-export BarGraph from './pb_bar_graph/_bar_graph.jsx'
-export Body from './pb_body/_body.jsx'
-export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs.jsx'
-export Button from './pb_button/_button.jsx'
-export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
-export Caption from './pb_caption/_caption.jsx'
-export Card from './pb_card/_card.jsx'
-export Checkbox from './pb_checkbox/_checkbox.jsx'
-export CircleChart from './pb_circle_chart/_circle_chart.jsx'
-export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
-export Collapsible from './pb_collapsible/_collapsible.jsx'
-export Contact from './pb_contact/_contact.jsx'
-export Currency from './pb_currency/_currency.jsx'
-export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
-export Date from './pb_date/_date.jsx'
-export DatePicker from './pb_date_picker/_date_picker.jsx'
-export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
-export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
-export DateStacked from './pb_date_stacked/_date_stacked.jsx'
-export DateTime from './pb_date_time/_date_time.jsx'
-export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked.jsx'
-export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
-export Dialog from './pb_dialog/_dialog.jsx'
-export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
-export FileUpload from './pb_file_upload/_file_upload.jsx'
-export Filter from './pb_filter/_filter.jsx'
-export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
-export Flex from './pb_flex/_flex.jsx'
-export FlexItem from './pb_flex/_flex_item.jsx'
-export FormGroup from './pb_form_group/_form_group.jsx'
-export FormPill from './pb_form_pill/_form_pill.jsx'
-export Gauge from './pb_gauge/_gauge.jsx'
-export Hashtag from './pb_hashtag/_hashtag.jsx'
-export Highlight from './pb_highlight/_highlight.jsx'
-export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
-export Icon from './pb_icon/_icon.jsx'
-export IconCircle from './pb_icon_circle/_icon_circle.jsx'
-export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
-export IconValue from './pb_icon_value/_icon_value.jsx'
-export Image from './pb_image/_image.jsx'
-export LabelPill from './pb_label_pill/_label_pill.jsx'
-export LabelValue from './pb_label_value/_label_value.jsx'
-export Layout from './pb_layout/_layout.jsx'
-export Legend from './pb_legend/_legend.jsx'
-export LineGraph from './pb_line_graph/_line_graph.jsx'
-export List from './pb_list/_list.jsx'
-export ListItem from './pb_list/_list_item.jsx'
-export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
-export Message from './pb_message/_message.jsx'
-export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
-export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'
-export Nav from './pb_nav/_nav.jsx'
-export NavItem from './pb_nav/_item.jsx'
-export OnlineStatus from './pb_online_status/_online_status.jsx'
-export Passphrase from './pb_passphrase/_passphrase.jsx'
-export PbReactPopover from './pb_popover/_popover.jsx'
-export Person from './pb_person/_person.jsx'
-export PersonContact from './pb_person_contact/_person_contact.jsx'
-export Pill from './pb_pill/_pill.jsx'
-export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
-export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
-export ProgressStep from './pb_progress_step/_progress_step.jsx'
-export ProgressStepItem from './pb_progress_step/_progress_step_item.jsx'
-export Radio from './pb_radio/_radio.jsx'
-export RichTextEditor from './pb_rich_text_editor/_rich_text_editor.jsx'
-export SectionSeparator from './pb_section_separator/_section_separator.jsx'
-export Select from './pb_select/_select.jsx'
-export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
-export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
-export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
-export SelectableList from './pb_selectable_list/_selectable_list.jsx'
-export SelectableListItem from './pb_selectable_list/_item.jsx'
-export Source from './pb_source/_source.jsx'
-export StarRating from './pb_star_rating/_star_rating.jsx'
-export StatChange from './pb_stat_change/_stat_change.jsx'
-export StatValue from './pb_stat_value/_stat_value.jsx'
-export Table from './pb_table/_table.jsx'
-export TableRow from './pb_table/_table_row.jsx'
-export TextInput from './pb_text_input/_text_input.jsx'
-export Textarea from './pb_textarea/_textarea.jsx'
-export Time from './pb_time/_time.jsx'
-export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
-export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
-export Timeline from './pb_timeline/_timeline.jsx'
-export Timestamp from './pb_timestamp/_timestamp.jsx'
-export Title from './pb_title/_title.jsx'
-export TitleCount from './pb_title_count/_title_count.jsx'
-export TitleDetail from './pb_title_detail/_title_detail.jsx'
-export Toggle from './pb_toggle/_toggle.jsx'
-export Typeahead from './pb_typeahead/_typeahead.jsx'
-export User from './pb_user/_user.jsx'
-export UserBadge from './pb_user_badge/_user_badge.jsx'
-export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
+export Avatar from './pb_avatar/_avatar'
+export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button'
+export Background from './pb_background/_background'
+export Badge from './pb_badge/_badge'
+export BarGraph from './pb_bar_graph/_bar_graph'
+export Body from './pb_body/_body'
+export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs'
+export Button from './pb_button/_button'
+export ButtonToolbar from './pb_button_toolbar/_button_toolbar'
+export Caption from './pb_caption/_caption'
+export Card from './pb_card/_card'
+export Checkbox from './pb_checkbox/_checkbox'
+export CircleChart from './pb_circle_chart/_circle_chart'
+export CircleIconButton from './pb_circle_icon_button/_circle_icon_button'
+export Collapsible from './pb_collapsible/_collapsible'
+export Contact from './pb_contact/_contact'
+export Currency from './pb_currency/_currency'
+export DashboardValue from './pb_dashboard_value/_dashboard_value'
+export Date from './pb_date/_date'
+export DatePicker from './pb_date_picker/_date_picker'
+export DateRangeInline from './pb_date_range_inline/_date_range_inline'
+export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked'
+export DateStacked from './pb_date_stacked/_date_stacked'
+export DateTime from './pb_date_time/_date_time'
+export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked'
+export DateYearStacked from './pb_date_year_stacked/_date_year_stacked'
+export Dialog from './pb_dialog/_dialog'
+export DistributionBar from './pb_distribution_bar/_distribution_bar'
+export FileUpload from './pb_file_upload/_file_upload'
+export Filter from './pb_filter/_filter'
+export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+export Flex from './pb_flex/_flex'
+export FlexItem from './pb_flex/_flex_item'
+export FormGroup from './pb_form_group/_form_group'
+export FormPill from './pb_form_pill/_form_pill'
+export Gauge from './pb_gauge/_gauge'
+export Hashtag from './pb_hashtag/_hashtag'
+export Highlight from './pb_highlight/_highlight'
+export HomeAddressStreet from './pb_home_address_street/_home_address_street'
+export Icon from './pb_icon/_icon'
+export IconCircle from './pb_icon_circle/_icon_circle'
+export IconStatValue from './pb_icon_stat_value/_icon_stat_value'
+export IconValue from './pb_icon_value/_icon_value'
+export Image from './pb_image/_image'
+export LabelPill from './pb_label_pill/_label_pill'
+export LabelValue from './pb_label_value/_label_value'
+export Layout from './pb_layout/_layout'
+export Legend from './pb_legend/_legend'
+export LineGraph from './pb_line_graph/_line_graph'
+export List from './pb_list/_list'
+export ListItem from './pb_list/_list_item'
+export LoadingInline from './pb_loading_inline/_loading_inline'
+export Message from './pb_message/_message'
+export MultipleUsers from './pb_multiple_users/_multiple_users'
+export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked'
+export Nav from './pb_nav/_nav'
+export NavItem from './pb_nav/_item'
+export OnlineStatus from './pb_online_status/_online_status'
+export Passphrase from './pb_passphrase/_passphrase'
+export PbReactPopover from './pb_popover/_popover'
+export Person from './pb_person/_person'
+export PersonContact from './pb_person_contact/_person_contact'
+export Pill from './pb_pill/_pill'
+export ProgressPills from './pb_progress_pills/_progress_pills'
+export ProgressSimple from './pb_progress_simple/_progress_simple'
+export ProgressStep from './pb_progress_step/_progress_step'
+export ProgressStepItem from './pb_progress_step/_progress_step_item'
+export Radio from './pb_radio/_radio'
+export RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
+export SectionSeparator from './pb_section_separator/_section_separator'
+export Select from './pb_select/_select'
+export SelectableCard from './pb_selectable_card/_selectable_card'
+export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon'
+export SelectableIcon from './pb_selectable_icon/_selectable_icon'
+export SelectableList from './pb_selectable_list/_selectable_list'
+export SelectableListItem from './pb_selectable_list/_item'
+export Source from './pb_source/_source'
+export StarRating from './pb_star_rating/_star_rating'
+export StatChange from './pb_stat_change/_stat_change'
+export StatValue from './pb_stat_value/_stat_value'
+export Table from './pb_table/_table'
+export TableRow from './pb_table/_table_row'
+export TextInput from './pb_text_input/_text_input'
+export Textarea from './pb_textarea/_textarea'
+export Time from './pb_time/_time'
+export TimeRangeInline from './pb_time_range_inline/_time_range_inline'
+export TimeStacked from './pb_time_stacked/_time_stacked'
+export Timeline from './pb_timeline/_timeline'
+export Timestamp from './pb_timestamp/_timestamp'
+export Title from './pb_title/_title'
+export TitleCount from './pb_title_count/_title_count'
+export TitleDetail from './pb_title_detail/_title_detail'
+export Toggle from './pb_toggle/_toggle'
+export Typeahead from './pb_typeahead/_typeahead'
+export User from './pb_user/_user'
+export UserBadge from './pb_user_badge/_user_badge'
+export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 
 // Dashboard Settings

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -1,4 +1,5 @@
-@import "../../pb_title/title_mixin";
+@import "../../tokens/titles";
+
 // Header Styles
 .flatpickr-months {
   border-bottom: solid 1px $border_light;

data/app/pb_kits/playbook/pb_enhanced_element/index.js

@@ -26,11 +26,12 @@ export default class PbEnhancedElement {
   }
 
   static addMatch(element) {
-    if (this.elements.has(element)) return
+    if (element._pbEnhanced || this.elements.has(element)) return
 
     const enhansedElement = new this(element)
     enhansedElement.connect()
     this.elements.set(element, enhansedElement)
+    element._pbEnhanced = enhansedElement
   }
 
   static removeMatch(element) {

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -3,8 +3,8 @@
 @import "../tokens/border_radius";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
+@import "../tokens/titles";
 @import "../pb_body/body_mixins";
-@import "../pb_title/title_mixin";
 @import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
@@ -134,7 +134,7 @@ $selector: ".pb_nav_list";
       border-bottom: 0;
     }
   }
-  
+
 }
 
 //Image Wrapper

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -2,11 +2,18 @@
 
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import useFocus from './useFocus.js'
-import Trix from 'trix'
-import { globalProps } from '../utilities/globalProps.js'
+import useFocus from './useFocus'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
+try {
+  const Trix = require('trix')
+  Trix.config.textAttributes.inlineCode = {
+    tagName: 'code',
+    inheritable: true,
+  }
+} catch (_e) { /* do nothing */ }
+
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -46,11 +53,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const dataProps = buildDataProps(data)
 
   useEffect(() => {
-    Trix.config.textAttributes.inlineCode = {
-      tagName: 'code',
-      inheritable: true,
-    }
-
     trixRef.current.addEventListener('trix-initialize', (event) => {
       const element = event.target
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,6 +1,6 @@
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
-@import "../pb_title/title_mixin";
+@import "../tokens/titles";
 @import "../tokens/colors";
 
 [class^=pb_select] {

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

@@ -1,5 +1,5 @@
 @import "../pb_textarea/textarea_mixin";
-@import "../pb_title/title_mixin";
+@import "../tokens/titles";
 @import "../tokens/colors";
 
 

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -1,11 +1,11 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
-@import "../pb_title/title_mixin";
 @import "../tokens/spacing";
+@import "../tokens/titles";
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
-  
+
   [class^=pb_caption_kit] {
     margin-bottom: $space_xs;
     display: block;
@@ -28,7 +28,7 @@
   .pb_text_area_kit:hover {
     background-color: rgba($focus_input_light,$opacity_5);
   }
-  
+
   &.resize_both > textarea {
     resize: both;
     overflow: auto;

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

@@ -1,4 +1,4 @@
-@import "title_mixin";
+@import "../tokens/titles";
 @import "../tokens/colors";
 
 [class^=pb_title_kit]{

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

@@ -1,40 +1 @@
-@import "../tokens/colors";
-@import "../tokens/typography";
-@import "../tokens/line_height";
-
-@mixin pb_title(
-    $fontSize: $heading_1,
-    $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
-){
-  font-size: $fontSize;
-  letter-spacing: $lspace_tight;
-  font-weight: $fontWeight;
-  color: $text_lt_default;
-  margin: 0;
-  line-height: $lineHeight;
-  font-family: $font_family_base;
-}
-
-@mixin pb_title_1 {
-  @include pb_title($heading_1);
-  letter-spacing: -0.03em;
-}
-
-@mixin pb_title_2 {
-  @include pb_title($heading_2, $lighter, 0.96);
-}
-
-@mixin pb_title_3 {
-  @include pb_title($heading_3);
-}
-
-@mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-}
-
-@mixin pb_title_dark {
-  color: $text_dk_default;
-}
-
-
+@import "../tokens/titles";