Sage webpack migration, migrate over the latest design system compone…

…nts from the rails engine implementation of Sage
Kajabi · Jun 11, 2020 · 4e4c026 · 4e4c026
1 parent 19f09a6
commit 4e4c026
Show file tree

Hide file tree

Showing 76 changed files with 1,118 additions and 170 deletions.
diff --git a/app/helpers/elements_helper.rb b/app/helpers/elements_helper.rb
@@ -12,6 +12,19 @@ module ElementsHelper
   def sage_elements
     [
       # Sage Generated Elements
+      {
+        title: "meter",
+        description: "A horizontal display indicating the measurement of a known (finite) quantity",
+        scss_design:  "done",
+        scss_dev:     "done",
+        scss_doc:     "done",
+        rails_design: "doing",
+        rails_dev:    "doing",
+        rails_doc:    "doing",
+        react_design: "todo",
+        react_dev:    "todo",
+        react_doc:    "todo"
+      },
       {
         title: "form_select",
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
@@ -168,19 +181,6 @@ def sage_elements
         react_dev:    "todo",
         react_doc:    "todo"
       },
-      {
-        title: "danger_button",
-        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-        scss_design:  "todo",
-        scss_dev:     "todo",
-        scss_doc:     "todo",
-        rails_design: "todo",
-        rails_dev:    "todo",
-        rails_doc:    "todo",
-        react_design: "todo",
-        react_dev:    "todo",
-        react_doc:    "todo"
-      },
       {
         title: "button",
         description: "Standard button styling with multiple display options. Can be applied on both button and link elements.",

diff --git a/app/helpers/objects_helper.rb b/app/helpers/objects_helper.rb
@@ -12,6 +12,32 @@ module ObjectsHelper
   def sage_objects
     [
       # Sage Generated Objects
+      {
+        title: "input_helper",
+        description: "Provides an extended tooltip/popup for text inputs",
+        scss_design:  "doing",
+        scss_dev:     "doing",
+        scss_doc:     "doing",
+        rails_design: "todo",
+        rails_dev:    "todo",
+        rails_doc:    "todo",
+        react_design: "todo",
+        react_dev:    "todo",
+        react_doc:    "todo"
+      },
+      {
+        title: "input_group",
+        description: "Allows inline grouping of text inputs with buttons",
+        scss_design:  "done",
+        scss_dev:     "done",
+        scss_doc:     "done",
+        rails_design: "doing",
+        rails_dev:    "doing",
+        rails_doc:    "doing",
+        react_design: "todo",
+        react_dev:    "todo",
+        react_doc:    "todo"
+      },
       {
         title: "billboard",
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",

diff --git a/app/views/application/_assistant.html.erb b/app/views/application/_assistant.html.erb
@@ -5,7 +5,7 @@
       <span class="visually-hidden">Toggle main menu</span>
     </button>
   <%- end -%>
-  <%= image_pack_tag("media/images/docs/sage.svg", class: "sage-assistant__branding")%>
+  <%= image_pack_tag("docs/sage.svg", class: "sage-assistant__branding")%>
   <div class="sage-assistant__body">
   </div>
   <div class="sage-assistant__actions">

diff --git a/app/views/application/_meta.html.erb b/app/views/application/_meta.html.erb
@@ -4,9 +4,9 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<%= favicon_link_tag "sage/apple-touch-icon.png", rel: "apple-touch-icon", sizes: "180x180", type: "image/png" %>
-<%= favicon_link_tag "sage/favicon-32x32.png", rel: "icon", sizes: "32x32", type: "image/png" %>
-<%= favicon_link_tag "sage/favicon-16x16.png", rel: "icon", sizes: "16x16", type: "image/png" %>
-<%= favicon_link_tag "sage/favicon.ico", rel: "icon", type: "image/x-icon" %>
+<link href="sage/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" type="image/png" %>
+<link href="sage/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" %>
+<link href="sage/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" %>
+<link href="sage/favicon.ico" rel="icon" type="image/x-icon" %>
 
 <%= csrf_meta_tags %>
diff --git a/app/views/application/_scripts.html.erb b/app/views/application/_scripts.html.erb
@@ -1,15 +1,21 @@
 <%= javascript_include_tag "//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js", cache: true %>
-<%# javascript_include_tag "sage_system", cache: true %>
 
+<%= javascript_pack_tag "docs" %>
 <%= javascript_pack_tag "system" %>
 
 <script type="text/javascript">
   window.addEventListener("DOMContentLoaded", function(){
     Sage.init([
+      'table',
       'tooltip',
       'sidebar',
       'overlay',
-      'alert'
+      'alert',
+      'banner',
+      'select',
+      'meter',
+      'inputgroup',
+      'inputhelper'
     ]);
   });
 </script>
diff --git a/app/views/examples/elements/_element.html.erb b/app/views/examples/elements/_element.html.erb
@@ -19,7 +19,8 @@
 <div class="sage-panel">
   <h2 id="<%= @title %>-example-code" class="t-sage-heading-2 example__title">Code</h2>
   <div class="example__code">
-    <div class="sage-code-snippet">
+    <button class="example__expand-btn" aria-expanded="false" aria-controls="example-code-<%= @title %>">Expand this code snippet</button>
+    <div id="example-code-<%= @title %>" class="sage-code-snippet" tabindex="-1">
       <pre class="prettyprint"><code><%= CGI.unescapeHTML(CGI.escapeHTML render "examples/elements/#{@title}/preview") %></code></pre>
     </div>
   </div>

diff --git a/app/views/examples/elements/button/_preview.html.erb b/app/views/examples/elements/button/_preview.html.erb
@@ -379,7 +379,7 @@
 <h3 class="t-sage-heading-6">Danger</h3>
 
 <!-- Danger button -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Button",
   is_link_btn: false,
   link_url: "",
@@ -394,7 +394,7 @@
 %>
 
 <!-- Danger button (link) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Link",
   is_link_btn: true,
   link_url: "#",
@@ -409,7 +409,7 @@
 %>
 
 <!-- Danger button (icon-left) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Button (icon-left)",
   is_link_btn: false,
   link_url: "",
@@ -424,7 +424,7 @@
 %>
 
 <!-- Danger button (icon-right) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Button (icon-right)",
   is_link_btn: false,
   link_url: "",
@@ -443,7 +443,7 @@
 <h3 class="t-sage-heading-6">Danger (disabled)</h3>
 
 <!-- Danger button (disabled) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Button",
   is_link_btn: false,
   link_url: "",
@@ -458,7 +458,7 @@
 %>
 
 <!-- Danger button link (disabled) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Link",
   is_link_btn: true,
   link_url: "#",
@@ -473,7 +473,7 @@
 %>
 
 <!-- Danger button link (icon-left, disabled) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Link (icon-left)",
   is_link_btn: true,
   link_url: "#",
@@ -492,7 +492,7 @@
 <h3 class="t-sage-heading-6">Flex Align End</h3>
 
 <!-- Primary button (icon-right) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Add A Model",
   is_link_btn: false,
   link_url: "",
@@ -507,7 +507,7 @@
 %>
 
 <!-- Primary button (icon-right) -->
-<%= render "sage/examples/elements/button/markup",
+<%= render "examples/elements/button/markup",
   text: "Cancel",
   is_link_btn: false,
   link_url: "",

diff --git a/app/views/examples/elements/danger_button/_preview.html.erb b/app/views/examples/elements/danger_button/_preview.html.erb
diff --git a/app/views/examples/elements/danger_button/_props.html.erb b/app/views/examples/elements/danger_button/_props.html.erb
diff --git a/app/views/examples/elements/danger_button/_rules_do.html.erb b/app/views/examples/elements/danger_button/_rules_do.html.erb
diff --git a/app/views/examples/elements/danger_button/_rules_dont.html.erb b/app/views/examples/elements/danger_button/_rules_dont.html.erb
diff --git a/app/views/examples/elements/description/_preview.html.erb b/app/views/examples/elements/description/_preview.html.erb
@@ -1,4 +1,4 @@
-<%= render "sage/examples/elements/description/markup",
+<%= render "examples/elements/description/markup",
   title: "Name",
   data: "John Doe"
-%>
+%>
diff --git a/app/views/examples/elements/form_input/_preview.html.erb b/app/views/examples/elements/form_input/_preview.html.erb
@@ -18,7 +18,7 @@
     message_text: "This is a message"
   %>
 
-  <h3 class="t-sage-heading-6">Text (with error modifier)</h3>
+  <h3 class="t-sage-heading-6">Text (with error)</h3>
   <%= render "examples/elements/form_input/markup",
     id: "form__fname2",
     input_type: "text",
@@ -35,8 +35,28 @@
     has_error: true,
     message_text: "This is a message"
   %>
+
+  <h3 class="t-sage-heading-6">Text (prefilled)</h3>
+  <%= render "examples/elements/form_input/markup",
+    id: "form__country",
+    input_type: "text",
+    label_text: "Country",
+    placeholder: "Country",
+    value: "USA",
+    required: true,
+    disabled: false,
+    input_mode: "",
+    pattern: "",
+    max: "",
+    minlength: "",
+    maxlength: "",
+    has_error: false,
+    message_text: ""
+  %>
+
+  <h3 class="t-sage-heading-6">Text (disabled)</h3>
   <%= render "examples/elements/form_input/markup",
-    id: "form__lname",
+    id: "form__apt",
     input_type: "text",
     label_text: "PO Box",
     placeholder: "PO Box",

diff --git a/app/views/examples/elements/form_select/_preview.html.erb b/app/views/examples/elements/form_select/_preview.html.erb
@@ -1,4 +1,4 @@
-<%= render "sage/examples/elements/form_select/markup",
+<%= render "examples/elements/form_select/markup",
   name: "Characters",
   has_error: false,
   select_options: [
@@ -34,7 +34,7 @@
   message: "This is a message"
 %>
 
-<%= render "sage/examples/elements/form_select/markup",
+<%= render "examples/elements/form_select/markup",
   name: "Pets",
   has_error: true,
   select_options: [

diff --git a/app/views/examples/elements/link_button/_preview.html.erb b/app/views/examples/elements/link_button/_preview.html.erb
@@ -1 +1 @@
-<%= render "sage/examples/elements/link_button/markup" %>
+<%= render "examples/elements/link_button/markup" %>
diff --git a/app/views/examples/elements/live_stream_wrapper/_preview.html.erb b/app/views/examples/elements/live_stream_wrapper/_preview.html.erb
@@ -1,7 +1,7 @@
-<%= render "sage/examples/elements/live_stream_wrapper/markup",
+<%= render "examples/elements/live_stream_wrapper/markup",
   is_awake: true
 %>
 
-<%= render "sage/examples/elements/live_stream_wrapper/markup",
+<%= render "examples/elements/live_stream_wrapper/markup",
   is_awake: false
-%>
+%>
diff --git a/app/views/examples/elements/meter/_preview.html.erb b/app/views/examples/elements/meter/_preview.html.erb
@@ -1,5 +1,5 @@
 <!-- Default -->
-<%= render "sage/examples/elements/form_input/markup",
+<%= render "examples/elements/form_input/markup",
   id: "pw-meter-example",
   input_type: "number",
   label_text: "Meter value",
@@ -16,7 +16,7 @@
   message_text: ""
 %>
 
-<%= render "sage/examples/elements/meter/markup",
+<%= render "examples/elements/meter/markup",
   id: "pw-hint-meter",
   label: "Password strength",
   value: 1,

diff --git a/app/views/examples/elements/switch/_preview.html.erb b/app/views/examples/elements/switch/_preview.html.erb
@@ -144,29 +144,5 @@
       required: false,
       message: ""
     %>
-    <!-- Radio w/ Message -->
-    <%= render "examples/elements/switch/markup",
-      type: "radio",
-      name: "sage-switch-11",
-      id: "sage-switch-11",
-      value: "switch-11-value",
-      label_text: "Switch (radio)",
-      has_error: false,
-      checked: false,
-      disabled: false,
-      required: false,
-      message: "Additional Info"
-    %>
-    <%= render "examples/elements/switch/markup",
-      type: "radio",
-      name: "sage-switch-12",
-      id: "sage-switch-12",
-      value: "switch-12-value",
-      label_text: "Switch (radio)",
-      has_error: true,
-      checked: false,
-      disabled: false,
-      required: true,
-      message: "Additional Info"
-    %>
   </div>
+</div>
diff --git a/app/views/examples/elements/table/_preview.html.erb b/app/views/examples/elements/table/_preview.html.erb
@@ -1,5 +1,5 @@
 <h3 class="t-sage-heading-6">Responsive table</h3>
-<%= render "sage/examples/elements/table/markup",
+<%= render "examples/elements/table/markup",
   caption: "Responsive tables require the use of two parent containers",
   condensed: false,
   responsive: true,
@@ -9,7 +9,7 @@
 %>
 
 <h3 class="t-sage-heading-6">Striped table</h3>
-<%= render "sage/examples/elements/table/markup",
+<%= render "examples/elements/table/markup",
   caption: "Striped tables display a background color on odd-numbered rows",
   condensed: false,
   responsive: true,
@@ -19,7 +19,7 @@
 %>
 
 <h3 class="t-sage-heading-6">Striped table with condensed padding</h3>
-<%= render "sage/examples/elements/table/markup",
+<%= render "examples/elements/table/markup",
   caption: "Condensed tables use decreased vertical padding in table cells",
   condensed: true,
   responsive: true,
@@ -29,7 +29,7 @@
 %>
 
 <h3 class="t-sage-heading-6">Sortable table with condensed padding</h3>
-<%= render "sage/examples/elements/table/markup",
+<%= render "examples/elements/table/markup",
   caption: "NOTE: this example is for mockup purposes only and does not implement sorting cells",
   condensed: true,
   responsive: true,

diff --git a/app/views/examples/objects/_object.html.erb b/app/views/examples/objects/_object.html.erb
@@ -19,7 +19,8 @@
 <div class="sage-panel">
   <h2 id="<%= @title %>-example-code" class="t-sage-heading-2 example__title">Code</h2>
   <div class="example__code">
-    <div class="sage-code-snippet">
+    <button class="example__expand-btn" aria-expanded="false" aria-controls="example-code-<%= @title %>">Expand this code snippet</button>
+    <div id="example-code-<%= @title %>" class="sage-code-snippet" tabindex="-1">
       <pre class="prettyprint"><code><%= CGI.unescapeHTML(CGI.escapeHTML render "examples/objects/#{@title}/preview") %></code></pre>
     </div>
   </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<%= render "sage/examples/elements/link_button/markup" %>
		<%= render "examples/elements/link_button/markup" %>