chore(ui): update card component to match new designs (ENG-58155)

__tests__/components/__snapshots__/Card.test.js.snap

@@ -1,77 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Card Rendering Render the Card component with default props 1`] = `
-<a
+<Layer
   className="Card"
 >
-  <span
-    className="Card__title"
+  <a
+    className="Card__link"
   >
-    Add Host record
-  </span>
-</a>
+    <div>
+      <span
+        className="Card__title"
+      >
+        Add Host record
+      </span>
+    </div>
+    <div
+      className="Card__iconContainer"
+    >
+      <ArrowRight
+        className="Card__arrowRight"
+        size={20}
+      />
+    </div>
+  </a>
+</Layer>
 `;
 
 exports[`Card Rendering Render the Card component with props 1`] = `
-<a
+<Layer
   className="Card test_cn"
-  href="#"
 >
-  <span
-    className="Card__title"
-  >
-    Add Host Record
-  </span>
-  <span
-    className="Card__description"
+  <a
+    className="Card__link"
+    href="#"
   >
-    Add a host record on BAM
-  </span>
-  <span>
-    <span
-      className="Card__pathTitle"
-    >
-       
-      Path
-       
-    </span>
-    <span
-      className="Card__path"
+    <div>
+      <span
+        className="Card__title"
+      >
+        Add Host Record
+      </span>
+      <span
+        className="Card__description"
+      >
+        Add a host record on BAM
+      </span>
+    </div>
+    <div
+      className="Card__iconContainer"
     >
-      Host Record
-    </span>
-  </span>
-</a>
+      <ArrowRight
+        className="Card__arrowRight"
+        size={20}
+      />
+    </div>
+  </a>
+</Layer>
 `;
 
 exports[`Card Rendering Render the Card component with pseudo translated text 1`] = `
-<a
+<Layer
   className="Card test_cn"
-  href="#"
 >
-  <span
-    className="Card__title"
+  <a
+    className="Card__link"
+    href="#"
   >
-    Add Host Record
-  </span>
-  <span
-    className="Card__description"
-  >
-    Add a host record on BAM
-  </span>
-  <span>
-    <span
-      className="Card__pathTitle"
-    >
-       
-      Pââth
-       
-    </span>
-    <span
-      className="Card__path"
+    <div>
+      <span
+        className="Card__title"
+      >
+        Add Host Record
+      </span>
+      <span
+        className="Card__description"
+      >
+        Add a host record on BAM
+      </span>
+    </div>
+    <div
+      className="Card__iconContainer"
     >
