reactive-bulma 1.18.0 → 1.20.0
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -21
- package/README.md +196 -192
- package/dist/cjs/index.js +35 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/Checkbox/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/File/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +16 -0
- package/dist/esm/index.js +35 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/Checkbox/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/File/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +16 -0
- package/dist/index.d.ts +14 -1
- package/package.json +106 -106
- package/dist/cjs/types/components/atoms/Button/Button.d.ts +0 -4
- package/dist/cjs/types/enums/styleEnums.d.ts +0 -38
- package/dist/cjs/types/functions/persers.d.ts +0 -3
- package/dist/esm/types/components/atoms/Button/Button.d.ts +0 -4
- package/dist/esm/types/enums/styleEnums.d.ts +0 -38
- package/dist/esm/types/functions/persers.d.ts +0 -3
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 Nicolás Omar González Passerino
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 Nicolás Omar González Passerino
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,193 +1,197 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://reactivebulma.netlify.app">
|
|
3
|
-
<img width="75" src="https://cdn.svgporn.com/logos/react.svg">
|
|
4
|
-
<img width="50" src="https://cdn.svgporn.com/logos/bulma.svg">
|
|
5
|
-
</a>
|
|
6
|
-
</p>
|
|
7
|
-
|
|
8
|
-
<h1 align="center">Reactive Bulma</h1>
|
|
9
|
-
|
|
10
|
-
<div align="center">
|
|
11
|
-
|
|
12
|
-
Component library based on React, Bulma, Typescript and Rollup
|
|
13
|
-
|
|
14
|
-
<div align="left">
|
|
15
|
-
|
|
16
|
-
## Table of contents
|
|
17
|
-
|
|
18
|
-
- [Status](#status)
|
|
19
|
-
- [
|
|
20
|
-
- [
|
|
21
|
-
- [
|
|
22
|
-
- [
|
|
23
|
-
- [
|
|
24
|
-
- [
|
|
25
|
-
- [
|
|
26
|
-
- [
|
|
27
|
-
- [
|
|
28
|
-
- [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
[
|
|
19
|
+
- [Purpose](#purpose)
|
|
20
|
+
- [Dependencies](#dependencies)
|
|
21
|
+
- [Quick start](#quick-start)
|
|
22
|
+
- [Folder structure](#folder-structure)
|
|
23
|
+
- [Documentation](#documentation)
|
|
24
|
+
- [Usage](#usage)
|
|
25
|
+
- [Versioning](#versioning)
|
|
26
|
+
- [Roadmap](#roadmap)
|
|
27
|
+
- [Changelog](#changelog)
|
|
28
|
+
- [Credit](#credit)
|
|
29
|
+
- [License](#license)
|
|
30
|
+
|
|
31
|
+
## Purpose
|
|
32
|
+
After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
|
|
33
|
+
|
|
34
|
+
## Status
|
|
35
|
+
|
|
36
|
+
![Npm Version][badge-npm-version]
|
|
37
|
+
![Npm Bundle Size][badge-npm-size]
|
|
38
|
+
[![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
|
|
39
|
+
[![Netlify Status][badge-netlify-status]][link-netlify-status]
|
|
40
|
+
[![Code Coverage][badge-code-coverage]][link-code-coverage]
|
|
41
|
+
[![Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
|
|
42
|
+
[![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
|
|
43
|
+
[![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
|
|
44
|
+
[![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
|
|
45
|
+
[![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
|
|
46
|
+
![GitHub Repo stars][badge-github-repo-stars]
|
|
47
|
+
![GitHub commit activity][badge-github-commits]
|
|
48
|
+
![GitHub last commit][badge-github-last-commit]
|
|
49
|
+
[![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
|
|
50
|
+
|
|
51
|
+
[badge-npm-version]: https://img.shields.io/github/package-json/v/nicolasomar/reactive-bulma?label=npm%20version&logo=npm&labelColor=535353&color=success&style=flat
|
|
52
|
+
[badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
|
|
53
|
+
[badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
|
|
54
|
+
[link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
|
|
55
|
+
[badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
|
|
56
|
+
[link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
|
|
57
|
+
[badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
|
|
58
|
+
[link-code-coverage]: https://app.codecov.io/gh/NicolasOmar/reactive-bulma
|
|
59
|
+
[badge-soundcloud-quality]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status
|
|
60
|
+
[badge-soundcloud-maintanibility]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating
|
|
61
|
+
[badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
|
|
62
|
+
[badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
|
|
63
|
+
[link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
|
|
64
|
+
[badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
|
|
65
|
+
[link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
|
|
66
|
+
[badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
|
|
67
|
+
[badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
|
|
68
|
+
[badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
|
|
69
|
+
[badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
|
|
70
|
+
[link-semantic-commits]: https://github.com/semantic-release/semantic-release
|
|
71
|
+
|
|
72
|
+
## Dependencies
|
|
73
|
+
|
|
74
|
+
![react dependency][badge-dependency-react]
|
|
75
|
+
![bulma dependency][badge-dependency-bulma]
|
|
76
|
+
![material design dependency][badge-dependency-material-design]
|
|
77
|
+
![typescript dependency][badge-dependency-typescript]
|
|
78
|
+
![rollup dependency][badge-dependency-rollup]
|
|
79
|
+
![storybook dependency][badge-dependency-storybook]
|
|
80
|
+
![semantic release dependency][badge-dependency-semantic-release]
|
|
81
|
+
![babel dependency][badge-dependency-babel]
|
|
82
|
+
![jest dependency][badge-dependency-jest]
|
|
83
|
+
![react testing library dependency][badge-dependency-react-testing]
|
|
84
|
+
![prettier dependency][badge-dependency-prettier]
|
|
85
|
+
![eslint dependency][badge-dependency-eslint]
|
|
86
|
+
![husky dependency][badge-dependency-husky]
|
|
87
|
+
|
|
88
|
+
[badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
|
|
89
|
+
[badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
|
|
90
|
+
[badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
|
|
91
|
+
[badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
|
|
92
|
+
[badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
|
|
93
|
+
[badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
|
|
94
|
+
[badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
|
|
95
|
+
[badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
|
|
96
|
+
[badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
|
|
97
|
+
[badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
|
|
98
|
+
[badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
|
|
99
|
+
[badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
|
|
100
|
+
[badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
|
|
101
|
+
|
|
102
|
+
## Quick start
|
|
103
|
+
|
|
104
|
+
Several quick start options are available:
|
|
105
|
+
|
|
106
|
+
- Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`
|
|
107
|
+
- Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
|
|
108
|
+
- Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=18` to install packages.
|
|
109
|
+
|
|
110
|
+
## Folder structure
|
|
111
|
+
|
|
112
|
+
In case you have cloned the repo, it will show you the following folders:
|
|
113
|
+
- `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
|
|
114
|
+
- `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
|
|
115
|
+
- `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
|
|
116
|
+
- `src:`
|
|
117
|
+
- `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
|
|
118
|
+
- `atoms` (from `v1.0.0`).
|
|
119
|
+
- `molecules` (from `v2.0.0`).
|
|
120
|
+
- `organisms` (from `v3.0.0`).
|
|
121
|
+
|
|
122
|
+
## Documentation
|
|
123
|
+
|
|
124
|
+
Reactive bulma's documentation, included in this repo in the root directory, is built with [Storybook](https://storybook.js.org/) and publicly hosted on `Netlify` at <https://reactivebulma.netlify.app/>. The docs may also be run locally.
|
|
125
|
+
|
|
126
|
+
### Running documentation locally
|
|
127
|
+
- Go to `reactive-bulma` folder (where you cloned the repo before).
|
|
128
|
+
- Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
|
|
129
|
+
- Run `npm start`.
|
|
130
|
+
- Wait until a new tab opens with url <http://localhost:6006/> in your browser.
|
|
131
|
+
- In case you want to initiate it on the background, you can run `npm run start:cli`.
|
|
132
|
+
|
|
133
|
+
Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
|
|
134
|
+
|
|
135
|
+
## Usage
|
|
136
|
+
```jsx
|
|
137
|
+
import React from 'react'
|
|
138
|
+
import { Button } from 'reactive-bulma'
|
|
139
|
+
|
|
140
|
+
const App = () => (
|
|
141
|
+
<Button text="This is a test" />
|
|
142
|
+
);
|
|
143
|
+
```
|
|
144
|
+
To see all component's variants and its code snippets, go to [Documentation](#documentation) section
|
|
145
|
+
|
|
146
|
+
## Versioning
|
|
147
|
+
|
|
148
|
+
After investigating [semantic-release documentation](https://semantic-release.gitbook.io/semantic-release/) (reffer to [#3](https://github.com/NicolasOmar/reactive-bulma/issues/3)) and having a problematic implementation, I decided to change version meaning for this project with the following:
|
|
149
|
+
- Major versions (`1.0.0`, `2.0.0` and beyond) will reffer to milestones/version achievement.
|
|
150
|
+
- Minor versions (`1.1.0`, `1.2.0` and so on) will reffer to branch/story completition.
|
|
151
|
+
- Patch versions (`1.0.1`, `1.0.2` and so on) will reffer to bugfixes only.
|
|
152
|
+
|
|
153
|
+
In case you are interested in check current project's status, you can go to [Roadmap](#roadmap) section.
|
|
154
|
+
|
|
155
|
+
### Branching
|
|
156
|
+
|
|
157
|
+
Giving the mentioned release logic, `main` is the only static branch, and each developed feature or fix will have an unique branch with its PR and a merge commit following [semantic versioning](https://semver.org/) and [semantic commits](https://github.com/semantic-release/semantic-release#commit-message-format) specifications.
|
|
158
|
+
|
|
159
|
+
## Roadmap
|
|
160
|
+
|
|
161
|
+
Having in mind the [versioning section](#versioning), repo's status in a glance can be observed in this table.
|
|
162
|
+
|
|
163
|
+
| Version | Progress | Open issues | Closed issues
|
|
164
|
+
| :---: | :---: | :---: | :---: |
|
|
165
|
+
| `v1.0.0` | ![v1.0.0, progress][badge-progress-100] | ![v1.0.0, open][badge-issues-open-100] | ![v1.0.0, closed][badge-issues-closed-100] |
|
|
166
|
+
| `v2.0.0` | ![v2.0.0, progress][badge-progress-200] | ![v2.0.0, open][badge-issues-open-200] | ![v2.0.0, closed][badge-issues-closed-200] |
|
|
167
|
+
| `v3.0.0` | ![v3.0.0, progress][badge-progress-300] | ![v3.0.0, open][badge-issues-open-300] | ![v3.0.0, closed][badge-issues-closed-300] |
|
|
168
|
+
| `v4.0.0` | ![v4.0.0, progress][badge-progress-400] | ![v4.0.0, open][badge-issues-open-400] | ![v4.0.0, closed][badge-issues-closed-400] |
|
|
169
|
+
|
|
170
|
+
[badge-progress-100]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=informational
|
|
171
|
+
[badge-issues-open-100]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=orange
|
|
172
|
+
[badge-issues-closed-100]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=success
|
|
173
|
+
[badge-progress-200]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=informational
|
|
174
|
+
[badge-issues-open-200]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=orange
|
|
175
|
+
[badge-issues-closed-200]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=success
|
|
176
|
+
[badge-progress-300]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=informational
|
|
177
|
+
[badge-issues-open-300]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=orange
|
|
178
|
+
[badge-issues-closed-300]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=success
|
|
179
|
+
[badge-progress-400]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=informational
|
|
180
|
+
[badge-issues-open-400]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=orange
|
|
181
|
+
[badge-issues-closed-400]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=success
|
|
182
|
+
|
|
183
|
+
In case you want the short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
|
|
184
|
+
|
|
185
|
+
In case you want the detailed list of current and future features, go to the [roadmap document](https://docs.google.com/document/d/1kWX-dDTD-cQUeB_Vbu0K6xRvtHaSA38h76yQnhiCe9U).
|
|
186
|
+
|
|
187
|
+
## Changelog
|
|
188
|
+
|
|
189
|
+
The [changelog](https://github.com/NicolasOmar/reactive-bulma/blob/main/CHANGELOG.md) (powered by `semantic-release`) is regularly updated to reflect what's changed in each new release.
|
|
190
|
+
|
|
191
|
+
## Credit
|
|
192
|
+
|
|
193
|
+
Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)
|
|
194
|
+
|
|
195
|
+
## License
|
|
196
|
+
|
|
193
197
|
Code released under the [MIT License](https://github.com/nicolasomar/reactive-bulma/blob/main/LICENSE).
|
package/dist/cjs/index.js
CHANGED
|
@@ -3065,11 +3065,46 @@ const Select = ({ testId = null, showOptions = 1, options = [], isMultiple = fal
|
|
|
3065
3065
|
React.createElement("select", { multiple: isMultiple, size: showOptions, "data-testid": selectTestId }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
|
|
3066
3066
|
};
|
|
3067
3067
|
|
|
3068
|
+
const File = ({ testId = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', style = null, buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
|
|
3069
|
+
const fileClasses = parseClasses([
|
|
3070
|
+
'file',
|
|
3071
|
+
fileName ? 'has-name' : null,
|
|
3072
|
+
buttonOnRight ? 'is-right' : null,
|
|
3073
|
+
isFullWidth ? 'is-fullwidth' : null,
|
|
3074
|
+
isBoxed ? 'is-boxed' : null,
|
|
3075
|
+
color,
|
|
3076
|
+
size
|
|
3077
|
+
]);
|
|
3078
|
+
const fileTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
|
3079
|
+
tag: 'file',
|
|
3080
|
+
parsedClasses: fileClasses,
|
|
3081
|
+
rules: [
|
|
3082
|
+
{
|
|
3083
|
+
usedRegExp: /has/gm,
|
|
3084
|
+
regExpReplacer: '-has'
|
|
3085
|
+
},
|
|
3086
|
+
{
|
|
3087
|
+
usedRegExp: /is|file/gm,
|
|
3088
|
+
regExpReplacer: ''
|
|
3089
|
+
}
|
|
3090
|
+
]
|
|
3091
|
+
});
|
|
3092
|
+
const fileInputTestId = `${fileTestId}-input`;
|
|
3093
|
+
return (React.createElement("section", { "data-testid": fileTestId, className: fileClasses, style: style !== null && style !== void 0 ? style : undefined },
|
|
3094
|
+
React.createElement("label", { className: 'file-label' },
|
|
3095
|
+
React.createElement("input", { "data-testid": fileInputTestId, className: 'file-input', type: 'file', name: 'resume', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }),
|
|
3096
|
+
React.createElement("span", { className: 'file-cta' },
|
|
3097
|
+
uploadIcon ? React.createElement(Icon, Object.assign({}, uploadIcon)) : null,
|
|
3098
|
+
React.createElement("span", { className: 'file-label' }, uploadText)),
|
|
3099
|
+
fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
|
|
3100
|
+
};
|
|
3101
|
+
|
|
3068
3102
|
exports.Block = Block;
|
|
3069
3103
|
exports.Box = Box;
|
|
3070
3104
|
exports.Button = Button;
|
|
3071
3105
|
exports.Column = Column;
|
|
3072
3106
|
exports.Delete = Delete;
|
|
3107
|
+
exports.File = File;
|
|
3073
3108
|
exports.Icon = Icon;
|
|
3074
3109
|
exports.Input = Input;
|
|
3075
3110
|
exports.ProgressBar = ProgressBar;
|