docs(ld-bg-cells): remove paddings from examples

Resolves #142
emdgroup-liquid · Jan 12, 2022 · b68f995 · b68f995
1 parent dfcc9f7
commit b68f995
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 156 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -105,6 +105,7 @@ module.exports = function (eleventyConfig) {
       opened: false,
       background: undefined,
       themable: true,
+      hasPadding: true,
       heighlight: undefined,
       heighlightCssComponent: undefined,
     }
@@ -125,6 +126,7 @@ module.exports = function (eleventyConfig) {
       output += ` background="${finalConfig.background}"`
     }
     output += `${finalConfig.themable ? ' themable' : ''}`
+    output += `${finalConfig.hasPadding ? ' has-padding' : ''}`
     output += '>\n'
     output += `<div slot="code">\n\n`
     output += `\`\`\`${finalConfig.lang}${

diff --git a/src/docs/components/docs-example/docs-example.css b/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 {

diff --git a/src/docs/components/docs-example/docs-example.tsx b/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>

diff --git a/src/docs/components/docs-nav/docs-nav.tsx b/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))

diff --git a/src/liquid/components/ld-bg-cells/readme.md b/src/liquid/components/ld-bg-cells/readme.md
@@ -18,7 +18,7 @@ A background pattern with the Merck cells as additional visual element.
 
 ## Default
 
-{% example %}
+{% example '{ "hasPadding": false }' %}
 <ld-bg-cells class="box1-16/9"></ld-bg-cells>
 
 <style>
@@ -28,157 +28,67 @@ A background pattern with the Merck cells as additional visual element.
 </style>
 {% endexample %}
 
-<!-- CSS component -->
+## Cell types
 
-<!-- <div class="ld-bg-cells ld-bg-cells--safc box1-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-</div>
+### bioreliance
 
-<style>
-  .box1-16\/9 {
-    padding-top: 56.25%;
-  }
-</style> -->
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="bioreliance" style="height: 16rem;">
+</ld-bg-cells>
+{% endexample %}
 
-## Cell types
+### f
 
-{% example %}
-<ld-bg-cells type="bioreliance" class="box2-16/9">
-  <ld-typo>type: bioreliance</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="f" class="box2-16/9">
-  <ld-typo>type: f</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="hexagon" class="box2-16/9">
-  <ld-typo>type: hexagon</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="millipore" class="box2-16/9">
-  <ld-typo>type: millipore</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="qa-x2f-qc" class="box2-16/9">
-  <ld-typo>type: qa-x2f-qc</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="safc" class="box2-16/9">
-  <ld-typo>type: safc</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="sigma-aldrich" class="box2-16/9">
-  <ld-typo>type: sigma-aldrich</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="t" class="box2-16/9">
-  <ld-typo>type: t</ld-typo>
-</ld-bg-cells>
-<ld-bg-cells type="tile" class="box2-16/9">
-  <ld-typo>type: tile</ld-typo>
-</ld-bg-cells>
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="f" style="height: 16rem;"></ld-bg-cells>
+{% endexample %}
 
-<style>
-  .box2-16\/9 {
-    height: 12.3046875rem;
-    width: 21.875rem;
-  }
+### hexagon
 
-  .box2-16\/9 .ld-bg-cells__content {
-    align-items: center;
-    color: var(--ld-col-wht);
-    display: flex;
-    justify-content: center;
-  }
-</style>
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="hexagon" style="height: 16rem;"></ld-bg-cells>
 {% endexample %}
 
-<!-- CSS component -->
-
-<!-- <div class="ld-bg-cells ld-bg-cells--bioreliance box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: bioreliance</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--f box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: f</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--hexagon box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: hexagon</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--millipore box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: millipore</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--qa-x2f-qc box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: qa-x2f-qc</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--safc box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: safc</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--sigma-aldrich box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: sigma-aldrich</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--t box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: t</p>
-  </div>
-</div>
-<div class="ld-bg-cells ld-bg-cells--tile box2-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-  <div class="ld-bg-cells__content">
-    <p class="ld-typo">type: tile</p>
-  </div>
-</div>
+### millipore
 
-<style>
-  .box2-16\/9 {
-    height: 12.3046875rem;
-    width: 21.875rem;
-  }
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="millipore" style="height: 16rem;"></ld-bg-cells>
+{% endexample %}
 
-  .box2-16\/9 .ld-bg-cells__content {
-    align-items: center;
-    color: var(--ld-col-wht);
-    display: flex;
-    justify-content: center;
-  }
-</style> -->
+### qa
 
-## Custom position, size and colors
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="qa-x2f-qc" style="height: 16rem;"></ld-bg-cells>
+{% endexample %}
 
-{% example %}
-<ld-bg-cells class="box3-16/9"></ld-bg-cells>
+### safc
 
-<style>
-  .box3-16\/9 {
-    --ld-bg-cells-bg-col: var(--ld-col-vm-300);
-    --ld-bg-cells-pattern-col: var(--ld-col-vm-600);
-    --ld-bg-cells-position: bottom left;
-    --ld-bg-cells-size: 150%;
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="safc" style="height: 16rem;"></ld-bg-cells>
+{% endexample %}
 
-    padding-top: 56.25%;
-  }
-</style>
+### sigma
+
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="sigma-aldrich" style="height: 16rem;"></ld-bg-cells>
+{% endexample %}
+
+### t
+
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="t" style="height: 16rem;"></ld-bg-cells>
+{% endexample %}
+
+### tile
+
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells type="tile" style="height: 16rem;"></ld-bg-cells>
 {% endexample %}
 
-<!-- CSS component -->
+## Custom position, size and colors
 
-<!-- <div class="ld-bg-cells ld-bg-cells--safc box3-16/9">
-  <div class="ld-bg-cells__pattern"></div>
-</div>
+{% example '{ "hasPadding": false }' %}
+<ld-bg-cells class="box3-16/9"></ld-bg-cells>
 
 <style>
   .box3-16\/9 {
@@ -189,7 +99,8 @@ A background pattern with the Merck cells as additional visual element.
 
     padding-top: 56.25%;
   }
-</style> -->
+</style>
+{% endexample %}
 
 ## CSS Variables