@duffel/components 2.7.20 → 3.0.0

package/src/stories/Button.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React from "react";
+import { Button, ButtonProps } from "../components/shared/Button";
+
+export default {
+  title: "Button",
+  component: Button,
+} as Meta;
+
+type ButtonStory = StoryObj<typeof Button>;
+
+const defaultProps: ButtonProps = {
+  children: "Click me",
+  onClick: () => 0,
+};
+
+export const Default: ButtonStory = { args: defaultProps };
+
+export const Disabled: ButtonStory = {
+  args: { ...defaultProps, disabled: true },
+};
+
+export const WithIconBefore: ButtonStory = {
+  args: { ...defaultProps, iconBefore: "autorenew" },
+};
+
+export const WithOutlinedVariant: ButtonStory = {
+  args: { ...defaultProps, variant: "outlined" },
+};
+
+export const DisabledWithOutlinedVariant: ButtonStory = {
+  args: { ...defaultProps, variant: "outlined", disabled: true },
+};
+
+export const WithDestructiveVariant: ButtonStory = {
+  args: {
+    ...defaultProps,
+    children: "Click to delete something important",
+    variant: "destructive",
+  },
+};
+
+export const WithSize32: ButtonStory = {
+  args: { ...defaultProps, size: 32, iconBefore: "autorenew" },
+};
+
+export const WithSize48: ButtonStory = {
+  args: { ...defaultProps, size: 48, iconBefore: "autorenew" },
+};
+
+const AccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div
+    style={
+      {
+        "--ACCENT": "29, 78, 216",
+      } as any
+    }
+  >
+    {children}
+  </div>
+);
+
+export const WithAccentColorSet: StoryFn<ButtonProps> = () => (
+  <AccentColorWrapper>
+    <Button {...defaultProps} />
+  </AccentColorWrapper>
+);

package/src/stories/DuffelAncillaries.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DuffelAncillaries } from "../components/DuffelAncillaries/DuffelAncillaries";
+import mockPassengers from "../fixtures/passengers/mock_passengers";
+import { DuffelAncillariesPropsWithOffersAndSeatMaps } from "../types/DuffelAncillariesProps";
+import { Offer } from "../types/Offer";
+import { SeatMap } from "../types/SeatMap";
+
+// Use a require because the fixture is not a module.
+/* eslint-disable @typescript-eslint/no-var-requires */
+const offer: Offer = require("../fixtures/offers/off_1.json");
+const seat_maps: SeatMap[] = require("../fixtures/seat-maps/off_1.json");
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+export default {
+  title: "DuffelAncillaries",
+  component: DuffelAncillaries,
+} as Meta;
+
+type DuffelAncillariesStory = StoryObj<typeof DuffelAncillaries>;
+
+const defaultProps: Pick<
+  DuffelAncillariesPropsWithOffersAndSeatMaps,
+  "onPayloadReady" | "passengers" | "offer" | "seat_maps" | "services" | "debug"
+> = {
+  onPayloadReady: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  offer,
+  seat_maps,
+  passengers: mockPassengers,
+  services: ["bags", "seats", "cancel_for_any_reason"],
+  debug: true,
+};
+
+export const AllServices: DuffelAncillariesStory = {
+  args: defaultProps,
+};
+
+export const JustBags: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    services: ["bags"],
+  },
+};
+
+export const JustSeats: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    services: ["seats"],
+  },
+};
+
+export const JustCFAR: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    services: ["cancel_for_any_reason"],
+  },
+};
+
+export const ExpiredOffer: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    offer: { ...offer, expires_at: "2023-04-19T00:00:00Z" },
+  },
+};
+
+export const WithCustomStyles: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    styles: {
+      accentColor: "29, 78, 216",
+      fontFamily: "monospace",
+      buttonCornerRadius: "15px",
+    },
+  },
+};
+
+export const Markup: DuffelAncillariesStory = {
+  args: {
+    markup: {
+      bags: {
+        rate: 0.1,
+        amount: 1,
+      },
+      seats: {
+        rate: 0.2,
+        amount: 2,
+      },
+      cancel_for_any_reason: {
+        rate: 0.3,
+        amount: 3,
+      },
+    },
+    ...defaultProps,
+  },
+};
+
+const fiftyPercentMarkup = (amount: number) => ({
+  amount: amount * 1.5,
+});
+
+export const MarkupUsingPriceFormatters: DuffelAncillariesStory = {
+  args: {
+    ...defaultProps,
+    priceFormatters: {
+      bags: fiftyPercentMarkup,
+      seats: fiftyPercentMarkup,
+      cancel_for_any_reason: fiftyPercentMarkup,
+    },
+  },
+};
+
+const customCurrencyMarkup = () => ({
+  amount: 100,
+  currency: "Duffel points",
+});
+
+export const MarkupUsingPriceFormattersWithCustomCurrency: DuffelAncillariesStory =
+  {
+    args: {
+      ...defaultProps,
+      priceFormatters: {
+        bags: customCurrencyMarkup,
+        seats: customCurrencyMarkup,
+        cancel_for_any_reason: customCurrencyMarkup,
+      },
+    },
+  };

