Fixed: Fix Circle percentage overlap issue (attempt 3) (#1291)

* style: Move rotate transform and transform origin to the circle's svg level

* story(AutoPlay): Add `AutoPlay` story

frontend/src/components/Circle/Circle.scss

@@ -12,13 +12,12 @@
 
     >svg {
         @extend .circleIntro;
+
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
     }
 
     .circle-percentage {
         transition: stroke-dashoffset 0.1s linear;
-
-        // 102.5px is the radius of the circle
-        // translateX because the circle is rotated -90deg
-        transform: rotate(-90deg) translateX(calc(-102.5px * 2));
     }
 }

frontend/src/stories/AutoPlay.stories.tsx

@@ -0,0 +1,56 @@
+import AutoPlay from '../components/Playback/Autoplay';
+
+export default {
+    title: 'Components/AutoPlay',
+    component: AutoPlay,
+    argTypes: {
+        instruction: { control: 'text' },
+        showAnimation: { control: 'boolean' },
+        playSection: { action: 'playSection' },
+        startedPlaying: { action: 'startedPlaying' },
+        finishedPlaying: { action: 'finishedPlaying' },
+        responseTime: { control: 'number' },
+        className: { control: 'text' },
+    },
+    decorators: [
+        (Story) => (
+            <div className='aha__trial' style={{ padding: '3rem', background: '#333' }}>
+                <Story />
+            </div>
+        ),
+    ],
+} as Meta;
+
+const Template: Story = (args) => <AutoPlay {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    instruction: 'Listen to the audio',
+    showAnimation: true,
+    responseTime: 5000,
+    className: '',
+};
+
+export const WithoutAnimation = Template.bind({});
+WithoutAnimation.args = {
+    ...Default.args,
+    showAnimation: false,
+};
+
+export const LongResponseTime = Template.bind({});
+LongResponseTime.args = {
+    ...Default.args,
+    responseTime: 10000,
+};
+
+export const CustomInstruction = Template.bind({});
+CustomInstruction.args = {
+    ...Default.args,
+    instruction: 'This is a custom instruction for the AutoPlay component',
+};
+
+export const WithCustomClassName = Template.bind({});
+WithCustomClassName.args = {
+    ...Default.args,
+    className: 'custom-class',
+};