├── .gitignore ├── .gitmodules ├── Dockerfile ├── LICENSE ├── README.md ├── background.png ├── docker-compose.yml ├── icon.icns ├── icon.ico ├── package.json ├── public ├── WorldMapSquare.png ├── crda-logo.svg ├── deployment-strategy.jpeg ├── electron.js ├── index.html ├── manifest.json └── spinner.svg ├── r3-tooling-design-system ├── r3-tooling-design-system-dev.tar.gz └── r3-tooling-design-system-dev │ ├── lib │ ├── assets │ │ ├── css │ │ │ ├── fonts.scss │ │ │ ├── main.css │ │ │ ├── shared.scss │ │ │ ├── styles.css │ │ │ └── typography.scss │ │ ├── fonts │ │ │ ├── PTSans │ │ │ │ ├── PTSans-Bold.ttf │ │ │ │ └── PTSans-Regular.ttf │ │ │ └── Poppins │ │ │ │ └── Poppins-SemiBold.ttf │ │ └── img │ │ │ ├── img--card--example.png │ │ │ ├── logo--r3.svg │ │ │ └── pictogram │ │ │ ├── pictogram--astronaut--fishing.svg │ │ │ ├── pictogram--astronaut--flight.svg │ │ │ ├── pictogram--astronaut--hello.svg │ │ │ ├── pictogram--astronaut--sitting_on_planet.svg │ │ │ ├── pictogram--astronaut--wave.svg │ │ │ ├── pictogram--astronaut--with_flag.svg │ │ │ ├── pictogram--essentials--accept.svg │ │ │ ├── pictogram--essentials--add.svg │ │ │ ├── pictogram--essentials--airplane.svg │ │ │ ├── pictogram--essentials--battery.svg │ │ │ ├── pictogram--essentials--calendar.svg │ │ │ ├── pictogram--essentials--clock.svg │ │ │ ├── pictogram--essentials--code.svg │ │ │ ├── pictogram--essentials--compass.svg │ │ │ ├── pictogram--essentials--decline.svg │ │ │ ├── pictogram--essentials--diamond.svg │ │ │ ├── pictogram--essentials--earth.svg │ │ │ ├── pictogram--essentials--hide.svg │ │ │ ├── pictogram--essentials--home.svg │ │ │ ├── pictogram--essentials--lightbulb.svg │ │ │ ├── pictogram--essentials--lock.svg │ │ │ ├── pictogram--essentials--network.svg │ │ │ ├── pictogram--essentials--notification.svg │ │ │ ├── pictogram--essentials--power_button.svg │ │ │ ├── pictogram--essentials--profile.svg │ │ │ ├── pictogram--essentials--refresh.svg │ │ │ ├── pictogram--essentials--remove.svg │ │ │ ├── pictogram--essentials--security.svg │ │ │ ├── pictogram--essentials--show.svg │ │ │ ├── pictogram--essentials--style_code.svg │ │ │ ├── pictogram--essentials--tools.svg │ │ │ ├── pictogram--essentials--waiting.svg │ │ │ ├── pictogram--essentials--warning.svg │ │ │ ├── pictogram--essentials--write.svg │ │ │ ├── pictogram--essentials--write_message.svg │ │ │ ├── pictogram--files--approve.svg │ │ │ ├── pictogram--files--delete.svg │ │ │ ├── pictogram--files--edit.svg │ │ │ ├── pictogram--files--loading.svg │ │ │ ├── pictogram--files--lock.svg │ │ │ ├── pictogram--files--options.svg │ │ │ ├── pictogram--files--search.svg │ │ │ ├── pictogram--files--unlock.svg │ │ │ ├── pictogram--finance--analysis.svg │ │ │ ├── pictogram--finance--bank_cheque.svg │ │ │ ├── pictogram--finance--cash_analysis.svg │ │ │ ├── pictogram--finance--credit_card.svg │ │ │ ├── pictogram--finance--global_currency.svg │ │ │ ├── pictogram--finance--global_funding.svg │ │ │ ├── pictogram--finance--investment_banking.svg │ │ │ ├── pictogram--finance--invoice.svg │ │ │ ├── pictogram--finance--money_analysis.svg │ │ │ ├── pictogram--finance--money_bag.svg │ │ │ ├── pictogram--finance--money_growth.svg │ │ │ ├── pictogram--finance--money_growth_analysis.svg │ │ │ ├── pictogram--finance--money_growth_graph.svg │ │ │ ├── pictogram--finance--money_growth_trend.svg │ │ │ ├── pictogram--finance--percentage_investment.svg │ │ │ ├── pictogram--finance--piggy_bank.svg │ │ │ ├── pictogram--finance--safe_investment.svg │ │ │ ├── pictogram--finance--searching_for_cash.svg │ │ │ ├── pictogram--finance--security.svg │ │ │ ├── pictogram--finance--time_is_money.svg │ │ │ ├── pictogram--finance--wallet.svg │ │ │ ├── pictogram--folders--approve.svg │ │ │ ├── pictogram--folders--delete.svg │ │ │ ├── pictogram--folders--edit.svg │ │ │ ├── pictogram--folders--loading.svg │ │ │ ├── pictogram--folders--lock.svg │ │ │ ├── pictogram--folders--options.svg │ │ │ ├── pictogram--folders--search.svg │ │ │ ├── pictogram--folders--unlock.svg │ │ │ ├── pictogram--wireless--404.svg │ │ │ ├── pictogram--wireless--achievement.svg │ │ │ ├── pictogram--wireless--browser_search.svg │ │ │ ├── pictogram--wireless--bug.svg │ │ │ ├── pictogram--wireless--cloud.svg │ │ │ ├── pictogram--wireless--download.svg │ │ │ ├── pictogram--wireless--download_files.svg │ │ │ ├── pictogram--wireless--email.svg │ │ │ ├── pictogram--wireless--energy.svg │ │ │ ├── pictogram--wireless--global.svg │ │ │ ├── pictogram--wireless--history.svg │ │ │ ├── pictogram--wireless--internet.svg │ │ │ ├── pictogram--wireless--loading.svg │ │ │ ├── pictogram--wireless--locked.svg │ │ │ ├── pictogram--wireless--mark.svg │ │ │ ├── pictogram--wireless--password.svg │ │ │ ├── pictogram--wireless--printer.svg │ │ │ ├── pictogram--wireless--protected.svg │ │ │ ├── pictogram--wireless--receiving.svg │ │ │ ├── pictogram--wireless--save.svg │ │ │ ├── pictogram--wireless--search.svg │ │ │ ├── pictogram--wireless--search_results.svg │ │ │ ├── pictogram--wireless--secured.svg │ │ │ ├── pictogram--wireless--sending.svg │ │ │ ├── pictogram--wireless--settings.svg │ │ │ ├── pictogram--wireless--timed_out.svg │ │ │ ├── pictogram--wireless--unavailable.svg │ │ │ ├── pictogram--wireless--unlocked.svg │ │ │ ├── pictogram--wireless--view.svg │ │ │ ├── pictogram--wireless--waiting.svg │ │ │ ├── pictogram--wireless--wireless.svg │ │ │ └── pictogram--wireless--world_connection.svg │ ├── components │ │ ├── Atoms │ │ │ ├── Alert │ │ │ │ ├── Alert.code.md │ │ │ │ ├── Alert.d.ts │ │ │ │ ├── Alert.design.md │ │ │ │ ├── Alert.js │ │ │ │ ├── Alert.js.map │ │ │ │ ├── Alert.scss │ │ │ │ ├── Alert.test.d.ts │ │ │ │ ├── Alert.test.js │ │ │ │ └── Alert.test.js.map │ │ │ ├── Anchor │ │ │ │ ├── Anchor.code.md │ │ │ │ ├── Anchor.d.ts │ │ │ │ ├── Anchor.design.md │ │ │ │ ├── Anchor.js │ │ │ │ ├── Anchor.js.map │ │ │ │ ├── Anchor.test.d.ts │ │ │ │ ├── Anchor.test.js │ │ │ │ └── Anchor.test.js.map │ │ │ ├── AnchorLink │ │ │ │ ├── AnchorLink.code.md │ │ │ │ ├── AnchorLink.d.ts │ │ │ │ ├── AnchorLink.design.md │ │ │ │ ├── AnchorLink.js │ │ │ │ ├── AnchorLink.js.map │ │ │ │ ├── AnchorLink.scss │ │ │ │ ├── AnchorLink.test.d.ts │ │ │ │ ├── AnchorLink.test.js │ │ │ │ └── AnchorLink.test.js.map │ │ │ ├── Backdrop │ │ │ │ ├── Backdrop.d.ts │ │ │ │ ├── Backdrop.js │ │ │ │ └── Backdrop.js.map │ │ │ ├── Badge │ │ │ │ ├── Badge.code.md │ │ │ │ ├── Badge.d.ts │ │ │ │ ├── Badge.design.md │ │ │ │ ├── Badge.js │ │ │ │ ├── Badge.js.map │ │ │ │ ├── Badge.test.d.ts │ │ │ │ ├── Badge.test.js │ │ │ │ └── Badge.test.js.map │ │ │ ├── Button │ │ │ │ ├── Button.code.md │ │ │ │ ├── Button.d.ts │ │ │ │ ├── Button.design.md │ │ │ │ ├── Button.js │ │ │ │ ├── Button.js.map │ │ │ │ ├── Button.scss │ │ │ │ ├── Button.test.d.ts │ │ │ │ ├── Button.test.js │ │ │ │ └── Button.test.js.map │ │ │ ├── Card │ │ │ │ ├── Card.code.md │ │ │ │ ├── Card.d.ts │ │ │ │ ├── Card.design.md │ │ │ │ ├── Card.js │ │ │ │ ├── Card.js.map │ │ │ │ ├── Card.test.d.ts │ │ │ │ ├── Card.test.js │ │ │ │ └── Card.test.js.map │ │ │ ├── Checkbox │ │ │ │ ├── Checkbox.code.md │ │ │ │ ├── Checkbox.d.ts │ │ │ │ ├── Checkbox.design.md │ │ │ │ ├── Checkbox.js │ │ │ │ ├── Checkbox.js.map │ │ │ │ ├── Checkbox.test.d.ts │ │ │ │ ├── Checkbox.test.js │ │ │ │ └── Checkbox.test.js.map │ │ │ ├── CodeSnippet │ │ │ │ ├── CodeSnippet.code.md │ │ │ │ ├── CodeSnippet.d.ts │ │ │ │ ├── CodeSnippet.design.md │ │ │ │ ├── CodeSnippet.js │ │ │ │ ├── CodeSnippet.js.map │ │ │ │ ├── CodeSnippet.scss │ │ │ │ ├── CodeSnippet.test.d.ts │ │ │ │ ├── CodeSnippet.test.js │ │ │ │ └── CodeSnippet.test.js.map │ │ │ ├── DashboardItem │ │ │ │ ├── DashboardItem.code.md │ │ │ │ ├── DashboardItem.d.ts │ │ │ │ ├── DashboardItem.design.md │ │ │ │ ├── DashboardItem.js │ │ │ │ ├── DashboardItem.js.map │ │ │ │ ├── DashboardItem.test.d.ts │ │ │ │ ├── DashboardItem.test.js │ │ │ │ └── DashboardItem.test.js.map │ │ │ ├── DateTime │ │ │ │ ├── DateInput │ │ │ │ │ ├── DateInput.code.md │ │ │ │ │ ├── DateInput.d.ts │ │ │ │ │ ├── DateInput.design.md │ │ │ │ │ ├── DateInput.js │ │ │ │ │ ├── DateInput.js.map │ │ │ │ │ ├── DateInput.test.d.ts │ │ │ │ │ ├── DateInput.test.js │ │ │ │ │ └── DateInput.test.js.map │ │ │ │ ├── DateTime.scss │ │ │ │ ├── DateTimeInput │ │ │ │ │ ├── DateTimeInput.code.md │ │ │ │ │ ├── DateTimeInput.d.ts │ │ │ │ │ ├── DateTimeInput.design.md │ │ │ │ │ ├── DateTimeInput.js │ │ │ │ │ ├── DateTimeInput.js.map │ │ │ │ │ ├── DateTimeInput.test.d.ts │ │ │ │ │ ├── DateTimeInput.test.js │ │ │ │ │ └── DateTimeInput.test.js.map │ │ │ │ ├── DateTimeInputEl │ │ │ │ │ ├── DateTimeInputEl.d.ts │ │ │ │ │ ├── DateTimeInputEl.js │ │ │ │ │ ├── DateTimeInputEl.js.map │ │ │ │ │ ├── DateTimeInputEl.test.d.ts │ │ │ │ │ ├── DateTimeInputEl.test.js │ │ │ │ │ └── DateTimeInputEl.test.js.map │ │ │ │ └── TimeInput │ │ │ │ │ ├── TimeInput.code.md │ │ │ │ │ ├── TimeInput.d.ts │ │ │ │ │ ├── TimeInput.design.md │ │ │ │ │ ├── TimeInput.js │ │ │ │ │ ├── TimeInput.js.map │ │ │ │ │ ├── TimeInput.test.d.ts │ │ │ │ │ ├── TimeInput.test.js │ │ │ │ │ └── TimeInput.test.js.map │ │ │ ├── Divider │ │ │ │ ├── Divider.code.md │ │ │ │ ├── Divider.d.ts │ │ │ │ ├── Divider.design.md │ │ │ │ ├── Divider.js │ │ │ │ ├── Divider.js.map │ │ │ │ ├── Divider.scss │ │ │ │ ├── Divider.test.d.ts │ │ │ │ ├── Divider.test.js │ │ │ │ └── Divider.test.js.map │ │ │ ├── DownloadFile │ │ │ │ ├── DownloadFile.code.md │ │ │ │ ├── DownloadFile.d.ts │ │ │ │ ├── DownloadFile.design.md │ │ │ │ ├── DownloadFile.js │ │ │ │ ├── DownloadFile.js.map │ │ │ │ ├── DownloadFile.test.d.ts │ │ │ │ ├── DownloadFile.test.js │ │ │ │ └── DownloadFile.test.js.map │ │ │ ├── Dropdown │ │ │ │ ├── Dropdown.code.md │ │ │ │ ├── Dropdown.d.ts │ │ │ │ ├── Dropdown.design.md │ │ │ │ ├── Dropdown.js │ │ │ │ ├── Dropdown.js.map │ │ │ │ ├── Dropdown.scss │ │ │ │ ├── Dropdown.test.d.ts │ │ │ │ ├── Dropdown.test.js │ │ │ │ └── Dropdown.test.js.map │ │ │ ├── EmailInput │ │ │ │ ├── EmailInput.code.md │ │ │ │ ├── EmailInput.d.ts │ │ │ │ ├── EmailInput.design.md │ │ │ │ ├── EmailInput.js │ │ │ │ ├── EmailInput.js.map │ │ │ │ ├── EmailInput.test.d.ts │ │ │ │ ├── EmailInput.test.js │ │ │ │ └── EmailInput.test.js.map │ │ │ ├── ErrorMessage │ │ │ │ ├── ErrorMessage.d.ts │ │ │ │ ├── ErrorMessage.js │ │ │ │ ├── ErrorMessage.js.map │ │ │ │ ├── ErrorMessage.test.d.ts │ │ │ │ ├── ErrorMessage.test.js │ │ │ │ └── ErrorMessage.test.js.map │ │ │ ├── FileUpload │ │ │ │ ├── FileUpload.code.md │ │ │ │ ├── FileUpload.d.ts │ │ │ │ ├── FileUpload.design.md │ │ │ │ ├── FileUpload.js │ │ │ │ ├── FileUpload.js.map │ │ │ │ ├── FileUpload.scss │ │ │ │ ├── FileUpload.test.d.ts │ │ │ │ ├── FileUpload.test.js │ │ │ │ └── FileUpload.test.js.map │ │ │ ├── Grid │ │ │ │ ├── Column │ │ │ │ │ ├── Column.code.md │ │ │ │ │ ├── Column.d.ts │ │ │ │ │ ├── Column.design.md │ │ │ │ │ ├── Column.js │ │ │ │ │ └── Column.js.map │ │ │ │ ├── Container │ │ │ │ │ ├── Container.code.md │ │ │ │ │ ├── Container.d.ts │ │ │ │ │ ├── Container.design.md │ │ │ │ │ ├── Container.js │ │ │ │ │ └── Container.js.map │ │ │ │ └── Row │ │ │ │ │ ├── Row.code.md │ │ │ │ │ ├── Row.d.ts │ │ │ │ │ ├── Row.design.md │ │ │ │ │ ├── Row.js │ │ │ │ │ └── Row.js.map │ │ │ ├── HelpText │ │ │ │ ├── HelpText.d.ts │ │ │ │ ├── HelpText.js │ │ │ │ ├── HelpText.js.map │ │ │ │ ├── HelpText.test.d.ts │ │ │ │ ├── HelpText.test.js │ │ │ │ └── HelpText.test.js.map │ │ │ ├── IconButton │ │ │ │ ├── IconButton.code.md │ │ │ │ ├── IconButton.d.ts │ │ │ │ ├── IconButton.design.md │ │ │ │ ├── IconButton.js │ │ │ │ ├── IconButton.js.map │ │ │ │ ├── IconButton.test.d.ts │ │ │ │ ├── IconButton.test.js │ │ │ │ └── IconButton.test.js.map │ │ │ ├── IconCustom │ │ │ │ ├── IconCustom.code.md │ │ │ │ ├── IconCustom.d.ts │ │ │ │ ├── IconCustom.design.md │ │ │ │ ├── IconCustom.js │ │ │ │ ├── IconCustom.js.map │ │ │ │ ├── IconCustom.test.d.ts │ │ │ │ ├── IconCustom.test.js │ │ │ │ └── IconCustom.test.js.map │ │ │ ├── Loader │ │ │ │ ├── Loader.code.md │ │ │ │ ├── Loader.d.ts │ │ │ │ ├── Loader.design.md │ │ │ │ ├── Loader.js │ │ │ │ ├── Loader.js.map │ │ │ │ ├── Loader.scss │ │ │ │ ├── Loader.test.d.ts │ │ │ │ ├── Loader.test.js │ │ │ │ └── Loader.test.js.map │ │ │ ├── MultiSelect │ │ │ │ ├── MultiSelect.code.md │ │ │ │ ├── MultiSelect.d.ts │ │ │ │ ├── MultiSelect.design.md │ │ │ │ ├── MultiSelect.js │ │ │ │ ├── MultiSelect.js.map │ │ │ │ ├── MultiSelect.test.d.ts │ │ │ │ ├── MultiSelect.test.js │ │ │ │ ├── MultiSelect.test.js.map │ │ │ │ ├── MultiSelectInput.d.ts │ │ │ │ ├── MultiSelectInput.js │ │ │ │ ├── MultiSelectInput.js.map │ │ │ │ ├── MultiSelectInput.test.d.ts │ │ │ │ ├── MultiSelectInput.test.js │ │ │ │ └── MultiSelectInput.test.js.map │ │ │ ├── NumberInput │ │ │ │ ├── NumberInput.code.md │ │ │ │ ├── NumberInput.css │ │ │ │ ├── NumberInput.d.ts │ │ │ │ ├── NumberInput.design.md │ │ │ │ ├── NumberInput.js │ │ │ │ ├── NumberInput.js.map │ │ │ │ ├── NumberInput.test.d.ts │ │ │ │ ├── NumberInput.test.js │ │ │ │ └── NumberInput.test.js.map │ │ │ ├── Option │ │ │ │ ├── Option.d.ts │ │ │ │ ├── Option.js │ │ │ │ ├── Option.js.map │ │ │ │ ├── Option.test.d.ts │ │ │ │ ├── Option.test.js │ │ │ │ └── Option.test.js.map │ │ │ ├── Pagination │ │ │ │ ├── Pagination.code.md │ │ │ │ ├── Pagination.d.ts │ │ │ │ ├── Pagination.design.md │ │ │ │ ├── Pagination.js │ │ │ │ ├── Pagination.js.map │ │ │ │ ├── Pagination.test.d.ts │ │ │ │ ├── Pagination.test.js │ │ │ │ └── Pagination.test.js.map │ │ │ ├── PasswordInput │ │ │ │ ├── PasswordInput.code.md │ │ │ │ ├── PasswordInput.d.ts │ │ │ │ ├── PasswordInput.design.md │ │ │ │ ├── PasswordInput.js │ │ │ │ ├── PasswordInput.js.map │ │ │ │ ├── PasswordInput.test.d.ts │ │ │ │ ├── PasswordInput.test.js │ │ │ │ └── PasswordInput.test.js.map │ │ │ ├── PhoneInput │ │ │ │ ├── PhoneInput.code.md │ │ │ │ ├── PhoneInput.d.ts │ │ │ │ ├── PhoneInput.design.md │ │ │ │ ├── PhoneInput.js │ │ │ │ ├── PhoneInput.js.map │ │ │ │ ├── PhoneInput.test.d.ts │ │ │ │ ├── PhoneInput.test.js │ │ │ │ └── PhoneInput.test.js.map │ │ │ ├── Playground │ │ │ │ ├── Playground.d.ts │ │ │ │ ├── Playground.js │ │ │ │ ├── Playground.js.map │ │ │ │ ├── Playground.scss │ │ │ │ ├── Playground.test.d.ts │ │ │ │ ├── Playground.test.js │ │ │ │ └── Playground.test.js.map │ │ │ ├── ProgressIndicator │ │ │ │ ├── ProgressIndicator.code.md │ │ │ │ ├── ProgressIndicator.d.ts │ │ │ │ ├── ProgressIndicator.design.md │ │ │ │ ├── ProgressIndicator.js │ │ │ │ ├── ProgressIndicator.js.map │ │ │ │ ├── ProgressIndicator.test.d.ts │ │ │ │ ├── ProgressIndicator.test.js │ │ │ │ └── ProgressIndicator.test.js.map │ │ │ ├── RadioButton │ │ │ │ ├── RadioButton.d.ts │ │ │ │ ├── RadioButton.js │ │ │ │ ├── RadioButton.js.map │ │ │ │ ├── RadioButton.test.d.ts │ │ │ │ ├── RadioButton.test.js │ │ │ │ └── RadioButton.test.js.map │ │ │ ├── RadioGroup │ │ │ │ ├── RadioGroup.code.md │ │ │ │ ├── RadioGroup.d.ts │ │ │ │ ├── RadioGroup.design.md │ │ │ │ ├── RadioGroup.js │ │ │ │ ├── RadioGroup.js.map │ │ │ │ ├── RadioGroup.test.d.ts │ │ │ │ ├── RadioGroup.test.js │ │ │ │ └── RadioGroup.test.js.map │ │ │ ├── Select │ │ │ │ ├── Select.code.md │ │ │ │ ├── Select.d.ts │ │ │ │ ├── Select.design.md │ │ │ │ ├── Select.js │ │ │ │ ├── Select.js.map │ │ │ │ ├── Select.test.d.ts │ │ │ │ ├── Select.test.js │ │ │ │ └── Select.test.js.map │ │ │ ├── Skeleton │ │ │ │ ├── Skeleton.code.md │ │ │ │ ├── Skeleton.d.ts │ │ │ │ ├── Skeleton.design.md │ │ │ │ ├── Skeleton.js │ │ │ │ ├── Skeleton.js.map │ │ │ │ ├── Skeleton.test.d.ts │ │ │ │ ├── Skeleton.test.js │ │ │ │ └── Skeleton.test.js.map │ │ │ ├── Slider │ │ │ │ ├── Slider.code.md │ │ │ │ ├── Slider.css │ │ │ │ ├── Slider.d.ts │ │ │ │ ├── Slider.design.md │ │ │ │ ├── Slider.js │ │ │ │ ├── Slider.js.map │ │ │ │ ├── Slider.test.d.ts │ │ │ │ ├── Slider.test.js │ │ │ │ └── Slider.test.js.map │ │ │ ├── Table │ │ │ │ ├── Table.code.md │ │ │ │ ├── Table.d.ts │ │ │ │ ├── Table.design.md │ │ │ │ ├── Table.js │ │ │ │ ├── Table.js.map │ │ │ │ ├── Table.scss │ │ │ │ ├── Table.test.d.ts │ │ │ │ ├── Table.test.js │ │ │ │ └── Table.test.js.map │ │ │ ├── Tabs │ │ │ │ ├── Tab │ │ │ │ │ ├── Tab.d.ts │ │ │ │ │ ├── Tab.js │ │ │ │ │ ├── Tab.js.map │ │ │ │ │ ├── Tab.scss │ │ │ │ │ ├── Tab.test.d.ts │ │ │ │ │ ├── Tab.test.js │ │ │ │ │ └── Tab.test.js.map │ │ │ │ ├── Tabs.code.md │ │ │ │ ├── Tabs.d.ts │ │ │ │ ├── Tabs.design.md │ │ │ │ ├── Tabs.js │ │ │ │ ├── Tabs.js.map │ │ │ │ ├── Tabs.scss │ │ │ │ ├── Tabs.test.d.ts │ │ │ │ ├── Tabs.test.js │ │ │ │ └── Tabs.test.js.map │ │ │ ├── TextInput │ │ │ │ ├── TextInput.code.md │ │ │ │ ├── TextInput.d.ts │ │ │ │ ├── TextInput.design.md │ │ │ │ ├── TextInput.js │ │ │ │ ├── TextInput.js.map │ │ │ │ ├── TextInput.test.d.ts │ │ │ │ ├── TextInput.test.js │ │ │ │ └── TextInput.test.js.map │ │ │ ├── Textarea │ │ │ │ ├── Textarea.code.md │ │ │ │ ├── Textarea.d.ts │ │ │ │ ├── Textarea.design.md │ │ │ │ ├── Textarea.js │ │ │ │ ├── Textarea.js.map │ │ │ │ ├── Textarea.test.d.ts │ │ │ │ ├── Textarea.test.js │ │ │ │ └── Textarea.test.js.map │ │ │ ├── Toggle │ │ │ │ ├── Toggle.code.md │ │ │ │ ├── Toggle.d.ts │ │ │ │ ├── Toggle.design.md │ │ │ │ ├── Toggle.js │ │ │ │ ├── Toggle.js.map │ │ │ │ ├── Toggle.scss │ │ │ │ ├── Toggle.test.d.ts │ │ │ │ ├── Toggle.test.js │ │ │ │ └── Toggle.test.js.map │ │ │ ├── Tooltip │ │ │ │ ├── Tooltip.code.md │ │ │ │ ├── Tooltip.d.ts │ │ │ │ ├── Tooltip.design.md │ │ │ │ ├── Tooltip.js │ │ │ │ ├── Tooltip.js.map │ │ │ │ ├── Tooltip.scss │ │ │ │ ├── Tooltip.test.d.ts │ │ │ │ ├── Tooltip.test.js │ │ │ │ └── Tooltip.test.js.map │ │ │ └── TooltipWrapper │ │ │ │ ├── TooltipWrapper.code.md │ │ │ │ ├── TooltipWrapper.d.ts │ │ │ │ ├── TooltipWrapper.design.md │ │ │ │ ├── TooltipWrapper.js │ │ │ │ ├── TooltipWrapper.js.map │ │ │ │ ├── TooltipWrapper.test.d.ts │ │ │ │ ├── TooltipWrapper.test.js │ │ │ │ └── TooltipWrapper.test.js.map │ │ ├── Cells │ │ │ ├── Accordion │ │ │ │ ├── Accordion.code.md │ │ │ │ ├── Accordion.d.ts │ │ │ │ ├── Accordion.design.md │ │ │ │ ├── Accordion.js │ │ │ │ ├── Accordion.js.map │ │ │ │ ├── Accordion.scss │ │ │ │ ├── Accordion.test.d.ts │ │ │ │ ├── Accordion.test.js │ │ │ │ └── Accordion.test.js.map │ │ │ ├── BottomBar │ │ │ │ ├── BottomBar.code.md │ │ │ │ ├── BottomBar.d.ts │ │ │ │ ├── BottomBar.design.md │ │ │ │ ├── BottomBar.js │ │ │ │ ├── BottomBar.js.map │ │ │ │ ├── BottomBar.test.d.ts │ │ │ │ ├── BottomBar.test.js │ │ │ │ └── BottomBar.test.js.map │ │ │ ├── Breadcrumbs │ │ │ │ ├── BreadcrumbItem │ │ │ │ │ ├── BreadcrumbItem.d.ts │ │ │ │ │ ├── BreadcrumbItem.js │ │ │ │ │ ├── BreadcrumbItem.js.map │ │ │ │ │ ├── BreadcrumbItem.test.d.ts │ │ │ │ │ ├── BreadcrumbItem.test.js │ │ │ │ │ └── BreadcrumbItem.test.js.map │ │ │ │ ├── Breadcrumbs.code.md │ │ │ │ ├── Breadcrumbs.d.ts │ │ │ │ ├── Breadcrumbs.design.md │ │ │ │ ├── Breadcrumbs.js │ │ │ │ ├── Breadcrumbs.js.map │ │ │ │ ├── Breadcrumbs.test.d.ts │ │ │ │ ├── Breadcrumbs.test.js │ │ │ │ └── Breadcrumbs.test.js.map │ │ │ ├── Drawer │ │ │ │ ├── Drawer.code.md │ │ │ │ ├── Drawer.d.ts │ │ │ │ ├── Drawer.design.md │ │ │ │ ├── Drawer.js │ │ │ │ ├── Drawer.js.map │ │ │ │ ├── Drawer.test.d.ts │ │ │ │ ├── Drawer.test.js │ │ │ │ └── Drawer.test.js.map │ │ │ ├── EmptyState │ │ │ │ ├── EmptyState.code.md │ │ │ │ ├── EmptyState.d.ts │ │ │ │ ├── EmptyState.design.md │ │ │ │ ├── EmptyState.js │ │ │ │ ├── EmptyState.js.map │ │ │ │ ├── EmptyState.test.d.ts │ │ │ │ ├── EmptyState.test.js │ │ │ │ └── EmptyState.test.js.map │ │ │ ├── Form │ │ │ │ ├── Form.code.md │ │ │ │ ├── Form.d.ts │ │ │ │ ├── Form.design.md │ │ │ │ ├── Form.js │ │ │ │ ├── Form.js.map │ │ │ │ ├── Form.test.d.ts │ │ │ │ ├── Form.test.js │ │ │ │ └── Form.test.js.map │ │ │ ├── FormGroup │ │ │ │ ├── FormGroup.code.md │ │ │ │ ├── FormGroup.d.ts │ │ │ │ ├── FormGroup.design.md │ │ │ │ ├── FormGroup.js │ │ │ │ ├── FormGroup.js.map │ │ │ │ ├── FormGroup.test.d.ts │ │ │ │ ├── FormGroup.test.js │ │ │ │ └── FormGroup.test.js.map │ │ │ ├── Modal │ │ │ │ ├── Modal.code.md │ │ │ │ ├── Modal.d.ts │ │ │ │ ├── Modal.design.md │ │ │ │ ├── Modal.js │ │ │ │ ├── Modal.js.map │ │ │ │ ├── Modal.test.d.ts │ │ │ │ ├── Modal.test.js │ │ │ │ └── Modal.test.js.map │ │ │ ├── Notification │ │ │ │ ├── Notification.code.md │ │ │ │ ├── Notification.d.ts │ │ │ │ ├── Notification.design.md │ │ │ │ ├── Notification.js │ │ │ │ ├── Notification.js.map │ │ │ │ ├── Notification.scss │ │ │ │ ├── Notification.test.d.ts │ │ │ │ ├── Notification.test.js │ │ │ │ ├── Notification.test.js.map │ │ │ │ ├── Snackbar │ │ │ │ │ ├── Snackbar.code.md │ │ │ │ │ ├── Snackbar.d.ts │ │ │ │ │ ├── Snackbar.design.md │ │ │ │ │ ├── Snackbar.js │ │ │ │ │ ├── Snackbar.js.map │ │ │ │ │ ├── Snackbar.scss │ │ │ │ │ ├── Snackbar.test.d.ts │ │ │ │ │ ├── Snackbar.test.js │ │ │ │ │ └── Snackbar.test.js.map │ │ │ │ └── Toast │ │ │ │ │ ├── Toast.code.md │ │ │ │ │ ├── Toast.d.ts │ │ │ │ │ ├── Toast.design.md │ │ │ │ │ ├── Toast.js │ │ │ │ │ ├── Toast.js.map │ │ │ │ │ ├── Toast.scss │ │ │ │ │ ├── Toast.test.d.ts │ │ │ │ │ ├── Toast.test.js │ │ │ │ │ └── Toast.test.js.map │ │ │ ├── PageHeader │ │ │ │ ├── PageHeader.code.md │ │ │ │ ├── PageHeader.d.ts │ │ │ │ ├── PageHeader.design.md │ │ │ │ ├── PageHeader.js │ │ │ │ ├── PageHeader.js.map │ │ │ │ ├── PageHeader.scss │ │ │ │ ├── PageHeader.test.d.ts │ │ │ │ ├── PageHeader.test.js │ │ │ │ └── PageHeader.test.js.map │ │ │ ├── Popconfirm │ │ │ │ ├── Popconfirm.code.md │ │ │ │ ├── Popconfirm.d.ts │ │ │ │ ├── Popconfirm.design.md │ │ │ │ ├── Popconfirm.js │ │ │ │ ├── Popconfirm.js.map │ │ │ │ ├── Popconfirm.scss │ │ │ │ ├── Popconfirm.test.d.ts │ │ │ │ ├── Popconfirm.test.js │ │ │ │ └── Popconfirm.test.js.map │ │ │ ├── SideBar │ │ │ │ ├── SideBar.code.md │ │ │ │ ├── SideBar.d.ts │ │ │ │ ├── SideBar.design.md │ │ │ │ ├── SideBar.js │ │ │ │ ├── SideBar.js.map │ │ │ │ ├── SideBar.scss │ │ │ │ ├── SideBar.test.d.ts │ │ │ │ ├── SideBar.test.js │ │ │ │ ├── SideBar.test.js.map │ │ │ │ └── SideBarItem │ │ │ │ │ ├── SideBarItem.d.ts │ │ │ │ │ ├── SideBarItem.js │ │ │ │ │ ├── SideBarItem.js.map │ │ │ │ │ ├── SideBarItem.scss │ │ │ │ │ ├── SideBarItem.test.d.ts │ │ │ │ │ ├── SideBarItem.test.js │ │ │ │ │ └── SideBarItem.test.js.map │ │ │ └── TopNavBar │ │ │ │ ├── TopNavBar.code.md │ │ │ │ ├── TopNavBar.d.ts │ │ │ │ ├── TopNavBar.design.md │ │ │ │ ├── TopNavBar.js │ │ │ │ ├── TopNavBar.js.map │ │ │ │ ├── TopNavBar.scss │ │ │ │ ├── TopNavBar.test.d.ts │ │ │ │ ├── TopNavBar.test.js │ │ │ │ └── TopNavBar.test.js.map │ │ ├── Environment │ │ │ └── Pictogram │ │ │ │ ├── Pictogram.d.ts │ │ │ │ ├── Pictogram.js │ │ │ │ ├── Pictogram.js.map │ │ │ │ └── Pictogram.md │ │ └── Typography │ │ │ ├── Typography.d.ts │ │ │ ├── Typography.js │ │ │ └── Typography.js.map │ ├── exports.d.ts │ ├── exports.js │ ├── exports.js.map │ ├── index.scss │ ├── layouts │ │ ├── ChangePasswordExample.d.ts │ │ ├── ChangePasswordExample.js │ │ ├── ChangePasswordExample.js.map │ │ ├── ComponentsPreview.d.ts │ │ ├── ComponentsPreview.js │ │ ├── ComponentsPreview.js.map │ │ ├── DashboardExample.d.ts │ │ ├── DashboardExample.js │ │ ├── DashboardExample.js.map │ │ ├── LoginExample1.d.ts │ │ ├── LoginExample1.js │ │ ├── LoginExample1.js.map │ │ ├── LoginExample2.d.ts │ │ ├── LoginExample2.js │ │ ├── LoginExample2.js.map │ │ ├── LoginExample3.d.ts │ │ ├── LoginExample3.js │ │ ├── LoginExample3.js.map │ │ ├── PlaygroundsPreview.d.ts │ │ ├── PlaygroundsPreview.js │ │ ├── PlaygroundsPreview.js.map │ │ ├── TableExample.d.ts │ │ ├── TableExample.js │ │ └── TableExample.js.map │ ├── previewExports.d.ts │ ├── previewExports.js │ ├── previewExports.js.map │ └── utils │ │ ├── helpers.d.ts │ │ ├── helpers.js │ │ └── helpers.js.map │ └── package.json ├── src ├── Explorer.jsx ├── assets │ ├── global-map.png │ └── login-background.png ├── components │ ├── BoxWithTitle.jsx │ ├── DonutChart.jsx │ ├── Filter.jsx │ ├── Header.jsx │ ├── ListBoxWithTitle.jsx │ ├── NetworkParameter.jsx │ ├── NodeDiagnostic.jsx │ ├── PageTitle.jsx │ ├── Pin.jsx │ ├── SideMenu.jsx │ ├── SideMenuNew.jsx │ ├── SnackbarComponent.jsx │ ├── Splash.jsx │ └── Tile.jsx ├── corda.png ├── crda-logo.svg ├── index.js ├── index.scss ├── react-app-env.d.ts ├── screens │ ├── CordaNetwork.jsx │ ├── Dashboard.jsx │ ├── Login.jsx │ ├── Settings.jsx │ ├── TransactionExplorer.jsx │ ├── TransactionExplorerV1.jsx │ └── VaultExplorer.jsx ├── serviceWorker.js ├── store │ ├── Actions.js │ └── reducers │ │ ├── CommonReducer.js │ │ ├── DashboardReducer.js │ │ ├── ExplorerReducer.js │ │ ├── TxExplorerReducer.js │ │ └── VaultReducer.js └── styles │ ├── Dashboard.scss │ ├── Header.scss │ ├── Login.scss │ ├── Network.scss │ ├── SideMenu.scss │ ├── Tile.scss │ ├── Transaction.scss │ └── Vault.scss └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /release-builds 14 | /dist 15 | 16 | # misc 17 | .DS_Store 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | *.jar 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .vscode 27 | .idea 28 | 29 | /server/.idea 30 | /server/bin 31 | /server/build 32 | /server/.gradle 33 | 34 | server.jar 35 | 36 | package-lock.json 37 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "server"] 2 | path = server 3 | url = git@github.com:corda/node-server.git 4 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM nginx:stable-alpine 2 | COPY build /usr/share/nginx/html 3 | EXPOSE 80 4 | CMD ["nginx", "-g", "daemon off;"] 5 | 6 | -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/background.png -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.7' 2 | services: 3 | node-explorer: 4 | image: r3dockerhub/node-explorer:v0.1.2 5 | ports: 6 | - "3000:80" 7 | restart: always 8 | depends_on: 9 | - node-server 10 | 11 | node-server: 12 | image: r3dockerhub/node-server:v0.1.2 13 | ports: 14 | - "8580:8580" 15 | restart: always 16 | volumes: 17 | - ${CORDAPPS_PATH}:/cordapps 18 | network_mode: "host" 19 | -------------------------------------------------------------------------------- /icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/icon.icns -------------------------------------------------------------------------------- /icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/icon.ico -------------------------------------------------------------------------------- /public/WorldMapSquare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/public/WorldMapSquare.png -------------------------------------------------------------------------------- /public/deployment-strategy.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/public/deployment-strategy.jpeg -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "theme_color": "#000000", 7 | "background_color": "#ffffff" 8 | } 9 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev.tar.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/r3-tooling-design-system/r3-tooling-design-system-dev.tar.gz -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/css/fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Poppins'; 3 | src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype'); 4 | } 5 | 6 | @font-face { 7 | font-family: 'PT Sans'; 8 | src: url('../fonts/PTSans/PTSans-Regular.ttf') format('truetype'); 9 | font-weight: normal; 10 | } 11 | 12 | @font-face { 13 | font-family: 'PT Sans'; 14 | src: url('../fonts/PTSans/PTSans-Bold.ttf') format('truetype'); 15 | font-weight: bold; 16 | } 17 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/css/styles.css: -------------------------------------------------------------------------------- 1 | @import './fonts.scss'; 2 | 3 | @tailwind base; 4 | 5 | @tailwind components; 6 | 7 | @tailwind utilities; 8 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/fonts/PTSans/PTSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/fonts/PTSans/PTSans-Bold.ttf -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/fonts/PTSans/PTSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/fonts/PTSans/PTSans-Regular.ttf -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/fonts/Poppins/Poppins-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/fonts/Poppins/Poppins-SemiBold.ttf -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/img/img--card--example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/img/img--card--example.png -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/assets/img/logo--r3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Alert/Alert.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Alert.scss'; 3 | interface Props { 4 | variant: 'danger' | 'warning' | 'success'; 5 | className?: string; 6 | title?: string; 7 | withIcon?: boolean; 8 | [x: string]: any; 9 | } 10 | declare const previewConfig: { 11 | name: string; 12 | defaultState: { 13 | variant: string; 14 | withTitle: boolean; 15 | withIcon: boolean; 16 | componentProps: { 17 | variant: string; 18 | }; 19 | }; 20 | modifiers: { 21 | type: string; 22 | options: ({ 23 | name: string; 24 | properties: { 25 | title: string; 26 | withIcon?: undefined; 27 | }; 28 | } | { 29 | name: string; 30 | properties: { 31 | withIcon: boolean; 32 | title?: undefined; 33 | }; 34 | })[]; 35 | }; 36 | variant: { 37 | type: string; 38 | values: string[]; 39 | }; 40 | }; 41 | declare const Alert: React.FC; 42 | export default Alert; 43 | export { previewConfig }; 44 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Alert/Alert.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | &::before { 3 | content: ''; 4 | display: block; 5 | position: absolute; 6 | left: 0; 7 | top: 0; 8 | height: 100%; 9 | width: 8px; 10 | border-radius: 6px 0 0 6px; 11 | } 12 | 13 | &-danger::before { 14 | background-color: var(--color-red); 15 | } 16 | 17 | &-warning::before { 18 | background-color: var(--color-yellow); 19 | } 20 | 21 | &-success::before { 22 | background-color: var(--color-green); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Alert/Alert.test.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Anchor/Anchor.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | idToScrollTo: string; 5 | [x: string]: any; 6 | } 7 | declare const previewConfig: { 8 | name: string; 9 | defaultState: { 10 | componentProps: { 11 | idToScrollTo: string; 12 | }; 13 | }; 14 | }; 15 | declare const Anchor: React.FC; 16 | export default Anchor; 17 | export { previewConfig }; 18 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Anchor/Anchor.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Anchors can help users navigate through pages or send a link to a specific part of a page. Use the component preferable with H2 titles. The icon displayed before the text will copy the link to that particular section. Combine with Anchor links atom to create a page navigation.