package/src/stories/DuffelPayments.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DuffelPayments,
+  DuffelPaymentsProps,
+} from "../components/DuffelPayments/DuffelPayments";
+
+export default {
+  title: "DuffelPayments",
+  component: DuffelPayments,
+} as Meta;
+
+type DuffelPaymentsStory = StoryObj<typeof DuffelPayments>;
+
+const defaultProps: DuffelPaymentsProps = {
+  paymentIntentClientToken:
+    "eyJjbGllbnRfc2VjcmV0IjoicGlfM0psczlVQWcySmhFeTh2WTBSTm1MU0JkX3NlY3JldF9QUW9yZXNuU3laeWJadGRiejZwNzBCbUdPIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0=",
+  onSuccessfulPayment: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+  onFailedPayment: () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+};
+
+export const Default: DuffelPaymentsStory = {
+  args: defaultProps,
+};
+
+export const WithCustomStyles: DuffelPaymentsStory = {
+  args: {
+    ...defaultProps,
+    styles: {
+      accentColor: "29, 78, 216",
+      fontFamily: "monospace",
+      buttonCornerRadius: "15px",
+    },
+  },
+};

package/src/stories/Icon.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { Icon, ICON_MAP, IconName } from "../components/shared/Icon";
+
+export default {
+  title: "Icon",
+  component: Icon,
+} as Meta;
+
+export const FullList: React.FC = () => (
+  <div
+    style={{
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 1fr)",
+      gridGap: "32px",
+    }}
+  >
+    {Object.keys(ICON_MAP).map((icon) => (
+      <div
+        key={icon}
+        style={{
+          padding: "16px",
+          border: "dashed 1px lightgrey",
+          borderRadius: "2px",
+          display: "flex",
+          alignItems: "center",
+          columnGap: "8px",
+        }}
+      >
+        <Icon name={icon as IconName} />
+        <div>{icon}</div>
+      </div>
+    ))}
+  </div>
+);

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton, IconButtonProps } from "../components/shared/IconButton";
+
+export default {
+  title: "IconButton",
+  component: IconButton,
+} as Meta;
+
+type IconButtonStory = StoryObj<typeof IconButton>;
+
+const defaultProps: IconButtonProps = {
+  title: "Click me",
+  icon: "autorenew",
+  onClick: () => 0,
+};
+
+export const Default: IconButtonStory = { args: defaultProps };
+
+export const WithOutlinedVariant: IconButtonStory = {
+  args: { ...defaultProps, variant: "outlined" },
+};
+
+export const DisabledWithOutlinedVariant: IconButtonStory = {
+  args: { ...defaultProps, variant: "outlined", disabled: true },
+};

package/src/styles/colors.css

