Merge pull request #38 from prysmex/eui-hr

Eui Horizontal Rule

Author: betocantu93

addon/components/eui-horizontal-rule/index.hbs

@@ -0,0 +1,7 @@
+<hr
+  class={{class-names
+    componentName="EuiHorizontalRule"
+    margin=(arg-or-default @margin "l")
+    size=(arg-or-default @size "full")
+  }}
+/>

addon/helpers/class-names.ts

@@ -23,6 +23,7 @@ interface Options {
   grow: number | string;
   iconSide: string;
   flush: string;
+  margin: string;
 }
 
 /**
@@ -49,7 +50,8 @@ export function classNames(
     justifyContent,
     columns,
     grow,
-    iconSide
+    iconSide,
+    margin
   }: Options
 ): string {
   let classes: string[] = [...classNames];
@@ -77,6 +79,7 @@ export function classNames(
     classes.push(cssMappings[componentName].properties.grow?.[grow] || '');
     classes.push(cssMappings[componentName].properties.iconSide?.[iconSide] || '');
     classes.push(cssMappings[componentName].properties.flush?.[flush] || '');
+    classes.push(cssMappings[componentName].properties.margin?.[margin] || '');
     classes = classes.filter(s => isPresent(s));
   }
 

addon/utils/css-mappings/eui-horizontal-rule.ts

@@ -0,0 +1,27 @@
+export const baseClass: string = 'euiHorizontalRule';
+
+export const sizeMapping = {
+  full: `${baseClass}--full`,
+  half: `${baseClass}--half`,
+  quarter: `${baseClass}--quarter`
+}
+
+export const marginMapping = {
+  none: '',
+  xs: `${baseClass}--marginXSmall`,
+  s: `${baseClass}--marginSmall`,
+  m: `${baseClass}--marginMedium`,
+  l: `${baseClass}--marginLarge`,
+  xl: `${baseClass}--marginXLarge`,
+  xxl: `${baseClass}--marginXXLarge`
+}
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    size: sizeMapping,
+    margin: marginMapping
+  }
+}
+
+export default mapping;

addon/utils/css-mappings/index.ts

@@ -21,6 +21,7 @@ import EuiBadge from  './eui-badge';
 import EuiCard from './eui-card';
 import EuiButtonEmpty from './eui-button-empty';
 import EuiCardSelect from './eui-card-select';
+import EuiHorizontalRule from './eui-horizontal-rule';
 
 const mapping: Mapping = {
   EuiAccordion,
@@ -44,7 +45,8 @@ const mapping: Mapping = {
   EuiBadge,
   EuiCard,
   EuiButtonEmpty,
-  EuiCardSelect
+  EuiCardSelect,
+  EuiHorizontalRule
 }
 
 export default mapping;

app/components/eui-horizontal-rule/index.js

@@ -0,0 +1 @@
+export { default } from 'ember-eui/components/eui-horizontal-rule';

tests/dummy/app/controllers/application.js

@@ -33,6 +33,9 @@ export default class ApplicationController extends Controller {
           createItem('Flex', {
             href: 'demo.flex'
           }),
+          createItem('Horizontal Rule', {
+            href: 'demo.horizontal-rule'
+          }),
           createItem('Page', {
             href: 'demo.page'
           })

tests/dummy/app/router.js

@@ -24,5 +24,6 @@ Router.map(function() {
     this.route('button');
     this.route('health');
     this.route('flex');
+    this.route('horizontal-rule');
   })
 });

tests/dummy/app/routes/demo/horizontal-rule.ts

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class ComponentsHorizontalRule extends Route.extend({
+  // anything which *must* be merged to prototype here
+}) {
+  // normal class body definition here
+}

tests/dummy/app/templates/demo/horizontal-rule.hbs

@@ -0,0 +1,42 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Horizontal Rule
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+<EuiPageContent>
+  <EuiPageContentBody>
+
+    <EuiTitle @size="l">
+      Size
+    </EuiTitle>
+    <EuiText @size="s"><p>quarter</p></EuiText>
+    <EuiHorizontalRule @size="quarter" />
+    <EuiText @size="s"><p>half</p></EuiText>
+    <EuiHorizontalRule @size="half" />
+    <EuiText @size="s"><p>full (default)</p></EuiText>
+    <EuiHorizontalRule @size="full" />
+
+    <EuiTitle @size="l">
+      Margin
+    </EuiTitle>
+    <EuiText @size="s"><p>none</p></EuiText>
+    <EuiHorizontalRule @margin="none" />
+    <EuiText @size="s"><p>xs</p></EuiText>
+    <EuiHorizontalRule @margin="xs" />
+    <EuiText @size="s"><p>s</p></EuiText>
+    <EuiHorizontalRule @margin="s" />
+    <EuiText @size="s"><p>m</p></EuiText>
+    <EuiHorizontalRule @margin="m" />
+    <EuiText @size="s"><p>l (default)</p></EuiText>
+    <EuiHorizontalRule @margin="l" />
+    <EuiText @size="s"><p>xl</p></EuiText>
+    <EuiHorizontalRule @margin="xl" />
+    <EuiText @size="s"><p>xxl</p></EuiText>
+    <EuiHorizontalRule @margin="xxl" />
+
+  </EuiPageContentBody>
+</EuiPageContent>