BETA - Add beta banner to all screens (#16307)
* Add beta home banner to home screen * Move the beta home notification to the app-header * Updates to formatting * Add beta home banner to home screen * Move the beta home notification to the app-header * Updates to formatting * Update ui/components/app/app-header/index.scss Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/app/app-header/index.scss Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/app/app-header/index.scss Co-authored-by: George Marshall <george.marshall@consensys.net> * Move banner to top of page * Move to own folder, update styles * Swith to BOX component * Address feedback * Add tests * Update name of component * Fix tests * Fix proptype errors * Fixups * Remove unrelated changes * Remove unwanted string changes * Update beta component name and text * Update mock data Co-authored-by: George Marshall <george.marshall@consensys.net>feature/default_network_editable
David Walsh
2 years ago
committed by
Dan J Miller
parent
83f952228b
commit
880af262a4
@ -0,0 +1,36 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Beta Header should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--width-full box--background-color-warning-default" |
||||
> |
||||
<h6 |
||||
class="box box--flex-direction-row typography beta-header__message typography--h7 typography--weight-normal typography--style-normal typography--color-warning-inverse" |
||||
> |
||||
<span> |
||||
|
||||
This is a BETA version. Please report bugs |
||||
<a |
||||
href="https://metamask.zendesk.com/hc/en-us" |
||||
rel="noreferrer noopener" |
||||
target="_blank" |
||||
> |
||||
here |
||||
</a> |
||||
|
||||
|
||||
</span> |
||||
</h6> |
||||
<button |
||||
aria-label="Close" |
||||
class="beta-header__button" |
||||
data-testid="beta-header-close" |
||||
> |
||||
<i |
||||
class="fa fa-times" |
||||
/> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -0,0 +1,24 @@ |
||||
import React from 'react'; |
||||
import { Provider } from 'react-redux'; |
||||
import testData from '../../../../.storybook/test-data'; |
||||
import configureStore from '../../../store/store'; |
||||
import BetaHeader from '.'; |
||||
|
||||
const store = configureStore({ |
||||
...testData, |
||||
metamask: { ...testData.metamask, isUnlocked: true, showBetaHeader: true }, |
||||
}); |
||||
|
||||
export default { |
||||
title: 'Components/App/BetaHeader', |
||||
decorators: [(story) => <Provider store={store}>{story()}</Provider>], |
||||
id: __filename, |
||||
}; |
||||
|
||||
export const DefaultStory = () => ( |
||||
<> |
||||
<BetaHeader /> |
||||
</> |
||||
); |
||||
|
||||
DefaultStory.storyName = 'Default'; |
||||
@ -0,0 +1,45 @@ |
||||
import React from 'react'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import thunk from 'redux-thunk'; |
||||
import mockState from '../../../../test/data/mock-state.json'; |
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import BetaHeader from '.'; |
||||
|
||||
const mockHideBetaHeader = jest.fn(); |
||||
|
||||
jest.mock('../../../store/actions', () => { |
||||
return { |
||||
hideBetaHeader: () => { |
||||
mockHideBetaHeader(); |
||||
}, |
||||
}; |
||||
}); |
||||
|
||||
describe('Beta Header', () => { |
||||
let store; |
||||
|
||||
beforeEach(() => { |
||||
store = configureMockStore([thunk])(mockState); |
||||
}); |
||||
|
||||
afterEach(() => { |
||||
mockHideBetaHeader.mockClear(); |
||||
}); |
||||
|
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider(<BetaHeader />, store); |
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
describe('Beta Header', () => { |
||||
it('gets hidden when close button is clicked', () => { |
||||
const { queryByTestId } = renderWithProvider(<BetaHeader />, store); |
||||
|
||||
const closeButton = queryByTestId('beta-header-close'); |
||||
fireEvent.click(closeButton); |
||||
|
||||
expect(mockHideBetaHeader).toHaveBeenCalledTimes(1); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,59 @@ |
||||
import React from 'react'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
|
||||
import Box from '../../ui/box/box'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
TYPOGRAPHY, |
||||
COLORS, |
||||
BLOCK_SIZES, |
||||
DISPLAY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { BETA_BUGS_URL } from '../../../helpers/constants/beta'; |
||||
|
||||
import { hideBetaHeader } from '../../../store/actions'; |
||||
|
||||
const BetaHeader = () => { |
||||
const t = useI18nContext(); |
||||
|
||||
return ( |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
width={BLOCK_SIZES.FULL} |
||||
backgroundColor={COLORS.WARNING_DEFAULT} |
||||
padding={2} |
||||
className="beta-header" |
||||
> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H7} |
||||
marginTop={0} |
||||
marginBottom={0} |
||||
className="beta-header__message" |
||||
color={COLORS.WARNING_INVERSE} |
||||
> |
||||
{t('betaHeaderText', [ |
||||
<a |
||||
href={BETA_BUGS_URL} |
||||
key="link" |
||||
target="_blank" |
||||
rel="noreferrer noopener" |
||||
> |
||||
{t('here')} |
||||
</a>, |
||||
])} |
||||
</Typography> |
||||
<button |
||||
className="beta-header__button" |
||||
data-testid="beta-header-close" |
||||
onClick={() => { |
||||
hideBetaHeader(); |
||||
}} |
||||
aria-label={t('close')} |
||||
> |
||||
<i className="fa fa-times" /> |
||||
</button> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default BetaHeader; |
||||
@ -0,0 +1,16 @@ |
||||
.beta-header { |
||||
&__message { |
||||
text-align: center; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
&__button { |
||||
background: transparent; |
||||
padding: 0 6px; |
||||
margin: 0; |
||||
|
||||
i { |
||||
color: var(--color-warning-inverse); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export const BETA_BUGS_URL = 'https://metamask.zendesk.com/hc/en-us'; |
||||
Loading…
Reference in new issue