Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: add new bolt-li shared component; update package.json and .…
…boltrc accordingly
- Loading branch information
Showing
11 changed files
with
308 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| List item helper element used by other list-like components (like `<bolt-ul>` and `<bolt-ol>`). | ||
|
|
||
| ###### Install via NPM | ||
|
|
||
| ``` | ||
| npm install @bolt/components-li | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { polyfillLoader } from '@bolt/core/polyfills'; | ||
|
|
||
| polyfillLoader.then(res => { | ||
| import(/* webpackMode: 'eager', webpackChunkName: 'bolt-li' */ './src/li'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @import 'src/li'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| title: List Item | ||
| type: object | ||
| require: | ||
| - items | ||
| properties: | ||
| attributes: | ||
| type: object | ||
| description: A Drupal-style attributes object with extra attributes to append to this component. | ||
| item: | ||
| type: [string, object, array] | ||
| description: Renderable content (i.e. a string, render array, or included pattern) for a single list item. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| { | ||
| "name": "@bolt/components-li", | ||
| "description": "Bolt List Item Component", | ||
| "keywords": [ | ||
| "bolt design system", | ||
| "bolt", | ||
| "css framework", | ||
| "design system", | ||
| "components" | ||
| ], | ||
| "version": "2.2.0", | ||
| "maintainers": [ | ||
| { | ||
| "name": "Salem Ghoweri", | ||
| "email": "me@salemghoweri.com", | ||
| "web": "https://github.com/sghoweri" | ||
| }, | ||
| { | ||
| "name": "Mike Mai", | ||
| "email": "boss@mikemai.net", | ||
| "web": "http://mikemai.net/" | ||
| } | ||
| ], | ||
| "homepage": "https://boltdesignsystem.com", | ||
| "license": "MIT", | ||
| "repository": "https://github.com/bolt-design-system/bolt/tree/master/packages/components/lists/bolt-li", | ||
| "bugs": "https://github.com/bolt-design-system/bolt/issues", | ||
| "style": "index.scss", | ||
| "main": "index.js", | ||
| "twig": "src/li.twig", | ||
| "schema": "li.schema.yml", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "dependencies": { | ||
| "@bolt/core": "^2.2.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { define, props, mapWithDepth } from '@bolt/core/utils'; | ||
| import classNames from 'classnames/bind'; | ||
| import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html'; | ||
|
|
||
| import styles from './li.scss'; | ||
|
|
||
| let cx = classNames.bind(styles); | ||
|
|
||
| @define | ||
| class BoltListItem extends withLitHtml() { | ||
| static is = 'bolt-li'; | ||
|
|
||
| static props = { | ||
| level: { | ||
| ...props.number, | ||
| ...{ default: 1 }, | ||
| }, | ||
| type: { | ||
| ...props.string, | ||
| ...{ default: 'ul' }, | ||
| }, | ||
| }; | ||
|
|
||
| connected() { | ||
| this.level = this.parentNode.level ? this.parentNode.level : this.props.level; | ||
| this.type = this.parentNode.tagName === 'BOLT-OL' ? 'ol' : 'ul'; | ||
| } | ||
|
|
||
| render() { | ||
| // this.level = this.parentNode.level ? this.parentNode.level : this.level; | ||
|
|
||
| const classes = cx('c-bolt-li', { | ||
| [`c-bolt-li--l${this.level}`]: this.level, | ||
| [`c-bolt-li--${this.type}-item`]: this.type, | ||
| [`c-bolt-li--level-${this.level % 3 !== 0 ? this.level % 3 : 3}`]: this.level, // allow up to 3 levels of nested styles before repeating | ||
| }); | ||
|
|
||
| // helper function called by the mapWithDepth util to increment the depth of nested children | ||
| function addNestedLevelProps(childNode, depth) { | ||
| childNode.level = depth + 1; | ||
| } | ||
|
|
||
| this.slots.default = this.slots.default.map( | ||
| mapWithDepth(this.level, addNestedLevelProps), | ||
| ); | ||
|
|
||
| return html` | ||
| ${this.addStyles([styles])} | ||
| <li class="${classes}">${this.slot('default')}</li> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| export { BoltListItem }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| @import '@bolt/core'; | ||
|
|
||
| // Local Variables | ||
| $bolt-li-bullet-size: 6px; // Using px here because I need to make a perfect circle without subpixel issues. | ||
|
|
||
| // Local Variables | ||
| $bolt-ol-bullet-size: $bolt-line-height--xsmall + rem; | ||
| $bolt-ol-bullet-bg-color: rgba(bolt-color(gray), 0.2); | ||
|
|
||
| bolt-li { | ||
| display: list-item; | ||
| } | ||
|
|
||
| .c-bolt-li { | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| margin-bottom: bolt-spacing(xxsmall); | ||
| // margin-left: bolt-spacing(small) + bolt-spacing(xsmall); | ||
| margin-left: bolt-spacing(medium); | ||
| @include bolt-padding(0); | ||
|
|
||
| .c-bolt-li:before { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| .c-bolt-li--ul-item { | ||
| &:before { | ||
| content: ''; | ||
| display: block; | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| top: calc(0.55rem + 1px); | ||
| left: bolt-spacing(small) * -2; | ||
| width: $bolt-li-bullet-size; | ||
| height: $bolt-li-bullet-size; | ||
| line-height: $bolt-li-bullet-size; | ||
| border: 1px solid bolt-theme(headline); | ||
| border-radius: $bolt-li-bullet-size; | ||
| background-color: bolt-theme(headline); | ||
| } | ||
|
|
||
| // &.c-bolt-li--level-2:before { | ||
| // background-color: transparent; | ||
| // } | ||
|
|
||
| // &.c-bolt-li--level-3:before { | ||
| // border-radius: 0; | ||
| // background-color: bolt-theme(headline); | ||
| // } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // &.c-bolt-li--level-3:before { | ||
| // border-radius: 0; | ||
| // background-color: bolt-theme(headline); | ||
| // } | ||
|
|
||
|
|
||
| // bolt-ol-item { | ||
| // position: relative; | ||
|
|
||
| // &:before { | ||
| // @include bolt-font-size(xsmall); | ||
| // @include bolt-font-weight(bold); | ||
|
|
||
| // // content: counter(li); | ||
| // // display: block; | ||
| // // position: absolute; | ||
| // // top: 0.125em; | ||
| // // left: 0; | ||
| // // width: $bolt-ol-bullet-size; | ||
| // // height: $bolt-ol-bullet-size; | ||
| // // counter-increment: li; | ||
| // // color: bolt-theme(headline); | ||
| // // line-height: $bolt-ol-bullet-size; | ||
| // // text-align: center; | ||
| // // border-radius: $bolt-ol-bullet-size; | ||
| // // background-color: $bolt-ol-bullet-bg-color; | ||
| // } | ||
| // } | ||
|
|
||
| // .c-bolt-ol-item { | ||
| // @include bolt-margin(0 0 0 medium); | ||
| // @include bolt-padding(0); | ||
|
|
||
| // position: relative; | ||
|
|
||
| // &__content { | ||
| // @include bolt-margin-bottom(small); | ||
| // } | ||
|
|
||
| // &--last-item { | ||
| // @include bolt-margin-bottom(0); | ||
| // } | ||
| // } | ||
| .c-bolt-li--ol-item { | ||
| // @include bolt-margin(0 0 0 medium); | ||
| } | ||
|
|
||
| .c-bolt-li--ol-item:before { | ||
| @include bolt-font-size(xsmall); | ||
| @include bolt-font-weight(bold); | ||
| content: counter(li); | ||
| display: block; | ||
| position: absolute; | ||
| top: 0.125em; | ||
| // left: 0; | ||
| left: bolt-spacing(small) * -2; | ||
| width: $bolt-ol-bullet-size; | ||
| height: $bolt-ol-bullet-size; | ||
| counter-increment: li; | ||
| color: bolt-theme(headline); | ||
| line-height: $bolt-ol-bullet-size; | ||
| text-align: center; | ||
| border-radius: $bolt-ol-bullet-size; | ||
| background-color: $bolt-ol-bullet-bg-color; | ||
| } | ||
|
|
||
| // [Mai] This is an IE specific fix to center the number inside the circle. IE calculates line-height differently. | ||
| @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { | ||
| .c-bolt-li--ol-item:before { | ||
| line-height: $bolt-line-height--medium; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| {% set attributes = create_attribute(attributes|default({})) %} | ||
| {% set base_class = "c-bolt-li" %} | ||
|
|
||
| {% set last = loop.last %} | ||
| {% set classes = [ | ||
| "#{base_class}", | ||
| type ? "#{base_class}--#{type}-item", | ||
| ] %} | ||
|
|
||
| {% if item.text %} | ||
| {% set children = item.text %} | ||
| {% elseif item.children %} | ||
| {% set children = item.children %} | ||
| {% elseif item %} | ||
| {% set children = item %} | ||
| {% endif %} | ||
|
|
||
| <bolt-li {{ attributes }}> | ||
| <replace-with-grandchildren> | ||
| <li class="{{ classes|join(" ") }}"> | ||
| {{ children }} | ||
|
|
||
| {# {% if item is iterable %} | ||
| {% for i in item %} | ||
| {% set inner_item_attributes = create_attribute({}) %} | ||
| {% set last_i = loop.last %} | ||
| {% set inner_classes = [ | ||
| "#{base_class}bolt-ordered-list", | ||
| last and last_i ? "#{base_class}--last-item", | ||
| ] %} | ||
| {{ i }} | ||
| {% endfor %} | ||
| {% else %} | ||
| {{ item }} | ||
| {% endif %} #} | ||
| </li> | ||
| </replace-with-grandchildren> | ||
| </bolt-li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters