Merge pull request #114 from infor-design/4973-Add-ids-counts

4973 add ids counts

app/ids-counts/compact.html

@@ -0,0 +1,35 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Counts: Compact</ids-text>
+</ids-layout-grid>
+<ids-layout-grid cols="5" gap="md">
+  <ids-layout-grid-cell>
+    <ids-counts compact="true" href="#">
+      <ids-text count-value>7</ids-text>
+      <ids-text count-text>Active <br /> Opportunities</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="caution" compact="true" href="#">
+      <ids-text count-value>2</ids-text>
+      <ids-text count-text>Open <br /> Incidents</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="danger" compact="true" href="#">
+      <ids-text count-value>4</ids-text>
+      <ids-text count-text>Escalated <br /> Incidents</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="success" compact="true" href="#">
+      <ids-text count-value>7</ids-text>
+      <ids-text count-text>Open <br /> Projects</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="warning" compact="true" href="#">
+      <ids-text count-value>7</ids-text>
+      <ids-text count-text>Active <br /> Contacts</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+</ids-layout-grid>

app/ids-counts/example.html

@@ -0,0 +1,36 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Counts</ids-text>
+</ids-layout-grid>
+
+<ids-layout-grid cols="5" gap="md">
+  <ids-layout-grid-cell>
+    <ids-counts color="base" href="#">
+      <ids-text count-value>7</ids-text>
+      <ids-text count-text>Active <br /> Opportunities</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="base" href="#">
+      <ids-text count-text>Open <br /> Incidents</ids-text>
+      <ids-text count-value>2</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="base" href="#">
+      <ids-text count-text>Escalated <br /> Incidents</ids-text>
+      <ids-text count-value>4</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="base" href="#">
+      <ids-text count-value>7</ids-text>
+      <ids-text count-text>Open <br /> Projects</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts color="base" href="#">
+      <ids-text count-value>7</ids-text>
+      <ids-text count-text>Active <br /> Contacts</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+</ids-layout-grid>

app/ids-counts/index.html

@@ -0,0 +1,3 @@
+{{> ../layouts/head.html }}
+{{> example.html }}
+{{> ../layouts/footer.html }}

app/ids-counts/index.js

@@ -0,0 +1 @@
+import IdsCounts from '../../src/ids-counts/ids-counts';

app/ids-counts/not-actionable.html

@@ -0,0 +1,35 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Counts: Not Actionable</ids-text>
+</ids-layout-grid>
+<ids-layout-grid cols="5" gap="md">
+  <ids-layout-grid-cell>
+    <ids-counts>
+      <ids-text count-text>Active <br /> Opportunities</ids-text>
+      <ids-text count-value>7</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts>
+      <ids-text count-text>Open <br /> Incidents</ids-text>
+      <ids-text count-value>2</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts>
+      <ids-text count-text>Escalated <br /> Incidents</ids-text>
+      <ids-text count-value>4</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts>
+      <ids-text count-text>Open <br /> Projects</ids-text>
+      <ids-text count-value>7</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+  <ids-layout-grid-cell>
+    <ids-counts>
+      <ids-text count-text>Active <br /> Contacts</ids-text>
+      <ids-text count-value>7</ids-text>
+    </ids-counts>
+  </ids-layout-grid-cell>
+</ids-layout-grid>

app/ids-counts/standalone-css.html

@@ -0,0 +1,18 @@
+{{> ../layouts/head-visible.html }}
+
+ <link rel="stylesheet" href="ids-counts.css"/>
+ <link rel="stylesheet" href="../ids-layout-grid/ids-layout-grid.css"/>
+ <link rel="stylesheet" href="../ids-text/ids-text.css"/>
+
+<div class="ids-layout-grid">
+  <h1 class="ids-text ids-text-12">Count Standalone CSS</h1>
+</div>
+<div class="ids-layout-grid">
+  <div class="ids-layout-grid-cell">
+    <a class="ids-counts">
+      <div count-text>7</div>
+      <div count-value>Active<br/>Opportunities</div>
+    </a>
+  </div>
+</div>
+{{> ../layouts/footer.html }}

