Merge branch 'main' into 135-popup-upgrades

infor-design · Jun 20, 2021 · 1f39591 · 1f39591
2 parents faa6241 + 50a20e2
commit 1f39591
Show file tree

Hide file tree

Showing 104 changed files with 2,331 additions and 23,724 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -71,7 +71,7 @@ module.exports = {
     // https://eslint.org/docs/rules/class-methods-use-this
     'class-methods-use-this': ['off', { }],
     // Allow Ids Imports to be unsed in index.js files
-    'no-unused-vars': ['error', { varsIgnorePattern: 'Ids' }],
+    'no-unused-vars': ['error', { varsIgnorePattern: 'Ids', argsIgnorePattern: '^_' }],
     // Allow Arrow functions to be on the next line or below
     'implicit-arrow-linebreak': ['off', { }],
     // Allow single quotes only or template literals

diff --git a/app/ids-base/ids-constants.js b/app/ids-base/ids-constants.js
@@ -1 +1 @@
-import { props } from '../../src/ids-base/ids-constants'; //eslint-disable-line
+import { attributes } from '../../src/ids-base/ids-attributes'; //eslint-disable-line
diff --git a/app/ids-card/auto-size.html b/app/ids-card/auto-size.html
@@ -0,0 +1,16 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Cards Auto Size</ids-text>
+</ids-layout-grid>
+<ids-layout-grid cols="2" gap="md">
+  <ids-layout-grid-cell>
+    <ids-card auto-height="true">
+      <div slot="card-content">
+        <ids-text font-size="20" type="h2">Card Contents</ids-text>
+        <ids-text font-size="20" type="h2">Card Contents</ids-text>
+        <ids-text font-size="20" type="h2">Card Contents</ids-text>
+        <ids-text font-size="20" type="h2">Card Contents</ids-text>
+        <ids-text font-size="20" type="h2">Card Contents</ids-text>
+      </div>
+    </ids-card>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
diff --git a/app/ids-layout-grid/test-sandbox.html b/app/ids-layout-grid/test-sandbox.html
@@ -1,7 +1,7 @@
 {{> ../layouts/head.html }}
 
 <ids-layout-grid>
-  <ids-text font-size="12" type="h1">Additional Examples</ids-text>
+  <ids-text font-size="12" type="h1">Header/Footer</ids-text>
 </ids-layout-grid>
 
 <ids-layout-grid auto="true" no-margins="true">
@@ -37,4 +37,32 @@
   </ids-layout-grid-cell>
 </ids-layout-grid>
 
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Justify/Float Left</ids-text>
+</ids-layout-grid>
+
+<ids-layout-grid cols="2" gap="none" no-margins="true">
+  <ids-layout-grid-cell>
+    <ids-layout-grid cols="2">
+      <ids-layout-grid-cell>
+        <ids-text font-size="16">Tuesday, 22nd September</ids-text>
+        <ids-text font-size="14">8:40AM-2:00PM</ids-text>
+      </ids-layout-grid-cell>
+      <ids-layout-grid-cell justify="end">
+        <ids-menu-button id="ids-actions"" menu="ids-actions-menu">
+          <ids-icon slot="icon" icon="more"></ids-icon>
+          <span class="audible">Actions</span>
+        </ids-menu-button>
+        <ids-popup-menu id="ids-actions-menu"" target="ids-actions-menu"" trigger="click">
+          <ids-menu-group>
+            <ids-menu-item>Action 1</ids-menu-item>
+            <ids-menu-item>Action 2</ids-menu-item>
+            <ids-menu-item>Action 3</ids-menu-item>
+          </ids-menu-group>
+        </ids-popup-menu>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
 {{> ../layouts/footer.html }}
diff --git a/app/ids-layout-grid/test-sandbox.js b/app/ids-layout-grid/test-sandbox.js
@@ -0,0 +1 @@
+import IdsCard from '../../src/ids-card/ids-card';
diff --git a/app/ids-swipe-action/example.html b/app/ids-swipe-action/example.html
@@ -0,0 +1,129 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Swipe Action (Reveal)</ids-text>
+</ids-layout-grid>
+<ids-layout-grid cols="2" gap="none">
+  <ids-layout-grid-cell>
+    <ids-card auto-height="true">
+      <div slot="card-content">
+        <ids-swipe-action>
+          <ids-button slot="action-left" id="action-left-reveal" type="swipe-action-left">
+            <ids-icon slot="icon" icon="reply" size="small"></ids-icon>
+            <span slot="text">Left Action</span>
+          </ids-button>
+          <div slot="contents">
+            <ids-layout-grid cols="2" no-margins="true">
+              <ids-layout-grid-cell>
+                <ids-text font-size="16">Tuesday, 22nd September</ids-text>
+                <ids-text font-size="14">8:40AM-2:00PM</ids-text>
+              </ids-layout-grid-cell>
+              <ids-layout-grid-cell justify="end">
+                <ids-menu-button id="actions-reveal" menu="actions-reveal-menu">
+                  <ids-icon slot="icon" icon="more"></ids-icon>
+                  <span class="audible">Actions</span>
+                </ids-menu-button>
+                <ids-popup-menu id="actions-reveal-menu" target="actions-reveal" trigger="click">
+                  <ids-menu-group>
+                    <ids-menu-item>Right Action</ids-menu-item>
+                    <ids-menu-item>Left Action</ids-menu-item>
+                    <ids-menu-item>Other Action</ids-menu-item>
+                  </ids-menu-group>
+                </ids-popup-menu>
+              </ids-layout-grid-cell>
+            </ids-layout-grid>
+         </div>
+         <ids-button slot="action-right" id="action-right-reveal" type="swipe-action-right">
+           <ids-icon slot="icon" icon="tack" size="small"></ids-icon>
+           <span slot="text">Right Action</span>
+         </ids-button>
+       </ids-swipe-action>
+      </div>
+    </ids-card>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Swipe Action (Reveal / One Action)</ids-text>
+</ids-layout-grid>
+<ids-layout-grid cols="2" gap="none">
+  <ids-layout-grid-cell>
+    <ids-card auto-height="true">
+      <div slot="card-content">
+        <ids-swipe-action>
+          <div slot="contents">
+            <ids-layout-grid cols="2" no-margins="true">
+              <ids-layout-grid-cell>
+                <ids-text font-size="16">Tuesday, 23nd September</ids-text>
+                <ids-text font-size="14">8:10AM-2:20PM</ids-text>
+              </ids-layout-grid-cell>
+              <ids-layout-grid-cell justify="end">
+                <ids-menu-button id="actions-reveal-one" menu="actions-reveal-one-menu">
+                  <ids-icon slot="icon" icon="more"></ids-icon>
+                  <span class="audible">Actions</span>
+                </ids-menu-button>
+                <ids-popup-menu id="actions-reveal-one-menu" target="actions-reveal-one" trigger="click">
+                  <ids-menu-group>
+                    <ids-menu-item>Right Action</ids-menu-item>
+                    <ids-menu-item>Left Action</ids-menu-item>
+                    <ids-menu-item>Other Action</ids-menu-item>
+                  </ids-menu-group>
+                </ids-popup-menu>
+              </ids-layout-grid-cell>
+            </ids-layout-grid>
+         </div>
+         <ids-button slot="action-right" id="action-right-reveal-one" type="swipe-action-right">
+           <ids-icon slot="icon" icon="tack" size="small"></ids-icon>
+           <span slot="text">Right Action</span>
+         </ids-button>
+       </ids-swipe-action>
+      </div>
+    </ids-card>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Swipe Action (Continuous)</ids-text>
+</ids-layout-grid>
+<ids-layout-grid cols="2" gap="none">
+  <ids-layout-grid-cell>
+    <ids-card auto-height="true">
+      <div slot="card-content">
+        <ids-swipe-action swipe-type="continuous">
+          <ids-button slot="action-left" id="action-left-continuous" type="swipe-action-left">
+            <ids-icon slot="icon" icon="reply" size="small"></ids-icon>
+            <span slot="text">Left Action</span>
+          </ids-button>
+          <div slot="contents">
+            <ids-layout-grid cols="2" no-margins="true">
+              <ids-layout-grid-cell>
+                <ids-text font-size="16">Tuesday, 22nd September</ids-text>
+                <ids-text font-size="14">8:40AM-2:00PM</ids-text>
+              </ids-layout-grid-cell>
+              <ids-layout-grid-cell justify="end">
+                <ids-menu-button id="actions-continuous" menu="actions-continuous-menu">
+                  <ids-icon slot="icon" icon="more"></ids-icon>
+                  <span class="audible">Actions</span>
+                </ids-menu-button>
+                <ids-popup-menu id="actions-continuous-menu" target="actions-continuous" trigger="click">
+                  <ids-menu-group>
+                    <ids-menu-item>Right Action</ids-menu-item>
+                    <ids-menu-item>Left Action</ids-menu-item>
+                    <ids-menu-item>Other Action</ids-menu-item>
+                  </ids-menu-group>
+                </ids-popup-menu>
+              </ids-layout-grid-cell>
+            </ids-layout-grid>
+          </div>
+          <ids-button slot="action-right" id="action-right-continuous" type="swipe-action-right">
+            <ids-icon slot="icon" icon="tack" size="small"></ids-icon>
+            <span slot="text">Right Action</span>
+          </ids-button>
+        </ids-swipe-action>
+      </div>
+    </ids-card>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-text font-size="12" id="output"></ids-text>
+</ids-layout-grid>
+
diff --git a/app/ids-swipe-action/example.js b/app/ids-swipe-action/example.js
@@ -0,0 +1,20 @@
+import IdsCard from '../../src/ids-card/ids-card';
+
+// Setup normal click events on the actions
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelector('#action-left-reveal').addEventListener('click', () => {
+    document.querySelector('#output').textContent = 'Left Action (Reveal Mode) was chosen';
+  });
+  document.querySelector('#action-right-reveal').addEventListener('click', () => {
+    document.querySelector('#output').textContent = 'Right Action (Reveal Mode) was chosen';
+  });
+  document.querySelector('#action-right-reveal-one').addEventListener('click', () => {
+    document.querySelector('#output').textContent = 'Right Action (Reveal / One Action Mode) was chosen';
+  });
+  document.querySelector('#action-left-continuous').addEventListener('click', () => {
+    document.querySelector('#output').textContent = 'Left Action (Continuous Mode) was chosen';
+  });
+  document.querySelector('#action-right-continuous').addEventListener('click', () => {
+    document.querySelector('#output').textContent = 'Right Action (Continuous Mode) was chosen';
+  });
+});
diff --git a/app/ids-swipe-action/index.html b/app/ids-swipe-action/index.html
@@ -0,0 +1,3 @@
+{{> ../layouts/head.html }}
+{{> example.html }}
+{{> ../layouts/footer.html }}
diff --git a/app/ids-swipe-action/index.js b/app/ids-swipe-action/index.js
@@ -0,0 +1 @@
+import IdsSwipeAction from '../../src/ids-swipe-action/ids-swipe-action';
diff --git a/app/index.js b/app/index.js
@@ -36,6 +36,7 @@ import IdsWizard, { IdsWizardStep } from '../src/ids-wizard';
 import IdsSpinbox from '../src/ids-spinbox';
 import IdsModal, { IdsOverlay } from '../src/ids-modal';
 import IdsTabs, { IdsTab } from '../src/ids-tabs';
+import IdsSwipeAction from '../src/ids-swipe-action/ids-swipe-action';
 
 // Import Example Code
 

diff --git a/doc/ARTICLES.md b/doc/ARTICLES.md
@@ -54,3 +54,4 @@ A curated list of resources related to this project and web components.
 - [Author Elements](https://github.com/author-elements)
 - [How To google](https://github.com/GoogleChromeLabs/howto-components/tree/master/elements)
 - [FicusJS](https://docs.ficusjs.org/docs/composition/)
+- [KorUI](https://kor-ui.com/introduction/welcome)
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -85,6 +85,7 @@
   - Markup has changed to a custom element `<ids-switch></ids-switch>`
   - If using events, events are now plain JS events.
   - Can now be imported as a single JS file and used with encapsulated styles
+- `[Swipe Action]` A new component that lets you swipe left or right and select an action.
 - `[Tabs]` The Tabs component has been changed to a web component and renamed to ids-tabs.
   - Markup has changed to a custom element `<ids-tabs value=${selection}></ids-tabs>`
   - content within the tabs are specified as `<ids-tab value=${selection-value}>`Tab Label/Content`</ids-tab>`