Self contained styles (+pptr) (#387)

* Styles are now encapsulated

.storybook/main.mod.css

@@ -1,3 +1,9 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
 body {
   overflow: auto;
 }

package.json

@@ -186,6 +186,7 @@
     "postcss-preset-env": "6.5.0",
     "postcss-reporter": "6.0.0",
     "postcss-safe-parser": "4.0.1",
+    "pptr-testing-library": "0.3.1",
     "prettier": "1.15.3",
     "puppeteer": "1.11.0",
     "rcfile": "1.0.3",

playground/src/playground.css

@@ -0,0 +1,5 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}

playground/src/playground.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PrimaryButton, MoneyInput, i18n } from 'ui-kit';
 import { IntlProvider } from 'react-intl';
+import './playground.css';
 
 export default class Playground extends React.Component {
   static displayName = 'Playground';

src/components/avatar/avatar.js

@@ -37,7 +37,7 @@ const GravatarImg = props => (
     className={styles['gravatar-img']}
     src={createGravatarImgUrl(props.hash, getSizeInPx(props.size))}
     srcSet={oneLineTrim`
-      ${createGravatarImgUrl(props.hash, getSizeInPx(props.size))} 1x, 
+      ${createGravatarImgUrl(props.hash, getSizeInPx(props.size))} 1x,
       ${createGravatarImgUrl(props.hash, getSizeInPx(props.size) * 2)} 2x
     `}
   />
@@ -50,7 +50,9 @@ GravatarImg.propTypes = {
 };
 
 const Initials = props => (
-  <div className={styles.initials}>
+  <div
+    className={classnames(styles.initials, styles[`initials-${props.size}`])}
+  >
     {getInitialsFromName({
       firstName: props.firstName,
       lastName: props.lastName,
@@ -62,6 +64,7 @@ Initials.displayName = 'Initials';
 Initials.propTypes = {
   firstName: PropTypes.string,
   lastName: PropTypes.string,
+  size: PropTypes.oneOf(['s', 'm', 'l']).isRequired,
 };
 
 const Avatar = props => (
@@ -76,7 +79,11 @@ const Avatar = props => (
     {...filterDataAttributes(props)}
   >
     <GravatarImg hash={props.gravatarHash} size={props.size} />
-    <Initials firstName={props.firstName} lastName={props.lastName} />
+    <Initials
+      size={props.size}
+      firstName={props.firstName}
+      lastName={props.lastName}
+    />
   </div>
 );
 Avatar.displayName = 'Avatar';

src/components/avatar/avatar.mod.css

@@ -6,8 +6,10 @@
 
 .avatar-base {
   align-items: center;
+  font-family: var(--font-family-default);
   background-color: var(--color-gray-60);
   border-radius: 100%;
+  font-size: var(--font-size-default);
   color: var(--color-white);
   display: flex;
   justify-content: center;
@@ -34,20 +36,29 @@
   opacity: 0.7;
 }
 
+.initials-s {
+  font-size: 1em;
+}
+
+.initials-m {
+  font-size: 1.5em;
+}
+
+.initials-l {
+  font-size: 3em;
+}
+
 .avatar-s {
-  font-size: 1rem;
   height: var(--size-s);
   width: var(--size-s);
 }
 
 .avatar-m {
-  font-size: 1.5rem;
   height: var(--size-m);
   width: var(--size-m);
 }
 
 .avatar-l {
-  font-size: 3rem;
   height: var(--size-l);
   width: var(--size-l);
 }

src/components/avatar/avatar.spec.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import oneLineTrim from 'common-tags/lib/oneLineTrim';
 import Avatar from './avatar';
 import { render } from '../../test-utils';
 
@@ -19,25 +18,4 @@ describe('Avatar', () => {
 
     expect(container.querySelector("[data-foo='bar']")).toBeInTheDocument();
   });
-
-  it('should render an <img> with `src` attribute', () => {
-    const { container } = render(<Avatar data-foo="bar" {...props} />);
-
-    expect(container.querySelector('img')).toHaveAttribute(
-      'src',
-      'https://www.gravatar.com/avatar/20c9c1b252b46ab49d6f7a4cee9c3e68?s=100&d=blank'
-    );
-  });
-
-  it('should render an <img> with `srcset` attribute', () => {
-    const { container } = render(<Avatar data-foo="bar" {...props} />);
-
-    expect(container.querySelector('img')).toHaveAttribute(
-      'srcset',
-      oneLineTrim`
-        https://www.gravatar.com/avatar/20c9c1b252b46ab49d6f7a4cee9c3e68?s=100&d=blank 1x, 
-        https://www.gravatar.com/avatar/20c9c1b252b46ab49d6f7a4cee9c3e68?s=200&d=blank 2x
-      `
-    );
-  });
 });

src/components/buttons/accessible-button/accessible-button.mod.css

@@ -10,6 +10,8 @@
   cursor: pointer;
   color: inherit;
   font: inherit;
+  font-size: var(--font-size-default);
+  font-family: var(--font-family-default);
 }
 
 .disabled {

src/components/buttons/primary-button/primary-button.mod.css

@@ -22,7 +22,7 @@
 .button {
   display: flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: var(--font-size-default);
 }
 
 .button {

src/components/buttons/secondary-button/secondary-button.mod.css

@@ -12,7 +12,7 @@
   background-color: var(--color-white);
   box-shadow: var(--shadow-7);
   color: var(--color-black);
-  font-size: 1rem;
+  font-size: var(--font-size-default);
   transition: background-color var(--transition-linear-80ms),
     box-shadow var(--transition-easeinout-150ms);
 }
@@ -36,6 +36,10 @@
   border-radius: var(--border-radius-6);
 }
 
+a.container {
+  text-decoration: none;
+}
+
 /* The actual button element */
 
 .button {

src/components/buttons/secondary-button/secondary-button.visualspec.js

@@ -1,12 +1,17 @@
 import { percySnapshot } from '@percy/puppeteer';
+import { getDocument, queries } from 'pptr-testing-library';
+
+const { getByLabelText } = queries;
 
 describe('SecondaryButton', () => {
   beforeAll(async () => {
     await page.goto(`${HOST}/secondary-button`);
   });
 
   it('Default', async () => {
-    await expect(page).toMatch('A label text');
+    const doc = await getDocument(page);
+    const button = await getByLabelText(doc, 'A label text');
+    expect(button).toBeTruthy();
     await percySnapshot(page, 'SecondaryButton');
   });
 });

src/components/field-label/field-label.mod.css

@@ -1,9 +1,3 @@
-.wrapper {
-  overflow: hidden;
-  width: 100%;
-  flex: 1;
-}
-
 .hint,
 .label {
   float: left;

src/components/inputs/date-time-input/date-time-input.visualspec.js

@@ -1,6 +1,6 @@
 import { percySnapshot } from '@percy/puppeteer';
 
-describe('DateTimeIpnut', () => {
+describe('DateTimeInput', () => {
   it('Default', async () => {
     await page.goto(`${HOST}/date-time-input`);
     await expect(page).toMatch('minimal');

src/components/inputs/date-time-input/time-input.mod.css

@@ -5,8 +5,8 @@
   border-top: 1px solid var(--color-gray-90);
   padding: 10px 0;
   outline: 0;
-  margin-top: var(--spacing-8);
   font-size: var(--font-size-default);
+  margin-top: var(--spacing-8);
   color: var(--color-black);
 }
 

src/components/inputs/localized-multiline-text-input/localized-multiline-text-input.mod.css

@@ -30,6 +30,7 @@
 }
 
 .input {
+  box-sizing: border-box;
   color: var(--font-color-default);
   font-family: var(--font-family-default);
   font-size: var(--font-size-default);

src/components/inputs/localized-text-input/localized-text-input.mod.css

@@ -9,6 +9,7 @@
 .languageLabel {
   /* avoid wrapping label onto new lines */
   flex: 1 0 auto;
+  box-sizing: border-box;
   color: var(--font-color-disabled);
   height: var(--size-height-input);
   line-height: var(--size-height-input);
@@ -24,6 +25,7 @@
 }
 
 .input {
+  box-sizing: border-box;
   color: var(--font-color-default);
   font-family: var(--font-family-default);
   font-size: var(--font-size-default);

src/components/inputs/money-input/money-input.mod.css

@@ -9,9 +9,12 @@
   padding: 0 var(--spacing-8);
   align-items: center;
   min-width: 72px;
+  font-size: var(--font-size-default);
+  box-sizing: border-box;
 }
 
 .field-container {
+  font-family: var(--font-family-default);
   width: 100%;
   position: relative;
   display: flex;
@@ -20,6 +23,7 @@
 .amountInput {
   display: flex;
   flex: 1;
+  box-sizing: border-box;
   color: var(--font-color-default);
   font-family: var(--font-family-default);
   font-size: var(--font-size-default);

src/components/inputs/multiline-text-input/multiline-text-input.mod.css

@@ -13,6 +13,7 @@
 /* Default */
 
 .textarea {
+  box-sizing: border-box;
   color: var(--font-color-default);
   font-family: var(--font-family-default);
   font-size: var(--font-size-default);

src/components/inputs/number-input/number-input.mod.css

@@ -7,6 +7,7 @@
 
 .input {
   color: var(--font-color-default);
+  box-sizing: border-box;
   font-family: var(--font-family-default);
   font-size: var(--font-size-default);
   height: var(--size-height-input);

src/components/inputs/password-input/password-input.mod.css

@@ -6,6 +6,7 @@
 }
 
 .input {
+  box-sizing: border-box;
   color: var(--font-color-default);
   font-family: var(--font-family-default);
   font-size: var(--font-size-default);

src/components/inputs/text-input/text-input.mod.css

@@ -19,6 +19,7 @@
   transition: var(--transition-standard);
   outline: none;
   box-shadow: none;
+  box-sizing: border-box;
   appearance: none;
 }