From 9290c52b33c1b4f8992321775f4c526e91a6edd3 Mon Sep 17 00:00:00 2001
From: Andy Armstrong <andya@edx.org>
Date: Fri, 25 Mar 2016 13:49:26 -0400
Subject: [PATCH] Introduce Pattern Library test pages (take two)
FEDX-93
These are developer only pages, so can not be seen in production
environment. On devstack, you can access these pages in LMS and
Studio at:
/template/ux/reference/pattern-library-test.html
This is the second attempt to enable the Pattern Library. The
first attempt broke Django Templates and didn't work correctly
with right-to-left styling.
---
cms/envs/common.py | 26 ++++++----
.../sass/{_build.scss => _build-v1.scss} | 1 +
cms/static/sass/_build-v2.scss | 9 ++++
cms/static/sass/_config.scss | 7 +++
...-main-rtl.scss => studio-main-v1-rtl.scss} | 2 +-
.../{studio-main.scss => studio-main-v1.scss} | 5 +-
cms/static/sass/studio-main-v2-rtl.scss | 14 ++++++
cms/static/sass/studio-main-v2.scss | 14 ++++++
cms/templates/base.html | 10 +++-
cms/templates/ux/reference/index.html | 1 +
.../ux/reference/pattern-library-test.html | 23 +++++++++
.../pipeline_mako/tests/test_render.py | 47 ++++++++++++++++++-
.../tests/test_comprehensive_theming.py | 8 ++--
lms/envs/common.py | 26 ++++++----
lms/static/certificates/sass/_build.scss | 14 ++----
lms/static/certificates/sass/_config.scss | 4 --
lms/static/certificates/sass/_lib.scss | 9 ----
lms/static/certificates/sass/_ltr.scss | 23 ---------
lms/static/certificates/sass/_rtl.scss | 23 ---------
lms/static/certificates/sass/main-ltr.scss | 17 +++----
lms/static/certificates/sass/main-rtl.scss | 17 +++----
.../{_build-lms.scss => _build-lms-v1.scss} | 0
lms/static/sass/_build-lms-v2.scss | 9 ++++
lms/static/sass/_config.scss | 7 +++
...lms-main-rtl.scss => lms-main-v1-rtl.scss} | 5 +-
.../sass/{lms-main.scss => lms-main-v1.scss} | 5 +-
lms/static/sass/lms-main-v2-rtl.scss | 14 ++++++
lms/static/sass/lms-main-v2.scss | 14 ++++++
lms/templates/main.html | 23 ++++-----
lms/templates/main_django.html | 2 +-
lms/templates/ux/reference/index.html | 27 +++++++++++
.../ux/reference/pattern-library-test.html | 26 ++++++++++
.../tests/test_theme_style_overrides.py | 16 +++----
package.json | 4 +-
pavelib/assets.py | 14 +++---
pavelib/paver_tests/test_assets.py | 10 ++--
36 files changed, 326 insertions(+), 150 deletions(-)
rename cms/static/sass/{_build.scss => _build-v1.scss} (98%)
create mode 100644 cms/static/sass/_build-v2.scss
create mode 100644 cms/static/sass/_config.scss
rename cms/static/sass/{studio-main-rtl.scss => studio-main-v1-rtl.scss} (88%)
rename cms/static/sass/{studio-main.scss => studio-main-v1.scss} (76%)
create mode 100644 cms/static/sass/studio-main-v2-rtl.scss
create mode 100644 cms/static/sass/studio-main-v2.scss
create mode 100644 cms/templates/ux/reference/pattern-library-test.html
delete mode 100644 lms/static/certificates/sass/_lib.scss
delete mode 100644 lms/static/certificates/sass/_ltr.scss
delete mode 100644 lms/static/certificates/sass/_rtl.scss
rename lms/static/sass/{_build-lms.scss => _build-lms-v1.scss} (100%)
create mode 100644 lms/static/sass/_build-lms-v2.scss
create mode 100644 lms/static/sass/_config.scss
rename lms/static/sass/{lms-main-rtl.scss => lms-main-v1-rtl.scss} (78%)
rename lms/static/sass/{lms-main.scss => lms-main-v1.scss} (76%)
create mode 100644 lms/static/sass/lms-main-v2-rtl.scss
create mode 100644 lms/static/sass/lms-main-v2.scss
create mode 100644 lms/templates/ux/reference/index.html
create mode 100644 lms/templates/ux/reference/pattern-library-test.html
diff --git a/cms/envs/common.py b/cms/envs/common.py
index 71389ff7144..dc65e725e1a 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 57a133fa83a..f6770f4b9b2 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 00000000000..2a032042f63
--- /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 00000000000..a1c263754bb
--- /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 7bd76516bb6..83150f36077 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 00db34fabee..4c40522015e 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 00000000000..9f0643502f1
--- /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 00000000000..cd355d5a7d1
--- /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 8dc7502e109..82e41001197 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 4121778dcde..5f7c6d1aeb8 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 00000000000..0881993f7e3
--- /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 a7c50d8e190..e93c4dd2a78 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 54ef5ff84fd..dcc8d104852 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 6c84403569a..612386f2d22 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 c97b1b0c37c..11bd2e99477 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 d8e3a022d50..911c68dd9a9 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 83b0a558828..00000000000
--- 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 392f53d3ddf..00000000000
--- 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 ba219f69f8f..00000000000
--- 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 db0e51c41e9..41f638c2b44 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 54a6ec443c6..faea15b67e0 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 00000000000..a982b28c2af
--- /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 00000000000..e3a6ab63c17
--- /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 7ab3e3cd35f..0988836b425 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 1a79ca04426..ca36fb3acb9 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 00000000000..195b752386a
--- /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 00000000000..ca43dfc041a
--- /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 827e578234a..b7baaea2fc8 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 fe9d8a65a8c..6925f17c80d 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 00000000000..e4ce1d11429
--- /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 00000000000..cb447661077
--- /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 b7852249d96..defc2502762 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 5b9cffa68b5..35cc6a98292 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 3124979c6f8..78c249b2df5 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 4f6f2116158..ede0949ca16 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()
--
GitLab