pattern-lab/styleguidekit-assets-default

The static assets for the default StyleguideKit for Pattern Lab. Contains styles and mark-up for Pattern Lab's front-end.

Static Assets for the Default StyleguideKit

This code is responsible for creating Pattern Lab's UI look, feel, and functionality. These assets are are meant to be used in conjunction with the default Mustache and Twig StyleguideKits, which control Pattern Lab-specific UI inside the iframe.

Installation

Node

Pattern Lab Node uses npm to manage project dependencies. To install the default static assets run:

npm install @pattern-lab/styleguidekit-assets-default

PHP

Pattern Lab PHP uses Composer to manage project dependencies. To install the default static assets run:

composer require pattern-lab/styleguidekit-assets-default

Development Requirements

In order to modify these assets you need to install the following:

• the Development Edition of Pattern Lab
• Node.js and NPM
• Bower
• Ruby Sass

Development Set-up

Read the contribution guidelines

styleguidekit-assets-default's Issues

Flashes on scroll when viewed on iPhone

Am on iOS9.3.2

This is a screen recording, it shows the flashes as gray boxes, however, on the actual phone, it happens so fast it looks like the screen is just flickering

Uncaught TypeError: Cannot read property 'addEventListener' of null

Upon dropdown navigation, I noticed this error in the console on 3.3.1 and 3.3.0, though everything seems to still work.

Add Support for Annotations

Make annotations part of the panels.

Search is not working

I believe it's because the HTML element is using a class of sg-find and the JS in src/pattern-finder.js is looking for an ID of sg-find. When I change #sg-find to .sg-find in that file (and recompile and place those files in the appropriate place in public/) I get this error after clicking in the search field in the console:

Uncaught RangeError: Maximum call stack size exceeded.

Move Pattern State Beside Title

@dmolsen,
Question: how hard would it be to move pattern status to be beside the pattern title, like so:

Hard?

The thinking is that if people are using the pattern state feature, it would be good to have that info at-a-glance in scroll view. It also frees up space for pattern description and lineage in the actual sg-patter-extra-info section.

Show Pattern Info Toggle Does Not Close All Patterns' Pattern Info Panes

Once you use the top-right gear menu to display every pattern's pattern info, the same control should toggle them all closed again. This does not occur, and no js errors fire.

Confirmed with @dmolsen

I will have time to look at this Friday 6/3 if not resolved by then.

create a better experience around viewing pattern variants / pseudo-patterns

Mentioned in passing many times, and in #69

@bradfrost this is on you to design 🖌

Force Style of Category Title and Description

.sg-pattern-category-title a needs styled to not be overridden by user's styles. For example, If the user changes link color to green, the category title shouldn't inherit that.

sg-pattern-category-body will need similar rules.

ishViewportRange doesn't exist in config object provided by PatternLab PHP

My local instance of PatternLab is via a fork of Phase2's drupal starter kit. I was excited to see the recent release of viewport range support in 3.5.0 so had successfully updated this particular dependency via composer.

However, after modifying pattern-lab/config/config.yml, the values were still not respected.

I edited pattern-lab/public/styleguide/js/patternlab-viewer.min.js to see where things were falling apart and added a console.log to observe the value for config. It looks something like this:

{
    cacheBuster: 1495725687,
    defaultPattern: "styleguide-styleguide",
    defaultShowPatternInfo: false,
    ishMaximum: "2600",
    ishMinimum: "240",
    outputFileSuffixes: Object,
    plugins: Object
}

ishViewportRange is not there.

Further investigation, the node packages see it, PHP Pattern Lab sees it... ultimately it seems only exposedOptions manually configured in patternlab-php-core are provided to config in pattern-lab/public/styleguide/data/patternlab-data.js.

See Config.php (2.7.0 is what I am currently using):
https://github.com/pattern-lab/patternlab-php-core/blob/v2.7.0/src/PatternLab/Config.php#L240

		// which of these should be exposed in the front-end?
		self::$options["exposedOptions"] = array();
		self::setExposedOption("cacheBuster");
		self::setExposedOption("defaultPattern");
		self::setExposedOption("defaultShowPatternInfo");
		self::setExposedOption("ishFontSize");
		self::setExposedOption("ishMaximum");
		self::setExposedOption("ishMinimum");
		self::setExposedOption("outputFileSuffixes");
		self::setExposedOption("plugins");

and Builder.php
https://github.com/pattern-lab/patternlab-php-core/blob/v2.7.0/src/PatternLab/Builder.php#L103

		// load and write out the config options
		$config                         = array();
		$exposedOptions                 = Config::getOption("exposedOptions");
		foreach ($exposedOptions as $exposedOption) {
			$config[$exposedOption]     = Config::getOption($exposedOption);
		}
		$output     .= "var config = ".json_encode($config).";\n";

Am I on to something here or is there something up with my setup?

Style Updates

@bradfrost -

I've pushed the latest mark-up changes to feature-panels that you wanted. Now the modal pop-up and style guide view share the same layout. They're not well-styled so they look a bit jumbled. I think I nuked a class that held things together better. Sorry.

To make changes to this you're going to need to get the latest development edition installed running the feature-panels branch of several repos. I realize this is annoying. I thought about emailing you an almost pre-built copy but realized I'd have to step you through updating your git config so... This is actually easier.

