Choices and Tabs Updates (#436)

* Switch to rails SageChoice

* Switch to Rails SageTab

* DEBUG: Tab action results in focus change

* Update choice to include icon and arrow variations

* Update tabs accordingly

* Further tweaks to tabs and tab pane style and spacing settings

* Further adjsut js bug

* Hone styles

* Adjust border settings

* Adjust layout settings

app/helpers/elements_helper.rb

@@ -45,7 +45,7 @@ def sage_elements
       {
         title: "choice",
         description: "A radio button tab for making a choice. To be used inside a tabs object.",
-        use_legacy_html_code_source: true,
+        use_legacy_html_code_source: false,
         scss: "done",
         docs: "done",
         rails: "done",
@@ -195,7 +195,7 @@ def sage_elements
       {
         title: "tab",
         description: "A tab button to be used inside a tabs object",
-        use_legacy_html_code_source: true,
+        use_legacy_html_code_source: false,
         scss: "done",
         docs: "done",
         rails: "doing",

app/views/examples/elements/choice/_preview.html.erb

@@ -1,17 +1,36 @@
-<h3 class="t-sage-heading-6">Single Line</h3>
+<h3 class="t-sage-heading-6">Single Line (radio type)</h3>
 
-<%= render "examples/elements/choice/markup",
-  target: "example",
-  id: "choice1",
-  text: "Option 1"
+<%= sage_component SageChoice, {
+    target: "example",
+    text: "Option 1",
+    type: "radio",
+    active: true
+  }
 %>
 
-<h3 class="t-sage-heading-6">Multi-Line</h3>
+<h3 class="t-sage-heading-6">Multi-Line  (radio type)</h3>
+<%= sage_component SageChoice, {
+    target: "example",
+    text: "Option 1",
+    subtext: "Description of Option 1",
+    type: "radio",
+  }
+%>
+
+<h3 class="t-sage-heading-6">Arrow Variation</h3>
+<%= sage_component SageChoice, {
+    target: "example",
+    text: "Option 1",
+    type: "arrow",
+  }
+%>
 
-<%= render "examples/elements/choice/markup",
-  target: "example",
-  id: "choice2",
-  stacked: true,
-  text: "Option 1",
-  subtext: "Description of Option 1"
+<h3 class="t-sage-heading-6">Icon Variation</h3>
+<p>Select any icon to appear to the left of the text.</p>
+<%= sage_component SageChoice, {
+    target: "example",
+    text: "Option 1",
+    type: "icon",
+    icon: "video-on"
+  }
 %>

app/views/examples/elements/choice/_props.html.erb

@@ -0,0 +1,42 @@
+<tr>
+  <td>active</td>
+  <td>Toggles <code>--active</code> modifier to visually indicate whether this choice is active/selected.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>
+<tr>
+  <td>align_center</td>
+  <td>Toggles <code>--align-center</code> modifier to visually center the icon and text. This is only intended to be used with the "icon" type.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>
+<tr>
+  <td>text</td>
+  <td>Sets the content of the primary text line</td>
+  <td>String</td>
+  <td>null</td>
+</tr>
+<tr>
+  <td>subtext</td>
+  <td>Sets the content of the secondary text line</td>
+  <td>String</td>
+  <td>null</td>
+</tr>
+<tr>
+  <td>type</td>
+  <td>Sets the choice graphic type. If <code>icon</code> is used here the <code>icon</code> prop must also be set.</td>
+  <td>icon | radio | arrow</td>
+  <td>radio</td>
+</tr>
+<tr>
+  <td>icon</td>
+  <td>Provides the name of the Sage Icon to be displayed before the text content.</td>
+  <td>String</td>
+  <td>null</td>
+</tr>
+<tr>
+  <td>target</td>
+  <td>Provides the <code>id</code> for the corresponding Tab Pane that this choice will activate.</td>
+  <td>String</td>
+  <td>null</td>
+</tr>

app/views/examples/elements/tab/_preview.html.erb

@@ -1,4 +1,5 @@
-<%= render "examples/elements/tab/markup",
-  target: "example-tab1",
-  text: "Page 1"
+<%= sage_component SageTab, {
+    target: "example-tab1",
+    text: "Page 1"
+  }
 %>

app/views/examples/elements/tab/_props.html.erb

@@ -0,0 +1,18 @@
+<tr>
+  <td>active</td>
+  <td>Toggles <code>--active</code> modifier to visually indicate whether this tab is active/selected.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>
+<tr>
+  <td>text</td>
+  <td>Sets the content of the text</td>
+  <td>String</td>
+  <td>null</td>
+</tr>
+<tr>
+  <td>target</td>
+  <td>Provides the <code>id</code> for the corresponding Tab Pane that this tab will activate.</td>
+  <td>String</td>
+  <td>null</td>
+</tr>

app/views/examples/objects/tabs/_preview.html.erb

@@ -20,22 +20,16 @@
     }
   %>
 
-  <%= sage_component SageTabsPane, { id: "basic-test1" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 1 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "basic-test1", card: true } do %>
+    <p>Sub page 1 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "basic-test2" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 2 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "basic-test2", card: true } do %>
+    <p>Sub page 2 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "basic-test3" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 3 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "basic-test3", card: true } do %>
+    <p>Sub page 3 content</p>
   <% end %>
 </div>
 
@@ -62,106 +56,141 @@
     }
   %>
 
