figmaに合わせてinfoをinformationに変更

uzabase · Dec 28, 2024 · 2e33e48 · 2e33e48
1 parent 65b3e9b
commit 2e33e48
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/components/notificationMessage/sp-notification-message.ts b/src/components/notificationMessage/sp-notification-message.ts
@@ -5,9 +5,9 @@ import foundationStyle from "../foundation.css?inline" assert { type: "css" };
 // @ts-ignore
 import notificationMessageStyle from "./notification-message.css?inline" assert { type: "css" };
 
-export type Type = "error" | "warning" | "info" | "success";
+export type Type = "error" | "warning" | "information" | "success";
 
-const types: Type[] = ["error", "warning", "info", "success"];
+const types: Type[] = ["error", "warning", "information", "success"];
 
 function isValidType(value: string): value is Type {
   return types.some((type) => type === value);
@@ -16,14 +16,15 @@ function isValidType(value: string): value is Type {
 const typeClasses: Record<Type, string> = {
   error: "type__error",
   warning: "type__warning",
-  info: "type__info",
+  information: "type__information",
   success: "type__success",
 };
 
 export const iconPaths: Record<Type, string> = {
   error:
     '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.58 18.8574L11.3416 3.99902H12.6459L21.4075 18.8574L20.7554 19.999H3.23212L2.58 18.8574ZM11.2 9.5V14.5H12.8V9.5H11.2ZM11.2 16V17.5H12.8V16H11.2Z" fill="#CA3232"></path>',
-  info: '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM11.2 7.71997V9.49997H12.8V7.71997H11.2ZM10.5 16.2V16.72H13.5V16.2L12.8 16V11H10.5V11.8L11.2 12V16L10.5 16.2Z" fill="#3978BF"></path>',
+  information:
+    '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM11.2 7.71997V9.49997H12.8V7.71997H11.2ZM10.5 16.2V16.72H13.5V16.2L12.8 16V11H10.5V11.8L11.2 12V16L10.5 16.2Z" fill="#3978BF"></path>',
   success:
     '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 10.5303L14.4697 9.46967L11 12.9393L9.53033 11.4697L8.46967 12.5303L10.4697 14.5303L11 15.0607L11.5303 14.5303L15.5303 10.5303Z" fill="#1A7037"></path>',
   warning:
@@ -36,7 +37,7 @@ styles.replaceSync(
 );
 
 export class SpNotificationMessage extends HTMLElement {
-  #type: Type = "info";
+  #type: Type = "information";
 
   #baseElement = document.createElement("div");
   #iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -61,7 +62,7 @@ export class SpNotificationMessage extends HTMLElement {
     const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, styles];
 
-    this.type = "info";
+    this.type = "information";
   }
 
   connectedCallback() {
@@ -93,7 +94,7 @@ export class SpNotificationMessage extends HTMLElement {
           this.type = newValue;
         } else {
           console.warn(`${newValue}は無効なtype属性です。`);
-          this.type = "info";
+          this.type = "information";
         }
     }
   }

diff --git a/stories/notificationMessage/sp-notification-message.story.ts b/stories/notificationMessage/sp-notification-message.story.ts
@@ -17,7 +17,9 @@ export const Basic: Story = {
       <sp-notification-message type="error"
         >Hello World</sp-notification-message
       >
-      <sp-notification-message type="info">Hello World</sp-notification-message>
+      <sp-notification-message type="information"
+        >Hello World</sp-notification-message
+      >
       <sp-notification-message type="success"
         >Hello World</sp-notification-message
       >

diff --git a/tests/notificationMessage/sp-notification-message.test.ts b/tests/notificationMessage/sp-notification-message.test.ts
@@ -23,7 +23,7 @@ function queryContentByText(text: string) {
 
 describe("sp-notification-message", () => {
   describe("type属性", () => {
-    test.each<[Type]>([["error"], ["warning"], ["info"], ["success"]])(
+    test.each<[Type]>([["error"], ["warning"], ["information"], ["success"]])(
       "type属性に%sを設定すると、その値に対応するアイコンが表示される",
       async (type) => {
         document.body.innerHTML = `<sp-notification-message type='${type}'></sp-notification-message>`;
@@ -39,11 +39,11 @@ describe("sp-notification-message", () => {
 
       const icon = getIcon();
 
-      expect(icon.innerHTML).toBe(iconPaths["info"]);
+      expect(icon.innerHTML).toBe(iconPaths["information"]);
     });
 
     test("type属性を更新すると、新しいアイコンが設定される", async () => {
-      document.body.innerHTML = `<sp-notification-message type='info'></sp-notification-message>`;
+      document.body.innerHTML = `<sp-notification-message type='information'></sp-notification-message>`;
 
       const spNotificationMessage = getSpNotificationMessage();
       const icon = getIcon();
@@ -58,7 +58,7 @@ describe("sp-notification-message", () => {
 
       const icon = getIcon();
 
-      expect(icon.innerHTML).toBe(iconPaths["info"]);
+      expect(icon.innerHTML).toBe(iconPaths["information"]);
     });
   });