From 2e6eede190acc636ac71c521914dcef2e13a8445 Mon Sep 17 00:00:00 2001 From: mwcz Date: Thu, 22 Aug 2019 13:58:08 -0400 Subject: [PATCH 1/3] fix pfe-icon-panel demo page --- elements/pfe-icon-panel/demo/index.html | 6 +++--- elements/pfe-icon-panel/src/pfe-icon-panel.js | 13 ++++--------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/elements/pfe-icon-panel/demo/index.html b/elements/pfe-icon-panel/demo/index.html index b68bd0ce91..6451832a36 100644 --- a/elements/pfe-icon-panel/demo/index.html +++ b/elements/pfe-icon-panel/demo/index.html @@ -19,7 +19,7 @@ - +

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more @@ -36,11 +36,11 @@

Stacked & Centered

Circled Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - +

Circled Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - +

Circled Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/elements/pfe-icon-panel/src/pfe-icon-panel.js b/elements/pfe-icon-panel/src/pfe-icon-panel.js index e0a2360fb7..10a8bbb678 100644 --- a/elements/pfe-icon-panel/src/pfe-icon-panel.js +++ b/elements/pfe-icon-panel/src/pfe-icon-panel.js @@ -15,22 +15,17 @@ class PfeIconPanel extends PFElement { } static get observedAttributes() { - return ["pfe-icon", "pfe-circled"]; + return ["icon", "circled"]; } static get cascadingAttributes() { return { - "pfe-icon": "pfe-icon", - "pfe-circled": "pfe-icon" + icon: "pfe-icon", + circled: "pfe-icon", + color: "pfe-icon" }; } - attributeChangedCallback() { - super.attributeChangedCallback(...arguments); - - console.log(`attr changed ${[...arguments]}`); - } - constructor() { super(PfeIconPanel); } From b3b44901475528f0421f36b9a17e559f1cc72801 Mon Sep 17 00:00:00 2001 From: mwcz Date: Thu, 22 Aug 2019 13:59:16 -0400 Subject: [PATCH 2/3] fix readme... wat --- README.md | 52 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 33 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index e2679dd6c0..d50d824e07 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,46 @@ -# PatternFly Element | Icon Element +PatternFly Elements logo + +## Table of Contents -## Dependencies +1. [Getting started][getting-started] +2. [Element catalog][catalog] +3. [Creating components][creating] +4. [Theming components][theming] -Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-component-tester] installed. +[PatternFly Elements][pfe-home] is a collection of flexible and lightweight [Web Components][wc-org], and the tools to build them. PatternFly Elements are: - npm install -g polyserve web-component-tester +- **Lightweight**: small file size, minimal boilerplate, no "framework-like" features. +- **Universal**: write once, use everywhere. PatternFly Elements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used. +- **Themable**: Make overrides as needed via attributes or CSS variables -## Dev +The result of these principles is that you can plug one set of components into a wide variety of applications; bringing UX consistency and developer familiarity to any web project. - npm start +A Yeoman generator is included for creating Web Components that meets these goals. -## Test +## Quick start - npm run test + git clone git@github.com:patternfly/patternfly-elements.git + cd patternfly-elements + npm install # this will take a while due to lerna bootstrap + npm run storybook -## Build +The storybook script will launch the interactive demo pages. - npm run build +_Note: You will need to use [Node](https://nodejs.org/en/) v.7 or higher._ -## Demo +--- -Run `npm start` and Polyserve will start a server and open your default browser to the demo page of the element. +[home][pfe-home] | +[start][getting-started] | +[develop][creating] | +[theming][theming] | +[storybook][catalog] | +[web components][wc-org] -## Code style -Icon (and all PatternFly Elements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. - -[prettier]: https://github.com/prettier/prettier/ -[prettier-ed]: https://github.com/prettier/prettier/#editor-integration -[polyserve]: https://github.com/Polymer/polyserve -[web-component-tester]: https://github.com/Polymer/web-component-tester +[pfe-home]: https://patternfly.github.io/patternfly-elements +[getting-started]: https://patternfly.github.io/patternfly-elements/getting-started +[catalog]: https://patternfly.github.io/patternfly-elements/demo +[creating]: https://patternfly.github.io/patternfly-elements/develop +[theming]: https://patternfly.github.io/patternfly-elements/theme +[wc-org]: https://webcomponents.org From d8ad766f2ccf1c6d7a39393519fed76013d5cccb Mon Sep 17 00:00:00 2001 From: Kyle Buchanan Date: Thu, 22 Aug 2019 14:05:50 -0400 Subject: [PATCH 3/3] removing the logo and adding the build status image from Travis-CI --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d50d824e07..92f3beb878 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -PatternFly Elements logo - +# PatternFly Elements [![Build Status](https://travis-ci.org/patternfly/patternfly-elements.svg?branch=master)](https://travis-ci.org/patternfly/patternfly-elements) + ## Table of Contents 1. [Getting started][getting-started] @@ -30,11 +30,11 @@ _Note: You will need to use [Node](https://nodejs.org/en/) v.7 or higher._ --- -[home][pfe-home] | -[start][getting-started] | -[develop][creating] | -[theming][theming] | -[storybook][catalog] | +[home][pfe-home] | +[start][getting-started] | +[develop][creating] | +[theming][theming] | +[storybook][catalog] | [web components][wc-org]