Added copy of simple-demo to show RTL formatting

predixdesignsystem · Feb 11, 2019 · 638b5dc · 638b5dc
1 parent 37f3de3
commit 638b5dc
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 5 deletions.
diff --git a/demo/rtl_simple_demo.html b/demo/rtl_simple_demo.html
@@ -0,0 +1,143 @@
+<!--
+Copyright (c) 2018, General Electric
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>px-dropdown simple demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer/polymer.html" />
+  <link rel="import" href="../../px-theme/px-theme-styles.html">
+  <link rel="import" href="../../px-overlay/px-overlay-container.html"/>
+  <link rel="import" href="../px-dropdown.html" />
+
+</head>
+
+<body dir="rtl">
+  <custom-style>
+    <style include="px-theme-styles" is="custom-style"></style>
+  </custom-style>
+
+  <style>
+    body {
+      height: 200vh;
+    }
+    .rtl {
+      direction: rtl;
+    }
+  </style>
+  <px-overlay-container container-type="foo"></px-overlay-container>
+  <px-overlay-container container-type="bar"></px-overlay-container>
+  <px-overlay-container container-type="baz"></px-overlay-container>
+
+  <div style="width:250px" class="rtl">
+    <p>Single Select</p>
+    <px-dropdown
+      id="foo"
+      hoist
+      container-type="foo"
+      items='[{"key":"1","val":"test test test test test test test test test test test test test test test test iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"I am a menu item so I cannot be selected","disableSelect":true},{"key":"5","val":"Flip Phone","disabled":true}]'>
+    </px-dropdown>
+    </br>
+    <p>Disabled Dropdown</p>
+    <px-dropdown
+      id="disabledDropdown"
+      display-value="Disabled"
+      hoist
+      disabled
+      container-type="disDropdown"
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Disabled Viewable Dropdown</p>
+    <px-dropdown
+      id="disabledViewable"
+      display-value="Disabled Viewable"
+      hoist
+      disabled-viewable
+      container-type="disDropdown"
+      select-by="key"
+      selected-values='["1","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Multi Select</p>
+    <px-dropdown
+      id="multiSelect"
+      hoist
+      container-type="bar"
+      selected-values='["2","3","5"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Multi Select and Read Only</p>
+    <px-dropdown
+      id="multiSelect"
+      hoist
+      read-only
+      container-type="bar"
+      display-value-count="3"
+      select-by="key"
+      selected-values='["1","2","3"]'
+      items='[{"key":"1","val":"iPhone"},{"key":"2","val":"Android"},{"key":"3","val":"Blackberry"},{"key":"4","val":"Windows Windows Windows Windows Windows Windows Windows Phone"},{"key":"5","val":"Flip Phone","disabled":true}]'
+      multi>
+    </px-dropdown>
+    </br>
+    <p>Single Select Read Only</p>
+    <px-dropdown
+      id="readOnly"
+      display-value="Read Only Items"
+      container-type="readOnly"
+      read-only items='[{"key":"1","val":"One Read Only"},{"key":"2","val":"Two Read Only"},{"key":"3","val":"Three Read Only","selected":"true"},{"key":"4","val":"Four Read Only","disabled":"true"}]'>
+    </px-dropdown>
+    </br>
+    <p>Disable Select (Like a Menu)</p>
+    <px-dropdown
+      id="disableSelect"
+      display-value="My Menu"
+      container-type="baz"
+      items='[{"key":"1","val":"Do something"},{"key":"2","val":"Do something else"},{"key":"3","val":"Do one"}]'
+      disable-select>
+    </px-dropdown>
+    </br>
+    <p>Search Mode</p>
+    <px-dropdown
+      items='["Alabama", "Alaska", "American Samoa", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District Of Columbia", "Federated States Of Micronesia", "Florida", "Georgia", "Guam", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Marshall Islands", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio", "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virgin Islands", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]'
+      multi
+      search-mode>
+    </px-dropdown>
+    </br>
+    <p>Simple Items Array</p>
+    <px-dropdown
+      items='["Etc/GMT+1","Etc/GMT+10","Etc/GMT+11","Etc/GMT+12"]'>
+    </px-dropdown>
+    </br>
+    <p>Slot Usage</p>
+    <px-dropdown
+      hoist
+      disable-truncate
+      items='[{"key":"1","val":"10"},{"key":"2","val":"20"},{"key":"3","val":"30"},{"key":"4","val":"50"}]'>
+      <px-icon id="trigger" icon="px-nav:more" slot="trigger" tabindex="0"></px-icon>
+    </px-dropdown>
+  </div>
+</body>
+
+</html>
diff --git a/demo/simple_demo.html b/demo/simple_demo.html
@@ -28,7 +28,7 @@
 
 </head>
 
-<body dir="rtl">
+<body>
   <custom-style>
     <style include="px-theme-styles" is="custom-style"></style>
   </custom-style>
@@ -37,15 +37,12 @@
     body {
       height: 200vh;
     }
-    .rtl {
-      direction: rtl;
-    }
   </style>
   <px-overlay-container container-type="foo"></px-overlay-container>
   <px-overlay-container container-type="bar"></px-overlay-container>
   <px-overlay-container container-type="baz"></px-overlay-container>
 
-  <div style="width:250px" class="rtl">
+  <div style="width:250px">
     <p>Single Select</p>
     <px-dropdown
       id="foo"