[NO_JIRA]Price marker style adjustment (#3084)

* price marker style adjustment * price marker style adjustment
Skyscanner · Nov 15, 2023 · 6b7def0 · 6b7def0
1 parent d48773b
commit 6b7def0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}
diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.scss b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.scss
@@ -25,6 +25,7 @@
   justify-content: center;
   align-items: center;
   border-radius: $bpk-border-radius-sm;
+  box-shadow: $bpk-box-shadow-sm;
   gap: bpk-spacing-md();
 
   &--dynamic {

diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.tsx b/packages/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.tsx
@@ -84,7 +84,7 @@ export const BpkPriceMarkerV2 = (props: Props) => {
       >
         <div className={classNames}>
           {icon}
-          <BpkText textStyle={TEXT_STYLES.label2}>{label}</BpkText>
+          <BpkText textStyle={TEXT_STYLES.label3}>{label}</BpkText>
         </div>
       </button>
     </BpkBasicMapMarker>

diff --git a/packages/bpk-component-map/src/BpkPriceMarkerV2/__snapshots__/BpkPriceMarker-test.tsx.snap b/packages/bpk-component-map/src/BpkPriceMarkerV2/__snapshots__/BpkPriceMarker-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`BpkPriceMarkerV2 should render correctly with "status" attribute as "pr
         class="bpk-price-marker bpk-price-marker-previous_selected"
       >
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>
@@ -38,7 +38,7 @@ exports[`BpkPriceMarkerV2 should render correctly with "status" attribute as "se
         class="bpk-price-marker bpk-price-marker-selected"
       >
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>
@@ -63,7 +63,7 @@ exports[`BpkPriceMarkerV2 should render correctly with a "buttonProps" attribute
         class="bpk-price-marker bpk-price-marker-unselected"
       >
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>
@@ -87,7 +87,7 @@ exports[`BpkPriceMarkerV2 should render correctly with a "className" attribute 1
         class="bpk-price-marker bpk-price-marker-unselected custom-class-1 custom-class-2"
       >
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>
@@ -111,7 +111,7 @@ exports[`BpkPriceMarkerV2 should render correctly with a "onClick" attribute 1`]
         class="bpk-price-marker bpk-price-marker--dynamic bpk-price-marker-unselected"
       >
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>
@@ -135,7 +135,7 @@ exports[`BpkPriceMarkerV2 should render properly 1`] = `
         class="bpk-price-marker bpk-price-marker-unselected"
       >
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>
@@ -162,7 +162,7 @@ exports[`BpkPriceMarkerV2 should render properly with a icon 1`] = `
           Icon
         </span>
         <span
-          class="bpk-text bpk-text--label-2"
+          class="bpk-text bpk-text--label-3"
         >
           £120
         </span>