playbook_ui 3.0.1 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fce5b1c4cf0ebd90db21b1fb89fae206346b3d920b2153eb7c9d8a7a8c8d2c3
-  data.tar.gz: 216514f80fd7b3489f553c24ba482537d3b16535cb36056c3c38a957938276dd
+  metadata.gz: 27957803c8ed8eef88b068c7c764988e33a4da8e557d94b266fbeee57df8a62b
+  data.tar.gz: f346c938f2fc9b4f379437e155d1f20d6deae59536379b920c48a4efaf05b865
 SHA512:
-  metadata.gz: a2853fcbef977e7c4add0916332bd1dd368ad13f77bdbe2f6c9865fe8cc6066f4ae0c36cbd8195e5fd717ab13982221fb4b0272d4b0c15f502e3d83df4a054d7
-  data.tar.gz: 3a028fe8b77aab66276f43282075d4a2ff987175c54ca9422af5de6b588085ebbf300437267987009c8afb5cd384bb85399677eb5dcb8f15a5cfdec434c3ded0
+  metadata.gz: a6dd18559eb00332bf7ee3cf86b6b57f275822708c19cada433f3c06eba0a409ade40393e3f8e6bb2087663d1679988379ac27c1d82e48dcc5f67559db309ce2
+  data.tar.gz: ac2687652c44f311891aea746712be2cbaeeaf88c1e38ef1d8df85eb261a521726345eedb43cfada9416e1447f44d8911019dc8823940d0d5cf056ae24cf08d9

data/README.md

@@ -32,6 +32,10 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 ## Additional resources
 
+### Upgrading between versions
+
+See [docs/upgrade-guide](./docs/upgrade-guide)
+
 ### Nitro & Releases
 
 * [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)

data/app/pb_kits/playbook/index.js

@@ -1,131 +1,65 @@
 // React Component JSX Imports from the React Kits
