Skip to content

Commit 07db7a2

Browse files
mwczmwcz
committed
Merge branch 'master' into 1.0
2 parents a3801e3 + 8d2cbdc commit 07db7a2

53 files changed

Lines changed: 1565 additions & 427 deletions

Some content is hidden

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

‎.storybook/config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { setOptions } from "@storybook/addon-options";
33
const req = require.context("../elements", true, /\.story\.js$/);
44

55
setOptions({
6-
name: "RHElements"
6+
name: "RHElements",
7+
addonPanelInRight: true
78
});
89

910
function loadStories() {

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

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

7-
<!-- needed for CP-Themeset -->
8-
<link rel="stylesheet" type="text/css" href="//overpass-30e2.kxcdn.com/overpass.css">
7+
<!-- needed for CP-Theme -->
8+
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />
99
<!--
1010
if support for IE11 IS NOT needed, just include the stylesheet
1111
than contains all of the variables for your themeset
1212
-->
13-
<!-- use cp-themeset -->
14-
<!-- <link rel="stylesheet" type="text/css" href="../../cp-themeset/cp-themeset.css"> -->
15-
16-
<!-- use another themeset -->
17-
<!-- <link rel="stylesheet" type="text/css" href="../../test-themeset/test-themeset.css"> -->
13+
<!-- use cp-theme -->
14+
<!-- <link rel="stylesheet" href="../../../themes/cp-theme/cp-theme.css" /> -->
1815

1916
<!-- uncomment the es5-adapter if you're using the umd version -->
2017
<script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
@@ -26,7 +23,11 @@
2623
that you want
2724
-->
2825
<script>
29-
require(['../rh-card.umd.js']);
26+
require([
27+
'../../../themes/cp-theme/cp-theme.umd.js',
28+
'../../rh-cta/rh-cta.umd.js',
29+
'../rh-card.umd.js'
30+
]);
3031
</script>
3132

3233
<noscript>
@@ -35,27 +36,68 @@
3536

3637
<link href="../../rhelement/rhelement.min.css" rel="stylesheet">
3738

38-
<!--
39-
if support IS needed for IE11
40-
-->
41-
<!-- use cp-themeset with support for IE11 -->
42-
<!-- <script>require(['../../cp-themeset/cp-themeset.umd.js','../rh-card.umd.js'])</script> -->
39+
<style>
40+
/* For demo only */
41+
.demo-cards {
42+
display: flex;
43+
flex-wrap: wrap;
44+
}
4345

44-
<!-- use another themeset with support for IE11 -->
45-
<!-- <script>require(['../../test-themeset/test-themeset.umd.js','../rh-card.umd.js'])</script> -->
46+
.demo-cards > * {
47+
margin: 0 16px 32px;
48+
width: calc(25% - 32px);
49+
}
50+
</style>
4651

4752
</head>
4853
<body unresolved>
4954
<h1>&lt;rh-card&gt;</h1>
50-
<rh-card theme="dark">
51-
<h2 slot="header">Dark Theme</h2>
52-
This is rh-card with a dark theme.
53-
<div slot="footer">Text in footer</div>
54-
</rh-card>
55-
<rh-card theme="light">
56-
<h2 slot="header">Light Theme</h2>
57-
This is rh-card with a light theme.
58-
<div slot="footer">Text in footer</div>
59-
</rh-card>
55+
<div class="demo-cards">
56+
57+
<rh-card color="lightest">
58+
<h2 slot="header">Lightest card</h2>
59+
<p>This is the lightest rh-card and <a href="#">a link</a>.</p>
60+
<div slot="footer"><rh-cta priority="primary"><a href="#">Learn more</a></rh-cta></div>
61+
</rh-card>
62+
<rh-card color="light">
63+
<h2 slot="header">Light card</h2>
64+
65+
<p>
66+
This is the light rh-card and <a href="#">a link</a>.
67+
</p>
68+
<p>
69+
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
70+
</p>
71+
<p>
72+
Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
73+
</p>
74+
75+
<div slot="footer"><rh-cta priority="secondary"><a href="#">Learn more</a></rh-cta></div>
76+
</rh-card>
77+
<rh-card>
78+
<h2 slot="header">Default card</h2>
79+
Unwrapped item. This is the default rh-card and <a href="#">a link</a>.
80+
<div slot="footer"><rh-cta priority="secondary"><a href="#">Learn more</a></rh-cta></div>
81+
</rh-card>
82+
<rh-card color="dark">
83+
<h2 slot="header">Dark Card</h2>
84+
<p>This is the dark rh-card and <a href="#">a link</a>.</p>
85+
<div slot="footer"><rh-cta priority="secondary" on="dark"><a href="#">Learn more</a></rh-cta></div>
86+
</rh-card>
87+
<rh-card color="darkest">
88+
<h2 slot="header">Darkest Card</h2>
89+
<p>This is the darkest rh-card and <a href="#">a link</a>.</p>
90+
<div slot="footer"><rh-cta priority="secondary" on="dark"><a href="#">Learn more</a></rh-cta></div>
91+
</rh-card>
92+
<rh-card color="complement">
93+
<h2 slot="header">Complement Card</h2>
94+
<p>This is the complement rh-card and <a href="#">a link</a>.</p>
95+
<div slot="footer"><rh-cta priority="secondary" on="dark"><a href="#">Learn more</a></rh-cta></div>
96+
</rh-card>
97+
<rh-card color="accent">
98+
<h2 slot="header">Accent Card</h2>
99+
<p>This is the accent rh-card and <a href="#">a link</a>. Leverage agile frameworks to provide a robust synopsis for high level overviews.</p>
100+
</rh-card>
101+
</div>
60102
</body>
61103
</html>

‎elements/rh-card/gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ ${html}\`;
8686
});
8787

8888
gulp.task("watch", () => {
89-
return gulp.watch("./src/*", ["build"]);
89+
return gulp.watch("./src/*", gulp.series("build"));
9090
});
9191

9292
gulp.task("bundle", shell.task("../../node_modules/.bin/rollup -c"));

‎elements/rh-card/rh-card.js‎

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

0 commit comments

Comments
 (0)