-
-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui,dashboard): Move InlineTip to UI package (#11462)
- Loading branch information
1 parent
63f0774
commit b53ea77
Showing
12 changed files
with
163 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@medusajs/ui": patch | ||
| "@medusajs/dashboard": patch | ||
| --- | ||
|
|
||
| feat(ui,dashboard): Move InlineTip to UI package |
60 changes: 0 additions & 60 deletions
60
packages/admin/dashboard/src/components/common/inline-tip/inline-tip.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
37 changes: 37 additions & 0 deletions
37
packages/design-system/ui/src/components/inline-tip/inline-tip.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { render, screen } from "@testing-library/react" | ||
| import * as React from "react" | ||
| import { InlineTip } from "./inline-tip" | ||
|
|
||
| describe("InlineTip", () => { | ||
| it("renders a InlineTip", () => { | ||
| render(<InlineTip label="Test">This is a test</InlineTip>) | ||
| expect(screen.getByText("This is a test")).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it("renders a InlineTip with a warning variant", () => { | ||
| render( | ||
| <InlineTip variant="warning" label="Test"> | ||
| This is a test | ||
| </InlineTip> | ||
| ) | ||
| expect(screen.getByText("This is a test")).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it("renders a InlineTip with an error variant", () => { | ||
| render( | ||
| <InlineTip variant="error" label="Test"> | ||
| This is a test | ||
| </InlineTip> | ||
| ) | ||
| expect(screen.getByText("This is a test")).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it("renders a InlineTip with a success variant", () => { | ||
| render( | ||
| <InlineTip variant="success" label="Test"> | ||
| This is a test | ||
| </InlineTip> | ||
| ) | ||
| expect(screen.getByText("This is a test")).toBeInTheDocument() | ||
| }) | ||
| }) |
58 changes: 58 additions & 0 deletions
58
packages/design-system/ui/src/components/inline-tip/inline-tip.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react" | ||
| import * as React from "react" | ||
| import { InlineTip } from "./inline-tip" | ||
|
|
||
| const meta: Meta<typeof InlineTip> = { | ||
| title: "Components/InlineTip", | ||
| component: InlineTip, | ||
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| render: (args) => { | ||
| return ( | ||
| <div className="flex max-w-md"> | ||
| <InlineTip {...args} /> | ||
| </div> | ||
| ) | ||
| }, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof InlineTip> | ||
|
|
||
| export const Info: Story = { | ||
| args: { | ||
| variant: "info", | ||
| label: "Info", | ||
| children: | ||
| "You can always install the storefront at a later point. Medusa is a headless backend, so it operates without a storefront by default. You can connect any storefront to it. The Next.js Starter storefront is a good option to use, but you can also build your own storefront later on.", | ||
| }, | ||
| } | ||
|
|
||
| export const Warning: Story = { | ||
| args: { | ||
| variant: "warning", | ||
| label: "Warning", | ||
| children: | ||
| "If you have multiple storage plugins configured, the last plugin declared in the medusa-config.js file will be used.", | ||
| }, | ||
| } | ||
|
|
||
| export const Error: Story = { | ||
| args: { | ||
| variant: "error", | ||
| label: "Don'ts", | ||
| children: | ||
| "Don’t use data models if you want to store simple key-value pairs related to a Medusa data model. Instead, use the metadata field that modles have, which is an object of custom key-value pairs.", | ||
| }, | ||
| } | ||
|
|
||
| export const Success: Story = { | ||
| args: { | ||
| variant: "success", | ||
| label: "Do's", | ||
| children: | ||
| "Use data models when you want to store data related to your customization in the database.", | ||
| }, | ||
| } |
47 changes: 47 additions & 0 deletions
47
packages/design-system/ui/src/components/inline-tip/inline-tip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { clx } from "@/utils/clx" | ||
| import * as React from "react" | ||
|
|
||
| interface InlineTipProps extends React.ComponentPropsWithoutRef<"div"> { | ||
| /** | ||
| * The label to display in the tip. | ||
| */ | ||
| label: string | ||
| /** | ||
| * The variant of the tip. | ||
| * @default "info" | ||
| */ | ||
| variant?: "info" | "warning" | "error" | "success" | ||
| } | ||
|
|
||
| /** | ||
| * This component is based on the `div` element and supports all of its props. | ||
| */ | ||
| export const InlineTip = React.forwardRef<HTMLDivElement, InlineTipProps>( | ||
| ({ variant = "info", label, className, children, ...props }, ref) => { | ||
| return ( | ||
| <div | ||
| ref={ref} | ||
| className={clx( | ||
| "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <div | ||
| role="presentation" | ||
| className={clx("bg-ui-tag-neutral-icon h-full w-1 rounded-full", { | ||
| "bg-ui-tag-orange-icon": variant === "warning", | ||
| "bg-ui-tag-red-icon": variant === "error", | ||
| "bg-ui-tag-green-icon": variant === "success", | ||
| })} | ||
| /> | ||
| <div className="text-pretty"> | ||
| <strong className="txt-small-plus text-ui-fg-base">{label}:</strong>{" "} | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| InlineTip.displayName = "InlineTip" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters