Merge pull request #1567 from Kajabi/SAGE-754/cg_add-null-icon

SAGE-754 - Icon: Add `"NULL"` icon for placeholder needs
Kajabi · Aug 24, 2022 · 9a04418 · 9a04418
2 parents 71a5a82 + f1fcdb2
commit 9a04418
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 1 deletion.
diff --git a/docs/app/views/examples/components/icon/_props.html.erb b/docs/app/views/examples/components/icon/_props.html.erb
@@ -36,7 +36,10 @@
 </tr>
 <tr>
   <td><%= md('`icon`') %><%= sage_component SageBadge, { color: "published", value: "required" } %></td>
-  <td><%= md('Which icon to display. See Sage Icons under "Design."') %></td>
+  <td><%= md('
+    Which icon to display. See Sage Icons under "Figma Design."
+    Note: `null` is also available to place an empty space icon
+  ') %></td>
   <td><%= md('`String` for desired icon.') %></td>
   <td><%= md('--') %></td>
 </tr>

diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb
@@ -250,6 +250,7 @@ def SageTokens.grid_templates
     "move-right",
     "multi-pay",
     "newsletter",
+    "null",
     "one-off-session",
     "one-time",
     "package",

diff --git a/packages/sage-assets/lib/stylesheets/tokens/_icon.scss b/packages/sage-assets/lib/stylesheets/tokens/_icon.scss
@@ -191,6 +191,7 @@ $sage-icons: (
   move-right: unicode(e99a),
   multi-pay: unicode(e99b),
   newsletter: unicode(e99c),
+  "null": "",
   one-off-session: unicode(e99d),
   one-time: unicode(e99e),
   package: unicode(e99f),

diff --git a/packages/sage-react/lib/Icon/Icon.story.jsx b/packages/sage-react/lib/Icon/Icon.story.jsx
@@ -59,3 +59,10 @@ CustomBackgroundSizeCircular.args = {
   backgroundHeight: '48px',
   size: Icon.SIZES.LG
 };
+export const NullIcon = Template.bind({});
+NullIcon.args = {
+  cardColor: 'draft',
+  circular: true,
+  backgroundHeight: '48px',
+  icon: Icon.ICONS.NULL,
+};
diff --git a/packages/sage-react/lib/configs/tokens/icons.js b/packages/sage-react/lib/configs/tokens/icons.js
@@ -151,6 +151,7 @@ export const TOKENS_ICONS = {
   MOVE_RIGHT: 'move-right',
   MULTI_PAY: 'multi-pay',
   NEWSLETTER: 'newsletter',
+  NULL: 'null',
   ONE_OFF_SESSION: 'one-off-session',
   ONE_TIME: 'one-time',
   PACKAGE: 'package',