Next Version Bump

.github/workflows/deploy.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set Node Version
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Documentation Site Deploy
         env:

.github/workflows/release-deploy-v2.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Set NPM Config
         run: npm config set '//npm.pkg.github.com/:_authToken' '${{ secrets.ACCESS_TOKEN }}'
@@ -64,7 +64,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Restore Node modules
         uses: actions/cache/restore@v3
@@ -95,7 +95,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Restore Node modules
         uses: actions/cache/restore@v3
@@ -126,7 +126,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Restore Node modules
         uses: actions/cache/restore@v3
@@ -174,7 +174,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Restore Node modules
         uses: actions/cache/restore@v3
@@ -241,7 +241,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.20.0
+          node-version: 16.20.2
 
       - name: Deploy Documentation Site
         env:

.nvmrc

@@ -1 +1 @@
-16.20.0
+16.20.2

docs/Dockerfile

@@ -4,7 +4,7 @@ ARG RAILS_ENV="production"
 ARG NONROOT_UID="1000"
 ARG NONROOT_GID="1000"
 ARG BUNDLER_VERSION="2.3.14"
-ARG NODE_VERSION="16.20.0"
+ARG NODE_VERSION="16.20.2"
 ARG YARN_VERSION="1.22.18"
 ARG ARCH="x64"
 ARG GITHUB_TOKEN

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

@@ -1,111 +1,83 @@
-<h3>Basic Usage</h3>
+<h2>Default</h2>
+
 <%= sage_component SageIcon, { icon: "pen", label: "Edit" } %>
 
-<h3>Colors</h3>
-<%= sage_component SageCardList, {} do %>
-  <% SageTokens::COLORS.each do | color | %>
-    <%= sage_component SageCardListItem, { grid_template: "et" } do %>
-      <%= sage_component SageIcon, { icon: "pen", color: color } %>
-      <%= color %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<h3>Sizes</h3>
-<%= sage_component SageCardList, {} do %>
-  <% SageTokens::ICON_SIZES.each do | size | %>
-    <%= sage_component SageCardListItem, { grid_template: "et" } do %>
-      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size) } %>
-      <%= size == "md" ? "Default (#{size})" : size %>
-    <% end %>
-  <% end %>
-<% end %>
+<h2>Variants</h2>
 
-<h3>Alignment next to Type</h3>
-<%= md("
-Since a common use is to place an icon inline next to text in a variety of forms, we provide the opportunity to indicate that an icon is beside content a particular type spec.
-The effect is that the icon's `height` and `line-height` are updated to match the spec responsively.
-This can be used in combination with the different icon sizes.
-and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within `SageCardRow` or `SagePanelRow`.
-") %>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
-  <h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
-</div>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h4", spacer: { right: "xs" } } %>
-  <h4 class="<%= SageClassnames::TYPE::HEADING_4 %>">Heading 4 Lorem ipsum dolor sit</h4>
-</div>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body", spacer: { right: "xs" } } %>
-  <p class="<%= SageClassnames::TYPE::BODY %>">Body Lorem ipsum dolor sit</p>
+<h3>Color</h3>
+
+<p>To change the color of the icon, pass a color name to the <code>color</code> prop. Color values are <a href="https://www.figma.com/file/SHwMHKJXzMRn0tPZXEkfc5/%F0%9F%8E%A8-Sage-styles?type=design&node-id=3%3A1401&mode=design&t=Ri1acMQCzmfaaR9r-1" target="_blank">defined in Figma</a> and include values like <code>primary-300</code>, <code>sage-300</code>, <code>red-300</code>, etc.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", label: "Preview", color: "sage-300" } %>
+  <%= sage_component SageIcon, { icon: "trash", label: "Delete", color: "red-300" } %>
 </div>
-<div style="display: flex;">
-  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body-sm", spacer: { right: "xs" } } %>
-  <p class="<%= SageClassnames::TYPE::BODY_SMALL %>">Body Small Lorem ipsum dolor sit</p>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Size</h3>
+<p>Size can be used to increase or decrease the size of the icon. The default size is <code>md</code>. See Property tab for available values.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", label: "Edit", size: "xs" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", label: "Edit" } %>
+  <%= sage_component SageIcon, { icon: "trash", label: "Edit", size: "xl" } %>
 </div>
 
