asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore(dashboard,icons): Update icons and switch icon in CategoryTree (#10961)

Browse Source 
Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
This commit is contained in:
Kasper Fabricius Kristensen
2025-01-15 18:57:43 +01:00
committed by GitHub
parent d845adc68b
commit 2a25b4d95f
15 changed files with 293 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/weak-poems-run.md Normal file
View File

@@ -0,0 +1,6 @@
---
"@medusajs/icons": patch
"@medusajs/dashboard": patch
---
chore(icons,dashboard): Pull latest icons and update branch icon in category tree

4
packages/admin/dashboard/src/components/common/sortable-tree/tree-item.tsx
View File

@@ -4,7 +4,7 @@ import {
DotsSix,
FolderIllustration,
FolderOpenIllustration,
Swatch,
TagIllustration,
TriangleRightMini,
} from "@medusajs/icons"
import { Badge, clx, IconButton } from "@medusajs/ui"
@@ -136,7 +136,7 @@ const Icon = ({ childrenCount, collapsed, clone }: IconProps) => {
<FolderIllustration />
)
) : (
<Swatch className="text-ui-fg-muted" />
<TagIllustration />
)}
</div>
)

17
packages/design-system/icons/src/components/__tests__/house-star.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import HouseStar from "../house-star"
describe("HouseStar", () => {
it("should render the icon without errors", async () => {
render(<HouseStar data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/shield-check.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import ShieldCheck from "../shield-check"
describe("ShieldCheck", () => {
it("should render the icon without errors", async () => {
render(<ShieldCheck data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

17
packages/design-system/icons/src/components/__tests__/tag-illustration.spec.tsx Normal file
View File

@@ -0,0 +1,17 @@
import * as React from "react"
import { cleanup, render, screen } from "@testing-library/react"
import TagIllustration from "../tag-illustration"
describe("TagIllustration", () => {
it("should render the icon without errors", async () => {
render(<TagIllustration data-testid="icon" />)
const svgElement = screen.getByTestId("icon")
expect(svgElement).toBeInTheDocument()
cleanup()
})
})

33
packages/design-system/icons/src/components/house-star.tsx Normal file
View File

@@ -0,0 +1,33 @@
import * as React from "react"
import type { IconProps } from "../types"
const HouseStar = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M13.056 7.008v-1.29c0-.277-.13-.539-.351-.707L8.038 1.465a.89.89 0 0 0-1.076 0L2.296 5.01a.89.89 0 0 0-.352.708v6.448c0 .981.796 1.777 1.778 1.777H6.42"
/>
<path
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="m10.903 8.708.892 1.808 1.997.29-1.445 1.408.341 1.989-1.785-.939-1.786.939.341-1.989-1.444-1.408 1.996-.29z"
/>
</svg>
)
}
)
HouseStar.displayName = "HouseStar"
export default HouseStar

3
packages/design-system/icons/src/components/index.ts
View File

@@ -177,6 +177,7 @@ export { default as Hashtag } from "./hashtag"
export { default as HeartBroken } from "./heart-broken"
export { default as Heart } from "./heart"
export { default as History } from "./history"
export { default as HouseStar } from "./house-star"
export { default as House } from "./house"
export { default as InboxSolid } from "./inbox-solid"
export { default as InformationCircleSolid } from "./information-circle-solid"
@@ -253,6 +254,7 @@ export { default as ServerStackSolid } from "./server-stack-solid"
export { default as ServerStack } from "./server-stack"
export { default as Server } from "./server"
export { default as Share } from "./share"
export { default as ShieldCheck } from "./shield-check"
export { default as Shipbob } from "./shipbob"
export { default as ShoppingBag } from "./shopping-bag"
export { default as ShoppingCartSolid } from "./shopping-cart-solid"
@@ -287,6 +289,7 @@ export { default as SunSolid } from "./sun-solid"
export { default as Sun } from "./sun"
export { default as SwatchSolid } from "./swatch-solid"
export { default as Swatch } from "./swatch"
export { default as TagIllustration } from "./tag-illustration"
export { default as TagSolid } from "./tag-solid"
export { default as Tag } from "./tag"
export { default as Tailwind } from "./tailwind"

23
packages/design-system/icons/src/components/shield-check.tsx Normal file
View File

@@ -0,0 +1,23 @@
import * as React from "react"
import type { IconProps } from "../types"
const ShieldCheck = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<path
fill={color}
d="M12.64 2 7.974.507c-.31-.1-.638-.099-.948 0L2.36 2a1.55 1.55 0 0 0-1.081 1.482v5.796c0 3.118 4.396 4.781 5.742 5.217a1.56 1.56 0 0 0 .958 0c1.348-.435 5.744-2.098 5.744-5.216V3.482c0-.68-.434-1.275-1.082-1.482m-2.383 3.902-3.02 4a.67.67 0 0 1-.986.086l-1.43-1.333a.667.667 0 0 1 .908-.976l.89.829 2.574-3.41a.667.667 0 0 1 1.064.804"
/>
</svg>
)
}
)
ShieldCheck.displayName = "ShieldCheck"
export default ShieldCheck

13
packages/design-system/icons/src/components/square-blue-solid.tsx
View File

@@ -13,13 +13,14 @@ const SquareBlueSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#60A5FA" rx={2} />
<rect
width={7}
height={7}
x={4}
y={4}
width={7.5}
height={7.5}
x={3.75}
y={3.75}
stroke={color}
strokeOpacity={0.12}
rx={1.5}
strokeOpacity={0.24}
strokeWidth={0.5}
rx={1.75}
/>
</svg>
)

13
packages/design-system/icons/src/components/square-green-solid.tsx
View File

@@ -13,13 +13,14 @@ const SquareGreenSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#10B981" rx={2} />
<rect
width={7}
height={7}
x={4}
y={4}
width={7.5}
height={7.5}
x={3.75}
y={3.75}
stroke={color}
strokeOpacity={0.12}
rx={1.5}
strokeOpacity={0.24}
strokeWidth={0.5}
rx={1.75}
/>
</svg>
)

13
packages/design-system/icons/src/components/square-grey-solid.tsx
View File

@@ -13,13 +13,14 @@ const SquareGreySolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#A1A1AA" rx={2} />
<rect
width={7}
height={7}
x={4}
y={4}
width={7.5}
height={7.5}
x={3.75}
y={3.75}
stroke={color}
strokeOpacity={0.12}
rx={1.5}
strokeOpacity={0.24}
strokeWidth={0.5}
rx={1.75}
/>
</svg>
)

13
packages/design-system/icons/src/components/square-orange-solid.tsx
View File

@@ -13,13 +13,14 @@ const SquareOrangeSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#F97316" rx={2} />
<rect
width={7}
height={7}
x={4}
y={4}
width={7.5}
height={7.5}
x={3.75}
y={3.75}
stroke={color}
strokeOpacity={0.12}
rx={1.5}
strokeOpacity={0.24}
strokeWidth={0.5}
rx={1.75}
/>
</svg>
)

