├── .aat.yml ├── .all-contributorsrc ├── .cfignore ├── .editorconfig ├── .eslintrc ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── SUPPORT.md ├── .gitignore ├── .jest-test-results.json ├── .npmignore ├── .prettierignore ├── .storybook ├── HelpUsImprove.js ├── Logo.js ├── Tree.tsx ├── blocks │ ├── Anchor.tsx │ ├── ArgsTable │ │ ├── ArgControl.tsx │ │ ├── ArgJsDoc.tsx │ │ ├── ArgRow.stories.tsx │ │ ├── ArgRow.tsx │ │ ├── ArgValue.tsx │ │ ├── ArgsTable.tsx │ │ ├── NoControlsWarning.tsx │ │ ├── SectionRow.tsx │ │ ├── TabbedArgsTable.tsx │ │ ├── index.ts │ │ └── types.ts │ ├── Description.tsx │ ├── DocsContainer.tsx │ ├── DocsContext.ts │ ├── DocsPage.test.ts │ ├── DocsPage.tsx │ ├── DocsStory.tsx │ ├── Heading.tsx │ ├── IntroDescription.tsx │ ├── Meta.tsx │ ├── Preview.tsx │ ├── Primary.tsx │ ├── Props.tsx │ ├── PurePreview.tsx │ ├── Source.tsx │ ├── SourceContainer.tsx │ ├── Stories.tsx │ ├── Story.tsx │ ├── Subheading.tsx │ ├── Subtitle.tsx │ ├── Title.tsx │ ├── Wrapper.tsx │ ├── enhanceSource.test.ts │ ├── enhanceSource.tsx │ ├── index.ts │ ├── mdx.tsx │ ├── types.ts │ └── utils.ts ├── localAddon │ ├── preset.ts │ └── register.tsx ├── main.js ├── manager-head.html ├── manager.js ├── preview.js ├── shared.tsx ├── storybook.scss ├── theme.js └── webpack.config.js ├── .travis.yml ├── .watchmanconfig ├── CHANGELOG.md ├── LICENSE ├── azure-pipelines.yml ├── config ├── jest │ ├── cssTransform.js │ ├── fileTransform.js │ ├── jsTransform.js │ └── setup.js └── polyfills.js ├── examples ├── create-react-app │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── report.20201105.133316.30837.0.001.json │ ├── src │ │ ├── App.js │ │ ├── App.scss │ │ ├── App.test.js │ │ ├── components │ │ │ ├── DatePickerField.js │ │ │ ├── Navigation.js │ │ │ ├── SecondaryNavigation.js │ │ │ └── ToolTipTest.js │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js │ └── yarn.lock └── html-handlebars │ ├── .babelrc │ ├── README.md │ ├── dist │ ├── bundle.js │ └── index.html │ ├── index.hbs │ ├── package.json │ ├── redirect.hbs │ ├── webpack.config.js │ └── yarn.lock ├── index.html ├── package-lock.json ├── package.json ├── packages └── logos │ └── azure-pipelines.yml ├── readme.md ├── release.config.js ├── rollup.config.js ├── scripts ├── env.js └── exclude.txt ├── src ├── __tests__ │ └── index-test.js ├── assets │ ├── email │ │ ├── allstaff-internal-email.html │ │ ├── allstaff-outlook-internal-email.html │ │ ├── mail-logo@2x.png │ │ ├── newsletter-external-email-legacy.html │ │ ├── newsletter-external-email.html │ │ ├── transaction-external-email.html │ │ └── transaction-internal-email.html │ ├── fonts │ │ └── tajawal-v4-arabic │ │ │ ├── tajawal-v4-arabic-200.eot │ │ │ ├── tajawal-v4-arabic-200.svg │ │ │ ├── tajawal-v4-arabic-200.ttf │ │ │ ├── tajawal-v4-arabic-200.woff │ │ │ ├── tajawal-v4-arabic-200.woff2 │ │ │ ├── tajawal-v4-arabic-300.eot │ │ │ ├── tajawal-v4-arabic-300.svg │ │ │ ├── tajawal-v4-arabic-300.ttf │ │ │ ├── tajawal-v4-arabic-300.woff │ │ │ ├── tajawal-v4-arabic-300.woff2 │ │ │ ├── tajawal-v4-arabic-500.eot │ │ │ ├── tajawal-v4-arabic-500.svg │ │ │ ├── tajawal-v4-arabic-500.ttf │ │ │ ├── tajawal-v4-arabic-500.woff │ │ │ ├── tajawal-v4-arabic-500.woff2 │ │ │ ├── tajawal-v4-arabic-700.eot │ │ │ ├── tajawal-v4-arabic-700.svg │ │ │ ├── tajawal-v4-arabic-700.ttf │ │ │ ├── tajawal-v4-arabic-700.woff │ │ │ ├── tajawal-v4-arabic-700.woff2 │ │ │ ├── tajawal-v4-arabic-800.eot │ │ │ ├── tajawal-v4-arabic-800.svg │ │ │ ├── tajawal-v4-arabic-800.ttf │ │ │ ├── tajawal-v4-arabic-800.woff │ │ │ ├── tajawal-v4-arabic-800.woff2 │ │ │ ├── tajawal-v4-arabic-900.eot │ │ │ ├── tajawal-v4-arabic-900.svg │ │ │ ├── tajawal-v4-arabic-900.ttf │ │ │ ├── tajawal-v4-arabic-900.woff │ │ │ ├── tajawal-v4-arabic-900.woff2 │ │ │ ├── tajawal-v4-arabic-regular.eot │ │ │ ├── tajawal-v4-arabic-regular.svg │ │ │ ├── tajawal-v4-arabic-regular.ttf │ │ │ ├── tajawal-v4-arabic-regular.woff │ │ │ └── tajawal-v4-arabic-regular.woff2 │ ├── formatting │ │ ├── BannerNavigation.png │ │ ├── Blockquote.png │ │ ├── Breadcrumb.png │ │ ├── Button.png │ │ ├── Check.png │ │ └── Checkbox.png │ ├── illustrations │ │ ├── carrot-with-background.svg │ │ ├── carrot.svg │ │ ├── coffee-bean.svg │ │ ├── coffee-beans-with-background.svg │ │ ├── corn-bag-with-background.png │ │ ├── corn-bag-with-background.svg │ │ ├── corn-bag.svg │ │ ├── corn.svg │ │ ├── eggs-can-with-background.svg │ │ ├── eggs.svg │ │ ├── milk-with-background.svg │ │ ├── milk.svg │ │ ├── moving-van-boxes-with-background.svg │ │ ├── moving-van-with-background.svg │ │ ├── moving-van.svg │ │ ├── notebook-2-with-background.svg │ │ ├── notebook-2.svg │ │ ├── notebook-with-background.svg │ │ ├── notebook.svg │ │ ├── parachute-with-background.svg │ │ ├── parachute.svg │ │ ├── pumpkin-can-with-background.svg │ │ ├── pumpkin.svg │ │ ├── rice-with-background.svg │ │ ├── rice.svg │ │ ├── sorghum-with-background.svg │ │ ├── sorghum.svg │ │ ├── soy-bean-can-with-background.svg │ │ ├── soy-bean.svg │ │ ├── watering-can-with-background-1.svg │ │ ├── watering-can-with-background.svg │ │ ├── watering-can.svg │ │ ├── wheat-with-background.svg │ │ └── wheat.svg │ └── internal │ │ ├── background-contrast.png │ │ ├── brand-color.png │ │ ├── branding.svg │ │ ├── colors.png │ │ ├── hero-image.jpg │ │ ├── mobile-android-general.png │ │ ├── secondary-color.png │ │ ├── toolkit.svg │ │ ├── usability.svg │ │ ├── wfp-favicon-png32.png │ │ ├── wfp-favicon-png512.png │ │ ├── wfp-favicon-preview-png32.png │ │ ├── wfp-favicon-preview-png512.png │ │ └── yemen-hero-min.jpg ├── components │ ├── AnchorNavigation │ │ ├── AnchorNavigation-test.js │ │ ├── AnchorNavigation.js │ │ ├── AnchorNavigation.stories.js │ │ ├── README.mdx │ │ ├── _anchor-navigation.scss │ │ └── index.js │ ├── AuthLayout │ │ ├── AuthLayout-test.js │ │ ├── AuthLayout.js │ │ ├── AuthLayout.stories.js │ │ ├── README.mdx │ │ ├── _auth-layout.scss │ │ └── index.js │ ├── BannerNavigation │ │ ├── BannerNavigation-test.js │ │ ├── BannerNavigation.hbs │ │ ├── BannerNavigation.js │ │ ├── BannerNavigation.stories.js │ │ ├── BannerNavigation.twig │ │ ├── BannerNavigationWithContent.js │ │ ├── README.mdx │ │ ├── _banner-navigation.scss │ │ ├── index.js │ │ └── kinds.js │ ├── Blockquote │ │ ├── Blockquote-test.js │ │ ├── Blockquote.hbs │ │ ├── Blockquote.js │ │ ├── Blockquote.stories.js │ │ ├── Blockquote.twig │ │ ├── README.mdx │ │ ├── _blockquote.scss │ │ └── index.js │ ├── Breadcrumb │ │ ├── Breadcrumb-story.js │ │ ├── Breadcrumb-test.js │ │ ├── Breadcrumb.Skeleton.js │ │ ├── Breadcrumb.hbs │ │ ├── Breadcrumb.js │ │ ├── Breadcrumb.stories.js │ │ ├── README.mdx │ │ ├── _breadcrumb.scss │ │ └── index.js │ ├── BreadcrumbHome │ │ ├── BreadcrumbHome.js │ │ └── index.js │ ├── BreadcrumbItem │ │ ├── BreadcrumbItem.js │ │ └── index.js │ ├── Button │ │ ├── Button-test.js │ │ ├── Button.Skeleton.js │ │ ├── Button.d.ts │ │ ├── Button.js │ │ ├── Button.stories.js │ │ ├── Button.twig │ │ ├── README.mdx │ │ ├── _button.scss │ │ ├── _mixins.scss │ │ └── index.js │ ├── Card │ │ ├── Card-test.js │ │ ├── Card.js │ │ ├── Card.stories.js │ │ ├── Card.twig │ │ ├── README.mdx │ │ ├── _card.scss │ │ └── index.js │ ├── Checkbox │ │ ├── Checkbox-story.js │ │ ├── Checkbox-test.js │ │ ├── Checkbox.Skeleton.js │ │ ├── Checkbox.hbs │ │ ├── Checkbox.js │ │ ├── Checkbox.stories.js │ │ ├── README.mdx │ │ ├── _checkbox.scss │ │ └── index.js │ ├── CheckboxGroup │ │ ├── README.md │ │ ├── RadioButtonGroup-story.js │ │ ├── RadioButtonGroup.js │ │ ├── RadioButtonGroupWithoutControls.js │ │ └── index.js │ ├── Col │ │ ├── Col.js │ │ ├── _col.scss │ │ └── index.js │ ├── ContentSwitcher │ │ ├── ContentSwitcher-story.js │ │ ├── ContentSwitcher-test.js │ │ ├── ContentSwitcher.hbs │ │ ├── ContentSwitcher.js │ │ ├── ContentSwitcher.stories.js │ │ ├── README.mdx │ │ ├── _content-switcher.scss │ │ └── index.js │ ├── ContextMenu │ │ ├── ContextMenu.js │ │ ├── ContextMenu.stories.js │ │ ├── README.mdx │ │ ├── _context-menu.scss │ │ └── index.js │ ├── Credits │ │ ├── Credits-story.js │ │ ├── Credits-test.js │ │ ├── Credits.hbs │ │ ├── Credits.js │ │ ├── Credits.stories.js │ │ ├── README.mdx │ │ ├── _credits.scss │ │ └── index.js │ ├── DatePicker │ │ ├── DatePicker.stories.js │ │ ├── DateRangePickerInput.js │ │ ├── README.mdx │ │ ├── SingleDatePickerInput-test.js │ │ ├── SingleDatePickerInput.js │ │ ├── _date-picker.scss │ │ ├── funtionComponent.js │ │ └── index.js │ ├── Empty │ │ ├── Empty-test.js │ │ ├── Empty.js │ │ ├── Empty.stories.js │ │ ├── README.mdx │ │ ├── _empty.scss │ │ └── index.js │ ├── FileUploader │ │ ├── FileUploader-story.js │ │ ├── FileUploader-test.js │ │ ├── FileUploader.Skeleton.js │ │ ├── FileUploader.js │ │ ├── FileUploaderButton.legacy.js │ │ ├── FileUploaderDropContainer.js │ │ ├── FileUploaderItem.js │ │ ├── Filename.js │ │ ├── README.md │ │ ├── _file-uploader-legacy.scss │ │ ├── _file-uploader.scss │ │ ├── index.js │ │ └── stories │ │ │ └── drop-container.js │ ├── Footer │ │ ├── Footer-external.hbs │ │ ├── Footer-internal.hbs │ │ ├── Footer-test.js │ │ ├── Footer.js │ │ ├── Footer.stories.js │ │ ├── README.mdx │ │ ├── SdgLogo.js │ │ ├── _footer.scss │ │ └── index.js │ ├── Form │ │ ├── Form-story.js │ │ ├── Form-test.js │ │ ├── Form.js │ │ ├── Form.stories.js │ │ ├── README.mdx │ │ ├── _form.scss │ │ └── index.js │ ├── FormControls │ │ ├── FormControls-story.js │ │ ├── FormControls.js │ │ ├── README.md │ │ ├── _form-controls.scss │ │ └── index.js │ ├── FormError │ │ ├── FormError-story-legacy.js │ │ ├── FormError-test.js │ │ ├── FormError.hbs │ │ ├── FormError.js │ │ ├── README.md │ │ ├── _form-error.scss │ │ ├── formErrorResponse.js │ │ ├── formErrorValidation.js │ │ └── index.js │ ├── FormGroup │ │ ├── FormGroup-story.js │ │ ├── FormGroup-test.js │ │ ├── FormGroup.js │ │ ├── FormGroup.stories.js │ │ ├── README.mdx │ │ ├── _form-group.scss │ │ └── index.js │ ├── FormHint │ │ ├── FormHint-story.js │ │ ├── FormHint-test.js │ │ ├── FormHint.js │ │ ├── FormHint.stories.js │ │ ├── README.mdx │ │ ├── _form-hint.scss │ │ └── index.js │ ├── FormItem │ │ ├── FormItem-story.js │ │ ├── FormItem-test.js │ │ ├── FormItem.js │ │ ├── RfFormItem.js │ │ ├── __snapshots__ │ │ │ └── FormItem-test.js.snap │ │ └── index.js │ ├── FormLabel │ │ ├── FormLabel-story.js │ │ ├── FormLabel-test.js │ │ ├── FormLabel.hbs │ │ ├── FormLabel.js │ │ ├── FormLabel.stories.js │ │ ├── README.mdx │ │ ├── RfFormLabel.js │ │ ├── __snapshots__ │ │ │ └── FormLabel-test.js.snap │ │ └── index.js │ ├── FormWizard │ │ ├── FormWizard-story.js │ │ ├── FormWizard-test.js │ │ ├── FormWizard.js │ │ ├── FormWizard.stories.js │ │ ├── README.mdx │ │ ├── _form-wizard.scss │ │ └── index.js │ ├── Grid │ │ ├── Grid-test.js │ │ ├── Grid.hbs │ │ ├── Grid.js │ │ ├── Grid.stories.js │ │ ├── README.mdx │ │ ├── _grid.scss │ │ └── index.js │ ├── Hero │ │ ├── Hero-test.js │ │ ├── Hero.hbs │ │ ├── Hero.js │ │ ├── Hero.stories.js │ │ ├── Hero.twig │ │ ├── Herostories.js │ │ ├── README.mdx │ │ ├── _hero.scss │ │ └── index.js │ ├── Icon │ │ ├── Icon-story.js │ │ ├── Icon-test.js │ │ ├── Icon.Skeleton.js │ │ ├── Icon.js │ │ ├── Icon.stories.js │ │ ├── README.mdx │ │ └── index.js │ ├── InfoBar │ │ ├── InfoBar-story.js │ │ ├── InfoBar-test.js │ │ ├── InfoBar.js │ │ ├── InfoBar.stories.js │ │ ├── README.mdx │ │ ├── _info-bar.scss │ │ └── index.js │ ├── InlineLoading │ │ ├── InlineLoading-story.js │ │ ├── InlineLoading-test.js │ │ ├── InlineLoading.js │ │ ├── InlineLoading.stories.js │ │ ├── README.mdx │ │ ├── _inline-loading.scss │ │ ├── _keyframes.scss │ │ ├── index.js │ │ ├── inline-loading.config.js │ │ ├── inline-loading.hbs │ │ └── inline-loading.js │ ├── Input │ │ ├── Input-story.js │ │ ├── Input-test.js │ │ ├── Input.js │ │ ├── Input.stories.js │ │ ├── README.mdx │ │ ├── _input.scss │ │ └── index.js │ ├── InputGroup │ │ ├── InputGroup-test.js │ │ ├── InputGroup.js │ │ ├── InputGroup.stories.js │ │ ├── README.mdx │ │ ├── RadioButtonGroupWithoutControls.js │ │ └── index.js │ ├── Item │ │ ├── Item-test.js │ │ ├── Item.js │ │ ├── Item.stories.js │ │ ├── README.mdx │ │ ├── _item.scss │ │ └── index.js │ ├── Link │ │ ├── Link-test.js │ │ ├── Link.hbs │ │ ├── Link.js │ │ ├── Link.stories.js │ │ ├── README.mdx │ │ ├── _link.scss │ │ └── index.js │ ├── List │ │ ├── List-test.js │ │ ├── List.hbs │ │ ├── List.js │ │ ├── List.stories.js │ │ ├── ListItem.js │ │ ├── README.mdx │ │ ├── _list.scss │ │ └── index.js │ ├── Loading │ │ ├── Loading-story.js │ │ ├── Loading-test.js │ │ ├── Loading.js │ │ ├── Loading.stories.js │ │ ├── README.mdx │ │ ├── _keyframes.scss │ │ ├── _loading.scss │ │ ├── _mixins.scss │ │ ├── _vars.scss │ │ ├── index.js │ │ ├── loading-vanilla.js │ │ ├── loading.config.js │ │ └── loading.hbs │ ├── MainNavigation │ │ ├── MainNavigation-test.js │ │ ├── MainNavigation.hbs │ │ ├── MainNavigation.js │ │ ├── MainNavigation.stories.js │ │ ├── MainNavigationRtl-story.js │ │ ├── README.mdx │ │ ├── _main-navigation.scss │ │ ├── index.js │ │ └── main-navigation.js │ ├── MainNavigationItem │ │ ├── MainNavigationItem.js │ │ └── index.js │ ├── MdxComponents │ │ ├── MdxComponents.js │ │ ├── MdxComponents.stories.js │ │ ├── README.mdx │ │ ├── index.js │ │ └── markdown.mdx │ ├── Modal │ │ ├── Modal-story.js │ │ ├── Modal-test.js │ │ ├── Modal.hbs │ │ ├── Modal.js │ │ ├── Modal.stories.js │ │ ├── ModalWithControls-story.js │ │ ├── README.mdx │ │ ├── _mixins.scss │ │ ├── _modal.scss │ │ └── index.js │ ├── ModalWrapper │ │ ├── ModalWrapper-test.js │ │ ├── ModalWrapper.js │ │ ├── ModalWrapper.stories.js │ │ ├── README.mdx │ │ ├── __snapshots__ │ │ │ └── ModalWrapper-test.js.snap │ │ └── index.js │ ├── Module │ │ ├── Module-story.js │ │ ├── Module-test.js │ │ ├── Module.hbs │ │ ├── Module.js │ │ ├── Module.stories.js │ │ ├── ModuleBody.js │ │ ├── ModuleFooter.js │ │ ├── ModuleHeader.js │ │ ├── README.mdx │ │ ├── _module.scss │ │ └── index.js │ ├── Notification.legacy │ │ ├── Notification-story.js │ │ ├── Notification.js │ │ ├── Notification.stories.js │ │ ├── README.mdx │ │ ├── _closeButton.scss │ │ ├── _notification.scss │ │ ├── _progressBar.scss │ │ ├── _toast.scss │ │ ├── _toastContainer.scss │ │ ├── _variables.scss │ │ ├── animations │ │ │ ├── _bounce.scss │ │ │ ├── _flip.scss │ │ │ ├── _slide.scss │ │ │ └── _zoom.scss │ │ └── index.js │ ├── Notification │ │ ├── Notification-test.js │ │ ├── Notification.js │ │ ├── Notification.legacy.js │ │ ├── Notification.stories.js │ │ ├── README.mdx │ │ ├── _notification.scss │ │ ├── a11yIconWarningSolid.js │ │ └── index.js │ ├── NumberInput │ │ ├── NumberInput-test.js │ │ ├── NumberInput.Skeleton.js │ │ ├── NumberInput.js │ │ ├── NumberInput.legacy.js │ │ ├── NumberInput.stories.js │ │ ├── NumberInput.stories.js.legacy │ │ ├── README.mdx │ │ ├── _number-input.scss │ │ └── index.js │ ├── Pagination │ │ ├── Pagination-story-legacy.js │ │ ├── Pagination-test.js │ │ ├── Pagination.Skeleton.js │ │ ├── Pagination.js │ │ ├── Pagination.stories.js │ │ ├── README.mdx │ │ ├── _pagination.scss │ │ └── index.js │ ├── RadioButton │ │ ├── README.mdx │ │ ├── RadioButton-story.js │ │ ├── RadioButton-test.js │ │ ├── RadioButton.Skeleton.js │ │ ├── RadioButton.hbs │ │ ├── RadioButton.js │ │ ├── RadioButton.stories.js │ │ ├── _radio-button.scss │ │ └── index.js │ ├── RadioButtonGroup │ │ ├── README.md │ │ ├── RadioButtonGroup-story.js │ │ ├── RadioButtonGroup-test.js │ │ ├── RadioButtonGroup.js │ │ ├── RadioButtonGroupWithoutControls.js │ │ └── index.js │ ├── ReactDropzone │ │ ├── README.mdx │ │ ├── ReactDropzone.stories.js │ │ ├── _react-dropzone.scss │ │ └── index.js │ ├── ReactSelect │ │ ├── README.mdx │ │ ├── ReactSelect.stories.js │ │ └── _react-select.scss │ ├── ReadMore │ │ ├── README.mdx │ │ ├── ReadMore-story.js │ │ ├── ReadMore-test.js │ │ ├── ReadMore.js │ │ ├── ReadMore.stories.js │ │ ├── _read-more.scss │ │ └── index.js │ ├── ReduxFormWrapper │ │ ├── README.md │ │ ├── ReduxFormWrapper-story.js │ │ ├── ReduxFormWrapper-test.js │ │ ├── ReduxFormWrapper.js │ │ ├── ReduxFormWrapperRadio-story.js │ │ ├── ReduxFormWrapperReactSelect-story.js │ │ ├── ReduxFormWrapperSelect-story.js │ │ ├── ReduxFormWrapperToggle-story.js │ │ └── index.js │ ├── Search │ │ ├── README.mdx │ │ ├── Search-story.js │ │ ├── Search-test.js │ │ ├── Search.Skeleton.js │ │ ├── Search.js │ │ ├── Search.legacy.js │ │ ├── Search.stories.js │ │ ├── _search.scss │ │ └── index.js │ ├── SecondaryNavigation │ │ ├── README.mdx │ │ ├── SecondaryNavigation-story.js │ │ ├── SecondaryNavigation-test.js │ │ ├── SecondaryNavigation.hbs │ │ ├── SecondaryNavigation.js │ │ ├── SecondaryNavigation.stories.js │ │ ├── _secondary-navigation.scss │ │ └── index.js │ ├── Select │ │ ├── README.mdx │ │ ├── Select-story.js │ │ ├── Select-test.js │ │ ├── Select.Skeleton.js │ │ ├── Select.js │ │ ├── Select.stories.js │ │ ├── _select.scss │ │ └── index.js │ ├── SelectItem │ │ ├── SelectItem-test.js │ │ ├── SelectItem.js │ │ └── index.js │ ├── SelectItemGroup │ │ ├── SelectItemGroup-test.js │ │ ├── SelectItemGroup.js │ │ └── index.js │ ├── Sidebar │ │ ├── PHONEBOOK.json │ │ ├── README.mdx │ │ ├── Sidebar-test.js │ │ ├── Sidebar.js │ │ ├── Sidebar.stories.js │ │ ├── _sidebar.scss │ │ └── index.js │ ├── SidebarItem │ │ ├── README.mdx │ │ ├── SidebarItem-stories.js │ │ ├── SidebarItem.js │ │ └── _sidebar-item.scss │ ├── SkeletonText │ │ ├── SkeletonText-story.js │ │ ├── SkeletonText-test.js │ │ ├── SkeletonText.js │ │ ├── _skeleton-icon.scss │ │ ├── _skeleton-text.scss │ │ ├── _skeleton.scss │ │ └── index.js │ ├── Slider │ │ ├── README.mdx │ │ ├── Slider-test.js │ │ ├── Slider.Skeleton.js │ │ ├── Slider.js │ │ ├── Slider.legacy.js │ │ ├── Slider.stories.js │ │ ├── _slider.scss │ │ └── index.js │ ├── StepNavigation │ │ ├── README.mdx │ │ ├── StepNavigation-story.js │ │ ├── StepNavigation-test.js │ │ ├── StepNavigation.Skeleton.js │ │ ├── StepNavigation.hbs │ │ ├── StepNavigation.js │ │ ├── StepNavigation.stories.js │ │ ├── _step-navigation.scss │ │ └── index.js │ ├── StepNavigationItem │ │ ├── StepNavigationItem-test.js │ │ ├── StepNavigationItem.js │ │ ├── _step-navigation-item.scss │ │ └── index.js │ ├── Story │ │ ├── README.mdx │ │ ├── Story-text.js │ │ ├── Story.hbs │ │ ├── Story.js │ │ ├── Story.stories.js │ │ ├── _story.scss │ │ └── index.js │ ├── SubNavigation │ │ ├── README.mdx │ │ ├── SubNavigation-story.js │ │ ├── SubNavigation-test.js │ │ ├── SubNavigation.js │ │ ├── SubNavigation.stories.js │ │ ├── _sub-navigation.scss │ │ └── index.js │ ├── Switch │ │ ├── Switch-test.js │ │ ├── Switch.js │ │ └── index.js │ ├── Tab │ │ ├── Tab-test.js │ │ ├── Tab.js │ │ └── index.js │ ├── TabContent │ │ ├── TabContent-test.js │ │ ├── TabContent.js │ │ └── index.js │ ├── Table │ │ ├── README.mdx │ │ ├── Table-test.js │ │ ├── Table.js │ │ ├── Table.stories.js │ │ ├── TableSorting.js │ │ ├── _table.scss │ │ ├── index.js │ │ └── makeData.js │ ├── TablePagination │ │ ├── TablePagination.js │ │ └── index.js │ ├── Tabs │ │ ├── README.mdx │ │ ├── Tabs-story.js │ │ ├── Tabs-test.js │ │ ├── Tabs.Skeleton.js │ │ ├── Tabs.hbs │ │ ├── Tabs.js │ │ ├── Tabs.stories.js │ │ ├── _tabs.scss │ │ └── index.js │ ├── Tag │ │ ├── README.mdx │ │ ├── Tag-story.js │ │ ├── Tag-test.js │ │ ├── Tag.Skeleton.js │ │ ├── Tag.js │ │ ├── Tag.stories.js │ │ ├── _mixins.scss │ │ ├── _tag.scss │ │ ├── index.js │ │ ├── tag.config.js │ │ └── tag.hbs │ ├── Text │ │ ├── README.mdx │ │ ├── Text-test.js │ │ ├── Text.js │ │ ├── Text.stories.js │ │ ├── _text.scss │ │ └── index.js │ ├── TextArea │ │ ├── README.mdx │ │ ├── TextArea-test.js │ │ ├── TextArea.Skeleton.js │ │ ├── TextArea.js │ │ ├── TextArea.stories.js │ │ ├── Textarea-story.js │ │ ├── __snapshots__ │ │ │ └── TextArea-test.js.snap │ │ ├── _text-area.scss │ │ └── index.js │ ├── TextInput │ │ ├── README.mdx │ │ ├── TextInput-test.js │ │ ├── TextInput.Skeleton.js │ │ ├── TextInput.hbs │ │ ├── TextInput.js │ │ ├── TextInput.stories.js │ │ ├── _text-input.scss │ │ └── index.js │ ├── Toggle │ │ ├── README.mdx │ │ ├── Toggle-story.js │ │ ├── Toggle-test.js │ │ ├── Toggle.Skeleton.js │ │ ├── Toggle.js │ │ ├── Toggle.stories.js │ │ ├── _toggle.scss │ │ └── index.js │ ├── Tooltip │ │ ├── Empty.js │ │ ├── README.mdx │ │ ├── Tooltip.js │ │ ├── Tooltip.legacy.js │ │ ├── Tooltip.stories.js │ │ ├── _mixins.scss │ │ ├── _tooltip.legacy.scss │ │ ├── _tooltip.scss │ │ ├── _vars.scss │ │ ├── animations │ │ │ └── fade.scss │ │ ├── backdrop.scss │ │ ├── index.js │ │ ├── legacy │ │ │ ├── _mixins.scss │ │ │ ├── _tooltip.scss │ │ │ ├── _vars.scss │ │ │ └── themes │ │ │ │ └── light.scss │ │ ├── svg-arrow.scss │ │ └── themes │ │ │ ├── light-border.scss │ │ │ └── light.scss │ ├── Unit │ │ ├── InvalidUnit.js │ │ ├── README.mdx │ │ ├── SimpleCalc.js │ │ ├── StringUnit.js │ │ ├── SvgUnit.js │ │ ├── Unit-story.legacy.js │ │ ├── Unit-test.js │ │ ├── Unit.hbs │ │ ├── Unit.js │ │ ├── Unit.stories.js │ │ ├── UnitList.js │ │ ├── YearMonthCalc.js │ │ ├── _unit.scss │ │ ├── currencyCalc.js │ │ ├── index.js │ │ ├── percentageCalc.js │ │ └── scaleLookup.js │ ├── User │ │ ├── README.mdx │ │ ├── User-story.js │ │ ├── User-test.js │ │ ├── User.hbs │ │ ├── User.js │ │ ├── User.stories.js │ │ ├── _user.scss │ │ └── index.js │ ├── Value │ │ ├── README.mdx │ │ ├── Value-story.js │ │ ├── Value-test.js │ │ ├── Value.js │ │ ├── Value.stories.js │ │ ├── _value.scss │ │ └── index.js │ └── Wrapper │ │ ├── README.mdx │ │ ├── Wrapper-story.js │ │ ├── Wrapper-test.js │ │ ├── Wrapper.js │ │ ├── Wrapper.stories.js │ │ ├── _wrapper.scss │ │ └── index.js ├── documentation │ ├── Accessibility.stories.mdx │ ├── AndroidApps │ │ ├── AndroidApps-story.js │ │ └── AndroidApps.stories.mdx │ ├── AppIcon │ │ ├── AppIcon-story.js │ │ └── AppIcon.stories.mdx │ ├── ApplicationPage │ │ ├── ApplicationPage.js │ │ ├── ApplicationPage.stories.js │ │ ├── ContentPage-story-draft.js │ │ ├── Dashboard.js │ │ ├── Dashboard.stories.mdx │ │ └── README.mdx │ ├── BrowserSupport.stories.mdx │ ├── BrowserWarning │ │ ├── BrowserWarning.js │ │ ├── BrowserWarning.stories.js │ │ └── README.mdx │ ├── Capitalization │ │ └── Capitalization.stories.mdx │ ├── Changelog │ │ ├── Changelog-story.js │ │ └── _changelog.scss │ ├── ColourGuidelines-story-depreciated.js │ ├── Colours │ │ ├── Colour.stories.mdx │ │ ├── ColourDocs.js │ │ ├── ColourList-story.js │ │ ├── ColourList.js │ │ └── colours.scss │ ├── ComplexForm │ │ ├── ComplexForm.js │ │ └── ComplexForm.stories.mdx │ ├── Credits │ │ ├── Credits.js │ │ └── Credits.stories.mdx │ ├── Darkmode │ │ └── Darkmode.stories.mdx │ ├── DataVisualization │ │ ├── DataVisualization.stories.mdx │ │ ├── MixBarChart.js │ │ └── PieChart.js │ ├── DataVisualizationLegacy │ │ └── DataVisualization-story.js │ ├── Development-story-depreciated.js │ ├── Email │ │ └── Email.stories.mdx │ ├── Favicons │ │ ├── FAVICONS-README.md │ │ ├── FaviconGenerator.js │ │ ├── Favicons.stories.mdx │ │ └── favicon │ │ │ ├── center.js │ │ │ └── favicon.js │ ├── FormDesign │ │ ├── FormDesign-story.js │ │ └── FormDesign.stories.mdx │ ├── Grid │ │ ├── Grid-story.js │ │ └── Grid.stories.mdx │ ├── HtmlComponent.js │ ├── Icons │ │ ├── IconConverter.js │ │ ├── Icons.stories.mdx │ │ ├── IconsDocumentation.js │ │ ├── build.js │ │ ├── formatJS.js │ │ └── getJSON.js │ ├── Illustrations │ │ ├── Illustrations.js │ │ └── Illustrations.stories.mdx │ ├── Intro │ │ ├── Intro.js │ │ ├── Intro.stories.mdx │ │ ├── README.md │ │ └── _intro.scss │ ├── Layout │ │ ├── Layout-story.js │ │ └── Layout.stories.mdx │ ├── LoginPage │ │ ├── LoginPage.stories.js │ │ └── README.mdx │ ├── Logos │ │ ├── Logos.js │ │ └── Logos.stories.mdx │ ├── Maps │ │ ├── Maps-story.js │ │ └── Maps.stories.mdx │ ├── NAMING-README.md │ ├── Naming │ │ └── Naming.stories.mdx │ ├── Navigation │ │ └── Navigation.stories.mdx │ ├── NotAuthorized │ │ ├── NotAuthorized.stories.js │ │ └── README.mdx │ ├── Page.js │ ├── PageSpeed.stories.mdx │ ├── ProductList │ │ └── ProductList.stories │ ├── RegularPage.js │ ├── RegularPage │ │ ├── README.mdx │ │ └── RegularPage.stories.js │ ├── SingleComponent.js │ ├── TableWithFilter │ │ ├── DataTable.js │ │ ├── Form.js │ │ ├── MockData.json │ │ ├── README.mdx │ │ ├── ReactSelectWrapper.js │ │ ├── TableWIthFilter.stories.js │ │ ├── TableWithFilter-story.js │ │ ├── TableWithFilter.js │ │ └── columns.js │ ├── Typography │ │ ├── Typography-story.js │ │ ├── Typography.js │ │ └── Typography.stories.mdx │ ├── Usage │ │ ├── ContributionGuidelines.stories.mdx │ │ ├── ResourcesDesigners.stories.mdx │ │ ├── SampleProject.stories.mdx │ │ ├── SupportAndFeedback.stories.mdx │ │ ├── ToolRecommendations.stories.mdx │ │ ├── UsageCss.stories.mdx │ │ ├── UsageDevelopers.stories.mdx │ │ ├── UsageHtml-story.legacy.js │ │ └── WhatsNew.stories.mdx │ ├── WizardForm │ │ ├── README.mdx │ │ ├── Wizard.js │ │ ├── Wizard.new.js │ │ ├── WizardForm-story.js │ │ └── WizardForm.stories.js │ ├── WizardHookForm │ │ ├── FormOne.js │ │ ├── FormThree.js │ │ ├── FormTwo.js │ │ ├── README.mdx │ │ ├── WizardForm.js │ │ ├── WizardForm.stories.js │ │ └── WizardHook.js │ └── samples │ │ ├── NotFound.stories.js │ │ └── README.mdx ├── globals │ ├── assets │ │ ├── bluemix-logo.svg │ │ └── images │ │ │ └── placeholder-icon-32x32.svg │ ├── data │ │ ├── colors.js │ │ └── colors.json │ ├── js │ │ ├── boot.js │ │ ├── components.js │ │ ├── misc │ │ │ ├── event-matches.js │ │ │ ├── get-launching-details.js │ │ │ ├── mixin.js │ │ │ ├── on.js │ │ │ ├── resize.js │ │ │ └── svg-toggle-class.js │ │ ├── mixins │ │ │ ├── README.md │ │ │ ├── create-component.js │ │ │ ├── evented-show-hide-state.js │ │ │ ├── evented-state.js │ │ │ ├── handles.js │ │ │ ├── init-component-by-event.js │ │ │ ├── init-component-by-launcher.js │ │ │ ├── init-component-by-search.js │ │ │ └── track-blur.js │ │ ├── settings.js │ │ └── watch.js │ └── scss │ │ ├── README.md │ │ ├── _colors.scss │ │ ├── _css--arabic-font-face.scss │ │ ├── _css--body.scss │ │ ├── _css--font-face.scss │ │ ├── _css--helpers.scss │ │ ├── _css--reset.scss │ │ ├── _css--typography.scss │ │ ├── _feature-flags.scss │ │ ├── _functions.scss │ │ ├── _helper-mixins.scss │ │ ├── _layer.scss │ │ ├── _layout.scss │ │ ├── _mixins.scss │ │ ├── _open-sans.scss │ │ ├── _rtl.scss │ │ ├── _spacing.scss │ │ ├── _tajawal.scss │ │ ├── _text-gradient.scss │ │ ├── _theme-tokens.scss │ │ ├── _theme.scss │ │ ├── _typography.scss │ │ ├── _vars.scss │ │ ├── styles.css │ │ ├── styles.css.map │ │ └── styles.scss ├── index.js ├── internal │ ├── ClickListener.js │ ├── FeatureFlags.js │ ├── FloatingMenu.js │ ├── InnerClickListener.js │ ├── OptimizedResize.js │ ├── RfFormJest.js │ ├── RfFormWrapper.js │ ├── Selection.js │ ├── Storyshots.test.js │ ├── __tests__ │ │ ├── ClickListener-test.js │ │ ├── InnerClickListener-test.js │ │ ├── Selection-test.js │ │ └── __snapshots__ │ │ │ ├── ClickListener-test.js.snap │ │ │ ├── InnerClickListener-test.js.snap │ │ │ └── Selection-test.js.snap │ ├── configureStore.js │ ├── loadDefaultData.js │ ├── useDetectPrint.js │ └── withTests.js ├── prop-types │ ├── __tests__ │ │ ├── childrenOf-test.js │ │ └── childrenOfType-test.js │ ├── childrenOf.js │ ├── childrenOfType.js │ ├── isRequiredOneOf.js │ ├── requiredIfValueExists.js │ ├── tools │ │ ├── __tests__ │ │ │ └── getDisplayName-test.js │ │ ├── createChainableTypeChecker.js │ │ └── getDisplayName.js │ └── types.js ├── tools │ ├── __tests__ │ │ ├── array-test.js │ │ ├── events-test.js │ │ └── uniqueId-test.js │ ├── array.js │ ├── events.js │ ├── mergeRefs.js │ ├── setupGetInstanceId.js │ ├── uniqueId.js │ ├── withState.js │ └── wrapComponent.js └── types │ ├── AnchorNavigation.d.ts │ ├── AuthLayout.d.ts │ ├── BackgroundContent.d.ts │ ├── BannerNavigation.d.ts │ ├── BannerNavigationItem.d.ts │ ├── Blockquote.d.ts │ ├── Breadcrumb.d.ts │ ├── BreadcrumbHome.d.ts │ ├── BreadcrumbItem.d.ts │ ├── Button.d.ts │ ├── Card.d.ts │ ├── Checkbox.d.ts │ ├── ContentSwitcher.d.ts │ ├── ContextMenu.d.ts │ ├── ContextMenuGroup.d.ts │ ├── ContextMenuItem.d.ts │ ├── Credits.d.ts │ ├── DateRangePickerInput.d.ts │ ├── Empty.d.ts │ ├── Footer.d.ts │ ├── Form.d.ts │ ├── FormGroup.d.ts │ ├── FormHint.d.ts │ ├── FormLabel.d.ts │ ├── FormWizard.d.ts │ ├── Hero.d.ts │ ├── Icon.d.ts │ ├── InfoBar.d.ts │ ├── InlineLoading.d.ts │ ├── Input.d.ts │ ├── InputGroup.d.ts │ ├── Item.d.ts │ ├── Link.d.ts │ ├── List │ ├── List.d.ts │ ├── ListItem.d.ts │ └── index.d.ts │ ├── Loading.d.ts │ ├── Modal │ ├── Modal.d.ts │ ├── ModalWrapper.d.ts │ └── index.d.ts │ ├── Module │ ├── Module.d.ts │ ├── ModuleBody.d.ts │ ├── ModuleFooter.d.ts │ ├── ModuleHeader.d.ts │ └── index.d.ts │ ├── Navigation │ ├── MainNavigation.d.ts │ ├── MainNavigationItem.d.ts │ ├── SecondaryNavigation.d.ts │ ├── SecondaryNavigationTitle.d.ts │ ├── StepNavigation.d.ts │ ├── StepNavigationItem.d.ts │ ├── SubNavigation.d.ts │ ├── SubNavigationContent.d.ts │ ├── SubNavigationFilter.d.ts │ ├── SubNavigationGroup.d.ts │ ├── SubNavigationHeader.d.ts │ ├── SubNavigationItem.d.ts │ ├── SubNavigationLink.d.ts │ ├── SubNavigationList.d.ts │ ├── SubNavigationTitle.d.ts │ └── index.d.ts │ ├── Notification │ ├── InlineNotification.d.ts │ ├── Notification.d.ts │ ├── NotificationActionButton.d.ts │ ├── NotificationButton.d.ts │ ├── NotificationIcon.d.ts │ ├── NotificationTextDetails.d.ts │ ├── ToastNotification.d.ts │ └── index.d.ts │ ├── NumberInput.d.ts │ ├── Pagination.d.ts │ ├── RadioButton.d.ts │ ├── RadioButtonGroup.d.ts │ ├── ReadMore.d.ts │ ├── Search.d.ts │ ├── Select │ ├── Select.d.ts │ ├── SelectItem.d.ts │ └── index.d.ts │ ├── Sidebar │ ├── Sidebar.d.ts │ ├── SidebarBackButton.d.ts │ ├── SidebarContentBody.d.ts │ ├── SidebarContentHeader.d.ts │ ├── SidebarHeader.d.ts │ ├── SidebarScroll.d.ts │ └── index.d.ts │ ├── SingleDatePickerInput.d.ts │ ├── Story.d.ts │ ├── Table │ ├── Table.d.ts │ ├── TablePagination.d.ts │ └── index.d.ts │ ├── Tabs │ ├── Tab.d.ts │ ├── TabContent.d.ts │ ├── Tabs.d.ts │ └── index.d.ts │ ├── Tag.d.ts │ ├── Text.d.ts │ ├── TextArea.d.ts │ ├── TextInput.d.ts │ ├── Toggle.d.ts │ ├── Tooltip.d.ts │ ├── Unit.d.ts │ ├── User.d.ts │ ├── Value.d.ts │ ├── Wrapper.d.ts │ ├── index.d.ts │ └── utils │ └── index.d.ts ├── ssr-tests └── loads.js ├── stories.asketch.jsonframe.json ├── story2sketch.config.js ├── storybook-static ├── favicon.ico └── sb_dll │ ├── storybook_ui-manifest.json │ ├── storybook_ui_dll.LICENCE │ └── storybook_ui_dll.js └── yarn.lock /.cfignore: -------------------------------------------------------------------------------- 1 | * 2 | !manifest.yml 3 | !Staticfile 4 | !storybook-static 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Closes @wfp/ui# 2 | 3 | {{short description}} 4 | 5 | #### Changelog 6 | 7 | **New** 8 | 9 | * {{new thing}} 10 | 11 | **Changed** 12 | 13 | * {{change thing}} 14 | 15 | **Removed** 16 | 17 | * {{removed thing}} 18 | -------------------------------------------------------------------------------- /.github/SUPPORT.md: -------------------------------------------------------------------------------- 1 | # Support 2 | 3 | If you run into an issue, sorry about that! We definitely want to make sure that 4 | your experience using the WFP UI is the best that it can be. 5 | 6 | When this happens, just create an issue on GitHub by filling out the template 7 | or give feedback via Usabilla and we'll try our best to respond in a reasonable time. 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore generated folders 2 | node_modules 3 | /es 4 | lib 5 | umd 6 | source 7 | docs 8 | assets 9 | !src/assets 10 | css 11 | dist 12 | 13 | # Logs 14 | *.log 15 | 16 | # Editor 17 | .DS_Store 18 | *.swp 19 | .idea 20 | .vscode 21 | .env 22 | 23 | # Coverage directory used by tools like Istanbul 24 | coverage 25 | 26 | # a11y files 27 | a11y/results 28 | 29 | # Generated by npm@5, but project currently uses Yarn 30 | # package-lock.json 31 | 32 | # Jest Test results 33 | jest-test-results.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tests 3 | .docz 4 | .github 5 | .storybook 6 | .vscode 7 | config 8 | examples 9 | scripts 10 | __tests__ 11 | *.stories.js 12 | *-story.js 13 | *.snap 14 | *-test.js 15 | *.tgz 16 | *.md 17 | *.mdx 18 | .cfignore 19 | .editorconfig 20 | .eslintrc 21 | .prettierignore 22 | .watchmanconfig 23 | storybook-static 24 | jest-test-results.json -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | node_modules 3 | assets 4 | css 5 | lib 6 | es 7 | docs 8 | umd 9 | coverage -------------------------------------------------------------------------------- /.storybook/blocks/Anchor.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react'; 2 | 3 | export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`; 4 | 5 | export interface AnchorProps { 6 | storyId: string; 7 | } 8 | 9 | export const Anchor: FC = ({ storyId, children }) => ( 10 |
{children}
11 | ); 12 | -------------------------------------------------------------------------------- /.storybook/blocks/ArgsTable/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types'; 2 | export * from './ArgsTable'; 3 | export * from './TabbedArgsTable'; 4 | export * from './NoControlsWarning'; 5 | -------------------------------------------------------------------------------- /.storybook/blocks/DocsContext.ts: -------------------------------------------------------------------------------- 1 | import { Context, createContext } from 'react'; 2 | 3 | export interface DocsContextProps { 4 | id?: string; 5 | kind?: string; 6 | name?: string; 7 | 8 | /** 9 | * mdxStoryNameToKey is an MDX-compiler-generated mapping of an MDX story's 10 | * display name to its story key for ID generation. It's used internally by the `` 11 | * and `Preview` doc blocks. 12 | */ 13 | mdxStoryNameToKey?: Record; 14 | mdxComponentMeta?: any; 15 | parameters?: any; 16 | storyStore?: any; 17 | forceRender?: () => void; 18 | } 19 | 20 | export const DocsContext: Context = createContext({}); 21 | -------------------------------------------------------------------------------- /.storybook/blocks/DocsPage.test.ts: -------------------------------------------------------------------------------- 1 | import { extractTitle } from './Title'; 2 | 3 | describe('defaultTitleSlot', () => { 4 | it('splits on last /', () => { 5 | const parameters = {}; 6 | expect(extractTitle({ kind: 'a/b/c', parameters })).toBe('c'); 7 | expect(extractTitle({ kind: 'a|b', parameters })).toBe('a|b'); 8 | expect(extractTitle({ kind: 'a/b/c.d', parameters })).toBe('c.d'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /.storybook/blocks/Heading.tsx: -------------------------------------------------------------------------------- 1 | import React, { FunctionComponent } from 'react'; 2 | import { H2 } from '@storybook/components'; 3 | import { HeaderMdx } from './mdx'; 4 | 5 | export interface HeadingProps { 6 | children: JSX.Element | string; 7 | disableAnchor?: boolean; 8 | } 9 | 10 | export const Heading: FunctionComponent = ({ 11 | children, 12 | disableAnchor, 13 | }) => { 14 | if (disableAnchor || typeof children !== 'string') { 15 | return