app/index.html

@@ -27,4 +27,5 @@
 {{> ids-accordion/example.html }}
 {{> ids-block-grid/example.html }}
 {{> ids-render-loop/example.html }}
+{{> ids-counts/example.html }}
 {{> layouts/footer.html }}

app/index.js

@@ -28,6 +28,7 @@ import IdsAlert from '../src/ids-alert/ids-alert';
 import IdsBadge from '../src/ids-badge/ids-badge';
 import IdsBlockGrid from '../src/ids-block-grid/ids-block-grid';
 import IdsBlockGridItem from '../src/ids-block-grid/ids-block-grid-item';
+import IdsCounts from '../src/ids-counts/ids-counts';
 import IdsContainer from '../src/ids-container/ids-container';
 import IdsThemeSwitcher from '../src/ids-theme-switcher/ids-theme-switcher';
 import IdsWizard, { IdsWizardStep } from '../src/ids-wizard';
@@ -58,4 +59,5 @@ import './ids-alert/index';
 import './ids-badge/index';
 import './ids-textarea/example';
 import './ids-block-grid/index';
+import './ids-counts/index';
 import './ids-wizard/index';

doc/CHANGELOG.md

@@ -13,6 +13,9 @@
   - Markup has changed to a custom element `<ids-checkbox></ids-checkbox>`
   - If using events, events are now plain JS events.
   - Can now be imported as a single JS file and used with encapsulated styles
+- `[Counts]` The counts component has been changed to a web component and renamed to ids-counts.
+  - Text is now contained in an ids-text element `<ids-text></ids-text>`
+  - Can now be imported as a single JS file and used with encapsulated styles
 - `[Datagrid]` The Datagrid component has been changed to a web component `ids-data-grid`.
   - If using events events are now plain JS events for example: sorted, rendered
   - If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll

src/ids-base/ids-constants.js

