Skip to content
Permalink
Browse files

feat(icons): delete old icons, add new streamline icons (#129)

* feat(icons): delete old icons, add new streamline icons

BREAKING CHANGE: removed all the inherited icons since we're moving to a new system

* chore(icons): update icon list for storybook

* fix(spinner): use new icon

* fix(storybook): use new icon for story

* fix(story): button icons should be 24px

* fix: adjust icon size tokens

* feat: add iconSizes as separate key in theme-tokens

* feat(icons): icons package to use tokens and update icons

* fix(spinner): update to use tokens and new icons

* fix(button): use correct spinner size

* fix(icons): major icons package fixes

- huge overhaul to build process
- now uses rollup
- builds into cjs and esm directories
- made the package publishable to npm
- moved svg folder out of src, now src only holds react stuff
- updated scripts to use new paths and cleaned up the code
- programmatically generates rollup config from the icon-list command

* chore: add new icons dist folders to gitignore

* fix: spinner and button icon usage

* feat(icons): add rollup icon list cache file

* fix(core-bundle): sort packages for consistent builds

* chore: use `esm` instead of `es` in rollup for correctness

* chore: yarn.lock

* fix(spinner): lint error

* chore(icons): move rollup icon list

* chore(spinner): use types package in story

* fix(spinner): swap out destructured props for explicit props
  • Loading branch information
TheSisb committed Nov 5, 2019
1 parent 40976a1 commit 571791ded8ee4c55bb5a3dbcebee4b17b2c7c826
Showing with 570 additions and 5,813 deletions.
  1. +2 −1 .gitignore
  2. +1 −1 packages/paste-core/components/anchor/rollup.config.js
  3. +1 −1 packages/paste-core/components/button/rollup.config.js
  4. +1 −1 packages/paste-core/components/button/src/index.tsx
  5. +3 −3 packages/paste-core/components/button/stories/index.stories.tsx
  6. +1 −1 packages/paste-core/components/card/rollup.config.js
  7. +1 −1 packages/paste-core/components/heading/rollup.config.js
  8. +1 −1 packages/paste-core/components/input/rollup.config.js
  9. +4 −5 packages/paste-core/components/paragraph/rollup.config.js
  10. +4 −1 packages/paste-core/components/spinner/package.json
  11. +1 −1 packages/paste-core/components/spinner/rollup.config.js
  12. +16 −6 packages/paste-core/components/spinner/src/index.tsx
  13. +17 −2 packages/paste-core/components/spinner/stories/index.stories.tsx
  14. +3 −0 packages/paste-core/components/spinner/tsconfig.build.json
  15. +4 −5 packages/paste-core/components/typography/rollup.config.js
  16. +2 −1 packages/paste-core/core-bundle/package.json
  17. +1 −1 packages/paste-core/core-bundle/rollup.config.js
  18. +6 −6 packages/paste-core/core-bundle/src/index.tsx
  19. +5 −2 packages/paste-core/core-bundle/tools/generate.js
  20. +1 −1 packages/paste-core/utilities/absolute/rollup.config.js
  21. +1 −1 packages/paste-core/utilities/aspect-ratio/rollup.config.js
  22. +1 −1 packages/paste-core/utilities/box/rollup.config.js
  23. +1 −1 packages/paste-core/utilities/media-object/rollup.config.js
  24. +1 −1 packages/paste-core/utilities/screen-reader-only/rollup.config.js
  25. +1 −1 packages/paste-core/utilities/text/rollup.config.js
  26. +1 −1 packages/paste-core/utilities/truncate/rollup.config.js
  27. +2 −2 packages/paste-design-tokens/tokens/global/sizing.yml
  28. +4 −226 packages/paste-icons/__IconList.tsx
  29. +18 −7 packages/paste-icons/package.json
  30. +35 −0 packages/paste-icons/rollup.config.js
  31. +1 −0 packages/paste-icons/rollup.icon-list.js
  32. +36 −0 packages/paste-icons/src/LoadingIcon.tsx
  33. +36 −0 packages/paste-icons/src/PlusIcon.tsx
  34. +36 −0 packages/paste-icons/src/helpers/IconWrapper.tsx
  35. +0 −43 packages/paste-icons/src/react/AccountProfileIcon.tsx
  36. +0 −43 packages/paste-icons/src/react/AddOnsIcon.tsx
  37. +0 −43 packages/paste-icons/src/react/AlertTriggersIcon.tsx
  38. +0 −43 packages/paste-icons/src/react/ApiExplorerIcon.tsx
  39. +0 −43 packages/paste-icons/src/react/ApiKeysIcon.tsx
  40. +0 −43 packages/paste-icons/src/react/ArrowRightIcon.tsx
  41. +0 −37 packages/paste-icons/src/react/ArrowShaftDownIcon.tsx
  42. +0 −37 packages/paste-icons/src/react/ArrowShaftLeftIcon.tsx
  43. +0 −37 packages/paste-icons/src/react/ArrowShaftRightIcon.tsx
  44. +0 −37 packages/paste-icons/src/react/ArrowShaftUpIcon.tsx
  45. +0 −40 packages/paste-icons/src/react/AssetsIcon.tsx
  46. +0 −43 packages/paste-icons/src/react/AuditEventsIcon.tsx
  47. +0 −43 packages/paste-icons/src/react/AuthyIcon.tsx
  48. +0 −43 packages/paste-icons/src/react/AutopilotIcon.tsx
  49. +0 −43 packages/paste-icons/src/react/BackIcon.tsx
  50. +0 −37 packages/paste-icons/src/react/BarChartIcon.tsx
  51. +0 −43 packages/paste-icons/src/react/BillingIcon.tsx
  52. +0 −37 packages/paste-icons/src/react/BuildIcon.tsx
  53. +0 −43 packages/paste-icons/src/react/ChannelsIcon.tsx
  54. +0 −43 packages/paste-icons/src/react/CheckboxCheckedIcon.tsx
  55. +0 −43 packages/paste-icons/src/react/CheckboxMultiIcon.tsx
  56. +0 −40 packages/paste-icons/src/react/CheckboxUncheckedIcon.tsx
  57. +0 −43 packages/paste-icons/src/react/ClockRegularIcon.tsx
  58. +0 −43 packages/paste-icons/src/react/CloseIcon.tsx
  59. +0 −43 packages/paste-icons/src/react/CollapseIcon.tsx
  60. +0 −43 packages/paste-icons/src/react/CollapseMenuIcon.tsx
  61. +0 −43 packages/paste-icons/src/react/CollapsedIcon.tsx
  62. +0 −43 packages/paste-icons/src/react/CommunityIcon.tsx
  63. +0 −43 packages/paste-icons/src/react/ConnectAppsIcon.tsx
  64. +0 −43 packages/paste-icons/src/react/ConnectedDevicesIcon.tsx
  65. +0 −43 packages/paste-icons/src/react/ConsoleDashIcon.tsx
  66. +0 −43 packages/paste-icons/src/react/CopyIcon.tsx
  67. +0 −43 packages/paste-icons/src/react/DebuggerIcon.tsx
  68. +0 −43 packages/paste-icons/src/react/DebuggerOldIcon.tsx
  69. +0 −43 packages/paste-icons/src/react/DevToolsIcon.tsx
  70. +0 −37 packages/paste-icons/src/react/DoNotIcon.tsx
  71. +0 −43 packages/paste-icons/src/react/DocsIcon.tsx
  72. +0 −43 packages/paste-icons/src/react/DownloadIcon.tsx
  73. +0 −43 packages/paste-icons/src/react/DropdownIcon.tsx
  74. +0 −43 packages/paste-icons/src/react/EmailIcon.tsx
  75. +0 −43 packages/paste-icons/src/react/ExclamationCircleIcon.tsx
  76. +0 −43 packages/paste-icons/src/react/ExpandIcon.tsx
  77. +0 −43 packages/paste-icons/src/react/ExpandMenuIcon.tsx
  78. +0 −43 packages/paste-icons/src/react/ExternalLinkIcon.tsx
  79. +0 −43 packages/paste-icons/src/react/FaxEnabledIcon.tsx
  80. +0 −43 packages/paste-icons/src/react/FaxIcon.tsx
  81. +0 −37 packages/paste-icons/src/react/FilterIcon.tsx
  82. +0 −43 packages/paste-icons/src/react/FlexIcon.tsx
  83. +0 −43 packages/paste-icons/src/react/GoArrowIcon.tsx
  84. +0 −43 packages/paste-icons/src/react/HelpBookIcon.tsx
  85. +0 −43 packages/paste-icons/src/react/HelpIcon.tsx
  86. +0 −43 packages/paste-icons/src/react/HideIcon.tsx
  87. +0 −43 packages/paste-icons/src/react/HomeIcon.tsx
  88. +0 −43 packages/paste-icons/src/react/InfoIcon.tsx
  89. +0 −43 packages/paste-icons/src/react/InformationIcon.tsx
  90. +0 −43 packages/paste-icons/src/react/InspirationIcon.tsx
  91. +0 −43 packages/paste-icons/src/react/InterconnectIcon.tsx
  92. +0 −43 packages/paste-icons/src/react/IpMessagingIcon.tsx
  93. +0 −37 packages/paste-icons/src/react/KeyboardIcon.tsx
  94. +0 −37 packages/paste-icons/src/react/LearnIcon.tsx
  95. +0 −43 packages/paste-icons/src/react/LineChartIcon.tsx
  96. +0 −43 packages/paste-icons/src/react/LogoIcon.tsx
  97. +0 −43 packages/paste-icons/src/react/LookupIcon.tsx
  98. +0 −43 packages/paste-icons/src/react/MessagingIcon.tsx
  99. +0 −43 packages/paste-icons/src/react/MmsEnabledIcon.tsx
  100. +0 −43 packages/paste-icons/src/react/MoreIcon.tsx
  101. +0 −43 packages/paste-icons/src/react/MultiFactorAuthenticationIcon.tsx
  102. +0 −43 packages/paste-icons/src/react/NotifyIcon.tsx
  103. +0 −43 packages/paste-icons/src/react/OffIcon.tsx
  104. +0 −43 packages/paste-icons/src/react/OnIcon.tsx
  105. +0 −45 packages/paste-icons/src/react/PartnersIcon.tsx
  106. +0 −33 packages/paste-icons/src/react/PauseFlatIcon.tsx
  107. +0 −43 packages/paste-icons/src/react/PauseIcon.tsx
  108. +0 −37 packages/paste-icons/src/react/PencilIcon.tsx
  109. +0 −43 packages/paste-icons/src/react/PhoneNumbersIcon.tsx
  110. +0 −43 packages/paste-icons/src/react/PhoneVerificationIcon.tsx
  111. +0 −43 packages/paste-icons/src/react/PieChartIcon.tsx
  112. +0 −37 packages/paste-icons/src/react/PlayFlatIcon.tsx
  113. +0 −43 packages/paste-icons/src/react/PlayIcon.tsx
  114. +0 −43 packages/paste-icons/src/react/PluginIcon.tsx
  115. +0 −40 packages/paste-icons/src/react/PlusButtonIcon.tsx
  116. +0 −43 packages/paste-icons/src/react/ProductsIcon.tsx
  117. +0 −43 packages/paste-icons/src/react/ProxyIcon.tsx
  118. +0 −37 packages/paste-icons/src/react/QuestionIcon.tsx
  119. +0 −33 packages/paste-icons/src/react/ResetIcon.tsx
  120. +0 −43 packages/paste-icons/src/react/RuntimeIcon.tsx
  121. +0 −43 packages/paste-icons/src/react/SearchIcon.tsx
  122. +0 −43 packages/paste-icons/src/react/SettingsIcon.tsx
  123. +0 −43 packages/paste-icons/src/react/SipTrunkingIcon.tsx
  124. +0 −43 packages/paste-icons/src/react/SmsEnabledIcon.tsx
  125. +0 −43 packages/paste-icons/src/react/SpinnerIcon.tsx
  126. +0 −43 packages/paste-icons/src/react/StudioIcon.tsx
  127. +0 −43 packages/paste-icons/src/react/SuccessIcon.tsx
  128. +0 −43 packages/paste-icons/src/react/SupportIcon.tsx
  129. +0 −43 packages/paste-icons/src/react/SupportLifebuoyIcon.tsx
  130. +0 −43 packages/paste-icons/src/react/SyncIcon.tsx
  131. +0 −37 packages/paste-icons/src/react/TableViewIcon.tsx
  132. +0 −43 packages/paste-icons/src/react/TalkToSalesIcon.tsx
  133. +0 −43 packages/paste-icons/src/react/TaskrouterIcon.tsx
  134. +0 −43 packages/paste-icons/src/react/TemplatesIcon.tsx
  135. +0 −43 packages/paste-icons/src/react/ThumbTackIcon.tsx
  136. +0 −43 packages/paste-icons/src/react/TicketHistoryIcon.tsx
  137. +0 −43 packages/paste-icons/src/react/TicketIcon.tsx
  138. +0 −43 packages/paste-icons/src/react/TwimlBinsIcon.tsx
  139. +0 −43 packages/paste-icons/src/react/TwoFactorAuthenticationIcon.tsx
  140. +0 −37 packages/paste-icons/src/react/UploadIcon.tsx
  141. +0 −43 packages/paste-icons/src/react/UsersIcon.tsx
  142. +0 −43 packages/paste-icons/src/react/VideoIcon.tsx
  143. +0 −43 packages/paste-icons/src/react/ViewIcon.tsx
  144. +0 −43 packages/paste-icons/src/react/VoiceEnabledIcon.tsx
  145. +0 −43 packages/paste-icons/src/react/VoiceIcon.tsx
  146. +0 −43 packages/paste-icons/src/react/WhatsappIcon.tsx
  147. +0 −43 packages/paste-icons/src/react/WirelessIcon.tsx
  148. +0 −18 packages/paste-icons/src/react/helpers/IconWrapper.tsx
  149. +0 −4 packages/paste-icons/src/svg/account-profile.svg
  150. +0 −4 packages/paste-icons/src/svg/add-ons.svg
  151. +0 −4 packages/paste-icons/src/svg/alert-triggers.svg
  152. +0 −4 packages/paste-icons/src/svg/api-explorer.svg
  153. +0 −4 packages/paste-icons/src/svg/api-keys.svg
  154. +0 −4 packages/paste-icons/src/svg/arrow-right.svg
  155. +0 −9 packages/paste-icons/src/svg/arrow-shaft-down.svg
  156. +0 −9 packages/paste-icons/src/svg/arrow-shaft-left.svg
  157. +0 −9 packages/paste-icons/src/svg/arrow-shaft-right.svg
  158. +0 −9 packages/paste-icons/src/svg/arrow-shaft-up.svg
  159. +0 −4 packages/paste-icons/src/svg/assets.svg
  160. +0 −4 packages/paste-icons/src/svg/audit-events.svg
  161. +0 −4 packages/paste-icons/src/svg/authy.svg
  162. +0 −4 packages/paste-icons/src/svg/autopilot.svg
  163. +0 −4 packages/paste-icons/src/svg/back.svg
  164. +0 −9 packages/paste-icons/src/svg/bar-chart.svg
  165. +0 −4 packages/paste-icons/src/svg/billing.svg
  166. +0 −9 packages/paste-icons/src/svg/build.svg
  167. +0 −4 packages/paste-icons/src/svg/channels.svg
  168. +0 −4 packages/paste-icons/src/svg/checkbox-checked.svg
  169. +0 −4 packages/paste-icons/src/svg/checkbox-multi.svg
  170. +0 −4 packages/paste-icons/src/svg/checkbox-unchecked.svg
  171. +0 −4 packages/paste-icons/src/svg/clock-regular.svg
  172. +0 −4 packages/paste-icons/src/svg/close.svg
  173. +0 −4 packages/paste-icons/src/svg/collapse-menu.svg
  174. +0 −4 packages/paste-icons/src/svg/collapse.svg
  175. +0 −4 packages/paste-icons/src/svg/collapsed.svg
  176. +0 −4 packages/paste-icons/src/svg/community.svg
  177. +0 −4 packages/paste-icons/src/svg/connect-apps.svg
  178. +0 −4 packages/paste-icons/src/svg/connected-devices.svg
  179. +0 −4 packages/paste-icons/src/svg/console-dash.svg
  180. +0 −4 packages/paste-icons/src/svg/copy.svg
  181. +0 −4 packages/paste-icons/src/svg/debugger-old.svg
  182. +0 −4 packages/paste-icons/src/svg/debugger.svg
  183. +0 −4 packages/paste-icons/src/svg/dev-tools.svg
  184. +0 −8 packages/paste-icons/src/svg/do-not.svg
  185. +0 −4 packages/paste-icons/src/svg/docs.svg
  186. +0 −4 packages/paste-icons/src/svg/download.svg
  187. +0 −4 packages/paste-icons/src/svg/dropdown.svg
  188. +0 −4 packages/paste-icons/src/svg/email.svg
  189. +0 −3 packages/paste-icons/src/svg/exclamation-circle.svg
  190. +0 −4 packages/paste-icons/src/svg/expand-menu.svg
  191. +0 −4 packages/paste-icons/src/svg/expand.svg
  192. +0 −4 packages/paste-icons/src/svg/external-link.svg
  193. +0 −4 packages/paste-icons/src/svg/fax-enabled.svg
  194. +0 −4 packages/paste-icons/src/svg/fax.svg
  195. +0 −16 packages/paste-icons/src/svg/filter.svg
  196. +0 −4 packages/paste-icons/src/svg/flex.svg
  197. +0 −4 packages/paste-icons/src/svg/go-arrow.svg
  198. +0 −4 packages/paste-icons/src/svg/help-book.svg
  199. +0 −4 packages/paste-icons/src/svg/help.svg
  200. +0 −4 packages/paste-icons/src/svg/hide.svg
  201. +0 −4 packages/paste-icons/src/svg/home.svg
  202. +0 −4 packages/paste-icons/src/svg/info.svg
  203. +0 −4 packages/paste-icons/src/svg/information.svg
  204. +0 −4 packages/paste-icons/src/svg/inspiration.svg
  205. +0 −4 packages/paste-icons/src/svg/interconnect.svg
  206. +0 −4 packages/paste-icons/src/svg/ip-messaging.svg
  207. +0 −3 packages/paste-icons/src/svg/keyboard.svg
  208. +0 −9 packages/paste-icons/src/svg/learn.svg
  209. +0 −4 packages/paste-icons/src/svg/line-chart.svg
  210. +0 −4 packages/paste-icons/src/svg/logo.svg
  211. +0 −4 packages/paste-icons/src/svg/lookup.svg
  212. +0 −4 packages/paste-icons/src/svg/messaging.svg
  213. +0 −4 packages/paste-icons/src/svg/mms-enabled.svg
  214. +0 −4 packages/paste-icons/src/svg/more.svg
  215. +0 −4 packages/paste-icons/src/svg/multi-factor-authentication.svg
  216. +0 −4 packages/paste-icons/src/svg/notify.svg
  217. +0 −4 packages/paste-icons/src/svg/off.svg
  218. +0 −4 packages/paste-icons/src/svg/on.svg
  219. +0 −14 packages/paste-icons/src/svg/partners.svg
  220. +0 −10 packages/paste-icons/src/svg/pause-flat.svg
  221. +0 −4 packages/paste-icons/src/svg/pause.svg
  222. +0 −3 packages/paste-icons/src/svg/pencil.svg
  223. +0 −4 packages/paste-icons/src/svg/phone-numbers.svg
  224. +0 −4 packages/paste-icons/src/svg/phone-verification.svg
  225. +0 −4 packages/paste-icons/src/svg/pie-chart.svg
  226. +0 −11 packages/paste-icons/src/svg/play-flat.svg
  227. +0 −4 packages/paste-icons/src/svg/play.svg
  228. +0 −4 packages/paste-icons/src/svg/plugin.svg
  229. +0 −4 packages/paste-icons/src/svg/plus-button.svg
  230. +0 −4 packages/paste-icons/src/svg/products.svg
  231. +0 −4 packages/paste-icons/src/svg/proxy.svg
  232. +0 −3 packages/paste-icons/src/svg/question.svg
  233. +0 −3 packages/paste-icons/src/svg/reset.svg
  234. +0 −4 packages/paste-icons/src/svg/runtime.svg
  235. +0 −4 packages/paste-icons/src/svg/search.svg
  236. +0 −4 packages/paste-icons/src/svg/settings.svg
  237. +0 −4 packages/paste-icons/src/svg/sip-trunking.svg
  238. +0 −4 packages/paste-icons/src/svg/sms-enabled.svg
  239. +0 −4 packages/paste-icons/src/svg/spinner.svg
  240. +0 −4 packages/paste-icons/src/svg/studio.svg
  241. +0 −4 packages/paste-icons/src/svg/success.svg
  242. +0 −4 packages/paste-icons/src/svg/support-lifebuoy.svg
  243. +0 −4 packages/paste-icons/src/svg/support.svg
  244. +0 −4 packages/paste-icons/src/svg/sync.svg
  245. +0 −9 packages/paste-icons/src/svg/table-view.svg
  246. +0 −4 packages/paste-icons/src/svg/talk-to-sales.svg
  247. +0 −4 packages/paste-icons/src/svg/taskrouter.svg
  248. +0 −4 packages/paste-icons/src/svg/templates.svg
  249. +0 −4 packages/paste-icons/src/svg/thumb-tack.svg
  250. +0 −4 packages/paste-icons/src/svg/ticket-history.svg
  251. +0 −4 packages/paste-icons/src/svg/ticket.svg
  252. +0 −4 packages/paste-icons/src/svg/twiml-bins.svg
  253. +0 −4 packages/paste-icons/src/svg/two-factor-authentication.svg
  254. +0 −9 packages/paste-icons/src/svg/upload.svg
  255. +0 −4 packages/paste-icons/src/svg/users.svg
  256. +0 −4 packages/paste-icons/src/svg/video.svg
  257. +0 −4 packages/paste-icons/src/svg/view.svg
  258. +0 −4 packages/paste-icons/src/svg/voice-enabled.svg
  259. +0 −4 packages/paste-icons/src/svg/voice.svg
  260. +0 −4 packages/paste-icons/src/svg/whatsapp.svg
  261. +0 −4 packages/paste-icons/src/svg/wireless.svg
  262. +3 −0 packages/paste-icons/svg/LoadingIcon.svg
  263. +3 −0 packages/paste-icons/svg/PlusIcon.svg
  264. +65 −0 packages/paste-icons/tools/actions/convertNewAction.js
  265. +30 −0 packages/paste-icons/tools/actions/listIconsAction.js
  266. +4 −86 packages/paste-icons/tools/cli.js
  267. +13 −0 packages/paste-icons/tools/constants.js
  268. +3 −4 packages/paste-icons/tools/{iconTemplate.js → templates/reactIconTemplate.js}
  269. +10 −0 packages/paste-icons/tools/templates/rollupListTemplate.js
  270. +3 −3 packages/paste-icons/tools/{listTemplate.js → templates/storybookListTemplate.js}
  271. +27 −11 packages/paste-icons/tools/utils.js
  272. +10 −4 packages/paste-icons/tsconfig.build.json
  273. +1 −1 packages/paste-theme-tokens/rollup.config.js
  274. +6 −0 packages/paste-theme-tokens/src/default/index.ts
  275. +6 −0 packages/paste-theme-tokens/src/sendgrid/index.ts
  276. +1 −1 packages/paste-theme/rollup.config.js
  277. +1 −1 packages/paste-types/rollup.config.js
  278. +1 −0 packages/paste-types/src/style-props/layout.ts
  279. +1 −1 packages/paste-types/src/style-props/typography.ts
  280. +133 −128 yarn.lock
@@ -72,7 +72,8 @@ public
**/lib/*
**/dist/*
packages/**/docs
**/paste-icons/react/*
**/paste-icons/cjs/*
**/paste-icons/esm/*
*.tsbuildinfo
package-lock.json
tools/.cache/packages.json
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -89,7 +89,7 @@ const Button: React.FC<ButtonProps> = props => {
<ButtonChildren buttonState={buttonState}>{props.children}</ButtonChildren>
{showLoading ? (
<SpinnerWrapper as="span">
<Spinner size={20} title=". Loading, please wait." />
<Spinner title=". Loading, please wait." />
</SpinnerWrapper>
) : null}
</ButtonWrapper>
@@ -2,7 +2,7 @@ import * as React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {withKnobs, select, text, boolean} from '@storybook/addon-knobs';
import {LogoIcon} from '@twilio-paste/icons/src/react/LogoIcon';
import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon';
import {Button} from '../src';
import {ButtonVariants, ButtonSizes, ButtonTabIndexes} from '../src/types';

@@ -50,7 +50,7 @@ storiesOf('Components|Button', module)
onFocus={action('handleFocus')}
onBlur={action('handleBlur')}
>
<LogoIcon size={20} />
<PlusIcon />
<span>Activate</span>
</Button>
);
@@ -71,7 +71,7 @@ storiesOf('Components|Button', module)
onFocus={action('handleFocus')}
onBlur={action('handleBlur')}
>
<LogoIcon size={20} />
<PlusIcon />
</Button>
);
})
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -2,20 +2,19 @@ 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 {terser} from 'rollup-plugin-terser';
import pkg from './package.json';

export default {
input: pkg['main:dev'],
output: [{
output: [
{
file: pkg.main,
format: 'cjs',
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -30,12 +30,15 @@
"@emotion/core": "^10.0.10",
"@emotion/styled": "^10.0.10",
"@twilio-paste/icons": "^0.4.0",
"@twilio-paste/types": "^1.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-uid": "^2.2.0"
"react-uid": "^2.2.0",
"styled-system": "^5.1.2"
},
"devDependencies": {
"@twilio-paste/icons": "^0.4.0",
"@twilio-paste/types": "^1.1.0",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -1,7 +1,9 @@
import * as React from 'react';
import {keyframes, css} from '@emotion/core';
import styled from '@emotion/styled';
import {SpinnerIcon, SpinnerIconProps} from '@twilio-paste/icons/react/SpinnerIcon';
import {LoadingIcon, LoadingIconProps} from '@twilio-paste/icons/esm/LoadingIcon';
import {IconSize} from '@twilio-paste/types';
import {size as sizeFn} from 'styled-system';

const rotate = keyframes`
0% {
@@ -12,7 +14,12 @@ const rotate = keyframes`
}
`;

const SpinningWrapper = styled.div(
interface SpinnerWrapperProps {
size?: IconSize;
}

const SpinningWrapper = styled.div<SpinnerWrapperProps>(
sizeFn,
css({
display: 'inline-block',
animation: `${rotate} 2s linear infinite`,
@@ -22,18 +29,21 @@ const SpinningWrapper = styled.div(
})
);

interface SpinnerProps extends SpinnerIconProps {
interface SpinnerProps extends LoadingIconProps {
title: string;
size?: IconSize;
}

const Spinner: React.FC<SpinnerProps> = props => (
<SpinningWrapper>
<SpinnerIcon {...props} />
const Spinner: React.FC<SpinnerProps> = ({as, size, iconColor, decorative}) => (
<SpinningWrapper size={size}>
<LoadingIcon as={as} size={size} iconColor={iconColor} decorative={decorative} />
</SpinningWrapper>
);

Spinner.defaultProps = {
size: 'sizeIcon20',
decorative: false,
};

Spinner.displayName = 'Spinner';
export {Spinner};
@@ -1,12 +1,27 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import {withKnobs, text, number} from '@storybook/addon-knobs';
import {withKnobs, text, select} from '@storybook/addon-knobs';
import {TextColor, IconSize} from '@twilio-paste/types';
import {DefaultTheme} from '@twilio-paste/theme-tokens';
import {Spinner} from '../src';

const IconColorOptions = Object.keys(DefaultTheme.textColors);
const SizeOptions = Object.keys(DefaultTheme.iconSizes);

storiesOf('Components|Spinner', module)
.addDecorator(withKnobs)
.add('Default', () => {
const iconColorValue = select('iconColor', IconColorOptions, 'currentColor') as TextColor;
const sizeValue = select('size', SizeOptions, 'sizeIcon20') as IconSize;

return <Spinner iconColor={iconColorValue} size={sizeValue} title={text('title', 'Now loading')} />;
})
.add('Responsive', () => {
return (
<Spinner color={text('color', 'currentColor')} size={number('size', 24)} title={text('title', 'Spinner Icon')} />
<Spinner
iconColor={['colorText', 'colorTextError']}
size={['sizeIcon10', 'sizeIcon20', 'sizeIcon30']}
title={text('title', 'Now loading')}
/>
);
});
@@ -10,6 +10,9 @@
"references": [
{
"path": "../../../paste-icons"
},
{
"path": "../../../paste-types"
}
]
}
@@ -2,20 +2,19 @@ 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 {terser} from 'rollup-plugin-terser';
import pkg from './package.json';

export default {
input: pkg['main:dev'],
output: [{
output: [
{
file: pkg.main,
format: 'cjs',
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -51,6 +51,7 @@
"styled-system": "^5.1.2"
},
"devDependencies": {
"lodash": "^4.17.15",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
@@ -59,4 +60,4 @@
"rollup-plugin-typescript2": "^0.21.2",
"typescript": "^3.5.2"
}
}
}
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -1,13 +1,13 @@
export * from '@twilio-paste/anchor';
export * from '@twilio-paste/button';
export * from '@twilio-paste/heading';
export * from '@twilio-paste/paragraph';
export * from '@twilio-paste/spinner';
export * from '@twilio-paste/typography';
export * from '@twilio-paste/absolute';
export * from '@twilio-paste/anchor';
export * from '@twilio-paste/aspect-ratio';
export * from '@twilio-paste/box';
export * from '@twilio-paste/button';
export * from '@twilio-paste/heading';
export * from '@twilio-paste/media-object';
export * from '@twilio-paste/paragraph';
export * from '@twilio-paste/screen-reader-only';
export * from '@twilio-paste/spinner';
export * from '@twilio-paste/text';
export * from '@twilio-paste/truncate';
export * from '@twilio-paste/typography';
@@ -1,4 +1,5 @@
const {join} = require('path');
const {sortBy} = require('lodash');
const {getRepoPackages} = require('../../../../tools/utils/getRepoPackages');
const {writeToFile} = require('../../../../tools/utils/writeToFile');

@@ -44,17 +45,19 @@ function getAllCorePackages(packageList) {

// Filter to all production ready core packages
const filteredPackageList = getAllCorePackages(packageList);
// Sort the list so we don't get inconsistent ordering each rebuild
const sortedPackageList = sortBy(filteredPackageList, ['name']);

// Write into core's index file
const indexOutput = generateIndexFromPackageList(filteredPackageList);
const indexOutput = generateIndexFromPackageList(sortedPackageList);
writeToFile(CORE_BUNDLE_INDEX_PATH, indexOutput, {
successMessage: `[@twilio-paste/core] Exports have been successfully updated within: ${CORE_BUNDLE_INDEX_PATH}`,
});

// Update package dependencies
// eslint-disable-next-line global-require, import/no-dynamic-require
const packageJson = require(CORE_BUNDLE_PACKAGE_PATH);
const newPackageJson = {...packageJson, dependencies: generateDependenciesFromPackageList(filteredPackageList)};
const newPackageJson = {...packageJson, dependencies: generateDependenciesFromPackageList(sortedPackageList)};
writeToFile(CORE_BUNDLE_PACKAGE_PATH, newPackageJson, {
formatJson: true,
successMessage: `[@twilio-paste/core] Successfully updated dependencies.`,
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],
@@ -14,7 +14,7 @@ export default {
},
{
file: pkg.module,
format: 'es',
format: 'esm',
},
],
external: [...Object.keys(pkg.peerDependencies || {})],

1 comment on commit 571791d

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.