Skip to content

Commit

Permalink
feat: #9253 elements mobile button (#9317)
Browse files Browse the repository at this point in the history 
* feat: #9253 adds initial mobile controls

* feat: #9253 remove feature flag and add mobile controls

* feat: #9253 adds tests
  • Loading branch information
@willmcvay
willmcvay authored Jun 20, 2023
1 parent 598e56d commit eb4340f
Show file tree
Hide file tree
Showing 37 changed files with 2,015 additions and 1,098 deletions.
156 changes: 92 additions & 64 deletions ...veloper-portal/src/components/analytics/calls/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,11 @@ exports[`AnalyticsCalls should match snapshot 1`] = `
"baseElement": <body>
<div>
<mock-styled.div />
<mock-styled.div
classname="mock-css.
justify-content: space-between;
"
<mock-styled.h1
classname=""
>
<mock-styled.h1
classname=""
>
API Calls
</mock-styled.h1>
</mock-styled.div>
API Calls
</mock-styled.h1>
<mock-styled.div
classname="mock-css.
flex-wrap: wrap;
Expand Down Expand Up @@ -51,21 +45,34 @@ exports[`AnalyticsCalls should match snapshot 1`] = `
</mock-styled.div>
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
classname=""
/>
<mock-styled.div
classname=""
>
<mock-styled.button
classname="mock-css. mock-css."
>
<mock-styled.span
classname="mock-css. mock-css.
font-size: 1.25rem;
"
>
<svg />
</mock-styled.span>
<mock-styled.div />
</mock-styled.button>
</mock-styled.div>
</div>
</body>,
"container": <div>
<mock-styled.div />
<mock-styled.div
classname="mock-css.
justify-content: space-between;
"
<mock-styled.h1
classname=""
>
<mock-styled.h1
classname=""
>
API Calls
</mock-styled.h1>
</mock-styled.div>
API Calls
</mock-styled.h1>
<mock-styled.div
classname="mock-css.
flex-wrap: wrap;
Expand Down Expand Up @@ -100,6 +107,25 @@ exports[`AnalyticsCalls should match snapshot 1`] = `
</mock-styled.div>
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
classname=""
/>
<mock-styled.div
classname=""
>
<mock-styled.button
classname="mock-css. mock-css."
>
<mock-styled.span
classname="mock-css. mock-css.
font-size: 1.25rem;
"
>
<svg />
</mock-styled.span>
<mock-styled.div />
</mock-styled.button>
</mock-styled.div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
Expand Down Expand Up @@ -166,29 +192,11 @@ exports[`AnalyticsCalls should match snapshot for mobile view 1`] = `
</div>
<div>
<mock-styled.div />
<mock-styled.div
classname="mock-css.
justify-content: space-between;
"
<mock-styled.h1
classname=""
>
<mock-styled.h1
classname=""
>
API Calls
</mock-styled.h1>
<mock-styled.div>
<mock-styled.div
classname="mock-css."
>
<mock-styled.button
classname="mock-css."
>
Controls
<mock-styled.div />
</mock-styled.button>
</mock-styled.div>
</mock-styled.div>
</mock-styled.div>
API Calls
</mock-styled.h1>
<mock-styled.div
classname="mock-css.
flex-wrap: wrap;
Expand Down Expand Up @@ -223,33 +231,34 @@ exports[`AnalyticsCalls should match snapshot for mobile view 1`] = `
</mock-styled.div>
</mock-styled.div>
</mock-styled.div>
</div>
</body>,
"container": <div>
<mock-styled.div />
<mock-styled.div
classname="mock-css.
justify-content: space-between;
"
>
<mock-styled.h1
<mock-styled.div
classname=""
/>
<mock-styled.div
classname=""
>
API Calls
</mock-styled.h1>
<mock-styled.div>
<mock-styled.div
classname="mock-css."
<mock-styled.button
classname="mock-css. mock-css."
>
<mock-styled.button
classname="mock-css."
<mock-styled.span
classname="mock-css. mock-css.
font-size: 1.25rem;
"
>
Controls
<mock-styled.div />
</mock-styled.button>
</mock-styled.div>
<svg />
</mock-styled.span>
<mock-styled.div />
</mock-styled.button>
</mock-styled.div>
</mock-styled.div>
</div>
</body>,
"container": <div>
<mock-styled.div />
<mock-styled.h1
classname=""
>
API Calls
</mock-styled.h1>
<mock-styled.div
classname="mock-css.
flex-wrap: wrap;
Expand Down Expand Up @@ -284,6 +293,25 @@ exports[`AnalyticsCalls should match snapshot for mobile view 1`] = `
</mock-styled.div>
</mock-styled.div>
</mock-styled.div>
<mock-styled.div
classname=""
/>
<mock-styled.div
classname=""
>
<mock-styled.button
classname="mock-css. mock-css."
>
<mock-styled.span
classname="mock-css. mock-css.
font-size: 1.25rem;
"
>
<svg />
</mock-styled.span>
<mock-styled.div />
</mock-styled.button>
</mock-styled.div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
Expand Down
24 changes: 13 additions & 11 deletions packages/developer-portal/src/components/analytics/calls/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import React, { FC } from 'react'
import { Button, ButtonGroup, FlexContainer, Loader, Subtitle, Title, useMediaQuery, useModal } from '@reapit/elements'
import {
Button,
ButtonGroup,
FlexContainer,
Loader,
MobileControls,
Subtitle,
Title,
useMediaQuery,
useModal,
} from '@reapit/elements'
import { HitsPerDayChart } from './hits-per-day-chart'
import { useAnalyticsState } from '../state/use-analytics-state'
import { GetActionNames, getActions } from '@reapit/use-reapit-data'
Expand Down Expand Up @@ -34,16 +44,7 @@ export const AnalyticsCalls: FC = () => {

return (
<>
<FlexContainer isFlexJustifyBetween>
<Title>API Calls</Title>
{isMobile && (
<ButtonGroup alignment="right">
<Button intent="low" onClick={openModal}>
Controls
</Button>
</ButtonGroup>
)}
</FlexContainer>
<Title>API Calls</Title>
{isMobile && (
<Modal title="Controls">
<Controls />
Expand All @@ -66,6 +67,7 @@ export const AnalyticsCalls: FC = () => {
{trafficEvents && <HitsByResourceChart trafficEvents={trafficEvents} />}
</ChartWrapper>
</FlexContainer>
<MobileControls onClick={openModal} />
</>
)
}
Expand Down
Loading

0 comments on commit eb4340f

Please sign in to comment.