1. Figure out where you're going to install it
2. Run composer create-project pattern-lab/edition-development feature-panels-work
3. Wait for it to finish installing then...
4. cd feature-panels-work/vendor/pattern-lab/core
5. git config branch.dev.remote origin
6. git checkout --track origin/feature-panels
7. cd ../styleguidekit-mustache-default
8. git config branch.dev.remote origin
9. git checkout --track origin/feature-panels
10. cd ../styleguidekit-assets-default
11. git config branch.dev.remote origin
12. git checkout --track origin/feature-panels
13. npm install
14. bower install
15. cd ../../../
16. php core/console -g
17. cd vendor/pattern-lab/styleguidekit-assets-default
18. gulp --copy-dist ../../../public

Edit to your hearts content. Use gulp --copy-dist ../../../public to make sure everything goes where it needs to. The template for the modal pop-up can be found in ./src/html/partials/base-template.html. I tried to break that up a little more for you.

Two classes that you can use differentiate styles between the modal and the style guide view are .sg-view-container and .sg-pattern-extra. Otherwise I think it's fairly self-explanatory. I tried to delete all of my unnecessary IDs.

Implement Support for "Pattern Info Toggle Persistence / Default"

See pattern-lab/the-spec#15

Display title and breadcrumb info on Modal even when no description is given.

Per this discussion:
f9a3453#commitcomment-18152007

More specific typeahead classes?

Hi all,

I'm using Twitter Typeahead in my project. But the css classes in the styleguide are conflicting with my custom styles.

https://github.com/pattern-lab/styleguidekit-assets-default/blob/master/src/sass/styleguide.scss#L587

I would suggest to write or indent the css classes with the"sg-" prefix.

Thank you!

Style enhancement: Collapse sg-pattern-extra-info when no info present

I have a suggestion for consideration to the frontend.
When a pattern does not have lineage, or a description, it would be nice if the code view could oocupy all available pattern info space.

This should be achievable with CSS alone, using :empty and the following styling:

I am willing to submit a PR for this, but first wanted to check with @bradfrost to get an up/down vote on appropriateness.

Cannot GET ..mustache bug

I recently updated from 3.2.0 to 3.3.0 and noticed something strange in a pattern's info.

The tab name went from MUSTACHE to .Mustache with an error that it can't locate ..mustache files.

I've observed this happening on Mac OS X and Windows 7. Not sure where the extra . in the extension is coming from but locking at the older version "styleguidekit-assets-default": "3.2.0" in my package.json and installing fixed things for me.

Re-add Style Removed During a Merge

I somehow removed some css during 2fdbbc9

This issue is a reminder to re-add.

Remove bower dependancy and use npm for all installs

No reason to use bower anymore

Support for adding and removing panels

It would be nice to have the ability to define or modify what panels appear for the code view. In my case, I'd like to have JS/CSS/HTML (but not mustache.) This is because we will be using pattern-lab to share the front-end code base with an external vendor. The vendor needs to be able understand what is required for units to render & function, but will be generating HTML server-side rather than using mustache.

My initial thought was to somehow try and hook into the panels registration through the gulp build process.

Remove Nav Class Built Using Pattern Name

At this point there's no reason for this feature and it isn't properly escaped anyway. Either swap in a dash version of the name or remove entirely. Not sure what this is a hold over from.

Keyboard shortcuts vs accesskeys

The keyboard shortcuts aren't working on my local installation (patternlab-node v2.3.0) and online. Tested with the latest Chrome and Firefox.

My suggestion is to use accesskeys instead of jwerty, because it will make the site more accessible and you can ditch the JS dependency.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

Improve Annotations/Code View Overflow

I found a couple references to making this better, but lacking an official home, I am making one here on what I think is the right repo. Close as a duplicate if a better one exists.

Two problems:

1. A user cannot scroll within the info-viewer to see more annotations
2. A user cannot see the actual pattern, it now being obscured by the info-viewer

Add Support for Setting Prism Language Styles

Need to figure out a way to load Prism language styles.

Top-navigation is not working after insertion of own patterns

Hi everyone,
My problem is that since I inserted my own patterns into a new patternlab-node clone, the top menu of patternlab doesn't work anymore. The pattern-structure with all subfolders is properly displayed and the link's href attributes seem to be alright. At some point of the links eventchain the redirection is stopped. I get no related console output, not in the site generation debug process nor in firebug.
I can navigate just fine with altering the "p" get variable and the headline-links on the "all" page also do the job. It's just the top menu. I took out all of my own js but no improvement. I was wondering if any of you guys came across something similar before, or has an idea what could go wrong there?

@dmolsen Here I have a dump of the navItems var. As mentioned above, unfortunately there's no console output

