theme-ui#Label JavaScript Examples
The following examples show how to use
theme-ui#Label.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: TosCheck.js From developer-portal with Apache License 2.0 | 6 votes |
|
TosCheck = ({ onChange, ...props }) => {
return (
<Label sx={{ display: 'flex', alignItems: 'center' }}>
<Checkbox onChange={onChange} />
<Text variant="plainText" sx={{ ...props.sx, fontSize: 4 }} {...props}>
I agree to the <ThemeLink>Terms of Service</ThemeLink> and the{' '}
<ThemeLink>Privacy Policy</ThemeLink>
</Text>
</Label>
);
}
Example #2
| Source File: PreferencesRoute.js From NoteMaster with GNU General Public License v3.0 | 4 votes |
|
PreferencesRoute = ({ preferences, updatePreferences }) => {
const history = useHistory();
const fontFamilyChange = e => {
updatePreferences({
fontFamily: e.target.value,
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const fontSizeChange = e => {
updatePreferences({
fontSize: Number(e.target.value),
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const fontWeightChange = e => {
updatePreferences({
fontWeight: e.target.value,
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const lineHeightChange = e => {
updatePreferences({
lineHeight: Number(e.target.value),
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const lineNumbersChange = e => {
updatePreferences({
lineNumbers: e.target.value,
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const autoLaunchChange = e => {
updatePreferences({
autoLaunch: e.target.value === 'true',
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const nmlEnabledChange = e => {
updatePreferences({
nmlEnabled: e.target.value === 'true',
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const fontLigaturesChange = e => {
updatePreferences({
fontLigatures: e.target.value === 'true',
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const nmlBaseCurrencyChange = e => {
updatePreferences({
nmlBaseCurrency: e.target.value,
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const wrappingIndentChange = e => {
updatePreferences({
wrappingIndent: e.target.value,
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const editorThemeChange = e => {
updatePreferences({
editorTheme: e.target.value,
// HACK: If the initial content is updated to match the existing autosaveContent then the user will lose all changes
// since the file was read from the disk into memory.
editorContent: preferences.autosaveContent
});
};
const navigateToNotes = e => {
updatePreferences({
editorContent: preferences.autosaveContent
});
history.push('/');
};
const {
editorTheme,
fontFamily,
fontSize,
fontWeight,
lineNumbers,
lineHeight,
fontLigatures,
autoLaunch,
nmlEnabled,
nmlBaseCurrency,
wrappingIndent
} = preferences;
const renderNmlOptions = () => {
return (
<Box
className={
nmlEnabled ? styles.smartOptionsActive : styles.smartOptionsHidden
}
mb="2"
>
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="Set this value to your most commonly used currency. The default is: USD.">
<Label mt="2" variant="labelTooltip">
Base Currency
</Label>
</TooltipComponent>
</Box>
<Box>
<Select
disabled={!nmlEnabled}
defaultValue={nmlBaseCurrency}
onChange={nmlBaseCurrencyChange}
>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="EUR">EUR</option>
</Select>
</Box>
</Flex>
</Box>
);
};
return (
<div className={styles.container} data-tid="container">
<div className={styles.header}>
<TitlebarComponent />
</div>
<div className={styles.preferences}>
<ContainerComponent padding="0 8px 0 0">
<Button variant="linkUpper" mb="0" onClick={navigateToNotes}>
<i className="ri-arrow-left-line" /> Return to Notes
</Button>
</ContainerComponent>
<ScrollableContentComponent>
<ContainerComponent padding="0 8px 0 0">
<Heading mt="0" as="h1">
Preferences
</Heading>
<Text mt="1" mb="3" variant="muted">
Customize NoteMaster to your desire. You can request features on{' '}
<Link
href="https://github.com/LiamRiddell/NoteMaster"
target="_blank"
rel="noreferer"
>
NoteMaster GitHub
</Link>
.
</Text>
{/* Editor */}
<Box mb="4">
<Text mb="2" variant="group">
Editor
</Text>
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="When enabled, NoteMaster Smart Mode automatically recognizes keywords, and intelligently provides results as you type. The default is: Enabled.">
<Label mt="2" variant="labelTooltip">
Smart Mode
</Label>
</TooltipComponent>
</Box>
<Box>
<Select
defaultValue={nmlEnabled ? 'true' : 'false'}
onChange={nmlEnabledChange}
>
<option value="true">Enabled</option>
<option value="false">Disabled</option>
</Select>
</Box>
</Flex>
{/* NoteMaster Language */}
{renderNmlOptions()}
{/* Line Numbers */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="When enabled, line numbers will be displayed on the left side of the editor. The default is: Off.">
<Label mt="2" variant="labelTooltip">
Line Numbers
</Label>
</TooltipComponent>
</Box>
<Box>
<Select
defaultValue={lineNumbers}
onChange={lineNumbersChange}
>
<option value="off">Off</option>
<option value="on">On</option>
<option value="relative">Relative</option>
<option value="interval">Interval</option>
</Select>
</Box>
</Flex>
{/* Text Wrap Indentation */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="This effects how long sentences wrap onto a new line. The default is: Same.">
<Label mt="2" variant="labelTooltip">
Text Wrap Indent
</Label>
</TooltipComponent>
</Box>
<Box>
<Select
defaultValue={wrappingIndent}
onChange={wrappingIndentChange}
>
<option value="same">Same</option>
<option value="indent">Indent</option>
<option value="deepIndent">Deep Indent</option>
<option value="none">None</option>
</Select>
</Box>
</Flex>
{/* Editor Theme */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="Using the Dark theme will enable rich text highlighting, which compliments Smart Mode. Use Dark Basic, if you find the rich text highlighting distrating. The default is: Dark.">
<Label mt="2" variant="labelTooltip">
Theme
</Label>
</TooltipComponent>
</Box>
<Box>
<Select
defaultValue={editorTheme}
onChange={editorThemeChange}
>
<option value="notemaster-dark-nml-enabled">Dark</option>
<option value="notemaster-dark-nml-disabled">
Dark Basic
</option>
</Select>
</Box>
</Flex>
</Box>
{/* Typography Settings */}
<Box mb="4">
<Text mb="2" variant="group">
Typography
</Text>
{/* Font */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="Changes the font within the editor. The default is: Roboto.">
<Label mt="2" variant="labelTooltip">
Font
</Label>
</TooltipComponent>
</Box>
<Box>
<Select defaultValue={fontFamily} onChange={fontFamilyChange}>
<option value="Roboto">Roboto</option>
<option value="Arial">Arial</option>
<option value="Helvetica Neue">Helvetica Neue</option>
<option value="Monospace">Monospace</option>
<option value="Ubuntu">Ubuntu</option>
<option value="Segoe UI">Segoe UI</option>
</Select>
</Box>
</Flex>
{/* Font Size */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="You can adjust the font size within the editor. The default is: 16.">
<Label mt="2" variant="labelTooltip">
Font Size
</Label>
</TooltipComponent>
</Box>
<Box>
<Input
type="number"
defaultValue={fontSize}
onChange={fontSizeChange}
sx={{ width: '72px' }}
/>
</Box>
</Flex>
{/* Font Weight */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="Changes the font thickness within the editor. The default is: Regular.">
<Label mt="2" variant="labelTooltip">
Font Weight
</Label>
</TooltipComponent>
</Box>
<Box>
<Select defaultValue={fontWeight} onChange={fontWeightChange}>
<option value="100">Thin</option>
<option value="200">Extra Light</option>
<option value="300">Light</option>
<option value="400">Regular</option>
<option value="500">Medium</option>
<option value="600">Semi-Bold</option>
<option value="700">Bold</option>
<option value="800">Extra Bold</option>
<option value="900">Black</option>
</Select>
</Box>
</Flex>
{/* Line Height */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="Change the line height within the editor. The default is: 24.">
<Label mt="2" variant="labelTooltip">
Line Height
</Label>
</TooltipComponent>
</Box>
<Box>
<Input
type="number"
defaultValue={lineHeight}
onChange={lineHeightChange}
sx={{ width: '72px' }}
/>
</Box>
</Flex>
{/*
<Label mt="2" mb="1">
Font Ligatures
</Label>
<Select
defaultValue={fontLigatures ? 'true' : 'false'}
onChange={fontLigaturesChange}
>
<option value="true">On</option>
<option value="false">Off</option>
</Select> */}
</Box>
{/* System */}
<Box mb="4">
<Text mb="2" variant="group">
SYSTEM
</Text>
{/* Auto Launch */}
<Flex mt="3">
<Box sx={{ flex: '1 1 auto' }}>
<TooltipComponent content="When enabled, NoteMaster will be launched on startup. The default is: On.">
<Label mt="2" variant="labelTooltip">
Auto Launch
</Label>
</TooltipComponent>
</Box>
<Box>
<Select
defaultValue={autoLaunch ? 'true' : 'false'}
onChange={autoLaunchChange}
>
<option value="false">Off</option>
<option value="true">On</option>
</Select>
</Box>
</Flex>
</Box>
{/* Creation Rights */}
<Box
p={3}
color="text"
bg="#27292C"
mb="1"
sx={{ borderRadius: 3 }}
>
Thank you for downloading NoteMaster, an open-source project
created and maintained by{' '}
<Link href="https://github.com/LiamRiddell" target="_blank">
Liam Riddell
</Link>{' '}
❤️
</Box>
</ContainerComponent>
</ScrollableContentComponent>
</div>
</div>
);
}
Example #3
| Source File: search.js From github-covid-finder with MIT License | 4 votes |
|
Search = ({
searchState,
onSearchChange,
onSortChange,
onFilterChange,
onSearchIconClick,
}) => {
const [valueInput, setValueInput] = useState('')
const [valueSelectStars, setValueSelectStars] = useState('')
const [valueSelectLanguage, setValueSelectLanguage] = useState('')
return (
<Grid columns={[1, 2]}>
<Box
sx={{
width: '100%',
color: 'text',
fontFamily: 'inter',
position: 'relative',
}}
>
<Input
sx={{
backgroundColor: 'cardBackground',
color: 'text',
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'cardBorder',
borderRadius: 8,
height: 45,
fontSize: 15,
pr: '40px',
'&:focus': {
outline: 0,
},
'@media only screen and (max-width: 320px)': {
fontSize: 13,
},
}}
value={valueInput}
onChange={e => setValueInput(e.target.value)}
onKeyPress={e =>
e.key === 'Enter'
? onSearchIconClick(
valueInput,
valueSelectStars,
valueSelectLanguage
)
: {}
}
placeholder="Search Covid-19 related repos"
/>
<SearchIcon
style={{
top: 10,
right: 10,
width: 22,
height: 22,
cursor: 'pointer',
position: 'absolute',
}}
onClick={() =>
onSearchIconClick(valueInput, valueSelectStars, valueSelectLanguage)
}
/>
<Label
sx={{
fontSize: 9,
padding: '0px 3px',
display: 'block',
mt: '8px',
opacity: '0.6',
}}
>
Press Enter when you are done (GitHub API has a rate limit of
<a
style={{ cursor: 'pointer', color: 'rgb(255, 65, 54)' }}
href="https://developer.github.com/v3/search/#rate-limit"
target="_blank"
rel="noopener noreferrer"
>
<b> 10 requests per minute </b>
</a>
if something not working please wait...)
</Label>
</Box>
<Grid
columns={[2, 2]}
sx={{
width: '100%',
color: 'white',
fontFamily: 'inter',
}}
>
<Box>
<Select
sx={{
backgroundColor: 'cardBackground',
color: 'text',
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'cardBorder',
borderRadius: 8,
height: 45,
'& + svg': {
fill: 'text',
},
fontSize: 15,
'@media only screen and (max-width: 320px)': {
fontSize: 13,
},
'&:focus': {
outline: 0,
},
}}
value={valueSelectStars}
onChange={e => setValueSelectStars(e.target.value)}
>
<option value="stars">Sort by Stars</option>
<option value="">Sort by Best Match</option>
<option value="help-wanted-issues">
Sort by Help Wanted Issues
</option>
</Select>
</Box>
<Box>
<Select
sx={{
backgroundColor: 'cardBackground',
color: 'text',
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'cardBorder',
borderRadius: 8,
height: 45,
'& + svg': {
fill: 'text',
},
fontSize: 15,
'@media only screen and (max-width: 320px)': {
fontSize: 13,
},
'&:focus': {
outline: 0,
},
}}
value={valueSelectLanguage}
onChange={e => setValueSelectLanguage(e.target.value)}
>
<option value="">All Languages</option>
{githubLanguages.map(lang => (
<option key={lang} value={lang}>
{lang}
</option>
))}
</Select>
</Box>
</Grid>
</Grid>
)
}
