Ensure all Side Kick graphics are the correct versions

[simonchampion]

Bug Description

Incorrect graphic:

Correct graphics:

Emily Clarke3 days ago
@mariya Moeva spotted this one - the Side Kick graphics in the Figma file are not the latest version.

Please see this folder for all latest side kick graphics.

Asana link: https://app.asana.com/0/1200491083500938/1200750635859151

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Plugin Version [e.g. 22]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

1. The following three SVG graphics should be removed / replaced with new ones (see further below):
   • idea-hub-empty-draft-ideas.svg
   • idea-hub-empty-new-ideas.svg
   • idea-hub-empty-saved-ideas.svg
2. Instead, the following 4 new SVG graphics should be added (including one that we won't use just yet but should still be added to the codebase):
   • zero-state-blue.svg:

<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="175.51" cy="381.74" rx="104" ry="8.26" fill="#F1F3F4"/>
    <line x1="200" y1="10" x2="200" y2="41.42" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="105" y1="35.46" x2="120.71" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="105" x2="62.66" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="10" y1="200" x2="41.42" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="295" x2="62.66" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="295" x2="337.34" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="390" y1="200" x2="358.58" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="105" x2="337.34" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="295" y1="35.46" x2="279.29" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <path d="M201.85,238.9l61.65,74a20,20,0,0,1,1,24.29L234.5,380h32.13" fill="none" stroke="#1967D2" stroke-linejoin="round" stroke-width="9.27px"/>
    <polyline points="214.03 222.14 114.03 380 84.43 380" fill="none" stroke="#1967D2" stroke-linejoin="round" stroke-width="9.27px"/>
    <line x1="201.85" y1="238.9" x2="248.56" y2="295" fill="none" stroke="#185ABC" stroke-linejoin="round" stroke-width="9.27px"/>
    <line x1="214.03" y1="222.14" x2="167.87" y2="295" fill="none" stroke="#185ABC" stroke-linejoin="round" stroke-width="9.27px"/>
    <path d="M129.21,229.83l-11.7-42.66A50,50,0,0,1,136,133.78L191,93A10,10,0,0,0,195,85V61.71" fill="none" stroke="#4285F4" stroke-linejoin="round" stroke-width="9.27px"/>
    <path d="M270.79,229.83l11.7-42.66A50,50,0,0,0,264,133.78L209.05,93A10,10,0,0,1,205,85V61.71" fill="none" stroke="#4285F4" stroke-linejoin="round" stroke-width="9.27px"/>
    <path d="M199.87,289.41a81.45,81.45,0,0,0,81.58-81.32l-162.9-.26A81.45,81.45,0,0,0,199.87,289.41Z" fill="#1A73E8"/>
    <path d="M172.86,256.89c13.38,16.47,37.19,21.05,54.28,0" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="6.66px"/>
</svg>

* `zero-state-green.svg`:

<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <line x1="196.35" y1="200.32" x2="23.37" y2="236.49" fill="none" stroke="#34A853" stroke-miterlimit="10" stroke-width="9.27px"/>
    <line x1="376.63" y1="162.63" x2="196.35" y2="200.32" fill="none" stroke="#34A853" stroke-miterlimit="10" stroke-width="9.27px"/>
    <ellipse cx="219.02" cy="381.74" rx="152.56" ry="8.26" fill="#F1F3F4"/>
    <line x1="200" y1="10" x2="200" y2="41.42" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="105" y1="35.46" x2="120.71" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="105" x2="62.66" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="10" y1="200" x2="41.42" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="295" x2="62.66" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="295" x2="337.34" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="390" y1="200" x2="358.58" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="105" x2="337.34" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="295" y1="35.46" x2="279.29" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <path d="M164.12,380H134.34l61.57-116.61,49.14,31.23a30,30,0,0,1,9.53,40.94L227.48,380H256.9" fill="none" stroke="#188038" stroke-linejoin="round" stroke-width="9.27px"/>
    <line x1="195.91" y1="263.39" x2="220.48" y2="279" fill="none" stroke="#137333" stroke-linejoin="round" stroke-width="9.27px"/>
    <line x1="181.02" y1="291.59" x2="195.91" y2="263.39" fill="none" stroke="#137333" stroke-linejoin="round" stroke-width="9.27px"/>
    <polygon points="189.07 167.12 295.45 145.26 317.31 251.64 210.93 273.5 104.55 295.36 82.69 188.97 189.07 167.12" fill="#1E8E3E"/>
    <path d="M207.38,252.54c-18.86,6-41.33,1.94-56.48-13.21" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="6.62px"/>
</svg>

* `zero-state-red.svg`:

<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M128.91,163c-12.56,3.66-25.8,10.57-31.82,22.81-6.35,12.93-1.46,28.49,10.19,36.65" fill="none" stroke="#EE675C" stroke-linejoin="round" stroke-width="9.27px"/>
    <path d="M271.09,163c12.56,3.66,25.8,10.57,31.82,22.81,6.35,12.93,1.46,28.49-10.19,36.65" fill="none" stroke="#EE675C" stroke-linejoin="round" stroke-width="9.27px"/>
    <ellipse cx="200" cy="381.74" rx="79.51" ry="8.26" fill="#F1F3F4"/>
    <line x1="200" y1="10" x2="200" y2="41.42" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="105" y1="35.46" x2="120.71" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="105" x2="62.66" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="10" y1="200" x2="41.42" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="295" x2="62.66" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="295" x2="337.34" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="390" y1="200" x2="358.58" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="105" x2="337.34" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="295" y1="35.46" x2="279.29" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <path d="M216.76,201.8s-64.53,36.51-77.35,71.84c-4.72,13,3.53,27.36,17.27,29,11.31,1.39,28.4-3.14,53.06-24.33v31.36" fill="none" stroke="#C5221F" stroke-linejoin="round" stroke-width="9.27px"/>
    <path d="M216.76,201.8S181.55,221.72,158,246.36" fill="none" stroke="#B31412" stroke-linejoin="round" stroke-width="9.27px"/>
    <polyline points="218.98 201.47 218.98 380 248.5 380" fill="none" stroke="#C5221F" stroke-linejoin="round" stroke-width="9.27px"/>
    <line x1="218.98" y1="201.47" x2="218.98" y2="248.97" fill="none" stroke="#B31412" stroke-linejoin="round" stroke-width="9.27px"/>
    <circle cx="200" cy="162.34" r="81.45" fill="#D93025"/>
    <path d="M206.36,156.18c-18.33,10.42-42,6.07-50.25-19.59" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="6.62px"/>
    <path d="M164.26,137.72c-5.22-2.69-9-2.82-16.17-.91" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="6.62px"/>
    <path d="M107.28,222.48c28.36,19.87,76.07-7.28,88.72-35.17" fill="none" stroke="#EE675C" stroke-linejoin="round" stroke-width="9.27px"/>
    <path d="M292.72,222.48c-28.36,19.87-76.07-7.28-88.72-35.17" fill="none" stroke="#EE675C" stroke-linejoin="round" stroke-width="9.27px"/>
</svg>

* `zero-state-yellow.svg`:

<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M281.11,316.17a16,16,0,0,1-20.69,15.23" fill="none" stroke="#F29900" stroke-linejoin="round" stroke-width="9.4px"/>
    <path d="M118.86,316.17a16,16,0,0,0,20.69,15.23" fill="none" stroke="#F29900" stroke-linejoin="round" stroke-width="9.4px"/>
    <path d="M201,300.22H134.81a16,16,0,0,0-16,15.95h0" fill="none" stroke="#F29900" stroke-linejoin="round" stroke-width="9.4px"/>
    <path d="M198.06,300.22h67.1a16,16,0,0,1,15.95,15.95h0" fill="none" stroke="#F29900" stroke-linejoin="round" stroke-width="9.4px"/>
    <path d="M249.64,206.74c-1.42,24.59,12.3,59.39,35.05,71.31,15.3,8,34.85,1.6,37.66-16.54C324.46,247.84,316.82,233,308,223c0,0,14.73-2.8,14.73-21.22" fill="none" stroke="#FBBC04" stroke-linejoin="round" stroke-width="9.4px"/>
    <path d="M150.36,206.74c1.42,24.59-12.3,59.39-35.05,71.31-15.3,8-34.85,1.6-37.66-16.54C75.54,247.84,83.18,233,92,223c0,0-14.73-2.8-14.73-21.22" fill="none" stroke="#FBBC04" stroke-linejoin="round" stroke-width="9.4px"/>
    <rect x="145.23" y="76.68" width="109.53" height="219.7" fill="#F9AB00"/>
    <path d="M172.74,142.94c13.38,16.48,37.19,21.05,54.28,0" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="6.66px"/>
    <polyline points="260.42 331.4 118.86 286.37 108.46 314.45" fill="none" stroke="#F29900" stroke-linejoin="round" stroke-width="9.4px"/>
    <polyline points="139.55 331.4 281.11 286.37 291.51 314.45" fill="none" stroke="#F29900" stroke-linejoin="round" stroke-width="9.4px"/>
    <ellipse cx="200" cy="381.74" rx="79.51" ry="8.26" fill="#F1F3F4"/>
    <line x1="200" y1="10" x2="200" y2="41.42" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="105" y1="35.46" x2="120.71" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="105" x2="62.66" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="10" y1="200" x2="41.42" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="35.46" y1="295" x2="62.66" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="295" x2="337.34" y2="279.29" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="390" y1="200" x2="358.58" y2="200" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="364.54" y1="105" x2="337.34" y2="120.71" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
    <line x1="295" y1="35.46" x2="279.29" y2="62.66" fill="none" stroke="#E8EAED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6px"/>
</svg>

3. The Idea Hub widget should be updated to use the following graphics:
   • zero-state-yellow.svg instead of idea-hub-empty-new-ideas.svg
   • zero-state-blue.svg instead of idea-hub-empty-saved-ideas.svg
   • zero-state-red.svg instead of idea-hub-empty-draft-ideas.svg

Implementation Brief

• Remove the three SVGS mentioned in point 1 of the AC. These are found in assets/svg/
• Add the four SVGS mentioned in point 2 of the AC to assets/svg/. The names are also provided in point 2 of the AC
• Now fix the broken SVG imports (eslint will detect these). Point 3 of the AC says which deleted file to replace with which new file

These steps are done in this PR #3868

Test Coverage

Visual Regression Changes

QA Brief

Compare the three stories on storybook's develop branch with main

• https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-idea-hub-widgets-dashboardideaswidget--data-unavailable-new

• https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-idea-hub-widgets-dashboardideaswidget--data-unavailable-saved

• https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-idea-hub-widgets-dashboardideaswidget--data-unavailable-drafts

Check that develop shows the new SVG graphics included in the AC

Changelog entry

• Update Sidekick zero state graphics with proper files.

[eugene-manuilov]

@marrrmarrr @fhollis @eclarke1 which Site Kick graphics is the correct one and for which tab? We display the yellow creature when we have no new ideas, the blue one on the saved ideas tab when we have no saved ideas, and the red one on the drafts tab when we have no drafts.

[aaemnnosttv]

@danielgent would you please add an estimate?

[danielgent]

Done @aaemnnosttv !

[aaemnnosttv]

IB ✅

[aaemnnosttv]

@danielgent would you please add a QAB?

[danielgent]

Done @aaemnnosttv 👍

[wpdarren]

QA Update: ✅

• As per the QAB, I compared the Storybook URLs between develop and main. I also looked at the develop code on Github and checked that the correct SVG files were called.

zero-state-yellow.svg instead of idea-hub-empty-new-ideas.svg
zero-state-blue.svg instead of idea-hub-empty-saved-ideas.svg
zero-state-red.svg instead of idea-hub-empty-draft-ideas.svg