desy-html 7.3.1 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "7.3.1",
+  "version": "8.0.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",
@@ -37,6 +37,7 @@
     "@tailwindcss/typography": "^0.5.7",
     "autoprefixer": "^10.0.2",
     "hex-rgb": "^5.0.0",
+    "highlight.js": "^11.7.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.15",
     "postcss-cli": "^10.0.0",
@@ -51,7 +52,9 @@
     "gulp-footer": "^2.0.2",
     "gulp-nunjucks-render": "^2.2.3",
     "gulp-postcss": "^9.0.1",
-    "gulp-strip-css-comments": "^2.0.0"
+    "gulp-strip-css-comments": "^2.0.0",
+    "js-beautify": "^1.14.7",
+    "outdent": "^0.8.0"
   },
   "optionalDependencies": {
     "win-node-env": "^0.6.1"

package/src/css/styles.css

@@ -42,4 +42,4 @@
 @import "./component.headroom.css";
 
 /* Framework utilities */
-@import "tailwindcss/utilities";
+@import "tailwindcss/utilities";

package/src/js/filters/filter-caller.js

@@ -0,0 +1,6 @@
+function filterCaller (params) {
+  delete params.caller;
+  return params
+}
+
+module.exports = filterCaller

package/src/js/filters/highlight.js

@@ -0,0 +1,14 @@
+const hljs = require('highlight.js')
+
+/**
+ * Format code with syntax highlighting
+ *
+ * @param {string} code - Code in plain text
+ * @param {string} [language] - Code programming language
+ * @returns {string} Code with syntax highlighting
+ */
+function highlight (code, language) {
+  return hljs.highlight(code.trim(), { language: language || 'plaintext' }).value
+}
+
+module.exports = highlight

package/src/js/filters/index.js

@@ -0,0 +1,10 @@
+/**
+ * Nunjucks filters
+ */
+const highlight = require('./highlight')
+const filtercaller = require('./filter-caller')
+
+module.exports = {
+  highlight,
+  filtercaller
+}

package/src/js/globals/get-html-code-from-example.js

@@ -0,0 +1,29 @@
+const beautify = require('js-beautify')
+/**
+ * Component HTML code (formatted)
+ *
+ * @param {string} componentName - Component name
+ * @param {unknown} params - Component macro params
+ * @param {unknown} pathName - path name
+ */
+function getHTMLCodeFromExample (componentName, params, pathName) {
+  const templatePath = `${pathName}s/${componentName}/_template.${componentName}.njk`;
+
+  // Render to HTML
+  const html = this.env.render(templatePath, { params }).trim()
+
+  // Default beautify options
+  const options = beautify.html.defaultOptions()
+
+  return beautify.html(html, {
+    indent_size: 2,
+    // Ensure nested labels in headings are indented properly
+    inline: options.inline.filter((tag) => !['label'].includes(tag)),
+    // Remove blank lines
+    max_preserve_newlines: 0,
+    // Ensure attribute wrapping in header SVG is preserved
+    wrap_attributes: 'preserve'
+  })
+}
+
+module.exports = getHTMLCodeFromExample

package/src/js/globals/get-html-code-from-file.js

@@ -0,0 +1,26 @@
+const beautify = require('js-beautify')
+/**
+ * Component HTML code (formatted)
+ *
+ * @param {string} templatePath - Path to nunjucks file. Eg: `includes/_loremipsum-large.njk`;
+ */
+function getHTMLCodeFromFile (templatePath) {
+
+  // Render to HTML
+  const html = this.env.render(templatePath).trim()
+
+  // Default beautify options
+  const options = beautify.html.defaultOptions()
+
+  return beautify.html(html, {
+    indent_size: 2,
+    // Ensure nested labels in headings are indented properly
+    inline: options.inline.filter((tag) => !['label'].includes(tag)),
+    // Remove blank lines
+    max_preserve_newlines: 0,
+    // Ensure attribute wrapping in header SVG is preserved
+    wrap_attributes: 'preserve'
+  })
+}
+
+module.exports = getHTMLCodeFromFile

package/src/js/globals/get-nunjucks-code-from-example.js

@@ -0,0 +1,32 @@
+const { outdent } = require('outdent')
+
+
+/**
+ * Component Nunjucks code (formatted)
+ *
+ * @param {string} componentName - Component name
+ * @param {unknown} params - Component macro params
+ * @returns {string} Nunjucks code
+ */
+function getNunjucksCodeFromExample (componentName, params, pathName) {
+  const macroName = kebabCaseToPascalCase(componentName)
+
+  return outdent`
+    {% from "${pathName}s/${componentName}/macro.njk" import ${pathName}${macroName} %}
+
+    {{ ${pathName}${macroName}(${
+      JSON.stringify(params, undefined, 2)
+    }) }}
+  `
+}
+
+function kebabCaseToPascalCase (value) {
+  return value
+    .toLowerCase()
+    .split('-')
+    // capitalize each 'word'
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
+}
+
+module.exports = getNunjucksCodeFromExample

package/src/js/globals/get-nunjucks-code-from-file.js

@@ -0,0 +1,24 @@
+const { outdent } = require('outdent')
+
+/**
+ * Component Nunjucks code (formatted)
+ * Uses node.js to read the content of a file, display it as code.
+ * @param {string} templatePath - Path to nunjucks file. Eg: `includes/_loremipsum-large.njk`;
+ * @returns {string} Nunjucks code
+ */
+function getNunjucksCodeFromFile (templatePath) {
+  const fs = require('fs');
+  let codeFromFile
+
+  try {
+    codeFromFile = fs.readFileSync(`src/templates/${templatePath}`, 'utf8');
+  } catch (err) {
+    console.error(err);
+  }
+
+  return outdent`
+    ${codeFromFile}
+  `
+}
+
+module.exports = getNunjucksCodeFromFile

package/src/js/globals/index.js

@@ -0,0 +1,14 @@
+/**
+ * Nunjucks globals
+ */
+const getHTMLCodeFromExample = require('./get-html-code-from-example.js')
+const getNunjucksCodeFromExample = require('./get-nunjucks-code-from-example.js')
+const getHTMLCodeFromFile = require('./get-html-code-from-file.js')
+const getNunjucksCodeFromFile = require('./get-nunjucks-code-from-file.js')
+
+module.exports = {
+  getNunjucksCodeFromExample,
+  getHTMLCodeFromExample,
+  getNunjucksCodeFromFile,
+  getHTMLCodeFromFile
+}

package/src/js/index.js

@@ -41,3 +41,24 @@ notificationComponent(aria);
 radioButtonComponent(aria);
 checkBoxComponent(aria);
 
+
+//Using the browser API to copy code to the clipboard
+const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');
+copyButtons.forEach(button => {
+  button.addEventListener("click", async (event) => {
+    await copyCode(button);
+  });
+});
+
+async function copyCode(button) {
+  const code = button.nextElementSibling.innerText;
+  await navigator.clipboard.writeText(code);
+  setTimeout(() => {
+    button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path></svg> Copiado';
+  },100)
+
+  setTimeout(() => {
+    button.innerHTML = "Copiar código";
+  },2500)
+
+}