From 75e90b080f510786e8405a30196ab2d60c4670ca Mon Sep 17 00:00:00 2001
From: changmaru <doi.changmaru@pepabo.com>
Date: Tue, 21 Jan 2025 15:22:20 +0900
Subject: [PATCH] remove active state

---
 packages/callout/_mixins.scss                   |  8 --------
 packages/stories-web/src/components/Callout.tsx | 12 +++---------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss
index b968dd0..0f9cc74 100644
--- a/packages/callout/_mixins.scss
+++ b/packages/callout/_mixins.scss
@@ -40,14 +40,6 @@
     margin-block-end: 0;
   }
 
-  &:active,
-  &.--active {
-    visibility: visible;
-    opacity: 100%;
-    translate: 0 0;
-    transition: all 0.4s;
-  }
-
   ._trailing {
     margin-left: auto;
   }
diff --git a/packages/stories-web/src/components/Callout.tsx b/packages/stories-web/src/components/Callout.tsx
index 30594a0..e4e0f09 100644
--- a/packages/stories-web/src/components/Callout.tsx
+++ b/packages/stories-web/src/components/Callout.tsx
@@ -8,8 +8,7 @@ export interface Props {
     "informative" | "positive" | "negative" | "notice"
   >;
   size?: Extract<Size, 's' | 'm' | 'l'>;
-  isActive?: boolean;
-  hasCloseButton?: boolean;
+  hasButton?: boolean;
 }
 
 const Callout: FC<Props> = (props: Props) => {
@@ -17,18 +16,13 @@ const Callout: FC<Props> = (props: Props) => {
   const {
     color = "informative",
     size = "m",
-    isActive = true,
-    hasCloseButton = false,
+    hasButton = false,
     children
   } = props
 
   wrapperClasses.push(`-color-${color}`)
   wrapperClasses.push(`-size-${size}`)
 
-  if (hasCloseButton === false || isActive === true) {
-    wrapperClasses.push(`--active`)
-  }
-
   return (
     <div
       className={wrapperClasses.join(' ')}
@@ -38,7 +32,7 @@ const Callout: FC<Props> = (props: Props) => {
       <div className="_body">
         { children }
       </div>
-      { hasCloseButton && (
+      { hasButton && (
         <div className="_trailing">
           <button className="in-button -size-s -appearance-transparent">
             <div className="_body">閉じる</div>