Sage: Integrate Pine into icons (#1890)

* chore: update browserslist dependency

* feat: add pine icons to sage

* feat(icon): work pine-icon into sage-icon

* feat(icon): add pds-icon to both rails and react components

* feat: convert rails button icons to pine

* fix: correct icon z-index

* revert: scripts in manager-head

* feat: convert rails icon to pine

* fix: add expandable card styles for pds-icon

* feat(alert): convert rails icon to pine

* fix(avatar): add styles for pds-icon

* feat(badge): convert rails icon to pine

* feat(banner): convert rails icon to pine

* feat(breadcrumbs): convert rails icon to pine

* feat(choice): convert rails icon to pine

* feat(copytext): convert rails icon to pine

* fix(button): add icon for disclosure btn

* fix(expandablecard): adjust icon spacing

* feat(iconcard): convert rails icon to pine

* fix: correct missing icons

* feat(forminput): convert rails icon to pine

* fix(formsection): correct missing icons

* feat(formselect): convert rails icon to pine

* fix(formselect): add message icon

* feat(textarea): convert rails icon to pine

* fix(hint): correct icon alignment

* feat(link): convert rails icon to pine

* fix: linting errors

* ci: add step to configure authToken for NPM

* test(react-icon): comment out aria-lable test

* feat(navlink): convert rails icon to pine

* feat(pageheading): convert help link icon to pine

* docs(icon): convert icons to pine

* feat(dropdownitem): convert rails icon to pine

* feat(search): convert rails icon to pine

* feat(statusicon): convert rails icon to pine

* feat(sortable): convert rails icon to pine

* feat(label): convert rails icon to pine

* feat(tab): convert rails icon to pine

* fix(tabs): correct icon name typo

* fix(search): correct toolbar alignment

* fix(catalogitem): fix missing icon

* fix: various icon bug fixes

* fix(docs): correct home icon

* fix(pagination): removes sage icon dependency

* feat(toast): convert rails icon to pine

* fix: correct linting errors

* fix: remove commented code

* fix(checkbox): convert check icon to svg

* fix(hero): convert play icon to svg

* fix(select): update icon-base to include pine

* fix: update icon-base to include pine

* fix: removes pine-ds/icons as dependency

* fix(button): convert classes to tokens

* feat(button-react): convert icons to pine

* feat(badge-react): convert icons to pine

* fix(button-react): convert icon classes to function

* fix: correct linter error

* fix(choice): update alignments and convert icons

* feat(copytext-react): convert icons to pine

* feat(link-react): convert icons to pine

* feat(link-react): convert icons to pine

* style: correct missing semicolon

* docs(panel): add icons to preview

* fix(badge): change to self closing

* feat(toast-react): convert icons to pine

* feat(search): convert icons to pine

* docs(search): add disabled search preview

* fix(icon): adjust text alignment variant

* fix: correct linting errors

* fix(iconcard): fix sizing and styling issue

* fix: search styling adjustments

* fix(tag): styling fixes

* fix(button): correct type

* style: lint fixes

* fix: rename icon

* fix: correct style syntax

* docs: provide additional info in preview-head

* feat(property): convert icons to pine

* docs: correct icon names

* docs: remove legacy instructions

* fix: update pds-icon version

* feat(banner): add pine icons

* fix: correct linting errors

* chore: update pine-ds/icons to v7.0.1

---------

Co-authored-by: Julian Skinner <[email protected]>
Co-authored-by: Phillip Lovelace <[email protected]>

.github/workflows/lint-test-build.yml

@@ -20,6 +20,10 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      # # Setup Auth token to push to github packages
+      - name: Set NPM Config
+        run: npm config set '//npm.pkg.github.com/:_authToken=${{ secrets.ACCESS_TOKEN }}'
+
       - name: Install Yarn
         env:
           NODE_VERSION: ${{ matrix.node-version }}

docs/app/views/application/_app_head_content.html.erb

@@ -16,3 +16,5 @@
 <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
 <link href="/favicon.ico" rel="icon" type="image/x-icon">
 <%= csrf_meta_tags %>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/core/dist/pine-core/pine-core.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@pine-ds/core/dist/pine-core/index.esm.js"></script>

docs/app/views/application/_nav.html.erb

@@ -48,7 +48,7 @@
         name: "stack"
       },
     } %>
