Skip to content

Add Lookbook#205

Closed
lorenyu wants to merge 11 commits intomainfrom
lorenyu/lookbook
Closed

Add Lookbook#205
lorenyu wants to merge 11 commits intomainfrom
lorenyu/lookbook

Conversation

@lorenyu
Copy link
Copy Markdown
Collaborator

@lorenyu lorenyu commented Apr 30, 2025

Ticket

Resolves navapbc/template-application-rails#93

Changes

  • Add lookbook gem and related dependencies
  • Add ENABLE_LOOKBOOK environment variable, defaulting to true in local and dev environment
  • Mount lookbook if ENABLE_LOOKBOOK is set
  • Add component_preview layout for previewing partials without application header/footer
  • Add breadcrumb preview
  • Make partial paths explicit

Context for reviewers

Add Lookbook. Took a while to get something working since Lookbook docs don't make it clear:

  1. You cannot use partial:
  2. You need to specify template: explicitly in render method (cannot just pass a string to render) which they claim is possible from the examples in their documentation
  3. You need to use explicit paths to partials within templates

Testing

Tested locally and also in the preview environment which you can see here

image)

image

Preview environment for app

♻️ Environment destroyed ♻️

Preview environment for app-rails

♻️ Environment destroyed ♻️

layout "component_preview"

def default
render template: "application/_breadcrumbs", locals: { crumbs: [
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

render partial: "application/breadcrumbs" not supported by lookbook so use render template: and remember to prefix with _ and set layout to "component_preview" to get rid of application layout


<li class="usa-nav__primary-item">
<%= render partial: "language-toggle", locals: { container_class: "display-block desktop:display-none relative" } %>
<%= render partial: "application/language-toggle", locals: { container_class: "display-block desktop:display-none relative" } %>
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to explicitly set partial paths rather than rely on Rails fallback behavior. This is probably better practice anyways, easier to read/find things for the reader

Copy link
Copy Markdown
Collaborator Author

@lorenyu lorenyu Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly a copy of application.html.erb except without the application header/footer

@lorenyu lorenyu changed the title Lorenyu/lookbook Add Lookbook Apr 30, 2025
@lorenyu
Copy link
Copy Markdown
Collaborator Author

lorenyu commented May 1, 2025

Thanks for the review @LeslieJAnderson , I added the doc in navapbc/template-application-rails#100 per your suggestion

@lorenyu lorenyu closed this May 1, 2025
@lorenyu lorenyu deleted the lorenyu/lookbook branch May 1, 2025 19:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Lookbook

1 participant