insomnia/packages/insomnia-components/components/list-group/unit-test-result-timestamp.js
Mike Ellan 1774bc72e2
Unit testing test output (#2533)
* Adding list group component with stubbed badge & list item

* Cleaning up stories, error padding tweak

* Results list item padding fix

* Review feedback and component provisioning

Shift to functional components
Abstract both list and list item away for re-use
Roll unit test result specific styling into UT source
Roll supporting UI over including badges > extend SC for flavors
Shift timestamp to render the value, JSX handling formatting

* Renaming UT specific badges

* List group and unit test wrapper component updates

- Pulled unit test results list item into SB
- All unique aspects of UT results are bundled in the IC which extend base item
- Cleansed UT wrapper of inline components
- Setting up list group and list group item base for middle area

* Abstrating badges, timestamp and updating unit test wrapper

* Update packages/insomnia-components/components/list-group/unit-test-result-badge.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Update packages/insomnia-components/components/list-group/unit-test-result-item.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Dep cleanup, PR feedback

Co-authored-by: Opender Singh <opender94@gmail.com>
2020-08-27 18:09:13 -04:00

36 lines
699 B
JavaScript

// @flow
import * as React from 'react';
import styled from 'styled-components';
import SvgIcon from '../svg-icon';
type Props = {|
timeMs: String,
|};
const StyledTimestamp: React.ComponentType<{}> = styled.div`
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
font-size: var(--font-size-xs);
color: var(--hl-xl);
svg {
fill: var(--hl-xl);
margin-right: var(--padding-xxs);
}
`;
const UnitTestResultTimestamp = ({ timeMs }: Props) => {
return (
<StyledTimestamp>
{' '}
<SvgIcon icon="clock" />
<div>{timeMs} ms</div>
</StyledTimestamp>
);
};
export default UnitTestResultTimestamp;