ClassName Props added (#63)

* Fixed: Fixed all the spelling mistake * Added: Alert and Accordion className Props * Added: Avatar and Avatar group className Props * Added: Badge className props added * Added: Breadcrumb ClassName props added * Added: Button and Button group className props added * Added: className Props in card * Added: Carousel className props added * Added: Checkbox and checkbox group className props added * Fixed: DatePicker Refector * Added: Areachart props added * Added: className props added in rest of the component * Fixed: Npm Error Fixed
StaticMania · Nov 17, 2023 · 68c7695 · 68c7695
1 parent b45df4b
commit 68c7695
Show file tree

Hide file tree

Showing 166 changed files with 1,964 additions and 1,674 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
   "css.customData": [".vscode/tailwind.json"],
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "cSpell.words": ["datepicker"]
 }
diff --git a/app/docs.css b/app/docs.css
@@ -77,133 +77,3 @@
 .tabActive {
   @apply border-b-metal-900 !text-metal-900;
 }
-
-/* Search */
-
-.DocSearch .DocSearch-Modal {
-  @apply fixed left-0 right-0 mx-auto mt-4 max-h-[calc(100vh-5rem)] w-full max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl md:static lg:mt-[4rem] lg:max-h-none lg:max-w-xl;
-}
-
-.DocSearch.DocSearch-Button {
-  @apply m-0  h-0 bg-transparent p-0 hover:ring-0 lg:h-11 lg:w-64 lg:rounded-md lg:bg-primary-25 lg:px-3 lg:py-[3px] lg:hover:bg-primary-50;
-}
-
-.DocSearch .DocSearch-Button-Placeholder {
-  @apply text-metal-500 text-body-4 font-normal;
-}
-
-.DocSearch .DocSearch-Search-Icon {
-  @apply h-5 w-5 text-transparent md:mr-1 lg:h-4  lg:w-4 !important;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236A7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
-}
-
-.dark .DocSearch .DocSearch-Search-Icon {
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%239BA3AF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
-}
-
-.DocSearch .DocSearch-Button-Keys {
-  @apply hidden;
-}
-
-.DocSearch .DocSearch-Button-Key:first-child {
-  @apply mr-px text-body-4;
-}
-
-.DocSearch .DocSearch-Button-Key {
-  @apply text-metal-500 m-0 w-auto bg-none pb-0 pt-1 text-body-6 font-normal shadow-none;
-}
-
-.DocSearch.DocSearch-Button .DocSearch-Search-Icon {
-  @apply text-metal-500;
-}
-
-.DocSearch .DocSearch-Hit-icon {
-  @apply hidden;
-}
-
-.DocSearch .DocSearch-Hits mark {
-  @apply text-metal-600 decoration-cyan-600 decoration-2 underline-offset-2;
-}
-
-.DocSearch .DocSearch-Hit[aria-selected='true'] a {
-  @apply bg-cyan-700;
-}
-
-.DocSearch .DocSearch-Hit-source {
-  @apply bg-white pb-1 text-gray-700;
-}
-
-.DocSearch.DocSearch-Container {
-  @apply fixed left-0 top-0 z-[200] min-h-screen max-w-[100vw] bg-gray-900 bg-opacity-50;
-}
-
-.DocSearch .DocSearch-Modal {
-  @apply shadow-none;
-}
-
-.DocSearch .DocSearch-SearchBar {
-  @apply border-metal-100 border-b p-0;
-}
-
-.DocSearch .DocSearch-Form {
-  @apply shadow-none;
-}
-
-.DocSearch .DocSearch-Input {
-  @apply text-metal-500 text-body-5 shadow-none focus:shadow-none focus:outline-none focus:ring-0;
-}
-
-.DocSearch .DocSearch-LoadingIndicator svg,
-.DocSearch .DocSearch-MagnifierLabel svg {
-  @apply h-4 w-4;
-}
-
-.DocSearch .DocSearch-Commands {
-  @apply hidden;
-}
-
-.DocSearch .DocSearch-Footer {
-  @apply border-metal-100 h-12 border-t shadow-none;
-}
-
-.DocSearch .DocSearch-Dropdown {
-  @apply bg-white;
-}
-
-.DocSearch .DocSearch-Hit {
-  @apply pb-2 shadow-none;
-}
-
-.DocSearch .DocSearch-Hit a {
-  @apply !bg-metal-100 rounded-md  shadow-none;
-}
-.DocSearch .DocSearch-Hit[aria-selected='true'] a {
-  @apply !bg-metal-900 rounded-md  shadow-none;
-}
-.DocSearch .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon,
-.DocSearch .DocSearch-Hit-action-button {
-  @apply hidden;
-}
-
-.DocSearch .DocSearch-Hit .DocSearch-Hit-action:last-child {
-  @apply h-5 w-5;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
-.DocSearch .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action:last-child {
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
-.DocSearch .DocSearch-Screen-Icon,
-.DocSearch .DocSearch-NoResults-Prefill-List,
-.DocSearch .DocSearch-Cancel {
-  @apply hidden;
-}
-
-.DocSearch .DocSearch-Title {
-  @apply text-metal-700 mb-1 text-body-3 font-normal;
-}
-
-.DocSearch .DocSearch-Reset {
-  @apply hover:text-black;
-}
diff --git a/app/docs/components/alert/alertApi.ts b/app/docs/components/alert/alertApi.ts
@@ -62,4 +62,25 @@ export const alertApiData = [
     propsType: ['left', 'right', 'top', 'bottom'],
     default: 'left',
   },
+  {
+    id: 10,
+    propsName: 'className',
+    propsDescription: 'Injects the class name',
+    propsType: 'string',
+    default: 'None',
+  },
+  {
+    id: 11,
+    propsName: 'titleStyle',
+    propsDescription: 'Injects the class name in title',
+    propsType: 'string',
+    default: 'None',
+  },
+  {
+    id: 12,
+    propsName: 'iconStyle',
+    propsDescription: 'Injects the class name in icon',
+    propsType: 'string',
+    default: 'None',
+  },
 ]
diff --git a/app/docs/components/areaChart/AreaChartApi.ts b/app/docs/components/areaChart/AreaChartApi.ts
@@ -69,4 +69,32 @@ export const areaChartAPIData = [
     propsDescription: 'Array of data points used to populate the chart.',
     default: 'Array',
   },
+  {
+    id: 11,
+    propsName: 'chartColor',
+    propsType: 'string',
+    propsDescription: 'Color for the main chart.',
+    default: '#1B4DFF',
+  },
+  {
+    id: 12,
+    propsName: 'secondaryChartColor',
+    propsType: 'string',
+    propsDescription: 'Color for the secondary chart',
+    default: '#1B4DFF',
+  },
+  {
+    id: 13,
+    propsName: 'areaStoke',
+    propsType: 'string',
+    propsDescription: 'Color for the area stroke of the chart.',
+    default: '#1B4DFF',
+  },
+  {
+    id: 14,
+    propsName: 'secondaryAreaStoke',
+    propsType: 'string',
+    propsDescription: 'Color for the secondary area stroke',
+    default: '#94ABFF',
+  },
 ]
