@duffel/components 3.1.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/.storybook/__snapshots__/Storyshots.test.js.snap +14636 -1384
  2. package/package.json +1 -1
  3. package/react-dist/custom-elements.js +2 -2
  4. package/react-dist/custom-elements.js.map +2 -2
  5. package/react-dist/index.js +19 -19
  6. package/react-dist/index.js.map +2 -2
  7. package/src/components/DuffelAncillaries/DuffelAncillaries.tsx +2 -1
  8. package/src/components/DuffelAncillaries/bags/BaggageSelectionModalBodyPassenger.tsx +2 -2
  9. package/src/components/DuffelAncillaries/bags/BaggageSelectionModalHeader.tsx +3 -2
  10. package/src/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalFooter.tsx +1 -1
  11. package/src/components/DuffelAncillaries/seats/SeatSelectionModalHeader.tsx +3 -2
  12. package/src/components/DuffelPayments/DuffelPayments.tsx +1 -0
  13. package/src/fixtures/offers/off_1.json +1 -10
  14. package/src/stories/Button.stories.tsx +1 -0
  15. package/src/stories/DuffelAncillaries.stories.tsx +19 -1
  16. package/src/styles/components/Card.css +3 -3
  17. package/src/styles/components/CfarSelectionModal.css +1 -1
  18. package/src/styles/components/Legend.css +10 -6
  19. package/src/styles/components/LoadingState.css +8 -2
  20. package/src/styles/components/PassengerSelect.css +8 -2
  21. package/src/styles/components/Seat.css +9 -7
  22. package/src/styles/components/Tabs.css +5 -2
package/src/components/DuffelAncillaries/DuffelAncillaries.tsx CHANGED
@@ -266,7 +266,8 @@ export const DuffelAncillaries: React.FC<DuffelAncillariesProps> = (props) => {
266
266
  }),
267
267
  ...(props.styles?.accentColor &&
268
268
  hasHighLuminance(props.styles.accentColor) && {
269
- "--SECONDARY": "black",
269
+ "--SECONDARY": "var(--GREY-900)",
270
+ "--TERTIARY": "var(--GREY-400)",
270
271
  }),