@@ -23,6 +23,7 @@ export const props = {
   COL_START: 'col-start',
   COLOR: 'color',
   COLS: 'cols',
+  COMPACT: 'compact',
   CLICKABLE: 'clickable',
   CSS_CLASS: 'css-class',
   DATA: 'data',

src/ids-base/ids-mixins.scss

@@ -1,5 +1,5 @@
 /**
- * Mixins used throuhout the scss styles and come in as part of base. Keep Base small.
+ * Mixins used throughout the scss styles and come in as part of base. Keep Base small.
  */
 
 // All vendor prefixes

src/ids-container/ids-container.js

@@ -52,7 +52,7 @@ class IdsContainer extends mix(IdsElement).with(IdsEventsMixin, IdsThemeMixin) {
   }
 
   /**
-   * If set to true the container is scollable
+   * If set to true the container is scrollable
    * @param {boolean|string} value true of false depending if the tag is scrollable
    */
   set scrollable(value) {

src/ids-counts/README.MD

@@ -0,0 +1,105 @@
+# Ids Counts Component
+
+## Description
+
+Counts are distinctive elements used to highlight high level numbers or metrics.
+
+## Use Cases
+
+- Use counts in dashboards and visualizations for summarizing key numeric takeaways.
+- Use counts as a concise numeric data point that can link to underlying detail elsewhere on the page or site.
+
+## Terminology
+
+- **Counts**: UI embellishments for summarizing high level numeric information.
+- **Value**: The numeric value displayed on the count component.
+- **Text**:  The name or brief description of the value.
+- **Compact**: When compact, the count value appears slightly smaller than usual.
+
+## Features (With Code Examples)
+
+A card is created using the custom `ids-counts` element. A user can place elements inside of the component to represent text. It is recommended to use ids-text components as ids-counts has functionality to manage that input specifically.
+
+A normal Counts component
+
+```html
+<ids-counts href="#">
+  <ids-text count-value>7</ids-text>
+  <ids-text count-text>Active <br /> Opportunities</ids-text>
+</ids-counts>
+```
+
+The same component could be made "Not Actionable" by removing the href attribute
+
+```html
+<ids-counts>
+  <ids-text count-value>7</ids-text>
+  <ids-text count-text>Active <br /> Opportunities</ids-text>
+</ids-counts>
+```
+
+Setting the optional "Compact" attribute to "true" decreases the font size of the value
+
+```html
+<ids-counts compact="true" href="#">
+  <ids-text count-value>7</ids-text>
+  <ids-text count-text>Active <br /> Opportunities</ids-text>
+</ids-counts>
+```
+
+The counts component also supports an optional "Color" attribute. The options for color are base (blue), caution, danger, success, warning, or a hex code with the "#"
+
+```html
+<ids-counts href="#" color="base">
+  <ids-text count-value>7</ids-text>
+  <ids-text count-text>Active <br /> Opportunities</ids-text>
+</ids-counts>
+```
+
+Counts using just the css. Use the anchor tag for normal counts and span for non-actionable.
+
+```html
+<a class="ids-counts" color="base" href="#">
+  <div class="text">7</div>
+  <div class="value">Active<br>Opportunities</div>
+</a>
+<span class="ids-counts" color="base">
+  <div class="text">7</div>
+  <div class="value">Active<br>Opportunities</div>
+</span>
+```
+
+## Settings and Attributes
+
+- `color` {string} Sets the color to an internal color such as `azure`. Can also a hexidecimal color code beginning with `#`.
+- `compact` {string} Use "true" to set the value font-size to 40. Omitting this attribute or using any will result in the default value of 48.
+- `href` {string} The url that the count component links to.
+
+## States and Variations (With Code Examples)
+
+- Actionable
+- Color
+- Compact
+
+## Keyboard Guidelines
+
+- <kbd>Tab/Shift+Tab</kbd>: If the count is actionable (default) this will toggle through them in the general form order. Non-actionable counts do not get selected.
+- <kbd>Enter</kbd>: This will follow the tag link.
+
+## Responsive Guidelines
+
+- Flows with padding and margin within the width and height of the parent container.
+
+## Converting from Previous Versions
+
+- 3.x: Counts have all new markup and classes.
+- 4.x: Counts have all new markup and classes for web components.
+
+## Accessibility Guidelines
+
+- 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Ensure the color tags that indicate state like OK, cancel, ect have other ways to indicate that information. This is failing.
+- 1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.   Ensure the color tags pass contrast.
+
+## Regional Considerations
+
+Text should be localized in the current language. Consider that in some languages text may be longer (German) and in some cases it can't be wrapped (Thai).

src/ids-counts/TODO.md

@@ -0,0 +1,6 @@
+# TODO on IDS Coounts
+
+## Features
+
+- [x] Focus State for links
+- [] Test accessibility with screen reader

src/ids-counts/ids-counts.d.ts

@@ -0,0 +1,24 @@
+// Ids is a JavaScript project, but we define TypeScript declarations so we can
+// confirm our code is type safe, and to support TypeScript users.
+
+import { IdsElement } from '../ids-base/ids-element';
+
+export default class IdsCounts extends IdsElement {
+  /** Set the tag type/color */
+  color: 'base' | 'caution' | 'danger' | 'success' | 'warning' | string;
+
+  /** List the settable component properties */
+  properties: string[];
+
+  /** Sets the value size at 32 when true (instead of 40) */
+  compact?: 'true' | 'false' | boolean;
+
+  /** Sets the href/link */
+  href?: string;
+
+  /** Set the theme mode */
+  mode: 'light' | 'dark' | 'contrast' | string;
+
+  /** Set the theme version */
+  version: 'new' | 'classic' | string;
+}