feat(stepper-motor): add "arrow" attribute

Author: urish

src/stepper-motor-element.stories.ts

@@ -6,16 +6,23 @@ export default {
   component: 'wokwi-stepper-motor',
   argTypes: {
     angle: { control: { type: 'range', min: 0, max: 360 } },
+    arrow: { control: { type: 'color' } },
   },
   args: {
     angle: 0,
+    arrow: '',
     units: '',
     value: '',
   },
 };
 
-const Template = ({ angle, units, value }) =>
-  html`<wokwi-stepper-motor .angle=${angle} .units=${units} .value=${value}></wokwi-stepper-motor>`;
+const Template = ({ angle, arrow, units, value }) =>
+  html`<wokwi-stepper-motor
+    .angle=${angle}
+    .arrow=${arrow}
+    .units=${units}
+    .value=${value}
+  ></wokwi-stepper-motor>`;
 
 export const Default = Template.bind({});
 Default.args = {};
@@ -25,3 +32,6 @@ Rotated90.args = { angle: 90, units: 'degrees', value: '90' };
 
 export const Steps = Template.bind({});
 Steps.args = { angle: 180, value: '52,500', units: 'steps' };
+
+export const PurpleArrow = Template.bind({});
+PurpleArrow.args = { angle: 70, arrow: '#4a36ba' };

src/stepper-motor-element.ts

@@ -5,6 +5,7 @@ import { ElementPin } from '.';
 @customElement('wokwi-stepper-motor')
 export class StepperMotorElement extends LitElement {
   @property() angle = 0;
+  @property() arrow = '';
   @property() value = '';
   @property() units = '';
 
@@ -16,6 +17,8 @@ export class StepperMotorElement extends LitElement {
   ];
 
   render() {
+    const { arrow } = this;
+
     return html`
       <svg
         width="57mm"
@@ -122,6 +125,11 @@ export class StepperMotorElement extends LitElement {
               stroke="url(#linearGradient29501)"
               stroke-width=".41429"
             />
+            <path
+              transform="rotate(${this.angle}, 43.82, 111.2)"
+              fill="${arrow || 'transparent'}"
+              d="M48.706051,111.66821H38.189949L43.448,83.34119Z"
+            />
             <path
               transform="rotate(${this.angle}, 43.82, 111.2)"
               d="m40.056 106.86a5.3616 5.3616 0 0 0-1.9696 4.1497 5.3616 5.3616 0 0 0 5.3616 5.3616 5.3616 5.3616 0 0 0 5.3616-5.3616 5.3616 5.3616 0 0 0-1.9672-4.1497z"