diff --git a/app/docs/components/avatar/avatarApi.ts b/app/docs/components/avatar/avatarApi.ts
@@ -69,4 +69,18 @@ export const avatarApiData = [
     propsDescription: 'Total number of notifications',
     default: '99',
   },
+  {
+    id: 12,
+    propsName: 'className',
+    propsType: 'string',
+    propsDescription: 'Injects the class name in avatar',
+    default: 'None',
+  },
+  {
+    id: 13,
+    propsName: 'statusStyle',
+    propsType: 'string',
+    propsDescription: 'Injects the class name in avatar status',
+    default: 'None',
+  },
 ]
diff --git a/app/docs/components/badge/badgeApi.ts b/app/docs/components/badge/badgeApi.ts
@@ -48,6 +48,20 @@ export const badgeApiData = [
     propsDescription: 'Custom CSS class to be added to the badge.',
     default: 'None',
   },
+  {
+    id: 12,
+    propsName: 'dotStyle',
+    propsType: 'string',
+    propsDescription: 'Custom style to be added to the badge.',
+    default: 'None',
+  },
+  {
+    id: 13,
+    propsName: 'iconStyle',
+    propsType: 'string',
+    propsDescription: 'Custom style to be added to the badge icon.',
+    default: 'None',
+  },
   {
     id: 8,
     propsName: 'size',

diff --git a/app/docs/components/breadcrumb/breadcrumbApi.ts b/app/docs/components/breadcrumb/breadcrumbApi.ts
@@ -13,6 +13,20 @@ export const breadcrumbApiData = [
     propsDescription: 'Add a border around the breadcrumb container.',
     default: 'false',
   },
+  {
+    id: 3,
+    propsName: 'className',
+    propsType: 'string',
+    propsDescription: 'Custom class to be added to the breadcrumb.',
+    default: 'None',
+  },
+  {
+    id: 4,
+    propsName: 'listStyle',
+    propsType: 'string',
+    propsDescription: 'Custom class to be added to the breadcrumb list wrapper.',
+    default: 'None',
+  },
 ]
 
 export const breadcrumbItemApiData = [
@@ -44,4 +58,11 @@ export const breadcrumbItemApiData = [
     propsDescription: 'Disables the breadcrumb, making it uncheckable.',
     default: 'false',
   },
+  {
+    id: 5,
+    propsName: 'className',
+    propsType: 'string',
+    propsDescription: 'Custom class to be added to the breadcrumb item wrapper.',
+    default: 'None',
+  },
 ]
