react-button-beans/examples/index.js at develop · roast-cms/react-button-beans · GitHub

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
107
108
109
110
111
112
113
114
115
//
// tools
import React from "react"
import { render } from "react-dom"
import { BrowserRouter } from "react-router-dom"

//
// theme and fonts
import { ThemeProvider } from "styled-components"
import { Sugar } from "@roast-cms/react-sugar-styled"
import "typeface-yanone-kaffeesatz"
import "typeface-lobster-two"
//
// button components
import Link from "@roast-cms/react-link-filter"
import { Button, TinyButton, ButtonStrip, LinkButton, Item } from "../src/index"
//
// this component, when sourcing from an NPM package will have to be imported
// from: `@roast-cms/react-button-beans/dist/src/Loader`
import { Loader } from "../src/Loader"
//
// rendered component
const LinkComponent = props => <Link domain="google.com" {...props}>{props.children}</Link>
const Main = props => {
  return [
    <Button key="PlainButton">Plain Button</Button>,
    <Button inverse key="InverseButton">
      Inverse Button
    </Button>,
    <Button branded key="BrandedButton">
      Branded Button
    </Button>,
    <Button branded loading loaderComponent={Loader} key="BrandedLoadingButton">
      Branded Loading Button
    </Button>,
    <Button loading loaderComponent={Loader} key="PlainLoadingButton">
      Plain Loading Button
    </Button>,
    <LinkButton
      key="PlainLinkButton"
      linkComponent="a"
      href="https://www.analog.cafe"
    >
      Plain Link Button
    </LinkButton>,
    <LinkButton
      key="SpecialLinkButton"
      linkComponent={LinkComponent}
      to="https://www.analog.cafe"
    >
      Special Link Button
    </LinkButton>,
    <TinyButton
      key="TinyBrandedButton"
      linkComponent="a"
      href="https://www.analog.cafe"
    >
      Tiny Link Btn
    </TinyButton>,
    <ButtonStrip
      key="ButtonStrip"
      style={{
        width: "16em",
        margin: "0 auto"
      }}
    >
      <div>
        <Item left branded linkComponent="a">
          Left
        </Item>
        <Item inverse linkComponent="a">
          Middle
        </Item>
        <Item right script linkComponent="a" style={{ minWidth: "4em" }}>
          Script
        </Item>
      </div>
    </ButtonStrip>
  ]
}
//
//
render(
  <div>
    <BrowserRouter>
    <ThemeProvider theme={Sugar({
      //
      // you can "theme" your button components with react-sugar-styled
      // theming dictionary API
      //
      color_brand: "rgb(189,67,54)",
      //
      font_heading: "'Yanone Kaffeesatz', sans-serif",
      font_heading_weight: 400,
      //
      font_body: "'Lobster Two', serif",
      //
      size_base: 20,
      size_column_medium: 700,
      size_column_large: 900,
      size_block_spacing: .75,
      //
      effects_border_radius: .75,
      //
      // for detailed docs on how to customize buttons' theme please refer to
      // the guide on https://github.com/roast-cms/react-sugar-styled
      // - it is a themeing dictionary used with Styled Components
      //
    })}>
      <Main />
    </ThemeProvider>
  </BrowserRouter>
  </div>,
  window.document.getElementById("app")
)