Skip to content

Fix root README and pfe-icon-panel demo. #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mwcz merged 4 commits into from
Aug 22, 2019
Merged

Fix root README and pfe-icon-panel demo. #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e6eede
fix pfe-icon-panel demo page
mwcz Aug 22, 2019
b3b4490
fix readme... wat
mwcz Aug 22, 2019
d8ad766
removing the logo and adding the build status image from Travis-CI
kylebuch8 Aug 22, 2019
bc48948
Merge branch 'master' into pfe-icon-cleanup
mwcz Aug 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 32 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,46 @@
# PatternFly Element | Icon Element
# PatternFly Elements [![Build Status](https://travis-ci.org/patternfly/patternfly-elements.svg?branch=master)](https://travis-ci.org/patternfly/patternfly-elements)

## Dependencies
## Table of Contents

Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-component-tester] installed.
1. [Getting started][getting-started]
2. [Element catalog][catalog]
3. [Creating components][creating]
4. [Theming components][theming]

npm install -g polyserve web-component-tester
[PatternFly Elements][pfe-home] is a collection of flexible and lightweight [Web Components][wc-org], and the tools to build them. PatternFly Elements are:

## Dev
- **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

npm start
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.

## Test
A Yeoman generator is included for creating Web Components that meets these goals.

npm run test
## Quick start

## Build
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

npm run build
The storybook script will launch the interactive demo pages.

## Demo
_Note: You will need to use [Node](https://nodejs.org/en/) v.7 or higher._

Run `npm start` and Polyserve will start a server and open your default browser to the demo page of the element.
---

## Code style
[home][pfe-home] |
[start][getting-started] |
[develop][creating] |
[theming][theming] |
[storybook][catalog] |
[web components][wc-org]

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
6 changes: 3 additions & 3 deletions elements/pfe-icon-panel/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<link href="../../pfelement/pfelement.min.css" rel="stylesheet">
</head>
<body unresolved>
<pfe-icon-panel icon="rh-server">
<pfe-icon-panel icon="rh-server" circled color="critical">
<h3 slot="header">Default</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<pfe-cta slot="footer"><a href="#">Learn more</a></pfe-cta>
Expand All @@ -36,11 +36,11 @@ <h3 slot="header">Stacked &amp; Centered</h3>
<h3 slot="header">Circled Default</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</pfe-icon-panel>
<pfe-icon-panel icon="rh-server-alt2" circled="dark">
<pfe-icon-panel icon="rh-server-alt2" circled color="dark">
<h3 slot="header">Circled Default</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</pfe-icon-panel>
<pfe-icon-panel icon="rh-server-deploy" circled="darkest">
<pfe-icon-panel icon="rh-server-deploy" circled color="darkest">
<h3 slot="header">Circled Default</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</pfe-icon-panel>
Expand Down
13 changes: 4 additions & 9 deletions elements/pfe-icon-panel/src/pfe-icon-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down