From 1c1aeab12fd317c59b75e34790b9ea551db6f266 Mon Sep 17 00:00:00 2001 From: Mari Johannessen Date: Tue, 13 Jun 2017 10:23:10 -0500 Subject: [PATCH] fix(demo-env): cleaned up and added back demo.js script (#174) * fix(demo-env): fixed demo environment * fix(demo-env): added back carbon components comments --- demo/README.md | 12 +- demo/index.js | 2 - demo/js/theme-switcher.js | 35 ----- demo/scss/demo.scss | 8 -- demo/views/colors.html | 176 ------------------------ demo/views/demo-all.dust | 11 +- demo/views/demo-es5.html | 45 ------ demo/views/typography-major-second.html | 26 ---- demo/views/typography.html | 68 --------- 9 files changed, 9 insertions(+), 374 deletions(-) delete mode 100644 demo/js/theme-switcher.js delete mode 100644 demo/views/colors.html delete mode 100644 demo/views/demo-es5.html delete mode 100644 demo/views/typography-major-second.html delete mode 100644 demo/views/typography.html diff --git a/demo/README.md b/demo/README.md index b7acec92dfaf..7bcd1289c2ed 100644 --- a/demo/README.md +++ b/demo/README.md @@ -6,22 +6,12 @@ Contributors and users can ignore this folder -- this is only for project mainta ``` demo ├── README.md -├── carbon-components.js -├── carbon-components.js.map -├── carbon-components.min.js -├── carbon-components.min.js.map +├── index.js ├── demo.css ├── scss -│   ├── _demo-colors.scss -│   ├── _demo-major-second.scss -│   ├── _demo-typography.scss │   └── demo.scss └── views - ├── colors.html ├── demo-all.dust - ├── demo-es5.html - ├── typography-major-second.html - └── typography.html ``` `views`: HTML files that are rendered when running `npm run dev` or `npm run serve` diff --git a/demo/index.js b/demo/index.js index 785010d5fbd6..e7c201e10290 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,12 +1,10 @@ import './polyfills/index'; -import ThemeSwitcher from './js/theme-switcher'; import DemoSwitcher from './js/demo-switcher'; export * from '../src/index'; const init = () => { - ThemeSwitcher.init(); DemoSwitcher.init(); }; diff --git a/demo/js/theme-switcher.js b/demo/js/theme-switcher.js deleted file mode 100644 index fbd05761e137..000000000000 --- a/demo/js/theme-switcher.js +++ /dev/null @@ -1,35 +0,0 @@ -export default class ThemeSwitcher { - - constructor(element = {}) { - if (!element || element.nodeType !== Node.ELEMENT_NODE) { - throw new TypeError('DOM element should be given to initialize this widget.'); - } - - this.element = element; - this.constructor.components.set(this.element, this); - this.element.addEventListener('click', event => this.handleClick(event)); - } - - static create(element) { - return this.components.get(element) || new this(element); - } - - static init(target = document) { - if (target.nodeType !== Node.ELEMENT_NODE && target.nodeType !== Node.DOCUMENT_NODE) { - throw new Error('DOM document or DOM element should be given to search for and initialize this widget.'); - } - if (target.nodeType === Node.ELEMENT_NODE && target.dataset.numberinput !== undefined) { - this.create(target); - } else { - [...target.querySelectorAll('[data-theme-switcher]')].forEach(element => this.create(element)); - } - } - - handleClick(event) { - event.preventDefault(); - const body = document.querySelector('body'); - body.classList.toggle('bx--global-light-ui'); - } -} - -ThemeSwitcher.components = new WeakMap(); diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss index b13c3381632b..8d8d390ff2ee 100644 --- a/demo/scss/demo.scss +++ b/demo/scss/demo.scss @@ -9,7 +9,6 @@ padding: 1rem; margin-top: 5rem; transition: .2s; - // min-height: 2000px; background-color: $ui-02; &.flex-col { @@ -48,13 +47,6 @@ padding: 3em 1em 1em; } -.theme-switcher { - margin: 1rem 0; - position: fixed; - top: 0; - right: 1rem; -} - .demo-switcher { &__container { display: flex; diff --git a/demo/views/colors.html b/demo/views/colors.html deleted file mode 100644 index 3c99e7e226c0..000000000000 --- a/demo/views/colors.html +++ /dev/null @@ -1,176 +0,0 @@ -
-
-

Primary Palette

-

Modified Colors

-
- navy-gray-1 -
    -
  • #0F212E
    • -
  • Global Header - Background - Dropdown
    • -
  • Add Menu - Background
    • -
  • Text in almost everything for Light UI
    • -
-
-
- navy-gray-2 -
    -
  • #20343E
    • -
  • Cards - Background
    • -
-
-
- navy-gray-3 -
    -
  • #2D3F49
    • -
  • Body - Background
    • -
  • Dropdown - Background
    • -
-
-
- navy-gray-4 -
    -
  • #394B54
    • -
  • Data Module - Background - Details Link
    • -
  • Item List - Border
    • -
-
-
- navy-gray-5 -
    -
  • #42535C
    • -
  • Activity Log - Background
    • -
  • Card - Background - Graph
    • -
  • Data Module - Background
    • -
  • Buttons - Background - Light UI
    • -
  • Toggle Switch - Background - Off State
    • -
  • FAB - Background - Close State
    • -
-
-
- navy-gray-6 -
    -
  • #5a6872
    • -
  • used at 50%, 75%, 25% transparency
    • -
  • Activity Log - Border - 100%
    • -
  • Data Module - Border - 100%
    • -
  • CTA - data module
    • -
  • data viz - "helper" color
    • -
-
-
- navy-gray-7 -
    -
  • #8C9BA5
    • -
  • Text - routes / IP / detail page header
    • -
-
-
- -
-

IBM Colors

-
- blue-20 -
    -
  • #7cc7ff
    • -
  • Checkbox - Background - Checked State
    • -
  • Global Header - Link, Dropdown Text
    • -
  • Global Header - Background - Taxonomy Icon - Selected State
    • -
-
-
- blue-30 -
    -
  • #5aaafa
    • -
  • Buttons - Background - Hover/Active
    • -
  • Links - Text
    • -
  • Alerts - Accent - Running State
    • -
  • Cards - Text - Metadata
    • -
  • Detail Page Header - Link
    • -
  • Dropdown - Text and Link
    • -
  • Fab-Label - Text
    • -
  • Global Header - Background - Light UI
    • -
  • Search - Outline
    • -
-
-
- blue-40 -
    -
  • #5596e6
    • -
  • Button - Background
    • -
  • Toggle - On State
    • -
  • FAB - Background
    • -
  • Global Header - Background - Light UI
    • -
  • ? - Add this as $color__blue-40
    • -
-
-
- blue-90 -
    -
  • #152934
    • -
  • Alerts - Background
    • -
  • Cards - Border
    • -
  • Global Header - Background
    • -
-
-
- green-30 -
    -
  • #8cd211
    • -
  • Charts - Accent - Will be added Later
    • -
-
-
- red-40 -
    -
  • #ff5050
    • -
  • Alerts - Accent - Danger State
    • -
  • Charts - Accent - Will be added Later
    • -
-
-
- teal-20 -
    -
  • #6eedd8
    • -
  • Charts - Accent - Will be added Later
    • -
-
-
- teal-30 -
    -
  • #41d6c3
    • -
-
-
- yellow-30 -
    -
  • #efc100
    • -
  • Alerts - Accent - Info State
    • -
  • Charts - Will be added Later
    • -
-
-
- orange-30 -
    -
  • #ff7832
    • -
  • Alerts - Accent
    • -
  • ? Add: $color__orange-30
    • -
-
-
- purple-40 -
    -
  • #734098
    • -
  • Alerts - Accent
    • -
  • ? Add: $color__purple-40
    • -
  • Ask freemium
    • -
-
-
- white -
    -
  • #fff
    • -
  • Text in almost everything.
    • -
-
-
-
diff --git a/demo/views/demo-all.dust b/demo/views/demo-all.dust index 6c3dc4e2c929..d9b1a6d96458 100644 --- a/demo/views/demo-all.dust +++ b/demo/views/demo-all.dust @@ -23,7 +23,6 @@ -