ethosstyles 0.1.15 → 0.1.16

data/app/views/logs.php

@@ -0,0 +1,12 @@
+<p>Themed expandable area.</p>
+
+<div id="build-logs-#" class="rf-logs js-project-logs">
+  <a class="rf-btn rf-btn--secondary rf-logs__btn" href="#">scroll to bottom</a>
+  <pre class="rf-logs__pre " >
+    -- Lorem ipsum dolor sit amet, consectetur adipiscing elit...<br>
+    -> Maecenas luctus ac tellus at faucibus...<br>
+    == Proin maximus fringilla erat, nec pharetra felis. Donec cursus condimentum velit quis volutpat. <br>
+    -- Quisque commodo sem vel est mattis aliquet. Fusce lobortis finibus metus, ut gravida justo elementum eget. Phasellus ac est et est tincidunt dapibus a in augue. <br >
+    == Donec auctor vulputate volutpat. <br>Ut non turpis et dui volutpat lacinia imperdiet ut mi. Donec nec tempor dolor. <br>
+  </pre>
+</div>

data/app/views/notes.php

@@ -0,0 +1,10 @@
+<section class="rf-section">
+
+  <p>Notes should only be used to add numbers to existing elements.</p>
+
+  <h3><span class="rf-note rf-note--ongoing">3</span>H3 example</h3>
+
+  <a href="#" class="rf-btn rf-btn--primary"><span class="rf-note rf-note--error">1</span>Primary</a>
+  <a href="#" class="rf-btn rf-btn--secondary"><span class="rf-note rf-note--neutral">5</span>Secondary</a>
+
+</section>

data/app/views/notices.php

@@ -0,0 +1,11 @@
+<div class="rf-notice rf-notice--info">
+  <p>
+    This is an <strong>INFO</strong> notice, typically these go at the bottom of the page.
+  </div>
+</p>
+
+<div class="rf-notice rf-notice--error rf-u-mb rf-u-mt">
+  <p>
+    This is an <strong>ERROR</strong> notice, typically these go at the bottom of the page.
+  </p>
+</div>

data/app/views/panels.php

@@ -0,0 +1,8 @@
+<div class="rf-panel">
+  <div class="rf-panel__heading">
+    <h3>Panel Header</h3>
+  </div>
+  <div class="rf-panel__body">
+    <p>This is where you would put whatever you wanted to display. This is great for displaying expandable content like forms, logs, other in-depth info</p>
+  </div>
+</div>

data/app/views/partial_tooltips.php

@@ -1,19 +1,9 @@
 <div class="rf-col rf-col--6 rf-col--grid">
   <h4><?php echo $tooltip_class ?></h4>
-  <p>
-    <div class="rf-btn-set">
-      <span class="rf-tooltip <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>" data-placement="left">
-        <a class="rf-btn rf-btn--secondary">LEFT</a>
-      </span>
-      <span class="rf-tooltip <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>" data-placement="top">
-        <a class="rf-btn rf-btn--secondary">TOP</a>
-      </span>
-      <span class="rf-tooltip <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>" data-placement="bottom">
-        <a class="rf-btn rf-btn--secondary">BOTTOM</a>
-      </span>
-      <span class="rf-tooltip <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>" data-placement="right">
-        <a class="rf-btn rf-btn--secondary">RIGHT</a>
-      </span>
-    </div>
-  </p>
+  <div class="rf-btn-set">
+    <a class="rf-btn rf-btn--secondary" data-tooltip-custom-classes="rf-tooltip rf-tooltip--small <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>"  data-placement="left">LEFT</a>
+    <a class="rf-btn rf-btn--secondary" data-tooltip-custom-classes="rf-tooltip <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>"  data-placement="top">TOP</a>
+    <a class="rf-btn rf-btn--secondary" data-tooltip-custom-classes="rf-tooltip <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>"  data-placement="bottom">BOTTOM</a>
+    <a class="rf-btn rf-btn--secondary" data-tooltip-custom-classes="rf-tooltip rf-tooltip--small <?php echo $tooltip_class ?>" data-toggle="tooltip" title="<?php echo $tooltip_class ?>"  data-placement="right">RIGHT</a>
+  </div>
 </div>

data/app/views/tables.php