-    <!-- COMING SOON 
+    <!-- COMING SOON
     <%= sage_component SageButton, {
       value: "Interactions",
       attributes: {

docs/app/views/examples/components/alert/_preview.html.erb

@@ -18,7 +18,7 @@ These also determine the icon that will appear by default.
   color: "default",
   title: "A default alert",
   desc: demo_description,
-  icon_name: "sage-icon-info-circle-filled",
+  icon_name: "info-circle-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -31,7 +31,7 @@ These also determine the icon that will appear by default.
   color: "info",
   title: "An informative alert",
   desc: demo_description,
-  icon_name: "sage-icon-info-circle-filled",
+  icon_name: "info-circle-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -44,7 +44,7 @@ These also determine the icon that will appear by default.
   color: "success",
   title: "An informative alert",
   desc: demo_description,
-  icon_name: "sage-icon-check-circle-filled",
+  icon_name: "check-circle-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -57,7 +57,7 @@ These also determine the icon that will appear by default.
   color: "warning",
   title: "Uh, oh! Here's a warning alert",
   desc: demo_description,
-  icon_name: "sage-icon-danger-filled",
+  icon_name: "danger-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -70,7 +70,7 @@ These also determine the icon that will appear by default.
   color: "danger",
   title: "Look out! This alert means there's an error",
   desc: demo_description,
-  icon_name: "sage-icon-warning-filled",
+  icon_name: "warning-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -91,7 +91,7 @@ These include a single primary action button and one or more additional secondar
   color: "published",
   title: "Alert with all actions",
   desc: demo_description,
-  icon_name: "sage-icon-check-circle-filled",
+  icon_name: "check-circle-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -134,7 +134,7 @@ You can listen for this event as it bubbles and respond as you see fit.
   title: "This nifty alert can be dismissed",
   desc: demo_description,
   dismissable: true,
-  icon_name: "sage-icon-info-circle-filled",
+  icon_name: "info-circle-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageButton, {
@@ -156,7 +156,7 @@ They support all other properties with the exception of buttons in the `sage_ale
   desc: demo_description,
   small: true,
   dismissable: true,
-  icon_name: "sage-icon-info-circle-filled",
+  icon_name: "info-circle-filled",
 } do %>
   <% content_for :sage_alert_actions do %>
     <%= sage_component SageLink, {

docs/app/views/examples/components/catalog_item/_preview.html.erb

@@ -2,7 +2,7 @@
   color: "warning",
   title: "Deprecated",
   desc:  "Catalog Item usage is no longer recommended. Please use the #{link_to "List component", "/pages/component/list"} instead to construct a similar experience or as a replacement option.".html_safe,
-  icon_name: "sage-icon-danger-filled",
+  icon_name: "danger-filled",
 } %>
 
 <%= sage_component SageCardList, {} do %>
@@ -75,7 +75,7 @@
   <% 2.times do %>
     <%= sage_component SageCatalogItem, {
       title: "Fun For All – The Children Call: Their Favorite Time Of Year",
-      icon: "sage-icon-mail-xl",
+      icon: "mail",
       href: "#"
     } do %>
       <%= sage_component SageButton, {

docs/app/views/examples/components/choice/_preview.html.erb

@@ -49,7 +49,8 @@ long_description = "Description with longer text to cause wrapping and make the
     target: "example",
     text: "Option 1",
     type: "icon",
-    icon: "video-on"
+    icon: "video-on",
+    subtext: "Description of Option 1",
   }
 %>
 

docs/app/views/examples/components/dynamic_select/_preview.html.erb

@@ -2,7 +2,7 @@
   color: "warning",
   title: "Deprecated",
   desc:  "Dynamic Select is deprecated and no longer recommended. Please reach out for #{link_to "support or any questions", "/pages/support"}.".html_safe,
-  icon_name: "sage-icon-danger-filled",
+  icon_name: "danger-filled",
 } %>
 
 <h3>Working with the<code>Sage Dynamic Select Input (Select2)</code></h3>

docs/app/views/examples/components/form_section/_preview.html.erb

@@ -2,21 +2,21 @@
 
   <!-- Default -->
   <h3 class="t-sage-heading-6">Default</h3>
-  <%= sage_component SageFormSection, { 
+  <%= sage_component SageFormSection, {
     id:"c1",
     title: "Form Section Title",
     subtitle: "Helpful text that lets the customer have an idea how to work with the section.",
   } do %>
     <%= sage_component SageAlert, {
       title: "Form Section Content Will Go Here",
       desc: "This component is designed to be very flexible and take any sort of content you want to pass to it.",
-      icon_name: "sage-icon-info-circle",
+      icon_name: "info-circle",
     } %>
   <% end %>
 
   <!-- Custom title_tag -->
   <h3 class="t-sage-heading-6">Form Section with custom header tag</h3>
-  <%= sage_component SageFormSection, { 
+  <%= sage_component SageFormSection, {
     id:"c2",
     title: "Custom Title Tag",
     subtitle: "Helpful text that lets the customer have an idea how to work with the section.",
@@ -25,19 +25,19 @@
     <%= sage_component SageAlert, {
       title: "Form Section Content Will Go Here",
       desc: "This component is designed to be very flexible and take any sort of content you want to pass to it.",
-      icon_name: "sage-icon-info-circle",
+      icon_name: "info-circle",
     } %>
   <% end %>
 
   <h3 class="t-sage-heading-6">With Custom Subtitle</h3>
-  <%= sage_component SageFormSection, { 
+  <%= sage_component SageFormSection, {
     id:"c1",
     title: "Form Section Title",
   } do %>
     <%= sage_component SageAlert, {
       title: "Form Section Content Will Go Here",
       desc: "This component is designed to be very flexible and take any sort of content you want to pass to it.",
-      icon_name: "sage-icon-info-circle",
+      icon_name: "info-circle",
     } %>
     <%= content_for :sage_form_section_subtitle do %>
       <p>Helpful text that lets the customer have an idea how to work with the section.</p>

docs/app/views/examples/components/icon_list/_preview.html.erb

@@ -3,7 +3,7 @@
   items: [
     {
       bullet: %(
-        <i class="sage-icon-circle-1 t-sage--color-charcoal-300"></i>
+        <pds-icon name="circle-1" class="t-sage--color-charcoal-300""></pds-icon>
       ),
       body: %(
         <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
@@ -12,7 +12,7 @@
     },
     {
       bullet: %(
-        <i class="sage-icon-circle-2 t-sage--color-charcoal-300"></i>
+        <pds-icon name="circle-2" class="t-sage--color-charcoal-300""></pds-icon>
       ),
       body: %(
         <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
@@ -21,7 +21,7 @@
     },
     {
       bullet: %(
-        <i class="sage-icon-circle-3 t-sage--color-charcoal-300"></i>
+        <pds-icon name="circle-3" class="t-sage--color-charcoal-300""></pds-icon>
       ),
       body: %(
         <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>

docs/app/views/examples/components/panel/_preview.html.erb

@@ -10,7 +10,7 @@ Ut elementum id leo ac fringilla.
 <%= sage_component SageAlert, {
   color: "warning",
   desc: "While this page depicts Panels within Cards, this is merely a consequence of our documentation structure and not a pattern that should be implemented elsewhere.",
-  icon_name: "sage-icon-warning",
+  icon_name: "warning",
 } %>
 
 <h2>Overview</h2>
@@ -70,25 +70,25 @@ There are a few options for the panel body container.
   <%= sage_component SagePanelStack, {} do %>
     <%= sage_component SageCard, {} do %>
       <%= sage_component SageCardRow, { grid_template: "et" } do %>
-        <i class="sage-icon-video-on"></i>
+        <%= sage_component SageIcon, { icon: "video-on" } %>
         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
       <% end %>
     <% end %>
     <%= sage_component SageCard, {} do %>
       <%= sage_component SageCardRow, { grid_template: "et" } do %>
-        <i class="sage-icon-video-on"></i>
+        <%= sage_component SageIcon, { icon: "video-on" } %>
         <span>Morbi rhoncus mauris ut turpis gravida bibendum.</span>
       <% end %>
     <% end %>
     <%= sage_component SageCard, {} do %>
       <%= sage_component SageCardRow, { grid_template: "et" } do %>
-        <i class="sage-icon-video-on"></i>
+        <%= sage_component SageIcon, { icon: "video-on" } %>
         <span>Donec feugiat accumsan velit et semper.</span>
       <% end %>
     <% end %>
     <%= sage_component SageCard, {} do %>
       <%= sage_component SageCardRow, { grid_template: "et" } do %>
-        <i class="sage-icon-video-on"></i>
+        <%= sage_component SageIcon, { icon: "video-on" } %>
         <span>Ut elementum id leo ac fringilla.</span>
       <% end %>
     <% end %>
@@ -102,19 +102,19 @@ There are a few options for the panel body container.
 <%= sage_component SagePanel, {} do %>
   <%= sage_component SagePanelList, {} do %>
     <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
-      <i class="sage-icon-video-on"></i>
+      <%= sage_component SageIcon, { icon: "video-on" } %>
       <span class="t-sage-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
     <% end %>
     <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
-      <i class="sage-icon-video-on"></i>
+      <%= sage_component SageIcon, { icon: "video-on" } %>
       <span class="t-sage-body">Morbi rhoncus mauris ut turpis gravida bibendum.</span>
     <% end %>
     <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
-      <i class="sage-icon-video-on"></i>
+      <%= sage_component SageIcon, { icon: "video-on" } %>
       <span class="t-sage-body">Donec feugiat accumsan velit et semper.</span>
     <% end %>
     <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
-      <i class="sage-icon-video-on"></i>
+      <%= sage_component SageIcon, { icon: "video-on" } %>
       <span class="t-sage-body">Ut elementum id leo ac fringilla.</span>
     <% end %>
   <% end %>
@@ -132,7 +132,7 @@ There are a few options for the panel body container.
 
 <%= sage_component SagePanel, {} do %>
   <%= sage_component SagePanelRow, { grid_template: "ete" } do %>
-    <i class="sage-icon-check-circle-xl t-sage--color-sage"></i>
+    <%= sage_component SageIcon, { icon: "check-circle", css_classes: "t-sage--color-sage" } %>
     <%= sage_component SagePanelBlock, {} do %>
       <p class="t-sage-body-semi">Lorem ipsum dolor sit amet</p>
       <p class="t-sage-body-small t-sage--color-grey">consectetur adipiscing elit</p>

docs/app/views/examples/components/search/_preview.html.erb

@@ -24,3 +24,13 @@
   hide_label: true,
   label_text: "Search"
 } %>
+
+<h3 class="t-sage-heading-6">Disabled</h3>
+<%= sage_component SageSearch, {
+  id: "search-4",
+  placeholder: "Search Coupons",
+  value: nil,
+  contained: true,
+  label_text: "Search",
+  disabled: true,
+} %>

docs/app/views/examples/components/tabs/_preview.html.erb

@@ -56,7 +56,7 @@
           attributes: {
             href: "//example.com/basic-test2"
           },
-          icon: "filters"
+          icon: "filter"
         },
       ]
     }

docs/app/views/examples/components/typeahead/_preview.html.erb

@@ -58,7 +58,7 @@
     <% items.each do |item| %>
       <li class="sage-typeahead__item">
         <button class="sage-typeahead__item-trigger">
-          <i class="sage-icon-<%= item[:icon] %>" style="grid-area: icon;"></i>
+          <pds-icon name="<%= item[:icon] %>" class="sage-icon-<%= item[:icon] %>" style="grid-area: icon;"></pds-icon>
           <div class="t-sage-heading-6" style="grid-area: title;">
             <%= item[:title] %>
           </div>

docs/app/views/pages/icon.html.erb

@@ -189,7 +189,7 @@ dialogue_icons = [
 <%= content_for :heading do %>
 <%= md(%(
 # Icons
-<p class="docs-heading__lead">Our icon set includes those shown below. The typical pattern for these is to use an <code>&lt;i&gt;</code> tag with a class as indicated below.</p>
+<p class="docs-heading__lead">Our icon set includes those shown below.</p>
 )) %>
 <% end %>
 <%= content_for :quick_links do %>
@@ -237,7 +237,7 @@ Marketing uses the Megaphone icon. We do not use the megaphone icon for other tr
   <% action_icons.each do |icon| %>
     <div class="docs-icon-inline">
       <%= sage_component SageCardRow, { grid_template: "it" } do %>
-        <i class="sage-icon-<%= icon[:name] %>-xl" aria-hidden="true"></i>
+        <pds-icon class="sage-icon-<%= icon[:name] %>-xl" name="<%= icon[:name] %>" size="xl"></pds-icon>
         <p class="docs-icon-inline__label"><%= icon[:name] %></p>
         <p class="docs-icon-inline__usage"><strong><%= icon[:action] %></strong> Actions</p>
       <% end %>
@@ -250,7 +250,7 @@ Marketing uses the Megaphone icon. We do not use the megaphone icon for other tr
   <% feature_icons.each do |icon| %>
     <div class="docs-icon-inline">
       <%= sage_component SageCardRow, { grid_template: "it" } do %>
-        <i class="sage-icon-<%= icon[:name] %>-xl" aria-hidden="true"></i>
+        <pds-icon class="sage-icon-<%= icon[:name] %>-xl" name="<%= icon[:name] %>" size="xl"></pds-icon>
         <p class="docs-icon-inline__label"><%= icon[:name] %></p>
         <p class="docs-icon-inline__usage"><strong><%= icon[:action] %></strong></p>
       <% end %>
@@ -263,7 +263,7 @@ Marketing uses the Megaphone icon. We do not use the megaphone icon for other tr
   <% dialogue_icons.each do |icon| %>
     <div class="docs-icon-inline">
       <%= sage_component SageCardRow, { grid_template: "it" } do %>
-        <i class="sage-icon-<%= icon[:name] %>-xl" aria-hidden="true"></i>
+        <pds-icon class="sage-icon-<%= icon[:name] %>-xl" name="<%= icon[:name] %>" size="xl"></pds-icon>
         <p class="docs-icon-inline__label"><%= icon[:name] %></p>
         <p class="docs-icon-inline__usage"><strong><%= icon[:action] %></strong> Dialogues</p>
       <% end %>

docs/lib/sage_rails/app/views/sage_components/_sage_alert.html.erb

@@ -11,7 +11,7 @@
   <%= component.generated_html_attributes.html_safe %>
 >
   <% if component.icon_name %>
-    <i class="sage-alert__icon <%= component.icon_name %>" aria-hidden="true"></i>
+    <pds-icon name="<%= component.icon_name %>" class="sage-alert__icon"></pds-icon>
   <% end %>
   <div class="sage-alert__copy">
     <% if component.title %>

docs/lib/sage_rails/app/views/sage_components/_sage_badge.html.erb

@@ -23,10 +23,10 @@
     <span class="sage-badge__value-text">
       <%= component.value.html_safe %>
     </span>
+    <%= component.content %>
+    <% if component.interactive_type %>
+      <pds-icon name="down-small" size="12px" class="sage-badge__decor-icon sage-badge__decor-icon--down-small"></pds-icon>
+    <% end %>
   </<%= badge_content_tag %>>
-  <%= component.content %>
-  <% if component.interactive_type %>
-    <span class="sage-badge__decor-icon sage-badge__decor-icon--down-small"></span>
-  <% end %>
 </span>
 

docs/lib/sage_rails/app/views/sage_components/_sage_banner.html.erb

@@ -1,3 +1,13 @@
+<% if component.type == 'secondary' %>
+  <% icon_name = 'info-circle' %>
+<% elsif component.type == 'warning' %>
+  <% icon_name = 'warning' %>
+<% elsif component.type == 'danger' %>
+  <% icon_name = 'danger' %>
+<% else %>
+  <% icon_name = 'flag' %>
+<% end %>
+
 <% if component.banner_context.present? %>
   <div class="
     sage-banner-wrapper
@@ -16,6 +26,9 @@
   <%= "aria-hidden=true" if !component.active %>
   <%= component.generated_html_attributes.html_safe %>
 >
+  <% if component.type.present? || "default" %>
+    <pds-icon name="<%= icon_name %>" size="16px" class="sage-banner__icon"></pds-icon>
+  <% end %>
   <% if component.text.present? %>
     <p class="sage-banner__text">
       <%= component.text %>