@muibook/components 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/{mui-body → components/mui-body}/index.js +1 -1
- package/dist/esm/{mui-button → components/mui-button}/index.js +1 -1
- package/dist/esm/{mui-grid → components/mui-grid}/index.js +1 -1
- package/dist/esm/{mui-link → components/mui-link}/index.js +1 -1
- package/dist/esm/{mui-select → components/mui-select}/index.js +1 -1
- package/dist/esm/{mui-stack → components/mui-stack}/hstack/index.js +1 -1
- package/dist/esm/{mui-stack → components/mui-stack}/vstack/index.js +1 -1
- package/package.json +5 -3
- package/readme.md +12 -0
- package/dist/create-mui-app/assets/index-DfcB3F-s.js +0 -597
- package/dist/create-mui-app/create-mui-app.css +0 -1
- package/dist/create-mui-app/index.html +0 -21
- package/dist/esm/_redirects +0 -1
- package/dist/esm/favicon.ico +0 -0
- package/dist/esm/index/index.js +0 -71
- package/dist/esm/logo192.png +0 -0
- package/dist/muibook/_redirects +0 -1
- package/dist/muibook/assets/base-B4dO4n0A.js +0 -198
- package/dist/muibook/assets/components-YZ3tjmIt.js +0 -122
- package/dist/muibook/assets/contextual-D648xs_u.js +0 -59
- package/dist/muibook/assets/image-1080-Bg-8LoSs.js +0 -1
- package/dist/muibook/assets/index-0bBJZTXh.js +0 -135
- package/dist/muibook/assets/index-B4Lbi-ZX.js +0 -82
- package/dist/muibook/assets/index-BJJtzLti.js +0 -144
- package/dist/muibook/assets/index-BN6UEWFf.js +0 -439
- package/dist/muibook/assets/index-Bc68V_xw.js +0 -140
- package/dist/muibook/assets/index-BnpaoEYs.js +0 -386
- package/dist/muibook/assets/index-BrZBJGo2.js +0 -4276
- package/dist/muibook/assets/index-Bx-SU7T2.js +0 -98
- package/dist/muibook/assets/index-C10sNeH-.js +0 -64
- package/dist/muibook/assets/index-C4ZnvuXX.js +0 -333
- package/dist/muibook/assets/index-C7Tqc5BR.js +0 -325
- package/dist/muibook/assets/index-CAkZAmud.js +0 -514
- package/dist/muibook/assets/index-CCegrD2J.js +0 -130
- package/dist/muibook/assets/index-CHZJlumm.js +0 -95
- package/dist/muibook/assets/index-CPZ8jubJ.js +0 -308
- package/dist/muibook/assets/index-CSLqxg9p.js +0 -73
- package/dist/muibook/assets/index-CT3BsW8R.js +0 -177
- package/dist/muibook/assets/index-CYYG9dAN.js +0 -270
- package/dist/muibook/assets/index-CdghbWW3.js +0 -42
- package/dist/muibook/assets/index-CfD1WQYQ.js +0 -106
- package/dist/muibook/assets/index-Ch40uilB.js +0 -52
- package/dist/muibook/assets/index-CwAai54c.js +0 -263
- package/dist/muibook/assets/index-CyWt9f96.js +0 -336
- package/dist/muibook/assets/index-D8hXO6aa.js +0 -131
- package/dist/muibook/assets/index-DBkw7VLa.js +0 -431
- package/dist/muibook/assets/index-DI0vNTNv.js +0 -56
- package/dist/muibook/assets/index-DNImaJPY.js +0 -96
- package/dist/muibook/assets/index-DP6CCnt0.js +0 -257
- package/dist/muibook/assets/index-DR5X8zCc.js +0 -67
- package/dist/muibook/assets/index-DZQ8pS6y.js +0 -133
- package/dist/muibook/assets/index-DlZ1b9ZK.js +0 -233
- package/dist/muibook/assets/index-DwnvCJk0.js +0 -177
- package/dist/muibook/assets/index-_4AZFkzS.js +0 -328
- package/dist/muibook/assets/index-dkW0Vbeg.js +0 -429
- package/dist/muibook/assets/index-ehE10GAP.js +0 -40
- package/dist/muibook/assets/index-icuV1guL.js +0 -69
- package/dist/muibook/assets/index-qOE8f0sK.js +0 -72
- package/dist/muibook/assets/layout-BT0xIYa9.js +0 -184
- package/dist/muibook/assets/mui-D6S1tQ24.js +0 -1
- package/dist/muibook/assets/mui-logo-mobile-DuEMz_jq.js +0 -31
- package/dist/muibook/assets/semantic-cbNjeY5p.js +0 -111
- package/dist/muibook/assets/spacing-DY3cAXq0.js +0 -82
- package/dist/muibook/assets/surface-CMaW9FgJ.js +0 -148
- package/dist/muibook/assets/text-TVCTYde0.js +0 -130
- package/dist/muibook/assets/visual-B_21dq90.js +0 -96
- package/dist/muibook/buttercup.png +0 -0
- package/dist/muibook/create-mui-app.jpg +0 -0
- package/dist/muibook/crystal.png +0 -0
- package/dist/muibook/diamond.png +0 -0
- package/dist/muibook/emerald.svg +0 -13
- package/dist/muibook/favicon.ico +0 -0
- package/dist/muibook/hero-guides.png +0 -0
- package/dist/muibook/hero-outcomes.png +0 -0
- package/dist/muibook/image-1080.png +0 -0
- package/dist/muibook/image-220.png +0 -0
- package/dist/muibook/image-395.png +0 -0
- package/dist/muibook/index.html +0 -38
- package/dist/muibook/logo192.png +0 -0
- package/dist/muibook/mui-tokens.jpg +0 -0
- package/dist/muibook/muibook.css +0 -1
- package/dist/muibook/premier.png +0 -0
- package/dist/muibook/ruby.svg +0 -13
- package/dist/muibook/sapphire.png +0 -0
- package/dist/muibook/sapphire.svg +0 -13
- package/dist/muibook/snowy-mint.png +0 -0
- package/dist/types/components/mui-accordion/mui-accordion-block/index.d.ts +0 -2
- package/dist/types/components/mui-accordion/mui-accordion-group/index.d.ts +0 -1
- package/dist/types/components/mui-accordion/mui-accordion-inline/index.d.ts +0 -2
- package/dist/types/components/mui-icons/chevron.d.ts +0 -1
- package/dist/types/components/mui-icons/mui-icon-add.d.ts +0 -1
- package/dist/types/components/mui-icons/mui-icon-down-chevron.d.ts +0 -1
- package/dist/types/components/mui-icons/mui-icon-moon.d.ts +0 -1
- package/dist/types/components/mui-icons/mui-icon-right-chevron.d.ts +0 -1
- package/dist/types/components/mui-icons/mui-icon-sun.d.ts +0 -1
- package/dist/types/components/mui-stack/mui-hstack/index.d.ts +0 -1
- package/dist/types/components/mui-stack/mui-vstack/index.d.ts +0 -1
- package/dist/types/components/mui-table/row/row.d.ts +0 -1
- package/dist/types/create-app/index.d.ts +0 -15
- package/dist/types/create-mui-app/index.d.ts +0 -15
- package/dist/types/index.d.ts +0 -68
- package/dist/types/muibook/index.d.ts +0 -93
- /package/dist/esm/{mui-accordion → components/mui-accordion}/block/index.js +0 -0
- /package/dist/esm/{mui-accordion → components/mui-accordion}/group/index.js +0 -0
- /package/dist/esm/{mui-accordion → components/mui-accordion}/index.js +0 -0
- /package/dist/esm/{mui-accordion → components/mui-accordion}/inline/index.js +0 -0
- /package/dist/esm/{mui-addon → components/mui-addon}/index.js +0 -0
- /package/dist/esm/{mui-alert → components/mui-alert}/index.js +0 -0
- /package/dist/esm/{mui-badge → components/mui-badge}/index.js +0 -0
- /package/dist/esm/{mui-button-group → components/mui-button-group}/index.js +0 -0
- /package/dist/esm/{mui-card → components/mui-card}/body/index.js +0 -0
- /package/dist/esm/{mui-card → components/mui-card}/card/index.js +0 -0
- /package/dist/esm/{mui-card → components/mui-card}/footer/index.js +0 -0
- /package/dist/esm/{mui-card → components/mui-card}/header/index.js +0 -0
- /package/dist/esm/{mui-card → components/mui-card}/index.js +0 -0
- /package/dist/esm/{mui-carousel → components/mui-carousel}/controller/index.js +0 -0
- /package/dist/esm/{mui-carousel → components/mui-carousel}/index.js +0 -0
- /package/dist/esm/{mui-carousel → components/mui-carousel}/panel/index.js +0 -0
- /package/dist/esm/{mui-code → components/mui-code}/index.js +0 -0
- /package/dist/esm/{mui-container → components/mui-container}/index.js +0 -0
- /package/dist/esm/{mui-field → components/mui-field}/index.js +0 -0
- /package/dist/esm/{mui-file-upload → components/mui-file-upload}/index.js +0 -0
- /package/dist/esm/{mui-heading → components/mui-heading}/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/accessibility/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/add/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/attention/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/check/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/close/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/down-chevron/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/globe/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/grid/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/info/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/left-arrow/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/left-chevron/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/menu/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/message/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/moon/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/notification/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/right-chevron/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/stop/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/subtract/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/sun/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/toggle/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/up-arrow/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/up-chevron/index.js +0 -0
- /package/dist/esm/{mui-icons → components/mui-icons}/warning/index.js +0 -0
- /package/dist/esm/{mui-image → components/mui-image}/index.js +0 -0
- /package/dist/esm/{mui-input → components/mui-input}/index.js +0 -0
- /package/dist/esm/{mui-list → components/mui-list}/index.js +0 -0
- /package/dist/esm/{mui-list → components/mui-list}/item/index.js +0 -0
- /package/dist/esm/{mui-list → components/mui-list}/list/index.js +0 -0
- /package/dist/esm/{mui-message → components/mui-message}/index.js +0 -0
- /package/dist/esm/{mui-quote → components/mui-quote}/index.js +0 -0
- /package/dist/esm/{mui-responsive → components/mui-responsive}/index.js +0 -0
- /package/dist/esm/{mui-rule → components/mui-rule}/index.js +0 -0
- /package/dist/esm/{mui-slat → components/mui-slat}/index.js +0 -0
- /package/dist/esm/{mui-smart-card → components/mui-smart-card}/index.js +0 -0
- /package/dist/esm/{mui-stack → components/mui-stack}/index.js +0 -0
- /package/dist/esm/{mui-switch → components/mui-switch}/index.js +0 -0
- /package/dist/esm/{mui-table → components/mui-table}/cell/index.js +0 -0
- /package/dist/esm/{mui-table → components/mui-table}/index.js +0 -0
- /package/dist/esm/{mui-table → components/mui-table}/row/index.js +0 -0
- /package/dist/esm/{mui-table → components/mui-table}/row-group/index.js +0 -0
- /package/dist/esm/{mui-table → components/mui-table}/table/index.js +0 -0
- /package/dist/esm/{mui-tabs → components/mui-tabs}/controller/index.js +0 -0
- /package/dist/esm/{mui-tabs → components/mui-tabs}/index.js +0 -0
- /package/dist/esm/{mui-tabs → components/mui-tabs}/item/index.js +0 -0
- /package/dist/esm/{mui-tabs → components/mui-tabs}/panel/index.js +0 -0
- /package/dist/esm/{mui-tabs → components/mui-tabs}/tab-bar/index.js +0 -0
- /package/dist/esm/{mui-utils → utils}/part-map/index.js +0 -0
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
class l extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),i=`
|
|
2
|
-
:host { display: block; }
|
|
3
|
-
`,t=[{name:"variant",type:"string",options:"success, info, warning, error",default:"success",description:"Describe the intent or mood of a alert"},{name:"slot",required:!0,type:"HTML attribute",options:"{text}, mui-links",default:"",description:"Content placed inside the component. Can include mui-links and text nodes, or both."},{name:"style",type:"string",options:"Valid CSS",default:"",description:"You are able to use styles to add layout based CSS to the host element."},{name:"class",type:"string",options:"Valid CSS",default:"",description:"You are able to use add a classname to add layout based CSS to the host element."}],o=t.map(e=>`
|
|
4
|
-
<story-type-row
|
|
5
|
-
${e.required?"required":""}
|
|
6
|
-
name="${e.name}"
|
|
7
|
-
type="${e.type}"
|
|
8
|
-
options="${e.options||""}"
|
|
9
|
-
default="${e.default||""}"
|
|
10
|
-
description="${e.description}">
|
|
11
|
-
</story-type-row>
|
|
12
|
-
`).join(""),a=t.map((e,r)=>{const n=r===t.length-1?"last-child":"";return`
|
|
13
|
-
<mui-accordion-block
|
|
14
|
-
size="medium"
|
|
15
|
-
heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)}
|
|
16
|
-
${n}>
|
|
17
|
-
<story-type-slat
|
|
18
|
-
slot="detail"
|
|
19
|
-
${e.required?"required":""}
|
|
20
|
-
name="${e.name}"
|
|
21
|
-
type="${e.type}"
|
|
22
|
-
options="${e.options||""}"
|
|
23
|
-
default="${e.default||""}"
|
|
24
|
-
description="${e.description}">
|
|
25
|
-
</story-type-slat>
|
|
26
|
-
</mui-accordion-block>
|
|
27
|
-
`}).join("");s.innerHTML=`
|
|
28
|
-
<style>${i}</style>
|
|
29
|
-
|
|
30
|
-
<story-template
|
|
31
|
-
title="Alerts"
|
|
32
|
-
description="Alerts are to surface meaningful system messages related to the users' current task or action."
|
|
33
|
-
figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-4444&t=ZA9uH4LK37tSuk6r-1"
|
|
34
|
-
guides
|
|
35
|
-
github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-alert/index.ts"
|
|
36
|
-
|
|
37
|
-
accessibility="
|
|
38
|
-
ARIA-live is built in, using POLITE + ASSERTIVE for screen readers.;
|
|
39
|
-
The role is set to ALERT for immediate screen reader feedback.
|
|
40
|
-
"
|
|
41
|
-
>
|
|
42
|
-
|
|
43
|
-
<mui-v-stack space="var(--space-700)">
|
|
44
|
-
|
|
45
|
-
<spec-card title="Props">
|
|
46
|
-
<mui-responsive breakpoint="768" slot="body">
|
|
47
|
-
<story-type-table slot="showAbove">
|
|
48
|
-
${o}
|
|
49
|
-
</story-type-table>
|
|
50
|
-
<mui-accordion-group exclusive slot="showBelow">
|
|
51
|
-
${a}
|
|
52
|
-
</mui-accordion-group>
|
|
53
|
-
</mui-responsive>
|
|
54
|
-
</spec-card>
|
|
55
|
-
|
|
56
|
-
<story-card
|
|
57
|
-
title="Success"
|
|
58
|
-
description="Indicates that an operation or action has been completed successfully."
|
|
59
|
-
usage="Form submissions that have been processed without errors.;Successful data updates or saves.;Confirmation of completed tasks or actions."
|
|
60
|
-
accessibility="ARIA-live of POLITE is set on this variant."
|
|
61
|
-
>
|
|
62
|
-
<div slot="body">
|
|
63
|
-
<mui-alert variant="success">Your message has been sent successfully.</mui-alert>
|
|
64
|
-
</div>
|
|
65
|
-
<mui-code slot="footer">
|
|
66
|
-
<mui-alert variant="success">
|
|
67
|
-
<br />
|
|
68
|
-
...
|
|
69
|
-
<br />
|
|
70
|
-
</mui-alert>
|
|
71
|
-
</mui-code>
|
|
72
|
-
</story-card>
|
|
73
|
-
|
|
74
|
-
<story-card
|
|
75
|
-
title="Info"
|
|
76
|
-
description="Provides general information or updates that are helpful but not critical."
|
|
77
|
-
usage="Announcing new features or updates.; Providing contextual information or tips.; Informing users about non-urgent system statuses."
|
|
78
|
-
accessibility="ARIA-live of POLITE is set on this variant."
|
|
79
|
-
>
|
|
80
|
-
<div slot="body">
|
|
81
|
-
<mui-alert variant="info">Please read the comments carefully.</mui-alert>
|
|
82
|
-
</div>
|
|
83
|
-
<mui-code slot="footer">
|
|
84
|
-
<mui-alert variant="info">
|
|
85
|
-
<br />
|
|
86
|
-
...
|
|
87
|
-
<br />
|
|
88
|
-
</mui-alert>
|
|
89
|
-
</mui-code>
|
|
90
|
-
</story-card>
|
|
91
|
-
|
|
92
|
-
<story-card
|
|
93
|
-
title="Warning"
|
|
94
|
-
description="Alerts users to potential issues or situations that require caution."
|
|
95
|
-
usage="Notifying about unsaved changes.; Indicating deprecated features or upcoming changes.; Highlighting actions that may have unintended consequences."
|
|
96
|
-
accessibility="ARIA-live of ASSERTIVE is set on this variant."
|
|
97
|
-
>
|
|
98
|
-
<div slot="body">
|
|
99
|
-
<mui-alert variant="warning">There was a problem with your network connection. <mui-link href="#">Learn more</mui-link></mui-alert>
|
|
100
|
-
</div>
|
|
101
|
-
<mui-code slot="footer">
|
|
102
|
-
<mui-alert variant="warning">
|
|
103
|
-
<br />
|
|
104
|
-
...
|
|
105
|
-
<br />
|
|
106
|
-
</mui-alert>
|
|
107
|
-
</mui-code>
|
|
108
|
-
</story-card>
|
|
109
|
-
|
|
110
|
-
<story-card
|
|
111
|
-
title="Error"
|
|
112
|
-
description="Indicates that an error has occurred, requiring user attention or action."
|
|
113
|
-
usage="Form validation errors.; System failures or exceptions.; Failed operations or transactions."
|
|
114
|
-
accessibility="ARIA-live of ASSERTIVE is set on this variant."
|
|
115
|
-
>
|
|
116
|
-
<div slot="body">
|
|
117
|
-
<mui-alert variant="error">Please read the comments carefully. <mui-link href="#">Learn more</mui-link></mui-alert>
|
|
118
|
-
</div>
|
|
119
|
-
<mui-code slot="footer">
|
|
120
|
-
<mui-alert variant="error">
|
|
121
|
-
<br />
|
|
122
|
-
...
|
|
123
|
-
<br />
|
|
124
|
-
</mui-alert>
|
|
125
|
-
</mui-code>
|
|
126
|
-
</story-card>
|
|
127
|
-
|
|
128
|
-
</mui-v-stack>
|
|
129
|
-
|
|
130
|
-
</story-template>
|
|
131
|
-
`}}customElements.define("story-alert",l);
|
|
@@ -1,431 +0,0 @@
|
|
|
1
|
-
import{V as r,M as $}from"./mui-D6S1tQ24.js";const C="data:image/svg+xml,%3csvg%20width='91'%20height='30'%20viewBox='0%200%2091%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M45.066%200.739648L39.1121%2029.339H31.9107L37.8651%200.739648H45.066ZM75.3627%2019.2071L79.1538%208.46656L81.3345%2019.2071H75.3627ZM83.401%2029.339H90.0599L84.2422%200.739648H78.0995C76.7151%200.739648%2075.5488%201.56447%2075.0322%202.83617L64.2262%2029.339H71.789L73.2908%2025.0681H82.5284L83.401%2029.339ZM64.6011%2020.0019C64.633%2012.4545%2054.4465%2012.036%2054.5141%208.66387C54.5363%207.63895%2055.4873%206.54733%2057.5674%206.26832C58.599%206.13159%2061.444%206.02154%2064.6698%207.54835L65.9314%201.4811C64.1986%200.837471%2061.9693%200.217185%2059.1957%200.217185C52.0765%200.217185%2047.0682%204.10231%2047.0281%209.67045C46.9827%2013.7879%2050.6056%2016.0834%2053.3294%2017.4546C56.1381%2018.8564%2057.0794%2019.7557%2057.0659%2021.0079C57.0464%2022.9266%2054.8257%2023.7759%2052.7592%2023.8081C49.1358%2023.8659%2047.0368%2022.8021%2045.363%2022.0006L44.056%2028.2702C45.7412%2029.0628%2048.8464%2029.7525%2052.0619%2029.7881C59.6301%2029.7881%2064.5789%2025.948%2064.6011%2020.0019ZM34.7762%200.739648L23.1079%2029.339H15.4964L9.75402%206.51454C9.40617%205.11112%209.10269%204.59532%208.044%204.00227C6.31235%203.03571%203.4533%202.13196%200.939941%201.56948L1.10981%200.739648H13.3639C14.9246%200.739648%2016.329%201.80681%2016.686%203.65377L19.7193%2020.2048L27.2107%200.739648H34.7762Z'%20fill='white'/%3e%3c/svg%3e",k="data:image/svg+xml,%3csvg%20width='85'%20height='53'%20viewBox='0%200%2085%2053'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M53.8565%206.10938H31.144V46.8211H53.8565V6.10938Z'%20fill='%23FF5F00'/%3e%3cpath%20d='M32.5858%2026.4652C32.5858%2018.1934%2036.4794%2010.8566%2042.4639%206.10932C38.0657%202.65674%2032.5137%200.570801%2026.4571%200.570801C12.1086%200.570801%200.5%2012.1513%200.5%2026.4652C0.5%2040.779%2012.1086%2052.3596%2026.4571%2052.3596C32.5137%2052.3596%2038.0657%2050.2736%2042.4639%2046.8211C36.4794%2042.1457%2032.5858%2034.737%2032.5858%2026.4652Z'%20fill='%23EB001B'/%3e%3cpath%20d='M84.5001%2026.4652C84.5001%2040.779%2072.8915%2052.3596%2058.543%2052.3596C52.4863%2052.3596%2046.9344%2050.2736%2042.5361%2046.8211C48.5928%2042.0737%2052.4142%2034.737%2052.4142%2026.4652C52.4142%2018.1934%2048.5207%2010.8566%2042.5361%206.10932C46.9344%202.65674%2052.4863%200.570801%2058.543%200.570801C72.8915%200.570801%2084.5001%2012.2233%2084.5001%2026.4652Z'%20fill='%23F79E1B'/%3e%3c/svg%3e",e="data:image/svg+xml,%3csvg%20width='38'%20height='38'%20viewBox='0%200%2038%2038'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M25.2274%209.26582C25.2274%2012.8944%2018.6573%2018.4995%2018.6573%2018.4995C18.6573%2018.4995%2012.0872%2012.8944%2012.0872%209.26582C12.0872%205.63725%2015.0287%202.69572%2018.6573%202.69572C22.2857%202.69572%2025.2274%205.63725%2025.2274%209.26582Z'%20fill='black'/%3e%3cpath%20d='M9.45397%2015.4856C7.78967%2013.8213%205.09133%2013.8213%203.42704%2015.4856C1.76275%2017.1499%201.76275%2019.8483%203.42704%2021.5126L15.9831%2034.0687C17.6474%2035.733%2020.3458%2035.733%2022.0101%2034.0687C23.6744%2032.4044%2023.6744%2029.706%2022.0101%2028.0417L9.45397%2015.4856Z'%20fill='black'%20fill-opacity='0.55'/%3e%3cpath%20d='M28.5355%2015.4856C30.1998%2013.8213%2032.8982%2013.8213%2034.5625%2015.4856C36.2268%2017.1499%2036.2268%2019.8483%2034.5625%2021.5126L22.0063%2034.0687C20.3421%2035.733%2017.6437%2035.733%2015.9794%2034.0687C14.3151%2032.4044%2014.3151%2029.706%2015.9794%2028.0417L28.5355%2015.4856Z'%20fill='black'%20fill-opacity='0.55'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18.9993%2025.0276L22.0124%2028.0409C23.6768%2029.7051%2023.6768%2032.4034%2022.0124%2034.0678C21.1803%2034.8999%2020.0899%2035.316%2018.9993%2035.316C17.9087%2035.316%2016.8181%2034.8999%2015.986%2034.0678C14.3217%2032.4034%2014.3217%2029.7051%2015.986%2028.0409L18.9993%2025.0276Z'%20fill='black'/%3e%3c/svg%3e",p="/buttercup.png",m="/crystal.png",b="/diamond.png",d="/premier.png",c="/sapphire.png",a="/emerald.svg",s="/ruby.svg",n="/sapphire.svg",o="/image-220.png",l="/image-395.png";class w extends HTMLElement{constructor(){super();const g=this.attachShadow({mode:"open"}),u=`
|
|
2
|
-
:host { display: block; }
|
|
3
|
-
`,i=[{name:"number",required:!0,type:"number",options:"",default:"",description:"Only the last 4 digits are shown (no full card number for security)"},{name:"state",type:"string",options:"frozen",default:"",description:""},{name:"logo",type:"string",options:"./path/to/image.png",default:"",description:"Add a logo to the card"},{name:"logo-height",type:"number",options:"0-126",default:"auto",description:"Define the height of the logo without a unit of measure"},{name:"variant",type:"string",options:"plain, animated",default:"",description:""},{name:"partner",type:"string",options:"logo.svg",default:"",description:"Partner logo"},{name:"type",type:"string",options:"Debit, Credit, etc",default:"",description:"Used to visually or semantically describe the card’s usage."},{name:"bg-color",type:"CSS",options:"",default:"",description:"Add a logo to the card"},{name:"bg-image",type:"string",options:"./path/to/image.png",default:"",description:"Add a logo to the card"},{name:"inverted",type:"boolean",options:"",default:"",description:"Toggle the text colour for darker backgrounds"}],y=i.map(t=>`
|
|
4
|
-
<story-type-row
|
|
5
|
-
${t.required?"required":""}
|
|
6
|
-
name="${t.name}"
|
|
7
|
-
type="${t.type}"
|
|
8
|
-
options="${t.options||""}"
|
|
9
|
-
default="${t.default||""}"
|
|
10
|
-
description="${t.description}">
|
|
11
|
-
</story-type-row>
|
|
12
|
-
`).join(""),v=i.map((t,h)=>{const f=h===i.length-1?"last-child":"";return`
|
|
13
|
-
<mui-accordion-block
|
|
14
|
-
size="medium"
|
|
15
|
-
heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)}
|
|
16
|
-
${f}>
|
|
17
|
-
<story-type-slat
|
|
18
|
-
slot="detail"
|
|
19
|
-
${t.required?"required":""}
|
|
20
|
-
name="${t.name}"
|
|
21
|
-
type="${t.type}"
|
|
22
|
-
options="${t.options||""}"
|
|
23
|
-
default="${t.default||""}"
|
|
24
|
-
description="${t.description}">
|
|
25
|
-
</story-type-slat>
|
|
26
|
-
</mui-accordion-block>
|
|
27
|
-
`}).join("");g.innerHTML=`
|
|
28
|
-
<style>${u}</style>
|
|
29
|
-
|
|
30
|
-
<story-template title="Smart Card"
|
|
31
|
-
description="A dynamic card component for wallets, dashboards, spend tools, or reward programs—designed to represent digital or physical cards in modern, digital-first experiences."
|
|
32
|
-
figma=""
|
|
33
|
-
github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-smart-card/index.ts"
|
|
34
|
-
>
|
|
35
|
-
|
|
36
|
-
<mui-v-stack space="var(--space-700)">
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<spec-card title="Props">
|
|
40
|
-
<mui-responsive breakpoint="767" slot="body">
|
|
41
|
-
<story-type-table slot="showAbove">
|
|
42
|
-
${y}
|
|
43
|
-
</story-type-table>
|
|
44
|
-
<mui-accordion-group exclusive slot="showBelow">
|
|
45
|
-
${v}
|
|
46
|
-
</mui-accordion-group>
|
|
47
|
-
</mui-responsive>
|
|
48
|
-
</spec-card>
|
|
49
|
-
|
|
50
|
-
<story-card title="Plain">
|
|
51
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
52
|
-
<mui-smart-card
|
|
53
|
-
type="Debit"
|
|
54
|
-
number="1234"
|
|
55
|
-
partner="${r}"
|
|
56
|
-
logo="${o}"
|
|
57
|
-
variant="plain"
|
|
58
|
-
>
|
|
59
|
-
</mui-smart-card>
|
|
60
|
-
</mui-v-stack>
|
|
61
|
-
<mui-code slot="footer">
|
|
62
|
-
<mui-smart-card<br>
|
|
63
|
-
number="1234"<br>
|
|
64
|
-
type="Debit"<br>
|
|
65
|
-
logo="./images/card/image-220.png"<br>
|
|
66
|
-
partner="./images/networks/visa-black.svg"<br>
|
|
67
|
-
variant="plain"<br>
|
|
68
|
-
><br>
|
|
69
|
-
</mui-smart-card>
|
|
70
|
-
</mui-code>
|
|
71
|
-
</story-card>
|
|
72
|
-
|
|
73
|
-
<story-card title="Plain / Inverted">
|
|
74
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
75
|
-
<mui-smart-card
|
|
76
|
-
inverted
|
|
77
|
-
type="Debit"
|
|
78
|
-
number="1234"
|
|
79
|
-
partner="${C}"
|
|
80
|
-
logo="${o}"
|
|
81
|
-
variant="plain"
|
|
82
|
-
>
|
|
83
|
-
</mui-smart-card>
|
|
84
|
-
</mui-v-stack>
|
|
85
|
-
<mui-code slot="footer">
|
|
86
|
-
<mui-smart-card<br>
|
|
87
|
-
inverted<br>
|
|
88
|
-
number="1234"<br>
|
|
89
|
-
type="Debit"<br>
|
|
90
|
-
logo="./images/card/image-220.png"<br>
|
|
91
|
-
partner="./images/card/visa-white.svg"<br>
|
|
92
|
-
variant="plain"<br>
|
|
93
|
-
><br>
|
|
94
|
-
</mui-smart-card>
|
|
95
|
-
</mui-code>
|
|
96
|
-
</story-card>
|
|
97
|
-
|
|
98
|
-
<story-card title="Animated">
|
|
99
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
100
|
-
<mui-smart-card
|
|
101
|
-
variant="animated"
|
|
102
|
-
number="1234"
|
|
103
|
-
type="Debit"
|
|
104
|
-
bg-image="${p}"
|
|
105
|
-
logo="${o}"
|
|
106
|
-
partner="${r}"
|
|
107
|
-
>
|
|
108
|
-
</mui-smart-card>
|
|
109
|
-
</mui-v-stack>
|
|
110
|
-
<mui-code slot="footer">
|
|
111
|
-
<mui-smart-card<br>
|
|
112
|
-
number="1234"<br>
|
|
113
|
-
type="Debit"<br>
|
|
114
|
-
bg-image="./images/mesh/buttercup.png"<br>
|
|
115
|
-
logo="./images/card/image-220.png"<br>
|
|
116
|
-
partner="./images/networks/visa-black.svg"<br>
|
|
117
|
-
variant="animated"<br>
|
|
118
|
-
><br>
|
|
119
|
-
</mui-smart-card>
|
|
120
|
-
</mui-code>
|
|
121
|
-
</story-card>
|
|
122
|
-
|
|
123
|
-
<story-card
|
|
124
|
-
title="Logo"
|
|
125
|
-
description="The logo area, positioned at the top-right of the card, has a maximum size of 220×126px and scales down responsively on smaller devices."
|
|
126
|
-
usage="
|
|
127
|
-
Import the logo using the logo property;
|
|
128
|
-
Set the logo-height to an appropriate size no larger than 126px;
|
|
129
|
-
If your SVG is at intended height, then logo-height isn't required;
|
|
130
|
-
When using a 2x/3x PNGs and resize with logo-height
|
|
131
|
-
">
|
|
132
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
133
|
-
<mui-smart-card
|
|
134
|
-
variant="plain"
|
|
135
|
-
partner="${r}"
|
|
136
|
-
type="Debit"
|
|
137
|
-
number="1234"
|
|
138
|
-
logo="${e}"
|
|
139
|
-
logo-height="80"
|
|
140
|
-
>
|
|
141
|
-
</mui-smart-card>
|
|
142
|
-
<mui-smart-card
|
|
143
|
-
variant="animated"
|
|
144
|
-
partner="${r}"
|
|
145
|
-
type="Debit"
|
|
146
|
-
number="1234"
|
|
147
|
-
logo="${e}"
|
|
148
|
-
logo-height="80"
|
|
149
|
-
bg-image="${p}"
|
|
150
|
-
>
|
|
151
|
-
</mui-smart-card>
|
|
152
|
-
</mui-v-stack>
|
|
153
|
-
<mui-code slot="footer">
|
|
154
|
-
/* Max-Height: 126px */<br>
|
|
155
|
-
<br>
|
|
156
|
-
<mui-smart-card<br>
|
|
157
|
-
logo="./images/guru/guides.svg"<br>
|
|
158
|
-
logo-height="80"<br>
|
|
159
|
-
...<br>
|
|
160
|
-
></mui-smart-card>
|
|
161
|
-
</mui-code>
|
|
162
|
-
</story-card>
|
|
163
|
-
|
|
164
|
-
<story-card title="Frozen">
|
|
165
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
166
|
-
<mui-smart-card
|
|
167
|
-
partner="${r}"
|
|
168
|
-
number="1234"
|
|
169
|
-
type="Debit"
|
|
170
|
-
logo="${$}"
|
|
171
|
-
logo-height="100"
|
|
172
|
-
state="frozen"
|
|
173
|
-
>
|
|
174
|
-
</mui-smart-card>
|
|
175
|
-
</mui-v-stack>
|
|
176
|
-
<mui-code slot="footer">
|
|
177
|
-
<mui-smart-card<br>
|
|
178
|
-
state="frozen"<br>
|
|
179
|
-
...<br>
|
|
180
|
-
><br>
|
|
181
|
-
</mui-smart-card>
|
|
182
|
-
</mui-code>
|
|
183
|
-
</story-card>
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<story-card title="Background-Image" description="Add a unique background image or an alternative to logo placement">
|
|
187
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
188
|
-
<mui-smart-card
|
|
189
|
-
variant="plain"
|
|
190
|
-
partner="${r}"
|
|
191
|
-
type="Debit"
|
|
192
|
-
number="1234"
|
|
193
|
-
bg-image="${l}"
|
|
194
|
-
>
|
|
195
|
-
</mui-smart-card>
|
|
196
|
-
<mui-smart-card
|
|
197
|
-
variant="animated"
|
|
198
|
-
partner="${r}"
|
|
199
|
-
type="Debit"
|
|
200
|
-
number="1234"
|
|
201
|
-
bg-image="${l}"
|
|
202
|
-
>
|
|
203
|
-
</mui-smart-card>
|
|
204
|
-
</mui-v-stack>
|
|
205
|
-
<mui-code slot="footer">
|
|
206
|
-
/* Plain */<br>
|
|
207
|
-
/* ======================== */<br>
|
|
208
|
-
<br>
|
|
209
|
-
<mui-smart-card<br>
|
|
210
|
-
variant="plain"<br>
|
|
211
|
-
bg-image="./images/card/image-395.png"<br>
|
|
212
|
-
...<br>
|
|
213
|
-
><br>
|
|
214
|
-
</mui-smart-card>
|
|
215
|
-
<br>
|
|
216
|
-
<br>
|
|
217
|
-
<br>
|
|
218
|
-
/* Animated */<br>
|
|
219
|
-
/* ======================== */<br>
|
|
220
|
-
<br>
|
|
221
|
-
<mui-smart-card<br>
|
|
222
|
-
variant="animated"<br>
|
|
223
|
-
bg-image="./images/card/image-395.png"<br>
|
|
224
|
-
...<br>
|
|
225
|
-
><br>
|
|
226
|
-
</mui-smart-card>
|
|
227
|
-
</mui-code>
|
|
228
|
-
</story-card>
|
|
229
|
-
|
|
230
|
-
<story-card title="Background-Color">
|
|
231
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
232
|
-
<mui-smart-card
|
|
233
|
-
variant="plain"
|
|
234
|
-
partner="${r}"
|
|
235
|
-
type="Debit"
|
|
236
|
-
number="1234"
|
|
237
|
-
logo="${e}"
|
|
238
|
-
logo-height="80"
|
|
239
|
-
bg-color="#a4fc67"
|
|
240
|
-
>
|
|
241
|
-
</mui-smart-card>
|
|
242
|
-
<mui-smart-card
|
|
243
|
-
variant="animated"
|
|
244
|
-
partner="${r}"
|
|
245
|
-
type="Debit"
|
|
246
|
-
number="1234"
|
|
247
|
-
logo="${e}"
|
|
248
|
-
logo-height="80"
|
|
249
|
-
bg-color="#a4fc67"
|
|
250
|
-
>
|
|
251
|
-
</mui-smart-card>
|
|
252
|
-
</mui-v-stack>
|
|
253
|
-
<mui-code slot="footer">
|
|
254
|
-
/* Plain */<br>
|
|
255
|
-
/* ======================== */<br>
|
|
256
|
-
<br>
|
|
257
|
-
<mui-smart-card<br>
|
|
258
|
-
variant="plain"<br>
|
|
259
|
-
bg-color="#a4fc67"<br>
|
|
260
|
-
...<br>
|
|
261
|
-
><br>
|
|
262
|
-
</mui-smart-card>
|
|
263
|
-
<br>
|
|
264
|
-
<br>
|
|
265
|
-
<br>
|
|
266
|
-
/* Animated */<br>
|
|
267
|
-
/* ======================== */<br>
|
|
268
|
-
<br>
|
|
269
|
-
<mui-smart-card<br>
|
|
270
|
-
variant="animated"<br>
|
|
271
|
-
bg-color="#a4fc67"<br>
|
|
272
|
-
...<br>
|
|
273
|
-
><br>
|
|
274
|
-
</mui-smart-card>
|
|
275
|
-
</mui-code>
|
|
276
|
-
</story-card>
|
|
277
|
-
|
|
278
|
-
<story-card title="Payment Networks" description="Use the partner prop to slot in other payment networks">
|
|
279
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
280
|
-
<mui-smart-card
|
|
281
|
-
variant="plain"
|
|
282
|
-
type="Debit"
|
|
283
|
-
number="1234"
|
|
284
|
-
logo="${e}"
|
|
285
|
-
logo-height="80"
|
|
286
|
-
bg-color="#a4fc67"
|
|
287
|
-
partner="${k}"
|
|
288
|
-
>
|
|
289
|
-
</mui-smart-card>
|
|
290
|
-
</mui-v-stack>
|
|
291
|
-
<mui-code slot="footer">
|
|
292
|
-
<mui-smart-card<br>
|
|
293
|
-
partner="./images/networks/mastercard.svg"<br>
|
|
294
|
-
...<br>
|
|
295
|
-
><br>
|
|
296
|
-
</mui-smart-card>
|
|
297
|
-
<br>
|
|
298
|
-
</mui-code>
|
|
299
|
-
|
|
300
|
-
</story-card>
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
<story-card title="Reward Cards" description="Utilising the provided props to create bespoke digital cards.">
|
|
304
|
-
<mui-v-stack alignX="center" slot="body" style="padding-top: var(--space-400); padding-bottom: var(--space-400);">
|
|
305
|
-
<mui-smart-card
|
|
306
|
-
inverted
|
|
307
|
-
variant="animated"
|
|
308
|
-
partner="${a}"
|
|
309
|
-
type="Diamond"
|
|
310
|
-
number="1234"
|
|
311
|
-
bg-image="${b}"
|
|
312
|
-
>
|
|
313
|
-
</mui-smart-card>
|
|
314
|
-
<mui-smart-card
|
|
315
|
-
variant="animated"
|
|
316
|
-
partner="${a}"
|
|
317
|
-
type="Premier"
|
|
318
|
-
number="1234"
|
|
319
|
-
bg-image="${d}"
|
|
320
|
-
>
|
|
321
|
-
</mui-smart-card>
|
|
322
|
-
<mui-smart-card
|
|
323
|
-
variant="animated"
|
|
324
|
-
partner="${n}"
|
|
325
|
-
type="Sapphire"
|
|
326
|
-
number="1234"
|
|
327
|
-
bg-image="${c}"
|
|
328
|
-
>
|
|
329
|
-
</mui-smart-card>
|
|
330
|
-
<mui-smart-card
|
|
331
|
-
variant="animated"
|
|
332
|
-
partner="${s}"
|
|
333
|
-
type="Crystal"
|
|
334
|
-
number="1234"
|
|
335
|
-
bg-image="${m}"
|
|
336
|
-
>
|
|
337
|
-
</mui-smart-card>
|
|
338
|
-
<mui-smart-card
|
|
339
|
-
inverted
|
|
340
|
-
variant="plain"
|
|
341
|
-
partner="${a}"
|
|
342
|
-
type="Diamond"
|
|
343
|
-
number="1234"
|
|
344
|
-
bg-image="${b}"
|
|
345
|
-
>
|
|
346
|
-
</mui-smart-card>
|
|
347
|
-
<mui-smart-card
|
|
348
|
-
variant="plain"
|
|
349
|
-
partner="${a}"
|
|
350
|
-
type="Premier"
|
|
351
|
-
number="1234"
|
|
352
|
-
bg-image="${d}"
|
|
353
|
-
>
|
|
354
|
-
</mui-smart-card>
|
|
355
|
-
<mui-smart-card
|
|
356
|
-
variant="plain"
|
|
357
|
-
partner="${n}"
|
|
358
|
-
type="Sapphire"
|
|
359
|
-
number="1234"
|
|
360
|
-
bg-image="${c}"
|
|
361
|
-
>
|
|
362
|
-
</mui-smart-card>
|
|
363
|
-
<mui-smart-card
|
|
364
|
-
variant="plain"
|
|
365
|
-
partner="${s}"
|
|
366
|
-
type="Crystal"
|
|
367
|
-
number="1234"
|
|
368
|
-
bg-image="${m}"
|
|
369
|
-
>
|
|
370
|
-
</mui-smart-card>
|
|
371
|
-
</mui-v-stack>
|
|
372
|
-
<mui-code slot="footer">
|
|
373
|
-
/* Diamond */<br>
|
|
374
|
-
/* ======================== */<br>
|
|
375
|
-
<br>
|
|
376
|
-
<mui-smart-card<br>
|
|
377
|
-
inverted<br>
|
|
378
|
-
type="Diamond"<br>
|
|
379
|
-
partner="${a}"<br>
|
|
380
|
-
bg-image="./images/jal/diamond.png"<br>
|
|
381
|
-
...<br>
|
|
382
|
-
>
|
|
383
|
-
<br>
|
|
384
|
-
</mui-smart-card>
|
|
385
|
-
<br>
|
|
386
|
-
<br>
|
|
387
|
-
<br>
|
|
388
|
-
/* Premier */<br>
|
|
389
|
-
/* ======================== */<br>
|
|
390
|
-
<br>
|
|
391
|
-
<mui-smart-card<br>
|
|
392
|
-
type="Premier"<br>
|
|
393
|
-
partner="${a}"<br>
|
|
394
|
-
bg-image="./images/jal/premier.png"<br>
|
|
395
|
-
...<br>
|
|
396
|
-
><br>
|
|
397
|
-
</mui-smart-card>
|
|
398
|
-
<br>
|
|
399
|
-
<br>
|
|
400
|
-
<br>
|
|
401
|
-
/* Sapphire */<br>
|
|
402
|
-
/* ======================== */<br>
|
|
403
|
-
<br>
|
|
404
|
-
<mui-smart-card<br>
|
|
405
|
-
type="Sapphire"<br>
|
|
406
|
-
partner="${n}"<br>
|
|
407
|
-
bg-image="./images/jal/sapphire.png"<br>
|
|
408
|
-
...<br>
|
|
409
|
-
>
|
|
410
|
-
<br>
|
|
411
|
-
</mui-smart-card>
|
|
412
|
-
<br>
|
|
413
|
-
<br>
|
|
414
|
-
<br>
|
|
415
|
-
/* Crystal */<br>
|
|
416
|
-
/* ======================== */<br>
|
|
417
|
-
<br>
|
|
418
|
-
<mui-smart-card<br>
|
|
419
|
-
type="Crystal"<br>
|
|
420
|
-
partner="${s}"<br>
|
|
421
|
-
bg-image="./images/jal/crystal.png"<br>
|
|
422
|
-
...<br>
|
|
423
|
-
><br>
|
|
424
|
-
</mui-smart-card>
|
|
425
|
-
</mui-code>
|
|
426
|
-
</story-card>
|
|
427
|
-
|
|
428
|
-
</mui-v-stack>
|
|
429
|
-
|
|
430
|
-
</story-template>
|
|
431
|
-
`}}customElements.define("story-smart-card",w);
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
class i extends HTMLElement{constructor(){super();const r=this.attachShadow({mode:"open"}),s=":host { display: block; }",t=`
|
|
2
|
-
<mui-card>
|
|
3
|
-
<mui-card-body>.</mui-card-body>
|
|
4
|
-
</mui-card>
|
|
5
|
-
`;r.innerHTML=`
|
|
6
|
-
<style>${s}</style>
|
|
7
|
-
|
|
8
|
-
<story-template
|
|
9
|
-
title="Grid"
|
|
10
|
-
description="Layout component to enable grid layouts"
|
|
11
|
-
github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-grid/index.ts"
|
|
12
|
-
>
|
|
13
|
-
|
|
14
|
-
<mui-v-stack space="var(--space-700)">
|
|
15
|
-
|
|
16
|
-
<story-card title="Default">
|
|
17
|
-
|
|
18
|
-
<mui-grid slot="body" space="var(--space-200)">
|
|
19
|
-
${t}
|
|
20
|
-
${t}
|
|
21
|
-
</mui-grid>
|
|
22
|
-
|
|
23
|
-
<mui-code slot="footer">
|
|
24
|
-
<mui-grid col="1fr 1fr" space="var(--space-200)">
|
|
25
|
-
<br />
|
|
26
|
-
<mui-card>...</mui-card>
|
|
27
|
-
<br />
|
|
28
|
-
<mui-card>...</mui-card>
|
|
29
|
-
<br />
|
|
30
|
-
</mui-grid>
|
|
31
|
-
</mui-code>
|
|
32
|
-
</story-card>
|
|
33
|
-
|
|
34
|
-
<story-card title="Three Column">
|
|
35
|
-
<mui-grid col="1fr 1fr 1fr" slot="body" space="var(--space-200)">
|
|
36
|
-
${t}
|
|
37
|
-
${t}
|
|
38
|
-
${t}
|
|
39
|
-
</mui-grid>
|
|
40
|
-
<mui-code slot="footer">
|
|
41
|
-
<mui-grid col="1fr 1fr 1fr" space="var(--space-200)">
|
|
42
|
-
<br />
|
|
43
|
-
<mui-card>...</mui-card>
|
|
44
|
-
<br />
|
|
45
|
-
<mui-card>...</mui-card>
|
|
46
|
-
<br />
|
|
47
|
-
<mui-card>...</mui-card>
|
|
48
|
-
<br />
|
|
49
|
-
</mui-grid>
|
|
50
|
-
</mui-code>
|
|
51
|
-
</story-card>
|
|
52
|
-
|
|
53
|
-
</mui-v-stack>
|
|
54
|
-
|
|
55
|
-
</story-template>
|
|
56
|
-
`}}customElements.define("story-grid",i);
|