diff --git a/cms/envs/common.py b/cms/envs/common.py
index 71389ff71444e0375d8ba2d848183c608cf3a4c5..dc65e725e1ab1a3b43c95b56f72144a074de7ef8 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -568,19 +568,29 @@ PIPELINE_CSS = {
],
'output_filename': 'css/cms-style-vendor-tinymce-skin.css',
},
- 'style-main': {
- # this is unnecessary and can be removed
+ 'style-main-v1': {
'source_filenames': [
- 'css/studio-main.css',
+ 'css/studio-main-v1.css',
],
- 'output_filename': 'css/studio-main.css',
+ 'output_filename': 'css/studio-main-v1.css',
},
- 'style-main-rtl': {
- # this is unnecessary and can be removed
+ 'style-main-v1-rtl': {
'source_filenames': [
- 'css/studio-main-rtl.css',
+ 'css/studio-main-v1-rtl.css',
],
- 'output_filename': 'css/studio-main-rtl.css',
+ 'output_filename': 'css/studio-main-v1-rtl.css',
+ },
+ 'style-main-v2': {
+ 'source_filenames': [
+ 'css/studio-main-v2.css',
+ ],
+ 'output_filename': 'css/studio-main-v2.css',
+ },
+ 'style-main-v2-rtl': {
+ 'source_filenames': [
+ 'css/studio-main-v2-rtl.css',
+ ],
+ 'output_filename': 'css/studio-main-v2-rtl.css',
},
'style-edx-icons': {
'source_filenames': [
diff --git a/cms/static/sass/_build.scss b/cms/static/sass/_build-v1.scss
similarity index 98%
rename from cms/static/sass/_build.scss
rename to cms/static/sass/_build-v1.scss
index 57a133fa83aa4d5319ea1d7a102eb4934df77a4e..f6770f4b9b2fdd44ef52b276733729607d29a63e 100644
--- a/cms/static/sass/_build.scss
+++ b/cms/static/sass/_build-v1.scss
@@ -1,5 +1,6 @@
// ------------------------------
// Studio: Shared Build Compile
+// Version 1 styling (pre-Pattern Library)
// About: Sass compile for Studio that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the studio-main-*.scss files.
diff --git a/cms/static/sass/_build-v2.scss b/cms/static/sass/_build-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a032042f63fea8f94a84b3d78bf488c055e9814
--- /dev/null
+++ b/cms/static/sass/_build-v2.scss
@@ -0,0 +1,9 @@
+// ------------------------------
+// Studio: Shared Build Compile
+// Version 2 - introduces the Pattern Library
+
+
+// Configuration
+@import 'config';
+
+// Extensions
diff --git a/cms/static/sass/_config.scss b/cms/static/sass/_config.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a1c263754bb0d9ac375af0059073150770818a11
--- /dev/null
+++ b/cms/static/sass/_config.scss
@@ -0,0 +1,7 @@
+// ------------------------------
+// Studio configuration settings
+
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------
diff --git a/cms/static/sass/studio-main-rtl.scss b/cms/static/sass/studio-main-v1-rtl.scss
similarity index 88%
rename from cms/static/sass/studio-main-rtl.scss
rename to cms/static/sass/studio-main-v1-rtl.scss
index 7bd76516bb6eb4e0e9448f6bd37559e99e39faeb..83150f360775495fd4a67edf0b48b3a9dca1054d 100644
--- a/cms/static/sass/studio-main-rtl.scss
+++ b/cms/static/sass/studio-main-v1-rtl.scss
@@ -17,4 +17,4 @@
@import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-@import 'build'; // shared app style assets/rendering
+@import 'build-v1'; // shared app style assets/rendering
diff --git a/cms/static/sass/studio-main.scss b/cms/static/sass/studio-main-v1.scss
similarity index 76%
rename from cms/static/sass/studio-main.scss
rename to cms/static/sass/studio-main-v1.scss
index 00db34fabee3f272810e6d2d867000cf0d605b4c..4c40522015ec6b56921e34df279bb0bdac9a426c 100644
--- a/cms/static/sass/studio-main.scss
+++ b/cms/static/sass/studio-main-v1.scss
@@ -1,4 +1,5 @@
-// studio - css architecture
+// Studio - css architecture
+// Version 1 styling (pre-Pattern Library)
// ====================
// Table of Contents
@@ -17,4 +18,4 @@
@import 'bourbon/bourbon'; // lib - bourbon
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
-@import 'build'; // shared app style assets/rendering
+@import 'build-v1'; // shared app style assets/rendering
diff --git a/cms/static/sass/studio-main-v2-rtl.scss b/cms/static/sass/studio-main-v2-rtl.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9f0643502f1e9833dc4b1f0fa840c4a3fc2d3737
--- /dev/null
+++ b/cms/static/sass/studio-main-v2-rtl.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// Studio main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror main-ltr w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Load the shared build
+@import 'build-v2';
diff --git a/cms/static/sass/studio-main-v2.scss b/cms/static/sass/studio-main-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cd355d5a7d162c456a414be561dc66044887aad5
--- /dev/null
+++ b/cms/static/sass/studio-main-v2.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// Studio main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror main-rtl w/ the exception of bi-app references.
+
+
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Load the shared build
+@import 'build-v2';
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 8dc7502e1091ac01b64da93086fff0594adf4646..82e41001197317b07bcf8bc675cdaf68ffab10b6 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -1,4 +1,10 @@
## coding=utf-8
+
+## Pages currently use v1 styling by default. Once the Pattern Library
+## rollout has been completed, this default can be switched to v2.
+<%! main_css = "style-main-v1" %>
+
+## Standard imports
<%namespace name='static' file='static_content.html'/>
<%!
from django.utils.translation import ugettext as _
@@ -7,6 +13,7 @@ from openedx.core.djangolib.js_utils import (
dump_js_escaped_json, js_escaped_string
)
%>
+
<%page expression_filter="h"/>
<!doctype html>
<!--[if lte IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
@@ -36,7 +43,8 @@ from openedx.core.djangolib.js_utils import (
<%static:css group='style-vendor'/>
<%static:css group='style-vendor-tinymce-content'/>
<%static:css group='style-vendor-tinymce-skin'/>
- <%static:css group='style-main'/>
+
+ <%static:css group='${self.attr.main_css}'/>
<%include file="widgets/segment-io.html" />
diff --git a/cms/templates/ux/reference/index.html b/cms/templates/ux/reference/index.html
index 4121778dcde1f26fd47e4dfecef1968086f4d8b7..5f7c6d1aeb8c8f76e60a7a867baa1a9ca504632f 100644
--- a/cms/templates/ux/reference/index.html
+++ b/cms/templates/ux/reference/index.html
@@ -24,6 +24,7 @@
<ul>
<li><a href="container.html">Container page</a></li>
<li><a href="unit.html">Unit page</a></li>
+ <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
</ul>
</section>
</li>
diff --git a/cms/templates/ux/reference/pattern-library-test.html b/cms/templates/ux/reference/pattern-library-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..0881993f7e3f1f2884c1ee46fa29fa99550d61fb
--- /dev/null
+++ b/cms/templates/ux/reference/pattern-library-test.html
@@ -0,0 +1,23 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
+<%inherit file="../../base.html" />
+
+<%block name="title">Pattern Library Test Page</%block>
+<%block name="bodyclass">is-signedin pattern-library</%block>
+
+<%block name="content">
+<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
+<div class="example-set">
+ <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
+ <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+
+ <div class="alert-message">
+ <p class="alert-copy">
+ Interesting pattern library content to come...
+ </p>
+ </div>
+
+ </div>
+</div>
+</%block>
diff --git a/common/djangoapps/pipeline_mako/tests/test_render.py b/common/djangoapps/pipeline_mako/tests/test_render.py
index a7c50d8e1907bd3b8ebc0bb43a087547e9b71132..e93c4dd2a7813f246d6082babe58dcb073985b59 100644
--- a/common/djangoapps/pipeline_mako/tests/test_render.py
+++ b/common/djangoapps/pipeline_mako/tests/test_render.py
@@ -1,7 +1,12 @@
""" Tests for rendering functions in the mako pipeline. """
+import ddt
+from unittest import skipUnless
+
+from django.conf import settings
from django.test import TestCase
-from pipeline_mako import render_require_js_path_overrides
+
+from pipeline_mako import render_require_js_path_overrides, compressed_css, compressed_js
class RequireJSPathOverridesTest(TestCase):
@@ -31,3 +36,43 @@ class RequireJSPathOverridesTest(TestCase):
result = render_require_js_path_overrides(self.OVERRIDES)
# To make the string comparision easy remove the whitespaces
self.assertEqual(map(str.strip, result.splitlines()), self.OVERRIDES_JS)
+
+
+@ddt.ddt
+class PipelineRenderTest(TestCase):
+ """Test individual pipeline rendering functions. """
+
+ @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS')
+ @ddt.data(
+ (True,),
+ (False,),
+ )
+ def test_compressed_css(self, pipeline_enabled):
+ """
+ Verify the behavior of compressed_css, with the pipeline
+ both enabled and disabled.
+ """
+ with self.settings(PIPELINE_ENABLED=pipeline_enabled):
+ # Verify the default behavior
+ css_include = compressed_css('style-main-v1')
+ self.assertIn(u'lms-main-v1.css', css_include)
+
+ # Verify that raw keyword causes raw URLs to be emitted
+ css_include = compressed_css('style-main-v1', raw=True)
+ self.assertIn(u'lms-main-v1.css?raw', css_include)
+
+ @skipUnless(settings.ROOT_URLCONF == 'lms.urls', 'Test only valid in LMS')
+ def test_compressed_js(self):
+ """
+ Verify the behavior of compressed_css, with the pipeline
+ both enabled and disabled.
+ """
+ # Verify that a single JS file is rendered with the pipeline enabled
+ with self.settings(PIPELINE_ENABLED=True):
+ js_include = compressed_js('base_application')
+ self.assertIn(u'lms-base-application.js', js_include)
+
+ # Verify that multiple JS files are rendered with the pipeline disabled
+ with self.settings(PIPELINE_ENABLED=False):
+ js_include = compressed_js('base_application')
+ self.assertIn(u'/static/js/src/logger.js', js_include)
diff --git a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
index 54ef5ff84fd3eb3294980f752b9483857b4dcb7f..dcc8d104852ab1cb17c93e3883e103728f6846ea 100644
--- a/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
+++ b/lms/djangoapps/courseware/tests/test_comprehensive_theming.py
@@ -104,8 +104,8 @@ class TestComprehensiveTheming(TestCase):
"""
Test that static files finders are adjusted according to the applied comprehensive theme.
"""
- result = staticfiles.finders.find('red-theme/css/lms-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('red-theme/css/lms-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "themes/red-theme/lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
@@ -117,8 +117,8 @@ class TestComprehensiveTheming(TestCase):
"""
Test default css is served if no theme is applied
"""
- result = staticfiles.finders.find('css/lms-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('css/lms-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
diff --git a/lms/envs/common.py b/lms/envs/common.py
index 6c84403569a04299198cb674ca43685c71ece96e..612386f2d2227ebea7f3600ae68ce81aebc12707 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1390,19 +1390,29 @@ PIPELINE_CSS = {
],
'output_filename': 'css/lms-style-vendor-tinymce-skin.css',
},
- 'style-main': {
- # this is unnecessary and can be removed
+ 'style-main-v1': {
'source_filenames': [
- 'css/lms-main.css',
+ 'css/lms-main-v1.css',
],
- 'output_filename': 'css/lms-main.css',
+ 'output_filename': 'css/lms-main-v1.css',
},
- 'style-main-rtl': {
- # this is unnecessary and can be removed
+ 'style-main-v1-rtl': {
'source_filenames': [
- 'css/lms-main-rtl.css',
+ 'css/lms-main-v1-rtl.css',
],
- 'output_filename': 'css/lms-main-rtl.css',
+ 'output_filename': 'css/lms-main-v1-rtl.css',
+ },
+ 'style-main-v2': {
+ 'source_filenames': [
+ 'css/lms-main-v2.css',
+ ],
+ 'output_filename': 'css/lms-main-v2.css',
+ },
+ 'style-main-v2-rtl': {
+ 'source_filenames': [
+ 'css/lms-main-v2-rtl.css',
+ ],
+ 'output_filename': 'css/lms-main-v2-rtl.css',
},
'style-course-vendor': {
'source_filenames': [
diff --git a/lms/static/certificates/sass/_build.scss b/lms/static/certificates/sass/_build.scss
index c97b1b0c37c25aad495b197bb67a41f59130e6df..11bd2e994776406bee258a5fac0736086747fcfd 100644
--- a/lms/static/certificates/sass/_build.scss
+++ b/lms/static/certificates/sass/_build.scss
@@ -1,19 +1,15 @@
// ------------------------------
// Open edX Certificates: Shared Build Compile
-// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files.
+// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI.
+// Configuration and vendor specific imports happen before this shared set of imports are compiled
+// in the main-*.scss files.
-// ------------------------------
-// #CONFIG + LIB
-// ------------------------------
-@import 'lib';
+// Configuration
@import 'config';
-@import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library';
-// ------------------------------
-// #EXTENSIONS
-// ------------------------------
+// Extensions
@import 'utilities';
@import 'base';
@import 'components';
diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss
index d8e3a022d503ac23f8595b14b58be9c38bbd726b..911c68dd9a93be1f199dfe1c1400de12956192a8 100644
--- a/lms/static/certificates/sass/_config.scss
+++ b/lms/static/certificates/sass/_config.scss
@@ -1,14 +1,10 @@
// ------------------------------
// Open edX Certificates: Config
-// About: variable and configuration overrides
-
-// #VARIABLES
// ------------------------------
// #VARIABLES
// ------------------------------
-$pattern-library-path: '../../edx-pattern-library' !default;
// certificate characteristics
$cert-base-color: palette(grayscale-cool, dark);
diff --git a/lms/static/certificates/sass/_lib.scss b/lms/static/certificates/sass/_lib.scss
deleted file mode 100644
index 83b0a5588284bc6f363bf414c202fc5a0d9b8d8e..0000000000000000000000000000000000000000
--- a/lms/static/certificates/sass/_lib.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: third party libraries and dependencies import
-
-
-@import '../../../../node_modules/edx-pattern-library/node_modules/bourbon/app/assets/stylesheets/bourbon';
-@import '../../../../node_modules/edx-pattern-library/node_modules/susy/sass/susy';
-@import '../../../../node_modules/edx-pattern-library/node_modules/breakpoint-sass/stylesheets/breakpoint';
diff --git a/lms/static/certificates/sass/_ltr.scss b/lms/static/certificates/sass/_ltr.scss
deleted file mode 100644
index 392f53d3ddfa1e3039cf8067972928944553fd7e..0000000000000000000000000000000000000000
--- a/lms/static/certificates/sass/_ltr.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: Sass partial for defining settings and utilities for LTR-centric layouts.
-
-// #SETTINGS
-// #LIB
-
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$layout-direction: ltr;
-
-// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
-$grid-direction-default: ltr;
-$grid-direction-reversed: ltr;
-
-
-// ----------------------------
-// #LIB
-// ----------------------------
-@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-ltr';
diff --git a/lms/static/certificates/sass/_rtl.scss b/lms/static/certificates/sass/_rtl.scss
deleted file mode 100644
index ba219f69f8f54c60460831549d3560ba0a9d1d14..0000000000000000000000000000000000000000
--- a/lms/static/certificates/sass/_rtl.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// ------------------------------
-// Open edX Certificates: Main Style Compile
-
-// About: Sass partial for defining settings and utilities for LTR-centric layouts.
-
-// #SETTINGS
-// #LIB
-
-
-// ----------------------------
-// #SETTINGS
-// ----------------------------
-$layout-direction: rtl;
-
-// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
-$grid-direction-default: rtl;
-$grid-direction-reversed: ltr;
-
-
-// ----------------------------
-// #LIB
-// ----------------------------
-@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-rtl';
diff --git a/lms/static/certificates/sass/main-ltr.scss b/lms/static/certificates/sass/main-ltr.scss
index db0e51c41e9d3c47faf84a2639614a0dfb50b4d8..41f638c2b441498400c863748ed9f2a66716099d 100644
--- a/lms/static/certificates/sass/main-ltr.scss
+++ b/lms/static/certificates/sass/main-ltr.scss
@@ -3,16 +3,13 @@
// About: Sass compile for the Open edX Certificates Elements.
-// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references.
+// NOTE: This is the left to right (LTR) configured style compile.
+// It should mirror main-rtl w/ the exception of bi-app references.
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-@import 'ltr'; // LTR-specifc settings and utilities
-
+// Load the LTR version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build'; // shared compile/build order for both LTR and RTL UI
+// Load the shared build
+@import 'build';
diff --git a/lms/static/certificates/sass/main-rtl.scss b/lms/static/certificates/sass/main-rtl.scss
index 54a6ec443c60e8de48471dc79c6b286d8b2f657e..faea15b67e080cd0bd5a1ac18abde8166c97fd7d 100644
--- a/lms/static/certificates/sass/main-rtl.scss
+++ b/lms/static/certificates/sass/main-rtl.scss
@@ -3,16 +3,13 @@
// About: Sass compile for the Open edX Certificates Elements.
-// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references.
+// NOTE: This is the right to left (RTL) configured style compile.
+// It should mirror main-ltr w/ the exception of bi-app references.
-// ------------------------------
-// #CONFIG - layout direction
-// ------------------------------
-@import 'rtl'; // RTL-specifc settings and utilities
-
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build'; // shared compile/build order for both LTR and RTL UI
+// Load the shared build
+@import 'build';
diff --git a/lms/static/sass/_build-lms.scss b/lms/static/sass/_build-lms-v1.scss
similarity index 100%
rename from lms/static/sass/_build-lms.scss
rename to lms/static/sass/_build-lms-v1.scss
diff --git a/lms/static/sass/_build-lms-v2.scss b/lms/static/sass/_build-lms-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a982b28c2afc02c8e58abc3c996210997c8f2ea5
--- /dev/null
+++ b/lms/static/sass/_build-lms-v2.scss
@@ -0,0 +1,9 @@
+// ------------------------------
+// LMS: Shared Build Compile
+// Version 2 - introduces the Pattern Library
+
+
+// Configuration
+@import 'config';
+
+// Extensions
diff --git a/lms/static/sass/_config.scss b/lms/static/sass/_config.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3a6ab63c1766e94db849c1b1d014b8c4571595a
--- /dev/null
+++ b/lms/static/sass/_config.scss
@@ -0,0 +1,7 @@
+// ------------------------------
+// LMS configuration settings
+
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------
diff --git a/lms/static/sass/lms-main-rtl.scss b/lms/static/sass/lms-main-v1-rtl.scss
similarity index 78%
rename from lms/static/sass/lms-main-rtl.scss
rename to lms/static/sass/lms-main-v1-rtl.scss
index 7ab3e3cd35f78d68c340578045e597b686f6e216..0988836b425678e895acf85a8261b242f7553afe 100644
--- a/lms/static/sass/lms-main-rtl.scss
+++ b/lms/static/sass/lms-main-v1-rtl.scss
@@ -1,4 +1,5 @@
-// lms - css application architecture
+// LMS - CSS application architecture
+// Version 1 styling (pre-Pattern Library)
// ====================
// libs and resets *do not edit*
@@ -18,4 +19,4 @@
// theme, for old-style deprecated theming.
//<THEME-OVERRIDE>
-@import 'build-lms'; // shared app style assets/rendering
+@import 'build-lms-v1'; // shared app style assets/rendering
diff --git a/lms/static/sass/lms-main.scss b/lms/static/sass/lms-main-v1.scss
similarity index 76%
rename from lms/static/sass/lms-main.scss
rename to lms/static/sass/lms-main-v1.scss
index 1a79ca04426f8716bd4ea1c43ed85a0e1b680278..ca36fb3acb95820f79092268e72907e7919749e9 100644
--- a/lms/static/sass/lms-main.scss
+++ b/lms/static/sass/lms-main-v1.scss
@@ -1,4 +1,5 @@
-// lms - css application architecture
+// LMS - CSS application architecture
+// Version 1 styling (pre-Pattern Library)
// ====================
// libs and resets *do not edit*
@@ -17,4 +18,4 @@
// theme, for old-style deprecated theming.
//<THEME-OVERRIDE>
-@import 'build-lms'; // shared app style assets/rendering
+@import 'build-lms-v1'; // shared app style assets/rendering
diff --git a/lms/static/sass/lms-main-v2-rtl.scss b/lms/static/sass/lms-main-v2-rtl.scss
new file mode 100644
index 0000000000000000000000000000000000000000..195b752386a162a1758afd4d5585ce2a9601dfd9
--- /dev/null
+++ b/lms/static/sass/lms-main-v2-rtl.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// LMS main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the right-to-left (RTL) configured style compile.
+// It should mirror lms-main-v2 w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-rtl';
+
+// Load the shared build
+@import 'build-lms-v2';
diff --git a/lms/static/sass/lms-main-v2.scss b/lms/static/sass/lms-main-v2.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ca43dfc041af52aa4443aa1092b02a677a4552f1
--- /dev/null
+++ b/lms/static/sass/lms-main-v2.scss
@@ -0,0 +1,14 @@
+// ------------------------------
+// LMS main styling
+// Version 2 - introduces the Pattern Library
+
+// NOTE: This is the left-to-right (LTR) configured style compile.
+// It should mirror lms-main-v2-rtl w/ the exception of bi-app references.
+
+
+// Load the RTL version of the edX Pattern Library
+$pattern-library-path: '../edx-pattern-library' !default;
+@import 'edx-pattern-library/pattern-library/sass/edx-pattern-library-ltr';
+
+// Load the shared build
+@import 'build-lms-v2';
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 827e578234a5cc38fbae80a4158a24ce25552c70..b7baaea2fc8f9e0bc29c69caf696b090440e1c7f 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -1,4 +1,15 @@
## coding=utf-8
+
+## This is the main Mako template that all page templates should include.
+## Note: there are a handful of pages that use Django Templates and which
+## instead include main_django.html. It is important that these two files
+## remain in sync, so changes made in one should be applied to the other.
+
+## Pages currently use v1 styling by default. Once the Pattern Library
+## rollout has been completed, this default can be switched to v2.
+<%! main_css = "style-main-v1" %>
+
+
<%namespace name='static' file='static_content.html'/>
<%!
from django.core.urlresolvers import reverse
@@ -49,17 +60,7 @@ from pipeline_mako import render_require_js_path_overrides
<link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
<%static:css group='style-vendor'/>
- ## We could do <%static:css group='style-main'/>, but that's only useful
- ## if the group contains multiple files, and the 'style-main' group doesn't.
- ## Instead, we'll construct this <link> element manually, to improve clarity.
- ## When nothing in the system is referencing the 'style-main' group, it can
- ## be removed from the environment file.
- <%
- application_css_path = "css/lms-main{rtl}.css".format(
- rtl="-rtl" if get_language_bidi() else "",
- )
- %>
- <link rel="stylesheet" href="${static.url(application_css_path)}" type="text/css" media="all" />
+ <%static:css group='${self.attr.main_css}'/>
% if disable_courseware_js:
<%static:js group='base_vendor'/>
diff --git a/lms/templates/main_django.html b/lms/templates/main_django.html
index fe9d8a65a8c047ae1a86633d3a8b0031fc4b745d..6925f17c80dd1d5db2eac3392c91db0d9f4dcb38 100644
--- a/lms/templates/main_django.html
+++ b/lms/templates/main_django.html
@@ -9,7 +9,7 @@
<link rel="icon" type="image/x-icon" href="{% favicon_path %}" />
{% stylesheet 'style-vendor' %}
- {% stylesheet 'style-main' %}
+ {% stylesheet 'style-main-v1' %}
{% block main_vendor_js %}
{% javascript 'main_vendor' %}
diff --git a/lms/templates/ux/reference/index.html b/lms/templates/ux/reference/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..e4ce1d11429c902b050b8d29d4fbc98a0d3e1908
--- /dev/null
+++ b/lms/templates/ux/reference/index.html
@@ -0,0 +1,27 @@
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+<%namespace name='static' file='/static_content.html'/>
+
+<%block name="pagetitle">UX Reference</%block>
+<%block name="nav_skip">#content</%block>
+
+<%block name="bodyclass">view-ux-reference</%block>
+
+<%block name="content">
+<div class="main-wrapper">
+ <div class="inner-wrapper">
+ <div class="main-column">
+ <article class="window unit-body">
+ <h1>UX Style Reference</h1>
+
+ <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
+ <h2>Page Types</h2>
+ <ul>
+ <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
+ </ul>
+ </section>
+ </article>
+ </div>
+ </div>
+</div>
+</%block>
diff --git a/lms/templates/ux/reference/pattern-library-test.html b/lms/templates/ux/reference/pattern-library-test.html
new file mode 100644
index 0000000000000000000000000000000000000000..cb4476610772e2151248c7fef33ea525a023325b
--- /dev/null
+++ b/lms/templates/ux/reference/pattern-library-test.html
@@ -0,0 +1,26 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Pattern Library Test</%block>
+<%block name="nav_skip">#content</%block>
+
+<%block name="bodyclass">pattern-library</%block>
+
+<%block name="content">
+<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3>
+<div class="example-set">
+ <div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
+ <span class="icon alert-icon icon-warning" aria-hidden="true"></span>
+
+ <div class="alert-message">
+ <p class="alert-copy">
+ Interesting pattern library content to come...
+ </p>
+ </div>
+
+ </div>
+</div>
+</%block>
diff --git a/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py b/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py
index b7852249d96d4b515249324149585e10810614f5..defc2502762363554dc087e273acf5383ee63c72 100644
--- a/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py
+++ b/openedx/core/djangoapps/theming/tests/test_theme_style_overrides.py
@@ -63,8 +63,8 @@ class TestComprehensiveThemeLMS(TestCase):
"""
Test that theme sass files are used instead of default sass files.
"""
- result = staticfiles.finders.find('test-theme/css/lms-main.css')
- self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('test-theme/css/lms-main-v1.css')
+ self.assertEqual(result, settings.TEST_THEME / "lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
@@ -115,8 +115,8 @@ class TestComprehensiveThemeCMS(TestCase):
"""
Test that theme sass files are used instead of default sass files.
"""
- result = staticfiles.finders.find('test-theme/css/studio-main.css')
- self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main.css")
+ result = staticfiles.finders.find('test-theme/css/studio-main-v1.css')
+ self.assertEqual(result, settings.TEST_THEME / "cms/static/css/studio-main-v1.css")
cms_main_css = ""
with open(result) as css_file:
@@ -161,8 +161,8 @@ class TestComprehensiveThemeDisabledLMS(TestCase):
"""
Test that default css files served without comprehensive themes applied.
"""
- result = staticfiles.finders.find('css/lms-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main.css")
+ result = staticfiles.finders.find('css/lms-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "lms/static/css/lms-main-v1.css")
lms_main_css = ""
with open(result) as css_file:
@@ -208,8 +208,8 @@ class TestComprehensiveThemeDisabledCMS(TestCase):
"""
Test that default css files served without comprehensive themes applied..
"""
- result = staticfiles.finders.find('css/studio-main.css')
- self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main.css")
+ result = staticfiles.finders.find('css/studio-main-v1.css')
+ self.assertEqual(result, settings.REPO_ROOT / "cms/static/css/studio-main-v1.css")
cms_main_css = ""
with open(result) as css_file:
diff --git a/package.json b/package.json
index 5b9cffa68b56a6a3fdcb31613193620908804168..35cc6a98292425290af50cc2014b0985ccc8ab76 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
"version": "0.1.0",
"dependencies": {
"coffee-script": "1.6.1",
- "edx-pattern-library": "0.10.4",
- "edx-ui-toolkit": "0.9.0",
+ "edx-pattern-library": "~0.12.1",
+ "edx-ui-toolkit": "~0.9.1",
"requirejs": "~2.1.22",
"uglify-js": "2.4.24",
"underscore": "~1.8.3",
diff --git a/pavelib/assets.py b/pavelib/assets.py
index 3124979c6f86cdccb0e0acc414ad6170ab2f6755..78c249b2df5f7ad276d9300a0092b2adcb9749f2 100644
--- a/pavelib/assets.py
+++ b/pavelib/assets.py
@@ -33,9 +33,12 @@ SYSTEMS = {
}
# Common lookup paths that are added to the lookup paths for all sass compilations
-COMMON_LOOKUP_DIRS = [
+COMMON_LOOKUP_PATHS = [
path("common/static"),
path("common/static/sass"),
+ path("node_modules"),
+ path("node_modules/edx-pattern-library/node_modules"),
+
]
# A list of NPM installed libraries that should be copied into the common
@@ -108,10 +111,7 @@ def get_common_sass_directories():
applicable_directories.append({
"sass_source_dir": path("common/static/sass"),
"css_destination_dir": path("common/static/css"),
- "lookup_paths": [
- path("common/static"),
- path("common/static/sass"),
- ],
+ "lookup_paths": COMMON_LOOKUP_PATHS,
})
return applicable_directories
@@ -223,7 +223,7 @@ def get_watcher_dirs(themes_base_dir=None, themes=None):
(list): dirs that need to be added to sass watchers.
"""
dirs = []
- dirs.extend(COMMON_LOOKUP_DIRS)
+ dirs.extend(COMMON_LOOKUP_PATHS)
if themes_base_dir and themes:
# Register sass watchers for all the given themes
theme_dirs = [(path(themes_base_dir) / theme) for theme in themes if theme]
@@ -559,7 +559,7 @@ def _compile_sass(system, theme, debug, force, timing_info):
else:
sass.compile(
dirname=(sass_source_dir, css_dir),
- include_paths=COMMON_LOOKUP_DIRS + lookup_paths,
+ include_paths=COMMON_LOOKUP_PATHS + lookup_paths,
source_comments=source_comments,
output_style=output_style,
)
diff --git a/pavelib/paver_tests/test_assets.py b/pavelib/paver_tests/test_assets.py
index 4f6f2116158a0611d9f5f52f79e2949c3cfe9cb2..ede0949ca16e61bb848b562cd700bfde3a9b1225 100644
--- a/pavelib/paver_tests/test_assets.py
+++ b/pavelib/paver_tests/test_assets.py
@@ -148,6 +148,8 @@ class TestPaverWatchAssetTasks(TestCase):
self.expected_sass_directories = [
path('common/static/sass'),
path('common/static'),
+ path('node_modules'),
+ path('node_modules/edx-pattern-library/node_modules'),
path('lms/static/sass/partials'),
path('lms/static/sass'),
path('lms/static/certificates/sass'),
@@ -156,6 +158,10 @@ class TestPaverWatchAssetTasks(TestCase):
]
super(TestPaverWatchAssetTasks, self).setUp()
+ def tearDown(self):
+ self.expected_sass_directories = []
+ super(TestPaverWatchAssetTasks, self).tearDown()
+
def test_watch_assets(self):
"""
Test the "compile_sass" task.
@@ -198,7 +204,3 @@ class TestPaverWatchAssetTasks(TestCase):
self.assertIsInstance(sass_watcher_args[0], PollingObserver)
self.assertIsInstance(sass_watcher_args[1], list)
self.assertItemsEqual(sass_watcher_args[1], self.expected_sass_directories)
-
- def tearDown(self):
- self.expected_sass_directories = []
- super(TestPaverWatchAssetTasks, self).tearDown()