Merge branch 'feature/XW-122/grouped-select' of github.com:Conduction…

…NL/conduction-components into feature/XW-122/grouped-select .
ConductionNL · Nov 28, 2023 · 47aaa28 · 47aaa28
2 parents f533dc7 + acae9ab
commit 47aaa28
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.33: Added select options grouping logic.
+  - 2.2.33: 
+    - Added select options grouping logic.
+    - Refactored DownloadCard.
   - 2.2.32: Added more tokens to DownloadCard.
   - 2.2.31:
     - Added custom content to NotificationPopUp.

diff --git a/src/components/card/downloadCard/DownloadCard.module.css b/src/components/card/downloadCard/DownloadCard.module.css
@@ -1,4 +1,5 @@
 :root {
+  /* --conduction-download-card-background-color: #ffffff; */
   --conduction-download-card-title-color: #000000;
   --conduction-download-card-title-font-size: 20px;
   --conduction-download-card-title-font-weight: bold;
@@ -19,36 +20,44 @@
 }
 
 .container {
+  background-color: var(--conduction-download-card-background-color, var(--conduction-card-wrapper-background-color));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-width: var(--conduction-download-card-border-width);
-  border-style: var(--conduction-download-card-border-style);
-  border-color: var(--conduction-download-card-border-color);
-  border-radius: var(--conduction-download-card-border-radius);
+  border-width: var(--conduction-download-card-border-width, var(--conduction-card-wrapper-border-width));
+  border-style: var(--conduction-download-card-border-style, var(--conduction-card-wrapper-border-style));
+  border-color: var(--conduction-download-card-border-color, var(--conduction-card-wrapper-border-color));
+  border-radius: var(--conduction-download-card-border-radius, --conduction-card-wrapper-border-radius);
   padding-inline-start: var(--conduction-download-card-padding-inline-start);
   padding-inline-end: var(--conduction-download-card-padding-inline-end);
   padding-block-start: var(--conduction-download-card-padding-block-start);
   padding-block-end: var(--conduction-download-card-padding-block-end);
 }
 
 .title {
-  color: var(--conduction-download-card-title-color);
-  font-size: var(--conduction-download-card-title-font-size);
-  font-weight: var(--conduction-download-card-title-font-weight);
-  font-family: var(--conduction-download-card-title-font-family);
-  margin-inline-end: var(--conduction-download-card-title-margin-inline-end);
+  color: var(--conduction-download-card-title-color) !important;
+  font-size: var(--conduction-download-card-title-font-size) !important;
+  font-weight: var(--conduction-download-card-title-font-weight) !important;
+  font-family: var(--conduction-download-card-title-font-family) !important;
+  margin-inline-end: var(--conduction-download-card-title-margin-inline-end) !important;
+  word-break: break-word;
 }
 
 .content {
   display: flex;
   align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
 }
 
 .icon {
   margin-inline-end: var(--conduction-download-card-icon-gap);
 }
 
+.link {
+  display: inherit;
+}
+
 .link:hover {
   cursor: pointer;
 }
diff --git a/src/components/card/downloadCard/DownloadCard.tsx b/src/components/card/downloadCard/DownloadCard.tsx
@@ -74,18 +74,17 @@ export const DownloadCard = ({
 
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
+      <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
       <div className={styles.content}>
-        <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
-
         <Heading3 className={styles.title}>{label}</Heading3>
 
         <div>
           ({_.toUpper(type)}
-          {size && `, ${size} kb`})
+          {size && `, ${size}kB`})
         </div>
       </div>
 
-      <Link className={styles.link} href="" onClick={(e) => onClick(e)}>
+      <Link className={styles.link} href="" onClick={(e: any) => onClick(e)}>
         <FontAwesomeIcon className={styles.icon} icon={faDownload} /> Download
       </Link>
     </div>

diff --git a/src/components/notificationPopUp/NotificationPopUp.tsx b/src/components/notificationPopUp/NotificationPopUp.tsx
@@ -8,7 +8,7 @@ import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
 
 export interface NotificationPopUpProps {
   title: string;
-  description?: string | JSX.Element;
+  description?: string;
   customContent?: JSX.Element;
   isVisible: boolean;
   hide: () => void;