@syscore/ui-library 1.11.2 → 1.12.0

package/client/ui/Icons.stories.tsx

@@ -29,29 +29,51 @@ import { UtilitySearch } from "../components/icons/UtilitySearch";
 import { UtilitySort } from "../components/icons/UtilitySort";
 import { UtilityText } from "../components/icons/UtilityText";
 import { UtilityTriangleInfo } from "../components/icons/UtilityTriangleInfo";
-import { SealWell } from "../components/icons/SealWell";
-import { SealIwbiMember } from "../components/icons/SealIwbiMember";
-import { SealWellCertification } from "../components/icons/SealWellCertification";
-import { SealWellCommunity } from "../components/icons/SealWellCommunity";
-import { SealWellResidence } from "../components/icons/SealWellResidence";
-import { SealWorksWithWell } from "../components/icons/SealWorksWithWell";
-import { SealEnterpriseProvider } from "../components/icons/ProviderSeals";
-import { SealPerformanceTestingProvider } from "../components/icons/ProviderSeals";
-import { SealSurveyProvider } from "../components/icons/ProviderSeals";
+import {
+  IWBILogo,
+  SealWell,
+  SealIwbiMember,
+  SealWellCertification,
+  SealWellCommunity,
+  SealWellResidence,
+  SealWorksWithWell,
+} from "../components/icons/seals";
+import {
+  SealEnterpriseProvider,
+  SealPerformanceTestingProvider,
+  SealSurveyProvider,
+} from "../components/icons/provider-seals";
 import {
   BadgeEnterpriseProvider,
   BadgePerformanceTestingProvider,
   BadgeProductProvider,
   BadgeSurveyProvider,
-} from "../components/icons/ProviderBadges";
-import { WatermarkMemberOrg } from "../components/icons/WatermarkMemberOrg";
-import { WaterMarkWWWProducts } from "../components/icons/WaterMarkWWWProducts";
-import { WaterMarkWellProjects } from "../components/icons/WaterMarkWellProjects";
+} from "../components/icons/provider-badges";
+import {
+  WatermarkMemberOrg,
+  WaterMarkWWWProducts,
+  WaterMarkWellProjects,
+} from "../components/icons/watermarks";
 import {
   SealProductProvider,
   SealProviders,
-} from "../components/icons/ProviderSeals";
+} from "../components/icons/provider-seals";
 import { UtilityTrash } from "@/components/icons/UtilityTrash";
+import {
+  BadgeCertificationBronze,
+  BadgeCertificationSilver,
+  BadgeCertificationGold,
+  BadgeCertificationPlatinum,
+  BadgeRatingHealthySafety,
+  BadgeRatingOperations,
+  BadgeRatingPerformance,
+  BadgeRatingEquity,
+  BadgeRatingCoworking,
+  BadgeRatingWorkforce,
+  BadgeRatingDesign,
+  BadgeRatingRealEstate,
+  BadgeRatingResidential,
+} from "../components/icons/achievement-badges";
 
 const meta = {
   title: "Review/Icons",
@@ -281,13 +303,14 @@ export const UtilityIcons: Story = {
   ),
 };
 
-export const MarkIcons: Story = {
+export const Seals: Story = {
   render: () => (
     <div className="space-y-8 p-8 bg-cyan-50">
       <div>
-        <h2 className="text-2xl font-bold mb-6">Mark Icons</h2>
+        <h2 className="text-2xl font-bold mb-6">Seals</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div className="flex flex-col items-center gap-4">
+            <IWBILogo />
             <SealWell />
             <SealIwbiMember />
             <SealWellCertification />
@@ -341,3 +364,69 @@ export const ProviderSeals: Story = {
     </div>
   ),
 };
+
+export const AchievementBadges: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <h2 className="text-2xl font-bold mb-6">Achievement Badges</h2>
+      <h3 className="text-lg font-semibold mb-4">Certification</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Bronze</span>
+          <BadgeCertificationBronze />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Silver</span>
+          <BadgeCertificationSilver />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Gold</span>
+          <BadgeCertificationGold />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Platinum</span>
+          <BadgeCertificationPlatinum />
+        </div>
+      </div>
+      <h3 className="text-lg font-semibold mb-4">Rating</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Healthy Safety</span>
+          <BadgeRatingHealthySafety />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Operations</span>
+          <BadgeRatingOperations />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Performance</span>
+          <BadgeRatingPerformance />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Equity</span>
+          <BadgeRatingEquity />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Coworking</span>
+          <BadgeRatingCoworking />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Workforce</span>
+          <BadgeRatingWorkforce />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Design</span>
+          <BadgeRatingDesign />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Real Estate</span>
+          <BadgeRatingRealEstate />
+        </div>
+        <div className="flex flex-col items-start gap-2">
+          <span className="text-sm font-medium">Residential</span>
+          <BadgeRatingResidential />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/PageHeader.stories.tsx

@@ -7,7 +7,7 @@ import {
   PageHeaderTitle,
   PageHeaderDescription,
 } from "../components/ui/page-header";
-import { BadgeCertificationBronze } from "../components/icons/AchievementBadges";
+import { BadgeCertificationBronze } from "../components/icons/achievement-badges";
 import { Tag } from "../components/ui/tag";
 import {
   Tooltip,