Skip to content

Commit 70d5ce7

Browse files
mwczmwcz
committed
Merge branch 'master' into 1.0
2 parents 9fe994a + 4e2f6ae commit 70d5ce7

46 files changed

Lines changed: 480 additions & 1073 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎elements/rh-cta/README.md‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,62 @@
1-
# WIP 🐣: RHElements Cta Element
1+
# WIP 🐣: RHElements CTA Element
2+
3+
`rh-cta` is a call-to-action (CTA) element, that stands out from regular hypertext links, and is used for linking users to webpages.
4+
5+
_Note: `rh-cta` is not a button, though it may look like one visually._
26

37
## Usage
48
```html
59
<rh-cta>
10+
<a href="https://github.com/">GitHub</a>
11+
</rh-cta>
12+
13+
<rh-cta priority="primary">
614
<a href="https://rhelements.github.io/">Learn more about RHElements</a>
715
</rh-cta>
16+
17+
<rh-cta priority="secondary">
18+
<a href="https://redhat.com/">Red Hat</a>
19+
</rh-cta>
820
```
921

1022
## Slots
1123

1224
### Default slot
1325

14-
We expect an anchor tag, `<a>`, to be the first child inside rh-cta element.
26+
We expect an anchor tag, `<a>` with an `href`, to be the first child inside `rh-cta` element.
27+
28+
## Styling
29+
30+
| Theme Var Hook | Description | Default |
31+
| -------------- | ----------- | ------- |
32+
| --rh-theme--color--ui-link | Link color for default CTA | $rh-color--ui-link |
33+
| --rh-theme--color--ui-link--hover | Hover color for default CTA | $rh-color--ui-link--hover |
34+
| --rh-theme--color--ui-link--focus | Focus color for default CTA | $rh-color--ui-link--focus |
35+
| --rh-theme--color--ui-accent | Color for Primary CTA | $rh-color--ui-accent |
36+
| --rh-theme--color--ui-accent--hover | Hover color for Primary CTA | $rh-color--ui-accent--hover |
37+
| --rh-theme--color--ui-accent--text | Text color for Primary CTA | $rh-color--ui-accent--text |
38+
| --rh-theme--color--ui-accent--text--hover | Hover text color for Primary CTA | $rh-color--ui-accent--text--hover |
39+
| --rh-theme--color--ui-base | Border & text color for Secondary CTA | $rh-color--ui-base |
40+
| --rh-theme--color--ui-base--hover | Hover color for Secondary CTA | $rh-color--ui-base--hover |
41+
| --rh-theme--color--ui-base--text | Background color for Secondary CTA | $rh-color--ui-base--text |
42+
| --rh-theme--color--ui-base--text--hover | Hover text color for Secondary CTA | $rh-color--ui-base--text--hover |
43+
| --rh-theme--color--text--on-dark | Link color for default CTA with `on="dark"` | $rh-color--text--on-dark |
44+
| --rh-theme--color--ui-link--on-dark--hover | Hover color for default CTA with `on="dark"` | $rh-color--ui-link--on-dark--hover |
45+
46+
### Testing Theme Var Hooks
47+
48+
If you'd like to checkout how theming is possible using our CSS Var hooks, try adding the following to the `<head>` of `./demo/index.html` before running `npm run test`. Feel free to customize the colors too!
49+
50+
```html
51+
<style>
52+
:root {
53+
--rh-theme--color--ui-accent: green;
54+
--rh-theme--color--ui-accent--hover: darkgreen;
55+
--rh-theme--color--ui-accent--text: white;
56+
--rh-theme--color--ui-accent--text--hover: white;
57+
}
58+
</style>
59+
```
1560

1661
## Test
1762

‎elements/rh-cta/demo/index.html‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
<meta charset="utf-8">
55
<title>RHElements: rh-cta Demo</title>
66

7+
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
8+
<!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
9+
710
<!-- uncomment the es5-adapter if you're using the umd version -->
811
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
912
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1013
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
11-
<script>require(['../rh-cta.umd.js'])</script>
12-
13-
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
14+
<script>require(['../../../themes/cp-theme/cp-theme.umd.js','../rh-cta.umd.js'])</script>
1415

1516
<style>
1617
body {
@@ -35,15 +36,6 @@
3536
background: #d2d2d2;
3637
}
3738
</style>
38-
<style>
39-
/* For demoing theme styles... */
40-
:root {
41-
--rh-theme--color--ui-accent: green;
42-
--rh-theme--color--ui-accent--hover: darkgreen;
43-
--rh-theme--color--ui-accent--text: white;
44-
--rh-theme--color--ui-accent--text--hover: white;
45-
}
46-
</style>
4739
<noscript>
4840
<link href="../../rhelement/rhelement-noscript.min.css" rel="stylesheet">
4941
</noscript>

‎elements/rh-cta/rh-cta.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎elements/rh-cta/rh-cta.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎elements/rh-cta/rh-cta.story.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ const stories = storiesOf("Call To Action", module);
66
stories.addDecorator(withKnobs);
77

88
stories.add("rh-cta", () => {
9-
const type = "Type";
9+
const type = "Priority";
1010
const options = {
11-
solid: "Solid",
12-
outlined: "Outlined",
13-
ghost: "Ghost"
11+
default: "default",
12+
primary: "primary",
13+
secondary: "secondary"
1414
};
1515

1616
const defaultValue = "Solid";
@@ -22,7 +22,7 @@ stories.add("rh-cta", () => {
2222
<rh-cta><a href="#">Become a Member</a></rh-cta>
2323
</p>
2424
<p>
25-
<rh-cta class="rh--${value}"><a href="#">Become a Member</a></rh-cta>
25+
<rh-cta priority="${value}"><a href="#">Become a Member</a></rh-cta>
2626
</p>
2727
2828
`;

0 commit comments

Comments
 (0)