{children}

; 16 | } 17 | const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-'); 18 | return ( 19 | 20 | {children} 21 | 22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /.storybook/blocks/Primary.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, FC } from 'react'; 2 | import { DocsContext } from '@storybook/addon-docs/dist/esm/blocks/DocsContext'; 3 | import { DocsStory } from './DocsStory'; 4 | import { getDocsStories } from './utils'; 5 | 6 | interface PrimaryProps { 7 | name?: string; 8 | } 9 | 10 | export const Primary: FC = ({ name }) => { 11 | const context = useContext(DocsContext); 12 | const componentStories = getDocsStories(context); 13 | let story; 14 | if (componentStories) { 15 | story = name 16 | ? componentStories.find((s) => s.name === name) 17 | : componentStories[0]; 18 | } 19 | return story ? : null; 20 | }; 21 | -------------------------------------------------------------------------------- /.storybook/blocks/Subheading.tsx: -------------------------------------------------------------------------------- 1 | import React, { FunctionComponent } from 'react'; 2 | import { H3 } from '@storybook/components'; 3 | import { HeaderMdx } from './mdx'; 4 | import { HeadingProps } from './Heading'; 5 | 6 | export const Subheading: FunctionComponent = ({ 7 | children, 8 | disableAnchor, 9 | }) => { 10 | if (disableAnchor || typeof children !== 'string') { 11 | return

