mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
1e47fd7383
Fixes #5524 This fixes the new md-typescale file not being published. Our build assumes CSS-to-JS files end in "-styles". This isn't a breaking change since the typescale classes haven't been published yet. PiperOrigin-RevId: 617613456
115 lines
6.1 KiB
TypeScript
115 lines
6.1 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import '@material/web/button/filled-button.js';
|
|
import '@material/web/labs/card/elevated-card.js';
|
|
import '@material/web/labs/card/filled-card.js';
|
|
import '@material/web/labs/card/outlined-card.js';
|
|
|
|
import {MaterialStoryInit} from './material-collection.js';
|
|
import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
|
|
import {css, html} from 'lit';
|
|
|
|
/** Knob types for card stories. */
|
|
export interface StoryKnobs {}
|
|
|
|
const MEDIA_IMAGE =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAC8CAYAAADCScSrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAlHSURBVHgB7d0HbxtHFsDxJ1Hdala15CaXxL44TmLg7vt/gQNyJbmzZUqkOtVFFVLd4dsUO4oKy+7szL7/DzCSAEESI3+uZme5b9pm88VPAhjRLoAhBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TCB6mEDxM6RA4sb6xKYdHRzI+NiqDAwOCdBC8A6trJZmdm4/+fKX25/9494P09vYI3GNJk7DT0zMpLi398deXl5eSLxQE6SD4hBUXF6Pov7S9sys7u7sC9wg+QbpmL9XW7tfJzxfl0yfOonCN4BOUny9ES5jrVKpVWV5dFbhF8AnZ2NySvfL+rX/PwtJybblzKnCH4BOgV/W5QvHOv+/8/ELmi4sCdwg+AXrlPqnzyl3a2JD9gwOBGwQfs+PjE1laaWxtrmt9bmDdIPiY6R77TTeqN9k/OIyu9EgewcdI99a3tnekGYWFxdqa/lyQLIKPiV7VW7kB1YdTuvZHsgg+Jqul9ehBUyuWV9ekUqkKkkPwMdCrsy5JWqU3rh/n5wXJIfgYFBYW5OLiQuKwu1eu3QdsC5JB8C3SZczaerw7LHOFhYZ3elAfgm/R+9m8xK16fCyLyyuC+BF8C0q1K3urN6o30eBPTvieTdwIvknRNmRt7Z7oP7+Y3D/fKoJvksZ49cWOuK1vbspeuSyID8E34eioEu27u/Bxju/ZxIngm6BLGVe7KEeVSm0XyM2HywKCb5B+V0bfSXVJl098zyYeBN+AaOLAvPuJA/qiSD0vlOBuBN8A/a7L8cmJpKH02yAntIbg6xTNl1lckrTojWsaP12yhuDrdNsEAlf0pfD1G8Z+oD4EX4fy/r5sbG2JD/QGNq4vqllE8HeIvrI7589SQl8O53s2zSP4O6zF8GJH3PQl8Wr1WNA4gr/F1UGovmAga/MI/hbXDUL1BQNZm0PwN7htEKovGMjaOIK/gQ/bkHdhIGvjCP4a9QxC9QUDWRtD8FfUOwjVFwxkbQzBX9HIIFRfMJC1fgT/hWYGofqCgaz1IfgvNDMI1RcMZK0Pwf+mlUGovmAg690IXlofhOoLBrLejeAlnkGovmAg6+3MBx/XIFRfMJD1duaDj3MQqi8YyHoz08EnMQjVFwxkvZ7p4JMYhOoLBrJez2zwSQ5C9QUDWf/KZPBJD0L1BQNZ/8pk8C4GofqCgax/Zi54l4NQfcFA1s/MBe9yEKovGMj6mangdX/a9SBUX+gyjqu8seAt70tfXhK7MhX8yP1hmRgbE2va2trkxczT6I/Wtc3mi+Y++vpVAks/3tvb26NfEOkQg3K5nMAmPvYwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DDF5BtP+ExPDNE5lHr0pY7l+/1Fd33/taOjQ7q6OqW3p0d6ar+ygOCN0cB1VMluuSzl8n4Uez1yuXbpv3dPhoeGopfhhwYHJUQmX+K2Rl9Y1/Or9NCznd29WF5g7+7uksnxcZl+8KB29e+WUBB8hmnY6xub0blP9V7JmzE2OiIzTx5HPwF85zR4/XGqcx1DPip9oL9fJifGxXfbOzuSny8mGvpVU5MT8uzpk9q6v0t85XQN/9P/38tebd0YutOzM3n8cFp8pBcVPaS4VLuyu6anqWzv7srLZ89kYtzPgVdOtyWzELsqe/r7ODg8lH/++O9UYv+djiH/34dZ+Tg37+VoQ3ZpMkJvSjU0XyJbWStJpVqVb159LZ2dneILHjxlwGotrp/ff/DuiqrTmn/8z09e3bMRfOB0F2a2tnzwdVamXuX/9d+fvYme4AOme+of8nPiO43el+UWwQfq+PikFpF/y5ib6IaF3simjeADpJHrmv38PKwTxHXbUp/2pongA6Tnr+oWZIj0GUGaZ8cSfGB0KRPyCdv6UynNs2MJPjD5QiH4s6rSPDuW4ANyeHQUPWDKguLikqSB4AOytLwqWaG7NvoBdo3gA3F2diab29uSJSurJXGN4AOxsbWVuXNmN7e3nD8hJvhAbGxm6+qudMdGnxa7RPAB0O+47x8cSBbpiyouEXwA9g8OM3uQsut3JAg+AKE+Va2HvoKoJ6O7QvABSGP7zhX9yXVUqYgrBB+AatXdi9hpcPn7I/gAhDzloR76UrwrBB+A84uwvgbcKN2FcoXgA5C1B05XcdMKU3RwqysEH4BcLidZ5vL3R/AB6OzI9vigLodzawg+AN3d4UznbYbLWZQEH4C+3l7Jst5ed4ctEHwA+vv7JKt0/e7yA03wARgcGJCsGui/xy4N/kwPGujoyOZOjR6h4xLBB0CvgKMjI5JFoyP3xSWCD8TEmJ8HDLRCTwfUE1VcIvhA6Ml5PRnbnpx6MCmuEXwgdFnzYHJCsqK9vT06E8r5v1cQjEfTU5m5eZ2uXd3TOBmE4AOiJ2M/mvbzMLVG6NX9yaOHkgaCD4yG0hv4MfDPZ9I72pLgA6NXx1dfvZBQ6TMFPb07LQQfIH1Y4+s5sbfRD+ub16+iP6b23yAIkp54PTw0KCF5/dVLp18Uuw7BB0qvknoGaih78zNPHntxOjfBB0xv/H54+6330evyS4P3AcEHrqen2+vodVfpxbMZ8QXBZ4BG/+67tzI06M/XiPXJsIb+fOap+MRp8GnencfJx99Hd3eXfP/tm+gJZur/LbWl1ndv/ublTpLT/3NPHz+S0OVy7TI9lX5U19EP4tcvX8jbb15H0aVhcnxc/v7ue7k/PCw+apvNF53OYdYzOs/O3Y1Wi5uulTsCmCKgw5sKC4uyslZyMshJHyi9fD7j/IWORjkPHm6dnp7J4vJydAJ2Eid3633Dw6kpGR8bdfqqXrMI3gi9ym9sbkVnRekhBK1c9fWnnAau++quX+BoFcEbpLMcy/sHtV+/Hh1ZqVTl5PT02g+BDoHSp6N9fX0yONBfu6IPyr2+cKcoEDz+oB+Ei4vL6JACvTnXERohLFMake0ZbmiIBp71OZY8eIIpBA9TCB6mEDxMIXiYQvAwheBhCsHDFIKHKQQPUwgephA8TCF4mELwMIXgYQrBwxSChykED1MIHqYQPEwheJhC8DCF4GEKwcMUgocpBA9TfgF+si70ZYTauwAAAABJRU5ErkJggg==';
|
|
|
|
const styles = [
|
|
typescaleStyles,
|
|
css`
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
.card {
|
|
width: 192px;
|
|
}
|
|
|
|
img {
|
|
border-radius: inherit;
|
|
background: #dadce0;
|
|
object-fit: contain;
|
|
height: 128px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
gap: 16px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
const cards: MaterialStoryInit<StoryKnobs> = {
|
|
name: 'Cards',
|
|
styles,
|
|
render() {
|
|
return html`
|
|
<div class="container md-typescale-body-medium">
|
|
<md-elevated-card class="card">
|
|
<img src=${MEDIA_IMAGE} alt="Placeholder image" />
|
|
<div class="content">A static elevated card</div>
|
|
</md-elevated-card>
|
|
|
|
<md-filled-card class="card">
|
|
<img src=${MEDIA_IMAGE} alt="Placeholder image" />
|
|
<div class="content">A static filled card</div>
|
|
</md-filled-card>
|
|
|
|
<md-outlined-card class="card">
|
|
<img src=${MEDIA_IMAGE} alt="Placeholder image" />
|
|
<div class="content">A static outlined card</div>
|
|
</md-outlined-card>
|
|
</div>
|
|
`;
|
|
},
|
|
};
|
|
|
|
const withActions: MaterialStoryInit<StoryKnobs> = {
|
|
name: 'Cards with actions',
|
|
styles,
|
|
render() {
|
|
return html`
|
|
<div class="container md-typescale-body-medium">
|
|
<md-elevated-card class="card">
|
|
<img src=${MEDIA_IMAGE} alt="Placeholder image" />
|
|
<div class="content">
|
|
An elevated card with actions
|
|
<md-filled-button>Card action</md-filled-button>
|
|
</div>
|
|
</md-elevated-card>
|
|
|
|
<md-filled-card class="card">
|
|
<img src=${MEDIA_IMAGE} alt="Placeholder image" />
|
|
<div class="content">
|
|
A filled card with actions
|
|
<md-filled-button>Card action</md-filled-button>
|
|
</div>
|
|
</md-filled-card>
|
|
|
|
<md-outlined-card class="card">
|
|
<img src=${MEDIA_IMAGE} alt="Placeholder image" />
|
|
<div class="content">
|
|
An outlined card with actions
|
|
<md-filled-button>Card action</md-filled-button>
|
|
</div>
|
|
</md-outlined-card>
|
|
</div>
|
|
`;
|
|
},
|
|
};
|
|
|
|
/** Card stories. */
|
|
export const stories = [cards, withActions];
|