feat(button): implement button

.eleventy.js

@@ -1,12 +1,18 @@
 const { readFileSync } = require('fs')
 const { join } = require('path')
 const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
+const markdownShortcode = require('eleventy-plugin-markdown-shortcode')
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
 const markdownIt = require('markdown-it')
 const markdownItAnchor = require('markdown-it-anchor')
 const pluginTOC = require('eleventy-plugin-toc')
 
 module.exports = function (eleventyConfig) {
+  eleventyConfig.addWatchTarget('./README.md')
+  eleventyConfig.addPlugin(markdownShortcode, {
+    html: true,
+    linkify: true,
+  })
   eleventyConfig.addPlugin(eleventyNavigationPlugin)
   eleventyConfig.addPlugin(pluginTOC, {
     tags: ['h2', 'h3'],
@@ -15,32 +21,18 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight, {
     alwaysWrapLineHighlights: true,
   })
+  const highlighter = eleventyConfig.markdownHighlighter
+  eleventyConfig.addMarkdownHighlighter((str, language) => {
+    if (language === 'mermaid') {
+      return `<pre class="mermaid">${str}</pre>`
+    }
+    return highlighter(str, language)
+  })
   eleventyConfig.setLibrary(
     'md',
     markdownIt({ html: true }).use(markdownItAnchor)
   )
-
-  eleventyConfig.addShortcode(
-    'source',
-    function (path, lang = 'html', onlyJS = false) {
-      let code = readFileSync(join(__dirname, path), {
-        encoding: 'utf8',
-      }).trim()
-      if (onlyJS) {
-        code = code
-          .split('<script type="module">')[1]
-          .split('</script>')[0]
-          .split('\n')
-          .map((l) => {
-            if (l.indexOf('    ') === 0) return l.slice(4)
-            return l
-          })
-          .join('\n')
-          .trim()
-      }
-      return `\`\`\`${lang} \n${code}\n\`\`\` `
-    }
-  )
+  eleventyConfig.addPassthroughCopy({ 'src/docs/assets': 'assets' })
 
   eleventyConfig.addShortcode('tokens-colors', function () {
     let output = ''
@@ -62,23 +54,28 @@ module.exports = function (eleventyConfig) {
     return output
   })
 
-  eleventyConfig.addPairedShortcode('example', function (code, lang = 'html') {
-    let output = '<docs-example>\n'
-    output += '<div slot="code">\n\n'
-    output += `\`\`\`${lang} \n${code.trim()}\n\`\`\``
-    output += '\n</div>'
-    output += '<div slot="show">'
-    output += code.trim()
-    output += '</div>'
-    output += '</docs-example>'
-    return output
-  })
+  eleventyConfig.addPairedShortcode(
+    'example',
+    function (code, lang = 'html', stacked, opened) {
+      let output = `<docs-example code="${encodeURIComponent(code.trim())}" ${
+        stacked ? 'stacked' : ''
+      } ${opened ? 'opened' : ''}>\n`
+      output += `<div slot="code">\n\n`
+      output += `\`\`\`${lang} \n${code.trim()}\n\`\`\``
+      output += '\n</div>'
+      output += '<div slot="show">'
+      output += code.trim()
+      output += '</div>'
+      output += '</docs-example>'
+      return output
+    }
+  )
 
   return {
     dir: {
       input: './src',
       output: './dist_docs',
-      includes: './docs/_includes',
+      includes: './docs/includes',
     },
     templateFormats: ['html', 'md', 'njk', 'css'],
   }

.eleventyignore

@@ -1 +1,10 @@
+.github
+.stencil
+.stencil
+coverage
+dist
+dist_docs
+node_modules
+screenshot
+scripts
 src/docs

CONTRIBUTING.md

@@ -127,9 +127,11 @@ Some things are not linted but still are important:
 
 - We prefix Liquid components with `ld-` and docs components with `docs-`.
 - We use [BEM](http://getbem.com/introduction/) as a methodology for organizing CSS rules.
-- We mostly do not make use of shadow dom because it introduces quirks in regard to accessibiliy 
-and because it does not allow for a straight forward customization by the consuming application;
-hense we depend on namespacing.
+- We use relative length units in CSS, mostly `rem`; absolute length units should be avoided 
+(borders and outlines may count as an exception to the rule).
+- We mostly do not make use of shadow dom because it introduces quirks in regard to accessibiliy, 
+makes pure CSS theming difficult, does not allow for a straight forward customization and
+makes it hard to purge unused CSS; hense we depend on namespacing.
 - Components which **do** use shadow dom should have their CSS file suffixed with .shadow.css 
 so that PostCSS is aware of it and does not include them into the liquid.css dist file.
 - When ever possible, try to provide CSS components alongside Web components using the same CSS file; 
@@ -154,6 +156,11 @@ again, prefix the classes with `ld-`, use BEM and do **not** use shadow dom. Her
   It applies the CSS class `ld-button` to its root element. Now the consuming developer can decide 
   on either using the WebComponent `<ld-button>Submit</ld-button>` or the CSS class directly
   `<button class="ld-button">Submit</ld-button>`.
+- We enable type checking and intelliSense for Web Component attributes by importing the autogenerated 
+components type definitions file (src/components.d.ts) at the top of all imports in each component: 
+  ```tsx
+  import '../../../components' // type definitions for type checks and intelliSense
+  ```
 
 We also use [husky](https://typicode.github.io/husky/) for running Git hooks which in turn run lint tasks
 before you commit or push something. Which brings us to the next point...

README.md

@@ -1,9 +1,7 @@
-# Liquid ⚗️
+# Liquid
 
 [![Join us on GitHub discussions](https://img.shields.io/badge/Join%20us-on%20GitHub%20discussions-blue)](https://github.com/emdgroup-liquid/liquid/discussions)
 [![Join us on Teams](https://img.shields.io/badge/Join%20us-on%20Teams-blue)](https://teams.microsoft.com/l/channel/19%3ab5381a933c6c413ea0ae41c3b424acd8%40thread.skype/Liquid%2520Design%2520System?groupId=babb6c18-c13f-43ef-baf2-ce1617f228cd&tenantId=db76fb59-a377-4120-bc54-59dead7d39c9)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-__Beautiful, accessible and versatile UI components__
-
 > ⚠️ IMPORTANT: Liquid is currently in its early development stage and subject to major changes until release v1.0.

package.json

@@ -35,22 +35,24 @@
     "lint:styles": "stylelint ./src/**/*css",
     "lint:ts": "tsc --noemit -p tsconfig.docs.json",
     "optimise_svg_icons": "ts-node scripts/optimiseSVGIcons.ts",
-    "start": "run-p serve build:styles:docs:docs watch:**",
-    "serve": "nc -z 127.0.0.1 8080 && exit 0 || live-server --port=8080 dist_docs --no-browser",
+    "start": "run-p serve build:styles:docs:docs watch:** start:info",
+    "start:info": "echo 'serving on http://localhost:8080'",
+    "serve": "nc -z 127.0.0.1 8080 && exit 0 || live-server --port=8080 dist_docs --no-browser --quiet",
     "test": "run-p test:stencil test:a11y",
     "test:stencil": "stencil test --spec --e2e --screenshot --coverage",
-    "test:a11y": "jest --config=jest.config.js",
+    "test:a11y": "jest --config=jest.config.a11y.js",
     "test:e2e": "stencil test --e2e --screenshot",
     "test:unit": "stencil test --spec --coverage",
     "test:watch": "stencil test --spec --e2e --watchAll",
+    "test:compare_screenshots": "live-server --port=4000 screenshot --quiet --mount=/node_modules:./node_modules",
     "update_design_tokens": "dotenv -e .env -- ts-node scripts/updateDesignTokens.ts",
     "watch:eleventy": "npx @11ty/eleventy --watch",
     "watch:global_styles:liquid": "chokidar src/liquid/global/styles/**/*.css -c 'npm run build:styles:docs:liquid'",
     "watch:global_styles:docs": "chokidar src/docs/global/styles/**/*.css -c 'npm run build:styles:docs:docs'",
     "watch:stencil": "stencil build --docs --watch --dev --no-open --config=stencil.config.docs.ts"
   },
   "dependencies": {
-    "@stencil/core": "^2.5.0"
+    "@stencil/core": "^2.5.1"
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "devDependencies": {
@@ -73,6 +75,7 @@
     "chokidar-cli": "^2.1.0",
     "cssnano": "^4.1.10",
     "dotenv-cli": "^4.0.0",
+    "eleventy-plugin-markdown-shortcode": "^1.1.0",
     "eleventy-plugin-toc": "^1.1.0",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",