Merge pull request #570 from catho/QTM-723

feat(QTM-723): Typography converted from styled components to css mod…

.storybook/preview.js

@@ -1,11 +1,12 @@
-import GlobalStyle from '../components/GlobalStyle';
+import Typography from '../components/Typography';
 import '../components/theme.css';
 import '../components/_utilities.css';
+import '../components/global.css';
 
 const CSSDecorator = (Story, context) => (
   <>
     <Story {...context} />
-    <GlobalStyle />
+    <Typography />
   </>
 );
 

.storybook/regression-test/preview.js

@@ -1,12 +1,13 @@
 import 'loki/configure-react';
-import GlobalStyle from '../../components/GlobalStyle';
+import Typography from '../../components/Typography';
 import '../../components/theme.css';
 import '../../components/_utilities.css';
+import '../../components/global.css';
 
 const CSSDecorator = (Story, context) => (
   <div id="regression-test">
     <Story {...context} />
-    <GlobalStyle />
+    <Typography />
   </div>
 );
 

components/Typography/Typography.jsx

@@ -0,0 +1,21 @@
+const Typography = () => (
+  <>
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossOrigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,400i,600i,700i&display=swap"
+      as="font"
+      crossOrigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,400i,600i,700i&display=swap"
+      rel="stylesheet"
+    />
+  </>
+);
+
+export default Typography;

components/GlobalStyle/sub-components/Typography.unit.test.jsx → components/Typography/Typography.unit.test.jsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 
 import Typography from './Typography';
 
-import { expectCSSMatches } from '../../../test-utils/helpers/shared/test.utils';
+import { expectCSSMatches } from '../../test-utils/helpers/shared/test.utils';
 
 describe.skip('Typography component', () => {
   it('Should match snapshot', () => {

components/Typography/index.css

@@ -0,0 +1,2 @@
+@import "./sub-components/Blockquote.module.css";
+@import "./sub-components/Subtitle.module.css";

components/Typography/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+
+declare const Typography: FC;
+
+export default Typography;

components/Typography/index.js

@@ -0,0 +1,7 @@
+import Typography from './Typography';
+import Title from './sub-components/Title';
+import Subtitle from './sub-components/Subtitle';
+import Blockquote from './sub-components/Blockquote';
+
+export { Title, Subtitle, Blockquote };
+export default Typography;

components/Typography/sub-components/Blockquote.jsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames';
+import styles from './Blockquote.module.css';
+
+const Blockquote = ({ className = '', children, ...props }) => {
+  const classContent = classNames(styles.blockquote, className);
+  return (
+    <blockquote className={classContent} {...props}>
+      {children}
+    </blockquote>
+  );
+};
+
+export default Blockquote;

components/Typography/sub-components/Blockquote.module.css

@@ -0,0 +1,6 @@
+.blockquote {
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  margin: 0;
+}

components/Typography/sub-components/Subtitle.jsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames';
+import styles from './Subtitle.module.css';
+
+const Subtitle = ({ className = '', children, ...props }) => {
+  const classContent = classNames(styles.span, className);
+  return (
+    <span className={classContent} {...props}>
+      {children}
+    </span>
+  );
+};
+
+export default Subtitle;

components/Typography/sub-components/Subtitle.module.css

@@ -0,0 +1,5 @@
+.span {
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: 0.3px;
+}

components/Typography/sub-components/Title.jsx

@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+
+const Title = ({ className = '', children, ...props }) => {
+  const classContent = classNames(className);
+  return (
+    <h1 className={classContent} {...props}>
+      {children}
+    </h1>
+  );
+};
+
+export default Title;

components/GlobalStyle/sub-components/__snapshots__/Blockquote.unit.test.jsx.snap → components/Typography/sub-components/__snapshots__/Blockquote.unit.test.jsx.snap

@@ -2,18 +2,15 @@
 
 exports[`<Blockquote /> Should match the snapshot 1`] = `
 <DocumentFragment>
-  .c0 {
+  .Blockquote-module__blockquote___Xqdgz {
   font-size: 12px;
+  letter-spacing: .2px;
   line-height: 18px;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
   margin: 0;
 }
 
 <blockquote
-    class="c0"
+    class="Blockquote-module__blockquote___Xqdgz"
   />
 </DocumentFragment>
 `;

components/GlobalStyle/sub-components/__snapshots__/Subtitle.unit.test.jsx.snap → components/Typography/sub-components/__snapshots__/Subtitle.unit.test.jsx.snap

@@ -2,17 +2,14 @@
 
 exports[`<Subtitle /> Should match the snapshot 1`] = `
 <DocumentFragment>
-  .c0 {
+  .Subtitle-module__span___BW9AV {
   font-size: 14px;
+  letter-spacing: .3px;
   line-height: 21px;
-  -webkit-letter-spacing: 0.3px;
-  -moz-letter-spacing: 0.3px;
-  -ms-letter-spacing: 0.3px;
-  letter-spacing: 0.3px;
 }
 
 <span
-    class="c0"
+    class="Subtitle-module__span___BW9AV"
   />
 </DocumentFragment>
 `;