{
  "patternTypes": [
    {
      "patternTypeLC": "atoms",
      "patternTypeUC": "Atoms",
      "patternTypeItems": [
        {
          "patternSubtypeLC": "header-component-parts",
          "patternSubtypeUC": "Header Component Parts",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-01-header-header-component-parts-header-button-help/00-atoms-01-header-header-component-parts-header-button-help.html",
              "patternPartialCode": "",
              "patternName": "Header Button Help",
              "patternPartial": "atoms-header-button-help"
            },
            {
              "patternPath": "00-atoms-01-header-header-component-parts-header-button-logout/00-atoms-01-header-header-component-parts-header-button-logout.html",
              "patternPartialCode": "",
              "patternName": "Header Button Logout",
              "patternPartial": "atoms-header-button-logout"
            },
            {
              "patternPath": "00-atoms-01-header-header-component-parts-header-button-menu-toggle/00-atoms-01-header-header-component-parts-header-button-menu-toggle.html",
              "patternPartialCode": "",
              "patternName": "Header Button Menu Toggle",
              "patternPartial": "atoms-header-button-menu-toggle"
            },
            {
              "patternPath": "00-atoms-01-header-header-component-parts-header-languagepicker/00-atoms-01-header-header-component-parts-header-languagepicker.html",
              "patternPartialCode": "",
              "patternName": "Header Languagepicker",
              "patternPartial": "atoms-header-languagepicker"
            },
            {
              "patternPath": "00-atoms-01-header-header-component-parts-header-logo/00-atoms-01-header-header-component-parts-header-logo.html",
              "patternPartialCode": "",
              "patternName": "Header Logo",
              "patternPartial": "atoms-header-logo"
            },
            {
              "patternPath": "00-atoms-01-header-header-component-parts/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-header-component-parts"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Header Button Help",
            "Header Button Logout",
            "Header Button Menu Toggle",
            "Header Languagepicker",
            "Header Logo",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "menu-buttons",
          "patternSubtypeUC": "Menu Buttons",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-active-state/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-active-state.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Active State",
              "patternPartial": "atoms-menu-button-active-state"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-bars/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-bars.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Bars",
              "patternPartial": "atoms-menu-button-bars"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-bookmarks/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-bookmarks.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Bookmarks",
              "patternPartial": "atoms-menu-button-bookmarks"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-container/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-container.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Container",
              "patternPartial": "atoms-menu-button-container"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-desktop/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-desktop.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Desktop",
              "patternPartial": "atoms-menu-button-desktop"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-empty/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-empty.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Empty",
              "patternPartial": "atoms-menu-button-empty"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-forms/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-forms.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Forms",
              "patternPartial": "atoms-menu-button-forms"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-help/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-help.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Help",
              "patternPartial": "atoms-menu-button-help"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-modal-dialog/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-modal-dialog.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Modal Dialog",
              "patternPartial": "atoms-menu-button-modal-dialog"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-notifications/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-notifications.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Notifications",
              "patternPartial": "atoms-menu-button-notifications"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-profile/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-profile.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Profile",
              "patternPartial": "atoms-menu-button-profile"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-settings/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-settings.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Settings",
              "patternPartial": "atoms-menu-button-settings"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-stop/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-stop.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Stop",
              "patternPartial": "atoms-menu-button-stop"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-tables/00-atoms-02-aside-menu-component-parts-menu-buttons-menu-button-tables.html",
              "patternPartialCode": "",
              "patternName": "Menu Button Tables",
              "patternPartial": "atoms-menu-button-tables"
            },
            {
              "patternPath": "00-atoms-02-aside-menu-component-parts-menu-buttons/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-menu-buttons"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Menu Button Active State",
            "Menu Button Bars",
            "Menu Button Bookmarks",
            "Menu Button Container",
            "Menu Button Desktop",
            "Menu Button Empty",
            "Menu Button Forms",
            "Menu Button Help",
            "Menu Button Modal Dialog",
            "Menu Button Notifications",
            "Menu Button Profile",
            "Menu Button Settings",
            "Menu Button Stop",
            "Menu Button Tables",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "context-help",
          "patternSubtypeUC": "Context Help",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-03-main-context-help-main-context-help-button/00-atoms-03-main-context-help-main-context-help-button.html",
              "patternPartialCode": "",
              "patternName": "Main Context Help Button",
              "patternPartial": "atoms-main-context-help-button"
            },
            {
              "patternPath": "00-atoms-03-main-context-help/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-context-help"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Main Context Help Button",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "form-component-parts",
          "patternSubtypeUC": "Form Component Parts",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-checkbox/00-atoms-03-main-form-component-parts-form-checkbox.html",
              "patternPartialCode": "",
              "patternName": "Form Checkbox",
              "patternPartial": "atoms-form-checkbox"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-datepicker/00-atoms-03-main-form-component-parts-form-datepicker.html",
              "patternPartialCode": "",
              "patternName": "Form Datepicker",
              "patternPartial": "atoms-form-datepicker"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-dropdown-advanced/00-atoms-03-main-form-component-parts-form-dropdown-advanced.html",
              "patternPartialCode": "",
              "patternName": "Form Dropdown Advanced",
              "patternPartial": "atoms-form-dropdown-advanced"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-dropdown-simple/00-atoms-03-main-form-component-parts-form-dropdown-simple.html",
              "patternPartialCode": "",
              "patternName": "Form Dropdown Simple",
              "patternPartial": "atoms-form-dropdown-simple"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-filepicker/00-atoms-03-main-form-component-parts-form-filepicker.html",
              "patternPartialCode": "",
              "patternName": "Form Filepicker",
              "patternPartial": "atoms-form-filepicker"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-input-password/00-atoms-03-main-form-component-parts-form-input-password.html",
              "patternPartialCode": "",
              "patternName": "Form Input Password",
              "patternPartial": "atoms-form-input-password"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-input-text/00-atoms-03-main-form-component-parts-form-input-text.html",
              "patternPartialCode": "",
              "patternName": "Form Input Text",
              "patternPartial": "atoms-form-input-text"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-input-text-required/00-atoms-03-main-form-component-parts-form-input-text-required.html",
              "patternPartialCode": "",
              "patternName": "Form Input Text Required",
              "patternPartial": "atoms-form-input-text-required"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-mandatory/00-atoms-03-main-form-component-parts-form-mandatory.html",
              "patternPartialCode": "",
              "patternName": "Form Mandatory",
              "patternPartial": "atoms-form-mandatory"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-radiobuttons/00-atoms-03-main-form-component-parts-form-radiobuttons.html",
              "patternPartialCode": "",
              "patternName": "Form Radiobuttons",
              "patternPartial": "atoms-form-radiobuttons"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-select-multiple/00-atoms-03-main-form-component-parts-form-select-multiple.html",
              "patternPartialCode": "",
              "patternName": "Form Select Multiple",
              "patternPartial": "atoms-form-select-multiple"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts-form-textarea/00-atoms-03-main-form-component-parts-form-textarea.html",
              "patternPartialCode": "",
              "patternName": "Form Textarea",
              "patternPartial": "atoms-form-textarea"
            },
            {
              "patternPath": "00-atoms-03-main-form-component-parts/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-form-component-parts"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Form Checkbox",
            "Form Datepicker",
            "Form Dropdown Advanced",
            "Form Dropdown Simple",
            "Form Filepicker",
            "Form Input Password",
            "Form Input Text",
            "Form Input Text Required",
            "Form Mandatory",
            "Form Radiobuttons",
            "Form Select Multiple",
            "Form Textarea",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "pagination",
          "patternSubtypeUC": "Pagination",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-03-main-pagination-pagination/00-atoms-03-main-pagination-pagination.html",
              "patternPartialCode": "",
              "patternName": "Pagination",
              "patternPartial": "atoms-pagination"
            },
            {
              "patternPath": "00-atoms-03-main-pagination/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-pagination"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Pagination",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "tables",
          "patternSubtypeUC": "Tables",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-03-main-tables-table-standard/00-atoms-03-main-tables-table-standard.html",
              "patternPartialCode": "",
              "patternName": "Table Standard",
              "patternPartial": "atoms-table-standard"
            },
            {
              "patternPath": "00-atoms-03-main-tables-table-striped/00-atoms-03-main-tables-table-striped.html",
              "patternPartialCode": "",
              "patternName": "Table Striped",
              "patternPartial": "atoms-table-striped"
            },
            {
              "patternPath": "00-atoms-03-main-tables-table-with-sort/00-atoms-03-main-tables-table-with-sort.html",
              "patternPartialCode": "",
              "patternName": "Table With Sort",
              "patternPartial": "atoms-table-with-sort"
            },
            {
              "patternPath": "00-atoms-03-main-tables/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-tables"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Table Standard",
            "Table Striped",
            "Table With Sort",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "buttons",
          "patternSubtypeUC": "Buttons",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-05-misc-buttons-text-button-default/00-atoms-05-misc-buttons-text-button-default.html",
              "patternPartialCode": "",
              "patternName": "Text Button Default",
              "patternPartial": "atoms-text-button-default"
            },
            {
              "patternPath": "00-atoms-05-misc-buttons-text-button-primary/00-atoms-05-misc-buttons-text-button-primary.html",
              "patternPartialCode": "",
              "patternName": "Text Button Primary",
              "patternPartial": "atoms-text-button-primary"
            },
            {
              "patternPath": "00-atoms-05-misc-buttons/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-buttons"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Text Button Default",
            "Text Button Primary",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "notifications",
          "patternSubtypeUC": "Notifications",
          "patternSubtypeItems": [
            {
              "patternPath": "00-atoms-05-misc-notifications-notification-danger/00-atoms-05-misc-notifications-notification-danger.html",
              "patternPartialCode": "",
              "patternName": "Notification Danger",
              "patternPartial": "atoms-notification-danger"
            },
            {
              "patternPath": "00-atoms-05-misc-notifications-notification-success/00-atoms-05-misc-notifications-notification-success.html",
              "patternPartialCode": "",
              "patternName": "Notification Success",
              "patternPartial": "atoms-notification-success"
            },
            {
              "patternPath": "00-atoms-05-misc-notifications-notification-warning/00-atoms-05-misc-notifications-notification-warning.html",
              "patternPartialCode": "",
              "patternName": "Notification Warning",
              "patternPartial": "atoms-notification-warning"
            },
            {
              "patternPath": "00-atoms-05-misc-notifications/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-atoms-notifications"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Notification Danger",
            "Notification Success",
            "Notification Warning",
            "View All"
          ]
        }
      ],
      "patternTypeItemsIndex": [
        "header-component-parts",
        "menu-buttons",
        "context-help",
        "form-component-parts",
        "pagination",
        "tables",
        "buttons",
        "notifications"
      ],
      "patternItems": [
        {
          "patternPath": "00-atoms/index.html",
          "patternPartialCode": "",
          "patternName": "View All",
          "patternPartial": "viewall-atoms"
        }
      ],
      "patternItemsIndex": []
    },
    {
      "patternTypeLC": "molecules",
      "patternTypeUC": "Molecules",
      "patternTypeItems": [
        {
          "patternSubtypeLC": "menu-components",
          "patternSubtypeUC": "Menu Components",
          "patternSubtypeItems": [
            {
              "patternPath": "01-molecules-02-aside-menu-components-menu-dropdown-button/01-molecules-02-aside-menu-components-menu-dropdown-button.html",
              "patternPartialCode": "",
              "patternName": "Menu Dropdown Button",
              "patternPartial": "molecules-menu-dropdown-button"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Menu Dropdown Button"
          ]
        },
        {
          "patternSubtypeLC": "form",
          "patternSubtypeUC": "Form",
          "patternSubtypeItems": [
            {
              "patternPath": "01-molecules-03-main-form-form-fieldset/01-molecules-03-main-form-form-fieldset.html",
              "patternPartialCode": "",
              "patternName": "Form Fieldset",
              "patternPartial": "molecules-form-fieldset"
            },
            {
              "patternPath": "01-molecules-03-main-form-form-group-error/01-molecules-03-main-form-form-group-error.html",
              "patternPartialCode": "",
              "patternName": "Form Group Error",
              "patternPartial": "molecules-form-group-error"
            },
            {
              "patternPath": "01-molecules-03-main-form/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-molecules-form"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Form Fieldset",
            "Form Group Error",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "main-components",
          "patternSubtypeUC": "Main Components",
          "patternSubtypeItems": [
            {
              "patternPath": "01-molecules-03-main-main-components-accordion/01-molecules-03-main-main-components-accordion.html",
              "patternPartialCode": "",
              "patternName": "Accordion",
              "patternPartial": "molecules-accordion"
            },
            {
              "patternPath": "01-molecules-03-main-main-components-jarvis-widget/01-molecules-03-main-main-components-jarvis-widget.html",
              "patternPartialCode": "",
              "patternName": "Jarvis Widget",
              "patternPartial": "molecules-jarvis-widget"
            },
            {
              "patternPath": "01-molecules-03-main-main-components-jarvis-widget-no-footer/01-molecules-03-main-main-components-jarvis-widget-no-footer.html",
              "patternPartialCode": "",
              "patternName": "Jarvis Widget No Footer",
              "patternPartial": "molecules-jarvis-widget-no-footer"
            },
            {
              "patternPath": "01-molecules-03-main-main-components-ribbon/01-molecules-03-main-main-components-ribbon.html",
              "patternPartialCode": "",
              "patternName": "Ribbon",
              "patternPartial": "molecules-ribbon"
            },
            {
              "patternPath": "01-molecules-03-main-main-components-tabs/01-molecules-03-main-main-components-tabs.html",
              "patternPartialCode": "",
              "patternName": "Tabs",
              "patternPartial": "molecules-tabs"
            },
            {
              "patternPath": "01-molecules-03-main-main-components/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-molecules-main-components"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Accordion",
            "Jarvis Widget",
            "Jarvis Widget No Footer",
            "Ribbon",
            "Tabs",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "pager-tables",
          "patternSubtypeUC": "Pager Tables",
          "patternSubtypeItems": [
            {
              "patternPath": "01-molecules-03-main-pager-tables-table-responsive/01-molecules-03-main-pager-tables-table-responsive.html",
              "patternPartialCode": "",
              "patternName": "Table Responsive",
              "patternPartial": "molecules-table-responsive"
            },
            {
              "patternPath": "01-molecules-03-main-pager-tables-table-responsive-alternative/01-molecules-03-main-pager-tables-table-responsive-alternative.html",
              "patternPartialCode": "",
              "patternName": "Table Responsive Alternative",
              "patternPartial": "molecules-table-responsive-alternative"
            },
            {
              "patternPath": "01-molecules-03-main-pager-tables/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-molecules-pager-tables"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Table Responsive",
            "Table Responsive Alternative",
            "View All"
          ]
        }
      ],
      "patternTypeItemsIndex": [
        "menu-components",
        "form",
        "main-components",
        "pager-tables"
      ],
      "patternItems": [
        {
          "patternPath": "01-molecules/index.html",
          "patternPartialCode": "",
          "patternName": "View All",
          "patternPartial": "viewall-molecules"
        }
      ],
      "patternItemsIndex": []
    },
    {
      "patternTypeLC": "organisms",
      "patternTypeUC": "Organisms",
      "patternTypeItems": [
        {
          "patternSubtypeLC": "header",
          "patternSubtypeUC": "Header",
          "patternSubtypeItems": [
            {
              "patternPath": "02-organisms-01-header-header/02-organisms-01-header-header.html",
              "patternPartialCode": "",
              "patternName": "Header",
              "patternPartial": "organisms-header"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Header"
          ]
        },
        {
          "patternSubtypeLC": "aside",
          "patternSubtypeUC": "Aside",
          "patternSubtypeItems": [
            {
              "patternPath": "02-organisms-02-aside-aside/02-organisms-02-aside-aside.html",
              "patternPartialCode": "",
              "patternName": "Aside",
              "patternPartial": "organisms-aside"
            },
            {
              "patternPath": "02-organisms-02-aside/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-organisms-aside"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Aside",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "form-examples",
          "patternSubtypeUC": "Form Examples",
          "patternSubtypeItems": [
            {
              "patternPath": "02-organisms-03-main-form-examples-form-example-complete-showcase/02-organisms-03-main-form-examples-form-example-complete-showcase.html",
              "patternPartialCode": "",
              "patternName": "Form Example Complete Showcase",
              "patternPartial": "organisms-form-example-complete-showcase"
            },
            {
              "patternPath": "02-organisms-03-main-form-examples-form-example-empty/02-organisms-03-main-form-examples-form-example-empty.html",
              "patternPartialCode": "",
              "patternName": "Form Example Empty",
              "patternPartial": "organisms-form-example-empty"
            },
            {
              "patternPath": "02-organisms-03-main-form-examples-form-example-small-form/02-organisms-03-main-form-examples-form-example-small-form.html",
              "patternPartialCode": "",
              "patternName": "Form Example Small Form",
              "patternPartial": "organisms-form-example-small-form"
            },
            {
              "patternPath": "02-organisms-03-main-form-examples-form-example-ticket-details/02-organisms-03-main-form-examples-form-example-ticket-details.html",
              "patternPartialCode": "",
              "patternName": "Form Example Ticket Details",
              "patternPartial": "organisms-form-example-ticket-details"
            },
            {
              "patternPath": "02-organisms-03-main-form-examples-form-example-ticket-search/02-organisms-03-main-form-examples-form-example-ticket-search.html",
              "patternPartialCode": "",
              "patternName": "Form Example Ticket Search",
              "patternPartial": "organisms-form-example-ticket-search"
            },
            {
              "patternPath": "02-organisms-03-main-form-examples-form-example-ticket-search-versaform/02-organisms-03-main-form-examples-form-example-ticket-search-versaform.html",
              "patternPartialCode": "",
              "patternName": "Form Example Ticket Search Versaform",
              "patternPartial": "organisms-form-example-ticket-search-versaform"
            },
            {
              "patternPath": "02-organisms-03-main-form-examples/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-organisms-form-examples"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Form Example Complete Showcase",
            "Form Example Empty",
            "Form Example Small Form",
            "Form Example Ticket Details",
            "Form Example Ticket Search",
            "Form Example Ticket Search Versaform",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "footer",
          "patternSubtypeUC": "Footer",
          "patternSubtypeItems": [
            {
              "patternPath": "02-organisms-04-footer-footer/02-organisms-04-footer-footer.html",
              "patternPartialCode": "",
              "patternName": "Footer",
              "patternPartial": "organisms-footer"
            },
            {
              "patternPath": "02-organisms-04-footer/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-organisms-footer"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Footer",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "modal-dialogs",
          "patternSubtypeUC": "Modal Dialogs",
          "patternSubtypeItems": [
            {
              "patternPath": "02-organisms-05-misc-modal-dialogs-modal-dialog/02-organisms-05-misc-modal-dialogs-modal-dialog.html",
              "patternPartialCode": "",
              "patternName": "Modal Dialog",
              "patternPartial": "organisms-modal-dialog"
            },
            {
              "patternPath": "02-organisms-05-misc-modal-dialogs/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-organisms-modal-dialogs"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Modal Dialog",
            "View All"
          ]
        },
        {
          "patternSubtypeLC": "modal-screens",
          "patternSubtypeUC": "Modal Screens",
          "patternSubtypeItems": [
            {
              "patternPath": "02-organisms-05-misc-modal-screens-login-screen/02-organisms-05-misc-modal-screens-login-screen.html",
              "patternPartialCode": "",
              "patternName": "Login Screen",
              "patternPartial": "organisms-login-screen"
            },
            {
              "patternPath": "02-organisms-05-misc-modal-screens-progress-indicator/02-organisms-05-misc-modal-screens-progress-indicator.html",
              "patternPartialCode": "",
              "patternName": "Progress Indicator",
              "patternPartial": "organisms-progress-indicator"
            },
            {
              "patternPath": "02-organisms-05-misc-modal-screens/index.html",
              "patternPartialCode": "",
              "patternName": "View All",
              "patternPartial": "viewall-organisms-modal-screens"
            }
          ],
          "patternSubtypeItemsIndex": [
            "Login Screen",
            "Progress Indicator",
            "View All"
          ]
        }
      ],
      "patternTypeItemsIndex": [
        "header",
        "aside",
        "form-examples",
        "footer",
        "modal-dialogs",
        "modal-screens"
      ],
      "patternItems": [
        {
          "patternPath": "02-organisms/index.html",
          "patternPartialCode": "",
          "patternName": "View All",
          "patternPartial": "viewall-organisms"
        }
      ],
      "patternItemsIndex": []
    },
    {
      "patternTypeLC": "templates",
      "patternTypeUC": "Templates",
      "patternTypeItems": [],
      "patternTypeItemsIndex": [],
      "patternItems": [
        {
          "patternPath": "03-templates-template-site-mods/03-templates-template-site-mods.html",
          "patternPartialCode": "",
          "patternName": "Template Site Mods",
          "patternPartial": "templates-template-site-mods"
        }
      ],
      "patternItemsIndex": []
    }
  ]
}

Upgrade build process

Webpack would likely be the preferred method.

Consider changing base template system

There seems to be some appetite for changing the frontend template language, but more research must be done. Currently they are Hogan templates, which are fast, approachable, and relatively simple.

Some contenders mentioned in drupal-pattern-lab/roadmap#8 (comment) include:

• Web components
• Nunjucks
• Vue.js

Add menu toggle for pattern descriptions from Markdown

When a pattern (i.e. colors.twig) has a sidecar description file (i.e. colors.md), it will show above the pattern, wrapped in a div with a class of sg-pattern-desc. It would be great if the menu could have a toggle to show/hide those, right next to Annotations & Code.

More granular viewport configuration

This is a feature request from someone at a company. They'd like to have more control over the ish controls. Rather than selecting ranges, they'd like to do something like:

• iPhone - exactly 320
• Android - exactly 360
• iPad - exactly 768
• L - 768 to 1200
• XL - 1200 to 1800
• Jumbo - 1800 to 3000

You get the idea. I'm not sure what the default ish configurations are, but this was presented to me.

[EPIC] vNext

This is the tracking issue for the vNext milestone, which serves as a living document for the 4..0 version of this repository.

All vNext Issues: https://github.com/pattern-lab/styleguidekit-assets-default/milestone/1

vNext is informed in part from the following locations:

• This repository backlog
  • review backlog for vNext enhancements
• drupal-pattern-lab/roadmap#8
• The evolving Pattern Lab Spec Guidance - https://github.com/pattern-lab/the-spec

More to come...

Configurable size range on S/M/L

(Feature request)
We tend to use small, medium and large breakpoints in our responsive design projects. Which adds up nicely to PL's S/M/L buttons, except for when it comes to the size range they are set to use. Our breakpoints are usually: small up to 767px, medium 768-1023 and large 1024+. So we would like the S/M/L-buttons to keep within those ranges as well. Today this means fiddling with the go<Small/Medium/Large>() functions, which isn't very practical and is beyond the reach of our versioning system.

Would love to see this range configurable in patternlab-config.json like ishMinimum and ishMaximum is today.

This is probably related to #46 as well, not quite the same, but related.. :)

Implement support the JSON Schema editor / tester

This should only occur after definition and voting over at https://github.com/pattern-lab/the-spec

Cannot select/focus `<input>`s and `<select>`s within PL iFrame

Hi there — thanks for working hard on various new iterations of PatternLab, particularly the Gulp edition!

I noticed a bug with my <select> and <input> elements, only when they were being accessed via the PatternLab iFrame. I couldn't seem to select them or get them to keep focus when clicking on them.

I tracked down the issue to the body[0].onclick function that starts at line 50 within /src/js/postmessage.js.

I forked this repo and commented out that functionality, and my issue was resolved. I thought I'd mention it in case it's helpful to point out as a bug.

Thanks again for PatternLab, I love using it!

Check to make sure `comments.comments` exists

Also make sure it doesn't equal null. Line 127 of panels-viewer.js should probably read:

if ((comments !== undefined) && (comments.comments !== undefined) && (comments.comments !== null)) {

Add "Publish Release" doc

Add a ./docs dir and document how to push a release so PHP and Node can take advantage of it.

Remove or Revise "There is no description for this pattern." Default

The current behavior for patterns without descriptions is "There is no description for this pattern.
" which I think is pretty ugly.

I'd be happy to remove it altogether, but if we decide there should be a default message, it should say something like "Add a description for this pattern"

Support patternengine name rather than file extension in the template tab

So, this is to solve my current conundrum, which we touched on in this spec thread: pattern-lab/the-spec#26.

When I present our library of underscore (named as .html, unfortunately) templates, we currently see this unfortunate naming of tabs:

And we would rather see this much more helpful naming:

To do this, we just need to add one field, patternEngineName, to the generated patternData that gets written out onto each rendered template file. I believe we can do this in such a way that it works with both the PHP and Node engine schemes, and also in a way that's backwards compatible should that value not be present.

Is dist/js/patternlab-viewer.min.js used?

What is this file used for? I can't find anything and it's mostly the same as
dist/styleguide/js/patternlab-viewer.js

Re-architect frontend UI code

In an effort to make Pattern Lab's UI more flexible and extensible, the frontend code should be re-architected. I'll likely be tackling this using these conventions, which have proven to be effective on very large, complex software applications. So it should work well here.

Given the nature of the changes, we'll have to be mindful of what would be affected (plugins, dependencies, etc), so could use some guidance in flagging that stuff.

Patterns with styleModifiers not showing up in lineage

When patterns are included using a styleModifier, the included pattern no longer appears in the lineage.

{{> atoms-square }} without any styleModifier shows up correctly:

But {{> atoms-square:c-block-media__img }} doesn't display in the lineage:

I also tested including pattern parameters, and those behave normally.

Remove caching meta tags?

This is probably a question for @EvanLovely, but I'm trying to clean up the UI as much as possible. We currently have this code in the head:

<!-- never cache patterns -->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

I believe that was to force the browser to never cache patterns so you always so the latest version. That said, I was wondering if there's another way to accomplish that without these tags? Or if it's necessary at all?

Make it easier to customize the frontend

A bucket of ideas, which may become their own issues in respective repositories, or spec issues:

• Allow users to provide override templates at build time
• Allow users to provide their own CSS at build time
• Do not minify assets by default

Remove Mustache Code

There is Mustache specific code in src/html/index.html in both master and dev branches that is making it's way to the Twig Editions. Even though we have pattern-lab/styleguidekit-twig-default as a styleguidekit that requires this repo, I've not found a way to override what is done in this repo there. I propose one of two solutions:

1. Keep all Template Engine specific code out of this repo and move that job to the Twig/Mustache/etc Engines or to the Twig/Mustache/etc StyleguideKits OR:
2. Provide a way for Engines or StyleguideKits to override what is in this repo; perhaps by providing a template of the same name.

Perhaps I'm missing a way to do option 2 already. Here is the contents this repos composer.json "extra" section:

    "extra": {
        "patternlab": {
            "dist": {
                "publicDir": [
                    { "bower_components/*": "styleguide/bower_components/*" },
                    { "css/patternlab/*": "styleguide/css/*" },
                    { "fonts/*": "styleguide/fonts/*" },
                    { "html/index.html": "index.html" },
                    { "images/*": "styleguide/images/*" },
                    { "js/*": "styleguide/js/*" }
                ],
                "sourceDir": [
                    { "css/custom/*": "styleguide/css/*" }
                ]
            },
            "config": {
                "ishMinimum": "240",
                "ishMaximum": "2600",
                "ishControlsHide": ["hay"]
            }
        }
    }

Could we use something like this to override the index.html file by placing this in the Twig Styleguide's extra section?

"extra": {
  "patternlab": {
    "dist": {
      "publicDir": [
        { "html/index.html": "index.html" }
      ]
    }
  }
}

Thanks!

Make sure viewall- check is for 0 and not just for anywhere in the string

Know the fix. Just implement.

'View All' menu navigation issue

Sorry to cross-post this, but pattern-lab/patternlab-php#370 seems to be filed against the wrong repository ;)

So here is the actual issue report by @anthonysimone:

I just updated patten lab core this morning and noticed the 'View All' items in the navigation were behaving a bit oddly. The 'View All' item on the top level categories (Molecules, Organisms, etc) seems instead to redirect to the last item in the previous menu. So for example, clicking on Organisms -> View All redirects to the last item in the Molecules first level dropdown. However, if you click the same View All link a second time before navigating away from the page, then it does bring you to the All page as expected. I created a new project and tested it in a fresh environment to make sure I didn't just mess up my own project, but I saw the same behavior there as well.

We can confirm this behavior as well on our side.

What files and data is needed to run this?

I'd like to better understand the data and file layout this styleguide kit needs to run.

First, there is (relative to index.html) the styleguide/data/patternlab-data.js file that needs to initialize some JavaScript vars. I will try to document that, but at the moment it seems it does not need all the data/keys put in there by (for example) patternlab-twig-se.

Then, there are also some hardcoded paths and menu items for the "view all" option; those refer to a styleguide/html/styleguide.html file.

url-handler.js also contains some hardcoded paths to styleguide/html/styleguide.html and snapshots/index.html as well as references to a patterns directory. I have not yet understood when these come into play.

I also wonder whether the viewer needs to make assumptions about the organization of patterns into types, subtypes and so on.

Do you guys know about other things?

And – are those assumptions really necessary or do you think we could get away with an extension of patternlab-data.js to contain all those paths?

It could make things much easier for the various PL ports and editions (or custom solutions) if they would generate the files they consider necessary and then just pass data + URLs to the viewer that describe the menu structure as well as paths to the preview files and/or source preview.

Implement Copy to Clipboard Support for Code View Panes

As a designer/developer, I'd like to be able to quickly copy/paste pattern HTML or template code, so that I may more easily use the pattern in other systems.

---

https://clipboardjs.com/ looks like an option with some nice HTML-based declarative set of options or an API. Good browser support too.

Remove global box-sizing reset

Could you consider removing the global box-sizing: border-box reset declaration?

It sometimes starts messing up layouts because the styleguide.css is of course not included in my production project. So where in patternlab the box-sizing reset applies to all elements it does not when viewing elements outside of patternlab because there is no global reset in my production CSS. I only set box-sizing to border-box on elements that need it.

So please consider removing this global box sizing reset:

/*------------------------------------*\
#RESET
\*------------------------------------*/

/**
* Apply border-box to all elements
*
* 1) This is a broadly-applied style that affects every
* element on the screen. This can bleed into user's styles
* but since it's been a best practice for years now we're
* going to default to this.
*/
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

And apply it only to elements that need it:

.sg-input {
    box-sizing: border-box; // apply to element that needs the reset
    margin: -2px 0 0 0;
    padding: 0.1em;
    border: 0;
    border-radius: $sg-border-radius;
    background: $sg-black;
    color: $sg-gray;
    width: 25px;
    text-align: right;
    transition: all $sg-animate-quick ease-out;
    ...
}

Style Tags Inside Pattern Description

The contents of the markdown file are displayed in .sg-pattern-desc, so we'll need to do a better job at styling raw tags within that scope. Things like:

• Headings
• Blockquotes
• Images
• Code
• tables
• lists
• hrs

https://daringfireball.net/projects/markdown/

Release 3.5 to npm registry

Would you mind publishing latest version to npm registry, please?

WCAG Greys

Try out some WCAG colors just to see what might work in the new edition.

+@dcmouyard

Add try/catch on the iframemessage calls

Add a try/catch on the JSON.parse in the iframemessage calls. Not everything sent will be PL-related JSON strings. Fail silently.