@@ -0,0 +1,102 @@
+<p>Notes</p>
+<ul>
+  <li>Columnn widths are equal by default. Set column widths in header with <code>rf-col--*</code></li>
+</ul>
+
+<div class="rf-section">
+  <h2 class="rf-section__headline">Normal Table</h2>
+  <p>Note: Cells padded by default</p>
+  <table class="rf-table rf-col--6">
+    <tr class="rf-table__row rf-table__row--header">
+      <th class="rf-table__th">Column 1 Header</th>
+      <th class="rf-table__th">Column 2 Header</th>
+      <th class="rf-table__th">Column 3 Header</th>
+    </tr>
+    <tbody class="rf-table__body">
+      <tr class="rf-table__row">
+        <td class="rf-table__td">Row 1 Column 1</td>
+        <td class="rf-table__td">Row 1 Column 2</td>
+        <td class="rf-table__td">Row 1 Column 3</td>
+        </td>
+      </tr>
+      <tr class="rf-table__row">
+        <td class="rf-table__td">Row 2 Column 1</td>
+        <td class="rf-table__td">Row 2 Column 2</td>
+        <td class="rf-table__td">Row 2 Column 3</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="rf-section">
+  <h2 class="rf-section__headline">Condensed Table</h2>
+  <p>Note: condensed tables don't have padding</p>
+  <table class="rf-table rf-table--condensed">
+    <tr class="rf-table__row rf-table__row--header">
+      <th class="rf-table__th">Column 1 Header</th>
+      <th class="rf-table__th">Column 2 Header</th>
+      <th class="rf-table__th">Column 3 Header</th>
+    </tr>
+    <tbody class="rf-table__body">
+      <tr class="rf-table__row">
+        <td class="rf-table__td">Row 1 Column 1</td>
+        <td class="rf-table__td">Row 1 Column 2</td>
+        <td class="rf-table__td">Row 1 Column 3</td>
+        </td>
+      </tr>
+      <tr class="rf-table__row">
+        <td class="rf-table__td">Row 2 Column 1</td>
+        <td class="rf-table__td">Row 2 Column 2</td>
+        <td class="rf-table__td">Row 2 Column 3</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="rf-section">
+  <h2 class="rf-section__headline">Complex Table</h2>
+  <p>Note: Tables can be used to present lots of data. Including forms and lists</p>
+  <table class="rf-table">
+    <tr class="rf-table__row rf-table__row--header">
+      <th class="rf-table__th rf-col--2">Column 1 Header</th>
+      <th class="rf-table__th rf-col--4">Column 2 Header</th>
+      <th class="rf-table__th rf-col--3">Column 3 Header</th>
+      <th class="rf-table__th rf-col--actions rf-col--3">Actions</th>
+    </tr>
+    <tbody class="rf-table__body">
+      <tr class="rf-table__row rf-table__row--error">
+        <td class="rf-table__td">
+          Row heights scale depending on the size of the tallest cell.
+          The taller the cell, the taller the row.
+        </td>
+        <td class="rf-table__td">Row 1 Column 2</td>
+        <td class="rf-table__td">Row 1 Column 3</td>
+        <td class="rf-table__td rf-table__col--actions">
+          <input class="rf-btn rf-btn--primary rf-btn" type="submit" value="Delete">
+          <input class="rf-btn rf-btn--secondary rf-btn" type="submit" value="Submit">
+        </td>
+      </tr>
+      <tr class="rf-table__row rf-table__row--success">
+        <td class="rf-table__td">Content is pulled left by default. Use following classes to override.</td>
+        <td class="rf-table__td rf-table__col--centered"><code>rf-table__col--centered</code></td>
+        <td class="rf-table__td rf-table__col--right"><code>rf-table__col--right</code></td>
+        <td class="rf-table__td rf-table__col--actions">
+          <input class="rf-btn rf-btn--primary rf-btn" type="submit" value="Delete">
+          <input class="rf-btn rf-btn--secondary rf-btn" type="submit" value="Submit">
+        </td>
+      </tr>
+      <tr class="rf-table__row rf-table__row--aligntop">
+        <td class="rf-table__td">
+          By default content is centered vertically. This can be changed to pull content to the top of the cells.
+          This is useful when one cell is much taller than all the others, such as nested tables.
+        </td>
+        <td class="rf-table__td"><code>rf-table__row--aligntop</code></td>
+        <td class="rf-table__td">Content now at top of cell</td>
+        <td class="rf-table__td rf-table__col--actions">
+          <input class="rf-btn rf-btn--primary rf-btn" type="submit" value="Delete">
+          <input class="rf-btn rf-btn--secondary rf-btn" type="submit" value="Submit">
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