-import Avatar from "./pb_avatar/_avatar.jsx"
-import Badge from "./pb_badge/_badge.jsx"
-import BarGraph from "./pb_bar_graph/_bar_graph.jsx"
-import Body from "./pb_body/_body.jsx"
-import Button from "./pb_button/_button.jsx"
-import Caption from "./pb_caption/_caption.jsx"
-import Card from "./pb_card/_card.jsx"
-import Checkbox from "./pb_checkbox/_checkbox.jsx"
-import CircleIconButton from "./pb_circle_icon_button/_circle_icon_button.jsx"
-import Contact from "./pb_contact/_contact.jsx"
-import Currency from "./pb_currency/_currency.jsx"
-import DashboardValue from "./pb_dashboard_value/_dashboard_value.jsx"
-import Date from "./pb_date/_date.jsx"
-import DateRangeInline from "./pb_date_range_inline/_date_range_inline.jsx"
-import DateYearStacked from "./pb_date_year_stacked/_date_year_stacked.jsx"
-import DistributionBar from "./pb_distribution_bar/_distribution_bar.jsx"
-import FixedConfirmationToast from "./pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx"
-import Hashtag from "./pb_hashtag/_hashtag.jsx"
-import HomeAddressStreet from "./pb_home_address_street/_home_address_street.jsx"
-import Icon from "./pb_icon/_icon.jsx"
-import IconCircle from "./pb_icon_circle/_icon_circle.jsx"
-import IconValue from "./pb_icon_value/_icon_value.jsx"
-import Image from "./pb_image/_image.jsx"
-import LabelPill from "./pb_label_pill/_label_pill.jsx"
-import LabelValue from "./pb_label_value/_label_value.jsx"
-import Layout from "./pb_layout/_layout.jsx"
-import LineGraph from "./pb_line_graph/_line_graph.jsx"
-import List from "./pb_list/_list.jsx"
-import ListItem from "./pb_list/_list_item.jsx"
-import LoadingInline from "./pb_loading_inline/_loading_inline.jsx"
-import Message from "./pb_message/_message.jsx"
-import MultipleUsers from "./pb_multiple_users/_multiple_users.jsx"
-import Nav from "./pb_nav/_nav.jsx"
-import OnlineStatus from "./pb_online_status/_online_status.jsx"
-import Person from "./pb_person/_person.jsx"
-import PersonContact from "./pb_person_contact/_person_contact.jsx"
-import Pill from "./pb_pill/_pill.jsx"
-import ProgressPills from "./pb_progress_pills/_progress_pills.jsx"
-import ProgressSimple from "./pb_progress_simple/_progress_simple.jsx"
-import SectionSeparator from "./pb_section_separator/_section_separator.jsx"
-import Select from "./pb_select/_select.jsx"
-import SelectableCard from "./pb_selectable_card/_selectable_card.jsx"
-import Source from "./pb_source/_source.jsx"
-import StarRating from "./pb_star_rating/_star_rating.jsx"
-import StatChange from "./pb_stat_change/_stat_change.jsx"
-import StatValue from "./pb_stat_value/_stat_value.jsx"
-import Table from "./pb_table/_table.jsx"
-import Textarea from "./pb_textarea/_textarea.jsx"
-import TextInput from "./pb_text_input/_text_input.jsx"
-import Time from "./pb_time/_time.jsx"
-import TimeStamp from "./pb_timestamp/_timestamp.jsx"
-import Title from "./pb_title/_title.jsx"
-import Toggle from "./pb_toggle/_toggle.jsx"
-import User from "./pb_user/_user.jsx"
-import UserBadge from "./pb_user_badge/_user_badge.jsx"
-
+export Avatar from './pb_avatar/_avatar.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 Button from './pb_button/_button.jsx'
+export Caption from './pb_caption/_caption.jsx'
+export Card from './pb_card/_card.jsx'
+export Checkbox from './pb_checkbox/_checkbox.jsx'
+export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.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 DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
+export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
+export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
+export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
+export Hashtag from './pb_hashtag/_hashtag.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 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 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 Nav from './pb_nav/_nav.jsx'
+export OnlineStatus from './pb_online_status/_online_status.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 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 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 Textarea from './pb_textarea/_textarea.jsx'
+export TextInput from './pb_text_input/_text_input.jsx'
+export Time from './pb_time/_time.jsx'
+export TimeStamp from './pb_timestamp/_timestamp.jsx'
+export Title from './pb_title/_title.jsx'
+export Toggle from './pb_toggle/_toggle.jsx'
+export User from './pb_user/_user.jsx'
+export UserBadge from './pb_user_badge/_user_badge.jsx'
 
 // Dashboard Settings
-import { commonSettings, dataColors } from "./pb_dashboard/commonSettings"
-import lineGraphSettings from "./pb_line_graph/lineGraphSettings"
-import barGraphSettings from "./pb_bar_graph/barGraphSettings"
-import dashboardValueSettings from "./pb_dashboard_value/dashboardValueSettings"
+export { commonSettings, dataColors } from './pb_dashboard/commonSettings'
+export lineGraphSettings from './pb_line_graph/lineGraphSettings'
+export barGraphSettings from './pb_bar_graph/barGraphSettings'
+export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
-import pbChart from "./plugins/pb_chart_plugin.js"
-
-// All Exports for Consumption in Nitro
-export {
-  Avatar,
-  Badge,
-  BarGraph,
-  barGraphSettings,
-  Body,
-  Button,
-  Caption,
-  Card,
-  Checkbox,
-  CircleIconButton,
-  commonSettings,
-  Contact,
-  Currency,
-  DashboardValue,
-  dashboardValueSettings,
-  dataColors,
-  Date,
-  DateRangeInline,
-  DateYearStacked,
-  DistributionBar,
-  FixedConfirmationToast,
-  Hashtag,
-  HomeAddressStreet,
-  Icon,
-  IconCircle,
-  IconValue,
-  Image,
-  LabelPill,
-  LabelValue,
-  Layout,
-  LineGraph,
-  lineGraphSettings,
-  List,
-  ListItem,
-  LoadingInline,
-  Message,
-  MultipleUsers,
-  Nav,
-  OnlineStatus,
-  pbChart,
-  Person,
-  PersonContact,
-  Pill,
-  ProgressPills,
-  ProgressSimple,
-  SectionSeparator,
-  Select,
-  SelectableCard,
-  Source,
-  StarRating,
-  StatChange,
-  StatValue,
-  Table,
-  Textarea,
-  TextInput,
-  Time,
-  TimeStamp,
-  Title,
-  Toggle,
-  User,
-  UserBadge,
-}
+export pbChart from './plugins/pb_chart_plugin.js'

