From 12e93c0f1ea0954448515d412c7a9d375e9e51b2 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 30 Oct 2024 14:26:05 -0400 Subject: [PATCH 1/9] Add Font Awesome Setup getting started doc w/ handoff copy --- .../guides/getting_started/font_awesome.md | 99 +++++++++++++++++++ .../config/initializers/global_variables.rb | 4 +- 2 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 playbook-website/app/views/guides/getting_started/font_awesome.md diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md new file mode 100644 index 0000000000..b2e33b0ccd --- /dev/null +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -0,0 +1,99 @@ +--- +title: Font Awesome Setup +description: Icons in a design system are small graphical elements that represent actions, objects, and symbols. +icon: font-awesome +--- + +Playbook integrates with [Font Awesome 6 Pro](https://fontawesome.com/), a premium icon library, because of its extensive collection of high-quality icons. This integration enhances the visual appeal and usability of websites and applications. + +Some Font Awesome benefits: + +**1. Wide Range of Icons:** Font Awesome offers a vast selection of icons that cater to various needs, ensuring you can find the perfect icon for any project. +**2. Ease of Use:** The icons are straightforward to implement, allowing you to quickly and easily add visual elements to your web projects. +**3. Visual Appeal:** Incorporating these icons can improve the aesthetic of your site or application, making it more attractive to users. +**4. User-Friendliness:** Icons can help users navigate and understand your website or application more efficiently, enhancing their overall experience. + +Integrating Font Awesome with Playbook ensures that you have access to these benefits, making your projects more polished and professional. + +![Font Awesome Icons](https://cdn.hashnode.com/res/hashnode/image/upload/v1702882676689/8da380bd-d295-4d7f-8d29-7154ab845781.png) + +## Rails Setup (default with asset pipeline) + +**Make sure you have Rails 7 or higher. This example used 7.0.8** + +**1.** Create your new app + +```sh +rails new CoolNewApp +``` + +**2.** Add the sassc-rails gem as [outlined by Rails docs](/guides/getting_started/ruby_on_rails_setup) & add our playbook_ui ruby gem inside your Gemfile. + +```rb +# app/Gemfile + gem "sassc-rails" + gem "playbook_ui", "~>11.4.0" +``` + +**3.** Add the View Helper to Enable Rails Kits + +```rb +# app/controllers/application_controller.rb + helper Playbook::PbKitHelper +``` + +**4.** Import the Kit Styles + +```rb +# app/assets/stylesheets/application.scss + @import "playbook"; +``` + +or be selective: + +```rb +# app/assets/stylesheets/application.scss + @import "tokens/index"; + @import "pb_body/body"; +``` + +**5.** Setup Pro or Free Font Awesome to use our Icon Component. (Free Users: currently only Free Regular is supported in our icon component structure) + +Pro: + +```rb +# app/assets/stylesheets/application.scss + @import "font-awesome-pro"; + @import "font-awesome-pro/solid"; + @import "font-awesome-pro/regular"; + @import "playbook"; +``` + +```rb +# app/Gemfile + source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do + gem "font-awesome-pro-sass", "6.2.0" + end +``` + +Free: + +```rb +# app/assets/stylesheets/application.scss + @import "font-awesome"; +``` + +```rb +# app/Gemfile + source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do + gem "font-awesome-pro-sass", "6.2.0" + end +``` + +Bundle all the things! + +```sh +bundle install +``` + +**6.** **Go build awesome stuff!** \ No newline at end of file diff --git a/playbook-website/config/initializers/global_variables.rb b/playbook-website/config/initializers/global_variables.rb index 68052286d5..31bca424be 100644 --- a/playbook-website/config/initializers/global_variables.rb +++ b/playbook-website/config/initializers/global_variables.rb @@ -71,8 +71,8 @@ # Move HTML figma to the end -move_pages = navigation[:getting_started][:pages].select { |page| ["HTML&_CSS", "figma_setup", "how_to_theme"].include?(page[:page_id]) } -navigation[:getting_started][:pages].reject! { |page| ["HTML&_CSS", "figma_setup", "how_to_theme"].include?(page[:page_id]) } +move_pages = navigation[:getting_started][:pages].select { |page| ["HTML&_CSS", "figma_setup", "how_to_theme", "font_awesome"].include?(page[:page_id]) } +navigation[:getting_started][:pages].reject! { |page| ["HTML&_CSS", "figma_setup", "how_to_theme", "font_awesome"].include?(page[:page_id]) } navigation[:getting_started][:pages].concat(move_pages) DOCS = navigation From f762b450a419054a59f3f37a30c7af67fc9ccdeb Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 30 Oct 2024 14:26:54 -0400 Subject: [PATCH 2/9] Tweak wording and elaborate on benefits --- .../views/guides/getting_started/font_awesome.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md index b2e33b0ccd..1acbd90e31 100644 --- a/playbook-website/app/views/guides/getting_started/font_awesome.md +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -1,17 +1,17 @@ --- title: Font Awesome Setup -description: Icons in a design system are small graphical elements that represent actions, objects, and symbols. +description: Playbook seamlessly integrates with Font Awesome, a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability. icon: font-awesome --- -Playbook integrates with [Font Awesome 6 Pro](https://fontawesome.com/), a premium icon library, because of its extensive collection of high-quality icons. This integration enhances the visual appeal and usability of websites and applications. +Playbook seamlessly integrates with [Font Awesome](https://fontawesome.com/), a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability. Some Font Awesome benefits: -**1. Wide Range of Icons:** Font Awesome offers a vast selection of icons that cater to various needs, ensuring you can find the perfect icon for any project. -**2. Ease of Use:** The icons are straightforward to implement, allowing you to quickly and easily add visual elements to your web projects. -**3. Visual Appeal:** Incorporating these icons can improve the aesthetic of your site or application, making it more attractive to users. -**4. User-Friendliness:** Icons can help users navigate and understand your website or application more efficiently, enhancing their overall experience. +**1. Wide Range of Icons:** Font Awesome offers a vast selection of icons to suit a variety of needs. You can easily find the perfect icon for your project through their [icon search](https://fontawesome.com/search). +**2. Ease of Use:** The icons are straightforward to implement. With just a few lines of code, you can quickly and easily add visual elements to your web projects. Note, a Pro subscription is required for access to a wider range of icons beyond the [Free set](https://fontawesome.com/search?o=r&m=free&s=regular). +**3. Visual Appeal:** Incorporating these icons can improve the aesthetic of your site or application, making it more attractive to users. With Playbook, you have the flexibility to customize color, size, and animations. +**4. User-Friendliness:** Icons can help users navigate and understand your website or application more efficiently, enhancing their overall experience. Font Awesome icons are web fonts compatible with most browsers and are optimized for performance and accessibility. Integrating Font Awesome with Playbook ensures that you have access to these benefits, making your projects more polished and professional. @@ -19,7 +19,7 @@ Integrating Font Awesome with Playbook ensures that you have access to these ben ## Rails Setup (default with asset pipeline) -**Make sure you have Rails 7 or higher. This example used 7.0.8** +**Make sure you are on Rails 7 or higher.** **1.** Create your new app @@ -32,7 +32,7 @@ rails new CoolNewApp ```rb # app/Gemfile gem "sassc-rails" - gem "playbook_ui", "~>11.4.0" + gem "playbook_ui" ``` **3.** Add the View Helper to Enable Rails Kits From ae696f9ed76cddf82a1b53a81bfa51c9518da854 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 30 Oct 2024 14:38:10 -0400 Subject: [PATCH 3/9] Edit wording --- .../views/guides/getting_started/font_awesome.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md index 1acbd90e31..dbca81e0a4 100644 --- a/playbook-website/app/views/guides/getting_started/font_awesome.md +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -17,7 +17,7 @@ Integrating Font Awesome with Playbook ensures that you have access to these ben ![Font Awesome Icons](https://cdn.hashnode.com/res/hashnode/image/upload/v1702882676689/8da380bd-d295-4d7f-8d29-7154ab845781.png) -## Rails Setup (default with asset pipeline) +## Ruby on Rails Setup (default with asset pipeline) **Make sure you are on Rails 7 or higher.** @@ -35,14 +35,14 @@ rails new CoolNewApp gem "playbook_ui" ``` -**3.** Add the View Helper to Enable Rails Kits +**3.** Add the View Helper to enable Rails Kits ```rb # app/controllers/application_controller.rb helper Playbook::PbKitHelper ``` -**4.** Import the Kit Styles +**4.** Import the Playbook Kit Styles ```rb # app/assets/stylesheets/application.scss @@ -57,7 +57,9 @@ or be selective: @import "pb_body/body"; ``` -**5.** Setup Pro or Free Font Awesome to use our Icon Component. (Free Users: currently only Free Regular is supported in our icon component structure) +**5.** Setup Pro or Free Font Awesome to use our Icon Component. + +*Free Users: currently only [Free Regular](https://fontawesome.com/search?o=r&m=free&s=regular) icons are supported in our icon component structure* Pro: @@ -90,10 +92,10 @@ Free: end ``` -Bundle all the things! +**6.** Bundle all the things! ```sh bundle install ``` -**6.** **Go build awesome stuff!** \ No newline at end of file +**7.** **Go build awesome stuff!** \ No newline at end of file From e6cde861c5b18ef1b1cc76da884685cc769cd7d4 Mon Sep 17 00:00:00 2001 From: Mark Date: Wed, 30 Oct 2024 14:39:55 -0400 Subject: [PATCH 4/9] Add all dependencies to getting started --- .../guides/getting_started/dependencies.md | 52 +++++++++++++++++++ .../config/initializers/global_variables.rb | 7 +-- yarn.lock | 12 ----- 3 files changed, 56 insertions(+), 15 deletions(-) create mode 100644 playbook-website/app/views/guides/getting_started/dependencies.md diff --git a/playbook-website/app/views/guides/getting_started/dependencies.md b/playbook-website/app/views/guides/getting_started/dependencies.md new file mode 100644 index 0000000000..3323271988 --- /dev/null +++ b/playbook-website/app/views/guides/getting_started/dependencies.md @@ -0,0 +1,52 @@ +--- +title: Dependencies +icon: code +description: Some of our kits require additional libraries to run properly. +--- + +## Unbundled Dependencies + +These kits require you to install additional libraries to get full functionality. + +To install them add them to your project using `yarn add`, `npm install`, or manually add them to your `package.json` file. + +| Kit | Kit Link | NPM Link(s) | Dependency(s) | +|---------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|---------------------------------------------| +| **Icon** | [Icon](https://playbook.powerapp.cloud/kits/icon/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Icon Circle** | [Icon Circle](https://playbook.powerapp.cloud/kits/icon_circle/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Icon Stat Value** | [Icon Stat Value](https://playbook.powerapp.cloud/kits/icon_stat_value/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Icon Value** | [Icon Value](https://playbook.powerapp.cloud/kits/icon_value/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free) | fontawesome-free | +| **Map** | [Map](https://playbook.powerapp.cloud/kits/map/react) | [maplibre-gl](https://www.npmjs.com/package/maplibre-gl) | maplibre-gl | +| **Rich Text Editor**
(TipTap Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | - [@tiptap/core](https://www.npmjs.com/package/@tiptap/core)
- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react)
- [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/starter-kit)
- [@tiptap/extension-document](https://www.npmjs.com/package/@tiptap/extension-document)
- [@tiptap/extension-highlight](https://www.npmjs.com/package/@tiptap/extension-highlight)
- [@tiptap/extension-horizontal-rule](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)
- [@tiptap/extension-link](https://www.npmjs.com/package/@tiptap/extension-link)
- [@tiptap/extension-paragraph](https://www.npmjs.com/package/@tiptap/extension-paragraph)
- [@tiptap/extension-text](https://www.npmjs.com/package/@tiptap/extension-text)
- [@tiptap/pm](https://www.npmjs.com/package/@tiptap/pm) | - @tiptap/core
- @tiptap/react
- @tiptap/starter-kit
- @tiptap/extension-document
- @tiptap/extension-highlight
- @tiptap/extension-horizontal-rule
- @tiptap/extension-link
- @tiptap/extension-paragraph
- @tiptap/extension-text
- @tiptap/pm | + +## Bundled Dependencies + +These kits use dependencies that are bundled with them; no additional installation is required. + +| Kit | Kit Link | NPM Link(s) | Dependency(s) | +|------------------------|-----------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------| +| **Advanced Table** | [Advanced Table](https://playbook.powerapp.cloud/kits/advanced_table/react) | [@tanstack/react-table](https://www.npmjs.com/package/@tanstack/react-table) | @tanstack/react-table | +| **Bar Graph** | [Bar Graph](https://playbook.powerapp.cloud/kits/bar_graph/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Circle Chart** | [Circle Chart](https://playbook.powerapp.cloud/kits/circle_chart/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Date Picker** | [Date Picker](https://playbook.powerapp.cloud/kits/date_picker/react) | [flatpickr](https://www.npmjs.com/package/flatpickr) | flatpickr | +| **Dialog** | [Dialog](https://playbook.powerapp.cloud/kits/dialog/react) | [react-modal](https://www.npmjs.com/package/react-modal) | react-modal | +| **File Upload** | [File Upload](https://playbook.powerapp.cloud/kits/file_upload/react) | [react-dropzone](https://www.npmjs.com/package/react-dropzone) | react-dropzone | +| **Filter** | [Filter](https://playbook.powerapp.cloud/kits/filter/react) | [react-popper](https://www.npmjs.com/package/react-popper) | react-popper | +| **Gauge** | [Gauge](https://playbook.powerapp.cloud/kits/gauge/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Highlight** | [Highlight](https://playbook.powerapp.cloud/kits/highlight/react) | [react-highlight-words](https://www.npmjs.com/package/react-highlight-words) | react-highlight-words | +| **LightBox** | [LightBox](https://playbook.powerapp.cloud/kits/lightbox/react) | [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch) | react-zoom-pan-pinch | +| **Line Graph** | [Line Graph](https://playbook.powerapp.cloud/kits/line_graph/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Multi Level Select** | [Multi Level Select](https://playbook.powerapp.cloud/kits/multi_level_select/react) | [lodash](https://www.npmjs.com/package/lodash) | lodash | +| **Passphrase** | [Passphrase](https://playbook.powerapp.cloud/kits/passphrase/react) | [react-popper](https://www.npmjs.com/package/react-popper) | react-popper | +| **Phone Number Input** | [Phone Number Input](https://playbook.powerapp.cloud/kits/phone_number_input/react) | [intl-tel-input](https://www.npmjs.com/package/intl-tel-input) | intl-tel-input | +| **Popover** | [Popover](https://playbook.powerapp.cloud/kits/popover/react) | [lodash](https://www.npmjs.com/package/lodash),
[react-popper](https://www.npmjs.com/package/react-popper) | lodash,
react-popper | +| **Rich Text Editor**
(Trix Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | [trix](https://www.npmjs.com/package/trix),
[react-trix](https://www.npmjs.com/package/react-trix) | trix,
react-trix | +| **Tooltip** | [Tooltip](https://playbook.powerapp.cloud/kits/tooltip/react) | [@floating-ui/react](https://www.npmjs.com/package/@floating-ui/react) | @floating-ui/react | +| **Treemap Chart** | [Treemap Chart](https://playbook.powerapp.cloud/kits/treemap_chart/react) | [highcharts](https://www.npmjs.com/package/highcharts),
[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,
highcharts-react-official | +| **Typeahead** | [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react) | [react-select](https://www.npmjs.com/package/react-select),
[lodash](https://www.npmjs.com/package/lodash) | react-select,
lodash | +| **Walkthrough** | [Walkthrough](https://playbook.powerapp.cloud/kits/walkthrough/react) | [react-joyride](https://www.npmjs.com/package/react-joyride) | react-joyride | + +## Notes +**Rich Text Editor**: This kit supports two different editors: +**TipTap Editor**: Requires manual installation of `tiptap` and various `@tiptap/*` extensions (listed above under Unbundled Dependencies). +**Trix Editor**: Dependencies (`trix` and `react-trix`) are bundled with the kit; no extra installation is needed. diff --git a/playbook-website/config/initializers/global_variables.rb b/playbook-website/config/initializers/global_variables.rb index 68052286d5..ca695bca59 100644 --- a/playbook-website/config/initializers/global_variables.rb +++ b/playbook-website/config/initializers/global_variables.rb @@ -69,10 +69,11 @@ ], } -# Move HTML figma to the end +# Move these pages to the end of the Getting Started page +page_names = ["HTML&_CSS", "figma_setup", "how_to_theme", "dependencies"] -move_pages = navigation[:getting_started][:pages].select { |page| ["HTML&_CSS", "figma_setup", "how_to_theme"].include?(page[:page_id]) } -navigation[:getting_started][:pages].reject! { |page| ["HTML&_CSS", "figma_setup", "how_to_theme"].include?(page[:page_id]) } +move_pages = navigation[:getting_started][:pages].select { |page| page_names.include?(page[:page_id]) } +navigation[:getting_started][:pages].reject! { |page| page_names.include?(page[:page_id]) } navigation[:getting_started][:pages].concat(move_pages) DOCS = navigation diff --git a/yarn.lock b/yarn.lock index bc890a2c0b..d8c29927aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3760,13 +3760,6 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== -"@types/flatpickr@3.1.2": - version "3.1.2" - resolved "https://npm.powerapp.cloud/@types/flatpickr/-/flatpickr-3.1.2.tgz#767e04fea776ddb399007028bed1a885e26d6d52" - integrity sha512-vCEuLqfSlpPhLDOvxyYMIlX20Dwn3XSEeYf9rXfcldDQdLVrtxDdIzE82xhlEFVeHpERujCCQIqETNEUrGsVtA== - dependencies: - flatpickr "*" - "@types/fs-extra@^8.0.1": version "8.1.5" resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.5.tgz#33aae2962d3b3ec9219b5aca2555ee00274f5927" @@ -6642,11 +6635,6 @@ flat-cache@^2.0.1: rimraf "2.6.3" write "1.0.3" -flatpickr@*, flatpickr@^4.6.13: - version "4.6.13" - resolved "https://npm.powerapp.cloud/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94" - integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw== - flatted@^2.0.0: version "2.0.2" resolved "https://npm.powerapp.cloud/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" From 430969a494672f9dc6d491471f28b14f432943a8 Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 30 Oct 2024 14:41:53 -0400 Subject: [PATCH 5/9] Talk a little about building awesome stuff --- .../app/views/guides/getting_started/font_awesome.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md index dbca81e0a4..63a5ca7f6f 100644 --- a/playbook-website/app/views/guides/getting_started/font_awesome.md +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -59,7 +59,7 @@ or be selective: **5.** Setup Pro or Free Font Awesome to use our Icon Component. -*Free Users: currently only [Free Regular](https://fontawesome.com/search?o=r&m=free&s=regular) icons are supported in our icon component structure* +*Free Users: currently only [Free Regular](https://fontawesome.com/search?o=r&m=free&s=regular) icons are supported in our icon component structure.* Pro: @@ -98,4 +98,10 @@ Free: bundle install ``` -**7.** **Go build awesome stuff!** \ No newline at end of file +**7.** **Go build awesome stuff!** + +Refer to our [Icon kit](/kits/icon) to get started with Font Awesome icons in Playbook. + +```rb +<%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %> +``` \ No newline at end of file From 0764da448bc9bf5f9f783e7c16d9cd3755570c2f Mon Sep 17 00:00:00 2001 From: Gary Kang Date: Wed, 30 Oct 2024 14:56:28 -0400 Subject: [PATCH 6/9] Link rather than duplicate Ruby on Rails setup steps Tweak the Free and Pro copy --- .../guides/getting_started/font_awesome.md | 50 +++---------------- 1 file changed, 8 insertions(+), 42 deletions(-) diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md index 63a5ca7f6f..93d22cd775 100644 --- a/playbook-website/app/views/guides/getting_started/font_awesome.md +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -21,47 +21,11 @@ Integrating Font Awesome with Playbook ensures that you have access to these ben **Make sure you are on Rails 7 or higher.** -**1.** Create your new app +**1.** Follow the [Ruby on Rails Setup getting started page](/guides/getting_started/ruby_on_rails_setup) to setup Playbook with your Rails project. -```sh -rails new CoolNewApp -``` - -**2.** Add the sassc-rails gem as [outlined by Rails docs](/guides/getting_started/ruby_on_rails_setup) & add our playbook_ui ruby gem inside your Gemfile. - -```rb -# app/Gemfile - gem "sassc-rails" - gem "playbook_ui" -``` +**2.** Setup Pro or Free Font Awesome to use our Icon Component. -**3.** Add the View Helper to enable Rails Kits - -```rb -# app/controllers/application_controller.rb - helper Playbook::PbKitHelper -``` - -**4.** Import the Playbook Kit Styles - -```rb -# app/assets/stylesheets/application.scss - @import "playbook"; -``` - -or be selective: - -```rb -# app/assets/stylesheets/application.scss - @import "tokens/index"; - @import "pb_body/body"; -``` - -**5.** Setup Pro or Free Font Awesome to use our Icon Component. - -*Free Users: currently only [Free Regular](https://fontawesome.com/search?o=r&m=free&s=regular) icons are supported in our icon component structure.* - -Pro: +**Pro:** ```rb # app/assets/stylesheets/application.scss @@ -78,7 +42,9 @@ Pro: end ``` -Free: +**Free:** + +*Currently only [Free Regular](https://fontawesome.com/search?o=r&m=free&s=regular) icons are supported in our icon component structure.* ```rb # app/assets/stylesheets/application.scss @@ -92,13 +58,13 @@ Free: end ``` -**6.** Bundle all the things! +**3.** Bundle all the things! ```sh bundle install ``` -**7.** **Go build awesome stuff!** +**4.** **Go build awesome stuff!** Refer to our [Icon kit](/kits/icon) to get started with Font Awesome icons in Playbook. From 41651d26eca9eed59b927cf9128b07ff028431ae Mon Sep 17 00:00:00 2001 From: Mark Date: Wed, 30 Oct 2024 15:18:40 -0400 Subject: [PATCH 7/9] Fix yarn lock --- yarn.lock | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/yarn.lock b/yarn.lock index d8c29927aa..bc890a2c0b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3760,6 +3760,13 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== +"@types/flatpickr@3.1.2": + version "3.1.2" + resolved "https://npm.powerapp.cloud/@types/flatpickr/-/flatpickr-3.1.2.tgz#767e04fea776ddb399007028bed1a885e26d6d52" + integrity sha512-vCEuLqfSlpPhLDOvxyYMIlX20Dwn3XSEeYf9rXfcldDQdLVrtxDdIzE82xhlEFVeHpERujCCQIqETNEUrGsVtA== + dependencies: + flatpickr "*" + "@types/fs-extra@^8.0.1": version "8.1.5" resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.5.tgz#33aae2962d3b3ec9219b5aca2555ee00274f5927" @@ -6635,6 +6642,11 @@ flat-cache@^2.0.1: rimraf "2.6.3" write "1.0.3" +flatpickr@*, flatpickr@^4.6.13: + version "4.6.13" + resolved "https://npm.powerapp.cloud/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94" + integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw== + flatted@^2.0.0: version "2.0.2" resolved "https://npm.powerapp.cloud/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" From 711f2cab6c9c2afd941b9833cd40ba80a465bbc5 Mon Sep 17 00:00:00 2001 From: Gary Kang <42440452+kangaree@users.noreply.github.com> Date: Wed, 30 Oct 2024 16:25:01 -0400 Subject: [PATCH 8/9] Update font_awesome.md image --- .../app/views/guides/getting_started/font_awesome.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md index 93d22cd775..b4c7f1495b 100644 --- a/playbook-website/app/views/guides/getting_started/font_awesome.md +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -15,7 +15,7 @@ Some Font Awesome benefits: Integrating Font Awesome with Playbook ensures that you have access to these benefits, making your projects more polished and professional. -![Font Awesome Icons](https://cdn.hashnode.com/res/hashnode/image/upload/v1702882676689/8da380bd-d295-4d7f-8d29-7154ab845781.png) +![font-awesome-icons](https://github.com/user-attachments/assets/293458ea-3295-4479-b149-24b14c095e40) ## Ruby on Rails Setup (default with asset pipeline) @@ -70,4 +70,4 @@ Refer to our [Icon kit](/kits/icon) to get started with Font Awesome icons in Pl ```rb <%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %> -``` \ No newline at end of file +``` From ef241b6cc9bdcf88ea1f4808a044bc894451f8fc Mon Sep 17 00:00:00 2001 From: Gary Kang <42440452+kangaree@users.noreply.github.com> Date: Thu, 31 Oct 2024 07:48:08 -0400 Subject: [PATCH 9/9] Update font_awesome.md image --- .../app/views/guides/getting_started/font_awesome.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md index b4c7f1495b..732a79757b 100644 --- a/playbook-website/app/views/guides/getting_started/font_awesome.md +++ b/playbook-website/app/views/guides/getting_started/font_awesome.md @@ -15,7 +15,7 @@ Some Font Awesome benefits: Integrating Font Awesome with Playbook ensures that you have access to these benefits, making your projects more polished and professional. -![font-awesome-icons](https://github.com/user-attachments/assets/293458ea-3295-4479-b149-24b14c095e40) +![fontawesome](https://github.com/user-attachments/assets/638b63ad-56d3-4819-8e05-fcbb175bedc7) ## Ruby on Rails Setup (default with asset pipeline)