data/app/views/tooltips.php

@@ -1,11 +1,7 @@
 <section class="rf-section">
   <h3>Status Tooltips</h3>
   <?php
-    $tooltip_class = "rf-tooltip--valid";
-    include 'partial_tooltips.php';
-  ?>
-  <?php
-    $tooltip_class = "rf-tooltip--pending";
+    $tooltip_class = "rf-tooltip--success";
     include 'partial_tooltips.php';
   ?>
   <?php
@@ -17,11 +13,11 @@
 <section class="rf-section">
   <h3>Avatar Tooltips</h3>
   <div class="rf-col rf-col--6 rf-col--grid">
-    <span class="rf-tooltip" data-toggle="tooltip" title="Github Username" data-placement="top">
-      <div class="rf-avatar rf-avatar--med">
-        <div class="rf-avatar__nametag"> Display Name </div>
-        <img class="rf-avatar__img" src="https://git.corp.adobe.com/avatars/u/25754?" alt="krevat">
+    <div class="rf-avatar rf-avatar--med">
+      <div class="rf-avatar__nametag">
+        Display Name
       </div>
-    </span>
+      <img class="rf-avatar__img" src="https://git.corp.adobe.com/avatars/u/25754?" alt="krevat" data-toggle="tooltip" data-tooltip-custom-classes="rf-tooltip" title="Github Username" data-placement="top">
+    </div>
   </div>
 </section>

data/lib/ethosstyles/version.rb

@@ -1,3 +1,3 @@
 module Ethosstyles
-  VERSION = "0.1.15"
+  VERSION = "0.1.16"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ethosstyles
 version: !ruby/object:Gem::Version
-  version: 0.1.15
+  version: 0.1.16
 platform: ruby
 authors:
 - Ethos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-09-25 00:00:00.000000000 Z
+date: 2018-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -88,12 +88,14 @@ files:
 - app/assets/stylesheets/components/_checks.scss
 - app/assets/stylesheets/components/_forms.scss
 - app/assets/stylesheets/components/_grid.scss
+- app/assets/stylesheets/components/_highlights.scss
 - app/assets/stylesheets/components/_icons.scss
 - app/assets/stylesheets/components/_links.scss
 - app/assets/stylesheets/components/_list-groups.scss
 - app/assets/stylesheets/components/_lists.scss
 - app/assets/stylesheets/components/_logs.scss
 - app/assets/stylesheets/components/_modal.scss
+- app/assets/stylesheets/components/_notes.scss
 - app/assets/stylesheets/components/_notices.scss
 - app/assets/stylesheets/components/_panels.scss
 - app/assets/stylesheets/components/_pills.scss
@@ -118,17 +120,25 @@ files:
 - app/assets/stylesheets/utilities/_shame.scss
 - app/assets/stylesheets/utilities/_utilities.scss
 - app/views/avatars.php
+- app/views/blurbs.php
 - app/views/buttons.html
 - app/views/buttons.php
 - app/views/favicon.ico
+- app/views/forms.php
+- app/views/grid.php
 - app/views/icons.php
 - app/views/index.php
 - app/views/list-groups.php
+- app/views/logs.php
 - app/views/modal_partial.php
 - app/views/modals.php
+- app/views/notes.php
+- app/views/notices.php
+- app/views/panels.php
 - app/views/partial_avatars.php
 - app/views/partial_icons.php
 - app/views/partial_tooltips.php
+- app/views/tables.php
 - app/views/tooltips.php
 - ethosstyles.gemspec
 - lib/ethosstyles.rb
@@ -154,7 +164,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: ethosstyles
-rubygems_version: 2.5.2
+rubygems_version: 2.5.2.3
 signing_key: 
 specification_version: 4
 summary: A design system for Ethos