mirror of https://github.com/sgoudham/carbon.git
Font support (#149)
* Add font family/font size support * Load fonts with css * Change settings item ordermain
Jake Dexheimer
7 years ago
committed by
Michael Fix
parent
ac28311429
commit
38cc0f91af
@ -0,0 +1,84 @@
|
||||
import React from 'react'
|
||||
import Checkmark from './svg/Checkmark'
|
||||
import { COLORS, FONTS } from '../lib/constants'
|
||||
|
||||
export default class extends React.Component {
|
||||
constructor(props) {
|
||||
super()
|
||||
this.state = { isVisible: false }
|
||||
this.select = this.select.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
}
|
||||
|
||||
select(fontId) {
|
||||
if (this.props.selected !== fontId) {
|
||||
this.props.onChange(fontId)
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({ isVisible: !this.state.isVisible })
|
||||
}
|
||||
|
||||
renderListItems() {
|
||||
return FONTS.map((font, i) => (
|
||||
<div className="list-item" key={i} onClick={this.select.bind(null, font.id)}>
|
||||
<span style={{ fontFamily: font.id }}>{font.name}</span>
|
||||
{this.props.selected === font.id ? <Checkmark /> : null}
|
||||
<style jsx>{`
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 0.5px solid ${COLORS.SECONDARY};
|
||||
background: rgba(255, 255, 255, 0.165);
|
||||
}
|
||||
.list-item:first-of-type {
|
||||
border-top: 0.5px solid ${COLORS.SECONDARY};
|
||||
}
|
||||
.list-item:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
render() {
|
||||
const selectedFont = FONTS.filter(font => font.id === this.props.selected)[0]
|
||||
return (
|
||||
<div className="font-select-container">
|
||||
<div
|
||||
className={`display ${this.state.isVisible ? 'is-visible' : ''}`}
|
||||
onClick={this.toggle}
|
||||
>
|
||||
<span className="label">Font family</span>
|
||||
<span style={{ fontFamily: selectedFont.id }}>{selectedFont.name}</span>
|
||||
</div>
|
||||
<div className="list">{this.renderListItems()}</div>
|
||||
<style jsx>{`
|
||||
.display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 8px;
|
||||
}
|
||||
.list {
|
||||
display: none;
|
||||
margin-top: -1px;
|
||||
max-height: 80px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.is-visible + .list {
|
||||
display: block;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
export default () => (
|
||||
<style jsx global>{`
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('http://cdn.jsdelivr.net/font-hack/2.020/fonts/eot/hack-regular-webfont.eot?v=2.020');
|
||||
src: url('http://cdn.jsdelivr.net/font-hack/2.020/fonts/eot/hack-regular-webfont.eot?#iefix&v=2.020')
|
||||
format('embedded-opentype'),
|
||||
url('http://cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020')
|
||||
format('woff2'),
|
||||
url('http://cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020')
|
||||
format('woff'),
|
||||
url('http://cdn.jsdelivr.net/font-hack/2.020/fonts/web-ttf/hack-regular-webfont.ttf?v=2.020')
|
||||
format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
src: url('http://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/eot/FiraCode-Regular.eot');
|
||||
src: url('http://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/eot/FiraCode-Regular.eot')
|
||||
format('embedded-opentype'),
|
||||
url('http://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff2/FiraCode-Regular.woff2')
|
||||
format('woff2'),
|
||||
url('http://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/woff/FiraCode-Regular.woff')
|
||||
format('woff'),
|
||||
url('http://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/ttf/FiraCode-Regular.ttf')
|
||||
format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Anonymous Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
|
||||
url(https://fonts.gstatic.com/s/anonymouspro/v11/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Droid Sans Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Droid Sans Mono Regular'), local('DroidSansMono-Regular'),
|
||||
url(https://fonts.gstatic.com/s/droidsansmono/v9/ns-m2xQYezAtqh7ai59hJVlgUn8GogvcKKzoM9Dh-4E.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inconsolata';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
|
||||
url(https://fonts.gstatic.com/s/inconsolata/v16/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Source Code Pro'), local('SourceCodePro-Regular'),
|
||||
url(https://fonts.gstatic.com/s/sourcecodepro/v7/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Ubuntu Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
|
||||
url(https://fonts.gstatic.com/s/ubuntumono/v7/ViZhet7Ak-LRXZMXzuAfkYgp9Q8gbYrhqGlRav_IXfk.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc,
|
||||
U+2000-206f, U+2074, U+20ac, U+2122, U+2212, U+2215;
|
||||
}
|
||||
`}</style>
|
||||
)
|
||||
Loading…
Reference in New Issue