-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PLAY-739] Rebuild Getting Started (#2475)
<img width="1726" alt="Screenshot 2023-04-19 at 2 29 35 PM" src="https://user-images.githubusercontent.com/8194056/233167385-e618aed1-bb3a-4a08-8ac3-087fb2559db0.png"> **How to test?** Steps to confirm the desired behavior: Go to the `/getting_started` page, check its content. Click on all the links available on the page and check the design and content. #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code. --------- Co-authored-by: Israel Molestina <[email protected]> Co-authored-by: Nida Ghuman <[email protected]> Co-authored-by: Carlos Lima <[email protected]> Co-authored-by: Mark Rosenberg <[email protected]> Co-authored-by: Jasper Furniss <[email protected]> Co-authored-by: Jasper Furniss <[email protected]>
- Loading branch information
7 people
authored
Apr 24, 2023
1 parent
d795237
commit 187c21a
Showing
16 changed files
with
304 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
22 changes: 22 additions & 0 deletions
22
playbook-website/app/views/pages/getting_started/html.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" }) do %> | ||
| <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" }) do %> | ||
| <div> | ||
| <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%> | ||
| <%= pb_rails("icon", props: { icon: "flag-checkered"}) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %> | ||
| <%end%> | ||
| <%= pb_rails("icon", props: { icon: "file-code", classname: "current" }) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item") do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "HTML & CSS", tag: "span", classname: "current" }) %> | ||
| <%end%> | ||
| <%end%> | ||
| </div> | ||
| <%= pb_rails("title", props: { text: "HTML & CSS", tag: "h1", size: 1, margin_bottom: "sm" }) %> | ||
| <%= pb_rails("body", props: { margin_bottom: "md"}) do %> | ||
| If you have another environment like PHP you can still use Playbook through the raw CSS and using the copy | ||
| HTML button on and Rails kit. See details below: | ||
| <% end %> | ||
| <%= markdown(@html_css_getting_started) %> | ||
| <% end %> | ||
| <% end %> |
58 changes: 58 additions & 0 deletions
58
playbook-website/app/views/pages/getting_started/index.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" }) do %> | ||
| <%= pb_rails("flex/flex_item", props:{ max_width: "md"}) do %> | ||
| <%= pb_rails("title", props: { text: "Getting Started", tag: "h1", size: 1, margin_bottom: "sm" }) %> | ||
| <%= pb_rails("body", props: { margin_bottom: "md"}) do %> | ||
| Playbook is an open source design system built for Ruby on Rails, React, and very soon SwiftUI. Playbook is built | ||
| & maintained by the User Experience & Development teams at <a href="https://powerhrg.com/">Power Home Remodeling</a>. Playbook is packaged | ||
| up as a <a href="https://rubygems.org/gems/playbook_ui">RubyGem</a> and <a href="https://www.npmjs.com/package/playbook-ui">NPM Package</a> and can work with a variety of setups. | ||
| <% end %> | ||
| <%= pb_rails("section_separator", props: { margin_y: "lg" }) %> | ||
| <%= pb_rails("flex", props:{ justify: "center" }) do %> | ||
| <%= pb_rails("caption", props: { size: 'lg', margin_y: "lg" }) do %> | ||
| What type of setup do you have? | ||
| <% end %> | ||
| <% end %> | ||
| <%= pb_rails("flex", props:{ gap: "sm", wrap:true }) do %> | ||
| <%= pb_rails("flex/flex_item", props: { | ||
| flex: 1 | ||
| }) do %> | ||
| <a href="/getting_started/rails"> | ||
| <%= pb_rails("selectable_card_icon", props: { | ||
| icon: "gem", | ||
| title_text: "Ruby on Rails", | ||
| }) %> | ||
| </a> | ||
| <% end %> | ||
| <%= pb_rails("flex/flex_item", props: { | ||
| flex: 1 | ||
| }) do %> | ||
| <a href="/getting_started/rails_react"> | ||
| <%= pb_rails("selectable_card_icon", props: { | ||
| icon: "object-intersect", | ||
| title_text: "Rails & React", | ||
| }) %> | ||
| </a> | ||
| <% end %> | ||
| <%= pb_rails("flex/flex_item", props: { | ||
| flex: 1 | ||
| }) do %> | ||
| <a href="/getting_started/react"> | ||
| <%= pb_rails("selectable_card_icon", props: { | ||
| icon: "atom", | ||
| title_text: "React", | ||
| }) %> | ||
| </a> | ||
| <% end %> | ||
| <%= pb_rails("flex/flex_item", props: { | ||
| flex: 1 | ||
| }) do %> | ||
| <a href="/getting_started/html" id="html-setup"> | ||
| <%= pb_rails("selectable_card_icon", props: { | ||
| icon: "file-code", | ||
| title_text: "HTML & CSS", | ||
| }) %> | ||
| </a> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> |
22 changes: 22 additions & 0 deletions
22
playbook-website/app/views/pages/getting_started/rails.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" }) do %> | ||
| <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" }) do %> | ||
| <div> | ||
| <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%> | ||
| <%= pb_rails("icon", props: { icon: "flag-checkered"}) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %> | ||
| <%end%> | ||
| <%= pb_rails("icon", props: { icon: "gem", classname: "current" }) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item") do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "Ruby on Rails", tag: "span", classname: "current" }) %> | ||
| <%end%> | ||
| <%end%> | ||
| </div> | ||
| <%= pb_rails("title", props: { text: "Ruby on Rails Setup", tag: "h1", size: 1, margin_bottom: "sm" }) %> | ||
| <%= pb_rails("body", props: { margin_bottom: "md"}) do %> | ||
| Jumpstart your React app's UI development with Playbook's design system. Here's a few routes you can take | ||
| to get you started: | ||
| <% end %> | ||
| <%= markdown(@rails_getting_started) %> | ||
| <% end %> | ||
| <% end %> |
22 changes: 22 additions & 0 deletions
22
playbook-website/app/views/pages/getting_started/rails_react.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" }) do %> | ||
| <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" }) do %> | ||
| <div> | ||
| <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%> | ||
| <%= pb_rails("icon", props: { icon: "flag-checkered"}) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %> | ||
| <%end%> | ||
| <%= pb_rails("icon", props: { icon: "object-intersect"}) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item") do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "Rails & React Setup", tag: "span", classname: "current" }) %> | ||
| <%end%> | ||
| <%end%> | ||
| </div> | ||
| <%= pb_rails("title", props: { text: "Rails & React Setup", tag: "h1", size: 1, margin_bottom: "sm" }) %> | ||
| <%= pb_rails("body", props: { margin_bottom: "md"}) do %> | ||
| Integrate Playbook's design system seamlessly into your Rails and React app with the Playbook Ruby Gem and React components. | ||
| Get started today with our easy-to-follow tutorial. | ||
| <% end %> | ||
| <%= markdown(@rails_react_getting_started) %> | ||
| <% end %> | ||
| <% end %> |
22 changes: 22 additions & 0 deletions
22
playbook-website/app/views/pages/getting_started/react.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <%= pb_rails("flex", props:{ classname: "getting_started", justify: "center" }) do %> | ||
| <%= pb_rails("flex/flex_item", props:{ max_width: "md", classname: "markdown" }) do %> | ||
| <div> | ||
| <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" }, margin_bottom: "xl" }) do%> | ||
| <%= pb_rails("icon", props: { icon: "flag-checkered"}) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/getting_started" }) do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "Getting Started", tag: "span" }) %> | ||
| <%end%> | ||
| <%= pb_rails("icon", props: { icon: "atom", classname: "current" }) %> | ||
| <%= pb_rails("bread_crumbs/bread_crumb_item") do %> | ||
| <%= pb_rails("title", props: { size: 4, text: "React", tag: "span", classname: "current" }) %> | ||
| <%end%> | ||
| <%end%> | ||
| </div> | ||
| <%= pb_rails("title", props: { text: "React Setup", tag: "h1", size: 1, margin_bottom: "sm" }) %> | ||
| <%= pb_rails("body", props: { margin_bottom: "md"}) do %> | ||
| Playbook's Ruby Gem makes it easy to use playbook with your favorite rails app. Here's a few routes you can take | ||
| to get you started: | ||
| <% end %> | ||
| <%= markdown(@react_getting_started) %> | ||
| <% end %> | ||
| <% end %> |
50 changes: 50 additions & 0 deletions
50
...k-website/app/views/pages/getting_started_partials/_html_css_getting_started.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| #### Add the Playbook NPM Package | ||
|
|
||
| ```sh | ||
| yarn add "playbook-ui@stable" | ||
| ``` | ||
|
|
||
| This will allow you to choose what version you want. | ||
|
|
||
| ```sh | ||
| yarn install | ||
| ``` | ||
|
|
||
| #### Import the CSS | ||
|
|
||
| ```sass | ||
| @import "playbook-ui/dis/playbook"; | ||
| @import "playbook-ui/dist/reset"; | ||
| ``` | ||
|
|
||
| #### Optionally you can import the Javascript if you want some of the interactivity | ||
| This will add all the Javascript to use the popovers & graphs for example. | ||
|
|
||
| ```js | ||
| import 'playbook-ui/dist/playbook-rails.js'; | ||
| ``` | ||
|
|
||
| #### Navigate to the Rails Kits and copy the raw HTML from the examples | ||
|
|
||
|  | ||
|
|
||
| #### How to include CSS and Javascript Assets | ||
| To include CSS and JavaScript files in an HTML document, follow these steps: | ||
| 1. Create a CSS file with the extension ".css" and a JavaScript file with the extension ".js". Place them in a directory on your server, preferably in a subdirectory named "css" or "js" respectively. | ||
| 2. Open the HTML file you want to add the assets to in a text editor. | ||
| 3. To include a CSS file in the HTML document, add the following code to the "head" section of the HTML document: | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" type="text/css" href="path/to/your/css/file.css"> | ||
| ``` | ||
|
|
||
| Replace "path/to/your/css/file.css" with the actual path to your CSS file. | ||
| 4. To include a JavaScript file in the HTML document, add the following code to the "head" section of the HTML document: | ||
|
|
||
| ```html | ||
| <script src="path/to/your/js/file.js"></script> | ||
| ``` | ||
|
|
||
| Replace "path/to/your/js/file.js" with the actual path to your JavaScript file. | ||
| 5. Save the HTML file and upload all the files (HTML, CSS, and JavaScript) to your server. | ||
| 6. Test your HTML document in a web browser to ensure that the assets are being loaded correctly. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.