4 | 5 | 6 | 7 |
8 | 9 | Spacing 10 | 11 | 12 | Directions 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Spacing

 23 | 24 | 25 |

There is 8px padding between the icon and the text.

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

Directions

 35 | 36 | 37 | 38 |

Use the anchor for level two headings (H2).

39 | 40 | 41 | 42 |

Don’t use the anchor for any other heading levels (H3, H4, etc.).

43 | 44 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Anchor/Anchor.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Anchor/Anchor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ9C,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,QAAQ;IACd,YAAY,EAAE;QACZ,cAAc,EAAE;YACd,YAAY,EAAE,SAAS;SACxB;KACF;CACF,CAAC;AAEF,IAAM,MAAM,GAAoB,UAAC,EAKhC;IAJC,IAAA,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACX,UAAU,cAJkB,yCAKhC,CADc;IAEb,OAAO,CACL,wBACE,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE,8BAA4B,SAAW,IAC9C,UAAU,eAEd,KAAC,UAAU,IACT,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,sGAAsG,EAChH,OAAO,EAAE;oBACP,OAAA,YAAY;wBACZ,SAAS,CAAC,SAAS,CAAC,SAAS,CAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAI,YAAc,CAAC;gBADxE,CACwE,WAE1E,EACD,QAAQ,aACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Anchor/Anchor.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Anchor/Anchor.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Anchor.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Anchor/Anchor.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,yCAAyC,CAAC;AACjD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IACvB,SAAS,EAAE;QACT,SAAS,EAAE,cAAO,CAAC;KACpB;CACF,CAAC,CAAC;AAEH,QAAQ,CAAC,sBAAsB,EAAE;IAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAE7C,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,MAAM,aAAC,YAAY,EAAC,QAAQ,gBAC3B,0CAAe,YACR,CACV,UAJgB,CAIf;QACF,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE;QAC1C,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,MAAM,aAAC,SAAS,EAAC,YAAY,EAAC,YAAY,EAAC,QAAQ,gBAClD,0CAAe,YACR,CACV,UAJgB,CAIf;QACF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,8CAA8C,EAAE;;;;;oBAC7C,SAAS,GAAG,MAAM,CAAC;oBACjB,SAAS,GAAK,MAAM,CAC1B,KAAC,MAAM,aAAC,YAAY,EAAE,SAAS,gBAC7B,0CAAe,YACR,CACV,UAJgB,CAIf;oBAEI,sBAAsB,GAAG,SAAS,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;oBAC1E,WAAM,SAAS,CAAC,KAAK,CAAC,sBAAsB,CAAC,EAAA;;oBAA7C,SAA6C,CAAC;oBAE9C,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,oBAAoB,CACxD,uBAAqB,SAAW,CACjC,CAAC;;;;SACH,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/AnchorLink/AnchorLink.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './AnchorLink.scss'; 3 | interface Props { 4 | to: string; 5 | className?: string; 6 | offsetEl?: Element; 7 | offset?: number; 8 | [x: string]: any; 9 | } 10 | declare const previewConfig: { 11 | name: string; 12 | defaultState: { 13 | componentProps: { 14 | to: string; 15 | }; 16 | }; 17 | }; 18 | declare const AnchorLink: React.FC; 19 | export default AnchorLink; 20 | export { previewConfig }; 21 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/AnchorLink/AnchorLink.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Anchors links help users navigate through pages. They are used as TOC for the specific page. Combine with Anchor atom to create a page navigation.

