fleetcor-lwc 3.4.2 → 3.5.1

package/README.md

@@ -207,6 +207,18 @@ Add / update `lwc.config.json` file in your project
 | -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
 | icon           | string | `arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv, eye, sign, check` | -        |             |
 
+### Card
+
+```html
+<flt-card></flt-card>
+```
+
+#### Card slot
+
+| slot    | description                   |
+| ------- | ----------------------------- |
+| default | any html element can be there |
+
 ### Tooltip
 
 ```html
@@ -484,15 +496,33 @@ You can override them as you wish by global css variables as priority.
   --flt-input-border-color-active: #6b7280;
   --flt-input-border-color-success: #59eb9c;
   --flt-input-border-radius: 12px;
+  --flt-card-bgc: #fff;
+  --flt-card-padding-xs: 24px;
+  --flt-card-border-radius-xs: 20px;
+  --flt-card-box-shadow: (
+    0px 2px 3px 0px #0000004d,
+    0px 6px 10px 4px #00000026
+  );
+  --flt-card-border-radius-lg: 24px;
 }
 ```
 
 ## Release Notes:
 
+- v.3.5.1
+
+  - Bug fix with progress component
+
+- v.3.5.0
+
+  - Added new component `flt-card`
+
 - v.3.4.2
+
   - Bug fix with modal component
 
 - v.3.4.1
+
   - Bug fix with modal component
 
 - v.3.4.0

package/frontend/components/flt/card/__test__/card.test.js

@@ -0,0 +1,17 @@
+import { createElement } from 'lwc'
+
+import Card from 'flt/card'
+
+describe('flt-card', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('flt card base', () => {
+        const buttonDefault = createElement('flt-card', { is: Card })
+        document.body.appendChild(buttonDefault)
+        expect(buttonDefault.firstChild.classList).toContain('flt-card')
+    })
+})

package/frontend/components/flt/card/card.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <div class="flt-card"><slot></slot></div>
+</template>

package/frontend/components/flt/card/card.js

@@ -0,0 +1,9 @@
+import './card.scss'
+import { BaseElement } from 'fleetcor-lwc'
+
+/**
+ * @class Card
+ * @extends BaseElement
+ * @description Flt card component
+ */
+export default class Card extends BaseElement {}

package/frontend/components/flt/card/card.scss

@@ -0,0 +1,13 @@
+.flt-card {
+    background-color: var(--flt-card-bgc, #fff);
+    padding: var(--flt-card-padding-xs, 24px);
+    border-radius: var(--flt-card-border-radius-xs, 20px);
+    box-shadow: var(--flt-card-box-shadow, (0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026));
+}
+
+@media (min-width: 1280px) {
+    .flt-card {
+        padding: var(--flt-card-padding-lg, 24px);
+        border-radius: var(--flt-card-border-radius-lg, 24px);
+    }
+}

package/frontend/components/flt/progressStep/progressStep.html

@@ -1,7 +1,7 @@
 <template lwc:render-mode="light">
-    <div class="progress-step">
-        <div class="progress-step__number-wrapp">
-            <svg class="progress-step__circle" width="36px" height="36px" viewBox="0 0 36 36">
+    <div class="flt-progress-step">
+        <div class="flt-progress-step__number-wrapp">
+            <svg class="flt-progress-step__circle" width="36px" height="36px" viewBox="0 0 36 36">
                 <circle cx="18" cy="18" r="16" fill="transparent" stroke-width="4" />
                 <path
                     d={forFirstPathD}
@@ -15,8 +15,8 @@
                     stroke-linecap="round"
                     fill="transparent"></path>
             </svg>
-            <div class="progress-step__number-propotion">{current}/{total}</div>
+            <div class="flt-progress-step__number-propotion">{current}/{total}</div>
         </div>
-        <div class="progress-step__current-title">{title}</div>
+        <div class="flt-progress-step__current-title">{title}</div>
     </div>
 </template>

package/frontend/components/flt/progressStep/progressStep.scss

@@ -8,7 +8,7 @@ $FLT_STEP_POSITION_NUMBER_COLOR: var(--flt-step-position-number-color, #111827);
 $FLT_STEP_POSITION_CIRCLE_COLOR: var(--flt-step-position-circle-color, #0a7db8);
 $FLT_STEP_POSITION_CIRCLE_BACKGROUND: var(--flt-step-position-circle-background, #bbe6fb);
 
-.progress-step {
+.flt-progress-step {
     position: relative;
     display: flex;
     gap: 16px;
@@ -41,9 +41,8 @@ $FLT_STEP_POSITION_CIRCLE_BACKGROUND: var(--flt-step-position-circle-background,
 
     &__number-propotion {
         font-size: 12px;
-        line-height: 16;
+        line-height: 16px;
         font-weight: $FLT_STEP_POSITION_NUMBER_PROPOTION_FONT_WEIGHT;
-        letter-spacing: 1px;
         color: $FLT_STEP_POSITION_NUMBER_COLOR;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.4.2",
+    "version": "3.5.1",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -27,6 +27,7 @@
         "expose": [
             "flt/button",
             "flt/checkbox",
+            "flt/card",
             "flt/icon",
             "flt/inputText",
             "flt/inputEmail",