@@ -0,0 +1,22 @@
+.duffel-components {
+  --GREY-100: #f7f5f9;
+  --GREY-200: #e2e2e8;
+  --GREY-300: #e2e8f0;
+  --GREY-400: #ababb4;
+  --GREY-500: #86868e;
+  --GREY-600: #696972;
+  --GREY-700: #4b4b55;
+  --GREY-900: #29292e;
+  --RED: #ef4444;
+  --BLACK: 0, 0, 0;
+  --WHITE: 255, 255, 255;
+  --ACCENT: 22, 22, 24;
+  --ACCENT-LIGHT-100: 0.08;
+  --ACCENT-LIGHT-200: 0.24;
+  --ACCENT-LIGHT-300: 0.48;
+  --ACCENT-LIGHT-800: 0.8;
+  --ACCENT-LIGHT-1000: 1;
+  --GREEN-100: #ecfdf5;
+  --GREEN-200: #10b981;
+  --GREEN-300: #064e3b;
+}

package/src/styles/components/Amenity.css

@@ -0,0 +1,23 @@
+.map-element--amenity {
+  width: 100%;
+  height: var(--SPACING-LG-1);
+  color: var(--GREY-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--SPACING-SM-1);
+}
+
+@media only screen and (min-width: 768px) {
+  .map-element--amenity {
+    width: 100%;
+    height: var(--SPACING-LG-3);
+    font-size: var(--FONT-SIZES-C2);
+  }
+}
+
+.map-element--wrapped {
+  background-color: var(--GREY-100);
+  border-radius: 8px;
+  border: 2px solid var(--GREY-200);
+}

package/src/styles/components/BaggageDisplay.css

@@ -0,0 +1,25 @@
+.baggage-display {
+  display: flex;
+  align-items: center;
+}
+
+.baggage-display__content {
+  margin-left: var(--SPACING-SM-1);
+}
+
+.baggage-display__label {
+  color: var(--grey-900);
+  font-size: var(--FONT-SIZES-C2);
+}
+
+.baggage-display__price {
+  font-size: var(--FONT-SIZES-C2);
+  color: var(--GREY-600);
+  margin-left: var(--SPACING-XS-2);
+}
+
+.baggage-display__specs {
+  margin-top: var(--SPACING-XS-2);
+  font-size: var(--FONT-SIZES-C3);
+  color: var(--GREY-600);
+}

package/src/styles/components/Button.css

@@ -0,0 +1,161 @@
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  appearance: button;
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+.button {
+  --button-color: white;
+
+  box-sizing: border-box;
+  border-radius: var(--BUTTON-RADIUS, 6px);
+  cursor: pointer;
+  border: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  letter-spacing: 0em;
+
+  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  color: var(--button-color);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.25), 0px 0px 0px #e9e9eb;
+
+  border: 1px solid rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  transition: background-color 0.3s var(--TRANSITION-CUBIC-BEZIER),
+    box-shadow 0.3s var(--TRANSITION-CUBIC-BEZIER),
+    color 0.3s var(--TRANSITION-CUBIC-BEZIER);
+}
+
+.button--32 {
+  height: 32px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding-inline: 16px;
+}
+
+.button--40 {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding-inline: 24px;
+}
+
+.button--48 {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  padding-inline: 32px;
+}
+
+.button svg {
+  /* Using important to take precedence over inline styles on icon */
+  display: inline !important;
+  height: 20px;
+  margin-right: 4px;
+  margin-left: -4px;
+}
+
+.button:not(:disabled):hover {
+  box-shadow: 0px 0px 0px 2px #e9e9eb, 0px 2px 4px 1px #00000026;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.button--primary:not(:disabled):hover {
+  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-800));
+  border-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-800));
+  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.15), 0px 0px 0px 2px #e9e9eb;
+}
+
+.button--primary:not(:disabled):active {
+  background-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  border-color: rgba(var(--ACCENT), var(--ACCENT-LIGHT-1000));
+  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px #dcdcde;
+}
+
+.button--destructive,
+.button--outlined {
+  border: 1px solid #ccccd4;
+  color: var(--GREY-900);
+  background-color: rgb(var(--WHITE));
+}
+
+.button--outlined:not(:disabled):hover,
+.button--destructive:not(:disabled):hover {
+  border: 1px solid #ababb4;
+  background-color: #fbfbfd;
+}
+
+.button--outlined:not(:disabled):active,
+.button--destructive:not(:disabled):active {
+  background-color: var(--GREY-100);
+}
+
+.button--destructive {
+  color: var(--RED);
+}