4 | 5 | 6 | 7 |
8 | 9 | Spacing 10 | 11 | 12 | Directions 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Spacing

 23 | 24 | 25 |

There is 8px padding between the icon and the text.

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

Directions

 35 | 36 | 37 | 38 |

Place the TOC directly below the header or breadcrumbs, or after the first few intro paragraphs.

39 | 40 | 41 | 42 |

Don’t place any headings or images above the TOC.

43 | 44 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/AnchorLink/AnchorLink.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"AnchorLink.js","sourceRoot":"","sources":["../../../../src/components/Atoms/AnchorLink/AnchorLink.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,mBAAmB,CAAC;AAU3B,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,aAAa;IACnB,YAAY,EAAE;QACZ,cAAc,EAAE;YACd,EAAE,EAAE,SAAS;SACd;KACF;CACF,CAAC;AAEF,IAAM,UAAU,GAAoB,UAAC,EAOpC;IANC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,cAAU,EAAV,MAAM,mBAAG,CAAC,KAAA,EACV,QAAQ,cAAA,EACL,UAAU,cANsB,qDAOpC,CADc;IAEP,IAAA,KAAoC,QAAQ,CAAC,QAAQ,CAAC,EAArD,aAAa,QAAA,EAAE,gBAAgB,QAAsB,CAAC;IAE7D,SAAS,CAAC;QACR,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAM,YAAY,GAAG,UAAC,KAAK,EAAE,IAAI;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACzC,IAAM,WAAW,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/E,IAAM,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;QAEtD,MAAM,CAAC,QAAQ,CAAC;YACd,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,sBACE,IAAI,EAAE,EAAE,CAAC,QAAQ,EAAE,EACnB,SAAS,EAAE,mEAAiE,SAAW,EACvF,OAAO,EAAE,UAAC,KAAK,IAAW,OAAA,YAAY,CAAC,KAAK,EAAE,EAAE,CAAC,EAAvB,CAAuB,IAC7C,UAAU,eAEd,KAAC,UAAU,IAAC,IAAI,EAAC,kBAAkB,EAAC,SAAS,EAAC,2BAA2B,WAAG,EAC5E,wBAAM,SAAS,EAAC,kBAAkB,gBAAE,QAAQ,YAAQ,aAClD,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/AnchorLink/AnchorLink.scss: -------------------------------------------------------------------------------- 1 | .anchor-link-text { 2 | position: relative; 3 | padding-bottom: 4px; 4 | font-weight: var(--font-bold); 5 | 6 | &::after { 7 | content: ' '; 8 | display: block; 9 | position: absolute; 10 | bottom: 0; 11 | height: 3px; 12 | width: 0%; 13 | transition: width 0.2s ease-in-out; 14 | background-color: var(--color-blue-300); 15 | } 16 | &:hover::after { 17 | width: 100%; 18 | } 19 | } -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/AnchorLink/AnchorLink.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Backdrop/Backdrop.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | show?: boolean; 4 | isTransparent?: boolean; 5 | closeOnClick?: boolean; 6 | parentComponentId: string; 7 | onClick?: () => void; 8 | [x: string]: any; 9 | } 10 | declare const Backdrop: React.FC; 11 | export default Backdrop; 12 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Backdrop/Backdrop.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Backdrop/Backdrop.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAW7D,IAAM,QAAQ,GAAoB,UAAC,EAOlC;IANC,IAAA,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,YAAY,kBAAA,EACZ,iBAAiB,uBAAA,EACd,UAAU,cANoB,yEAOlC,CADc;IAEb,IAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEjC,SAAS,CAAC;QACR,IAAM,kBAAkB,GAAG,WAAW,CAAC,OAAO,CAAC;QAE/C,IAAM,mBAAmB,GAAG,UAAC,KAAK;YAChC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE;gBACxC,OAAO,EAAE,CAAC;aACX;QACH,CAAC,CAAC;QAEF,IAAM,eAAe,GAAG,UAAC,KAAK;YAC5B,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,EAAE;gBACxB,IAAI,iBAAiB,KAAK,mBAAmB,CAAC,sBAAsB,EAAE,EAAE;oBACtE,OAAO,EAAE,CAAC;iBACX;aACF;QACH,CAAC,CAAC;QAEF,YAAY;YACV,kBAAkB,CAAC,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;QACpE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;QAEtD,OAAO;YACL,kBAAkB,CAAC,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC;YACrE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElC,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,uBACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,gEACT,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CACvC,IACE,UAAU,UACT,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Badge/Badge.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | customColour?: string; 5 | variant?: 'red' | 'yellow' | 'green' | 'blue' | 'gray'; 6 | whiteText?: boolean; 7 | [x: string]: any; 8 | } 9 | declare const previewConfig: { 10 | name: string; 11 | form: boolean; 12 | defaultState: { 13 | variant: string; 14 | whiteText: boolean; 15 | customColour: boolean; 16 | componentProps: { 17 | variant: string; 18 | }; 19 | }; 20 | modifiers: { 21 | type: string; 22 | options: ({ 23 | name: string; 24 | properties: { 25 | whiteText: boolean; 26 | customColour?: undefined; 27 | }; 28 | } | { 29 | name: string; 30 | properties: { 31 | customColour: string; 32 | whiteText?: undefined; 33 | }; 34 | })[]; 35 | }; 36 | variant: { 37 | type: string; 38 | values: string[]; 39 | }; 40 | }; 41 | declare const Badge: React.FC; 42 | export default Badge; 43 | export { previewConfig }; 44 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Badge/Badge.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,IAAI;IACV,YAAY,EAAE;QACZ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,KAAK;QAChB,YAAY,EAAE,KAAK;QACnB,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;SAChB;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,WAAW;gBACjB,UAAU,EAAE;oBACV,SAAS,EAAE,IAAI;iBAChB;aACF;YACD;gBACE,IAAI,EAAE,cAAc;gBACpB,UAAU,EAAE;oBACV,YAAY,EAAE,QAAQ;iBACvB;aACF;SACF;KACF;IACD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;KACnD;CACF,CAAC;AAEF,IAAM,KAAK,GAAoB,UAAC,EAO/B;IANC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACL,UAAU,cANiB,iEAO/B,CADc;IAEb,IAAM,eAAe,GACnB,OAAO,KAAK,MAAM;QAChB,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,OAAO,KAAK,QAAQ;YACtB,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,OAAO,KAAK,KAAK;gBACnB,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,OAAO,KAAK,OAAO;oBACrB,CAAC,CAAC,cAAc;oBAChB,CAAC,CAAC,0BAA0B,CAAC;IACjC,OAAO,CACL,uBACE,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,SAAS,EAAK,eAAe,UAC3B,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,qFACkC,SAAW,IACtF,UAAU,cAEb,QAAQ,YACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Badge/Badge.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Button/Button.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | &-tertiary-text { 3 | &::after { 4 | background-color: var(--color-blue-200); 5 | } 6 | } 7 | 8 | &-label-text { 9 | &:hover { 10 | &::after { 11 | background-color: var(--color-medium-light-gray-200); 12 | } 13 | } 14 | } 15 | 16 | &-labeldanger-text { 17 | &:hover { 18 | &::after { 19 | background-color: var(--color-red-300); 20 | } 21 | } 22 | } 23 | 24 | &-tertiary-text, 25 | &-label-text, 26 | &-labeldanger-text { 27 | &::after { 28 | content: ''; 29 | display: block; 30 | position: absolute; 31 | height: 3px; 32 | width: 0; 33 | transition: width 0.2s ease-in-out; 34 | } 35 | &:hover { 36 | &::after { 37 | width: 100%; 38 | transition: width 0.2s ease-in-out; 39 | } 40 | } 41 | } 42 | 43 | &-icon-rotate { 44 | animation: load-rotate 1.5s infinite linear; 45 | } 46 | 47 | @keyframes load-rotate { 48 | 0% { 49 | transform: rotate(0deg); 50 | } 51 | 100% { 52 | transform: rotate(360deg); 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Button/Button.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Card/Card.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | title: string; 4 | className?: string; 5 | alt?: string; 6 | dark?: boolean; 7 | icon?: string; 8 | image?: string; 9 | [x: string]: any; 10 | } 11 | declare const previewConfig: { 12 | name: string; 13 | defaultState: { 14 | background: string; 15 | image: boolean; 16 | icon: boolean; 17 | componentProps: { 18 | title: string; 19 | dark: boolean; 20 | }; 21 | }; 22 | modifiers: { 23 | type: string; 24 | options: ({ 25 | name: string; 26 | properties: { 27 | image: string; 28 | alt: string; 29 | icon?: undefined; 30 | }; 31 | } | { 32 | name: string; 33 | properties: { 34 | icon: string; 35 | image?: undefined; 36 | alt?: undefined; 37 | }; 38 | })[]; 39 | }; 40 | background: { 41 | type: string; 42 | options: { 43 | name: string; 44 | properties: { 45 | dark: boolean; 46 | }; 47 | }[]; 48 | }; 49 | }; 50 | declare const Card: React.FC; 51 | export default Card; 52 | export { previewConfig }; 53 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Card/Card.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAYvD,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE;QACZ,UAAU,EAAE,OAAO;QACnB,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK;QACX,cAAc,EAAE;YACd,KAAK,EAAE,4BAA4B;YACnC,IAAI,EAAE,KAAK;SACZ;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,KAAK,EACH,o2NAAo2N;oBACt2N,GAAG,EAAE,SAAS;iBACf;aACF;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,UAAU,EAAE;oBACV,IAAI,EAAE,aAAa;iBACpB;aACF;SACF;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,IAAI,EAAE,KAAK;iBACZ;aACF;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,UAAU,EAAE;oBACV,IAAI,EAAE,IAAI;iBACX;aACF;SACF;KACF;CACF,CAAC;AACF,IAAM,IAAI,GAAoB,UAAC,EAS9B;IARC,IAAA,KAAK,WAAA,EACL,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,GAAG,SAAA,EACH,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,UAAU,cARgB,kEAS9B,CADc;IAEb,OAAO,CACL,wBACE,SAAS,EAAE,0CACT,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,UACjC,SAAW,IACX,UAAU,eAEb,KAAK,IAAI,cAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,4BAA4B,WAAG,EAC9E,wBAAK,SAAS,EAAC,KAAK,iBACjB,IAAI,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,qBAAqB,WAAG,EACnE,uBAAK,SAAS,EAAC,qDAAqD,gBACjE,KAAK,YACF,EACN,KAAC,OAAO,IAAC,SAAS,EAAC,MAAM,WAAG,EAC5B,uBAAK,SAAS,EAAC,qEAAqE,gBACjF,QAAQ,YACL,aACF,aACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Card/Card.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Checkbox/Checkbox.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/CodeSnippet/CodeSnippet.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CodeSnippet.scss'; 3 | interface Props { 4 | className?: string; 5 | flush?: 'top' | 'right' | 'bottom' | 'left'; 6 | link?: string; 7 | withSandbox?: boolean; 8 | [x: string]: any; 9 | } 10 | declare const previewConfig: { 11 | name: string; 12 | defaultState: { 13 | flush: boolean; 14 | withSandbox: boolean; 15 | componentProps: {}; 16 | }; 17 | modifiers: { 18 | type: string; 19 | options: ({ 20 | name: string; 21 | properties: { 22 | withSandbox: boolean; 23 | link: string; 24 | flush?: undefined; 25 | }; 26 | } | { 27 | name: string; 28 | properties: { 29 | flush: string; 30 | withSandbox?: undefined; 31 | link?: undefined; 32 | }; 33 | })[]; 34 | }; 35 | }; 36 | declare const CodeSnippet: React.FC; 37 | export default CodeSnippet; 38 | export { previewConfig }; 39 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/CodeSnippet/CodeSnippet.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Code snippets are used to display re-usable source code.

4 | 5 | 6 | 7 |
8 | 9 | Variations 10 | 11 | 12 | Directions 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Variations

 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |

Directions

 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/CodeSnippet/CodeSnippet.scss: -------------------------------------------------------------------------------- 1 | .codesnippet-tooltip { 2 | top: 4px; 3 | right: -20px; 4 | } 5 | 6 | .codebox-text { 7 | word-break: break-all; 8 | } -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/CodeSnippet/CodeSnippet.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DashboardItem/DashboardItem.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { PictogramList } from '../../Environment/Pictogram/Pictogram'; 3 | interface Props extends Partial { 4 | alt?: string; 5 | className?: string; 6 | image?: string; 7 | withBackground?: boolean; 8 | onClick?: (any: any) => any; 9 | } 10 | declare const previewConfig: { 11 | name: string; 12 | defaultState: { 13 | withBackground: boolean; 14 | 'Image or icon': string; 15 | componentProps: { 16 | icon: string; 17 | withBackground: boolean; 18 | onClick: () => void; 19 | }; 20 | }; 21 | modifiers: { 22 | type: string; 23 | options: { 24 | name: string; 25 | properties: { 26 | withBackground: boolean; 27 | }; 28 | }[]; 29 | }; 30 | 'Image or icon': { 31 | type: string; 32 | options: ({ 33 | name: string; 34 | properties: { 35 | image: boolean; 36 | icon: string; 37 | }; 38 | } | { 39 | name: string; 40 | properties: { 41 | image: string; 42 | icon: boolean; 43 | }; 44 | })[]; 45 | }; 46 | }; 47 | declare const DashboardItem: React.FC; 48 | export default DashboardItem; 49 | export { previewConfig }; 50 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DashboardItem/DashboardItem.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"DashboardItem.js","sourceRoot":"","sources":["../../../../src/components/Atoms/DashboardItem/DashboardItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAW7C,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,gBAAgB;IACtB,YAAY,EAAE;QACZ,cAAc,EAAE,KAAK;QACrB,eAAe,EAAE,MAAM;QACvB,cAAc,EAAE;YACd,IAAI,EAAE,kBAAkB;YACxB,cAAc,EAAE,KAAK;YACrB,OAAO,EAAE,cAAO,CAAC;SAClB;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,gBAAgB;gBACtB,UAAU,EAAE;oBACV,cAAc,EAAE,IAAI;iBACrB;aACF;SACF;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,UAAU,EAAE;oBACV,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,kBAAkB;iBACzB;aACF;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,KAAK,EACH,0lBAA0lB;oBAC5lB,IAAI,EAAE,KAAK;iBACZ;aACF;SACF;KACF;CACF,CAAC;AAEF,IAAM,aAAa,GAAoB,UAAC,EAQvC;QAPC,GAAG,SAAA,EACH,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,OAAO,aAAA;IAEP,OAAO,CACL,wBACE,SAAS,EAAK,SAAS,sEACrB,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,WAC7B,cAAc,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAE,EACtD,OAAO,EAAE,OAAO,iBAEf,KAAK,CAAC,CAAC,CAAC,CACP,cACE,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,GAAG,IAAI,EAAE,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,kBAAkB,WAC5B,CACH,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,WAAG,CAC3C,EACD,wBAAM,SAAS,EAAC,2EAA2E,gBACxF,QAAQ,YACJ,aACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DashboardItem/DashboardItem.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/DateInput/DateInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/DateTimeInput/DateTimeInput.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Datetime pickers are used for selecting a point in time from past or future dates. If you need to provide option for time or date selection, use the time picker or date picker atoms.

4 | 5 | 6 | 7 |
8 | 9 | Structure 10 | 11 | 12 | Spacing 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Structure

 23 | 24 | 25 | 26 | 27 | 28 |
    29 |
  1. Label
    2. 30 |
  2. Input
    3. 31 |
  3. Field
    4. 32 |
  4. Icon
    5. 33 |
  5. Previous month
    6. 34 |
  6. Current month
    7. 35 |
  7. Current date
    8. 36 |
  8. Selected date
    9. 37 |
  9. Hour
    10. 38 |
  10. Minutes
    11. 39 |
  11. AM/PM
    12. 40 |
  12. Apply button
    13. 41 |
  13. Cancel button
    14. 42 |
43 | 44 | 45 | 46 |

Spacing

 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/DateTimeInput/DateTimeInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/DateTimeInputEl/DateTimeInputEl.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | id: string; 4 | defaultValue?: string; 5 | inputRef?: React.Ref; 6 | dark?: boolean; 7 | disabled?: boolean; 8 | invalid?: boolean; 9 | required?: boolean; 10 | type: string; 11 | modified?: boolean; 12 | [x: string]: any; 13 | } 14 | declare const CustomInput: React.FC; 15 | export default CustomInput; 16 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/DateTimeInputEl/DateTimeInputEl.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"DateTimeInputEl.js","sourceRoot":"","sources":["../../../../../src/components/Atoms/DateTime/DateTimeInputEl/DateTimeInputEl.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAM,WAAW,GAAoB,UAAC,EAWrC;IAVC,IAAA,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,QAAQ,cAAA,EACL,KAAK,cAV4B,iGAWrC,CADS;IAER,OAAO,CACL,yBACE,SAAS,EAAE,4JACT,YAAY,KAAK,EAAE;YACjB,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,0BAA0B,sCACD,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,WACjE,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAC9C,EACF,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,kBACQ,OAAO,mBACN,QAAQ,IACnB,KAAK,UACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/DateTimeInputEl/DateTimeInputEl.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DateTime/TimeInput/TimeInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.code.md: -------------------------------------------------------------------------------- 1 |

Playground

 2 | 3 | 4 | 5 | 6 | 7 |

Properties

 8 | 9 | | Property | Type | Required? | Notes | 10 | | :---------- | :------ | :-------- | :------------------------------------------------------------------------------------------------------------ | 11 | | className | string | no | Classnames can be passed to the component. | 12 | | dark | boolean | no | If present, the divider will be darker in colour. This is used when placing the divider on a dark background. | 13 | | Other Props | any | no | Any other props that a `
` element can take. These will be applied to the `
` element of the component. | 14 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Divider.scss'; 3 | interface Props { 4 | className?: string; 5 | dark?: boolean; 6 | [x: string]: any; 7 | } 8 | declare const previewConfig: { 9 | name: string; 10 | defaultState: { 11 | background: string; 12 | componentProps: { 13 | dark: boolean; 14 | }; 15 | }; 16 | background: { 17 | type: string; 18 | options: { 19 | name: string; 20 | properties: { 21 | dark: boolean; 22 | }; 23 | }[]; 24 | }; 25 | }; 26 | declare const Divider: React.FC; 27 | export default Divider; 28 | export { previewConfig }; 29 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,gBAAgB,CAAC;AAQxB,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,SAAS;IACf,YAAY,EAAE;QACZ,UAAU,EAAE,OAAO;QACnB,cAAc,EAAE;YACd,IAAI,EAAE,KAAK;SACZ;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,IAAI,EAAE,KAAK;iBACZ;aACF;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,UAAU,EAAE;oBACV,IAAI,EAAE,IAAI;iBACX;aACF;SACF;KACF;CACF,CAAC;AAEF,IAAM,OAAO,GAAoB,UAAC,EAAuC;IAArC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EAAE,IAAI,UAAA,EAAK,UAAU,cAArC,qBAAuC,CAAF;IACrE,OAAO,CACL,sBACE,SAAS,EAAE,qBACT,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,0BAA0B,sBACxC,SAAW,IACvB,UAAU,UACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC;AACvB,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.scss: -------------------------------------------------------------------------------- 1 | .divider { 2 | height: 1px; 3 | } -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.test.js: -------------------------------------------------------------------------------- 1 | import { jsx as _jsx } from "react/jsx-runtime"; 2 | import { render } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import Divider from './Divider'; 5 | describe(' component', function () { 6 | test('to be in the DOM tree', function () { 7 | var container = render(_jsx(Divider, {}, void 0)).container; 8 | expect(container).toBeInTheDocument(); 9 | }); 10 | test('with "className" property to work correctly', function () { 11 | var container = render(_jsx(Divider, { className: "test-class" }, void 0)).container; 12 | expect(container.firstElementChild).toHaveClass('test-class'); 13 | }); 14 | test('with "dark" property to work correctly', function () { 15 | var container = render(_jsx(Divider, { dark: true }, void 0)).container; 16 | expect(container.firstElementChild).toHaveClass('bg-dark-gray-400'); 17 | }); 18 | }); 19 | //# sourceMappingURL=Divider.test.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Divider/Divider.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Divider.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Divider/Divider.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,QAAQ,CAAC,uBAAuB,EAAE;IAChC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,OAAO,aAAG,CAAC,UAAxB,CAAyB;QAC1C,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE;QAC1C,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,OAAO,IAAC,SAAS,EAAC,YAAY,WAAG,CAAC,UAA/C,CAAgD;QACjE,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wCAAwC,EAAE;QACrC,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,OAAO,IAAC,IAAI,iBAAG,CAAC,UAA7B,CAA8B;QAC/C,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DownloadFile/DownloadFile.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/DownloadFile/DownloadFile.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"DownloadFile.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/DownloadFile/DownloadFile.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,yCAAyC,CAAC;AACjD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,4BAA4B,EAAE;IACrC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,YAAY,IAAC,WAAW,EAAC,kBAAkB,EAAC,QAAQ,EAAC,eAAe,WAAG,CACzE,UAFgB,CAEf;QACF,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+CAA+C,EAAE;QAC5C,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,YAAY,IACX,WAAW,EAAC,kBAAkB,EAC9B,QAAQ,EAAC,eAAe,EACxB,SAAS,EAAC,YAAY,WACtB,CACH,UANgB,CAMf;QACF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE;QACjD,IAAM,YAAY,GAAG,OAAO,CAAC;QAC7B,MAAM,CACJ,KAAC,YAAY,IACX,WAAW,EAAC,kBAAkB,EAC9B,QAAQ,EAAC,eAAe,EACxB,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAE,YAAY,WACtB,CACH,CAAC;QAEF,IAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACvD,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;QAC1D,MAAM,CAAC,eAAe,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE;QACjD,MAAM,CACJ,KAAC,YAAY,IACX,WAAW,EAAC,kBAAkB,EAC9B,QAAQ,EAAC,eAAe,EACxB,SAAS,EAAC,YAAY,EACtB,QAAQ,EAAC,OAAO,EAChB,QAAQ,EAAC,WAAW,WACpB,CACH,CAAC;QAEF,IAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,aAAa,CAAC;QAC3E,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QACrD,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Dropdown/Dropdown.d.ts: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from 'react'; 2 | import './Dropdown.scss'; 3 | interface Props { 4 | trigger: string | ReactElement; 5 | className?: string; 6 | checkbox?: boolean; 7 | positionX?: 'left' | 'right'; 8 | positionY?: 'top' | 'bottom'; 9 | block?: boolean; 10 | closeOnSelectOption?: boolean; 11 | onSelect?: (any: any) => any; 12 | [x: string]: any; 13 | } 14 | declare const previewConfig: { 15 | name: string; 16 | defaultState: { 17 | closeOnSelectOption: boolean; 18 | icon: boolean; 19 | componentProps: { 20 | closeOnSelectOption: boolean; 21 | }; 22 | }; 23 | modifiers: { 24 | type: string; 25 | options: { 26 | name: string; 27 | properties: { 28 | closeOnSelectOption: boolean; 29 | }; 30 | }[]; 31 | }; 32 | childrenProps: { 33 | type: string; 34 | options: ({ 35 | name: string; 36 | properties: { 37 | icon: string; 38 | active?: undefined; 39 | }; 40 | } | { 41 | name: string; 42 | properties: { 43 | active: boolean; 44 | icon?: undefined; 45 | }; 46 | })[]; 47 | }; 48 | }; 49 | declare const Dropdown: React.FC; 50 | export default Dropdown; 51 | export { previewConfig }; 52 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Dropdown/Dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown { 2 | &-item { 3 | &:hover { 4 | &::before { 5 | content: ''; 6 | display: block; 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | height: 100%; 11 | width: 5px; 12 | background-color: var(--color-medium-light-gray-300); 13 | } 14 | } 15 | &.active { 16 | &::before { 17 | content: ''; 18 | display: block; 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | height: 100%; 23 | width: 5px; 24 | background-color: var(--color-medium-light-gray-300); 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Dropdown/Dropdown.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/EmailInput/EmailInput.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Email inputs are used instead of regular text inputs when an email address is required from the user. Styles and UI are identical to the regular text input.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/EmailInput/EmailInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ErrorMessage/ErrorMessage.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | errorMessage: string; 4 | } 5 | declare const ErrorMessage: React.FC; 6 | export default ErrorMessage; 7 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ErrorMessage/ErrorMessage.js: -------------------------------------------------------------------------------- 1 | var __assign = (this && this.__assign) || function () { 2 | __assign = Object.assign || function(t) { 3 | for (var s, i = 1, n = arguments.length; i < n; i++) { 4 | s = arguments[i]; 5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 6 | t[p] = s[p]; 7 | } 8 | return t; 9 | }; 10 | return __assign.apply(this, arguments); 11 | }; 12 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; 13 | import { IconCustom } from '../../../exports'; 14 | var ErrorMessage = function (_a) { 15 | var errorMessage = _a.errorMessage; 16 | return (_jsxs("span", __assign({ className: "flex space-around mt-2" }, { children: [_jsx(IconCustom, { icon: "AlertCircleOutline", className: "h-4 inline ml-4 -mt-2 text-red" }, void 0), _jsx("span", __assign({ className: "text-sm text-medium-dark-gray text-left pl-1" }, { children: errorMessage }), void 0)] }), void 0)); 17 | }; 18 | export default ErrorMessage; 19 | //# sourceMappingURL=ErrorMessage.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ErrorMessage/ErrorMessage.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../../src/components/Atoms/ErrorMessage/ErrorMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,IAAM,YAAY,GAAoB,UAAC,EAAgB;QAAd,YAAY,kBAAA;IACnD,OAAO,CACL,yBAAM,SAAS,EAAC,wBAAwB,iBACtC,KAAC,UAAU,IACT,IAAI,EAAC,oBAAoB,EACzB,SAAS,EAAC,gCAAgC,WAC1C,EACF,wBAAM,SAAS,EAAC,8CAA8C,gBAC3D,YAAY,YACR,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ErrorMessage/ErrorMessage.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ErrorMessage/ErrorMessage.test.js: -------------------------------------------------------------------------------- 1 | import { jsx as _jsx } from "react/jsx-runtime"; 2 | import { render, screen } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import ErrorMessage from './ErrorMessage'; 5 | describe(' component', function () { 6 | test('to be in the DOM tree', function () { 7 | var container = render(_jsx(ErrorMessage, { errorMessage: "err-txt" }, void 0)).container; 8 | expect(container).toBeInTheDocument(); 9 | expect(screen.getByText('err-txt')).toBeInTheDocument(); 10 | }); 11 | }); 12 | //# sourceMappingURL=ErrorMessage.test.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ErrorMessage/ErrorMessage.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"ErrorMessage.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/ErrorMessage/ErrorMessage.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,yCAAyC,CAAC;AACjD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,4BAA4B,EAAE;IACrC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,YAAY,IAAC,YAAY,EAAC,SAAS,WAAG,CAAC,UAApD,CAAqD;QACtE,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/FileUpload/FileUpload.design.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | Structure 4 | 5 | 6 | States 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Structure

 17 | 18 | 19 | 20 |
    21 |
  1. Icon
    2. 22 |
  2. File name
    3. 23 |
  3. Progress
    4. 24 |
  4. Progress animation
    5. 25 |
26 | 27 | 28 | 29 |
    30 |
  1. Icon
    2. 31 |
  2. File name
    3. 32 |
  3. Remove icon
    4. 33 |
34 | 35 | 36 | 37 |

States

 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/FileUpload/FileUpload.scss: -------------------------------------------------------------------------------- 1 | .fileupload { 2 | $this: &; 3 | 4 | &-inprogress { 5 | #{$this}-progress { 6 | display: block; 7 | z-index: 5; 8 | } 9 | } 10 | 11 | &-progress { 12 | display: none; 13 | overflow: visible; 14 | position: absolute; 15 | width: calc(100% + 1px); 16 | height: calc(100% + 1px); 17 | top: -1px; 18 | left: -1px; 19 | 20 | rect { 21 | fill: transparent; 22 | stroke-width: 2; 23 | stroke: var(--color-blue); 24 | width: inherit; 25 | height: inherit; 26 | stroke-dasharray: 1000; 27 | transition: stroke-dashoffset 0.3s ease; 28 | } 29 | } 30 | &-help { 31 | margin-top: 36px; 32 | svg { 33 | margin-left: 0; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/FileUpload/FileUpload.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Column/Column.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | cols?: number; 5 | start?: number; 6 | sm?: number; 7 | smStart?: number; 8 | md?: number; 9 | mdStart?: number; 10 | lg?: number; 11 | lgStart?: number; 12 | [x: string]: any; 13 | } 14 | declare const Column: React.FC; 15 | export default Column; 16 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Column/Column.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

For general design directions about the grid, please see the Grid and layout instructions.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Column/Column.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Column.js","sourceRoot":"","sources":["../../../../../src/components/Atoms/Grid/Column/Column.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,IAAM,MAAM,GAAoB,UAAC,EAYhC;IAXC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,EAAE,QAAA,EACF,OAAO,aAAA,EACP,EAAE,QAAA,EACF,OAAO,aAAA,EACP,EAAE,QAAA,EACF,OAAO,aAAA,EACP,QAAQ,cAAA,EACL,UAAU,cAXkB,6FAYhC,CADc;IAEb,IAAM,cAAc,GAAG,IAAI;QACzB,CAAC,CAAC,kBAAe,IAAI,IAAI,GAAG,uBAAgB,IAAI,IAAI,IAAI,uBACpD,IAAI,IAAI,IAAI,CACZ;QACJ,CAAC,CAAC,kBAAe,EAAE,IAAI,GAAG,uBAAgB,EAAE,IAAI,IAAI,uBAAgB,EAAE,IAAI,IAAI,CAAE,CAAC;IACnF,IAAM,eAAe,GAAG,KAAK;QAC3B,CAAC,CAAC,eAAa,KAAO;QACtB,CAAC,CAAC,CAAG,OAAO,CAAC,CAAC,CAAC,kBAAgB,OAAS,CAAC,CAAC,CAAC,EAAE,WACzC,OAAO,CAAC,CAAC,CAAC,kBAAgB,OAAS,CAAC,CAAC,CAAC,EAAE,WACtC,OAAO,CAAC,CAAC,CAAC,kBAAgB,OAAS,CAAC,CAAC,CAAC,EAAE,CAAE,CAAC;IAEnD,OAAO,CACL,uBACE,SAAS,EAAK,cAAc,SAAI,eAAe,SAAI,SAAW,IAC1D,UAAU,cAEb,QAAQ,YACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Container/Container.code.md: -------------------------------------------------------------------------------- 1 |

Properties

 2 | 3 | | Property | Type | Required? | Notes | 4 | | :---------- | :------ | :-------- | :----------------------------------------------------------------------------------------------------------------------- | 5 | | className | string | no | Classnames can be passed to the outermost wrapping `
` element of the component. | 6 | | fluid | boolean | no | If true, the container will have no margins. Otherwise its margins will change according to the design system. | 7 | | Other Props | any | no | Any other props that a `
` element can take. These will be applied to the wrapping `
` element of the component. | 8 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Container/Container.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | fluid?: boolean; 5 | [x: string]: any; 6 | } 7 | declare const Container: React.FC; 8 | export default Container; 9 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Container/Container.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

For general design directions about the grid, please see the Grid and layout instructions.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Container/Container.js: -------------------------------------------------------------------------------- 1 | var __assign = (this && this.__assign) || function () { 2 | __assign = Object.assign || function(t) { 3 | for (var s, i = 1, n = arguments.length; i < n; i++) { 4 | s = arguments[i]; 5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 6 | t[p] = s[p]; 7 | } 8 | return t; 9 | }; 10 | return __assign.apply(this, arguments); 11 | }; 12 | var __rest = (this && this.__rest) || function (s, e) { 13 | var t = {}; 14 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 15 | t[p] = s[p]; 16 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 17 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 18 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 19 | t[p[i]] = s[p[i]]; 20 | } 21 | return t; 22 | }; 23 | import { jsx as _jsx } from "react/jsx-runtime"; 24 | var Container = function (_a) { 25 | var _b = _a.className, className = _b === void 0 ? '' : _b, fluid = _a.fluid, children = _a.children, otherProps = __rest(_a, ["className", "fluid", "children"]); 26 | return (_jsx("div", __assign({ className: (fluid ? '' : 'sm:mx-8 md:mx-8 lg:mx-16') + " " + className }, otherProps, { children: children }), void 0)); 27 | }; 28 | export default Container; 29 | //# sourceMappingURL=Container.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Container/Container.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../../../src/components/Atoms/Grid/Container/Container.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,SAAS,GAAoB,UAAC,EAKnC;IAJC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,UAAU,cAJqB,kCAKnC,CADc;IAEb,OAAO,CACL,uBACE,SAAS,EAAE,CAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0BAA0B,UAAI,SAAW,IAChE,UAAU,cAEb,QAAQ,YACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Row/Row.code.md: -------------------------------------------------------------------------------- 1 |

Properties

 2 | 3 | | Property | Type | Required? | Notes | 4 | | :---------- | :----- | :-------- | :----------------------------------------------------------------------------------------------------------------------- | 5 | | className | string | no | | 6 | | Other Props | any | no | Any other props that a `
` element can take. These will be applied to the wrapping `
` element of the component. | 7 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Row/Row.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | [x: string]: any; 5 | } 6 | declare const Row: React.FC; 7 | export default Row; 8 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Row/Row.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

For general design directions about the grid, please see the Grid and layout instructions.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Row/Row.js: -------------------------------------------------------------------------------- 1 | var __assign = (this && this.__assign) || function () { 2 | __assign = Object.assign || function(t) { 3 | for (var s, i = 1, n = arguments.length; i < n; i++) { 4 | s = arguments[i]; 5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 6 | t[p] = s[p]; 7 | } 8 | return t; 9 | }; 10 | return __assign.apply(this, arguments); 11 | }; 12 | var __rest = (this && this.__rest) || function (s, e) { 13 | var t = {}; 14 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 15 | t[p] = s[p]; 16 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 17 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 18 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 19 | t[p[i]] = s[p[i]]; 20 | } 21 | return t; 22 | }; 23 | import { jsx as _jsx } from "react/jsx-runtime"; 24 | var Row = function (_a) { 25 | var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, otherProps = __rest(_a, ["className", "children"]); 26 | return (_jsx("div", __assign({ className: "grid sm:grid-cols-8 md:grid-cols-12 lg:grid-cols-12 sm:gap-4 md:gap-4 lg:gap-6 " + className }, otherProps, { children: children }), void 0)); 27 | }; 28 | export default Row; 29 | //# sourceMappingURL=Row.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Grid/Row/Row.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../src/components/Atoms/Grid/Row/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAM,GAAG,GAAoB,UAAC,EAA2C;IAAzC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,UAAU,cAAzC,yBAA2C,CAAF;IACrE,OAAO,CACL,uBACE,SAAS,EAAE,oFAAkF,SAAW,IACpG,UAAU,cAEb,QAAQ,YACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/HelpText/HelpText.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | helpText: string; 4 | } 5 | declare const HelpText: React.FC; 6 | export default HelpText; 7 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/HelpText/HelpText.js: -------------------------------------------------------------------------------- 1 | var __assign = (this && this.__assign) || function () { 2 | __assign = Object.assign || function(t) { 3 | for (var s, i = 1, n = arguments.length; i < n; i++) { 4 | s = arguments[i]; 5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 6 | t[p] = s[p]; 7 | } 8 | return t; 9 | }; 10 | return __assign.apply(this, arguments); 11 | }; 12 | import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; 13 | import { IconCustom } from '../../../exports'; 14 | var HelpText = function (_a) { 15 | var helpText = _a.helpText; 16 | return (_jsxs("span", __assign({ className: "flex space-around mt-2" }, { children: [_jsx(IconCustom, { icon: "InformationVariant", className: "h-4 inline ml-4 -mt-2 text-medium-light-gray" }, void 0), _jsx("span", __assign({ className: "text-sm text-medium-dark-gray text-left pl-1" }, { children: helpText }), void 0)] }), void 0)); 17 | }; 18 | export default HelpText; 19 | //# sourceMappingURL=HelpText.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/HelpText/HelpText.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../../../src/components/Atoms/HelpText/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,IAAM,QAAQ,GAAoB,UAAC,EAAY;QAAV,QAAQ,cAAA;IAC3C,OAAO,CACL,yBAAM,SAAS,EAAC,wBAAwB,iBACtC,KAAC,UAAU,IACT,IAAI,EAAC,oBAAoB,EACzB,SAAS,EAAC,8CAA8C,WACxD,EACF,wBAAM,SAAS,EAAC,8CAA8C,gBAC3D,QAAQ,YACJ,aACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/HelpText/HelpText.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/HelpText/HelpText.test.js: -------------------------------------------------------------------------------- 1 | import { jsx as _jsx } from "react/jsx-runtime"; 2 | import { render, screen } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import HelpText from './HelpText'; 5 | describe(' component', function () { 6 | test('to be in the DOM tree', function () { 7 | var container = render(_jsx(HelpText, { helpText: "help-txt" }, void 0)).container; 8 | expect(container).toBeInTheDocument(); 9 | expect(screen.getByText('help-txt')).toBeInTheDocument(); 10 | }); 11 | }); 12 | //# sourceMappingURL=HelpText.test.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/HelpText/HelpText.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"HelpText.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/HelpText/HelpText.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,yCAAyC,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAQ,CAAC,wBAAwB,EAAE;IACjC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,QAAQ,IAAC,QAAQ,EAAC,UAAU,WAAG,CAAC,UAA7C,CAA8C;QAC/D,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconButton/IconButton.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Icon buttons inherit the general styles of regular buttons. They could be used when the action behind the icon is implicit and could not be mistaken.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconButton/IconButton.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.code.md: -------------------------------------------------------------------------------- 1 |

