feat(ld-input): add resize prop

.eleventy.js

@@ -101,67 +101,67 @@ module.exports = function (eleventyConfig) {
   )
 
   // Code example short codes
-  eleventyConfig.addPairedShortcode(
-    'example',
-    function (
-      code,
-      lang = 'html',
-      stacked,
-      opened,
-      background,
-      themable = true,
-      heighlight,
-      heighlightCssComponent
-    ) {
-      const [codeWebComponent, codeCssComponent] = code
-        .split('<!-- CSS component -->')
-        .map((c) => c.trim())
-      let output = '<docs-example '
-      output += `code="${encodeURIComponent(codeWebComponent)}" `
-
-      if (codeCssComponent) {
-        output += `code-css-component="${encodeURIComponent(
-          codeCssComponent
-        )}" `
-      }
+  eleventyConfig.addPairedShortcode('example', function (code, config) {
+    const defaultConfig = {
+      lang: 'html',
+      stacked: false,
+      opened: false,
+      background: undefined,
+      themable: true,
+      hasPadding: true,
+      heighlight: undefined,
+      heighlightCssComponent: undefined,
+    }
+    const finalConfig = Object.assign(defaultConfig, JSON.parse(config || '{}'))
+    const [codeWebComponent, codeCssComponent] = code
+      .split('<!-- CSS component -->')
+      .map((c) => c.trim())
+    let output = '<docs-example '
+    output += `code="${encodeURIComponent(codeWebComponent)}" `
+
+    if (codeCssComponent) {
+      output += `code-css-component="${encodeURIComponent(codeCssComponent)}" `
+    }
 
-      output += `${stacked ? ' stacked' : ''}`
-      output += `${opened ? ' opened' : ''}`
-      if (background) {
-        output += ` background="${background}"`
-      }
-      output += `${themable ? ' themable' : ''}`
-      output += '>\n'
-      output += `<div slot="code">\n\n`
-      output += `\`\`\`${lang}${
-        heighlight ? '/' + heighlight : ''
-      } \n${codeWebComponent}\n\`\`\``
+    output += `${finalConfig.stacked ? ' stacked' : ''}`
+    output += `${finalConfig.opened ? ' opened' : ''}`
+    if (finalConfig.background) {
+      output += ` background="${finalConfig.background}"`
+    }
+    output += `${finalConfig.themable ? ' themable' : ''}`
+    output += `${finalConfig.hasPadding ? ' has-padding' : ''}`
+    output += '>\n'
+    output += `<div slot="code">\n\n`
+    output += `\`\`\`${finalConfig.lang}${
+      finalConfig.heighlight ? '/' + finalConfig.heighlight : ''
+    } \n${codeWebComponent}\n\`\`\``
+    output += '\n</div>'
+
+    if (codeCssComponent) {
+      output += `<div slot="codeCssComponent">\n\n`
+      output += `\`\`\`${finalConfig.lang}${
+        finalConfig.heighlightCssComponent
+          ? '/' + finalConfig.heighlightCssComponent
+          : ''
+      } \n${codeCssComponent.trim()}\n\`\`\``
       output += '\n</div>'
+    }
 
-      if (codeCssComponent) {
-        output += `<div slot="codeCssComponent">\n\n`
-        output += `\`\`\`${lang}${
-          heighlightCssComponent ? '/' + heighlightCssComponent : ''
-        } \n${codeCssComponent.trim()}\n\`\`\``
-        output += '\n</div>'
-      }
+    output += `<div slot="show">${codeWebComponent.replaceAll(
+      /\n\n/g,
+      '\n'
+    )}</div>`
 
-      output += `<div slot="show">${codeWebComponent.replaceAll(
+    if (codeCssComponent) {
+      output += `<div slot="showCssComponent">${codeCssComponent.replaceAll(
         /\n\n/g,
         '\n'
       )}</div>`
-
-      if (codeCssComponent) {
-        output += `<div slot="showCssComponent">${codeCssComponent.replaceAll(
-          /\n\n/g,
-          '\n'
-        )}</div>`
-      }
-
-      output += '</docs-example>'
-      return output
     }
-  )
+
+    output += '</docs-example>'
+    return output
+  })
 
   return {
     dir: {

package.json

@@ -59,7 +59,6 @@
     "serve": "nc -z 127.0.0.1 8080 && exit 0 || live-server --port=8080 dist_docs --no-browser --no-css-inject --quiet",
     "test": "run-p test:stencil test:a11y",
     "test:stencil": "stencil test --spec --e2e --screenshot --coverage",
-    "test:a11y": "jest --config=jest.config.a11y.js",
     "test:e2e": "run-s test:e2e:run test:e2e:cleanup",
     "test:e2e:run": "stencil test --e2e --screenshot",
     "test:e2e:cleanup": "ts-node scripts/screenshots.ts rm",
@@ -80,7 +79,7 @@
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "devDependencies": {
-    "@11ty/eleventy": "^0.11.1",
+    "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-navigation": "^0.1.6",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0",
     "@babel/core": "^7.13.8",
@@ -100,10 +99,10 @@
     "@types/tether": "^1.4.6",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
+    "axe-core": "^4.3.5",
     "chokidar-cli": "^2.1.0",
     "cssnano": "^4.1.10",
     "dotenv-cli": "^4.0.0",
-    "eleventy-plugin-pwa": "^1.0.8",
     "eleventy-plugin-toc": "^1.1.0",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
@@ -115,14 +114,12 @@
     "husky": "^7.0.1",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
-    "jest-pa11y": "^1.1.5",
     "lint-staged": "^10.5.4",
     "live-server": "^1.2.1",
     "markdown-it-anchor": "^7.1.0",
     "mutation-observer": "^1.0.3",
     "node-fetch": "^2.6.2",
     "npm-run-all": "^4.1.5",
-    "pa11y": "^5.3.0",
     "postcss": "^8.2.15",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2",

screenshot/builds/master.json

@@ -5685,6 +5685,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "29473521",
+      "image": "aac575ef4227c83422c0cb5c177045d8.png",
+      "userAgent": "default",
+      "desc": "ld-input multiline css component resize",
+      "testPath": "./src/liquid/components/ld-input/test/ld-input.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "fdd9fe79",
       "image": "8ea54fac3f833befad027158419e51cf.png",
@@ -5698,6 +5711,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "1cc78539",
+      "image": "aac575ef4227c83422c0cb5c177045d8.png",
+      "userAgent": "default",
+      "desc": "ld-input multiline web component resize",
+      "testPath": "./src/liquid/components/ld-input/test/ld-input.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "db9080ce",
       "image": "f063bbae55a3e0af086a49487af3d576.png",

src/docs/components/docs-example/docs-example.css

@@ -91,7 +91,6 @@
     flex: 1 0;
     align-items: center;
     justify-content: flex-end;
-    /*margin: -0.5rem 0;*/
 
     > :not(:first-child) {
       margin-left: var(--ld-sp-12);
@@ -102,15 +101,23 @@
 .docs-example__show {
   background-color: var(--ld-col-neutral-010);
   color: var(--ld-col-neutral-900);
-  border: var(--ld-sp-1) solid var(--ld-col-neutral-100);
   border-bottom-width: 0;
   border-top-left-radius: var(--ld-br-l);
   border-top-right-radius: var(--ld-br-l);
-  padding: 0 var(--ld-sp-8) var(--ld-sp-24);
   overflow: hidden;
 
-  @media (max-width: 48rem) {
-    padding: 0 0 var(--ld-sp-24);
+  .docs-example--has-padding & {
+    border: var(--ld-sp-1) solid var(--ld-col-neutral-100);
+    padding: 0 var(--ld-sp-8) var(--ld-sp-24);
+
+    @media (max-width: 48rem) {
+      padding: 0 0 var(--ld-sp-24);
+    }
+
+    > div > * {
+      margin: var(--ld-sp-24) var(--ld-sp-24) 0;
+      max-width: calc(100% - 2 * var(--ld-sp-24));
+    }
   }
 
   > div {
@@ -119,11 +126,6 @@
     align-items: flex-start;
     justify-content: space-evenly;
     width: 100%;
-
-    > * {
-      margin: var(--ld-sp-24) var(--ld-sp-24) 0;
-      max-width: calc(100% - 2 * var(--ld-sp-24));
-    }
   }
 }
 .docs-example__show--stacked {

src/docs/components/docs-example/docs-example.tsx

@@ -1,5 +1,6 @@
 import '../../../components' // type definitions for type checking and intelliSense
 import { Component, h, Host, Prop, Listen, State } from '@stencil/core'
+import { getClassNames } from '../../../liquid/utils/getClassNames'
 
 /** @internal **/
 @Component({
@@ -26,6 +27,9 @@ export class DocsExample {
   /** Enables theme switch. */
   @Prop() themable = false
 
+  /** Puts some space between content and container. */
+  @Prop() hasPadding = false
+
   /** Current theme. */
   @State() currentTheme = 'ocean'
 
@@ -51,15 +55,14 @@ export class DocsExample {
   }
 
   render() {
-    let cl = 'docs-example'
-    if (this.isCodeVisible) {
-      cl += ' docs-example--code-visible'
-    }
-    if (this.isWebComponent) {
-      cl += ' docs-example--web-component'
-    } else {
-      cl += ' docs-example--css-component'
-    }
+    const cl = [
+      'docs-example',
+      this.isCodeVisible && 'docs-example--code-visible',
+      this.hasPadding && 'docs-example--has-padding',
+      this.isWebComponent
+        ? 'docs-example--web-component'
+        : ' docs-example--css-component',
+    ]
 
     let clShow = 'docs-example__show'
     if (this.themable && this.currentTheme) {
@@ -69,7 +72,7 @@ export class DocsExample {
     if (this.background) clShow += ` docs-example__show--${this.background}`
 
     return (
-      <Host class={cl}>
+      <Host class={getClassNames(cl)}>
         <div class={clShow}>
           <slot name="show"></slot>
           <slot name="showCssComponent"></slot>

src/docs/components/docs-main/docs-main.css

@@ -205,6 +205,7 @@
         background-color: transparent !important;
         box-shadow: none !important;
         padding: 0;
+        font-size: inherit;
       }
     }
 

src/docs/components/docs-nav/docs-nav.tsx

@@ -44,6 +44,17 @@ export class DocsNav {
     }
   }
 
+  componentWillLoad() {
+    // Make sure the sidenav-open hash is removed on page reload
+    // when the sidenav is open.
+    if (location.hash === '#sidenav-open') {
+      location.hash = ''
+      setTimeout(() => {
+        history.replaceState({}, '', window.location.pathname)
+      })
+    }
+  }
+
   componentDidLoad() {
     eventBus.on(NavEventType.open, this.onNavOpen.bind(this))
     eventBus.on(NavEventType.close, this.onNavClose.bind(this))

src/docs/pages/css-vs-web-components.md

@@ -14,7 +14,7 @@ Liquid ships both, CSS Components and Web Components. For instance, you can use
 
 <link rel="stylesheet" href="css_components/ld-button.css">
 
-{% example 'html', false, true %}
+{% example '{ "opened": true }' %}
 <ld-button>Text</ld-button>
 <button class="ld-button">Text</button>
 {% endexample %}