Hero

[trevorsaint]

Use this place to discuss the Hero in the ONS Design System

[rmccar]

Duplicate issue #717

[jrbarnes9]

We should use $color-branded-tint – the 10% tint of $color-ocean-blue – for the default hero background colour to tie it in better with the ocean blue header.

[jrbarnes9]

Raised #1986

[BenLatham]

I'm experiencing a bug importing the hero banner. When I import the onsHero element I get the following error:

Traceback (most recent call last):
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/app.py", line 2486, in __call__
    return self.wsgi_app(environ, start_response)
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/app.py", line 2466, in wsgi_app
    response = self.handle_exception(e)
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/app.py", line 2463, in wsgi_app
    response = self.full_dispatch_request()
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/app.py", line 1760, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/app.py", line 1758, in full_dispatch_request
    rv = self.dispatch_request()
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/app.py", line 1734, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
  File "/Users/benlatham/Projects/sml-catalogue/sml_builder/__init__.py", line 18, in index
    return render_template("index.html")
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/templating.py", line 147, in render_template
    return _render(app, template, context)
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/flask/templating.py", line 130, in _render
    rv = template.render(context)
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/jinja2/environment.py", line 1301, in render
    self.environment.handle_exception()
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/jinja2/environment.py", line 936, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "/Users/benlatham/Projects/sml-catalogue/sml_builder/templates/index.html", line 3, in top-level template code
    {% from "components/hero/_macro.njk" import onsHero %}
  File "/Users/benlatham/Projects/sml-catalogue/venv/lib/python3.10/site-packages/jinja2/environment.py", line 936, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "/Users/benlatham/Projects/sml-catalogue/sml_builder/templates/components/hero/_macro.njk", line 28, in template
    {% set preTitleImageWithModifier = params.preTitleImage.name|replace(r/(\.[^\.]+)$/, "--" + skinName + "$1") %}
jinja2.exceptions.TemplateSyntaxError: unexpected char '\\' at 1346

Using versin 53.1.1 of the design system with Flask

[BenLatham]

Looking into the issue, it seams that the replace filter can't be used with regex in Jinja, so r/(\.[^\.]+)$/ is interpreted as a syntactical error.

[BenLatham]

I've proposed an issue for this on the community backlog

[BenLatham]

Where in the page layout is the hero element supposed to live? preHeader would obviously be wrong. preMain has the same width as the main content, while the hero banner looks like it should be full width regardless of the width of the main content. Seems like there should be a postHeader block?