├── .depcheckrc.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── .travis.yml ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── jest.config.js ├── package.json ├── public ├── images │ ├── background.png │ ├── illustration.png │ ├── illustration2.png │ ├── loader.svg │ ├── loading-gray.svg │ ├── logo.png │ ├── reply-cross-sell-01.png │ ├── reply-cross-sell-02.png │ └── reply-cross-sell-03.png └── index.html ├── scripts ├── build.js ├── config │ ├── cachedIconData.json │ ├── env.js │ ├── paths.js │ ├── webpack.config.dev.js │ ├── webpack.config.prod.js │ └── webpackDevServer.config.js ├── copyBuildFiles.js ├── generateComponentData.js ├── generateIconComponents.js ├── new-component-template │ ├── README.md │ └── src │ │ ├── components │ │ ├── ComponentNamePlaceholder │ │ │ ├── ComponentNamePlaceholder.jsx │ │ │ ├── ComponentNamePlaceholder.spec.js │ │ │ ├── index.js │ │ │ └── style.js │ │ └── index.js │ │ └── documentation │ │ └── examples │ │ └── ComponentNamePlaceholder │ │ └── ComponentNamePlaceholder.jsx ├── newComponent.js ├── publish.sh ├── publishBeta.sh ├── start.js └── sync.sh ├── src ├── components │ ├── AnimationWrapper │ │ ├── AnimationWrapper.spec.ts │ │ ├── AnimationWrapper.tsx │ │ ├── __snapshots__ │ │ │ └── AnimationWrapper.spec.ts.snap │ │ ├── hook.ts │ │ └── index.ts │ ├── Avatar │ │ ├── Avatar.spec.ts │ │ ├── Avatar.tsx │ │ ├── __snapshots__ │ │ │ └── Avatar.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Banner │ │ ├── Banner.spec.ts │ │ ├── Banner.tsx │ │ ├── __snapshots__ │ │ │ └── Banner.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Button │ │ ├── Button.spec.tsx │ │ ├── Button.tsx │ │ ├── __snapshots__ │ │ │ └── Button.spec.tsx.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Carousel │ │ ├── Carousel.spec.ts │ │ ├── Carousel.tsx │ │ ├── CarouselItems.tsx │ │ ├── __snapshots__ │ │ │ └── Carousel.spec.ts.snap │ │ └── index.ts │ ├── CrossSell │ │ ├── CrossSell.spec.ts │ │ ├── CrossSell.tsx │ │ ├── __snapshots__ │ │ │ └── CrossSell.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── DropdownMenu │ │ ├── ButtonItem │ │ │ └── ButtonItem.tsx │ │ ├── DropdownMenu.spec.ts │ │ ├── DropdownMenu.test.tsx │ │ ├── DropdownMenu.tsx │ │ ├── PopupMenu │ │ │ ├── PopupMenu.tsx │ │ │ └── style.ts │ │ ├── TooltipLabel │ │ │ └── TooltipLabel.tsx │ │ ├── __snapshots__ │ │ │ └── DropdownMenu.spec.ts.snap │ │ ├── index.ts │ │ ├── keyCode.ts │ │ └── style.ts │ ├── GlobalStyles.ts │ ├── Icon │ │ ├── Icon.tsx │ │ ├── Icons │ │ │ ├── Add.tsx │ │ │ ├── AddMedia.tsx │ │ │ ├── AltTag.tsx │ │ │ ├── Analyze.tsx │ │ │ ├── Appearance.tsx │ │ │ ├── AppleMusic.tsx │ │ │ ├── ArrowDown.tsx │ │ │ ├── ArrowLeft.tsx │ │ │ ├── ArrowRight.tsx │ │ │ ├── ArrowUp.tsx │ │ │ ├── Attach.tsx │ │ │ ├── Audience.tsx │ │ │ ├── Bandcamp.tsx │ │ │ ├── Behance.tsx │ │ │ ├── Bell.tsx │ │ │ ├── BookmarkFilled.tsx │ │ │ ├── BookmarkOutline.tsx │ │ │ ├── Buffer.tsx │ │ │ ├── Building.tsx │ │ │ ├── ButtonLink.tsx │ │ │ ├── Calendar.tsx │ │ │ ├── CalendarAdd.tsx │ │ │ ├── Camera.tsx │ │ │ ├── Canva.tsx │ │ │ ├── Caption.tsx │ │ │ ├── Card.tsx │ │ │ ├── CaretDown.tsx │ │ │ ├── CaretLeft.tsx │ │ │ ├── CaretRight.tsx │ │ │ ├── CaretUp.tsx │ │ │ ├── Carousel.tsx │ │ │ ├── Channels.tsx │ │ │ ├── ChartLine.tsx │ │ │ ├── Checkmark.tsx │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronUp.tsx │ │ │ ├── Clock.tsx │ │ │ ├── Clubhouse.tsx │ │ │ ├── CommentRoundFilled.tsx │ │ │ ├── CommentRoundOutline.tsx │ │ │ ├── CommentSquareOutline.tsx │ │ │ ├── Compare.tsx │ │ │ ├── Copy.tsx │ │ │ ├── Coupon.tsx │ │ │ ├── Cross.tsx │ │ │ ├── Day.tsx │ │ │ ├── Direct.tsx │ │ │ ├── Discord.tsx │ │ │ ├── Dollar.tsx │ │ │ ├── Drafts.tsx │ │ │ ├── DragIndicator.tsx │ │ │ ├── Dribbble.tsx │ │ │ ├── Dropbox.tsx │ │ │ ├── Email.tsx │ │ │ ├── Emoji.tsx │ │ │ ├── Facebook.tsx │ │ │ ├── Feed.tsx │ │ │ ├── Flag.tsx │ │ │ ├── Flash.tsx │ │ │ ├── Folder.tsx │ │ │ ├── Folders.tsx │ │ │ ├── Frequency.tsx │ │ │ ├── Gbp.tsx │ │ │ ├── Gear.tsx │ │ │ ├── Giphy.tsx │ │ │ ├── Github.tsx │ │ │ ├── Giveaway.tsx │ │ │ ├── Gmb.tsx │ │ │ ├── Google.tsx │ │ │ ├── GoogleDrive.tsx │ │ │ ├── GooglePhotos.tsx │ │ │ ├── GooglePlus.tsx │ │ │ ├── Hamburger.tsx │ │ │ ├── Hashtag.tsx │ │ │ ├── Heading.tsx │ │ │ ├── HeartFilled.tsx │ │ │ ├── HeartOutline.tsx │ │ │ ├── Help.tsx │ │ │ ├── Hide.tsx │ │ │ ├── Home.tsx │ │ │ ├── Hotkeys.tsx │ │ │ ├── Image.tsx │ │ │ ├── Import.tsx │ │ │ ├── Inbox.tsx │ │ │ ├── Info.tsx │ │ │ ├── Instagram.tsx │ │ │ ├── InstagramComment.tsx │ │ │ ├── InstagramDm.tsx │ │ │ ├── InstagramGrid.tsx │ │ │ ├── InstagramLike.tsx │ │ │ ├── Layout.tsx │ │ │ ├── Link.tsx │ │ │ ├── LinkedIn.tsx │ │ │ ├── List.tsx │ │ │ ├── Load.tsx │ │ │ ├── Location.tsx │ │ │ ├── LocationPin.tsx │ │ │ ├── Locked.tsx │ │ │ ├── MagicWand.tsx │ │ │ ├── Mail.tsx │ │ │ ├── Mastodon.tsx │ │ │ ├── Medium.tsx │ │ │ ├── Message.tsx │ │ │ ├── MessageFilled.tsx │ │ │ ├── MessageOutline.tsx │ │ │ ├── MessageRoundFilled.tsx │ │ │ ├── MessageRoundOutline.tsx │ │ │ ├── MessageSquareFilled.tsx │ │ │ ├── MessageSquareOutline.tsx │ │ │ ├── Messenger.tsx │ │ │ ├── More.tsx │ │ │ ├── Movie.tsx │ │ │ ├── Music.tsx │ │ │ ├── Negative.tsx │ │ │ ├── Onedrive.tsx │ │ │ ├── OpenNew.tsx │ │ │ ├── Order.tsx │ │ │ ├── Organic.tsx │ │ │ ├── Patreon.tsx │ │ │ ├── Pause.tsx │ │ │ ├── Paypal.tsx │ │ │ ├── Pencil.tsx │ │ │ ├── People.tsx │ │ │ ├── PercentageDown.tsx │ │ │ ├── PercentageUp.tsx │ │ │ ├── Person.tsx │ │ │ ├── Phone.tsx │ │ │ ├── Pin.tsx │ │ │ ├── Pinned.tsx │ │ │ ├── Pinterest.tsx │ │ │ ├── Placeholder.tsx │ │ │ ├── Play.tsx │ │ │ ├── PlayRound.tsx │ │ │ ├── Plus.tsx │ │ │ ├── Post.tsx │ │ │ ├── Promoted.tsx │ │ │ ├── Publish.tsx │ │ │ ├── QrCode.tsx │ │ │ ├── Question.tsx │ │ │ ├── Reel.tsx │ │ │ ├── Refresh.tsx │ │ │ ├── Reply.tsx │ │ │ ├── Return.tsx │ │ │ ├── Retweet.tsx │ │ │ ├── Save.tsx │ │ │ ├── Search.tsx │ │ │ ├── Share.tsx │ │ │ ├── ShareArrow.tsx │ │ │ ├── ShareArrowFilled.tsx │ │ │ ├── ShareArrowOutline.tsx │ │ │ ├── Shopify.tsx │ │ │ ├── Short.tsx │ │ │ ├── Sidebar.tsx │ │ │ ├── Sms.tsx │ │ │ ├── Snapchat.tsx │ │ │ ├── SocialIcons.tsx │ │ │ ├── Soundcloud.tsx │ │ │ ├── Spam.tsx │ │ │ ├── Sparkles.tsx │ │ │ ├── Spotify.tsx │ │ │ ├── Star.tsx │ │ │ ├── StarOutline.tsx │ │ │ ├── StartPage.tsx │ │ │ ├── Stats.tsx │ │ │ ├── Story.tsx │ │ │ ├── Subheading.tsx │ │ │ ├── Substack.tsx │ │ │ ├── Subtract.tsx │ │ │ ├── Swap.tsx │ │ │ ├── Tag.tsx │ │ │ ├── Telegram.tsx │ │ │ ├── TextAlignCenter.tsx │ │ │ ├── TextAlignLeft.tsx │ │ │ ├── TextAlignRight.tsx │ │ │ ├── TextBold.tsx │ │ │ ├── TextExpand.tsx │ │ │ ├── TextItalic.tsx │ │ │ ├── TextRephrase.tsx │ │ │ ├── TextSummarize.tsx │ │ │ ├── TextUnderline.tsx │ │ │ ├── Thread.tsx │ │ │ ├── Thumbsup.tsx │ │ │ ├── ThumbsupFilled.tsx │ │ │ ├── ThumbsupOutline.tsx │ │ │ ├── Tiktok.tsx │ │ │ ├── Title.tsx │ │ │ ├── Trash.tsx │ │ │ ├── Twitch.tsx │ │ │ ├── Twitter.tsx │ │ │ ├── Unknown.tsx │ │ │ ├── Unlocked.tsx │ │ │ ├── Unsplash.tsx │ │ │ ├── Video.tsx │ │ │ ├── View.tsx │ │ │ ├── VolumeOff.tsx │ │ │ ├── VolumeOn.tsx │ │ │ ├── Warning.tsx │ │ │ ├── Website.tsx │ │ │ ├── Whatsapp.tsx │ │ │ ├── World.tsx │ │ │ └── Youtube.tsx │ │ ├── index.ts │ │ ├── style.ts │ │ └── utils │ │ │ └── createIconComponent.ts │ ├── Input │ │ ├── Input.spec.ts │ │ ├── Input.tsx │ │ ├── InputWithRef.tsx │ │ ├── __snapshots__ │ │ │ └── Input.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Link │ │ ├── Link.spec.ts │ │ ├── Link.tsx │ │ ├── __snapshots__ │ │ │ └── Link.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Loader │ │ ├── Loader.spec.ts │ │ ├── Loader.tsx │ │ ├── __snapshots__ │ │ │ └── Loader.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Modal │ │ ├── Modal.spec.tsx │ │ ├── Modal.test.ts │ │ ├── Modal.tsx │ │ ├── __snapshots__ │ │ │ └── Modal.spec.tsx.snap │ │ ├── index.ts │ │ └── style.ts │ ├── NavBar │ │ ├── BufferLogo.tsx │ │ ├── NavBar.spec.ts │ │ ├── NavBar.tsx │ │ ├── NavBarMenu │ │ │ ├── NavBarMenu.spec.ts │ │ │ ├── NavBarMenu.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── NavBarMenu.spec.ts.snap │ │ │ └── style.ts │ │ ├── NavBarProducts │ │ │ └── NavBarProducts.tsx │ │ ├── __snapshots__ │ │ │ └── NavBar.spec.ts.snap │ │ └── index.ts │ ├── NonDismissibleModal │ │ ├── NonDismissibleModal.spec.tsx │ │ ├── NonDismissibleModal.tsx │ │ ├── __snapshots__ │ │ │ └── NonDismissibleModal.spec.tsx.snap │ │ └── index.ts │ ├── Notice │ │ ├── Notice.spec.ts │ │ ├── Notice.tsx │ │ ├── __snapshots__ │ │ │ └── Notice.spec.ts.snap │ │ └── index.ts │ ├── Notification │ │ ├── Notification.spec.ts │ │ ├── Notification.tsx │ │ ├── __snapshots__ │ │ │ └── Notification.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── ProgressBar │ │ ├── ProgressBar.spec.ts │ │ ├── ProgressBar.tsx │ │ ├── __snapshots__ │ │ │ └── ProgressBar.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Search │ │ ├── Search.spec.ts │ │ ├── Search.test.tsx │ │ ├── Search.tsx │ │ ├── __snapshots__ │ │ │ └── Search.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── SegmentedControl │ │ ├── Option │ │ │ ├── Option.spec.ts │ │ │ ├── Option.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── Option.spec.ts.snap │ │ │ ├── index.ts │ │ │ └── style.ts │ │ ├── SegmentedControl.spec.ts │ │ ├── SegmentedControl.tsx │ │ ├── __snapshots__ │ │ │ └── SegmentedControl.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Select │ │ ├── Select.spec.ts │ │ ├── Select.test.tsx │ │ ├── Select.tsx │ │ ├── SelectItem │ │ │ ├── SelectItem.tsx │ │ │ └── style.ts │ │ ├── __snapshots__ │ │ │ └── Select.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── SidebarHeader │ │ ├── SidebarHeader.spec.ts │ │ ├── SidebarHeader.tsx │ │ ├── __snapshots__ │ │ │ └── SidebarHeader.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── SidebarListItem │ │ ├── SidebarListItem.spec.ts │ │ ├── SidebarListItem.tsx │ │ ├── __snapshots__ │ │ │ └── SidebarListItem.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── SimpleModal │ │ ├── SimpleModal.spec.ts │ │ ├── SimpleModal.tsx │ │ ├── __snapshots__ │ │ │ └── SimpleModal.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── SocialButton │ │ ├── SocialButton.spec.tsx │ │ ├── SocialButton.tsx │ │ ├── __snapshots__ │ │ │ └── SocialButton.spec.tsx.snap │ │ ├── index.ts │ │ └── style.ts │ ├── States │ │ ├── States.spec.ts │ │ ├── States.tsx │ │ ├── __snapshots__ │ │ │ └── States.spec.ts.snap │ │ └── index.ts │ ├── Switch │ │ ├── Switch.spec.ts │ │ ├── Switch.tsx │ │ ├── __snapshots__ │ │ │ └── Switch.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Tag │ │ ├── Tag.spec.ts │ │ ├── Tag.tsx │ │ ├── __snapshots__ │ │ │ └── Tag.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Text │ │ ├── Text.spec.ts │ │ ├── Text.tsx │ │ ├── __snapshots__ │ │ │ └── Text.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── TextArea │ │ ├── TextArea.spec.ts │ │ ├── TextArea.tsx │ │ ├── __snapshots__ │ │ │ └── TextArea.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── Tooltip │ │ ├── Tooltip.spec.ts │ │ ├── Tooltip.tsx │ │ ├── __snapshots__ │ │ │ └── Tooltip.spec.ts.snap │ │ ├── index.ts │ │ └── style.ts │ ├── constants │ │ └── index.ts │ ├── index.ts │ ├── style │ │ ├── animations.ts │ │ ├── borders.ts │ │ ├── colors.ts │ │ └── fonts.ts │ └── util │ │ └── deprecated-warning.ts ├── documentation │ ├── App.tsx │ ├── app │ │ ├── AppContainer.tsx │ │ ├── Home.tsx │ │ └── layout │ │ │ ├── content │ │ │ ├── Component.tsx │ │ │ ├── Markdown.tsx │ │ │ └── components │ │ │ │ ├── CodeExample.tsx │ │ │ │ ├── ColorCopy.tsx │ │ │ │ ├── Example.tsx │ │ │ │ ├── Heading.tsx │ │ │ │ ├── InfoCard.tsx │ │ │ │ ├── LinkCard.tsx │ │ │ │ ├── LinkItem.tsx │ │ │ │ └── Props.tsx │ │ │ ├── navbar │ │ │ └── NavBar.tsx │ │ │ └── sidebar │ │ │ └── Sidebar.tsx │ ├── config │ │ ├── componentData.json │ │ └── documentsData.json │ ├── examples │ │ ├── AnimationWrapper │ │ │ ├── AnimationWrapper.tsx │ │ │ └── AnimationWrapperHook.tsx │ │ ├── Avatar │ │ │ ├── Fallback │ │ │ │ └── AvatarWithFallbackImage.tsx │ │ │ ├── Size │ │ │ │ ├── Large.tsx │ │ │ │ ├── Medium.tsx │ │ │ │ └── Small.tsx │ │ │ └── Type │ │ │ │ └── AvatarSocial.tsx │ │ ├── Banner │ │ │ ├── Banner.tsx │ │ │ ├── BannerOrange.tsx │ │ │ └── BannerWithHtml.tsx │ │ ├── Button │ │ │ ├── Size │ │ │ │ ├── SizeFullWidth.tsx │ │ │ │ ├── SizeLarge.tsx │ │ │ │ ├── SizeMedium.tsx │ │ │ │ └── SizeSmall.tsx │ │ │ ├── State │ │ │ │ ├── StateDisabled.tsx │ │ │ │ └── StateLoading.tsx │ │ │ └── Type │ │ │ │ ├── TypeDanger.tsx │ │ │ │ ├── TypeIcon.tsx │ │ │ │ ├── TypeIconEnd.tsx │ │ │ │ ├── TypeOrange.tsx │ │ │ │ ├── TypePrimary.tsx │ │ │ │ ├── TypePrimaryIcon.tsx │ │ │ │ ├── TypePrimaryIconEnd.tsx │ │ │ │ ├── TypeSecondary.tsx │ │ │ │ ├── TypeSecondaryIcon.tsx │ │ │ │ ├── TypeSplit.tsx │ │ │ │ ├── TypeSplitButtonWithCustomSelect.tsx │ │ │ │ ├── TypeSplitIsOpen.tsx │ │ │ │ ├── TypeSplitSmall.tsx │ │ │ │ ├── TypeSplitWithEndIcon.tsx │ │ │ │ └── TypeText.tsx │ │ ├── Carousel │ │ │ ├── Carousel-no-indicators.tsx │ │ │ ├── Carousel-one-direction.tsx │ │ │ ├── Carousel.tsx │ │ │ └── one-slide.tsx │ │ ├── CrossSell │ │ │ └── CrossSell.tsx │ │ ├── DropdownMenu │ │ │ ├── DropdownMenu.tsx │ │ │ └── DropdownMenuWithOnOpenEvent.tsx │ │ ├── Icon │ │ │ ├── Add.tsx │ │ │ ├── AddMedia.tsx │ │ │ ├── AltTag.tsx │ │ │ ├── Analyze.tsx │ │ │ ├── Appearance.tsx │ │ │ ├── AppleMusic.tsx │ │ │ ├── ArrowDown.tsx │ │ │ ├── ArrowLeft.tsx │ │ │ ├── ArrowRight.tsx │ │ │ ├── ArrowUp.tsx │ │ │ ├── Attach.tsx │ │ │ ├── Audience.tsx │ │ │ ├── Bandcamp.tsx │ │ │ ├── Behance.tsx │ │ │ ├── Bell.tsx │ │ │ ├── BookmarkFilled.tsx │ │ │ ├── BookmarkOutline.tsx │ │ │ ├── Buffer.tsx │ │ │ ├── Building.tsx │ │ │ ├── ButtonLink.tsx │ │ │ ├── Calendar.tsx │ │ │ ├── CalendarAdd.tsx │ │ │ ├── Camera.tsx │ │ │ ├── Canva.tsx │ │ │ ├── Caption.tsx │ │ │ ├── Card.tsx │ │ │ ├── CaretDown.tsx │ │ │ ├── CaretLeft.tsx │ │ │ ├── CaretRight.tsx │ │ │ ├── CaretUp.tsx │ │ │ ├── Carousel.tsx │ │ │ ├── Channels.tsx │ │ │ ├── ChartLine.tsx │ │ │ ├── Checkmark.tsx │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronUp.tsx │ │ │ ├── Clock.tsx │ │ │ ├── Clubhouse.tsx │ │ │ ├── CommentRoundFilled.tsx │ │ │ ├── CommentRoundOutline.tsx │ │ │ ├── CommentSquareOutline.tsx │ │ │ ├── Compare.tsx │ │ │ ├── Copy.tsx │ │ │ ├── Coupon.tsx │ │ │ ├── Cross.tsx │ │ │ ├── Day.tsx │ │ │ ├── Direct.tsx │ │ │ ├── Discord.tsx │ │ │ ├── Dollar.tsx │ │ │ ├── Drafts.tsx │ │ │ ├── DragIndicator.tsx │ │ │ ├── Dribbble.tsx │ │ │ ├── Dropbox.tsx │ │ │ ├── Email.tsx │ │ │ ├── Emoji.tsx │ │ │ ├── Facebook.tsx │ │ │ ├── Feed.tsx │ │ │ ├── Flag.tsx │ │ │ ├── Flash.tsx │ │ │ ├── Folder.tsx │ │ │ ├── Folders.tsx │ │ │ ├── Frequency.tsx │ │ │ ├── Gbp.tsx │ │ │ ├── Gear.tsx │ │ │ ├── Giphy.tsx │ │ │ ├── Github.tsx │ │ │ ├── Giveaway.tsx │ │ │ ├── Gmb.tsx │ │ │ ├── Google.tsx │ │ │ ├── GoogleDrive.tsx │ │ │ ├── GooglePhotos.tsx │ │ │ ├── GooglePlus.tsx │ │ │ ├── Hamburger.tsx │ │ │ ├── Hashtag.tsx │ │ │ ├── Heading.tsx │ │ │ ├── HeartFilled.tsx │ │ │ ├── HeartOutline.tsx │ │ │ ├── Help.tsx │ │ │ ├── Hide.tsx │ │ │ ├── Home.tsx │ │ │ ├── Hotkeys.tsx │ │ │ ├── Image.tsx │ │ │ ├── Import.tsx │ │ │ ├── Inbox.tsx │ │ │ ├── Info.tsx │ │ │ ├── Instagram.tsx │ │ │ ├── InstagramComment.tsx │ │ │ ├── InstagramDm.tsx │ │ │ ├── InstagramGrid.tsx │ │ │ ├── InstagramLike.tsx │ │ │ ├── Layout.tsx │ │ │ ├── Link.tsx │ │ │ ├── LinkedIn.tsx │ │ │ ├── List.tsx │ │ │ ├── Load.tsx │ │ │ ├── Location.tsx │ │ │ ├── LocationPin.tsx │ │ │ ├── Locked.tsx │ │ │ ├── MagicWand.tsx │ │ │ ├── Mail.tsx │ │ │ ├── Mastodon.tsx │ │ │ ├── Medium.tsx │ │ │ ├── Message.tsx │ │ │ ├── MessageFilled.tsx │ │ │ ├── MessageOutline.tsx │ │ │ ├── MessageRoundFilled.tsx │ │ │ ├── MessageRoundOutline.tsx │ │ │ ├── MessageSquareFilled.tsx │ │ │ ├── MessageSquareOutline.tsx │ │ │ ├── Messenger.tsx │ │ │ ├── More.tsx │ │ │ ├── Movie.tsx │ │ │ ├── Music.tsx │ │ │ ├── Negative.tsx │ │ │ ├── Onedrive.tsx │ │ │ ├── OpenNew.tsx │ │ │ ├── Order.tsx │ │ │ ├── Organic.tsx │ │ │ ├── Patreon.tsx │ │ │ ├── Pause.tsx │ │ │ ├── Paypal.tsx │ │ │ ├── Pencil.tsx │ │ │ ├── People.tsx │ │ │ ├── PercentageDown.tsx │ │ │ ├── PercentageUp.tsx │ │ │ ├── Person.tsx │ │ │ ├── Phone.tsx │ │ │ ├── Pin.tsx │ │ │ ├── Pinned.tsx │ │ │ ├── Pinterest.tsx │ │ │ ├── Placeholder.tsx │ │ │ ├── Play.tsx │ │ │ ├── PlayRound.tsx │ │ │ ├── Plus.tsx │ │ │ ├── Post.tsx │ │ │ ├── Promoted.tsx │ │ │ ├── Publish.tsx │ │ │ ├── QrCode.tsx │ │ │ ├── Question.tsx │ │ │ ├── Reel.tsx │ │ │ ├── Refresh.tsx │ │ │ ├── Reply.tsx │ │ │ ├── Return.tsx │ │ │ ├── Retweet.tsx │ │ │ ├── Save.tsx │ │ │ ├── Search.tsx │ │ │ ├── Share.tsx │ │ │ ├── ShareArrow.tsx │ │ │ ├── ShareArrowFilled.tsx │ │ │ ├── ShareArrowOutline.tsx │ │ │ ├── Shopify.tsx │ │ │ ├── Short.tsx │ │ │ ├── Sidebar.tsx │ │ │ ├── SizeExtraLarge.tsx │ │ │ ├── SizeLarge.tsx │ │ │ ├── SizeMedium.tsx │ │ │ ├── SizeSmall.tsx │ │ │ ├── Sms.tsx │ │ │ ├── Snapchat.tsx │ │ │ ├── SocialIcons.tsx │ │ │ ├── Soundcloud.tsx │ │ │ ├── Spam.tsx │ │ │ ├── Sparkles.tsx │ │ │ ├── Spotify.tsx │ │ │ ├── Star.tsx │ │ │ ├── StarOutline.tsx │ │ │ ├── StartPage.tsx │ │ │ ├── Stats.tsx │ │ │ ├── Story.tsx │ │ │ ├── Subheading.tsx │ │ │ ├── Substack.tsx │ │ │ ├── Subtract.tsx │ │ │ ├── Swap.tsx │ │ │ ├── Tag.tsx │ │ │ ├── Telegram.tsx │ │ │ ├── TextAlignCenter.tsx │ │ │ ├── TextAlignLeft.tsx │ │ │ ├── TextAlignRight.tsx │ │ │ ├── TextBold.tsx │ │ │ ├── TextExpand.tsx │ │ │ ├── TextItalic.tsx │ │ │ ├── TextRephrase.tsx │ │ │ ├── TextSummarize.tsx │ │ │ ├── TextUnderline.tsx │ │ │ ├── Thread.tsx │ │ │ ├── Thumbsup.tsx │ │ │ ├── ThumbsupFilled.tsx │ │ │ ├── ThumbsupOutline.tsx │ │ │ ├── Tiktok.tsx │ │ │ ├── Title.tsx │ │ │ ├── Trash.tsx │ │ │ ├── Twitch.tsx │ │ │ ├── Twitter.tsx │ │ │ ├── Unknown.tsx │ │ │ ├── Unlocked.tsx │ │ │ ├── Unsplash.tsx │ │ │ ├── Video.tsx │ │ │ ├── View.tsx │ │ │ ├── VolumeOff.tsx │ │ │ ├── VolumeOn.tsx │ │ │ ├── Warning.tsx │ │ │ ├── Website.tsx │ │ │ ├── Whatsapp.tsx │ │ │ ├── World.tsx │ │ │ └── Youtube.tsx │ │ ├── Input │ │ │ ├── option │ │ │ │ ├── Default.tsx │ │ │ │ ├── WithExposedRef.tsx │ │ │ │ ├── WithHelp.tsx │ │ │ │ ├── WithIcon.tsx │ │ │ │ ├── WithLabel.tsx │ │ │ │ ├── WithOnBlur.tsx │ │ │ │ ├── WithPrefix.tsx │ │ │ │ └── WithValue.tsx │ │ │ ├── size │ │ │ │ ├── Regular.tsx │ │ │ │ ├── Small.tsx │ │ │ │ └── Tall.tsx │ │ │ └── state │ │ │ │ ├── Disabled.tsx │ │ │ │ ├── WithError.tsx │ │ │ │ └── WithErrorAndHelp.tsx │ │ ├── Link │ │ │ ├── BoldLink.tsx │ │ │ └── DefaultLink.tsx │ │ ├── Loader │ │ │ └── Loader.tsx │ │ ├── Modal │ │ │ ├── basic-modal.tsx │ │ │ ├── focus_reset.tsx │ │ │ ├── form-modal.tsx │ │ │ ├── with-background.tsx │ │ │ └── with-carousel.tsx │ │ ├── NonDismissibleModal │ │ │ └── NonDismissibleModal.tsx │ │ ├── Notice │ │ │ ├── Notice.tsx │ │ │ ├── NoticeDanger.tsx │ │ │ ├── NoticeDismissable.tsx │ │ │ ├── NoticeDismissableNoAnimation.tsx │ │ │ ├── NoticeLongText.tsx │ │ │ ├── NoticeTip.tsx │ │ │ └── NoticeWarning.tsx │ │ ├── Notification │ │ │ ├── Notification.tsx │ │ │ └── NotificationAction.tsx │ │ ├── ProgressBar │ │ │ └── DefaultProgressBar.tsx │ │ ├── SegmentedControl │ │ │ ├── Interactive │ │ │ │ └── IconPosition.tsx │ │ │ ├── Size │ │ │ │ ├── SizeLarge.tsx │ │ │ │ ├── SizeNormal.tsx │ │ │ │ └── SizeSmall.tsx │ │ │ ├── State │ │ │ │ ├── StateCustomDefault.tsx │ │ │ │ ├── StateCustomTooltip.tsx │ │ │ │ └── StateOptionDisabled.tsx │ │ │ └── Type │ │ │ │ ├── TypeIconOnly.tsx │ │ │ │ ├── TypeTextAndIcon.tsx │ │ │ │ └── TypeTextOnly.tsx │ │ ├── Select │ │ │ ├── BasicSelect.tsx │ │ │ ├── DisabledSelect.tsx │ │ │ ├── SelectIconOnly.tsx │ │ │ ├── SelectWithCustomItem.tsx │ │ │ ├── SelectWithIcon.tsx │ │ │ ├── SelectWithInputSearch.tsx │ │ │ ├── SelectWithItemTextToLeft.tsx │ │ │ ├── SelectWithItemTooltip.tsx │ │ │ ├── SelectWithItemsWithNoSelectedState.tsx │ │ │ ├── SelectWithMenu.tsx │ │ │ ├── SelectWithMenuAndCustomItem.tsx │ │ │ ├── SelectWithMultiSelect.tsx │ │ │ ├── SelectWithOnOpen.tsx │ │ │ ├── SelectWithSearch.tsx │ │ │ ├── SelectWithSelectAll.tsx │ │ │ ├── SelectWithoutCapitalize.tsx │ │ │ ├── SplitButtonBottom.tsx │ │ │ ├── SplitButtonDisabled.tsx │ │ │ └── SplitButtonTop.tsx │ │ ├── SidebarHeader │ │ │ └── Header.tsx │ │ ├── SidebarListItem │ │ │ ├── SidebarListItem.tsx │ │ │ ├── SidebarListItemSelected.tsx │ │ │ ├── SidebarListItemWithCustomBadge.tsx │ │ │ ├── SidebarListItemWithCustomComponent.tsx │ │ │ ├── SidebarListItemWithIcon.tsx │ │ │ ├── SidebarListItemWithUser.tsx │ │ │ └── SidebarListItemWithUserSelected.tsx │ │ ├── SimpleModal │ │ │ └── SimpleModal.tsx │ │ ├── SocialButton │ │ │ ├── FacebookSocialButton.tsx │ │ │ ├── InstagramSocialButton.tsx │ │ │ ├── LinkedinSocialButton.tsx │ │ │ ├── PinterestSocialButton.tsx │ │ │ └── TwitterSocialButton.tsx │ │ ├── States │ │ │ ├── StatesLarge.tsx │ │ │ ├── StatesLargeWithMedia.tsx │ │ │ ├── StatesLargeWithTwoButtons.tsx │ │ │ ├── StatesLargeWithoutButtons.tsx │ │ │ ├── StatesSmall.tsx │ │ │ ├── StatesSmallWithMedia.tsx │ │ │ ├── StatesSmallWithTwoButtons.tsx │ │ │ └── StatesSmallWithoutButtons.tsx │ │ ├── Switch │ │ │ ├── SwitchDisabled.tsx │ │ │ ├── SwitchOff.tsx │ │ │ └── SwitchOn.tsx │ │ ├── Tag │ │ │ ├── CountTag.tsx │ │ │ ├── IconTag.tsx │ │ │ └── TextTag.tsx │ │ ├── Text │ │ │ ├── basic │ │ │ │ ├── Paragraph.tsx │ │ │ │ └── Span.tsx │ │ │ ├── heading │ │ │ │ ├── H1.tsx │ │ │ │ ├── H2.tsx │ │ │ │ └── H3.tsx │ │ │ └── label │ │ │ │ ├── Help.tsx │ │ │ │ ├── HelpWithError.tsx │ │ │ │ ├── Label.tsx │ │ │ │ └── LabelColored.tsx │ │ ├── TextArea │ │ │ ├── TextArea.tsx │ │ │ ├── TextAreaDisabled.tsx │ │ │ ├── TextAreaFullHeight.tsx │ │ │ └── TextAreaWithError.tsx │ │ └── Tooltip │ │ │ ├── option │ │ │ ├── customOpacity.tsx │ │ │ ├── multiline.tsx │ │ │ ├── withCustomLabel.tsx │ │ │ └── withHotkey.tsx │ │ │ ├── position │ │ │ ├── bottom.tsx │ │ │ ├── left.tsx │ │ │ ├── right.tsx │ │ │ ├── top.tsx │ │ │ └── withVerticalAlign.tsx │ │ │ └── visibility │ │ │ ├── notVisible.tsx │ │ │ └── visible.tsx │ ├── markdown │ │ ├── GettingStarted │ │ │ ├── CHANGELOG.md │ │ │ ├── ComponentStatus.md │ │ │ ├── Contributing.md │ │ │ ├── GettingStarted.md │ │ │ └── NewComponentChecklist.md │ │ ├── Guides │ │ │ └── Guides.md │ │ └── UI.md │ └── version.ts ├── globals.d.ts ├── index.css └── index.tsx ├── tsconfig.json ├── types └── index.d.ts └── yarn.lock /.depcheckrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignores": [ 3 | "babel-core", 4 | "babel-jest", 5 | "babel-plugin-module-resolver", 6 | "identity-obj-proxy", 7 | "raw-loader", 8 | "sass-loader", 9 | "sort-package-json", 10 | "webpack-bundle-analyzer", 11 | "@bufferapp/ui" 12 | ], 13 | "ignore-patterns": ["dist", "built", "temp", "coverage", "lib-commonjs", "lib"] 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Tab indentation for HTML files 2 | [*.html] 3 | indent_style = space 4 | indent_size = 2 5 | 6 | # Tab indentation for JS files 7 | [*.js] 8 | indent_style = space 9 | indent_size = 2 10 | 11 | # Tab indentation for JS files 12 | [*.ts] 13 | indent_style = space 14 | indent_size = 2 15 | 16 | # Tab indentation for JSON files 17 | [*.json] 18 | indent_style = space 19 | indent_size = 2 20 | 21 | # Tab indentation for JSX files 22 | [*.jsx] 23 | indent_style = space 24 | indent_size = 2 25 | 26 | # Tab indentation for JSX files 27 | [*.tsx] 28 | indent_style = space 29 | indent_size = 2 30 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | config/ 4 | coverage/ 5 | lib/ 6 | dist/ 7 | types/ 8 | # Generated component data 9 | /src/documentation/config/componentData.json 10 | /src/documentation/config/documentsData.json 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # built component library 26 | /lib 27 | /dist 28 | /built 29 | 30 | # built docs 31 | /docs 32 | 33 | # Webstorm 34 | .idea 35 | 36 | # secrets (figma access token, etc.) 37 | .env 38 | 39 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: 'all', 3 | tabWidth: 2, 4 | semi: false, 5 | singleQuote: true, 6 | bracketSpacing: true, 7 | useTabs: false, 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "16" 5 | 6 | cache: yarn 7 | 8 | notifications: 9 | email: false 10 | 11 | install: 12 | - yarn 13 | 14 | before_script: 15 | - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter 16 | - chmod +x ./cc-test-reporter 17 | - ./cc-test-reporter before-build 18 | 19 | after_success: 20 | - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "*.md": "mdx" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/background.png -------------------------------------------------------------------------------- /public/images/illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/illustration.png -------------------------------------------------------------------------------- /public/images/illustration2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/illustration2.png -------------------------------------------------------------------------------- /public/images/loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/images/loading-gray.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/logo.png -------------------------------------------------------------------------------- /public/images/reply-cross-sell-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/reply-cross-sell-01.png -------------------------------------------------------------------------------- /public/images/reply-cross-sell-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/reply-cross-sell-02.png -------------------------------------------------------------------------------- /public/images/reply-cross-sell-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/ui/05aba391f701d6507b79587a9986fe7b7b32a8c0/public/images/reply-cross-sell-03.png -------------------------------------------------------------------------------- /scripts/new-component-template/README.md: -------------------------------------------------------------------------------- 1 | # New Component Template 2 | 3 | This directory is used by the the `new-component` package.json script to bootstrap work on a new component. 4 | 5 | ## Usage 6 | 7 | ```bash 8 | $ yarn component:new 9 | ``` 10 | 11 | ## Changing the template 12 | 13 | The component template files are in `new-component-template/` and will be copied into the root of this package after running the `component:new` script. If the file already exists then the new content is appended. Feel free to make any tweaks or additions there. Any instances of `ComponentNamePlaceholder` in the template files, directory names, or in the source code will be replaced with the name the user chooses. 14 | -------------------------------------------------------------------------------- /scripts/new-component-template/src/components/ComponentNamePlaceholder/ComponentNamePlaceholder.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import PropTypes from 'prop-types' 4 | import styled from 'styled-components' 5 | import * as Styles from './style' 6 | 7 | const ComponentNamePlaceholderStyled = styled.div` 8 | ${Styles.base} 9 | ` 10 | 11 | const ComponentNamePlaceholder = ({ children }) => ( 12 | {children} 13 | ) 14 | 15 | ComponentNamePlaceholder.propTypes = { 16 | children: PropTypes.node.isRequired, 17 | } 18 | 19 | export default ComponentNamePlaceholder 20 | -------------------------------------------------------------------------------- /scripts/new-component-template/src/components/ComponentNamePlaceholder/ComponentNamePlaceholder.spec.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | import snap from 'jest-auto-snapshots' 3 | import 'jest-styled-components' 4 | 5 | import ComponentNamePlaceholder from './ComponentNamePlaceholder' 6 | 7 | snap(ComponentNamePlaceholder, './ComponentNamePlaceholder.tsx') 8 | -------------------------------------------------------------------------------- /scripts/new-component-template/src/components/ComponentNamePlaceholder/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ComponentNamePlaceholder' 2 | -------------------------------------------------------------------------------- /scripts/new-component-template/src/components/ComponentNamePlaceholder/style.js: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components' 2 | 3 | export const base = css` 4 | color: red; 5 | ` 6 | -------------------------------------------------------------------------------- /scripts/new-component-template/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as ComponentNamePlaceholder } from './ComponentNamePlaceholder' 2 | -------------------------------------------------------------------------------- /scripts/new-component-template/src/documentation/examples/ComponentNamePlaceholder/ComponentNamePlaceholder.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ComponentNamePlaceholder from '@bufferapp/ui/ComponentNamePlaceholder' 3 | 4 | /** ComponentNamePlaceholder Example */ 5 | export default function ExampleComponentNamePlaceholder() { 6 | return Hello, world! 7 | } 8 | -------------------------------------------------------------------------------- /scripts/publish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | RED='\033[0;31m' 4 | BLUE='\033[0;34m' 5 | NC='\033[0m' # No Color 6 | 7 | if [ -z $1 ] 8 | then 9 | echo -e $RED"Publish error:" $NC "plesase provide a newversion string [ major | minor | patch ]" 10 | exit 1 11 | fi 12 | 13 | newVersion=$1 14 | echo -e $BLUE"Publishing a new" $newVersion "version"$NC 15 | 16 | git checkout main && \ 17 | yarn version --$newVersion && \ 18 | yarn build:lib && \ 19 | cd ./dist && \ 20 | yarn publish && \ 21 | cd ../ &&\ 22 | git push --follow-tags &&\ 23 | yarn deploy:docs 24 | -------------------------------------------------------------------------------- /scripts/publishBeta.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | RED='\033[0;31m' 4 | BLUE='\033[0;34m' 5 | NC='\033[0m' # No Color 6 | 7 | #if [ -z $1 ] 8 | # then 9 | # echo -e $RED"Publish error:" $NC "plesase provide the current package.json version" 10 | # exit 1 11 | #fi 12 | 13 | version=$(jq -r .version package.json) 14 | version=$(echo "$version" | sed 's/-beta.*//') 15 | 16 | revision=$(git rev-parse --short HEAD) 17 | betaVersion="$version-beta.$revision" 18 | 19 | echo -e $BLUE"Publishing a new" ${betaVersion} "version"$NC 20 | 21 | yarn version --new-version $betaVersion --no-git-tag-version && \ 22 | yarn run build:lib && \ 23 | cd ./dist && \ 24 | yarn publish --tag=beta 25 | -------------------------------------------------------------------------------- /scripts/sync.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | RED='\033[0;31m' 4 | BLUE='\033[0;34m' 5 | NC='\033[0m' # No Color 6 | 7 | if [ -z $1 ] 8 | then 9 | echo -e $RED"Sync error:" $NC "please provide a destination folder" 10 | exit 1 11 | fi 12 | 13 | yarn build:lib &&\ 14 | # remove spec and test files 15 | rm ./dist/*/*.test.* &&\ 16 | rm ./dist/*/*.spec.* &&\ 17 | rsync -r ./dist/ $1 18 | -------------------------------------------------------------------------------- /src/components/AnimationWrapper/AnimationWrapper.spec.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 2 | import snap from 'jest-auto-snapshots' 3 | import 'jest-styled-components' 4 | 5 | import AnimationWrapper from './AnimationWrapper' 6 | 7 | snap(AnimationWrapper, './AnimationWrapper.tsx') 8 | -------------------------------------------------------------------------------- /src/components/AnimationWrapper/hook.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import AnimationWrapper from './AnimationWrapper' 3 | 4 | // @ts-expect-error TS(7006) FIXME: Parameter 'props' implicitly has an 'any' type. 5 | function useAnimation(props) { 6 | const [dismissing, setDismissing] = useState(false) 7 | const animationProps = { ...props, dismissing } 8 | 9 | return { 10 | AnimationWrapper, 11 | animationProps, 12 | dismiss: () => setDismissing(true), 13 | } 14 | } 15 | 16 | export default useAnimation 17 | -------------------------------------------------------------------------------- /src/components/AnimationWrapper/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './AnimationWrapper' 2 | export { default as useAnimation } from './hook' 3 | -------------------------------------------------------------------------------- /src/components/Avatar/Avatar.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Avatar from './Avatar' 7 | 8 | snap(Avatar, './Avatar.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Avatar' 2 | -------------------------------------------------------------------------------- /src/components/Banner/Banner.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Banner from './Banner' 7 | 8 | snap(Banner, './Banner.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Banner/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Banner' 2 | -------------------------------------------------------------------------------- /src/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Button' 2 | -------------------------------------------------------------------------------- /src/components/Carousel/Carousel.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Carousel from './Carousel' 7 | 8 | snap(Carousel, './Carousel.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Carousel/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Carousel' 2 | -------------------------------------------------------------------------------- /src/components/CrossSell/CrossSell.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import CrossSell from './CrossSell' 7 | 8 | snap(CrossSell, './CrossSell.tsx') 9 | -------------------------------------------------------------------------------- /src/components/CrossSell/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './CrossSell' 2 | -------------------------------------------------------------------------------- /src/components/DropdownMenu/DropdownMenu.spec.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 2 | import snap from 'jest-auto-snapshots' 3 | import DropdownMenu from './DropdownMenu' 4 | 5 | snap(DropdownMenu, './DropdownMenu.tsx') 6 | -------------------------------------------------------------------------------- /src/components/DropdownMenu/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DropdownMenu' 2 | -------------------------------------------------------------------------------- /src/components/DropdownMenu/keyCode.ts: -------------------------------------------------------------------------------- 1 | export const keyCode = Object.freeze({ 2 | TAB: 9, 3 | RETURN: 13, 4 | ESC: 27, 5 | SPACE: 32, 6 | PAGEUP: 33, 7 | PAGEDOWN: 34, 8 | END: 35, 9 | HOME: 36, 10 | LEFT: 37, 11 | UP: 38, 12 | RIGHT: 39, 13 | DOWN: 40, 14 | }) 15 | -------------------------------------------------------------------------------- /src/components/GlobalStyles.ts: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components' 2 | 3 | const GlobalStyles = createGlobalStyle` 4 | html, 5 | body { 6 | font-family: "Roboto"; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | 10 | width: 100%; 11 | height: 100%; 12 | overflow: auto; 13 | } 14 | 15 | *, 16 | *::before, 17 | *::after { 18 | box-sizing: border-box; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | #root { 24 | width: 100%; 25 | height: 100%; 26 | } 27 | ` 28 | 29 | export default GlobalStyles 30 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Add.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const AddIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | AddIcon.displayName = 'AddIcon' 17 | 18 | export default AddIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/ArrowLeft.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const ArrowLeftIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | ArrowLeftIcon.displayName = 'ArrowLeftIcon' 17 | 18 | export default ArrowLeftIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Checkmark.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const CheckmarkIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | CheckmarkIcon.displayName = 'CheckmarkIcon' 17 | 18 | export default CheckmarkIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/CommentRoundFilled.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const CommentRoundFilledIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | CommentRoundFilledIcon.displayName = 'CommentRoundFilledIcon' 17 | 18 | export default CommentRoundFilledIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Compare.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const CompareIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | CompareIcon.displayName = 'CompareIcon' 17 | 18 | export default CompareIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Flag.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const FlagIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | FlagIcon.displayName = 'FlagIcon' 17 | 18 | export default FlagIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/GooglePhotos.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const GooglePhotosIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | GooglePhotosIcon.displayName = 'GooglePhotosIcon' 17 | 18 | export default GooglePhotosIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Heading.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const HeadingIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | HeadingIcon.displayName = 'HeadingIcon' 17 | 18 | export default HeadingIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/InstagramComment.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const InstagramCommentIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | InstagramCommentIcon.displayName = 'InstagramCommentIcon' 17 | 18 | export default InstagramCommentIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Message.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const MessageIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | MessageIcon.displayName = 'MessageIcon' 17 | 18 | export default MessageIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/More.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const MoreIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | MoreIcon.displayName = 'MoreIcon' 17 | 18 | export default MoreIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Negative.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const NegativeIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | NegativeIcon.displayName = 'NegativeIcon' 17 | 18 | export default NegativeIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Patreon.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const PatreonIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | PatreonIcon.displayName = 'PatreonIcon' 17 | 18 | export default PatreonIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Placeholder.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const PlaceholderIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | PlaceholderIcon.displayName = 'PlaceholderIcon' 17 | 18 | export default PlaceholderIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Play.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const PlayIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | PlayIcon.displayName = 'PlayIcon' 17 | 18 | export default PlayIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Substack.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const SubstackIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | SubstackIcon.displayName = 'SubstackIcon' 17 | 18 | export default SubstackIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Subtract.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const SubtractIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | SubtractIcon.displayName = 'SubtractIcon' 17 | 18 | export default SubtractIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/TextItalic.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const TextItalicIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | TextItalicIcon.displayName = 'TextItalicIcon' 17 | 18 | export default TextItalicIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/Icons/Unsplash.tsx: -------------------------------------------------------------------------------- 1 | /** WARNING 2 | * This file is automatically generated by the `yarn gen:icons` command. 3 | * ALL changes will be overwritten. 4 | */ 5 | import React from 'react' 6 | import createIconComponent from '../utils/createIconComponent' 7 | 8 | const UnsplashIcon = createIconComponent({ 9 | content: ( 10 | 11 | 12 | 13 | ), 14 | }) 15 | // @ts-expect-error TS(2339) FIXME: Property 'displayName' does not exist on type '(pr... Remove this comment to see the full error message 16 | UnsplashIcon.displayName = 'UnsplashIcon' 17 | 18 | export default UnsplashIcon 19 | -------------------------------------------------------------------------------- /src/components/Icon/style.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components' 2 | 3 | export const base = css` 4 | display: inline-block; 5 | fill: currentcolor; 6 | flex-shrink: 0; 7 | ` 8 | 9 | export const small = css` 10 | width: 8px; 11 | height: 8px; 12 | ` 13 | 14 | export const smedium = css` 15 | width: 12px; 16 | height: 12px; 17 | ` 18 | 19 | export const medium = css` 20 | width: 16px; 21 | height: 16px; 22 | ` 23 | 24 | export const large = css` 25 | width: 22px; 26 | height: 22px; 27 | ` 28 | 29 | export const extraLarge = css` 30 | width: 32px; 31 | height: 32px; 32 | ` 33 | -------------------------------------------------------------------------------- /src/components/Icon/utils/createIconComponent.ts: -------------------------------------------------------------------------------- 1 | import { createElement } from 'react' 2 | import Icon from '../Icon' 3 | 4 | const createIconComponent = 5 | // @ts-expect-error TS(7031) FIXME: Binding element 'content' implicitly has an 'any' ... Remove this comment to see the full error message 6 | ({ content }) => (props: any) => 7 | createElement( 8 | Icon, 9 | { 10 | ...props, 11 | viewBox: '0 0 16 16', 12 | }, 13 | content, 14 | ) 15 | 16 | export default createIconComponent 17 | -------------------------------------------------------------------------------- /src/components/Input/Input.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Input from './Input' 7 | 8 | snap(Input, './Input.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Input/InputWithRef.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Input from './Input' 3 | 4 | // This is a bit ugly but we need it otherwise automatic snapshots tests will fail 5 | export default React.forwardRef((props, ref) => ( 6 | // @ts-expect-error TS(2769) FIXME: No overload matches this call. 7 | 8 | )) 9 | -------------------------------------------------------------------------------- /src/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './InputWithRef' 2 | -------------------------------------------------------------------------------- /src/components/Link/Link.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Link from './Link' 7 | 8 | snap(Link, './Link.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Link/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Link' 2 | -------------------------------------------------------------------------------- /src/components/Link/style.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { blue, blueDark } from '../style/colors' 3 | import { fontFamily, fontSize, lineHeight } from '../style/fonts' 4 | 5 | export const LinkStyled = styled.a` 6 | font-family: ${fontFamily}; 7 | font-size: ${fontSize}; 8 | font-weight: ${(props): string => props. 9 | // @ts-expect-error TS(2339) FIXME: Property 'fontWeight' does not exist on type 'Them... Remove this comment to see the full error message 10 | fontWeight}; 11 | line-height: ${lineHeight}; 12 | cursor: pointer; 13 | text-decoration: none; 14 | color: ${blue}; 15 | :hover { 16 | color: ${blueDark}; 17 | } 18 | ` 19 | -------------------------------------------------------------------------------- /src/components/Loader/Loader.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Loader from './Loader' 7 | 8 | snap(Loader, './Loader.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Loader/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Loader' 2 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.spec.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Modal from './Modal' 7 | 8 | snap(Modal, './Modal.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.test.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | import { hasDismissedCookie } from './Modal' 3 | 4 | describe('Modal hasDismissedCookie', () => { 5 | it('return true if has dismissed cookie', () => { 6 | const cookie = hasDismissedCookie('foo=dismissed', 'foo') 7 | expect(cookie).toBe(true) 8 | }) 9 | it('return false if no cookie match', () => { 10 | const cookie = hasDismissedCookie('bar=dismissed', 'foo') 11 | expect(cookie).toBe(false) 12 | }) 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Modal' 2 | -------------------------------------------------------------------------------- /src/components/NavBar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NavBar' 2 | export { default as NavBarMenu } from './NavBarMenu/NavBarMenu' 3 | -------------------------------------------------------------------------------- /src/components/NonDismissibleModal/NonDismissibleModal.spec.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import NonDismissibleModal from './NonDismissibleModal' 7 | 8 | snap(NonDismissibleModal, './NonDismissibleModal.tsx') 9 | -------------------------------------------------------------------------------- /src/components/NonDismissibleModal/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NonDismissibleModal' 2 | -------------------------------------------------------------------------------- /src/components/Notice/Notice.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Notice from './Notice' 7 | 8 | snap(Notice, './Notice.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Notice/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Notice' 2 | -------------------------------------------------------------------------------- /src/components/Notification/Notification.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Notification from './Notification' 7 | 8 | snap(Notification, './Notification.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Notification/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Notification' 2 | -------------------------------------------------------------------------------- /src/components/ProgressBar/ProgressBar.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import ProgressBar from './ProgressBar' 7 | 8 | snap(ProgressBar, './ProgressBar.tsx') 9 | -------------------------------------------------------------------------------- /src/components/ProgressBar/__snapshots__/ProgressBar.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`jest-auto-snapshots > ProgressBar Matches snapshot when passed all props 1`] = ` 4 | 7 | 10 | 11 | `; 12 | 13 | exports[`jest-auto-snapshots > ProgressBar Matches snapshot when passed only required props 1`] = ` 14 | 15 | 18 | 19 | `; 20 | -------------------------------------------------------------------------------- /src/components/ProgressBar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ProgressBar' 2 | -------------------------------------------------------------------------------- /src/components/Search/Search.spec.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 2 | import snap from 'jest-auto-snapshots' 3 | import Search from './Search' 4 | 5 | snap(Search, './Search.tsx') 6 | -------------------------------------------------------------------------------- /src/components/Search/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Search' 2 | -------------------------------------------------------------------------------- /src/components/Search/style.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | 3 | export const SearchWrapper = styled.div` 4 | height: auto; 5 | width: 100%; 6 | margin-left: 8px; 7 | ` 8 | 9 | export const SearchInput = styled.input` 10 | && { 11 | border: 0; 12 | border-radius: 4px; 13 | box-shadow: none; 14 | width: 100%; 15 | box-sizing: border-box; 16 | resize: none; 17 | font-size: 14px; 18 | height: ${(props): string => (props.height === 'small' ? '28px' : '48px')}; 19 | padding-left: 0px; 20 | &:focus { 21 | outline: none; 22 | } 23 | } 24 | ` 25 | -------------------------------------------------------------------------------- /src/components/SegmentedControl/Option/Option.spec.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 2 | import snap from 'jest-auto-snapshots' 3 | import Option from './Option' 4 | 5 | snap(Option, './Option.tsx') 6 | -------------------------------------------------------------------------------- /src/components/SegmentedControl/Option/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Option' 2 | -------------------------------------------------------------------------------- /src/components/SegmentedControl/SegmentedControl.spec.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 2 | import snap from 'jest-auto-snapshots' 3 | import SegmentedControl from './SegmentedControl' 4 | 5 | snap(SegmentedControl, './SegmentedControl.tsx') 6 | -------------------------------------------------------------------------------- /src/components/SegmentedControl/__snapshots__/SegmentedControl.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`jest-auto-snapshots > SegmentedControl Matches snapshot when passed only required props 1`] = ` 4 | 7 | 8 | 9 | `; 10 | -------------------------------------------------------------------------------- /src/components/SegmentedControl/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SegmentedControl' 2 | -------------------------------------------------------------------------------- /src/components/SegmentedControl/style.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { gray, white } from '../style/colors' 3 | import { borderRadius } from '../style/borders' 4 | 5 | export const Container = styled.div` 6 | display: flex; 7 | border: 1px solid ${gray}; 8 | border-radius: ${borderRadius}; 9 | padding: 3px; 10 | background-color: ${white}; 11 | ` 12 | -------------------------------------------------------------------------------- /src/components/Select/Select.spec.ts: -------------------------------------------------------------------------------- 1 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 2 | import snap from 'jest-auto-snapshots' 3 | import Select from './Select' 4 | 5 | snap(Select, './Select.tsx') 6 | -------------------------------------------------------------------------------- /src/components/Select/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Select' 2 | -------------------------------------------------------------------------------- /src/components/SidebarHeader/SidebarHeader.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import SidebarHeader from './SidebarHeader' 7 | 8 | snap(SidebarHeader, './SidebarHeader.tsx') 9 | -------------------------------------------------------------------------------- /src/components/SidebarHeader/SidebarHeader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import PropTypes from 'prop-types' 4 | import { TitleContainer } from './style' 5 | import Text from '../Text/Text' 6 | 7 | // @ts-expect-error TS(7031) FIXME: Binding element 'title' implicitly has an 'any' ty... Remove this comment to see the full error message 8 | const SidebarHeader = ({ title }) => ( 9 | 10 | {title} 11 | 12 | ) 13 | 14 | SidebarHeader.propTypes = { 15 | title: PropTypes.string.isRequired, 16 | } 17 | 18 | export default SidebarHeader 19 | -------------------------------------------------------------------------------- /src/components/SidebarHeader/__snapshots__/SidebarHeader.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`jest-auto-snapshots > SidebarHeader Matches snapshot when passed only required props 1`] = ` 4 | 5 | 10 | jest-auto-snapshots String Fixture 11 | 12 | 13 | `; 14 | -------------------------------------------------------------------------------- /src/components/SidebarHeader/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SidebarHeader' 2 | -------------------------------------------------------------------------------- /src/components/SidebarHeader/style.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import { grayLight } from '../style/colors' 3 | 4 | export const TitleContainer = styled.div` 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding-right: 8px; 9 | padding-bottom: 8px; 10 | border-bottom: 1px solid ${grayLight}; 11 | ` 12 | -------------------------------------------------------------------------------- /src/components/SidebarListItem/SidebarListItem.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import SidebarListItem from './SidebarListItem' 7 | 8 | snap(SidebarListItem, './SidebarListItem.tsx') 9 | -------------------------------------------------------------------------------- /src/components/SidebarListItem/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SidebarListItem' 2 | -------------------------------------------------------------------------------- /src/components/SimpleModal/SimpleModal.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import SimpleModal from './SimpleModal' 7 | 8 | snap(SimpleModal, './SimpleModal.tsx') 9 | -------------------------------------------------------------------------------- /src/components/SimpleModal/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SimpleModal' 2 | -------------------------------------------------------------------------------- /src/components/SocialButton/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SocialButton' 2 | -------------------------------------------------------------------------------- /src/components/States/States.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import States from './States' 7 | 8 | snap(States, './States.tsx') 9 | -------------------------------------------------------------------------------- /src/components/States/__snapshots__/States.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`jest-auto-snapshots > States Matches snapshot when passed all props 1`] = ` 4 | 7 | 8 | 9 | 10 | 11 | `; 12 | 13 | exports[`jest-auto-snapshots > States Matches snapshot when passed only required props 1`] = ` 14 | 17 | 18 | 19 | 20 | 21 | `; 22 | -------------------------------------------------------------------------------- /src/components/States/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './States' 2 | -------------------------------------------------------------------------------- /src/components/Switch/Switch.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Switch from './Switch' 7 | 8 | snap(Switch, './Switch.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Switch/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Switch' 2 | -------------------------------------------------------------------------------- /src/components/Tag/Tag.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Tag from './Tag' 7 | 8 | snap(Tag, './Tag.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Tag/__snapshots__/Tag.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`jest-auto-snapshots > Tag Matches snapshot when passed all props 1`] = ` 4 | 8 | 9 | 10 | `; 11 | 12 | exports[`jest-auto-snapshots > Tag Matches snapshot when passed only required props 1`] = ` 13 | 17 | 18 | 19 | `; 20 | -------------------------------------------------------------------------------- /src/components/Tag/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Tag' 2 | -------------------------------------------------------------------------------- /src/components/Text/Text.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Text from './Text' 7 | 8 | snap(Text, './Text.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Text/__snapshots__/Text.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`jest-auto-snapshots > Text Matches snapshot when boolean prop "hasError" is set to: "false" 1`] = ` 4 | 5 | 6 | 7 | `; 8 | 9 | exports[`jest-auto-snapshots > Text Matches snapshot when passed all props 1`] = ` 10 | 11 | 12 | 13 | `; 14 | -------------------------------------------------------------------------------- /src/components/Text/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Text' 2 | -------------------------------------------------------------------------------- /src/components/TextArea/TextArea.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import TextArea from './TextArea' 7 | 8 | snap(TextArea, './TextArea.tsx') 9 | -------------------------------------------------------------------------------- /src/components/TextArea/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './TextArea' 2 | -------------------------------------------------------------------------------- /src/components/Tooltip/Tooltip.spec.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-filename-extension */ 2 | // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'jest... Remove this comment to see the full error message 3 | import snap from 'jest-auto-snapshots' 4 | import 'jest-styled-components' 5 | 6 | import Tooltip from './Tooltip' 7 | 8 | snap(Tooltip, './Tooltip.tsx') 9 | -------------------------------------------------------------------------------- /src/components/Tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Tooltip' 2 | -------------------------------------------------------------------------------- /src/components/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const socialNetworks = [ 2 | 'facebook', 3 | 'twitter', 4 | 'instagram', 5 | 'linkedin', 6 | 'google', 7 | ] 8 | -------------------------------------------------------------------------------- /src/components/style/borders.ts: -------------------------------------------------------------------------------- 1 | export const borderRadius = '4px' 2 | -------------------------------------------------------------------------------- /src/components/style/fonts.ts: -------------------------------------------------------------------------------- 1 | export const fontFamily = '"Roboto", sans-serif' 2 | 3 | export const fontSizeSmall = '12px' 4 | export const fontSize = '14px' 5 | 6 | export const fontWeightThin = 100 7 | export const fontWeightExtraLight = 200 8 | export const fontWeightLight = 300 9 | export const fontWeight = 400 // Normal 10 | export const fontWeightMedium = 500 11 | export const fontWeightSemiBold = 600 12 | export const fontWeightBold = 700 13 | 14 | export const lineHeight = '16px' 15 | export const lineHeightSmall = '14px' 16 | -------------------------------------------------------------------------------- /src/documentation/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { hot } from 'react-hot-loader' 3 | import { Redirect, Route, Switch } from 'react-router-dom' 4 | import DocumentationPages from './app/AppContainer' 5 | 6 | const App = () => ( 7 | 8 | } 12 | /> 13 | 19 | 20 | ) 21 | 22 | export default hot(module)(App) 23 | -------------------------------------------------------------------------------- /src/documentation/examples/Avatar/Fallback/AvatarWithFallbackImage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Avatar' or its c... Remove this comment to see the full error message 3 | import Avatar from '@bufferapp/ui/Avatar' 4 | 5 | /** With Fallback Icon */ 6 | export default function ExampleAvatar() { 7 | return ( 8 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/documentation/examples/Avatar/Size/Large.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Avatar' or its c... Remove this comment to see the full error message 3 | import Avatar from '@bufferapp/ui/Avatar' 4 | 5 | /** Large */ 6 | export default function ExampleAvatar() { 7 | return ( 8 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/documentation/examples/Avatar/Size/Medium.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Avatar' or its c... Remove this comment to see the full error message 3 | import Avatar from '@bufferapp/ui/Avatar' 4 | 5 | /** Medium */ 6 | export default function ExampleAvatar() { 7 | return ( 8 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/documentation/examples/Avatar/Size/Small.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Avatar' or its c... Remove this comment to see the full error message 3 | import Avatar from '@bufferapp/ui/Avatar' 4 | 5 | /** Small */ 6 | export default function ExampleAvatar() { 7 | return ( 8 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/documentation/examples/Avatar/Type/AvatarSocial.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Avatar' or its c... Remove this comment to see the full error message 3 | import Avatar from '@bufferapp/ui/Avatar' 4 | 5 | /** With Social Network Icon */ 6 | export default function ExampleAvatar() { 7 | return ( 8 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/documentation/examples/Banner/Banner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Banner' or its c... Remove this comment to see the full error message 3 | import Banner from '@bufferapp/ui/Banner' 4 | 5 | /** Banner Example */ 6 | export default function ExampleBanner() { 7 | const bannerButton = { 8 | label: 'Add Billing Details', 9 | action: () => { 10 | console.info('yaaas') 11 | }, 12 | } 13 | return ( 14 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/documentation/examples/Banner/BannerOrange.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Banner' or its c... Remove this comment to see the full error message 3 | import Banner from '@bufferapp/ui/Banner' 4 | 5 | /** Banner Orange */ 6 | export default function ExampleBanner() { 7 | const bannerButton = { 8 | label: 'Add Billing Details', 9 | action: () => { 10 | console.info('yaaas') 11 | }, 12 | } 13 | return ( 14 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/documentation/examples/Banner/BannerWithHtml.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Banner' or its c... Remove this comment to see the full error message 3 | import Banner from '@bufferapp/ui/Banner' 4 | 5 | /** Orange banner with customHTML */ 6 | export default function ExampleBanner() { 7 | return ( 8 | You're on the Business trial. Complete your billing details to make the transition smooth.", 13 | }} 14 | /* eslint-disable-next-line */ 15 | onCloseBanner={() => console.log('Banner closed!')} 16 | /> 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/documentation/examples/Button/Size/SizeFullWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Button' or its c... Remove this comment to see the full error message 3 | import Button from '@bufferapp/ui/Button' 4 | 5 | /** Full Width */ 6 | export default function ExampleSizeFullWidth() { 7 | return 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/option/WithHelp.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with help text */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 10 | name="foo" 11 | help="this is an help text" 12 | placeholder="placeholder text" 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/option/WithIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Icon/Icons/Searc... Remove this comment to see the full error message 5 | import SearchIcon from '@bufferapp/ui/Icon/Icons/Search' 6 | 7 | /** Input with icon */ 8 | export default function ExampleInput() { 9 | return ( 10 | {}} 12 | name="foo" 13 | placeholder="Search channels" 14 | icon={} 15 | /> 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/option/WithLabel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with label text */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 10 | name="foo" 11 | label="this is a label text" 12 | placeholder="placeholder text" 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/option/WithOnBlur.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with onBlur option */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 11 | onBlur={() => {}} 12 | name="foo" 13 | placeholder="placeholder text" 14 | /> 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/option/WithPrefix.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with prefix text */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 10 | name="foo" 11 | label="What is your Twitter handle?" 12 | prefix={{ text: '@', paddingLeft: '25px' }} 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/option/WithValue.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with value */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 10 | name="foo" 11 | placeholder="placeholder text" 12 | value="This is an input with a value" 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/size/Regular.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Regular input */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 11 | name="foo" 12 | placeholder="placeholder text" 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/size/Small.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Small input */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 11 | name="foo" 12 | placeholder="placeholder text" 13 | size="small" 14 | /> 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/size/Tall.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Tall input */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 11 | name="foo" 12 | placeholder="placeholder text" 13 | size="tall" 14 | /> 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/state/Disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input disabled */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 11 | name="foo" 12 | placeholder="a disabled text input" 13 | disabled 14 | /> 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/state/WithError.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with error */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 11 | name="foo" 12 | placeholder="placeholder text" 13 | hasError 14 | value="this is an input with an error" 15 | /> 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/documentation/examples/Input/state/WithErrorAndHelp.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Input' or its co... Remove this comment to see the full error message 3 | import Input from '@bufferapp/ui/Input' 4 | 5 | /** Input with error and help text */ 6 | export default function ExampleInput() { 7 | return ( 8 | {}} 10 | name="foo" 11 | placeholder="placeholder text" 12 | help="help text" 13 | hasError 14 | value="this is an input with an error" 15 | /> 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/documentation/examples/Link/BoldLink.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Link' or its cor... Remove this comment to see the full error message 3 | import Link from '@bufferapp/ui/Link' 4 | 5 | /** Link with bolder weight */ 6 | export default function ExampleLink() { 7 | return ( 8 | 9 | This is a link 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/documentation/examples/Link/DefaultLink.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Link' or its cor... Remove this comment to see the full error message 3 | import Link from '@bufferapp/ui/Link' 4 | 5 | /** Link */ 6 | export default function ExampleLink() { 7 | return ( 8 | 9 | This is a link 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/documentation/examples/Loader/Loader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Loader' or its c... Remove this comment to see the full error message 3 | import Loader from '@bufferapp/ui/Loader' 4 | 5 | /** Loader Example */ 6 | export default function ExampleLoader() { 7 | return 8 | } 9 | -------------------------------------------------------------------------------- /src/documentation/examples/Notice/Notice.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Notice' or its c... Remove this comment to see the full error message 3 | import Notice from '@bufferapp/ui/Notice' 4 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Text' or its cor... Remove this comment to see the full error message 5 | import Text from '@bufferapp/ui/Text' 6 | 7 | /** Notice Example */ 8 | export default function ExampleNotice() { 9 | return ( 10 | 11 | 12 | We're actively working on improving this feature and would love 13 | your feedback! 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /src/documentation/examples/Notification/Notification.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Notification' or... Remove this comment to see the full error message 3 | import Notification from '@bufferapp/ui/Notification' 4 | 5 | /** Notification with text */ 6 | export default function ExampleNotification() { 7 | return ( 8 | // the wrapping div is only for documentation example purposes 9 |
10 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/documentation/examples/ProgressBar/DefaultProgressBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/ProgressBar' or ... Remove this comment to see the full error message 3 | import ProgressBar from '@bufferapp/ui/ProgressBar' 4 | 5 | /** Progress Bar */ 6 | export default function ExampleProgressBar() { 7 | return ( 8 |
9 | 10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /src/documentation/examples/Select/SelectWithItemTooltip.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Select' or its c... Remove this comment to see the full error message 3 | import Select from '@bufferapp/ui/Select' 4 | 5 | /** With Item Tooltip */ 6 | export default function ExampleSelect() { 7 | return ( 8 | console.info('Main select clicked')} 10 | label="Click Me" 11 | multiSelect 12 | items={[ 13 | { id: '1', title: 'Open', selected: true }, 14 | { id: '2', title: 'Pending' }, 15 | { id: '3', title: 'Closed' }, 16 | ]} 17 | hideSearch 18 | /> 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/documentation/examples/Select/SplitButtonDisabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // @ts-expect-error TS(2307) FIXME: Cannot find module '@bufferapp/ui/Button' or its c... Remove this comment to see the full error message 3 | import Button from '@bufferapp/ui/Button' 4 | 5 | /** Split Button Disabled */ 6 | export default function ExampleSplitButtonDisabled() { 7 | return ( 8 |