String Interpolation Refactoring Examples

example.erb

<% svgIconName = ''
case story.story_type
  when 'deliverable'
    svgIconName = 'icon-deliverable'
  when 'milestone'
    svgIconName = 'icon-milestone'
  when 'task'
    svgIconName = 'icon-task'
  when 'issue'
    svgIconName = 'icon-issue'
 end
%>

<div>
  Normal markup stuff...
  <span class='story-icon'>
  <%= svg_icon(svgIconName, 'icon-fill-'+story.story_type+' legacy-filled-icons-sqkd-18b901') %>
  </span>
</div>

story.coffee

styles = require './story.scss'

  templateHelpers: ->
    iconClass: @_iconClassForStoryType
      
  _iconClassForStoryType: (type) ->
    fillKlass = styles['legacy-filled-icons']
    switch type
      when 'task'
        iconClassName = "#{fillKlass} icon-fill-highlight"
      when 'deliverable'
        iconClassName = "#{fillKlass} icon-fill-action"
      when 'milestone'
        iconClassName = "#{fillKlass} icon-fill-primary"
      when 'issue'
        iconClassName = "#{fillKlass} icon-fill-caution"
      else
        return ''

    iconClassName

story.jst.eco

  <%= @svgIcon("icon-#{@story_type}", @iconClass(@story_type)) %>

story.scss

.legacy-filled-icons {
  composes: legacy-filled-icons-sqkd-18b901 from 'internal/base/utilities.scss';
}