271
272
  ...(props.styles?.fontFamily && {
272
273
  "--FONT-FAMILY": props.styles.fontFamily,
package/src/components/DuffelAncillaries/bags/BaggageSelectionModalBodyPassenger.tsx CHANGED
@@ -38,9 +38,9 @@ export const BaggageSelectionModalBodyPassenger: React.FC<
38
38
  <h3 style={{ margin: 0 }} className="p1--semibold">
39
39
  {passengerName}
40
40
  </h3>
41
- {hasIncludedBaggage && (
41
+ {hasIncludedBaggage ? (
42
42
  <IncludedBaggageBanner includedBaggage={includedBaggage} />
43
- )}
43
+ ) : null}
44
44
 
45
45
  <div style={{ display: "flex", rowGap: "8px", flexDirection: "column" }}>
46
46
  {passengerServicesForSegment.map((availableService) => (
package/src/components/DuffelAncillaries/bags/BaggageSelectionModalHeader.tsx CHANGED
@@ -64,7 +64,8 @@ const InactiveSegment: React.FC<{
64
64
  height: "4px",
65
65
  padding: "0",
66
66
  borderRadius: "4px",
67
- backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
67
+ backgroundColor:
68
+ "var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)))",
68
69
  transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
69
70
  ...style,
70
71
  }}
@@ -75,7 +76,7 @@ const ActiveSegment = () => (
75
76
  <InactiveSegment
76
77
  onClick={undefined}
77
78
  style={{
78
- backgroundColor: "rgb(var(--ACCENT))",
79
+ backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
79
80
  }}
80
81
  />
81
82
  );
package/src/components/DuffelAncillaries/cancel_for_any_reason/CfarSelectionModalFooter.tsx CHANGED
@@ -67,7 +67,7 @@ const ProtectedTripBanner: React.FC = () => (
67
67
  <Icon
68
68
  size={20}
69
69
  name="shield_with_moon"
70
- style={{ fill: "rgb(var(--ACCENT))" }}
70
+ style={{ fill: "var(--SECONDARY, rgb(var(--ACCENT)))" }}
71
71
  />
72
72
  Your trip is protected
73
73
  </div>
package/src/components/DuffelAncillaries/seats/SeatSelectionModalHeader.tsx CHANGED
@@ -79,7 +79,8 @@ const InactiveSegment: React.FC<{
79
79
  height: "4px",
80
80
  padding: "0",
81
81
  borderRadius: "4px",
82
- backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
82
+ backgroundColor:
83
+ "var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)))",
83
84
  transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
84
85
  ...style,
85
86
  }}
@@ -90,7 +91,7 @@ const ActiveSegment = () => (
90
91
  <InactiveSegment
91
92
  onClick={undefined}
92
93
  style={{
93
- backgroundColor: "rgb(var(--ACCENT))",
94
+ backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
94
95
  }}
95
96
  />
96
97
  );
package/src/components/DuffelPayments/DuffelPayments.tsx CHANGED
@@ -196,6 +196,7 @@ export const DuffelPayments: React.FC<DuffelPaymentsProps> = (props) => {
196
196
  ...(props.styles?.accentColor &&
197
197
  hasHighLuminance(props.styles.accentColor) && {
198
198
  "--SECONDARY": "black",
199
+ "--TERTIARY": "grey",
199
200
  }),
200
201
  ...(props.styles?.fontFamily && {
201
202
  "--FONT-FAMILY": props.styles.fontFamily,
package/src/fixtures/offers/off_1.json CHANGED
@@ -33,16 +33,7 @@
33
33
  "fare_basis_code": "Y20LGTN2",
34
34
  "cabin_class_marketing_name": "Economy",
35
35
  "cabin_class": "economy",
36
- "baggages": [
37
- {
38
- "type": "checked",
39
- "quantity": 1
40
- },
41
- {
42
- "type": "carry_on",
43
- "quantity": 1
44
- }
45
- ]
36
+ "baggages": []
46
37
  }
47
38
  ],
48
39
  "origin_terminal": "2",
package/src/stories/Button.stories.tsx CHANGED
@@ -76,6 +76,7 @@ const WhiteAccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
76
76
  {
77
77
  "--ACCENT": "255, 255, 255",
78
78
  "--SECONDARY": "black",
79
+ "--TERTIARY": "grey",
79
80
  } as any
80
81
  }
81
82
  >
package/src/stories/DuffelAncillaries.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
1
+ import type { Meta, StoryFn, StoryObj } from "@storybook/react";
2
2
  import { DuffelAncillaries } from "../components/DuffelAncillaries/DuffelAncillaries";
3
3
  import mockPassengers from "../fixtures/passengers/mock_passengers";
4
4
  import { DuffelAncillariesPropsWithOffersAndSeatMaps } from "../types/DuffelAncillariesProps";
@@ -146,3 +146,21 @@ export const MarkupUsingPriceFormattersWithCustomCurrency: DuffelAncillariesStor
146
146
  },
147
147
  },
148
148
  };
149
+
150
+ export const WithAccentColorSet: StoryFn<
151
+ DuffelAncillariesPropsWithOffersAndSeatMaps
152
+ > = () => (
153
+ <DuffelAncillaries
154
+ {...defaultProps}
155
+ styles={{ accentColor: "29, 78, 216" }}
156
+ />
157
+ );
158
+
159
+ export const WithWhiteAccentColorSet: StoryFn<
160
+ DuffelAncillariesPropsWithOffersAndSeatMaps
161
+ > = () => (
162
+ <DuffelAncillaries
163
+ {...defaultProps}
164
+ styles={{ accentColor: "255, 255, 255" }}
165
+ />
166
+ );
package/src/styles/components/Card.css CHANGED
@@ -33,18 +33,18 @@
33
33
  .ancillary-card:not(:disabled):not(.ancillary-card--loading):hover,
34
34
  .ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible {
35
35
  /* important is needed here to override the inline border style from Card.tsx */
36
- border-color: rgb(var(--ACCENT)) !important;
36
+ border-color: var(--SECONDARY, rgb(var(--ACCENT))) !important;
37
37
  }
38
38
 
39
39
  .ancillary-card:not(:disabled):not(.ancillary-card--loading):hover
40
40
  .ancillary-card__expand-icon,
41
41
  .ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible
42
42
  .ancillary-card__expand-icon {
43
- color: rgb(var(--ACCENT));
43
+ color: var(--SECONDARY, rgb(var(--ACCENT)));
44
44
  }
45
45
 
46
46
  .ancillary-card__selected-icon {
47
- background-color: rgb(var(--ACCENT));
47
+ background-color: var(--SECONDARY, rgb(var(--ACCENT)));
48
48
  border-radius: 20px;
49
49
  color: rgb(var(--WHITE));
50
50
  height: 24px;
package/src/styles/components/CfarSelectionModal.css CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  .cfar-modal-list-item > svg {
20
- color: rgb(var(--ACCENT));
20
+ color: var(--SECONDARY, rgb(var(--ACCENT)));
21
21
  }
22
22
 
23
23
  .cfar-modal-list-item > p {
package/src/styles/components/Legend.css CHANGED
@@ -27,8 +27,9 @@
27
27
  width: var(--SPACING-MD-1);
28
28
  height: var(--SPACING-MD-1);
29
29
  border-radius: 5px;
30
- border: 2px solid var(--GREY-400);
31
- color: var(--GREY-400);
30
+ border: 2px solid var(--GREY-200);
31
+ color: var(--GREY-600);
32
+ background-color: var(--GREY-100);
32
33
  display: flex;
33
34
  align-items: center;
34
35
  justify-content: center;
@@ -37,22 +38,25 @@
37
38
 
38
39
  .seat-map__legend-seat--fee-payable {
39
40
  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
40
- border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
41
+ border: 2px solid
42
+ var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
41
43
  }
42
44
 
43
45
  .seat-map__legend-seat--fee-payable-indicator {
44
46
  position: relative;
45
47
  top: var(--SPACING-XS-2);
46
48
  left: var(--SPACING-XS-2);
47
- color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
49
+ color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
48
50
  }
49
51
 
50
52
  .seat-map__legend-seat--included {
51
53
  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
52
- border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
54
+ border: 2px solid
55
+ var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
53
56
  }
54
57
 
55
58
  .seat-map__legend-seat--selected {
56
59
  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
57
- border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
60
+ border: 2px solid
61
+ var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
58
62
  }
package/src/styles/components/LoadingState.css CHANGED
@@ -24,7 +24,10 @@
24
24
  margin: var(--SPACING-SM-3) 0;
25
25
  border-radius: 999px;
26
26
  width: calc(100% - var(--SPACING-SM-1));
27
- background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
27
+ background-color: var(
28
+ --SECONDARY,
29
+ rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
30
+ );
28
31
  position: relative;
29
32
  transition: var(--TRANSITIONS-CUBIC-BEZIER);
30
33
  }
@@ -33,7 +36,10 @@
33
36
  display: block;
34
37
  height: 100%;
35
38
  border-radius: 999px;
36
- background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
39
+ background-color: var(
40
+ --TERTIARY,
41
+ rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
42
+ );
37
43
  position: relative;
38
44
  animation: fillstatus 1s linear;
39
45
  }
package/src/styles/components/PassengerSelect.css CHANGED
@@ -43,7 +43,10 @@
43
43
  .passenger-selection-passenger:hover,
44
44
  .passenger-selection-passenger:focus,
45
45
  .passenger-selection-passenger:active {
46
- background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
46
+ background-color: var(
47
+ --SECONDARY,
48
+ rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
49
+ );
47
50
  }
48
51
 
49
52
  .passenger-selection-passenger__identifier,
@@ -78,7 +81,10 @@
78
81
  .passenger-selection-passenger--selected {
79
82
  box-shadow: 4px 0px 0px 0px rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000))
