mirror of
https://github.com/SomboChea/ui
synced 2026-01-18 00:56:00 +07:00
feat: Added Theme and migrate to emotion@10.x 🚀 (#286)
* chore: updated emotion dependency * feat: introduced theme * refactor: updated emotion styles * fix: fixed emotion error * fix: fixed tests * chore: add missing types Co-Authored-By: Thomas Klein <tmkn@users.noreply.github.com>
This commit is contained in:
Priscila Oliveira
committed by
Juan Picado @jotadeveloper
Juan Picado @jotadeveloper
parent
a0dcf87368
commit
111f0c50e5
@@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import { render } from '../../utils/test-react-testing-library';
|
||||
|
||||
import Help from './Help';
|
||||
|
||||
describe('<Help /> component', () => {
|
||||
test('should render the component in default state', () => {
|
||||
const wrapper = mount(<Help />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
test('should load the component in default state', () => {
|
||||
const { container } = render(<Help />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,3 +1,159 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Help /> component should render the component in default state 1`] = `"<div class=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root css-ryznli e1wgaou60 MuiPaper-rounded\\" id=\\"help-card\\"><div class=\\"MuiCardContent-root\\"><h2 class=\\"MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom\\" id=\\"help-card__title\\">No Package Published Yet.</h2><h6 class=\\"MuiTypography-root css-zg2fwz e1wgaou61 MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">To publish your first package just:</h6><p class=\\"MuiTypography-root MuiTypography-body1\\">1. Login</p><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-lh0wgu eb8w2fo1\\">npm adduser --registry http://localhost</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div><p class=\\"MuiTypography-root MuiTypography-body1\\">2. Publish</p><div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-lh0wgu eb8w2fo1\\">npm publish --registry http://localhost</span><button class=\\"MuiButtonBase-root MuiIconButton-root css-0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div><p class=\\"MuiTypography-root MuiTypography-body2\\">3. Refresh this page.</p></div><div class=\\"MuiCardActions-root MuiCardActions-spacing\\"><a class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall\\" tabindex=\\"0\\" aria-disabled=\\"false\\" href=\\"https://verdaccio.org/docs/en/installation\\"><span class=\\"MuiButton-label\\">Learn More</span><span class=\\"MuiTouchRipple-root\\"></span></a></div></div>"`;
|
||||
exports[`<Help /> component should load the component in default state 1`] = `
|
||||
.emotion-14 {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.emotion-0 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.emotion-6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
height: 21px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
<div
|
||||
class="MuiPaper-root MuiPaper-elevation1 MuiCard-root emotion-14 emotion-15 MuiPaper-rounded"
|
||||
id="help-card"
|
||||
>
|
||||
<div
|
||||
class="MuiCardContent-root"
|
||||
>
|
||||
<h2
|
||||
class="MuiTypography-root MuiTypography-h5 MuiTypography-gutterBottom"
|
||||
id="help-card__title"
|
||||
>
|
||||
No Package Published Yet.
|
||||
</h2>
|
||||
<h6
|
||||
class="MuiTypography-root emotion-0 emotion-1 MuiTypography-h6 MuiTypography-colorTextSecondary MuiTypography-gutterBottom"
|
||||
>
|
||||
To publish your first package just:
|
||||
</h6>
|
||||
<p
|
||||
class="MuiTypography-root MuiTypography-body1"
|
||||
>
|
||||
1. Login
|
||||
</p>
|
||||
<div
|
||||
class="emotion-6 emotion-7"
|
||||
>
|
||||
<span
|
||||
class="emotion-2 emotion-3"
|
||||
>
|
||||
npm adduser --registry http://localhost
|
||||
</span>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
|
||||
tabindex="0"
|
||||
title="Copy to Clipboard"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
class="MuiTypography-root MuiTypography-body1"
|
||||
>
|
||||
2. Publish
|
||||
</p>
|
||||
<div
|
||||
class="emotion-6 emotion-7"
|
||||
>
|
||||
<span
|
||||
class="emotion-2 emotion-3"
|
||||
>
|
||||
npm publish --registry http://localhost
|
||||
</span>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root emotion-4 emotion-5"
|
||||
tabindex="0"
|
||||
title="Copy to Clipboard"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p
|
||||
class="MuiTypography-root MuiTypography-body2"
|
||||
>
|
||||
3. Refresh this page.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="MuiCardActions-root MuiCardActions-spacing"
|
||||
>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall"
|
||||
href="https://verdaccio.org/docs/en/installation"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Learn More
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { default as Typography } from '../../muiComponents/Heading';
|
||||
import Card from '../../muiComponents/Card';
|
||||
|
||||
export const CardStyled = styled(Card)({
|
||||
'&&': {
|
||||
width: '600px',
|
||||
margin: 'auto',
|
||||
},
|
||||
width: 600,
|
||||
margin: 'auto',
|
||||
});
|
||||
|
||||
export const HelpTitle = styled(Typography)({
|
||||
'&&': {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
marginBottom: 20,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user