-<h3>Background Colors</h3>
-<%= sage_component SageCardList, {} do %>
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "danger" %></p>
-    <%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
-    <%= sage_component SageIcon, { icon: "danger", card_color: "danger", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "draft" %></p>
-    <%= sage_component SageIcon, { icon: "draft", card_color: "draft" } %>
-    <%= sage_component SageIcon, { icon: "draft", card_color: "draft", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "info" %></p>
-    <%= sage_component SageIcon, { icon: "info-circle", card_color: "info" } %>
-    <%= sage_component SageIcon, { icon: "info-circle", card_color: "info", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "locked" %></p>
-    <%= sage_component SageIcon, { icon: "lock", card_color: "locked" } %>
-    <%= sage_component SageIcon, { icon: "lock", card_color: "locked", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "published" %></p>
-    <%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published" } %>
-    <%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "warning" %></p>
-    <%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
-    <%= sage_component SageIcon, { icon: "warning", card_color: "warning", circular: true } %>
-  <% end %>
-
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <p><%= "kajabi" %></p>
-    <%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary" } %>
-    <%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary", circular: true } %>
-  <% end %>
-<% end %>
+<%= sage_component SageDivider, {} %>
+
+<h3>Card Color</h3>
+<p>Icons can be placed on a background by setting the <code>card_color</code> property. See Property tab for available values.</p>
 
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
+  <%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
+  <%= sage_component SageIcon, { icon: "check-circle", card_color: "published" } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
 
 <h3>Background Sizes</h3>
-<%= sage_component SageCardList, {} do %>
-  <% SageTokens::ICON_SIZES.each do | size | %>
-    <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-      <p><%= size == "md" ? "Default (#{size})" : size %></p>
-      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft" } %>
-      <%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft", circular: true, } %>
-    <% end %>
-  <% end %>
-<% end %>
+<p>Background sizes can be applied by setting the <code>size</code> property. See Property tab for available values.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", size: "sm", card_color: "draft" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", size: "lg", card_color: "draft" } %>
+  <%= sage_component SageIcon, { icon: "trash", size: "xl", card_color: "draft" } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
 
 <h3>Custom Background Sizes</h3>
-<%= sage_component SageCardList, {} do %>
-  <%= sage_component SageCardListItem, { grid_template: "o" } do %>
-    <%= sage_component SageIcon, { icon: "pen", size: "2xl", background_width: "128px", background_height: "64px", card_color: "draft" } %>
-    <%= sage_component SageIcon, { icon: "pen", size: "xl", background_height: "64px", card_color: "draft", circular: true, } %>
-  <% end %>
-<% end %>
+<p>Custom background sizes can be applied by setting the <code>background_width</code> and <code>background_height</code> properties. These values are applied as inline styles, so they can be any valid CSS value. The <code>background_width</code> property is required when using <code>background_height</code>.</p>
+
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", background_width: "128px", background_height: "128px", card_color: "draft" } %>
+  <%= sage_component SageIcon, { icon: "preview-on", background_width: "64px", background_height: "128px", card_color: "warning" } %>
+  <%= sage_component SageIcon, { icon: "trash", background_width: "240px", background_height: "80px", card_color: "danger" } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Circular</h3>
+<p>Icons can be made circular by setting the <code>circular</code> property to <code>true</code>.</p>
+
+<div style="display:flex;gap:16px">
+  <%= sage_component SageIcon, { icon: "pen", card_color: "draft", circular: true } %>
+  <%= sage_component SageIcon, { icon: "preview-on", card_color: "published", circular: true } %>
+  <%= sage_component SageIcon, { icon: "trash", card_color: "danger", circular: true } %>
+</div>
+
+<%= sage_component SageDivider, {} %>
+
+<h3>Alignment next to Type</h3>
+
+<p>The <code>adjacent_type</code> property can be used to align an icon next to a heading or paragraph. This is useful for placing an icon next to a heading or paragraph in a variety of forms. The effect is that the icon's <code>height</code> and <code>line-height</code> are updated to match the spec responsively. This can be used in combination with the different icon sizes and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within <code>SageCardRow</code> or <code>SagePanelRow</code>.
+</p>
+
+<div style="display:flex">
+  <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
+  <h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
+</div>

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

@@ -1,42 +1,109 @@
-<h3 class="t-sage-heading-6">Initial State</h3>
+<%
+  dropdown_menu_items = [
+    {
+      value: "Upload file",
+    }, {
+      value: "Select recent file",
+    }, {
+      style: "danger",
+      modifiers: ["border-before"],
+      value: "Remove image",
+    }
+  ]
+%>
+
+<h3>Default State (no file selected)</h3>
+
 <%= sage_component SageUploadCard, {
-  selection_label: "Select a file",
-  selection_subtext: "Recommended dimensions or file size requirements",
-} %>
+  id: "upload-card-default",
+  selection_label: "Select file",
+} do %>
+  <% content_for :sage_upload_card_instructions do %>
+    <p>Upload a JPEG</p>
+  <% end %>
+<% end %>
+
+<h3>Selected File State</h3>
 
-<h3 class="t-sage-heading-6">Selected File State</h3>
+<p>Restrict accepted file types using <code>accepted_file_types</code>.</p>
 
 <%= sage_component SageUploadCard, {
   accepted_files: [
-    {name: "contacts.csv"},
+    {name: "my-image-file.jpg"},
   ],
   file_selected: true,
+  accepted_file_types: ["image/jpg"],
+  selection_preview: "https://placekitten.com/360",
   selection_label: "Replace file",
-  selection_subtext: "Recommended dimensions or file size requirements",
-} %>
+  id: "upload-card-selected",
+} do %>
+  <% content_for :sage_upload_card_instructions do %>
+    <p>Upload a JPEG this is a test</p>
+  <% end %>
+<% end %>
 
-<h3 class="t-sage-heading-6">Error State</h3>
+
+<h3>Vertical (stacked) layout</h3>
+<p>The default layout will adjust from a vertical (stacked) orientation to horizontal depending on available space and/or screen size.</p>
+
+<p>Setting <code>stack_layout</code> to <code>true</code> locks the component to the vertical orientation.</p>
 
 <%= sage_component SageUploadCard, {
-  has_error: true,
-  selection_label: "Select a file",
-  selection_subtext: "Recommended dimensions or file size requirements",
-  errors: [
-    {text: "This is the error message."},
-  ]
-} %>
+  accepted_files: [
+    {name: "my-image-file.jpg"},
+  ],
+  file_selected: true,
+  selection_preview: "https://placekitten.com/360",
+  stack_layout: true,
+  id: "upload-card-stack",
+  selection_label: "Edit file",
+} do %>
+  <% content_for :sage_upload_card_instructions do %>
+    <p>Recommended dimensions or file size requirements</p>
+  <% end %>
+<% end %>
 