{children}

; 12 | } 13 | const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-'); 14 | return ( 15 | 16 | {children} 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /.storybook/blocks/Subtitle.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, FunctionComponent } from 'react'; 2 | import { Subtitle as PureSubtitle } from '@storybook/components'; 3 | import { DocsContext } from '@storybook/addon-docs/dist/esm/blocks/DocsContext'; 4 | import Text from '../../src/components/Text/Text'; 5 | 6 | interface SubtitleProps { 7 | children?: JSX.Element | string; 8 | } 9 | 10 | export const Subtitle: FunctionComponent = ({ children }) => { 11 | const context = useContext(DocsContext); 12 | const { parameters } = context; 13 | let text: JSX.Element | string = children; 14 | if (!text) { 15 | text = parameters?.componentSubtitle; 16 | } 17 | return text ? {text} : null; 18 | }; 19 | -------------------------------------------------------------------------------- /.storybook/blocks/Wrapper.tsx: -------------------------------------------------------------------------------- 1 | import React, { FunctionComponent } from 'react'; 2 | 3 | export const Wrapper: FunctionComponent = ({ children }) => ( 4 |
{children}
5 | ); 6 | -------------------------------------------------------------------------------- /.storybook/blocks/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | ColorPalette, 3 | ColorItem, 4 | IconGallery, 5 | IconItem, 6 | Typeset, 7 | } from '@storybook/components'; 8 | 9 | export * from './Anchor'; 10 | export * from './Description'; 11 | export * from '@storybook/addon-docs/dist/esm/blocks/DocsContext'; 12 | export * from './DocsPage'; 13 | export * from './DocsContainer'; 14 | export * from './DocsStory'; 15 | export * from './Heading'; 16 | export * from './Meta'; 17 | export * from './Preview'; 18 | export * from './Primary'; 19 | export * from './Props'; 20 | export * from './Source'; 21 | export * from './Stories'; 22 | export * from './Story'; 23 | export * from './Subheading'; 24 | export * from './Subtitle'; 25 | export * from './Title'; 26 | export * from './Wrapper'; 27 | export * from './types'; 28 | export * from './mdx'; 29 | -------------------------------------------------------------------------------- /.storybook/blocks/types.ts: -------------------------------------------------------------------------------- 1 | export const CURRENT_SELECTION = '.'; 2 | export const PRIMARY_STORY = '^'; 3 | 4 | export type Component = any; 5 | 6 | export interface StoryData { 7 | id?: string; 8 | kind?: string; 9 | name?: string; 10 | parameters?: any; 11 | } 12 | 13 | export type DocsStoryProps = StoryData & { 14 | expanded?: boolean; 15 | withToolbar?: boolean; 16 | }; 17 | -------------------------------------------------------------------------------- /.storybook/localAddon/preset.ts: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | managerEntries: [], 3 | }; 4 | -------------------------------------------------------------------------------- /.storybook/localAddon/register.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import addons, { types } from '@storybook/addons'; 3 | 4 | const ID = 'local-addon'; 5 | 6 | const LocalAddonPanel = () => <>Local addon; 7 | 8 | addons.register(ID, (api) => 9 | addons.add(ID, { 10 | title: ID, 11 | type: types.PANEL, 12 | match: () => true, 13 | render: ({ active, key }) => 14 | active ? : null, 15 | }) 16 | ); 17 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 7 | 13 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": [ 3 | ".git", 4 | "node_modules", 5 | "examples" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | module.exports = { 6 | process() { 7 | return 'module.exports = {};'; 8 | }, 9 | getCacheKey() { 10 | // The output is always the same. 11 | return 'cssTransform'; 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 7 | module.exports = { 8 | process(src, filename) { 9 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /config/jest/jsTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const { createTransformer } = require('babel-jest'); 4 | const packageJson = require('../../package.json'); 5 | 6 | // This is a custom Jest transformer that process *.js files 7 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 8 | module.exports = createTransformer(packageJson.babel); 9 | -------------------------------------------------------------------------------- /config/jest/setup.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | jest.unmock('promise'); 4 | jest.unmock('whatwg-fetch'); 5 | jest.unmock('object-assign'); 6 | 7 | global.__DEV__ = true; 8 | 9 | require('../polyfills'); 10 | 11 | const enzyme = jest.requireActual('enzyme'); 12 | const Adapter = jest.requireActual('enzyme-adapter-react-16'); 13 | 14 | enzyme.configure({ adapter: new Adapter() }); 15 | -------------------------------------------------------------------------------- /examples/create-react-app/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /examples/create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/create-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.scss: -------------------------------------------------------------------------------- 1 | .maincontent { 2 | min-height: 500px; 3 | padding: 20px 40px; 4 | } 5 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: http://bit.ly/CRA-PWA 11 | serviceWorker.unregister(); 12 | -------------------------------------------------------------------------------- /examples/html-handlebars/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "entry" 7 | } 8 | ] 9 | ] 10 | } -------------------------------------------------------------------------------- /examples/html-handlebars/README.md: -------------------------------------------------------------------------------- 1 | 2 | # `examples/html-handlebars` 3 | 4 | 5 | > How to integrate `@wfp/ui` and `@wfp/icons` into a project 6 | 7 | > using plain html 8 | 9 | 10 | 11 | ## Usage 12 | 13 | 14 | 15 | To run this example, open the `dist/index.html` file in a browser. The example uses the CDN for loading the css and logo files. 16 | 17 | 18 | 19 | ## Usinge Handlebars 20 | 21 | 22 | 23 | The template uses [handlebars](http://handlebarsjs.com) to generate the html files. The configuration can be found inside the webpack.config.js, which also includes a template for generating the related Java-Script bundle. 24 | 25 | Install handlebars and webpack dependencies 26 | 27 | npm install 28 | 29 | Generate new /dist folder 30 | 31 | npm start 32 | -------------------------------------------------------------------------------- /examples/html-handlebars/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boilerplate", 3 | "version": "1.0.0", 4 | "description": "In this sample we are going to setup a web project that can be easily managed by webpack.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack --mode development" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/cli": "^7.1.0", 13 | "@babel/core": "^7.1.0", 14 | "@babel/preset-env": "^7.1.0", 15 | "babel-loader": "^8.0.2", 16 | "handlebars-loader": "^1.7.0", 17 | "html-webpack-plugin": "^3.2.0", 18 | "webpack": "^4.19.1", 19 | "webpack-cli": "^3.3.0" 20 | }, 21 | "dependencies": { 22 | "@babel/polyfill": "^7.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/html-handlebars/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | 3 | module.exports = { 4 | context: __dirname, 5 | entry: [ 6 | '@babel/polyfill', 7 | '../../src/components/MainNavigation/main-navigation.js', 8 | ], 9 | output: { 10 | filename: 'bundle.js', 11 | }, 12 | plugins: [ 13 | new HtmlWebpackPlugin({ 14 | title: 'Custom template using Handlebars', 15 | template: 'redirect.hbs', 16 | }), 17 | ], 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.js$/, 22 | exclude: /node_modules/, 23 | loader: 'babel-loader', 24 | }, 25 | { 26 | test: /\.hbs$/, 27 | loader: 'handlebars-loader', 28 | }, 29 | ], 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WFP UI Kit 4 | 5 | 6 | 7 | Latest documentation of the UI-Kit 10 | 11 | 12 | -------------------------------------------------------------------------------- /packages/logos/azure-pipelines.yml: -------------------------------------------------------------------------------- 1 | # Node.js 2 | # Build a general Node.js project with npm. 3 | # Add steps that analyze code, save build artifacts, deploy, and more: 4 | # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript 5 | 6 | trigger: 7 | - master 8 | 9 | pool: 10 | vmImage: ubuntu-latest 11 | 12 | steps: 13 | - task: NodeTool@0 14 | inputs: 15 | versionSpec: '10.x' 16 | displayName: 'Install Node.js' 17 | 18 | - script: | 19 | npm install 20 | npm run build 21 | displayName: 'npm install and build' 22 | -------------------------------------------------------------------------------- /release.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | '@semantic-release/commit-analyzer', 4 | '@semantic-release/release-notes-generator', 5 | '@semantic-release/npm', 6 | '@semantic-release/changelog', 7 | '@semantic-release/git', 8 | [ 9 | 'semantic-release-ado', 10 | { 11 | varName: 'nextRelease', 12 | setOnlyOnRelease: false, 13 | }, 14 | ], 15 | /*[ 16 | '@semantic-release/exec', 17 | { 18 | prepareCmd: './my-build-script.sh ${nextRelease.version}', 19 | }, 20 | ],*/ 21 | ], 22 | 23 | release: { 24 | branches: ['master', 'next', 'feat/*', { name: 'alpha', prerelease: true }], 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /scripts/env.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const BABEL_ENV = process.env.BABEL_ENV; 4 | 5 | module.exports = () => ({ 6 | presets: [ 7 | [ 8 | '@babel/preset-env', 9 | { 10 | modules: BABEL_ENV === 'es' ? false : 'commonjs', 11 | targets: { 12 | browsers: ['last 1 versions', 'Firefox ESR'], 13 | }, 14 | }, 15 | ], 16 | ], 17 | }); 18 | -------------------------------------------------------------------------------- /scripts/exclude.txt: -------------------------------------------------------------------------------- 1 | documentation 2 | rtl-addon 3 | *-story.js 4 | *-test.js 5 | __tests__ 6 | .md -------------------------------------------------------------------------------- /src/__tests__/index-test.js: -------------------------------------------------------------------------------- 1 | import * as Carbon from '../index'; 2 | 3 | describe('Carbon Components React', () => { 4 | it('can be imported using the correct path', () => { 5 | expect(typeof Carbon).toBe('object'); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /src/assets/email/mail-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/email/mail-logo@2x.png -------------------------------------------------------------------------------- /src/assets/email/newsletter-external-email-legacy.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/email/newsletter-external-email-legacy.html -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-200.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-300.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-500.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-700.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-800.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-900.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.eot -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.ttf -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.woff -------------------------------------------------------------------------------- /src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/fonts/tajawal-v4-arabic/tajawal-v4-arabic-regular.woff2 -------------------------------------------------------------------------------- /src/assets/formatting/BannerNavigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/formatting/BannerNavigation.png -------------------------------------------------------------------------------- /src/assets/formatting/Blockquote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/formatting/Blockquote.png -------------------------------------------------------------------------------- /src/assets/formatting/Breadcrumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/formatting/Breadcrumb.png -------------------------------------------------------------------------------- /src/assets/formatting/Button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/formatting/Button.png -------------------------------------------------------------------------------- /src/assets/formatting/Check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/formatting/Check.png -------------------------------------------------------------------------------- /src/assets/formatting/Checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/formatting/Checkbox.png -------------------------------------------------------------------------------- /src/assets/illustrations/corn-bag-with-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/illustrations/corn-bag-with-background.png -------------------------------------------------------------------------------- /src/assets/internal/background-contrast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/background-contrast.png -------------------------------------------------------------------------------- /src/assets/internal/brand-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/brand-color.png -------------------------------------------------------------------------------- /src/assets/internal/colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/colors.png -------------------------------------------------------------------------------- /src/assets/internal/hero-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/hero-image.jpg -------------------------------------------------------------------------------- /src/assets/internal/mobile-android-general.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/mobile-android-general.png -------------------------------------------------------------------------------- /src/assets/internal/secondary-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/secondary-color.png -------------------------------------------------------------------------------- /src/assets/internal/wfp-favicon-png32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/wfp-favicon-png32.png -------------------------------------------------------------------------------- /src/assets/internal/wfp-favicon-png512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/wfp-favicon-png512.png -------------------------------------------------------------------------------- /src/assets/internal/wfp-favicon-preview-png32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/wfp-favicon-preview-png32.png -------------------------------------------------------------------------------- /src/assets/internal/wfp-favicon-preview-png512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/wfp-favicon-preview-png512.png -------------------------------------------------------------------------------- /src/assets/internal/yemen-hero-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/assets/internal/yemen-hero-min.jpg -------------------------------------------------------------------------------- /src/components/AnchorNavigation/README.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/components/AnchorNavigation/README.mdx -------------------------------------------------------------------------------- /src/components/AnchorNavigation/index.js: -------------------------------------------------------------------------------- 1 | export default from './AnchorNavigation'; 2 | -------------------------------------------------------------------------------- /src/components/AuthLayout/README.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wfp/designsystem/80463ed2523e8ecf5a69a7de062b12ddfa17ea21/src/components/AuthLayout/README.mdx -------------------------------------------------------------------------------- /src/components/AuthLayout/index.js: -------------------------------------------------------------------------------- 1 | export { AuthLayout, BackgroundContent } from './AuthLayout'; 2 | -------------------------------------------------------------------------------- /src/components/BannerNavigation/index.js: -------------------------------------------------------------------------------- 1 | export { BannerNavigation, BannerNavigationItem } from './BannerNavigation'; 2 | export { BannerNavigationWithContent } from './BannerNavigationWithContent'; 3 | -------------------------------------------------------------------------------- /src/components/BannerNavigation/kinds.js: -------------------------------------------------------------------------------- 1 | const iconNames = ['copy', 'trash', 'etc']; 2 | /* same variable name */ 3 | export default iconNames; 4 | -------------------------------------------------------------------------------- /src/components/Blockquote/Blockquote-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Blockquote from '../Button'; 3 | import { shallow } from 'enzyme'; 4 | 5 | describe('Blockquote', () => { 6 | describe('Renders common props as expected', () => { 7 | const wrapper = shallow( 8 |
Lorem Ipsum
9 | ); 10 | it('Renders children as expected', () => { 11 | expect(wrapper.props().children.length).toEqual(3); 12 | }); 13 | 14 | it('Should add extra classes via className', () => { 15 | expect(wrapper.hasClass('extra-class')).toBe(true); 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/Blockquote/Blockquote.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 4 |
5 |
-------------------------------------------------------------------------------- /src/components/Blockquote/index.js: -------------------------------------------------------------------------------- 1 | export default from './Blockquote'; 2 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/Breadcrumb.Skeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import settings from '../../globals/js/settings'; 3 | 4 | const { prefix } = settings; 5 | 6 | export default class BreadcrumbSkeleton extends React.Component { 7 | render() { 8 | const item = ( 9 |
10 | 11 |   12 | 13 |
14 | ); 15 | return ( 16 |
17 | {item} 18 | {item} 19 | {item} 20 |
21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | export * from './Breadcrumb.Skeleton'; 2 | export default from './Breadcrumb'; 3 | -------------------------------------------------------------------------------- /src/components/BreadcrumbHome/index.js: -------------------------------------------------------------------------------- 1 | export default from './BreadcrumbHome'; 2 | -------------------------------------------------------------------------------- /src/components/BreadcrumbItem/index.js: -------------------------------------------------------------------------------- 1 | export default from './BreadcrumbItem'; 2 | -------------------------------------------------------------------------------- /src/components/Button/Button.d.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export interface WFPButton { 4 | disabled: boolean; 5 | small: boolean; 6 | href: string | null; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Button/Button.twig: -------------------------------------------------------------------------------- 1 | {{ children }} -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | export * from './Button.Skeleton'; 2 | export default from './Button'; 3 | -------------------------------------------------------------------------------- /src/components/Card/README.mdx: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/Card/index.js: -------------------------------------------------------------------------------- 1 | export default from './Card'; 2 | -------------------------------------------------------------------------------- /src/components/Checkbox/Checkbox.Skeleton.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-associated-control */ 2 | /* eslint-disable jsx-a11y/label-has-for */ 3 | import React from 'react'; 4 | 5 | export default class CheckboxSkeleton extends React.Component { 6 | render() { 7 | const { id } = this.props; 8 | return ( 9 |
10 | {
12 | ); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Checkbox/Checkbox.hbs: -------------------------------------------------------------------------------- 1 |
2 | Checkbox heading 3 |
4 | 5 | 8 |
9 |
10 | 11 | 14 |
15 |
-------------------------------------------------------------------------------- /src/components/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | export default from './Checkbox'; 2 | -------------------------------------------------------------------------------- /src/components/CheckboxGroup/README.md: -------------------------------------------------------------------------------- 1 | ## Use with React Final Form (Redux form) 2 | 3 | Add `controlled={false}` to allow final-form to hand the state. 4 | 5 | ```js 6 | 10 | 19 | 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /src/components/CheckboxGroup/index.js: -------------------------------------------------------------------------------- 1 | export default from './InputGroup'; 2 | -------------------------------------------------------------------------------- /src/components/Col/index.js: -------------------------------------------------------------------------------- 1 | export default from './Col'; 2 | -------------------------------------------------------------------------------- /src/components/ContentSwitcher/ContentSwitcher.hbs: -------------------------------------------------------------------------------- 1 |
2 | First section 3 | Second section 4 | Third section 5 |
-------------------------------------------------------------------------------- /src/components/ContentSwitcher/index.js: -------------------------------------------------------------------------------- 1 | export default from './ContentSwitcher'; 2 | -------------------------------------------------------------------------------- /src/components/ContextMenu/README.mdx: -------------------------------------------------------------------------------- 1 | Use the context menu component when additional options are available to the user but there is a space constraint. 2 | 3 | ### Related 4 | 5 | [Tooltip](?path=/docs/components-tooltip--tooltip-regular) 6 | 7 | ### Reference 8 | 9 | [About context menus](https://medium.com/@hagan.rivers/context-menu-ux-design-75e3093eb127) 10 | 11 | [Carbon Design System Usage for Overflow menus](https://www.carbondesignsystem.com/components/overflow-menu/accessibility/) 12 | 13 | [Contextual Menus: Delivering Relevant Tools for Tasks by Nielsen Norman Group](https://www.nngroup.com/articles/contextual-menus/) 14 | -------------------------------------------------------------------------------- /src/components/ContextMenu/index.js: -------------------------------------------------------------------------------- 1 | export default from './ContextMenu'; 2 | export { ContextMenuGroup, ContextMenuItem } from './ContextMenu'; 3 | -------------------------------------------------------------------------------- /src/components/Credits/Credits-story.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import React from 'react'; 4 | import { storiesOf } from '@storybook/react'; 5 | import SingleComponent from '../../documentation/SingleComponent'; 6 | 7 | import Credits from '../Credits'; 8 | 9 | storiesOf('Components|Credits', module) 10 | .addDecorator((story) => {story()}) 11 | 12 | .add('Default (depreciated)', () => ( 13 | 14 | Default illustration 19 | 20 | )); 21 | -------------------------------------------------------------------------------- /src/components/Credits/Credits.hbs: -------------------------------------------------------------------------------- 1 |
2 |
© Rein Skullerud
3 | Default illustration 4 |
-------------------------------------------------------------------------------- /src/components/Credits/Credits.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Credits from '../Credits'; 4 | import markdown from './README.mdx'; 5 | 6 | export default { 7 | title: 'Components/UI Elements/Credits', 8 | component: Credits, 9 | parameters: { 10 | componentSubtitle: 'Component', 11 | status: 'released', 12 | mdx: markdown, 13 | }, 14 | /*argTypes: { 15 | children: { control: 'text' }, 16 | },*/ 17 | }; 18 | 19 | export const RegularCredits = (args) => ( 20 | 21 | Default illustration 25 | 26 | ); 27 | RegularCredits.args = { 28 | children: 'Credits', 29 | info: 'Photo: WFP/ Rein Skullerud', 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/Credits/README.mdx: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/Credits/_credits.scss: -------------------------------------------------------------------------------- 1 | //----------------------------- 2 | // Link 3 | //----------------------------- 4 | 5 | @import '../../globals/scss/colors'; 6 | @import '../../globals/scss/vars'; 7 | @import '../../globals/scss/layout'; 8 | @import '../../globals/scss/typography'; 9 | @import '../../globals/scss/helper-mixins'; 10 | @import '@carbon/import-once/scss/import-once'; 11 | @import '../../globals/scss/css--reset'; 12 | 13 | @include exports('credits') { 14 | .#{$prefix}--credits { 15 | @include reset; 16 | position: relative; 17 | > img { 18 | width: 100%; 19 | } 20 | } 21 | 22 | .#{$prefix}--credits__info { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | padding: rem(5px) rem(7px); 27 | color: $color__white; 28 | background: rgba(#000000, 0.5); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/Credits/index.js: -------------------------------------------------------------------------------- 1 | export default from './Credits'; 2 | -------------------------------------------------------------------------------- /src/components/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | export { SingleDatePickerInput } from './SingleDatePickerInput'; 2 | export { DateRangePickerInput } from './DateRangePickerInput'; 3 | -------------------------------------------------------------------------------- /src/components/Empty/index.js: -------------------------------------------------------------------------------- 1 | export default from './Empty'; 2 | -------------------------------------------------------------------------------- /src/components/FileUploader/FileUploader.Skeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SkeletonText from '../SkeletonText'; 3 | import ButtonSkeleton from '../Button/Button.Skeleton'; 4 | 5 | export default class FileUploaderSkeleton extends React.Component { 6 | render() { 7 | return ( 8 |
9 | 10 | 11 | 12 |
13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/FileUploader/README.md: -------------------------------------------------------------------------------- 1 | 2 | FileUploader 3 | 4 | ### Usage with react 5 | ```js 6 | import { FileUploader } from '@wfp/ui'; 7 | ``` -------------------------------------------------------------------------------- /src/components/FileUploader/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright IBM Corp. 2016, 2018 3 | * 4 | * This source code is licensed under the Apache-2.0 license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | export * from './FileUploader.Skeleton'; 9 | export * from './FileUploader'; 10 | export FileUploaderItem from './FileUploaderItem'; 11 | export FileUploaderDropContainer from './FileUploaderDropContainer'; 12 | //export * from './FileUploaderButton'; 13 | //export * from './Filename'; 14 | export default from './FileUploader'; 15 | -------------------------------------------------------------------------------- /src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | export default from './Footer'; 2 | -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | export default from './Form'; 2 | -------------------------------------------------------------------------------- /src/components/FormControls/index.js: -------------------------------------------------------------------------------- 1 | export default from './FormControls'; 2 | -------------------------------------------------------------------------------- /src/components/FormError/FormError-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FormError from '../FormError'; 3 | import { shallow } from 'enzyme'; 4 | 5 | describe('FormError', () => { 6 | describe('Renders as expected', () => { 7 | const errorMessage = shallow( 8 | 19 | ); 20 | it('should use the appropriate link class', () => { 21 | expect(errorMessage.hasClass('another-class')).toEqual(true); 22 | }); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/components/FormError/FormError.hbs: -------------------------------------------------------------------------------- 1 |
2 | Blockquote Icon
3 |

Something went terribly wrong

4 |
    5 |
    • 6 |
    • 7 |
8 |
9 |
-------------------------------------------------------------------------------- /src/components/FormError/_form-error.scss: -------------------------------------------------------------------------------- 1 | //----------------------------- 2 | // Link 3 | //----------------------------- 4 | 5 | @import '../../globals/scss/colors'; 6 | @import '../../globals/scss/vars'; 7 | @import '../../globals/scss/layout'; 8 | @import '../../globals/scss/typography'; 9 | @import '../../globals/scss/helper-mixins'; 10 | @import '@carbon/import-once/scss/import-once'; 11 | @import '../../globals/scss/css--reset'; 12 | 13 | @include exports('form-error') { 14 | .#{$prefix}--form-error__title { 15 | margin-bottom: $spacing-xs; 16 | } 17 | 18 | .#{$prefix}--form-error__list { 19 | list-style-type: disc; 20 | margin-left: 1.3rem; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/FormError/index.js: -------------------------------------------------------------------------------- 1 | export default from './FormError'; 2 | export { formErrorResponse } from './formErrorResponse'; 3 | export * from './formErrorValidation'; 4 | -------------------------------------------------------------------------------- /src/components/FormGroup/FormGroup-story.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import React from 'react'; 4 | import { storiesOf } from '@storybook/react'; 5 | import FormGroup from '../FormGroup'; 6 | import TextInput from '../TextInput'; 7 | 8 | const fieldsetCheckboxProps = { 9 | className: 'some-class', 10 | legendText: 'FormGroup heading', 11 | }; 12 | 13 | const TextInputProps = { 14 | className: 'some-class', 15 | id: 'test2', 16 | labelText: 'Text Input label', 17 | placeholder: 'Placeholder text', 18 | }; 19 | 20 | storiesOf('Components|FormGroup', module).add('Default', () => ( 21 | 22 | 23 | 24 | 25 | 26 | )); 27 | -------------------------------------------------------------------------------- /src/components/FormGroup/README.mdx: -------------------------------------------------------------------------------- 1 | . 2 | 3 | ### Usage with react 4 | 5 | ```js 6 | import { FormGroup } from '@wfp/ui'; 7 | ``` 8 | -------------------------------------------------------------------------------- /src/components/FormGroup/index.js: -------------------------------------------------------------------------------- 1 | export default from './FormGroup'; 2 | -------------------------------------------------------------------------------- /src/components/FormHint/FormHint-story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import { withKnobs, text } from '@storybook/addon-knobs'; 5 | import FormHint from './FormHint'; 6 | 7 | const props = () => ({ 8 | className: 'some-class', 9 | children: text('Label text (labelText)', 'Lorem Ipsum'), 10 | }); 11 | 12 | storiesOf('Components|FormHint', module) 13 | .addDecorator(withKnobs) 14 | .add('Default (experimental)', () => ( 15 | 18 | )); 19 | -------------------------------------------------------------------------------- /src/components/FormHint/FormHint-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FormHint from '../FormHint'; 3 | import { shallow, mount } from 'enzyme'; 4 | 5 | describe('FormHint', () => { 6 | describe('Renders as expected', () => { 7 | const wrapper = shallow(formhint); 8 | 9 | it('renders as the main wrapper', () => { 10 | expect(wrapper.exists('.wfp--form-hint')).toBe(true); 11 | }); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/components/FormHint/README.mdx: -------------------------------------------------------------------------------- 1 | ### Usage 2 | 3 | The `FormHint` component can provide additional information on how to use an input element. It is placed inside the `labelText`. 4 | Use the `helperText` prop instead if the information is very important for filling out the input. 5 | 6 | ### Related 7 | 8 | [Input](?path=/docs/components-input--input-regular) 9 | [FormLabel](?path=/docs/forms-formlabel--regular) 10 | 11 | ### Reference 12 | 13 | [Carbon Design System Usage for Buttons](https://next.carbondesignsystem.com/components/button) 14 | -------------------------------------------------------------------------------- /src/components/FormHint/_form-hint.scss: -------------------------------------------------------------------------------- 1 | @import '../../globals/scss/vars'; 2 | @import '../../globals/scss/colors'; 3 | @import '../../globals/scss/spacing'; 4 | @import '../../globals/scss/helper-mixins'; 5 | @import '@carbon/import-once/scss/import-once'; 6 | @import '../../globals/scss/css--reset'; 7 | @import '../Form/form'; 8 | 9 | @include exports('form-hint') { 10 | .#{$prefix}--form-hint { 11 | display: inline; 12 | vertical-align: middle; 13 | margin: 0 $spacing-2xs; 14 | user-select: none; 15 | svg { 16 | fill: var(--interactive-01); 17 | } 18 | &:hover { 19 | box-shadow: 0 1px 0 var(--interactive-01); 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/FormHint/index.js: -------------------------------------------------------------------------------- 1 | export default from './FormHint'; 2 | -------------------------------------------------------------------------------- /src/components/FormItem/FormItem-story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import FormItem from './FormItem'; 4 | import NumberInput from '../NumberInput'; 5 | 6 | storiesOf('Components|FormItem', module).add('Default', () => ( 7 | 8 | 9 | 10 | )); 11 | -------------------------------------------------------------------------------- /src/components/FormItem/FormItem-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import FormItem from '../FormItem'; 4 | 5 | describe('FormItem', () => { 6 | it('should render', () => { 7 | const wrapper = shallow(); 8 | expect(wrapper).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/FormItem/FormItem.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import classnames from 'classnames'; 4 | import settings from '../../globals/js/settings'; 5 | 6 | const { prefix } = settings; 7 | 8 | const FormItem = ({ className, children, invalid, ...other }) => { 9 | const classNames = classnames( 10 | `${prefix}--form-item`, 11 | { 12 | [`${prefix}--form-item--invalid`]: invalid, 13 | }, 14 | className 15 | ); 16 | 17 | return ( 18 |
19 | {children} 20 |
21 | ); 22 | }; 23 | 24 | FormItem.propTypes = { 25 | children: PropTypes.node, 26 | className: PropTypes.string, 27 | }; 28 | 29 | export default FormItem; 30 | -------------------------------------------------------------------------------- /src/components/FormItem/__snapshots__/FormItem-test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`FormItem should render 1`] = ` 4 |
7 | `; 8 | -------------------------------------------------------------------------------- /src/components/FormItem/index.js: -------------------------------------------------------------------------------- 1 | export default from './FormItem'; 2 | -------------------------------------------------------------------------------- /src/components/FormLabel/FormLabel-story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import FormLabel from './FormLabel'; 4 | 5 | const additionalProps = { 6 | className: 'some-class', 7 | }; 8 | 9 | storiesOf('Components|FormLabel', module).add('Default', () => ( 10 | Label 11 | )); 12 | -------------------------------------------------------------------------------- /src/components/FormLabel/FormLabel-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import FormLabel from '../FormLabel'; 4 | 5 | describe('FormLabel', () => { 6 | it('should render', () => { 7 | const wrapper = shallow(); 8 | expect(wrapper).toMatchSnapshot(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/FormLabel/FormLabel.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/FormLabel/FormLabel.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import markdown from './README.mdx'; 3 | import FormLabel from '.'; 4 | 5 | export default { 6 | title: 'Components/Forms/FormLabel', 7 | component: FormLabel, 8 | parameters: { 9 | componentSubtitle: 'Component', 10 | status: 'released', 11 | mdx: markdown, 12 | }, 13 | }; 14 | 15 | export const Regular = (args) => Label text; 16 | -------------------------------------------------------------------------------- /src/components/FormLabel/README.mdx: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/FormLabel/__snapshots__/FormLabel-test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`FormLabel should render 1`] = ` 4 |
}> 15 | The Main content 16 | 17 | )); 18 | -------------------------------------------------------------------------------- /src/components/FormWizard/FormWizard.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FormWizard from './FormWizard'; 3 | import markdown from './README.mdx'; 4 | 5 | export default { 6 | title: 'Components/Forms/FormWizard', 7 | component: FormWizard, 8 | markdown: 'hello', 9 | parameters: { 10 | componentSubtitle: 'Component', 11 | status: 'released', 12 | mdx: markdown, 13 | }, 14 | }; 15 | 16 | export const Default = (args) => ( 17 | The Sidebar content}> 18 | The Main content 19 | 20 | ); 21 | Default.args = { 22 | children: 'FormWizard', 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/FormWizard/README.mdx: -------------------------------------------------------------------------------- 1 | The **FormWizard** is a wrapper for creating Wizard forms. 2 | 3 | ### Usage with react 4 | 5 | ```js 6 | import { FormWizard } from '@wfp/ui'; 7 | ``` 8 | -------------------------------------------------------------------------------- /src/components/FormWizard/index.js: -------------------------------------------------------------------------------- 1 | export default from './FormWizard'; 2 | -------------------------------------------------------------------------------- /src/components/Grid/Grid.hbs: -------------------------------------------------------------------------------- 1 |
2 |
© Rein Skullerud
3 | Default illustration 4 |
-------------------------------------------------------------------------------- /src/components/Grid/README.mdx: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/Grid/index.js: -------------------------------------------------------------------------------- 1 | export default from './Grid'; 2 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.hbs: -------------------------------------------------------------------------------- 1 |
2 |
© Rein Skullerud
3 | Default illustration 4 |
-------------------------------------------------------------------------------- /src/components/Hero/Hero.twig: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |

{{ hero_title }}

7 |

{{ hero_subtitle }}

8 |
9 |
10 | { 5 | const props = { 6 | style, 7 | }; 8 | 9 | return
; 10 | }; 11 | 12 | IconSkeleton.propTypes = { 13 | /** 14 | * The CSS styles. 15 | */ 16 | style: PropTypes.object, 17 | }; 18 | 19 | export default IconSkeleton; 20 | -------------------------------------------------------------------------------- /src/components/Icon/Icon.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import markdown from './README.mdx'; 3 | import Icon from '.'; 4 | import { iconAdd } from '@wfp/icons'; 5 | 6 | export default { 7 | title: 'Components/UI Elements/Icon', 8 | component: Icon, 9 | parameters: { 10 | componentSubtitle: 'Component', 11 | status: 'released', 12 | mdx: markdown, 13 | }, 14 | }; 15 | 16 | export const Regular = (args) => ; 17 | 18 | Regular.args = { 19 | icon: iconAdd, 20 | }; 21 | 22 | const iconsourcecode = ` 23 | import { Icon } from "@wfp/ui"; 24 | import { iconAdd} from '@wfp/icons'; 25 | 26 | 27 | `; 28 | 29 | Regular.story = { 30 | parameters: { 31 | docs: { 32 | source: { 33 | code: iconsourcecode, 34 | }, 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | export * from './Icon'; 2 | export { default } from './Icon'; 3 | export * from './Icon.Skeleton'; 4 | -------------------------------------------------------------------------------- /src/components/InfoBar/InfoBar-story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import InfoBar from './InfoBar'; 5 | import Link from '../Link'; 6 | 7 | storiesOf('Components|InfoBar', module) 8 | .addDecorator((story) =>
{story()}
) 9 | .add('Default', () => ( 10 | 11 | InfoBar with content. Click here to do something. 12 | 13 | )); 14 | -------------------------------------------------------------------------------- /src/components/InfoBar/InfoBar-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import InfoBar from '../InfoBar'; 3 | import { shallow } from 'enzyme'; 4 | 5 | describe('InfoBar', () => { 6 | describe('renders as expected', () => { 7 | const wrapper = shallow(Info bar content ); 8 | 9 | it('renders children as exepected', () => { 10 | expect(wrapper.length).toBe(1); 11 | }); 12 | 13 | it('renders root classes as expected', () => { 14 | expect(wrapper.hasClass('wfp--info-bar')).toEqual(true); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/InfoBar/README.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; 2 | 3 | ### Usage 4 | 5 | `InfoBar` will contain the default links. 6 | 7 | Do not use it in other places. 8 | 9 | 18 | -------------------------------------------------------------------------------- /src/components/InfoBar/_info-bar.scss: -------------------------------------------------------------------------------- 1 | @import '../../globals/scss/vars'; 2 | @import '../../globals/scss/colors'; 3 | @import '../../globals/scss/typography'; 4 | @import '../../globals/scss/spacing'; 5 | @import '../../globals/scss/helper-mixins'; 6 | @import '@carbon/import-once/scss/import-once'; 7 | @import '../../globals/scss/css--reset'; 8 | @import '../Form/form'; 9 | 10 | @include exports('info-bar') { 11 | .#{$prefix}--info-bar { 12 | background: var(--support-03); 13 | @include reset; 14 | display: flex; 15 | padding: 0.5rem 0; 16 | line-height: 22px; 17 | .#{$prefix}--theme-dark & { 18 | color: var(--text-04); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/InfoBar/index.js: -------------------------------------------------------------------------------- 1 | export default from './InfoBar'; 2 | -------------------------------------------------------------------------------- /src/components/InlineLoading/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright IBM Corp. 2016, 2018 3 | // 4 | // This source code is licensed under the Apache-2.0 license found in the 5 | // LICENSE file in the root directory of this source tree. 6 | // 7 | 8 | @keyframes stroke { 9 | 100% { 10 | stroke-dashoffset: 0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/InlineLoading/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright IBM Corp. 2016, 2018 3 | * 4 | * This source code is licensed under the Apache-2.0 license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | export default from './InlineLoading'; 9 | -------------------------------------------------------------------------------- /src/components/InlineLoading/inline-loading.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright IBM Corp. 2016, 2018 3 | * 4 | * This source code is licensed under the Apache-2.0 license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | const { prefix } = require('../../globals/js/settings'); 9 | const { componentsX } = require('../../globals/js/feature-flags'); 10 | 11 | module.exports = { 12 | context: { 13 | prefix, 14 | componentsX, 15 | }, 16 | variants: [ 17 | { 18 | name: 'default', 19 | label: 'Inline Loading', 20 | context: { 21 | showToggleButton: true, 22 | }, 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /src/components/Input/index.js: -------------------------------------------------------------------------------- 1 | export default from './Input'; 2 | -------------------------------------------------------------------------------- /src/components/InputGroup/index.js: -------------------------------------------------------------------------------- 1 | export default from './InputGroup'; 2 | -------------------------------------------------------------------------------- /src/components/Item/index.js: -------------------------------------------------------------------------------- 1 | export default from './Item'; 2 | -------------------------------------------------------------------------------- /src/components/Link/Link.hbs: -------------------------------------------------------------------------------- 1 | Link -------------------------------------------------------------------------------- /src/components/Link/index.js: -------------------------------------------------------------------------------- 1 | export default from './Link'; 2 | -------------------------------------------------------------------------------- /src/components/List/List.hbs: -------------------------------------------------------------------------------- 1 |
    2 |
  • 3 | First item 4 |
    • 5 |
  • 6 | Second item 7 |
    • 8 |
  • 9 | Third item 10 |
    • 11 |
-------------------------------------------------------------------------------- /src/components/List/index.js: -------------------------------------------------------------------------------- 1 | export { List } from './List'; 2 | export { ListItem } from './ListItem'; 3 | -------------------------------------------------------------------------------- /src/components/Loading/Loading-story.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright IBM Corp. 2016, 2018 3 | * 4 | * This source code is licensed under the Apache-2.0 license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from 'react'; 9 | import { storiesOf } from '@storybook/react'; 10 | 11 | import { withKnobs, boolean } from '@storybook/addon-knobs'; 12 | import Loading from '../Loading'; 13 | 14 | const props = () => ({ 15 | active: boolean('Active (active)', true), 16 | withOverlay: boolean('With overlay (withOverlay)', false), 17 | small: boolean('Small (small)', false), 18 | }); 19 | 20 | storiesOf('Components|Loading', module) 21 | .addDecorator(withKnobs) 22 | .add('Default (experimental)', () => { 23 | return ; 24 | }); 25 | -------------------------------------------------------------------------------- /src/components/Loading/_vars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright IBM Corp. 2016, 2018 3 | // 4 | // This source code is licensed under the Apache-2.0 license found in the 5 | // LICENSE file in the root directory of this source tree. 6 | // 7 | 8 | $loading__gap: 40; 9 | $loading__size: 10.5rem; 10 | -------------------------------------------------------------------------------- /src/components/Loading/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright IBM Corp. 2016, 2018 3 | * 4 | * This source code is licensed under the Apache-2.0 license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | export default from './Loading'; 9 | -------------------------------------------------------------------------------- /src/components/Loading/loading.hbs: -------------------------------------------------------------------------------- 1 | 7 | 8 | {{#if overlay}}
{{/if}} 9 |
10 | 11 | Loading 12 | {{#if componentsX}} 13 | {{#if small}}{{/if}} 14 | {{/if}} 15 | 16 | 17 |
18 | {{#if overlay}}
{{/if}} -------------------------------------------------------------------------------- /src/components/MainNavigation/index.js: -------------------------------------------------------------------------------- 1 | export default from './MainNavigation'; 2 | -------------------------------------------------------------------------------- /src/components/MainNavigationItem/index.js: -------------------------------------------------------------------------------- 1 | export default from './MainNavigationItem'; 2 | -------------------------------------------------------------------------------- /src/components/MdxComponents/README.mdx: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | Markdown is an easy-to-read and easy-to-write syntax for _writing_ for the web. With [MDX](https://mdxjs.com/) you can import components, such as interactive charts or alerts, and embed them within your content. 4 | This makes writing long-form content easy and standardized. 5 | 6 | The `MdxComponents` provide additional components using the UI-Kits default formatting. 7 | 8 | #### When to use 9 | 10 | Display modern content 11 | 12 | #### When not to use 13 | 14 | Do not nest multiple Inputs. Each input should only have one label text. 15 | 16 | ## Related 17 | 18 | [Story](?path=/docs/components-story--regular) 19 | 20 | [Text](?path=/docs/components-text--regular) 21 | -------------------------------------------------------------------------------- /src/components/MdxComponents/index.js: -------------------------------------------------------------------------------- 1 | export default from './MdxComponents'; 2 | -------------------------------------------------------------------------------- /src/components/MdxComponents/markdown.mdx: -------------------------------------------------------------------------------- 1 | # H1 2 | 3 | ## H2 4 | 5 | ### H3 6 | 7 | **bold text** 8 | _italicized text_ 9 | 10 | > blockquote 11 | 12 | > Blockquote with title 13 | > 14 | > Content of Blockquote 15 | 16 | Ordered List 17 | 18 | 1. First item 19 | 2. Second item 20 | 3. Third item 21 | Unordered List 22 | 23 | - First item 24 | - Second item 25 | - Third item 26 | Code 27 | `code` 28 | Horizontal Rule 29 | 30 | * ✓ Checkmark list item 31 | 32 | - ✗ Cross list item 33 | 34 | --- 35 | 36 | Link 37 | [title](https://www.example.com) 38 | Image 39 | ![alt text](https://www.wfp.org/sites/default/files/images/1%2A0SvxFtof7R7NRUbDl7iZsA_0_0.png) 40 | -------------------------------------------------------------------------------- /src/components/Modal/_mixins.scss: -------------------------------------------------------------------------------- 1 | //---------------------------------------------- 2 | // Modal 3 | // --------------------------------------------- 4 | 5 | @mixin modal--color($color) { 6 | .#{$prefix}--modal-container { 7 | border-top-color: $color; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Modal/index.js: -------------------------------------------------------------------------------- 1 | export default from './Modal'; 2 | -------------------------------------------------------------------------------- /src/components/ModalWrapper/README.mdx: -------------------------------------------------------------------------------- 1 | ModalWrapper combines a `Button` with a `Modal`. See `Modal` component for all `props`. 2 | 3 | ```js 4 | import { ModalWrapper } from '@wfp/ui'; 5 | ``` 6 | 7 | ```html 8 | { 11 | return true; 12 | }} 13 | > 14 | Modal Content 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /src/components/ModalWrapper/index.js: -------------------------------------------------------------------------------- 1 | export default from './ModalWrapper'; 2 | -------------------------------------------------------------------------------- /src/components/Module/ModuleFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import PropTypes from 'prop-types'; 4 | 5 | const ModuleFooter = ({ centered, children, className, ...other }) => { 6 | const wrapperClasses = classNames('wfp--module__footer', className); 7 | 8 | return ( 9 |
10 | {children} 11 |
12 | ); 13 | }; 14 | 15 | ModuleFooter.propTypes = { 16 | /** 17 | * Specify the content of the `ModuleFooter` 18 | */ 19 | children: PropTypes.node, 20 | /** 21 | * The CSS class name for the `ModuleFooter`. 22 | */ 23 | className: PropTypes.string, 24 | }; 25 | 26 | export default ModuleFooter; 27 | -------------------------------------------------------------------------------- /src/components/Module/ModuleHeader.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | 5 | const ModuleHeader = ({ filter, children, className, ...other }) => { 6 | const wrapperClasses = classNames('wfp--module__header', className); 7 | 8 | return ( 9 |
10 |

{children}

11 | {filter &&
{filter}
} 12 |
13 | ); 14 | }; 15 | 16 | ModuleHeader.propTypes = { 17 | /** 18 | * Specify the content of the `ModuleHeaders` 19 | */ 20 | children: PropTypes.node, 21 | /** 22 | * The CSS class name for the `ModuleHeaders`. 23 | */ 24 | className: PropTypes.string, 25 | }; 26 | 27 | export default ModuleHeader; 28 | -------------------------------------------------------------------------------- /src/components/Module/index.js: -------------------------------------------------------------------------------- 1 | const { default: ModuleHeader } = require('./ModuleHeader'); 2 | 3 | export Module from './Module'; 4 | export ModuleBody from './ModuleBody'; 5 | export ModuleHeader from './ModuleHeader'; 6 | export ModuleFooter from './ModuleFooter'; 7 | -------------------------------------------------------------------------------- /src/components/Notification.legacy/Notification.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** dkjnslknkjfndn */ 4 | const CloseButton = ({ YouCanPassAnyProps, closeToast }) => ( 5 | 12 | ); 13 | 14 | /** huyhuyghu */ 15 | const notificationStyle = { 16 | position: 'bottom-right', 17 | closeButton: , 18 | }; 19 | 20 | export default notificationStyle; 21 | -------------------------------------------------------------------------------- /src/components/Notification.legacy/animations/_zoom.scss: -------------------------------------------------------------------------------- 1 | @keyframes #{$rt-namespace}__zoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(0.3, 0.3, 0.3); 5 | } 6 | 50% { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @keyframes #{$rt-namespace}__zoomOut { 12 | from { 13 | opacity: 1; 14 | } 15 | 50% { 16 | opacity: 0; 17 | transform: scale3d(0.3, 0.3, 0.3); 18 | } 19 | to { 20 | opacity: 0; 21 | } 22 | } 23 | 24 | .#{$rt-namespace}__zoom-enter { 25 | animation-name: #{$rt-namespace}__zoomIn; 26 | } 27 | 28 | .#{$rt-namespace}__zoom-exit { 29 | animation-name: #{$rt-namespace}__zoomOut; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/Notification.legacy/index.js: -------------------------------------------------------------------------------- 1 | export default from './Notification'; 2 | -------------------------------------------------------------------------------- /src/components/Notification/Notification.legacy.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** dkjnslknkjfndn */ 4 | const CloseButton = ({ YouCanPassAnyProps, closeToast }) => ( 5 | 12 | ); 13 | 14 | /** huyhuyghu */ 15 | const notificationStyle = { 16 | position: 'bottom-right', 17 | closeButton: , 18 | }; 19 | 20 | export default notificationStyle; 21 | -------------------------------------------------------------------------------- /src/components/Notification/index.js: -------------------------------------------------------------------------------- 1 | export * from './Notification'; 2 | -------------------------------------------------------------------------------- /src/components/NumberInput/index.js: -------------------------------------------------------------------------------- 1 | export * from './NumberInput.Skeleton'; 2 | export default from './NumberInput'; 3 | -------------------------------------------------------------------------------- /src/components/Pagination/Pagination.Skeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SkeletonText from '../SkeletonText'; 3 | 4 | export default class PaginationSkeleton extends React.Component { 5 | render() { 6 | return ( 7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/Pagination/Pagination.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import markdown from './README.mdx'; 3 | import Pagination from '.'; 4 | 5 | export default { 6 | title: 'Components/UI Elements/Pagination', 7 | component: Pagination, 8 | parameters: { 9 | componentSubtitle: 'Component', 10 | status: 'released', 11 | mdx: markdown, 12 | }, 13 | }; 14 | 15 | export const Regular = (args) => ; 16 | 17 | const description = ` 18 | You can customize the content by using \`BannerNavigation\`. 19 | `; 20 | 21 | Regular.args = { 22 | pageSizes: [5, 20], 23 | totalItems: 30, 24 | onChange: () => {}, 25 | }; 26 | 27 | Regular.story = { 28 | parameters: { 29 | docs: { 30 | storyDescription: description, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/Pagination/index.js: -------------------------------------------------------------------------------- 1 | export default from './Pagination'; 2 | export * from './Pagination.Skeleton'; 3 | -------------------------------------------------------------------------------- /src/components/RadioButton/RadioButton.Skeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import settings from '../../globals/js/settings'; 3 | 4 | const { prefix } = settings; 5 | 6 | export default class RadioButtonSkeleton extends React.Component { 7 | render() { 8 | const { id } = this.props; 9 | return ( 10 |
11 |
12 | { 13 | /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */ 14 |
20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/RadioButton/RadioButton.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | 7 |
-------------------------------------------------------------------------------- /src/components/RadioButton/index.js: -------------------------------------------------------------------------------- 1 | export * from './RadioButton.Skeleton'; 2 | export * from './RadioButton'; 3 | export default from './RadioButton'; 4 | -------------------------------------------------------------------------------- /src/components/RadioButtonGroup/index.js: -------------------------------------------------------------------------------- 1 | export default from './RadioButtonGroup'; 2 | -------------------------------------------------------------------------------- /src/components/ReactDropzone/index.js: -------------------------------------------------------------------------------- 1 | // export { tooltipStyle, tooltipStyleDark } from './Tooltip'; 2 | -------------------------------------------------------------------------------- /src/components/ReadMore/ReadMore-test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReadMore from '../ReadMore'; 3 | import { shallow } from 'enzyme'; 4 | 5 | describe('ReadMore', () => { 6 | describe('Renders as expected', () => { 7 | const readMore = shallow( 8 | Content 9 | ); 10 | it('should use the appropriate link class', () => { 11 | expect(readMore.hasClass('wfp--read-more')).toEqual(true); 12 | }); 13 | it('should all for custom classes to be applied', () => { 14 | expect(readMore.hasClass('some-class')).toEqual(true); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/ReadMore/index.js: -------------------------------------------------------------------------------- 1 | export default from './ReadMore'; 2 | -------------------------------------------------------------------------------- /src/components/ReduxFormWrapper/index.js: -------------------------------------------------------------------------------- 1 | export default from './ReduxFormWrapper'; 2 | -------------------------------------------------------------------------------- /src/components/Search/README.mdx: -------------------------------------------------------------------------------- 1 | **Search** enables users to specify a word or a phrase to find particular relevant pieces of content without the use of navigation. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content. 2 | 3 | ### Usage with react 4 | 5 | ```js 6 | import { Search } from '@wfp/ui'; 7 | 8 | const handleOnChange = (searchValue, evt)=>{ 9 | console.log("searchValue", searchValue); // a string 10 | console.log("evt", evt); // the whole event object 11 | } 12 | 13 | ; 22 | ``` 23 | -------------------------------------------------------------------------------- /src/components/Search/index.js: -------------------------------------------------------------------------------- 1 | export * from './Search.Skeleton'; 2 | export default from './Search'; 3 | -------------------------------------------------------------------------------- /src/components/SecondaryNavigation/index.js: -------------------------------------------------------------------------------- 1 | export { 2 | SecondaryNavigation, 3 | SecondaryNavigationTitle, 4 | } from './SecondaryNavigation'; 5 | -------------------------------------------------------------------------------- /src/components/Select/Select.Skeleton.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/label-has-for */ 2 | /* eslint-disable jsx-a11y/label-has-associated-control */ 3 | import PropTypes from 'prop-types'; 4 | import React from 'react'; 5 | 6 | const SelectSkeleton = ({ hideLabel, id }) => { 7 | const label = hideLabel ? null : ( 8 |