Refactor Button component: remove showLabelWithLoading prop, update test descriptions, and enhance shimmer effect for loading state

Author: elizabetdev

src/components/Button/Button.stories.ts

@@ -19,6 +19,5 @@ export const Playground: Story = {
     align: "center",
     fillWidth: false,
     loading: false,
-    showLabelWithLoading: false,
   },
 };

src/components/Button/Button.test.tsx

@@ -24,7 +24,7 @@ describe("Button", () => {
     expect(counter).toEqual(1);
   });
 
-  it("given a loading button, it should render the loading icon", async () => {
+  it("given a loading button, it should render the loading animation", async () => {
     const { getAllByTestId } = renderButton({
       label: "Button",
       loading: true,
@@ -34,19 +34,7 @@ describe("Button", () => {
     expect(loadingButton.length).toEqual(1);
   });
 
-  it("given a loading button and showLabelWithLoading, it should render the loading icon and the label", async () => {
-    const { getAllByTestId, getByTestId } = renderButton({
-      label: "Button",
-      loading: true,
-      showLabelWithLoading: true,
-    });
-
-    const loadingButton = getAllByTestId("click-ui-loading-icon");
-    expect(loadingButton.length).toEqual(1);
-    expect(getByTestId("click-ui-loading-icon-wrapper")).toHaveTextContent("Button");
-  });
-
-  it("given a non-loading button, it should not render the loading icon", async () => {
+  it("given a non-loading button, it should not render the loading animation", async () => {
     const { queryAllByTestId } = renderButton({
       label: "Button",
       loading: false,

src/components/Button/Button.tsx

@@ -71,10 +71,10 @@ export const Button = ({
 
 const shimmer = keyframes`
   0% {
-    background-position: -200px 0;
+    background-position: 100% 0;
   }
   100% {
-    background-position: 200px 0;
+    background-position: -100% 0;
   }
 `;
 
@@ -108,27 +108,26 @@ const StyledButton = styled(BaseButton)<{
     right: 0;
     bottom: 0;
     pointer-events: none;
-    background-size: 200px 100%;
+    background-size: 200% 100%;
     opacity: 0;
   }
 
   ${({ $loading, $styleType, theme }) => {
     if (!$loading) return "";
 
-    // Create dynamic shimmer gradient using the button's background colors
-    const bgDefault = "rgba(255, 255, 255, 0)";
     const bgHover = theme.click.button.basic.color[$styleType].background.hover;
 
     const shimmerGradient = `linear-gradient(
       90deg,
       ${bgHover} 0%,
-      ${theme.global.color.background.default} 50%,
+      transparent 50%,
       ${bgHover} 100%
     )`;
 
     return css`
       &::before {
-        background: ${shimmerGradient} 0% 0% / 50% 100% no-repeat;
+        background: ${shimmerGradient};
+        background-size: 200% 100%;
         animation: ${shimmer} 1.5s ease-in-out infinite;
         opacity: 1;
       }