bradfrost

bradfrost

const DynamicComponent = React.lazy(() =>
    import(`path/to/${reactComponentName}`)
);

return (
    //This works, but now how to I crawl in and grab its properties and PropTypes?
    <Suspense fallback={<div>Loading...</div>}>
        <DynamicComponent title="Lazy loaded component" />
    </Suspense>
)

bradfrost

<Breadcrumbs>
    <Breadcrumb text="Home" href="/" />
    <Breadcrumb text="Child" href="/child" />
    <Breadcrumb text="Grandchild" href="/child/grandchild" />
</Breadcrumbs>

// or

<Breadcrumbs items={[
    {

bradfrost

/******************************************************
 * PATTERN LAB NODE
 * EDITION-NODE-GULP
 * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/
var gulp = require('gulp'),
  path = require('path'),
  browserSync = require('browser-sync').create(),
  sass = require('gulp-sass'),
  concat = require('gulp-concat'),

bradfrost

---

layout: component-detail group: components subgroup: blocks-and-cards permalink: /components/blocks-and-cards/card.html

title: Card description: This is a card. status: Complete

bradfrost

// set up the defaults for the
	var baseIframePath = window.location.protocol + "//" + window.location.host + window.location.pathname.replace("index.html", "");
	var patternName = ((config.defaultPattern !== undefined) && (typeof config.defaultPattern === 'string') && (config.defaultPattern.trim().length > 0)) ? config.defaultPattern : 'all';
	var iFramePath = baseIframePath + "styleguide/html/styleguide.html?" + Date.now();
	if ((oGetVars.p !== undefined) || (oGetVars.pattern !== undefined)) {
		patternName = (oGetVars.p !== undefined) ? oGetVars.p : oGetVars.pattern;
	}

	if (patternName !== "all") {
		patternPath = urlHandler.getFileName(patternName);

bradfrost

"navItems" : [
		{
			"label" : "Nav item",
			"currentPage" : true
		},
        {
            "label" : "Nav item",
            "navItemClass" : "has-children",
            "navChild" : {
	            "navChildList" : [

bradfrost

<nav id="nav" class="c-primary-nav" role="navigation">

    <ul class="c-primary-nav__list">

        {{# navItems }}
		<li class="c-primary-nav__item {{ styleModifier }}">

			<a href="{{ url }}" class="c-primary-nav__link {{# currentPage }}is-current {{/ currentPage }}{{# navChild }} c-primary-nav__link--has-children js-nav-dropdown-trigger{{/ navChild }}">

				{{ label }}

bradfrost

/******************************************************
 * PATTERN LAB NODE
 * EDITION-NODE-GULP
 * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/
var gulp = require('gulp'),
  path = require('path'),
  browserSync = require('browser-sync').create(),
  sass = require('gulp-sass'),
  concat = require('gulp-concat'),

bradfrost

Frontend Guidelines

These guidelines will govern how we write frontend code for The Spruce (and hopefully beyond!)

HTML Guidelines

HTML Principles

• Author semantic markup - HTML gives structure to content, and browsers, search engines, and assistive devices make use of that structure to benefit users. Headings should be <h1> through <h6> tags, groups of objects should be marked up as <ul> or <ol> tags, and so on.
• Legibility - Markup should be easily readable by authors, especially considering that markup is often mixed with Freemarker and other non-HTML code. Use proper spacing, naming, and commenting conventions to keep code legible for yourself and your teammates.
• Bake in accessibility - Incorporate accessibility best practices into markup as you author markup rather than tacking it on as an afterthought.