fix: #3 address issue with custom margins and px prop

AlaskaAirlines · Jul 31, 2020 · 04be7e3 · 04be7e3
1 parent e7d6d98
commit 04be7e3
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 18 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -60,31 +60,58 @@ <h1>auro-header</h1>
         </span>
       </p>
 
+      <h2>default display types</h2>
+
       <demo-snippet>
         <template>
           <auro-header >Hello World!</auro-header>
-          <auro-header type="">Hello World!</auro-header>
-          <auro-header  display="800">Hello World!</auro-header>
+          <auro-header display="800">Hello World!</auro-header>
+          <auro-header display="700">Hello World!</auro-header>
+          <auro-header display="600">Hello World!</auro-header>
+          <auro-header display="500">Hello World!</auro-header>
+          <auro-header display="400">Hello World!</auro-header>
+          <auro-header display="300">Hello World!</auro-header>
+        </template>
+      </demo-snippet>
+
+      <h2>pixel display types</h2>
+      <demo-snippet>
+        <template>
+          <auro-header type="px">Hello World!</auro-header>
           <auro-header type="px" display="800">Hello World!</auro-header>
-          <auro-header  display="700">Hello World!</auro-header>
           <auro-header type="px" display="700">Hello World!</auro-header>
-          <auro-header  display="600">Hello World!</auro-header>
           <auro-header type="px" display="600">Hello World!</auro-header>
-          <auro-header  display="500">Hello World!</auro-header>
           <auro-header type="px" display="500">Hello World!</auro-header>
-          <auro-header  display="400">Hello World!</auro-header>
           <auro-header type="px" display="400">Hello World!</auro-header>
-          <auro-header  display="300">Hello World!</auro-header>
           <auro-header type="px" display="300">Hello World!</auro-header>
         </template>
       </demo-snippet>
 
+      <h2>default display types</h2>
+      <demo-snippet>
+        <template>
+          <auro-header display="400">Hello World!</auro-header>
+        </template>
+      </demo-snippet>
+
+      <h2>default display types with margin over-ride</h2>
       <demo-snippet>
         <template>
-          <auro-header display="">Hello World!</auro-header>
+          <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>
         </template>
       </demo-snippet>
 
+      <h2>default display types with margin/px over-ride</h2>
+      <demo-snippet>
+        <template>
+          <auro-header level="5" display="400" margin="top" size="xs" type="px">Hello World!</auro-header>
+          <auro-header level="5" display="400" margin="bottom" size="xs" type="px">Hello World!</auro-header>
+        </template>
+      </demo-snippet>
+
+
+
       <demo-snippet>
         <template>
           <auro-header level="2" display="display" size="none" margin="top">SM Hello World!</auro-header>

diff --git a/src/style.scss b/src/style.scss
@@ -15,16 +15,6 @@ $auro-spacing-types: stack;
 @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/spacingUtility";
 
-
-// container styles - defines the look of the outer custom componet
-:host {
-  font-size: 16px;
-}
-
-// layout styles - define any layout specifications for UI that is contained WITHIN the component
-// never define layout that would cause effect on element ouside the scope of this component
-
-
 // the following styles are only to support use of auro-header
 // in legacy UIs where hard-px values are needed.
 :host([type=px]) {
@@ -115,3 +105,32 @@ $auro-spacing-types: stack;
     margin: 12px 0;
   }
 }
+
+$size-map: (
+  "none": 0,
+  "Xxxs": 2px,
+  "Xxs": 4px,
+  "Xs": 8px,
+  "Sm": 12px,
+  "Md": 16px,
+  "Lg": 24px,
+  "Xl": 32px,
+  "Xxl": 48px,
+  "Xxxl": 64px
+);
+
+@each $name, $size in $size-map {
+  :host([type=px]) {
+    .util_stackMargin#{$name}--bottom {
+      margin-bottom: $size;
+    }
+  }
+}
+
+@each $name, $size in $size-map {
+  :host([type=px]) {
+    .util_stackMargin#{$name}--top {
+      margin-bottom: $size;
+    }
+  }
+}