data/app/pb_kits/playbook/kits/pb_avatar.js

@@ -1,4 +1,4 @@
-import Avatar from "../pb_avatar/_avatar.jsx";
-import WebpackerReact from "webpacker-react";
+import Avatar from '../pb_avatar/_avatar.jsx'
+import WebpackerReact from 'webpacker-react'
 
-WebpackerReact.setup({ Avatar });
+WebpackerReact.setup({ Avatar })

data/app/pb_kits/playbook/kits/pb_badge.js

@@ -1,4 +1,4 @@
-import Badge from "../pb_badge/_badge.jsx";
+import Badge from '../pb_badge/_badge.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Badge });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Badge })

data/app/pb_kits/playbook/kits/pb_bar_graph.js

@@ -1,4 +1,4 @@
-import BarGraph from "../pb_bar_graph/_bar_graph.jsx";
+import BarGraph from '../pb_bar_graph/_bar_graph.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ BarGraph });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ BarGraph })

data/app/pb_kits/playbook/kits/pb_body.js

@@ -1,4 +1,4 @@
-import Body from "../pb_body/_body.jsx";
+import Body from '../pb_body/_body.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Body });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Body })

data/app/pb_kits/playbook/kits/pb_button.js

@@ -1,4 +1,4 @@
-import Button from "../pb_button/_button.jsx";
+import Button from '../pb_button/_button.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Button});
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Button })

data/app/pb_kits/playbook/kits/pb_caption.js

@@ -1,4 +1,4 @@
-import Caption from "../pb_caption/_caption.jsx";
-import WebpackerReact from "webpacker-react";
+import Caption from '../pb_caption/_caption.jsx'
+import WebpackerReact from 'webpacker-react'
 
-WebpackerReact.setup({ Caption });
+WebpackerReact.setup({ Caption })

data/app/pb_kits/playbook/kits/pb_card.js

@@ -1,4 +1,4 @@
-import Card from "../pb_card/_card.jsx";
-import WebpackerReact from "webpacker-react";
+import Card from '../pb_card/_card.jsx'
+import WebpackerReact from 'webpacker-react'
 
-WebpackerReact.setup({ Card });
+WebpackerReact.setup({ Card })

data/app/pb_kits/playbook/kits/pb_checkbox.js

@@ -1,4 +1,4 @@
-import Checkbox from "../pb_checkbox/_checkbox.jsx";
-import WebpackerReact from "webpacker-react";
+import Checkbox from '../pb_checkbox/_checkbox.jsx'
+import WebpackerReact from 'webpacker-react'
 
-WebpackerReact.setup({ Checkbox });
+WebpackerReact.setup({ Checkbox })

data/app/pb_kits/playbook/kits/pb_circle_icon_button.js

@@ -1,4 +1,4 @@
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button.jsx";
+import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ CircleIconButton });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ CircleIconButton })

data/app/pb_kits/playbook/kits/pb_contact.js

@@ -1,4 +1,4 @@
-import Contact from "../pb_contact/_contact.jsx";
+import Contact from '../pb_contact/_contact.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Contact });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Contact })

data/app/pb_kits/playbook/kits/pb_currency.js

@@ -1,4 +1,4 @@
-import Currency from "../pb_currency/_currency.jsx";
+import Currency from '../pb_currency/_currency.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Currency });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Currency })

data/app/pb_kits/playbook/kits/pb_dashboard_value.js

