# Search trip
A flight search interface that allows users to search for trips with options for results display and signup functionality.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Fsearch-trip-default.png) |

## What it looks like
The component renders as a full-width section containing a search trip interface. It uses a grid layout spanning the full container width on mobile and laptop:col-start-2 laptop:col-span-10 positioning on larger screens, creating centered content with margins. The SearchTripCore component handles the actual search interface with results display and signup options enabled by default.

## Typography
Typography is handled within the SearchTripCore component and follows the standard sizing information patterns:
- Main heading uses the Element determined by getSizingInformation based on component index and embedded state
- For index 0 non-embedded: h1 element with corresponding text size class
- For index 0 embedded: h2 element with corresponding text size class  
- For non-zero index: h2 or h3 element depending on embedded state
- Body text uses standard paragraph classes from the sizing information
- Text size can be controlled via the `textSize` field affecting the overall scale

## Colours
Authors can set background and text colours for this section:
- `backgroundColour` - applies to the entire section background using any palette colour: Black, Gray, Deep Purple, Turquoise, Green, Purple, Yellow, Teal, Orange, Blue, White, and their light/pale variants
- `textColour` - sets the text colour for the section content, limited to Black or White as defined in the text colours

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets unique identifier for the section anchor | No anchor ID applied |
| index | Number | Determines heading hierarchy and spacing via getSizingInformation | Uses default index-based positioning |
| componentType | Symbol | Identifies component as "Search trip" for rendering | Component cannot render |
| heading | Symbol | Displays as main heading with size based on index and textSize | No main heading shown |
| body | Rich Text | Renders as body content below heading | No body text displayed |
| visual | Media | Provides visual content for the search interface | No visual elements shown |
| links | Reference | Enables link functionality within the component | No interactive links available |
| additionalCopy | Rich Text | Shows supplementary text content | No additional text displayed |
| icon | Media | Displays icon associated with the search functionality | No icon shown |
| postHeading | Symbol | Renders heading text after the main heading | No post-heading text |
| preHeading | Symbol | Displays heading text before the main heading | No pre-heading text |
| cmsLabel | Symbol | Internal label for content management, not displayed | No internal labeling |
| backgroundColour | Symbol | Sets section background colour from palette | Uses default background |
| textColour | Symbol | Sets text colour (Black or White) | Uses default text colour |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Uses Medium text sizing |

## Behaviour
The component always renders with results display and signup functionality enabled when used as a full section component. The embedded version uses the same core functionality but without the Section wrapper. The component positioning adapts responsively, using full column span on mobile and centered positioning with margins on laptop and larger screens. The search interface maintains consistent functionality regardless of the component's position in the page.

## Impact
- Adding/removing `heading`: Main title appears or disappears from the search interface
- Adding/removing `body`: Descriptive text below heading shows or hides
- Changing `textSize`: All typography scales up (Large) or down (Small) from baseline
- Adding/removing `visual`: Search interface visual elements appear or disappear  
- Setting `backgroundColour`: Section background changes from default to selected palette colour
- Setting `textColour`: All text in section changes to Black or White as specified
- Adding/removing `preHeading`/`postHeading`: Additional heading text appears above or below main heading