13
packages/design-system/icons/src/components/square-purple-solid.tsx
View File

@@ -13,13 +13,14 @@ const SquarePurpleSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#A78BFA" rx={2} />
<rect
width={7}
height={7}
x={4}
y={4}
width={7.5}
height={7.5}
x={3.75}
y={3.75}
stroke={color}
strokeOpacity={0.12}
rx={1.5}
strokeOpacity={0.24}
strokeWidth={0.5}
rx={1.75}
/>
</svg>
)

13
packages/design-system/icons/src/components/square-red-solid.tsx
View File

@@ -13,13 +13,14 @@ const SquareRedSolid = React.forwardRef<SVGSVGElement, IconProps>(
>
<rect width={8} height={8} x={3.5} y={3.5} fill="#F43F5E" rx={2} />
<rect
width={7}
height={7}
x={4}
y={4}
width={7.5}
height={7.5}
x={3.75}
y={3.75}
stroke={color}
strokeOpacity={0.12}
rx={1.5}
strokeOpacity={0.24}
strokeWidth={0.5}
rx={1.75}
/>
</svg>
)

133
packages/design-system/icons/src/components/tag-illustration.tsx Normal file
View File

@@ -0,0 +1,133 @@
import * as React from "react"
import type { IconProps } from "../types"
const TagIllustration = React.forwardRef<SVGSVGElement, IconProps>(
({ color = "currentColor", ...props }, ref) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={15}
height={15}
fill="none"
ref={ref}
{...props}
>
<g filter="url(#a)">
<path
fill="#818CF8"
d="M12.863 6.686 8.315 2.138A2.16 2.16 0 0 0 6.777 1.5H2.884c-.763 0-1.384.62-1.384 1.384v3.893c0 .581.226 1.127.638 1.538l4.548 4.548c.41.412.957.637 1.537.637s1.128-.226 1.538-.637l3.102-3.102c.412-.41.637-.957.637-1.538 0-.58-.226-1.127-.637-1.537"
/>
<path
fill="url(#b)"
fillOpacity={0.2}
d="M12.863 6.686 8.315 2.138A2.16 2.16 0 0 0 6.777 1.5H2.884c-.763 0-1.384.62-1.384 1.384v3.893c0 .581.226 1.127.638 1.538l4.548 4.548c.41.412.957.637 1.537.637s1.128-.226 1.538-.637l3.102-3.102c.412-.41.637-.957.637-1.538 0-.58-.226-1.127-.637-1.537"
/>
</g>
<path
stroke="#000"
strokeOpacity={0.15}
strokeWidth={0.5}
d="M6.863 12.687 2.313 8.137a1.9 1.9 0 0 1-.564-1.361V2.884c0-.625.509-1.134 1.134-1.134h3.893c.515 0 .997.2 1.361.564l4.549 4.548c.363.364.563.847.563 1.361 0 .515-.2.998-.563 1.361l-3.103 3.103a1.9 1.9 0 0 1-1.36.563c-.515 0-.998-.2-1.361-.563Z"
/>
<g filter="url(#c)">
<path
fill="#818CF8"
d="M5.257 6.246a.99.99 0 0 1-.989-.989.99.99 0 0 1 .989-.989.99.99 0 0 1 .989.99.99.99 0 0 1-.989.988m3.385 3.979a.59.59 0 0 1-.838 0L6.222 8.643a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84m1.582-1.582a.59.59 0 0 1-.838 0L7.804 7.06a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84"
/>
<path
fill="url(#d)"
fillOpacity={0.15}
d="M5.257 6.246a.99.99 0 0 1-.989-.989.99.99 0 0 1 .989-.989.99.99 0 0 1 .989.99.99.99 0 0 1-.989.988m3.385 3.979a.59.59 0 0 1-.838 0L6.222 8.643a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84m1.582-1.582a.59.59 0 0 1-.838 0L7.804 7.06a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84"
/>
</g>
<defs>
<linearGradient
id="b"
x1={7.5}
x2={7.5}
y1={1.5}
y2={13.5}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
<linearGradient
id="d"
x1={7.333}
x2={7.333}
y1={4.268}
y2={10.399}
gradientUnits="userSpaceOnUse"
>
<stop />
<stop offset={1} stopOpacity={0} />
</linearGradient>
<filter
id="a"
width={12}
height={12}
x={1.5}
y={1.5}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dy={-0.5} />
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
<feBlend in2="shape" result="effect1_innerShadow_9148_1663" />
</filter>
<filter
id="c"
width={6.13}
height={6.13}
x={4.268}
y={4.268}
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dy={-0.5} />
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
<feBlend in2="shape" result="effect1_innerShadow_9148_1663" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset dy={0.5} />
<feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0" />
<feBlend
in2="effect1_innerShadow_9148_1663"
result="effect2_innerShadow_9148_1663"
/>
</filter>
</defs>
</svg>
)
}
)
TagIllustration.displayName = "TagIllustration"
export default TagIllustration