80
83
  inset;
81
- background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
84
+ background-color: var(
85
+ --SECONDARY,
86
+ rgba(var(--ACCENT), var(--ACCENT-LIGHT-100))
87
+ );
82
88
  }
83
89
 
84
90
  .passenger-selection-segment {
package/src/styles/components/Seat.css CHANGED
@@ -21,16 +21,17 @@
21
21
  }
22
22
 
23
23
  .map-element--available {
24
- border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
24
+ border: 2px solid
25
+ var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)));
25
26
  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-100));
26
- color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
27
+ color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
27
28
  }
28
29
 
29
30
  .map-element--fee-payable {
30
31
  position: absolute;
31
32
  bottom: -2px;
32
33
  right: -2px;
33
- color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-300));
34
+ color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-300)));
34
35
  }
35
36
 
36
37
  @media (hover: hover) and (pointer: fine) {
@@ -40,18 +41,19 @@
40
41
 
41
42
  .map-element--actionable:not(.map-element--selected):hover {
42
43
  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
43
- color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
44
+ color: var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
44
45
  transition: var(--TRANSITIONS-CUBIC-BEZIER);
45
46
  }
46
47
 
47
48
  .map-element--fee-payable {
48
- color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
49
+ color: var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
49
50
  transition: var(--TRANSITIONS-CUBIC-BEZIER);
50
51
  }
51
52
  }
52
53
 
53
54
  .map-element--selected {
54
55
  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
55
- border: 2px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
56
- color: rgba(var(--WHITE), 1);
56
+ border: 2px solid
57
+ var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
58
+ color: var(--SECONDARY, rgba(var(--WHITE), 1));
57
59
  }
package/src/styles/components/Tabs.css CHANGED
@@ -28,8 +28,11 @@
28
28
  .seat-map__tab-select-option:hover,
29
29
  .seat-map__tab-select-option:focus,
30
30
  .seat-map__tab-select-option:active {
31
- color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
32
- background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-200));
31
+ color: var(--SECONDARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000)));
32
+ background-color: var(
33
+ --TERTIARY,
34
+ rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))
35
+ );
33
36
  transition: var(--TRANSITIONS-CUBIC-BEZIER);
34
37
  }
35
38