diff --git a/app/docs/components/button/buttonApi.ts b/app/docs/components/button/buttonApi.ts
@@ -65,13 +65,20 @@ export const buttonApiData = [
   },
   {
     id: 11,
-    propsName: 'customClass',
+    propsName: 'className',
     propsType: 'string',
     propsDescription: 'Custom CSS class to be added to the button.',
     default: 'None',
   },
   {
     id: 12,
+    propsName: 'notificationLabelStyle',
+    propsType: 'string',
+    propsDescription: 'notification Label Style',
+    default: 'None',
+  },
+  {
+    id: 13,
     propsName: 'onClick',
     propsType: '() => void',
     propsDescription: 'Function to be called when the button is clicked.',

diff --git a/app/docs/components/card/cardApi.ts b/app/docs/components/card/cardApi.ts
@@ -48,4 +48,11 @@ export const cardAPIData = [
     propsDescription: "Size of the card's background image.",
     default: 'lg',
   },
+  {
+    id: 8,
+    propsName: 'className',
+    propsType: 'string',
+    propsDescription: 'Custom class to be added to the card.',
+    default: 'None',
+  },
 ]
diff --git a/app/docs/components/card/variant/CardWithIcon.tsx b/app/docs/components/card/variant/CardWithIcon.tsx
@@ -8,7 +8,7 @@ const CardWithIcon = () => {
       {/* ===CARD ONE=== */}
       <Card className="max-w-xl p-6">
         <Card.Container className="flex items-start gap-3.5 md:gap-5">
-          <Card.Container className="bg-metal-50 flex items-center justify-center rounded-full p-2.5 md:p-4">
+          <Card.Container className="flex items-center justify-center rounded-full bg-metal-50 p-2.5 md:p-4">
             <ArchiveTray size={28} color="#3D4A5C" />
           </Card.Container>
           <Card.Container className="flex flex-col gap-2">
@@ -27,7 +27,7 @@ const CardWithIcon = () => {
       <Card className="max-w-xl p-6">
         <Card.Container className="flex gap-5">
           <Card.Container className="flex items-start gap-5">
-            <Card.Container className="bg-metal-50 flex items-center justify-start rounded-full p-2.5 md:p-4">
+            <Card.Container className="flex items-center justify-start rounded-full bg-metal-50 p-2.5 md:p-4">
               <ArchiveTray size={28} color="#3D4A5C" />
             </Card.Container>
             <Card.Container className="flex flex-col gap-2">
@@ -40,9 +40,9 @@ const CardWithIcon = () => {
           </Card.Container>
           <Card.Container className="hidden items-start md:flex">
             <Popover
-              customClass="!w-[20rem]"
+              className="!w-[20rem]"
               additionalContent={
-                <h2 className="text-metal-500 text-body-3 font-medium leading-6 tracking-[-0.3px]">
+                <h2 className="text-body-3 font-medium leading-6 tracking-[-0.3px] text-metal-500">
                   Keep Design System
                 </h2>
               }>
@@ -123,7 +123,7 @@ export const CardComponent = () => {
           </Card.Container>
           <Card.Container className="hidden items-start md:flex">
             <Popover
-              customClass="!w-[20rem]"
+              className="!w-[20rem]"
               additionalContent={
                 <h2 className="text-body-3 leading-6 tracking-[-0.3px] font-medium text-metal-500">
                   Keep Design System
@@ -151,10 +151,10 @@ export const CardComponent = () => {
           </Card.Description>
         </Card.Container>
         <Card.Container className="mt-3 flex items-center justify-center">
-          <Button type="outlinePrimary" customClass="!hidden md:!block">
+          <Button type="outlinePrimary" className="!hidden md:!block">
             Learn More
           </Button>
-          <Button type="outlinePrimary" size="sm" customClass="md:hidden block">
+          <Button type="outlinePrimary" size="sm" className="md:hidden block">
             Learn More
           </Button>
         </Card.Container>