refactor: suffixElement instead of endElement

daangn · Dec 5, 2024 · cf1768c · cf1768c
1 parent 790d397
commit cf1768c
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 11 deletions.
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
@@ -106,10 +106,10 @@
   "inline-banner-text-only": "import { InlineBanner, InlineBannerLabel } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerTextOnly() {\n  return (\n    <InlineBanner variant=\"informativeWeak\">\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
   "inline-banner-warning-solid": "import { InlineBanner, InlineBannerLabel } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWarningSolid() {\n  return (\n    <InlineBanner variant=\"warningSolid\" icon={<IconExclamationmarkCircleFill />}>\n      <InlineBannerLabel>사업자 정보를 등록해주세요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
   "inline-banner-warning-weak": "import { InlineBanner, InlineBannerLabel } from \"seed-design/ui/inline-banner\";\nimport { IconExclamationmarkCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWarningWeak() {\n  return (\n    <InlineBanner variant=\"warningWeak\" icon={<IconExclamationmarkCircleFill />}>\n      <InlineBannerLabel>사업자 정보를 등록해주세요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
-  "inline-banner-with-all": "import { IconILowercaseSerifCircleFill } from \"@daangn/react-monochrome-icon\";\nimport {\n  InlineBanner,\n  InlineBannerLabel,\n  InlineBannerLink,\n  InlineBannerTitle,\n} from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithAll() {\n  return (\n    <InlineBanner\n      variant=\"informativeWeak\"\n      icon={<IconILowercaseSerifCircleFill />}\n      endElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}\n    >\n      <InlineBannerTitle>예약</InlineBannerTitle>\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
+  "inline-banner-with-all": "import { IconILowercaseSerifCircleFill } from \"@daangn/react-monochrome-icon\";\nimport {\n  InlineBanner,\n  InlineBannerLabel,\n  InlineBannerLink,\n  InlineBannerTitle,\n} from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithAll() {\n  return (\n    <InlineBanner\n      variant=\"informativeWeak\"\n      icon={<IconILowercaseSerifCircleFill />}\n      suffixElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}\n    >\n      <InlineBannerTitle>예약</InlineBannerTitle>\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
   "inline-banner-with-icon": "import { InlineBanner, InlineBannerLabel } from \"seed-design/ui/inline-banner\";\nimport { IconILowercaseSerifCircleFill } from \"@daangn/react-monochrome-icon\";\n\nexport default function InlineBannerWithIcon() {\n  return (\n    <InlineBanner variant=\"informativeWeak\" icon={<IconILowercaseSerifCircleFill />}>\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
