Embeddable code labs!

[ebidel]

R: @crhym3 @aliafshar

Fixes #13. We now support <google-codelab theme="minimal" no-toolbar no-arrows no-highlight> to create an "embeddable" version of the codelab element.

---

By default, uses of <google-codelab> get our awesome defaults:

However, users have asked for an embeddable version to use in existing doc pages. This PR addresses that, giving users of the elements more control over what parts of the UI show. Adding the theme="minimal" attribute also neutralizes most of our default styling. An embedding page would use this:

<google-codelab theme="minimal" no-toolbar no-arrows no-highlight>

The embed.html demo shows this in action by using devsite's actual stylesheet:

We can make further customization hooks if needed.

[x1ddos]

This is brilliant!
One thing: some tests are failing now.

Also, I have a feeling this might break codelabs.developers.google.com, need to try it out on staging.

[ebidel]

Tests should be g2g now. Sorry about that. Added the TOC time remaining later on and didnt realize the tests were relying on id="countdown".

We should definitely test on staging, but it should be transparent to the live site. If you run demo/codelab.html, it intentionally looks exactly as it did before :)

[x1ddos]

Cool. Have just tried codelabs site with this change. One thing I spotted is the font change.

Before:

After:

[ebidel]

Ah yes. Our shell page will need to load the fonts at the top of the page.
The components inherit the page's don't now.

On Sun, Jan 31, 2016, 5:51 AM alex notifications@github.com wrote:

Cool. Have just tried codelabs site with this change. One thing I spotted
is the font change.

Before:

[image: screen shot 2016-01-31 at 12 44 35 pm]
https://cloud.githubusercontent.com/assets/25405/12702439/5d0bdca8-c821-11e5-9b23-73edbad4474a.png

After:

[image: screen shot 2016-01-31 at 12 44 49 pm]
https://cloud.githubusercontent.com/assets/25405/12702438/529e564c-c821-11e5-849b-723c10edef4b.png

—
Reply to this email directly or view it on GitHub
#16 (comment)
.

[aliafshar]

This is amazing, thanks.

[x1ddos]

LGTM! 🌟

The tests still fail but I'll be tracking it in #17, unrelated to this.
Two things to remember: bump to a breaking change semver and add fonts to codelabs site.