perf(styles): assume edx branding assets are present for styles. (#189)

BREAKING CHANGE: The _cookie-policy-banner.scss now needs to be consumed after the edX brand styles are loaded, otherwise the styles will throw a compilation error.

README.md

@@ -35,10 +35,20 @@ const SomeWrappingComponent = () => (
 
 As noted in a comment in the previous code example, you can import the styles associated with the `CookiePolicyBanner` component directly (if this is supported by your `webpack` config) or by importing the sass file as part of one of your existing sass files (probably where your other third-party sass files are imported).
 
+
+Requirement: | The `CookiePolicyBanner` sass file assumes the presence of an @edx/brand theme
+:---: | :---
+
 ```sass
 // base.scss
 @import 'thirdPartySass';
 @import 'anotherThirdPartySass';
+
+// Theme styles
+@import '@edx/brand/paragon/fonts';
+@import '@edx/brand/paragon/variables';
+
+// Cookie Policy Banner style
 @import '@edx/frontend-component-cookie-policy-banner/build/frontend-component-cookie-policy-banner';
 ```
 

src/CookiePolicyBanner/CookiePolicyBanner.stories.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import CookiePolicyBanner from './index';
-import './_cookie-policy-banner.scss';
+
+import './_storybook-styles.scss';
 
 storiesOf('Cookie Policy Banner', CookiePolicyBanner)
   .add('basic usage', () => (<CookiePolicyBanner />))

src/CookiePolicyBanner/_cookie-policy-banner.scss

@@ -1,10 +1,10 @@
-@import "@edx/brand-edx.org/paragon/variables";
-
 $cookie-banner-background-color: #f2f8fd !default;
 $cookie-banner-text-color: #4e4e4e !default;
 $cookie-banner-cta-base: #0075b4 !default;
 $cookie-banner-cta-hover: #075683 !default;
 
+$font-family-sans-serif: Arial, sans-serif !default;
+
 .edx-cookie-banner-wrapper {
   background: $cookie-banner-background-color;
   box-sizing: border-box;

src/CookiePolicyBanner/_storybook-styles.scss

@@ -0,0 +1,5 @@
+/* Base styles the banner assumes are already present when used */
+@import '@edx/brand-edx.org/paragon/fonts';
+@import "@edx/brand-edx.org/paragon/variables";
+
+@import '_cookie-policy-banner.scss';