diff --git a/assets/scripts/CommonUiModule/directives/code-preview-toggle.js b/assets/scripts/CommonUiModule/directives/code-preview-toggle.js index e62df04..73b7c12 100644 --- a/assets/scripts/CommonUiModule/directives/code-preview-toggle.js +++ b/assets/scripts/CommonUiModule/directives/code-preview-toggle.js @@ -15,7 +15,7 @@ $('[data-d-code-preview-toggle]').each(function (i, element ) { $(element).on('click', function () { $(element) .closest('.SG-component') - .find('.SG-component__markup') + .find('.SG-component__markup, .SG-code__title') .stop() .clearQueue() .slideToggle(250); diff --git a/assets/styles/atoms/code.scss b/assets/styles/atoms/code.scss index f081188..20a2a73 100644 --- a/assets/styles/atoms/code.scss +++ b/assets/styles/atoms/code.scss @@ -37,6 +37,10 @@ } } +.SG-code__title{ + display: none; +} + /** * Alternative code block with monospaced font, maily used for code examples * and command instructions on the documentation pages. @@ -77,4 +81,3 @@ } } } - diff --git a/assets/styles/structures/header.scss b/assets/styles/structures/header.scss index 0fcd3ca..505e405 100644 --- a/assets/styles/structures/header.scss +++ b/assets/styles/structures/header.scss @@ -19,6 +19,10 @@ * @{include:.SG-nav-icons} * @{include:.SG-nav} * + * @script + * $('body').on('click','button',function(){ + * $(this).doSomething(); + * }); */ .SG-header { diff --git a/assets/views/common/components.pug b/assets/views/common/components.pug index d3c8bff..33433a3 100644 --- a/assets/views/common/components.pug +++ b/assets/views/common/components.pug @@ -14,7 +14,10 @@ include ../entities/colors.pug include ../entities/icons.pug include ../entities/mixins.pug + + mixin components(components) + -var lastEntity = null each component in components @@ -98,8 +101,18 @@ mixin component(component) div.SG-table__cell= val.description || '' -if (component.markup) + div.SG-row div.SG-gr-12.SG-nogutter div.SG-code.SG-code--hidden.SG-component__markup.language-html(data-d-code-preview) code | #{component.markup} + + -if (component.script) + div.SG-row + div.SG-gr-12.SG-nogutter + h3.SG-code__title. + Script + div.SG-code.SG-code--hidden.SG-component__markup.language-javascript(data-d-code-preview) + code + | #{component.script} diff --git a/assets/views/common/layout.pug b/assets/views/common/layout.pug index 5a11016..c1156e6 100644 --- a/assets/views/common/layout.pug +++ b/assets/views/common/layout.pug @@ -10,6 +10,7 @@ include ./toc.pug + doctype html html(lang="en") head @@ -38,3 +39,6 @@ html(lang="en") block content script(src="scripts/app.js") + -if(meta.scripts) + each script in meta.scripts + script(src=script) diff --git a/config.nucleus.json b/config.nucleus.json index 1a2feb4..c041206 100644 --- a/config.nucleus.json +++ b/config.nucleus.json @@ -7,6 +7,7 @@ "docs/src/styles/**/*.scss" ], "css": "../docs/build/styles/app.css", - "target" : "styleguide", - "namespace": null + "target" : "./styleguide", + "namespace": null, + "scripts" : ["./scripts/ui-kit.js","./assets/scripts/ui-kit2.js"] } diff --git a/index.js b/index.js index 0d44ee6..4218aff 100755 --- a/index.js +++ b/index.js @@ -102,6 +102,7 @@ for(var t in templateFiles) { title: config.title, namespace: config.namespace, counterCSS: config.counterCSS, + scripts: config.scripts, demo: !!config.demo } }); diff --git a/src/entities/Atom.js b/src/entities/Atom.js index 139cf5f..abb1171 100644 --- a/src/entities/Atom.js +++ b/src/entities/Atom.js @@ -19,7 +19,7 @@ var Atom = function (raw) { // Set atom-specific entity properties this.type = "Atom"; - this.fillable = ['atom', 'section', 'description', 'modifiers', 'markup', 'deprecated']; + this.fillable = ['atom', 'section', 'description', 'modifiers' , 'markup', 'deprecated', 'script']; // Validate the raw input data for common mistakes if (!this.validate()) return {}; @@ -32,6 +32,7 @@ var Atom = function (raw) { description: raw.annotations.description, modifiers: this.getModifiers(), markup: raw.annotations.markup, + script: raw.annotations.script || false, deprecated: raw.annotations.deprecated, location: 'atoms.html', hash: this.hash() diff --git a/src/entities/Molecule.js b/src/entities/Molecule.js index 81bce29..46e9ff3 100644 --- a/src/entities/Molecule.js +++ b/src/entities/Molecule.js @@ -8,7 +8,6 @@ * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file for details. */ - 'use strict'; var Entity = require('./Entity'); @@ -19,7 +18,7 @@ var Molecule = function(raw) { // Set molecule-specific entity properties this.type = "Molecule"; - this.fillable = ['molecule', 'section', 'description', 'modifiers', 'markup', 'deprecated']; + this.fillable = ['molecule', 'section', 'description', 'modifiers', 'markup', 'deprecated','script']; // Validate the raw input data for common mistakes if (!this.validate()) return {}; @@ -32,6 +31,7 @@ var Molecule = function(raw) { description: raw.annotations.description, modifiers: this.getModifiers(), markup: raw.annotations.markup, + script: raw.annotations.script || false, deprecated: raw.annotations.deprecated, hash: this.hash(), location: 'molecules.html' diff --git a/src/entities/Structure.js b/src/entities/Structure.js index 175c965..11fc1b7 100644 --- a/src/entities/Structure.js +++ b/src/entities/Structure.js @@ -3,7 +3,6 @@ * Copyright (C) 2016 Michael Seibt * * With contributions from: - - * - Ryan Potter (www.ryanpotter.co.nz) * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file for details. @@ -19,7 +18,7 @@ var Structure = function(raw) { // Set structure-specific entity properties this.type = "Structure"; - this.fillable = ['structure', 'section', 'description', 'modifiers', 'markup', 'flag', 'deprecated']; + this.fillable = ['structure', 'section', 'description', 'modifiers', 'markup', 'flag', 'deprecated','script']; // Validate the raw input data for common mistakes if (!this.validate()) return {}; @@ -32,6 +31,7 @@ var Structure = function(raw) { description: raw.annotations.description, modifiers: this.getModifiers(), markup: raw.annotations.markup, + script: raw.annotations.script || false, deprecated: raw.annotations.deprecated, flags: this.getFlags(), location: 'structures.html', diff --git a/test/Atom.test.js b/test/Atom.test.js index e1c1834..a3b388f 100644 --- a/test/Atom.test.js +++ b/test/Atom.test.js @@ -29,20 +29,22 @@ describe('Atom', function() { annotations: { description: 'A test description', atom: 'Test-Component', - markup: '...' + markup: '...', + script: '....' } }); assert.deepEqual(a, { name: 'Test-Component', type: 'atom', - hash: '7cf4b2beae2f0536b3ebb3030ccef2ed3d89c0fe', + hash: '47edcec9fa48df43335b12fc0e3e1cc9a4709bf1', descriptor: '.test', location: 'atoms.html', section: 'Atoms > Other', description: 'A test description', modifiers: null, markup: '...', + script: '....', deprecated: false }); }); @@ -58,6 +60,7 @@ describe('Atom', function() { description: 'A test description', atom: 'Test-Component', markup: '...', + script: '...', deprecated: true } }); @@ -65,13 +68,14 @@ describe('Atom', function() { assert.deepEqual(a, { name: 'Test-Component', type: 'atom', - hash: 'f7f408f0cf9b50d98473832406bb5ea2b750db2a', + hash: '1af43675b26c728f36bb88af3dcabdc7c0dc9a35', descriptor: '.test', location: 'atoms.html', section: 'Atoms > Other', description: 'A test description', modifiers: null, markup: '...', + script: '...', deprecated: true }); });