@syscore/ui-library 1.15.3 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/components/icons/UtilityCompare.tsx +37 -35
- package/client/components/icons/UtilityFeedback.tsx +30 -0
- package/client/components/icons/UtilityRevisionsHide.tsx +1 -1
- package/client/components/icons/UtilityRevisionsShow.tsx +40 -0
- package/client/components/icons/imperative-badges/BadgeImperativePrimary.tsx +45 -0
- package/client/components/icons/imperative-badges/BadgeImperativeSecondary.tsx +53 -0
- package/client/components/icons/imperative-badges/index.tsx +2 -0
- package/client/components/ui/mobile-nav.tsx +278 -0
- package/client/components/ui/tooltip.tsx +39 -20
- package/client/global.css +104 -7
- package/client/ui/Icons.stories.tsx +52 -30
- package/client/ui/MobileNav.stories.tsx +317 -0
- package/client/ui/PageHeader.stories.tsx +82 -0
- package/client/ui/Tooltip.stories.tsx +38 -30
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +24 -0
- package/dist/index.es.js +449 -41
- package/package.json +1 -1
|
@@ -49,33 +49,20 @@ export const Default: Story = {
|
|
|
49
49
|
),
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
export const
|
|
52
|
+
export const Click: Story = {
|
|
53
53
|
render: () => (
|
|
54
54
|
<div className="p-16">
|
|
55
55
|
<Tooltip trigger="click">
|
|
56
|
-
<TooltipTrigger>
|
|
56
|
+
<TooltipTrigger>Click me</TooltipTrigger>
|
|
57
57
|
<TooltipContent className="w-[400px]">
|
|
58
|
-
<div className="space-y-
|
|
58
|
+
<div className="space-y-3">
|
|
59
59
|
<Text as="h1" variant="body-base" className="text-white">
|
|
60
|
-
|
|
60
|
+
Click Tooltip
|
|
61
61
|
</Text>
|
|
62
|
-
<div className="space-y-
|
|
63
|
-
<Text as="p" variant="body-small" className="text-white/90">
|
|
64
|
-
Body
|
|
65
|
-
</Text>
|
|
66
|
-
<Separator className="my-8" />
|
|
62
|
+
<div className="space-y-1">
|
|
67
63
|
<Text as="p" variant="body-small" className="text-white/90">
|
|
68
|
-
|
|
64
|
+
This tooltip opens on click and closes when clicking outside.
|
|
69
65
|
</Text>
|
|
70
|
-
|
|
71
|
-
<div className="flex flex-row gap-4 justify-start items-start">
|
|
72
|
-
<Button size="utility" variant="tooltip-primary">
|
|
73
|
-
Action
|
|
74
|
-
</Button>
|
|
75
|
-
</div>
|
|
76
|
-
<Button size="utility" variant="tooltip-secondary">
|
|
77
|
-
Action
|
|
78
|
-
</Button>
|
|
79
66
|
</div>
|
|
80
67
|
</div>
|
|
81
68
|
</TooltipContent>
|
|
@@ -84,24 +71,45 @@ export const WithContent: Story = {
|
|
|
84
71
|
),
|
|
85
72
|
};
|
|
86
73
|
|
|
87
|
-
export const
|
|
74
|
+
export const Simple: Story = {
|
|
88
75
|
render: () => (
|
|
89
76
|
<div className="p-16">
|
|
90
|
-
<Tooltip
|
|
91
|
-
<TooltipTrigger>
|
|
92
|
-
<TooltipContent
|
|
93
|
-
<
|
|
77
|
+
<Tooltip>
|
|
78
|
+
<TooltipTrigger>Hover (Simple)</TooltipTrigger>
|
|
79
|
+
<TooltipContent variant="simple">
|
|
80
|
+
<Text as="p" variant="body-small">
|
|
81
|
+
<span className="font-semibold">Required</span> for certification
|
|
82
|
+
</Text>
|
|
83
|
+
</TooltipContent>
|
|
84
|
+
</Tooltip>
|
|
85
|
+
</div>
|
|
86
|
+
),
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export const Variants: Story = {
|
|
90
|
+
render: () => (
|
|
91
|
+
<div className="p-16 flex gap-16">
|
|
92
|
+
<Tooltip>
|
|
93
|
+
<TooltipTrigger>Default</TooltipTrigger>
|
|
94
|
+
<TooltipContent className="w-[300px]">
|
|
95
|
+
<div className="space-y-2">
|
|
94
96
|
<Text as="h1" variant="body-base" className="text-white">
|
|
95
|
-
|
|
97
|
+
Default Variant
|
|
98
|
+
</Text>
|
|
99
|
+
<Text as="p" variant="body-small" className="text-white/90">
|
|
100
|
+
Dark background tooltip.
|
|
96
101
|
</Text>
|
|
97
|
-
<div className="space-y-1">
|
|
98
|
-
<Text as="p" variant="body-small" className="text-white/90">
|
|
99
|
-
This tooltip opens on click and closes when clicking outside.
|
|
100
|
-
</Text>
|
|
101
|
-
</div>
|
|
102
102
|
</div>
|
|
103
103
|
</TooltipContent>
|
|
104
104
|
</Tooltip>
|
|
105
|
+
<Tooltip>
|
|
106
|
+
<TooltipTrigger>Simple</TooltipTrigger>
|
|
107
|
+
<TooltipContent variant="simple">
|
|
108
|
+
<Text as="p" variant="body-base">
|
|
109
|
+
Required for certification
|
|
110
|
+
</Text>
|
|
111
|
+
</TooltipContent>
|
|
112
|
+
</Tooltip>
|
|
105
113
|
</div>
|
|
106
114
|
),
|
|
107
115
|
};
|