Implement the figma design for the copy button element in the design system #2460
Description
Dependency
After Design adds the classes to the components in figma, review if this is still necessary.
Overview
We need to update the design system with new elements so developers can use them in the website.
Details
Create new classes to implement the design for the copy button. Afterwards, add the copy button information in the design system page as necessary.
The actual implementation of the button on the design page where the button is placed next to the scss code, with the JS functionality of copying the code, should be a separate issue that is dependent on this.
Click for screenshot
Action Items
- In _buttons.scss, create a new class called
.btn-lightunder the Button Colors section- This class should have the color properties based on the figma design
- This class' color properties should change on mouse hover
- In _buttons.scss, create a new class called
.btn-smunder Button Sizes section- This class should have the proper size and text properties based on the figma design
- Comment the above classes as necessary in the scss file
- Update the button.md data file with the proper title, description, and example for the newly created short button class under Sizes
- Create a new html file under
_includes/design-system-page/examples/buttonscalled size-small.html, which should be the referenced example property above
- Create a new html file under
- Update the button.md data file with the proper title, description, and example for the newly created light button class under Colors
- Create a new html file under
_includes/design-system-page/examples/buttonscalled color-light.html, which should be the referenced example property above
- Create a new html file under
- Ensure that the new data shows up in your local environment
Resources/Instructions
Original issue for design
button.md
_includes/design-system-page/examples/buttons directory
buttons.scss
Figma design