@@ -1,4 +1,4 @@
-import DashboardValue from "../pb_dashboard_value/_dashboard_value.jsx";
+import DashboardValue from '../pb_dashboard_value/_dashboard_value.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ DashboardValue });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ DashboardValue })

data/app/pb_kits/playbook/kits/pb_date.js

@@ -1,4 +1,4 @@
-import Date from "../pb_date/_date.jsx";
+import Date from '../pb_date/_date.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Date });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Date })

data/app/pb_kits/playbook/kits/pb_date_range_inline.js

@@ -1,4 +1,4 @@
-import DateRangeInline from "../pb_date_range_inline/_date_range_inline.jsx";
+import DateRangeInline from '../pb_date_range_inline/_date_range_inline.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ DateRangeInline });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ DateRangeInline })

data/app/pb_kits/playbook/kits/pb_date_stacked.js

@@ -1,4 +1,4 @@
-import DateStacked from "../pb_date_stacked/_date_stacked.jsx";
+import DateStacked from '../pb_date_stacked/_date_stacked.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ DateStacked });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ DateStacked })

data/app/pb_kits/playbook/kits/pb_date_year_stacked.js

@@ -1,4 +1,4 @@
-import DateYearStacked from "../pb_date_year_stacked/_date_year_stacked.jsx";
+import DateYearStacked from '../pb_date_year_stacked/_date_year_stacked.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ DateYearStacked });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ DateYearStacked })

data/app/pb_kits/playbook/kits/pb_distribution_bar.js

@@ -1,4 +1,4 @@
-import DistributionBar from "../pb_distribution_bar/_distribution_bar.jsx";
+import DistributionBar from '../pb_distribution_bar/_distribution_bar.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ DistributionBar });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ DistributionBar })

data/app/pb_kits/playbook/kits/pb_fixed_confirmation_toast.js

@@ -1,4 +1,4 @@
-import FixedConfirmationToast from "../pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx";
+import FixedConfirmationToast from '../pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ FixedConfirmationToast });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ FixedConfirmationToast })

data/app/pb_kits/playbook/kits/pb_hashtag.js

@@ -1,4 +1,4 @@
-import Hashtag from "../pb_hashtag/_hashtag.jsx";
+import Hashtag from '../pb_hashtag/_hashtag.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Hashtag });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Hashtag })

data/app/pb_kits/playbook/kits/pb_home_address_street.js

@@ -1,4 +1,4 @@
-import HomeAddressStreet from "../pb_home_address_street/_home_address_street.jsx";
+import HomeAddressStreet from '../pb_home_address_street/_home_address_street.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ HomeAddressStreet });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ HomeAddressStreet })

data/app/pb_kits/playbook/kits/pb_icon.js

@@ -1,4 +1,4 @@
-import Icon from "../pb_icon/_icon.jsx";
+import Icon from '../pb_icon/_icon.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ Icon });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Icon })

data/app/pb_kits/playbook/kits/pb_icon_circle.js

@@ -1,4 +1,4 @@
-import IconCircle from "../pb_icon_circle/_icon_circle.jsx";
+import IconCircle from '../pb_icon_circle/_icon_circle.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ IconCircle });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ IconCircle })

data/app/pb_kits/playbook/kits/pb_icon_value.js

@@ -1,4 +1,4 @@
-import IconValue from "../pb_icon_value/_icon_value.jsx";
+import IconValue from '../pb_icon_value/_icon_value.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ IconValue });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ IconValue })

data/app/pb_kits/playbook/kits/pb_image.js

@@ -1,5 +1,4 @@
-import Image from "../pb_image/_image.jsx";
-import WebpackerReact from "webpacker-react";
+import Image from '../pb_image/_image.jsx'
+import WebpackerReact from 'webpacker-react'
 
-
-WebpackerReact.setup({ Image });
+WebpackerReact.setup({ Image })

data/app/pb_kits/playbook/kits/pb_label_pill.js

@@ -1,4 +1,4 @@
-import LabelPill from "../pb_label_pill/_label_pill.jsx";
+import LabelPill from '../pb_label_pill/_label_pill.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ LabelPill });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ LabelPill })