Fix path loading issues when consuming the Pattern Library

[andy-armstrong]

I've fixed a couple of issues that are blocking the usage of the Pattern Library in edx-platform:

1. I've introduced a new variable $edx-pattern-library-path that points to the root of the pattern library's assets. This allows a consuming library to override just this one variable and then have fonts, images etc be served from the correct location.
2. I fixed one instance where an edx-icons font was not referenced via $edx-icons-font-path.

These changes are needed to support https://github.com/edx/edx-platform/pull/11268.

Reviewers

If you've been tagged for review, please check your corresponding box once you've given the 👍.

• Code review: @talbs
• Code review: @dsjen

Post-review

• Squash commits
• Publish packages/doc site

[andy-armstrong]

@talbs My next problem is that the certs CSS refers to a fallback image that doesn't seem to exist:

/static/pattern-library/fonts/edx-icons/fallback-img/genderless.svg

Did this get renamed to something else, or did the file just not get checked in?

[andy-armstrong]

@talbs There are quite a few missing images that I've been working through. The full list is:

files-o.svg  => file-o.svg?
gear.svg => cog.svg?
genderless.svg
link.svg => chain.svg?
navicon.svg
pencil-square-o.svg
remove.svg
reorder.svg
reply.svg
times.svg
undo.svg
unlink.svg
unsorted.svg
warning.svg => exclamation-triangle.svg?

Going forward, how do we generate these fallback images? How can I tell which ones are intentional, and which ones need to be renamed? Is this something someone else can help with (@clrux?) , and if not we should define the process so that @dsjen and myself can do it.

With fake files for each of these images, I am now able to finish a collectstatic build with the Pattern Library. We are really close to being able to land this in edx-platform!

[talbs]

This looks great and the extra layer of abstraction will be super helpful. Nice work!

👍