Properties

 2 | 3 | | Property | Type | Required? | Notes | 4 | | :---------- | :----- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 5 | | icon | string | yes | Specifies an MDI icon to be used. Example: `icon='Twitter'` will show the mdiTwitter icon. Needs to be spelled exactly as the icon's name in the Material Design Icons library, with the exception of the 'mdi' at the beginning. | 6 | | className | string | no | Classes to be passed to the `` surrounding the icon SVG. | 7 | | Other Props | any | no | Any other props that a `` element can take. These will be applied to the outermost wrapping `` element of the component. | 8 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | icon: string; 5 | [x: string]: any; 6 | } 7 | declare const IconCustom: React.FunctionComponent; 8 | export default IconCustom; 9 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

For general design directions about icons, please see the Icons page in the Environment section.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"IconCustom.js","sourceRoot":"","sources":["../../../../src/components/Atoms/IconCustom/IconCustom.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;AAQlC,IAAM,UAAU,GAAmC,UAAC,EAInD;IAHC,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,IAAI,UAAA,EACD,UAAU,cAHqC,qBAInD,CADc;IAEb,IAAM,QAAQ,GAAG,QAAM,IAAM,CAAC;IAC9B,OAAO,CACL,0BAAU,UAAU,IAAE,SAAS,EAAC,gBAAgB,gBAC9C,KAAC,IAAI,IAAC,SAAS,EAAE,UAAQ,SAAW,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAI,YAC3D,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.test.js: -------------------------------------------------------------------------------- 1 | import { jsx as _jsx } from "react/jsx-runtime"; 2 | import { render } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import IconCustom from './IconCustom'; 5 | describe(' component', function () { 6 | test('to be in the DOM tree', function () { 7 | var container = render(_jsx(IconCustom, { icon: "StarOutline" }, void 0)).container; 8 | expect(container).toBeInTheDocument(); 9 | }); 10 | test('with "className" property to work correctly', function () { 11 | var container = render(_jsx(IconCustom, { icon: "StarOutline", className: "test-class" }, void 0)).container; 12 | expect(container.firstElementChild.firstElementChild).toHaveClass('test-class'); 13 | }); 14 | }); 15 | //# sourceMappingURL=IconCustom.test.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/IconCustom/IconCustom.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"IconCustom.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/IconCustom/IconCustom.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,QAAQ,CAAC,0BAA0B,EAAE;IACnC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,UAAU,IAAC,IAAI,EAAC,aAAa,WAAG,CAAC,UAA9C,CAA+C;QAChE,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE;QAC1C,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,UAAU,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAC,YAAY,WAAG,CACzD,UAFgB,CAEf;QACF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAClF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Loader/Loader.code.md: -------------------------------------------------------------------------------- 1 |

Playground

 2 | 3 | 4 | 5 | 6 | 7 |

Properties

 8 | 9 | | Property | Type | Required? | Notes | 10 | | :---------- | :----- | :-------- | :------------------------------------------------------------------------------------------------------------------- | 11 | | size | string | yes | One of `small`, `medium` and `large`. | 12 | | text | string | no | Text that appears below the loader. | 13 | | loaderSpeed | number | no | .`Integer` or `Float` number for `Loader`'s animation speed in seconds. Default is `1.5s`. | 14 | | className | string | no | Classnames can be passed to the wrapping `.loader` element of the component. . | 15 | | Other Props | any | no | Any other props that a `
` element can take. These will be applied to the `
` element holding the component. | 16 | 17 |

Usage

 18 | 19 | Render conditionally in your application where necessary. 20 | 21 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Loader/Loader.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Loader.scss'; 3 | interface Props { 4 | size: 'small' | 'medium' | 'large'; 5 | text?: string; 6 | loaderSpeed?: number; 7 | id?: string; 8 | className?: string; 9 | [x: string]: any; 10 | } 11 | declare const previewConfig: { 12 | name: string; 13 | defaultState: { 14 | text: boolean; 15 | size: string; 16 | loaderSpeed: string; 17 | componentProps: { 18 | size: string; 19 | text: boolean; 20 | }; 21 | }; 22 | modifiers: { 23 | type: string; 24 | options: ({ 25 | name: string; 26 | properties: { 27 | text: string; 28 | loaderSpeed?: undefined; 29 | }; 30 | } | { 31 | name: string; 32 | properties: { 33 | loaderSpeed: number; 34 | text?: undefined; 35 | }; 36 | })[]; 37 | }; 38 | size: { 39 | type: string; 40 | values: string[]; 41 | }; 42 | }; 43 | declare const Loader: React.FC; 44 | export default Loader; 45 | export { previewConfig }; 46 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Loader/Loader.design.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | Spacing 4 | 5 | 6 | Alignment 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Spacing

 17 | 18 | 19 | 20 | 21 | 22 | 23 |

Alignment

 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Loader/Loader.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,eAAe,CAAC;AAWvB,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,QAAQ;IACd,YAAY,EAAE;QACZ,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,EAAE;QACf,cAAc,EAAE;YACd,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,KAAK;SACZ;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,UAAU,EAAE;oBACV,IAAI,EAAE,YAAY;iBACnB;aACF;YACD;gBACE,IAAI,EAAE,aAAa;gBACnB,UAAU,EAAE;oBACV,WAAW,EAAE,GAAG;iBACjB;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;KACrC;CACF,CAAC;AAEF,IAAM,MAAM,GAAoB,UAAC,EAMhC;IALC,IAAA,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,WAAW,iBAAA,EACX,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACX,UAAU,cALkB,4CAMhC,CADc;IAEb,IAAM,WAAW,GAAG;QAClB,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,WAAW;QACnB,KAAK,EAAE,WAAW;KACnB,CAAC;IAEF,OAAO,CACL,wBAAK,SAAS,EAAC,mCAAmC,iBAChD,uBACE,SAAS,EAAE,yCAAuC,WAAW,CAAC,IAAI,CAAC,SAAI,SAAW,IAC9E,UAAU,IACd,KAAK,EACH,WAAW;oBACT,CAAC,CAAC;wBACE,SAAS,EAAE,kBAAe,WAAW,GAAG,GAAG,sBAAkB;qBAC9D;oBACH,CAAC,CAAC,EAAE,gBAGP,GAAG,YACA,EACL,IAAI,IAAI,CACP,wBAAM,SAAS,EAAC,oEAAoE,gBACjF,IAAI,YACA,CACR,aACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Loader/Loader.scss: -------------------------------------------------------------------------------- 1 | .loader { 2 | font-size: 10px; 3 | text-indent: -9999em; 4 | border-top: 8px solid var(--color-blue); 5 | border-right: 8px solid var(--color-dark-gray-100); 6 | border-bottom: 8px solid var(--color-dark-gray-100); 7 | border-left: 8px solid var(--color-dark-gray-100); 8 | transform: translateZ(0); 9 | animation: load-rotate 1.5s infinite linear; 10 | } 11 | 12 | @keyframes load-rotate { 13 | 0% { 14 | transform: rotate(0deg); 15 | } 16 | 100% { 17 | transform: rotate(360deg); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Loader/Loader.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/MultiSelect/MultiSelect.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Multi selects allow users to select one or more option from an items list. They could be used as a form input or as a filter.

4 | 5 | 6 | 7 |
8 | 9 | Spacing 10 | 11 | 12 | Alignment 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

Spacing

 24 | 25 | 26 | 27 | 28 | 29 | 30 |

Directions

 31 | 32 | 33 | 34 |

Use the multi select when there are multiple items to choose from.

35 | 36 | 37 | 38 |

Don’t use it for only two items. If possible, use the checkbox group.

39 | 40 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/MultiSelect/MultiSelect.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/MultiSelect/MultiSelectInput.d.ts: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | interface Props { 3 | value: Array; 4 | label: string; 5 | id?: string; 6 | focused?: boolean; 7 | dark?: boolean; 8 | disabled?: boolean; 9 | invalid?: boolean; 10 | options?: ReactNode[]; 11 | modified?: boolean; 12 | required?: boolean; 13 | onBlur: (any: any) => void; 14 | onRemove: (string: any) => void; 15 | [x: string]: any; 16 | } 17 | declare const MultiSelect: React.FC; 18 | export default MultiSelect; 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/MultiSelect/MultiSelectInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/NumberInput/NumberInput.css: -------------------------------------------------------------------------------- 1 | input::-webkit-outer-spin-button, 2 | input::-webkit-inner-spin-button { 3 | -webkit-appearance: none; 4 | margin: 0; 5 | } 6 | 7 | input[type='number'] { 8 | -moz-appearance: textfield; 9 | } 10 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/NumberInput/NumberInput.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Number inputs allow the user to enter a number without any limitation to the maximum or minimum amount. If you need to limit the user’s input - use the slider atom. 4 |

5 | 6 | 7 | 8 |
9 | 10 | States 11 | 12 | 13 | Directions 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

States

 24 | 25 | 26 | 27 | 28 | 29 | 30 |

Directions

 31 | 32 | 33 | 34 |

Use number inputs when there is no limitations to the amount.

35 | 36 | 37 | 38 |

Don’t use it when you need an input within a specific range.

39 | 40 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/NumberInput/NumberInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Option/Option.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | value: string; 4 | active?: boolean; 5 | className?: string; 6 | disabled?: boolean; 7 | dropdown?: boolean; 8 | icon?: string; 9 | checkbox?: boolean; 10 | checked?: boolean; 11 | onChange?: (any: any) => any; 12 | onClick?: (any: any) => any; 13 | [x: string]: any; 14 | } 15 | declare const Option: React.FC; 16 | export default Option; 17 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Option/Option.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Option/Option.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAgBxD,IAAM,MAAM,GAAoB,UAAC,EAahC;IAZC,IAAA,KAAK,WAAA,EACL,MAAM,YAAA,EACN,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,QAAQ,cAAA,EACL,UAAU,cAZkB,0HAahC,CADc;IAEb,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,QAAQ,CAAC,CAAC,CAAC,CACT,uBACE,SAAS,EAAE,qFAAmF,SAAW,IACrG,UAAU,cAEd,KAAC,QAAQ,aAAC,QAAQ,QAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,gBAClE,QAAQ,YACA,YACP,CACP,CAAC,CAAC,CAAC,CACF,uBACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,sFACT,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,WACpB,SAAS,IAAI,EAAE,CAAE,IACjB,UAAU,cAEd,sBAAG,SAAS,EAAC,0FAA0F,iBACpG,IAAI,IAAI,CACP,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,oCAAoC,WAAG,CAC1E,EACA,QAAQ,aACP,YACA,CACP,CACF,CAAC,CAAC,CAAC,CACF,0BACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,WAAI,SAAS,IAAI,EAAE,CAAE,EAC3D,KAAK,EAAE,KAAK,IACR,UAAU,cAEb,QAAQ,YACF,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Option/Option.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Option/Option.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Option.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Option/Option.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,QAAQ,CAAC,sBAAsB,EAAE;IAC/B,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,MAAM,IAAC,KAAK,EAAC,WAAW,WAAG,CAAC,UAAzC,CAA0C;QAC3D,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE;QAC1C,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,MAAM,IAAC,KAAK,EAAC,WAAW,EAAC,SAAS,EAAC,YAAY,WAAG,CACpD,UAFgB,CAEf;QAEF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,2DAA2D,EAAE;QACxD,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,MAAM,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,MAAM,iBAAG,CAAC,UAAzD,CAA0D;QAE3E,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yDAAyD,EAAE;QACtD,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,MAAM,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,IAAI,EAAC,SAAS,WAAG,CACrD,UAFgB,CAEf;QAEF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE;QACzC,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,MAAM,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,iBAAG,CAAC,UAAlD,CAAmD;QAEpE,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC1D,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,YAAY,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Pagination/Pagination.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | pages: number; 4 | currentPage: number; 5 | className?: string; 6 | withInput?: boolean; 7 | toPage: (any: any) => any; 8 | [x: string]: any; 9 | } 10 | declare const previewConfig: { 11 | name: string; 12 | defaultState: { 13 | pages: number; 14 | currentPage: number; 15 | withInput: boolean; 16 | componentProps: { 17 | pages: number; 18 | currentPage: number; 19 | withInput: boolean; 20 | toPage: (event: any) => void; 21 | }; 22 | }; 23 | modifiers: { 24 | type: string; 25 | options: { 26 | name: string; 27 | properties: { 28 | withInput: boolean; 29 | }; 30 | }[]; 31 | }; 32 | pages: { 33 | type: string; 34 | values: number[]; 35 | }; 36 | }; 37 | declare const Pagination: React.FC; 38 | export default Pagination; 39 | export { previewConfig }; 40 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Pagination/Pagination.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/PasswordInput/PasswordInput.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Email inputs are used instead of regular text inputs when a new or a current password is required from the user. Styles and UI are identical to the regular text input.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/PasswordInput/PasswordInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/PhoneInput/PhoneInput.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Phone inputs are used instead of regular inputs when a phone number is required from the user. Styles and UI are identical to the regular text input.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/PhoneInput/PhoneInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Playground/Playground.d.ts: -------------------------------------------------------------------------------- 1 | import { Component, ReactNode } from 'react'; 2 | import './Playground.scss'; 3 | interface ConfigProps { 4 | name: string; 5 | [x: string]: any; 6 | } 7 | interface Props { 8 | config?: ConfigProps; 9 | } 10 | declare type Properties = Record; 11 | declare class Playground extends Component { 12 | state: any; 13 | componentDidMount(): void; 14 | changeCheckboxHandler: (key: string | number, props: Properties, children: boolean) => void; 15 | changeRadioHandler: (key: any, value: any) => void; 16 | changeSelectHandler: (key: any, value: any) => void; 17 | checkboxPropsHandler: (key: string | number, props: Properties, isChildren: boolean) => void; 18 | radioPropsHandler: (key: any, value: any) => void; 19 | selectPropsHandler: (key: any, value: any) => void; 20 | render(): ReactNode; 21 | } 22 | export default Playground; 23 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Playground/Playground.scss: -------------------------------------------------------------------------------- 1 | .playground { 2 | $playground-header-height: 4rem; 3 | min-height: var(--h-128); 4 | 5 | &-header { 6 | height: $playground-header-height; 7 | } 8 | 9 | &-main { 10 | height: 100%; 11 | 12 | &.with-header { 13 | height: calc(100% - #{$playground-header-height}); 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Playground/Playground.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ProgressIndicator/ProgressIndicator.code.md: -------------------------------------------------------------------------------- 1 |

Playground

 2 | 3 | 4 | 5 | 6 | 7 |

Properties

 8 | 9 | | Property | Type | Required? | Notes | 10 | | :---------- | :----- | :-------- | :--------------------------------------------------------------------------------------------------------------------------------- | 11 | | progress | number | yes | | 12 | | className | string | no | Classnames can be passed to the outermost wrapping `
` element of the component. | 13 | | Other Props | any | no | Any other props that a `
` element can take. These will be applied to the outermost wrapping `
` element of the component. | 14 | 15 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ProgressIndicator/ProgressIndicator.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | progress: number; 4 | className?: string; 5 | [x: string]: any; 6 | } 7 | declare const previewConfig: { 8 | name: string; 9 | defaultState: { 10 | progress: number; 11 | componentProps: { 12 | progress: number; 13 | }; 14 | }; 15 | progress: { 16 | type: string; 17 | values: number[]; 18 | }; 19 | }; 20 | declare const ProgressIndicator: React.FC; 21 | export default ProgressIndicator; 22 | export { previewConfig }; 23 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ProgressIndicator/ProgressIndicator.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../../../src/components/Atoms/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EAAE;QACZ,QAAQ,EAAE,EAAE;QACZ,cAAc,EAAE;YACd,QAAQ,EAAE,EAAE;SACb;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;KACrB;CACF,CAAC;AAEF,IAAM,iBAAiB,GAAoB,UAAC,EAI3C;IAHC,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACX,UAAU,cAH6B,yBAI3C,CADc;IAEb,OAAO,CACL,wBAAK,SAAS,EAAE,YAAU,SAAW,IAAM,UAAU,eACnD,wBAAM,SAAS,EAAC,+DAA+D,gBAAK,QAAQ,MAAG,YAAQ,EACvG,uBAAK,SAAS,EAAC,wCAAwC,gBACrD,cACE,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAK,QAAQ,MAAG,EAAE,EACzD,SAAS,EAAC,gBAAgB,WACrB,YACH,aACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ProgressIndicator/ProgressIndicator.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ProgressIndicator/ProgressIndicator.test.js: -------------------------------------------------------------------------------- 1 | import { jsx as _jsx } from "react/jsx-runtime"; 2 | import { render, screen } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import ProgressIndicator from './ProgressIndicator'; 5 | describe(' component', function () { 6 | test('to be in the DOM tree', function () { 7 | var container = render(_jsx(ProgressIndicator, { progress: 0 }, void 0)).container; 8 | expect(container).toBeInTheDocument(); 9 | }); 10 | test('with "className" and "show" properties to work correctly', function () { 11 | var container = render(_jsx(ProgressIndicator, { className: "test-class", progress: 0 }, void 0)).container; 12 | expect(container.firstElementChild).toHaveClass('test-class'); 13 | }); 14 | test('with "progress" property to work correctly', function () { 15 | render(_jsx(ProgressIndicator, { progress: 33 }, void 0)); 16 | var progressElements = screen.getAllByText("33%"); 17 | expect(progressElements).toHaveLength(1); 18 | var inlineProgressStyledElement = screen.queryByText('33%').nextElementSibling 19 | .firstElementChild; 20 | expect(inlineProgressStyledElement.getAttribute('style')).toEqual('border-radius: inherit; width: 33%;'); 21 | }); 22 | }); 23 | //# sourceMappingURL=ProgressIndicator.test.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/ProgressIndicator/ProgressIndicator.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"ProgressIndicator.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/ProgressIndicator/ProgressIndicator.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,QAAQ,CAAC,iCAAiC,EAAE;IAC1C,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,iBAAiB,IAAC,QAAQ,EAAE,CAAC,WAAI,CAAC,UAA/C,CAAgD;QACjE,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE;QACvD,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,iBAAiB,IAAC,SAAS,EAAC,YAAY,EAAC,QAAQ,EAAE,CAAC,WAAI,CAC1D,UAFgB,CAEf;QACF,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE;QACjD,MAAM,CAAC,KAAC,iBAAiB,IAAC,QAAQ,EAAE,EAAE,WAAI,CAAC,CAAC;QAE5C,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpD,MAAM,CAAC,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACzC,IAAM,2BAA2B,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,kBAAkB;aAC7E,iBAAiB,CAAC;QACrB,MAAM,CAAC,2BAA2B,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAC/D,qCAAqC,CACtC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/RadioButton/RadioButton.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | value: string; 4 | className?: string; 5 | checked?: boolean; 6 | dark?: boolean; 7 | disabled?: boolean; 8 | groupName?: string; 9 | id?: string; 10 | onChange?: (any: any) => any; 11 | [x: string]: any; 12 | } 13 | declare const RadioButton: React.FC; 14 | export default RadioButton; 15 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/RadioButton/RadioButton.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../../src/components/Atoms/RadioButton/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAcpC,IAAM,WAAW,GAAoB,UAAC,EAYrC;IAXC,IAAA,KAAK,WAAA,EACL,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,UAAU,cAXuB,4GAYrC,CADc;IAEN,IAAA,OAAO,GAAI,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,GAAhC,CAAiC;IAE/C,OAAO,CACL,uBAAK,SAAS,EAAE,SAAS,gBACvB,0BACE,SAAS,EAAE,iDACT,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAClD,EACF,OAAO,EAAE,OAAO,iBAEhB,yBACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,cAAY,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,IACjC,UAAU,UACd,EACF,eACE,SAAS,EAAE,2EACT,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CACnC,WACI,EACR,wBAAM,SAAS,EAAC,8CAA8C,gBAC3D,QAAQ,YACJ,aACD,KA1BsB,OAAO,CA2BjC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/RadioButton/RadioButton.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/RadioGroup/RadioGroup.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Select/Select.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

The select is a simple form atom allows the user to select one from a predefined list of option. Styles and UI are similar to the regular text input.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Select/Select.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.code.md: -------------------------------------------------------------------------------- 1 |

Playground

 2 | 3 | 4 | 5 | 6 | 7 |

Properties

 8 | 9 | | Property | Type | Required? | Notes | 10 | | :-------- | :------ | :-------- | :------------------------------------------------------------------------------------------------------------------------------------ | 11 | | className | string | no | | 12 | | height | number | no | Specify the height in pixels if you want to use it as a block element (for example, for loading a picture) instead of separate lines. | 13 | | width | number | no | | 14 | | lines | number | no | Specify how many lines the skeleton should take up if used for loading text. | 15 | | circle | boolean | no | If true, height and width should also be set to specify the dimensions of the circle. | 16 | 17 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | height?: number; 5 | width?: number; 6 | lines?: number; 7 | circle?: boolean; 8 | } 9 | declare const previewConfig: { 10 | name: string; 11 | defaultState: { 12 | block: boolean; 13 | circle: boolean; 14 | componentProps: { 15 | lines: number; 16 | width: number; 17 | }; 18 | }; 19 | modifiers: { 20 | type: string; 21 | options: ({ 22 | name: string; 23 | properties: { 24 | height: number; 25 | circle?: undefined; 26 | width?: undefined; 27 | }; 28 | } | { 29 | name: string; 30 | properties: { 31 | circle: boolean; 32 | height: number; 33 | width: number; 34 | }; 35 | })[]; 36 | }; 37 | }; 38 | declare const Skeleton: React.FC; 39 | export default Skeleton; 40 | export { previewConfig }; 41 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

The skeleton is an animated placeholder providing a vague preview of the loading content. Its purpose is to inform of the loading process and to reduce the load-time frustration in users.

4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,eAAe,EAAE,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAUxE,IAAM,aAAa,GAAG;IACpB,IAAI,EAAE,UAAU;IAChB,YAAY,EAAE;QACZ,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,cAAc,EAAE;YACd,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,GAAG;SACX;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE;oBACV,MAAM,EAAE,GAAG;iBACZ;aACF;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE;oBACV,MAAM,EAAE,IAAI;oBACZ,MAAM,EAAE,GAAG;oBACX,KAAK,EAAE,GAAG;iBACX;aACF;SACF;KACF;CACF,CAAC;AAEF,IAAM,QAAQ,GAAoB,UAAC,EAMlC;QALC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,KAAK,WAAA,EACL,MAAM,YAAA,EACN,KAAK,WAAA;IAEL,OAAO,CACL,KAAC,aAAa,aAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,SAAS,gBACrD,KAAC,eAAe,IACd,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,WACZ,YACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.test.js: -------------------------------------------------------------------------------- 1 | import { jsx as _jsx } from "react/jsx-runtime"; 2 | import { render } from '@testing-library/react'; 3 | import '@testing-library/jest-dom/extend-expect'; 4 | import Skeleton from './Skeleton'; 5 | describe(' component', function () { 6 | test('to be in the DOM tree', function () { 7 | var container = render(_jsx(Skeleton, {}, void 0)).container; 8 | expect(container).toBeInTheDocument(); 9 | }); 10 | }); 11 | //# sourceMappingURL=Skeleton.test.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Skeleton/Skeleton.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Skeleton.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/Skeleton/Skeleton.test.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAQ,CAAC,wBAAwB,EAAE;IACjC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,QAAQ,aAAG,CAAC,UAAzB,CAA0B;QAC3C,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Slider/Slider.css: -------------------------------------------------------------------------------- 1 | .slider::-webkit-slider-thumb { 2 | -webkit-appearance: none; 3 | appearance: none; 4 | width: 32px; 5 | height: 32px; 6 | border-radius: 50%; 7 | background: #fff; 8 | border: 8px solid #5e39e9; 9 | cursor: pointer; 10 | } 11 | 12 | .slider::-moz-range-thumb { 13 | width: 32px; 14 | height: 32px; 15 | border-radius: 50%; 16 | background: #fff; 17 | border: 8px solid #5e39e9; 18 | cursor: pointer; 19 | } 20 | 21 | .slider:disabled::-webkit-slider-thumb { 22 | border-color: #a5a7b4; 23 | } 24 | 25 | .slider:disabled::-moz-range-thumb { 26 | border-color: #a5a7b4; 27 | } 28 | 29 | .slider:hover::-webkit-slider-thumb { 30 | box-shadow: 0px 3px 6px #1d234340; 31 | } 32 | 33 | .slider:hover::-moz-range-thumb { 34 | box-shadow: 0px 3px 6px #1d234340; 35 | } 36 | 37 | .slider.focused::-webkit-slider-thumb { 38 | box-shadow: 0px 0px 10px #5e39e9; 39 | } 40 | 41 | .slider.focused::-moz-range-thumb { 42 | box-shadow: 0px 0px 10px #5e39e9; 43 | } 44 | 45 | .slider:disabled::-webkit-slider-thumb { 46 | border-color: #a5a7b4; 47 | box-shadow: none; 48 | cursor: not-allowed; 49 | } 50 | 51 | .slider:disabled::-moz-range-thumb { 52 | border-color: #a5a7b4; 53 | box-shadow: none; 54 | cursor: not-allowed; 55 | } 56 | 57 | .slider-number { 58 | border-color: transparent transparent #9e88f2 transparent; 59 | } 60 | 61 | .slider-number.focused { 62 | border-color: #9e88f2; 63 | } 64 | 65 | .slider-number:disabled { 66 | border-color: transparent transparent #a5a7b4 transparent; 67 | } 68 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Slider/Slider.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Table/Table.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Table.scss'; 3 | interface Props { 4 | columns: object[]; 5 | data: object[]; 6 | className?: string; 7 | rowsPerPage?: number; 8 | } 9 | declare const previewConfig: { 10 | name: string; 11 | defaultState: { 12 | pagination: boolean; 13 | componentProps: { 14 | rowsPerPage: boolean; 15 | columns: ({ 16 | Header: string; 17 | accessor: string; 18 | className: string; 19 | } | { 20 | Header: string; 21 | accessor: string; 22 | className?: undefined; 23 | })[]; 24 | data: { 25 | item: { 26 | name: string; 27 | address: string; 28 | phoneNumber: string; 29 | }; 30 | }[]; 31 | }; 32 | }; 33 | modifiers: { 34 | type: string; 35 | options: { 36 | name: string; 37 | properties: { 38 | rowsPerPage: number; 39 | }; 40 | }[]; 41 | }; 42 | }; 43 | declare const Table: React.FC; 44 | export default Table; 45 | export { previewConfig }; 46 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Table/Table.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Tables are still one of the most convenient ways for displaying structured data.

4 | 5 | 6 | 7 |
8 | 9 | Spacing 10 | 11 | 12 | Directions 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Spacing

 23 | 24 | 25 | 26 | 27 | 28 | 29 |

Directions

 30 | 31 | 32 | 33 |

Align text to the left and numbers to the right

34 | 35 | 36 | 37 |

Don’t right-align text and left-align numbers, unless the numeric column is first or the text column is last.

38 | 39 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Table/Table.scss: -------------------------------------------------------------------------------- 1 | table { 2 | --padding: 40px; 3 | color: var(--color-dark-gray); 4 | min-width: 100%; 5 | font-size: 12px; 6 | border-radius: 6px; 7 | overflow: hidden; 8 | letter-spacing: 0.12em; 9 | thead { 10 | background-color: var(--color-medium-dark-gray-100); 11 | text-transform: uppercase; 12 | font-weight: bold; 13 | } 14 | tbody { 15 | background-color: var(--color-light-gray); 16 | tr { 17 | & + tr { 18 | td { 19 | position: relative; 20 | &::after { 21 | content: ''; 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | border-bottom: 1px solid var(--color-medium-dark-gray-100); 28 | } 29 | &:first-of-type, 30 | &:last-of-type { 31 | &::after { 32 | width: calc(100% - var(--padding)); 33 | } 34 | } 35 | &:first-of-type::after { 36 | right: 0; 37 | left: unset; 38 | } 39 | } 40 | } 41 | } 42 | } 43 | th, 44 | td { 45 | padding: 16px calc(var(--padding) / 2); 46 | width: fit-content; 47 | &:first-of-type { 48 | padding-left: var(--padding); 49 | } 50 | &:last-of-type { 51 | padding-right: var(--padding); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Table/Table.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tab/Tab.d.ts: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | import './Tab.scss'; 3 | interface Props { 4 | name: string | ReactNode; 5 | className?: string; 6 | selected?: boolean; 7 | variant?: 'dark' | 'light'; 8 | onChange?: () => void; 9 | onTabChange?: () => void; 10 | [x: string]: any; 11 | } 12 | declare const Tab: React.FC; 13 | export default Tab; 14 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tab/Tab.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/components/Atoms/Tabs/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,YAAY,CAAC;AAYpB,IAAM,GAAG,GAAoB,UAAC,EAO7B;IANC,IAAA,IAAI,UAAA,EACJ,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACL,UAAU,cANe,2DAO7B,CADc;IAEb,IAAM,aAAa,GAAG,UAAC,OAAO,EAAE,QAAQ;QACtC,IAAM,SAAS,GACb,+EAA+E,CAAC;QAClF,IAAM,UAAU,GAAG,MACjB,OAAO,KAAK,MAAM;YAChB,CAAC,CAAC,iEAAiE;YACnE,CAAC,CAAC,iDAAiD,CACrD,CAAC;QACH,IAAI,gBAAgB,CAAC;QAErB,IAAI,QAAQ,EAAE;YACZ,gBAAgB,GAAG,QAAQ,CAAC;SAC7B;QAED,OAAO,CAAC,SAAS,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAO,CACL,uBACE,SAAS,EAAK,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,SAAI,SAAW,EAC7D,OAAO,EAAE,cAAY,OAAA,WAAW,EAAE,EAAb,CAAa,IAC9B,UAAU,cAEb,IAAI,YACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tab/Tab.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tab/Tab.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"Tab.test.js","sourceRoot":"","sources":["../../../../../src/components/Atoms/Tabs/Tab/Tab.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,yCAAyC,CAAC;AACjD,OAAO,GAAG,MAAM,OAAO,CAAC;AAExB,QAAQ,CAAC,mBAAmB,EAAE;IAC5B,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,GAAG,aAAC,IAAI,EAAC,QAAQ,gDAAyB,CAAC,UAAxD,CAAyD;QAC1E,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE;QAC1C,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,GAAG,aAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,gDAEnC,CACP,UAJgB,CAIf;QAEF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gDAAgD,EAAE;QAC7C,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,GAAG,aAAC,IAAI,EAAC,QAAQ,gDAAyB,CAAC,UAAxD,CAAyD;QAE1E,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wCAAwC,EAAE;QACrC,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,GAAG,aAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,gDAE3B,CACP,UAJgB,CAIf;QAEF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yCAAyC,EAAE;QACtC,IAAA,SAAS,GAAK,MAAM,CAC1B,KAAC,GAAG,aAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,gDAE5B,CACP,UAJgB,CAIf;QAEF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tabs.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | variant?: 'dark' | 'light'; 4 | className?: string; 5 | inHeader?: boolean; 6 | selected?: number; 7 | onChange?: (any: any) => void; 8 | [x: string]: any; 9 | } 10 | declare const previewConfig: { 11 | name: string; 12 | defaultState: { 13 | variant: string; 14 | selected: number; 15 | componentProps: { 16 | variant: string; 17 | selected: number; 18 | onChange: (value: any) => void; 19 | }; 20 | }; 21 | variant: { 22 | type: string; 23 | values: string[]; 24 | }; 25 | selected: { 26 | type: string; 27 | values: number[]; 28 | }; 29 | }; 30 | declare const Tabs: React.FC; 31 | export default Tabs; 32 | export { previewConfig }; 33 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tabs.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/corda/node-explorer/f11f868a003e1823b5d56e91645ad2919f8e9bfb/r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tabs.scss -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tabs/Tabs.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TextInput/TextInput.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Textarea/Textarea.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

The text area allows longer text input from the user. Styles and UI are similar to the regular text input.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Textarea/Textarea.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Toggle/Toggle.scss: -------------------------------------------------------------------------------- 1 | .toggle { 2 | --toggle-dot-size: 20px; 3 | --toggle-dot-padding: 4px; 4 | 5 | &::after { 6 | content: ''; 7 | position: absolute; 8 | z-index: 2; 9 | height: var(--toggle-dot-size); 10 | width: var(--toggle-dot-size); 11 | top: 5px; 12 | background-color: #fff; 13 | border-radius: 50%; 14 | } 15 | 16 | &:hover { 17 | &::after { 18 | box-shadow: var(--shadows-0-1-6-bluegray); 19 | } 20 | } 21 | 22 | &:focus { 23 | &::after { 24 | box-shadow: var(--shadows-0-1-6-bluegray); 25 | } 26 | } 27 | 28 | &-off { 29 | &.gray { 30 | background-color: var(--color-medium-light-gray-200); 31 | transition: background-color 0.2s ease-in-out; 32 | } 33 | &.redgreen { 34 | background-color: var(--color-red); 35 | transition: background-color 0.2s ease-in-out; 36 | } 37 | &::after { 38 | left: var(--toggle-dot-padding); 39 | transition: left 0.2s ease-in-out; 40 | } 41 | } 42 | 43 | &-on { 44 | &.gray { 45 | background-color: var(--color-medium-light-gray); 46 | transition: background-color 0.2s ease-in-out; 47 | } 48 | &.redgreen { 49 | background-color: var(--color-green); 50 | transition: background-color 0.2s ease-in-out; 51 | } 52 | &::after { 53 | left: calc(100% - (var(--toggle-dot-padding) + (var(--toggle-dot-size)))); 54 | transition: left 0.2s ease-in-out; 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Toggle/Toggle.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tooltip/Tooltip.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Tooltip.scss'; 3 | interface Props { 4 | className?: string; 5 | position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft'; 6 | variant?: 'dark' | 'light'; 7 | size?: 'small' | 'medium' | 'large'; 8 | show?: boolean; 9 | [x: string]: any; 10 | } 11 | declare const previewConfig: { 12 | name: string; 13 | defaultState: { 14 | show: boolean; 15 | componentProps: { 16 | show: boolean; 17 | position: string; 18 | className: string; 19 | variant: string; 20 | size: string; 21 | }; 22 | }; 23 | position: { 24 | type: string; 25 | values: string[]; 26 | }; 27 | variant: { 28 | type: string; 29 | values: string[]; 30 | }; 31 | size: { 32 | type: string; 33 | values: string[]; 34 | }; 35 | }; 36 | declare const Tooltip: React.FC; 37 | export default Tooltip; 38 | export { previewConfig }; 39 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/Tooltip/Tooltip.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.code.md: -------------------------------------------------------------------------------- 1 |

Properties

 2 | 3 | 4 | | Property | Type | Required? | Notes | 5 | | :---------- | :------------------ | :-------- | :--------------------------------------------------------------------------------------------------------------------------------- | 6 | | className | string | no | Classnames can be passed to the outermost wrapping `
` element of the component. | 7 | | onMouseOver | function () => void | no | | 8 | | onMouseOut | function () => void | no | | 9 | | Other props | any | no | Any other props that a `
` element can take. These will be applied to the outermost wrapping `
` element of the component. | 10 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | interface Props { 3 | className?: string; 4 | onMouseOver?: () => void; 5 | onMouseOut?: () => void; 6 | [x: string]: any; 7 | } 8 | declare const TooltipWrapper: React.FC; 9 | export default TooltipWrapper; 10 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.design.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

For design information about tooltips check out the atom's page.

4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.js: -------------------------------------------------------------------------------- 1 | var __assign = (this && this.__assign) || function () { 2 | __assign = Object.assign || function(t) { 3 | for (var s, i = 1, n = arguments.length; i < n; i++) { 4 | s = arguments[i]; 5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 6 | t[p] = s[p]; 7 | } 8 | return t; 9 | }; 10 | return __assign.apply(this, arguments); 11 | }; 12 | import { jsx as _jsx } from "react/jsx-runtime"; 13 | var TooltipWrapper = function (_a) { 14 | var _b = _a.className, className = _b === void 0 ? '' : _b, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, children = _a.children, otherProps = _a.otherProps; 15 | return (_jsx("div", __assign({ className: "relative " + className, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, otherProps, { children: children }), void 0)); 16 | }; 17 | export default TooltipWrapper; 18 | //# sourceMappingURL=TooltipWrapper.js.map -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"TooltipWrapper.js","sourceRoot":"","sources":["../../../../src/components/Atoms/TooltipWrapper/TooltipWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AASA,IAAM,cAAc,GAAoB,UAAC,EAMxC;QALC,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,UAAU,gBAAA;IAEV,OAAO,CACL,uBACE,SAAS,EAAE,cAAY,SAAW,EAClC,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,IAClB,UAAU,cAEb,QAAQ,YACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Atoms/TooltipWrapper/TooltipWrapper.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"TooltipWrapper.test.js","sourceRoot":"","sources":["../../../../src/components/Atoms/TooltipWrapper/TooltipWrapper.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,yCAAyC,CAAC;AACjD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,QAAQ,CAAC,8BAA8B,EAAE;IACvC,IAAI,CAAC,uBAAuB,EAAE;QACpB,IAAA,SAAS,GAAK,MAAM,CAAC,KAAC,cAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,cAAO,CAAC,WAAI,CAAC,UAA7D,CAA8D;QAC/E,MAAM,CAAC,SAAS,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kEAAkE,EAAE;;;;;oBACjE,eAAe,GAAkB;wBAC/B,IAAA,KAAwC,QAAQ,CAAC,KAAK,CAAC,EAAtD,eAAe,QAAA,EAAE,kBAAkB,QAAmB,CAAC;wBAE9D,OAAO,CACL,4BACE,KAAC,cAAc,aACb,WAAW,EAAE,cAAY,OAAA,kBAAkB,CAAC,IAAI,CAAC,EAAxB,CAAwB,EACjD,UAAU,EAAE,cAAY,OAAA,kBAAkB,CAAC,KAAK,CAAC,EAAzB,CAAyB,EACjD,KAAK,EAAC,GAAG,gBAET,KAAC,OAAO,aAAC,IAAI,EAAE,eAAe,0CAAwB,YACvC,WAChB,CACJ,CAAC;oBACJ,CAAC,CAAC;oBAEM,SAAS,GAAK,MAAM,CAAC,KAAC,eAAe,aAAG,CAAC,UAAhC,CAAiC;oBAClD,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;oBAC9D,WAAM,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAA;;oBAAlD,SAAkD,CAAC;oBACnD,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;oBAC9D,WAAM,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAA;;oBAApD,SAAoD,CAAC;oBACrD,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;;;;SAC/D,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Cells/Accordion/Accordion.code.md: -------------------------------------------------------------------------------- 1 |

Playground

 2 | 3 | 4 | Lorem ipsum dolor sit amet 5 | 6 | 7 |

Properties

 8 | 9 | | Property | Type | Required? | Notes | 10 | | :---------- | :------ | :-------- | :--------------------------------------------------------------------------------------------------------------------------------- | 11 | | title | string | yes | The text that will appear on the accordion opener. | 12 | | className | string | no | Classnames can be passed to the outermost wrapping `
` element of the component. | 13 | | dark | boolean | no | When present, the accordion will take on a light gray background colour. | 14 | | Other Props | any | no | Any other props that a `
` element can take. These will be applied to the outermost wrapping `
` element of the component. | 15 | 16 |

Children

 17 | 18 | Pass in the content of the open accordion as children. -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Cells/Accordion/Accordion.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Accordion.scss'; 3 | interface Props { 4 | title: string; 5 | className?: string; 6 | dark?: boolean; 7 | [x: string]: any; 8 | } 9 | declare const previewConfig: { 10 | name: string; 11 | defaultState: { 12 | background: string; 13 | componentProps: { 14 | title: string; 15 | dark: boolean; 16 | }; 17 | }; 18 | background: { 19 | type: string; 20 | options: { 21 | name: string; 22 | properties: { 23 | dark: boolean; 24 | }; 25 | }[]; 26 | }; 27 | }; 28 | declare const Accordion: React.FC; 29 | export default Accordion; 30 | export { previewConfig }; 31 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Cells/Accordion/Accordion.scss: -------------------------------------------------------------------------------- 1 | .accordion-content { 2 | transition: height 0.5s ease-in-out; 3 | } -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Cells/Accordion/Accordion.test.d.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect'; 2 | -------------------------------------------------------------------------------- /r3-tooling-design-system/r3-tooling-design-system-dev/lib/components/Cells/BottomBar/BottomBar.code.md: -------------------------------------------------------------------------------- 1 |

Properties

 2 | 3 | | Property | Type | Required? | Notes | 4 | | :---------- | :----- | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------- | 5 | | copyright | string | yes | This is the text that will appear in the left part of the footer. | 6 | | Other Props | any | no | Any other props that a `