package/src/styles/components/Card.css

@@ -0,0 +1,52 @@
+.ancillary-card:disabled {
+  color: inherit;
+  cursor: not-allowed;
+  background-color: var(--GREY-100);
+}
+
+.ancillary-card--loading:disabled {
+  cursor: progress;
+}
+
+.ancillary-card__expand-icon {
+  color: var(--GREY-400);
+  transition: color 0.3s var(--TRANSITION-CUBIC-BEZIER),
+    transform 0.5s var(--TRANSITION-CUBIC-BEZIER);
+  transform: scale(1);
+}
+
+.ancillary-card__children {
+  text-align: start;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--GREY-600);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ancillary-card:not(:disabled):not(.ancillary-card--loading):focus {
+  outline: none;
+}
+
+.ancillary-card:not(:disabled):not(.ancillary-card--loading):hover,
+.ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible {
+  /* important is needed here to override the inline border style from Card.tsx */
+  border-color: rgb(var(--ACCENT)) !important;
+}
+
+.ancillary-card:not(:disabled):not(.ancillary-card--loading):hover
+  .ancillary-card__expand-icon,
+.ancillary-card:not(:disabled):not(.ancillary-card--loading):focus-visible
+  .ancillary-card__expand-icon {
+  color: rgb(var(--ACCENT));
+}
+
+.ancillary-card__selected-icon {
+  background-color: rgb(var(--ACCENT));
+  border-radius: 20px;
+  color: rgb(var(--WHITE));
+  height: 24px;
+  width: 24px;
+}

package/src/styles/components/CfarSelectionModal.css

@@ -0,0 +1,34 @@
+.cfar-modal-footer {
+  margin-top: 16px;
+  padding: 16px 24px 24px;
+  display: grid;
+  column-gap: 12px;
+  row-gap: 12px;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.cfar-modal-list-item {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+.cfar-modal-list-item > svg {
+  color: rgb(var(--ACCENT));
+}
+
+.cfar-modal-list-item > p {
+  margin: 0;
+  padding: 0;
+}
+
+/* tablet or greater  */
+@media (min-width: 768px) {
+  .cfar-modal-footer {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+  }
+}

package/src/styles/components/Counter.css

@@ -0,0 +1,18 @@
+.counter {
+  display: flex;
+  align-items: center;
+}
+
+.counter__count-label {
+  font-size: var(--FONT-SIZES-C2);
+  text-align: center;
+  align-self: center;
+  color: var(--GREY-900);
+  width: var(--SPACING-LG-2);
+}
+
+@media screen and (min-width: 768px) {
+  .counter__count-label {
+    width: var(--SPACING-LG-1);
+  }
+}

package/src/styles/components/DuffelPayments.css

@@ -0,0 +1,42 @@
+.card-payment__container {
+  width: 480px;
+  height: auto;
+  max-width: 480px;
+  box-sizing: border-box;
+  margin: var(--SPACING-XS-3);
+}
+
+.card-payment__container--invalid {
+  margin-top: var(--SPACING-SM-1);
+  font-size: var(--FONT-SIZES-C2);
+  color: var(--RED);
+}
+
+.card-payment__container--invalid {
+  height: 16px;
+}
+
+.card-details {
+  background-color: rgb(var(--WHITE));
+  border: 1px solid var(--GREY-200);
+  border-radius: 5px;
+  padding: var(--SPACING-SM-2);
+  width: auto;
+}
+
+.card-details.StripeElement--invalid {
+  border: 1px solid var(--RED);
+}
+
+.card-payment__pay-button {
+  width: 100%;
+  margin-top: var(--SPACING-SM-3);
+}
+
+.card-payment--in-progress {
+  display: block;
+  z-index: 3;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}