Skip to content

Commit

Permalink
feat: #4 add support for BOTH top and bottom margin adjustments at th…
Browse files Browse the repository at this point in the history 
…e same time
  • Loading branch information
@blackfalcon
blackfalcon committed Sep 16, 2020
1 parent e7c6df1 commit 0b69f87
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 60 deletions.
52 changes: 1 addition & 51 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@
</script>
<script type="module" src="../src/auro-header.js"></script>
<script src="../demo/alert.js"></script>
<script type="module">
import '../node_modules/@polymer/iron-icons/hardware-icons.js';
</script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</custom-style>
Expand All @@ -26,40 +23,6 @@
<body>
<div class="vertical-section-container">
<h1>auro-header</h1>

<p>Component description ...</p>

<p class="ironIcons">
<span class="util_floatLeft util_marginRight--med"
>Narrow
<iron-icon
class="util_marginAuto util_displayBlock"
icon="hardware:phone-iphone"
></iron-icon>
</span>
<span class="util_is-narrowAppears util_floatLeft util_marginRight--med"
>Medium
<iron-icon
class="util_marginAuto util_displayBlock"
icon="hardware:tablet-android"
></iron-icon>
</span>
<span class="util_is-tabletAppears util_floatLeft util_marginRight--med"
>Wide
<iron-icon
class="util_marginAuto util_displayBlock"
icon="hardware:tablet"
></iron-icon>
</span>
<span class="util_is-desktopOnly util_floatLeft util_marginRight--med"
>Max
<iron-icon
class="util_marginAuto util_displayBlock"
icon="hardware:tv"
></iron-icon>
</span>
</p>

<h2>default display types</h2>

<demo-snippet>
Expand Down Expand Up @@ -99,6 +62,7 @@ <h2>default display types with margin over-ride</h2>
<template>
<auro-header level="5" display="400" margin="top" size="xs">Hello World!</auro-header>
<auro-header level="5" display="400" margin="bottom" size="xs">Hello World!</auro-header>
<auro-header level="5" display="400" margin="both" size="none">Hello World!</auro-header>
</template>
</demo-snippet>

Expand Down Expand Up @@ -141,20 +105,6 @@ <h2>default display types with margin/px over-ride</h2>
<auro-header level="4" display="500">Hello World!</auro-header>
</template>
</demo-snippet>

<h2>Element &#60;auro-header&#62;</h2>

<pre><code>class AuroHeader extends LitElement</code></pre>

<h3>Styling:</h3>
<p>Info ...</p>

<h3>Responsive state:</h3>
<p>Info ...</p>

<h3>Properties:</h3>
<code><strong>string:</strong> string</code>
<p>Info ...</p>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 32 additions & 8 deletions src/auro-header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ class AuroHeader extends LitElement {
this.display = 'display'
}

// function to define props used within the scope of thie component
// function to define props used within the scope of this component
static get properties() {
return {
level: { type: String },
Expand All @@ -37,7 +37,31 @@ class AuroHeader extends LitElement {
`;
}

spacingFunction(arg) {
// Determines if the spacing is to be applied uniform or individual
// Returns either selectors or function
spacingDecision(arg) {
if (this.margin === 'both') {
switch (arg) {
case 'none': return `util_stackMarginNone--top util_stackMarginNone--bottom`
case 'xxxs': return `util_stackMarginXxxs--top util_stackMarginXxxs--bottom`
case 'xxs': return `util_stackMarginXxs--top util_stackMarginXxs--bottom`
case 'xs': return `util_stackMarginXs--top util_stackMarginXs--bottom`
case 'sm': return `util_stackMarginSm--top util_stackMarginSm--bottom`
case 'md': return `util_stackMarginMd--top util_stackMarginMd--bottom`
case 'lg': return `util_stackMarginLg--top util_stackMarginLg--bottom`
case 'xl': return `util_stackMarginXl--top util_stackMarginXl--bottom`
case 'xxl': return `util_stackMarginXxl--top util_stackMarginXxl--bottom`
case 'xxxl': return `util_stackMarginXxl--top util_stackMarginXxl--bottom`
default: return ''
}
} else {
return this.spacingApplied(arg)
}
}

// If spacing is individual, return will be single selector based on input
// Returns selector
spacingApplied(arg) {
switch (arg) {
case 'none': return `util_stackMarginNone--${this.margin}`
case 'xxxs': return `util_stackMarginXxxs--${this.margin}`
Expand All @@ -59,12 +83,12 @@ class AuroHeader extends LitElement {
}

switch (level) {
case '2': return html`<h2 class="heading heading--${this.display} ${this.spacingFunction(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h2>`;
case '3': return html`<h3 class="heading heading--${this.display} ${this.spacingFunction(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h3>`;
case '4': return html`<h4 class="heading heading--${this.display} ${this.spacingFunction(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h4>`;
case '5': return html`<h5 class="heading heading--${this.display} ${this.spacingFunction(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h5>`;
case '6': return html`<h6 class="heading heading--${this.display} ${this.spacingFunction(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h6>`;
default: return html`<h1 class="heading heading--${this.display} ${this.spacingFunction(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h1>`;
case '2': return html`<h2 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h2>`;
case '3': return html`<h3 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h3>`;
case '4': return html`<h4 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h4>`;
case '5': return html`<h5 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h5>`;
case '6': return html`<h6 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h6>`;
default: return html`<h1 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h1>`;
}
}
// function that renders the HTML and CSS into the scope of the component
Expand Down
18 changes: 18 additions & 0 deletions test/auro-header.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,24 @@ describe('auro-header', () => {
expect(heading.className).to.equal('heading heading--display util_stackMarginXxxs--bottom');
});

it('sets top and bottom margin', async () => {
const el = await fixture(html`
<auro-header level="2" display="display" size="xxxs" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="xxs" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="xs" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="sm" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="md" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="lg" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="xl" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="xxl" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="xxxl" margin="both">Hello World!</auro-header>
<auro-header level="2" display="display" size="none" margin="both">Hello World!</auro-header>
`);

const heading = el.shadowRoot.querySelector('h2');
expect(heading.className).to.equal('heading heading--display util_stackMarginXxxs--top util_stackMarginXxxs--bottom');
});

it('sets color no color', async () => {
const el = await fixture(html`
<auro-header level="1" display="display">Hello World!</auro-header>
Expand Down

0 comments on commit 0b69f87

Please sign in to comment.