Ntrfcs 207 : Map legend open always for desktop (#301)

* added showLegendAlwaysOpenForDesktop * test fixes * small change * small change * format chjanges * added changeset
ticketevolution · Jan 20, 2025 · c8ede68 · c8ede68
1 parent 1e1d670
commit c8ede68
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 3 deletions.
diff --git a/.changeset/light-suns-agree.md b/.changeset/light-suns-agree.md
@@ -0,0 +1,5 @@
+---
+"@ticketevolution/seatmaps-client": minor
+---
+
+Added showLegendOpenAlwaysForDesktop flag to always display the map legend on desktop when this flag is set to true.
diff --git a/packages/seatmaps-client/src/Actions/index.tsx b/packages/seatmaps-client/src/Actions/index.tsx
@@ -20,6 +20,7 @@ export interface Props {
 
 interface DefaultProps {
   showLegend: boolean;
+  showLegendOpenAlwaysForDesktop: boolean;
   showControls: boolean;
   onClearSelection(): void;
 }
@@ -43,6 +44,7 @@ export default class Actions extends React.Component<
 
   static defaultProps: DefaultProps = {
     showLegend: true,
+    showLegendOpenAlwaysForDesktop: false,
     showControls: true,
     onClearSelection: () => {},
   };
@@ -168,7 +170,12 @@ export default class Actions extends React.Component<
         )}
         {showRightActions && (
           <ActionGroup>
-            <Legend ranges={this.props.ranges} />
+            <Legend
+              ranges={this.props.ranges}
+              showLegendOpenAlwaysForDesktop={
+                this.props.showLegendOpenAlwaysForDesktop
+              }
+            />
           </ActionGroup>
         )}
       </div>

diff --git a/packages/seatmaps-client/src/Legend/index.tsx b/packages/seatmaps-client/src/Legend/index.tsx
@@ -20,6 +20,7 @@ export interface Range {
 export interface Props {
   ranges: Range[];
   isMobile?: boolean;
+  showLegendOpenAlwaysForDesktop?: boolean;
 }
 
 interface State {
@@ -29,6 +30,7 @@ interface State {
 export default class Legend extends Component<Props, State> {
   static defaultProps = {
     isMobile: false,
+    showLegendOpenAlwaysForDesktop: false,
   };
 
   state = {
@@ -37,9 +39,35 @@ export default class Legend extends Component<Props, State> {
 
   render() {
     const { isOpen } = this.state;
-    const { ranges, isMobile } = this.props;
+    const { ranges, isMobile, showLegendOpenAlwaysForDesktop } = this.props;
 
-    return (
+    return showLegendOpenAlwaysForDesktop && !isMobile ? (
+      <div style={{ position: "relative" }}>
+        <div
+          style={{
+            position: "absolute",
+            backgroundColor: "white",
+            right: -2,
+            border: "2px solid lightgray",
+            borderRadius: "0 0 5px 5px",
+          }}
+        >
+          <h3 style={{ padding: "0 0 0 8px", textAlign: "left" }}>
+            Map Legend
+          </h3>
+          {ranges.map((range) => (
+            <div key={range.color} style={{ padding: 8, textAlign: "left" }}>
+              <Swatch color={range.color} style={{ marginRight: 8 }} />
+              <span>
+                {formatCurrency(Math.floor(range.min))}
+                {" - "}
+                {formatCurrency(Math.ceil(range.max))}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    ) : (
       <div style={{ position: "relative" }}>
         <Button
           onClick={() => this.setState({ isOpen: !isOpen })}

diff --git a/packages/seatmaps-client/src/TicketMap/index.tsx b/packages/seatmaps-client/src/TicketMap/index.tsx
@@ -67,6 +67,7 @@ export class TicketMap extends Component<Props & DefaultProps, State> {
     },
     ticketGroups: [],
     showLegend: true,
+    showLegendOpenAlwaysForDesktop: false,
     showControls: true,
     mouseControlEnabled: true,
     showZoomHelper: true,
@@ -668,6 +669,9 @@ export class TicketMap extends Component<Props & DefaultProps, State> {
             onClearSelection={this.clearSelection}
             ranges={$costRanges(this.state, this.props)}
             showLegend={this.props.showLegend}
+            showLegendOpenAlwaysForDesktop={
+              this.props.showLegendOpenAlwaysForDesktop
+            }
             showControls={this.props.showControls}
             onZoomIn={this.handleZoomIn}
             onZoomOut={this.handleZoomOut}

diff --git a/packages/seatmaps-client/src/__tests__/Actions/__snapshots__/index.test.tsx.snap b/packages/seatmaps-client/src/__tests__/Actions/__snapshots__/index.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`Actions when controls are visible on desktop browsers matches snapshot
   ranges={[]}
   showControls={true}
   showLegend={true}
+  showLegendOpenAlwaysForDesktop={false}
 >
   <div
     data-testid="seatmaps-actions-menu"
@@ -251,6 +252,7 @@ exports[`Actions when controls are visible on desktop browsers matches snapshot
         <Legend
           isMobile={false}
           ranges={[]}
+          showLegendOpenAlwaysForDesktop={false}
         >
           <div
             style={
@@ -314,6 +316,7 @@ exports[`Actions when controls are visible on mobile browsers matches snapshot 1
   ranges={[]}
   showControls={true}
   showLegend={true}
+  showLegendOpenAlwaysForDesktop={false}
 >
   <div
     data-testid="seatmaps-actions-menu"
@@ -556,6 +559,7 @@ exports[`Actions when controls are visible on mobile browsers matches snapshot 1
         <Legend
           isMobile={false}
           ranges={[]}
+          showLegendOpenAlwaysForDesktop={false}
         >
           <div
             style={

diff --git a/packages/seatmaps-client/src/index.tsx b/packages/seatmaps-client/src/index.tsx
@@ -23,6 +23,7 @@ const optionalConfigKeys: (keyof DefaultProps)[] = [
   "sectionPercentiles",
   "mapsDomain",
   "showControls",
+  "showLegendOpenAlwaysForDesktop",
   "showLegend",
   "mouseControlEnabled",
   "showZoomHelper",

diff --git a/packages/seatmaps-client/src/types/TicketMap.ts b/packages/seatmaps-client/src/types/TicketMap.ts
@@ -37,6 +37,7 @@ export interface DefaultProps {
   mapsDomain: string;
   onSelection(sections: string[]): void;
   showControls: boolean;
+  showLegendOpenAlwaysForDesktop: boolean;
   mouseControlEnabled: boolean;
   showZoomHelper: boolean;
   missingSeatMapLogo?: React.ReactNode;