feat(structured-list): add structured-list component (#140)

* chore(descriptive-list): setup files * fix(descriptive-list): html * fix(descriptive-list): fix HTML to be a11y nice * fix(descriptive-list): reorder scss * refactor(descriptive-list): rough js and more styles * refactor(descriptive-list): make new html wo radio * feat(DescriptiveList): add JS class * fix(descriptive-list.scss): add bottom-borders for rows * fix(styles.scss): uncomment code * fix(descriptive-list): add modifier class for border * fix(descriptive-list): remove extra html * refactor(structured-list): rename * docs(structured-list): readme for scss and js * refactor(structured-list): add condensed modifier * test(structured-list): add unit tests * fix(structured-list): add focus border * refactor(structured-list): use space key for select * feat(structured-list): use up and down arrow keys * fix(structured-list): visual review check! * refactor(structured-list.js): loop focus * refactor(structured-list): refactor js * docs(structured-list): update keydown event * refactor(structured-list): more refactoring for js * test(structured-list): update tests * docs(structured-list): update docs for keyboard events * refactor(structured-list): adjustedNextIndex suggestion * refactor(structured-list): transitions and better FPO content * fix(structured-list): import once * fix(structured-list): _arrowKeyDown works in FF but wo focus * refactor(structured-list): change conditional * fix(structured-list): remove commented code * refactor(structured-list): direction method * refactor(structured-list): set nextIndex * refactor(structured-list): use switch case * test(structured-list): more tests * test(structured-list): remove some unused code * docs(structured-list): chrome vs firefox keyboard behavior * test(structured-list): more test coverage * fix(structured-list): change border modifier * refactor(structured-list): allow for configurable gutter sizes between table-cells * docs(structured-list): add variables and mixins * fix(structured-list): make padding-right smaller on td:first-child * fix(structured-list): remove <strong> elements for a11y * refactor(structured-list): new mixins for padding * docs(structured-list): add new mixins * docs(structured-list): add faq about visual styles for text * fix(structured-list): change th padding-top to 1rem * docs(structured-list): phrasing! * fix(structured-list): remove tabindex on div rows * fix(structured-list): remove ownerDocument * fix(structured-list): remove this.rows * style(structured-list): prettier
carbon-design-system · Jun 9, 2017 · 425c142 · 425c142
1 parent 26a6f4f
commit 425c142
Show file tree

Hide file tree

Showing 11 changed files with 745 additions and 9 deletions.
diff --git a/src/components/structured-list/README.md b/src/components/structured-list/README.md
@@ -0,0 +1,80 @@
+### SCSS
+
+#### Variables
+
+All configurable variables are located in [src/globals/scss/_vars.scss](https://github.com/carbon-design-system/carbon-components/blob/master/src/globals/scss/_vars.scss)
+
+| name                     | description                                                                               |
+|--------------------------|-------------------------------------------------------------------------------------------|
+| $structured-list-padding | Set padding value for structured-list. This will change gutter sizes between table cells. |
+
+#### Mixins
+
+Mixins specific to structured-list are located in [src/components/structured-list/_mixins.scss](https://github.com/carbon-design-system/carbon-components/blob/master/src/components/structured-list/_mixins.scss).
+All mixins listed below take an optional `$padding` parameter. Default value for `$padding` is equal to `$structured-list-padding: 2rem !default;`, which can be overwritten.
+
+| name                          | params  | description                                                                                                                                            |
+|-------------------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
+| padding-td--condensed         | padding | Customizes padding when `.bx--structured-list--condensed` modifier class is used. Default padding is the value of `$structured-list-padding` (`2rem`). |
+| padding--data-structured-list | padding | Customizes padding. Only used when `[data-structured-list]` attribute is on HTML indicating that this component uses `<input type="radio">` controls.  |
+| padding-td                    | padding | Customizes padding for `.bx--structured-list-td`                                                                                                       |
+| padding-th                    | padding | Customizes padding for `.bx--structured-list-th`                                                                                                       |
+
+#### Modifiers
+
+Use these modifiers with `.bx--structured-list` class.
+
+| Selector                             | Description                                                                                  |
+|--------------------------------------|----------------------------------------------------------------------------------------------|
+| .bx--structured-list--border         | Applies border around structured-list and white background-color                             |
+| .bx--structured-list--condensed      | Applies condensed styles for all body rows                                                   |
+| .bx--structured-list-content--nowrap | Applies `white-space: nowrap;` on content. Prevents titles from wrapping in small viewports. |
+
+
+Use these modifiers with `.bx--structured-list-td` class. 
+
+| Selector                             | Description                               |
+|--------------------------------------|-------------------------------------------|
+| .bx--structured-list-content--nowrap | Applies `white-space: nowrap;` on content |
+
+### Javascript                                                                                                                                 
+
+#### Options
+
+| Option                | Default Selector                                      | Description                                      |
+|-----------------------|-------------------------------------------------------|--------------------------------------------------|
+| `selectorInit`        | `[data-structured-list]`                              | The selector to find the StructuredList element. |
+| `selectorStepElement` | `.bx--structured-list-tbody .bx--structured-list-row` | The selector to find the step element.           |
+
+### FAQ
+
+#### Keydown event
+
+Once `StructuredList` instance is initialized, use [structured-list--selection.html](https://github.com/carbon-design-system/carbon-components/blob/master/src/components/structured-list/structured-list--selection.html) and users will be able to make row selections with keyboard similar to radio buttons.
+
+- `up` and `down` arrow keys for navigation (focus and select)
+- `tab` and `shift + tab` for navigation (focus only)
+- `enter` and `space` for selecting
+
+**Chrome**: `up` and `down` arrow keys will set `focus` on `<label>` elements and associated `<input type="radio">` will recieve `checked` attribute via `StructuredList` JavaScript.
+
+**Firefox**: `up` and `down` arrows keys will set focus on `<input type="radio">` through the associated `<label>` and will only set the `checked` attribute on the input. Arrow keys will not set focus on the `<label>`.
+
+#### Add visual styles to text
+
+You can add text to each cell in a structured-list.
+Use CSS to add visual styles to text.
+
+**HTML**
+```html
+<div class="bx--structured-list-td">
+  <p class="bx--structured-list-content bold">Apache Spark</p>
+</div>
+```
+
+**CSS**
+```css
+.bold {
+  font-weight: 700;
+}
+```
diff --git a/src/components/structured-list/_mixins.scss b/src/components/structured-list/_mixins.scss
@@ -0,0 +1,44 @@
+// Used only for .bx--structured-list--condensed
+@mixin padding-td--condensed($padding: $structured-list-padding) {
+  padding: $padding / 4;
+}
+
+// Used only for [data-structured-list]
+@mixin padding--data-structured-list($padding: $structured-list-padding) {
+  padding-left: $padding / 2;
+  padding-right: $padding / 2;
+
+  // Controls gutter sizes for check
+  &:first-child {
+    padding-left: $padding / 2;
+    padding-right: $padding / 4;
+  }
+
+  &:last-child {
+    padding-right: $padding;
+  }
+}
+
+// Used only for normal structured-list
+@mixin padding-td($padding: $structured-list-padding) {
+  padding-left: 0;
+  padding-right: $padding;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  &:last-child {
+    padding-right: $padding;
+  }
+}
+
+// Used only for normal structured-list
+@mixin padding-th($padding: $structured-list-padding) {
+  padding-left: 0;
+  padding-right: $padding;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
@@ -0,0 +1,118 @@
+@import '../../globals/scss/colors';
+@import '../../globals/scss/css--reset';
+@import '../../globals/scss/typography';
+@import '../../globals/scss/mixins';
+@import '../../globals/scss/vars';
+@import '../../globals/scss/layout';
+@import '../../globals/scss/import-once';
+
+@include exports('structured-list') {
+  [data-structured-list] .bx--structured-list-td,
+  [data-structured-list] .bx--structured-list-th {
+    @include padding--data-structured-list;
+  }
+
+  .bx--structured-list-input {
+    @include hidden;
+  }
+
+  .bx--structured-list {
+    @include reset;
+    @include helvetica;
+    display: table;
+    overflow-x: auto;
+    overflow-y: hidden;
+    width: 100%;
+    min-width: 500px;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 5rem;
+    background-color: transparent;
+
+    &.bx--structured-list--border {
+      border: 1px solid $ui-04;
+      background-color: $ui-01;
+    }
+
+    &.bx--structured-list--condensed .bx--structured-list-td {
+      @include padding-td--condensed;
+    }
+  }
+
+  .bx--structured-list-row {
+    display: table-row;
+    border-bottom: 1px solid $ui-04;
+    transition: $transition--base $bx--standard-easing;
+
+    [data-structured-list] &:hover:not(.bx--structured-list-row--header-row) {
+      background-color: rgba($brand-02, .1);
+      cursor: pointer;
+    }
+
+    .bx--structured-list-input:checked + & {
+      background-color: rgba($brand-02, .1);
+    }
+
+    &.bx--structured-list-row--header-row {
+      border-bottom: 2px solid $brand-01;
+      cursor: inherit;
+    }
+
+    &:focus:not(.bx--structured-list-row--header-row) {
+      @include focus-outline('border');
+    }
+  }
+
+  .bx--structured-list-thead {
+    display: table-header-group;
+    vertical-align: middle;
+  }
+
+  .bx--structured-list-th {
+    @include reset;
+    @include padding-th;
+    display: table-cell;
+    font-size: rem(12px);
+    font-weight: 700;
+    height: rem(40px);
+    letter-spacing: 1px;
+    text-align: left;
+    text-transform: uppercase;
+    vertical-align: middle;
+  }
+
+  .bx--structured-list-tbody {
+    display: table-row-group;
+    vertical-align: middle;
+  }
+
+  .bx--structured-list-td {
+    @include padding-td;
+    position: relative;
+    display: table-cell;
+    font-size: rem(14px);
+  }
+
+  .bx--structured-list-content {
+    font-size: rem(14px);
+  }
+
+  .bx--structured-list-content--nowrap {
+    white-space: nowrap;
+  }
+
+  .bx--structured-list-svg {
+    display: inline-block;
+    fill: transparent;
+    vertical-align: middle;
+    transition: $transition--base $bx--standard-easing;
+
+    .bx--structured-list-row:hover & {
+      fill: rgba($brand-02, .1);
+    }
+
+    .bx--structured-list-input:checked + .bx--structured-list-row & {
+      fill: $brand-02;
+    }
+  }
+}
diff --git a/src/components/structured-list/structured-list--selection.html b/src/components/structured-list/structured-list--selection.html
@@ -0,0 +1,66 @@
+<section class="bx--structured-list bx--structured-list--border" data-structured-list>
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+      <div class="bx--structured-list-th">service</div>
+      <div class="bx--structured-list-th">type</div>
+      <div class="bx--structured-list-th">description</div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody">
+    <input tabindex="-1" id="apache-id" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark"
+      checked />
+    <label for="apache-id" aria-label="apache spark" class="bx--structured-list-row" tabindex="0">
+      <div class="bx--structured-list-td">
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+          </path>
+        </svg>
+      </div>
+      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Apache Spark</div>
+      <div class="bx--structured-list-td">IBM</div>
+      <div class="bx--structured-list-td">
+        <p class="bx--structured-list-content">Apache Spark is an open source cluster computing framework optimized for extremely fast and large scale data processing, which you can access via the newly integrated notebook interface IBM Analytics for Apache Spark.</p>
+      </div>
+    </label>
+    <input tabindex="-1" id="cloudant-id" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant"
+    />
+    <label for="cloudant-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
+      <div class="bx--structured-list-td">
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+          </path>
+        </svg>
+      </div>
+      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Cloudant</div>
+      <div class="bx--structured-list-td"><p class="bx--structured-list-content">IBM</p></div>
+      <div class="bx--structured-list-td"><p class="bx--structured-list-content">Cloudant NoSQL DB is a fully managed data layer designed for modern web and mobile applications that leverages a flexible JSON schema.</p></div>
+    </label>
+    <input tabindex="-1" id="block-storate-id" class="bx--structured-list-input" value="block-storage" type="radio" name="services"
+      title="block-storage" />
+    <label for="block-storate-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
+      <div class="bx--structured-list-td">
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+          </path>
+        </svg>
+      </div>
+      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Block Storage</div>
+      <div class="bx--structured-list-td"><p class="bx--structured-list-content">IBM</p></div>
+      <div class="bx--structured-list-td"><p class="bx--structured-list-content">Get local disk performance with SAN persistence and durability. Increase storage capacity available to your Bluemix Virtual and Bare Metal Servers with a maximum of 48k IOPs.*</p></div>
+    </label>
+    <input tabindex="-1" id="open-whisk-id" class="bx--structured-list-input" value="open-whisk" type="radio" name="services"
+      title="open-whisk" />
+    <label for="open-whisk-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
+      <div class="bx--structured-list-td">
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
+          </path>
+        </svg>
+      </div>
+      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Open Whisk</div>
+      <div class="bx--structured-list-td"><p class="bx--structured-list-content">IBM</p></div>
+      <div class="bx--structured-list-td"><p class="bx--structured-list-content">OpenWhisk is an open-source server less compute platform. It executes your functions (actions) in response to events from triggers. It costs nothing when not in use.</p></div>
+    </label>
+  </div>
+</section>
diff --git a/src/components/structured-list/structured-list.html b/src/components/structured-list/structured-list.html
@@ -0,0 +1,29 @@
+<section class="bx--structured-list">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th">service</div>
+      <div class="bx--structured-list-th">type</div>
+      <div class="bx--structured-list-th">description</div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody">
+    <div class="bx--structured-list-row">
+      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Apache Spark</div>
+      <div class="bx--structured-list-td">IBM</div>
+      <div class="bx--structured-list-td">
+        <p class="bx--structured-list-content">Apache Spark is an open source cluster computing framework optimized for extremely fast and large scale data processing,
+          which you can access via the newly integrated notebook interface IBM Analytics for Apache Spark.</p>
+      </div>
+    </div>
+    <div class="bx--structured-list-row">
+      <div class="bx--structured-list-td bx--structured-list-content--nowrap">Cloudant</div>
+      <div class="bx--structured-list-td">
+        <p class="bx--structured-list-content">IBM</p>
+      </div>
+      <div class="bx--structured-list-td">
+        <p class="bx--structured-list-content">Cloudant NoSQL DB is a fully managed data layer designed for modern web and mobile applications that leverages a
+          flexible JSON schema.</p>
+      </div>
+    </div>
+  </div>
+</section>