-  "inline-banner-with-link-as-child": "import { InlineBanner, InlineBannerLabel, InlineBannerLink } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithLinkAsChild() {\n  return (\n    <InlineBanner\n      variant=\"informativeWeak\"\n      endElement={\n        <InlineBannerLink asChild>\n          <a href=\"https://www.daangn.com\" target=\"_blank\" rel=\"noreferrer\">\n            자세히 보기\n          </a>\n        </InlineBannerLink>\n      }\n    >\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
-  "inline-banner-with-link": "import { InlineBanner, InlineBannerLabel, InlineBannerLink } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithLink() {\n  return (\n    <InlineBanner\n      variant=\"informativeWeak\"\n      endElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}\n    >\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
+  "inline-banner-with-link-as-child": "import { InlineBanner, InlineBannerLabel, InlineBannerLink } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithLinkAsChild() {\n  return (\n    <InlineBanner\n      variant=\"informativeWeak\"\n      suffixElement={\n        <InlineBannerLink asChild>\n          <a href=\"https://www.daangn.com\" target=\"_blank\" rel=\"noreferrer\">\n            자세히 보기\n          </a>\n        </InlineBannerLink>\n      }\n    >\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
+  "inline-banner-with-link": "import { InlineBanner, InlineBannerLabel, InlineBannerLink } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithLink() {\n  return (\n    <InlineBanner\n      variant=\"informativeWeak\"\n      suffixElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}\n    >\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
   "inline-banner-with-title-text": "import { InlineBanner, InlineBannerLabel, InlineBannerTitle } from \"seed-design/ui/inline-banner\";\n\nexport default function InlineBannerWithTitleText() {\n  return (\n    <InlineBanner variant=\"informativeWeak\">\n      <InlineBannerTitle>예약</InlineBannerTitle>\n      <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>\n    </InlineBanner>\n  );\n}",
   "segmented-control-disabled": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n  return (\n    <SegmentedControl defaultValue=\"Hot\" disabled>\n      <Segment value=\"Hot\">Hot</Segment>\n      <Segment value=\"New\">New</Segment>\n    </SegmentedControl>\n  );\n}",
   "segmented-control-fixed-width": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlFixedWidth() {\n  return (\n    <SegmentedControl defaultValue=\"new\">\n      <Segment value=\"new\">New</Segment>\n      <Segment value=\"hot\">Hot</Segment>\n    </SegmentedControl>\n  );\n}",

diff --git a/docs/components/example/inline-banner-with-all.tsx b/docs/components/example/inline-banner-with-all.tsx
@@ -13,7 +13,7 @@ export default function InlineBannerWithAll() {
     <InlineBanner
       variant="informativeWeak"
       icon={<IconILowercaseSerifCircleFill />}
-      endElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}
+      suffixElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}
     >
       <InlineBannerTitle>예약</InlineBannerTitle>
       <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>

diff --git a/docs/components/example/inline-banner-with-link-as-child.tsx b/docs/components/example/inline-banner-with-link-as-child.tsx
@@ -6,7 +6,7 @@ export default function InlineBannerWithLinkAsChild() {
   return (
     <InlineBanner
       variant="informativeWeak"
-      endElement={
+      suffixElement={
         <InlineBannerLink asChild>
           <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
             자세히 보기

diff --git a/docs/components/example/inline-banner-with-link.tsx b/docs/components/example/inline-banner-with-link.tsx
@@ -6,7 +6,7 @@ export default function InlineBannerWithLink() {
   return (
     <InlineBanner
       variant="informativeWeak"
-      endElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}
+      suffixElement={<InlineBannerLink onClick={() => {}}>자세히 보기</InlineBannerLink>}
     >
       <InlineBannerLabel>다른 사람과 예약된 물품이 있어요.</InlineBannerLabel>
     </InlineBanner>

diff --git a/docs/public/__registry__/ui/inline-banner.json b/docs/public/__registry__/ui/inline-banner.json
@@ -7,7 +7,7 @@
     {
       "name": "inline-banner.tsx",
       "type": "ui",
-      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/inlineBanner.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  inlineBanner,\n  type InlineBannerVariantProps,\n} from \"@seed-design/recipe/inlineBanner\";\n\nconst InlineBannerContext = React.createContext<{\n  variantProps: InlineBannerVariantProps;\n} | null>(null);\n\nconst useInlineBannerContext = () => {\n  const context = React.useContext(InlineBannerContext);\n  if (!context)\n    throw new Error(\n      \"Parts of InlineBanner cannot be rendered outside the InlineBanner\",\n    );\n\n  return context;\n};\n\nexport const InlineBannerTitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...otherProps }, ref) => {\n  const {\n    variantProps: { variant },\n  } = useInlineBannerContext();\n  const classNames = inlineBanner({ variant });\n\n  return (\n    <>\n      <span\n        ref={ref}\n        className={clsx(classNames.title, className)}\n        {...otherProps}\n      >\n        {children}\n      </span>\n      <span\n        ref={ref}\n        className={clsx(classNames.spacer, className)}\n        {...otherProps}\n      >\n        {\" \"}\n      </span>\n    </>\n  );\n});\nInlineBannerTitle.displayName = \"InlineBannerTitle\";\n\nexport const InlineBannerLabel = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...otherProps }, ref) => {\n  const {\n    variantProps: { variant },\n  } = useInlineBannerContext();\n  const classNames = inlineBanner({ variant });\n\n  return (\n    <span\n      ref={ref}\n      className={clsx(classNames.label, className)}\n      {...otherProps}\n    >\n      {children}\n    </span>\n  );\n});\nInlineBannerLabel.displayName = \"InlineBannerLabel\";\n\nexport const InlineBannerLink = React.forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * @default false\n     */\n    asChild?: boolean;\n  }\n>(({ asChild = false, children, className, ...otherProps }, ref) => {\n  const {\n    variantProps: { variant },\n  } = useInlineBannerContext();\n  const classNames = inlineBanner({ variant });\n\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      className={clsx(classNames.linkLabel, className)}\n      {...otherProps}\n    >\n      {children}\n    </Comp>\n  );\n});\nInlineBannerLink.displayName = \"InlineBannerLink\";\n\nexport interface InlineBannerProps extends InlineBannerVariantProps {\n  icon?: React.ReactNode;\n  endElement?: React.ReactNode;\n}\n\ntype ReactInlineBannerProps = React.HTMLAttributes<HTMLDivElement> &\n  InlineBannerProps;\n\nexport const InlineBanner = React.forwardRef<\n  HTMLDivElement,\n  ReactInlineBannerProps\n>(\n  (\n    {\n      children,\n      className,\n      variant = \"neutralWeak\",\n      icon,\n      endElement,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = inlineBanner({ variant });\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...otherProps}\n      >\n        <InlineBannerContext.Provider value={{ variantProps: { variant } }}>\n          <div className={classNames.content}>\n            {icon && <Slot className={classNames.icon}>{icon}</Slot>}\n            <div>{children}</div>\n          </div>\n          {endElement}\n        </InlineBannerContext.Provider>\n      </div>\n    );\n  },\n);\nInlineBanner.displayName = \"InlineBanner\";\n"
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/inlineBanner.css\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  inlineBanner,\n  type InlineBannerVariantProps,\n} from \"@seed-design/recipe/inlineBanner\";\n\nconst InlineBannerContext = React.createContext<{\n  variantProps: InlineBannerVariantProps;\n} | null>(null);\n\nconst useInlineBannerContext = () => {\n  const context = React.useContext(InlineBannerContext);\n  if (!context)\n    throw new Error(\n      \"Parts of InlineBanner cannot be rendered outside the InlineBanner\",\n    );\n\n  return context;\n};\n\nexport const InlineBannerTitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...otherProps }, ref) => {\n  const {\n    variantProps: { variant },\n  } = useInlineBannerContext();\n  const classNames = inlineBanner({ variant });\n\n  return (\n    <>\n      <span\n        ref={ref}\n        className={clsx(classNames.title, className)}\n        {...otherProps}\n      >\n        {children}\n      </span>\n      <span\n        ref={ref}\n        className={clsx(classNames.spacer, className)}\n        {...otherProps}\n      >\n        {\" \"}\n      </span>\n    </>\n  );\n});\nInlineBannerTitle.displayName = \"InlineBannerTitle\";\n\nexport const InlineBannerLabel = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...otherProps }, ref) => {\n  const {\n    variantProps: { variant },\n  } = useInlineBannerContext();\n  const classNames = inlineBanner({ variant });\n\n  return (\n    <span\n      ref={ref}\n      className={clsx(classNames.label, className)}\n      {...otherProps}\n    >\n      {children}\n    </span>\n  );\n});\nInlineBannerLabel.displayName = \"InlineBannerLabel\";\n\nexport const InlineBannerLink = React.forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * @default false\n     */\n    asChild?: boolean;\n  }\n>(({ asChild = false, children, className, ...otherProps }, ref) => {\n  const {\n    variantProps: { variant },\n  } = useInlineBannerContext();\n  const classNames = inlineBanner({ variant });\n\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      className={clsx(classNames.linkLabel, className)}\n      {...otherProps}\n    >\n      {children}\n    </Comp>\n  );\n});\nInlineBannerLink.displayName = \"InlineBannerLink\";\n\nexport interface InlineBannerProps extends InlineBannerVariantProps {\n  icon?: React.ReactNode;\n  suffixElement?: React.ReactNode;\n}\n\ntype ReactInlineBannerProps = React.HTMLAttributes<HTMLDivElement> &\n  InlineBannerProps;\n\nexport const InlineBanner = React.forwardRef<\n  HTMLDivElement,\n  ReactInlineBannerProps\n>(\n  (\n    {\n      children,\n      className,\n      variant = \"neutralWeak\",\n      icon,\n      suffixElement,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const classNames = inlineBanner({ variant });\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...otherProps}\n      >\n        <InlineBannerContext.Provider value={{ variantProps: { variant } }}>\n          <div className={classNames.content}>\n            {icon && <Slot className={classNames.icon}>{icon}</Slot>}\n            <div>{children}</div>\n          </div>\n          {suffixElement}\n        </InlineBannerContext.Provider>\n      </div>\n    );\n  },\n);\nInlineBanner.displayName = \"InlineBanner\";\n"
     }
   ]
 }
diff --git a/docs/registry/ui/inline-banner.tsx b/docs/registry/ui/inline-banner.tsx
@@ -105,7 +105,7 @@ InlineBannerLink.displayName = "InlineBannerLink";
 
 export interface InlineBannerProps extends InlineBannerVariantProps {
   icon?: React.ReactNode;
-  endElement?: React.ReactNode;
+  suffixElement?: React.ReactNode;
 }
 
 type ReactInlineBannerProps = React.HTMLAttributes<HTMLDivElement> &
@@ -121,7 +121,7 @@ export const InlineBanner = React.forwardRef<
       className,
       variant = "neutralWeak",
       icon,
-      endElement,
+      suffixElement,
       ...otherProps
     },
     ref,
@@ -139,7 +139,7 @@ export const InlineBanner = React.forwardRef<
             {icon && <Slot className={classNames.icon}>{icon}</Slot>}
             <div>{children}</div>
           </div>
-          {endElement}
+          {suffixElement}
         </InlineBannerContext.Provider>
       </div>
     );

diff --git a/docs/stories/InlineBanner.stories.tsx b/docs/stories/InlineBanner.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { InlineBanner, InlineBannerLabel, InlineBannerTitle } from "seed-design/ui/inline-banner";
+import { InlineBanner, InlineBannerLabel } from "seed-design/ui/inline-banner";
 
 import { inlineBannerVariantMap } from "@seed-design/recipe/inlineBanner";
 import { VariantTable } from "./components/variant-table";