diff --git a/docs/app/views/examples/components/icon/_props.html.erb b/docs/app/views/examples/components/icon/_props.html.erb index bc5185339f..61201212a4 100644 --- a/docs/app/views/examples/components/icon/_props.html.erb +++ b/docs/app/views/examples/components/icon/_props.html.erb @@ -36,7 +36,10 @@ <%= md('`icon`') %><%= sage_component SageBadge, { color: "published", value: "required" } %> - <%= md('Which icon to display. See Sage Icons under "Design."') %> + <%= md(' + Which icon to display. See Sage Icons under "Figma Design." + Note: `null` is also available to place an empty space icon + ') %> <%= md('`String` for desired icon.') %> <%= md('--') %> diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb index 7b653f9bde..66aa761cc1 100644 --- 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 index a1aaa3a268..fb468f34fd 100644 --- 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 index bd84791929..fdadb634e0 100644 --- 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 index 115c4fc353..2677e47838 100644 --- 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',