Skip to content

Add example content "components" to pattern library #277

@james-nash

Description

@james-nash

Is your feature request related to a problem? Please describe.
The context data we pass into our Nunjucks templates (via Pattern Lab or, soon, Fractal) works fine for plain text strings and basic data types. However, it is not well suited for blobs of HTML code.

And yet, in consuming projects like the website or GMS, it is not uncommon to render chunks of HTML (e.g. from markdown file) and then wrap them in Gravity components (e.g. the article-related components). I think it is therefore desirable to have examples of such HTML blobs within the pattern library so that we can:

  • Insert them into suitable Gravity components for more realistic sample/demo pages
  • Stress-test those components with content that is representstive of what Gravity consumers will have

Note: The section component is a kludgy way of doing something similar, but I'm proposing we remove that (#276).This issue is to produce some better replacement(s)

Describe the solution you'd like
Add some example "components" for things like:

  • HTML rendered from markdown (maybe have a few variants of this. e.g. long and short samples, ones with different max heading levels, simple/complex, etc.
  • HTML of syntax-highlighted code generated by something like Prism.js
  • Others?

We also need to find a way to make it clear that these are not actual components but just sample content. Maybe some naming convention and/or making them hidden (so they don't show up in the library's nav).

Note: It probably makes sense to wait until we migrate to Fractal before doing this - see #264

Metadata

Metadata

Assignees

No one assigned

    Labels

    🌟 enhancementTYPE: Indicates new feature requestsuiCATEGORY: Anything related to the design or implementation of UI components and styles

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions