├── .husky ├── .gitignore └── pre-commit ├── playbook-website ├── log │ └── .keep ├── tmp │ └── .keep ├── lib │ ├── assets │ │ └── .keep │ ├── tasks │ │ └── .keep │ └── generators │ │ └── sample │ │ ├── USAGE │ │ └── templates │ │ └── sample_rails_index.erb.tt ├── vendor │ └── .keep ├── public │ ├── favicon.ico │ ├── apple-touch-icon.png │ ├── apple-touch-icon-precomposed.png │ ├── robots.txt │ └── images │ │ ├── pb-favicon.ico │ │ ├── pb-favicon-180.png │ │ ├── pb-favicon-192.png │ │ ├── pb-favicon-512.png │ │ └── getting_started │ │ └── copy_html.png ├── .ruby-version ├── .browserslistrc ├── .rspec ├── app │ ├── views │ │ ├── guides │ │ │ ├── dependencies │ │ │ │ └── first.md │ │ │ ├── getting_started │ │ │ │ └── icons │ │ │ │ │ ├── custom.md │ │ │ │ │ └── playbook.md │ │ │ ├── _dependencies_index.html.erb │ │ │ └── dependencies.html.md │ │ ├── pages │ │ │ ├── code_snippets │ │ │ │ ├── cursor_jsx.txt │ │ │ │ ├── width_jsx.txt │ │ │ │ ├── position_jsx.txt │ │ │ │ ├── border_radius_jsx.txt │ │ │ │ ├── min_width_jsx.txt │ │ │ │ ├── shadow_in_use_jsx.txt │ │ │ │ ├── max_width_jsx.txt │ │ │ │ ├── overflow_jsx.txt │ │ │ │ ├── number_spacing_jsx.txt │ │ │ │ ├── z_index_token.txt │ │ │ │ ├── overflow_token.txt │ │ │ │ ├── shadow_erb.txt │ │ │ │ ├── line_height_jsx.txt │ │ │ │ ├── position_token.txt │ │ │ │ ├── spacing_tokens_jsx.txt │ │ │ │ ├── border_radius_tokens.txt │ │ │ │ ├── typography_tokens.txt │ │ │ │ ├── height_jsx.txt │ │ │ │ ├── min_height_jsx.txt │ │ │ │ ├── justify_self_jsx.txt │ │ │ │ └── max_height_jsx.txt │ │ │ ├── tokens.html.erb │ │ │ ├── changelog.html.erb │ │ │ ├── icons.html.erb │ │ │ ├── changelog_swift.html.erb │ │ │ ├── icons_custom.html.erb │ │ │ ├── icons_playbook.html.erb │ │ │ ├── tokens_show.html.erb │ │ │ ├── changelog_figma.html.erb │ │ │ ├── global_props.html.erb │ │ │ ├── icons_font_awesome.html.erb │ │ │ └── global_props_show.html.erb │ │ └── layouts │ │ │ ├── _mobile_hamburger.html.erb │ │ │ └── _hotjar.html.erb │ ├── javascript │ │ ├── types.d.ts │ │ ├── images │ │ │ └── hp-social-proof-background.png │ │ └── site_styles │ │ │ └── _kit_api.scss │ ├── components │ │ ├── lg_hp_social_proof_component.rb │ │ ├── md_hp_social_proof_component.rb │ │ ├── sm_hp_social_proof_component.rb │ │ └── hp_solutions_component.rb │ └── models │ │ └── application_record.rb ├── config │ ├── deploy │ │ ├── production │ │ │ └── values.yaml │ │ ├── staging │ │ │ └── values.yaml │ │ └── prs │ │ │ └── values.yaml │ ├── initializers │ │ ├── openai.rb │ │ ├── markdown_template.rb │ │ └── sentry.rb │ ├── spring.rb │ └── environment.rb ├── bin │ ├── rake │ └── rails ├── .babelrc ├── services │ └── puma.sh └── config.ru ├── examples ├── playbook-rails │ ├── log │ │ └── .keep │ ├── storage │ │ └── .keep │ ├── vendor │ │ ├── .keep │ │ └── javascript │ │ │ └── .keep │ ├── lib │ │ ├── assets │ │ │ └── .keep │ │ └── tasks │ │ │ └── .keep │ ├── public │ │ ├── favicon.ico │ │ ├── apple-touch-icon.png │ │ ├── apple-touch-icon-precomposed.png │ │ └── robots.txt │ ├── test │ │ ├── helpers │ │ │ └── .keep │ │ ├── mailers │ │ │ └── .keep │ │ ├── models │ │ │ └── .keep │ │ ├── system │ │ │ └── .keep │ │ ├── controllers │ │ │ ├── .keep │ │ │ └── pages_controller_test.rb │ │ ├── integration │ │ │ └── .keep │ │ ├── fixtures │ │ │ └── files │ │ │ │ └── .keep │ │ └── application_system_test_case.rb │ ├── app │ │ ├── assets │ │ │ ├── images │ │ │ │ └── .keep │ │ │ ├── fonts │ │ │ │ ├── PowerCentra-Bold.woff2 │ │ │ │ ├── PowerCentra-Book.woff2 │ │ │ │ ├── PowerCentra-Light.woff2 │ │ │ │ ├── PowerCentra-BoldItalic.woff2 │ │ │ │ └── PowerCentra-BookItalic.woff2 │ │ │ ├── config │ │ │ │ └── manifest.js │ │ │ └── stylesheets │ │ │ │ └── application.scss │ │ ├── models │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ └── application_record.rb │ │ ├── controllers │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ ├── pages_controller.rb │ │ │ └── application_controller.rb │ │ ├── views │ │ │ ├── layouts │ │ │ │ └── mailer.text.erb │ │ │ └── pages │ │ │ │ └── index.html.erb │ │ ├── helpers │ │ │ ├── pages_helper.rb │ │ │ └── application_helper.rb │ │ ├── channels │ │ │ └── application_cable │ │ │ │ ├── channel.rb │ │ │ │ └── connection.rb │ │ ├── mailers │ │ │ └── application_mailer.rb │ │ └── javascript │ │ │ └── application.js │ ├── db │ │ └── development.sqlite3 │ ├── config │ │ ├── master.key │ │ ├── routes.rb │ │ └── environment.rb │ ├── bin │ │ ├── rake │ │ ├── importmap │ │ └── rails │ └── config.ru ├── rails-react-example │ ├── log │ │ └── .keep │ ├── tmp │ │ ├── .keep │ │ ├── pids │ │ │ └── .keep │ │ └── storage │ │ │ └── .keep │ ├── storage │ │ └── .keep │ ├── vendor │ │ ├── .keep │ │ └── javascript │ │ │ └── .keep │ ├── lib │ │ ├── assets │ │ │ └── .keep │ │ └── tasks │ │ │ └── .keep │ ├── public │ │ ├── favicon.ico │ │ ├── apple-touch-icon.png │ │ ├── apple-touch-icon-precomposed.png │ │ └── robots.txt │ ├── test │ │ ├── helpers │ │ │ └── .keep │ │ ├── mailers │ │ │ └── .keep │ │ ├── models │ │ │ └── .keep │ │ ├── system │ │ │ └── .keep │ │ ├── controllers │ │ │ └── .keep │ │ ├── integration │ │ │ └── .keep │ │ └── fixtures │ │ │ └── files │ │ │ └── .keep │ ├── app │ │ ├── assets │ │ │ └── images │ │ │ │ └── .keep │ │ ├── models │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ └── application_record.rb │ │ ├── controllers │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ ├── pages_controller.rb │ │ │ └── application_controller.rb │ │ ├── javascript │ │ │ ├── components │ │ │ │ └── .keep │ │ │ ├── packs │ │ │ │ └── application.ts │ │ │ └── application.js │ │ ├── views │ │ │ └── layouts │ │ │ │ └── mailer.text.erb │ │ ├── helpers │ │ │ ├── pages_helper.rb │ │ │ └── application_helper.rb │ │ ├── types.d.ts │ │ ├── channels │ │ │ └── application_cable │ │ │ │ ├── channel.rb │ │ │ │ └── connection.rb │ │ └── mailers │ │ │ └── application_mailer.rb │ ├── .browserslistrc │ ├── .npmrc │ ├── .tool-versions │ ├── config │ │ ├── webpack │ │ │ ├── environment.js │ │ │ ├── test.js │ │ │ ├── development.js │ │ │ └── production.js │ │ └── environment.rb │ └── bin │ │ ├── importmap │ │ ├── rake │ │ └── rails ├── playbook-rails-webpack │ ├── log │ │ └── .keep │ ├── tmp │ │ └── .keep │ ├── lib │ │ ├── assets │ │ │ └── .keep │ │ └── tasks │ │ │ └── .keep │ ├── storage │ │ └── .keep │ ├── vendor │ │ └── .keep │ ├── public │ │ ├── favicon.ico │ │ ├── apple-touch-icon.png │ │ ├── apple-touch-icon-precomposed.png │ │ └── robots.txt │ ├── test │ │ ├── helpers │ │ │ └── .keep │ │ ├── mailers │ │ │ └── .keep │ │ ├── models │ │ │ └── .keep │ │ ├── system │ │ │ └── .keep │ │ ├── controllers │ │ │ └── .keep │ │ ├── fixtures │ │ │ └── files │ │ │ │ └── .keep │ │ └── integration │ │ │ └── .keep │ ├── app │ │ ├── assets │ │ │ ├── builds │ │ │ │ └── .keep │ │ │ ├── images │ │ │ │ └── .keep │ │ │ ├── stylesheets │ │ │ │ └── application.scss │ │ │ ├── config │ │ │ │ └── manifest.js │ │ │ └── fonts │ │ │ │ ├── PowerCentra-Bold.woff2 │ │ │ │ ├── PowerCentra-Book.woff2 │ │ │ │ ├── PowerCentra-Light.woff2 │ │ │ │ ├── PowerCentra-BoldItalic.woff2 │ │ │ │ └── PowerCentra-BookItalic.woff2 │ │ ├── models │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ └── application_record.rb │ │ ├── controllers │ │ │ ├── concerns │ │ │ │ └── .keep │ │ │ ├── pages_controller.rb │ │ │ └── application_controller.rb │ │ ├── views │ │ │ └── layouts │ │ │ │ └── mailer.text.erb │ │ ├── helpers │ │ │ ├── pages_helper.rb │ │ │ └── application_helper.rb │ │ ├── javascript │ │ │ └── application.js │ │ ├── channels │ │ │ └── application_cable │ │ │ │ ├── channel.rb │ │ │ │ └── connection.rb │ │ └── mailers │ │ │ └── application_mailer.rb │ ├── .ruby-version │ ├── .eslintignore │ ├── Procfile.dev │ ├── bin │ │ ├── rake │ │ ├── dev │ │ └── rails │ └── config │ │ └── environment.rb └── react-example │ ├── src │ └── App.css │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── playbook ├── spec │ └── dummy │ │ ├── lib │ │ └── assets │ │ │ └── .keep │ │ ├── public │ │ ├── favicon.ico │ │ ├── apple-touch-icon.png │ │ └── apple-touch-icon-precomposed.png │ │ ├── config │ │ ├── routes.rb │ │ ├── spring.rb │ │ ├── boot.rb │ │ └── environment.rb │ │ ├── package.json │ │ ├── app │ │ └── controllers │ │ │ └── application_controller.rb │ │ ├── bin │ │ ├── rake │ │ ├── bundle │ │ └── rails │ │ └── config.ru ├── .eslintignore ├── app │ └── pb_kits │ │ └── playbook │ │ ├── pb_user │ │ └── docs │ │ │ ├── _footer.md │ │ │ ├── _user_block_content_subtitle_rails.md │ │ │ ├── _user_block_content_subtitle_react.md │ │ │ └── _user_light_weight.md │ │ ├── pb_card │ │ └── docs │ │ │ ├── _card_tag_swift.md │ │ │ ├── _card_selected_swift.md │ │ │ ├── _card_border_radius.md │ │ │ ├── _card_border_none.md │ │ │ ├── _card_light.html.erb │ │ │ ├── _card_light.md │ │ │ ├── _card_highlight.md │ │ │ ├── _card_border_none.html.erb │ │ │ └── _card_selected.html.erb │ │ ├── pb_file_upload │ │ └── docs │ │ │ ├── _description.md │ │ │ ├── _file_upload_default.html.erb │ │ │ ├── _file_upload_error.html.erb │ │ │ ├── _file_upload_custom_description.md │ │ │ └── _file_upload_custom.html.erb │ │ ├── pb_pb_bar_graph │ │ ├── _pb_bar_graph.scss │ │ ├── pb_bar_graph.html.erb │ │ └── docs │ │ │ ├── _pb_bar_graph_default.md │ │ │ ├── _pb_bar_graph_colors_rails.md │ │ │ ├── _pb_bar_graph_spline.md │ │ │ └── _pb_bar_graph_colors_react.md │ │ ├── pb_table │ │ ├── _table.scss │ │ └── docs │ │ │ ├── _table_with_collapsible_with_custom_content.md │ │ │ ├── _table_with_collapsible_with_custom_content_rails.md │ │ │ ├── _table_data_table.md │ │ │ ├── _table_lg.md │ │ │ ├── _table_md.md │ │ │ ├── _table_with_selectable_rows.md │ │ │ ├── _table_action_middle.md │ │ │ ├── _table_with_header_style_borderless_react.md │ │ │ ├── _table_with_header_style_borderless_rails.md │ │ │ ├── _table_alignment_shift_row.md │ │ │ ├── _table_one_action.md │ │ │ ├── _table_alignment_shift_row_rails.md │ │ │ ├── _table_with_collapsible_react.md │ │ │ └── _table_striped.md │ │ ├── pb_home_address_street │ │ ├── _home_address_street.scss │ │ ├── docs │ │ │ ├── _home_address_street_default.md │ │ │ └── _footer.md │ │ └── home_address_street.html.erb │ │ ├── pb_image │ │ └── docs │ │ │ ├── _description.md │ │ │ └── _transition_image.md │ │ ├── pb_filter │ │ ├── _filter.tsx │ │ └── docs │ │ │ ├── _filter_no_sort.md │ │ │ ├── _filter_no_background.md │ │ │ ├── _filter_max_width.md │ │ │ └── _filter_default.md │ │ ├── types │ │ ├── data.ts │ │ ├── sizes.ts │ │ ├── spacing.ts │ │ └── index.ts │ │ ├── pb_gauge │ │ ├── docs │ │ │ ├── _gauge_min_max.md │ │ │ ├── _gauge_complex_rails.md │ │ │ ├── _gauge_complex_react.md │ │ │ └── _gauge_units_react.md │ │ └── gauge.html.erb │ │ ├── pb_pb_line_graph │ │ ├── _pb_line_graph.scss │ │ ├── pb_line_graph.html.erb │ │ └── docs │ │ │ └── _pb_line_graph_default.md │ │ ├── pb_rich_text_editor │ │ ├── types.d.ts │ │ └── docs │ │ │ ├── _rich_text_editor_advanced_sticky.md │ │ │ ├── _rich_text_editor_simple.html.erb │ │ │ ├── _rich_text_editor_advanced_attributes.md │ │ │ ├── _rich_text_editor_toolbar_bottom.html.erb │ │ │ ├── _rich_text_editor_advanced_focus.md │ │ │ ├── _rich_text_editor_focus.html.erb │ │ │ ├── _rich_text_editor_advanced_inline.md │ │ │ └── _rich_text_editor_advanced_templates.md │ │ ├── pb_date_range_inline │ │ └── docs │ │ │ └── _description.md │ │ ├── pb_hashtag │ │ ├── docs │ │ │ ├── _footer.md │ │ │ ├── _description.md │ │ │ └── index.js │ │ └── _hashtag.scss │ │ ├── pb_pb_circle_chart │ │ ├── _pb_circle_chart.scss │ │ ├── pb_circle_chart.html.erb │ │ └── docs │ │ │ └── _pb_circle_chart_default.md │ │ ├── pb_pb_gauge_chart │ │ ├── _pb_gauge_chart.scss │ │ ├── pb_gauge_chart.html.erb │ │ └── docs │ │ │ ├── _pb_gauge_chart_complex.md │ │ │ ├── _pb_gauge_chart_default.md │ │ │ ├── _pb_gauge_chart_min_max.md │ │ │ ├── _pb_gauge_chart_units.md │ │ │ └── _pb_gauge_chart_default.html.erb │ │ ├── tokens │ │ ├── exports │ │ │ └── exports.d.ts │ │ └── _transition.scss │ │ ├── pb_detail │ │ ├── docs │ │ │ ├── _detail_bold.md │ │ │ ├── _description.md │ │ │ └── _detail_default.html.erb │ │ └── detail.html.erb │ │ ├── pb_online_status │ │ ├── online_status.html.erb │ │ └── docs │ │ │ ├── _online_status_no_border.html.erb │ │ │ └── _description.md │ │ ├── pb_passphrase │ │ ├── docs │ │ │ ├── _passphrase_default.html.erb │ │ │ └── _passphrase_input_props.md │ │ └── passphrase.html.erb │ │ ├── pb_contact │ │ ├── _contact.scss │ │ └── docs │ │ │ └── _description.md │ │ ├── pb_layout │ │ ├── item.html.erb │ │ ├── body.html.erb │ │ ├── footer.html.erb │ │ ├── header.html.erb │ │ ├── layout.html.erb │ │ ├── sidebar.html.erb │ │ └── docs │ │ │ ├── _description.md │ │ │ └── _layout_collection.md │ │ ├── pb_nav │ │ └── docs │ │ │ ├── _with_img_nav.md │ │ │ ├── _collapsible_nav_no_icon_rails.md │ │ │ ├── _collapsible_nav_no_icon_react.md │ │ │ └── _description.md │ │ ├── pb_pill │ │ ├── docs │ │ │ ├── _pill_default.html.erb │ │ │ ├── _pill_example.md │ │ │ ├── _pill_example.html.erb │ │ │ ├── _pill_default_swift.md │ │ │ └── index.js │ │ └── pill.html.erb │ │ ├── pb_radio │ │ └── docs │ │ │ ├── _radio_react_hook.md │ │ │ ├── _footer.md │ │ │ ├── _description.md │ │ │ ├── _radio_custom_children.md │ │ │ ├── _radio_error.md │ │ │ └── _radio_error.html.erb │ │ ├── pb_typeahead │ │ ├── types.d.ts │ │ └── docs │ │ │ ├── _typeahead_react_hook.md │ │ │ ├── _typeahead_custom_options.md │ │ │ ├── _description.md │ │ │ ├── _typeahead_with_pills_async_users.md │ │ │ ├── _footer.md │ │ │ ├── _typeahead_with_pills_async_custom_options.md │ │ │ ├── _typeahead_without_pills.md │ │ │ └── _typeahead_error_state.md │ │ ├── pb_bar_graph │ │ ├── bar_graph.html.erb │ │ ├── _bar_graph.scss │ │ └── docs │ │ │ ├── _bar_graph_stacked.md │ │ │ └── _bar_graph_spline.md │ │ ├── pb_date_stacked │ │ └── docs │ │ │ ├── _description.md │ │ │ └── _footer.md │ │ ├── pb_highlight │ │ ├── docs │ │ │ ├── _description.md │ │ │ ├── index.js │ │ │ ├── _footer.md │ │ │ └── example.yml │ │ ├── highlight.html.erb │ │ └── _highlight.scss │ │ ├── pb_legend │ │ └── docs │ │ │ ├── _footer.md │ │ │ ├── _description.md │ │ │ ├── _legend_custom_colors.md │ │ │ ├── _legend_prefix.html.erb │ │ │ └── _legend_colors.md │ │ ├── pb_person │ │ └── docs │ │ │ ├── index.js │ │ │ ├── _person_default.md │ │ │ ├── _description.md │ │ │ └── _person_default.html.erb │ │ ├── pb_progress_simple │ │ └── docs │ │ │ ├── _footer.md │ │ │ ├── _progress_simple_default.html.erb │ │ │ ├── _progress_simple_muted.html.erb │ │ │ ├── _progress_simple_width.html.erb │ │ │ ├── _description.md │ │ │ ├── _progress_simple_flex.html.erb │ │ │ ├── _progress_simple_flex.md │ │ │ ├── _progress_simple_value.html.erb │ │ │ └── _progress_simple_variants.md │ │ ├── pb_time │ │ └── docs │ │ │ ├── _time_default.md │ │ │ ├── _footer.md │ │ │ └── _description.md │ │ ├── pb_user_badge │ │ ├── docs │ │ │ ├── _footer.md │ │ │ ├── _user_badge_default.md │ │ │ ├── index.js │ │ │ └── _description.md │ │ └── user_badge.html.erb │ │ ├── pb_body │ │ ├── docs │ │ │ ├── _body_block.html.erb │ │ │ ├── _body_styled.md │ │ │ └── _body_articles.md │ │ └── body.html.erb │ │ ├── pb_checkbox │ │ └── docs │ │ │ ├── _checkbox_react_hook.md │ │ │ ├── _description.md │ │ │ ├── _checkbox_error.html.erb │ │ │ └── _checkbox_checked.html.erb │ │ ├── pb_flex │ │ ├── flex.html.erb │ │ ├── docs │ │ │ ├── _flex_default.md │ │ │ ├── _flex_justify.md │ │ │ ├── _flex_spacing.md │ │ │ ├── _description.md │ │ │ ├── _flex_align.md │ │ │ ├── _flex_reverse.md │ │ │ └── _flex_wrap.md │ │ └── flex_item.html.erb │ │ ├── pb_line_graph │ │ ├── line_graph.html.erb │ │ └── _line_graph.scss │ │ ├── pb_skeleton_loading │ │ └── docs │ │ │ ├── _skeleton_loading_default.html.erb │ │ │ ├── _skeleton_loading_color.md │ │ │ ├── _skeleton_loading_border_radius_rails.md │ │ │ ├── _skeleton_loading_border_radius_react.md │ │ │ └── _skeleton_loading_layout.html.erb │ │ ├── pb_stat_change │ │ ├── _stat_change.scss │ │ └── docs │ │ │ └── _stat_change_unit_two.md │ │ ├── pb_avatar │ │ └── docs │ │ │ ├── _avatar_monogram.md │ │ │ ├── _avatar_status.md │ │ │ ├── _avatar_no_image.md │ │ │ ├── _avatar_grayscale.html.erb │ │ │ └── _footer.md │ │ ├── pb_button_toolbar │ │ ├── docs │ │ │ ├── _description.md │ │ │ └── index.js │ │ └── button_toolbar.html.erb │ │ ├── pb_circle_chart │ │ └── ChartsTypes.ts │ │ ├── pb_icon │ │ └── docs │ │ │ ├── _icon_animate.md │ │ │ ├── _icon_default.html.erb │ │ │ ├── _icon_pull.md │ │ │ ├── _icon_border.html.erb │ │ │ ├── _icon_fa_kit.html.erb │ │ │ ├── _description.md │ │ │ └── _footer.md │ │ ├── pb_label_pill │ │ └── docs │ │ │ ├── index.js │ │ │ ├── _description.md │ │ │ └── example.yml │ │ ├── pb_popover │ │ └── docs │ │ │ └── _popover_list.md │ │ ├── pb_section_separator │ │ └── docs │ │ │ ├── _section_separator_line.html.erb │ │ │ ├── _section_separator_dashed.html.erb │ │ │ ├── _section_separator_text.html.erb │ │ │ └── _footer.md │ │ ├── pb_selectable_card │ │ └── docs │ │ │ ├── _selectable_card_block.md │ │ │ ├── _selectable_card_image.md │ │ │ ├── _selectable_card_input.md │ │ │ ├── _selectable_card_default.md │ │ │ ├── _selectable_card_single_select.md │ │ │ ├── _footer.md │ │ │ └── _description.md │ │ ├── pb_timeline │ │ ├── detail.html.erb │ │ ├── timeline.html.erb │ │ ├── subcomponents │ │ │ └── index.tsx │ │ └── docs │ │ │ └── _timeline_with_children.md │ │ ├── pb_badge │ │ ├── badge.html.erb │ │ └── docs │ │ │ └── _description.md │ │ ├── pb_currency │ │ └── docs │ │ │ ├── _currency_no_symbol_rails.md │ │ │ ├── _currency_no_symbol_react.md │ │ │ ├── _currency_negative.md │ │ │ ├── _currency_variants.md │ │ │ ├── _currency_abbreviated.md │ │ │ ├── _currency_matching_decimals_react.md │ │ │ ├── _currency_matching_decimals_rails.md │ │ │ ├── _currency_no_symbol.html.erb │ │ │ ├── _currency_null_display_rails.md │ │ │ └── _currency_null_display_react.md │ │ ├── pb_draggable │ │ ├── draggable.html.erb │ │ ├── draggable_container.html.erb │ │ ├── docs │ │ │ ├── _draggable_event_listeners_rails.md │ │ │ ├── _draggable_drop_zones_colors_rails.md │ │ │ └── _draggable_event_listeners_react.md │ │ └── draggable_item.html.erb │ │ ├── pb_message │ │ ├── message_mention.html.erb │ │ └── docs │ │ │ ├── _footer.md │ │ │ ├── _description.md │ │ │ └── _message_default.md │ │ ├── pb_time_stacked │ │ └── docs │ │ │ ├── index.js │ │ │ └── example.yml │ │ ├── pb_tooltip │ │ └── docs │ │ │ ├── _tooltip_icon.md │ │ │ ├── _tooltip_interaction.md │ │ │ ├── _tooltip_click_open_react.md │ │ │ ├── _tooltip_selectors.md │ │ │ └── _tooltip_click_open_rails.md │ │ ├── utilities │ │ ├── _number_spacing.scss │ │ ├── _text_align.scss │ │ └── flexbox_global_props │ │ │ ├── _flex_grow.scss │ │ │ └── _flex_shrink.scss │ │ ├── pb_bread_crumbs │ │ ├── docs │ │ │ ├── index.js │ │ │ ├── _description.md │ │ │ └── example.yml │ │ └── bread_crumbs.html.erb │ │ ├── pb_distribution_bar │ │ ├── distribution_bar.html.erb │ │ └── docs │ │ │ └── _distribution_bar_custom_colors.html.erb │ │ ├── pb_form_group │ │ ├── form_group.html.erb │ │ └── docs │ │ │ └── _form_group_full_width.md │ │ ├── pb_stat_value │ │ └── docs │ │ │ ├── _footer.md │ │ │ ├── _stat_value_unit.html.erb │ │ │ ├── _description.md │ │ │ ├── _stat_value_default.html.erb │ │ │ ├── index.js │ │ │ ├── _stat_value_default.md │ │ │ └── _stat_value_precision.html.erb │ │ ├── pb_textarea │ │ └── docs │ │ │ ├── _description.md │ │ │ ├── _textarea_error.md │ │ │ ├── _textarea_inline.html.erb │ │ │ └── _textarea_custom.html.erb │ │ ├── pb_time_picker │ │ ├── docs │ │ │ ├── _time_picker_timezone.md │ │ │ ├── _time_picker_default.html.erb │ │ │ ├── _time_picker_on_handler.md │ │ │ ├── _time_picker_24_hour.md │ │ │ ├── _time_picker_label.html.erb │ │ │ ├── _time_picker_default_time.md │ │ │ ├── _time_picker_24_hour.html.erb │ │ │ └── _time_picker_error.html.erb │ │ └── time_picker.html.erb │ │ ├── pb_title_count │ │ └── docs │ │ │ ├── _title_count_default.md │ │ │ ├── _footer.md │ │ │ ├── index.js │ │ │ └── _description.md │ │ ├── pb_title_detail │ │ └── docs │ │ │ ├── index.js │ │ │ ├── _description.md │ │ │ ├── _title_detail_default.md │ │ │ ├── example.yml │ │ │ └── _footer.md │ │ ├── pb_collapsible │ │ ├── collapsible_content.html.erb │ │ ├── collapsible.html.erb │ │ ├── context.ts │ │ └── docs │ │ │ ├── _collapsible_color.md │ │ │ └── _collapsible_external_controls_multiple.md │ │ ├── pb_copy_button │ │ ├── _copy_button.scss │ │ └── docs │ │ │ ├── _copy_button_button_variant_rails.md │ │ │ └── _copy_button_button_variant_react.md │ │ ├── pb_date_picker │ │ └── docs │ │ │ ├── _date_picker_year_range.md │ │ │ ├── _date_picker_default.html.erb │ │ │ ├── _date_picker_format.md │ │ │ ├── _date_picker_allow_input.html.erb │ │ │ ├── _date_picker_hide_icon.html.erb │ │ │ ├── _date_picker_time.md │ │ │ ├── _date_picker_allow_input.md │ │ │ ├── _date_picker_label.md │ │ │ ├── _date_picker_week.html.erb │ │ │ ├── _date_picker_month_and_year.html.erb │ │ │ └── _date_picker_week.md │ │ ├── pb_date_time │ │ └── docs │ │ │ ├── _date_time_show_current_year_rails.md │ │ │ ├── _date_time_show_current_year_react.md │ │ │ ├── _date_time_show_current_year.html.erb │ │ │ └── _description.md │ │ ├── pb_overlay │ │ └── docs │ │ │ ├── _overlay_fullscreen_background.md │ │ │ ├── _overlay_vertical_dynamic_multi_directional.md │ │ │ ├── _overlay_fullscreen_opacity.md │ │ │ ├── _overlay_default.md │ │ │ ├── _overlay_hide_scroll_bar_react.md │ │ │ ├── _overlay_hide_scroll_bar_rails.md │ │ │ └── _overlay_toggle.md │ │ ├── pb_progress_step │ │ ├── progress_step.html.erb │ │ └── docs │ │ │ ├── _progress_step_vertical.md │ │ │ └── _progress_step_custom_icon.md │ │ ├── pb_timestamp │ │ └── docs │ │ │ ├── _description.md │ │ │ ├── _timestamp_align.md │ │ │ ├── _timestamp_show_date.md │ │ │ ├── _timestamp_show_time.md │ │ │ ├── _timestamp_show_date.html.erb │ │ │ ├── _footer.md │ │ │ ├── _timestamp_show_current_year.md │ │ │ └── _timestamp_updated_show_current_year.md │ │ ├── pb_title │ │ ├── docs │ │ │ ├── _title_display_size.md │ │ │ └── _title_responsive.html.erb │ │ └── title.html.erb │ │ ├── pb_background │ │ └── docs │ │ │ ├── _background_light.md │ │ │ ├── _background_light.html.erb │ │ │ ├── _background_gradient.html.erb │ │ │ ├── _background_white.html.erb │ │ │ ├── _background_image.md │ │ │ └── _background_status_subtle.md │ │ ├── pb_button │ │ └── docs │ │ │ ├── _button_full_width.md │ │ │ ├── _footer.md │ │ │ ├── _button_full_width.html.erb │ │ │ ├── _button_size.md │ │ │ ├── _button_form.html.erb │ │ │ ├── _button_options.html.erb │ │ │ ├── _button_accessibility.html.erb │ │ │ └── _button_loading.md │ │ ├── pb_date_year_stacked │ │ └── docs │ │ │ ├── index.js │ │ │ ├── _description.md │ │ │ ├── _date_year_stacked_default.md │ │ │ └── example.yml │ │ ├── pb_dialog │ │ ├── _dialog_context.tsx │ │ ├── dialog_body.html.erb │ │ └── docs │ │ │ ├── _dialog_loading.md │ │ │ └── _dialog_stacked_alert.md │ │ ├── pb_icon_circle │ │ └── docs │ │ │ ├── _icon_circle_default.html.erb │ │ │ ├── _footer.md │ │ │ ├── _description.md │ │ │ └── _icon_circle_color.md │ │ ├── pb_label_value │ │ ├── docs │ │ │ ├── _label_value_default.md │ │ │ ├── _label_value_details.md │ │ │ └── _footer.md │ │ └── _label_value.scss │ │ ├── pb_pagination │ │ ├── docs │ │ │ └── _pagination_default.html.erb │ │ └── pagination.html.erb │ │ ├── pb_select │ │ └── docs │ │ │ ├── _select_attributes.md │ │ │ ├── _description.md │ │ │ ├── _select_error.md │ │ │ ├── _footer.md │ │ │ ├── _select_react_hook.md │ │ │ └── _select_multiple.md │ │ ├── pb_time_range_inline │ │ └── docs │ │ │ ├── index.js │ │ │ └── example.yml │ │ ├── pb_caption │ │ ├── caption.html.erb │ │ └── docs │ │ │ └── _footer.md │ │ ├── pb_date_range_stacked │ │ ├── docs │ │ │ ├── index.js │ │ │ └── _date_range_stacked_default.html.erb │ │ └── _date_range_stacked.scss │ │ ├── pb_lightbox │ │ └── _lightbox_context.tsx │ │ ├── pb_phone_number_input │ │ ├── phone_number_input.html.erb │ │ ├── docs │ │ │ ├── _phone_number_input_default.html.erb │ │ │ ├── _phone_number_input_exclude_countries.md │ │ │ ├── _phone_number_input_only_countries.md │ │ │ ├── _phone_number_input_initial_country.html.erb │ │ │ ├── _phone_number_input_initial_country.md │ │ │ ├── _phone_number_input_only_countries.html.erb │ │ │ ├── _phone_number_input_exclude_countries.html.erb │ │ │ ├── _phone_number_input_hidden_inputs.html.erb │ │ │ └── _phone_number_input_preferred_countries.html.erb │ │ └── types.d.ts │ │ ├── pb_advanced_table │ │ ├── docs │ │ │ ├── _advanced_table_column_headers_multiple.md │ │ │ ├── _advanced_table_selectable_rows_no_subrows_react.md │ │ │ ├── _advanced_table_column_visibility_multi.md │ │ │ ├── _advanced_table_background_colors_rails.md │ │ │ ├── _advanced_table_with_custom_header_multi_header.md │ │ │ ├── _advanced_table_with_custom_header_multi_header_rails.md │ │ │ └── _advanced_table_responsive.md │ │ ├── Components │ │ │ └── LoadingCell.tsx │ │ └── Utilities │ │ │ └── types.ts │ │ ├── pb_circle_icon_button │ │ └── docs │ │ │ ├── _footer.md │ │ │ └── _circle_icon_button_size.md │ │ ├── pb_dropdown │ │ ├── docs │ │ │ ├── _dropdown_multi_select_with_autocomplete.md │ │ │ ├── _dropdown_with_autocomplete_with_subcomponents.md │ │ │ ├── _dropdown_with_custom_trigger.md │ │ │ ├── _dropdown_with_label.md │ │ │ ├── _dropdown_with_custom_trigger_rails.md │ │ │ ├── _dropdown_quickpick_default_dates.md │ │ │ ├── _dropdown_with_custom_radio_options_rails.md │ │ │ ├── _dropdown_quickpick.md │ │ │ ├── _dropdown_subtle_variant.md │ │ │ ├── _dropdown_with_autocomplete.md │ │ │ ├── _dropdown_with_custom_icon_options_react.md │ │ │ ├── _dropdown_multi_select.md │ │ │ ├── _dropdown_multi_select_rails.md │ │ │ └── _dropdown_with_custom_icon_options_rails.md │ │ ├── context │ │ │ └── index.tsx │ │ └── utilities │ │ │ └── index.ts │ │ ├── pb_form_pill │ │ └── docs │ │ │ ├── _form_pill_tag.html.erb │ │ │ ├── _form_pill_example.md │ │ │ ├── _form_pill_icon.html.erb │ │ │ └── _form_pill_example.html.erb │ │ ├── pb_multiple_users │ │ └── docs │ │ │ ├── _description.md │ │ │ ├── _multiple_users_size.md │ │ │ └── _multiple_users_with_tooltip.md │ │ ├── pb_date │ │ └── docs │ │ │ └── _date_with_show_current_year.html.erb │ │ ├── pb_star_rating │ │ └── docs │ │ │ ├── _star_rating_interactive.html.erb │ │ │ ├── _star_rating_default_value.html.erb │ │ │ └── _description.md │ │ ├── pb_text_input │ │ └── docs │ │ │ ├── _text_input_default.md │ │ │ ├── _text_input_no_label.html.erb │ │ │ ├── _text_input_disabled.html.erb │ │ │ ├── _text_input_error.md │ │ │ ├── _text_input_inline.html.erb │ │ │ ├── _text_input_sanitize.md │ │ │ ├── _description.md │ │ │ └── _text_input_custom.html.erb │ │ ├── pb_link │ │ └── docs │ │ │ ├── _link_disabled.html.erb │ │ │ └── _link_underline.html.erb │ │ ├── pb_loading_inline │ │ └── docs │ │ │ └── _description.md │ │ ├── pb_form │ │ └── docs │ │ │ ├── _footer.md │ │ │ ├── _form_form_with_validate.md │ │ │ ├── _form_form_with_loading.md │ │ │ └── example.yml │ │ ├── pb_icon_value │ │ └── docs │ │ │ ├── _description.md │ │ │ └── index.js │ │ ├── pb_source │ │ └── docs │ │ │ └── _description.md │ │ ├── pb_fixed_confirmation_toast │ │ └── docs │ │ │ └── _fixed_confirmation_toast_no_icon.md │ │ ├── pb_icon_button │ │ └── docs │ │ │ └── _icon_button_default.html.erb │ │ ├── pb_multi_level_select │ │ ├── multi_level_select.html.erb │ │ ├── docs │ │ │ ├── _multi_level_select_single.md │ │ │ └── _multi_level_select_react_hook.md │ │ └── context │ │ │ └── index.tsx │ │ ├── pb_toggle │ │ └── docs │ │ │ ├── _description.md │ │ │ ├── _toggle_custom.html.erb │ │ │ └── _toggle_default.html.erb │ │ ├── pb_multiple_users_stacked │ │ └── docs │ │ │ └── _description.md │ │ ├── pb_person_contact │ │ └── docs │ │ │ └── _footer.md │ │ ├── pb_map │ │ └── docs │ │ │ └── example.yml │ │ ├── pb_progress_pills │ │ └── docs │ │ │ ├── _progress_pills_full_width.html.erb │ │ │ ├── _progress_pills_status.html.erb │ │ │ └── _progress_pills_full_width_react.md │ │ ├── pb_dashboard_value │ │ └── docs │ │ │ └── index.js │ │ ├── pb_selectable_list │ │ └── docs │ │ │ └── index.js │ │ └── pb_selectable_icon │ │ └── docs │ │ └── index.js ├── .rspec ├── lib │ ├── playbook_ui.rb │ ├── generators │ │ └── kit │ │ │ ├── templates │ │ │ ├── kit_scss.erb │ │ │ ├── kit_example_rails.erb.tt │ │ │ ├── kit_js.erb.tt │ │ │ └── kit_ruby.erb.tt │ │ │ └── USAGE │ └── playbook │ │ ├── forms.rb │ │ ├── version.rb │ │ └── props │ │ └── string.rb ├── .lintstagedrc ├── bin │ ├── doc │ ├── setup │ └── build ├── test.sh ├── global-jest-setup.js ├── babel.config.js └── hot.sh ├── .eslintrc.json ├── .npmrc ├── docs └── CHANGELOG.md ├── .github ├── release-drafter.yml └── CODEOWNERS ├── .tool-versions ├── .env.docker ├── docker-compose.ci.yml ├── visualize-vite-bundle.sh ├── .eslintignore ├── docker-bake.hcl ├── mkdocs.yml └── Procfile /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /playbook-website/log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/tmp/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/lib/tasks/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/vendor/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/storage/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/vendor/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/tmp/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/spec/dummy/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/spec/dummy/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | {"extends": ["@powerhome"]} -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://npm.powerapp.cloud -------------------------------------------------------------------------------- /docs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ../playbook/CHANGELOG.md -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/log/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/tmp/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/lib/tasks/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/helpers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/system/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/storage/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/tmp/pids/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/vendor/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/.ruby-version: -------------------------------------------------------------------------------- 1 | ruby-3.3.0 -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/lib/tasks/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/storage/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/vendor/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/assets/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/db/development.sqlite3: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/controllers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/integration/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/vendor/javascript/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/lib/assets/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/lib/tasks/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/helpers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/system/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/tmp/storage/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | -------------------------------------------------------------------------------- /playbook-website/public/apple-touch-icon.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/.eslintignore: -------------------------------------------------------------------------------- 1 | fonts/** 2 | dist 3 | -------------------------------------------------------------------------------- /playbook/spec/dummy/public/apple-touch-icon.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/public/favicon.ico: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/helpers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/mailers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/models/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/system/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/public/apple-touch-icon.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/fixtures/files/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/assets/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/controllers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/integration/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/vendor/javascript/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/react-example/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | } 3 | -------------------------------------------------------------------------------- /playbook-website/.rspec: -------------------------------------------------------------------------------- 1 | --require spec_helper 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_user/docs/_footer.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/assets/builds/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/assets/images/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/controllers/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/fixtures/files/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/test/integration/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults 2 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/models/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/public/apple-touch-icon.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/test/fixtures/files/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/app/views/guides/dependencies/first.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/.ruby-version: -------------------------------------------------------------------------------- 1 | ruby-3.3.0 2 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/public/apple-touch-icon.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/controllers/concerns/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/javascript/components/.keep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/spec/dummy/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/.eslintignore: -------------------------------------------------------------------------------- 1 | /app/assets/builds/ -------------------------------------------------------------------------------- /examples/rails-react-example/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/app/views/guides/getting_started/icons/custom.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/app/views/guides/getting_started/icons/playbook.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_file_upload/docs/_description.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/playbook-rails/config/master.key: -------------------------------------------------------------------------------- 1 | 4ff3c5ad6ca41bd1071df74beb31a869 -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/_table.scss: -------------------------------------------------------------------------------- 1 | @import "styles/all"; -------------------------------------------------------------------------------- /examples/playbook-rails/app/views/layouts/mailer.text.erb: -------------------------------------------------------------------------------- 1 | <%= yield %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | template: | 2 | ## What’s Changed 3 | 4 | $CHANGES -------------------------------------------------------------------------------- /.tool-versions: -------------------------------------------------------------------------------- 1 | ruby 3.3.0 2 | yarn 1.22.19 3 | nodejs 22.15.1 4 | python 2.7.18 5 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/views/layouts/mailer.text.erb: -------------------------------------------------------------------------------- 1 | <%= yield %> 2 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/helpers/pages_helper.rb: -------------------------------------------------------------------------------- 1 | module PagesHelper 2 | end 3 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/views/layouts/mailer.text.erb: -------------------------------------------------------------------------------- 1 | <%= yield %> 2 | -------------------------------------------------------------------------------- /playbook/.rspec: -------------------------------------------------------------------------------- 1 | --format documentation 2 | --color 3 | --require rails_helper 4 | -------------------------------------------------------------------------------- /playbook/spec/dummy/config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | end 3 | -------------------------------------------------------------------------------- /playbook-website/config/deploy/production/values.yaml: -------------------------------------------------------------------------------- 1 | ingress: 2 | issueCert: true 3 | -------------------------------------------------------------------------------- /playbook-website/config/deploy/staging/values.yaml: -------------------------------------------------------------------------------- 1 | ingress: 2 | issueCert: true 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_image/docs/_description.md: -------------------------------------------------------------------------------- 1 | A responsive image component. -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged 5 | -------------------------------------------------------------------------------- /examples/rails-react-example/.npmrc: -------------------------------------------------------------------------------- 1 | '@fortawesome:registry'=https://registry.yarnpkg.com 2 | -------------------------------------------------------------------------------- /playbook-website/app/views/guides/_dependencies_index.html.erb: -------------------------------------------------------------------------------- 1 | dependencies will go here 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_filter/_filter.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './Filter' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/types/data.ts: -------------------------------------------------------------------------------- 1 | export type GenericObject = Record -------------------------------------------------------------------------------- /playbook/lib/playbook_ui.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "playbook" 4 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /examples/rails-react-example/.tool-versions: -------------------------------------------------------------------------------- 1 | ruby 3.3.0 2 | yarn 1.22.15 3 | nodejs 20.11.0 4 | -------------------------------------------------------------------------------- /playbook/.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "app/pb_kits/playbook/**/*.{js,jsx}": "yarn lint --fix" 3 | } 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md: -------------------------------------------------------------------------------- 1 | ### Min defaults to 0, Max to 100. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.env.docker: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | RAILS_ENV=development 3 | WEBPACKER_DEV_SERVER_HOST=0.0.0.0 4 | -------------------------------------------------------------------------------- /playbook-website/app/javascript/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module "playbook-ui"; 2 | declare module "*.svg"; -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/cursor_jsx.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/width_jsx.txt: -------------------------------------------------------------------------------- 1 | {'Card content'} -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.scss: -------------------------------------------------------------------------------- 1 | .pb_pb_line_graph { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_rich_text_editor/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@haxtheweb/deduping-fix'; -------------------------------------------------------------------------------- /docker-compose.ci.yml: -------------------------------------------------------------------------------- 1 | services: 2 | web: 3 | build: 4 | target: prod 5 | volumes: [] 6 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/position_jsx.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md: -------------------------------------------------------------------------------- 1 | Use to display a date range. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_hashtag/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Do not use as a button. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss: -------------------------------------------------------------------------------- 1 | .pb_pb_circle_chart { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.scss: -------------------------------------------------------------------------------- 1 | .pb_pb_gauge_chart { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/tokens/exports/exports.d.ts: -------------------------------------------------------------------------------- 1 | declare module "trix"; 2 | declare module '*.scss'; -------------------------------------------------------------------------------- /playbook/bin/doc: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e 4 | 5 | echo ">>> No Documentation to generate" 6 | -------------------------------------------------------------------------------- /playbook/lib/generators/kit/templates/kit_scss.erb: -------------------------------------------------------------------------------- 1 | <%= ".pb_#{@kit_name_underscore}" %> { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /playbook/lib/playbook/forms.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require_relative "forms/builder" 4 | -------------------------------------------------------------------------------- /playbook/test.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -e 4 | 5 | bin/setup 6 | bin/build 7 | bin/doc 8 | bin/test 9 | -------------------------------------------------------------------------------- /visualize-vite-bundle.sh: -------------------------------------------------------------------------------- 1 | # /bin/sh 2 | 3 | (cd playbook; rm -rf dist; yarn run vite-bundle-visualizer) 4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/border_radius_jsx.txt: -------------------------------------------------------------------------------- 1 | Card Content -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/min_width_jsx.txt: -------------------------------------------------------------------------------- 1 | {'Card content'} 2 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/shadow_in_use_jsx.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_border_radius.md: -------------------------------------------------------------------------------- 1 | `border_radius_md` is the card kit default 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md: -------------------------------------------------------------------------------- 1 | Use the `bold` prop to strongly emphasis your text. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.scss: -------------------------------------------------------------------------------- 1 | .pb_hastag_kit { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_online_status/online_status.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <% end %> 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("passphrase") %> 2 | -------------------------------------------------------------------------------- /playbook/global-jest-setup.js: -------------------------------------------------------------------------------- 1 | module.exports = async () => { 2 | process.env.TZ = "America/New_York"; 3 | } 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | playbook/fonts/** 2 | playbook/dist 3 | examples 4 | playbook-swift 5 | node_modules 6 | playbook-website -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/max_width_jsx.txt: -------------------------------------------------------------------------------- 1 | {'Card content'} -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/overflow_jsx.txt: -------------------------------------------------------------------------------- 1 | {'Card content'} 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_border_none.md: -------------------------------------------------------------------------------- 1 | Remove card border only for dashboard cards. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_contact/_contact.scss: -------------------------------------------------------------------------------- 1 | @import "../pb_body/body"; 2 | @import "../pb_icon/icon"; 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_gauge/gauge.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('Gauge', object.chart_options) %> 2 | 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/item.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md: -------------------------------------------------------------------------------- 1 | Icon used needs to be square. Icon size is 24px by 24px. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("pill", props: { text: "Default" }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md: -------------------------------------------------------------------------------- 1 | You can pass react hook props to the radio kit. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_typeahead/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-select' 2 | declare module 'react-select/*' -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/types/sizes.ts: -------------------------------------------------------------------------------- 1 | export type Sizes = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/types/spacing.ts: -------------------------------------------------------------------------------- 1 | export type Spacing = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' -------------------------------------------------------------------------------- /playbook/lib/generators/kit/templates/kit_example_rails.erb.tt: -------------------------------------------------------------------------------- 1 | <%%= pb_rails("<%= @kit_name_underscore %>") %> 2 | -------------------------------------------------------------------------------- /playbook/spec/dummy/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dummy", 3 | "private": true, 4 | "dependencies": {} 5 | } 6 | -------------------------------------------------------------------------------- /examples/react-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/number_spacing_jsx.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/tokens.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= react_component("Tokens") %> 3 |
-------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('BarGraph', object.chart_options) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_contact/docs/_description.md: -------------------------------------------------------------------------------- 1 | Use to display customer's or user's contact information. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_stacked/docs/_description.md: -------------------------------------------------------------------------------- 1 | Use to display the date, stacking month and day. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_detail/docs/_description.md: -------------------------------------------------------------------------------- 1 | Used for tables or designs with large amounts of data or text. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("file_upload") %> 2 | 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md: -------------------------------------------------------------------------------- 1 | To display results, use templates `single` or `default`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_highlight/docs/_description.md: -------------------------------------------------------------------------------- 1 | Highlight is used to pick out or emphasize content. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_legend/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Do not use as bullet points in a list. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_person/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as PersonDefault } from './_person_default.jsx' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_simple/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Do not use as turbolinks bar. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time/docs/_time_default.md: -------------------------------------------------------------------------------- 1 | Use this anywhere needed to display a certain timestamp 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_user_badge/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ## Things To Avoid 2 | Don’t use this to replace icon kit. 3 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/helpers/pages_helper.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module PagesHelper 4 | end 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_body/docs/_body_block.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("body") do %> 2 | I am body kit 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md: -------------------------------------------------------------------------------- 1 | You can pass react hook props to the checkbox kit. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_flex/flex.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/body.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/footer.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/header.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/layout.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_line_graph/line_graph.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('LineGraph', object.chart_options) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('PbBarGraph', object.react_props) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('PbLineGraph', object.react_props) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("skeleton_loading") %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.scss: -------------------------------------------------------------------------------- 1 | @import "../pb_icon/icon"; 2 | @import "../pb_body/body"; 3 | -------------------------------------------------------------------------------- /playbook/spec/dummy/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | end 3 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/helpers/pages_helper.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module PagesHelper 4 | end 5 | -------------------------------------------------------------------------------- /playbook-website/bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require_relative "../config/boot" 3 | require "rake" 4 | Rake.application.run 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.md: -------------------------------------------------------------------------------- 1 | 2 | This is used when there is no avatar for a particular user. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_button_toolbar/docs/_description.md: -------------------------------------------------------------------------------- 1 | This kit should primarily hold the most commonly used buttons. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts: -------------------------------------------------------------------------------- 1 | declare module "*.scss" 2 | declare module "highcharts-react-official" -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_highlight/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as HighlightDefault } from './_highlight_default.jsx' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon/docs/_icon_animate.md: -------------------------------------------------------------------------------- 1 | A spinner icon can show a user that something is loading or saving. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_label_pill/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as LabelPillDefault } from './_label_pill_default.jsx' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/sidebar.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_line_graph/_line_graph.scss: -------------------------------------------------------------------------------- 1 | rect.highcharts-background { 2 | fill: #0000 !important; 3 | } 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('PbCircleChart', object.react_props) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('PbGaugeChart', object.react_props) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_person/docs/_person_default.md: -------------------------------------------------------------------------------- 1 | Use this kit to display users, homeowners, or person of contact. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_popover/docs/_popover_list.md: -------------------------------------------------------------------------------- 1 | Notice `offset` is not set so the popover is flush with the content. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_radio/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Try to avoid using if you have nested options. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("section_separator") %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.md: -------------------------------------------------------------------------------- 1 | Selectable Cards can pass text or block content. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timeline/detail.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timeline/timeline.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.md: -------------------------------------------------------------------------------- 1 | Use these to represent what affiliation an employee has. 2 | -------------------------------------------------------------------------------- /playbook/lib/generators/kit/USAGE: -------------------------------------------------------------------------------- 1 | Description: 2 | Create a new Playbook kit 3 | 4 | Example: 5 | rails g kit "button" 6 | -------------------------------------------------------------------------------- /examples/playbook-rails/bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require_relative "../config/boot" 3 | require "rake" 4 | Rake.application.run 5 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module ApplicationHelper 4 | end 5 | -------------------------------------------------------------------------------- /examples/react-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/examples/react-example/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/examples/react-example/public/logo192.png -------------------------------------------------------------------------------- /examples/react-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/examples/react-example/public/logo512.png -------------------------------------------------------------------------------- /playbook-website/app/views/pages/changelog.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/icons.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/public/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_badge/badge.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= object.text %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_body/body.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag(object.tag) do %> 2 | <%= object.content %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md: -------------------------------------------------------------------------------- 1 | Remove the "$" symbol by setting an empty string: `symbol: ""`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_detail/detail.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag(object.tag) do %> 2 | <%= object.content %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon/docs/_icon_pull.md: -------------------------------------------------------------------------------- 1 | Icon Pull can be used to indicate that the user can perform a pull action. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_label_pill/docs/_description.md: -------------------------------------------------------------------------------- 1 | This kit combines the caption and pill kit with all its variants. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/docs/_description.md: -------------------------------------------------------------------------------- 1 | Layouts used for positioning content inside of pages, cards, or containers. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_legend/docs/_description.md: -------------------------------------------------------------------------------- 1 | A key used to compare the variables and their value in any given graph. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_message/message_mention.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md: -------------------------------------------------------------------------------- 1 | Selectable Cards can pass images with optional text. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md: -------------------------------------------------------------------------------- 1 | Selectable Cards can show an input indicating state. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md: -------------------------------------------------------------------------------- 1 | Increase colors your icon GREEN & Decrease colors your icon RED. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time_stacked/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as TimeStackedDefault } from './_time_stacked_default' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md: -------------------------------------------------------------------------------- 1 | Set the prop `icon` with the desired icon to display inside the tooltip. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md: -------------------------------------------------------------------------------- 1 | You can pass `react-hook-form` props to the Typeahead kit. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/utilities/_number_spacing.scss: -------------------------------------------------------------------------------- 1 | .ns_tabular { 2 | font-variant-numeric: tabular-nums !important; 3 | } 4 | -------------------------------------------------------------------------------- /playbook/spec/dummy/bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require_relative "../config/boot" 3 | require "rake" 4 | Rake.application.run 5 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module ApplicationHelper 4 | end 5 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/controllers/pages_controller.rb: -------------------------------------------------------------------------------- 1 | class PagesController < ApplicationController 2 | def index 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/models/application_record.rb: -------------------------------------------------------------------------------- 1 | class ApplicationRecord < ActiveRecord::Base 2 | primary_abstract_class 3 | end 4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/changelog_swift.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
-------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/z_index_token.txt: -------------------------------------------------------------------------------- 1 | @import "tokens/positioning" 2 | 3 | .selector { 4 | z-index: $z_10; 5 | } -------------------------------------------------------------------------------- /playbook-website/app/views/pages/icons_custom.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/icons_playbook.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/tokens_show.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= react_component("TokensExamples") %> 3 |
-------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_bread_crumbs/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as BreadCrumbsDefault } from './_bread_crumbs_default.jsx' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md: -------------------------------------------------------------------------------- 1 | Remove the "$" symbol by setting an empty string: `symbol=""`. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component('DistributionBar', object.chart_options) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_form_group/form_group.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag(:div) do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pill/docs/_pill_example.md: -------------------------------------------------------------------------------- 1 | Pass `textTransform = "none"` prop and the text will remain without modification. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_radio/docs/_description.md: -------------------------------------------------------------------------------- 1 | Radio is a control that allows the user to only choose one predefined option. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.md: -------------------------------------------------------------------------------- 1 | Default Selectable Cards are multi select by default. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_stat_value/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ## Things To Avoid 2 | Don’t use this as a replacement for titles on a page. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_textarea/docs/_description.md: -------------------------------------------------------------------------------- 1 | Area where user can enter larger amounts of text. Commonly used in forms. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md: -------------------------------------------------------------------------------- 1 | Enable timezone display by passing `show_timezone` / `showTimezone`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.md: -------------------------------------------------------------------------------- 1 | Use this kit as a form of label value only for a numeric value. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_title_detail/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as TitleDetailDefault } from './_title_detail_default.jsx' 2 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/Procfile.dev: -------------------------------------------------------------------------------- 1 | web: bin/rails server -p 3000 2 | js: NODE_OPTIONS=--openssl-legacy-provider yarn build --watch 3 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/assets/stylesheets/application.scss: -------------------------------------------------------------------------------- 1 | @import 'playbook'; 2 | @import 'font-awesome'; 3 | 4 | @import './_fonts' -------------------------------------------------------------------------------- /examples/playbook-rails/bin/importmap: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | require_relative "../config/application" 4 | require "importmap/commands" 5 | -------------------------------------------------------------------------------- /examples/playbook-rails/public/robots.txt: -------------------------------------------------------------------------------- 1 | # See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/changelog_figma.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/overflow_token.txt: -------------------------------------------------------------------------------- 1 | @import "tokens/overflow 2 | 3 | .selector { 4 | overflow-x: $visible; 5 | } -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/shadow_erb.txt: -------------------------------------------------------------------------------- 1 | @import "tokens/shadows"; 2 | 3 | .selector { 4 | box-shadow: $shadow_deep; 5 | } -------------------------------------------------------------------------------- /playbook-website/app/views/pages/global_props.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= react_component("GlobalProps") %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/icons_font_awesome.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= render_markdown(@data) %> 3 |
4 | -------------------------------------------------------------------------------- /playbook-website/public/images/pb-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/playbook-website/public/images/pb-favicon.ico -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md: -------------------------------------------------------------------------------- 1 | BreadCrumbs can be used for keeping a user aware of their route location. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("card", props: { 2 | }) do %> 3 | Card content 4 | <% end %> 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_copy_button/_copy_button.scss: -------------------------------------------------------------------------------- 1 | .pb_copy_button_kit { 2 | width: fit-content; 3 | height: fit-content; 4 | } 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md: -------------------------------------------------------------------------------- 1 | Defaults to `[1900, 2100]`. Combine with min-max prop for best results. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md: -------------------------------------------------------------------------------- 1 | Pass in `show_current_year` to show this date's current year. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md: -------------------------------------------------------------------------------- 1 | Pass in `showCurrentYear` to show this date's current year. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("detail", props: { 2 | text: "I am a detail kit" 3 | }) %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_flex/docs/_flex_default.md: -------------------------------------------------------------------------------- 1 | ##### Prop 2 | 3 | * `orientation` | **Type**: String | **Values**: row | column 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md: -------------------------------------------------------------------------------- 1 | The color prop also allows for use of custom colors passed in as HEX codes. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md: -------------------------------------------------------------------------------- 1 | The `fullScreen` prop also allows you to use `color` along with it. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag(:ul) do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("stat_value", props: { value: 5294, unit: "appt" }) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_data_table.md: -------------------------------------------------------------------------------- 1 | Tighter spacing in first- and last-child cells of each row for data-heavy tables. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_lg.md: -------------------------------------------------------------------------------- 1 | Use table size `"lg"` to add padding around each row to maximize reading comfortability. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_md.md: -------------------------------------------------------------------------------- 1 | Use table size `"md"` to add padding around each row to increase reading comfortability. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timestamp/docs/_description.md: -------------------------------------------------------------------------------- 1 | This low profile kit displays time. Elapsed, current, future, or otherwise. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_title/docs/_title_display_size.md: -------------------------------------------------------------------------------- 1 | Responsive sizes for large screens and tablets, perfect for digital signage. 2 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/public/robots.txt: -------------------------------------------------------------------------------- 1 | # See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/javascript/packs/application.ts: -------------------------------------------------------------------------------- 1 | import "./component_context" 2 | 3 | import "playbook-ui/dist/playbook-rails.js" 4 | -------------------------------------------------------------------------------- /examples/rails-react-example/config/webpack/environment.js: -------------------------------------------------------------------------------- 1 | const { environment } = require('@rails/webpacker') 2 | 3 | module.exports = environment 4 | -------------------------------------------------------------------------------- /examples/rails-react-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/line_height_jsx.txt: -------------------------------------------------------------------------------- 1 | @import "tokens/line_height"; 2 | 3 | .selector { 4 | line-height: $lh_tight; 5 | } -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/position_token.txt: -------------------------------------------------------------------------------- 1 | @import "token/positioning" 2 | 3 | .selector { 4 | position: $absolute; 5 | } -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/spacing_tokens_jsx.txt: -------------------------------------------------------------------------------- 1 | @import "tokens/spacing" 2 | 3 | .selector { 4 | margin-top: $space_lg; 5 | } -------------------------------------------------------------------------------- /playbook-website/config/deploy/prs/values.yaml: -------------------------------------------------------------------------------- 1 | ingress: 2 | issueCert: false # Certificate is issued once per cluster in the playbook-prs namespace 3 | -------------------------------------------------------------------------------- /playbook-website/config/initializers/openai.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | Rails.application.config.openai_api_key = ENV["OPENAI_API_KEY"] 4 | -------------------------------------------------------------------------------- /playbook-website/public/images/pb-favicon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/playbook-website/public/images/pb-favicon-180.png -------------------------------------------------------------------------------- /playbook-website/public/images/pb-favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/playbook-website/public/images/pb-favicon-192.png -------------------------------------------------------------------------------- /playbook-website/public/images/pb-favicon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powerhome/playbook/HEAD/playbook-website/public/images/pb-favicon-512.png -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md: -------------------------------------------------------------------------------- 1 | 2 | The Status prop is used to display a user's online status like popular chat apps. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_background/docs/_background_light.md: -------------------------------------------------------------------------------- 1 | By default, the Background kit sets background color to 'light' as seen here. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_badge/docs/_description.md: -------------------------------------------------------------------------------- 1 | Badges can be used for notification, tags, and status. They are used for count and numbers. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag(:nav) do %> 2 | <%= content.presence %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_button/docs/_button_full_width.md: -------------------------------------------------------------------------------- 1 | This button is used many times for mobile or other things like cards and sidebars. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_button/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Never use more than one primary button on a page at any given time. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md: -------------------------------------------------------------------------------- 1 | Small `Currency` kits have the negative sign on the lefthand side of the "$" symbol. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_stacked/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Do not use in data tables where data density is a priority. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx' 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const DialogContext = React.createContext(null) 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_rails.md: -------------------------------------------------------------------------------- 1 | We are able to wrap our Gauge kits within multiple other Flex and Card components. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_highlight/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Avoid highlighting words that don’t apply or whole content areas. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("icon_circle", props: { 2 | icon: "rocket" 3 | }) %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md: -------------------------------------------------------------------------------- 1 | Use this kit to display a label and value text for almost every data entry. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("online_status", props: { no_border: true }) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("pagination", props: { model: @users, view: self}) %> 2 | 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("progress_simple", props: { percent: 64.9 }) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_select/docs/_select_attributes.md: -------------------------------------------------------------------------------- 1 | Inspect the element and notice the data-attribute being added to the ` 3 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/min_height_jsx.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | XS 4 | 5 | 6 | 320px min 7 | 8 | 9 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md: -------------------------------------------------------------------------------- 1 | The `size` prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md: -------------------------------------------------------------------------------- 1 | Use `decimals: "matching"` when you want the full decimal amount displayed as a single number rather than split visually. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md: -------------------------------------------------------------------------------- 1 | To select time as well, you should pass the `enableTime` boolean prop. You can also enable timezone display by passing `showTimezone`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md: -------------------------------------------------------------------------------- 1 | The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/utilities/index.ts: -------------------------------------------------------------------------------- 1 | export { separateChildComponents, prepareSubcomponents } from './subComponentHelper'; 2 | export { handleClickOutside } from './clickOutsideHelper'; -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.md: -------------------------------------------------------------------------------- 1 | Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon_value/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as IconValueDefault } from './_icon_value_default.jsx' 2 | export { default as IconValueAlign } from './_icon_value_align.jsx' 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= react_component("MultiLevelSelect", object.multi_level_select_options) %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_phone_number_input/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'intl-tel-input/build/js/intlTelInputWithUtils.js' { 2 | const intlTelInput: any; 3 | export default intlTelInput; 4 | } -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("flex") do %> 2 | <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md: -------------------------------------------------------------------------------- 1 | When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_select/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Try to avoid using select when there are limited options to choose from (ie either or questions, yes/no questions, etc). 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.md: -------------------------------------------------------------------------------- 1 | Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md: -------------------------------------------------------------------------------- 1 | Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_one_action.md: -------------------------------------------------------------------------------- 1 | If there is one button on each row of the table, ideally, it should use the `secondary` variant and be placed at the end of the row 2 | 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("text_input", props: { 2 | inline: true, 3 | label: "Hover Over Text Below", 4 | value: "Inline Input" 5 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_24_hour.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("time_picker", props: { id: "time-picker-24-hour", label: "24-Hour Format", time_format: "24hour" }) %> 2 | 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_error.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("time_picker", props: { 2 | error: "Please select a valid time", 3 | id: "time-picker-error" 4 | }) %> 5 | 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_toggle/docs/_description.md: -------------------------------------------------------------------------------- 1 | Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md: -------------------------------------------------------------------------------- 1 | Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_user_badge/docs/_description.md: -------------------------------------------------------------------------------- 1 | This kit was created to display employee icons related to a Nitro user. Currently there is the PVI logo and the Million Dollar Rep Icon. 2 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class ApplicationController < ActionController::Base 4 | helper Playbook::PbKitHelper 5 | end 6 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_tree ../images 2 | //= link_directory ../stylesheets .css 3 | //= link_tree ../../javascript .js 4 | //= link_tree ../../../vendor/javascript .js 5 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/assets/stylesheets/application.scss: -------------------------------------------------------------------------------- 1 | // Font Awesome Free 2 | @import "font-awesome"; 3 | 4 | // Playbook UI 5 | @import "playbook"; 6 | 7 | // Import fonts 8 | @import "fonts" 9 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/channels/application_cable/connection.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module ApplicationCable 4 | class Connection < ActionCable::Connection::Base 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /playbook-website/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require_relative "config/environment" 4 | 5 | run Rails.application 6 | Rails.application.load_server 7 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_background/docs/_background_image.md: -------------------------------------------------------------------------------- 1 | To add a lazyload on the background image simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md: -------------------------------------------------------------------------------- 1 | Pass in `variant: "button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md: -------------------------------------------------------------------------------- 1 | Pass in `variant="button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md: -------------------------------------------------------------------------------- 1 | Setting the `allowInput` prop to true permits users to key values directly into the input. This prop is set to false by default. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md: -------------------------------------------------------------------------------- 1 | Default label prop is `"Date Picker"`. To remove the label set the `hideLabel` prop in React or the `hide_label` prop in Rails to `true`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md: -------------------------------------------------------------------------------- 1 | Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md: -------------------------------------------------------------------------------- 1 | Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md: -------------------------------------------------------------------------------- 1 | ##### Prop 2 | 3 | * `reverse` | **Type**: Boolean 4 | 5 | - When set to `true` this prop will reverse the order of items in the flex container. 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md: -------------------------------------------------------------------------------- 1 | Pressing Submit will trigger a loading state where the button content is replaced by a spinner icon and the submit button will be disabled. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("form_pill", props: { 2 | text_transform: "lowercase" , 3 | text: "THIS IS A TAG", 4 | tabindex: 0, 5 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_home_address_street/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ## Things To Avoid 2 | Don’t change the design format (Bold fonts and light fonts), and keep the text stacked. Do not use on a singe line. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_label_value/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ## Things to Avoid 2 | Try not to use this kit without padding as it will make text illegible if placed right next to the same kit or other kits. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md: -------------------------------------------------------------------------------- 1 | Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon_rails.md: -------------------------------------------------------------------------------- 1 | Optionally remove the expand/collapse icon(s) from any collapsible nav item by passing "none" to the `icon_right` prop on that nav item. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon_react.md: -------------------------------------------------------------------------------- 1 | Optionally remove the expand/collapse icon(s) from any collapsible nav item by passing "none" to the `iconRight` prop on that nav item. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pill/pill.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %> 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_card/docs/_description.md: -------------------------------------------------------------------------------- 1 | Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md: -------------------------------------------------------------------------------- 1 | When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md: -------------------------------------------------------------------------------- 1 | Use the `showCurrentYear`/`show_current_year` prop to show the year even if it is the current year. This is set to false by default. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_title_count/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as TitleCountDefault } from './_title_count_default.jsx' 2 | export { default as TitleCountAlign } from './_title_count_align.jsx' 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/tokens/_transition.scss: -------------------------------------------------------------------------------- 1 | $transition_default: 0.3s !default; 2 | $transition_short: 0.15s !default; 3 | $transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035) !default; 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base' 2 | export * from './colors' 3 | export * from './data' 4 | export * from './display' 5 | export * from './sizes' 6 | export * from './spacing' -------------------------------------------------------------------------------- /playbook/spec/dummy/config/boot.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) 4 | 5 | require "bundler/setup" # Set up gems listed in the Gemfile. 6 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/channels/application_cable/connection.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module ApplicationCable 4 | class Connection < ActionCable::Connection::Base 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /examples/playbook-rails/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require_relative "config/environment" 4 | 5 | run Rails.application 6 | Rails.application.load_server 7 | -------------------------------------------------------------------------------- /playbook-website/app/views/layouts/_hotjar.html.erb: -------------------------------------------------------------------------------- 1 | <% if Rails.env.production? %> 2 | 3 | 4 | <% end %> 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.md: -------------------------------------------------------------------------------- 1 | `column_styling` can also be used to control the background color on individual cells in a given column as shown here. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md: -------------------------------------------------------------------------------- 1 | The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.md: -------------------------------------------------------------------------------- 1 | The optional `header` item within `column_definitions` can also be used with multi headers as seen here. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md: -------------------------------------------------------------------------------- 1 | A spline can be added by including a separate chart data with the `type: 'spline'` attribute. 2 | A color can also be specified for the spline. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_button/docs/_button_loading.md: -------------------------------------------------------------------------------- 1 | Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("date_picker", props: { 2 | label: "Date Picker", 3 | picker_id: "week_date_picker", 4 | selection_type: "week" 5 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md: -------------------------------------------------------------------------------- 1 | You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag(object.tag, { 2 | id: "item_#{object.drag_id}", 3 | draggable: true 4 | }) do %> 5 | <%= content.presence %> 6 | <% end %> 7 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md: -------------------------------------------------------------------------------- 1 | Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md: -------------------------------------------------------------------------------- 1 | Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green` -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.md: -------------------------------------------------------------------------------- 1 | Optionally enable the `single` variant to replace checkboxes with radios so the input accepts and returns only a single selection. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md: -------------------------------------------------------------------------------- 1 | Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md: -------------------------------------------------------------------------------- 1 | To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md: -------------------------------------------------------------------------------- 1 | Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_person_contact/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ## Thing To Avoid 2 | • Don’t unstack the contacts: email & phone. 3 | • Keep the fonts exact in size and weight, don’t change the color variations. 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("rich_text_editor", props: {focus: true}) %> 2 |
3 | <%= pb_rails("rich_text_editor", props: {focus: true}) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md: -------------------------------------------------------------------------------- 1 | Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("textarea", props: { 2 | inline: true, 3 | resize: "auto", 4 | rows: 1, 5 | value:"Try clicking into this text." 6 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time_range_inline/docs/example.yml: -------------------------------------------------------------------------------- 1 | examples: 2 | 3 | rails: 4 | - time_range_inline_default: Default 5 | 6 | 7 | react: 8 | - time_range_inline_default: Default 9 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/app/mailers/application_mailer.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class ApplicationMailer < ActionMailer::Base 4 | default from: "from@example.com" 5 | layout "mailer" 6 | end 7 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/javascript/application.js: -------------------------------------------------------------------------------- 1 | // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails 2 | import "@hotwired/turbo-rails" 3 | import "controllers" 4 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/mailers/application_mailer.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class ApplicationMailer < ActionMailer::Base 4 | default from: "from@example.com" 5 | layout "mailer" 6 | end 7 | -------------------------------------------------------------------------------- /playbook-website/config/initializers/markdown_template.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | require "markdown_helper" 4 | 5 | ActionView::Template.register_template_handler(:md, PlaybookWebsite::Markdown::Helper) 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md: -------------------------------------------------------------------------------- 1 | Status Subtle colors can be passed into the background kit. `success_subtle`, `warning_subtle`,`error_subtle`, `info_subtle` and `neutral_subtle` -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md: -------------------------------------------------------------------------------- 1 | ##### Prop 2 | This kit uses `default` color by default, and can be replaced with colors below: 3 | 4 | * `light` `lighter` `success` `error` `link` -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("currency", props: { 2 | amount: "309", 3 | label: "Sales", 4 | size: "md", 5 | symbol: "", 6 | unit: "/week" 7 | }) %> 8 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md: -------------------------------------------------------------------------------- 1 | To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md: -------------------------------------------------------------------------------- 1 | To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("distribution_bar", props: { 2 | widths: [4,5,3], 3 | colors: ["data_7", "data_1", "neutral"] 4 | }) %> 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md: -------------------------------------------------------------------------------- 1 | To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md: -------------------------------------------------------------------------------- 1 | Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("file_upload", props: {id: "error", error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_form/docs/example.yml: -------------------------------------------------------------------------------- 1 | examples: 2 | 3 | rails: 4 | - form_form_with: Default 5 | - form_form_with_validate: Default + Validation 6 | - form_form_with_loading: Default + Loading 7 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | const MultiLevelSelectContext = createContext({}); 4 | 5 | export default MultiLevelSelectContext; -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md: -------------------------------------------------------------------------------- 1 | A spline can be added by including a separate chart data with the `type: 'spline'` attribute. 2 | A color can also be specified for the spline. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("phone_number_input", props: { 2 | initial_country: "br", 3 | only_countries: ['us', 'br'] 4 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pill/docs/_pill_default_swift.md: -------------------------------------------------------------------------------- 1 | ![pill-default](https://github.com/powerhome/playbook/assets/92755007/608cb5dd-9400-45f4-afb2-ac1bbd972c3d) 2 | 3 | ```swift 4 | PBPill("default") 5 | ``` -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md: -------------------------------------------------------------------------------- 1 | When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_section_separator/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | Do not use section separators to handle list; instead, use List Kit. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md: -------------------------------------------------------------------------------- 1 | You can pass react-hook-form props to a select kit. You can use `register` which will make the value available for both the form validation and submission. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_text_input/docs/_description.md: -------------------------------------------------------------------------------- 1 | Area where user can enter small amount of text. Commonly used in forms.
2 | Note: This kit does not handle form validation logic. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_time_picker/time_picker.html.erb: -------------------------------------------------------------------------------- 1 | <%= react_component("TimePicker", object.time_picker_react_props, 'data-pb-time-picker': true, 'data-validation-message': object.validation_message) %> 2 | -------------------------------------------------------------------------------- /playbook/bin/build: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e 4 | 5 | # Build 6 | 7 | echo ">>> Building" 8 | time bin/rubocop --display-cop-names --extra-details --parallel --display-style-guide 9 | time yarn lint 10 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/javascript/application.js: -------------------------------------------------------------------------------- 1 | // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails 2 | import '@hotwired/turbo-rails' 3 | import 'controllers' 4 | -------------------------------------------------------------------------------- /examples/rails-react-example/config/webpack/test.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = process.env.NODE_ENV || 'development' 2 | 3 | const environment = require('./environment') 4 | 5 | module.exports = environment.toWebpackConfig() 6 | -------------------------------------------------------------------------------- /playbook-website/app/views/guides/dependencies.html.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dependencies 3 | --- 4 | 5 | Playbook needs on these things. 6 | 7 |
8 | <%= render partial: 'guides/dependencies_index'%> 9 |
10 | -------------------------------------------------------------------------------- /playbook-website/config/environment.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | # Load the Rails application. 4 | require_relative "application" 5 | 6 | # Initialize the Rails application. 7 | Rails.application.initialize! 8 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts: -------------------------------------------------------------------------------- 1 | import { ExpandedState } from "@tanstack/react-table" 2 | 3 | export type ExpandedStateObject = Extract< 4 | ExpandedState, 5 | Record 6 | > -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_light.md: -------------------------------------------------------------------------------- 1 | Card can leverage the max-width property. Learn more in our visual guidelines. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("checkbox" , props: { 2 | error: true, 3 | text: "Checkbox Label", 4 | value: "checkbox-value", 5 | name: "checkbox-name" 6 | }) %> 7 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_map/docs/example.yml: -------------------------------------------------------------------------------- 1 | examples: 2 | 3 | 4 | react: 5 | - map_default: Default 6 | - map_with_plugin: Map With Polygon Draw Plugin 7 | - map_with_custom_button: Map With Custom Button -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md: -------------------------------------------------------------------------------- 1 | You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_nav/docs/_description.md: -------------------------------------------------------------------------------- 1 | The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("phone_number_input", props: { 2 | initial_country: 'gb', 3 | exclude_countries: ['us', 'br'] 4 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md: -------------------------------------------------------------------------------- 1 | When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("textarea", props: { label: "Label"}) do %> 2 | 3 | <% end %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md: -------------------------------------------------------------------------------- 1 | Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error). -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/utilities/flexbox_global_props/_flex_grow.scss: -------------------------------------------------------------------------------- 1 | $flex_grow_values: ( 2 | 0: 0, 3 | 1: 1, 4 | ); 5 | 6 | @include global_props_responsive_css($flex_grow_values, 'flex_grow', 'flex-grow'); 7 | -------------------------------------------------------------------------------- /playbook/spec/dummy/config/environment.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | # Load the Rails application. 4 | require_relative "application" 5 | 6 | # Initialize the Rails application. 7 | Rails.application.initialize! 8 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/controllers/pages_controller_test.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class PagesControllerTest < ActionDispatch::IntegrationTest 4 | # test "the truth" do 5 | # assert true 6 | # end 7 | end 8 | -------------------------------------------------------------------------------- /examples/rails-react-example/config/webpack/development.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = process.env.NODE_ENV || 'development' 2 | 3 | const environment = require('./environment') 4 | 5 | module.exports = environment.toWebpackConfig() 6 | -------------------------------------------------------------------------------- /examples/rails-react-example/config/webpack/production.js: -------------------------------------------------------------------------------- 1 | process.env.NODE_ENV = process.env.NODE_ENV || 'production' 2 | 3 | const environment = require('./environment') 4 | 5 | module.exports = environment.toWebpackConfig() 6 | -------------------------------------------------------------------------------- /mkdocs.yml: -------------------------------------------------------------------------------- 1 | site_name: Playbook 2 | site_description: Playbook Documentation 3 | nav: 4 | - "Home": "README.md" 5 | - "Upgrade Guide": "upgrade-guide.md" 6 | - "Change Log": "CHANGELOG.md" 7 | plugins: 8 | - techdocs-core 9 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/justify_self_jsx.txt: -------------------------------------------------------------------------------- 1 | 2 | Body content 3 | 4 | 5 | 6 | Body content 7 | -------------------------------------------------------------------------------- /playbook-website/app/views/pages/code_snippets/max_height_jsx.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | MD 4 | 5 | 6 | is stopped at sm height 7 | 8 | 9 | -------------------------------------------------------------------------------- /playbook-website/config/initializers/sentry.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | Sentry.init do |config| 4 | config.dsn = ENV["SENTRY_DSN"] 5 | config.breadcrumbs_logger = %i[active_support_logger http_logger] 6 | end 7 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_button_toolbar/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as ButtonToolbarDefault } from './_button_toolbar_default.jsx' 2 | export { default as ButtonToolbarSecondary } from './_button_toolbar_secondary.jsx' 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dashboard_value/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as DashboardValueDefault } from './_dashboard_value_default.jsx' 2 | export { default as DashboardValueAlign } from './_dashboard_value_align.jsx' 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("date_picker", props: { 2 | label: "Date Picker", 3 | picker_id: "disabled_date", 4 | selection_type: "month" 5 | }) %> 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss: -------------------------------------------------------------------------------- 1 | @import "../tokens/spacing"; 2 | 3 | .pb_date_range_stacked { 4 | .pb_date_range_stacked_arrow { 5 | margin: 0 ($space_sm - 3) 0; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md: -------------------------------------------------------------------------------- 1 | Filter can leverage the max-width property. Learn more in our visual guidelines. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md: -------------------------------------------------------------------------------- 1 | ##### Prop 2 | 3 | * `wrap` | **Type**: Boolean 4 | 5 | - When set to `true` this prop will move the next item in flex container to a new line if there is no more room. 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md: -------------------------------------------------------------------------------- 1 | Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md: -------------------------------------------------------------------------------- 1 | Custom data colors allow for color customization to match the needs of business requirements. 2 | You can use Playbook's color tokens or use hex values. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_list/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as SelectableListCheckbox } from './_selectable_list_checkbox.jsx' 2 | export { default as SelectableListRadio } from './_selectable_list_radio.jsx' 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as TimelineLabel } from './Label'; 2 | export { default as TimelineDetail } from './Detail'; 3 | export { default as TimelineStep } from './Step'; 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_title_count/docs/_description.md: -------------------------------------------------------------------------------- 1 | This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("toggle", props: { size: "sm" }) do %> 2 | 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("toggle", props: { 2 | checked: true 3 | }) %> 4 | 5 |
6 | 7 | <%= pb_rails("toggle", props: { 8 | checked: false 9 | }) %> 10 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/bin/dev: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | if ! foreman version &> /dev/null 4 | then 5 | echo "Installing foreman..." 6 | gem install foreman 7 | fi 8 | 9 | foreman start -f Procfile.dev "$@" 10 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # frozen_string_literal: true 3 | 4 | APP_PATH = File.expand_path("../config/application", __dir__) 5 | require_relative "../config/boot" 6 | require "rails/commands" 7 | -------------------------------------------------------------------------------- /examples/playbook-rails/test/application_system_test_case.rb: -------------------------------------------------------------------------------- 1 | require "test_helper" 2 | 3 | class ApplicationSystemTestCase < ActionDispatch::SystemTestCase 4 | driven_by :selenium, using: :chrome, screen_size: [1400, 1400] 5 | end 6 | -------------------------------------------------------------------------------- /examples/rails-react-example/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | class ApplicationController < ActionController::Base 4 | helper Playbook::PbKitHelper 5 | 6 | def index; end 7 | end 8 | -------------------------------------------------------------------------------- /examples/rails-react-example/bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # frozen_string_literal: true 3 | 4 | APP_PATH = File.expand_path("../config/application", __dir__) 5 | require_relative "../config/boot" 6 | require "rails/commands" 7 | -------------------------------------------------------------------------------- /examples/rails-react-example/config/environment.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | # Load the Rails application. 4 | require_relative "application" 5 | 6 | # Initialize the Rails application. 7 | Rails.application.initialize! 8 | -------------------------------------------------------------------------------- /playbook-website/app/javascript/site_styles/_kit_api.scss: -------------------------------------------------------------------------------- 1 | @import "playbook-tokens/typography"; 2 | .kearning{ 3 | letter-spacing: $lspace_looser; 4 | } 5 | 6 | .card{ 7 | max-width: fit-content; 8 | display: inline-block; 9 | } -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_highlight.md: -------------------------------------------------------------------------------- 1 | Card highlight can pass status, product, and category colors. List of all colors can be viewed here. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("checkbox" , props: { 2 | text: "Checked Checkbox", 3 | value: "checkbox-value", 4 | checked: true, 5 | name: "checkbox-name" 6 | }) %> 7 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_time/docs/_description.md: -------------------------------------------------------------------------------- 1 | Date Time is a composite kit that leverages the [Date](/kits/date) and [Time](/kits/time) kits. The Date Time kit is affected by time zones and defaults to "America/New_York". -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md: -------------------------------------------------------------------------------- 1 | The QuickPick variant provides predefined date based options when `variant="quickpick"` is used. 2 | 3 | Open the Dropdown above to see the default options. 4 | 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md: -------------------------------------------------------------------------------- 1 | For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md: -------------------------------------------------------------------------------- 1 | The `autocomplete` prop can be used to add autocomplete or typeahead functionality to the Dropdown's default Trigger. This prop is set to 'false' by default. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md: -------------------------------------------------------------------------------- 1 | Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md: -------------------------------------------------------------------------------- 1 | Sometimes you may want to create a custom description that is easier for users to read. In this case, you can use the `acceptedFilesDescription` prop. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_label_value/_label_value.scss: -------------------------------------------------------------------------------- 1 | @import "../tokens/spacing"; 2 | 3 | .pb_label_value_kit, 4 | .pb_label_value_kit_details { 5 | .pb_caption_kit_md { 6 | margin-bottom: $space-xs/1.5; 7 | } 8 | } -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md: -------------------------------------------------------------------------------- 1 | Layout can leverage the max-width property. Learn more in our visual guidelines. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md: -------------------------------------------------------------------------------- 1 | Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md: -------------------------------------------------------------------------------- 1 | `inputProps` is passed directly to an underlying Text Input kit. See the specific docs here for more details. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %> 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("progress_simple", props: { percent: 64.9 }) %> 2 | 3 |
4 | 5 | <%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %> 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md: -------------------------------------------------------------------------------- 1 | Progress Simple can pass colors - primary, green, red, and yellow. Variants names are `default`, `positive`, `negative`, and `warning`, respectively. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md: -------------------------------------------------------------------------------- 1 | Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_precision.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("stat_value", props: { value: 1529.00000, precision: 2 }) %> 2 | 3 | <%= pb_rails("stat_value", props: { value: 1529.13, precision: 4 }) %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("text_input", props: {label: "Custom Input"}) do %> 2 | 3 | <% end %> 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md: -------------------------------------------------------------------------------- 1 | Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements. 2 | 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md: -------------------------------------------------------------------------------- 1 | ##### Prop 2 | Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/utilities/flexbox_global_props/_flex_shrink.scss: -------------------------------------------------------------------------------- 1 | $flex_shrink_values: ( 2 | 0: 0, 3 | 1: 1, 4 | ); 5 | 6 | @include global_props_responsive_css($flex_shrink_values, 'flex_shrink', 'flex-shrink'); 7 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | setup: cd playbook-website && node scripts/global-props.mjs 2 | website: cd playbook-website && ./bin/rails server -p 3000 3 | website-watcher: cd playbook-website && bin/vite dev 4 | library-watcher: cd playbook && yarn watch 5 | -------------------------------------------------------------------------------- /examples/playbook-rails-webpack/config/environment.rb: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | # Load the Rails application. 4 | require_relative "application" 5 | 6 | # Initialize the Rails application. 7 | Rails.application.initialize! 8 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("avatar", props: { 2 | name: "Terry Johnson", 3 | image_url: "https://randomuser.me/api/portraits/men/44.jpg", 4 | grayscale: true 5 | }) %> 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_avatar/docs/_footer.md: -------------------------------------------------------------------------------- 1 | ### Things to Avoid 2 | 3 | Avoid using Avatar with the user's name right next to it or under it. Use User kit instead. Do not use this kit for images that are not profile pictures. 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb: -------------------------------------------------------------------------------- 1 |
2 | 3 | <%= pb_rails("card", props: { border_none: true }) do %> 4 | Card content 5 | <% end %> 6 | 7 |
8 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md: -------------------------------------------------------------------------------- 1 | By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `week`. To activate it set `selection_type` prop in a rails file to `week`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md: -------------------------------------------------------------------------------- 1 | `multiSelect` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown. 2 | 3 | `multiSelect` is set to false by default. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md: -------------------------------------------------------------------------------- 1 | Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md: -------------------------------------------------------------------------------- 1 | To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("phone_number_input", props: { 2 | hidden_inputs: true, 3 | id: "hidden_inputs", 4 | name: "hidden_inputs", 5 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md: -------------------------------------------------------------------------------- 1 | Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_select/docs/_select_multiple.md: -------------------------------------------------------------------------------- 1 | The `multiple` prop enables multiple selections; however, for a better user experience, we recommend our [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react) kit. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md: -------------------------------------------------------------------------------- 1 | The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_react.md: -------------------------------------------------------------------------------- 1 | The `borderRadius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/global_props/border_radius) tokens, with `sm` as default. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("skeleton_loading", props: { stack: 5 }) %> 2 | 3 | <%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_star_rating/docs/_description.md: -------------------------------------------------------------------------------- 1 | A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md: -------------------------------------------------------------------------------- 1 | The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md: -------------------------------------------------------------------------------- 1 | The `updated` variant can also be used in conjunction with the `showCurrentYear`/`show_current_year` prop to show the year even if it is the current year. -------------------------------------------------------------------------------- /playbook/hot.sh: -------------------------------------------------------------------------------- 1 | echo "Creating Local Release" 2 | yarn release 3 | rm dist/playbook-rails.css && mv dist/playbook-react.css dist/playbook.css 4 | 5 | echo "Copying local release to Nitro" 6 | cp -R dist/* $1/node_modules/playbook-ui/dist/ 7 | -------------------------------------------------------------------------------- /playbook/lib/generators/kit/templates/kit_ruby.erb.tt: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | 3 | module Playbook 4 | module Pb<%= @kit_name_pascal %> 5 | class <%= @kit_name_pascal %> < ::Playbook::KitBase 6 | end 7 | end 8 | end 9 | -------------------------------------------------------------------------------- /examples/playbook-rails/app/views/pages/index.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("circle_icon_button", props: { 2 | variant: "primary", 3 | icon: "plus" 4 | }) %> 5 | <%= pb_rails("title", props: { 6 | }) do %> 7 | Welcome to Playbook 8 | <% end %> 9 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md: -------------------------------------------------------------------------------- 1 | The `responsive` prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set `responsive="none"`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_card/docs/_card_selected.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("card") do %> 2 | Card content 3 | <% end %> 4 | 5 |
6 | 7 | <%= pb_rails("card", props: {selected: true}) do %> 8 | Card content 9 | <% end %> 10 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md: -------------------------------------------------------------------------------- 1 | The external control functionality can also be used to toggle multiple collapsibles with the same control. See the code example below to see this in action. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md: -------------------------------------------------------------------------------- 1 | These examples highlight how the buttons within the Dialog can be stacked when using the Status Alert variant. It also has a link style for the buttons for the mobile views. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md: -------------------------------------------------------------------------------- 1 | `multi_select` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown. 2 | 3 | `multi_select` is set to false by default. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md: -------------------------------------------------------------------------------- 1 | Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("file_upload", props: {id: "import_file"}) do %> 2 | 7 | <% end %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_filter/docs/_filter_default.md: -------------------------------------------------------------------------------- 1 | To display the "No Filters Selected" text, the `filters` prop must be `null`. As a suggestion, check the values of each key in your filters object. If they are all falsy, return `null`. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_content_tag do %> 2 | <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %> 3 | <% end %> 4 | 5 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_legend/docs/_legend_colors.md: -------------------------------------------------------------------------------- 1 | By default legend kit uses `data_1` color. 2 | Pass the color prop and use any desired value from `$data_colors`, `$status_colors`, `$product_colors` and `$category_colors` list. 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_message/docs/_message_default.md: -------------------------------------------------------------------------------- 1 | Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section. 2 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb: -------------------------------------------------------------------------------- 1 | <% chart_options = { 2 | series:[{data:[{ name: "Name", y: 45 }]}] 3 | } %> 4 | 5 | <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %> 6 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb: -------------------------------------------------------------------------------- 1 | <%= pb_rails("phone_number_input", props: { 2 | initial_country: "br", 3 | preferred_countries: ['us', 'br', 'ph', 'gb'] 4 | }) %> -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_pill/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as PillDefault } from './_pill_default.jsx' 2 | export { default as PillVariants } from './_pill_variants.jsx' 3 | export { default as PillExample } from './_pill_example.jsx' 4 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md: -------------------------------------------------------------------------------- 1 | Tiptap allows you to set content within the editor using the 'content' prop within useEditor. See the code snippet below to see how this can be done. -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_selectable_icon/docs/index.js: -------------------------------------------------------------------------------- 1 | export { default as SelectableIconDefault } from './_selectable_icon_default.jsx' 2 | export { default as SelectableIconSingleSelect } from './_selectable_icon_single_select.jsx' 3 | -------------------------------------------------------------------------------- /playbook/app/pb_kits/playbook/pb_table/docs/_table_striped.md: -------------------------------------------------------------------------------- 1 | Optionally pass the `striped` (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data. 2 | --------------------------------------------------------------------------------