copy button added

[narasimha-1511]

Description

This PR fixes #5517

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[l5io]

🚀 Preview for commit d3e9ae5 at: https://66386ba8f6a8fe76cda63d22--layer5.netlify.app

[narasimha-1511]

Updated With the Button

[vishalvivekm]

Adding as an agenda item for websites call.
https://docs.google.com/document/d/1XczAHXVe2FIWPqiF57ospJ43zw5cZQ7ui8mn39v5EvA/edit

[lakshz]

@Rexford74 Should we use a copy icon in place of Copy text. And, a success tick icon in place Copied! text.

[Rexford74]

Those are fine suggestions @lakshz and I think they can actually fly.
Also, if you check out the design, you will see that this has already been accounted for. And I think something that was missing in your initial implementation @lakshz is the addition of the code sandbox, restart, and more icons in the same row with the 'Show Code' checkbox. Take a look at the prototype so that you can get a glimpse of the desired behaviour.
@narasimha-1511 and @lakshz please you are welcome to offer your thoughts on the issues that I just raised. If it is possible to have it anything like in the current implementation, please let me know. If not, you can offer your thoughts so that we can find a solution to any blockers you might have in rounding up this issue as soon as possible.

[lakshz]

@Rexford74 Got it. The "Show code" section needs more features, in addition to the Copy button.
However, I would clear some things from the prototype:

• The code sandbox should be dynamic or static? I mean, is the code editable, and should the above buttons change based on the below code?

• Do we need 3 buttons together in one sandbox? Or is it just for reference?

[narasimha-1511]

@lakshz I think 3 buttons are not Nedded !

[lakshz]

@narasimha-1511 Let's stick to adding a copy button in this PR. We can re-iterate on the other features (if they are needed) moving forward.

I've left some comments, for you to solve.

[ritiksaxena124]

Hey @narasimha-1511 , let's discuss this on today's website meeting at 12:00 pm GMT / 5:30 PM IST. I am adding this as an agenda item. Please join if you are available during the meet.

[l5io]

🚀 Preview for commit 9b66ec2 at: https://6641c7241107b276d1a0c159--layer5.netlify.app

[l5io]

🚀 Preview for commit 775d278 at: https://664ee88be3d958cbacaf54f7--layer5.netlify.app

[l5io]

🚀 Preview for commit 3ae961e at: https://664ef04482a7a5c1e72c673b--layer5.netlify.app

[sudhanshutech]

@narasimha-1511 whats the status here, will you share your progress in upcoming website meet?

[narasimha-1511]

Yeah for sure @sudhanshutech

[leecalcote]

@narasimha-1511 what is that status?

[narasimha-1511]

@leecalcote Almost Done , Need a Review

[narasimha-1511]

Recording.2024-05-30.155053.mp4

[leecalcote]

@lakshz we're ready for a final round of review here.

[lakshz]

@narasimha-1511 Instead of showing a toast on copying the code, replace the copy icon with a success tick icon.
This is because we are not using react-toastify anywhere before.

[narasimha-1511]

@lakshz Sure ! , i will make the following changes

[Rexford74]

@Rexford74 can you provide him the correct svg
Which SVG are you referring to? The copy icon, or is there another one that you have in mind?

[narasimha-1511]

Hey @sudhanshutech ,
i have made all the changes
i will commit them if i can get the correct svg
@Rexford74

[narasimha-1511]

@Rexford74 Got it. The "Show code" section needs more features, in addition to the Copy button. However, I would clear some things from the prototype:

* The code sandbox should be dynamic or static? I mean, is the code editable, and should the above buttons change based on the below code? * Do we need 3 buttons together in one sandbox? Or is it just for reference?

Hey @sudhanshutech i have taken the copy svg from the prototype here!

[Rexford74]

I'm guessing this is the copy icon that you mean. Let me know if you'd need anything else.

[sudhanshutech]

@narasimha-1511 any progress? Did you update the changes as we reviewed in call?

[narasimha-1511]

@sudhanshutech The changes have been made! Apologies for the delay.

[l5io]

🚀 Preview for commit 6b22c78 at: https://66892d26445f1d4074a148e1--layer5.netlify.app

[sudhanshutech]

@narasimha-1511 follow this design to add the copy button , design can be found here: figma)

[narasimha-1511]

Hey @sudhanshutech I have taken the copy icon from the prototype itself that you have given

[narasimha-1511]

The Figma link is this right ? https://www.figma.com/proto/ekm0Hh6M25bSKpP5BcIJom/Sistent-Design-System?page-id=&type=design&node-id=2256-13195&viewport=-8220%2C358%2C0.42&t=f4Bixr8xno32NCYO-1&scaling=scale-down-width

the above given link did not work

[sudhanshutech]

its opening fine for me. You can directly go through layer5 figma and under project sistent

[l5io]

🚀 Preview for commit 2a8895e at: https://668f7b61a59060f07d227a5f--layer5.netlify.app

[sudhanshutech]

@narasimha-1511 please follow these points.

1. Directly import copy icon from sistent , you will get that icon inside sistent repo. Check which icon is the suitable, if i am remeber it should be with name cloneicon. Check this
   To be specific:

import <Icon> from '@layer5/sistent`

2. Place the copy where its been design in figma, a screenshot i already sent you above and given the figma link.

[narasimha-1511]

@sudhanshutech i have done what you said one last doubt

in the image i have placed the icon at the green spot do you want me to place it at the red spot also as you have given in the screenshot?

also the icon i used from the layer5/sisent the Cloneicon as you said is not lookig good i have tried to set the height and width still i think the icon is not same as in the figma provided

[narasimha-1511]

@sudhanshutech i have done what you said one last doubt

in the image i have placed the icon at the green spot do you want me to place it at the red spot also as you have given in the screenshot?

also the icon i used from the layer5/sisent the Cloneicon as you said is not lookig good i have tried to set the height and width still i think the icon is not same as in the figma provided

Hey @sudhanshutech please review this

[leecalcote]

Merge conflict.

[l5io]

🚀 Preview for commit 2cd0ff5 at: https://669ce81ae2b43959e5078281--layer5.netlify.app

[narasimha-1511]

Megre Conflict Resolved @leecalcote @sudhanshutech @Ashparshp

[Ashparshp]

@narasimha-1511 Thanks for the update!

[sudhanshutech]

@narasimha-1511 this copy will not be needed now because the code block is updated to use by default copy functionality. Please do take a look

[narasimha-1511]

sure @sudhanshutech
I think the copy button that is present now needs to be updated to a icon
also there is a gap betwwen the show code and the code block?

[sudhanshutech]

Make sense. Please do create issue for those.