holidaypirates / nucleus

Nucleus is a living style guide generator for atomic css based components. It's a Node application parsing the source SCSS files and reading information from DocBlock annotations.
https://holidaypirates.github.io/nucleus/
MIT License
475 stars 43 forks source link

Annotation @flag not allowed for type Molecule #46

Open harapeko opened 7 years ago

harapeko commented 7 years ago

nucleus-styleguide: 1.1.0 node: 5.5.0 npm: 4.0.3

It seems like @flag supported for @molecule on Reference. Substitutions & Flags

/**
 * A menu bar which spans across full page width.
 *
 * @molecule Menu Bar
 * @flag full-width
 * @markup
 *   <nav class="menu">
 *     @{include:.menu-item}
 *     @{include:.menu-item}
 *     @{include:.menu-item}
 *   </nav>
 */
.menu { /* ... */ }

The following example

/**
 * @molecule global-nav
 * @flag full-width
 */

results in the following warning:

 Take care! Annotation @flag not allowed for type Molecule of .global-nav in resources/assets/pc/sass/_components.global-nav.scss
 Valid annotations are @molecule, @section, @description, @modifiers, @markup,
 @deprecated, @script. This element will not appear in the final StyleGuide
 until you fix this error.

I also peeked into Molecule.js in master and it also doesn't seem to support this:

this.fillable = ['molecule', 'section', 'description', 'modifiers', 'markup', 'deprecated','script'];

Sholud i use @structure ? relate issue

ryanhyslop commented 7 years ago

I believe this may be by design, having ran into this issue myself I think it makes sense how it is. A molecule is a smaller unit that can be included in other molecules and structures. If a molecule needs a full page width then its not very reusable.

In your case I think the nav may well be fine as a molecule but you'd have a @structure for a masthead or header area that includes the navigation ( and possibly a logo etc) that goes full width?

Guess its all pretty subjective but that direction seems to work well for me.

harapeko commented 7 years ago

I convince it. In that case, it may be a reference that is misstake.

Substitutions & Flags

/**
 * A menu bar which spans across full page width.
 *
 * @molecule Menu Bar
 * @flag full-width
 * @markup
 *   <nav class="menu">
 *     @{include:.menu-item}
 *     @{include:.menu-item}
 *     @{include:.menu-item}
 *   </nav>
 */
.menu { /* ... */ }