Draft: Exploring how Rails examples could be added for each of the components #3538
Conversation
✅ You can preview this change here:Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| * @param {string} componentName - Name of component | ||
| * @returns {string} URL - Link to documentation page | ||
| */ | ||
| exports.getRailsLink = (componentName) => { |
There was a problem hiding this comment.
@peteryates @paulrobertlloyd this seemed like the simplest way to work out which page to link to - but open to other ideas!
There was a problem hiding this comment.
Depends how far you want to go with this, but you could create 2 arrays, one for components, and one for form elements, then cycle through them:
const links = {}
const components = ['accordian', 'breadcrumb']
const formElements = ['character-count', 'date-input']
for (const component in components) {
links[component] = `https://govuk-components.netlify.app/components/${component}/`
}
for (const formElement in formElements) {
links[formElement] = `https://govuk-form-builder.netlify.app/form-elements/${formElement}/`
}(Top of my head coding, may need tweaking). This way, you only need to update each array and 2 URL paths should any of those aspects change.
There was a problem hiding this comment.
It's slightly more complicated as some of the components have the prefix /building-blocks/ or /helpers/ or /introduction/, plus there's a few mismatches (fieldset vs fieldsets) - but something like this could work!
I was initially going to just link to either of the 2 homepages – but I think direct linking to the relevant pages is valuable?
Not sure where we'd link for any Rails examples for the patterns though... Some of the styles (eg Links) need doing too.
|
Question about nomenclature; these examples (mostly) don’t show Ruby on Rails code, but ERB templates, much as the ‘Nunjucks’ tab isn’t labelled ‘JavaScript’. I wonder if the tabs should be labelled more akin to:
I also wonder if you need to show the |
I wondered this too - however the examples do depend on Rails as well as Ruby, I think, and so they can't be used in an alternative Ruby framework like Sinatra. Could use Also wonder whether "Ruby on Rails" is more of a recognised term than "ERb" (and possibly the same for Node.js?) - in which case it might make sense to reverse the order?
I wasn't sure of this either. I was erring on the side of trying to make the examples as comparable to the Nunjucks ones as possible - but not always easy, especially with things like the error messages where the message would be defined elsewhere and not in the template. |
|
Going by their GitHub repo (both owning organisation and description: ‘An easy to use but powerful templating system for Ruby’) ERB is a Ruby thing, not just a Ruby on Rails thing. Stepping out of my comfort zone here though. |
Yeah, ERb is a Ruby thing - but the examples also depend on Rails, I think (especially for the form ones)? @peteryates? |
|
Yeah, the components are built with ViewComponent, which describes itself as being
The form builder is heavily tied to Rails stuff too. Both can be used outside of Rails (in the guides, for example), but it's a bit of an uphill struggle. |
|
Ah, of course! Okay, how about then:
|
This is a proof-of-concept to demonstrate how the GOV.UK Design System website might be updated to include examples of how to use the Ruby on Rails implementations of the components.
This would be especially helpful for developers who may be translating prototypes built using the Nunjucks macros into a production service built using the Ruby on Rails framework.
The Rails implementation currently has documentation on two different websites: GOV.UK Form Builder for Ruby on Rails (for the form-based component) and GOV.UK Components for Ruby on Rails (for those not related to forms). The Ruby implementations were created by developers at the Department for Education, but are now maintained by a cross-government community, and are in widespread use in production services across government (including within GOV.UK Forms).
This proof-of-concept proposes a way of integrating the Rails examples within the GOV.UK Design System website, whilst making it clear that this implementation is community-maintained, and linking out to the existing documentation websites for further details.
The Rails examples don’t have to be all-or-nothing. They can be gradually added for all the examples, and new components could be launched with the Nunjucks examples only, with the Rails ones coming later.
This could be launched a trial to gauge response from Rails developers.
Screenshot
Things which might need to be considered:
pagygem - does this need any more explanation?