Merge pull request #50 from pepabo/callout-closebutton

Calloutコンポーネントに閉じるボタンを追加します
pepabo · Jan 22, 2025 · 76ac99c · 76ac99c
2 parents 1ea8bb5 + 02da045
commit 76ac99c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/callout/_mixins.scss b/packages/callout/_mixins.scss
@@ -35,6 +35,10 @@
     margin-block-end: 0;
   }
 
+  ._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
@@ -8,13 +8,15 @@ export interface Props {
     "informative" | "positive" | "negative" | "notice"
   >;
   size?: Extract<Size, 's' | 'm' | 'l'>;
+  hasButton?: boolean;
 }
 
 const Callout: FC<Props> = (props: Props) => {
   const wrapperClasses = ['in-callout']
   const {
     color = "informative",
     size = "m",
+    hasButton = false,
     children
   } = props
 
@@ -27,6 +29,13 @@ const Callout: FC<Props> = (props: Props) => {
       <div className="_body">
         { children }
       </div>
+      { hasButton && (
+        <div className="_trailing">
+          <button className="in-button -size-s -appearance-transparent">
+            <div className="_body">閉じる</div>
+          </button>
+        </div>
+      )}
     </div>
   )
 }