Skip to content

Commit

Permalink
Finalized names (version breaking). Updated and fixed more things in the
Browse files Browse the repository at this point in the history 
ReadMe.
  • Loading branch information
@daqst
daqst committed Feb 23, 2018
1 parent aee57b9 commit b691b6a
Show file tree
Hide file tree
Showing 7 changed files with 482 additions and 458 deletions.
112 changes: 63 additions & 49 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,72 +3,87 @@

## <rula-expandable-card>

`rula-expandable-card` is a web component inspired by a Material Design Card.
When the user interacts, the card grows to fill some or all of the screen along
with showing additional content. The switch between the 'closed' and 'open'
states are nicely animated following Material guidelines.
`rula-expandable-card` is an elements combining aspects of Material Design
[Cards](https://www.google.com/design/spec/components/cards.html) and
[Dialogs](https://www.google.com/design/spec/components/dialogs.html).
It displays static content in similar fashion to a Card, and when clicked by the
user it expands to fill the screen like a modal dialog while showing additional
content.

An expandable card has two sections, the `header` and `content` slots. Anything
in the `header` will be visible when the card is closed while the `content` is
what is made visible when the card is expanded.

The following code adds a simple expanding card with content in the header.
### Example

<!---
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="rula-expandable-card.html">
<style>
rula-expandable-card {
--rula-expandable-card: {
height: 200px;
width: 300px;
padding: 25px;
overflow: hidden;
}
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="rula-expandable-card.html">
<custom-style>
<style is="custom-style">
rula-expandable-card {
height: 200px;
width: 300px;
padding: 25px;
overflow: hidden;
--rula-expandable-card-body: {
align-items: flex-end;
background-color: var(--rula-expandable-card-header-bg, #002d72);
border-radius: 2px;
color: var(--rula-expandable-card-header-text, #ffffff);
cursor: pointer;
display: flex;
font-size: 24px;
justify-content: flex-start;
padding: 16px;
}
}
--rula-expandable-card-body: {
align-items: flex-end;
background-color: #002d72;
border-radius: 2px;
color: #ffffff;
cursor: pointer;
display: flex;
font-size: 24px;
justify-content: flex-start;
padding: 16px;
}
}
div[header] {
@apply --rula-expandable-card-body;
border-radius: 0;
}
div[header] {
@apply --rula-expandable-card-body;
border-radius: 0;
}
div[content] {
font-size: 18px;
padding: 24px;
}
</style>
<next-code-block></next-code-block>
</template>
div[content] {
font-size: 18px;
padding: 24px;
}
</style>
</custom-style>
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html
<rula-expandable-card>
<div header>
<div main-content>
<h2>Here's a question</h2>
<span>How much wood can a woodchuck chuck if a woodchuck chould chuck wood?</span>
</div>
<div content>
<div extra-content>
A woodchuck would chuck as much wood as a woodchuck could chuck if a woodchuck could chuck wood!
</div>
<rula-expandable-card>
</rula-expandable-card>
```

### Structure
A `rula-expandable-card` has three main parts:

```html
<div id="scrim"></div>
<div id="body"></div>
<div id="modal">
<slot></slot>
</div>
```
- `scrim` is used to hide the rest of the page when the card is open.
- `body` displays everything in `[main-content]` and is what the user sees
when the card is closed.
- `modal` displays everything in both `[main-content]` and `[extra-content]`
and is what the user sees when the card is open.


## Install

```
Expand All @@ -82,7 +97,6 @@ The following custom properties and mxing are available for styling:
Custom propery | Description | Default
---------------|-------------|----------
`--rula-expandable-card-scrim` | Mixin applied to the background when the card is open | `{}`
`--rula-expandable-card-header` | Style mixin for the header section | `{}`
`--rula-expandable-card-modal-bg` | Background colour of the expanded card | `#FFF`
`--rula-expandable-card-body` | Mixin applied to the body of the card when closed | `{}`
`--rula-expandable-card-body` | Mixin applied to the body of the card when closed | `{}`
`--rula-expandable-card-modal` | Mixin applied to the modal container when open | `{}`
`--rula-expandable-card` | Mixin applied to the element | `{}`
58 changes: 29 additions & 29 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
{
"name": "rula-expandable-card",
"version": "2.0.0",
"authors": [
"Ryerson University Library & Archives"
],
"license": "BSD-3-Clause",
"description": "A component based on a Material Design Card that maximizes on user interaction.",
"main": "rula-expandable-card.html",
"demos": {
"Demos": "demo/index.html"
},
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0",
"paper-styles": "^2.1.0"
},
"devDependencies": {
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"resolutions": {
"polymer": "^2.0.0"
},
"repository": {
"type": "git",
"url": "git://github.com/ryersonlibrary/rula-expandable-card.git"
},
"private": true,
"ignore": []
"name": "rula-expandable-card",
"version": "2.0.0",
"authors": [
"Ryerson University Library & Archives"
],
"license": "BSD-3-Clause",
"description": "A component based on a Material Design Card that maximizes on user interaction.",
"main": "rula-expandable-card.html",
"demos": {
"Demos": "demo/index.html"
},
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0",
"paper-styles": "^2.1.0"
},
"devDependencies": {
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"resolutions": {
"polymer": "^2.0.0"
},
"repository": {
"type": "git",
"url": "git://github.com/ryersonlibrary/rula-expandable-card.git"
},
"private": true,
"ignore": []
}
154 changes: 77 additions & 77 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,95 +8,95 @@
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>rula-expandable-card demo</title>
<title>rula-expandable-card demo</title>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../rula-expandable-card.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../rula-expandable-card.html">

<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
:root {
--rula-expandable-card-header-bg: #777;
--rula-expandable-card-header-text: #000;
}
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
:root {
--rula-expandable-card-header-bg: #777;
--rula-expandable-card-header-text: #000;
}

* {
box-sizing: border-box;
}
* {
box-sizing: border-box;
}

rula-expandable-card {
--rula-expandable-card: {
height: 200px;
width: 200px;
padding: 25px;
overflow: hidden;
}
rula-expandable-card {
--rula-expandable-card: {
height: 200px;
width: 200px;
padding: 25px;
overflow: hidden;
}

--rula-expandable-card-body: {
align-items: flex-end;
background-color: var(--rula-expandable-card-header-bg, #002d72);
border-radius: 2px;
color: var(--rula-expandable-card-header-text, #ffffff);
cursor: pointer;
display: flex;
font-size: 24px;
justify-content: flex-start;
padding: 16px;
}
}
--rula-expandable-card-body: {
align-items: flex-end;
background-color: var(--rula-expandable-card-header-bg, #002d72);
border-radius: 2px;
color: var(--rula-expandable-card-header-text, #ffffff);
cursor: pointer;
display: flex;
font-size: 24px;
justify-content: flex-start;
padding: 16px;
}
}

div[header] {
@apply --rula-expandable-card-body;
border-radius: 0;
}
div[main-content] {
@apply --rula-expandable-card-body;
border-radius: 0;
}

div[content] {
font-size: 18px;
padding: 24px;
}
</style>
</custom-style>
div[extra-content] {
font-size: 18px;
padding: 24px;
}
</style>
</custom-style>
</head>

<body>
<div class="vertical-section-container centered">
<h3>Vanilla component</h3>
<demo-snippet>
<template>
<rula-expandable-card>
<div header>
Card 1 Header
</div>
<div content>
A woodchuck would chuck as much wood as a woodchuck could chuck if a woodchuck could
chuck wood!
</div>
</rula-expandable-card>
<rula-expandable-card>
<div header>
Card 2 Header
</div>
<div content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis faucibus eros,
nec varius nibh. Proin finibus sed massa at auctor. Pellentesque ut lacinia
risus. Maecenas lacinia erat mi, sit amet malesuada massa lobortis in. Nulla
facilisi. Aliquam porta aliquet tortor, sit amet aliquam odio luctus quis.
Sed pellentesque dictum orci ut porta. Nam in ex non turpis rhoncus efficitur
nec ac ipsum. Nullam venenatis tortor nisi, ut molestie dui hendrerit in. Praesent
varius a purus at feugiat. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Duis a ullamcorper mi. Ut placerat tristique
euismod. Aenean sed justo nulla. Nam hendrerit sed ex a condimentum.
</div>
</rula-expandable-card>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Vanilla component</h3>
<demo-snippet>
<template>
<rula-expandable-card>
<div main-content>
Card 1 Header
</div>
<div extra-content>
A woodchuck would chuck as much wood as a woodchuck could chuck if a woodchuck could
chuck wood!
</div>
</rula-expandable-card>
<rula-expandable-card>
<div main-content>
Card 2 Header
</div>
<div extra-content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis faucibus eros,
nec varius nibh. Proin finibus sed massa at auctor. Pellentesque ut lacinia
risus. Maecenas lacinia erat mi, sit amet malesuada massa lobortis in. Nulla
facilisi. Aliquam porta aliquet tortor, sit amet aliquam odio luctus quis.
Sed pellentesque dictum orci ut porta. Nam in ex non turpis rhoncus efficitur
nec ac ipsum. Nullam venenatis tortor nisi, ut molestie dui hendrerit in. Praesent
varius a purus at feugiat. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Duis a ullamcorper mi. Ut placerat tristique
euismod. Aenean sed justo nulla. Nam hendrerit sed ex a condimentum.
</div>
</rula-expandable-card>
</template>
</demo-snippet>
</div>
</body>

</html>
10 changes: 5 additions & 5 deletions polymer.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"lint": {
"rules": [
"polymer-2"
]
}
"lint": {
"rules": [
"polymer-2"
]
}
}
Loading

0 comments on commit b691b6a

Please sign in to comment.