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