├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierrc.json ├── .storybook ├── assets │ └── demo-iframe.html ├── main.js ├── manager.js ├── preview-body.html ├── preview-head.html └── preview.js ├── LICENSE ├── README.md ├── custom-elements-manifest.config.mjs ├── docs ├── design-system │ ├── border-radius.stories.mdx │ ├── colors.stories.mdx │ ├── sizing.stories.mdx │ └── typography.stories.mdx └── welcome.stories.mdx ├── generator ├── generate-react.js └── generate.js ├── package.json ├── src ├── components │ ├── fp-alert │ │ ├── fp-alert.css │ │ ├── fp-alert.stories.mdx │ │ └── fp-alert.ts │ ├── fp-anchor │ │ ├── fp-anchor.css │ │ ├── fp-anchor.stories.mdx │ │ └── fp-anchor.ts │ ├── fp-badge │ │ ├── fp-badge.css │ │ ├── fp-badge.stories.mdx │ │ └── fp-badge.ts │ ├── fp-breadcrumb │ │ ├── fp-breadcrumbs.css │ │ ├── fp-breadcrumbs.stories.mdx │ │ └── fp-breadcrumbs.ts │ ├── fp-button │ │ ├── fp-button.css │ │ ├── fp-button.stories.mdx │ │ └── fp-button.ts │ ├── fp-card │ │ ├── fp-card.css │ │ ├── fp-card.stories.mdx │ │ └── fp-card.ts │ ├── fp-checkbox-group │ │ ├── fp-checkbox-group.css │ │ ├── fp-checkbox-group.stories.mdx │ │ ├── fp-checkbox-group.ts │ │ └── fp-checkbox │ │ │ ├── fp-checkbox.css │ │ │ ├── fp-checkbox.stories.mdx │ │ │ └── fp-checkbox.ts │ ├── fp-dialog │ │ ├── fp-dialog.css │ │ ├── fp-dialog.stories.mdx │ │ └── fp-dialog.ts │ ├── fp-divider │ │ ├── fp-divider.css │ │ ├── fp-divider.stories.mdx │ │ └── fp-divider.ts │ ├── fp-drawer │ │ ├── fp-drawer.css │ │ ├── fp-drawer.stories.mdx │ │ └── fp-drawer.ts │ ├── fp-dropdown │ │ ├── fp-dropdown.css │ │ ├── fp-dropdown.stories.mdx │ │ ├── fp-dropdown.ts │ │ ├── fp-group │ │ │ ├── fp-dropdown-group.css │ │ │ ├── fp-dropdown-group.stories.mdx │ │ │ └── fp-dropdown-group.ts │ │ └── fp-item │ │ │ ├── fp-dropdown-item.css │ │ │ ├── fp-dropdown-item.stories.mdx │ │ │ └── fp-dropdown-item.ts │ ├── fp-icon │ │ ├── crypto-icon-list.ts │ │ ├── fp-icon.css │ │ ├── fp-icon.stories.mdx │ │ ├── fp-icon.ts │ │ ├── general-icon-list.ts │ │ └── icons │ │ │ ├── crypto-icons │ │ │ ├── ada.svg │ │ │ ├── algo.svg │ │ │ ├── ape.svg │ │ │ ├── atom.svg │ │ │ ├── avax.svg │ │ │ ├── bch.svg │ │ │ ├── bnb.svg │ │ │ ├── bsv.svg │ │ │ ├── btc.svg │ │ │ ├── btt.svg │ │ │ ├── chz.svg │ │ │ ├── crv.svg │ │ │ ├── dai.svg │ │ │ ├── dash.svg │ │ │ ├── doge.svg │ │ │ ├── dot.svg │ │ │ ├── enj.svg │ │ │ ├── eos.svg │ │ │ ├── etc.svg │ │ │ ├── eth.svg │ │ │ ├── fil.svg │ │ │ ├── grt.svg │ │ │ ├── gusd.svg │ │ │ ├── ht.svg │ │ │ ├── kcs.svg │ │ │ ├── leo.svg │ │ │ ├── lrc.svg │ │ │ ├── ltc.svg │ │ │ ├── mana.svg │ │ │ ├── matic.svg │ │ │ ├── miota.svg │ │ │ ├── mkr.svg │ │ │ ├── neo.svg │ │ │ ├── nexo.svg │ │ │ ├── paxg.svg │ │ │ ├── qnt.svg │ │ │ ├── sand.svg │ │ │ ├── snx.svg │ │ │ ├── sol.svg │ │ │ ├── stx.svg │ │ │ ├── theta.svg │ │ │ ├── trx.svg │ │ │ ├── tusd.svg │ │ │ ├── uni.svg │ │ │ ├── usdc.svg │ │ │ ├── usdt.svg │ │ │ ├── vet.svg │ │ │ ├── wbtc.svg │ │ │ ├── xlm.svg │ │ │ ├── xmr.svg │ │ │ ├── xrp.svg │ │ │ ├── xtz.svg │ │ │ ├── zec.svg │ │ │ └── zil.svg │ │ │ └── general-icons │ │ │ ├── activity.svg │ │ │ ├── airplay.svg │ │ │ ├── alert-circle.svg │ │ │ ├── alert-octagon.svg │ │ │ ├── alert-triangle.svg │ │ │ ├── align-center.svg │ │ │ ├── align-justify.svg │ │ │ ├── align-left.svg │ │ │ ├── align-right.svg │ │ │ ├── anchor.svg │ │ │ ├── aperture.svg │ │ │ ├── archive.svg │ │ │ ├── arrow-down-circle.svg │ │ │ ├── arrow-down-left.svg │ │ │ ├── arrow-down-right.svg │ │ │ ├── arrow-down.svg │ │ │ ├── arrow-left-circle.svg │ │ │ ├── arrow-left.svg │ │ │ ├── arrow-right-circle.svg │ │ │ ├── arrow-right.svg │ │ │ ├── arrow-up-circle.svg │ │ │ ├── arrow-up-left.svg │ │ │ ├── arrow-up-right.svg │ │ │ ├── arrow-up.svg │ │ │ ├── at-sign.svg │ │ │ ├── award.svg │ │ │ ├── bar-chart-2.svg │ │ │ ├── bar-chart.svg │ │ │ ├── battery-charging.svg │ │ │ ├── battery.svg │ │ │ ├── bell-off.svg │ │ │ ├── bell.svg │ │ │ ├── bluetooth.svg │ │ │ ├── bold.svg │ │ │ ├── book-open.svg │ │ │ ├── book.svg │ │ │ ├── bookmark.svg │ │ │ ├── box.svg │ │ │ ├── briefcase.svg │ │ │ ├── calendar.svg │ │ │ ├── camera-off.svg │ │ │ ├── camera.svg │ │ │ ├── cast.svg │ │ │ ├── check-circle.svg │ │ │ ├── check-square.svg │ │ │ ├── check.svg │ │ │ ├── chevron-down.svg │ │ │ ├── chevron-left.svg │ │ │ ├── chevron-right.svg │ │ │ ├── chevron-up.svg │ │ │ ├── chevrons-down.svg │ │ │ ├── chevrons-left.svg │ │ │ ├── chevrons-right.svg │ │ │ ├── chevrons-up.svg │ │ │ ├── chrome.svg │ │ │ ├── circle.svg │ │ │ ├── clipboard.svg │ │ │ ├── clock.svg │ │ │ ├── cloud-drizzle.svg │ │ │ ├── cloud-lightning.svg │ │ │ ├── cloud-off.svg │ │ │ ├── cloud-rain.svg │ │ │ ├── cloud-snow.svg │ │ │ ├── cloud.svg │ │ │ ├── code.svg │ │ │ ├── codepen.svg │ │ │ ├── codesandbox.svg │ │ │ ├── coffee.svg │ │ │ ├── columns.svg │ │ │ ├── command.svg │ │ │ ├── compass.svg │ │ │ ├── copy.svg │ │ │ ├── corner-down-left.svg │ │ │ ├── corner-down-right.svg │ │ │ ├── corner-left-down.svg │ │ │ ├── corner-left-up.svg │ │ │ ├── corner-right-down.svg │ │ │ ├── corner-right-up.svg │ │ │ ├── corner-up-left.svg │ │ │ ├── corner-up-right.svg │ │ │ ├── cpu.svg │ │ │ ├── credit-card.svg │ │ │ ├── crop.svg │ │ │ ├── crosshair.svg │ │ │ ├── database.svg │ │ │ ├── delete.svg │ │ │ ├── disc.svg │ │ │ ├── divide-circle.svg │ │ │ ├── divide-square.svg │ │ │ ├── divide.svg │ │ │ ├── dollar-sign.svg │ │ │ ├── download-cloud.svg │ │ │ ├── download.svg │ │ │ ├── dribbble.svg │ │ │ ├── droplet.svg │ │ │ ├── edit-2.svg │ │ │ ├── edit-3.svg │ │ │ ├── edit.svg │ │ │ ├── external-link.svg │ │ │ ├── eye-off.svg │ │ │ ├── eye.svg │ │ │ ├── facebook.svg │ │ │ ├── fast-forward.svg │ │ │ ├── feather.svg │ │ │ ├── figma.svg │ │ │ ├── file-minus.svg │ │ │ ├── file-plus.svg │ │ │ ├── file-text.svg │ │ │ ├── file.svg │ │ │ ├── film.svg │ │ │ ├── filter.svg │ │ │ ├── flag.svg │ │ │ ├── folder-minus.svg │ │ │ ├── folder-plus.svg │ │ │ ├── folder.svg │ │ │ ├── framer.svg │ │ │ ├── frown.svg │ │ │ ├── gift.svg │ │ │ ├── git-branch.svg │ │ │ ├── git-commit.svg │ │ │ ├── git-merge.svg │ │ │ ├── git-pull-request.svg │ │ │ ├── github.svg │ │ │ ├── gitlab.svg │ │ │ ├── globe.svg │ │ │ ├── grid.svg │ │ │ ├── hard-drive.svg │ │ │ ├── hash.svg │ │ │ ├── headphones.svg │ │ │ ├── heart.svg │ │ │ ├── help-circle.svg │ │ │ ├── hexagon.svg │ │ │ ├── home.svg │ │ │ ├── image.svg │ │ │ ├── inbox.svg │ │ │ ├── info.svg │ │ │ ├── instagram.svg │ │ │ ├── italic.svg │ │ │ ├── key.svg │ │ │ ├── layers.svg │ │ │ ├── layout.svg │ │ │ ├── life-buoy.svg │ │ │ ├── link-2.svg │ │ │ ├── link.svg │ │ │ ├── linkedin.svg │ │ │ ├── list.svg │ │ │ ├── loading.svg │ │ │ ├── lock.svg │ │ │ ├── log-in.svg │ │ │ ├── log-out.svg │ │ │ ├── mail.svg │ │ │ ├── map-pin.svg │ │ │ ├── map.svg │ │ │ ├── maximize-2.svg │ │ │ ├── maximize.svg │ │ │ ├── meh.svg │ │ │ ├── menu.svg │ │ │ ├── message-circle.svg │ │ │ ├── message-square.svg │ │ │ ├── mic-off.svg │ │ │ ├── mic.svg │ │ │ ├── minimize-2.svg │ │ │ ├── minimize.svg │ │ │ ├── minus-circle.svg │ │ │ ├── minus-square.svg │ │ │ ├── minus.svg │ │ │ ├── monitor.svg │ │ │ ├── moon.svg │ │ │ ├── more-horizontal.svg │ │ │ ├── more-vertical.svg │ │ │ ├── mouse-pointer.svg │ │ │ ├── move.svg │ │ │ ├── music.svg │ │ │ ├── navigation-2.svg │ │ │ ├── navigation.svg │ │ │ ├── octagon.svg │ │ │ ├── package.svg │ │ │ ├── paperclip.svg │ │ │ ├── pause-circle.svg │ │ │ ├── pause.svg │ │ │ ├── pen-tool.svg │ │ │ ├── percent.svg │ │ │ ├── phone-call.svg │ │ │ ├── phone-forwarded.svg │ │ │ ├── phone-incoming.svg │ │ │ ├── phone-missed.svg │ │ │ ├── phone-off.svg │ │ │ ├── phone-outgoing.svg │ │ │ ├── phone.svg │ │ │ ├── pie-chart.svg │ │ │ ├── play-circle.svg │ │ │ ├── play.svg │ │ │ ├── plus-circle.svg │ │ │ ├── plus-square.svg │ │ │ ├── plus.svg │ │ │ ├── pocket.svg │ │ │ ├── power.svg │ │ │ ├── printer.svg │ │ │ ├── radio.svg │ │ │ ├── refresh-ccw.svg │ │ │ ├── refresh-cw.svg │ │ │ ├── repeat.svg │ │ │ ├── rewind.svg │ │ │ ├── rotate-ccw.svg │ │ │ ├── rotate-cw.svg │ │ │ ├── rss.svg │ │ │ ├── save.svg │ │ │ ├── scissors.svg │ │ │ ├── search.svg │ │ │ ├── send.svg │ │ │ ├── server.svg │ │ │ ├── settings.svg │ │ │ ├── share-2.svg │ │ │ ├── share.svg │ │ │ ├── shield-off.svg │ │ │ ├── shield.svg │ │ │ ├── shopping-bag.svg │ │ │ ├── shopping-cart.svg │ │ │ ├── shuffle.svg │ │ │ ├── sidebar.svg │ │ │ ├── skip-back.svg │ │ │ ├── skip-forward.svg │ │ │ ├── slack.svg │ │ │ ├── slash.svg │ │ │ ├── sliders.svg │ │ │ ├── smartphone.svg │ │ │ ├── smile.svg │ │ │ ├── speaker.svg │ │ │ ├── square.svg │ │ │ ├── star.svg │ │ │ ├── stop-circle.svg │ │ │ ├── sun.svg │ │ │ ├── sunrise.svg │ │ │ ├── sunset.svg │ │ │ ├── table.svg │ │ │ ├── tablet.svg │ │ │ ├── tag.svg │ │ │ ├── target.svg │ │ │ ├── terminal.svg │ │ │ ├── thermometer.svg │ │ │ ├── thumbs-down.svg │ │ │ ├── thumbs-up.svg │ │ │ ├── toggle-left.svg │ │ │ ├── toggle-right.svg │ │ │ ├── tool.svg │ │ │ ├── trash-2.svg │ │ │ ├── trash.svg │ │ │ ├── trello.svg │ │ │ ├── trending-down.svg │ │ │ ├── trending-up.svg │ │ │ ├── triangle.svg │ │ │ ├── truck.svg │ │ │ ├── tv.svg │ │ │ ├── twitch.svg │ │ │ ├── twitter.svg │ │ │ ├── type.svg │ │ │ ├── umbrella.svg │ │ │ ├── underline.svg │ │ │ ├── unlock.svg │ │ │ ├── upload-cloud.svg │ │ │ ├── upload.svg │ │ │ ├── user-check.svg │ │ │ ├── user-minus.svg │ │ │ ├── user-plus.svg │ │ │ ├── user-x.svg │ │ │ ├── user.svg │ │ │ ├── users.svg │ │ │ ├── video-off.svg │ │ │ ├── video.svg │ │ │ ├── voicemail.svg │ │ │ ├── volume-1.svg │ │ │ ├── volume-2.svg │ │ │ ├── volume-x.svg │ │ │ ├── volume.svg │ │ │ ├── warning.svg │ │ │ ├── watch.svg │ │ │ ├── wifi-off.svg │ │ │ ├── wifi.svg │ │ │ ├── wind.svg │ │ │ ├── x-circle.svg │ │ │ ├── x-octagon.svg │ │ │ ├── x-square.svg │ │ │ ├── x.svg │ │ │ ├── youtube.svg │ │ │ ├── zap-off.svg │ │ │ ├── zap.svg │ │ │ ├── zoom-in.svg │ │ │ └── zoom-out.svg │ ├── fp-input │ │ ├── fp-input.css │ │ ├── fp-input.stories.mdx │ │ └── fp-input.ts │ ├── fp-menu │ │ ├── fp-menu-item │ │ │ ├── fp-menu-item.css │ │ │ ├── fp-menu-item.stories.mdx │ │ │ └── fp-menu-item.ts │ │ ├── fp-menu-label │ │ │ ├── fp-menu-label.css │ │ │ ├── fp-menu-label.stories.mdx │ │ │ └── fp-menu-label.ts │ │ ├── fp-menu.css │ │ ├── fp-menu.stories.mdx │ │ └── fp-menu.ts │ ├── fp-pagination │ │ ├── fp-pagination.css │ │ ├── fp-pagination.stories.mdx │ │ └── fp-pagination.ts │ ├── fp-popover │ │ ├── fp-popover.css │ │ ├── fp-popover.stories.mdx │ │ └── fp-popover.ts │ ├── fp-progress-indicator │ │ ├── fp-progress-indicator.css │ │ ├── fp-progress-indicator.stories.mdx │ │ └── fp-progress-indicator.ts │ ├── fp-qr-code │ │ ├── fp-qr-code.css │ │ ├── fp-qr-code.stories.mdx │ │ └── fp-qr-code.ts │ ├── fp-radio-group │ │ ├── fp-radio-group.css │ │ ├── fp-radio-group.stories.mdx │ │ ├── fp-radio-group.ts │ │ └── fp-radio │ │ │ ├── fp-radio.css │ │ │ ├── fp-radio.stories.mdx │ │ │ └── fp-radio.ts │ ├── fp-select │ │ ├── fp-select-option │ │ │ ├── fp-select-option.css │ │ │ ├── fp-select-option.stories.mdx │ │ │ └── fp-select-option.ts │ │ ├── fp-select.css │ │ ├── fp-select.stories.mdx │ │ └── fp-select.ts │ ├── fp-skeleton │ │ ├── fp-skeleton.css │ │ ├── fp-skeleton.stories.mdx │ │ └── fp-skeleton.ts │ ├── fp-spinner │ │ ├── fp-spinner.css │ │ ├── fp-spinner.stories.mdx │ │ └── fp-spinner.ts │ ├── fp-switch │ │ ├── fp-switch.css │ │ ├── fp-switch.stories.mdx │ │ └── fp-switch.ts │ ├── fp-tab-group │ │ ├── fp-tab-group.css │ │ ├── fp-tab-group.stories.mdx │ │ ├── fp-tab-group.ts │ │ ├── fp-tab-panel │ │ │ ├── fp-tab-panel.css │ │ │ ├── fp-tab-panel.stories.mdx │ │ │ └── fp-tab-panel.ts │ │ └── fp-tab │ │ │ ├── fp-tab.css │ │ │ ├── fp-tab.stories.mdx │ │ │ └── fp-tab.ts │ ├── fp-text-area │ │ ├── fp-text-area.css │ │ ├── fp-text-area.stories.mdx │ │ └── fp-text-area.ts │ └── fp-tooltip │ │ ├── fp-tooltip.css │ │ ├── fp-tooltip.stories.mdx │ │ └── fp-tooltip.ts ├── finpro-react.ts ├── finpro.ts ├── imports.d.ts ├── internals │ ├── finpro-element.ts │ ├── slot.ts │ └── watch.ts ├── themes │ └── default.css ├── types │ └── index.d.ts └── utilities │ ├── asset-paths.test.ts │ ├── asset-paths.ts │ ├── event.test.ts │ ├── event.ts │ ├── form-control.test.ts │ ├── form-control.ts │ ├── fp-icon-mock.ts │ ├── icon-mock.ts │ ├── string-boolean.converter.test.ts │ └── string-boolean.converter.ts ├── tsconfig.json └── web-test-runner.config.mjs /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | docs/* 3 | dist/* 4 | docs-src/* 5 | rollup-config.js 6 | custom-elements.json 7 | .history/ 8 | storybook-static/ 9 | *.js 10 | .github/ 11 | .octane-ci/ 12 | .bin/ 13 | .docksal/ 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | ecmaVersion: 2020, 5 | sourceType: 'module', 6 | }, 7 | extends: [ 8 | 'eslint:recommended', 9 | 'prettier', 10 | ], 11 | env: { 12 | browser: true, 13 | }, 14 | globals: { 15 | process: 'readonly', 16 | }, 17 | rules: { 18 | strict: ['error', 'never'], 19 | }, 20 | overrides: [ 21 | { 22 | files: ['*.ts'], 23 | parser: '@typescript-eslint/parser', 24 | extends: [ 25 | 'plugin:@typescript-eslint/recommended' 26 | ], 27 | plugins: ['@typescript-eslint'], 28 | }, 29 | { 30 | files: ['web-test-runner.config.js'], 31 | env: { 32 | node: true, 33 | }, 34 | } 35 | ], 36 | }; 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *dist* 2 | storybook-static/ 3 | custom-elements.json 4 | 5 | *.generated.css 6 | coverage 7 | 8 | *~ 9 | *.sw[mnpcod] 10 | *.log 11 | *.tmp 12 | *.tmp.* 13 | log.txt 14 | 15 | !.vscode/extensions.json 16 | !.vscode/settings.json 17 | .vscode/* 18 | .history/ 19 | .idea/ 20 | .versions/ 21 | .sass-cache/ 22 | $RECYCLE.BIN/ 23 | node_modules/ 24 | 25 | .DS_Store 26 | Thumbs.db 27 | UserInterfaceState.xcuserstate 28 | src/component-list.json 29 | coverage/ 30 | build-storybook.log 31 | fintechpro-react.ts -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "bracketSpacing": true, 4 | "semi": true, 5 | "singleQuote": true, 6 | "arrowParens": "avoid", 7 | "quoteProps": "consistent", 8 | "trailingComma": "es5", 9 | "printWidth": 120, 10 | "tabWidth": 4 11 | } -------------------------------------------------------------------------------- /.storybook/assets/demo-iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo Page 8 | 15 | 16 | 17 |

Demo Page

18 | 19 | 20 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const TITLE = 'Finpro Design System'; 2 | 3 | const configureWebpack = async (config, { configType }) => { 4 | if (configType === 'PRODUCTION') { 5 | for (const plugin of config.plugins) { 6 | if (plugin.__proto__.constructor.name === 'HtmlWebpackPlugin') { 7 | plugin.options.title = TITLE; 8 | } 9 | } 10 | } 11 | 12 | return config; 13 | }; 14 | 15 | module.exports = { 16 | stories: ['../*.md', '../docs/**/*.stories.mdx', '../src/**/*.stories.mdx'], 17 | addons: [ 18 | '@storybook/addon-links', 19 | { 20 | name: '@storybook/addon-docs', 21 | options: { transcludeMarkdown: true }, 22 | }, 23 | '@storybook/addon-essentials', 24 | '@storybook/addon-a11y', 25 | '@storybook/addon-interactions', 26 | '@storybook/addon-viewport', 27 | ], 28 | features: { 29 | postcss: false, 30 | interactionsDebugger: true, 31 | buildStoriesJson: true, 32 | }, 33 | framework: '@storybook/web-components', 34 | staticDirs: ['../dist', { from: './assets', to: '/assets' }], 35 | webpackFinal: configureWebpack, 36 | managerWebpack: configureWebpack, 37 | }; 38 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons'; 2 | import { create } from '@storybook/theming'; 3 | 4 | const theme = create({ 5 | base: 'light', 6 | brandTitle: 'Finpro Design System', 7 | brandUrl: 'https://github.com/FinTechSoftware/Finpro', 8 | colorPrimary: '#F27A1A', 9 | colorSecondary: '#273142', 10 | fontBase: 'PoppinsVariable, sans-serif', 11 | fontCode: 12 | '"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace', 13 | }); 14 | 15 | addons.setConfig({ theme }); 16 | -------------------------------------------------------------------------------- /.storybook/preview-body.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 FinTechSoftware 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![image](https://user-images.githubusercontent.com/57464067/226365631-a6b645e5-e2b1-4d74-855a-dc871eef8e8a.png) 2 | 3 | # Finpro Design System 4 | 5 | FinPro is a UI kit designed specifically for quickly and easily designing your financial interfaces. 6 | 7 | FinPro prioritizes user experience with its user-friendly interfaces. It includes components specifically designed for financial applications such as investment, banking, financial analysis, and cryptocurrency, which speeds up your design process and helps you achieve excellent results. 8 | 9 | The modern and sleek design of FinPro works seamlessly on all devices. Additionally, with its customizable components, you can design interfaces that fit your needs and brand. 10 | 11 | FinPro is designed specifically for the complexity of financial applications and is easily usable with detailed documentation. 12 | 13 | Finpro Design System was inspired by Mantine, Geist, Shoelace and Baklava while being developed. -------------------------------------------------------------------------------- /docs/welcome.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Description } from '@storybook/addon-docs'; 2 | import Readme from '../README.md'; 3 | 4 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/fp-anchor/fp-anchor.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | } 4 | 5 | .anchor a { 6 | text-decoration: none; 7 | color: #000; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/fp-checkbox-group/fp-checkbox-group.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: row; 4 | } 5 | 6 | fieldset { 7 | border: none; 8 | padding: 0; 9 | } 10 | 11 | legend { 12 | font: var(--fp-font-title-3-medium); 13 | color: var(--fp-color-content-primary); 14 | } 15 | 16 | .options { 17 | display: flex; 18 | flex-flow: var(--fp-checkbox-direction, column) wrap; 19 | gap: var(--fp-size-l); 20 | margin-block: var(--fp-size-s); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/fp-dropdown/fp-dropdown.css: -------------------------------------------------------------------------------- 1 | :host { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | 6 | .popover { 7 | --left: 0; 8 | --top: 0; 9 | --border-color: var(--fp-color-primary); 10 | 11 | position: fixed; 12 | 13 | /* FIXME: Use z-index variable */ 14 | z-index: 1; 15 | display: none; 16 | flex-direction: column; 17 | align-items: flex-start; 18 | padding: var(--fp-size-m); 19 | gap: var(--fp-size-xs); 20 | overflow-y: auto; 21 | background: var(--fp-color-primary-background); 22 | border: 1px solid var(--border-color); 23 | 24 | /* FIXME: Use variables */ 25 | box-shadow: 0 10px 15px -8px #27314226; 26 | border-radius: var(--fp-size-3xs); 27 | left: var(--left); 28 | top: var(--top); 29 | box-sizing: border-box; 30 | } 31 | 32 | :host([kind='neutral']) .popover { 33 | --border-color: var(--fp-color-secondary); 34 | } 35 | 36 | :host([kind='success']) .popover { 37 | --border-color: var(--fp-color-success); 38 | } 39 | 40 | :host([kind='danger']) .popover { 41 | --border-color: var(--fp-color-danger); 42 | } 43 | 44 | .visible { 45 | display: flex; 46 | } 47 | -------------------------------------------------------------------------------- /src/components/fp-dropdown/fp-group/fp-dropdown-group.css: -------------------------------------------------------------------------------- 1 | :host { 2 | position: relative; 3 | width: 100%; 4 | } 5 | 6 | .dropdown-group { 7 | display: flex; 8 | flex-direction: column; 9 | gap: var(--fp-size-xs); 10 | } 11 | 12 | .caption { 13 | font: var(--fp-font-caption); 14 | font-size: var(--fp-font-size-xs); 15 | font-weight: var(--fp-font-weight-medium); 16 | line-height: var(--fp-font-size-s); 17 | color: var(--fp-color-content-secondary); 18 | } 19 | 20 | :host(:not(:first-child)) { 21 | border-top: 1px solid var(--fp-color-border); 22 | } 23 | 24 | :host(:not(:last-child)) { 25 | border-bottom: 1px solid var(--fp-color-border); 26 | } 27 | 28 | :host(:not([caption])) ::slotted(:first-child) { 29 | padding-block: var(--fp-size-xs) 0; 30 | } 31 | 32 | :host(:not(:last-child)) ::slotted(:last-child) { 33 | padding-block: 0 var(--fp-size-xs); 34 | } 35 | 36 | :host(:not(:first-child)) .caption { 37 | padding-block: var(--fp-size-xs) 0; 38 | } 39 | -------------------------------------------------------------------------------- /src/components/fp-dropdown/fp-group/fp-dropdown-group.ts: -------------------------------------------------------------------------------- 1 | import { html, CSSResultGroup, TemplateResult } from 'lit'; 2 | import { customElement, property } from 'lit/decorators.js'; 3 | import style from './fp-dropdown-group.css'; 4 | import { ifDefined } from 'lit/directives/if-defined.js'; 5 | import FinproElement from '../../../internals/finpro-element'; 6 | 7 | export const fpDropdownGroupTag = 'fp-dropdown-group'; 8 | 9 | /** 10 | * @tag fp-dropdown-group 11 | * @summary Finpro Dropdown Group component 12 | */ 13 | @customElement(fpDropdownGroupTag) 14 | export default class FpDropdownGroup extends FinproElement { 15 | static get styles(): CSSResultGroup { 16 | return [style]; 17 | } 18 | 19 | /** 20 | * Sets the caption. 21 | */ 22 | @property({ type: String }) 23 | caption?: string; 24 | 25 | 26 | render(): TemplateResult { 27 | const caption = this.caption ? html`${this.caption}` : '' 28 | 29 | return html`
30 | ${caption} 31 | 32 |
` 33 | } 34 | 35 | } 36 | 37 | 38 | declare global { 39 | interface HTMLElementTagNameMap { 40 | [fpDropdownGroupTag]: FpDropdownGroup; 41 | } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /src/components/fp-dropdown/fp-item/fp-dropdown-item.css: -------------------------------------------------------------------------------- 1 | :host { 2 | width: 100%; 3 | 4 | --fp-button-display: block; 5 | --fp-button-justify: start; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/fp-dropdown/fp-item/fp-dropdown-item.stories.mdx: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | import { ifDefined } from 'lit/directives/if-defined.js'; 3 | import { 4 | Meta, 5 | Canvas, 6 | ArgsTable, 7 | Story, 8 | } from '@storybook/addon-docs'; 9 | 10 | 21 | 22 | # Dropdown Item 23 | The Dropdown Item component is designed to be utilized within the fp-dropdown or fp-dropdown-group components, and its purpose is to present an actionable item within these parent components. 24 | 25 | export const Template = (args) => html` 26 | Dropdown Item 29 | ` 30 | 31 | ## Basic Usage 32 | 33 | 34 | {Template.bind({})} 35 | 36 | 37 | 38 | ## With Icon 39 | If you want to have an icon for your actions, you can use the `icon` attribute. 40 | 41 | 42 | {Template.bind({})} 43 | 44 | 45 | 46 | ## Reference 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/fp-icon/crypto-icon-list.ts: -------------------------------------------------------------------------------- 1 | export default ["ada", "algo", "ape", "atom", "avax", "bch", "bnb", "bsv", "btc", "btt", "chz", "crv", "dai", "dash", "doge", "dot", "enj", "eos", "etc", "eth", "fil", "grt", "gusd", "ht", "kcs", "leo", "lrc", "ltc", "mana", "matic", "miota", "mkr", "neo", "nexo", "paxg", "qnt", "sand", "snx", "sol", "stx", "theta", "trx", "tusd", "uni", "usdc", "usdt", "vet", "wbtc", "xlm", "xmr", "xrp", "xtz", "zec", "zil"] -------------------------------------------------------------------------------- /src/components/fp-icon/fp-icon.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | } 4 | 5 | :host div { 6 | display: flex; 7 | align-items: stretch; 8 | width: 1em; 9 | height: 1em; 10 | min-width: 1em; 11 | min-height: 1em; 12 | overflow: hidden; 13 | transform: translateZ(0); 14 | } 15 | 16 | :host svg { 17 | width: 1em; 18 | height: 1em; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/algo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/avax.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/bch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/bnb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/btc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/chz.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/crv.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/dai.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/dash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/doge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/dot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/enj.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/eos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/etc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/eth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/fil.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/grt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/gusd.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/ht.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/kcs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/lrc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/ltc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/mana.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/matic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/mkr.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/neo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/nexo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/paxg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/qnt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/sand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/snx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/sol.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/stx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/theta.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/trx.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/tusd.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/usdt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/vet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/wbtc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/xlm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/xmr.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/xrp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/zec.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/crypto-icons/zil.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/activity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/airplay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/alert-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/alert-octagon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/alert-triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/align-center.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/align-justify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/align-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/align-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/anchor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/aperture.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-down-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-down-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-down-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-left-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-right-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-up-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-up-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-up-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/at-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/award.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bar-chart-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bar-chart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/battery-charging.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/battery.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bell-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bluetooth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/book-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/briefcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/camera-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/check-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevron-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevron-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevrons-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevrons-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevrons-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chevrons-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/clipboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cloud-drizzle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cloud-lightning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cloud-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cloud-rain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cloud-snow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/codepen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/codesandbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/coffee.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/columns.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/command.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/compass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-down-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-down-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-left-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-left-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-right-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-right-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-up-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/corner-up-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/cpu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/credit-card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/crop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/crosshair.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/database.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/disc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/divide-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/divide-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/divide.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/dollar-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/download-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/dribbble.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/droplet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/edit-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/edit-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/edit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/external-link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/eye-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/eye.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/fast-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/feather.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/figma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/file-minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/file-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/file-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/film.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/filter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/flag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/folder-minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/folder-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/framer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/frown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/gift.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/git-branch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/git-commit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/git-merge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/git-pull-request.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/gitlab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/hard-drive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/hash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/headphones.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/help-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/hexagon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/inbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/italic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/layers.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/layout.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/life-buoy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/link-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/loading.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/log-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/log-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/map-pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/maximize-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/maximize.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/meh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/message-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/message-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/mic-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/mic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/minimize-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/minimize.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/minus-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/minus-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/monitor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/moon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/more-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/more-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/mouse-pointer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/move.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/navigation-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/navigation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/octagon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/package.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/paperclip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/pause-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/pen-tool.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/percent.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone-call.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone-forwarded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone-incoming.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone-missed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone-outgoing.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/pie-chart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/play-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/plus-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/plus-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/pocket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/power.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/printer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/radio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/refresh-ccw.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/refresh-cw.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/repeat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/rewind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/rotate-ccw.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/rotate-cw.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/rss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/save.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/scissors.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/send.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/server.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/share-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/shield-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/shield.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/shopping-bag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/shuffle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/sidebar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/skip-back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/skip-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/slash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/sliders.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/smartphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/smile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/speaker.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/stop-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/sun.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/sunrise.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/sunset.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/table.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/tablet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/tag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/target.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/terminal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/thermometer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/thumbs-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/thumbs-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/toggle-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/toggle-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/tool.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/trash-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/trello.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/trending-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/trending-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/truck.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/tv.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/twitch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/type.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/umbrella.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/underline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/unlock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/upload-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/user-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/user-minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/user-plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/user-x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/users.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/video-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/video.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/voicemail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/volume-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/volume-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/volume-x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/volume.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/watch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/wifi-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/wifi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/wind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/x-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/x-octagon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/x-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/zap-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/zap.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/zoom-in.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-icon/icons/general-icons/zoom-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/fp-menu/fp-menu-label/fp-menu-label.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | .menu-label { 5 | display: inline-block; 6 | --font: var(--fp-font-title-3-bold); 7 | 8 | font: var(--font); 9 | color: var(--fp-color-primary); 10 | padding: var(--fp-size-s) var(--fp-size-2xl); 11 | user-select: none; 12 | } -------------------------------------------------------------------------------- /src/components/fp-menu/fp-menu-label/fp-menu-label.stories.mdx: -------------------------------------------------------------------------------- 1 | import { html } from 'lit'; 2 | import { ifDefined } from 'lit/directives/if-defined.js'; 3 | import { styleMap } from 'lit/directives/style-map.js'; 4 | import { unsafeHTML } from 'lit/directives/unsafe-html.js'; 5 | import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs'; 6 | 7 | 11 | 12 | export const BasicUsage = (args) => html` 13 | 14 | Fruits 15 | Apple 16 | Banana 17 | Orange 18 | 19 | Vegetables 20 | Broccoli 21 | Carrot 22 | Zucchini 23 | 24 | ` 25 | 26 | # Menu Label 27 | 28 | To describe a collection of menu items, you can use menu labels. 29 | 30 | 31 | {BasicUsage.bind({})} 32 | 33 | 34 | ## Reference 35 | 36 | -------------------------------------------------------------------------------- /src/components/fp-menu/fp-menu-label/fp-menu-label.ts: -------------------------------------------------------------------------------- 1 | import { CSSResultGroup, html, TemplateResult } from "lit"; 2 | import { customElement } from 'lit/decorators.js'; 3 | import FinproElement from "../../../internals/finpro-element"; 4 | import style from './fp-menu-label.css'; 5 | 6 | /** 7 | * @tag fp-menu-label 8 | * @summary Finpro Menu Label component 9 | * 10 | * @csspart base - The component's base wrapper. 11 | */ 12 | @customElement('fp-menu-label') 13 | export default class FpMenuLabel extends FinproElement { 14 | static get styles(): CSSResultGroup { 15 | return [style] 16 | } 17 | 18 | render(): TemplateResult { 19 | return html` `; 20 | } 21 | } 22 | 23 | declare global { 24 | interface HTMLElementTagNameMap { 25 | 'fp-menu-label': FpMenuLabel; 26 | } 27 | } -------------------------------------------------------------------------------- /src/components/fp-menu/fp-menu.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | position: relative; 4 | background: var(--fp-color-primary-background); 5 | border: solid 2px var(--fp-color-primary); 6 | border-radius: var(--fp-border-radius-s); 7 | padding: var(--fp-size-s) 0; 8 | overflow: auto; 9 | overscroll-behavior: none; 10 | } 11 | 12 | ::slotted(fp-divider) { 13 | --spacing: var(--fp-size-s); 14 | } -------------------------------------------------------------------------------- /src/components/fp-progress-indicator/fp-progress-indicator.css: -------------------------------------------------------------------------------- 1 | .progress-indicator { 2 | --max: 100; 3 | --value: 0; 4 | --value-color: var(--fp-color-success); 5 | --height: var(--fp-size-2xs); 6 | --radius: var(--fp-size-3xs); 7 | 8 | position: relative; 9 | background-color: var(--fp-color-secondary-background); 10 | height: var(--height); 11 | border-radius: var(--radius); 12 | width: 100%; 13 | } 14 | 15 | .progress-indicator::before { 16 | content: ''; 17 | position: absolute; 18 | height: 100%; 19 | width: calc(100% / var(--max) * var(--value)); 20 | background-color: var(--value-color); 21 | border-radius: var(--radius); 22 | } 23 | 24 | :host([size='small']) .progress-indicator { 25 | --height: var(--fp-size-3xs); 26 | --radius: var(--fp-size-4xs); 27 | } 28 | 29 | :host([size='large']) .progress-indicator { 30 | --height: var(--fp-size-xs); 31 | --radius: 6px; 32 | } 33 | 34 | :host([failed]) .progress-indicator { 35 | --value-color: var(--fp-color-danger); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/fp-qr-code/fp-qr-code.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | } -------------------------------------------------------------------------------- /src/components/fp-radio-group/fp-radio-group.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: row; 4 | } 5 | 6 | fieldset { 7 | border: none; 8 | padding: 0; 9 | } 10 | 11 | legend { 12 | font: var(--fp-font-title-3-medium); 13 | color: var(--fp-color-content-primary); 14 | } 15 | 16 | .options { 17 | display: flex; 18 | flex-flow: var(--fp-radio-direction, column) wrap; 19 | gap: 16px; 20 | margin-block: var(--fp-size-xs); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/fp-tab-group/fp-tab-panel/fp-tab-panel.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: none; 3 | border-radius: 0 0 var(--fp-border-radius-l) var(--fp-border-radius-l); 4 | } 5 | 6 | :host([visible]) { 7 | display: block; 8 | padding: var(--fp-size-3xl); 9 | background-color: var(--fp-color-primary-background); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/fp-tooltip/fp-tooltip.css: -------------------------------------------------------------------------------- 1 | .trigger { 2 | display: inline-block; 3 | cursor: pointer; 4 | } 5 | 6 | .tooltip { 7 | position: fixed; 8 | box-sizing: border-box; 9 | border: none; 10 | background-color: var(--fp-color-secondary); 11 | color: var(--fp-color-content-primary-contrast); 12 | border-radius: var(--fp-size-3xs); 13 | pointer-events: none; 14 | font: var(--fp-font-title-3-regular); 15 | padding: var(--fp-size-m); 16 | z-index: 999; 17 | width: max-content; 18 | hyphens: auto; 19 | 20 | --max-viewport: calc(100vw - var(--fp-size-s)); 21 | --tooltip-max-width: 424px; 22 | 23 | max-width: min(var(--max-viewport), var(--tooltip-max-width)); 24 | } 25 | 26 | .tooltip:not(.visible) { 27 | visibility: hidden; 28 | } 29 | 30 | .arrow { 31 | position: absolute; 32 | background-color: var(--fp-color-secondary); 33 | width: var(--fp-size-2xs); 34 | height: var(--fp-size-2xs); 35 | transform: rotate(45deg); 36 | } 37 | -------------------------------------------------------------------------------- /src/imports.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' { 2 | const value: string; 3 | export default value; 4 | } 5 | declare module '*.jpg' { 6 | const value: string; 7 | export default value; 8 | } 9 | declare module '*.svg' { 10 | const content: string; 11 | export default content; 12 | } 13 | declare module '*.css'; 14 | -------------------------------------------------------------------------------- /src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | declare global { 4 | interface Window { 5 | HTMLDialogElement: HTMLElement; 6 | } 7 | } -------------------------------------------------------------------------------- /src/utilities/asset-paths.test.ts: -------------------------------------------------------------------------------- 1 | import { expect } from '@open-wc/testing'; 2 | 3 | describe('set-paths utilities', () => { 4 | describe('getIconPath', () => { 5 | it('should return assets path relative to current module path', async () => { 6 | const { getIconPath } = await import('./asset-paths'); 7 | 8 | const testPath = 'src/utilities'; 9 | 10 | const testRunnerBasePath = document.baseURI.split('/').slice(0, -1).join('/'); 11 | 12 | expect(getIconPath()).to.equal(`${testRunnerBasePath}/${testPath}/assets`); 13 | }); 14 | }); 15 | 16 | describe('setIconPath', () => { 17 | it('should set icon path', async () => { 18 | const testIconPath = 'http://example.com/path/to/icons'; 19 | const { getIconPath, setIconPath } = await import('./asset-paths'); 20 | setIconPath(testIconPath); 21 | 22 | expect(getIconPath()).to.equal(testIconPath); 23 | }); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/utilities/asset-paths.ts: -------------------------------------------------------------------------------- 1 | let iconPath = './assets'; 2 | 3 | export function setIconPath(path: string) { 4 | iconPath = path; 5 | } 6 | 7 | export function getIconPath() { 8 | return iconPath; 9 | } 10 | 11 | const modulePath = import.meta.url; 12 | 13 | if (modulePath) { 14 | setIconPath(modulePath.split('/').slice(0, -1).concat('assets').join('/')); 15 | } 16 | -------------------------------------------------------------------------------- /src/utilities/event.ts: -------------------------------------------------------------------------------- 1 | export interface EventOptions { 2 | bubbles?: boolean; 3 | cancelable?: boolean; 4 | composed?: boolean; 5 | } 6 | 7 | export interface EventDispatcher { 8 | (value: T, options?: EventOptions): void; 9 | } 10 | 11 | function dispatcher(target: HTMLElement, eventName: string): EventDispatcher { 12 | return function (value: T, options?: EventOptions) { 13 | target.dispatchEvent( 14 | new CustomEvent(eventName, { 15 | detail: value, 16 | bubbles: true, 17 | cancelable: false, 18 | composed: true, 19 | ...options, 20 | }) 21 | ); 22 | }; 23 | } 24 | 25 | export function event(customName?: string) { 26 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 27 | return (protoOrDescriptor: any, name: string): any => { 28 | const descriptor = { 29 | get(this: HTMLElement) { 30 | return dispatcher(this, customName || name); 31 | }, 32 | enumerable: true, 33 | configurable: true, 34 | }; 35 | 36 | Object.defineProperty(protoOrDescriptor, name, descriptor); 37 | }; 38 | } 39 | -------------------------------------------------------------------------------- /src/utilities/form-control.ts: -------------------------------------------------------------------------------- 1 | import { maxLengthValidator } from "@open-wc/form-control"; 2 | 3 | 4 | const validityStates: Array = [ 5 | 'valueMissing', 6 | 'typeMismatch', 7 | 'tooLong', 8 | 'tooShort', 9 | 'rangeUnderflow', 10 | 'rangeOverflow', 11 | 'badInput', 12 | 'customError', 13 | ]; 14 | 15 | export const innerInputValidators = validityStates.map(key => ({ 16 | key, 17 | isValid(instance: HTMLElement & { validationTarget: HTMLInputElement }) { 18 | if (instance.validationTarget) { 19 | return !instance.validationTarget.validity[key]; 20 | } 21 | return true; 22 | }, 23 | })); 24 | 25 | export const textareaLengthValidator = { 26 | ...maxLengthValidator, 27 | isValid(instance: HTMLElement & { validationTarget: HTMLTextAreaElement }) { 28 | if(instance.validationTarget && instance.getAttribute('maxlength')){ 29 | return (Number(instance.getAttribute('maxlength')) >= instance.validationTarget.value.length); 30 | } 31 | return true; 32 | } 33 | }; 34 | 35 | export const textAreaValidators = [ 36 | ...innerInputValidators, 37 | textareaLengthValidator 38 | ] 39 | -------------------------------------------------------------------------------- /src/utilities/fp-icon-mock.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used for mocking `fp-icon` component in our tests. 3 | * Check `web-test-runner.config.mjs` file for more information. 4 | */ 5 | export default customElements.define('fp-icon', class extends HTMLElement {}); 6 | -------------------------------------------------------------------------------- /src/utilities/icon-mock.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used for mocking `fp-icon` component in our tests. 3 | * Check `web-test-runner.config.mjs` file for more information. 4 | */ 5 | export default customElements.define('fp-icon', class extends HTMLElement {}); 6 | -------------------------------------------------------------------------------- /src/utilities/string-boolean.converter.test.ts: -------------------------------------------------------------------------------- 1 | import { stringBooleanConverter } from './string-boolean.converter'; 2 | import { expect } from '@open-wc/testing'; 3 | 4 | describe('fp-alert', () => { 5 | it('is defined', () => { 6 | const { fromAttribute } = stringBooleanConverter(); 7 | if (!fromAttribute) return; 8 | const trueResult = fromAttribute('true'); 9 | const falseResult = fromAttribute('false'); 10 | const anyResult = fromAttribute('any'); 11 | expect(trueResult).to.eq(true); 12 | expect(falseResult).to.eq(false); 13 | expect(anyResult).to.eq('any'); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/utilities/string-boolean.converter.ts: -------------------------------------------------------------------------------- 1 | import type { ComplexAttributeConverter } from 'lit'; 2 | 3 | export const stringBooleanConverter = (): ComplexAttributeConverter => { 4 | return { 5 | fromAttribute: (value: string): string | boolean => { 6 | if (!value || value === 'true') return true; 7 | if (value === 'false') return false; 8 | return value; 9 | }, 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "module": "esnext", 5 | "lib": [ 6 | "es2017", 7 | "dom", 8 | "dom.iterable" 9 | ], 10 | "declaration": true, 11 | "declarationMap": true, 12 | "sourceMap": true, 13 | "inlineSources": true, 14 | "outDir": "dist", 15 | "rootDir": "src", 16 | "strict": true, 17 | "allowUnreachableCode": false, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noImplicitReturns": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noImplicitAny": true, 23 | "noImplicitThis": true, 24 | "moduleResolution": "node", 25 | "allowSyntheticDefaultImports": true, 26 | "experimentalDecorators": true, 27 | "forceConsistentCasingInFileNames": true, 28 | "useDefineForClassFields": false, 29 | "strictPropertyInitialization": false, 30 | "skipLibCheck": true, 31 | "resolveJsonModule": true, 32 | "jsx": "react", 33 | "jsxFactory": "h", 34 | "plugins": [ 35 | { 36 | "name": "ts-lit-plugin", 37 | "strict": true 38 | } 39 | ] 40 | }, 41 | "include": [ 42 | "./src/**/*.ts", 43 | "./src/**/*/*.test.ts" 44 | ], 45 | "exclude": [] 46 | } --------------------------------------------------------------------------------