-<h3 class="t-sage-heading-6">Selected Error State</h3>
+<h3>Custom content areas</h3>
+<h4>Instructions area</h4>
+<p>The <code>sage_upload_card_instructions</code> slot provides an area for  extended instructions and custom markup.</p>
 
+<h4>Actions area</h4>
+<p>Use the <code>sage_upload_card_actions</code> slot to replace the default button and display custom components, such as dropdowns.</p>
+<p><strong>NOTE:</strong> a file input field and label are <em>included by default in the base component</em>, as seen in the examples above. When applying a custom file input with `sage_upload_card_actions`, set <code>custom_file_input_field</code> to <code>true</code> to remove these defaults.</p>
 <%= sage_component SageUploadCard, {
   accepted_files: [
-    {name: "contacts.csv"},
+    {name: "fluffy-kitteh.jpg"},
   ],
+  custom_file_input_field: true,
   file_selected: true,
+  selection_preview: "https://placekitten.com/360",
+  id: "upload-card-dropdown"
+} do %>
+  <% content_for :sage_upload_card_actions do %>
+    <%= sage_component SageDropdown, { items: dropdown_menu_items } do %>
+      <% content_for :sage_dropdown_trigger, flush: true do %>
+        <%= sage_component SageButton, {
+          style: "secondary",
+          icon: { name: "caret-down", style: "right" },
+          value: "Edit file",
+        } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+
+<h3>Error State</h3>
+
+<%= sage_component SageUploadCard, {
   has_error: true,
-  selection_label: "Replace file",
-  selection_subtext: "Recommended dimensions or file size requirements",
+  id: "upload-card-error",
+  selection_label: "Select a file",
   errors: [
-    {text: "This is the error message."},
+    {text: "This is an error message."},
   ]
-} %>
+} do %>
+  <% content_for :sage_upload_card_instructions do %>
+    <p>Recommended dimensions or file size requirements</p>
+  <% end %>
+<% end %>