├── .coveralls.yml ├── .eslintignore ├── .eslintrc ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── help.md ├── .gitignore ├── .npmignore ├── .nvmrc ├── .prettierrc ├── .storybook ├── common-props.js ├── main.js ├── manager.js ├── package.json ├── preview.js ├── rewrites.scss └── theme.js ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.cjs ├── index.esm.mjs ├── jest.config.js ├── package-lock.json ├── package.json ├── src ├── __test__ │ ├── __snapshots__ │ │ └── index.test.js.snap │ ├── index.test.js │ └── setup.js ├── changelog.story.mdx ├── components │ ├── block │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── block.test.js.snap │ │ │ └── block.test.js │ │ ├── block.js │ │ ├── block.story.js │ │ ├── block.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── box │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── box.test.js.snap │ │ │ └── box.test.js │ │ ├── box.js │ │ ├── box.story.js │ │ ├── box.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── breadcrumb │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── breadcrumb.test.js.snap │ │ │ └── breadcrumb.test.js │ │ ├── breadcrumb.js │ │ ├── breadcrumb.story.js │ │ ├── breadcrumb.story.mdx │ │ ├── components │ │ │ └── item.js │ │ ├── index.d.ts │ │ └── index.js │ ├── button │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── button.test.js.snap │ │ │ └── button.test.js │ │ ├── button.js │ │ ├── button.story.js │ │ ├── button.story.mdx │ │ ├── components │ │ │ └── button-group.js │ │ ├── index.d.ts │ │ └── index.js │ ├── card │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── card.test.js.snap │ │ │ └── card.test.js │ │ ├── card.js │ │ ├── card.story.js │ │ ├── card.story.mdx │ │ ├── components │ │ │ ├── content.js │ │ │ ├── footer │ │ │ │ ├── components │ │ │ │ │ └── footer-item.js │ │ │ │ ├── footer.js │ │ │ │ └── index.js │ │ │ ├── header │ │ │ │ ├── components │ │ │ │ │ ├── header-icon.js │ │ │ │ │ └── header-title.js │ │ │ │ ├── header.js │ │ │ │ └── index.js │ │ │ └── image.js │ │ ├── index.d.ts │ │ └── index.js │ ├── columns │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── columns.test.js.snap │ │ │ └── columns.test.js │ │ ├── columns.js │ │ ├── components │ │ │ └── column.js │ │ ├── constants.js │ │ ├── index.d.ts │ │ ├── index.js │ │ └── stories │ │ │ ├── columns-1-basics.story.mdx │ │ │ ├── columns-2-sizes.story.mdx │ │ │ ├── columns-3-responsiveness.story.mdx │ │ │ ├── columns-4-nesting.story.mdx │ │ │ ├── columns-5-gap.story.mdx │ │ │ ├── columns-6-Options.story.mdx │ │ │ └── columns.story.js │ ├── container │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── container.test.js.snap │ │ │ └── container.test.js │ │ ├── container.js │ │ ├── container.story.js │ │ ├── container.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── content │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── content.test.js.snap │ │ │ └── content.test.js │ │ ├── content.js │ │ ├── content.story.js │ │ ├── content.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── delete │ │ └── delete.story.mdx │ ├── dropdown │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── dropdown.test.js.snap │ │ │ └── dropdown.test.js │ │ ├── components │ │ │ ├── divider.js │ │ │ └── item.js │ │ ├── dropdown.js │ │ ├── dropdown.story.js │ │ ├── dropdown.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── element │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── element.test.js.snap │ │ │ └── element.test.js │ │ ├── element.js │ │ ├── element.story.js │ │ ├── index.d.ts │ │ ├── index.js │ │ └── stories │ │ │ ├── element-1-basic.story.mdx │ │ │ ├── element-2-proptypes.story.mdx │ │ │ ├── element-3-responsive.story.mdx │ │ │ ├── element-4-renderas.story.mdx │ │ │ └── element-5-customization.story.mdx │ ├── footer │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── footer.test.js.snap │ │ │ └── footer.test.js │ │ ├── footer.js │ │ ├── footer.story.js │ │ ├── footer.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── form │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── index.test.js.snap │ │ │ └── index.test.js │ │ ├── components │ │ │ ├── __test__ │ │ │ │ ├── __snapshots__ │ │ │ │ │ ├── checkbox.test.js.snap │ │ │ │ │ ├── control.test.js.snap │ │ │ │ │ ├── field.test.js.snap │ │ │ │ │ ├── help.test.js.snap │ │ │ │ │ ├── input-file.test.js.snap │ │ │ │ │ ├── input.test.js.snap │ │ │ │ │ ├── label.test.js.snap │ │ │ │ │ ├── radio.test.js.snap │ │ │ │ │ ├── select.test.js.snap │ │ │ │ │ └── textarea.test.js.snap │ │ │ │ ├── checkbox.test.js │ │ │ │ ├── control.test.js │ │ │ │ ├── field.test.js │ │ │ │ ├── help.test.js │ │ │ │ ├── input-file.test.js │ │ │ │ ├── input.test.js │ │ │ │ ├── label.test.js │ │ │ │ ├── radio.test.js │ │ │ │ ├── select.test.js │ │ │ │ └── textarea.test.js │ │ │ ├── checkbox.js │ │ │ ├── control.js │ │ │ ├── field │ │ │ │ ├── context.js │ │ │ │ ├── field-body.js │ │ │ │ ├── field-label.js │ │ │ │ ├── field.js │ │ │ │ └── index.js │ │ │ ├── help.js │ │ │ ├── input-file.js │ │ │ ├── input.js │ │ │ ├── label.js │ │ │ ├── radio.js │ │ │ ├── select.js │ │ │ └── textarea.js │ │ ├── index.d.ts │ │ ├── index.js │ │ └── stories │ │ │ ├── form-1-basics.story.mdx │ │ │ ├── form-2-label.story.mdx │ │ │ ├── form-3-field.story.mdx │ │ │ ├── form-4-control.story.mdx │ │ │ ├── form-5-input.story.mdx │ │ │ ├── form-6-textarea.story.mdx │ │ │ ├── form-7-select.story.mdx │ │ │ ├── form-8-checkbox.story.mdx │ │ │ ├── form-9-radio.story.mdx │ │ │ ├── form-99-input-file.story.mdx │ │ │ └── form.story.js │ ├── heading │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── heading.test.js.snap │ │ │ └── heading.test.js │ │ ├── heading.js │ │ ├── heading.story.js │ │ ├── heading.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── hero │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── hero.test.js.snap │ │ │ └── hero.test.js │ │ ├── components │ │ │ ├── hero-body.js │ │ │ ├── hero-footer.js │ │ │ └── hero-header.js │ │ ├── hero.js │ │ ├── hero.story.js │ │ ├── hero.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── icon │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── icon.test.js.snap │ │ │ └── icon.test.js │ │ ├── components │ │ │ └── text │ │ │ │ ├── index.js │ │ │ │ └── text.js │ │ ├── icon.js │ │ ├── icon.story.js │ │ ├── icon.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── image │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── image.test.js.snap │ │ │ └── image.test.js │ │ ├── constants.js │ │ ├── image.js │ │ ├── image.story.js │ │ ├── image.story.mdx │ │ ├── index.d.ts │ │ └── index.js │ ├── index.d.ts │ ├── level │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── level.test.js.snap │ │ │ └── level.test.js │ │ ├── components │ │ │ ├── level-item.js │ │ │ └── level-side.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── level.js │ │ ├── level.story.js │ │ └── level.story.mdx │ ├── loader │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── loader.test.js.snap │ │ │ └── loader.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── loader.js │ │ └── loader.story.js │ ├── media │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── media.test.js.snap │ │ │ └── media.test.js │ │ ├── components │ │ │ └── media-item.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── media.js │ │ ├── media.story.js │ │ └── media.story.mdx │ ├── menu │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── menu.test.js.snap │ │ │ └── menu.test.js │ │ ├── components │ │ │ └── list │ │ │ │ ├── components │ │ │ │ └── item.js │ │ │ │ ├── index.js │ │ │ │ └── list.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── menu.js │ │ ├── menu.story.js │ │ └── menu.story.mdx │ ├── message │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── message.test.js.snap │ │ │ └── message.test.js │ │ ├── components │ │ │ ├── body.js │ │ │ └── header.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── message.js │ │ ├── message.story.js │ │ └── message.story.mdx │ ├── modal │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── modal.test.js.snap │ │ │ └── modal.test.js │ │ ├── components │ │ │ ├── card │ │ │ │ ├── body.js │ │ │ │ ├── card.js │ │ │ │ ├── footer.js │ │ │ │ ├── header.js │ │ │ │ ├── index.js │ │ │ │ └── title.js │ │ │ └── content.js │ │ ├── context.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── modal.js │ │ ├── modal.story.js │ │ └── modal.story.mdx │ ├── navbar │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── navbar.test.js.snap │ │ │ └── navbar.test.js │ │ ├── components │ │ │ ├── brand.js │ │ │ ├── burger.js │ │ │ ├── container.js │ │ │ ├── divider.js │ │ │ ├── dropdown.js │ │ │ ├── item.js │ │ │ ├── link.js │ │ │ └── menu.js │ │ ├── context.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── navbar.js │ │ ├── navbar.story.js │ │ └── navbar.story.mdx │ ├── notification │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── notification.test.js.snap │ │ │ └── notification.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── notification.js │ │ ├── notification.story.js │ │ └── notification.story.mdx │ ├── pagination │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── pagination.test.js.snap │ │ │ └── pagination.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── pagination.js │ │ ├── pagination.story.js │ │ └── pagination.story.mdx │ ├── panel │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── panel.test.js.snap │ │ │ └── panel.test.js │ │ ├── components │ │ │ ├── block.js │ │ │ ├── header.js │ │ │ ├── icon.js │ │ │ └── tabs │ │ │ │ ├── components │ │ │ │ └── tab.js │ │ │ │ ├── index.js │ │ │ │ └── tabs.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── panel.js │ │ ├── panel.story.js │ │ └── panel.story.mdx │ ├── progress │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── progress.test.js.snap │ │ │ └── progress.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── progress.js │ │ ├── progress.story.js │ │ └── progress.story.mdx │ ├── section │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── section.test.js.snap │ │ │ └── section.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── section.js │ │ ├── section.story.js │ │ └── section.story.mdx │ ├── table │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── table.test.js.snap │ │ │ └── table.test.js │ │ ├── components │ │ │ └── container.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── table.js │ │ ├── table.story.js │ │ └── table.story.mdx │ ├── tabs │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── tabs.test.js.snap │ │ │ └── tabs.test.js │ │ ├── components │ │ │ └── tab.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── tabs.js │ │ ├── tabs.story.js │ │ └── tabs.story.mdx │ ├── tag │ │ ├── __test__ │ │ │ ├── __snapshots__ │ │ │ │ └── tag.test.js.snap │ │ │ └── tag.test.js │ │ ├── components │ │ │ └── tag-group.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── tag.js │ │ ├── tag.story.js │ │ └── tag.story.mdx │ └── tile │ │ ├── __test__ │ │ ├── __snapshots__ │ │ │ └── tile.test.js.snap │ │ └── tile.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── tile.js │ │ ├── tile.story.js │ │ └── tile.story.mdx ├── constants.js ├── index.d.ts ├── index.js ├── introduction.story.mdx └── services │ └── normalizer.js ├── static └── img.png └── tsconfig.json /.coveralls.yml: -------------------------------------------------------------------------------- 1 | repo_token: BGvoD4hDgcfFV9DFbGzmWO3915iTYOEik -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/** 2 | **.min.js 3 | full/** 4 | lib/** 5 | node_modules 6 | reports 7 | *.test.js 8 | **/*.d.ts 9 | documentation/** 10 | .coverage -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "airbnb", 4 | "prettier" 5 | ], 6 | "parser": "babel-eslint", 7 | "parserOptions": { 8 | "ecmaFeatures": { 9 | "jsx": true 10 | } 11 | }, 12 | "globals": { 13 | "document": true, 14 | "window": true 15 | }, 16 | "env": { 17 | "jest": true 18 | }, 19 | "plugins": [ 20 | "jest", 21 | "prettier" 22 | ], 23 | "settings": { 24 | "react": { 25 | "pragma": "React", 26 | "version": "16.3" 27 | } 28 | }, 29 | "rules": { 30 | "prettier/prettier": "error", 31 | "arrow-body-style": [2, "always"], 32 | "no-console": 0, 33 | "no-param-reassign": 0, 34 | "react/jsx-filename-extension": 0, 35 | "import/no-extraneous-dependencies": 0, 36 | "global-require": 0, 37 | "jsx-a11y/media-has-caption": 0, 38 | "import/prefer-default-export": 0, 39 | "react/forbid-prop-types": 0, 40 | "max-len": 0, 41 | "jsx-a11y/accessible-emoji": 0, 42 | "jsx-a11y/href-no-hash": 0, 43 | "jest/no-disabled-tests": "warn", 44 | "jest/no-focused-tests": "error", 45 | "jest/no-identical-title": "error", 46 | "jest/valid-expect": "error", 47 | "no-underscore-dangle": 0, 48 | "react/jsx-one-expression-per-line": 0, 49 | "jsx-a11y/click-events-have-key-events": 0, 50 | "react/jsx-props-no-spreading": 0, 51 | "react/forbid-foreign-prop-types": 0, 52 | "jsx-a11y/anchor-is-valid": 0, 53 | "react/destructuring-assignment": 0, 54 | "jsx-a11y/label-has-associated-control": 0, 55 | "react/require-default-props": 0, 56 | "react/default-props-match-prop-types": 0, 57 | "react/prop-types": 0 58 | } 59 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Versions** 27 | - `react-bulma-components:`: 28 | - `bulma`: 29 | - `react`: 30 | - Browser: (e.g. Firefox version 67) 31 | 32 | **Additional context** 33 | Add any other context about the problem here. 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/help.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Help 3 | about: If you need any help using this library, use this template. 4 | title: "[HELP]" 5 | labels: question 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .history 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (http://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # JetBrains IDE config 42 | .idea/ 43 | 44 | # Typescript v1 declaration files 45 | typings/ 46 | 47 | # Optional npm cache directory 48 | .npm 49 | 50 | # Optional eslint cache 51 | .eslintcache 52 | 53 | # Optional REPL history 54 | .node_repl_history 55 | 56 | # Output of 'npm pack' 57 | *.tgz 58 | 59 | # Yarn Integrity file 60 | .yarn-integrity 61 | 62 | # dotenv environment variables file 63 | .env 64 | 65 | .DS_Store 66 | 67 | .out 68 | out* 69 | 70 | /reports 71 | /esm 72 | /cjs 73 | .coverage 74 | .vscode 75 | .cache -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .coverage 2 | .storybook 3 | docs 4 | node_modules 5 | .babelrc 6 | .eslint* 7 | .git* 8 | README.md 9 | webpack.config.js 10 | yarn* 11 | .npmignore 12 | reports 13 | **/__mocks__ 14 | .coveralls.yml 15 | .travis.yml 16 | .yarnclean 17 | jest.json 18 | **/__test__ -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v12.22.1 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "singleQuote": true 4 | } -------------------------------------------------------------------------------- /.storybook/common-props.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { ArgsTable } from '@storybook/addon-docs/blocks'; 3 | import { Block, Message, Button } from '../' 4 | import Element from '../src/components/element' 5 | 6 | const CommonProps = () => { 7 | const [show, setShow] = useState() 8 | return ( 9 | <> 10 | 11 | 12 | 13 | This component also has all the shared props from the Element component {' '} 14 | setShow(s => !s)}>{show ? 'Hide' : 'Show'} common props 15 | 16 | 17 | { 18 | show && 19 | } 20 | 21 | 22 | ) 23 | }; 24 | 25 | export default CommonProps -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { DefinePlugin } = require('webpack'); 3 | 4 | module.exports = { 5 | stories: ['../src/**/*.story.mdx'], 6 | addons: [ 7 | '@storybook/addon-essentials', 8 | { 9 | name: '@storybook/addon-storysource', 10 | options: { 11 | rule: { 12 | test: [/\.story\.js?$/], 13 | }, 14 | }, 15 | }, 16 | '@storybook/addon-knobs', 17 | '@storybook/addon-links', 18 | '@storybook/addon-events', 19 | '@storybook/addon-viewport', 20 | '@storybook/addon-postcss', 21 | 'storybook-addon-react-docgen', 22 | '@storybook/preset-scss', 23 | ], 24 | webpackFinal: (config) => { 25 | config.resolve.modules.push('node_modules', 'src'); 26 | config.resolve.alias['react-bulma-components'] = path.resolve( 27 | __dirname, 28 | '../src', 29 | ); 30 | return config; 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons'; 2 | import theme from './theme'; 3 | 4 | addons.setConfig({ 5 | theme, 6 | }); 7 | -------------------------------------------------------------------------------- /.storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { addDecorator } from '@storybook/react'; 2 | import { withPropsTable } from 'storybook-addon-react-docgen'; 3 | import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport'; 4 | 5 | import test from './rewrites.scss' 6 | import '@fortawesome/fontawesome-free/css/all.min.css'; 7 | 8 | console.log(test); 9 | 10 | addDecorator(withPropsTable); 11 | 12 | export const parameters = { 13 | layout: 'padded', 14 | viewMode: 'docs', 15 | viewport: { 16 | viewports: { 17 | ...MINIMAL_VIEWPORTS, 18 | "tablet": { 19 | "name": "Tablet", 20 | "styles": { 21 | "width": "1023px", 22 | "height": "963px" 23 | }, 24 | "type": "tablet" 25 | }, 26 | "desktop": { 27 | "name": "Desktop", 28 | "styles": { 29 | "width": "1215px", 30 | "height": "100%" 31 | }, 32 | "type": "desktop" 33 | }, 34 | "widescreen": { 35 | "name": "Widescreen", 36 | "styles": { 37 | "width": "1407px", 38 | "height": "100%" 39 | }, 40 | "type": "desktop" 41 | }, 42 | "fullhd": { 43 | "name": "Fullhd", 44 | "styles": { 45 | "width": "1920px", 46 | "height": "100%" 47 | }, 48 | "type": "desktop" 49 | }, 50 | } 51 | }, 52 | options: { 53 | storySort: { 54 | order: ['Welcome', 'Changelog', 'Core Component', 'Columns', 'Elements', 'Components', 'Form', 'Layout'], 55 | }, 56 | }, 57 | previewTabs: { 58 | 'storybook/docs/panel': { index: 0, default: true }, 59 | } 60 | }; 61 | -------------------------------------------------------------------------------- /.storybook/rewrites.scss: -------------------------------------------------------------------------------- 1 | 2 | pre code { 3 | color: currentColor; 4 | } 5 | 6 | pre code .tag.token { 7 | background-color: unset; 8 | border-radius: unset; 9 | display: unset; 10 | font-size: 1em; 11 | height: unset; 12 | padding-left: unset; 13 | padding-right: unset; 14 | white-space: unset; 15 | } 16 | pre code .number.token { 17 | margin-right: unset; 18 | } 19 | 20 | pre code .plain-text { 21 | color: #da1039; 22 | } 23 | 24 | pre code .number{ 25 | padding: unset; 26 | min-width: unset; 27 | font-size: unset; 28 | height: unset; 29 | } 30 | 31 | $custom-colors: ("brand": (#8A4D76, #FFF), "custom": (#f88fa1,#000)); 32 | 33 | @import "~bulma/bulma.sass"; -------------------------------------------------------------------------------- /.storybook/theme.js: -------------------------------------------------------------------------------- 1 | import { create } from '@storybook/theming/create'; 2 | 3 | export default create({ 4 | base: 'light', 5 | brandTitle: 'React Bulma Components', 6 | brandUrl: 'https://www.github.com/couds/react-bulma-components', 7 | 8 | colorPrimary: '#00D6B1', 9 | colorSecondary: '#00D6B1', 10 | }); 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | before_install: 5 | - npm i -g npm@6.14.12 6 | script: npm run test:cov 7 | after_success: 'npm run coveralls' -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 John 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. 22 | -------------------------------------------------------------------------------- /babel.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | // import statements must be compiled in test env 3 | // in other environments, modules must be set to false to enable tree shaking 4 | // more info: https://jestjs.io/docs/en/getting-started#using-babel 5 | 6 | let modules = api.env(['test']) ? 'commonjs' : (process.env.TARGET || 'esm'); 7 | 8 | return { 9 | plugins: ['babel-plugin-transform-react-remove-prop-types'], 10 | presets: [ 11 | [ 12 | '@babel/preset-env', 13 | { 14 | bugfixes: true, 15 | debug: process.env.RBC_BUILD_VERBOSE === 'true', 16 | modules: modules === 'esm' ? false : modules, 17 | }, 18 | ], 19 | ['@babel/preset-react'], 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /index.esm.mjs: -------------------------------------------------------------------------------- 1 | export * from './esm'; 2 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | setupFilesAfterEnv: ['./__test__/setup.js'], 3 | rootDir: 'src', 4 | testMatch: ['**/*.test.js'], 5 | coverageDirectory: '/../.coverage', 6 | collectCoverageFrom: [ 7 | '**/*.js', 8 | '!**/node_modules/**', 9 | '!**/*.story.js', 10 | '!**/*.test.js', 11 | ], 12 | coverageReporters: ['lcov', 'text', 'text-summary'], 13 | moduleDirectories: ['node_modules', ''], 14 | coverageThreshold: { 15 | global: { 16 | branches: 80, 17 | functions: 80, 18 | lines: 80, 19 | statements: 80, 20 | }, 21 | }, 22 | moduleNameMapper: { 23 | '\\.(css|less|s(c|a)ss)$': '/../__mocks__/style.js', 24 | 'services(.*)$': '/services$1', 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/__test__/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`ReactBulmaComponents component Should Exports all components 1`] = ` 4 | Object { 5 | "Block": [Function], 6 | "Box": [Function], 7 | "Breadcrumb": [Function], 8 | "Button": [Function], 9 | "Card": [Function], 10 | "Columns": [Function], 11 | "Container": [Function], 12 | "Content": [Function], 13 | "Dropdown": [Function], 14 | "Element": [Function], 15 | "Footer": [Function], 16 | "Form": Object { 17 | "Checkbox": [Function], 18 | "Control": [Function], 19 | "Field": [Function], 20 | "Help": [Function], 21 | "Input": [Function], 22 | "InputFile": [Function], 23 | "Label": [Function], 24 | "Radio": [Function], 25 | "Select": [Function], 26 | "Textarea": [Function], 27 | }, 28 | "Heading": [Function], 29 | "Hero": [Function], 30 | "Icon": [Function], 31 | "Image": [Function], 32 | "Level": [Function], 33 | "Loader": [Function], 34 | "Media": [Function], 35 | "Menu": [Function], 36 | "Message": [Function], 37 | "Modal": [Function], 38 | "Navbar": [Function], 39 | "Notification": [Function], 40 | "Pagination": [Function], 41 | "Panel": [Function], 42 | "Progress": [Function], 43 | "Section": [Function], 44 | "Table": [Function], 45 | "Tabs": [Function], 46 | "Tag": [Function], 47 | "Tile": [Function], 48 | } 49 | `; 50 | -------------------------------------------------------------------------------- /src/__test__/index.test.js: -------------------------------------------------------------------------------- 1 | import * as ReactBulmaComponents from '..'; 2 | 3 | describe('ReactBulmaComponents component', () => { 4 | it('Should Exports all components', () => { 5 | expect(ReactBulmaComponents).toMatchSnapshot(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/__test__/setup.js: -------------------------------------------------------------------------------- 1 | require('raf/polyfill'); 2 | const Adapter = require('@wojtekmaj/enzyme-adapter-react-17'); 3 | const enzyme = require('enzyme'); 4 | 5 | enzyme.configure({ adapter: new Adapter() }); 6 | -------------------------------------------------------------------------------- /src/changelog.story.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Description } from '@storybook/addon-docs/blocks'; 2 | import ChangeLog from '../CHANGELOG.md'; 3 | 4 | 5 | 6 | 7 | {ChangeLog} 8 | 9 | -------------------------------------------------------------------------------- /src/components/block/__test__/__snapshots__/block.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Box component Should concat Bulma class with classes in props 1`] = ` 4 |
7 | Facebook 8 |
9 | `; 10 | 11 | exports[`Box component Should have box classname 1`] = ` 12 |
15 | Facebook 16 |
17 | `; 18 | -------------------------------------------------------------------------------- /src/components/block/__test__/block.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import Block from '..'; 4 | 5 | describe('Box component', () => { 6 | it('Should Exist', () => { 7 | expect(Block).toBeDefined(); 8 | }); 9 | it('Should have box classname', () => { 10 | const component = renderer.create(Facebook); 11 | expect(component.toJSON()).toMatchSnapshot(); 12 | }); 13 | it('Should concat Bulma class with classes in props', () => { 14 | const component = renderer.create( 15 | Facebook, 16 | ); 17 | expect(component.toJSON()).toMatchSnapshot(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/components/block/block.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import Element from '../element'; 4 | 5 | const Block = ({ className, ...props }) => { 6 | return ; 7 | }; 8 | 9 | Block.propTypes = {}; 10 | 11 | Block.defaultProps = {}; 12 | 13 | export default Block; 14 | -------------------------------------------------------------------------------- /src/components/block/block.story.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import React from 'react'; 3 | 4 | import { Box, Block, Notification } from '../..'; 5 | 6 | export const Blocks = ({ withoutBlock }) => { 7 | return ( 8 | 9 | {withoutBlock ? ( 10 | <> 11 |
12 | Some text 13 |
14 |
15 | Some more text 16 |
17 |
18 | 19 | All of this are evently spaced 20 | 21 |
22 |
23 | 24 | This one does not generate extra margin at the bottom 25 | 26 |
27 | 28 | ) : ( 29 | <> 30 | 31 | Some text 32 | 33 | 34 | Some more text 35 | 36 | 37 | 38 | All of this are evently spaced 39 | 40 | 41 | 42 | 43 | This one does not generate extra margin at the bottom 44 | 45 | 46 | 47 | )} 48 | 49 | ); 50 | }; 51 | 52 | Blocks.args = { 53 | withoutBlock: false, 54 | }; 55 | -------------------------------------------------------------------------------- /src/components/block/block.story.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; 2 | import * as stories from './block.story'; 3 | import { Block } from '../..' 4 | import CommonProps from '../../../.storybook/common-props'; 5 | 6 | 7 | 8 | # Block 9 | 10 | The block element its the simplest of the components on Bulma, his only function its to add margin between the elements 11 | 12 | 13 | 14 | 15 | 16 | ## Example 17 | 18 | 19 | 20 | 21 | 22 | 23 | ## Related 24 | 25 | - [Official documentation](https://bulma.io/documentation/elements/block) 26 | -------------------------------------------------------------------------------- /src/components/block/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | 3 | interface ContentProps { 4 | } 5 | 6 | declare const Block: BulmaComponent; 7 | 8 | export default Block; 9 | -------------------------------------------------------------------------------- /src/components/block/index.js: -------------------------------------------------------------------------------- 1 | import Block from './block'; 2 | 3 | export default Block; 4 | -------------------------------------------------------------------------------- /src/components/box/__test__/__snapshots__/box.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Box component Should Exist 1`] = `[Function]`; 4 | 5 | exports[`Box component Should accept a react Element as renderAs prop 1`] = ` 6 |

9 | Custom 10 | This should be a p element 11 |

12 | `; 13 | 14 | exports[`Box component Should concat Bulma class with classes in props 1`] = ` 15 |
18 | Facebook 19 |
20 | `; 21 | 22 | exports[`Box component Should have box classname 1`] = ` 23 |
26 | Facebook 27 |
28 | `; 29 | 30 | exports[`Box component Should have custom inline styles 1`] = ` 31 |
40 | This should be a section with custom styles 41 |
42 | `; 43 | 44 | exports[`Box component Should render as an html section 1`] = ` 45 |
48 | This should be a section 49 |
50 | `; 51 | -------------------------------------------------------------------------------- /src/components/box/box.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import Element from '../element'; 4 | 5 | const Box = ({ children, className, ...props }) => { 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | }; 12 | 13 | Box.propTypes = {}; 14 | 15 | Box.defaultProps = {}; 16 | 17 | export default Box; 18 | -------------------------------------------------------------------------------- /src/components/box/box.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Box, Form, Button } from '../..'; 4 | 5 | export const Default = () => { 6 | return ( 7 | 8 |
9 | 10 | Email 11 | 12 | 16 | 17 | 18 | 19 | Password 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/box/box.story.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; 2 | import * as stories from './box.story'; 3 | import { Box } from '../..' 4 | import CommonProps from '../../../.storybook/common-props'; 5 | 6 | 7 | 8 | # Box 9 | 10 | A white box element to contain other elements 11 | 12 | 13 | 14 | 15 | 16 | ## Example 17 | 18 | 19 | 20 | 21 | ## Related 22 | 23 | - [Official documentation](https://bulma.io/documentation/elements/box) 24 | -------------------------------------------------------------------------------- /src/components/box/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | 3 | declare const Box: BulmaComponent<{}, 'div'>; 4 | 5 | export default Box; -------------------------------------------------------------------------------- /src/components/box/index.js: -------------------------------------------------------------------------------- 1 | import Box from './box'; 2 | 3 | export default Box; 4 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames'; 4 | import Element from '../element'; 5 | import BreadcrumbItem from './components/item'; 6 | 7 | const Breadcrumb = ({ 8 | className, 9 | separator, 10 | size, 11 | align, 12 | children, 13 | ...props 14 | }) => { 15 | return ( 16 | 24 |
    {children}
25 | 26 | ); 27 | }; 28 | 29 | Breadcrumb.Item = BreadcrumbItem; 30 | 31 | Breadcrumb.propTypes = { 32 | separator: PropTypes.oneOf(['arrow', 'bullet', 'dot', 'succeeds']), 33 | size: PropTypes.oneOfType([ 34 | PropTypes.oneOf(['small', 'medium', 'large']), 35 | PropTypes.string, 36 | ]), 37 | align: PropTypes.oneOf(['right', 'center']), 38 | renderAs: PropTypes.oneOfType([ 39 | PropTypes.func, 40 | PropTypes.string, 41 | PropTypes.object, 42 | ]), 43 | }; 44 | 45 | Breadcrumb.defaultProps = { 46 | separator: undefined, 47 | renderAs: 'nav', 48 | size: undefined, 49 | align: undefined, 50 | }; 51 | 52 | export default Breadcrumb; 53 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Box, Breadcrumb } from '../..'; 4 | 5 | export const Default = (args) => { 6 | return ( 7 |
8 | 9 | 10 | 11 | Storybook 12 | 13 | 14 | Breadcrumb 15 | 16 | 17 | Details 18 | 19 | 20 | 21 |
22 | ); 23 | }; 24 | 25 | Default.argTypes = { 26 | separator: { 27 | control: { 28 | type: 'select', 29 | options: ['arrow', 'dot', 'bullet', 'succeeds'], 30 | }, 31 | }, 32 | align: { 33 | control: { 34 | type: 'select', 35 | options: ['center', 'right'], 36 | }, 37 | }, 38 | size: { 39 | control: { 40 | type: 'select', 41 | options: ['default', 'small', 'medium', 'large'], 42 | }, 43 | }, 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.story.mdx: -------------------------------------------------------------------------------- 1 | import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks'; 2 | import * as stories from './breadcrumb.story'; 3 | import Breadcrumb from './breadcrumb'; 4 | import CommonProps from '../../../.storybook/common-props'; 5 | 6 | 7 | 8 | # Breadcrumb 9 | 10 | A simple navigation component with a customizable separator. Suitable for hierarchical navigations. 11 | 12 | You can inform the current page using the active props in `Breadcrumb.Item` component. It will disable the navigation of inner links. 13 | 14 | ## Props 15 | 16 | ### Breadcrumb 17 | 18 | 19 | 20 | ### Breadcrumb.Item 21 | 22 | 23 | 24 | 25 | 26 | ## Example 27 | 28 | 29 | 30 | 31 | 32 | ## Related 33 | 34 | - [Official documentation](https://bulma.io/documentation/components/breadcrumb) 35 | -------------------------------------------------------------------------------- /src/components/breadcrumb/components/item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | import Element from '../../element'; 6 | 7 | const BreadcrumbItem = ({ className, active, children, ...props }) => { 8 | return ( 9 | 15 | {children} 16 | 17 | ); 18 | }; 19 | 20 | BreadcrumbItem.propTypes = { 21 | active: PropTypes.bool, 22 | renderAs: PropTypes.oneOfType([ 23 | PropTypes.func, 24 | PropTypes.string, 25 | PropTypes.object, 26 | ]), 27 | }; 28 | 29 | BreadcrumbItem.defaultProps = { 30 | renderAs: 'li', 31 | }; 32 | 33 | export default BreadcrumbItem; 34 | -------------------------------------------------------------------------------- /src/components/breadcrumb/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | import { Size } from '..'; 3 | 4 | interface BreadcrumbProps { 5 | separator?: 'arrow' | 'bullet' | 'dot' | 'succeeds'; 6 | size?: Size; 7 | align?: 'right' | 'center'; 8 | } 9 | 10 | interface BreadcrumbItemProps { 11 | active?: boolean; 12 | } 13 | 14 | declare const Breadcrumb: BulmaComponent & { 15 | Item: BulmaComponent; 16 | }; 17 | 18 | export default Breadcrumb; 19 | -------------------------------------------------------------------------------- /src/components/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './breadcrumb'; 2 | 3 | export default Breadcrumb; 4 | -------------------------------------------------------------------------------- /src/components/button/button.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import Button from '.'; 3 | import * as stories from './button.story'; 4 | import CommonProps from '../../../.storybook/common-props'; 5 | 6 | 7 | 8 | # Button 9 | 10 | A basic UI component that allows users to perform action. 11 | 12 | ## Props 13 | 14 | Props that Button accepts, on top of modifier props. Go to canvas to play with the props. 15 | 16 | 17 | 18 | ## Button group 19 | 20 | Multiple buttons can be grouped together to form a group, using the ` 23 | 24 | 25 | 26 | ## Example 27 | 28 | 29 | 30 | 31 | 32 | ## Related 33 | 34 | - [Official documentation](https://bulma.io/documentation/elements/button) -------------------------------------------------------------------------------- /src/components/button/components/button-group.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames'; 4 | import Element from '../../element'; 5 | import { normalizeAlign } from '../../../services/normalizer'; 6 | 7 | const ButtonGroup = ({ className, hasAddons, align, size, ...props }) => { 8 | return ( 9 | 17 | ); 18 | }; 19 | 20 | ButtonGroup.propTypes = { 21 | hasAddons: PropTypes.bool, 22 | /** 23 | * The size of *all* the buttons in the group. 24 | */ 25 | size: PropTypes.oneOf(['small', 'medium', 'large']), 26 | /** 27 | * Align of the group. By default, it is left-aligned. 28 | */ 29 | align: PropTypes.oneOf(['center', 'right']), 30 | renderAs: PropTypes.oneOfType([ 31 | PropTypes.func, 32 | PropTypes.string, 33 | PropTypes.object, 34 | ]), 35 | }; 36 | 37 | ButtonGroup.defaultProps = { 38 | renderAs: 'div', 39 | }; 40 | 41 | export default ButtonGroup; 42 | -------------------------------------------------------------------------------- /src/components/button/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | import { Color, Size } from '..'; 3 | 4 | interface ButtonProps { 5 | color?: Color 6 | | 'ghost' 7 | | 'black-bis' 8 | | 'black-ter' 9 | | 'white-bis' 10 | | 'white-ter' 11 | | 'grey-darker' 12 | | 'grey-dark' 13 | | 'grey-light' 14 | | 'grey-lighter'; 15 | size?: Size; 16 | state?: 'hover' | 'focus' | 'active'; 17 | outlined?: boolean; 18 | inverted?: boolean; 19 | submit?: boolean; 20 | reset?: boolean; 21 | loading?: boolean; 22 | fullwidth?: boolean; 23 | disabled?: boolean; 24 | remove?: boolean; 25 | isSelected?: boolean; 26 | isStatic?: boolean; 27 | rounded?: boolean; 28 | text?: boolean; 29 | } 30 | 31 | interface ButtonGroupProps { 32 | size?: Size; 33 | hasAddons?: boolean; 34 | align?: 'center' | 'right'; 35 | } 36 | 37 | declare const Button: BulmaComponent & { 38 | Group: BulmaComponent; 39 | }; 40 | 41 | export default Button -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './button'; 2 | 3 | export default Button; 4 | -------------------------------------------------------------------------------- /src/components/card/__test__/__snapshots__/card.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Card component Should have card classname 1`] = ` 4 |
7 | Card Content 8 |
9 | `; 10 | 11 | exports[`Card component Should have card-content classname 1`] = ` 12 |
15 | Content 16 |
17 | `; 18 | 19 | exports[`Card component Should have card-footer's classname 1`] = ` 20 |
23 |
26 |
29 | Yes 30 |
31 |
34 | No 35 |
36 |
37 |
38 | `; 39 | 40 | exports[`Card component Should have card-header's classname 1`] = ` 41 |
44 |
47 |
50 | Title 51 |
52 |
55 | 58 |
59 |
60 |
61 | `; 62 | 63 | exports[`Card component Should have card-image classname 1`] = ` 64 |
67 |
70 | 75 |
76 |
77 | `; 78 | -------------------------------------------------------------------------------- /src/components/card/__test__/card.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import Card from '..'; 4 | 5 | describe('Card component', () => { 6 | it('Should have card classname', () => { 7 | const component = renderer.create(Card Content); 8 | expect(component.toJSON()).toMatchSnapshot(); 9 | }); 10 | it('Should have card-image classname', () => { 11 | const component = renderer.create( 12 | , 16 | ); 17 | expect(component.toJSON()).toMatchSnapshot(); 18 | }); 19 | it('Should have card-content classname', () => { 20 | const component = renderer.create(Content); 21 | expect(component.toJSON()).toMatchSnapshot(); 22 | }); 23 | it("Should have card-header's classname", () => { 24 | const component = renderer.create( 25 | 26 | 27 | Title 28 | 29 | 30 | 31 | 32 | , 33 | ); 34 | expect(component.toJSON()).toMatchSnapshot(); 35 | }); 36 | it("Should have card-footer's classname", () => { 37 | const component = renderer.create( 38 | 39 | 40 | Yes 41 | No 42 | 43 | , 44 | ); 45 | expect(component.toJSON()).toMatchSnapshot(); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /src/components/card/card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | import CardImage from './components/image'; 5 | import CardContent from './components/content'; 6 | import CardHeader from './components/header'; 7 | import CardFooter from './components/footer'; 8 | 9 | import Element from '../element'; 10 | 11 | const Card = ({ className, children, ...props }) => { 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | }; 18 | 19 | Card.Image = CardImage; 20 | 21 | Card.Content = CardContent; 22 | 23 | Card.Header = CardHeader; 24 | 25 | Card.Footer = CardFooter; 26 | 27 | Card.propTypes = {}; 28 | 29 | Card.defaultProps = {}; 30 | 31 | export default Card; 32 | -------------------------------------------------------------------------------- /src/components/card/components/content.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | import Element from '../../element'; 5 | 6 | const CardContent = ({ className, ...props }) => { 7 | return ( 8 | 9 | ); 10 | }; 11 | 12 | CardContent.propTypes = {}; 13 | 14 | CardContent.defaultProps = {}; 15 | 16 | export default CardContent; 17 | -------------------------------------------------------------------------------- /src/components/card/components/footer/components/footer-item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import Element from '../../../../element'; 4 | 5 | const CardFooterItem = ({ className, ...props }) => { 6 | return ( 7 | 8 | ); 9 | }; 10 | 11 | CardFooterItem.propTypes = {}; 12 | 13 | CardFooterItem.defaultProps = {}; 14 | 15 | export default CardFooterItem; 16 | -------------------------------------------------------------------------------- /src/components/card/components/footer/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import CardFooterItem from './components/footer-item'; 4 | 5 | import Element from '../../../element'; 6 | 7 | const CardFooter = ({ className, ...props }) => { 8 | return ( 9 | 10 | ); 11 | }; 12 | 13 | CardFooter.Item = CardFooterItem; 14 | 15 | CardFooter.propTypes = {}; 16 | 17 | CardFooter.defaultProps = {}; 18 | 19 | export default CardFooter; 20 | -------------------------------------------------------------------------------- /src/components/card/components/footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './footer'; 2 | -------------------------------------------------------------------------------- /src/components/card/components/header/components/header-icon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | import Element from '../../../../element'; 5 | 6 | const CardHeaderIcon = ({ className, ...props }) => { 7 | return ( 8 | 9 | ); 10 | }; 11 | 12 | CardHeaderIcon.propTypes = {}; 13 | 14 | CardHeaderIcon.defaultProps = {}; 15 | 16 | export default CardHeaderIcon; 17 | -------------------------------------------------------------------------------- /src/components/card/components/header/components/header-title.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | 4 | import Element from '../../../../element'; 5 | 6 | const CardHeaderTitle = ({ className, ...props }) => { 7 | return ( 8 | 12 | ); 13 | }; 14 | 15 | CardHeaderTitle.propTypes = {}; 16 | 17 | CardHeaderTitle.defaultProps = {}; 18 | 19 | export default CardHeaderTitle; 20 | -------------------------------------------------------------------------------- /src/components/card/components/header/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import CardHeaderTitle from './components/header-title'; 4 | import CardHeaderIcon from './components/header-icon'; 5 | 6 | import Element from '../../../element'; 7 | 8 | const CardHeader = ({ className, ...props }) => { 9 | return ( 10 | 11 | ); 12 | }; 13 | 14 | CardHeader.Title = CardHeaderTitle; 15 | 16 | CardHeader.Icon = CardHeaderIcon; 17 | 18 | CardHeader.propTypes = {}; 19 | 20 | CardHeader.defaultProps = {}; 21 | 22 | export default CardHeader; 23 | -------------------------------------------------------------------------------- /src/components/card/components/header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './header'; 2 | -------------------------------------------------------------------------------- /src/components/card/components/image.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classnames from 'classnames'; 3 | import Image from '../../image'; 4 | 5 | import Element from '../../element'; 6 | 7 | const CardImage = ({ className, domRef, ...props }) => { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | CardImage.propTypes = {}; 16 | 17 | CardImage.defaultProps = {}; 18 | 19 | export default CardImage; 20 | -------------------------------------------------------------------------------- /src/components/card/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | import ImageProps from '../image'; 3 | 4 | declare const Card: BulmaComponent<{}, 'div'> & { 5 | Image: BulmaComponent; 6 | Content: BulmaComponent<{}, 'div'>; 7 | Header: BulmaComponent<{}, 'div'> & { 8 | Title: BulmaComponent<{}, 'div'>; 9 | Icon: BulmaComponent<{}, 'div'>; 10 | }; 11 | Footer: BulmaComponent<{}, 'div'> & { 12 | Item: BulmaComponent<{}, 'div'>; 13 | }; 14 | }; 15 | 16 | export default Card 17 | -------------------------------------------------------------------------------- /src/components/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './card'; 2 | 3 | export default Card; 4 | -------------------------------------------------------------------------------- /src/components/columns/constants.js: -------------------------------------------------------------------------------- 1 | export default { 2 | SIZES: { 3 | THREEQUARTERS: 'three-quarters', 4 | TWOTHIRDS: 'two-thirds', 5 | HALF: 'half', 6 | ONETHIRD: 'one-third', 7 | ONEQUARTER: 'one-quarter', 8 | ONEFIFTH: 'one-fifth', 9 | TWOFIFTHS: 'two-fifths', 10 | THREEFIFTHS: 'three-fifths', 11 | FOURFIFTHS: 'four-fifths', 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/components/columns/index.js: -------------------------------------------------------------------------------- 1 | import Columns from './columns'; 2 | 3 | export default Columns; 4 | -------------------------------------------------------------------------------- /src/components/columns/stories/columns-1-basics.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import { Columns, Message, Notification } from '../../..'; 3 | import CommonProps from '../../../../.storybook/common-props'; 4 | import * as stories from './columns.story'; 5 | 6 | 7 | 8 | # Columns using Flexbox 9 | 10 | You can build columns very easily: 11 | 12 | 1. Add a `` component 13 | 2. Put as many `` as you want inside it. 14 | 15 | Each column will have an equal width, no matter the number of columns. 16 | 17 | ## Basic 18 | 19 | 20 | 21 | 22 | 23 | ## Props 24 | 25 |
26 | 27 | ### `Columns` 28 | 29 | 30 | 31 | ### `Columns.Column` 32 | 33 | 34 | 35 | 36 | 37 | ## Related 38 | 39 | - [Official documentation](https://bulma.io/documentation/columns/basics/) -------------------------------------------------------------------------------- /src/components/columns/stories/columns-3-responsiveness.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import { Columns, Message, Notification } from '../../..'; 3 | import * as stories from './columns.story'; 4 | 5 | 6 | 7 | # Responsiveness 8 | 9 | You can handle different column size/offseet for each breakpoint independently. 10 | 11 | ## Mobile Columns 12 | 13 | You can use the `breakpoint` prop on the `Column` component to specify at what viewport size `Columns` 14 | should be "activated", meaning it will display `Columns.Column` in a row. Any viewport smaller 15 | than the specified viewport size will cause `Columns` to display `Columns.Column` 16 | in a row. 17 | 18 | By default, the value is `'tablet'`. Any viewport smaller than `'tablet'` will cause `Columns` to stack 19 | `Columns.Column` on top of each other. 20 | 21 | ## Different column sizes/offsets/narrowness per breakpoint 22 | 23 | You can define this values for each viewport size passing a configuration object on a prop named as the 24 | viewport you are targeting mobile, tablet, desktop, widescreen and fullhd). The configuration object looks like this 25 | 26 | Note that you can also use the common responsive props here (like `textAlign`, `textSize`) 27 | 28 | ```javascript 29 | { 30 | size: "ANY VALID SIZE", 31 | offset: "ANY VALID SIZE", 32 | narrow: Boolean 33 | } 34 | ``` 35 | 36 | 37 | 38 | 39 | ## Related 40 | 41 | - [Official documentation](https://bulma.io/documentation/columns/responsiveness/) -------------------------------------------------------------------------------- /src/components/columns/stories/columns-4-nesting.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import { Columns, Message, Notification } from '../../..'; 3 | import * as stories from './columns.story'; 4 | 5 | 6 | 7 | # Nesting 8 | 9 | You can nest `Columns` inside any `Columns.Column` indefinitely to create more complex layout 10 | 11 | The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. 12 | 13 | In this example, the numbers represent the nesting level the `Columns.Column` is in. 14 | 15 | 16 | 17 | ## Related 18 | 19 | - [Official documentation](https://bulma.io/documentation/columns/nesting/) -------------------------------------------------------------------------------- /src/components/columns/stories/columns-5-gap.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import { Columns, Message, Notification } from '../../..'; 3 | import * as stories from './columns.story'; 4 | 5 | 6 | 7 | # Colums gap 8 | 9 | You can customize the gaps between columns 10 | 11 | You can configure the gap between columns for all breakpoints with the `gap` prop, or specify per breakpoint using the responsive gap for each breakpoint (`mobile.gap`, `desktop.gap`, ...) 12 | 13 | ## Example 14 | 15 | 16 | 17 | 18 | 19 | ## Related 20 | 21 | - [Official documentation](https://bulma.io/documentation/columns/gap/) -------------------------------------------------------------------------------- /src/components/columns/stories/columns-6-Options.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import { Columns, Message, Notification } from '../../..'; 3 | import * as stories from './columns.story'; 4 | 5 | 6 | 7 | #Options 8 | 9 | Here you will find some other options that will help you to customize the behaviour of the columns 10 | 11 | ## Columns Alignment 12 | 13 | You can center columns vertically, to do it add the vCentered prop to the `Column` component. Also you can center horizontaly adding the centered prop 14 | 15 | ## Multiline 16 | 17 | By default, the columns will break into a new line when do not have enough space, you can disable this with `multiline={false}` 18 | 19 | 20 | 21 | 22 | 23 | 24 | ## Related 25 | 26 | - [Official documentation](https://bulma.io/documentation/columns/options/) -------------------------------------------------------------------------------- /src/components/container/__test__/__snapshots__/container.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Container component Should have container classname 1`] = ` 4 |
7 |

10 |

11 | Default 12 |

13 |

14 | Container 15 |

16 |

17 |
18 | `; 19 | 20 | exports[`Container component Should ignore max prop on non desktop and non widescreen breakpoint 1`] = ` 21 |
24 |

27 |

28 | Default 29 |

30 |

31 | Container 32 |

33 |

34 |
35 | `; 36 | 37 | exports[`Container component Should use max prop on desktop breakpoint 1`] = ` 38 |
41 |

44 |

45 | Default 46 |

47 |

48 | Container 49 |

50 |

51 |
52 | `; 53 | -------------------------------------------------------------------------------- /src/components/container/__test__/container.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import Container from '..'; 4 | 5 | describe('Container component', () => { 6 | it('Should have container classname', () => { 7 | const component = renderer.create( 8 | 9 |

10 |

Default

11 |

Container

12 |

13 | , 14 | ); 15 | expect(component.toJSON()).toMatchSnapshot(); 16 | }); 17 | it('Should use max prop on desktop breakpoint', () => { 18 | const component = renderer.create( 19 | 20 |

21 |

Default

22 |

Container

23 |

24 | , 25 | ); 26 | expect(component.toJSON()).toMatchSnapshot(); 27 | }); 28 | it('Should ignore max prop on non desktop and non widescreen breakpoint', () => { 29 | const component = renderer.create( 30 | 31 |

32 |

Default

33 |

Container

34 |

35 | , 36 | ); 37 | expect(component.toJSON()).toMatchSnapshot(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /src/components/container/container.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames'; 4 | 5 | import Element from '../element'; 6 | 7 | const Container = ({ children, max, breakpoint, className, ...props }) => { 8 | const canSetMax = ['desktop', 'widescreen'].includes(breakpoint); 9 | return ( 10 | 16 | {children} 17 | 18 | ); 19 | }; 20 | 21 | Container.propTypes = { 22 | /** 23 | * Specifies the breakpoint at which the container will stop being fullwidth. 24 | */ 25 | breakpoint: PropTypes.oneOf([ 26 | 'mobile', 27 | 'tablet', 28 | 'desktop', 29 | 'widescreen', 30 | 'fullhd', 31 | 'fluid', 32 | ]), 33 | /** 34 | * Only work for `desktop` and `widescreen` breakpoints, Check the [bulma documentation](https://bulma.io/documentation/layout/container/#overview) 35 | */ 36 | max: PropTypes.bool, 37 | }; 38 | 39 | Container.defaultProps = {}; 40 | 41 | export default Container; 42 | -------------------------------------------------------------------------------- /src/components/container/container.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Container, Notification } from '../..'; 4 | 5 | export const ContainerExample = (args) => { 6 | return ( 7 |
8 | 9 | 10 | This container will strech depending of the breakpoint you choose 11 | 12 | 13 |
14 | ); 15 | }; 16 | 17 | ContainerExample.argTypes = { 18 | breakpoint: { 19 | control: { 20 | type: 'select', 21 | options: ['mobile', 'tablet', 'desktop', 'widescreen', 'fullhd', 'fluid'], 22 | }, 23 | }, 24 | max: { 25 | control: { 26 | type: 'boolean', 27 | }, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/container/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | import { Breakpoint } from '..'; 3 | 4 | interface ContainerProps { 5 | max?: boolean; 6 | breakpoint?: Breakpoint | 'fluid'; 7 | } 8 | 9 | declare const Container: BulmaComponent; 10 | 11 | export default Container; -------------------------------------------------------------------------------- /src/components/container/index.js: -------------------------------------------------------------------------------- 1 | import Container from './container'; 2 | 3 | export default Container; 4 | -------------------------------------------------------------------------------- /src/components/content/__test__/__snapshots__/content.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Content component Should have content classname 1`] = ` 4 |
7 |

10 |

11 | Default 12 |

13 |

14 | Container 15 |

16 |

17 |
18 | `; 19 | -------------------------------------------------------------------------------- /src/components/content/__test__/content.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import Content from '..'; 4 | 5 | describe('Content component', () => { 6 | it('Should have content classname', () => { 7 | const component = renderer.create( 8 | 9 |

10 |

Default

11 |

Container

12 |

13 | , 14 | ); 15 | expect(component.toJSON()).toMatchSnapshot(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/content/content.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames'; 4 | 5 | import Element from '../element'; 6 | 7 | const Content = ({ children, className, size, ...props }) => { 8 | return ( 9 | 15 | {children} 16 | 17 | ); 18 | }; 19 | 20 | Content.propTypes = { 21 | size: PropTypes.oneOfType([ 22 | PropTypes.oneOf(['small', 'medium', 'large']), 23 | PropTypes.string, 24 | ]), 25 | }; 26 | 27 | Content.defaultProps = {}; 28 | 29 | export default Content; 30 | -------------------------------------------------------------------------------- /src/components/content/content.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import { Content } from '../..'; 3 | import * as stories from './content.story'; 4 | import CommonProps from '../../../.storybook/common-props'; 5 | 6 | 7 | 8 | # Content 9 | 10 | This component handles WYSIWYG/plain HTML content. 11 | The example below demonstrates the formatting of different HTML elements. 12 | 13 | 14 | ## Props 15 | 16 | 17 | 18 | 19 | 20 | ## Size 21 | 22 | You can adjust the size of the content with the `size` prop. 23 | There are three sizes available: 24 | 25 | - `'small'` 26 | - `'medium'` 27 | - `'large'` 28 | 29 | ## List styles 30 | 31 | Although this library does not provide components that let you change item markers of `
    ` inside ``, 32 | you can still use the following Bulma classes via the `className` prop to do just that: 33 | 34 | - `is-lower-alpha` 35 | - `is-lower-roman` 36 | - `is-upper-alpha` 37 | - `is-upper-roman` 38 | 39 | Alternatively, you can use the HTML `type` attribute of `
      ` to achieve the same effect. 40 | 41 | ## Example 42 | 43 | 44 | 45 | 46 | 47 | ## Related 48 | 49 | - [Official documentation](https://bulma.io/documentation/elements/content/) 50 | -------------------------------------------------------------------------------- /src/components/content/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | import { Size } from '..'; 3 | 4 | interface ContentProps { 5 | size?: Size; 6 | } 7 | 8 | declare const Content: BulmaComponent; 9 | 10 | export default Content; -------------------------------------------------------------------------------- /src/components/content/index.js: -------------------------------------------------------------------------------- 1 | import Content from './content'; 2 | 3 | export default Content; 4 | -------------------------------------------------------------------------------- /src/components/delete/delete.story.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'; 2 | import { Button } from '../..'; 3 | 4 | 5 | 6 | # Delete 7 | 8 | A versatile delete cross, This is included inside the `Button` component passing the `remove` prop 9 | 10 | ## Example 11 | 12 | 13 | 14 | 30 | 31 | My Notification 32 | 33 | ``` 34 | 35 | 36 | 37 | 38 | 39 | 40 | My Secondary Notification 41 | -------------------------------------------------------------------------------- /src/components/footer/__test__/__snapshots__/footer.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Footer component Should have footer classname 1`] = ` 4 |
      7 |

      10 |

      11 | Default 12 |

      13 |

      14 | Container 15 |

      16 |

      17 |
      18 | `; 19 | -------------------------------------------------------------------------------- /src/components/footer/__test__/footer.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import Footer from '..'; 4 | 5 | describe('Footer component', () => { 6 | it('Should have footer classname', () => { 7 | const component = renderer.create( 8 |
      9 |

      10 |

      Default

      11 |

      Container

      12 |

      13 |
      , 14 | ); 15 | expect(component.toJSON()).toMatchSnapshot(); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/footer/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classnames from 'classnames'; 4 | 5 | import Element from '../element'; 6 | 7 | const Footer = ({ className, ...props }) => { 8 | return ; 9 | }; 10 | 11 | Footer.propTypes = { 12 | renderAs: PropTypes.oneOfType([ 13 | PropTypes.func, 14 | PropTypes.string, 15 | PropTypes.object, 16 | ]), 17 | }; 18 | 19 | Footer.defaultProps = { 20 | renderAs: 'footer', 21 | }; 22 | 23 | export default Footer; 24 | -------------------------------------------------------------------------------- /src/components/footer/footer.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Footer, Container, Content, Hero } from '../..'; 4 | 5 | export const Default = () => { 6 | return ( 7 |
      8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 |
      35 | ); 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/footer/footer.story.mdx: -------------------------------------------------------------------------------- 1 | import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'; 2 | import Footer from '.'; 3 | import CommonProps from '../../../.storybook/common-props'; 4 | import * as stories from './footer.story'; 5 | 6 | 7 | 8 | # Footer 9 | 10 | A responsive footer that can contain other components. 11 | 12 | ## Props 13 | 14 | 15 | 16 | 17 | 18 | ## Example 19 | 20 | 21 | 22 | 23 | 24 | ## Related 25 | 26 | - [Official documentation](https://bulma.io/documentation/layout/footer/) -------------------------------------------------------------------------------- /src/components/footer/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BulmaComponent } from '..'; 2 | 3 | declare const Footer: BulmaComponent<{}, 'div'>; 4 | 5 | export default Footer; 6 | -------------------------------------------------------------------------------- /src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | import Footer from './footer'; 2 | 3 | export default Footer; 4 | -------------------------------------------------------------------------------- /src/components/form/__test__/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Form component Should expose all Form elements 1`] = ` 4 | Object { 5 | "Checkbox": [Function], 6 | "Control": [Function], 7 | "Field": [Function], 8 | "Help": [Function], 9 | "Input": [Function], 10 | "InputFile": [Function], 11 | "Label": [Function], 12 | "Radio": [Function], 13 | "Select": [Function], 14 | "Textarea": [Function], 15 | } 16 | `; 17 | -------------------------------------------------------------------------------- /src/components/form/__test__/index.test.js: -------------------------------------------------------------------------------- 1 | import * as Form from '..'; 2 | 3 | describe('Form component', () => { 4 | it('Should expose all Form elements', () => { 5 | expect(Form).toMatchSnapshot(); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Checkbox component Should Exists 1`] = `[Function]`; 4 | 5 | exports[`Checkbox component Should have checkbox classname 1`] = ` 6 | 15 | `; 16 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/control.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Control component Should concat classname in props with Bulma classname 1`] = ` 4 |
      7 |

      8 | Default 9 |

      10 |
      11 | `; 12 | 13 | exports[`Control component Should exist 1`] = `[Function]`; 14 | 15 | exports[`Control component Should have control classname 1`] = ` 16 |
      19 |

      22 |

      23 | Default 24 |

      25 |

      26 | Container 27 |

      28 |

      29 |
      30 | `; 31 | 32 | exports[`Control component Should render as a html section element 1`] = ` 33 |
      36 |

      37 | Default 38 |

      39 |
      40 | `; 41 | 42 | exports[`Control component Should use inline styles 1`] = ` 43 |
      51 |

      52 | Default 53 |

      54 |
      55 | `; 56 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/help.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Help component Should be displayed as a successful message 1`] = ` 4 |

      7 |

      8 | Default 9 |

      10 |

      11 | `; 12 | 13 | exports[`Help component Should concat classname in props with Bulma classname 1`] = ` 14 |

      17 |

      18 | Default 19 |

      20 |

      21 | `; 22 | 23 | exports[`Help component Should exist 1`] = `[Function]`; 24 | 25 | exports[`Help component Should have help classname 1`] = ` 26 |

      29 |

      32 |

      33 | Default 34 |

      35 |

      36 | Container 37 |

      38 |

      39 |

      40 | `; 41 | 42 | exports[`Help component Should use inline styles 1`] = ` 43 |

      51 |

      52 | Default 53 |

      54 |

      55 | `; 56 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/input.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Input component Should be disabled with placeholder and value 1`] = ` 4 | 10 | `; 11 | 12 | exports[`Input component Should be large and readOnly 1`] = ` 13 | 17 | `; 18 | 19 | exports[`Input component Should be rounded 1`] = ` 20 | 23 | `; 24 | 25 | exports[`Input component Should be type email and a with success colors 1`] = ` 26 | 30 | `; 31 | 32 | exports[`Input component Should concat classname in props with Bulma classname 1`] = ` 33 | 36 | `; 37 | 38 | exports[`Input component Should exist 1`] = `[Function]`; 39 | 40 | exports[`Input component Should have input classname 1`] = ` 41 | 44 | `; 45 | 46 | exports[`Input component Should support focus state 1`] = ` 47 | 50 | `; 51 | 52 | exports[`Input component Should support hovered state 1`] = ` 53 | 56 | `; 57 | 58 | exports[`Input component Should use inline styles 1`] = ` 59 | 67 | `; 68 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/label.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Label component Should concat classname in props with Bulma classname 1`] = ` 4 | 11 | `; 12 | 13 | exports[`Label component Should exist 1`] = `[Function]`; 14 | 15 | exports[`Label component Should have label classname 1`] = ` 16 | 24 | `; 25 | 26 | exports[`Label component Should use inline styles 1`] = ` 27 | 39 | `; 40 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/radio.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Radio component Should be disabled, checked and with value 1`] = ` 4 | 20 | `; 21 | 22 | exports[`Radio component Should concat classname in props with Bulma classname 1`] = ` 23 | 35 | `; 36 | 37 | exports[`Radio component Should exist 1`] = `[Function]`; 38 | 39 | exports[`Radio component Should have radio classname 1`] = ` 40 | 53 | `; 54 | 55 | exports[`Radio component Should use inline styles 1`] = ` 56 | 73 | `; 74 | -------------------------------------------------------------------------------- /src/components/form/components/__test__/__snapshots__/textarea.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Textarea component Should concat classname in props with Bulma classname 1`] = ` 4 |