From 71d401ce1cf28e4d286c4d544a5f675dbaece42a Mon Sep 17 00:00:00 2001
From: changmaru <doi.changmaru@pepabo.com>
Date: Mon, 20 Jan 2025 19:39:00 +0900
Subject: [PATCH 1/4] add close button

---
 packages/callout/_mixins.scss                 | 17 ++++++++++++++++
 .../stories-web/src/components/Callout.tsx    | 20 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss
index 385e8df..b968dd0 100644
--- a/packages/callout/_mixins.scss
+++ b/packages/callout/_mixins.scss
@@ -12,6 +12,11 @@
   box-shadow: adapter.get-elevation-box-shadow(1);
   $options: map.merge(variables.$default-options, $options);
 
+  visibility: hidden;
+  opacity: 0%;
+  transition: all 0.4s;
+  translate: 0 10%;
+
   ._leading {
     padding-right: adapter.get-spacing-size(s);
     line-height: inherit;
@@ -35,6 +40,18 @@
     margin-block-end: 0;
   }
 
+  &:active,
+  &.--active {
+    visibility: visible;
+    opacity: 100%;
+    translate: 0 0;
+    transition: all 0.4s;
+  }
+
+  ._trailing {
+    margin-left: auto;
+  }
+
   @include -state-style(map.get($options, color));
   @include -size-style(map.get($options, size));
 
diff --git a/packages/stories-web/src/components/Callout.tsx b/packages/stories-web/src/components/Callout.tsx
index 626d8b6..30594a0 100644
--- a/packages/stories-web/src/components/Callout.tsx
+++ b/packages/stories-web/src/components/Callout.tsx
@@ -8,6 +8,8 @@ export interface Props {
     "informative" | "positive" | "negative" | "notice"
   >;
   size?: Extract<Size, 's' | 'm' | 'l'>;
+  isActive?: boolean;
+  hasCloseButton?: boolean;
 }
 
 const Callout: FC<Props> = (props: Props) => {
@@ -15,18 +17,34 @@ const Callout: FC<Props> = (props: Props) => {
   const {
     color = "informative",
     size = "m",
+    isActive = true,
+    hasCloseButton = false,
     children
   } = props
 
   wrapperClasses.push(`-color-${color}`)
   wrapperClasses.push(`-size-${size}`)
 
+  if (hasCloseButton === false || isActive === true) {
+    wrapperClasses.push(`--active`)
+  }
+
   return (
-    <div className={wrapperClasses.join(' ')}>
+    <div
+      className={wrapperClasses.join(' ')}
+      aria-live="polite"
+    >
       <span className="_leading in-icon"></span>
       <div className="_body">
         { children }
       </div>
+      { hasCloseButton && (
+        <div className="_trailing">
+          <button className="in-button -size-s -appearance-transparent">
+            <div className="_body">閉じる</div>
+          </button>
+        </div>
+      )}
     </div>
   )
 }

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 2/4] 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>

From ef80f0322fdecca1dfc74254de2d373eac963795 Mon Sep 17 00:00:00 2001
From: changmaru <doi.changmaru@pepabo.com>
Date: Tue, 21 Jan 2025 15:23:30 +0900
Subject: [PATCH 3/4] remove hidden style

---
 packages/callout/_mixins.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss
index 0f9cc74..4464d90 100644
--- a/packages/callout/_mixins.scss
+++ b/packages/callout/_mixins.scss
@@ -12,11 +12,6 @@
   box-shadow: adapter.get-elevation-box-shadow(1);
   $options: map.merge(variables.$default-options, $options);
 
-  visibility: hidden;
-  opacity: 0%;
-  transition: all 0.4s;
-  translate: 0 10%;
-
   ._leading {
     padding-right: adapter.get-spacing-size(s);
     line-height: inherit;

From 02da0455455bc2cd0669e1264174356cb48ceb1d Mon Sep 17 00:00:00 2001
From: changmaru <doi.changmaru@pepabo.com>
Date: Tue, 21 Jan 2025 17:52:38 +0900
Subject: [PATCH 4/4] remove aria-alive

---
 packages/stories-web/src/components/Callout.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/stories-web/src/components/Callout.tsx b/packages/stories-web/src/components/Callout.tsx
index e4e0f09..f4ee3c4 100644
--- a/packages/stories-web/src/components/Callout.tsx
+++ b/packages/stories-web/src/components/Callout.tsx
@@ -24,10 +24,7 @@ const Callout: FC<Props> = (props: Props) => {
   wrapperClasses.push(`-size-${size}`)
 
   return (
-    <div
-      className={wrapperClasses.join(' ')}
-      aria-live="polite"
-    >
+    <div className={wrapperClasses.join(' ')}>
       <span className="_leading in-icon"></span>
       <div className="_body">
         { children }