@duffel/components 3.1.3--prototype.4 → 3.1.3--prototype.7

package/src/stories/Button.stories.tsx

@@ -1,91 +0,0 @@
-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>
-);
-
-const WhiteAccentColorWrapper: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => (
-  <div
-    style={
-      {
-        "--ACCENT": "255, 255, 255",
-        "--SECONDARY": "black",
-        "--TERTIARY": "grey",
-      } as any
-    }
-  >
-    {children}
-  </div>
-);
-
-export const WithWhiteAccentColorSet: StoryFn<ButtonProps> = () => (
-  <WhiteAccentColorWrapper>
-    <Button {...defaultProps} />
-  </WhiteAccentColorWrapper>
-);

package/src/stories/DuffelAncillaries.stories.tsx

@@ -1,166 +0,0 @@
-import type { Meta, StoryFn, 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 OneWayOnePassengerOffer: DuffelAncillariesStory = {
-  args: {
-    ...defaultProps,
-    offer: {
-      ...offer,
-      slices: [
-        {
-          ...offer.slices[0],
-          segments: [
-            {
-              ...offer.slices[0].segments[0],
-              passengers: [offer.slices[0].segments[0].passengers[0]],
-            },
-          ],
-        },
-      ],
-      passengers: [offer.passengers[0]],
-      available_services: [offer.available_services[0]],
-    },
-  },
-};
-
-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,
-      },
-    },
-  };
-
-export const WithAccentColorSet: StoryFn<
-  DuffelAncillariesPropsWithOffersAndSeatMaps
-> = () => (
-  <DuffelAncillaries
-    {...defaultProps}
-    styles={{ accentColor: "29, 78, 216" }}
-  />
-);
-
-export const WithWhiteAccentColorSet: StoryFn<
-  DuffelAncillariesPropsWithOffersAndSeatMaps
-> = () => (
-  <DuffelAncillaries
-    {...defaultProps}
-    styles={{ accentColor: "255, 255, 255" }}
-  />
-);

package/src/stories/DuffelPayments.stories.tsx

@@ -1,34 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/stories/PlacesLookup.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-import {
-  PlacesLookup,
-  PlacesLookupProps,
-} from "../components/PlacesLookup/PlacesLookup";
-
-export default {
-  title: "PlacesLookup",
-  component: PlacesLookup,
-} as Meta;
-
-const defaultProps: PlacesLookupProps = {
-  onPlaceSelected: (selection) =>
-    alert(`Selected: ${JSON.stringify(selection)}`),
-};
-
-export const Default: React.FC = () => (
-  <div style={{ width: "350px" }}>
-    <PlacesLookup {...defaultProps} />
-  </div>
-);

package/src/styles/colors.css

@@ -1,22 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-.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

@@ -1,25 +0,0 @@
-.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

@@ -1,169 +0,0 @@
-/**
- * 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: var(--SECONDARY, 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));
-  /* Will give the button an outline if the accent color has high luminance */
-  border: 1px solid var(--SECONDARY);
-  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: (
-    var(--SECONDARY),
-    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: (
-    var(--SECONDARY),
-    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

@@ -1,52 +0,0 @@
-.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: var(--SECONDARY, 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: var(--SECONDARY, rgb(var(--ACCENT)));
-}
-
-.ancillary-card__selected-icon {
-  background-color: var(--SECONDARY, rgb(var(--ACCENT)));
-  border-radius: 20px;
-  color: rgb(var(--WHITE));
-  height: 24px;
-  width: 24px;
-}

package/src/styles/components/CfarSelectionModal.css

@@ -1,34 +0,0 @@
-.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: var(--SECONDARY, 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;
-  }
-}