-      Host Record
-    </span>
-  </span>
-</a>
+      <ArrowRight
+        className="Card__arrowRight"
+        size={20}
+      />
+    </div>
+  </a>
+</Layer>
 `;

src/components/Card.js

@@ -20,40 +20,30 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 import PropTypes from 'prop-types';
-import { t } from '@bluecateng/l10n.macro';
+import { Layer } from '@bluecateng/pelagos';
+import { ArrowRight } from '@carbon/icons-react';
 import './Card.less';
 
 /**
  * Card component presents a rectangle box layout
  * with some data to fill it up with.
  */
 
-const Card = ({ title, href, description, path, className }) => {
-    function getFullPath() {
-        let fullPath = '';
-        path.forEach((pathSection, index) => {
-            if (index === path.length - 1) {
-                fullPath = fullPath.concat(String(pathSection));
-            } else {
-                fullPath = fullPath.concat(String(pathSection), '/');
-            }
-        });
-        return fullPath;
-    }
-
+const Card = ({ title, href, description, className }) => {
     return (
-        <a className={`Card${className ? ' ' + className : ''}`} href={href}>
-            <span className='Card__title'>{title}</span>
-            {description ? (
-                <span className='Card__description'>{description}</span>
-            ) : null}
-            {path ? (
-                <span>
-                    <span className='Card__pathTitle'> {t`Path`} </span>
-                    <span className='Card__path'>{getFullPath()}</span>
-                </span>
-            ) : null}
-        </a>
+        <Layer className={`Card${className ? ' ' + className : ''}`}>
+            <a className='Card__link' href={href}>
+                <div>
+                    <span className='Card__title'>{title}</span>
+                    {description && (
+                        <span className='Card__description'>{description}</span>
+                    )}
+                </div>
+                <div className='Card__iconContainer'>
+                    <ArrowRight size={20} className='Card__arrowRight' />
+                </div>
+            </a>
+        </Layer>
     );
 };
 
@@ -67,9 +57,6 @@ Card.propTypes = {
     /** Description inside in the card */
     description: PropTypes.string,
 
-    /** Group to which the card belongs to */
-    path: PropTypes.arrayOf(PropTypes.string),
-
     /** The component class name(s). */
     className: PropTypes.string,
 };

src/components/Card.less

@@ -21,63 +21,52 @@
 @import '~@bluecateng/pelagos/less/fonts';
 
 .Card {
-    display: flex;
-    flex-direction: column;
-    gap: @sp-08;
-    background-color: var(--layer-01);
-    width: 272px;
-    height: 150px;
     padding: @sp-16;
-    text-decoration: none;
+    background-color: var(--layer);
+
+    &__link {
+        text-decoration: none;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-between;
+    }
 
     &__title {
-        color: var(--link-primary);
-        font-size: @sp-16;
+        @heading-01();
         line-height: @sp-32;
         width: 184px;
         text-align: left;
-        text-decoration: underline;
+        text-decoration: none;
+        margin-bottom: @sp-08;
+        color: var(--text-primary);
     }
 
     &__description {
         display: -webkit-box;
-        -webkit-line-clamp: 2;
+        -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
-        color: var(--text-placeholder);
-        font-size: @sp-12;
-        line-height: @sp-16;
-        max-width: 235px;
+        @body-01();
         text-align: left;
         text-overflow: ellipsis;
         overflow: hidden;
+        margin-bottom: @sp-16;
+        color: var(--text-primary);
     }
 
-    &:hover {
-        background-color: var(--layer-hover-01);
-        outline: 1.5px solid var(--border-interactive);
-        box-shadow: 0 0 5px @sp-02 var(--border-subtle-selected-01);
-        text-decoration: none;
-        .Card__title {
-            color: var(--link-primary-hover);
-        }
-    }
-    &:active {
-        background-color: var(--layer-active-01);
+    &__arrowRight {
+        color: var(--icon-interactive);
     }
 
-    &__path {
-        display: block;
-        color: var(--text-primary);
-        font-size: @sp-16;
-        line-height: @sp-24;
-        text-align: left;
+    &__iconContainer {
+        display: flex;
+        align-items: end;
     }
 
-    &__pathTitle {
-        display: block;
-        color: var(--text-secondary);
-        font-size: @sp-12;
-        line-height: @sp-16;
-        text-align: left;
+    &:hover {
+        background-color: var(--layer-hover);
+    }
+    &:active {
+        background-color: var(--layer-active);
     }
 }

src/l10n/en.po

@@ -81,8 +81,8 @@ msgid "Notification"
 msgstr ""
 
 #: 519e
-msgid "Path"
-msgstr ""
+#~ msgid "Path"
+#~ msgstr ""
 
 #: efc0
 #~ msgid "Save"

src/l10n/zz.po

@@ -81,8 +81,8 @@ msgid "Notification"
 msgstr "Nôôtîîfîîççââtîîôôn"
 
 #: 519e
-msgid "Path"
-msgstr "Pââth"
+#~ msgid "Path"
+#~ msgstr "Pââth"
 
 #: efc0
 #~ msgid "Save"

stories/Card.stories.js

@@ -24,13 +24,19 @@ import { Card } from '/src';
 export default {
     title: 'Components/Card',
     component: Card,
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: '350px', maxHeight: '350px' }}>
+                <Story />
+            </div>
+        ),
+    ],
 };
 
 export const Normal = {
     args: {
         title: 'Add user',
         href: '#',
-        description: 'API to add an Object',
-        path: ['parent', 'API'],
+        description: 'Add an user to the application',
     },
 };