1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { Component } from '../component.ts'import { h } from '../core.ts'import { Button } from './button.ts'import { zIndex } from './_config.ts'
interface BannerAction {  name: string  id?: string | number  color?: string}
interface BannerActionEvent {  action: string}
interface BannerProps {  title?: string  body?: string  actions?: BannerAction[]  onAction?: () => BannerActionEvent  parentId?: string  sticky?: number}
export class Banner extends Component<BannerProps> {  defaultActionColor = '#6200EE'
  render() {    const {      sticky,      body = 'There was a problem processing a transaction on your credit card.',      actions = [        { name: 'fix it', color: this.defaultActionColor },        { name: 'learn more', color: this.defaultActionColor }      ]    } = this.props
    const stickyStyles = sticky      ? `    position: -webkit-sticky;    position: sticky;    top: ${sticky}px;`      : ''
    const styles = {      container: `        margin: -16px -16px 16px -16px;        ${stickyStyles}        z-index: ${zIndex.banner}        `,      banner: `    
        display: flex;        justify-content: space-between;        flex-wrap: wrap;

        background: white;        border-bottom: 1px rgb(0 0 0 / 0.12) solid;        min-height: 54px;`,      body: `        color: #000000;        padding: 16px;        padding-bottom: 8px;        font-size: 16px;          line-height: 1.5em;`,      actions: `        margin: 0;        padding: 8px;                display: flex;        flex-direction: row;        align-items: flex-end;         margin-left: auto;        flex-wrap: wrap;        justify-content: flex-end;        `,      action: `        margin-bottom: 0px;        margin-left: 10px;`    }
    const actionsArray = actions.map((action: any) => {      return h(        Button,        {          text: true,          color: action.color || this.defaultActionColor,          style: styles.action,          // style: `color: ${action.color || this.defaultActionColor}`,          onClick: () => {            // callback({ name: action.name, id: action.id })            // this.remove()          }        },        action.name.toUpperCase()      )    })
    const bodyElement = h('div', { style: styles.body }, body)    const actionsElement = h('div', { style: styles.actions }, actionsArray)    const bannerElement = h('div', { style: styles.banner }, bodyElement, actionsElement)
    return h('div', { style: styles.container }, bannerElement)  }}