-  <%= sage_component SageTabsPane, { id: "pb-test1" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 1 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "pb-test1", card: true } do %>
+    <p>Sub page 1 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "pb-test2" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 2 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "pb-test2", card: true } do %>
+    <p>Sub page 2 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "pb-test3" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 3 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "pb-test3", card: true } do %>
+    <p>Sub page 3 content</p>
   <% end %>
 </div>
 
-<h3 class="t-sage-heading-6">Choice tabs - default layout</h3>
+<h3 class="t-sage-heading-6">Choice tabs - radios in default layout</h3>
 <div class="sage-tabs-container">
   <%= sage_component SageTabs, {
       id: "example-tabs3",
       items: [
         {
           text: "Sub Page 1",
           target: "choice-test1",
-          active: true
+          active: true,
+          type: "radio"
         },
         {
           text: "Sub Page 2",
-          target: "choice-test2"
+          target: "choice-test2",
+          type: "radio"
         },
         {
           text: "Sub Page 3",
-          target: "choice-test3"
+          target: "choice-test3",
+          type: "radio"
         },
       ],
       style: "choice"
     }
   %>
 
-  <%= sage_component SageTabsPane, { id: "choice-test1" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 1 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "choice-test1", card: true } do %>
+    <p>Sub page 1 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "choice-test2" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 2 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "choice-test2", card: true } do %>
+    <p>Sub page 2 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "choice-test3" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 3 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "choice-test3", card: true } do %>
+    <p>Sub page 3 content</p>
   <% end %>
 </div>
 
-<h3 class="t-sage-heading-6">Choice tabs - stacked layout</h3>
+<h3 class="t-sage-heading-6">Choice tabs - arrows in stacked layout</h3>
 <div class="sage-tabs-container">
   <%= sage_component SageTabs, {
       id: "example-tabs4",
       items: [
         {
           text: "Sub Page 1",
           target: "stacked-test1",
-          active: true
+          active: true,
+          type: "arrow"
         },
         {
           text: "Sub Page 2",
-          target: "stacked-test2"
+          target: "stacked-test2",
+          type: "arrow"
         },
         {
           text: "Sub Page 3",
-          target: "stacked-test3"
+          target: "stacked-test3",
+          type: "arrow"
         },
       ],
       style: "choice",
       stacked: true
     }
   %>
   <hr class="sage-tabs-divider" />
-  <%= sage_component SageTabsPane, { id: "stacked-test1" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 1 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "stacked-test1", card: true } do %>
+    <p>Sub page 1 content</p>
+  <% end %>
+
+  <%= sage_component SageTabsPane, { id: "stacked-test2", card: true } do %>
+    <p>Sub page 2 content</p>
+  <% end %>
+
+  <%= sage_component SageTabsPane, { id: "stacked-test3", card: true } do %>
+    <p>Sub page 3 content</p>
+  <% end %>
+</div>
+
+<h3 class="t-sage-heading-6">Choice tabs with icons and centered</h3>
+<div class="sage-tabs-container">
+  <%= sage_component SageTabs, {
+      id: "example-tabs45",
+      items: [
+        {
+          text: "Sub Page 1",
+          target: "icon-tabs-test1",
+          active: true,
+          type: "icon",
+          icon: "preview-off",
+        },
+        {
+          text: "Sub Page 2",
+          target: "icon-tabs-test2",
+          type: "icon",
+          icon: "video-on"
+        },
+        {
+          text: "Sub Page 3",
+          target: "icon-tabs-test3",
+          type: "icon",
+          icon: "list-bullet"
+        },
+      ],
+      style: "choice",
+      align_items_center: true
+    }
+  %>
+  <hr class="sage-tabs-divider" />
+  <%= sage_component SageTabsPane, { id: "icon-tabs-test1", card: true } do %>
+    <p>Sub page 1 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "stacked-test2" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 2 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "icon-tabs-test2", card: true } do %>
+    <p>Sub page 2 content</p>
   <% end %>
 
-  <%= sage_component SageTabsPane, { id: "stacked-test3" } do %>
-    <%= sage_component SageCard, {} do %>
-      <p>Sub page 3 content</p>
-    <% end %>
+  <%= sage_component SageTabsPane, { id: "icon-tabs-test3", card: true } do %>
+    <p>Sub page 3 content</p>
   <% end %>
 </div>
+
+<h5>Tab Pane Style and Spacing</h5>
+
+<p>Since tabs may be employed in a variety of settings, the following modifiers may be added on panes to set their appearance and internal spacing accordingly: <code>card</code>, <code>card_spacing</code>, and <code>panel_spacing</code>. See the Properties table below for more details</p>

app/views/examples/objects/tabs/_props.html.erb

@@ -22,3 +22,27 @@
   <td>Boolean</td>
   <td>false</td>
 </tr>
+<tr>
+  <td>align_items_center</td>
+  <td>Toggles whether the contents of tab items should center; intended only to be used with icon-style choices.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>
+<tr>
+  <td>card</td>
+  <td>styles the pane as a Sage Card altogether. All examples on this page use this modifier.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>
+<tr>
+  <td>card_spacing</td>
+  <td>applies the internal Card grid settings but no padding or border.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>
+<tr>
+  <td>panel_spacing</td>
+  <td>applies the internal Panel grid settings but no padding or box shadow.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>