Add Firefox Klar wordmark

[reemhamz]

Description

We do not have a CSS class defined for Firefox Klar wordmark to be used for German locales in Bedrock. Instead, we've been using the English Firefox Focus wordmark. This PR adds that classname so it can be used (with a {% if LANG=='de' %} conditional.

i.e. (example used from @janbrasna's PR in Bedrock:

<div class="mzp-c-wordmark mzp-t-wordmark-md {% if LANG=='de' %} mzp-t-product-klar {% else %}mzp-t-product-focus{% endif %}">{{ ftl('mobile-focus-firefox-focus') }}</div>

Note

I didn't need to add a new logo component to support Klar since it's just Firefox Focus in German, so it uses the same logo.

Describe what this change does.

• Imports the Firefox Klar wordmark
• Creates a class for Firefox Klar to be used in Bedrock (mzp-t-product-klar in conjunction with mzp-c-wordmark)
• I have recorded this change in CHANGELOG.md.

Issue

Fixes #930
Refs mozilla/bedrock#14490

Testing

http://localhost:3000/components/detail/wordmark--default -- change the firefox string to klar and you should see the wordmark appear on the page

[stephaniehobson]

R+

[stephaniehobson]

Thought: Is there any benefit to including the klar classes in the focus file? Are we likely to use one without the other?

[reemhamz]

Benefit? Probably, but I didn't want to mess up how the CSS variables are structured for wordmarks! I'm also not sure I know how to set up conditional logic to extract the Klar workmark only in German only through this file. Because we import one wordmark per file, we'd make to use more specification in how we import this into Bedrock's CSS file, too.

I'm happy to merge for now. Let me know if you think there's a way to cleanly do the above and we can implement that in another PR

[janbrasna]

FYI there's the same list also in wordmark/readme.md that could benefit from this addition for consistency, if you think it's worth it.

I'm actually thinking about how to document properly that the Klar component is only among the wordmarks, and trying to use the product class with another branding element will fail and folks have to remember to use Focus classes for all other branding needs — so this is an odd duck, existing only for the text difference here, and not elsewhere where it has no use. Some kind of a note to warn people of how specific it is?