From ec6f106546aa81605e6544629a6ab9abfd3b1f5e Mon Sep 17 00:00:00 2001 From: sisber Date: Tue, 23 Jul 2019 14:18:14 -0700 Subject: [PATCH] Initial commit --- .editorconfig | 21 + .eslintignore | 5 + .eslintrc.js | 79 ++++ .gitignore | 78 ++++ .jest/resolver.js | 53 +++ .jest/setupFilesAfterEnv.js | 7 + .jest/transform.js | 25 ++ .prettierignore | 9 + .prettierrc | 17 + .storybook/addons.js | 5 + .storybook/babel.config.js | 30 ++ .storybook/config.js | 26 ++ .storybook/preview-head.html | 1 + .storybook/webpack.config.js | 32 ++ .storybook/withThemePovider.js | 6 + .vscode/settings.json | 7 + CONTRIBUTING.md | 30 ++ README.md | 46 ++ babel.config.js | 30 ++ jest.config.js | 24 + lerna.json | 6 + package.json | 119 +++++ .../components/accordion/package.json | 5 + .../paste-core/components/anchor/README.md | 29 ++ .../paste-core/components/anchor/package.json | 40 ++ .../components/anchor/rollup.config.js | 34 ++ .../components/anchor/src/index.tsx | 48 ++ .../components/anchor/src/styles.ts | 28 ++ .../paste-core/components/anchor/src/types.ts | 17 + .../anchor/stories/index.stories.tsx | 29 ++ .../components/anchor/tsconfig.build.json | 11 + .../components/anchor/tsconfig.json | 4 + .../paste-core/components/button/README.md | 58 +++ .../paste-core/components/button/package.json | 42 ++ .../components/button/rollup.config.js | 34 ++ .../components/button/src/index.tsx | 87 ++++ .../components/button/src/styles.ts | 410 ++++++++++++++++++ .../paste-core/components/button/src/types.ts | 48 ++ .../button/stories/index.stories.tsx | 154 +++++++ .../components/button/tsconfig.build.json | 15 + .../components/button/tsconfig.json | 4 + .../paste-core/components/card/package.json | 37 ++ .../components/card/rollup.config.js | 34 ++ .../paste-core/components/card/src/index.tsx | 25 ++ .../components/card/stories/index.stories.tsx | 11 + .../components/card/tsconfig.build.json | 11 + .../paste-core/components/card/tsconfig.json | 4 + .../components/heading/package.json | 42 ++ .../components/heading/rollup.config.js | 34 ++ .../components/heading/src/index.tsx | 75 ++++ .../heading/stories/index.stories.tsx | 25 ++ .../components/heading/tsconfig.build.json | 15 + .../components/heading/tsconfig.json | 5 + .../paste-core/components/input/package.json | 40 ++ .../components/input/rollup.config.js | 34 ++ .../paste-core/components/input/src/index.tsx | 24 + .../components/input/src/styled.input.tsx | 12 + .../input/stories/index.stories.tsx | 5 + .../components/input/tsconfig.build.json | 11 + .../paste-core/components/input/tsconfig.json | 4 + .../components/spinner/package.json | 43 ++ .../components/spinner/rollup.config.js | 34 ++ .../components/spinner/src/index.tsx | 39 ++ .../spinner/stories/index.stories.tsx | 12 + .../components/spinner/tsconfig.build.json | 15 + .../components/spinner/tsconfig.json | 4 + .../paste-core/utilities/box/package.json | 41 ++ .../paste-core/utilities/box/rollup.config.js | 34 ++ .../paste-core/utilities/box/src/index.tsx | 54 +++ .../utilities/box/stories/index.stories.tsx | 41 ++ .../utilities/box/tsconfig.build.json | 15 + .../paste-core/utilities/box/tsconfig.json | 4 + .../utilities/media-object/package.json | 39 ++ .../utilities/media-object/rollup.config.js | 34 ++ .../utilities/media-object/src/index.tsx | 49 +++ .../media-object/stories/index.stories.tsx | 38 ++ .../media-object/tsconfig.build.json | 15 + .../utilities/media-object/tsconfig.json | 4 + .../paste-core/utilities/text/package.json | 42 ++ .../utilities/text/rollup.config.js | 34 ++ .../paste-core/utilities/text/src/index.tsx | 52 +++ .../utilities/text/stories/index.stories.tsx | 41 ++ .../utilities/text/tsconfig.build.json | 15 + .../paste-core/utilities/text/tsconfig.json | 4 + .../utilities/truncate/package.json | 38 ++ .../utilities/truncate/rollup.config.js | 34 ++ .../utilities/truncate/src/index.tsx | 11 + .../truncate/stories/index.stories.tsx | 15 + .../utilities/truncate/tsconfig.build.json | 11 + .../utilities/truncate/tsconfig.json | 4 + packages/paste-design-tokens/.babelrc | 17 + packages/paste-design-tokens/README.md | 27 ++ .../__fixtures__/aliases/color-palette.yml | 71 +++ .../formatters/__fixtures__/aliases/color.yml | 8 + .../__fixtures__/aliases/font-size.yml | 11 + .../__fixtures__/aliases/spacing.yml | 17 + .../formatters/__fixtures__/colors.yml | 4 + .../__fixtures__/global/background-color.yml | 81 ++++ .../__fixtures__/global/font-size.yml | 36 ++ .../formatters/__fixtures__/global/index.yml | 6 + .../__fixtures__/global/palette-color.yml | 46 ++ .../__fixtures__/global/spacing.yml | 38 ++ .../__fixtures__/global/text-color.yml | 85 ++++ .../formatters/__fixtures__/index.yml | 2 + .../__tests__/__snapshots__/d.ts.spec.ts.snap | 180 ++++++++ .../__tests__/__snapshots__/es6.spec.ts.snap | 180 ++++++++ .../__snapshots__/sketchpalette.spec.ts.snap | 3 + .../formatters/__tests__/d.ts.spec.ts | 25 ++ .../formatters/__tests__/es6.spec.ts | 25 ++ .../__tests__/sketchpalette.spec.ts | 25 ++ .../paste-design-tokens/formatters/common.ts | 31 ++ .../paste-design-tokens/formatters/d.ts.ts | 25 ++ .../paste-design-tokens/formatters/es6.ts | 25 ++ .../formatters/gatsby.json.ts | 21 + .../formatters/sketchpalette.ts | 57 +++ packages/paste-design-tokens/gulpfile.ts | 295 +++++++++++++ packages/paste-design-tokens/package.json | 39 ++ .../tokens/aliases/border-radius.yml | 6 + .../tokens/aliases/border-width.yml | 4 + .../tokens/aliases/box-shadow.yml | 8 + .../tokens/aliases/color-palette.yml | 73 ++++ .../tokens/aliases/color.yml | 5 + .../tokens/aliases/font-family.yml | 3 + .../tokens/aliases/font-size.yml | 11 + .../tokens/aliases/font-weight.yml | 6 + .../tokens/aliases/offset.yml | 11 + .../tokens/aliases/sizing.yml | 26 ++ .../tokens/aliases/spacing.yml | 22 + .../tokens/aliases/z-index.yml | 11 + .../tokens/global/background-color.yml | 89 ++++ .../tokens/global/border-color.yml | 66 +++ .../tokens/global/border-radius.yml | 21 + .../tokens/global/border-width.yml | 15 + .../tokens/global/box-shadow.yml | 9 + .../tokens/global/font-family.yml | 10 + .../tokens/global/font-size.yml | 36 ++ .../tokens/global/font-weight.yml | 21 + .../tokens/global/index.yml | 14 + .../tokens/global/palette-color.yml | 46 ++ .../tokens/global/sizing.yml | 56 +++ .../tokens/global/spacing.yml | 48 ++ .../tokens/global/text-color.yml | 76 ++++ .../tokens/global/z-index.yml | 26 ++ .../paste-design-tokens/tokens/sketch.yml | 5 + .../themes/sendgrid/aliases/border-radius.yml | 2 + .../themes/sendgrid/aliases/border-width.yml | 2 + .../themes/sendgrid/aliases/box-shadow.yml | 4 + .../themes/sendgrid/aliases/color-palette.yml | 146 +++++++ .../tokens/themes/sendgrid/aliases/color.yml | 5 + .../themes/sendgrid/aliases/font-family.yml | 4 + .../themes/sendgrid/aliases/font-size.yml | 13 + .../themes/sendgrid/aliases/font-weight.yml | 2 + .../tokens/themes/sendgrid/aliases/offset.yml | 2 + .../tokens/themes/sendgrid/aliases/sizing.yml | 2 + .../themes/sendgrid/aliases/spacing.yml | 2 + .../themes/sendgrid/aliases/z-index.yml | 2 + .../sendgrid/global/background-color.yml | 67 +++ .../themes/sendgrid/global/border-color.yml | 67 +++ .../themes/sendgrid/global/border-radius.yml | 6 + .../themes/sendgrid/global/border-width.yml | 6 + .../themes/sendgrid/global/box-shadow.yml | 6 + .../themes/sendgrid/global/font-family.yml | 9 + .../themes/sendgrid/global/font-size.yml | 37 ++ .../themes/sendgrid/global/font-weight.yml | 6 + .../tokens/themes/sendgrid/global/index.yml | 14 + .../themes/sendgrid/global/palette-color.yml | 44 ++ .../tokens/themes/sendgrid/global/sizing.yml | 6 + .../tokens/themes/sendgrid/global/spacing.yml | 6 + .../themes/sendgrid/global/text-color.yml | 74 ++++ .../tokens/themes/sendgrid/global/z-index.yml | 6 + .../tokens/themes/sendgrid/sketch.yml | 5 + .../tokens/themes/sendgrid/tokens.yml | 2 + .../paste-design-tokens/tokens/tokens.yml | 2 + .../paste-design-tokens/types/index.ds.ts | 3 + packages/paste-design-tokens/types/index.ts | 7 + .../formatGroupTokensWithTemplate/index.ts | 69 +++ .../formatSingleTokensWithTemplate/index.ts | 18 + .../utils/getTokenCategories/index.ts | 13 + packages/paste-icons/README.md | 56 +++ packages/paste-icons/__IconList.tsx | 245 +++++++++++ packages/paste-icons/__StoryStyles.tsx | 17 + packages/paste-icons/index.stories.tsx | 16 + packages/paste-icons/package.json | 46 ++ .../src/react/AccountProfileIcon.tsx | 41 ++ packages/paste-icons/src/react/AddOnsIcon.tsx | 41 ++ .../src/react/AlertTriggersIcon.tsx | 41 ++ .../paste-icons/src/react/ApiExplorerIcon.tsx | 41 ++ .../paste-icons/src/react/ApiKeysIcon.tsx | 41 ++ .../paste-icons/src/react/ArrowRightIcon.tsx | 41 ++ .../src/react/ArrowShaftDownIcon.tsx | 35 ++ .../src/react/ArrowShaftLeftIcon.tsx | 35 ++ .../src/react/ArrowShaftRightIcon.tsx | 35 ++ .../src/react/ArrowShaftUpIcon.tsx | 35 ++ packages/paste-icons/src/react/AssetsIcon.tsx | 38 ++ .../paste-icons/src/react/AuditEventsIcon.tsx | 41 ++ packages/paste-icons/src/react/AuthyIcon.tsx | 41 ++ .../paste-icons/src/react/AutopilotIcon.tsx | 41 ++ packages/paste-icons/src/react/BackIcon.tsx | 41 ++ .../paste-icons/src/react/BarChartIcon.tsx | 35 ++ .../paste-icons/src/react/BillingIcon.tsx | 41 ++ packages/paste-icons/src/react/BuildIcon.tsx | 35 ++ .../paste-icons/src/react/ChannelsIcon.tsx | 41 ++ .../src/react/CheckboxCheckedIcon.tsx | 41 ++ .../src/react/CheckboxMultiIcon.tsx | 41 ++ .../src/react/CheckboxUncheckedIcon.tsx | 38 ++ .../src/react/ClockRegularIcon.tsx | 41 ++ packages/paste-icons/src/react/CloseIcon.tsx | 41 ++ .../paste-icons/src/react/CollapseIcon.tsx | 41 ++ .../src/react/CollapseMenuIcon.tsx | 41 ++ .../paste-icons/src/react/CollapsedIcon.tsx | 41 ++ .../paste-icons/src/react/CommunityIcon.tsx | 41 ++ .../paste-icons/src/react/ConnectAppsIcon.tsx | 41 ++ .../src/react/ConnectedDevicesIcon.tsx | 41 ++ .../paste-icons/src/react/ConsoleDashIcon.tsx | 41 ++ packages/paste-icons/src/react/CopyIcon.tsx | 41 ++ .../paste-icons/src/react/DebuggerIcon.tsx | 41 ++ .../paste-icons/src/react/DebuggerOldIcon.tsx | 41 ++ .../paste-icons/src/react/DevToolsIcon.tsx | 41 ++ packages/paste-icons/src/react/DoNotIcon.tsx | 35 ++ packages/paste-icons/src/react/DocsIcon.tsx | 41 ++ .../paste-icons/src/react/DownloadIcon.tsx | 41 ++ .../paste-icons/src/react/DropdownIcon.tsx | 41 ++ packages/paste-icons/src/react/EmailIcon.tsx | 41 ++ .../src/react/ExclamationCircleIcon.tsx | 41 ++ packages/paste-icons/src/react/ExpandIcon.tsx | 41 ++ .../paste-icons/src/react/ExpandMenuIcon.tsx | 41 ++ .../src/react/ExternalLinkIcon.tsx | 41 ++ .../paste-icons/src/react/FaxEnabledIcon.tsx | 41 ++ packages/paste-icons/src/react/FaxIcon.tsx | 41 ++ packages/paste-icons/src/react/FilterIcon.tsx | 35 ++ packages/paste-icons/src/react/FlexIcon.tsx | 41 ++ .../paste-icons/src/react/GoArrowIcon.tsx | 41 ++ .../paste-icons/src/react/HelpBookIcon.tsx | 41 ++ packages/paste-icons/src/react/HelpIcon.tsx | 41 ++ packages/paste-icons/src/react/HideIcon.tsx | 41 ++ packages/paste-icons/src/react/HomeIcon.tsx | 41 ++ packages/paste-icons/src/react/InfoIcon.tsx | 41 ++ .../paste-icons/src/react/InformationIcon.tsx | 41 ++ .../paste-icons/src/react/InspirationIcon.tsx | 41 ++ .../src/react/InterconnectIcon.tsx | 41 ++ .../paste-icons/src/react/IpMessagingIcon.tsx | 41 ++ .../paste-icons/src/react/KeyboardIcon.tsx | 35 ++ packages/paste-icons/src/react/LearnIcon.tsx | 35 ++ .../paste-icons/src/react/LineChartIcon.tsx | 41 ++ packages/paste-icons/src/react/LogoIcon.tsx | 41 ++ packages/paste-icons/src/react/LookupIcon.tsx | 41 ++ .../paste-icons/src/react/MessagingIcon.tsx | 41 ++ .../paste-icons/src/react/MmsEnabledIcon.tsx | 41 ++ packages/paste-icons/src/react/MoreIcon.tsx | 41 ++ .../react/MultiFactorAuthenticationIcon.tsx | 41 ++ packages/paste-icons/src/react/NotifyIcon.tsx | 41 ++ packages/paste-icons/src/react/OffIcon.tsx | 41 ++ packages/paste-icons/src/react/OnIcon.tsx | 41 ++ .../paste-icons/src/react/PartnersIcon.tsx | 43 ++ .../paste-icons/src/react/PauseFlatIcon.tsx | 31 ++ packages/paste-icons/src/react/PauseIcon.tsx | 41 ++ packages/paste-icons/src/react/PencilIcon.tsx | 35 ++ .../src/react/PhoneNumbersIcon.tsx | 41 ++ .../src/react/PhoneVerificationIcon.tsx | 41 ++ .../paste-icons/src/react/PieChartIcon.tsx | 41 ++ .../paste-icons/src/react/PlayFlatIcon.tsx | 35 ++ packages/paste-icons/src/react/PlayIcon.tsx | 41 ++ packages/paste-icons/src/react/PluginIcon.tsx | 41 ++ .../paste-icons/src/react/PlusButtonIcon.tsx | 38 ++ .../paste-icons/src/react/ProductsIcon.tsx | 41 ++ packages/paste-icons/src/react/ProxyIcon.tsx | 41 ++ .../paste-icons/src/react/QuestionIcon.tsx | 35 ++ packages/paste-icons/src/react/ResetIcon.tsx | 31 ++ .../paste-icons/src/react/RuntimeIcon.tsx | 41 ++ packages/paste-icons/src/react/SearchIcon.tsx | 41 ++ .../paste-icons/src/react/SettingsIcon.tsx | 41 ++ .../paste-icons/src/react/SipTrunkingIcon.tsx | 41 ++ .../paste-icons/src/react/SmsEnabledIcon.tsx | 41 ++ .../paste-icons/src/react/SpinnerIcon.tsx | 41 ++ packages/paste-icons/src/react/StudioIcon.tsx | 41 ++ .../paste-icons/src/react/SuccessIcon.tsx | 41 ++ .../paste-icons/src/react/SupportIcon.tsx | 41 ++ .../src/react/SupportLifebuoyIcon.tsx | 41 ++ packages/paste-icons/src/react/SyncIcon.tsx | 41 ++ .../paste-icons/src/react/TableViewIcon.tsx | 35 ++ .../paste-icons/src/react/TalkToSalesIcon.tsx | 41 ++ .../paste-icons/src/react/TaskrouterIcon.tsx | 41 ++ .../paste-icons/src/react/TemplatesIcon.tsx | 41 ++ .../paste-icons/src/react/ThumbTackIcon.tsx | 41 ++ .../src/react/TicketHistoryIcon.tsx | 41 ++ packages/paste-icons/src/react/TicketIcon.tsx | 41 ++ .../paste-icons/src/react/TwimlBinsIcon.tsx | 41 ++ .../src/react/TwoFactorAuthenticationIcon.tsx | 41 ++ packages/paste-icons/src/react/UploadIcon.tsx | 35 ++ packages/paste-icons/src/react/UsersIcon.tsx | 41 ++ packages/paste-icons/src/react/VideoIcon.tsx | 41 ++ packages/paste-icons/src/react/ViewIcon.tsx | 41 ++ .../src/react/VoiceEnabledIcon.tsx | 41 ++ packages/paste-icons/src/react/VoiceIcon.tsx | 41 ++ .../paste-icons/src/react/WhatsappIcon.tsx | 41 ++ .../paste-icons/src/react/WirelessIcon.tsx | 41 ++ .../src/react/helpers/IconWrapper.tsx | 18 + .../paste-icons/src/svg/account-profile.svg | 4 + packages/paste-icons/src/svg/add-ons.svg | 4 + .../paste-icons/src/svg/alert-triggers.svg | 4 + packages/paste-icons/src/svg/api-explorer.svg | 4 + packages/paste-icons/src/svg/api-keys.svg | 4 + packages/paste-icons/src/svg/arrow-right.svg | 4 + .../paste-icons/src/svg/arrow-shaft-down.svg | 9 + .../paste-icons/src/svg/arrow-shaft-left.svg | 9 + .../paste-icons/src/svg/arrow-shaft-right.svg | 9 + .../paste-icons/src/svg/arrow-shaft-up.svg | 9 + packages/paste-icons/src/svg/assets.svg | 4 + packages/paste-icons/src/svg/audit-events.svg | 4 + packages/paste-icons/src/svg/authy.svg | 4 + packages/paste-icons/src/svg/autopilot.svg | 4 + packages/paste-icons/src/svg/back.svg | 4 + packages/paste-icons/src/svg/bar-chart.svg | 9 + packages/paste-icons/src/svg/billing.svg | 4 + packages/paste-icons/src/svg/build.svg | 9 + packages/paste-icons/src/svg/channels.svg | 4 + .../paste-icons/src/svg/checkbox-checked.svg | 4 + .../paste-icons/src/svg/checkbox-multi.svg | 4 + .../src/svg/checkbox-unchecked.svg | 4 + .../paste-icons/src/svg/clock-regular.svg | 4 + packages/paste-icons/src/svg/close.svg | 4 + .../paste-icons/src/svg/collapse-menu.svg | 4 + packages/paste-icons/src/svg/collapse.svg | 4 + packages/paste-icons/src/svg/collapsed.svg | 4 + packages/paste-icons/src/svg/community.svg | 4 + packages/paste-icons/src/svg/connect-apps.svg | 4 + .../paste-icons/src/svg/connected-devices.svg | 4 + packages/paste-icons/src/svg/console-dash.svg | 4 + packages/paste-icons/src/svg/copy.svg | 4 + packages/paste-icons/src/svg/debugger-old.svg | 4 + packages/paste-icons/src/svg/debugger.svg | 4 + packages/paste-icons/src/svg/dev-tools.svg | 4 + packages/paste-icons/src/svg/do-not.svg | 8 + packages/paste-icons/src/svg/docs.svg | 4 + packages/paste-icons/src/svg/download.svg | 4 + packages/paste-icons/src/svg/dropdown.svg | 4 + packages/paste-icons/src/svg/email.svg | 4 + .../src/svg/exclamation-circle.svg | 3 + packages/paste-icons/src/svg/expand-menu.svg | 4 + packages/paste-icons/src/svg/expand.svg | 4 + .../paste-icons/src/svg/external-link.svg | 4 + packages/paste-icons/src/svg/fax-enabled.svg | 4 + packages/paste-icons/src/svg/fax.svg | 4 + packages/paste-icons/src/svg/filter.svg | 16 + packages/paste-icons/src/svg/flex.svg | 4 + packages/paste-icons/src/svg/go-arrow.svg | 4 + packages/paste-icons/src/svg/help-book.svg | 4 + packages/paste-icons/src/svg/help.svg | 4 + packages/paste-icons/src/svg/hide.svg | 4 + packages/paste-icons/src/svg/home.svg | 4 + packages/paste-icons/src/svg/info.svg | 4 + packages/paste-icons/src/svg/information.svg | 4 + packages/paste-icons/src/svg/inspiration.svg | 4 + packages/paste-icons/src/svg/interconnect.svg | 4 + packages/paste-icons/src/svg/ip-messaging.svg | 4 + packages/paste-icons/src/svg/keyboard.svg | 3 + packages/paste-icons/src/svg/learn.svg | 9 + packages/paste-icons/src/svg/line-chart.svg | 4 + packages/paste-icons/src/svg/logo.svg | 4 + packages/paste-icons/src/svg/lookup.svg | 4 + packages/paste-icons/src/svg/messaging.svg | 4 + packages/paste-icons/src/svg/mms-enabled.svg | 4 + packages/paste-icons/src/svg/more.svg | 4 + .../src/svg/multi-factor-authentication.svg | 4 + packages/paste-icons/src/svg/notify.svg | 4 + packages/paste-icons/src/svg/off.svg | 4 + packages/paste-icons/src/svg/on.svg | 4 + packages/paste-icons/src/svg/partners.svg | 14 + packages/paste-icons/src/svg/pause-flat.svg | 10 + packages/paste-icons/src/svg/pause.svg | 4 + packages/paste-icons/src/svg/pencil.svg | 3 + .../paste-icons/src/svg/phone-numbers.svg | 4 + .../src/svg/phone-verification.svg | 4 + packages/paste-icons/src/svg/pie-chart.svg | 4 + packages/paste-icons/src/svg/play-flat.svg | 11 + packages/paste-icons/src/svg/play.svg | 4 + packages/paste-icons/src/svg/plugin.svg | 4 + packages/paste-icons/src/svg/plus-button.svg | 4 + packages/paste-icons/src/svg/products.svg | 4 + packages/paste-icons/src/svg/proxy.svg | 4 + packages/paste-icons/src/svg/question.svg | 3 + packages/paste-icons/src/svg/reset.svg | 3 + packages/paste-icons/src/svg/runtime.svg | 4 + packages/paste-icons/src/svg/search.svg | 4 + packages/paste-icons/src/svg/settings.svg | 4 + packages/paste-icons/src/svg/sip-trunking.svg | 4 + packages/paste-icons/src/svg/sms-enabled.svg | 4 + packages/paste-icons/src/svg/spinner.svg | 4 + packages/paste-icons/src/svg/studio.svg | 4 + packages/paste-icons/src/svg/success.svg | 4 + .../paste-icons/src/svg/support-lifebuoy.svg | 4 + packages/paste-icons/src/svg/support.svg | 4 + packages/paste-icons/src/svg/sync.svg | 4 + packages/paste-icons/src/svg/table-view.svg | 9 + .../paste-icons/src/svg/talk-to-sales.svg | 4 + packages/paste-icons/src/svg/taskrouter.svg | 4 + packages/paste-icons/src/svg/templates.svg | 4 + packages/paste-icons/src/svg/thumb-tack.svg | 4 + .../paste-icons/src/svg/ticket-history.svg | 4 + packages/paste-icons/src/svg/ticket.svg | 4 + packages/paste-icons/src/svg/twiml-bins.svg | 4 + .../src/svg/two-factor-authentication.svg | 4 + packages/paste-icons/src/svg/upload.svg | 9 + packages/paste-icons/src/svg/users.svg | 4 + packages/paste-icons/src/svg/video.svg | 4 + packages/paste-icons/src/svg/view.svg | 4 + .../paste-icons/src/svg/voice-enabled.svg | 4 + packages/paste-icons/src/svg/voice.svg | 4 + packages/paste-icons/src/svg/whatsapp.svg | 4 + packages/paste-icons/src/svg/wireless.svg | 4 + packages/paste-icons/tools/cli.js | 104 +++++ packages/paste-icons/tools/iconTemplate.js | 37 ++ packages/paste-icons/tools/listTemplate.js | 42 ++ packages/paste-icons/tools/utils.js | 75 ++++ packages/paste-icons/tsconfig.build.json | 15 + packages/paste-icons/tsconfig.json | 4 + packages/paste-theme-tokens/package.json | 37 ++ packages/paste-theme-tokens/rollup.config.js | 34 ++ .../paste-theme-tokens/src/default/index.ts | 79 ++++ packages/paste-theme-tokens/src/index.ts | 5 + .../paste-theme-tokens/src/sendgrid/index.ts | 79 ++++ .../paste-theme-tokens/src/types/index.ts | 5 + .../paste-theme-tokens/tsconfig.build.json | 15 + packages/paste-theme-tokens/tsconfig.json | 4 + packages/paste-theme/README.md | 79 ++++ .../__tests__/themeConsumer.spec.tsx | 28 ++ .../__tests__/themeProvider.spec.tsx | 55 +++ .../paste-theme/__tests__/useTheme.spec.tsx | 29 ++ .../paste-theme/__tests__/withTheme.spec.tsx | 28 ++ packages/paste-theme/package.json | 44 ++ packages/paste-theme/rollup.config.js | 34 ++ packages/paste-theme/src/index.tsx | 11 + packages/paste-theme/src/themeConsumer.tsx | 22 + packages/paste-theme/src/themeProvider.tsx | 68 +++ packages/paste-theme/src/useTheme.ts | 13 + packages/paste-theme/src/withTheme.ts | 3 + .../paste-theme/stories/index.stories.tsx | 41 ++ packages/paste-theme/tsconfig.build.json | 15 + packages/paste-theme/tsconfig.json | 4 + packages/paste-website/.eslintrc | 6 + packages/paste-website/README.md | 9 + packages/paste-website/gatsby-config.js | 82 ++++ packages/paste-website/package.json | 40 ++ .../src/components/Header/index.tsx | 29 ++ .../src/components/Header/styled-header.ts | 7 + .../component-overview-table/index.tsx | 42 ++ .../components/default-site-wrapper/index.tsx | 170 ++++++++ .../src/components/mdx/index.tsx | 9 + .../src/components/mdx/mdx-provider/index.tsx | 41 ++ .../src/components/tokens-list/index.tsx | 49 +++ .../src/pages/components/button/index.mdx | 9 + .../src/pages/components/index.mdx | 37 ++ .../src/pages/getting-started/index.mdx | 47 ++ packages/paste-website/src/pages/index.tsx | 12 + .../paste-website/src/pages/tokens/index.mdx | 33 ++ .../src/templates/components.tsx | 19 + .../paste-website/src/templates/index.tsx | 19 + packages/paste-website/static/favicon.ico | Bin 0 -> 2813 bytes packages/paste-website/tsconfig.json | 15 + packages/paste-website/types/index.d.ts | 2 + tools/build/clean-repo.js | 6 + tools/build/pre-build.js | 6 + tools/build/pre-test.js | 5 + tools/utils/getPackageInfo.js | 18 + tools/utils/getRepoPackages.js | 26 ++ tools/utils/removeNodeModules.js | 13 + tools/utils/removeTsconfigBuildFiles.js | 29 ++ tools/utils/removeYarnLockfile.js | 13 + tools/utils/runCmd.js | 37 ++ tools/utils/sortObjectByKey.js | 15 + tools/utils/updatePackageCache.js | 28 ++ tools/utils/updatePackageReferences.js | 118 +++++ tsconfig.json | 49 +++ types/index.d.ts | 43 ++ 474 files changed, 13317 insertions(+) create mode 100644 .editorconfig create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .jest/resolver.js create mode 100644 .jest/setupFilesAfterEnv.js create mode 100644 .jest/transform.js create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .storybook/addons.js create mode 100644 .storybook/babel.config.js create mode 100644 .storybook/config.js create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/webpack.config.js create mode 100644 .storybook/withThemePovider.js create mode 100644 .vscode/settings.json create mode 100644 CONTRIBUTING.md create mode 100644 README.md create mode 100644 babel.config.js create mode 100644 jest.config.js create mode 100644 lerna.json create mode 100644 package.json create mode 100644 packages/paste-core/components/accordion/package.json create mode 100644 packages/paste-core/components/anchor/README.md create mode 100644 packages/paste-core/components/anchor/package.json create mode 100644 packages/paste-core/components/anchor/rollup.config.js create mode 100644 packages/paste-core/components/anchor/src/index.tsx create mode 100644 packages/paste-core/components/anchor/src/styles.ts create mode 100644 packages/paste-core/components/anchor/src/types.ts create mode 100644 packages/paste-core/components/anchor/stories/index.stories.tsx create mode 100644 packages/paste-core/components/anchor/tsconfig.build.json create mode 100644 packages/paste-core/components/anchor/tsconfig.json create mode 100644 packages/paste-core/components/button/README.md create mode 100644 packages/paste-core/components/button/package.json create mode 100644 packages/paste-core/components/button/rollup.config.js create mode 100644 packages/paste-core/components/button/src/index.tsx create mode 100644 packages/paste-core/components/button/src/styles.ts create mode 100644 packages/paste-core/components/button/src/types.ts create mode 100644 packages/paste-core/components/button/stories/index.stories.tsx create mode 100644 packages/paste-core/components/button/tsconfig.build.json create mode 100644 packages/paste-core/components/button/tsconfig.json create mode 100644 packages/paste-core/components/card/package.json create mode 100644 packages/paste-core/components/card/rollup.config.js create mode 100644 packages/paste-core/components/card/src/index.tsx create mode 100644 packages/paste-core/components/card/stories/index.stories.tsx create mode 100644 packages/paste-core/components/card/tsconfig.build.json create mode 100644 packages/paste-core/components/card/tsconfig.json create mode 100644 packages/paste-core/components/heading/package.json create mode 100644 packages/paste-core/components/heading/rollup.config.js create mode 100644 packages/paste-core/components/heading/src/index.tsx create mode 100644 packages/paste-core/components/heading/stories/index.stories.tsx create mode 100644 packages/paste-core/components/heading/tsconfig.build.json create mode 100644 packages/paste-core/components/heading/tsconfig.json create mode 100644 packages/paste-core/components/input/package.json create mode 100644 packages/paste-core/components/input/rollup.config.js create mode 100644 packages/paste-core/components/input/src/index.tsx create mode 100644 packages/paste-core/components/input/src/styled.input.tsx create mode 100644 packages/paste-core/components/input/stories/index.stories.tsx create mode 100644 packages/paste-core/components/input/tsconfig.build.json create mode 100644 packages/paste-core/components/input/tsconfig.json create mode 100644 packages/paste-core/components/spinner/package.json create mode 100644 packages/paste-core/components/spinner/rollup.config.js create mode 100644 packages/paste-core/components/spinner/src/index.tsx create mode 100644 packages/paste-core/components/spinner/stories/index.stories.tsx create mode 100644 packages/paste-core/components/spinner/tsconfig.build.json create mode 100644 packages/paste-core/components/spinner/tsconfig.json create mode 100644 packages/paste-core/utilities/box/package.json create mode 100644 packages/paste-core/utilities/box/rollup.config.js create mode 100644 packages/paste-core/utilities/box/src/index.tsx create mode 100644 packages/paste-core/utilities/box/stories/index.stories.tsx create mode 100644 packages/paste-core/utilities/box/tsconfig.build.json create mode 100644 packages/paste-core/utilities/box/tsconfig.json create mode 100644 packages/paste-core/utilities/media-object/package.json create mode 100644 packages/paste-core/utilities/media-object/rollup.config.js create mode 100644 packages/paste-core/utilities/media-object/src/index.tsx create mode 100644 packages/paste-core/utilities/media-object/stories/index.stories.tsx create mode 100644 packages/paste-core/utilities/media-object/tsconfig.build.json create mode 100644 packages/paste-core/utilities/media-object/tsconfig.json create mode 100644 packages/paste-core/utilities/text/package.json create mode 100644 packages/paste-core/utilities/text/rollup.config.js create mode 100644 packages/paste-core/utilities/text/src/index.tsx create mode 100644 packages/paste-core/utilities/text/stories/index.stories.tsx create mode 100644 packages/paste-core/utilities/text/tsconfig.build.json create mode 100644 packages/paste-core/utilities/text/tsconfig.json create mode 100644 packages/paste-core/utilities/truncate/package.json create mode 100644 packages/paste-core/utilities/truncate/rollup.config.js create mode 100644 packages/paste-core/utilities/truncate/src/index.tsx create mode 100644 packages/paste-core/utilities/truncate/stories/index.stories.tsx create mode 100644 packages/paste-core/utilities/truncate/tsconfig.build.json create mode 100644 packages/paste-core/utilities/truncate/tsconfig.json create mode 100644 packages/paste-design-tokens/.babelrc create mode 100644 packages/paste-design-tokens/README.md create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/aliases/color-palette.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/aliases/color.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/aliases/font-size.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/aliases/spacing.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/colors.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/global/background-color.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/global/font-size.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/global/index.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/global/palette-color.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/global/spacing.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/global/text-color.yml create mode 100644 packages/paste-design-tokens/formatters/__fixtures__/index.yml create mode 100644 packages/paste-design-tokens/formatters/__tests__/__snapshots__/d.ts.spec.ts.snap create mode 100644 packages/paste-design-tokens/formatters/__tests__/__snapshots__/es6.spec.ts.snap create mode 100644 packages/paste-design-tokens/formatters/__tests__/__snapshots__/sketchpalette.spec.ts.snap create mode 100644 packages/paste-design-tokens/formatters/__tests__/d.ts.spec.ts create mode 100644 packages/paste-design-tokens/formatters/__tests__/es6.spec.ts create mode 100644 packages/paste-design-tokens/formatters/__tests__/sketchpalette.spec.ts create mode 100644 packages/paste-design-tokens/formatters/common.ts create mode 100644 packages/paste-design-tokens/formatters/d.ts.ts create mode 100644 packages/paste-design-tokens/formatters/es6.ts create mode 100644 packages/paste-design-tokens/formatters/gatsby.json.ts create mode 100644 packages/paste-design-tokens/formatters/sketchpalette.ts create mode 100644 packages/paste-design-tokens/gulpfile.ts create mode 100644 packages/paste-design-tokens/package.json create mode 100644 packages/paste-design-tokens/tokens/aliases/border-radius.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/border-width.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/box-shadow.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/color-palette.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/color.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/font-family.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/font-size.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/font-weight.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/offset.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/sizing.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/spacing.yml create mode 100644 packages/paste-design-tokens/tokens/aliases/z-index.yml create mode 100644 packages/paste-design-tokens/tokens/global/background-color.yml create mode 100644 packages/paste-design-tokens/tokens/global/border-color.yml create mode 100644 packages/paste-design-tokens/tokens/global/border-radius.yml create mode 100644 packages/paste-design-tokens/tokens/global/border-width.yml create mode 100644 packages/paste-design-tokens/tokens/global/box-shadow.yml create mode 100644 packages/paste-design-tokens/tokens/global/font-family.yml create mode 100644 packages/paste-design-tokens/tokens/global/font-size.yml create mode 100644 packages/paste-design-tokens/tokens/global/font-weight.yml create mode 100644 packages/paste-design-tokens/tokens/global/index.yml create mode 100644 packages/paste-design-tokens/tokens/global/palette-color.yml create mode 100644 packages/paste-design-tokens/tokens/global/sizing.yml create mode 100644 packages/paste-design-tokens/tokens/global/spacing.yml create mode 100644 packages/paste-design-tokens/tokens/global/text-color.yml create mode 100644 packages/paste-design-tokens/tokens/global/z-index.yml create mode 100644 packages/paste-design-tokens/tokens/sketch.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-radius.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-width.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/box-shadow.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color-palette.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-family.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-size.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-weight.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/offset.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/sizing.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/spacing.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/aliases/z-index.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/background-color.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/border-color.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/border-radius.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/border-width.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/box-shadow.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/font-family.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/font-weight.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/index.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/palette-color.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/sizing.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/spacing.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/text-color.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/global/z-index.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/sketch.yml create mode 100644 packages/paste-design-tokens/tokens/themes/sendgrid/tokens.yml create mode 100644 packages/paste-design-tokens/tokens/tokens.yml create mode 100644 packages/paste-design-tokens/types/index.ds.ts create mode 100644 packages/paste-design-tokens/types/index.ts create mode 100644 packages/paste-design-tokens/utils/formatGroupTokensWithTemplate/index.ts create mode 100644 packages/paste-design-tokens/utils/formatSingleTokensWithTemplate/index.ts create mode 100644 packages/paste-design-tokens/utils/getTokenCategories/index.ts create mode 100644 packages/paste-icons/README.md create mode 100644 packages/paste-icons/__IconList.tsx create mode 100644 packages/paste-icons/__StoryStyles.tsx create mode 100644 packages/paste-icons/index.stories.tsx create mode 100644 packages/paste-icons/package.json create mode 100644 packages/paste-icons/src/react/AccountProfileIcon.tsx create mode 100644 packages/paste-icons/src/react/AddOnsIcon.tsx create mode 100644 packages/paste-icons/src/react/AlertTriggersIcon.tsx create mode 100644 packages/paste-icons/src/react/ApiExplorerIcon.tsx create mode 100644 packages/paste-icons/src/react/ApiKeysIcon.tsx create mode 100644 packages/paste-icons/src/react/ArrowRightIcon.tsx create mode 100644 packages/paste-icons/src/react/ArrowShaftDownIcon.tsx create mode 100644 packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx create mode 100644 packages/paste-icons/src/react/ArrowShaftRightIcon.tsx create mode 100644 packages/paste-icons/src/react/ArrowShaftUpIcon.tsx create mode 100644 packages/paste-icons/src/react/AssetsIcon.tsx create mode 100644 packages/paste-icons/src/react/AuditEventsIcon.tsx create mode 100644 packages/paste-icons/src/react/AuthyIcon.tsx create mode 100644 packages/paste-icons/src/react/AutopilotIcon.tsx create mode 100644 packages/paste-icons/src/react/BackIcon.tsx create mode 100644 packages/paste-icons/src/react/BarChartIcon.tsx create mode 100644 packages/paste-icons/src/react/BillingIcon.tsx create mode 100644 packages/paste-icons/src/react/BuildIcon.tsx create mode 100644 packages/paste-icons/src/react/ChannelsIcon.tsx create mode 100644 packages/paste-icons/src/react/CheckboxCheckedIcon.tsx create mode 100644 packages/paste-icons/src/react/CheckboxMultiIcon.tsx create mode 100644 packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx create mode 100644 packages/paste-icons/src/react/ClockRegularIcon.tsx create mode 100644 packages/paste-icons/src/react/CloseIcon.tsx create mode 100644 packages/paste-icons/src/react/CollapseIcon.tsx create mode 100644 packages/paste-icons/src/react/CollapseMenuIcon.tsx create mode 100644 packages/paste-icons/src/react/CollapsedIcon.tsx create mode 100644 packages/paste-icons/src/react/CommunityIcon.tsx create mode 100644 packages/paste-icons/src/react/ConnectAppsIcon.tsx create mode 100644 packages/paste-icons/src/react/ConnectedDevicesIcon.tsx create mode 100644 packages/paste-icons/src/react/ConsoleDashIcon.tsx create mode 100644 packages/paste-icons/src/react/CopyIcon.tsx create mode 100644 packages/paste-icons/src/react/DebuggerIcon.tsx create mode 100644 packages/paste-icons/src/react/DebuggerOldIcon.tsx create mode 100644 packages/paste-icons/src/react/DevToolsIcon.tsx create mode 100644 packages/paste-icons/src/react/DoNotIcon.tsx create mode 100644 packages/paste-icons/src/react/DocsIcon.tsx create mode 100644 packages/paste-icons/src/react/DownloadIcon.tsx create mode 100644 packages/paste-icons/src/react/DropdownIcon.tsx create mode 100644 packages/paste-icons/src/react/EmailIcon.tsx create mode 100644 packages/paste-icons/src/react/ExclamationCircleIcon.tsx create mode 100644 packages/paste-icons/src/react/ExpandIcon.tsx create mode 100644 packages/paste-icons/src/react/ExpandMenuIcon.tsx create mode 100644 packages/paste-icons/src/react/ExternalLinkIcon.tsx create mode 100644 packages/paste-icons/src/react/FaxEnabledIcon.tsx create mode 100644 packages/paste-icons/src/react/FaxIcon.tsx create mode 100644 packages/paste-icons/src/react/FilterIcon.tsx create mode 100644 packages/paste-icons/src/react/FlexIcon.tsx create mode 100644 packages/paste-icons/src/react/GoArrowIcon.tsx create mode 100644 packages/paste-icons/src/react/HelpBookIcon.tsx create mode 100644 packages/paste-icons/src/react/HelpIcon.tsx create mode 100644 packages/paste-icons/src/react/HideIcon.tsx create mode 100644 packages/paste-icons/src/react/HomeIcon.tsx create mode 100644 packages/paste-icons/src/react/InfoIcon.tsx create mode 100644 packages/paste-icons/src/react/InformationIcon.tsx create mode 100644 packages/paste-icons/src/react/InspirationIcon.tsx create mode 100644 packages/paste-icons/src/react/InterconnectIcon.tsx create mode 100644 packages/paste-icons/src/react/IpMessagingIcon.tsx create mode 100644 packages/paste-icons/src/react/KeyboardIcon.tsx create mode 100644 packages/paste-icons/src/react/LearnIcon.tsx create mode 100644 packages/paste-icons/src/react/LineChartIcon.tsx create mode 100644 packages/paste-icons/src/react/LogoIcon.tsx create mode 100644 packages/paste-icons/src/react/LookupIcon.tsx create mode 100644 packages/paste-icons/src/react/MessagingIcon.tsx create mode 100644 packages/paste-icons/src/react/MmsEnabledIcon.tsx create mode 100644 packages/paste-icons/src/react/MoreIcon.tsx create mode 100644 packages/paste-icons/src/react/MultiFactorAuthenticationIcon.tsx create mode 100644 packages/paste-icons/src/react/NotifyIcon.tsx create mode 100644 packages/paste-icons/src/react/OffIcon.tsx create mode 100644 packages/paste-icons/src/react/OnIcon.tsx create mode 100644 packages/paste-icons/src/react/PartnersIcon.tsx create mode 100644 packages/paste-icons/src/react/PauseFlatIcon.tsx create mode 100644 packages/paste-icons/src/react/PauseIcon.tsx create mode 100644 packages/paste-icons/src/react/PencilIcon.tsx create mode 100644 packages/paste-icons/src/react/PhoneNumbersIcon.tsx create mode 100644 packages/paste-icons/src/react/PhoneVerificationIcon.tsx create mode 100644 packages/paste-icons/src/react/PieChartIcon.tsx create mode 100644 packages/paste-icons/src/react/PlayFlatIcon.tsx create mode 100644 packages/paste-icons/src/react/PlayIcon.tsx create mode 100644 packages/paste-icons/src/react/PluginIcon.tsx create mode 100644 packages/paste-icons/src/react/PlusButtonIcon.tsx create mode 100644 packages/paste-icons/src/react/ProductsIcon.tsx create mode 100644 packages/paste-icons/src/react/ProxyIcon.tsx create mode 100644 packages/paste-icons/src/react/QuestionIcon.tsx create mode 100644 packages/paste-icons/src/react/ResetIcon.tsx create mode 100644 packages/paste-icons/src/react/RuntimeIcon.tsx create mode 100644 packages/paste-icons/src/react/SearchIcon.tsx create mode 100644 packages/paste-icons/src/react/SettingsIcon.tsx create mode 100644 packages/paste-icons/src/react/SipTrunkingIcon.tsx create mode 100644 packages/paste-icons/src/react/SmsEnabledIcon.tsx create mode 100644 packages/paste-icons/src/react/SpinnerIcon.tsx create mode 100644 packages/paste-icons/src/react/StudioIcon.tsx create mode 100644 packages/paste-icons/src/react/SuccessIcon.tsx create mode 100644 packages/paste-icons/src/react/SupportIcon.tsx create mode 100644 packages/paste-icons/src/react/SupportLifebuoyIcon.tsx create mode 100644 packages/paste-icons/src/react/SyncIcon.tsx create mode 100644 packages/paste-icons/src/react/TableViewIcon.tsx create mode 100644 packages/paste-icons/src/react/TalkToSalesIcon.tsx create mode 100644 packages/paste-icons/src/react/TaskrouterIcon.tsx create mode 100644 packages/paste-icons/src/react/TemplatesIcon.tsx create mode 100644 packages/paste-icons/src/react/ThumbTackIcon.tsx create mode 100644 packages/paste-icons/src/react/TicketHistoryIcon.tsx create mode 100644 packages/paste-icons/src/react/TicketIcon.tsx create mode 100644 packages/paste-icons/src/react/TwimlBinsIcon.tsx create mode 100644 packages/paste-icons/src/react/TwoFactorAuthenticationIcon.tsx create mode 100644 packages/paste-icons/src/react/UploadIcon.tsx create mode 100644 packages/paste-icons/src/react/UsersIcon.tsx create mode 100644 packages/paste-icons/src/react/VideoIcon.tsx create mode 100644 packages/paste-icons/src/react/ViewIcon.tsx create mode 100644 packages/paste-icons/src/react/VoiceEnabledIcon.tsx create mode 100644 packages/paste-icons/src/react/VoiceIcon.tsx create mode 100644 packages/paste-icons/src/react/WhatsappIcon.tsx create mode 100644 packages/paste-icons/src/react/WirelessIcon.tsx create mode 100644 packages/paste-icons/src/react/helpers/IconWrapper.tsx create mode 100644 packages/paste-icons/src/svg/account-profile.svg create mode 100644 packages/paste-icons/src/svg/add-ons.svg create mode 100644 packages/paste-icons/src/svg/alert-triggers.svg create mode 100644 packages/paste-icons/src/svg/api-explorer.svg create mode 100644 packages/paste-icons/src/svg/api-keys.svg create mode 100644 packages/paste-icons/src/svg/arrow-right.svg create mode 100644 packages/paste-icons/src/svg/arrow-shaft-down.svg create mode 100644 packages/paste-icons/src/svg/arrow-shaft-left.svg create mode 100644 packages/paste-icons/src/svg/arrow-shaft-right.svg create mode 100644 packages/paste-icons/src/svg/arrow-shaft-up.svg create mode 100644 packages/paste-icons/src/svg/assets.svg create mode 100644 packages/paste-icons/src/svg/audit-events.svg create mode 100644 packages/paste-icons/src/svg/authy.svg create mode 100644 packages/paste-icons/src/svg/autopilot.svg create mode 100644 packages/paste-icons/src/svg/back.svg create mode 100644 packages/paste-icons/src/svg/bar-chart.svg create mode 100644 packages/paste-icons/src/svg/billing.svg create mode 100644 packages/paste-icons/src/svg/build.svg create mode 100644 packages/paste-icons/src/svg/channels.svg create mode 100644 packages/paste-icons/src/svg/checkbox-checked.svg create mode 100644 packages/paste-icons/src/svg/checkbox-multi.svg create mode 100644 packages/paste-icons/src/svg/checkbox-unchecked.svg create mode 100644 packages/paste-icons/src/svg/clock-regular.svg create mode 100644 packages/paste-icons/src/svg/close.svg create mode 100644 packages/paste-icons/src/svg/collapse-menu.svg create mode 100644 packages/paste-icons/src/svg/collapse.svg create mode 100644 packages/paste-icons/src/svg/collapsed.svg create mode 100644 packages/paste-icons/src/svg/community.svg create mode 100644 packages/paste-icons/src/svg/connect-apps.svg create mode 100644 packages/paste-icons/src/svg/connected-devices.svg create mode 100644 packages/paste-icons/src/svg/console-dash.svg create mode 100644 packages/paste-icons/src/svg/copy.svg create mode 100644 packages/paste-icons/src/svg/debugger-old.svg create mode 100644 packages/paste-icons/src/svg/debugger.svg create mode 100644 packages/paste-icons/src/svg/dev-tools.svg create mode 100644 packages/paste-icons/src/svg/do-not.svg create mode 100644 packages/paste-icons/src/svg/docs.svg create mode 100644 packages/paste-icons/src/svg/download.svg create mode 100644 packages/paste-icons/src/svg/dropdown.svg create mode 100644 packages/paste-icons/src/svg/email.svg create mode 100644 packages/paste-icons/src/svg/exclamation-circle.svg create mode 100644 packages/paste-icons/src/svg/expand-menu.svg create mode 100644 packages/paste-icons/src/svg/expand.svg create mode 100644 packages/paste-icons/src/svg/external-link.svg create mode 100644 packages/paste-icons/src/svg/fax-enabled.svg create mode 100644 packages/paste-icons/src/svg/fax.svg create mode 100644 packages/paste-icons/src/svg/filter.svg create mode 100644 packages/paste-icons/src/svg/flex.svg create mode 100644 packages/paste-icons/src/svg/go-arrow.svg create mode 100644 packages/paste-icons/src/svg/help-book.svg create mode 100644 packages/paste-icons/src/svg/help.svg create mode 100644 packages/paste-icons/src/svg/hide.svg create mode 100644 packages/paste-icons/src/svg/home.svg create mode 100644 packages/paste-icons/src/svg/info.svg create mode 100644 packages/paste-icons/src/svg/information.svg create mode 100644 packages/paste-icons/src/svg/inspiration.svg create mode 100644 packages/paste-icons/src/svg/interconnect.svg create mode 100644 packages/paste-icons/src/svg/ip-messaging.svg create mode 100644 packages/paste-icons/src/svg/keyboard.svg create mode 100644 packages/paste-icons/src/svg/learn.svg create mode 100644 packages/paste-icons/src/svg/line-chart.svg create mode 100644 packages/paste-icons/src/svg/logo.svg create mode 100644 packages/paste-icons/src/svg/lookup.svg create mode 100644 packages/paste-icons/src/svg/messaging.svg create mode 100644 packages/paste-icons/src/svg/mms-enabled.svg create mode 100644 packages/paste-icons/src/svg/more.svg create mode 100644 packages/paste-icons/src/svg/multi-factor-authentication.svg create mode 100644 packages/paste-icons/src/svg/notify.svg create mode 100644 packages/paste-icons/src/svg/off.svg create mode 100644 packages/paste-icons/src/svg/on.svg create mode 100644 packages/paste-icons/src/svg/partners.svg create mode 100644 packages/paste-icons/src/svg/pause-flat.svg create mode 100644 packages/paste-icons/src/svg/pause.svg create mode 100644 packages/paste-icons/src/svg/pencil.svg create mode 100644 packages/paste-icons/src/svg/phone-numbers.svg create mode 100644 packages/paste-icons/src/svg/phone-verification.svg create mode 100644 packages/paste-icons/src/svg/pie-chart.svg create mode 100644 packages/paste-icons/src/svg/play-flat.svg create mode 100644 packages/paste-icons/src/svg/play.svg create mode 100644 packages/paste-icons/src/svg/plugin.svg create mode 100644 packages/paste-icons/src/svg/plus-button.svg create mode 100644 packages/paste-icons/src/svg/products.svg create mode 100644 packages/paste-icons/src/svg/proxy.svg create mode 100644 packages/paste-icons/src/svg/question.svg create mode 100644 packages/paste-icons/src/svg/reset.svg create mode 100644 packages/paste-icons/src/svg/runtime.svg create mode 100644 packages/paste-icons/src/svg/search.svg create mode 100644 packages/paste-icons/src/svg/settings.svg create mode 100644 packages/paste-icons/src/svg/sip-trunking.svg create mode 100644 packages/paste-icons/src/svg/sms-enabled.svg create mode 100644 packages/paste-icons/src/svg/spinner.svg create mode 100644 packages/paste-icons/src/svg/studio.svg create mode 100644 packages/paste-icons/src/svg/success.svg create mode 100644 packages/paste-icons/src/svg/support-lifebuoy.svg create mode 100644 packages/paste-icons/src/svg/support.svg create mode 100644 packages/paste-icons/src/svg/sync.svg create mode 100644 packages/paste-icons/src/svg/table-view.svg create mode 100644 packages/paste-icons/src/svg/talk-to-sales.svg create mode 100644 packages/paste-icons/src/svg/taskrouter.svg create mode 100644 packages/paste-icons/src/svg/templates.svg create mode 100644 packages/paste-icons/src/svg/thumb-tack.svg create mode 100644 packages/paste-icons/src/svg/ticket-history.svg create mode 100644 packages/paste-icons/src/svg/ticket.svg create mode 100644 packages/paste-icons/src/svg/twiml-bins.svg create mode 100644 packages/paste-icons/src/svg/two-factor-authentication.svg create mode 100644 packages/paste-icons/src/svg/upload.svg create mode 100644 packages/paste-icons/src/svg/users.svg create mode 100644 packages/paste-icons/src/svg/video.svg create mode 100644 packages/paste-icons/src/svg/view.svg create mode 100644 packages/paste-icons/src/svg/voice-enabled.svg create mode 100644 packages/paste-icons/src/svg/voice.svg create mode 100644 packages/paste-icons/src/svg/whatsapp.svg create mode 100644 packages/paste-icons/src/svg/wireless.svg create mode 100644 packages/paste-icons/tools/cli.js create mode 100644 packages/paste-icons/tools/iconTemplate.js create mode 100644 packages/paste-icons/tools/listTemplate.js create mode 100644 packages/paste-icons/tools/utils.js create mode 100644 packages/paste-icons/tsconfig.build.json create mode 100644 packages/paste-icons/tsconfig.json create mode 100644 packages/paste-theme-tokens/package.json create mode 100644 packages/paste-theme-tokens/rollup.config.js create mode 100644 packages/paste-theme-tokens/src/default/index.ts create mode 100644 packages/paste-theme-tokens/src/index.ts create mode 100644 packages/paste-theme-tokens/src/sendgrid/index.ts create mode 100644 packages/paste-theme-tokens/src/types/index.ts create mode 100644 packages/paste-theme-tokens/tsconfig.build.json create mode 100644 packages/paste-theme-tokens/tsconfig.json create mode 100644 packages/paste-theme/README.md create mode 100644 packages/paste-theme/__tests__/themeConsumer.spec.tsx create mode 100644 packages/paste-theme/__tests__/themeProvider.spec.tsx create mode 100644 packages/paste-theme/__tests__/useTheme.spec.tsx create mode 100644 packages/paste-theme/__tests__/withTheme.spec.tsx create mode 100644 packages/paste-theme/package.json create mode 100644 packages/paste-theme/rollup.config.js create mode 100644 packages/paste-theme/src/index.tsx create mode 100644 packages/paste-theme/src/themeConsumer.tsx create mode 100644 packages/paste-theme/src/themeProvider.tsx create mode 100644 packages/paste-theme/src/useTheme.ts create mode 100644 packages/paste-theme/src/withTheme.ts create mode 100644 packages/paste-theme/stories/index.stories.tsx create mode 100644 packages/paste-theme/tsconfig.build.json create mode 100644 packages/paste-theme/tsconfig.json create mode 100644 packages/paste-website/.eslintrc create mode 100644 packages/paste-website/README.md create mode 100644 packages/paste-website/gatsby-config.js create mode 100644 packages/paste-website/package.json create mode 100644 packages/paste-website/src/components/Header/index.tsx create mode 100644 packages/paste-website/src/components/Header/styled-header.ts create mode 100644 packages/paste-website/src/components/component-overview-table/index.tsx create mode 100644 packages/paste-website/src/components/default-site-wrapper/index.tsx create mode 100644 packages/paste-website/src/components/mdx/index.tsx create mode 100644 packages/paste-website/src/components/mdx/mdx-provider/index.tsx create mode 100644 packages/paste-website/src/components/tokens-list/index.tsx create mode 100644 packages/paste-website/src/pages/components/button/index.mdx create mode 100644 packages/paste-website/src/pages/components/index.mdx create mode 100644 packages/paste-website/src/pages/getting-started/index.mdx create mode 100644 packages/paste-website/src/pages/index.tsx create mode 100644 packages/paste-website/src/pages/tokens/index.mdx create mode 100644 packages/paste-website/src/templates/components.tsx create mode 100644 packages/paste-website/src/templates/index.tsx create mode 100644 packages/paste-website/static/favicon.ico create mode 100644 packages/paste-website/tsconfig.json create mode 100644 packages/paste-website/types/index.d.ts create mode 100644 tools/build/clean-repo.js create mode 100644 tools/build/pre-build.js create mode 100644 tools/build/pre-test.js create mode 100644 tools/utils/getPackageInfo.js create mode 100644 tools/utils/getRepoPackages.js create mode 100644 tools/utils/removeNodeModules.js create mode 100644 tools/utils/removeTsconfigBuildFiles.js create mode 100644 tools/utils/removeYarnLockfile.js create mode 100644 tools/utils/runCmd.js create mode 100644 tools/utils/sortObjectByKey.js create mode 100644 tools/utils/updatePackageCache.js create mode 100644 tools/utils/updatePackageReferences.js create mode 100644 tsconfig.json create mode 100644 types/index.d.ts diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000..e491c77ccd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,21 @@ +# editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.{tf,tfvars}] +indent_size = 2 + +[makefile] +indent_size = 4 +indent_style = tab + +[*.sh] +indent_size = 4 +indent_style = tab \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..25bf6e1d1e --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +/node_modules/** +/bower_components/** +/packages/**/node_modules/** +**/lib/** +rollup.config.js \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000000..7954d87b65 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,79 @@ +// Based on https://github.com/iamturns/create-exposed-app/blob/master/.eslintrc.js +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: './tsconfig.json', + }, + plugins: ['@typescript-eslint', 'eslint-comments', 'jest', 'promise', 'unicorn', 'emotion'], + extends: [ + 'airbnb-typescript', + 'plugin:@typescript-eslint/recommended', + 'plugin:eslint-comments/recommended', + 'plugin:jest/recommended', + 'plugin:promise/recommended', + 'plugin:unicorn/recommended', + 'prettier', + 'prettier/react', + 'prettier/@typescript-eslint', + ], + env: { + node: true, + browser: true, + jest: true, + }, + rules: { + // Too restrictive, writing ugly code to defend against a very unlikely scenario: https://eslint.org/docs/rules/no-prototype-builtins + 'no-prototype-builtins': 'off', + // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html + 'import/prefer-default-export': 'off', + 'import/no-default-export': 'error', + // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md + 'react/destructuring-assignment': 'off', + // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904 + 'react/jsx-filename-extension': 'off', + // Use function hoisting to improve code readability + 'no-use-before-define': ['error', {functions: false, classes: true, variables: true}], + // Makes no sense to allow type inferrence for expression parameters, but require typing the response + '@typescript-eslint/explicit-function-return-type': [ + 'error', + {allowExpressions: true, allowTypedFunctionExpressions: true}, + ], + '@typescript-eslint/no-use-before-define': [ + 'error', + {functions: false, classes: true, variables: true, typedefs: true}, + ], + // Common abbreviations are known and readable + 'unicorn/prevent-abbreviations': 'off', + // We don't really have a style yet. To be discussed + // https://github.com/sindresorhus/eslint-plugin-unicorn/blob/master/docs/rules/filename-case.md + 'unicorn/filename-case': 'off', + // This rule tells people to do something (import foo = require('foo')) which doesn't work + // with babel compiled typescript. + '@typescript-eslint/no-var-requires': 'off', + // Enforce template strings for styles over objects for consistent codebase + 'emotion/syntax-preference': [2, 'string'], + // PropTypes are useless with typescript + 'react/prop-types': 'off', + // Avoid having to redefine story deps for this monorepo + // https://github.com/benmosher/eslint-plugin-import/issues/458#issuecomment-468235671 + 'import/no-extraneous-dependencies': context => [ + 'error', + { + devDependencies: true, + packageDir: [context.getFilename(), __dirname], + }, + ], + + 'no-useless-constructor': 'off', + eqeqeq: ['error', 'smart'], + 'no-plusplus': 'off', + 'consistent-return': 'off', + }, + settings: { + 'import/resolver': { + node: { + extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'], + }, + }, + }, +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..e87dc34a53 --- /dev/null +++ b/.gitignore @@ -0,0 +1,78 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# gatsby files +.cache/ +public + +# next.js build output +.next + +# Apple gunk +.DS_Store + +.jest-coverage +.jest-cache +**/lib/* +**/dist/* +packages/**/docs +**/paste-icons/react/* +*.tsbuildinfo +package-lock.json +tools/.cache/packages.json diff --git a/.jest/resolver.js b/.jest/resolver.js new file mode 100644 index 0000000000..4276306e22 --- /dev/null +++ b/.jest/resolver.js @@ -0,0 +1,53 @@ +const cachedPackages = require('../tools/.cache/packages.json'); + +/** + * Holds information about every @paste package in our repo + * Our cache doesn't include the entry points in the location, so + * we loop over the packages, get the entry point from the 'main' field, + * and update the location property. + * + * Shape: + * { + * '@paste/button': { + * name: '@paste/button', + version: '0.1.2', + private: false, + location: '/Users/username/paste/packages/paste-core/components/button/dist/index.js' + } + * } + */ +const keyedPackages = cachedPackages.reduce((acc, currentPackage) => { + const packageJson = require(`${currentPackage.location}/package.json`); + + // If there's no main entrypoint, don't update the location path. + // Note: the icons package doesn't have a main entrypoint + if (packageJson.main == null) { + acc[currentPackage.name] = currentPackage; + } else { + // Make sure to set the location to the dist/main entrypoint. + acc[currentPackage.name] = { + ...currentPackage, + location: `${currentPackage.location}/${packageJson.main}`, + }; + } + return acc; +}, {}); + +/** + * We're creating our own module resolver for jest because it is having a + * very hard time finding our monorepo packages. When we import a `@paste` + * package we use our own module resolution, otherwise we use the default + * node one. + * + * @param {string} package + * @param {*} details + */ +function customResolver(package, details) { + if (package.includes('@paste/')) { + return keyedPackages[package].location; + } + + return details.defaultResolver(package, details); +} + +module.exports = customResolver; diff --git a/.jest/setupFilesAfterEnv.js b/.jest/setupFilesAfterEnv.js new file mode 100644 index 0000000000..0b03579a9c --- /dev/null +++ b/.jest/setupFilesAfterEnv.js @@ -0,0 +1,7 @@ +const emotion = require('emotion'); +const {createSerializer} = require('jest-emotion'); +const Enzyme = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); + +expect.addSnapshotSerializer(createSerializer(emotion)); +Enzyme.configure({adapter: new Adapter()}); diff --git a/.jest/transform.js b/.jest/transform.js new file mode 100644 index 0000000000..d91f999c1f --- /dev/null +++ b/.jest/transform.js @@ -0,0 +1,25 @@ +const babelOptions = { + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + '@babel/typescript', + '@babel/react', + [ + '@emotion/babel-preset-css-prop', + { + sourceMap: false, + autoLabel: true, + labelFormat: '[local]', + cssPropOptimization: false, + }, + ], + ], + plugins: ['macros', '@babel/proposal-class-properties', '@babel/proposal-object-rest-spread'], +}; +module.exports = require('babel-jest').createTransformer(babelOptions); diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..ac961eebbd --- /dev/null +++ b/.prettierignore @@ -0,0 +1,9 @@ +*.md +*.mdx +*.json +docs +lib/ +dist/ +public/ +__IconList.tsx +*.d.ts \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..e7980af7f2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,17 @@ +{ + "printWidth": 120, + "trailingComma": "es5", + "bracketSpacing": false, + "singleQuote": true, + "jsxBracketSameLine": false, + "tabWidth": 2, + "overrides": [ + { + "files": "*.yml", + "options": { + "parser": "yaml", + "singleQuote": false + } + } + ] +} diff --git a/.storybook/addons.js b/.storybook/addons.js new file mode 100644 index 0000000000..306a4d0192 --- /dev/null +++ b/.storybook/addons.js @@ -0,0 +1,5 @@ +import '@storybook/addon-links/register'; +/* Ordering of imports here sets the order of tabs in the UI */ +import '@storybook/addon-knobs/register'; +import 'storybook-readme/register'; +import '@storybook/addon-actions/register'; diff --git a/.storybook/babel.config.js b/.storybook/babel.config.js new file mode 100644 index 0000000000..bd620a12ab --- /dev/null +++ b/.storybook/babel.config.js @@ -0,0 +1,30 @@ +const getPresets = isDev => [ + 'env', + '@babel/preset-react', + '@babel/preset-typescript', + [ + // Automatically includes the 'emotion' preset. + '@emotion/babel-preset-css-prop', + { + sourceMap: isDev, + autoLabel: isDev, + labelFormat: '[local]', + cssPropOptimization: !isDev, + }, + ], +]; + +const BASE_PLUGINS = ['macros', '@babel/proposal-class-properties', '@babel/proposal-object-rest-spread']; + +module.exports = { + env: { + production: { + presets: getPresets(true), + plugins: BASE_PLUGINS, + }, + development: { + presets: getPresets(false), + plugins: BASE_PLUGINS, + }, + }, +}; diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 0000000000..3a1d98bbfe --- /dev/null +++ b/.storybook/config.js @@ -0,0 +1,26 @@ +const {addDecorator, addParameters, configure} = require('@storybook/react'); +const {withThemeProvider} = require('./withThemePovider'); +const requireContext = require('require-context.macro'); +import {addReadme} from 'storybook-readme'; + +addParameters({ + isFullScreen: false, + showNav: true, + showPanel: true, + panelPosition: 'bottom', + sortStoriesByKind: false, + hierarchySeparator: /\/|\./, + hierarchyRootSeparator: /\|/, + sidebarAnimations: true, + enableShortcuts: true, +}); +addDecorator(withThemeProvider); +addDecorator(addReadme); + +const req = requireContext('../packages/', true, /\.stories.tsx?$/); + +function loadStories() { + req.keys().forEach(filename => req(filename)); +} + +configure(loadStories, module); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000000..6aa7003b89 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1 @@ + diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 0000000000..221f2f4d56 --- /dev/null +++ b/.storybook/webpack.config.js @@ -0,0 +1,32 @@ +const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin'); + +module.exports = ({config}) => { + // HACK-FIX: Exclude already-compiled `/lib` folders from Storybook's babel-loader + // Babel-loader is assumed to be always at position 0 because it historically has been. + // #fragilehacks + const babelLoader = config.module.rules[0]; + babelLoader.exclude.push(/\/lib\//); + + // To make working with Typescript files possible + config.module.rules.push({ + test: /\.(ts|tsx)$/, + exclude: /(node_modules|bower_components)/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [['react-app', {flow: false, typescript: true}]], + }, + }, + ], + }); + + config.resolve.extensions.push('.ts', '.tsx'); + + // To make Storybook build from src files + const customPlugins = [new DirectoryNamedWebpackPlugin({honorPackage: ['main:dev', 'main']})]; + config.resolve.plugins = + config.resolve.plugins == null ? customPlugins : [...config.resolve.plugins, ...customPlugins]; + + return config; +}; diff --git a/.storybook/withThemePovider.js b/.storybook/withThemePovider.js new file mode 100644 index 0000000000..294267a9bf --- /dev/null +++ b/.storybook/withThemePovider.js @@ -0,0 +1,6 @@ +import * as React from 'react'; +import {Theme} from '@paste/theme'; + +const withThemeProvider = storyFn => {storyFn()}; + +export {withThemeProvider}; diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..3d4e15bb70 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.formatOnSave": true, + "search.exclude": { + "**/dist": true, + "**/docs": true + } +} \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..73cbda3198 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,30 @@ +# Contributing + +## Organization + +- All top level packages must be prefixed by the word `paste-` to distinguish them from sub-folders. +- All system level packages should be placed at the top level (icons, theme, website) +- All primitive elements should be placed within the `paste-core` folder. + +## Package Requirements + +![Image of good structure](https://cdn.discordapp.com/attachments/293855810063302657/599371250925699072/unknown.png) + +- [ ] a `package.json` file with the following sub-requirements: + - The following scripts: `build, build:dev, clean, type-check, prepublishOnly`. + - Author must be `Twilio Inc.` + - You must define the `main`, `module`, `types`, and `main:dev` (src entrypoint file for storybook to find and hot-reload on changes) + - You package should be sideEffects free (`"sideEffects": false,`). A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export. This allows tree-shaking to work. [Additional reading](https://webpack.js.org/guides/tree-shaking/). + - You must define the `"files"` to be simply `"dist"`. This way no source files get downloaded by consumers of the package. +- [ ] a `tsconfig.json` file (they're all similar). +- [ ] a `tsconfig.build.json` file (they're all similar and the build tools manage the "references" upkeep so you don't have to). +- [ ] a `src/` folder with all your package's code. +- [ ] a `stories/` folder with your storybook stories named as `*.stories.ts(x)`. Give your stories knobs and make them cover all use-cases. +- [ ] a `__tests__` folder with your package's tests. +- [ ] a `rollup.config.js` file defining how to build the package. Similar to other packages usually. +- [ ] a `CHANGELOG.md`. Note: this is kept up to date automatically so you don't need to manually edit it. +- [ ] a `README.md` to detail more information about working on that package's code, if necessary. + +## Standard Operating Procedures + +All contributions must abide by our [Standard Operating Procedures](https://github.com/twilio-labs/paste/blob/master/STANDARD_OPERATING_PROCEDURES.md). This helps us mitigate errors caused by oversight or forgetfulness by leaning on lessons learned through past mistakes. diff --git a/README.md b/README.md new file mode 100644 index 0000000000..efabb19109 --- /dev/null +++ b/README.md @@ -0,0 +1,46 @@ +# Paste - Twilio Design System + +Component playground: TODO link and host + +## Getting started + +``` +yarn +yarn build +yarn start +``` + +Build things 🎉 + +## To build docs + +``` +yarn build-docs +``` + +Then commit + push the changes + +## Contributing + +[Please check the the contribution docs](https://github.com/twilio-labs/paste/blob/master/CONTRIBUTING.md) + +## Command List + +| Command | Description | +| -------------------- | ------------------------------------------------------------------------------------------------------------------------ | +| yarn bootstrap | Symlinks all the local packages together so you can import package names and work with them locally. | +| yarn start | Builds and starts storybook and the design tokens in dev mode | +| yarn start:storybook | Builds and starts storybook, the dev playground | +| yarn start:tokens | Builds and starts design tokens in dev mode. Loads a browsersync server and live reloads token changed in the token page | +| yarn clean | Cleans the directories of node modules and built files | +| yarn prettier | Checks for un-prettier'd files in the repo. For pre-push hook and CI. | +| yarn prettier-clean | Automatically fixes all prettier issues in the repo. | +| yarn test | Runs all the Jest tests, including snapshot testing. | +| yarn test:coverage | Similar to `yarn test`, but with coverage reporting as specified in the root `package.json` | +| yarn lint | Lints the codebase and spits out any errors. | +| yarn type-check | Runs TS type-checker against the codebase and spits out any errors. Useful since we use babel at runtime with storybook. | +| yarn build:docs | Builds Storybook into static assets and places them in the /docs folder. For Github Pages hosting. | +| yarn build:tokens | Builds the design tokens package under paste-tokens/ | +| yarn build:dev | Builds the compiled JS into `/dist` in dev mode | +| yarn build | Builds the compiled JS into `/dist` | +| yarn pre-push | A series of commands that are run as a pre-commit hook. | diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000000..7c670617b3 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,30 @@ +const getPresets = isDev => [ + '@babel/env', + '@babel/preset-react', + '@babel/preset-typescript', + [ + // Automatically includes the 'emotion' preset. + '@emotion/babel-preset-css-prop', + { + sourceMap: isDev, + autoLabel: isDev, + labelFormat: '[local]', + cssPropOptimization: !isDev, + }, + ], +]; + +const BASE_PLUGINS = ['macros', '@babel/proposal-class-properties', '@babel/proposal-object-rest-spread']; + +module.exports = { + env: { + production: { + presets: getPresets(true), + plugins: BASE_PLUGINS, + }, + development: { + presets: getPresets(false), + plugins: BASE_PLUGINS, + }, + }, +}; diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000000..d5ace43ec2 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,24 @@ +module.exports = { + verbose: true, + testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', + testEnvironment: 'jsdom', + testPathIgnorePatterns: ['/packages/(?:.+?)/dist/', '/packages/(?:.+?)/.cache/'], + cacheDirectory: '.jest-cache', + coverageDirectory: '.jest-coverage', + coveragePathIgnorePatterns: ['/packages/(?:.+?)/dist/'], + coverageReporters: ['html', 'text'], + coverageThreshold: { + global: { + branches: 100, + functions: 100, + lines: 100, + statements: 100, + }, + }, + transformIgnorePatterns: ['node_modules/'], + resolver: '/.jest/resolver.js', + transform: { + '^.+\\.tsx?$': '/.jest/transform.js', + }, + setupFilesAfterEnv: ['/.jest/setupFilesAfterEnv.js'], +}; diff --git a/lerna.json b/lerna.json new file mode 100644 index 0000000000..54f49cc760 --- /dev/null +++ b/lerna.json @@ -0,0 +1,6 @@ +{ + "packages": ["packages/**"], + "version": "independent", + "npmClient": "yarn", + "useWorkspaces": true +} diff --git a/package.json b/package.json new file mode 100644 index 0000000000..6db77221a0 --- /dev/null +++ b/package.json @@ -0,0 +1,119 @@ +{ + "name": "paste", + "private": true, + "version": "0.0.1", + "main": "index.js", + "author": "Twilio Inc.", + "license": "MIT", + "workspaces": [ + "packages/**" + ], + "types": "./types/index.d.ts", + "scripts": { + "bootstrap": "lerna bootstrap", + "prestart": "yarn prebuild", + "start": "yarn build:icons && concurrently \"yarn:start:*\"", + "start:storybook": "start-storybook", + "start:tokens": "yarn workspace @paste/design-tokens build:dev", + "start:icons": "yarn workspace @paste/icons watch", + "start:website": "yarn workspace @paste/website develop", + "prebuild": "node ./tools/build/pre-build.js", + "build": "lerna run build", + "build:dev": "yarn prebuild && yarn build:tokens && lerna run build:dev", + "build:tokens": "yarn workspace @paste/design-tokens tokens", + "build:icons": "yarn workspace @paste/icons build", + "build:docs": "build-storybook -c .storybook -o docs", + "build:website": "yarn workspace @paste/website build", + "pre-push": "yarn build && yarn lint && yarn test && yarn prettier", + "release": "yarn lerna publish --skip-npm", + "clean": "node ./tools/build/clean-repo.js && lerna clean --yes && lerna run clean && yarn bootstrap", + "pre-test": "node ./tools/build/pre-test.js", + "test": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest", + "test:coverage": "yarn pre-test && node --experimental-worker ./node_modules/.bin/jest --coverage", + "prettier": "prettier --list-different '{.storybook,packages}/**/*.{ts,tsx}'", + "prettier-clean": "prettier --write '{.storybook,packages}/**/*.{ts,tsx}'", + "lint": "eslint ./packages/**/*.ts ./packages/**/*.tsx ", + "type-check": "lerna run type-check" + }, + "dependencies": { + "@emotion/core": "^10.0.14", + "@emotion/styled": "^10.0.14", + "@paste/theme-tokens": "^0.2.1", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-uid": "^2.2.0", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "@babel/cli": "^7.5.0", + "@babel/core": "^7.5.0", + "@babel/plugin-proposal-class-properties": "^7.5.0", + "@babel/plugin-proposal-object-rest-spread": "^7.5.2", + "@babel/preset-env": "^7.5.2", + "@babel/preset-react": "^7.0.0", + "@babel/preset-typescript": "^7.3.3", + "@babel/register": "^7.4.4", + "@emotion/babel-preset-css-prop": "^10.0.14", + "@emotion/core": "^10.0.14", + "@expo/spawn-async": "^1.5.0", + "@storybook/addon-actions": "^5.1.9", + "@storybook/addon-info": "^5.1.9", + "@storybook/addon-knobs": "^5.1.9", + "@storybook/addon-links": "^5.1.9", + "@storybook/addon-storyshots": "^5.1.9", + "@storybook/addons": "^5.1.9", + "@storybook/react": "^5.1.9", + "@types/enzyme": "^3.10.1", + "@types/jest": "^24.0.15", + "@types/react": "^16.8.23", + "@types/react-dom": "^16.8.4", + "@types/react-test-renderer": "^16.8.2", + "@types/storybook__addon-actions": "^3.4.3", + "@types/storybook__addon-info": "^4.1.2", + "@types/storybook__addon-knobs": "^5.0.2", + "@types/storybook__react": "^4.0.2", + "@types/styled-system": "^4.1.0", + "@types/webpack": "^4.4.34", + "@types/webpack-env": "^1.13.9", + "@typescript-eslint/eslint-plugin": "^1.11.0", + "@typescript-eslint/parser": "^1.11.0", + "babel-loader": "^8.0.6", + "babel-plugin-macros": "^2.6.1", + "chalk": "^2.4.2", + "concurrently": "^4.1.1", + "cross-env": "^5.2.0", + "directory-named-webpack-plugin": "^4.0.1", + "enzyme": "^3.10.0", + "enzyme-adapter-react-16": "^1.14.0", + "eslint": "^5.16.0", + "eslint-config-airbnb-typescript": "^4.0.0", + "eslint-config-prettier": "^6.0.0", + "eslint-plugin-emotion": "^10.0.14", + "eslint-plugin-eslint-comments": "^3.1.2", + "eslint-plugin-import": "^2.18.0", + "eslint-plugin-jest": "^22.7.2", + "eslint-plugin-jsx-a11y": "^6.2.3", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-react": "^7.14.2", + "eslint-plugin-unicorn": "^9.1.1", + "husky": "^3.0.0", + "jest": "^24.8.0", + "jest-emotion": "^10.0.14", + "lerna": "^3.15.0", + "lodash": "^4.17.14", + "precise-commits": "^1.0.2", + "prettier": "^1.18.2", + "react-test-renderer": "^16.8.6", + "require-context.macro": "^1.0.4", + "shelljs": "^0.8.3", + "storybook-readme": "^5.0.5", + "typescript": "^3.5.2", + "webpack": "^4.35.3" + }, + "husky": { + "hooks": { + "pre-commit": "precise-commits", + "pre-push": "yarn pre-push" + } + } +} diff --git a/packages/paste-core/components/accordion/package.json b/packages/paste-core/components/accordion/package.json new file mode 100644 index 0000000000..24aa92a23d --- /dev/null +++ b/packages/paste-core/components/accordion/package.json @@ -0,0 +1,5 @@ +{ + "name": "@paste/accordion", + "status": "backlog", + "version": "0.0.0" +} diff --git a/packages/paste-core/components/anchor/README.md b/packages/paste-core/components/anchor/README.md new file mode 100644 index 0000000000..9b45038304 --- /dev/null +++ b/packages/paste-core/components/anchor/README.md @@ -0,0 +1,29 @@ +# Anchor + +## Installation + +``` +yarn add @paste/anchor +``` + +## Usage + +```js +import {Anchor} from '@paste/anchor'; + + + Link Text + +``` + +### Props + +| Prop | Type | Description | Default | +| -------------- | -------------------------------------- | ----------------------------------------------------------------------------------- | --------- | +| href? | string | A URL to route to. Required. | null | +| tabindex? | AnchorTabIndexes | '0', '-1' | null | +| target? | AnchorTargets | '_self', '_blank', '_parent', '_top'. If external href, defaults to '_blank'. Can be overwritten. | null | +| rel? | string | Sets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten. | false | +| onClick? | (event: React.MouseEvent) | | null | +| onFocus? | (event: React.FocusEvent) | | null | +| onBlur? | (event: React.FocusEvent) | | null | diff --git a/packages/paste-core/components/anchor/package.json b/packages/paste-core/components/anchor/package.json new file mode 100644 index 0000000000..391f822215 --- /dev/null +++ b/packages/paste-core/components/anchor/package.json @@ -0,0 +1,40 @@ +{ + "name": "@paste/anchor", + "version": "0.1.3", + "description": "Twilio's Anchor component", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -cw --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/core": "^10.0.10", + "@emotion/styled": "^10.0.10", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/components/anchor/rollup.config.js b/packages/paste-core/components/anchor/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/components/anchor/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/components/anchor/src/index.tsx b/packages/paste-core/components/anchor/src/index.tsx new file mode 100644 index 0000000000..eda04b8458 --- /dev/null +++ b/packages/paste-core/components/anchor/src/index.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import {StyledLink} from './styles'; +import {AnchorProps} from './types'; + +const EXTERNAL_LINK_REGEX = /^(https?:)[^\s]*$/; +const EXTERNAL_TARGET_DEFAULT = '_blank'; +const EXTERNAL_REL_DEFAULT = 'noreferrer noopener'; + +const isExternalUrl = (url: string): boolean => EXTERNAL_LINK_REGEX.test(url); + +const handlePropValidation = ({href, tabIndex, children}: AnchorProps): void => { + const hasHref = href != null && href !== ''; + const hasTabIndex = tabIndex != null; + + if (!hasHref) { + throw new Error( + `[Paste: Anchor] Missing href prop for anchor. Maybe you're looking for the [Paste: Button] component.` + ); + } + + if (children == null) { + throw new Error(`[Paste: Anchor] Must have non-null children.`); + } + + if (hasTabIndex && !(tabIndex === 0 || tabIndex === -1)) { + throw new Error(`[Paste: Anchor] TabIndex must be 0 or -1.`); + } +}; + +const Anchor: React.FC = props => { + handlePropValidation(props); + + return ( + + {props.children} + + ); +}; + +export {Anchor}; diff --git a/packages/paste-core/components/anchor/src/styles.ts b/packages/paste-core/components/anchor/src/styles.ts new file mode 100644 index 0000000000..52acbab201 --- /dev/null +++ b/packages/paste-core/components/anchor/src/styles.ts @@ -0,0 +1,28 @@ +import styled from '@emotion/styled'; +import {themeGet} from 'styled-system'; + +// Link +export const StyledLink = styled.a` + color: ${themeGet('textColors.colorTextLink')}; + text-decoration: none; + outline: none; + + &:hover { + color: ${themeGet('textColors.colorTextLinkHover')}; + text-decoration: underline; + } + + &:focus, + &:active { + box-shadow: 0 0 0 4px rgba(0, 117, 195, 0.5); + text-decoration: underline; + } + + &:focus { + color: ${themeGet('textColors.colorTextLinkFocus')}; + } + + &:active { + color: ${themeGet('textColors.colorTextLinkActive')}; + } +`; diff --git a/packages/paste-core/components/anchor/src/types.ts b/packages/paste-core/components/anchor/src/types.ts new file mode 100644 index 0000000000..9ffb9fcc14 --- /dev/null +++ b/packages/paste-core/components/anchor/src/types.ts @@ -0,0 +1,17 @@ +export type AnchorTargets = '_self' | '_blank' | '_parent' | '_top'; +export type AnchorTabIndexes = 0 | -1; + +export interface AnchorProps { + id?: never; + className?: never; + href: string; + tabIndex?: AnchorTabIndexes; + target?: AnchorTargets; + rel?: string; + + children: React.ReactNode; + + onClick?(event: React.MouseEvent): void; + onFocus?(event: React.FocusEvent): void; + onBlur?(event: React.FocusEvent): void; +} diff --git a/packages/paste-core/components/anchor/stories/index.stories.tsx b/packages/paste-core/components/anchor/stories/index.stories.tsx new file mode 100644 index 0000000000..6308ee11bb --- /dev/null +++ b/packages/paste-core/components/anchor/stories/index.stories.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {action} from '@storybook/addon-actions'; +import {withKnobs, select, text} from '@storybook/addon-knobs'; +import {Anchor} from '../src'; +import {AnchorTargets, AnchorTabIndexes} from '../src/types'; + +const AnchorTargetOptions = ['_self', '_blank', '_parent', '_top']; +const AnchorTabIndexOptions = [0, -1]; + +storiesOf('Components|Anchor', module) + .addDecorator(withKnobs) + .add('Default', () => { + const tabIndexOptions = select('tabIndex', AnchorTabIndexOptions, 0) as AnchorTabIndexes; + const targetOptions = select('target', AnchorTargetOptions, '_self') as AnchorTargets; + return ( + + {text('children', 'I am a text link')} + + ); + }); diff --git a/packages/paste-core/components/anchor/tsconfig.build.json b/packages/paste-core/components/anchor/tsconfig.build.json new file mode 100644 index 0000000000..e36e5dd8d1 --- /dev/null +++ b/packages/paste-core/components/anchor/tsconfig.build.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [] +} \ No newline at end of file diff --git a/packages/paste-core/components/anchor/tsconfig.json b/packages/paste-core/components/anchor/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/components/anchor/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/components/button/README.md b/packages/paste-core/components/button/README.md new file mode 100644 index 0000000000..628c1a3807 --- /dev/null +++ b/packages/paste-core/components/button/README.md @@ -0,0 +1,58 @@ +# Button + +## Installation + +``` +yarn add @paste/button +``` + +## Usage + +```js +import {Button} from '@paste/button'; + +; +``` + +### Props + +| Prop | Type | Description | Default | +| -------------- | -------------------------------------- | ----------------------------------------------------------------------------------- | --------- | +| type? | string | If the button is inside a `
`: use 'submit'. Otherwise use 'button' (default). | 'button' | +| as? | string | The HTML tag to replace the default ` + ); + }) + .add('Icon and Text', () => { + const tabIndexOptions = select('tabIndex', ButtonTabIndexOptions, 0) as ButtonTabIndexes; + return ( + + ); + }) + .add('Icon only', () => { + const tabIndexOptions = select('tabIndex', ButtonTabIndexOptions, 0) as ButtonTabIndexes; + return ( + + ); + }) + .add('All buttons', () => { + const size = select('size', ButtonSizeOptions, 'default') as ButtonSizes; + return ( + +
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+ + ); + }); diff --git a/packages/paste-core/components/button/tsconfig.build.json b/packages/paste-core/components/button/tsconfig.build.json new file mode 100644 index 0000000000..329f8e7d0d --- /dev/null +++ b/packages/paste-core/components/button/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../spinner" + } + ] +} \ No newline at end of file diff --git a/packages/paste-core/components/button/tsconfig.json b/packages/paste-core/components/button/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/components/button/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/components/card/package.json b/packages/paste-core/components/card/package.json new file mode 100644 index 0000000000..15f0ca8c5e --- /dev/null +++ b/packages/paste-core/components/card/package.json @@ -0,0 +1,37 @@ +{ + "name": "@paste/card", + "version": "0.1.2", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "react": ">= 16.0.0", + "react-dom": ">= 16.0.0" + }, + "devDependencies": { + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/components/card/rollup.config.js b/packages/paste-core/components/card/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/components/card/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/components/card/src/index.tsx b/packages/paste-core/components/card/src/index.tsx new file mode 100644 index 0000000000..a6855aa1e5 --- /dev/null +++ b/packages/paste-core/components/card/src/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; + +interface CardTitleProps { + children: React.ReactNode; +} +const CardTitle: React.FunctionComponent = ({children}) =>

{children}

; + +interface CardBodyProps { + children: React.ReactNode; +} +const CardBody: React.FunctionComponent = ({children}) =>
{children}
; + +interface CardProps { + onClick: () => void; + children: React.ReactNode; +} + +const Card: React.FunctionComponent = ({children, onClick}) => ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-tabindex + +); + +export {Card, CardBody, CardTitle}; diff --git a/packages/paste-core/components/card/stories/index.stories.tsx b/packages/paste-core/components/card/stories/index.stories.tsx new file mode 100644 index 0000000000..4c3ae8d859 --- /dev/null +++ b/packages/paste-core/components/card/stories/index.stories.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {action} from '@storybook/addon-actions'; +import {Card, CardTitle, CardBody} from '../src'; + +storiesOf('Components|Card', module).add('Default', () => ( + + Title + Body + +)); diff --git a/packages/paste-core/components/card/tsconfig.build.json b/packages/paste-core/components/card/tsconfig.build.json new file mode 100644 index 0000000000..e36e5dd8d1 --- /dev/null +++ b/packages/paste-core/components/card/tsconfig.build.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [] +} \ No newline at end of file diff --git a/packages/paste-core/components/card/tsconfig.json b/packages/paste-core/components/card/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/components/card/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/components/heading/package.json b/packages/paste-core/components/heading/package.json new file mode 100644 index 0000000000..59a39430eb --- /dev/null +++ b/packages/paste-core/components/heading/package.json @@ -0,0 +1,42 @@ +{ + "name": "@paste/heading", + "version": "0.3.2", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/core": "^10.0.10", + "@emotion/styled": "^10.0.10", + "@paste/text": "^0.3.1", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "@paste/text": "^0.3.1", + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/components/heading/rollup.config.js b/packages/paste-core/components/heading/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/components/heading/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/components/heading/src/index.tsx b/packages/paste-core/components/heading/src/index.tsx new file mode 100644 index 0000000000..752b241f19 --- /dev/null +++ b/packages/paste-core/components/heading/src/index.tsx @@ -0,0 +1,75 @@ +import * as React from 'react'; +import {Text} from '@paste/text'; + +export type asTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label'; +export type HeadingStyle = + | 'headingStyle10' + | 'headingStyle20' + | 'headingStyle30' + | 'headingStyle40' + | 'headingStyle50' + | 'headingStyle60'; + +interface HeadingProps { + as: asTags; + headingStyle?: HeadingStyle; +} + +function getHeadingStyles(headingStyle?: HeadingStyle): {} { + switch (headingStyle) { + case 'headingStyle60': + return { + fontSize: 'fontSize90', + fontWeight: 'fontWeightNormal', + lineHeight: 'lineHeight70', + }; + case 'headingStyle50': + return { + fontSize: 'fontSize80', + fontWeight: 'fontWeightNormal', + lineHeight: 'lineHeight40', + }; + case 'headingStyle40': + return { + fontSize: 'fontSize70', + fontWeight: 'fontWeightSemiBold', + lineHeight: 'lineHeight40', + }; + case 'headingStyle30': + return { + fontSize: 'fontSize60', + fontWeight: 'fontWeightSemiBold', + lineHeight: 'lineHeight30', + }; + case 'headingStyle20': + return { + fontSize: 'fontSize50', + fontWeight: 'fontWeightSemiBold', + lineHeight: 'lineHeight30', + }; + case 'headingStyle10': + return { + fontSize: 'fontSize30', + fontWeight: 'fontWeightSemiBold', + lineHeight: 'lineHeight20', + }; + default: + return { + fontSize: 'fontSize80', + lineHeight: 'lineHeight40', + }; + } +} + +const Heading: React.FC = ({as, headingStyle, children}) => ( + + {children} + +); + +Heading.defaultProps = { + as: 'h2', + headingStyle: 'headingStyle60', +}; + +export {Heading}; diff --git a/packages/paste-core/components/heading/stories/index.stories.tsx b/packages/paste-core/components/heading/stories/index.stories.tsx new file mode 100644 index 0000000000..7d5a3244ee --- /dev/null +++ b/packages/paste-core/components/heading/stories/index.stories.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {withKnobs, text, select} from '@storybook/addon-knobs'; +import {Heading, HeadingStyle, asTags} from '../src'; + +const headingStyleOptions = [ + 'headingStyle10', + 'headingStyle20', + 'headingStyle30', + 'headingStyle40', + 'headingStyle50', + 'headingStyle60', +]; + +storiesOf('Components|Heading', module) + .addDecorator(withKnobs) + .add('Default', () => { + const asOptions = text('as', 'h2') as asTags; + const headingStyleValue = select('headingStyle', headingStyleOptions, 'headingStyle60') as HeadingStyle; + return ( + + I am a Very Large Heading + + ); + }); diff --git a/packages/paste-core/components/heading/tsconfig.build.json b/packages/paste-core/components/heading/tsconfig.build.json new file mode 100644 index 0000000000..bffb933c08 --- /dev/null +++ b/packages/paste-core/components/heading/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../../utilities/text" + } + ] +} \ No newline at end of file diff --git a/packages/paste-core/components/heading/tsconfig.json b/packages/paste-core/components/heading/tsconfig.json new file mode 100644 index 0000000000..ce7eadd036 --- /dev/null +++ b/packages/paste-core/components/heading/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"], + "references": [{"path": "../../utilities/text"}, {"path": "../../../paste-theme-tokens"}] +} diff --git a/packages/paste-core/components/input/package.json b/packages/paste-core/components/input/package.json new file mode 100644 index 0000000000..5c1b28bbce --- /dev/null +++ b/packages/paste-core/components/input/package.json @@ -0,0 +1,40 @@ +{ + "name": "@paste/input", + "version": "0.1.2", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/core": "^10.0.10", + "@emotion/styled": "^10.0.10", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/components/input/rollup.config.js b/packages/paste-core/components/input/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/components/input/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/components/input/src/index.tsx b/packages/paste-core/components/input/src/index.tsx new file mode 100644 index 0000000000..fa308e4f15 --- /dev/null +++ b/packages/paste-core/components/input/src/index.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import styled from '@emotion/styled'; +import {getInputStyles} from './styled.input'; + +const StyledInput = styled.input` + ${getInputStyles} +`; + +interface InputProps { + accessibilityControls?: string; + accessibilityOwns?: string; + disabled?: boolean; + inputId?: string; + name?: string; + placeholder?: string; + type: string; + value?: string; +} + +const Input: React.FC = ({disabled, inputId, name, placeholder, type, value}) => ( + +); + +export {Input}; diff --git a/packages/paste-core/components/input/src/styled.input.tsx b/packages/paste-core/components/input/src/styled.input.tsx new file mode 100644 index 0000000000..e728419534 --- /dev/null +++ b/packages/paste-core/components/input/src/styled.input.tsx @@ -0,0 +1,12 @@ +import {css} from '@emotion/core'; + +export const getInputStyles = css` + appearance: none; + background-color: transparent; + border: none; + font-family: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + font-size: 1rem; + outline: none; + resize: none; + width: 100%; +`; diff --git a/packages/paste-core/components/input/stories/index.stories.tsx b/packages/paste-core/components/input/stories/index.stories.tsx new file mode 100644 index 0000000000..7c2e806ae7 --- /dev/null +++ b/packages/paste-core/components/input/stories/index.stories.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {Input} from '../src'; + +storiesOf('Components|Input', module).add('Default', () => ); diff --git a/packages/paste-core/components/input/tsconfig.build.json b/packages/paste-core/components/input/tsconfig.build.json new file mode 100644 index 0000000000..e36e5dd8d1 --- /dev/null +++ b/packages/paste-core/components/input/tsconfig.build.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [] +} \ No newline at end of file diff --git a/packages/paste-core/components/input/tsconfig.json b/packages/paste-core/components/input/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/components/input/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/components/spinner/package.json b/packages/paste-core/components/spinner/package.json new file mode 100644 index 0000000000..14c4e4abe2 --- /dev/null +++ b/packages/paste-core/components/spinner/package.json @@ -0,0 +1,43 @@ +{ + "name": "@paste/spinner", + "version": "0.1.4", + "description": "Twilio's Spinner component", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/core": "^10.0.10", + "@emotion/styled": "^10.0.10", + "@paste/icons": "^0.2.1", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-uid": "^2.2.0", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "@paste/icons": "^0.2.3", + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/components/spinner/rollup.config.js b/packages/paste-core/components/spinner/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/components/spinner/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/components/spinner/src/index.tsx b/packages/paste-core/components/spinner/src/index.tsx new file mode 100644 index 0000000000..cbf8f81298 --- /dev/null +++ b/packages/paste-core/components/spinner/src/index.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import {keyframes, css} from '@emotion/core'; +import styled from '@emotion/styled'; +import {SpinnerIcon, SpinnerIconProps} from '@paste/icons/react/SpinnerIcon'; + +const rotate = keyframes` + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +`; + +const SpinningWrapper = styled.div( + css({ + display: 'inline-block', + animation: `${rotate} 2s linear infinite`, + '@media screen and (prefers-reduced-motion: reduce)': { + animation: 'none', + }, + }) +); + +interface SpinnerProps extends SpinnerIconProps { + title: string; +} + +const Spinner = (props: SpinnerProps) => ( + + + +); + +Spinner.defaultProps = { + decorative: false, +}; + +export {Spinner}; diff --git a/packages/paste-core/components/spinner/stories/index.stories.tsx b/packages/paste-core/components/spinner/stories/index.stories.tsx new file mode 100644 index 0000000000..f536e5ad4d --- /dev/null +++ b/packages/paste-core/components/spinner/stories/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {withKnobs, text, number} from '@storybook/addon-knobs'; +import {Spinner} from '../src'; + +storiesOf('Components|Spinner', module) + .addDecorator(withKnobs) + .add('Default', () => { + return ( + + ); + }); diff --git a/packages/paste-core/components/spinner/tsconfig.build.json b/packages/paste-core/components/spinner/tsconfig.build.json new file mode 100644 index 0000000000..4e1130284f --- /dev/null +++ b/packages/paste-core/components/spinner/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../../../paste-icons" + } + ] +} \ No newline at end of file diff --git a/packages/paste-core/components/spinner/tsconfig.json b/packages/paste-core/components/spinner/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/components/spinner/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/utilities/box/package.json b/packages/paste-core/utilities/box/package.json new file mode 100644 index 0000000000..a0f3869254 --- /dev/null +++ b/packages/paste-core/utilities/box/package.json @@ -0,0 +1,41 @@ +{ + "name": "@paste/box", + "version": "0.2.4", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/styled": "^10.0.10", + "@paste/theme-tokens": "^0.2.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "@paste/theme-tokens": "^0.4.0", + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/utilities/box/rollup.config.js b/packages/paste-core/utilities/box/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/utilities/box/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/utilities/box/src/index.tsx b/packages/paste-core/utilities/box/src/index.tsx new file mode 100644 index 0000000000..5e162bb856 --- /dev/null +++ b/packages/paste-core/utilities/box/src/index.tsx @@ -0,0 +1,54 @@ +import styled from '@emotion/styled'; +import { + borders, + display, + height, + HeightProps, + maxWidth, + MaxWidthProps, + minWidth, + MinWidthProps, + space, + style, + themeGet, + width, + WidthProps, +} from 'styled-system'; +import {ThemeShape} from '@paste/theme-tokens'; +import {SpacingThemeProps} from '../../../../../types'; + +export interface BoxProps extends HeightProps, MaxWidthProps, MinWidthProps, WidthProps, SpacingThemeProps { + as?: string; + backgroundColor?: keyof ThemeShape['backgroundColors']; + borderRadius?: keyof ThemeShape['radii']; + borderType?: keyof ThemeShape['borderTypes']; + borderWidth?: keyof ThemeShape['borderWidths']; +} + +const backgroundColor = style({ + prop: 'backgroundColor', + cssProperty: 'backgroundColor', + key: 'backgroundColors', +}); + +const BorderType = (props: BoxProps): string | null => { + return props.borderType ? themeGet(`borderTypes.${props.borderType}`)(props) : null; +}; + +const Box = styled.div` + ${backgroundColor}; + ${borders}; + ${BorderType}; + ${display}; + ${height}; + ${maxWidth}; + ${minWidth}; + ${space}; + ${width}; +`; + +Box.defaultProps = { + minWidth: 0, +}; + +export {Box}; diff --git a/packages/paste-core/utilities/box/stories/index.stories.tsx b/packages/paste-core/utilities/box/stories/index.stories.tsx new file mode 100644 index 0000000000..32453704ab --- /dev/null +++ b/packages/paste-core/utilities/box/stories/index.stories.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {withKnobs, select} from '@storybook/addon-knobs'; +import {DefaultTheme, ThemeShape} from '@paste/theme-tokens'; +import {Text} from '@paste/text'; +import {Box} from '../src'; + +const backgroundColorOptions = Object.keys(DefaultTheme.backgroundColors); +const borderTypeOptions = Object.keys(DefaultTheme.borderTypes); +const spaceOptions = Object.keys(DefaultTheme.space); +const borderRadiusOptions = Object.keys(DefaultTheme.radii); +const borderWidthOptions = Object.keys(DefaultTheme.borderWidths); + +const demoString = `I'm some text in a box`; + +storiesOf('Utilities|Box', module) + .addDecorator(withKnobs) + .add('Default', () => { + const backgroudColorValue = select( + 'backgroundColor', + backgroundColorOptions, + 'colorBackgroundBody' + ) as keyof ThemeShape['backgroundColors']; + const borderTypeValue = select('borderType', borderTypeOptions, '') as keyof ThemeShape['borderTypes']; + const borderRadiusValue = select('borderRadius', borderRadiusOptions, '') as keyof ThemeShape['radii']; + const borderWidthValue = select('borderWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths']; + const paddingValue = select('padding', spaceOptions, ''); + const marginValue = select('margin', spaceOptions, ''); + return ( + + {demoString} + + ); + }); diff --git a/packages/paste-core/utilities/box/tsconfig.build.json b/packages/paste-core/utilities/box/tsconfig.build.json new file mode 100644 index 0000000000..e0a0a32f88 --- /dev/null +++ b/packages/paste-core/utilities/box/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../../../paste-theme-tokens" + } + ] +} \ No newline at end of file diff --git a/packages/paste-core/utilities/box/tsconfig.json b/packages/paste-core/utilities/box/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/utilities/box/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/utilities/media-object/package.json b/packages/paste-core/utilities/media-object/package.json new file mode 100644 index 0000000000..326c9c65d0 --- /dev/null +++ b/packages/paste-core/utilities/media-object/package.json @@ -0,0 +1,39 @@ +{ + "name": "@paste/media-object", + "version": "0.2.3", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/styled": "^10.0.10", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/utilities/media-object/rollup.config.js b/packages/paste-core/utilities/media-object/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/utilities/media-object/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/utilities/media-object/src/index.tsx b/packages/paste-core/utilities/media-object/src/index.tsx new file mode 100644 index 0000000000..7a84d5ff11 --- /dev/null +++ b/packages/paste-core/utilities/media-object/src/index.tsx @@ -0,0 +1,49 @@ +import styled from '@emotion/styled'; +import {space, Theme, themeGet} from 'styled-system'; +import {PaddingThemeProps} from '../../../../../types'; + +interface MediaObjectProps extends Theme { + isCentered?: boolean; +} + +const MediaObject = styled.div` + align-items: ${(props: MediaObjectProps) => (props.isCentered ? 'center' : 'flex-start')}; + display: flex; +`; + +interface MediaFigureProps extends Theme { + align?: 'start' | 'end'; + spacing?: 'space20' | 'space30'; +} + +const getMargin = (props: MediaFigureProps): string => { + const direction = props.align === 'end' ? 'left' : 'right'; + const spacing = themeGet(`space.${props.spacing}`)(props); + return `margin-${direction}: ${spacing}`; +}; + +const MediaFigure = styled.div` + flex-shrink: 0; + ${getMargin}; +`; + +MediaFigure.defaultProps = { + align: 'start', + spacing: 'space20', +}; + +interface MediaBodyProps extends Theme, PaddingThemeProps {} + +const MediaBody = styled.div` + flex: 1; + min-width: ${themeGet('minWidths.size0')}; + ${space}; +`; + +const Media = { + Object: MediaObject, + Figure: MediaFigure, + Body: MediaBody, +}; + +export {Media}; diff --git a/packages/paste-core/utilities/media-object/stories/index.stories.tsx b/packages/paste-core/utilities/media-object/stories/index.stories.tsx new file mode 100644 index 0000000000..70b4056e5e --- /dev/null +++ b/packages/paste-core/utilities/media-object/stories/index.stories.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {withKnobs, boolean, select} from '@storybook/addon-knobs'; +import {Text} from '@paste/text'; +import {Box} from '@paste/box'; +import {Media} from '../src'; + +storiesOf('Utilities|Media Object', module) + .addDecorator(withKnobs) + .add('Default', () => { + const spaceValue = select('spacing', ['space20', 'space30'], 'space20'); + return ( + + + + + + Some media Object body text + + + ); + }) + .add('Double Figure', () => { + const spaceValue = select('spacing', ['space20', 'space30'], 'space20'); + return ( + + + + + + Some media Object body text + + + + + + ); + }); diff --git a/packages/paste-core/utilities/media-object/tsconfig.build.json b/packages/paste-core/utilities/media-object/tsconfig.build.json new file mode 100644 index 0000000000..e0a0a32f88 --- /dev/null +++ b/packages/paste-core/utilities/media-object/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../../../paste-theme-tokens" + } + ] +} \ No newline at end of file diff --git a/packages/paste-core/utilities/media-object/tsconfig.json b/packages/paste-core/utilities/media-object/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/utilities/media-object/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/utilities/text/package.json b/packages/paste-core/utilities/text/package.json new file mode 100644 index 0000000000..9126030401 --- /dev/null +++ b/packages/paste-core/utilities/text/package.json @@ -0,0 +1,42 @@ +{ + "name": "@paste/text", + "version": "0.3.1", + "description": "", + "author": "Twilio Inc.", + "license": "MIT", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/styled": "^10.0.10", + "@paste/theme-tokens": "^0.2.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "@paste/theme-tokens": "^0.4.0", + "csstype": "^2.6.5", + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/utilities/text/rollup.config.js b/packages/paste-core/utilities/text/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/utilities/text/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/utilities/text/src/index.tsx b/packages/paste-core/utilities/text/src/index.tsx new file mode 100644 index 0000000000..1fcf3af48f --- /dev/null +++ b/packages/paste-core/utilities/text/src/index.tsx @@ -0,0 +1,52 @@ +import {ReactNode} from 'react'; +import styled from '@emotion/styled'; +import { + fontFamily, + fontSize, + fontWeight, + lineHeight, + space, + SpaceProps, + style, + textAlign, + TextAlignProps, +} from 'styled-system'; +import {ThemeShape} from '@paste/theme-tokens'; + +interface TextProps extends TextAlignProps, SpaceProps { + as?: string; + children: ReactNode | string; + fontFamily?: keyof ThemeShape['fonts']; + fontSize?: keyof ThemeShape['fontSizes']; + fontWeight?: keyof ThemeShape['fontWeights']; + lineHeight?: keyof ThemeShape['lineHeights']; + textColor?: keyof ThemeShape['textColors']; + theme?: ThemeShape; +} + +const textColor = style({ + prop: 'textColor', + cssProperty: 'color', + key: 'textColors', +}); + +const Text = styled.span` + margin: 0; + padding: 0; + ${fontFamily} + ${fontSize} + ${textColor} + ${fontWeight} + ${lineHeight} + ${textAlign} + ${space} +`; + +Text.defaultProps = { + as: 'p', + fontSize: 'fontSize30', + lineHeight: 'lineHeight20', + textColor: 'colorText', +}; + +export {Text}; diff --git a/packages/paste-core/utilities/text/stories/index.stories.tsx b/packages/paste-core/utilities/text/stories/index.stories.tsx new file mode 100644 index 0000000000..cbc813df98 --- /dev/null +++ b/packages/paste-core/utilities/text/stories/index.stories.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {withKnobs, text, select} from '@storybook/addon-knobs'; +import {DefaultTheme, ThemeShape} from '@paste/theme-tokens'; +import {ResponsiveValue} from 'styled-system'; +import * as CSS from 'csstype'; +import {Text} from '../src'; + +const fontSizeOptions = Object.keys(DefaultTheme.fontSizes); +const fontFamilyOptions = Object.keys(DefaultTheme.fonts); +const lineHeightOptions = Object.keys(DefaultTheme.lineHeights); +const textColorOptions = Object.keys(DefaultTheme.textColors); +const fontWeightOptions = Object.keys(DefaultTheme.fontWeights); + +storiesOf('Utilities|Text', module) + .addDecorator(withKnobs) + .add('Default', () => { + const fontFamilyValue = select('fontFamily', fontFamilyOptions, 'fontFamilyText') as keyof ThemeShape['fonts']; + const fontSizeValue = select('fontSize', fontSizeOptions, 'fontSize30') as keyof ThemeShape['fontSizes']; + const fontWeightValue = select( + 'fontWeight', + fontWeightOptions, + 'fontWeightNormal' + ) as keyof ThemeShape['fontWeights']; + const lineHeightValue = select('lineHeight', lineHeightOptions, 'lineHeight20') as keyof ThemeShape['lineHeights']; + const textAlignValue = text('textAlign', '') as ResponsiveValue; + const textColorValue = select('textColor', textColorOptions, 'colorText') as keyof ThemeShape['textColors']; + return ( + + Some text + + ); + }); diff --git a/packages/paste-core/utilities/text/tsconfig.build.json b/packages/paste-core/utilities/text/tsconfig.build.json new file mode 100644 index 0000000000..e0a0a32f88 --- /dev/null +++ b/packages/paste-core/utilities/text/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../../../paste-theme-tokens" + } + ] +} \ No newline at end of file diff --git a/packages/paste-core/utilities/text/tsconfig.json b/packages/paste-core/utilities/text/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/utilities/text/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-core/utilities/truncate/package.json b/packages/paste-core/utilities/truncate/package.json new file mode 100644 index 0000000000..ba7980427f --- /dev/null +++ b/packages/paste-core/utilities/truncate/package.json @@ -0,0 +1,38 @@ +{ + "name": "@paste/truncate", + "version": "0.1.2", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/styled": "^10.0.10", + "react": "^16.8.6", + "react-dom": "^16.8.6" + }, + "devDependencies": { + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-core/utilities/truncate/rollup.config.js b/packages/paste-core/utilities/truncate/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-core/utilities/truncate/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-core/utilities/truncate/src/index.tsx b/packages/paste-core/utilities/truncate/src/index.tsx new file mode 100644 index 0000000000..bb4f22d69e --- /dev/null +++ b/packages/paste-core/utilities/truncate/src/index.tsx @@ -0,0 +1,11 @@ +import styled from '@emotion/styled'; + +const Truncate = styled.span` + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +export {Truncate}; diff --git a/packages/paste-core/utilities/truncate/stories/index.stories.tsx b/packages/paste-core/utilities/truncate/stories/index.stories.tsx new file mode 100644 index 0000000000..36ec4043a6 --- /dev/null +++ b/packages/paste-core/utilities/truncate/stories/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {Box} from '@paste/box'; +import {Text} from '@paste/text'; +import {Truncate} from '../src'; + +storiesOf('Utilities|Truncate', module).add('Default', () => { + return ( + + + Some very long text to truncate + + + ); +}); diff --git a/packages/paste-core/utilities/truncate/tsconfig.build.json b/packages/paste-core/utilities/truncate/tsconfig.build.json new file mode 100644 index 0000000000..e36e5dd8d1 --- /dev/null +++ b/packages/paste-core/utilities/truncate/tsconfig.build.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [] +} \ No newline at end of file diff --git a/packages/paste-core/utilities/truncate/tsconfig.json b/packages/paste-core/utilities/truncate/tsconfig.json new file mode 100644 index 0000000000..20378db15e --- /dev/null +++ b/packages/paste-core/utilities/truncate/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-design-tokens/.babelrc b/packages/paste-design-tokens/.babelrc new file mode 100644 index 0000000000..f756434ae0 --- /dev/null +++ b/packages/paste-design-tokens/.babelrc @@ -0,0 +1,17 @@ +{ + "presets": [ + [ + "@babel/env", + { + "targets": { + "node": "current" + } + } + ], + "@babel/typescript" + ], + "plugins": [ + "@babel/proposal-class-properties", + "@babel/proposal-object-rest-spread" + ] +} diff --git a/packages/paste-design-tokens/README.md b/packages/paste-design-tokens/README.md new file mode 100644 index 0000000000..829ce9ccdd --- /dev/null +++ b/packages/paste-design-tokens/README.md @@ -0,0 +1,27 @@ +# paste-tokens + +Token list for Paste + +## Getting started + +Install all the things + +``` +yarn install +``` + +Then run + +``` +yarn dev +``` + +To get started + +## `yarn dev` + +This command will compile the tokens into their respective formats for export. It will also spin up the docs in HTML format for you to preview your work whilst you add or modify tokens. + +## `yarn tokens` + +This command will biuld all the tokens into the dist and docs directories. diff --git a/packages/paste-design-tokens/formatters/__fixtures__/aliases/color-palette.yml b/packages/paste-design-tokens/formatters/__fixtures__/aliases/color-palette.yml new file mode 100644 index 0000000000..eee3582a3c --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/aliases/color-palette.yml @@ -0,0 +1,71 @@ +aliases: + ## Blues + palette_blue_10: "#F2F8FC" + palette_blue_20: "#B2D4F0" + palette_blue_30: "#66A9E0" + palette_blue_40: "#338CD6" + palette_blue_50: "#0070CC" + palette_blue_60: "#0061C0" + palette_blue_70: "#0059A3" + palette_blue_80: "#00437A" + palette_blue_90: "#002C51" + palette_blue_100: "#0D122B" + + ## Grays + palette_gray_10: "#FFFFFF" + palette_gray_20: "#F6F6F6" + palette_gray_30: "#EBEBEB" + palette_gray_40: "#E6E6E6" + palette_gray_50: "#D6D6D6" + palette_gray_60: "#CCCCCC" + palette_gray_70: "#999999" + palette_gray_80: "#666666" + palette_gray_90: "#444444" + palette_gray_100: "#222222" + + ## Grays transparent based on darkest gray + palette_gray_transparent_10: "rgba(35, 35, 35, 0.1)" + palette_gray_transparent_20: "rgba(35, 35, 35, 0.2)" + palette_gray_transparent_30: "rgba(35, 35, 35, 0.3)" + palette_gray_transparent_40: "rgba(35, 35, 35, 0.4)" + palette_gray_transparent_50: "rgba(35, 35, 35, 0.5)" + palette_gray_transparent_60: "rgba(35, 35, 35, 0.6)" + palette_gray_transparent_70: "rgba(35, 35, 35, 0.7)" + palette_gray_transparent_80: "rgba(35, 35, 35, 0.8)" + palette_gray_transparent_90: "rgba(35, 35, 35, 0.9)" + + ## Greens + palette_green_10: "#F7FCF9" + palette_green_20: "#CEF0DA" + palette_green_30: "#A2E3B8" + palette_green_40: "#83DAA1" + palette_green_50: "#64D18A" + palette_green_60: "#59BB7B" + palette_green_70: "#50A76E" + palette_green_80: "#3C7D52" + palette_green_90: "#285337" + palette_green_100: "#17301F" + + ## Oranges + palette_orange_10: "#FFFAF4" + palette_orange_20: "#FDE6C5" + palette_orange_30: "#FBD090" + palette_orange_40: "#FAC06B" + palette_orange_50: "#F9B147" + palette_orange_60: "#DF9E3F" + palette_orange_70: "#C78D38" + palette_orange_80: "#956A2A" + palette_orange_90: "#63461C" + palette_orange_100: "#392810" + + ## Reds + palette_red_10: "#FBF3F4" + palette_red_20: "#ECBBC1" + palette_red_30: "#DA7C87" + palette_red_40: "#CE505F" + palette_red_50: "#C22537" + palette_red_60: "#AE2131" + palette_red_70: "#9B1D2C" + palette_red_80: "#741621" + palette_red_90: "#4D0E16" + palette_red_100: "#2C080C" diff --git a/packages/paste-design-tokens/formatters/__fixtures__/aliases/color.yml b/packages/paste-design-tokens/formatters/__fixtures__/aliases/color.yml new file mode 100644 index 0000000000..684b0ae2e0 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/aliases/color.yml @@ -0,0 +1,8 @@ +aliases: + amaranth: "#F22F46" + black: "#000000" + gold: "#FFD600" + haiti: "#0D122B" + red_ribbon: "#EB0F29" + seance: "#9C27B0" + white: "#FFFFFF" diff --git a/packages/paste-design-tokens/formatters/__fixtures__/aliases/font-size.yml b/packages/paste-design-tokens/formatters/__fixtures__/aliases/font-size.yml new file mode 100644 index 0000000000..01d1907fbd --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/aliases/font-size.yml @@ -0,0 +1,11 @@ +aliases: + font_size_0: "0.6875rem" #11px + font_size_1: "0.75rem" #12px + font_size_2: "0.8125rem" #13px + font_size_3: "0.875rem" #14px + font_size_4: "0.9375rem" #15px + font_size_5: "1rem" #16px + font_size_6: "1.125rem" #18px + font_size_7: "1.25rem" #20px + font_size_8: "1.875rem" #30px + font_size_9: "2.25rem" #36px diff --git a/packages/paste-design-tokens/formatters/__fixtures__/aliases/spacing.yml b/packages/paste-design-tokens/formatters/__fixtures__/aliases/spacing.yml new file mode 100644 index 0000000000..68b21323c7 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/aliases/spacing.yml @@ -0,0 +1,17 @@ +aliases: + space_0: "0.25rem" #4px + space_1: "0.5rem" #8px + space_2: "0.75rem" #12px + space_3: "1rem" #16px + space_4: "1.25rem" #20px + space_5: "1.5rem" #24px + space_6: "1.75rem" #28px + space_7: "2rem" #32px + space_8: "2.25rem" #36px + space_9: "2.5rem" #40px + space_10: "2.75rem" #44px + space_11: "3rem" #48px + space_12: "3.25rem" #52px + space_13: "3.5rem" #56px + space_14: "3.75rem" #60px + space_15: "4rem" #64px diff --git a/packages/paste-design-tokens/formatters/__fixtures__/colors.yml b/packages/paste-design-tokens/formatters/__fixtures__/colors.yml new file mode 100644 index 0000000000..6063ef68f1 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/colors.yml @@ -0,0 +1,4 @@ +imports: + - ./global/background-color.yml + - ./global/palette-color.yml + - ./global/text-color.yml diff --git a/packages/paste-design-tokens/formatters/__fixtures__/global/background-color.yml b/packages/paste-design-tokens/formatters/__fixtures__/global/background-color.yml new file mode 100644 index 0000000000..98ab313f82 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/global/background-color.yml @@ -0,0 +1,81 @@ +global: + type: color + category: background-color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + # base background + color_background_default: + value: "{!palette_gray_20}" + comment: Some background + + # brand backgrounds + color_background_brand_primary: + value: "{!haiti}" + comment: Primary brand background, accessible with black text + color_background_brand_highlight: + value: "{!amaranth}" + comment: Primary brand background, accessible with black text + color_background_brand_highlight_dark: + value: "{!red_ribbon}" + comment: Dark Primary brand background, accessible with black and white text + color_background_brand_highlight_darker: + value: "{!palette_red_50}" + comment: Darker Primary brand background, accessible with black and white text + + # page body + color_background_body: + value: "{!white}" + comment: Some background + + # status + color_background_success: + value: "{!palette_green_50}" + comment: Some background + color_background_success_light: + value: "{!palette_green_30}" + comment: Some background + color_background_success_dark: + value: "{!palette_green_70}" + comment: Some background + color_background_warning: + value: "{!palette_orange_30}" + comment: Some background + color_background_warning_light: + value: "{!palette_orange_50}" + comment: Some background + color_background_warning_dark: + value: "{!palette_orange_70}" + comment: Some background + color_background_error: + value: "{!palette_red_40}" + comment: Some background + color_background_error_light: + value: "{!palette_red_50}" + comment: Some background + color_background_error_dark: + value: "{!palette_red_60}" + comment: Some background + + # row backgrounds + color_background_row_striped: + value: "{!palette_gray_30}" + comment: Some background + color_background_row_active: + value: "{!palette_gray_40}" + comment: Some background + color_background_row_selected: + value: "{!palette_gray_40}" + comment: Some background + color_background_row_hover: + value: "{!palette_gray_50}" + comment: Some background + color_background_row_focus: + value: "{!palette_gray_50}" + comment: Some background + + # text selection + color_background_element_selection: + value: "{!palette_red_20}" + comment: Some background diff --git a/packages/paste-design-tokens/formatters/__fixtures__/global/font-size.yml b/packages/paste-design-tokens/formatters/__fixtures__/global/font-size.yml new file mode 100644 index 0000000000..22f1c57e7e --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/global/font-size.yml @@ -0,0 +1,36 @@ +global: + category: font-size + type: font-size +imports: + - ../aliases/font-size.yml +props: + font_size_0: + value: "{!font_size_0}" + comment: "Constant typography token for font size 0" + font_size_1: + value: "{!font_size_1}" + comment: "Constant typography token for font size 1" + font_size_2: + value: "{!font_size_2}" + comment: "Constant typography token for font size 2" + font_size_3: + value: "{!font_size_3}" + comment: "Constant typography token for font size 3" + font_size_4: + value: "{!font_size_4}" + comment: "Constant typography token for font size 4" + font_size_5: + value: "{!font_size_5}" + comment: "Constant typography token for font size 5" + font_size_6: + value: "{!font_size_6}" + comment: "Constant typography token for font size 6" + font_size_7: + value: "{!font_size_7}" + comment: "Constant typography token for font size 7" + font_size_8: + value: "{!font_size_8}" + comment: "Constant typography token for font size 8" + font_size_9: + value: "{!font_size_9}" + comment: "Constant typography token for font size 9" diff --git a/packages/paste-design-tokens/formatters/__fixtures__/global/index.yml b/packages/paste-design-tokens/formatters/__fixtures__/global/index.yml new file mode 100644 index 0000000000..66a15aba59 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/global/index.yml @@ -0,0 +1,6 @@ +imports: + - ./background-color.yml + - ./font-size.yml + - ./palette-color.yml + - ./spacing.yml + - ./text-color.yml diff --git a/packages/paste-design-tokens/formatters/__fixtures__/global/palette-color.yml b/packages/paste-design-tokens/formatters/__fixtures__/global/palette-color.yml new file mode 100644 index 0000000000..08ec2419a4 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/global/palette-color.yml @@ -0,0 +1,46 @@ +global: + type: color + category: color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + color_gray_1: + value: "{!palette_gray_10}" + comment: "Gray Color 1" + color_gray_2: + value: "{!palette_gray_20}" + comment: "Gray Color 2" + color_gray_3: + value: "{!palette_gray_30}" + comment: "Gray Color 3" + color_gray_4: + value: "{!palette_gray_40}" + comment: "Gray Color 4" + color_gray_5: + value: "{!palette_gray_50}" + comment: "Gray Color 5" + color_gray_6: + value: "{!palette_gray_60}" + comment: "Gray Color 6" + color_gray_7: + value: "{!palette_gray_70}" + comment: "Gray Color 7" + color_gray_8: + value: "{!palette_gray_80}" + comment: "Gray Color 8" + color_gray_9: + value: "{!palette_gray_90}" + comment: "Gray Color 9" + color_gray_10: + value: "{!palette_gray_100}" + comment: "Gray Color 10" + color_brand_primary: + value: "{!haiti}" + comment: "Primary branding color" + color_brand_highlight: + value: "{!amaranth}" + comment: "Twilio brand red" + color_brand_highlight_dark: + value: "{!red_ribbon}" + comment: "Twilio accessible brand red" diff --git a/packages/paste-design-tokens/formatters/__fixtures__/global/spacing.yml b/packages/paste-design-tokens/formatters/__fixtures__/global/spacing.yml new file mode 100644 index 0000000000..8f30b450b4 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/global/spacing.yml @@ -0,0 +1,38 @@ +global: + category: spacing + type: size +imports: + - ../aliases/spacing.yml +props: + space_0: + value: "{!space_0}" + space_1: + value: "{!space_1}" + space_2: + value: "{!space_2}" + space_3: + value: "{!space_3}" + space_4: + value: "{!space_4}" + space_5: + value: "{!space_5}" + space_6: + value: "{!space_6}" + space_7: + value: "{!space_7}" + space_8: + value: "{!space_8}" + space_9: + value: "{!space_9}" + space_10: + value: "{!space_10}" + space_11: + value: "{!space_11}" + space_12: + value: "{!space_12}" + space_13: + value: "{!space_13}" + space_14: + value: "{!space_14}" + space_15: + value: "{!space_15}" diff --git a/packages/paste-design-tokens/formatters/__fixtures__/global/text-color.yml b/packages/paste-design-tokens/formatters/__fixtures__/global/text-color.yml new file mode 100644 index 0000000000..d63c9ad9ba --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/global/text-color.yml @@ -0,0 +1,85 @@ +global: + type: color + category: text-color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + # body text + color_text_default: + value: "{!palette_gray_90}" + comment: Body text color + color_text_weak: + value: "{!palette_gray_40}" + comment: Weak body text for visual hierarchy. + color_text_inverse: + value: "{!white}" + comment: Inverse text color for dark backgrounds + color_text_inverse_weak: + value: "{!palette_gray_30}" + comment: Weak inverse text color for dark backgrounds + color_text_brand_primary: + value: "{!white}" + comment: Text color used on any brand color + color_text_brand_highlight: + value: "{!amaranth}" + comment: Twilio brand red, accessible on large text only. + color_text_brand_highlight_dark: + value: "{!red_ribbon}" + comment: Accessible Twilio brand red. + + # links + color_text_link: + value: "{!palette_blue_50}" + comment: Link text + color_text_link_active: + value: "{!palette_blue_70}" + comment: Active link text + color_text_link_disabled: + value: "{!palette_blue_30}" + comment: Disabled link text + color_text_link_focus: + value: "{!palette_blue_60}" + comment: Focus link text + color_text_link_hover: + value: "{!palette_blue_60}" + comment: Hover link text + color_text_link_destructive: + value: "{!palette_red_50}" + comment: Destructive link text + color_text_link_destructive_active: + value: "{!palette_red_70}" + comment: Active destructive link text + color_text_link_destructive_disabled: + value: "{!palette_red_20}" + comment: Disabled destructive link text + color_text_link_destructive_focus: + value: "{!palette_red_60}" + comment: Focus destructive link text + color_text_link_destructive_hover: + value: "{!palette_red_60}" + comment: Hover destructive link text + + #status + color_text_error: + value: "{!palette_red_50}" + comment: Error text for inputs and error misc + color_text_success: + value: "{!palette_green_50}" + comment: Text color for success text. + color_text_warning: + value: "{!palette_orange_50}" + comment: Color for texts or icons that are related to warnings on a dark background. + + #icon + color_text_icon_default: + value: "{!palette_gray_90}" + comment: Default icon color. + + #forms + color_text_label: + value: "{!palette_gray_90}" + comment: Text color for field labels. + color_text_placeholder: + value: "{!palette_gray_80}" + comment: Input placeholder text. diff --git a/packages/paste-design-tokens/formatters/__fixtures__/index.yml b/packages/paste-design-tokens/formatters/__fixtures__/index.yml new file mode 100644 index 0000000000..1c9600288b --- /dev/null +++ b/packages/paste-design-tokens/formatters/__fixtures__/index.yml @@ -0,0 +1,2 @@ +imports: + - ./global/index.yml diff --git a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/d.ts.spec.ts.snap b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/d.ts.spec.ts.snap new file mode 100644 index 0000000000..ff98db9a93 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/d.ts.spec.ts.snap @@ -0,0 +1,180 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`dTSFormatter should return typescript definitions formatted tokens 1`] = ` +"export declare const colorBackgroundBody = \\"rgb(255, 255, 255)\\"; +export declare const colorBackgroundBrandHighlight = \\"rgb(242, 47, 70)\\"; +export declare const colorBackgroundBrandHighlightDark = \\"rgb(235, 15, 41)\\"; +export declare const colorBackgroundBrandHighlightDarker = \\"rgb(194, 37, 55)\\"; +export declare const colorBackgroundBrandPrimary = \\"rgb(13, 18, 43)\\"; +export declare const colorBackgroundDefault = \\"rgb(246, 246, 246)\\"; +export declare const colorBackgroundElementSelection = \\"rgb(236, 187, 193)\\"; +export declare const colorBackgroundError = \\"rgb(206, 80, 95)\\"; +export declare const colorBackgroundErrorDark = \\"rgb(174, 33, 49)\\"; +export declare const colorBackgroundErrorLight = \\"rgb(194, 37, 55)\\"; +export declare const colorBackgroundRowActive = \\"rgb(230, 230, 230)\\"; +export declare const colorBackgroundRowFocus = \\"rgb(214, 214, 214)\\"; +export declare const colorBackgroundRowHover = \\"rgb(214, 214, 214)\\"; +export declare const colorBackgroundRowSelected = \\"rgb(230, 230, 230)\\"; +export declare const colorBackgroundRowStriped = \\"rgb(235, 235, 235)\\"; +export declare const colorBackgroundSuccess = \\"rgb(100, 209, 138)\\"; +export declare const colorBackgroundSuccessDark = \\"rgb(80, 167, 110)\\"; +export declare const colorBackgroundSuccessLight = \\"rgb(162, 227, 184)\\"; +export declare const colorBackgroundWarning = \\"rgb(251, 208, 144)\\"; +export declare const colorBackgroundWarningDark = \\"rgb(199, 141, 56)\\"; +export declare const colorBackgroundWarningLight = \\"rgb(249, 177, 71)\\"; +export declare const colorBrandHighlight = \\"rgb(242, 47, 70)\\"; +export declare const colorBrandHighlightDark = \\"rgb(235, 15, 41)\\"; +export declare const colorBrandPrimary = \\"rgb(13, 18, 43)\\"; +export declare const colorGray1 = \\"rgb(255, 255, 255)\\"; +export declare const colorGray10 = \\"rgb(34, 34, 34)\\"; +export declare const colorGray2 = \\"rgb(246, 246, 246)\\"; +export declare const colorGray3 = \\"rgb(235, 235, 235)\\"; +export declare const colorGray4 = \\"rgb(230, 230, 230)\\"; +export declare const colorGray5 = \\"rgb(214, 214, 214)\\"; +export declare const colorGray6 = \\"rgb(204, 204, 204)\\"; +export declare const colorGray7 = \\"rgb(153, 153, 153)\\"; +export declare const colorGray8 = \\"rgb(102, 102, 102)\\"; +export declare const colorGray9 = \\"rgb(68, 68, 68)\\"; +export declare const colorTextBrandHighlight = \\"rgb(242, 47, 70)\\"; +export declare const colorTextBrandHighlightDark = \\"rgb(235, 15, 41)\\"; +export declare const colorTextBrandPrimary = \\"rgb(255, 255, 255)\\"; +export declare const colorTextDefault = \\"rgb(68, 68, 68)\\"; +export declare const colorTextError = \\"rgb(194, 37, 55)\\"; +export declare const colorTextIconDefault = \\"rgb(68, 68, 68)\\"; +export declare const colorTextInverse = \\"rgb(255, 255, 255)\\"; +export declare const colorTextInverseWeak = \\"rgb(235, 235, 235)\\"; +export declare const colorTextLabel = \\"rgb(68, 68, 68)\\"; +export declare const colorTextLink = \\"rgb(0, 112, 204)\\"; +export declare const colorTextLinkActive = \\"rgb(0, 89, 163)\\"; +export declare const colorTextLinkDestructive = \\"rgb(194, 37, 55)\\"; +export declare const colorTextLinkDestructiveActive = \\"rgb(155, 29, 44)\\"; +export declare const colorTextLinkDestructiveDisabled = \\"rgb(236, 187, 193)\\"; +export declare const colorTextLinkDestructiveFocus = \\"rgb(174, 33, 49)\\"; +export declare const colorTextLinkDestructiveHover = \\"rgb(174, 33, 49)\\"; +export declare const colorTextLinkDisabled = \\"rgb(102, 169, 224)\\"; +export declare const colorTextLinkFocus = \\"rgb(0, 97, 192)\\"; +export declare const colorTextLinkHover = \\"rgb(0, 97, 192)\\"; +export declare const colorTextPlaceholder = \\"rgb(102, 102, 102)\\"; +export declare const colorTextSuccess = \\"rgb(100, 209, 138)\\"; +export declare const colorTextWarning = \\"rgb(249, 177, 71)\\"; +export declare const colorTextWeak = \\"rgb(230, 230, 230)\\"; +export declare const fontSize0 = \\"0.6875rem\\"; +export declare const fontSize1 = \\"0.75rem\\"; +export declare const fontSize2 = \\"0.8125rem\\"; +export declare const fontSize3 = \\"0.875rem\\"; +export declare const fontSize4 = \\"0.9375rem\\"; +export declare const fontSize5 = \\"1rem\\"; +export declare const fontSize6 = \\"1.125rem\\"; +export declare const fontSize7 = \\"1.25rem\\"; +export declare const fontSize8 = \\"1.875rem\\"; +export declare const fontSize9 = \\"2.25rem\\"; +export declare const space0 = \\"0.25rem\\"; +export declare const space1 = \\"0.5rem\\"; +export declare const space10 = \\"2.75rem\\"; +export declare const space11 = \\"3rem\\"; +export declare const space12 = \\"3.25rem\\"; +export declare const space13 = \\"3.5rem\\"; +export declare const space14 = \\"3.75rem\\"; +export declare const space15 = \\"4rem\\"; +export declare const space2 = \\"0.75rem\\"; +export declare const space3 = \\"1rem\\"; +export declare const space4 = \\"1.25rem\\"; +export declare const space5 = \\"1.5rem\\"; +export declare const space6 = \\"1.75rem\\"; +export declare const space7 = \\"2rem\\"; +export declare const space8 = \\"2.25rem\\"; +export declare const space9 = \\"2.5rem\\"; +export declare const backgroundColors: { + colorBackgroundBody: 'string'; + colorBackgroundBrandHighlight: 'string'; + colorBackgroundBrandHighlightDark: 'string'; + colorBackgroundBrandHighlightDarker: 'string'; + colorBackgroundBrandPrimary: 'string'; + colorBackgroundDefault: 'string'; + colorBackgroundElementSelection: 'string'; + colorBackgroundError: 'string'; + colorBackgroundErrorDark: 'string'; + colorBackgroundErrorLight: 'string'; + colorBackgroundRowActive: 'string'; + colorBackgroundRowFocus: 'string'; + colorBackgroundRowHover: 'string'; + colorBackgroundRowSelected: 'string'; + colorBackgroundRowStriped: 'string'; + colorBackgroundSuccess: 'string'; + colorBackgroundSuccessDark: 'string'; + colorBackgroundSuccessLight: 'string'; + colorBackgroundWarning: 'string'; + colorBackgroundWarningDark: 'string'; + colorBackgroundWarningLight: 'string'; +}; +export declare const colors: { + colorBrandHighlight: 'string'; + colorBrandHighlightDark: 'string'; + colorBrandPrimary: 'string'; + colorGray1: 'string'; + colorGray10: 'string'; + colorGray2: 'string'; + colorGray3: 'string'; + colorGray4: 'string'; + colorGray5: 'string'; + colorGray6: 'string'; + colorGray7: 'string'; + colorGray8: 'string'; + colorGray9: 'string'; +}; +export declare const fontSizes: { + fontSize0: 'string'; + fontSize1: 'string'; + fontSize2: 'string'; + fontSize3: 'string'; + fontSize4: 'string'; + fontSize5: 'string'; + fontSize6: 'string'; + fontSize7: 'string'; + fontSize8: 'string'; + fontSize9: 'string'; +}; +export declare const spacings: { + space0: 'string'; + space1: 'string'; + space10: 'string'; + space11: 'string'; + space12: 'string'; + space13: 'string'; + space14: 'string'; + space15: 'string'; + space2: 'string'; + space3: 'string'; + space4: 'string'; + space5: 'string'; + space6: 'string'; + space7: 'string'; + space8: 'string'; + space9: 'string'; +}; +export declare const textColors: { + colorTextBrandHighlight: 'string'; + colorTextBrandHighlightDark: 'string'; + colorTextBrandPrimary: 'string'; + colorTextDefault: 'string'; + colorTextError: 'string'; + colorTextIconDefault: 'string'; + colorTextInverse: 'string'; + colorTextInverseWeak: 'string'; + colorTextLabel: 'string'; + colorTextLink: 'string'; + colorTextLinkActive: 'string'; + colorTextLinkDestructive: 'string'; + colorTextLinkDestructiveActive: 'string'; + colorTextLinkDestructiveDisabled: 'string'; + colorTextLinkDestructiveFocus: 'string'; + colorTextLinkDestructiveHover: 'string'; + colorTextLinkDisabled: 'string'; + colorTextLinkFocus: 'string'; + colorTextLinkHover: 'string'; + colorTextPlaceholder: 'string'; + colorTextSuccess: 'string'; + colorTextWarning: 'string'; + colorTextWeak: 'string'; +};" +`; diff --git a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/es6.spec.ts.snap b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/es6.spec.ts.snap new file mode 100644 index 0000000000..1b307f1668 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/es6.spec.ts.snap @@ -0,0 +1,180 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`es6Formatter should return es6 formatted tokens 1`] = ` +"export const colorBackgroundBody = \\"rgb(255, 255, 255)\\"; +export const colorBackgroundBrandHighlight = \\"rgb(242, 47, 70)\\"; +export const colorBackgroundBrandHighlightDark = \\"rgb(235, 15, 41)\\"; +export const colorBackgroundBrandHighlightDarker = \\"rgb(194, 37, 55)\\"; +export const colorBackgroundBrandPrimary = \\"rgb(13, 18, 43)\\"; +export const colorBackgroundDefault = \\"rgb(246, 246, 246)\\"; +export const colorBackgroundElementSelection = \\"rgb(236, 187, 193)\\"; +export const colorBackgroundError = \\"rgb(206, 80, 95)\\"; +export const colorBackgroundErrorDark = \\"rgb(174, 33, 49)\\"; +export const colorBackgroundErrorLight = \\"rgb(194, 37, 55)\\"; +export const colorBackgroundRowActive = \\"rgb(230, 230, 230)\\"; +export const colorBackgroundRowFocus = \\"rgb(214, 214, 214)\\"; +export const colorBackgroundRowHover = \\"rgb(214, 214, 214)\\"; +export const colorBackgroundRowSelected = \\"rgb(230, 230, 230)\\"; +export const colorBackgroundRowStriped = \\"rgb(235, 235, 235)\\"; +export const colorBackgroundSuccess = \\"rgb(100, 209, 138)\\"; +export const colorBackgroundSuccessDark = \\"rgb(80, 167, 110)\\"; +export const colorBackgroundSuccessLight = \\"rgb(162, 227, 184)\\"; +export const colorBackgroundWarning = \\"rgb(251, 208, 144)\\"; +export const colorBackgroundWarningDark = \\"rgb(199, 141, 56)\\"; +export const colorBackgroundWarningLight = \\"rgb(249, 177, 71)\\"; +export const colorBrandHighlight = \\"rgb(242, 47, 70)\\"; +export const colorBrandHighlightDark = \\"rgb(235, 15, 41)\\"; +export const colorBrandPrimary = \\"rgb(13, 18, 43)\\"; +export const colorGray1 = \\"rgb(255, 255, 255)\\"; +export const colorGray10 = \\"rgb(34, 34, 34)\\"; +export const colorGray2 = \\"rgb(246, 246, 246)\\"; +export const colorGray3 = \\"rgb(235, 235, 235)\\"; +export const colorGray4 = \\"rgb(230, 230, 230)\\"; +export const colorGray5 = \\"rgb(214, 214, 214)\\"; +export const colorGray6 = \\"rgb(204, 204, 204)\\"; +export const colorGray7 = \\"rgb(153, 153, 153)\\"; +export const colorGray8 = \\"rgb(102, 102, 102)\\"; +export const colorGray9 = \\"rgb(68, 68, 68)\\"; +export const colorTextBrandHighlight = \\"rgb(242, 47, 70)\\"; +export const colorTextBrandHighlightDark = \\"rgb(235, 15, 41)\\"; +export const colorTextBrandPrimary = \\"rgb(255, 255, 255)\\"; +export const colorTextDefault = \\"rgb(68, 68, 68)\\"; +export const colorTextError = \\"rgb(194, 37, 55)\\"; +export const colorTextIconDefault = \\"rgb(68, 68, 68)\\"; +export const colorTextInverse = \\"rgb(255, 255, 255)\\"; +export const colorTextInverseWeak = \\"rgb(235, 235, 235)\\"; +export const colorTextLabel = \\"rgb(68, 68, 68)\\"; +export const colorTextLink = \\"rgb(0, 112, 204)\\"; +export const colorTextLinkActive = \\"rgb(0, 89, 163)\\"; +export const colorTextLinkDestructive = \\"rgb(194, 37, 55)\\"; +export const colorTextLinkDestructiveActive = \\"rgb(155, 29, 44)\\"; +export const colorTextLinkDestructiveDisabled = \\"rgb(236, 187, 193)\\"; +export const colorTextLinkDestructiveFocus = \\"rgb(174, 33, 49)\\"; +export const colorTextLinkDestructiveHover = \\"rgb(174, 33, 49)\\"; +export const colorTextLinkDisabled = \\"rgb(102, 169, 224)\\"; +export const colorTextLinkFocus = \\"rgb(0, 97, 192)\\"; +export const colorTextLinkHover = \\"rgb(0, 97, 192)\\"; +export const colorTextPlaceholder = \\"rgb(102, 102, 102)\\"; +export const colorTextSuccess = \\"rgb(100, 209, 138)\\"; +export const colorTextWarning = \\"rgb(249, 177, 71)\\"; +export const colorTextWeak = \\"rgb(230, 230, 230)\\"; +export const fontSize0 = \\"0.6875rem\\"; +export const fontSize1 = \\"0.75rem\\"; +export const fontSize2 = \\"0.8125rem\\"; +export const fontSize3 = \\"0.875rem\\"; +export const fontSize4 = \\"0.9375rem\\"; +export const fontSize5 = \\"1rem\\"; +export const fontSize6 = \\"1.125rem\\"; +export const fontSize7 = \\"1.25rem\\"; +export const fontSize8 = \\"1.875rem\\"; +export const fontSize9 = \\"2.25rem\\"; +export const space0 = \\"0.25rem\\"; +export const space1 = \\"0.5rem\\"; +export const space10 = \\"2.75rem\\"; +export const space11 = \\"3rem\\"; +export const space12 = \\"3.25rem\\"; +export const space13 = \\"3.5rem\\"; +export const space14 = \\"3.75rem\\"; +export const space15 = \\"4rem\\"; +export const space2 = \\"0.75rem\\"; +export const space3 = \\"1rem\\"; +export const space4 = \\"1.25rem\\"; +export const space5 = \\"1.5rem\\"; +export const space6 = \\"1.75rem\\"; +export const space7 = \\"2rem\\"; +export const space8 = \\"2.25rem\\"; +export const space9 = \\"2.5rem\\"; +export const backgroundColors = { +colorBackgroundBody, +colorBackgroundBrandHighlight, +colorBackgroundBrandHighlightDark, +colorBackgroundBrandHighlightDarker, +colorBackgroundBrandPrimary, +colorBackgroundDefault, +colorBackgroundElementSelection, +colorBackgroundError, +colorBackgroundErrorDark, +colorBackgroundErrorLight, +colorBackgroundRowActive, +colorBackgroundRowFocus, +colorBackgroundRowHover, +colorBackgroundRowSelected, +colorBackgroundRowStriped, +colorBackgroundSuccess, +colorBackgroundSuccessDark, +colorBackgroundSuccessLight, +colorBackgroundWarning, +colorBackgroundWarningDark, +colorBackgroundWarningLight, +}; +export const colors = { +colorBrandHighlight, +colorBrandHighlightDark, +colorBrandPrimary, +colorGray1, +colorGray10, +colorGray2, +colorGray3, +colorGray4, +colorGray5, +colorGray6, +colorGray7, +colorGray8, +colorGray9, +}; +export const fontSizes = { +fontSize0, +fontSize1, +fontSize2, +fontSize3, +fontSize4, +fontSize5, +fontSize6, +fontSize7, +fontSize8, +fontSize9, +}; +export const spacings = { +space0, +space1, +space10, +space11, +space12, +space13, +space14, +space15, +space2, +space3, +space4, +space5, +space6, +space7, +space8, +space9, +}; +export const textColors = { +colorTextBrandHighlight, +colorTextBrandHighlightDark, +colorTextBrandPrimary, +colorTextDefault, +colorTextError, +colorTextIconDefault, +colorTextInverse, +colorTextInverseWeak, +colorTextLabel, +colorTextLink, +colorTextLinkActive, +colorTextLinkDestructive, +colorTextLinkDestructiveActive, +colorTextLinkDestructiveDisabled, +colorTextLinkDestructiveFocus, +colorTextLinkDestructiveHover, +colorTextLinkDisabled, +colorTextLinkFocus, +colorTextLinkHover, +colorTextPlaceholder, +colorTextSuccess, +colorTextWarning, +colorTextWeak, +};" +`; diff --git a/packages/paste-design-tokens/formatters/__tests__/__snapshots__/sketchpalette.spec.ts.snap b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/sketchpalette.spec.ts.snap new file mode 100644 index 0000000000..35b2a69af1 --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/__snapshots__/sketchpalette.spec.ts.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`sketchPaletteTokenFormatter should return sketch palette color formatted tokens 1`] = `"{\\"compatibleVersion\\":\\"2.0\\",\\"pluginVersion\\":\\"2.21\\",\\"colors\\":[{\\"name\\":\\"color_background_body\\",\\"red\\":1,\\"green\\":1,\\"blue\\":1,\\"alpha\\":1},{\\"name\\":\\"color_background_brand_highlight\\",\\"red\\":0.9490196078431372,\\"green\\":0.1843137254901961,\\"blue\\":0.27450980392156865,\\"alpha\\":1},{\\"name\\":\\"color_background_brand_highlight_dark\\",\\"red\\":0.9215686274509803,\\"green\\":0.058823529411764705,\\"blue\\":0.1607843137254902,\\"alpha\\":1},{\\"name\\":\\"color_background_brand_highlight_darker\\",\\"red\\":0.7607843137254902,\\"green\\":0.1450980392156863,\\"blue\\":0.21568627450980393,\\"alpha\\":1},{\\"name\\":\\"color_background_brand_primary\\",\\"red\\":0.050980392156862744,\\"green\\":0.07058823529411765,\\"blue\\":0.16862745098039217,\\"alpha\\":1},{\\"name\\":\\"color_background_default\\",\\"red\\":0.9647058823529412,\\"green\\":0.9647058823529412,\\"blue\\":0.9647058823529412,\\"alpha\\":1},{\\"name\\":\\"color_background_element_selection\\",\\"red\\":0.9254901960784314,\\"green\\":0.7333333333333333,\\"blue\\":0.7568627450980392,\\"alpha\\":1},{\\"name\\":\\"color_background_error\\",\\"red\\":0.807843137254902,\\"green\\":0.3137254901960784,\\"blue\\":0.37254901960784315,\\"alpha\\":1},{\\"name\\":\\"color_background_error_dark\\",\\"red\\":0.6823529411764706,\\"green\\":0.12941176470588237,\\"blue\\":0.19215686274509805,\\"alpha\\":1},{\\"name\\":\\"color_background_error_light\\",\\"red\\":0.7607843137254902,\\"green\\":0.1450980392156863,\\"blue\\":0.21568627450980393,\\"alpha\\":1},{\\"name\\":\\"color_background_row_active\\",\\"red\\":0.9019607843137255,\\"green\\":0.9019607843137255,\\"blue\\":0.9019607843137255,\\"alpha\\":1},{\\"name\\":\\"color_background_row_focus\\",\\"red\\":0.8392156862745098,\\"green\\":0.8392156862745098,\\"blue\\":0.8392156862745098,\\"alpha\\":1},{\\"name\\":\\"color_background_row_hover\\",\\"red\\":0.8392156862745098,\\"green\\":0.8392156862745098,\\"blue\\":0.8392156862745098,\\"alpha\\":1},{\\"name\\":\\"color_background_row_selected\\",\\"red\\":0.9019607843137255,\\"green\\":0.9019607843137255,\\"blue\\":0.9019607843137255,\\"alpha\\":1},{\\"name\\":\\"color_background_row_striped\\",\\"red\\":0.9215686274509803,\\"green\\":0.9215686274509803,\\"blue\\":0.9215686274509803,\\"alpha\\":1},{\\"name\\":\\"color_background_success\\",\\"red\\":0.39215686274509803,\\"green\\":0.8196078431372549,\\"blue\\":0.5411764705882353,\\"alpha\\":1},{\\"name\\":\\"color_background_success_dark\\",\\"red\\":0.3137254901960784,\\"green\\":0.6549019607843137,\\"blue\\":0.43137254901960786,\\"alpha\\":1},{\\"name\\":\\"color_background_success_light\\",\\"red\\":0.6352941176470588,\\"green\\":0.8901960784313725,\\"blue\\":0.7215686274509804,\\"alpha\\":1},{\\"name\\":\\"color_background_warning\\",\\"red\\":0.984313725490196,\\"green\\":0.8156862745098039,\\"blue\\":0.5647058823529412,\\"alpha\\":1},{\\"name\\":\\"color_background_warning_dark\\",\\"red\\":0.7803921568627451,\\"green\\":0.5529411764705883,\\"blue\\":0.2196078431372549,\\"alpha\\":1},{\\"name\\":\\"color_background_warning_light\\",\\"red\\":0.9764705882352941,\\"green\\":0.6941176470588235,\\"blue\\":0.2784313725490196,\\"alpha\\":1},{\\"name\\":\\"color_brand_highlight\\",\\"red\\":0.9490196078431372,\\"green\\":0.1843137254901961,\\"blue\\":0.27450980392156865,\\"alpha\\":1},{\\"name\\":\\"color_brand_highlight_dark\\",\\"red\\":0.9215686274509803,\\"green\\":0.058823529411764705,\\"blue\\":0.1607843137254902,\\"alpha\\":1},{\\"name\\":\\"color_brand_primary\\",\\"red\\":0.050980392156862744,\\"green\\":0.07058823529411765,\\"blue\\":0.16862745098039217,\\"alpha\\":1},{\\"name\\":\\"color_gray_1\\",\\"red\\":1,\\"green\\":1,\\"blue\\":1,\\"alpha\\":1},{\\"name\\":\\"color_gray_10\\",\\"red\\":0.13333333333333333,\\"green\\":0.13333333333333333,\\"blue\\":0.13333333333333333,\\"alpha\\":1},{\\"name\\":\\"color_gray_2\\",\\"red\\":0.9647058823529412,\\"green\\":0.9647058823529412,\\"blue\\":0.9647058823529412,\\"alpha\\":1},{\\"name\\":\\"color_gray_3\\",\\"red\\":0.9215686274509803,\\"green\\":0.9215686274509803,\\"blue\\":0.9215686274509803,\\"alpha\\":1},{\\"name\\":\\"color_gray_4\\",\\"red\\":0.9019607843137255,\\"green\\":0.9019607843137255,\\"blue\\":0.9019607843137255,\\"alpha\\":1},{\\"name\\":\\"color_gray_5\\",\\"red\\":0.8392156862745098,\\"green\\":0.8392156862745098,\\"blue\\":0.8392156862745098,\\"alpha\\":1},{\\"name\\":\\"color_gray_6\\",\\"red\\":0.8,\\"green\\":0.8,\\"blue\\":0.8,\\"alpha\\":1},{\\"name\\":\\"color_gray_7\\",\\"red\\":0.6,\\"green\\":0.6,\\"blue\\":0.6,\\"alpha\\":1},{\\"name\\":\\"color_gray_8\\",\\"red\\":0.4,\\"green\\":0.4,\\"blue\\":0.4,\\"alpha\\":1},{\\"name\\":\\"color_gray_9\\",\\"red\\":0.26666666666666666,\\"green\\":0.26666666666666666,\\"blue\\":0.26666666666666666,\\"alpha\\":1},{\\"name\\":\\"color_text_brand_highlight\\",\\"red\\":0.9490196078431372,\\"green\\":0.1843137254901961,\\"blue\\":0.27450980392156865,\\"alpha\\":1},{\\"name\\":\\"color_text_brand_highlight_dark\\",\\"red\\":0.9215686274509803,\\"green\\":0.058823529411764705,\\"blue\\":0.1607843137254902,\\"alpha\\":1},{\\"name\\":\\"color_text_brand_primary\\",\\"red\\":1,\\"green\\":1,\\"blue\\":1,\\"alpha\\":1},{\\"name\\":\\"color_text_default\\",\\"red\\":0.26666666666666666,\\"green\\":0.26666666666666666,\\"blue\\":0.26666666666666666,\\"alpha\\":1},{\\"name\\":\\"color_text_error\\",\\"red\\":0.7607843137254902,\\"green\\":0.1450980392156863,\\"blue\\":0.21568627450980393,\\"alpha\\":1},{\\"name\\":\\"color_text_icon_default\\",\\"red\\":0.26666666666666666,\\"green\\":0.26666666666666666,\\"blue\\":0.26666666666666666,\\"alpha\\":1},{\\"name\\":\\"color_text_inverse\\",\\"red\\":1,\\"green\\":1,\\"blue\\":1,\\"alpha\\":1},{\\"name\\":\\"color_text_inverse_weak\\",\\"red\\":0.9215686274509803,\\"green\\":0.9215686274509803,\\"blue\\":0.9215686274509803,\\"alpha\\":1},{\\"name\\":\\"color_text_label\\",\\"red\\":0.26666666666666666,\\"green\\":0.26666666666666666,\\"blue\\":0.26666666666666666,\\"alpha\\":1},{\\"name\\":\\"color_text_link\\",\\"red\\":0,\\"green\\":0.4392156862745098,\\"blue\\":0.8,\\"alpha\\":1},{\\"name\\":\\"color_text_link_active\\",\\"red\\":0,\\"green\\":0.34901960784313724,\\"blue\\":0.6392156862745098,\\"alpha\\":1},{\\"name\\":\\"color_text_link_destructive\\",\\"red\\":0.7607843137254902,\\"green\\":0.1450980392156863,\\"blue\\":0.21568627450980393,\\"alpha\\":1},{\\"name\\":\\"color_text_link_destructive_active\\",\\"red\\":0.6078431372549019,\\"green\\":0.11372549019607843,\\"blue\\":0.17254901960784313,\\"alpha\\":1},{\\"name\\":\\"color_text_link_destructive_disabled\\",\\"red\\":0.9254901960784314,\\"green\\":0.7333333333333333,\\"blue\\":0.7568627450980392,\\"alpha\\":1},{\\"name\\":\\"color_text_link_destructive_focus\\",\\"red\\":0.6823529411764706,\\"green\\":0.12941176470588237,\\"blue\\":0.19215686274509805,\\"alpha\\":1},{\\"name\\":\\"color_text_link_destructive_hover\\",\\"red\\":0.6823529411764706,\\"green\\":0.12941176470588237,\\"blue\\":0.19215686274509805,\\"alpha\\":1},{\\"name\\":\\"color_text_link_disabled\\",\\"red\\":0.4,\\"green\\":0.6627450980392157,\\"blue\\":0.8784313725490196,\\"alpha\\":1},{\\"name\\":\\"color_text_link_focus\\",\\"red\\":0,\\"green\\":0.3803921568627451,\\"blue\\":0.7529411764705882,\\"alpha\\":1},{\\"name\\":\\"color_text_link_hover\\",\\"red\\":0,\\"green\\":0.3803921568627451,\\"blue\\":0.7529411764705882,\\"alpha\\":1},{\\"name\\":\\"color_text_placeholder\\",\\"red\\":0.4,\\"green\\":0.4,\\"blue\\":0.4,\\"alpha\\":1},{\\"name\\":\\"color_text_success\\",\\"red\\":0.39215686274509803,\\"green\\":0.8196078431372549,\\"blue\\":0.5411764705882353,\\"alpha\\":1},{\\"name\\":\\"color_text_warning\\",\\"red\\":0.9764705882352941,\\"green\\":0.6941176470588235,\\"blue\\":0.2784313725490196,\\"alpha\\":1},{\\"name\\":\\"color_text_weak\\",\\"red\\":0.9019607843137255,\\"green\\":0.9019607843137255,\\"blue\\":0.9019607843137255,\\"alpha\\":1}],\\"gradients\\":[],\\"images\\":[]}"`; diff --git a/packages/paste-design-tokens/formatters/__tests__/d.ts.spec.ts b/packages/paste-design-tokens/formatters/__tests__/d.ts.spec.ts new file mode 100644 index 0000000000..acc0b18d9e --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/d.ts.spec.ts @@ -0,0 +1,25 @@ +import * as theo from 'theo'; +import {dTSTokenFormat} from '../d.ts'; + +theo.registerFormat('d.ts', dTSTokenFormat); + +describe('dTSFormatter', () => { + test('should return typescript definitions formatted tokens', () => { + theo + .convert({ + transform: { + type: 'web', + file: './packages/paste-design-tokens/formatters/__fixtures__/index.yml', + }, + format: { + // @ts-ignore Theo isn't typed for custom format types + type: 'd.ts', + }, + }) + .then((dTS: string) => { + expect(dTS).toMatchSnapshot(); + return true; + }) + .catch((error: string) => console.log(`Something went wrong: ${error}`)); + }); +}); diff --git a/packages/paste-design-tokens/formatters/__tests__/es6.spec.ts b/packages/paste-design-tokens/formatters/__tests__/es6.spec.ts new file mode 100644 index 0000000000..f11a25cd1e --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/es6.spec.ts @@ -0,0 +1,25 @@ +import * as theo from 'theo'; +import {es6TokenFormat} from '../es6'; + +theo.registerFormat('es6.js', es6TokenFormat); + +describe('es6Formatter', () => { + test('should return es6 formatted tokens', () => { + theo + .convert({ + transform: { + type: 'web', + file: './packages/paste-design-tokens/formatters/__fixtures__/index.yml', + }, + format: { + // @ts-ignore Theo isn't typed for custom format types + type: 'es6.js', + }, + }) + .then((es6JS: string) => { + expect(es6JS).toMatchSnapshot(); + return true; + }) + .catch((error: string) => console.log(`Something went wrong: ${error}`)); + }); +}); diff --git a/packages/paste-design-tokens/formatters/__tests__/sketchpalette.spec.ts b/packages/paste-design-tokens/formatters/__tests__/sketchpalette.spec.ts new file mode 100644 index 0000000000..273041e20c --- /dev/null +++ b/packages/paste-design-tokens/formatters/__tests__/sketchpalette.spec.ts @@ -0,0 +1,25 @@ +import * as theo from 'theo'; +import {sketchpaletteTokenFormat} from '../sketchpalette'; + +theo.registerFormat('sketchpalette', sketchpaletteTokenFormat); + +describe('sketchPaletteTokenFormatter', () => { + test('should return sketch palette color formatted tokens', () => { + theo + .convert({ + transform: { + type: 'web', + file: './packages/paste-design-tokens/formatters/__fixtures__/colors.yml', + }, + format: { + // @ts-ignore Theo isn't typed for custom format types + type: 'sketchpalette', + }, + }) + .then((sketchPalette: string) => { + expect(sketchPalette).toMatchSnapshot(); + return true; + }) + .catch((error: string) => console.log(`Something went wrong: ${error}`)); + }); +}); diff --git a/packages/paste-design-tokens/formatters/common.ts b/packages/paste-design-tokens/formatters/common.ts new file mode 100644 index 0000000000..ace1f2923c --- /dev/null +++ b/packages/paste-design-tokens/formatters/common.ts @@ -0,0 +1,31 @@ +import * as lodash from 'lodash'; +import {ImmutableStyleMap} from 'theo'; +import {Token} from '../types'; +import getTokenCategories from '../utils/getTokenCategories'; +import formatSingleTokensWithTemplate from '../utils/formatSingleTokensWithTemplate'; +import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate'; + +export const tokenTemplate = ({name, value}: {name: string; value: string}): string => + `const ${lodash.camelCase(name)} = "${value.replace(/"/g, '\\"')}";`; + +export const tokenExportTemplate = ({name}: {name: string; value: string}): string => `${lodash.camelCase(name)},`; +export const categoryTemplate = (categoryName: string, props: Token[]): string => `${lodash.camelCase(categoryName)}: { +${props.map(prop => `${lodash.camelCase(prop.name)},`).join('\n')} +},`; + +export const commonTokenFormat = (result: ImmutableStyleMap): string => { + const singleTokens = formatSingleTokensWithTemplate(result, tokenTemplate); + const singleTokensExport = formatSingleTokensWithTemplate(result, tokenExportTemplate); + + const categories = getTokenCategories(result); + + const groupedTokens = formatGroupTokensWithTemplate(result, categories, categoryTemplate); + + return `${singleTokens} + + module.exports = { + ${singleTokensExport} + ${groupedTokens} + } +`; +}; diff --git a/packages/paste-design-tokens/formatters/d.ts.ts b/packages/paste-design-tokens/formatters/d.ts.ts new file mode 100644 index 0000000000..9940b6a4c7 --- /dev/null +++ b/packages/paste-design-tokens/formatters/d.ts.ts @@ -0,0 +1,25 @@ +import * as lodash from 'lodash'; +import {ImmutableStyleMap} from 'theo'; +import {Token} from '../types'; +import getTokenCategories from '../utils/getTokenCategories'; +import formatSingleTokensWithTemplate from '../utils/formatSingleTokensWithTemplate'; +import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate'; + +export const tokenTemplate = ({name, value}: {name: string; value: string}): string => + `export declare const ${lodash.camelCase(name)} = "${value}";`; + +const categoryTemplate = (categoryName: string, props: Token[]): string => `export declare const ${lodash.camelCase( + categoryName +)}: { +${props.map(prop => ` ${lodash.camelCase(prop.name)}: 'string';`).join('\n')} +};`; + +export const dTSTokenFormat = (result: ImmutableStyleMap): string => { + const singleTokens = formatSingleTokensWithTemplate(result, tokenTemplate); + + const categories = getTokenCategories(result); + + const groupedTokens = formatGroupTokensWithTemplate(result, categories, categoryTemplate); + + return [singleTokens, groupedTokens].join('\n'); +}; diff --git a/packages/paste-design-tokens/formatters/es6.ts b/packages/paste-design-tokens/formatters/es6.ts new file mode 100644 index 0000000000..824601dcb5 --- /dev/null +++ b/packages/paste-design-tokens/formatters/es6.ts @@ -0,0 +1,25 @@ +import * as lodash from 'lodash'; +import {ImmutableStyleMap} from 'theo'; +import {Token} from '../types'; +import getTokenCategories from '../utils/getTokenCategories'; +import formatSingleTokensWithTemplate from '../utils/formatSingleTokensWithTemplate'; +import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate'; + +export const tokenTemplate = ({name, value}: {name: string; value: string}): string => + `export const ${lodash.camelCase(name)} = "${value.replace(/"/g, '\\"')}";`; + +export const categoryTemplate = (categoryName: string, props: Token[]): string => `export const ${lodash.camelCase( + categoryName +)} = { +${props.map(prop => `${lodash.camelCase(prop.name)},`).join('\n')} +};`; + +export const es6TokenFormat = (result: ImmutableStyleMap): string => { + const singleTokens = formatSingleTokensWithTemplate(result, tokenTemplate); + + const categories = getTokenCategories(result); + + const groupedTokens = formatGroupTokensWithTemplate(result, categories, categoryTemplate); + + return [singleTokens, groupedTokens].join('\n'); +}; diff --git a/packages/paste-design-tokens/formatters/gatsby.json.ts b/packages/paste-design-tokens/formatters/gatsby.json.ts new file mode 100644 index 0000000000..4cae17380a --- /dev/null +++ b/packages/paste-design-tokens/formatters/gatsby.json.ts @@ -0,0 +1,21 @@ +import {ImmutableStyleMap} from 'theo'; +import {Token} from '../types'; +import getTokenCategories from '../utils/getTokenCategories'; +import formatGroupTokensWithTemplate from '../utils/formatGroupTokensWithTemplate'; + +export const categoryTemplate = (categoryName: string, props: Token[]): string => { + return `{ + "categoryName": "${categoryName}", + "tokens": ${JSON.stringify(props)} + },`; +}; + +export const gatsbyJsonTokenFormat = (result: ImmutableStyleMap): string => { + const categories = getTokenCategories(result); + + const groupedTokens = formatGroupTokensWithTemplate(result, categories, categoryTemplate); + + return `{ + "tokens": [${groupedTokens.substring(0, groupedTokens.length - 1)}] + }`; +}; diff --git a/packages/paste-design-tokens/formatters/sketchpalette.ts b/packages/paste-design-tokens/formatters/sketchpalette.ts new file mode 100644 index 0000000000..0ddef4bb6e --- /dev/null +++ b/packages/paste-design-tokens/formatters/sketchpalette.ts @@ -0,0 +1,57 @@ +import color from 'color'; +import * as Immutable from 'immutable'; +import {ImmutableStyleMap} from 'theo'; + +interface SketchPaletteColor { + name: string; + red?: number; + green?: number; + blue?: number; + alpha?: number; +} + +interface ColorRGB { + model: string; + color: string[]; + valpha: string; +} + +const convertToSketchPaletteColor = (input: string): Partial => { + const convertedColor: ColorRGB = color.rgb(input); + + return { + red: parseInt(convertedColor.color[0], 10) / 255, + green: parseInt(convertedColor.color[1], 10) / 255, + blue: parseInt(convertedColor.color[2], 10) / 255, + alpha: parseInt(convertedColor.valpha, 10), + }; +}; + +const convertColorArray = (result: ImmutableStyleMap): SketchPaletteColor[] => + result + .get('props') + .sortBy(prop => { + if (prop !== undefined) { + return prop.get('name'); + } + }) + .map(prop => { + if (prop === undefined) return Immutable.Map(); + const value = prop.get('value'); + const name = prop.get('name'); + if (typeof value !== 'string') { + throw new TypeError(`[SketchPallete.ts] Value must be of type "string".`); + } + return Immutable.Map({name}).merge(convertToSketchPaletteColor(value)); + }) + .toJS(); + +export const sketchpaletteTokenFormat = (result: ImmutableStyleMap): string => { + return JSON.stringify({ + compatibleVersion: '2.0', + pluginVersion: '2.21', + colors: convertColorArray(result), + gradients: [], + images: [], + }); +}; diff --git a/packages/paste-design-tokens/gulpfile.ts b/packages/paste-design-tokens/gulpfile.ts new file mode 100644 index 0000000000..c8b11e66fb --- /dev/null +++ b/packages/paste-design-tokens/gulpfile.ts @@ -0,0 +1,295 @@ +import * as gulp from 'gulp'; +import * as theo from 'theo'; +import gulpTheo from 'gulp-theo'; +import del from 'del'; +import {sketchpaletteTokenFormat} from './formatters/sketchpalette'; +import {gatsbyJsonTokenFormat} from './formatters/gatsby.json'; +import {es6TokenFormat} from './formatters/es6'; +import {dTSTokenFormat} from './formatters/d.ts'; +import {commonTokenFormat} from './formatters/common'; + +// Browsersync isn't typed correctly so we import the old way +const browserSync = require('browser-sync'); + +const paths = { + aliases: './tokens/aliases', + dist: './dist', + docs: './docs', + formatters: './formatters', + globals: './tokens/global', + tokensDir: './tokens', + tokensEntry: './tokens/**/tokens.yml', +}; + +theo.registerFormat('common.js', commonTokenFormat); +theo.registerFormat('es6.js', es6TokenFormat); +theo.registerFormat('common.d.ts', dTSTokenFormat); +theo.registerFormat('es6.d.ts', dTSTokenFormat); +theo.registerFormat('sketchpalette', sketchpaletteTokenFormat); +theo.registerFormat('gatsby.json', gatsbyJsonTokenFormat); +theo.registerTransform('web', ['color/rgb', 'color/hex']); + +gulp.task('clean', () => del([paths.dist])); + +gulp.task('tokens:less', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web'}, + format: {type: 'less'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:css-custom-props', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web'}, + format: {type: 'custom-properties.css'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:scss', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web'}, + format: {type: 'default.scss'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:scssmap', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web'}, + format: {type: 'map.scss'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:json', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web'}, + format: {type: 'json'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:ios', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'ios'}, + format: {type: 'ios.json'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:android', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'android'}, + format: {type: 'android.xml'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:raw', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'raw'}, + format: {type: 'raw.json'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:sketchpalette', () => + gulp + .src(`${paths.tokensDir}/**/sketch.yml`) + .pipe( + gulpTheo({ + transform: {type: 'web', includeMeta: true}, + format: {type: 'sketchpalette'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:commonjs', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web', includeMeta: true}, + format: {type: 'common.js'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:es6', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web', includeMeta: true}, + format: {type: 'es6.js'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:common:dts', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web', includeMeta: true}, + format: {type: 'common.d.ts'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:es6:dts', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web', includeMeta: true}, + format: {type: 'es6.d.ts'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('tokens:gatsby', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web', includeMeta: true}, + format: {type: 'gatsby.json'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.dist)) +); + +gulp.task('docs', () => + gulp + .src(paths.tokensEntry) + .pipe( + gulpTheo({ + transform: {type: 'web'}, + format: {type: 'html'}, + }) + ) + .on('error', (err: string) => { + throw new Error(err); + }) + .pipe(gulp.dest(paths.docs)) +); + +gulp.task( + 'tokens:all', + gulp.parallel( + 'tokens:less', + 'tokens:css-custom-props', + 'tokens:scss', + 'tokens:scssmap', + 'tokens:json', + 'tokens:commonjs', + 'tokens:common:dts', + 'tokens:es6', + 'tokens:es6:dts', + 'tokens:ios', + 'tokens:android', + 'tokens:raw', + 'tokens:sketchpalette', + 'tokens:gatsby' + ) +); + +gulp.task('browsersync', () => + browserSync({ + open: false, + notify: false, + server: 'docs', + startPath: 'tokens.html', + }) +); + +gulp.task('watch', () => { + gulp.watch([`${paths.aliases}/**/*.*`, `${paths.globals}/**/*.*`], gulp.series('tokens:all', 'docs')); + gulp.watch([`${paths.docs}/**/*.*`]).on('change', browserSync.reload); +}); + +gulp.task('dev', gulp.series('clean', 'tokens:all', 'docs', gulp.parallel('watch', 'browsersync'))); + +gulp.task('default', gulp.series('clean', 'tokens:all', 'docs')); diff --git a/packages/paste-design-tokens/package.json b/packages/paste-design-tokens/package.json new file mode 100644 index 0000000000..c4851caf16 --- /dev/null +++ b/packages/paste-design-tokens/package.json @@ -0,0 +1,39 @@ +{ + "name": "@paste/design-tokens", + "version": "2.2.0", + "description": "Design Tokens for the Paste Design System", + "main": "dist/tokens.common.js", + "module": "dist/tokens.es6.js", + "types": "dist/tokens.common.d.ts", + "author": "Twilio", + "license": "ISC", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && gulp", + "build:dev": "yarn clean && gulp dev", + "clean": "rm -rf ./dist", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit", + "tokens": "gulp default", + "test": "jest" + }, + "devDependencies": { + "@types/browser-sync": "^0.0.43", + "@types/gulp": "^4.0.6", + "@types/lodash": "^4.14.123", + "@types/node": "^11.11.3", + "@types/theo": "^8.1.3", + "browser-sync": "^2.26.3", + "color": "^3.1.0", + "del": "^4.1.1", + "gulp": "^4.0.0", + "gulp-cli": "^2.0.1", + "gulp-theo": "^2.0.0", + "immutable": "^4.0.0-rc.12", + "lodash": "^4.17.11", + "theo": "^7.0.1" + } +} diff --git a/packages/paste-design-tokens/tokens/aliases/border-radius.yml b/packages/paste-design-tokens/tokens/aliases/border-radius.yml new file mode 100644 index 0000000000..e8f2ef3d1a --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/border-radius.yml @@ -0,0 +1,6 @@ +aliases: + border-radius-0: "0" + border-radius-10: "3px" + border-radius-20: "4px" + border-radius-30: "8px" + border-radius-circle: "50%" diff --git a/packages/paste-design-tokens/tokens/aliases/border-width.yml b/packages/paste-design-tokens/tokens/aliases/border-width.yml new file mode 100644 index 0000000000..7261a983e0 --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/border-width.yml @@ -0,0 +1,4 @@ +aliases: + border-width-0: "0" + border-width-10: "1px" + border-width-20: "2px" diff --git a/packages/paste-design-tokens/tokens/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml new file mode 100644 index 0000000000..ab29fc8993 --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/box-shadow.yml @@ -0,0 +1,8 @@ +imports: + - ./color-palette.yml + - ./offset.yml +aliases: + shadow-elevation-0: "none" + shadow-elevation-10: "{!offset-0} {!offset-10}px {!offset-20}px {!offset-0} {!palette-gray-transparent-30}" + shadow-elevation-20: "{!offset-0} {!offset-40}px {!offset-60}px {!offset-0} {!palette-gray-transparent-20}" + shadow-elevation-30: "{!offset-0} {!offset-50}px {!offset-80}px {!offset-20} {!palette-gray-transparent-20}" diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml new file mode 100644 index 0000000000..4263a5cb31 --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml @@ -0,0 +1,73 @@ +aliases: + ## Blues + palette-blue-10: "#f6fcff" + palette-blue-20: "#eff6fb" + palette-blue-30: "#dceaf4" + palette-blue-40: "#b3d3e9" + palette-blue-50: "#56a4d9" + palette-blue-60: "#0075c3" + palette-blue-70: "#005ea6" + palette-blue-80: "#003e82" + palette-blue-90: "#001f57" + palette-blue-100: "#00092b" + + ## Grays + palette-gray-0: "#ffffff" + palette-gray-10: "#fafafa" + palette-gray-20: "#f8f8f9" + palette-gray-30: "#f2f3f4" + palette-gray-40: "#e4e7e9" + palette-gray-50: "#c8cccf" + palette-gray-60: "#888c8e" + palette-gray-70: "#666a6d" + palette-gray-80: "#4f5355" + palette-gray-90: "#424547" + palette-gray-100: "#282a2b" + + ## Grays transparent based on darkest gray + palette-gray-transparent-10: "rgba(40, 42, 43, 0.1)" + palette-gray-transparent-20: "rgba(40, 42, 43, 0.2)" + palette-gray-transparent-30: "rgba(40, 42, 43, 0.3)" + palette-gray-transparent-40: "rgba(40, 42, 43, 0.4)" + palette-gray-transparent-50: "rgba(40, 42, 43, 0.5)" + palette-gray-transparent-60: "rgba(40, 42, 43, 0.6)" + palette-gray-transparent-70: "rgba(40, 42, 43, 0.7)" + palette-gray-transparent-80: "rgba(40, 42, 43, 0.8)" + palette-gray-transparent-90: "rgba(40, 42, 43, 0.9)" + palette-gray-transparent-100: "rgba(40, 42, 43, 1)" + + ## Greens + palette-green-10: "#e0ffef" + palette-green-20: "#c7ffe2" + palette-green-30: "#8eeebc" + palette-green-40: "#5fe7a1" + palette-green-50: "#23bf6e" + palette-green-60: "#00994a" + palette-green-70: "#00803d" + palette-green-80: "#006631" + palette-green-90: "#004d25" + palette-green-100: "#00361a" + + ## Oranges + palette-orange-10: "#fff5eb" + palette-orange-20: "#fdd5bf" + palette-orange-30: "#fbb68f" + palette-orange-40: "#fa9c66" + palette-orange-50: "#f28510" + palette-orange-60: "#e46216" + palette-orange-70: "#a83e00" + palette-orange-80: "#762e04" + palette-orange-90: "#451b02" + palette-orange-100: "#2c1102" + + ## Reds + palette-red-10: "#fff6f6" + palette-red-20: "#fcf0f0" + palette-red-30: "#f5dddd" + palette-red-40: "#ecb6b6" + palette-red-50: "#de5858" + palette-red-60: "#cb0000" + palette-red-70: "#b20600" + palette-red-80: "#921200" + palette-red-90: "#6e1b00" + palette-red-100: "#471d00" diff --git a/packages/paste-design-tokens/tokens/aliases/color.yml b/packages/paste-design-tokens/tokens/aliases/color.yml new file mode 100644 index 0000000000..9e507f10e6 --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/color.yml @@ -0,0 +1,5 @@ +aliases: + amaranth: "#F22F46" + black: "#000000" + midnight: "#233659" + white: "#FFFFFF" diff --git a/packages/paste-design-tokens/tokens/aliases/font-family.yml b/packages/paste-design-tokens/tokens/aliases/font-family.yml new file mode 100644 index 0000000000..2e9f54d607 --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/font-family.yml @@ -0,0 +1,3 @@ +aliases: + font-family-10: "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif" + font-family-20: "'Fira Mono', 'Courier New', Courier, monospace" diff --git a/packages/paste-design-tokens/tokens/aliases/font-size.yml b/packages/paste-design-tokens/tokens/aliases/font-size.yml new file mode 100644 index 0000000000..2a992cf82b --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/font-size.yml @@ -0,0 +1,11 @@ +aliases: + font-size-10: "0.75rem" #12px + font-size-20: "0.875rem" #14px + font-size-30: "1rem" #16px + font-size-40: "1.125rem" #18px + font-size-50: "1.25rem" #20px + font-size-60: "1.5rem" #24px + font-size-70: "1.5rem" #24px + font-size-80: "1.5rem" #24px + font-size-90: "1.5rem" #24px + font-size-100: "1.5rem" #24px diff --git a/packages/paste-design-tokens/tokens/aliases/font-weight.yml b/packages/paste-design-tokens/tokens/aliases/font-weight.yml new file mode 100644 index 0000000000..936b991e3d --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/font-weight.yml @@ -0,0 +1,6 @@ +aliases: + font-weight-light: 300 + font-weight-normal: 400 + font-weight-medium: 500 + font-weight-semibold: 600 + font-weight-bold: 700 diff --git a/packages/paste-design-tokens/tokens/aliases/offset.yml b/packages/paste-design-tokens/tokens/aliases/offset.yml new file mode 100644 index 0000000000..6977f295ee --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/offset.yml @@ -0,0 +1,11 @@ +aliases: + offset-0: "0" # Needs to be quoted or will be interpreted as 'false' + offset-10: 2 + offset-20: 4 + offset-30: 6 + offset-40: 8 + offset-50: 12 + offset-60: 16 + offset-70: 20 + offset-80: 24 + offset-90: 32 diff --git a/packages/paste-design-tokens/tokens/aliases/sizing.yml b/packages/paste-design-tokens/tokens/aliases/sizing.yml new file mode 100644 index 0000000000..e235ce87f9 --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/sizing.yml @@ -0,0 +1,26 @@ +aliases: + size-square-0: "0" #0 + size-square-10: "0.5rem" #8px + size-square-20: "0.75rem" #12px + size-square-30: "1rem" #16px + size-square-40: "1.25rem" #20px + size-square-50: "1.5rem" #24px + size-square-60: "1.75rem" #28px + size-square-70: "2rem" #32px + size-square-80: "2.25rem" #36px + size-square-90: "2.5rem" #40px + size-square-100: "3rem" #48px + + size-0: "0" #0 + size-10: "5.5rem" #88px + size-20: "12rem" #192px + size-30: "18.5rem" #296px + size-40: "25rem" #400px + size-50: "31.5rem" #504px + size-60: "38rem" #608px + size-70: "44.5rem" #712px + size-80: "51rem" #816px + size-90: "57.5rem" #920px + size-100: "64rem" #1024px + size-110: "70.5rem" #1128px + size-120: "77rem" #1264px diff --git a/packages/paste-design-tokens/tokens/aliases/spacing.yml b/packages/paste-design-tokens/tokens/aliases/spacing.yml new file mode 100644 index 0000000000..e3fac1ee9b --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/spacing.yml @@ -0,0 +1,22 @@ +aliases: + space-0: "0" #0 + space-10: "0.125rem" #2px + space-20: "0.25rem" #4px + space-30: "0.5rem" #8px + space-40: "0.75rem" #12px + space-50: "1rem" #16px + space-60: "1.25rem" #20px + space-70: "1.5rem" #24px + space-80: "1.75rem" #28px + space-90: "2rem" #32px + space-100: "2.25rem" #36px + space-110: "2.5rem" #40px + space-120: "2.75rem" #44px + space-130: "3rem" #48px + space-140: "3.25rem" #52px + space-150: "3.5rem" #56px + space-160: "3.75rem" #60px + space-170: "4rem" #64px + space-180: "4.25rem" #68px + space-190: "4.5rem" #72px + space-200: "4.75rem" #76px diff --git a/packages/paste-design-tokens/tokens/aliases/z-index.yml b/packages/paste-design-tokens/tokens/aliases/z-index.yml new file mode 100644 index 0000000000..c622ce915f --- /dev/null +++ b/packages/paste-design-tokens/tokens/aliases/z-index.yml @@ -0,0 +1,11 @@ +aliases: + z-index-0: "0" + z-index-10: 4 + z-index-20: 8 + z-index-30: 12 + z-index-40: 16 + z-index-50: 20 + z-index-60: 24 + z-index-70: 28 + z-index-80: 32 + z-index-90: 34 diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml new file mode 100644 index 0000000000..923048493e --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/background-color.yml @@ -0,0 +1,89 @@ +global: + type: color + category: background-color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + # base background + color-background: + value: "{!palette-gray-0}" + comment: Default background color for any container + + # brand backgrounds + color-background-brand: + value: "{!midnight}" + comment: Primary brand background, accessible with inverse text + color-background-brand-highlight: + value: "{!amaranth}" + comment: Highlight brand background, accessible with black text + + # page body + color-background-body: + value: "{!palette-gray-0}" + comment: Background color of the main page body + + # status + color-background-success: + value: "{!palette-green-60}" + comment: Success background color + color-background-success-lightest: + value: "{!palette-green-10}" + comment: Lightest success background color + color-background-warning: + value: "{!palette-orange-60}" + comment: Warning background color + color-background-warning-lightest: + value: "{!palette-orange-10}" + comment: Lightest warning background color + color-background-error: + value: "{!palette-red-60}" + comment: Error background color + color-background-error-lightest: + value: "{!palette-red-10}" + comment: Lightest error background color + + # row backgrounds + color-background-row-striped: + value: "{!palette-gray-20}" + comment: Background color for alternative striped rows + + # primary background + color-background-primary-darker: + value: "{!palette-blue-80}" + comment: Darker background for primary actions or highlights + color-background-primary-dark: + value: "{!palette-blue-70}" + comment: Dark background for primary actions or highlights + color-background-primary: + value: "{!palette-blue-60}" + comment: Background for primary actions or highlights + color-background-primary-light: + value: "{!palette-blue-40}" + comment: Light background for primary actions or highlights + color-background-primary-lighter: + value: "{!palette-blue-30}" + comment: Lighter background for primary actions or highlights + color-background-primary-lightest: + value: "{!palette-blue-10}" + comment: Lightest background for primary actions or highlights + + # destructive backgrounds + color-background-destructive-darker: + value: "{!palette-red-80}" + comment: Darker background for destructive actions or highlights + color-background-destructive-dark: + value: "{!palette-red-70}" + comment: Dark background for destructive actions or highlights + color-background-destructive: + value: "{!palette-red-60}" + comment: Background for destructive actions or highlights + color-background-destructive-light: + value: "{!palette-red-40}" + comment: Light background for destructive actions or highlights + color-background-destructive-lighter: + value: "{!palette-red-30}" + comment: Lighter background for destructive actions or highlights + color-background-destructive-lightest: + value: "{!palette-red-10}" + comment: Lightest background for destructive actions or highlights diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/packages/paste-design-tokens/tokens/global/border-color.yml new file mode 100644 index 0000000000..a12255fd85 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/border-color.yml @@ -0,0 +1,66 @@ +global: + type: color + category: border-color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + color-border: + value: "{!palette-gray-50}" + comment: Default border color + color-border-light: + value: "{!palette-gray-60}" + comment: Light border color + color-border-dark: + value: "{!palette-gray-40}" + comment: Dark border color + + # input borders + color-border-input: + value: "{!palette-gray-60}" + comment: Input border color + color-border-input-hover: + value: "{!palette-blue-60}" + comment: Input hover border color + color-border-input-focus: + value: "{!palette-blue-60}" + comment: Input focus border color + + # primary action borders + color-border-primary-darker: + value: "{!palette-blue-80}" + comment: Darker primary border color + color-border-primary-dark: + value: "{!palette-blue-70}" + comment: Dark primary border color + color-border-primary: + value: "{!palette-blue-60}" + comment: Primary border color + color-border-primary-light: + value: "{!palette-blue-40}" + comment: Light primary border color + color-border-primary-lighter: + value: "{!palette-blue-30}" + comment: Lighter primary border color + + # error borders + color-border-error: + value: "{!palette-red-60}" + comment: Error border color + + # destrcuctive borders + color-border-destructive-darker: + value: "{!palette-red-80}" + comment: Destructive hover border color + color-border-destructive-dark: + value: "{!palette-red-70}" + comment: Destructive focus border color + color-border-destructive: + value: "{!palette-red-60}" + comment: Destructive border color + color-border-destructive-light: + value: "{!palette-red-40}" + comment: Destructive focus border color + color-border-destructive-lighter: + value: "{!palette-red-30}" + comment: Destructive focus border color diff --git a/packages/paste-design-tokens/tokens/global/border-radius.yml b/packages/paste-design-tokens/tokens/global/border-radius.yml new file mode 100644 index 0000000000..8c737d7052 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/border-radius.yml @@ -0,0 +1,21 @@ +global: + type: size + category: radius +imports: + - ../aliases/border-radius.yml +props: + border-radius-0: + value: "{!border-radius-0}" + comment: Border radius reset + border-radius-10: + value: "{!border-radius-10}" + comment: Small border radius + border-radius-20: + value: "{!border-radius-20}" + comment: Large border radius + border-radius-30: + value: "{!border-radius-30}" + comment: Larger border radius + border-radius-circle: + value: "{!border-radius-circle}" + comment: Circular border radius diff --git a/packages/paste-design-tokens/tokens/global/border-width.yml b/packages/paste-design-tokens/tokens/global/border-width.yml new file mode 100644 index 0000000000..fd785410ee --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/border-width.yml @@ -0,0 +1,15 @@ +global: + type: size + category: border-width +imports: + - ../aliases/border-width.yml +props: + border-width-0: + value: "{!border-width-0}" + comment: Border width reset + border-width-10: + value: "{!border-width-10}" + comment: Small border width + border-width-20: + value: "{!border-width-20}" + comment: Large border width diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml new file mode 100644 index 0000000000..b0df78f716 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml @@ -0,0 +1,9 @@ +global: + type: box-shadow + category: shadow +imports: + - ../aliases/box-shadow.yml +props: + shadow-card: + value: "{!shadow-elevation-10}" + comment: Shadow for cards. diff --git a/packages/paste-design-tokens/tokens/global/font-family.yml b/packages/paste-design-tokens/tokens/global/font-family.yml new file mode 100644 index 0000000000..4f4005814c --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/font-family.yml @@ -0,0 +1,10 @@ +global: + category: font + type: font +imports: + - ../aliases/font-family.yml +props: + font-family-text: + value: "{!font-family-10}" + font-family-code: + value: "{!font-family-20}" diff --git a/packages/paste-design-tokens/tokens/global/font-size.yml b/packages/paste-design-tokens/tokens/global/font-size.yml new file mode 100644 index 0000000000..1693989753 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/font-size.yml @@ -0,0 +1,36 @@ +global: + category: font-size + type: font-size +imports: + - ../aliases/font-size.yml +props: + font-size-10: + value: "{!font-size-10}" + comment: "Constant typography token for font size 0" + font-size-20: + value: "{!font-size-20}" + comment: "Constant typography token for font size 1" + font-size-30: + value: "{!font-size-30}" + comment: "Constant typography token for font size 2" + font-size-40: + value: "{!font-size-40}" + comment: "Constant typography token for font size 3" + font-size-50: + value: "{!font-size-50}" + comment: "Constant typography token for font size 4" + font-size-60: + value: "{!font-size-60}" + comment: "Constant typography token for font size 5" + font-size-70: + value: "{!font-size-70}" + comment: "Constant typography token for font size 6" + font-size-80: + value: "{!font-size-80}" + comment: "Constant typography token for font size 7" + font-size-90: + value: "{!font-size-90}" + comment: "Constant typography token for font size 8" + font-size-100: + value: "{!font-size-100}" + comment: "Constant typography token for font size 9" diff --git a/packages/paste-design-tokens/tokens/global/font-weight.yml b/packages/paste-design-tokens/tokens/global/font-weight.yml new file mode 100644 index 0000000000..b44ac38b05 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/font-weight.yml @@ -0,0 +1,21 @@ +global: + category: font-weight + type: font-weight +imports: + - ../aliases/font-weight.yml +props: + font-weight-light: + value: "{!font-weight-light}" + comment: Font weight for light weight + font-weight-normal: + value: "{!font-weight-normal}" + comment: Font weight for normal weight + font-weight-medium: + value: "{!font-weight-medium}" + comment: Font weight for medium weight + font-weight-semibold: + value: "{!font-weight-semibold}" + comment: Font weight for semibold weight + font-weight-bold: + value: "{!font-weight-bold}" + comment: Font weight for bold weight diff --git a/packages/paste-design-tokens/tokens/global/index.yml b/packages/paste-design-tokens/tokens/global/index.yml new file mode 100644 index 0000000000..49e8a2833a --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/index.yml @@ -0,0 +1,14 @@ +imports: + - ./background-color.yml + - ./border-color.yml + - ./border-radius.yml + - ./border-width.yml + - ./box-shadow.yml + - ./font-family.yml + - ./font-size.yml + - ./font-weight.yml + - ./palette-color.yml + - ./sizing.yml + - ./spacing.yml + - ./text-color.yml + - ./z-index.yml diff --git a/packages/paste-design-tokens/tokens/global/palette-color.yml b/packages/paste-design-tokens/tokens/global/palette-color.yml new file mode 100644 index 0000000000..8218b3645b --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/palette-color.yml @@ -0,0 +1,46 @@ +global: + type: color + category: color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + color-gray-0: + value: "{!palette-gray-0}" + comment: "Gray Color 0" + color-gray-10: + value: "{!palette-gray-10}" + comment: "Gray Color 1" + color-gray-20: + value: "{!palette-gray-20}" + comment: "Gray Color 2" + color-gray-30: + value: "{!palette-gray-30}" + comment: "Gray Color 3" + color-gray-40: + value: "{!palette-gray-40}" + comment: "Gray Color 4" + color-gray-50: + value: "{!palette-gray-50}" + comment: "Gray Color 5" + color-gray-60: + value: "{!palette-gray-60}" + comment: "Gray Color 6" + color-gray-70: + value: "{!palette-gray-70}" + comment: "Gray Color 7" + color-gray-80: + value: "{!palette-gray-80}" + comment: "Gray Color 8" + color-gray-90: + value: "{!palette-gray-90}" + comment: "Gray Color 9" + color-gray-100: + value: "{!palette-gray-100}" + comment: "Gray Color 10" + color-brand: + value: "{!midnight}" + comment: "Default branding color" + color-brand-highlight: + value: "{!amaranth}" + comment: "Twilio brand red" diff --git a/packages/paste-design-tokens/tokens/global/sizing.yml b/packages/paste-design-tokens/tokens/global/sizing.yml new file mode 100644 index 0000000000..ab51bf5216 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/sizing.yml @@ -0,0 +1,56 @@ +global: + type: size + category: sizing +imports: + - ../aliases/sizing.yml +props: + size-0: + value: "{!size-0}" + comment: Generic sizing token scale for UI components. + size-10: + value: "{!size-10}" + comment: Generic sizing token scale for UI components. + size-20: + value: "{!size-20}" + comment: Generic sizing token scale for UI components. + size-30: + value: "{!size-30}" + comment: Generic sizing token scale for UI components. + size-40: + value: "{!size-40}" + comment: Generic sizing token scale for UI components. + size-50: + value: "{!size-50}" + comment: Generic sizing token scale for UI components. + size-60: + value: "{!size-60}" + comment: Generic sizing token scale for UI components. + size-70: + value: "{!size-70}" + comment: Generic sizing token scale for UI components. + size-80: + value: "{!size-80}" + comment: Generic sizing token scale for UI components. + size-90: + value: "{!size-90}" + comment: Generic sizing token scale for UI components. + size-100: + value: "{!size-100}" + comment: Generic sizing token scale for UI components. + size-110: + value: "{!size-110}" + comment: Generic sizing token scale for UI components. + size-120: + value: "{!size-120}" + comment: Generic sizing token scale for UI components. + + # icons + size-icon-10: + value: "{!size-square-30}" + comment: Icon sizing token + size-icon-20: + value: "{!size-square-40}" + comment: Icon sizing token + size-icon-30: + value: "{!size-square-50}" + comment: Icon sizing token diff --git a/packages/paste-design-tokens/tokens/global/spacing.yml b/packages/paste-design-tokens/tokens/global/spacing.yml new file mode 100644 index 0000000000..8aa9c6630f --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/spacing.yml @@ -0,0 +1,48 @@ +global: + category: spacing + type: size +imports: + - ../aliases/spacing.yml +props: + space-0: + value: "{!space-0}" + space-10: + value: "{!space-10}" + space-20: + value: "{!space-20}" + space-30: + value: "{!space-30}" + space-40: + value: "{!space-40}" + space-50: + value: "{!space-50}" + space-60: + value: "{!space-60}" + space-70: + value: "{!space-70}" + space-80: + value: "{!space-80}" + space-90: + value: "{!space-90}" + space-100: + value: "{!space-100}" + space-110: + value: "{!space-110}" + space-120: + value: "{!space-120}" + space-130: + value: "{!space-130}" + space-140: + value: "{!space-140}" + space-150: + value: "{!space-150}" + space-160: + value: "{!space-160}" + space-170: + value: "{!space-170}" + space-180: + value: "{!space-180}" + space-190: + value: "{!space-190}" + space-200: + value: "{!space-200}" diff --git a/packages/paste-design-tokens/tokens/global/text-color.yml b/packages/paste-design-tokens/tokens/global/text-color.yml new file mode 100644 index 0000000000..e997416111 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/text-color.yml @@ -0,0 +1,76 @@ +global: + type: color + category: text-color +imports: + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + # body text + color-text: + value: "{!palette-gray-100}" + comment: Body text color + color-text-weak: + value: "{!palette-gray-70}" + comment: Weak body text for visual hierarchy. + color-text-inverse: + value: "{!palette-gray-0}" + comment: Inverse text color for dark backgrounds + color-text-inverse-weak: + value: "{!palette-gray-60}" + comment: Weak inverse text color for dark backgrounds + color-text-brand-inverse: + value: "{!white}" + comment: Text color used on any brand color + color-text-brand-highlight: + value: "{!amaranth}" + comment: Twilio brand red, accessible on large text only. + + # links + color-text-link: + value: "{!palette-blue-60}" + comment: Link text + color-text-link-light: + value: "{!palette-blue-40}" + comment: Light shade of link text to be used in interactions + color-text-link-dark: + value: "{!palette-blue-70}" + comment: Dark shade of link text to be used in interactions + color-text-link-darker: + value: "{!palette-blue-80}" + comment: Darker shade of link text to be used in interactions + color-text-link-destructive: + value: "{!palette-red-60}" + comment: Destructive link text + color-text-link-destructive-light: + value: "{!palette-red-40}" + comment: Light shade of destructive link text to be used in interactions + color-text-link-destructive-dark: + value: "{!palette-red-70}" + comment: Dark shade of destructive link text to be used in interactions + color-text-link-destructive-darker: + value: "{!palette-red-80}" + comment: Darker shade of destructive link text to be used in interactions + + #status + color-text-error: + value: "{!palette-red-60}" + comment: Error text for inputs and error misc + color-text-success: + value: "{!palette-green-60}" + comment: Text color for success text. + color-text-warning: + value: "{!palette-orange-60}" + comment: Color for warning text. + + #icon + color-text-icon: + value: "{!palette-gray-100}" + comment: Default icon color. + + #forms + color-text-label: + value: "{!palette-gray-100}" + comment: Text color for field labels. + color-text-placeholder: + value: "{!palette-gray-70}" + comment: Input placeholder text. diff --git a/packages/paste-design-tokens/tokens/global/z-index.yml b/packages/paste-design-tokens/tokens/global/z-index.yml new file mode 100644 index 0000000000..d098d75f16 --- /dev/null +++ b/packages/paste-design-tokens/tokens/global/z-index.yml @@ -0,0 +1,26 @@ +global: + type: z-index + category: z-index +imports: + - ../aliases/z-index.yml +props: + z-index-0: + value: "{!z-index-0}" + z-index-10: + value: "{!z-index-10}" + z-index-20: + value: "{!z-index-20}" + z-index-30: + value: "{!z-index-30}" + z-index-40: + value: "{!z-index-40}" + z-index-50: + value: "{!z-index-50}" + z-index-60: + value: "{!z-index-60}" + z-index-70: + value: "{!z-index-70}" + z-index-80: + value: "{!z-index-80}" + z-index-90: + value: "{!z-index-90}" diff --git a/packages/paste-design-tokens/tokens/sketch.yml b/packages/paste-design-tokens/tokens/sketch.yml new file mode 100644 index 0000000000..adf932ee97 --- /dev/null +++ b/packages/paste-design-tokens/tokens/sketch.yml @@ -0,0 +1,5 @@ +imports: + - ./global/background-color.yml + - ./global/border-color.yml + - ./global/palette-color.yml + - ./global/text-color.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-radius.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-radius.yml new file mode 100644 index 0000000000..3a461939bc --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-radius.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/border-radius.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-width.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-width.yml new file mode 100644 index 0000000000..bbe8c39e3e --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/border-width.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/border-width.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/box-shadow.yml new file mode 100644 index 0000000000..045403ee1c --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/box-shadow.yml @@ -0,0 +1,4 @@ +imports: + - ../../../aliases/box-shadow.yml + - ./color-palette.yml + - ./offset.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color-palette.yml new file mode 100644 index 0000000000..7eb06d3dc9 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color-palette.yml @@ -0,0 +1,146 @@ +imports: + - ../../../aliases/color-palette.yml +aliases: + ## Reds + palette-red-10: "#ffe9e7" + palette-red-20: "#ffb9b3" + palette-red-30: "#ff8c85" + palette-red-40: "#e8534a" + palette-red-50: "#ce241a" + palette-red-60: "#ac1e16" + palette-red-70: "#940800" + palette-red-80: "#700600" + palette-red-90: "#4a0400" + palette-red-100: "#2e0200" + + ## Oranges + palette-orange-10: "#ffecd8" + palette-orange-20: "#fdd5bf" + palette-orange-30: "#fbb68f" + palette-orange-40: "#fa9c66" + palette-orange-50: "#f28510" + palette-orange-60: "#e46216" + palette-orange-70: "#a83e00" + palette-orange-80: "#762e04" + palette-orange-90: "#451b02" + palette-orange-100: "#2c1102" + + ## Yellows + palette-yellow-10: "#fff7e5" + palette-yellow-20: "#ffecc2" + palette-yellow-30: "#ffde92" + palette-yellow-40: "#fbca5b" + palette-yellow-50: "#fabb2b" + palette-yellow-60: "#eaa506" + palette-yellow-70: "#996b00" + palette-yellow-80: "#704e00" + palette-yellow-90: "#4d3500" + palette-yellow-100: "#2e2000" + + ## Greens + palette-green-10: "#e0ffef" + palette-green-20: "#c7ffe2" + palette-green-30: "#8eeebc" + palette-green-40: "#5fe7a1" + palette-green-50: "#23bf6e" + palette-green-60: "#00994a" + palette-green-70: "#00803d" + palette-green-80: "#006631" + palette-green-90: "#004d25" + palette-green-100: "#00361a" + + ## Teals + palette-teal-10: "#dbfff6" + palette-teal-20: "#c2ffef" + palette-teal-30: "#96fde2" + palette-teal-40: "#64fbd5" + palette-teal-50: "#35e4b8" + palette-teal-60: "#22d5a7" + palette-teal-70: "#1ba783" + palette-teal-80: "#00634a" + palette-teal-90: "#004735" + palette-teal-100: "#001611" + + ## Blues + palette-blue-10: "#f5f8ff" + palette-blue-20: "#dbe6ff" + palette-blue-30: "#baccff" + palette-blue-40: "#85a5ff" + palette-blue-50: "#3368fa" + palette-blue-60: "#003adb" + palette-blue-70: "#002ca6" + palette-blue-80: "#001f75" + palette-blue-90: "#00154d" + palette-blue-100: "#000e35" + + ## Turquoise + palette-turquoise-10: "#ebf7ff" + palette-turquoise-20: "#d1ebff" + palette-turquoise-30: "#b9e1ff" + palette-turquoise-40: "#66beff" + palette-turquoise-50: "#199dff" + palette-turquoise-60: "#008af0" + palette-turquoise-70: "#006cbc" + palette-turquoise-80: "#004f8a" + palette-turquoise-90: "#00345a" + palette-turquoise-100: "#001a2e" + + ## Purples + palette-purple-10: "#f3edff" + palette-purple-20: "#ebe0ff" + palette-purple-30: "#dbc7ff" + palette-purple-40: "#aa7aff" + palette-purple-50: "#6f3cca" + palette-purple-60: "#582da4" + palette-purple-70: "#400e9a" + palette-purple-80: "#300b75" + palette-purple-90: "#1c0050" + palette-purple-100: "#10002e" + + ## Violets + palette-violet-10: "#fdf1ff" + palette-violet-20: "#f9d6ff" + palette-violet-30: "#f3b1ff" + palette-violet-40: "#ec85ff" + palette-violet-50: "#c850de" + palette-violet-60: "#a000bd" + palette-violet-70: "#740089" + palette-violet-80: "#5f0070" + palette-violet-90: "#490057" + palette-violet-100: "#2f0038" + + ## Pinks + palette-pink-10: "#ffeff5" + palette-pink-20: "#ffe0ec" + palette-pink-30: "#ffcadd" + palette-pink-40: "#faa3c3" + palette-pink-50: "#f772a2" + palette-pink-60: "#f44383" + palette-pink-70: "#d82a68" + palette-pink-80: "#ac2052" + palette-pink-90: "#7c002c" + palette-pink-100: "#470019" + + ## Grays + palette-gray-10: "#f9fafb" + palette-gray-20: "#f3f4f6" + palette-gray-30: "#e5e7ec" + palette-gray-40: "#ccd2dc" + palette-gray-50: "#b6bfce" + palette-gray-60: "#9ca7ba" + palette-gray-70: "#76859e" + palette-gray-80: "#475672" + palette-gray-90: "#1d2944" + palette-gray-100: "#08152c" + + ## Gray-Blues + palette-gray-blue-10: "#f5f8fd" + palette-gray-blue-20: "#ebf2ff" + palette-gray-blue-30: "#dfe9fa" + palette-gray-blue-40: "#c8d7ee" + palette-gray-blue-50: "#a8b9d5" + palette-gray-blue-60: "#8ba3ca" + palette-gray-blue-70: "#4a6592" + palette-gray-blue-80: "#2c4a7d" + palette-gray-blue-90: "#0b2c64" + palette-gray-blue-100: "#00173e" diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color.yml new file mode 100644 index 0000000000..8f02b642f0 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color.yml @@ -0,0 +1,5 @@ +imports: + - ../../../aliases/color.yml +aliases: + curious-blue: "#1A82E2" + san-juan: "#294661" diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-family.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-family.yml new file mode 100644 index 0000000000..25ab3317bf --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-family.yml @@ -0,0 +1,4 @@ +imports: + - ../../../aliases/font-family.yml +aliases: + font-family-10: "'Colfax', Helvetica, Arial, sans-serif" diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-size.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-size.yml new file mode 100644 index 0000000000..60461511a3 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-size.yml @@ -0,0 +1,13 @@ +imports: + - ../../../aliases/font-size.yml +aliases: + font-size-10: "0.75rem" #12px + font-size-20: "0.875rem" #14px + font-size-30: "1rem" #16px + font-size-40: "1.125rem" #18px + font-size-50: "1.25rem" #20px + font-size-60: "1.5rem" #24px + font-size-70: "1.75rem" #28px + font-size-80: "2rem" #32px + font-size-90: "2rem" #32px + font-size-100: "2rem" #32px diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-weight.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-weight.yml new file mode 100644 index 0000000000..d9a113fede --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/font-weight.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/font-weight.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/offset.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/offset.yml new file mode 100644 index 0000000000..10f5885375 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/offset.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/offset.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/sizing.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/sizing.yml new file mode 100644 index 0000000000..bc896c16e8 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/sizing.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/sizing.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/spacing.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/spacing.yml new file mode 100644 index 0000000000..5cbac8d3a6 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/spacing.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/spacing.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/z-index.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/z-index.yml new file mode 100644 index 0000000000..16c90cb80a --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/z-index.yml @@ -0,0 +1,2 @@ +imports: + - ../../../aliases/z-index.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/background-color.yml new file mode 100644 index 0000000000..9c6781cd89 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/background-color.yml @@ -0,0 +1,67 @@ +global: + type: color + category: background-color +imports: + - ../../../global/background-color.yml + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + # status + color-background-success: + value: "{!palette-green-60}" + comment: Success background color + color-background-success-lightest: + value: "{!palette-green-10}" + comment: Lightest success background color + color-background-warning: + value: "{!palette-orange-60}" + comment: Warning background color + color-background-warning-lightest: + value: "{!palette-orange-10}" + comment: Lightest warning background color + color-background-error: + value: "{!palette-red-60}" + comment: Error background color + color-background-error-lightest: + value: "{!palette-red-10}" + comment: Lightest error background color + + # primary background + color-background-primary-darker: + value: "{!palette-blue-80}" + comment: Darker background for primary actions or highlights + color-background-primary-dark: + value: "{!palette-blue-70}" + comment: Dark background for primary actions or highlights + color-background-primary: + value: "{!palette-blue-60}" + comment: Background for primary actions or highlights + color-background-primary-light: + value: "{!palette-blue-40}" + comment: Light background for primary actions or highlights + color-background-primary-lighter: + value: "{!palette-blue-30}" + comment: Lighter background for primary actions or highlights + color-background-primary-lightest: + value: "{!palette-blue-10}" + comment: Lightest background for primary actions or highlights + + # destructive backgrounds + color-background-destructive-darker: + value: "{!palette-red-80}" + comment: Darker background for destructive actions or highlights + color-background-destructive-dark: + value: "{!palette-red-70}" + comment: Dark background for destructive actions or highlights + color-background-destructive: + value: "{!palette-red-60}" + comment: Background for destructive actions or highlights + color-background-destructive-light: + value: "{!palette-red-40}" + comment: Light background for destructive actions or highlights + color-background-destructive-lighter: + value: "{!palette-red-30}" + comment: Lighter background for destructive actions or highlights + color-background-destructive-lightest: + value: "{!palette-red-10}" + comment: Lightest background for destructive actions or highlights diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-color.yml new file mode 100644 index 0000000000..93b6882179 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-color.yml @@ -0,0 +1,67 @@ +global: + type: color + category: border-color +imports: + - ../../../global/border-color.yml + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + color-border: + value: "{!palette-gray-50}" + comment: Default border color + color-border-light: + value: "{!palette-gray-60}" + comment: Light border color + color-border-dark: + value: "{!palette-gray-40}" + comment: Dark border color + + # input borders + color-border-input: + value: "{!palette-gray-60}" + comment: Input border color + color-border-input-hover: + value: "{!palette-blue-60}" + comment: Input hover border color + color-border-input-focus: + value: "{!palette-blue-60}" + comment: Input focus border color + + # primary action borders + color-border-primary-darker: + value: "{!palette-blue-80}" + comment: Darker primary border color + color-border-primary-dark: + value: "{!palette-blue-70}" + comment: Dark primary border color + color-border-primary: + value: "{!palette-blue-60}" + comment: Primary border color + color-border-primary-light: + value: "{!palette-blue-40}" + comment: Light primary border color + color-border-primary-lighter: + value: "{!palette-blue-30}" + comment: Lighter primary border color + + # error borders + color-border-error: + value: "{!palette-red-60}" + comment: Error border color + + # destrcuctive borders + color-border-destructive-darker: + value: "{!palette-red-80}" + comment: Destructive hover border color + color-border-destructive-dark: + value: "{!palette-red-70}" + comment: Destructive focus border color + color-border-destructive: + value: "{!palette-red-60}" + comment: Destructive border color + color-border-destructive-light: + value: "{!palette-red-40}" + comment: Destructive focus border color + color-border-destructive-lighter: + value: "{!palette-red-30}" + comment: Destructive focus border color diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-radius.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-radius.yml new file mode 100644 index 0000000000..46d4ade65a --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-radius.yml @@ -0,0 +1,6 @@ +global: + type: size + category: radius +imports: + - ../../../global/border-radius.yml + - ../aliases/border-radius.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-width.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-width.yml new file mode 100644 index 0000000000..676196d185 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-width.yml @@ -0,0 +1,6 @@ +global: + type: size + category: border-width +imports: + - ../../../global/border-width.yml + - ../aliases/border-width.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/box-shadow.yml new file mode 100644 index 0000000000..63c77f5c48 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/box-shadow.yml @@ -0,0 +1,6 @@ +global: + type: box-shadow + category: shadow +imports: + - ../../../global/box-shadow.yml + - ../aliases/box-shadow.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-family.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-family.yml new file mode 100644 index 0000000000..3233f109b1 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-family.yml @@ -0,0 +1,9 @@ +global: + category: font + type: font +imports: + - ../../../global/font-family.yml + - ../aliases/font-family.yml +props: + font-family-text: + value: '{!font-family-10}' diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml new file mode 100644 index 0000000000..d7ed9b0d9e --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml @@ -0,0 +1,37 @@ +global: + category: font-size + type: font-size +imports: + - ../../../global/font-size.yml + - ../aliases/font-size.yml +props: + font-size-10: + value: "{!font-size-10}" + comment: "Constant typography token for font size 0" + font-size-20: + value: "{!font-size-20}" + comment: "Constant typography token for font size 1" + font-size-30: + value: "{!font-size-30}" + comment: "Constant typography token for font size 2" + font-size-40: + value: "{!font-size-40}" + comment: "Constant typography token for font size 3" + font-size-50: + value: "{!font-size-50}" + comment: "Constant typography token for font size 4" + font-size-60: + value: "{!font-size-60}" + comment: "Constant typography token for font size 5" + font-size-70: + value: "{!font-size-70}" + comment: "Constant typography token for font size 6" + font-size-80: + value: "{!font-size-80}" + comment: "Constant typography token for font size 7" + font-size-90: + value: "{!font-size-90}" + comment: "Constant typography token for font size 8" + font-size-100: + value: "{!font-size-100}" + comment: "Constant typography token for font size 9" diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-weight.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-weight.yml new file mode 100644 index 0000000000..abc8123730 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-weight.yml @@ -0,0 +1,6 @@ +global: + category: font-weight + type: font-weight +imports: + - ../../../global/font-weight.yml + - ../aliases/font-weight.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/index.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/index.yml new file mode 100644 index 0000000000..49e8a2833a --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/index.yml @@ -0,0 +1,14 @@ +imports: + - ./background-color.yml + - ./border-color.yml + - ./border-radius.yml + - ./border-width.yml + - ./box-shadow.yml + - ./font-family.yml + - ./font-size.yml + - ./font-weight.yml + - ./palette-color.yml + - ./sizing.yml + - ./spacing.yml + - ./text-color.yml + - ./z-index.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/palette-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/palette-color.yml new file mode 100644 index 0000000000..b834a1032f --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/palette-color.yml @@ -0,0 +1,44 @@ +global: + type: color + category: color +imports: + - ../../../global/palette-color.yml + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + color-gray-10: + value: "{!palette-gray-10}" + comment: "Gray Color 1" + color-gray-20: + value: "{!palette-gray-20}" + comment: "Gray Color 2" + color-gray-30: + value: "{!palette-gray-30}" + comment: "Gray Color 3" + color-gray-40: + value: "{!palette-gray-40}" + comment: "Gray Color 4" + color-gray-50: + value: "{!palette-gray-50}" + comment: "Gray Color 5" + color-gray-60: + value: "{!palette-gray-60}" + comment: "Gray Color 6" + color-gray-70: + value: "{!palette-gray-70}" + comment: "Gray Color 7" + color-gray-80: + value: "{!palette-gray-80}" + comment: "Gray Color 8" + color-gray-90: + value: "{!palette-gray-90}" + comment: "Gray Color 9" + color-gray-100: + value: "{!palette-gray-100}" + comment: "Gray Color 10" + color-brand: + value: "{!curious-blue}" + comment: "Default branding color" + color-brand-highlight: + value: "{!san-juan}" + comment: "SendGrid brand slate" diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/sizing.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/sizing.yml new file mode 100644 index 0000000000..26ba8bbcc1 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/sizing.yml @@ -0,0 +1,6 @@ +global: + type: size + category: sizing +imports: + - ../../../global/sizing.yml + - ../aliases/sizing.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/spacing.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/spacing.yml new file mode 100644 index 0000000000..4f2224c78a --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/spacing.yml @@ -0,0 +1,6 @@ +global: + category: spacing + type: size +imports: + - ../../../global/spacing.yml + - ../aliases/spacing.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/text-color.yml new file mode 100644 index 0000000000..496b281cec --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/text-color.yml @@ -0,0 +1,74 @@ +global: + type: color + category: text-color +imports: + - ../../../global/text-color.yml + - ../aliases/color.yml + - ../aliases/color-palette.yml +props: + # body text + color-text: + value: "{!palette-gray-100}" + comment: Body text color + color-text-weak: + value: "{!palette-gray-70}" + comment: Weak body text for visual hierarchy. + color-text-inverse: + value: "{!palette-gray-0}" + comment: Inverse text color for dark backgrounds + color-text-inverse-weak: + value: "{!palette-gray-60}" + comment: Weak inverse text color for dark backgrounds + color-text-brand-inverse: + value: "{!white}" + comment: Text color used on any brand color + + # links + color-text-link: + value: "{!palette-blue-60}" + comment: Link text + color-text-link-light: + value: "{!palette-blue-40}" + comment: Light shade of link text to be used in interactions + color-text-link-dark: + value: "{!palette-blue-70}" + comment: Dark shade of link text to be used in interactions + color-text-link-darker: + value: "{!palette-blue-80}" + comment: Darker shade of link text to be used in interactions + color-text-link-destructive: + value: "{!palette-red-60}" + comment: Destructive link text + color-text-link-destructive-light: + value: "{!palette-red-40}" + comment: Light shade of destructive link text to be used in interactions + color-text-link-destructive-dark: + value: "{!palette-red-70}" + comment: Dark shade of destructive link text to be used in interactions + color-text-link-destructive-darker: + value: "{!palette-red-80}" + comment: Darker shade of destructive link text to be used in interactions + + #status + color-text-error: + value: "{!palette-red-60}" + comment: Error text for inputs and error misc + color-text-success: + value: "{!palette-green-60}" + comment: Text color for success text. + color-text-warning: + value: "{!palette-orange-60}" + comment: Color for warning text. + + #icon + color-text-icon: + value: "{!palette-gray-100}" + comment: Default icon color. + + #forms + color-text-label: + value: "{!palette-gray-100}" + comment: Text color for field labels. + color-text-placeholder: + value: "{!palette-gray-70}" + comment: Input placeholder text. diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/z-index.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/z-index.yml new file mode 100644 index 0000000000..778a36cdcb --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/global/z-index.yml @@ -0,0 +1,6 @@ +global: + type: z-index + category: z-index +imports: + - ../../../global/z-index.yml + - ../aliases/z-index.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/sketch.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/sketch.yml new file mode 100644 index 0000000000..adf932ee97 --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/sketch.yml @@ -0,0 +1,5 @@ +imports: + - ./global/background-color.yml + - ./global/border-color.yml + - ./global/palette-color.yml + - ./global/text-color.yml diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/tokens.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/tokens.yml new file mode 100644 index 0000000000..1c9600288b --- /dev/null +++ b/packages/paste-design-tokens/tokens/themes/sendgrid/tokens.yml @@ -0,0 +1,2 @@ +imports: + - ./global/index.yml diff --git a/packages/paste-design-tokens/tokens/tokens.yml b/packages/paste-design-tokens/tokens/tokens.yml new file mode 100644 index 0000000000..1c9600288b --- /dev/null +++ b/packages/paste-design-tokens/tokens/tokens.yml @@ -0,0 +1,2 @@ +imports: + - ./global/index.yml diff --git a/packages/paste-design-tokens/types/index.ds.ts b/packages/paste-design-tokens/types/index.ds.ts new file mode 100644 index 0000000000..deb4ccef96 --- /dev/null +++ b/packages/paste-design-tokens/types/index.ds.ts @@ -0,0 +1,3 @@ +declare module 'gulp-theo'; +declare module 'gulp-restart'; +declare module 'color'; diff --git a/packages/paste-design-tokens/types/index.ts b/packages/paste-design-tokens/types/index.ts new file mode 100644 index 0000000000..7ffd631648 --- /dev/null +++ b/packages/paste-design-tokens/types/index.ts @@ -0,0 +1,7 @@ +export interface Token { + name: string; + type: string; + value: string; + category: string; + originalValue: string; +} diff --git a/packages/paste-design-tokens/utils/formatGroupTokensWithTemplate/index.ts b/packages/paste-design-tokens/utils/formatGroupTokensWithTemplate/index.ts new file mode 100644 index 0000000000..55644d9572 --- /dev/null +++ b/packages/paste-design-tokens/utils/formatGroupTokensWithTemplate/index.ts @@ -0,0 +1,69 @@ +import {ImmutableStyleMap} from 'theo'; +import {Token} from '../../types'; + +// These plurals should map to the default styled system theme keys where possible +const pluralCategoryMap = new Map( + Object.entries({ + 'background-color': 'background-colors', + 'background-gradient': 'background-gradients', + 'border-color': 'border-colors', + 'border-radius': 'border-radii', + 'border-width': 'border-widths', + 'border-style': 'border-styles', + 'box-shadow': 'box-shadows', + 'drop-shadow': 'drop-shadows', + color: 'colors', + font: 'fonts', + 'font-family': 'font-families', + 'font-size': 'font-sizes', + 'font-style': 'font-styles', + 'font-weight': 'font-weights', + gradient: 'gradients', + 'hr-color': 'horizontal-rule-colors', + 'inner-shadow': 'inner-shadows', + 'line-height': 'line-heights', + 'media-query': 'media-queries', + radius: 'radii', + shadow: 'shadows', + sizing: 'sizings', + spacing: 'spacings', + 'text-color': 'text-colors', + 'text-shadow': 'text-shadows', + time: 'time', + 'z-index': 'z-indices', + }) +); + +const getPluralCatName = (name: string): string => { + const pluralName = pluralCategoryMap.get(name); + if (pluralName === undefined) { + throw new Error( + "[@paste/design-tokens formatGroupTokensWithTemplate]: This category doesn't have a plural equivelant, please add one" + ); + } + return pluralName; +}; + +export default ( + tokens: ImmutableStyleMap, + categories: any, + categoryTemplate: (cat: string, props: Token[]) => void +): string => { + return categories + .map((cat: string) => { + const catProps = tokens + .get('props') + .sortBy(prop => { + if (prop !== undefined) { + return prop.get('name'); + } + }) + .filter(prop => prop !== undefined && cat === prop.get('category')) + .toJS(); + + if (typeof cat === 'string') { + return categoryTemplate(getPluralCatName(cat), catProps); + } + }) + .join('\n'); +}; diff --git a/packages/paste-design-tokens/utils/formatSingleTokensWithTemplate/index.ts b/packages/paste-design-tokens/utils/formatSingleTokensWithTemplate/index.ts new file mode 100644 index 0000000000..2b15896ce9 --- /dev/null +++ b/packages/paste-design-tokens/utils/formatSingleTokensWithTemplate/index.ts @@ -0,0 +1,18 @@ +import {ImmutableStyleMap} from 'theo'; +import {Token} from '../../types'; + +export default (tokens: ImmutableStyleMap, tokenTemplate: (prop: Token) => void) => { + return tokens + .get('props') + .sortBy(prop => { + if (prop !== undefined) { + return prop.get('name'); + } + }) + .map(prop => { + if (prop !== undefined) { + return tokenTemplate(prop.toJS()); + } + }) + .join('\n'); +}; diff --git a/packages/paste-design-tokens/utils/getTokenCategories/index.ts b/packages/paste-design-tokens/utils/getTokenCategories/index.ts new file mode 100644 index 0000000000..724cdcf4df --- /dev/null +++ b/packages/paste-design-tokens/utils/getTokenCategories/index.ts @@ -0,0 +1,13 @@ +import {ImmutableStyleMap} from 'theo'; + +export default (tokens: ImmutableStyleMap) => { + return tokens + .get('props') + .map(prop => { + if (prop !== undefined) { + return prop.get('category'); + } + }) + .toSet() + .sort(); +}; diff --git a/packages/paste-icons/README.md b/packages/paste-icons/README.md new file mode 100644 index 0000000000..c68d39daf8 --- /dev/null +++ b/packages/paste-icons/README.md @@ -0,0 +1,56 @@ +# Icons + +## Installation + +``` +yarn add @paste/icons +``` + +## Usage + +```js +import AssetsIcon from '@paste/icons/react/AssetsIcon'; +// For the SVG: +// import AssetsSvg from '@paste/icons/svg/assets.svg'; +// Note: make sure you have the webpack loader for loading svgs. + +; +``` + +### Standard Props + +| Prop | Type | Description | Default | +| ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| decorative? | boolean | Whether or not the SVG is just visual flair or adds meaning to the page. Specifically for screenreaders to know whether to read out the title or not. | true | +| title? | string | The accesibility text that is read when screenreaders get to this component | Component name | +| size? | number | The width and height value (all icons are square) in pixels | 24 | +| color? | string | The color of your icon | currentColor - whatever is the font-color inherited from up the DOM tree | + +Keep in mind these props are the **Base Guarantee** for icon components. Some icons may have additional functionality as needed (a way to style two color options for example). + +## FAQ + +### Are these components as render performant as images? + +[Yes!](https://github.com/TheSisb/svg-stress-test) The difference is negligable in both dev and prod. Worth it, if you consider the accessibility and usability gains. + +### Why are we switching from icon fonts? + +Icon fonts were a novel and useful solution for a bygone era of front-end development. [Here's a breakdown of the pros and cons.](https://github.com/twilio-labs/svg-to-react/blob/master/RATIONALE.md) + +### How can I animate these icons? + +Wrap these icons with a component that animates its children or pass in a className prop. + +### How can I contribute icons? + +- Clone or `git pull` the master branch +- Move any number of svg files into `./svg/` +- From the icons folder, run `yarn run convert-new`. Conversely, from the root of paste you can run `yarn workspace @paste/icons convert-new` +- Check the `./react` folder and make sure you like how your components turned out +- Run `yarn list-icons` to update the story +- Submit a PR! + +### Can I modify the template that generates these components? + +Yes! The tooling that powers this is [seperately bundled and available for use.](https://github.com/twilio-labs/svg-to-react) diff --git a/packages/paste-icons/__IconList.tsx b/packages/paste-icons/__IconList.tsx new file mode 100644 index 0000000000..d65e094956 --- /dev/null +++ b/packages/paste-icons/__IconList.tsx @@ -0,0 +1,245 @@ + +import * as React from 'react'; +import {Text} from '@paste/text'; +import {Grid, StoryIcon} from './__StoryStyles'; + +import {AccountProfileIcon} from './src/react/AccountProfileIcon'; +import {AddOnsIcon} from './src/react/AddOnsIcon'; +import {AlertTriggersIcon} from './src/react/AlertTriggersIcon'; +import {ApiExplorerIcon} from './src/react/ApiExplorerIcon'; +import {ApiKeysIcon} from './src/react/ApiKeysIcon'; +import {ArrowRightIcon} from './src/react/ArrowRightIcon'; +import {ArrowShaftDownIcon} from './src/react/ArrowShaftDownIcon'; +import {ArrowShaftLeftIcon} from './src/react/ArrowShaftLeftIcon'; +import {ArrowShaftRightIcon} from './src/react/ArrowShaftRightIcon'; +import {ArrowShaftUpIcon} from './src/react/ArrowShaftUpIcon'; +import {AssetsIcon} from './src/react/AssetsIcon'; +import {AuditEventsIcon} from './src/react/AuditEventsIcon'; +import {AuthyIcon} from './src/react/AuthyIcon'; +import {AutopilotIcon} from './src/react/AutopilotIcon'; +import {BackIcon} from './src/react/BackIcon'; +import {BarChartIcon} from './src/react/BarChartIcon'; +import {BillingIcon} from './src/react/BillingIcon'; +import {BuildIcon} from './src/react/BuildIcon'; +import {ChannelsIcon} from './src/react/ChannelsIcon'; +import {CheckboxCheckedIcon} from './src/react/CheckboxCheckedIcon'; +import {CheckboxMultiIcon} from './src/react/CheckboxMultiIcon'; +import {CheckboxUncheckedIcon} from './src/react/CheckboxUncheckedIcon'; +import {ClockRegularIcon} from './src/react/ClockRegularIcon'; +import {CloseIcon} from './src/react/CloseIcon'; +import {CollapseIcon} from './src/react/CollapseIcon'; +import {CollapseMenuIcon} from './src/react/CollapseMenuIcon'; +import {CollapsedIcon} from './src/react/CollapsedIcon'; +import {CommunityIcon} from './src/react/CommunityIcon'; +import {ConnectAppsIcon} from './src/react/ConnectAppsIcon'; +import {ConnectedDevicesIcon} from './src/react/ConnectedDevicesIcon'; +import {ConsoleDashIcon} from './src/react/ConsoleDashIcon'; +import {CopyIcon} from './src/react/CopyIcon'; +import {DebuggerIcon} from './src/react/DebuggerIcon'; +import {DebuggerOldIcon} from './src/react/DebuggerOldIcon'; +import {DevToolsIcon} from './src/react/DevToolsIcon'; +import {DoNotIcon} from './src/react/DoNotIcon'; +import {DocsIcon} from './src/react/DocsIcon'; +import {DownloadIcon} from './src/react/DownloadIcon'; +import {DropdownIcon} from './src/react/DropdownIcon'; +import {EmailIcon} from './src/react/EmailIcon'; +import {ExclamationCircleIcon} from './src/react/ExclamationCircleIcon'; +import {ExpandIcon} from './src/react/ExpandIcon'; +import {ExpandMenuIcon} from './src/react/ExpandMenuIcon'; +import {ExternalLinkIcon} from './src/react/ExternalLinkIcon'; +import {FaxEnabledIcon} from './src/react/FaxEnabledIcon'; +import {FaxIcon} from './src/react/FaxIcon'; +import {FilterIcon} from './src/react/FilterIcon'; +import {FlexIcon} from './src/react/FlexIcon'; +import {GoArrowIcon} from './src/react/GoArrowIcon'; +import {HelpBookIcon} from './src/react/HelpBookIcon'; +import {HelpIcon} from './src/react/HelpIcon'; +import {HideIcon} from './src/react/HideIcon'; +import {HomeIcon} from './src/react/HomeIcon'; +import {InfoIcon} from './src/react/InfoIcon'; +import {InformationIcon} from './src/react/InformationIcon'; +import {InspirationIcon} from './src/react/InspirationIcon'; +import {InterconnectIcon} from './src/react/InterconnectIcon'; +import {IpMessagingIcon} from './src/react/IpMessagingIcon'; +import {KeyboardIcon} from './src/react/KeyboardIcon'; +import {LearnIcon} from './src/react/LearnIcon'; +import {LineChartIcon} from './src/react/LineChartIcon'; +import {LogoIcon} from './src/react/LogoIcon'; +import {LookupIcon} from './src/react/LookupIcon'; +import {MessagingIcon} from './src/react/MessagingIcon'; +import {MmsEnabledIcon} from './src/react/MmsEnabledIcon'; +import {MoreIcon} from './src/react/MoreIcon'; +import {MultiFactorAuthenticationIcon} from './src/react/MultiFactorAuthenticationIcon'; +import {NotifyIcon} from './src/react/NotifyIcon'; +import {OffIcon} from './src/react/OffIcon'; +import {OnIcon} from './src/react/OnIcon'; +import {PartnersIcon} from './src/react/PartnersIcon'; +import {PauseFlatIcon} from './src/react/PauseFlatIcon'; +import {PauseIcon} from './src/react/PauseIcon'; +import {PencilIcon} from './src/react/PencilIcon'; +import {PhoneNumbersIcon} from './src/react/PhoneNumbersIcon'; +import {PhoneVerificationIcon} from './src/react/PhoneVerificationIcon'; +import {PieChartIcon} from './src/react/PieChartIcon'; +import {PlayFlatIcon} from './src/react/PlayFlatIcon'; +import {PlayIcon} from './src/react/PlayIcon'; +import {PluginIcon} from './src/react/PluginIcon'; +import {PlusButtonIcon} from './src/react/PlusButtonIcon'; +import {ProductsIcon} from './src/react/ProductsIcon'; +import {ProxyIcon} from './src/react/ProxyIcon'; +import {QuestionIcon} from './src/react/QuestionIcon'; +import {ResetIcon} from './src/react/ResetIcon'; +import {RuntimeIcon} from './src/react/RuntimeIcon'; +import {SearchIcon} from './src/react/SearchIcon'; +import {SettingsIcon} from './src/react/SettingsIcon'; +import {SipTrunkingIcon} from './src/react/SipTrunkingIcon'; +import {SmsEnabledIcon} from './src/react/SmsEnabledIcon'; +import {SpinnerIcon} from './src/react/SpinnerIcon'; +import {StudioIcon} from './src/react/StudioIcon'; +import {SuccessIcon} from './src/react/SuccessIcon'; +import {SupportIcon} from './src/react/SupportIcon'; +import {SupportLifebuoyIcon} from './src/react/SupportLifebuoyIcon'; +import {SyncIcon} from './src/react/SyncIcon'; +import {TableViewIcon} from './src/react/TableViewIcon'; +import {TalkToSalesIcon} from './src/react/TalkToSalesIcon'; +import {TaskrouterIcon} from './src/react/TaskrouterIcon'; +import {TemplatesIcon} from './src/react/TemplatesIcon'; +import {ThumbTackIcon} from './src/react/ThumbTackIcon'; +import {TicketHistoryIcon} from './src/react/TicketHistoryIcon'; +import {TicketIcon} from './src/react/TicketIcon'; +import {TwimlBinsIcon} from './src/react/TwimlBinsIcon'; +import {TwoFactorAuthenticationIcon} from './src/react/TwoFactorAuthenticationIcon'; +import {UploadIcon} from './src/react/UploadIcon'; +import {UsersIcon} from './src/react/UsersIcon'; +import {VideoIcon} from './src/react/VideoIcon'; +import {ViewIcon} from './src/react/ViewIcon'; +import {VoiceEnabledIcon} from './src/react/VoiceEnabledIcon'; +import {VoiceIcon} from './src/react/VoiceIcon'; +import {WhatsappIcon} from './src/react/WhatsappIcon'; +import {WirelessIcon} from './src/react/WirelessIcon'; + +interface IconProps { + title?: string; + decorative?: boolean; + size?: number; + color?: string; +} + +const IconList: React.FC = props => ( + + AccountProfileIcon +AddOnsIcon +AlertTriggersIcon +ApiExplorerIcon +ApiKeysIcon +ArrowRightIcon +ArrowShaftDownIcon +ArrowShaftLeftIcon +ArrowShaftRightIcon +ArrowShaftUpIcon +AssetsIcon +AuditEventsIcon +AuthyIcon +AutopilotIcon +BackIcon +BarChartIcon +BillingIcon +BuildIcon +ChannelsIcon +CheckboxCheckedIcon +CheckboxMultiIcon +CheckboxUncheckedIcon +ClockRegularIcon +CloseIcon +CollapseIcon +CollapseMenuIcon +CollapsedIcon +CommunityIcon +ConnectAppsIcon +ConnectedDevicesIcon +ConsoleDashIcon +CopyIcon +DebuggerIcon +DebuggerOldIcon +DevToolsIcon +DoNotIcon +DocsIcon +DownloadIcon +DropdownIcon +EmailIcon +ExclamationCircleIcon +ExpandIcon +ExpandMenuIcon +ExternalLinkIcon +FaxEnabledIcon +FaxIcon +FilterIcon +FlexIcon +GoArrowIcon +HelpBookIcon +HelpIcon +HideIcon +HomeIcon +InfoIcon +InformationIcon +InspirationIcon +InterconnectIcon +IpMessagingIcon +KeyboardIcon +LearnIcon +LineChartIcon +LogoIcon +LookupIcon +MessagingIcon +MmsEnabledIcon +MoreIcon +MultiFactorAuthenticationIcon +NotifyIcon +OffIcon +OnIcon +PartnersIcon +PauseFlatIcon +PauseIcon +PencilIcon +PhoneNumbersIcon +PhoneVerificationIcon +PieChartIcon +PlayFlatIcon +PlayIcon +PluginIcon +PlusButtonIcon +ProductsIcon +ProxyIcon +QuestionIcon +ResetIcon +RuntimeIcon +SearchIcon +SettingsIcon +SipTrunkingIcon +SmsEnabledIcon +SpinnerIcon +StudioIcon +SuccessIcon +SupportIcon +SupportLifebuoyIcon +SyncIcon +TableViewIcon +TalkToSalesIcon +TaskrouterIcon +TemplatesIcon +ThumbTackIcon +TicketHistoryIcon +TicketIcon +TwimlBinsIcon +TwoFactorAuthenticationIcon +UploadIcon +UsersIcon +VideoIcon +ViewIcon +VoiceEnabledIcon +VoiceIcon +WhatsappIcon +WirelessIcon + +); + +export {IconList}; diff --git a/packages/paste-icons/__StoryStyles.tsx b/packages/paste-icons/__StoryStyles.tsx new file mode 100644 index 0000000000..8d932441d1 --- /dev/null +++ b/packages/paste-icons/__StoryStyles.tsx @@ -0,0 +1,17 @@ +import styled from '@emotion/styled'; + +const StoryIcon = styled('div')` + border: 1px solid #ccc; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 8px; +`; + +const Grid = styled('div')` + display: grid; + grid-template-columns: repeat(4, 1fr); +`; + +export {Grid, StoryIcon}; diff --git a/packages/paste-icons/index.stories.tsx b/packages/paste-icons/index.stories.tsx new file mode 100644 index 0000000000..22d3185571 --- /dev/null +++ b/packages/paste-icons/index.stories.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; + +import {withKnobs, number, text, boolean} from '@storybook/addon-knobs'; +import {IconList} from './__IconList'; + +storiesOf('Overview|Icons', module) + .addDecorator(withKnobs) + .add('List', () => ( + + )); diff --git a/packages/paste-icons/package.json b/packages/paste-icons/package.json new file mode 100644 index 0000000000..35fcafa3f8 --- /dev/null +++ b/packages/paste-icons/package.json @@ -0,0 +1,46 @@ +{ + "name": "@paste/icons", + "version": "0.2.3", + "description": "Twilio's icon library, ready for use and with accessibility considerations", + "author": "Twilio Inc.", + "license": "ISC", + "sideEffects": false, + "files": [ + "react" + ], + "scripts": { + "list-icons": "node ./tools/cli.js list-icons", + "convert-new": "node ./tools/cli.js convert-new", + "build": "yarn clean && yarn compile", + "build:dev": "yarn build", + "clean": "rm -rf ./react && rm -rf tsconfig.build.tsbuildinfo", + "compile": "tsc -b ./tsconfig.build.json", + "watch": "tsc -b -w ./tsconfig.build.json", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@emotion/styled": "^10.0.14", + "@paste/theme-tokens": "^0.2.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-uid": "^2.2.0", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "@twilio-labs/svg-to-react": "^1.0.1", + "@paste/theme-tokens": "^0.4.0", + "@svgr/babel-plugin-add-jsx-attribute": "^4.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "^4.0.3", + "@svgr/cli": "^4.1.0", + "@svgr/plugin-jsx": "^4.1.0", + "@svgr/plugin-svgo": "^4.0.3", + "@types/loadable__component": "^5.6.0", + "@types/promise-timeout": "^1.3.0", + "commander": "^2.20.0", + "lodash.difference": "^4.5.0", + "lodash.kebabcase": "^4.1.1", + "lodash.startcase": " ^4.4.0", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-icons/src/react/AccountProfileIcon.tsx b/packages/paste-icons/src/react/AccountProfileIcon.tsx new file mode 100644 index 0000000000..cd20c62396 --- /dev/null +++ b/packages/paste-icons/src/react/AccountProfileIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AccountProfileIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AccountProfileIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AccountProfileIcon.defaultProps = { + title: 'Account Profile Icon', + decorative: true, +}; + +export {AccountProfileIcon}; diff --git a/packages/paste-icons/src/react/AddOnsIcon.tsx b/packages/paste-icons/src/react/AddOnsIcon.tsx new file mode 100644 index 0000000000..2c55937aaf --- /dev/null +++ b/packages/paste-icons/src/react/AddOnsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AddOnsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AddOnsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AddOnsIcon.defaultProps = { + title: 'Add Ons Icon', + decorative: true, +}; + +export {AddOnsIcon}; diff --git a/packages/paste-icons/src/react/AlertTriggersIcon.tsx b/packages/paste-icons/src/react/AlertTriggersIcon.tsx new file mode 100644 index 0000000000..ae2ca06df4 --- /dev/null +++ b/packages/paste-icons/src/react/AlertTriggersIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AlertTriggersIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AlertTriggersIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AlertTriggersIcon.defaultProps = { + title: 'Alert Triggers Icon', + decorative: true, +}; + +export {AlertTriggersIcon}; diff --git a/packages/paste-icons/src/react/ApiExplorerIcon.tsx b/packages/paste-icons/src/react/ApiExplorerIcon.tsx new file mode 100644 index 0000000000..c17534ac53 --- /dev/null +++ b/packages/paste-icons/src/react/ApiExplorerIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ApiExplorerIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ApiExplorerIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ApiExplorerIcon.defaultProps = { + title: 'Api Explorer Icon', + decorative: true, +}; + +export {ApiExplorerIcon}; diff --git a/packages/paste-icons/src/react/ApiKeysIcon.tsx b/packages/paste-icons/src/react/ApiKeysIcon.tsx new file mode 100644 index 0000000000..3d24bbec9f --- /dev/null +++ b/packages/paste-icons/src/react/ApiKeysIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ApiKeysIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ApiKeysIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ApiKeysIcon.defaultProps = { + title: 'Api Keys Icon', + decorative: true, +}; + +export {ApiKeysIcon}; diff --git a/packages/paste-icons/src/react/ArrowRightIcon.tsx b/packages/paste-icons/src/react/ArrowRightIcon.tsx new file mode 100644 index 0000000000..15a0b3d158 --- /dev/null +++ b/packages/paste-icons/src/react/ArrowRightIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ArrowRightIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ArrowRightIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ArrowRightIcon.defaultProps = { + title: 'Arrow Right Icon', + decorative: true, +}; + +export {ArrowRightIcon}; diff --git a/packages/paste-icons/src/react/ArrowShaftDownIcon.tsx b/packages/paste-icons/src/react/ArrowShaftDownIcon.tsx new file mode 100644 index 0000000000..172f42a80a --- /dev/null +++ b/packages/paste-icons/src/react/ArrowShaftDownIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ArrowShaftDownIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ArrowShaftDownIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ArrowShaftDownIcon.defaultProps = { + title: 'Arrow Shaft Down Icon', + decorative: true, +}; + +export {ArrowShaftDownIcon}; diff --git a/packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx b/packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx new file mode 100644 index 0000000000..18d7467981 --- /dev/null +++ b/packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ArrowShaftLeftIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ArrowShaftLeftIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ArrowShaftLeftIcon.defaultProps = { + title: 'Arrow Shaft Left Icon', + decorative: true, +}; + +export {ArrowShaftLeftIcon}; diff --git a/packages/paste-icons/src/react/ArrowShaftRightIcon.tsx b/packages/paste-icons/src/react/ArrowShaftRightIcon.tsx new file mode 100644 index 0000000000..09d7e84214 --- /dev/null +++ b/packages/paste-icons/src/react/ArrowShaftRightIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ArrowShaftRightIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ArrowShaftRightIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ArrowShaftRightIcon.defaultProps = { + title: 'Arrow Shaft Right Icon', + decorative: true, +}; + +export {ArrowShaftRightIcon}; diff --git a/packages/paste-icons/src/react/ArrowShaftUpIcon.tsx b/packages/paste-icons/src/react/ArrowShaftUpIcon.tsx new file mode 100644 index 0000000000..52084c3726 --- /dev/null +++ b/packages/paste-icons/src/react/ArrowShaftUpIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ArrowShaftUpIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ArrowShaftUpIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ArrowShaftUpIcon.defaultProps = { + title: 'Arrow Shaft Up Icon', + decorative: true, +}; + +export {ArrowShaftUpIcon}; diff --git a/packages/paste-icons/src/react/AssetsIcon.tsx b/packages/paste-icons/src/react/AssetsIcon.tsx new file mode 100644 index 0000000000..9108198d5a --- /dev/null +++ b/packages/paste-icons/src/react/AssetsIcon.tsx @@ -0,0 +1,38 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AssetsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AssetsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AssetsIcon.defaultProps = { + title: 'Assets Icon', + decorative: true, +}; + +export {AssetsIcon}; diff --git a/packages/paste-icons/src/react/AuditEventsIcon.tsx b/packages/paste-icons/src/react/AuditEventsIcon.tsx new file mode 100644 index 0000000000..5dbb289e53 --- /dev/null +++ b/packages/paste-icons/src/react/AuditEventsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AuditEventsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AuditEventsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AuditEventsIcon.defaultProps = { + title: 'Audit Events Icon', + decorative: true, +}; + +export {AuditEventsIcon}; diff --git a/packages/paste-icons/src/react/AuthyIcon.tsx b/packages/paste-icons/src/react/AuthyIcon.tsx new file mode 100644 index 0000000000..b78650c25b --- /dev/null +++ b/packages/paste-icons/src/react/AuthyIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AuthyIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AuthyIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AuthyIcon.defaultProps = { + title: 'Authy Icon', + decorative: true, +}; + +export {AuthyIcon}; diff --git a/packages/paste-icons/src/react/AutopilotIcon.tsx b/packages/paste-icons/src/react/AutopilotIcon.tsx new file mode 100644 index 0000000000..65945ff424 --- /dev/null +++ b/packages/paste-icons/src/react/AutopilotIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface AutopilotIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const AutopilotIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +AutopilotIcon.defaultProps = { + title: 'Autopilot Icon', + decorative: true, +}; + +export {AutopilotIcon}; diff --git a/packages/paste-icons/src/react/BackIcon.tsx b/packages/paste-icons/src/react/BackIcon.tsx new file mode 100644 index 0000000000..18c173fe42 --- /dev/null +++ b/packages/paste-icons/src/react/BackIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface BackIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const BackIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +BackIcon.defaultProps = { + title: 'Back Icon', + decorative: true, +}; + +export {BackIcon}; diff --git a/packages/paste-icons/src/react/BarChartIcon.tsx b/packages/paste-icons/src/react/BarChartIcon.tsx new file mode 100644 index 0000000000..fe8a2cb807 --- /dev/null +++ b/packages/paste-icons/src/react/BarChartIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface BarChartIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const BarChartIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +BarChartIcon.defaultProps = { + title: 'Bar Chart Icon', + decorative: true, +}; + +export {BarChartIcon}; diff --git a/packages/paste-icons/src/react/BillingIcon.tsx b/packages/paste-icons/src/react/BillingIcon.tsx new file mode 100644 index 0000000000..f7c99ea269 --- /dev/null +++ b/packages/paste-icons/src/react/BillingIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface BillingIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const BillingIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +BillingIcon.defaultProps = { + title: 'Billing Icon', + decorative: true, +}; + +export {BillingIcon}; diff --git a/packages/paste-icons/src/react/BuildIcon.tsx b/packages/paste-icons/src/react/BuildIcon.tsx new file mode 100644 index 0000000000..c1d7b5d657 --- /dev/null +++ b/packages/paste-icons/src/react/BuildIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface BuildIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const BuildIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +BuildIcon.defaultProps = { + title: 'Build Icon', + decorative: true, +}; + +export {BuildIcon}; diff --git a/packages/paste-icons/src/react/ChannelsIcon.tsx b/packages/paste-icons/src/react/ChannelsIcon.tsx new file mode 100644 index 0000000000..21db475f94 --- /dev/null +++ b/packages/paste-icons/src/react/ChannelsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ChannelsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ChannelsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ChannelsIcon.defaultProps = { + title: 'Channels Icon', + decorative: true, +}; + +export {ChannelsIcon}; diff --git a/packages/paste-icons/src/react/CheckboxCheckedIcon.tsx b/packages/paste-icons/src/react/CheckboxCheckedIcon.tsx new file mode 100644 index 0000000000..e2ab0d920f --- /dev/null +++ b/packages/paste-icons/src/react/CheckboxCheckedIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CheckboxCheckedIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CheckboxCheckedIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CheckboxCheckedIcon.defaultProps = { + title: 'Checkbox Checked Icon', + decorative: true, +}; + +export {CheckboxCheckedIcon}; diff --git a/packages/paste-icons/src/react/CheckboxMultiIcon.tsx b/packages/paste-icons/src/react/CheckboxMultiIcon.tsx new file mode 100644 index 0000000000..151c01437c --- /dev/null +++ b/packages/paste-icons/src/react/CheckboxMultiIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CheckboxMultiIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CheckboxMultiIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CheckboxMultiIcon.defaultProps = { + title: 'Checkbox Multi Icon', + decorative: true, +}; + +export {CheckboxMultiIcon}; diff --git a/packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx b/packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx new file mode 100644 index 0000000000..3d8b2d8927 --- /dev/null +++ b/packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx @@ -0,0 +1,38 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CheckboxUncheckedIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CheckboxUncheckedIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CheckboxUncheckedIcon.defaultProps = { + title: 'Checkbox Unchecked Icon', + decorative: true, +}; + +export {CheckboxUncheckedIcon}; diff --git a/packages/paste-icons/src/react/ClockRegularIcon.tsx b/packages/paste-icons/src/react/ClockRegularIcon.tsx new file mode 100644 index 0000000000..de10721f8b --- /dev/null +++ b/packages/paste-icons/src/react/ClockRegularIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ClockRegularIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ClockRegularIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ClockRegularIcon.defaultProps = { + title: 'Clock Regular Icon', + decorative: true, +}; + +export {ClockRegularIcon}; diff --git a/packages/paste-icons/src/react/CloseIcon.tsx b/packages/paste-icons/src/react/CloseIcon.tsx new file mode 100644 index 0000000000..e9157aeced --- /dev/null +++ b/packages/paste-icons/src/react/CloseIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CloseIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CloseIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CloseIcon.defaultProps = { + title: 'Close Icon', + decorative: true, +}; + +export {CloseIcon}; diff --git a/packages/paste-icons/src/react/CollapseIcon.tsx b/packages/paste-icons/src/react/CollapseIcon.tsx new file mode 100644 index 0000000000..5f5ac925b6 --- /dev/null +++ b/packages/paste-icons/src/react/CollapseIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CollapseIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CollapseIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CollapseIcon.defaultProps = { + title: 'Collapse Icon', + decorative: true, +}; + +export {CollapseIcon}; diff --git a/packages/paste-icons/src/react/CollapseMenuIcon.tsx b/packages/paste-icons/src/react/CollapseMenuIcon.tsx new file mode 100644 index 0000000000..1d0a38bd87 --- /dev/null +++ b/packages/paste-icons/src/react/CollapseMenuIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CollapseMenuIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CollapseMenuIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CollapseMenuIcon.defaultProps = { + title: 'Collapse Menu Icon', + decorative: true, +}; + +export {CollapseMenuIcon}; diff --git a/packages/paste-icons/src/react/CollapsedIcon.tsx b/packages/paste-icons/src/react/CollapsedIcon.tsx new file mode 100644 index 0000000000..8e38ca090e --- /dev/null +++ b/packages/paste-icons/src/react/CollapsedIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CollapsedIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CollapsedIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CollapsedIcon.defaultProps = { + title: 'Collapsed Icon', + decorative: true, +}; + +export {CollapsedIcon}; diff --git a/packages/paste-icons/src/react/CommunityIcon.tsx b/packages/paste-icons/src/react/CommunityIcon.tsx new file mode 100644 index 0000000000..580e4c0f95 --- /dev/null +++ b/packages/paste-icons/src/react/CommunityIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CommunityIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CommunityIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CommunityIcon.defaultProps = { + title: 'Community Icon', + decorative: true, +}; + +export {CommunityIcon}; diff --git a/packages/paste-icons/src/react/ConnectAppsIcon.tsx b/packages/paste-icons/src/react/ConnectAppsIcon.tsx new file mode 100644 index 0000000000..3bc3ea02c4 --- /dev/null +++ b/packages/paste-icons/src/react/ConnectAppsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ConnectAppsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ConnectAppsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ConnectAppsIcon.defaultProps = { + title: 'Connect Apps Icon', + decorative: true, +}; + +export {ConnectAppsIcon}; diff --git a/packages/paste-icons/src/react/ConnectedDevicesIcon.tsx b/packages/paste-icons/src/react/ConnectedDevicesIcon.tsx new file mode 100644 index 0000000000..e04ffeef92 --- /dev/null +++ b/packages/paste-icons/src/react/ConnectedDevicesIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ConnectedDevicesIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ConnectedDevicesIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ConnectedDevicesIcon.defaultProps = { + title: 'Connected Devices Icon', + decorative: true, +}; + +export {ConnectedDevicesIcon}; diff --git a/packages/paste-icons/src/react/ConsoleDashIcon.tsx b/packages/paste-icons/src/react/ConsoleDashIcon.tsx new file mode 100644 index 0000000000..885c5cc725 --- /dev/null +++ b/packages/paste-icons/src/react/ConsoleDashIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ConsoleDashIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ConsoleDashIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ConsoleDashIcon.defaultProps = { + title: 'Console Dash Icon', + decorative: true, +}; + +export {ConsoleDashIcon}; diff --git a/packages/paste-icons/src/react/CopyIcon.tsx b/packages/paste-icons/src/react/CopyIcon.tsx new file mode 100644 index 0000000000..3c80b3ab06 --- /dev/null +++ b/packages/paste-icons/src/react/CopyIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface CopyIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const CopyIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +CopyIcon.defaultProps = { + title: 'Copy Icon', + decorative: true, +}; + +export {CopyIcon}; diff --git a/packages/paste-icons/src/react/DebuggerIcon.tsx b/packages/paste-icons/src/react/DebuggerIcon.tsx new file mode 100644 index 0000000000..a47e28620c --- /dev/null +++ b/packages/paste-icons/src/react/DebuggerIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DebuggerIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DebuggerIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DebuggerIcon.defaultProps = { + title: 'Debugger Icon', + decorative: true, +}; + +export {DebuggerIcon}; diff --git a/packages/paste-icons/src/react/DebuggerOldIcon.tsx b/packages/paste-icons/src/react/DebuggerOldIcon.tsx new file mode 100644 index 0000000000..87d5222668 --- /dev/null +++ b/packages/paste-icons/src/react/DebuggerOldIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DebuggerOldIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DebuggerOldIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DebuggerOldIcon.defaultProps = { + title: 'Debugger Old Icon', + decorative: true, +}; + +export {DebuggerOldIcon}; diff --git a/packages/paste-icons/src/react/DevToolsIcon.tsx b/packages/paste-icons/src/react/DevToolsIcon.tsx new file mode 100644 index 0000000000..2d25b4ff10 --- /dev/null +++ b/packages/paste-icons/src/react/DevToolsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DevToolsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DevToolsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DevToolsIcon.defaultProps = { + title: 'Dev Tools Icon', + decorative: true, +}; + +export {DevToolsIcon}; diff --git a/packages/paste-icons/src/react/DoNotIcon.tsx b/packages/paste-icons/src/react/DoNotIcon.tsx new file mode 100644 index 0000000000..c81029266d --- /dev/null +++ b/packages/paste-icons/src/react/DoNotIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DoNotIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DoNotIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DoNotIcon.defaultProps = { + title: 'Do Not Icon', + decorative: true, +}; + +export {DoNotIcon}; diff --git a/packages/paste-icons/src/react/DocsIcon.tsx b/packages/paste-icons/src/react/DocsIcon.tsx new file mode 100644 index 0000000000..5a4c450bd9 --- /dev/null +++ b/packages/paste-icons/src/react/DocsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DocsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DocsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DocsIcon.defaultProps = { + title: 'Docs Icon', + decorative: true, +}; + +export {DocsIcon}; diff --git a/packages/paste-icons/src/react/DownloadIcon.tsx b/packages/paste-icons/src/react/DownloadIcon.tsx new file mode 100644 index 0000000000..ef2b2f9e2f --- /dev/null +++ b/packages/paste-icons/src/react/DownloadIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DownloadIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DownloadIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DownloadIcon.defaultProps = { + title: 'Download Icon', + decorative: true, +}; + +export {DownloadIcon}; diff --git a/packages/paste-icons/src/react/DropdownIcon.tsx b/packages/paste-icons/src/react/DropdownIcon.tsx new file mode 100644 index 0000000000..44f0579138 --- /dev/null +++ b/packages/paste-icons/src/react/DropdownIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface DropdownIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const DropdownIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +DropdownIcon.defaultProps = { + title: 'Dropdown Icon', + decorative: true, +}; + +export {DropdownIcon}; diff --git a/packages/paste-icons/src/react/EmailIcon.tsx b/packages/paste-icons/src/react/EmailIcon.tsx new file mode 100644 index 0000000000..519bed522c --- /dev/null +++ b/packages/paste-icons/src/react/EmailIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface EmailIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const EmailIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +EmailIcon.defaultProps = { + title: 'Email Icon', + decorative: true, +}; + +export {EmailIcon}; diff --git a/packages/paste-icons/src/react/ExclamationCircleIcon.tsx b/packages/paste-icons/src/react/ExclamationCircleIcon.tsx new file mode 100644 index 0000000000..e9a33b7d1b --- /dev/null +++ b/packages/paste-icons/src/react/ExclamationCircleIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ExclamationCircleIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ExclamationCircleIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ExclamationCircleIcon.defaultProps = { + title: 'Exclamation Circle Icon', + decorative: true, +}; + +export {ExclamationCircleIcon}; diff --git a/packages/paste-icons/src/react/ExpandIcon.tsx b/packages/paste-icons/src/react/ExpandIcon.tsx new file mode 100644 index 0000000000..d126330154 --- /dev/null +++ b/packages/paste-icons/src/react/ExpandIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ExpandIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ExpandIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ExpandIcon.defaultProps = { + title: 'Expand Icon', + decorative: true, +}; + +export {ExpandIcon}; diff --git a/packages/paste-icons/src/react/ExpandMenuIcon.tsx b/packages/paste-icons/src/react/ExpandMenuIcon.tsx new file mode 100644 index 0000000000..3369a70645 --- /dev/null +++ b/packages/paste-icons/src/react/ExpandMenuIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ExpandMenuIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ExpandMenuIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ExpandMenuIcon.defaultProps = { + title: 'Expand Menu Icon', + decorative: true, +}; + +export {ExpandMenuIcon}; diff --git a/packages/paste-icons/src/react/ExternalLinkIcon.tsx b/packages/paste-icons/src/react/ExternalLinkIcon.tsx new file mode 100644 index 0000000000..a2bf253e20 --- /dev/null +++ b/packages/paste-icons/src/react/ExternalLinkIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ExternalLinkIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ExternalLinkIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ExternalLinkIcon.defaultProps = { + title: 'External Link Icon', + decorative: true, +}; + +export {ExternalLinkIcon}; diff --git a/packages/paste-icons/src/react/FaxEnabledIcon.tsx b/packages/paste-icons/src/react/FaxEnabledIcon.tsx new file mode 100644 index 0000000000..e0aad69c33 --- /dev/null +++ b/packages/paste-icons/src/react/FaxEnabledIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface FaxEnabledIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const FaxEnabledIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +FaxEnabledIcon.defaultProps = { + title: 'Fax Enabled Icon', + decorative: true, +}; + +export {FaxEnabledIcon}; diff --git a/packages/paste-icons/src/react/FaxIcon.tsx b/packages/paste-icons/src/react/FaxIcon.tsx new file mode 100644 index 0000000000..fe0c56b500 --- /dev/null +++ b/packages/paste-icons/src/react/FaxIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface FaxIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const FaxIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +FaxIcon.defaultProps = { + title: 'Fax Icon', + decorative: true, +}; + +export {FaxIcon}; diff --git a/packages/paste-icons/src/react/FilterIcon.tsx b/packages/paste-icons/src/react/FilterIcon.tsx new file mode 100644 index 0000000000..68521152a6 --- /dev/null +++ b/packages/paste-icons/src/react/FilterIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface FilterIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const FilterIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +FilterIcon.defaultProps = { + title: 'Filter Icon', + decorative: true, +}; + +export {FilterIcon}; diff --git a/packages/paste-icons/src/react/FlexIcon.tsx b/packages/paste-icons/src/react/FlexIcon.tsx new file mode 100644 index 0000000000..01e5aabd6a --- /dev/null +++ b/packages/paste-icons/src/react/FlexIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface FlexIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const FlexIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +FlexIcon.defaultProps = { + title: 'Flex Icon', + decorative: true, +}; + +export {FlexIcon}; diff --git a/packages/paste-icons/src/react/GoArrowIcon.tsx b/packages/paste-icons/src/react/GoArrowIcon.tsx new file mode 100644 index 0000000000..90f14664e4 --- /dev/null +++ b/packages/paste-icons/src/react/GoArrowIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface GoArrowIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const GoArrowIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +GoArrowIcon.defaultProps = { + title: 'Go Arrow Icon', + decorative: true, +}; + +export {GoArrowIcon}; diff --git a/packages/paste-icons/src/react/HelpBookIcon.tsx b/packages/paste-icons/src/react/HelpBookIcon.tsx new file mode 100644 index 0000000000..432795e14f --- /dev/null +++ b/packages/paste-icons/src/react/HelpBookIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface HelpBookIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const HelpBookIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +HelpBookIcon.defaultProps = { + title: 'Help Book Icon', + decorative: true, +}; + +export {HelpBookIcon}; diff --git a/packages/paste-icons/src/react/HelpIcon.tsx b/packages/paste-icons/src/react/HelpIcon.tsx new file mode 100644 index 0000000000..4a4827e457 --- /dev/null +++ b/packages/paste-icons/src/react/HelpIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface HelpIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const HelpIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +HelpIcon.defaultProps = { + title: 'Help Icon', + decorative: true, +}; + +export {HelpIcon}; diff --git a/packages/paste-icons/src/react/HideIcon.tsx b/packages/paste-icons/src/react/HideIcon.tsx new file mode 100644 index 0000000000..f52add9136 --- /dev/null +++ b/packages/paste-icons/src/react/HideIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface HideIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const HideIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +HideIcon.defaultProps = { + title: 'Hide Icon', + decorative: true, +}; + +export {HideIcon}; diff --git a/packages/paste-icons/src/react/HomeIcon.tsx b/packages/paste-icons/src/react/HomeIcon.tsx new file mode 100644 index 0000000000..3821d93be4 --- /dev/null +++ b/packages/paste-icons/src/react/HomeIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface HomeIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const HomeIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +HomeIcon.defaultProps = { + title: 'Home Icon', + decorative: true, +}; + +export {HomeIcon}; diff --git a/packages/paste-icons/src/react/InfoIcon.tsx b/packages/paste-icons/src/react/InfoIcon.tsx new file mode 100644 index 0000000000..048f0e5f34 --- /dev/null +++ b/packages/paste-icons/src/react/InfoIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface InfoIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const InfoIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +InfoIcon.defaultProps = { + title: 'Info Icon', + decorative: true, +}; + +export {InfoIcon}; diff --git a/packages/paste-icons/src/react/InformationIcon.tsx b/packages/paste-icons/src/react/InformationIcon.tsx new file mode 100644 index 0000000000..02cb62e1ac --- /dev/null +++ b/packages/paste-icons/src/react/InformationIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface InformationIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const InformationIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +InformationIcon.defaultProps = { + title: 'Information Icon', + decorative: true, +}; + +export {InformationIcon}; diff --git a/packages/paste-icons/src/react/InspirationIcon.tsx b/packages/paste-icons/src/react/InspirationIcon.tsx new file mode 100644 index 0000000000..02142e844d --- /dev/null +++ b/packages/paste-icons/src/react/InspirationIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface InspirationIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const InspirationIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +InspirationIcon.defaultProps = { + title: 'Inspiration Icon', + decorative: true, +}; + +export {InspirationIcon}; diff --git a/packages/paste-icons/src/react/InterconnectIcon.tsx b/packages/paste-icons/src/react/InterconnectIcon.tsx new file mode 100644 index 0000000000..eac280594a --- /dev/null +++ b/packages/paste-icons/src/react/InterconnectIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface InterconnectIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const InterconnectIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +InterconnectIcon.defaultProps = { + title: 'Interconnect Icon', + decorative: true, +}; + +export {InterconnectIcon}; diff --git a/packages/paste-icons/src/react/IpMessagingIcon.tsx b/packages/paste-icons/src/react/IpMessagingIcon.tsx new file mode 100644 index 0000000000..de87b62cdc --- /dev/null +++ b/packages/paste-icons/src/react/IpMessagingIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface IpMessagingIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const IpMessagingIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +IpMessagingIcon.defaultProps = { + title: 'Ip Messaging Icon', + decorative: true, +}; + +export {IpMessagingIcon}; diff --git a/packages/paste-icons/src/react/KeyboardIcon.tsx b/packages/paste-icons/src/react/KeyboardIcon.tsx new file mode 100644 index 0000000000..70e08d9a6e --- /dev/null +++ b/packages/paste-icons/src/react/KeyboardIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface KeyboardIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const KeyboardIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +KeyboardIcon.defaultProps = { + title: 'Keyboard Icon', + decorative: true, +}; + +export {KeyboardIcon}; diff --git a/packages/paste-icons/src/react/LearnIcon.tsx b/packages/paste-icons/src/react/LearnIcon.tsx new file mode 100644 index 0000000000..985ae385c8 --- /dev/null +++ b/packages/paste-icons/src/react/LearnIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface LearnIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const LearnIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +LearnIcon.defaultProps = { + title: 'Learn Icon', + decorative: true, +}; + +export {LearnIcon}; diff --git a/packages/paste-icons/src/react/LineChartIcon.tsx b/packages/paste-icons/src/react/LineChartIcon.tsx new file mode 100644 index 0000000000..889847925a --- /dev/null +++ b/packages/paste-icons/src/react/LineChartIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface LineChartIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const LineChartIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +LineChartIcon.defaultProps = { + title: 'Line Chart Icon', + decorative: true, +}; + +export {LineChartIcon}; diff --git a/packages/paste-icons/src/react/LogoIcon.tsx b/packages/paste-icons/src/react/LogoIcon.tsx new file mode 100644 index 0000000000..67cc1e02d6 --- /dev/null +++ b/packages/paste-icons/src/react/LogoIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface LogoIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const LogoIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +LogoIcon.defaultProps = { + title: 'Logo Icon', + decorative: true, +}; + +export {LogoIcon}; diff --git a/packages/paste-icons/src/react/LookupIcon.tsx b/packages/paste-icons/src/react/LookupIcon.tsx new file mode 100644 index 0000000000..ab4d5fd839 --- /dev/null +++ b/packages/paste-icons/src/react/LookupIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface LookupIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const LookupIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +LookupIcon.defaultProps = { + title: 'Lookup Icon', + decorative: true, +}; + +export {LookupIcon}; diff --git a/packages/paste-icons/src/react/MessagingIcon.tsx b/packages/paste-icons/src/react/MessagingIcon.tsx new file mode 100644 index 0000000000..7be7dd32b1 --- /dev/null +++ b/packages/paste-icons/src/react/MessagingIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface MessagingIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const MessagingIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +MessagingIcon.defaultProps = { + title: 'Messaging Icon', + decorative: true, +}; + +export {MessagingIcon}; diff --git a/packages/paste-icons/src/react/MmsEnabledIcon.tsx b/packages/paste-icons/src/react/MmsEnabledIcon.tsx new file mode 100644 index 0000000000..f57efc5a26 --- /dev/null +++ b/packages/paste-icons/src/react/MmsEnabledIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface MmsEnabledIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const MmsEnabledIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +MmsEnabledIcon.defaultProps = { + title: 'Mms Enabled Icon', + decorative: true, +}; + +export {MmsEnabledIcon}; diff --git a/packages/paste-icons/src/react/MoreIcon.tsx b/packages/paste-icons/src/react/MoreIcon.tsx new file mode 100644 index 0000000000..2c7775d128 --- /dev/null +++ b/packages/paste-icons/src/react/MoreIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface MoreIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const MoreIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +MoreIcon.defaultProps = { + title: 'More Icon', + decorative: true, +}; + +export {MoreIcon}; diff --git a/packages/paste-icons/src/react/MultiFactorAuthenticationIcon.tsx b/packages/paste-icons/src/react/MultiFactorAuthenticationIcon.tsx new file mode 100644 index 0000000000..5e2183a1b7 --- /dev/null +++ b/packages/paste-icons/src/react/MultiFactorAuthenticationIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface MultiFactorAuthenticationIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const MultiFactorAuthenticationIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +MultiFactorAuthenticationIcon.defaultProps = { + title: 'Multi Factor Authentication Icon', + decorative: true, +}; + +export {MultiFactorAuthenticationIcon}; diff --git a/packages/paste-icons/src/react/NotifyIcon.tsx b/packages/paste-icons/src/react/NotifyIcon.tsx new file mode 100644 index 0000000000..95e280ff27 --- /dev/null +++ b/packages/paste-icons/src/react/NotifyIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface NotifyIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const NotifyIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +NotifyIcon.defaultProps = { + title: 'Notify Icon', + decorative: true, +}; + +export {NotifyIcon}; diff --git a/packages/paste-icons/src/react/OffIcon.tsx b/packages/paste-icons/src/react/OffIcon.tsx new file mode 100644 index 0000000000..2b3de0a93a --- /dev/null +++ b/packages/paste-icons/src/react/OffIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface OffIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const OffIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +OffIcon.defaultProps = { + title: 'Off Icon', + decorative: true, +}; + +export {OffIcon}; diff --git a/packages/paste-icons/src/react/OnIcon.tsx b/packages/paste-icons/src/react/OnIcon.tsx new file mode 100644 index 0000000000..30f81b9def --- /dev/null +++ b/packages/paste-icons/src/react/OnIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface OnIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const OnIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +OnIcon.defaultProps = { + title: 'On Icon', + decorative: true, +}; + +export {OnIcon}; diff --git a/packages/paste-icons/src/react/PartnersIcon.tsx b/packages/paste-icons/src/react/PartnersIcon.tsx new file mode 100644 index 0000000000..9c617c2d94 --- /dev/null +++ b/packages/paste-icons/src/react/PartnersIcon.tsx @@ -0,0 +1,43 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PartnersIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PartnersIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + + + + )} + + +); + +PartnersIcon.defaultProps = { + title: 'Partners Icon', + decorative: true, +}; + +export {PartnersIcon}; diff --git a/packages/paste-icons/src/react/PauseFlatIcon.tsx b/packages/paste-icons/src/react/PauseFlatIcon.tsx new file mode 100644 index 0000000000..552ff85192 --- /dev/null +++ b/packages/paste-icons/src/react/PauseFlatIcon.tsx @@ -0,0 +1,31 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PauseFlatIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PauseFlatIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PauseFlatIcon.defaultProps = { + title: 'Pause Flat Icon', + decorative: true, +}; + +export {PauseFlatIcon}; diff --git a/packages/paste-icons/src/react/PauseIcon.tsx b/packages/paste-icons/src/react/PauseIcon.tsx new file mode 100644 index 0000000000..02bd69dacb --- /dev/null +++ b/packages/paste-icons/src/react/PauseIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PauseIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PauseIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PauseIcon.defaultProps = { + title: 'Pause Icon', + decorative: true, +}; + +export {PauseIcon}; diff --git a/packages/paste-icons/src/react/PencilIcon.tsx b/packages/paste-icons/src/react/PencilIcon.tsx new file mode 100644 index 0000000000..03cbdae128 --- /dev/null +++ b/packages/paste-icons/src/react/PencilIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PencilIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PencilIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PencilIcon.defaultProps = { + title: 'Pencil Icon', + decorative: true, +}; + +export {PencilIcon}; diff --git a/packages/paste-icons/src/react/PhoneNumbersIcon.tsx b/packages/paste-icons/src/react/PhoneNumbersIcon.tsx new file mode 100644 index 0000000000..cbfb7f1765 --- /dev/null +++ b/packages/paste-icons/src/react/PhoneNumbersIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PhoneNumbersIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PhoneNumbersIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PhoneNumbersIcon.defaultProps = { + title: 'Phone Numbers Icon', + decorative: true, +}; + +export {PhoneNumbersIcon}; diff --git a/packages/paste-icons/src/react/PhoneVerificationIcon.tsx b/packages/paste-icons/src/react/PhoneVerificationIcon.tsx new file mode 100644 index 0000000000..6880735ea0 --- /dev/null +++ b/packages/paste-icons/src/react/PhoneVerificationIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PhoneVerificationIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PhoneVerificationIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PhoneVerificationIcon.defaultProps = { + title: 'Phone Verification Icon', + decorative: true, +}; + +export {PhoneVerificationIcon}; diff --git a/packages/paste-icons/src/react/PieChartIcon.tsx b/packages/paste-icons/src/react/PieChartIcon.tsx new file mode 100644 index 0000000000..361c20f8b7 --- /dev/null +++ b/packages/paste-icons/src/react/PieChartIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PieChartIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PieChartIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PieChartIcon.defaultProps = { + title: 'Pie Chart Icon', + decorative: true, +}; + +export {PieChartIcon}; diff --git a/packages/paste-icons/src/react/PlayFlatIcon.tsx b/packages/paste-icons/src/react/PlayFlatIcon.tsx new file mode 100644 index 0000000000..0a2811ce17 --- /dev/null +++ b/packages/paste-icons/src/react/PlayFlatIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PlayFlatIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PlayFlatIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PlayFlatIcon.defaultProps = { + title: 'Play Flat Icon', + decorative: true, +}; + +export {PlayFlatIcon}; diff --git a/packages/paste-icons/src/react/PlayIcon.tsx b/packages/paste-icons/src/react/PlayIcon.tsx new file mode 100644 index 0000000000..e2849c3ec8 --- /dev/null +++ b/packages/paste-icons/src/react/PlayIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PlayIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PlayIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PlayIcon.defaultProps = { + title: 'Play Icon', + decorative: true, +}; + +export {PlayIcon}; diff --git a/packages/paste-icons/src/react/PluginIcon.tsx b/packages/paste-icons/src/react/PluginIcon.tsx new file mode 100644 index 0000000000..f5a8521453 --- /dev/null +++ b/packages/paste-icons/src/react/PluginIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PluginIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PluginIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PluginIcon.defaultProps = { + title: 'Plugin Icon', + decorative: true, +}; + +export {PluginIcon}; diff --git a/packages/paste-icons/src/react/PlusButtonIcon.tsx b/packages/paste-icons/src/react/PlusButtonIcon.tsx new file mode 100644 index 0000000000..dad26bc7f1 --- /dev/null +++ b/packages/paste-icons/src/react/PlusButtonIcon.tsx @@ -0,0 +1,38 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface PlusButtonIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const PlusButtonIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +PlusButtonIcon.defaultProps = { + title: 'Plus Button Icon', + decorative: true, +}; + +export {PlusButtonIcon}; diff --git a/packages/paste-icons/src/react/ProductsIcon.tsx b/packages/paste-icons/src/react/ProductsIcon.tsx new file mode 100644 index 0000000000..7b42006936 --- /dev/null +++ b/packages/paste-icons/src/react/ProductsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ProductsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ProductsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ProductsIcon.defaultProps = { + title: 'Products Icon', + decorative: true, +}; + +export {ProductsIcon}; diff --git a/packages/paste-icons/src/react/ProxyIcon.tsx b/packages/paste-icons/src/react/ProxyIcon.tsx new file mode 100644 index 0000000000..eb29b9f049 --- /dev/null +++ b/packages/paste-icons/src/react/ProxyIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ProxyIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ProxyIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ProxyIcon.defaultProps = { + title: 'Proxy Icon', + decorative: true, +}; + +export {ProxyIcon}; diff --git a/packages/paste-icons/src/react/QuestionIcon.tsx b/packages/paste-icons/src/react/QuestionIcon.tsx new file mode 100644 index 0000000000..45519fb09c --- /dev/null +++ b/packages/paste-icons/src/react/QuestionIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface QuestionIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const QuestionIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +QuestionIcon.defaultProps = { + title: 'Question Icon', + decorative: true, +}; + +export {QuestionIcon}; diff --git a/packages/paste-icons/src/react/ResetIcon.tsx b/packages/paste-icons/src/react/ResetIcon.tsx new file mode 100644 index 0000000000..1b20c15295 --- /dev/null +++ b/packages/paste-icons/src/react/ResetIcon.tsx @@ -0,0 +1,31 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ResetIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ResetIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ResetIcon.defaultProps = { + title: 'Reset Icon', + decorative: true, +}; + +export {ResetIcon}; diff --git a/packages/paste-icons/src/react/RuntimeIcon.tsx b/packages/paste-icons/src/react/RuntimeIcon.tsx new file mode 100644 index 0000000000..647d62de04 --- /dev/null +++ b/packages/paste-icons/src/react/RuntimeIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface RuntimeIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const RuntimeIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +RuntimeIcon.defaultProps = { + title: 'Runtime Icon', + decorative: true, +}; + +export {RuntimeIcon}; diff --git a/packages/paste-icons/src/react/SearchIcon.tsx b/packages/paste-icons/src/react/SearchIcon.tsx new file mode 100644 index 0000000000..ccbce1a081 --- /dev/null +++ b/packages/paste-icons/src/react/SearchIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SearchIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SearchIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SearchIcon.defaultProps = { + title: 'Search Icon', + decorative: true, +}; + +export {SearchIcon}; diff --git a/packages/paste-icons/src/react/SettingsIcon.tsx b/packages/paste-icons/src/react/SettingsIcon.tsx new file mode 100644 index 0000000000..437db96d15 --- /dev/null +++ b/packages/paste-icons/src/react/SettingsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SettingsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SettingsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SettingsIcon.defaultProps = { + title: 'Settings Icon', + decorative: true, +}; + +export {SettingsIcon}; diff --git a/packages/paste-icons/src/react/SipTrunkingIcon.tsx b/packages/paste-icons/src/react/SipTrunkingIcon.tsx new file mode 100644 index 0000000000..ebe7b0fff8 --- /dev/null +++ b/packages/paste-icons/src/react/SipTrunkingIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SipTrunkingIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SipTrunkingIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SipTrunkingIcon.defaultProps = { + title: 'Sip Trunking Icon', + decorative: true, +}; + +export {SipTrunkingIcon}; diff --git a/packages/paste-icons/src/react/SmsEnabledIcon.tsx b/packages/paste-icons/src/react/SmsEnabledIcon.tsx new file mode 100644 index 0000000000..27993590ff --- /dev/null +++ b/packages/paste-icons/src/react/SmsEnabledIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SmsEnabledIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SmsEnabledIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SmsEnabledIcon.defaultProps = { + title: 'Sms Enabled Icon', + decorative: true, +}; + +export {SmsEnabledIcon}; diff --git a/packages/paste-icons/src/react/SpinnerIcon.tsx b/packages/paste-icons/src/react/SpinnerIcon.tsx new file mode 100644 index 0000000000..280ca1bd18 --- /dev/null +++ b/packages/paste-icons/src/react/SpinnerIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SpinnerIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SpinnerIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SpinnerIcon.defaultProps = { + title: 'Spinner Icon', + decorative: true, +}; + +export {SpinnerIcon}; diff --git a/packages/paste-icons/src/react/StudioIcon.tsx b/packages/paste-icons/src/react/StudioIcon.tsx new file mode 100644 index 0000000000..a9d2039091 --- /dev/null +++ b/packages/paste-icons/src/react/StudioIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface StudioIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const StudioIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +StudioIcon.defaultProps = { + title: 'Studio Icon', + decorative: true, +}; + +export {StudioIcon}; diff --git a/packages/paste-icons/src/react/SuccessIcon.tsx b/packages/paste-icons/src/react/SuccessIcon.tsx new file mode 100644 index 0000000000..fb3021dabd --- /dev/null +++ b/packages/paste-icons/src/react/SuccessIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SuccessIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SuccessIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SuccessIcon.defaultProps = { + title: 'Success Icon', + decorative: true, +}; + +export {SuccessIcon}; diff --git a/packages/paste-icons/src/react/SupportIcon.tsx b/packages/paste-icons/src/react/SupportIcon.tsx new file mode 100644 index 0000000000..76bf2ddbe8 --- /dev/null +++ b/packages/paste-icons/src/react/SupportIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SupportIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SupportIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SupportIcon.defaultProps = { + title: 'Support Icon', + decorative: true, +}; + +export {SupportIcon}; diff --git a/packages/paste-icons/src/react/SupportLifebuoyIcon.tsx b/packages/paste-icons/src/react/SupportLifebuoyIcon.tsx new file mode 100644 index 0000000000..e82542dfca --- /dev/null +++ b/packages/paste-icons/src/react/SupportLifebuoyIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SupportLifebuoyIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SupportLifebuoyIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SupportLifebuoyIcon.defaultProps = { + title: 'Support Lifebuoy Icon', + decorative: true, +}; + +export {SupportLifebuoyIcon}; diff --git a/packages/paste-icons/src/react/SyncIcon.tsx b/packages/paste-icons/src/react/SyncIcon.tsx new file mode 100644 index 0000000000..ccc1844531 --- /dev/null +++ b/packages/paste-icons/src/react/SyncIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface SyncIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const SyncIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +SyncIcon.defaultProps = { + title: 'Sync Icon', + decorative: true, +}; + +export {SyncIcon}; diff --git a/packages/paste-icons/src/react/TableViewIcon.tsx b/packages/paste-icons/src/react/TableViewIcon.tsx new file mode 100644 index 0000000000..f580d2e454 --- /dev/null +++ b/packages/paste-icons/src/react/TableViewIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TableViewIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TableViewIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TableViewIcon.defaultProps = { + title: 'Table View Icon', + decorative: true, +}; + +export {TableViewIcon}; diff --git a/packages/paste-icons/src/react/TalkToSalesIcon.tsx b/packages/paste-icons/src/react/TalkToSalesIcon.tsx new file mode 100644 index 0000000000..4e94a836b2 --- /dev/null +++ b/packages/paste-icons/src/react/TalkToSalesIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TalkToSalesIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TalkToSalesIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TalkToSalesIcon.defaultProps = { + title: 'Talk To Sales Icon', + decorative: true, +}; + +export {TalkToSalesIcon}; diff --git a/packages/paste-icons/src/react/TaskrouterIcon.tsx b/packages/paste-icons/src/react/TaskrouterIcon.tsx new file mode 100644 index 0000000000..3139f9e15e --- /dev/null +++ b/packages/paste-icons/src/react/TaskrouterIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TaskrouterIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TaskrouterIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TaskrouterIcon.defaultProps = { + title: 'Taskrouter Icon', + decorative: true, +}; + +export {TaskrouterIcon}; diff --git a/packages/paste-icons/src/react/TemplatesIcon.tsx b/packages/paste-icons/src/react/TemplatesIcon.tsx new file mode 100644 index 0000000000..d8fd707938 --- /dev/null +++ b/packages/paste-icons/src/react/TemplatesIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TemplatesIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TemplatesIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TemplatesIcon.defaultProps = { + title: 'Templates Icon', + decorative: true, +}; + +export {TemplatesIcon}; diff --git a/packages/paste-icons/src/react/ThumbTackIcon.tsx b/packages/paste-icons/src/react/ThumbTackIcon.tsx new file mode 100644 index 0000000000..e616e13f9b --- /dev/null +++ b/packages/paste-icons/src/react/ThumbTackIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ThumbTackIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ThumbTackIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ThumbTackIcon.defaultProps = { + title: 'Thumb Tack Icon', + decorative: true, +}; + +export {ThumbTackIcon}; diff --git a/packages/paste-icons/src/react/TicketHistoryIcon.tsx b/packages/paste-icons/src/react/TicketHistoryIcon.tsx new file mode 100644 index 0000000000..e2c3df60a2 --- /dev/null +++ b/packages/paste-icons/src/react/TicketHistoryIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TicketHistoryIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TicketHistoryIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TicketHistoryIcon.defaultProps = { + title: 'Ticket History Icon', + decorative: true, +}; + +export {TicketHistoryIcon}; diff --git a/packages/paste-icons/src/react/TicketIcon.tsx b/packages/paste-icons/src/react/TicketIcon.tsx new file mode 100644 index 0000000000..e661d113b4 --- /dev/null +++ b/packages/paste-icons/src/react/TicketIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TicketIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TicketIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TicketIcon.defaultProps = { + title: 'Ticket Icon', + decorative: true, +}; + +export {TicketIcon}; diff --git a/packages/paste-icons/src/react/TwimlBinsIcon.tsx b/packages/paste-icons/src/react/TwimlBinsIcon.tsx new file mode 100644 index 0000000000..316abe1db3 --- /dev/null +++ b/packages/paste-icons/src/react/TwimlBinsIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TwimlBinsIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TwimlBinsIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TwimlBinsIcon.defaultProps = { + title: 'Twiml Bins Icon', + decorative: true, +}; + +export {TwimlBinsIcon}; diff --git a/packages/paste-icons/src/react/TwoFactorAuthenticationIcon.tsx b/packages/paste-icons/src/react/TwoFactorAuthenticationIcon.tsx new file mode 100644 index 0000000000..074e847854 --- /dev/null +++ b/packages/paste-icons/src/react/TwoFactorAuthenticationIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface TwoFactorAuthenticationIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const TwoFactorAuthenticationIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +TwoFactorAuthenticationIcon.defaultProps = { + title: 'Two Factor Authentication Icon', + decorative: true, +}; + +export {TwoFactorAuthenticationIcon}; diff --git a/packages/paste-icons/src/react/UploadIcon.tsx b/packages/paste-icons/src/react/UploadIcon.tsx new file mode 100644 index 0000000000..4f26d14308 --- /dev/null +++ b/packages/paste-icons/src/react/UploadIcon.tsx @@ -0,0 +1,35 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface UploadIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const UploadIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +UploadIcon.defaultProps = { + title: 'Upload Icon', + decorative: true, +}; + +export {UploadIcon}; diff --git a/packages/paste-icons/src/react/UsersIcon.tsx b/packages/paste-icons/src/react/UsersIcon.tsx new file mode 100644 index 0000000000..1511b94389 --- /dev/null +++ b/packages/paste-icons/src/react/UsersIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface UsersIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const UsersIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +UsersIcon.defaultProps = { + title: 'Users Icon', + decorative: true, +}; + +export {UsersIcon}; diff --git a/packages/paste-icons/src/react/VideoIcon.tsx b/packages/paste-icons/src/react/VideoIcon.tsx new file mode 100644 index 0000000000..c70e6d2bb3 --- /dev/null +++ b/packages/paste-icons/src/react/VideoIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface VideoIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const VideoIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +VideoIcon.defaultProps = { + title: 'Video Icon', + decorative: true, +}; + +export {VideoIcon}; diff --git a/packages/paste-icons/src/react/ViewIcon.tsx b/packages/paste-icons/src/react/ViewIcon.tsx new file mode 100644 index 0000000000..ad869b3ae3 --- /dev/null +++ b/packages/paste-icons/src/react/ViewIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ViewIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ViewIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +ViewIcon.defaultProps = { + title: 'View Icon', + decorative: true, +}; + +export {ViewIcon}; diff --git a/packages/paste-icons/src/react/VoiceEnabledIcon.tsx b/packages/paste-icons/src/react/VoiceEnabledIcon.tsx new file mode 100644 index 0000000000..26f0294675 --- /dev/null +++ b/packages/paste-icons/src/react/VoiceEnabledIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface VoiceEnabledIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const VoiceEnabledIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +VoiceEnabledIcon.defaultProps = { + title: 'Voice Enabled Icon', + decorative: true, +}; + +export {VoiceEnabledIcon}; diff --git a/packages/paste-icons/src/react/VoiceIcon.tsx b/packages/paste-icons/src/react/VoiceIcon.tsx new file mode 100644 index 0000000000..14d0e5e3bb --- /dev/null +++ b/packages/paste-icons/src/react/VoiceIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface VoiceIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const VoiceIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +VoiceIcon.defaultProps = { + title: 'Voice Icon', + decorative: true, +}; + +export {VoiceIcon}; diff --git a/packages/paste-icons/src/react/WhatsappIcon.tsx b/packages/paste-icons/src/react/WhatsappIcon.tsx new file mode 100644 index 0000000000..c0ef634a3c --- /dev/null +++ b/packages/paste-icons/src/react/WhatsappIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface WhatsappIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const WhatsappIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +WhatsappIcon.defaultProps = { + title: 'Whatsapp Icon', + decorative: true, +}; + +export {WhatsappIcon}; diff --git a/packages/paste-icons/src/react/WirelessIcon.tsx b/packages/paste-icons/src/react/WirelessIcon.tsx new file mode 100644 index 0000000000..535619dc48 --- /dev/null +++ b/packages/paste-icons/src/react/WirelessIcon.tsx @@ -0,0 +1,41 @@ +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface WirelessIconProps extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const WirelessIcon: React.FC = ({title, decorative, ...props}) => ( + + + {uid => ( + + {title} + + + )} + + +); + +WirelessIcon.defaultProps = { + title: 'Wireless Icon', + decorative: true, +}; + +export {WirelessIcon}; diff --git a/packages/paste-icons/src/react/helpers/IconWrapper.tsx b/packages/paste-icons/src/react/helpers/IconWrapper.tsx new file mode 100644 index 0000000000..51b52ff83d --- /dev/null +++ b/packages/paste-icons/src/react/helpers/IconWrapper.tsx @@ -0,0 +1,18 @@ +import styled from '@emotion/styled'; + +export interface IconWrapperProps { + as?: string; + size?: number; + color?: string; +} + +const IconWrapper = styled.span` + ${({size = 24, color = 'currentColor'}: IconWrapperProps) => ` + width: ${size}px; + height: ${size}px; + color: ${color}; + display: inline-block; + `} +`; + +export {IconWrapper}; diff --git a/packages/paste-icons/src/svg/account-profile.svg b/packages/paste-icons/src/svg/account-profile.svg new file mode 100644 index 0000000000..d5f99dd54a --- /dev/null +++ b/packages/paste-icons/src/svg/account-profile.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/add-ons.svg b/packages/paste-icons/src/svg/add-ons.svg new file mode 100644 index 0000000000..d44434d2ac --- /dev/null +++ b/packages/paste-icons/src/svg/add-ons.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/alert-triggers.svg b/packages/paste-icons/src/svg/alert-triggers.svg new file mode 100644 index 0000000000..f970d34a73 --- /dev/null +++ b/packages/paste-icons/src/svg/alert-triggers.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/api-explorer.svg b/packages/paste-icons/src/svg/api-explorer.svg new file mode 100644 index 0000000000..0e32a72cbe --- /dev/null +++ b/packages/paste-icons/src/svg/api-explorer.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/api-keys.svg b/packages/paste-icons/src/svg/api-keys.svg new file mode 100644 index 0000000000..4689e12c31 --- /dev/null +++ b/packages/paste-icons/src/svg/api-keys.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/arrow-right.svg b/packages/paste-icons/src/svg/arrow-right.svg new file mode 100644 index 0000000000..4335ec6058 --- /dev/null +++ b/packages/paste-icons/src/svg/arrow-right.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/arrow-shaft-down.svg b/packages/paste-icons/src/svg/arrow-shaft-down.svg new file mode 100644 index 0000000000..1fe5c17e57 --- /dev/null +++ b/packages/paste-icons/src/svg/arrow-shaft-down.svg @@ -0,0 +1,9 @@ + + + + Arrow with shaft / Down + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/arrow-shaft-left.svg b/packages/paste-icons/src/svg/arrow-shaft-left.svg new file mode 100644 index 0000000000..1edda3bdfb --- /dev/null +++ b/packages/paste-icons/src/svg/arrow-shaft-left.svg @@ -0,0 +1,9 @@ + + + + Arrow shaft / Left + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/arrow-shaft-right.svg b/packages/paste-icons/src/svg/arrow-shaft-right.svg new file mode 100644 index 0000000000..680da9dfa9 --- /dev/null +++ b/packages/paste-icons/src/svg/arrow-shaft-right.svg @@ -0,0 +1,9 @@ + + + + Arrow shaft / Right + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/arrow-shaft-up.svg b/packages/paste-icons/src/svg/arrow-shaft-up.svg new file mode 100644 index 0000000000..03f0668892 --- /dev/null +++ b/packages/paste-icons/src/svg/arrow-shaft-up.svg @@ -0,0 +1,9 @@ + + + + Arrow shaft / Up + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/assets.svg b/packages/paste-icons/src/svg/assets.svg new file mode 100644 index 0000000000..cc44eca82d --- /dev/null +++ b/packages/paste-icons/src/svg/assets.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/audit-events.svg b/packages/paste-icons/src/svg/audit-events.svg new file mode 100644 index 0000000000..6c6954c7bd --- /dev/null +++ b/packages/paste-icons/src/svg/audit-events.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/authy.svg b/packages/paste-icons/src/svg/authy.svg new file mode 100644 index 0000000000..1c4b872891 --- /dev/null +++ b/packages/paste-icons/src/svg/authy.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/autopilot.svg b/packages/paste-icons/src/svg/autopilot.svg new file mode 100644 index 0000000000..c86cf623de --- /dev/null +++ b/packages/paste-icons/src/svg/autopilot.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/back.svg b/packages/paste-icons/src/svg/back.svg new file mode 100644 index 0000000000..1728f98936 --- /dev/null +++ b/packages/paste-icons/src/svg/back.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/bar-chart.svg b/packages/paste-icons/src/svg/bar-chart.svg new file mode 100644 index 0000000000..0337985ce9 --- /dev/null +++ b/packages/paste-icons/src/svg/bar-chart.svg @@ -0,0 +1,9 @@ + + + + chart-view + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/billing.svg b/packages/paste-icons/src/svg/billing.svg new file mode 100644 index 0000000000..d43ab174ce --- /dev/null +++ b/packages/paste-icons/src/svg/billing.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/build.svg b/packages/paste-icons/src/svg/build.svg new file mode 100644 index 0000000000..ad684fc2a8 --- /dev/null +++ b/packages/paste-icons/src/svg/build.svg @@ -0,0 +1,9 @@ + + + + build + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/channels.svg b/packages/paste-icons/src/svg/channels.svg new file mode 100644 index 0000000000..82438f2a99 --- /dev/null +++ b/packages/paste-icons/src/svg/channels.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/checkbox-checked.svg b/packages/paste-icons/src/svg/checkbox-checked.svg new file mode 100644 index 0000000000..6bc4f9739b --- /dev/null +++ b/packages/paste-icons/src/svg/checkbox-checked.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/checkbox-multi.svg b/packages/paste-icons/src/svg/checkbox-multi.svg new file mode 100644 index 0000000000..617ff525e9 --- /dev/null +++ b/packages/paste-icons/src/svg/checkbox-multi.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/checkbox-unchecked.svg b/packages/paste-icons/src/svg/checkbox-unchecked.svg new file mode 100644 index 0000000000..81c9894b29 --- /dev/null +++ b/packages/paste-icons/src/svg/checkbox-unchecked.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/clock-regular.svg b/packages/paste-icons/src/svg/clock-regular.svg new file mode 100644 index 0000000000..8336330c77 --- /dev/null +++ b/packages/paste-icons/src/svg/clock-regular.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/close.svg b/packages/paste-icons/src/svg/close.svg new file mode 100644 index 0000000000..b2d828ad6f --- /dev/null +++ b/packages/paste-icons/src/svg/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/collapse-menu.svg b/packages/paste-icons/src/svg/collapse-menu.svg new file mode 100644 index 0000000000..01ae28afaa --- /dev/null +++ b/packages/paste-icons/src/svg/collapse-menu.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/collapse.svg b/packages/paste-icons/src/svg/collapse.svg new file mode 100644 index 0000000000..561fb5cb79 --- /dev/null +++ b/packages/paste-icons/src/svg/collapse.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/collapsed.svg b/packages/paste-icons/src/svg/collapsed.svg new file mode 100644 index 0000000000..8065e2c32f --- /dev/null +++ b/packages/paste-icons/src/svg/collapsed.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/community.svg b/packages/paste-icons/src/svg/community.svg new file mode 100644 index 0000000000..20d9ea8aa2 --- /dev/null +++ b/packages/paste-icons/src/svg/community.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/connect-apps.svg b/packages/paste-icons/src/svg/connect-apps.svg new file mode 100644 index 0000000000..18ddca4bcd --- /dev/null +++ b/packages/paste-icons/src/svg/connect-apps.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/connected-devices.svg b/packages/paste-icons/src/svg/connected-devices.svg new file mode 100644 index 0000000000..e93608ca1d --- /dev/null +++ b/packages/paste-icons/src/svg/connected-devices.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/console-dash.svg b/packages/paste-icons/src/svg/console-dash.svg new file mode 100644 index 0000000000..b721af7c71 --- /dev/null +++ b/packages/paste-icons/src/svg/console-dash.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/copy.svg b/packages/paste-icons/src/svg/copy.svg new file mode 100644 index 0000000000..c8871e547b --- /dev/null +++ b/packages/paste-icons/src/svg/copy.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/debugger-old.svg b/packages/paste-icons/src/svg/debugger-old.svg new file mode 100644 index 0000000000..06811875fa --- /dev/null +++ b/packages/paste-icons/src/svg/debugger-old.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/debugger.svg b/packages/paste-icons/src/svg/debugger.svg new file mode 100644 index 0000000000..c1e36a0b84 --- /dev/null +++ b/packages/paste-icons/src/svg/debugger.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/dev-tools.svg b/packages/paste-icons/src/svg/dev-tools.svg new file mode 100644 index 0000000000..fd111a756c --- /dev/null +++ b/packages/paste-icons/src/svg/dev-tools.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/do-not.svg b/packages/paste-icons/src/svg/do-not.svg new file mode 100644 index 0000000000..e71dd43766 --- /dev/null +++ b/packages/paste-icons/src/svg/do-not.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/paste-icons/src/svg/docs.svg b/packages/paste-icons/src/svg/docs.svg new file mode 100644 index 0000000000..4d65a45d92 --- /dev/null +++ b/packages/paste-icons/src/svg/docs.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/download.svg b/packages/paste-icons/src/svg/download.svg new file mode 100644 index 0000000000..5621cd9c64 --- /dev/null +++ b/packages/paste-icons/src/svg/download.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/dropdown.svg b/packages/paste-icons/src/svg/dropdown.svg new file mode 100644 index 0000000000..2a29d7b364 --- /dev/null +++ b/packages/paste-icons/src/svg/dropdown.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/email.svg b/packages/paste-icons/src/svg/email.svg new file mode 100644 index 0000000000..d2bf661ff6 --- /dev/null +++ b/packages/paste-icons/src/svg/email.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/exclamation-circle.svg b/packages/paste-icons/src/svg/exclamation-circle.svg new file mode 100644 index 0000000000..c99fb3ab2e --- /dev/null +++ b/packages/paste-icons/src/svg/exclamation-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/paste-icons/src/svg/expand-menu.svg b/packages/paste-icons/src/svg/expand-menu.svg new file mode 100644 index 0000000000..01ae28afaa --- /dev/null +++ b/packages/paste-icons/src/svg/expand-menu.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/expand.svg b/packages/paste-icons/src/svg/expand.svg new file mode 100644 index 0000000000..350ac72191 --- /dev/null +++ b/packages/paste-icons/src/svg/expand.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/external-link.svg b/packages/paste-icons/src/svg/external-link.svg new file mode 100644 index 0000000000..083d9c443b --- /dev/null +++ b/packages/paste-icons/src/svg/external-link.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/fax-enabled.svg b/packages/paste-icons/src/svg/fax-enabled.svg new file mode 100644 index 0000000000..1f6b529ee7 --- /dev/null +++ b/packages/paste-icons/src/svg/fax-enabled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/fax.svg b/packages/paste-icons/src/svg/fax.svg new file mode 100644 index 0000000000..35667ebde2 --- /dev/null +++ b/packages/paste-icons/src/svg/fax.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/filter.svg b/packages/paste-icons/src/svg/filter.svg new file mode 100644 index 0000000000..7e367a854d --- /dev/null +++ b/packages/paste-icons/src/svg/filter.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/paste-icons/src/svg/flex.svg b/packages/paste-icons/src/svg/flex.svg new file mode 100644 index 0000000000..3becb780dd --- /dev/null +++ b/packages/paste-icons/src/svg/flex.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/go-arrow.svg b/packages/paste-icons/src/svg/go-arrow.svg new file mode 100644 index 0000000000..3bb23c59f7 --- /dev/null +++ b/packages/paste-icons/src/svg/go-arrow.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/help-book.svg b/packages/paste-icons/src/svg/help-book.svg new file mode 100644 index 0000000000..afcb99b5e0 --- /dev/null +++ b/packages/paste-icons/src/svg/help-book.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/help.svg b/packages/paste-icons/src/svg/help.svg new file mode 100644 index 0000000000..aec0485b74 --- /dev/null +++ b/packages/paste-icons/src/svg/help.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/hide.svg b/packages/paste-icons/src/svg/hide.svg new file mode 100644 index 0000000000..dad6c60e09 --- /dev/null +++ b/packages/paste-icons/src/svg/hide.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/home.svg b/packages/paste-icons/src/svg/home.svg new file mode 100644 index 0000000000..9caec66249 --- /dev/null +++ b/packages/paste-icons/src/svg/home.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/info.svg b/packages/paste-icons/src/svg/info.svg new file mode 100644 index 0000000000..62d5872607 --- /dev/null +++ b/packages/paste-icons/src/svg/info.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/information.svg b/packages/paste-icons/src/svg/information.svg new file mode 100644 index 0000000000..296ecf2d7b --- /dev/null +++ b/packages/paste-icons/src/svg/information.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/inspiration.svg b/packages/paste-icons/src/svg/inspiration.svg new file mode 100644 index 0000000000..0dd4abeb3c --- /dev/null +++ b/packages/paste-icons/src/svg/inspiration.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/interconnect.svg b/packages/paste-icons/src/svg/interconnect.svg new file mode 100644 index 0000000000..a3d9998880 --- /dev/null +++ b/packages/paste-icons/src/svg/interconnect.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/ip-messaging.svg b/packages/paste-icons/src/svg/ip-messaging.svg new file mode 100644 index 0000000000..154c642670 --- /dev/null +++ b/packages/paste-icons/src/svg/ip-messaging.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/keyboard.svg b/packages/paste-icons/src/svg/keyboard.svg new file mode 100644 index 0000000000..5c22bfca1b --- /dev/null +++ b/packages/paste-icons/src/svg/keyboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/paste-icons/src/svg/learn.svg b/packages/paste-icons/src/svg/learn.svg new file mode 100644 index 0000000000..68f87be45d --- /dev/null +++ b/packages/paste-icons/src/svg/learn.svg @@ -0,0 +1,9 @@ + + + + learn + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/line-chart.svg b/packages/paste-icons/src/svg/line-chart.svg new file mode 100644 index 0000000000..32db7c9369 --- /dev/null +++ b/packages/paste-icons/src/svg/line-chart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/logo.svg b/packages/paste-icons/src/svg/logo.svg new file mode 100644 index 0000000000..1dd1444d2a --- /dev/null +++ b/packages/paste-icons/src/svg/logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/lookup.svg b/packages/paste-icons/src/svg/lookup.svg new file mode 100644 index 0000000000..1760da94f8 --- /dev/null +++ b/packages/paste-icons/src/svg/lookup.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/messaging.svg b/packages/paste-icons/src/svg/messaging.svg new file mode 100644 index 0000000000..776a2f2bfb --- /dev/null +++ b/packages/paste-icons/src/svg/messaging.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/mms-enabled.svg b/packages/paste-icons/src/svg/mms-enabled.svg new file mode 100644 index 0000000000..bd7b226963 --- /dev/null +++ b/packages/paste-icons/src/svg/mms-enabled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/more.svg b/packages/paste-icons/src/svg/more.svg new file mode 100644 index 0000000000..bdf99b4f62 --- /dev/null +++ b/packages/paste-icons/src/svg/more.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/multi-factor-authentication.svg b/packages/paste-icons/src/svg/multi-factor-authentication.svg new file mode 100644 index 0000000000..d58dffb2dd --- /dev/null +++ b/packages/paste-icons/src/svg/multi-factor-authentication.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/notify.svg b/packages/paste-icons/src/svg/notify.svg new file mode 100644 index 0000000000..b89d03d36e --- /dev/null +++ b/packages/paste-icons/src/svg/notify.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/off.svg b/packages/paste-icons/src/svg/off.svg new file mode 100644 index 0000000000..5079ebffa6 --- /dev/null +++ b/packages/paste-icons/src/svg/off.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/on.svg b/packages/paste-icons/src/svg/on.svg new file mode 100644 index 0000000000..eee33e7e27 --- /dev/null +++ b/packages/paste-icons/src/svg/on.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/partners.svg b/packages/paste-icons/src/svg/partners.svg new file mode 100644 index 0000000000..d8cec9dc39 --- /dev/null +++ b/packages/paste-icons/src/svg/partners.svg @@ -0,0 +1,14 @@ + + + + Group 49 + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/pause-flat.svg b/packages/paste-icons/src/svg/pause-flat.svg new file mode 100644 index 0000000000..6307b03cad --- /dev/null +++ b/packages/paste-icons/src/svg/pause-flat.svg @@ -0,0 +1,10 @@ + + + + Artboard Copy + Created with Sketch. + + + + diff --git a/packages/paste-icons/src/svg/pause.svg b/packages/paste-icons/src/svg/pause.svg new file mode 100644 index 0000000000..95013cadab --- /dev/null +++ b/packages/paste-icons/src/svg/pause.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/pencil.svg b/packages/paste-icons/src/svg/pencil.svg new file mode 100644 index 0000000000..5cc78d7911 --- /dev/null +++ b/packages/paste-icons/src/svg/pencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/paste-icons/src/svg/phone-numbers.svg b/packages/paste-icons/src/svg/phone-numbers.svg new file mode 100644 index 0000000000..7b9d943409 --- /dev/null +++ b/packages/paste-icons/src/svg/phone-numbers.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/phone-verification.svg b/packages/paste-icons/src/svg/phone-verification.svg new file mode 100644 index 0000000000..feac22f38f --- /dev/null +++ b/packages/paste-icons/src/svg/phone-verification.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/pie-chart.svg b/packages/paste-icons/src/svg/pie-chart.svg new file mode 100644 index 0000000000..630917a192 --- /dev/null +++ b/packages/paste-icons/src/svg/pie-chart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/play-flat.svg b/packages/paste-icons/src/svg/play-flat.svg new file mode 100644 index 0000000000..8185464cfa --- /dev/null +++ b/packages/paste-icons/src/svg/play-flat.svg @@ -0,0 +1,11 @@ + + + + Path + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/play.svg b/packages/paste-icons/src/svg/play.svg new file mode 100644 index 0000000000..a33a744b2c --- /dev/null +++ b/packages/paste-icons/src/svg/play.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/plugin.svg b/packages/paste-icons/src/svg/plugin.svg new file mode 100644 index 0000000000..952ba87e52 --- /dev/null +++ b/packages/paste-icons/src/svg/plugin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/plus-button.svg b/packages/paste-icons/src/svg/plus-button.svg new file mode 100644 index 0000000000..27737dfa24 --- /dev/null +++ b/packages/paste-icons/src/svg/plus-button.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/products.svg b/packages/paste-icons/src/svg/products.svg new file mode 100644 index 0000000000..a90a1bca01 --- /dev/null +++ b/packages/paste-icons/src/svg/products.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/proxy.svg b/packages/paste-icons/src/svg/proxy.svg new file mode 100644 index 0000000000..6f30bf8274 --- /dev/null +++ b/packages/paste-icons/src/svg/proxy.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/question.svg b/packages/paste-icons/src/svg/question.svg new file mode 100644 index 0000000000..b5ec76e89f --- /dev/null +++ b/packages/paste-icons/src/svg/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/paste-icons/src/svg/reset.svg b/packages/paste-icons/src/svg/reset.svg new file mode 100644 index 0000000000..d9667fd399 --- /dev/null +++ b/packages/paste-icons/src/svg/reset.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/paste-icons/src/svg/runtime.svg b/packages/paste-icons/src/svg/runtime.svg new file mode 100644 index 0000000000..096aace54d --- /dev/null +++ b/packages/paste-icons/src/svg/runtime.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/search.svg b/packages/paste-icons/src/svg/search.svg new file mode 100644 index 0000000000..b51f44166b --- /dev/null +++ b/packages/paste-icons/src/svg/search.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/settings.svg b/packages/paste-icons/src/svg/settings.svg new file mode 100644 index 0000000000..25173b27ff --- /dev/null +++ b/packages/paste-icons/src/svg/settings.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/sip-trunking.svg b/packages/paste-icons/src/svg/sip-trunking.svg new file mode 100644 index 0000000000..ac1a8caa02 --- /dev/null +++ b/packages/paste-icons/src/svg/sip-trunking.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/sms-enabled.svg b/packages/paste-icons/src/svg/sms-enabled.svg new file mode 100644 index 0000000000..a8876d2847 --- /dev/null +++ b/packages/paste-icons/src/svg/sms-enabled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/spinner.svg b/packages/paste-icons/src/svg/spinner.svg new file mode 100644 index 0000000000..db8a438c25 --- /dev/null +++ b/packages/paste-icons/src/svg/spinner.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/studio.svg b/packages/paste-icons/src/svg/studio.svg new file mode 100644 index 0000000000..f39f10bdca --- /dev/null +++ b/packages/paste-icons/src/svg/studio.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/success.svg b/packages/paste-icons/src/svg/success.svg new file mode 100644 index 0000000000..652515f18c --- /dev/null +++ b/packages/paste-icons/src/svg/success.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/support-lifebuoy.svg b/packages/paste-icons/src/svg/support-lifebuoy.svg new file mode 100644 index 0000000000..5e0e48c50b --- /dev/null +++ b/packages/paste-icons/src/svg/support-lifebuoy.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/support.svg b/packages/paste-icons/src/svg/support.svg new file mode 100644 index 0000000000..afa9e88eb2 --- /dev/null +++ b/packages/paste-icons/src/svg/support.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/sync.svg b/packages/paste-icons/src/svg/sync.svg new file mode 100644 index 0000000000..e07f8ec13e --- /dev/null +++ b/packages/paste-icons/src/svg/sync.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/table-view.svg b/packages/paste-icons/src/svg/table-view.svg new file mode 100644 index 0000000000..bff44ca31c --- /dev/null +++ b/packages/paste-icons/src/svg/table-view.svg @@ -0,0 +1,9 @@ + + + + table-view + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/talk-to-sales.svg b/packages/paste-icons/src/svg/talk-to-sales.svg new file mode 100644 index 0000000000..23b15045df --- /dev/null +++ b/packages/paste-icons/src/svg/talk-to-sales.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/taskrouter.svg b/packages/paste-icons/src/svg/taskrouter.svg new file mode 100644 index 0000000000..f4715aadc4 --- /dev/null +++ b/packages/paste-icons/src/svg/taskrouter.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/templates.svg b/packages/paste-icons/src/svg/templates.svg new file mode 100644 index 0000000000..3f81e730ab --- /dev/null +++ b/packages/paste-icons/src/svg/templates.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/thumb-tack.svg b/packages/paste-icons/src/svg/thumb-tack.svg new file mode 100644 index 0000000000..a0a0eac225 --- /dev/null +++ b/packages/paste-icons/src/svg/thumb-tack.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/ticket-history.svg b/packages/paste-icons/src/svg/ticket-history.svg new file mode 100644 index 0000000000..d1934d7069 --- /dev/null +++ b/packages/paste-icons/src/svg/ticket-history.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/ticket.svg b/packages/paste-icons/src/svg/ticket.svg new file mode 100644 index 0000000000..85b44797a7 --- /dev/null +++ b/packages/paste-icons/src/svg/ticket.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/twiml-bins.svg b/packages/paste-icons/src/svg/twiml-bins.svg new file mode 100644 index 0000000000..dd6b80e5d5 --- /dev/null +++ b/packages/paste-icons/src/svg/twiml-bins.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/two-factor-authentication.svg b/packages/paste-icons/src/svg/two-factor-authentication.svg new file mode 100644 index 0000000000..d87c250e9b --- /dev/null +++ b/packages/paste-icons/src/svg/two-factor-authentication.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/upload.svg b/packages/paste-icons/src/svg/upload.svg new file mode 100644 index 0000000000..c10581a256 --- /dev/null +++ b/packages/paste-icons/src/svg/upload.svg @@ -0,0 +1,9 @@ + + + + Action / Upload + Created with Sketch. + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/users.svg b/packages/paste-icons/src/svg/users.svg new file mode 100644 index 0000000000..77760586e0 --- /dev/null +++ b/packages/paste-icons/src/svg/users.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/video.svg b/packages/paste-icons/src/svg/video.svg new file mode 100644 index 0000000000..d3224bfdab --- /dev/null +++ b/packages/paste-icons/src/svg/video.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/view.svg b/packages/paste-icons/src/svg/view.svg new file mode 100644 index 0000000000..6f2d307bbc --- /dev/null +++ b/packages/paste-icons/src/svg/view.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/voice-enabled.svg b/packages/paste-icons/src/svg/voice-enabled.svg new file mode 100644 index 0000000000..161a3901e5 --- /dev/null +++ b/packages/paste-icons/src/svg/voice-enabled.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/voice.svg b/packages/paste-icons/src/svg/voice.svg new file mode 100644 index 0000000000..9afbd96090 --- /dev/null +++ b/packages/paste-icons/src/svg/voice.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/whatsapp.svg b/packages/paste-icons/src/svg/whatsapp.svg new file mode 100644 index 0000000000..cfa4375ae4 --- /dev/null +++ b/packages/paste-icons/src/svg/whatsapp.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/src/svg/wireless.svg b/packages/paste-icons/src/svg/wireless.svg new file mode 100644 index 0000000000..96d0780aab --- /dev/null +++ b/packages/paste-icons/src/svg/wireless.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/paste-icons/tools/cli.js b/packages/paste-icons/tools/cli.js new file mode 100644 index 0000000000..51cf37ac19 --- /dev/null +++ b/packages/paste-icons/tools/cli.js @@ -0,0 +1,104 @@ +#!/usr/bin/env node + +const fs = require('fs'); +const path = require('path'); +const program = require('commander'); +const {convertSvgToReact} = require('@twilio-labs/svg-to-react'); +const difference = require('lodash.difference'); +const { + SVG_PATH, + REACT_PATH, + getInputPath, + getReactOutputPath, + getInputFileName, + readdirAsync, + getOutputComponentName, +} = require('./utils'); +const {iconTemplate} = require('./iconTemplate'); +const {listTemplate} = require('./listTemplate'); + +const BLACKLIST_FILES = ['.DS_Store']; + +// Helper to handle promise/async errors +function maybeHandleError(msg, error) { + // eslint-disable-next-line eqeqeq + if (error != null) { + // eslint-disable-next-line no-console + console.error(msg); + throw error; + } +} + +// Converts raw svg to react component +function performFileConversion(fileName, outputPath, options) { + // eslint-disable-next-line no-console + console.log(`Converting ${fileName}.`); + // Read the SVG file + fs.readFile(getInputPath(fileName), 'utf8', async (readFileError, fileContents) => { + maybeHandleError('Invalid fileName provided', readFileError); + const cleanedFileName = getOutputComponentName(fileName); + // Convert the SVG into our ideal format + const generatedComponent = await convertSvgToReact(cleanedFileName, fileContents, options); + fs.writeFile(outputPath, generatedComponent, 'utf8', writeFileError => { + maybeHandleError(`Couldn't write formatted SVG to disk`, writeFileError); + }); + }); +} + +const Actions = { + listIcons: async () => { + let reactDestinationFiles; + try { + reactDestinationFiles = await readdirAsync(REACT_PATH); + } catch (error) { + maybeHandleError('Error occured while reading directory!', error); + } + + const iconList = reactDestinationFiles.filter(name => name !== '.DS_Store').map(name => name.replace('.tsx', '')); + + fs.writeFile(path.join(__dirname, './../__IconList.tsx'), listTemplate(iconList), 'utf8', error => { + maybeHandleError(`Couldn't write formatted SVG to disk`, error); + }); + }, + convertNew: async () => { + let sourceFiles; + let reactDestinationFiles; + try { + sourceFiles = await readdirAsync(SVG_PATH); + reactDestinationFiles = await readdirAsync(REACT_PATH); + } catch (error) { + maybeHandleError('Error occured while reading directory!', error); + } + // Map the generated component filename back to the input filename so we can run a diff + reactDestinationFiles = reactDestinationFiles.map(getInputFileName); + + const newReactSvgs = difference(sourceFiles, reactDestinationFiles).filter( + fileName => !BLACKLIST_FILES.includes(fileName) + ); + + newReactSvgs.forEach(fileName => + performFileConversion(fileName, getReactOutputPath(fileName), { + useHooks: false, + template: iconTemplate, + }) + ); + }, +}; + +program.version('0.1.0'); +program + .command('list-icons') + .description(`Generates a list of all our icon components and builds the story`) + .action(Actions.listIcons); + +program + .command('convert-new') + .description(`Converts any svg file in './svg' that isn't in the '/react' folder`) + .action(Actions.convertNew); + +// Assert that a VALID command is provided +if (process.argv.slice(2).length <= 0 || !/[arudl]/.test(process.argv.slice(2))) { + program.outputHelp(); + process.exit(); +} +program.parse(process.argv); diff --git a/packages/paste-icons/tools/iconTemplate.js b/packages/paste-icons/tools/iconTemplate.js new file mode 100644 index 0000000000..17568f887c --- /dev/null +++ b/packages/paste-icons/tools/iconTemplate.js @@ -0,0 +1,37 @@ +// Note on a11y: https://css-tricks.com/can-make-icon-system-accessible/ +const {pascalCaseWordSplitter} = require('./utils'); + +const iconTemplate = ({componentName, svg}) => ` +/** + * This file was automatically generated with @twilio-labs/svg-to-react + */ +import * as React from 'react'; +import {UID} from 'react-uid'; +import {IconWrapper, IconWrapperProps} from './helpers/IconWrapper'; + +export interface ${componentName}Props extends IconWrapperProps { + title?: string; + decorative?: boolean; +} + +const ${componentName}: React.FC<${componentName}Props> = ({title, decorative, ...props}) => ( + + + {uid => ( + ${svg} + )} + + +); + +${componentName}.defaultProps = { + title: '${pascalCaseWordSplitter(componentName)}', + decorative: true, +} + +export {${componentName}}; +`; + +module.exports = { + iconTemplate, +}; diff --git a/packages/paste-icons/tools/listTemplate.js b/packages/paste-icons/tools/listTemplate.js new file mode 100644 index 0000000000..28bb8d9cc9 --- /dev/null +++ b/packages/paste-icons/tools/listTemplate.js @@ -0,0 +1,42 @@ +// Map list of icons and apply transformations to the list +const mapIconList = (list, fn) => + list + .filter(name => name.includes('Icon')) + .map(fn) + .join('\n'); + +// Generates the icon list component +const listTemplate = iconList => { + const importIconList = mapIconList(iconList, iconName => `import {${iconName}} from './src/react/${iconName}';`); + const renderedIconList = mapIconList( + iconList, + iconName => `<${iconName} {...props} />${iconName}` + ); + + return ` +import * as React from 'react'; +import {Text} from '@paste/text'; +import {Grid, StoryIcon} from './__StoryStyles'; + +${importIconList} + +interface IconProps { + title?: string; + decorative?: boolean; + size?: number; + color?: string; +} + +const IconList: React.FC = props => ( + + ${renderedIconList} + +); + +export {IconList}; +`; +}; + +module.exports = { + listTemplate, +}; diff --git a/packages/paste-icons/tools/utils.js b/packages/paste-icons/tools/utils.js new file mode 100644 index 0000000000..499f5f4654 --- /dev/null +++ b/packages/paste-icons/tools/utils.js @@ -0,0 +1,75 @@ +const {join} = require('path'); +const fs = require('fs'); +const startcase = require('lodash.startcase'); +const kebabcase = require('lodash.kebabcase'); + +// Ramda-like general purpose functional pipe method +const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x); + +// Split ComponentName (PascalCase) to multi word regex +const pascalCaseWordSplitter = str => str.replace(/([A-Z]+)/g, ' $1').trim(); + +const addSvgExtension = str => `${str}.svg`; +const addTsxExtension = str => `${str}.tsx`; +const addIconSuffix = str => `${str}Icon`; +const removeIconSuffix = str => str.replace('Icon', ''); +const removeSvgExtension = str => str.replace('.svg', ''); +const removeTsxExtension = str => str.replace('.tsx', ''); +const cleanFileName = str => startcase(str).replace(/ /g, ''); + +const getOutputComponentName = pipe( + removeSvgExtension, + removeIconSuffix, + addIconSuffix, + cleanFileName +); + +const getOutputFileName = pipe( + getOutputComponentName, + addTsxExtension +); + +const getInputFileName = pipe( + removeTsxExtension, + removeIconSuffix, + kebabcase, + addSvgExtension +); + +const SVG_PATH = join(__dirname, '../src/svg'); +const REACT_PATH = join(__dirname, '../src/react'); + +function getInputPath(fileName) { + return join(SVG_PATH, fileName); +} + +function getReactOutputPath(fileName) { + return join(REACT_PATH, getOutputFileName(fileName)); +} + +// To use await, until fs.promises is no longer experimental +const readdirAsync = path => + new Promise((resolve, reject) => { + fs.readdir(path, (error, result) => { + if (error) { + reject(error); + } else { + resolve(result); + } + }); + }); + +module.exports = { + getInputFileName, + getOutputComponentName, + pascalCaseWordSplitter, + cleanFileName, + + SVG_PATH, + REACT_PATH, + + getInputPath, + getReactOutputPath, + + readdirAsync, +}; diff --git a/packages/paste-icons/tsconfig.build.json b/packages/paste-icons/tsconfig.build.json new file mode 100644 index 0000000000..b7f70e8d97 --- /dev/null +++ b/packages/paste-icons/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": ".", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../paste-theme-tokens" + } + ] +} \ No newline at end of file diff --git a/packages/paste-icons/tsconfig.json b/packages/paste-icons/tsconfig.json new file mode 100644 index 0000000000..52d43eaaa9 --- /dev/null +++ b/packages/paste-icons/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-theme-tokens/package.json b/packages/paste-theme-tokens/package.json new file mode 100644 index 0000000000..6b793f53c4 --- /dev/null +++ b/packages/paste-theme-tokens/package.json @@ -0,0 +1,37 @@ +{ + "name": "@paste/theme-tokens", + "version": "0.4.0", + "description": "", + "author": "Twilio Inc.", + "license": "MIT", + "main:dev": "src/index.ts", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "peerDependencies": { + "@paste/design-tokens": "^2.0.2" + }, + "devDependencies": { + "@paste/design-tokens": "^2.2.0", + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-theme-tokens/rollup.config.js b/packages/paste-theme-tokens/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-theme-tokens/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-theme-tokens/src/default/index.ts b/packages/paste-theme-tokens/src/default/index.ts new file mode 100644 index 0000000000..e506c5eb6f --- /dev/null +++ b/packages/paste-theme-tokens/src/default/index.ts @@ -0,0 +1,79 @@ +import { + backgroundColors, + borderColors, + borderWidths, + radii, + colors, + fonts, + fontSizes, + fontWeights, + shadows, + sizings, + spacings, + textColors, + zIndices, +} from '@paste/design-tokens'; + +const breakpoints = [sizings.size40, sizings.size100, sizings.size120]; +const space = {...spacings}; +const lineHeights = { + lineHeight10: '0.75rem', // #12px + lineHeight20: '1rem', // #16px + lineHeight30: '1.25rem', // #20px + lineHeight40: '1.5rem', // #24px + lineHeight50: '1.75rem', // #28px + lineHeight60: '2rem', // #32px + lineHeight70: '2.25rem', // #36px +}; +const maxWidths = { + ...sizings, +}; +const minWidths = { + ...sizings, +}; +const widths = { + ...sizings, +}; +const heights = { + ...sizings, +}; +const borderTypes = { + Primary: {borderColor: borderColors.colorBorderPrimary, borderStyle: 'solid'}, + PrimaryLighter: {borderColor: borderColors.colorBorderPrimaryLighter, borderStyle: 'solid'}, + PrimaryLight: {borderColor: borderColors.colorBorderPrimaryLight, borderStyle: 'solid'}, + PrimaryDark: {borderColor: borderColors.colorBorderPrimaryDark, borderStyle: 'solid'}, + PrimaryDarker: {borderColor: borderColors.colorBorderPrimaryDarker, borderStyle: 'solid'}, + Default: {borderColor: borderColors.colorBorder, borderStyle: 'solid'}, + Light: {borderColor: borderColors.colorBorderLight, borderStyle: 'solid'}, + Dark: {borderColor: borderColors.colorBorderDark, borderStyle: 'solid'}, + Destructive: {borderColor: borderColors.colorBorderDestructive, borderStyle: 'solid'}, + DestructiveLighter: {borderColor: borderColors.colorBorderDestructiveLighter, borderStyle: 'solid'}, + DestructiveLight: {borderColor: borderColors.colorBorderDestructiveLight, borderStyle: 'solid'}, + DestructiveDark: {borderColor: borderColors.colorBorderDestructiveDark, borderStyle: 'solid'}, + DestructiveDarker: {borderColor: borderColors.colorBorderDestructiveDarker, borderStyle: 'solid'}, + Error: {borderColor: borderColors.colorBorderError, borderStyle: 'solid'}, + Input: {borderColor: borderColors.colorBorderInput, borderStyle: 'solid'}, + InputFocus: {borderColor: borderColors.colorBorderInputFocus, borderStyle: 'solid'}, + InputHover: {borderColor: borderColors.colorBorderInputHover, borderStyle: 'solid'}, +}; +export const DefaultTheme = { + colors, + shadows, + space, + breakpoints, + fontSizes, + fonts, + fontWeights, + lineHeights, + textColors, + backgroundColors, + borderColors, + borderTypes, + maxWidths, + minWidths, + widths, + heights, + radii, + borderWidths, + zIndices, +}; diff --git a/packages/paste-theme-tokens/src/index.ts b/packages/paste-theme-tokens/src/index.ts new file mode 100644 index 0000000000..182ddbb030 --- /dev/null +++ b/packages/paste-theme-tokens/src/index.ts @@ -0,0 +1,5 @@ +import {DefaultTheme} from './default'; +import {SendGridTheme} from './sendgrid'; +import {SendGridThemeShape, ThemeShape} from './types'; + +export {DefaultTheme, SendGridTheme, SendGridThemeShape, ThemeShape}; diff --git a/packages/paste-theme-tokens/src/sendgrid/index.ts b/packages/paste-theme-tokens/src/sendgrid/index.ts new file mode 100644 index 0000000000..8a297d0331 --- /dev/null +++ b/packages/paste-theme-tokens/src/sendgrid/index.ts @@ -0,0 +1,79 @@ +import { + backgroundColors, + borderColors, + borderWidths, + radii, + colors, + fonts, + fontSizes, + fontWeights, + shadows, + sizings, + spacings, + textColors, + zIndices, +} from '@paste/design-tokens/dist/themes/sendgrid/tokens.es6'; + +const breakpoints = [sizings.size40, sizings.size100, sizings.size120]; +const space = {...spacings}; +const lineHeights = { + lineHeight10: '0.75rem', // #12px + lineHeight20: '1rem', // #16px + lineHeight30: '1.25rem', // #20px + lineHeight40: '1.5rem', // #24px + lineHeight50: '1.75rem', // #28px + lineHeight60: '2rem', // #32px + lineHeight70: '2.25rem', // #36px +}; +const maxWidths = { + ...sizings, +}; +const minWidths = { + ...sizings, +}; +const widths = { + ...sizings, +}; +const heights = { + ...sizings, +}; +const borderTypes = { + Primary: {borderColor: borderColors.colorBorderPrimary, borderStyle: 'solid'}, + PrimaryLighter: {borderColor: borderColors.colorBorderPrimaryLighter, borderStyle: 'solid'}, + PrimaryLight: {borderColor: borderColors.colorBorderPrimaryLight, borderStyle: 'solid'}, + PrimaryDark: {borderColor: borderColors.colorBorderPrimaryDark, borderStyle: 'solid'}, + PrimaryDarker: {borderColor: borderColors.colorBorderPrimaryDarker, borderStyle: 'solid'}, + Default: {borderColor: borderColors.colorBorder, borderStyle: 'solid'}, + Light: {borderColor: borderColors.colorBorderLight, borderStyle: 'solid'}, + Dark: {borderColor: borderColors.colorBorderDark, borderStyle: 'solid'}, + Destructive: {borderColor: borderColors.colorBorderDestructive, borderStyle: 'solid'}, + DestructiveLighter: {borderColor: borderColors.colorBorderDestructiveLighter, borderStyle: 'solid'}, + DestructiveLight: {borderColor: borderColors.colorBorderDestructiveLight, borderStyle: 'solid'}, + DestructiveDark: {borderColor: borderColors.colorBorderDestructiveDark, borderStyle: 'solid'}, + DestructiveDarker: {borderColor: borderColors.colorBorderDestructiveDarker, borderStyle: 'solid'}, + Error: {borderColor: borderColors.colorBorderError, borderStyle: 'solid'}, + Input: {borderColor: borderColors.colorBorderInput, borderStyle: 'solid'}, + InputFocus: {borderColor: borderColors.colorBorderInputFocus, borderStyle: 'solid'}, + InputHover: {borderColor: borderColors.colorBorderInputHover, borderStyle: 'solid'}, +}; +export const SendGridTheme = { + colors, + shadows, + space, + breakpoints, + fontSizes, + fonts, + fontWeights, + lineHeights, + textColors, + backgroundColors, + borderColors, + borderTypes, + maxWidths, + minWidths, + widths, + heights, + radii, + borderWidths, + zIndices, +}; diff --git a/packages/paste-theme-tokens/src/types/index.ts b/packages/paste-theme-tokens/src/types/index.ts new file mode 100644 index 0000000000..52ce2f4711 --- /dev/null +++ b/packages/paste-theme-tokens/src/types/index.ts @@ -0,0 +1,5 @@ +import {DefaultTheme} from '../default'; +import {SendGridTheme} from '../sendgrid'; + +export type SendGridThemeShape = typeof SendGridTheme; +export type ThemeShape = typeof DefaultTheme; diff --git a/packages/paste-theme-tokens/tsconfig.build.json b/packages/paste-theme-tokens/tsconfig.build.json new file mode 100644 index 0000000000..54405acdf2 --- /dev/null +++ b/packages/paste-theme-tokens/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../paste-design-tokens" + } + ] +} \ No newline at end of file diff --git a/packages/paste-theme-tokens/tsconfig.json b/packages/paste-theme-tokens/tsconfig.json new file mode 100644 index 0000000000..52d43eaaa9 --- /dev/null +++ b/packages/paste-theme-tokens/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-theme/README.md b/packages/paste-theme/README.md new file mode 100644 index 0000000000..278a440ea3 --- /dev/null +++ b/packages/paste-theme/README.md @@ -0,0 +1,79 @@ + + +# Theme Provider + +Paste Components require you to wrap your application in the Paste Theme provider to apply the theme tokens to the components you use, and provide a way to access Paste Design Tokens in your custom components. + +The Paste Theme Provider is a wrapper around the [Emotion Theme Provider](https://emotion.sh/docs/emotion-theming) and comes with a default theme. + +You should place the `Theme.Provider` around the root of your React application. + +```js +import {Theme} from '@paste/theme'; + + + ... + +``` + +## Using tokens in custom components + +Sometimes you will need to create something custom that is not available in Paste but you need that component to still look like it's from Paste. The use of Paste Tokens in your styles is the way that you can access global design properties used in all Paste Components. + +### Emotion Styled Component + +By using the `Theme.Provider`, when you create a custom component using Emotion CSS, the theme object is available on `props` via context. You can access those via the [Styled-System `themeGet` utility](https://styled-system.com/api#themeget) or props object directly. + +This is the preferred method. + +```js +import styled from '@emotion/styled'; +import { themeGet } from 'styled-system'; + +const custom = styled.div` + background-color: ${themeGet('backgrounds.primary')}; + padding: ${props => props.theme.spacing.spacing20}; +` +``` + +### Paste ThemeConsumer + +Paste Theme provides a React Context Consumer for the theme called `Theme.Consumer`. The `Theme.Consumer` takes a function as a child, which provides the theme object as an argument. + +```js +import {Theme} from '@paste/theme'; + + + {({theme}) => { + return

What is the default text color {theme.textColors.colorText}

; + }} + +``` + +### Paste useTheme Hook + +Paste Theme provides a React Hook called `useTheme` which returns the theme object from the React Context via the Theme Provider. + +```js +import React from 'react'; +import { useTheme } from '@paste/theme'; + +const HookExampleComponent = (): React.ReactElement => { + const theme = useTheme(); + return

What is the default text color {theme.textColors.colorText}

; +}; +``` + +### Higher Order Component + +Paste also provides a HOC Component, which is a wrapper around the Emotion [HOC Component](https://emotion.sh/docs/emotion-theming#withthemecomponent-reactcomponenttype-reactcomponenttype) to be able to access the theme object. + +```js +import React from 'react'; +import { withTheme } from '@paste/theme'; + +const ExampleComponent = ({theme}) => ( +

What is the default text color {theme.textColors.colorText}

+); +const ExampleComponentwithTheme = withTheme(ExampleComponent); +``` diff --git a/packages/paste-theme/__tests__/themeConsumer.spec.tsx b/packages/paste-theme/__tests__/themeConsumer.spec.tsx new file mode 100644 index 0000000000..9fb5828efd --- /dev/null +++ b/packages/paste-theme/__tests__/themeConsumer.spec.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import {mount} from 'enzyme'; +import {Theme} from '../src'; + +const ThemeConsumerExampleComponent = (): React.ReactElement => { + return {({theme}) =>

{theme.textColors.colorText}

}; +}; + +describe('Theme.Consumer', () => { + it('should render without crashing', (): void => { + ReactDOM.render( + + + , + document.createElement('div') + ); + }); + + it('should be able to access the theme object', () => { + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('#282a2b'); + }); +}); diff --git a/packages/paste-theme/__tests__/themeProvider.spec.tsx b/packages/paste-theme/__tests__/themeProvider.spec.tsx new file mode 100644 index 0000000000..08b43dc6a3 --- /dev/null +++ b/packages/paste-theme/__tests__/themeProvider.spec.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import {mount} from 'enzyme'; +import {Theme} from '../src'; + +const ThemeConsumerExampleComponent = (): React.ReactElement => { + return {({theme}) =>

{theme.breakpoints.map(breakpoint => `${breakpoint},`)}

}; +}; + +const ThemeConsumerExampleTextColor = (): React.ReactElement => { + return {({theme}) =>

Color: {theme.textColors.colorTextLink}

}; +}; + +describe('Theme.Provider', () => { + it('should render without crashing', (): void => { + ReactDOM.render(, document.createElement('div')); + }); + + it('should render the console link text color', (): void => { + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('Color: #0075c3'); + }); + + it('should render the sendgrid link text color', (): void => { + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('Color: #003adb'); + }); + + it('should rely on the default breakpoints set on the theme object', () => { + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('25rem,64rem,77rem,'); + }); + + it('should set custom breakpoints when provided', () => { + const customBreakpoints = ['30rem', '20rem', '90rem']; + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('30rem,20rem,90rem,'); + }); +}); diff --git a/packages/paste-theme/__tests__/useTheme.spec.tsx b/packages/paste-theme/__tests__/useTheme.spec.tsx new file mode 100644 index 0000000000..3f32fc24c5 --- /dev/null +++ b/packages/paste-theme/__tests__/useTheme.spec.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import {mount} from 'enzyme'; +import {Theme, useTheme} from '../src'; + +const HookExampleComponent = (): React.ReactElement => { + const theme = useTheme(); + return

{theme.textColors.colorText}

; +}; + +describe('useTheme', () => { + it('should render without crashing', (): void => { + ReactDOM.render( + + + , + document.createElement('div') + ); + }); + + it('should be able to access the theme object', () => { + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('#282a2b'); + }); +}); diff --git a/packages/paste-theme/__tests__/withTheme.spec.tsx b/packages/paste-theme/__tests__/withTheme.spec.tsx new file mode 100644 index 0000000000..a72c74a454 --- /dev/null +++ b/packages/paste-theme/__tests__/withTheme.spec.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import {mount} from 'enzyme'; +import {ThemeShape} from '@paste/theme-tokens'; +import {Theme, withTheme} from '../src'; + +const MockComponent = ({theme}: {theme: ThemeShape}): React.ReactElement =>

{theme.textColors.colorText}

; +const MockComponentWithTheme = withTheme(MockComponent); + +describe('withTheme', () => { + it('should render without crashing', (): void => { + ReactDOM.render( + + + , + document.createElement('div') + ); + }); + + it('should be able to access the theme object', () => { + const wrapper = mount( + + + + ); + expect(wrapper.find('p').text()).toBe('#282a2b'); + }); +}); diff --git a/packages/paste-theme/package.json b/packages/paste-theme/package.json new file mode 100644 index 0000000000..b5e70ebf1e --- /dev/null +++ b/packages/paste-theme/package.json @@ -0,0 +1,44 @@ +{ + "name": "@paste/theme", + "version": "0.3.0", + "description": "", + "author": "Twilio Inc.", + "license": "ISC", + "main:dev": "src/index.tsx", + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "scripts": { + "build": "yarn clean && yarn compile", + "build:dev": "yarn clean && yarn compile:dev", + "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache", + "compile": "rollup -c --environment NODE_ENV:production", + "compile:dev": "rollup -c --environment NODE_ENV:development", + "prepublishOnly": "yarn build", + "type-check": "tsc --noEmit" + }, + "dependencies": { + "@paste/theme-tokens": "^0.4.0", + "emotion-theming": "^10.0.10" + }, + "peerDependencies": { + "@emotion/core": "^10.0.14", + "@emotion/styled": "^10.0.14", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "rollup": "^1.16.2", + "rollup-plugin-babel": "^4.3.3", + "rollup-plugin-commonjs": "^10.0.1", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-theme/rollup.config.js b/packages/paste-theme/rollup.config.js new file mode 100644 index 0000000000..24e182a0dc --- /dev/null +++ b/packages/paste-theme/rollup.config.js @@ -0,0 +1,34 @@ +import typescript from 'rollup-plugin-typescript2'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; +import {terser} from 'rollup-plugin-terser'; +import pkg from './package.json'; + +export default { + input: pkg['main:dev'], + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [...Object.keys(pkg.peerDependencies || {})], + plugins: [ + resolve(), + commonjs(), + typescript({ + clean: true, + typescript: require('typescript'), + tsconfig: './tsconfig.build.json', + }), + babel({ + exclude: 'node_modules/**', + }), + process.env.NODE_ENV === 'production' ? terser() : null, + ], +}; diff --git a/packages/paste-theme/src/index.tsx b/packages/paste-theme/src/index.tsx new file mode 100644 index 0000000000..1768fd9d30 --- /dev/null +++ b/packages/paste-theme/src/index.tsx @@ -0,0 +1,11 @@ +import {ThemeProvider} from './themeProvider'; +import {ThemeConsumer} from './themeConsumer'; +import {withTheme} from './withTheme'; +import {useTheme} from './useTheme'; + +const Theme = { + Provider: ThemeProvider, + Consumer: ThemeConsumer, +}; + +export {Theme, withTheme, useTheme}; diff --git a/packages/paste-theme/src/themeConsumer.tsx b/packages/paste-theme/src/themeConsumer.tsx new file mode 100644 index 0000000000..10710b4add --- /dev/null +++ b/packages/paste-theme/src/themeConsumer.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import {ThemeContext} from '@emotion/core'; +import {ThemeShape} from '@paste/theme-tokens'; + +export interface ThemeConsumerProps { + children: ({theme}: {theme: ThemeShape}) => React.ReactNode; +} +const ThemeConsumer = ({children, ...props}: ThemeConsumerProps): React.ReactElement => { + if (children == null || typeof children !== 'function') { + throw new Error('[ThemeConsumer]: You must pass a function as children'); + } + return ( + + {theme => { + const newTheme = theme as ThemeShape; + return children({...props, theme: newTheme}); + }} + + ); +}; + +export {ThemeConsumer}; diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx new file mode 100644 index 0000000000..31a8cb1b0c --- /dev/null +++ b/packages/paste-theme/src/themeProvider.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import styled from '@emotion/styled'; +import {Global, css} from '@emotion/core'; +import {themeGet} from 'styled-system'; +import {ThemeProvider as StyledThemeProvider} from 'emotion-theming'; +import {DefaultTheme, SendGridTheme} from '@paste/theme-tokens'; + +const pasteGlobalStyles = css` + html { + font-size: 100%; + } +`; + +export const StyledBase = styled.div` + font-family: ${themeGet('fonts.fontFamilyText')}; + line-height: 1.15; + font-weight: ${themeGet('fontWeights.fontWeightNormal')}; + + *, + *::after, + *::before { + box-sizing: border-box; + } +`; + +export type ThemeOptions = 'default' | 'sendgrid'; + +export interface ThemeProviderProps { + customBreakpoints?: string[]; + theme?: ThemeOptions; +} + +const ThemeProvider: React.FunctionComponent = ({ + customBreakpoints, + // theme = 'default' | 'console' | 'sendgrid' | 'flex' eventually + theme = 'default', + ...props +}) => { + let breakpoints = {}; + let themeObject = {}; + + // when we have more theme-tokens themes, switch the object here based on the theme prop + switch (theme) { + case 'sendgrid': + themeObject = SendGridTheme; + breakpoints = customBreakpoints || SendGridTheme.breakpoints; + break; + case 'default': + default: + themeObject = DefaultTheme; + breakpoints = customBreakpoints || DefaultTheme.breakpoints; + break; + } + + const providerThemeProp = { + ...themeObject, + breakpoints, + }; + + return ( + + + + + ); +}; + +export {ThemeProvider}; diff --git a/packages/paste-theme/src/useTheme.ts b/packages/paste-theme/src/useTheme.ts new file mode 100644 index 0000000000..82932216ac --- /dev/null +++ b/packages/paste-theme/src/useTheme.ts @@ -0,0 +1,13 @@ +import * as React from 'react'; +import {ThemeContext} from '@emotion/core'; +import {ThemeShape} from '@paste/theme-tokens'; + +const useTheme = (): ThemeShape => { + const context = React.useContext(ThemeContext) as ThemeShape; + if (!context) { + throw new Error('[useHook]: must be used within the @paste/theme provider'); + } + return context; +}; + +export {useTheme}; diff --git a/packages/paste-theme/src/withTheme.ts b/packages/paste-theme/src/withTheme.ts new file mode 100644 index 0000000000..55ebe19cf6 --- /dev/null +++ b/packages/paste-theme/src/withTheme.ts @@ -0,0 +1,3 @@ +import {withTheme} from 'emotion-theming'; + +export {withTheme}; diff --git a/packages/paste-theme/stories/index.stories.tsx b/packages/paste-theme/stories/index.stories.tsx new file mode 100644 index 0000000000..041d598b89 --- /dev/null +++ b/packages/paste-theme/stories/index.stories.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {storiesOf} from '@storybook/react'; +import {ThemeShape} from '@paste/theme-tokens'; +import {Theme, withTheme, useTheme} from '../src'; +// TODO this should recognise the md file as a module based on ./types/index.d.ts module declaration but it doesn't https://github.com/storybookjs/storybook/issues/2883 +// @ts-ignore +import ThemeProviderReadme from '../README.md'; + +interface ExampleComponentProps { + theme: ThemeShape; +} +const ExampleComponent: React.FunctionComponent = ({theme}): React.ReactElement => ( +

What is the default text color using the Paste HOC {theme.textColors.colorText}

+); +const ExampleComponentwithTheme = withTheme(ExampleComponent); + +const HookExampleComponent = (): React.ReactElement => { + const theme = useTheme(); + return

What is the default text color using the Paste useTheme Hook {theme.textColors.colorText}

; +}; + +storiesOf('Overview|Theme', module) + .addParameters({ + readme: { + content: ThemeProviderReadme, + sidebar: ThemeProviderReadme, + codeTheme: 'a11y-dark', + }, + }) + .add('Provider', () => ( + +

Using the Theme Provider to wrap your app

+ + )) + .add('Consumer', () => ( + + {({theme}) =>

What is the default text color using the Theme Consumer {theme.textColors.colorText}

} + + )) + .add('Hook', () => ) + .add('HOC', () => ); diff --git a/packages/paste-theme/tsconfig.build.json b/packages/paste-theme/tsconfig.build.json new file mode 100644 index 0000000000..33c96ba007 --- /dev/null +++ b/packages/paste-theme/tsconfig.build.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "rootDir": "./src" + }, + "include": [ + "src/**/*" + ], + "references": [ + { + "path": "../paste-theme-tokens" + } + ] +} \ No newline at end of file diff --git a/packages/paste-theme/tsconfig.json b/packages/paste-theme/tsconfig.json new file mode 100644 index 0000000000..52d43eaaa9 --- /dev/null +++ b/packages/paste-theme/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/paste-website/.eslintrc b/packages/paste-website/.eslintrc new file mode 100644 index 0000000000..99a66e1149 --- /dev/null +++ b/packages/paste-website/.eslintrc @@ -0,0 +1,6 @@ +{ + "extends": "../../.eslintrc.js", + "rules": { + "import/no-default-export": "off" + } +} diff --git a/packages/paste-website/README.md b/packages/paste-website/README.md new file mode 100644 index 0000000000..c390985446 --- /dev/null +++ b/packages/paste-website/README.md @@ -0,0 +1,9 @@ +# Paste Website + +To run just run + +``` +yarn start +``` + +At the root of the Paste monorepo. diff --git a/packages/paste-website/gatsby-config.js b/packages/paste-website/gatsby-config.js new file mode 100644 index 0000000000..1a4e9d7945 --- /dev/null +++ b/packages/paste-website/gatsby-config.js @@ -0,0 +1,82 @@ +/** + * Configure your Gatsby site with this file. + * + * See: https://www.gatsbyjs.org/docs/gatsby-config/ + */ + +module.exports = { + siteMetadata: { + title: 'Paste', + description: 'Paste, a design system for Twilio.', + siteUrl: 'https://paste.twilio.design', + }, + plugins: [ + `gatsby-plugin-typescript`, + 'gatsby-plugin-react-helmet', + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'packages', + path: `${__dirname}/../../packages/`, + ignore: [ + '**/.*', + '**/.cache/**', + '**/public/**', + '**/__snapshots__/**', + '**/__fixtures__/**', + '**/__tests__/**', + ], + }, + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'pages', + path: `${__dirname}/src/pages`, + }, + }, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'components', + path: `${__dirname}/src/pages/components`, + }, + }, + { + resolve: `gatsby-plugin-mdx`, + options: { + defaultLayouts: { + default: require.resolve('./src/templates/index.tsx'), + components: require.resolve('./src/templates/components.tsx'), + }, + }, + }, + { + resolve: 'gatsby-transformer-json', + options: { + typeName: ({node}) => { + if (node.relativePath.startsWith('paste-core/components') && node.relativePath.endsWith('package.json')) { + return 'PasteComponent'; + } + + if (node.relativePath.startsWith('paste-core/utilities') && node.relativePath.endsWith('package.json')) { + return 'PasteUtility'; + } + + if (node.relativePath.endsWith('gatsby.json')) { + return 'PasteToken'; + } + + return 'DefaultJson'; + }, + }, + }, + { + resolve: 'gatsby-plugin-google-analytics', + options: { + trackingId: 'UA-xxxxxxx-x', + }, + }, + 'gatsby-plugin-sitemap', + ], +}; diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json new file mode 100644 index 0000000000..c21042df34 --- /dev/null +++ b/packages/paste-website/package.json @@ -0,0 +1,40 @@ +{ + "name": "@paste/website", + "description": "", + "version": "0.0.1", + "author": "Twilio Inc.", + "license": "MIT", + "scripts": { + "build": "gatsby build", + "develop": "gatsby develop", + "format": "prettier --write src/**/*.{js,jsx}", + "start": "npm run develop", + "serve": "gatsby serve", + "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" + }, + "dependencies": { + "@emotion/core": "^10.0.10", + "@emotion/styled": "^10.0.10", + "@mdx-js/mdx": "^1.0.23", + "@mdx-js/react": "^1.0.23", + "@mdx-js/tag": "^0.20.3", + "@paste/heading": "^0.3.0", + "@paste/theme": "^0.2.0", + "gatsby": "^2.13.4", + "gatsby-plugin-google-analytics": "^2.1.1", + "gatsby-plugin-mdx": "^1.0.12", + "gatsby-plugin-react-helmet": "^3.1.0", + "gatsby-plugin-sitemap": "^2.2.1", + "gatsby-plugin-typescript": "^2.1.0", + "gatsby-source-filesystem": "^2.1.2", + "gatsby-transformer-json": "^2.2.0", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-helmet": "^5.2.1", + "styled-system": "^4.1.0" + }, + "devDependencies": { + "prettier": "^1.18.2", + "typescript": "^3.5.2" + } +} diff --git a/packages/paste-website/src/components/Header/index.tsx b/packages/paste-website/src/components/Header/index.tsx new file mode 100644 index 0000000000..a8a2392e50 --- /dev/null +++ b/packages/paste-website/src/components/Header/index.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import {Link} from 'gatsby'; +import styled from '@emotion/styled'; +import {themeGet} from 'styled-system'; +import {StyledHeader} from './styled-header'; + +interface HeaderProps { + siteTitle?: string; +} + +const StyledHeaderLink = styled(Link)` + color: ${themeGet('textColors.colorText')}; + + &:visited { + color: ${themeGet('textColors.colorText')}; + } +`; + +const Header: React.FC = props => { + return ( + +

+ {props.siteTitle} +

+ + ); +}; + +export {Header}; diff --git a/packages/paste-website/src/components/Header/styled-header.ts b/packages/paste-website/src/components/Header/styled-header.ts new file mode 100644 index 0000000000..16c4f0626a --- /dev/null +++ b/packages/paste-website/src/components/Header/styled-header.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; +import {themeGet} from 'styled-system'; + +export const StyledHeader = styled.header` + padding: 30px 20px; + color: ${themeGet('textColors.colorText')}; +`; diff --git a/packages/paste-website/src/components/component-overview-table/index.tsx b/packages/paste-website/src/components/component-overview-table/index.tsx new file mode 100644 index 0000000000..cbad491bfd --- /dev/null +++ b/packages/paste-website/src/components/component-overview-table/index.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; + +interface ComponentOverviewTableProps { + children?: React.ReactElement; + componentsList?: [ + { + node: { + name: string; + version: string; + }; + } + ]; +} +export const ComponentOverviewTable: React.FC = ( + props: ComponentOverviewTableProps +): React.ReactElement => { + return ( + + + + + + + + + + {props.componentsList != null && + props.componentsList.map(({node}) => { + return ( + + + + + ); + })} + +
NameStatusVersion
+ {node.name} + + {node.version}
+ ); +}; diff --git a/packages/paste-website/src/components/default-site-wrapper/index.tsx b/packages/paste-website/src/components/default-site-wrapper/index.tsx new file mode 100644 index 0000000000..5197c09c10 --- /dev/null +++ b/packages/paste-website/src/components/default-site-wrapper/index.tsx @@ -0,0 +1,170 @@ +import * as React from 'react'; +import {graphql, useStaticQuery, Link} from 'gatsby'; +import {Global, css} from '@emotion/core'; +import styled from '@emotion/styled'; +import {themeGet} from 'styled-system'; +import {Theme} from '@paste/theme'; +import {Header} from '../header'; + +interface SiteWrapperProps { + children: React.ReactNode; +} +interface SiteWrapperPageQuery { + allPasteComponent: { + edges: [ + { + node: { + name: string; + }; + } + ]; + }; + allPasteUtility: { + edges: [ + { + node: { + name: string; + }; + } + ]; + }; +} + +const pageQuery = graphql` + { + allSitePage(filter: {path: {ne: "/dev-404-page/"}}) { + edges { + node { + path + componentChunkName + componentPath + id + component + internalComponentName + isCreatedByStatefulCreatePages + pluginCreatorId + } + } + } + allPasteComponent(sort: {order: ASC, fields: name}) { + edges { + node { + name + version + } + } + } + allPasteUtility(sort: {order: ASC, fields: name}) { + edges { + node { + version + name + } + } + } + } +`; + +const globalStyles = css` + body { + margin: 0; + } +`; + +const SiteBody = styled.div` + display: flex; +`; + +const SiteHeader = styled.header` + background-color: ${themeGet('backgroundColors.colorBackground')}; + ${themeGet('borderTypes.Light')}; + border-width: 0 1px 0 0; + display: flex; + flex-direction: column; + padding: ${themeGet('space.space40')}; + position: fixed; + bottom: 0; + top: 0; + width: ${themeGet('maxWidths.size30')}; +`; + +const SiteMain = styled.main` + margin-left: ${themeGet('widths.size30')}; + padding: ${themeGet('space.space80')}; +`; + +const SiteNav = styled.nav``; + +const SiteNavList = styled.ul` + list-style: none; + padding: 0; + margin: 0; +`; + +const SiteNavNestList = styled(SiteNavList)` + margin-left: ${themeGet('space.space30')}; +`; + +const SiteNavItem = styled.li``; + +const SiteNavAnchor = styled(Link)` + color: ${themeGet('textColors.colorText')}; + display: block; + width: 100%; +`; + +const SiteWrapper: React.FC = props => { + const data: SiteWrapperPageQuery = useStaticQuery(pageQuery); + console.log('SiteWrapper Query', data); + return ( + + + + +
+ + + + Getting Started + + + Tokens + + + Components + + {data.allPasteComponent.edges.map(({node}) => { + return ( + + + {node.name.replace('@paste/', '')} + + + ); + })} + + + + Utilities + + {data.allPasteUtility.edges.map(({node}) => { + return ( + + + {node.name.replace('@paste/', '')} + + + ); + })} + + + + + + {props.children} + + + ); +}; + +export {SiteWrapper}; diff --git a/packages/paste-website/src/components/mdx/index.tsx b/packages/paste-website/src/components/mdx/index.tsx new file mode 100644 index 0000000000..0b8e8ac2ad --- /dev/null +++ b/packages/paste-website/src/components/mdx/index.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import {PasteMDXProvider} from './mdx-provider'; + +interface MDXProps { + children?: React.ReactElement; +} +export const PasteMDX: React.FC = (props: MDXProps): React.ReactElement => { + return {props.children}; +}; diff --git a/packages/paste-website/src/components/mdx/mdx-provider/index.tsx b/packages/paste-website/src/components/mdx/mdx-provider/index.tsx new file mode 100644 index 0000000000..ad2cc48ca7 --- /dev/null +++ b/packages/paste-website/src/components/mdx/mdx-provider/index.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {MDXProvider} from '@mdx-js/react'; +import {Heading} from '@paste/heading'; + +interface PasteMDXProviderProps { + children?: React.ReactElement; +} + +export const PasteMDXProvider: React.FC = (props: PasteMDXProviderProps): React.ReactElement => { + return ( + , + h2: (props): React.ReactElement => , + h3: (props): React.ReactElement => , + h4: (props): React.ReactElement => , + h5: (props): React.ReactElement => , + h6: (props): React.ReactElement => , + p: (props): React.ReactElement =>

, + ul: (props): React.ReactElement =>