-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #62 from hotosm/dev
Refactor and simplify
Showing
220 changed files
with
3,754 additions
and
15,037 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.docblock-typeset > div > div:first-child { | ||
width: 25%; | ||
} | ||
|
||
.docblock-typeset > div > div:last-child { | ||
width: 75%; | ||
} | ||
|
||
a { | ||
color: var(--hot-color-primary-700) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { Meta } from '@storybook/blocks'; | ||
import { Logo, Button } from '../../src/react'; | ||
|
||
<Meta title="Intro" /> | ||
|
||
<Logo /><br /> | ||
|
||
# HOTOSM UI | ||
|
||
## Shared UI Components with HOT Theming | ||
|
||
This repository contains HOT themed UI components to reduce code duplication | ||
and simplify the lives of developers needing to prototype and develop well | ||
designed web applications quickly. | ||
|
||
They are available as | ||
[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) | ||
and has first-class React support. | ||
|
||
The main goal of this project is not to re-invent the wheel, or add an extra burden | ||
of development and maintenance. | ||
|
||
## Install | ||
|
||
`npm install @hotosm/ui` | ||
|
||
And import the styles: | ||
|
||
```js | ||
import '@hotosm/dist/style.css'; | ||
``` | ||
|
||
## Use | ||
|
||
Now you can use any component, you can try with a button: | ||
|
||
```html | ||
<hot-button variant="primary">Click me!</hot-button> | ||
``` | ||
|
||
<Button variant="primary">Click me!</Button> | ||
|
||
Or the HOT logo! | ||
|
||
```html | ||
<hot-logo></hot-logo> | ||
``` | ||
|
||
<Logo /> | ||
|
Oops, something went wrong.