From 1a77cf1800e8167fe8ebdbed7ae14a1ea38e6da8 Mon Sep 17 00:00:00 2001 From: Daniel O'Connor Date: Fri, 25 Jan 2019 13:37:46 -0800 Subject: [PATCH] Initial commit --- .browserslistrc | 4 + .eslintrc.js | 31 + .gitignore | 166 + .jest.config.json | 8 + .jest.setup.js | 9 + .nvmrc | 1 + .prettierignore | 12 + .prettierrc.yaml | 4 + CONTRIBUTING.md | 69 + ISSUE_TEMPLATE.md | 7 + README.md | 30 + RELEASING.md | 38 + babel.config.js | 26 + lerna.json | 29 + package.json | 102 + packages/changelog-lint/CHANGELOG.md | 27 + packages/changelog-lint/README.md | 17 + packages/changelog-lint/index.js | 15 + packages/changelog-lint/package.json | 27 + .../__snapshots__/test.js.snap | 59 + .../rules/changelog-heading-1-first/index.js | 10 + .../rules/changelog-heading-1-first/test.js | 18 + .../__snapshots__/test.js.snap | 30 + .../index.js | 12 + .../test.js | 16 + .../__snapshots__/test.js.snap | 91 + .../rules/changelog-heading-1-text/index.js | 20 + .../rules/changelog-heading-1-text/test.js | 11 + .../__snapshots__/test.js.snap | 211 + .../rules/changelog-heading-2-dash/index.js | 32 + .../rules/changelog-heading-2-dash/test.js | 26 + .../__snapshots__/test.js.snap | 57 + .../index.js | 14 + .../test.js | 17 + .../__snapshots__/test.js.snap | 211 + .../changelog-heading-2-valid-date/index.js | 41 + .../changelog-heading-2-valid-date/test.js | 20 + .../__snapshots__/test.js.snap | 61 + .../changelog-heading-2-valid-semver/index.js | 25 + .../changelog-heading-2-valid-semver/test.js | 19 + .../__snapshots__/test.js.snap | 37 + .../index.js | 34 + .../test.js | 27 + .../__snapshots__/test.js.snap | 61 + .../index.js | 23 + .../changelog-heading-3-text-contents/test.js | 19 + .../__snapshots__/test.js.snap | 271 + .../changelog-list-semver-severity/index.js | 27 + .../changelog-list-semver-severity/test.js | 29 + packages/changelog-lint/test-utils/index.js | 59 + .../gatsby-node.js | 50 + .../package.json | 13 + .../parse-ast.js | 108 + .../create-package-json-node.js | 22 + .../gatsby-node.js | 26 + .../package.json | 5 + .../gatsby-node.js | 48 + .../package.json | 10 + packages/thumbprint-atomic/CHANGELOG.md | 151 + .../__snapshots__/test.js.snap | 5923 ++++++ packages/thumbprint-atomic/package.json | 31 + packages/thumbprint-atomic/src/atomic.scss | 30 + .../src/packages/aspect-ratio.scss | 30 + .../src/packages/background-position.scss | 108 + .../src/packages/background-size.scss | 40 + .../src/packages/border-color.scss | 49 + .../src/packages/border-radius.scss | 184 + .../src/packages/border-style.scss | 72 + .../src/packages/border-width.scss | 153 + .../src/packages/border.scss | 128 + .../thumbprint-atomic/src/packages/color.scss | 294 + .../src/packages/coordinates.scss | 1060 + .../src/packages/display.scss | 204 + .../src/packages/flexbox.scss | 824 + .../src/packages/font-weight.scss | 40 + .../thumbprint-atomic/src/packages/grid.scss | 308 + .../src/packages/height.scss | 328 + .../src/packages/margin.scss | 1828 ++ .../src/packages/max-width.scss | 184 + .../src/packages/overflow.scss | 200 + .../src/packages/padding.scss | 1088 + .../src/packages/position.scss | 72 + .../src/packages/text-align.scss | 72 + .../src/packages/text-decoration.scss | 56 + .../src/packages/text-transform.scss | 72 + .../src/packages/truncate.scss | 32 + .../src/packages/vertical-align.scss | 72 + .../src/packages/visually-hidden.scss | 28 + .../src/packages/white-space.scss | 56 + .../thumbprint-atomic/src/packages/width.scss | 344 + .../src/packages/word-break.scss | 56 + .../src/packages/z-index.scss | 35 + packages/thumbprint-atomic/test.js | 12 + packages/thumbprint-react/CHANGELOG.md | 28 + .../components/Avatar/README.mdx | 101 + .../Avatar/__snapshots__/test.jsx.snap | 634 + .../components/Avatar/index.jsx | 203 + .../components/Avatar/index.module.scss | 67 + .../components/Avatar/static/check.svg | 12 + .../components/Avatar/subcomponents/badge.jsx | 64 + .../Avatar/subcomponents/badge.module.scss | 131 + .../components/Avatar/test.jsx | 161 + .../components/Button/README.mdx | 147 + .../Button/__snapshots__/test.jsx.snap | 328 + .../components/Button/index.jsx | 194 + .../components/Button/test.jsx | 81 + .../components/ButtonRow/README.mdx | 49 + .../ButtonRow/__snapshots__/test.jsx.snap | 65 + .../components/ButtonRow/index.jsx | 50 + .../components/ButtonRow/index.module.scss | 35 + .../components/ButtonRow/test.jsx | 32 + .../components/Carousel/README.mdx | 67 + .../Carousel/__snapshots__/test.jsx.snap | 980 + .../components/Carousel/base-carousel.jsx | 186 + .../Carousel/base-carousel.module.scss | 14 + .../components/Carousel/index.jsx | 106 + .../components/Carousel/test.jsx | 115 + .../components/Checkbox/README.mdx | 254 + .../Checkbox/__snapshots__/test.jsx.snap | 738 + .../components/Checkbox/index.jsx | 242 + .../components/Checkbox/index.module.scss | 41 + .../components/Checkbox/test.jsx | 151 + .../components/DatePicker/README.mdx | 165 + .../DatePicker/__snapshots__/test.jsx.snap | 2609 +++ .../components/DatePicker/index.jsx | 121 + .../components/DatePicker/index.module.scss | 172 + .../components/DatePicker/test.jsx | 213 + .../components/DatePicker/utilities.js | 36 + .../components/DatePicker/utilities.test.js | 43 + .../components/FormNote/README.mdx | 35 + .../FormNote/__snapshots__/test.jsx.snap | 25 + .../components/FormNote/index.jsx | 29 + .../components/FormNote/index.module.scss | 10 + .../components/FormNote/test.jsx | 14 + .../components/Grid/README.mdx | 67 + .../Grid/__snapshots__/test.jsx.snap | 104 + .../components/Grid/index.jsx | 120 + .../components/Grid/index.module.scss | 233 + .../thumbprint-react/components/Grid/test.jsx | 58 + .../components/Input/README.mdx | 233 + .../Input/__snapshots__/test.jsx.snap | 1055 + .../components/Input/index.jsx | 424 + .../components/Input/index.module.scss | 211 + .../components/Input/test.jsx | 275 + .../components/InputRow/README.mdx | 48 + .../InputRow/__snapshots__/test.jsx.snap | 580 + .../components/InputRow/index.jsx | 83 + .../components/InputRow/index.module.scss | 3 + .../components/InputRow/test.jsx | 89 + .../components/Label/README.mdx | 55 + .../Label/__snapshots__/test.jsx.snap | 76 + .../components/Label/index.jsx | 72 + .../components/Label/index.module.scss | 25 + .../components/Label/test.jsx | 39 + .../components/Link/README.mdx | 193 + .../Link/__snapshots__/test.jsx.snap | 487 + .../components/Link/index.jsx | 169 + .../thumbprint-react/components/Link/test.jsx | 132 + .../components/List/README.mdx | 48 + .../List/__snapshots__/test.jsx.snap | 59 + .../components/List/index.jsx | 51 + .../components/List/index.module.scss | 27 + .../thumbprint-react/components/List/test.jsx | 33 + .../components/LoaderDots/README.mdx | 43 + .../LoaderDots/__snapshots__/test.jsx.snap | 141 + .../components/LoaderDots/index.jsx | 48 + .../components/LoaderDots/index.module.scss | 104 + .../components/LoaderDots/test.jsx | 36 + .../components/ModalBase/README.mdx | 70 + .../ModalBase/__snapshots__/test.jsx.snap | 450 + .../components/ModalBase/_constants.scss | 2 + .../components/ModalBase/index.jsx | 32 + .../subcomponents/modal-contents/index.jsx | 84 + .../modal-contents/index.module.scss | 15 + .../subcomponents/modal-structure/index.jsx | 200 + .../modal-structure/index.module.scss | 32 + .../components/ModalBase/test.jsx | 285 + .../components/ModalCurtain/README.mdx | 170 + .../ModalCurtain/__snapshots__/test.jsx.snap | 390 + .../ModalCurtain/components/esc-listener.jsx | 37 + .../ModalCurtain/components/no-scroll.jsx | 16 + .../components/ModalCurtain/index.jsx | 126 + .../components/ModalCurtain/index.module.scss | 25 + .../components/ModalCurtain/test.jsx | 260 + .../components/ModalDefault/README.mdx | 442 + .../ModalDefault/__snapshots__/test.jsx.snap | 2638 +++ .../ModalDefault/components/sticky-footer.jsx | 33 + .../components/sticky-footer.module.scss | 14 + .../ModalDefault/components/transition.jsx | 123 + .../components/ModalDefault/index.jsx | 396 + .../components/ModalDefault/index.module.scss | 187 + .../components/ModalDefault/test.jsx | 151 + .../components/ModalStandard/README.mdx | 69 + .../ModalStandard/__snapshots__/test.jsx.snap | 676 + .../components/ModalStandard/index.jsx | 95 + .../ModalStandard/index.module.scss | 36 + .../ModalStandard/static/close-icon.svg | 12 + .../components/ModalStandard/test.jsx | 31 + .../components/ProgressBar/README.mdx | 13 + .../ProgressBar/__snapshots__/test.jsx.snap | 111 + .../components/ProgressBar/index.jsx | 39 + .../components/ProgressBar/index.module.scss | 12 + .../components/ProgressBar/test.jsx | 32 + .../components/ProgressBarBase/README.mdx | 11 + .../__snapshots__/test.jsx.snap | 93 + .../components/ProgressBarBase/index.jsx | 29 + .../ProgressBarBase/index.module.scss | 16 + .../components/ProgressBarBase/test.jsx | 23 + .../components/Radio/README.mdx | 229 + .../Radio/__snapshots__/test.jsx.snap | 687 + .../components/Radio/index.jsx | 175 + .../components/Radio/index.module.scss | 36 + .../components/Radio/test.jsx | 136 + .../components/Select/README.mdx | 273 + .../Select/__snapshots__/test.jsx.snap | 315 + .../components/Select/index.jsx | 157 + .../components/Select/index.module.scss | 86 + .../components/Select/test.jsx | 86 + .../components/ServiceCard/README.mdx | 46 + .../ServiceCard/__snapshots__/test.jsx.snap | 118 + .../components/ServiceCard/index.jsx | 122 + .../components/ServiceCard/index.module.scss | 58 + .../components/ServiceCard/test.jsx | 70 + .../components/StarRating/README.mdx | 73 + .../StarRating/__snapshots__/test.jsx.snap | 1606 ++ .../components/StarRating/index.jsx | 144 + .../components/StarRating/index.module.scss | 77 + .../components/StarRating/static/star.svg | 20 + .../components/StarRating/test.jsx | 88 + .../components/Textarea/README.mdx | 121 + .../Textarea/__snapshots__/test.jsx.snap | 143 + .../components/Textarea/index.jsx | 122 + .../components/Textarea/index.module.scss | 48 + .../components/Textarea/test.jsx | 96 + .../components/Tooltip/README.mdx | 72 + .../Tooltip/__snapshots__/test.jsx.snap | 640 + .../components/Tooltip/index.jsx | 319 + .../components/Tooltip/index.module.scss | 62 + .../components/Tooltip/test.jsx | 672 + .../components/Type/README.mdx | 78 + .../Type/__snapshots__/test.jsx.snap | 187 + .../components/Type/index.jsx | 106 + .../components/Type/index.module.scss | 67 + .../thumbprint-react/components/Type/test.jsx | 111 + .../components/UIAction/README.mdx | 7 + .../UIAction/__snapshots__/test.jsx.snap | 1912 ++ .../components/UIAction/get-anchor-props.js | 31 + .../components/UIAction/get-button-props.js | 20 + .../components/UIAction/index.jsx | 2 + .../components/UIAction/is-thumbtack-url.js | 20 + .../UIAction/is-thumbtack-url.test.js | 50 + .../components/UIAction/plain.jsx | 112 + .../components/UIAction/plain.module.scss | 52 + .../components/UIAction/test.jsx | 578 + .../components/UIAction/themed.jsx | 216 + .../components/UIAction/themed.module.scss | 222 + .../components/Wrap/README.mdx | 31 + .../Wrap/__snapshots__/test.jsx.snap | 36 + .../components/Wrap/index.jsx | 45 + .../components/Wrap/index.module.scss | 43 + .../thumbprint-react/components/Wrap/test.jsx | 21 + packages/thumbprint-react/icons/index.jsx | 23 + packages/thumbprint-react/index.js | 41 + packages/thumbprint-react/package.json | 63 + packages/thumbprint-react/rollup.config.js | 42 + packages/thumbprint-tokens/CHANGELOG.md | 13 + packages/thumbprint-tokens/package.json | 25 + .../src/__snapshots__/index.test.js.snap | 1174 ++ .../src/formatters/javascript-cjs.js | 37 + .../src/formatters/javascript-cjs.test.js | 19 + .../src/formatters/javascript-es.js | 37 + .../src/formatters/javascript-es.test.js | 19 + .../thumbprint-tokens/src/formatters/scss.js | 34 + .../src/formatters/scss.test.js | 19 + packages/thumbprint-tokens/src/index.js | 66 + packages/thumbprint-tokens/src/index.test.js | 16 + .../src/tokens/border-radius.json | 29 + .../src/tokens/breakpoint.json | 61 + .../thumbprint-tokens/src/tokens/color.json | 270 + .../src/tokens/deprecated.json | 855 + .../src/tokens/font-family.json | 17 + .../src/tokens/font-letter-spacing.json | 23 + .../src/tokens/font-line-height.json | 23 + .../src/tokens/font-weight.json | 17 + .../thumbprint-tokens/src/tokens/font.json | 215 + .../thumbprint-tokens/src/tokens/shadow.json | 11 + .../thumbprint-tokens/src/tokens/space.json | 53 + .../thumbprint-tokens/src/tokens/wrap.json | 15 + .../thumbprint-tokens/src/tokens/z-index.json | 11 + packages/tp-ui-component-alert/CHANGELOG.md | 15 + packages/tp-ui-component-alert/README.mdx | 143 + .../__snapshots__/test.js.snap | 44 + packages/tp-ui-component-alert/_index.scss | 61 + packages/tp-ui-component-alert/package.json | 34 + packages/tp-ui-component-alert/test.js | 8 + packages/tp-ui-component-avatar/CHANGELOG.md | 9 + packages/tp-ui-component-avatar/README.mdx | 71 + .../__snapshots__/test.js.snap | 63 + packages/tp-ui-component-avatar/_index.scss | 111 + packages/tp-ui-component-avatar/package.json | 33 + packages/tp-ui-component-avatar/test.js | 8 + .../tp-ui-component-form-note/CHANGELOG.md | 9 + packages/tp-ui-component-form-note/README.mdx | 46 + .../__snapshots__/test.js.snap | 11 + .../tp-ui-component-form-note/_index.scss | 11 + .../tp-ui-component-form-note/package.json | 27 + packages/tp-ui-component-form-note/test.js | 8 + packages/tp-ui-component-loader/CHANGELOG.md | 9 + packages/tp-ui-component-loader/README.mdx | 55 + .../__snapshots__/test.js.snap | 60 + packages/tp-ui-component-loader/_index.scss | 92 + packages/tp-ui-component-loader/package.json | 33 + packages/tp-ui-component-loader/test.js | 8 + packages/tp-ui-core-font-face/CHANGELOG.md | 9 + packages/tp-ui-core-font-face/README.mdx | 36 + .../__snapshots__/test.js.snap | 14 + packages/tp-ui-core-font-face/_index.scss | 22 + packages/tp-ui-core-font-face/package.json | 33 + packages/tp-ui-core-font-face/test.js | 26 + packages/tp-ui-core-function/CHANGELOG.md | 9 + packages/tp-ui-core-function/README.mdx | 28 + .../__snapshots__/test.js.snap | 3 + packages/tp-ui-core-function/_index.scss | 19 + packages/tp-ui-core-function/package.json | 30 + packages/tp-ui-core-function/test.js | 8 + packages/tp-ui-core-mixin/CHANGELOG.md | 9 + packages/tp-ui-core-mixin/README.mdx | 70 + .../__snapshots__/test.js.snap | 3 + packages/tp-ui-core-mixin/_index.scss | 28 + packages/tp-ui-core-mixin/package.json | 30 + packages/tp-ui-core-mixin/test.js | 6 + packages/tp-ui-core-reset/CHANGELOG.md | 9 + packages/tp-ui-core-reset/README.mdx | 7 + .../__snapshots__/test.js.snap | 165 + packages/tp-ui-core-reset/_index.scss | 246 + packages/tp-ui-core-reset/package.json | 30 + packages/tp-ui-core-reset/test.js | 6 + packages/tp-ui-element-body/CHANGELOG.md | 9 + packages/tp-ui-element-body/README.mdx | 7 + .../__snapshots__/test.js.snap | 15 + packages/tp-ui-element-body/_index.scss | 17 + packages/tp-ui-element-body/package.json | 34 + packages/tp-ui-element-body/test.js | 6 + packages/tp-ui-element-button/CHANGELOG.md | 9 + packages/tp-ui-element-button/README.mdx | 122 + .../__snapshots__/test.js.snap | 201 + packages/tp-ui-element-button/_index.scss | 69 + packages/tp-ui-element-button/_mixin.scss | 233 + packages/tp-ui-element-button/package.json | 35 + packages/tp-ui-element-button/test.js | 8 + packages/tp-ui-element-checkbox/CHANGELOG.md | 9 + packages/tp-ui-element-checkbox/README.mdx | 107 + .../__snapshots__/test.js.snap | 49 + packages/tp-ui-element-checkbox/_index.scss | 74 + packages/tp-ui-element-checkbox/package.json | 33 + packages/tp-ui-element-checkbox/test.js | 8 + packages/tp-ui-element-fieldset/CHANGELOG.md | 9 + packages/tp-ui-element-fieldset/README.mdx | 96 + .../__snapshots__/test.js.snap | 7 + packages/tp-ui-element-fieldset/_index.scss | 5 + packages/tp-ui-element-fieldset/package.json | 34 + packages/tp-ui-element-fieldset/test.js | 8 + packages/tp-ui-element-hr/CHANGELOG.md | 15 + packages/tp-ui-element-hr/README.mdx | 29 + .../__snapshots__/test.js.snap | 15 + packages/tp-ui-element-hr/_index.scss | 18 + packages/tp-ui-element-hr/package.json | 34 + packages/tp-ui-element-hr/test.js | 6 + packages/tp-ui-element-img/CHANGELOG.md | 15 + packages/tp-ui-element-img/README.mdx | 37 + .../__snapshots__/test.js.snap | 19 + packages/tp-ui-element-img/_index.scss | 27 + packages/tp-ui-element-img/package.json | 33 + packages/tp-ui-element-img/test.js | 6 + packages/tp-ui-element-input/CHANGELOG.md | 9 + packages/tp-ui-element-input/README.mdx | 99 + .../__snapshots__/test.js.snap | 59 + packages/tp-ui-element-input/_index.scss | 105 + packages/tp-ui-element-input/package.json | 34 + packages/tp-ui-element-input/test.js | 8 + packages/tp-ui-element-label/CHANGELOG.md | 15 + packages/tp-ui-element-label/README.mdx | 64 + .../__snapshots__/test.js.snap | 14 + packages/tp-ui-element-label/_index.scss | 17 + packages/tp-ui-element-label/package.json | 34 + packages/tp-ui-element-label/test.js | 8 + packages/tp-ui-element-link/CHANGELOG.md | 9 + packages/tp-ui-element-link/README.mdx | 70 + .../__snapshots__/test.js.snap | 83 + packages/tp-ui-element-link/_index.scss | 42 + packages/tp-ui-element-link/_mixin.scss | 148 + packages/tp-ui-element-link/package.json | 33 + packages/tp-ui-element-link/test.js | 6 + packages/tp-ui-element-list/CHANGELOG.md | 15 + packages/tp-ui-element-list/README.mdx | 63 + .../__snapshots__/test.js.snap | 21 + packages/tp-ui-element-list/_index.scss | 21 + packages/tp-ui-element-list/_mixin.scss | 34 + packages/tp-ui-element-list/package.json | 35 + packages/tp-ui-element-list/test.js | 6 + packages/tp-ui-element-radio/CHANGELOG.md | 9 + packages/tp-ui-element-radio/README.mdx | 97 + .../__snapshots__/test.js.snap | 50 + packages/tp-ui-element-radio/_index.scss | 74 + packages/tp-ui-element-radio/package.json | 33 + packages/tp-ui-element-radio/test.js | 8 + packages/tp-ui-element-select/CHANGELOG.md | 9 + packages/tp-ui-element-select/README.mdx | 87 + .../__snapshots__/test.js.snap | 45 + packages/tp-ui-element-select/_index.scss | 57 + packages/tp-ui-element-select/package.json | 33 + packages/tp-ui-element-select/test.js | 8 + packages/tp-ui-element-table/CHANGELOG.md | 9 + packages/tp-ui-element-table/README.mdx | 99 + .../__snapshots__/test.js.snap | 39 + packages/tp-ui-element-table/_index.scss | 77 + packages/tp-ui-element-table/package.json | 34 + packages/tp-ui-element-table/test.js | 8 + packages/tp-ui-element-textarea/CHANGELOG.md | 9 + packages/tp-ui-element-textarea/README.mdx | 32 + .../__snapshots__/test.js.snap | 24 + packages/tp-ui-element-textarea/_index.scss | 29 + packages/tp-ui-element-textarea/package.json | 33 + packages/tp-ui-element-textarea/test.js | 8 + packages/tp-ui-element-type/CHANGELOG.md | 9 + packages/tp-ui-element-type/README.mdx | 147 + .../__snapshots__/test.js.snap | 140 + packages/tp-ui-element-type/_index.scss | 86 + packages/tp-ui-element-type/_mixin.scss | 172 + packages/tp-ui-element-type/package.json | 34 + packages/tp-ui-element-type/test.js | 6 + packages/tp-ui-layout-block-list/CHANGELOG.md | 15 + packages/tp-ui-layout-block-list/README.mdx | 54 + .../__snapshots__/test.js.snap | 53 + packages/tp-ui-layout-block-list/_index.scss | 74 + packages/tp-ui-layout-block-list/package.json | 33 + packages/tp-ui-layout-block-list/test.js | 8 + packages/tp-ui-layout-button-row/CHANGELOG.md | 9 + packages/tp-ui-layout-button-row/README.mdx | 39 + .../__snapshots__/test.js.snap | 29 + packages/tp-ui-layout-button-row/_index.scss | 47 + packages/tp-ui-layout-button-row/package.json | 33 + packages/tp-ui-layout-button-row/test.js | 8 + packages/tp-ui-layout-form/CHANGELOG.md | 9 + packages/tp-ui-layout-form/README.mdx | 257 + .../__snapshots__/test.js.snap | 40 + packages/tp-ui-layout-form/_index.scss | 61 + packages/tp-ui-layout-form/package.json | 35 + packages/tp-ui-layout-form/test.js | 6 + packages/tp-ui-layout-grid/CHANGELOG.md | 15 + packages/tp-ui-layout-grid/README.mdx | 183 + .../__snapshots__/test.js.snap | 418 + packages/tp-ui-layout-grid/_index.scss | 674 + packages/tp-ui-layout-grid/package.json | 35 + packages/tp-ui-layout-grid/test.js | 6 + packages/tp-ui-layout-input-row/CHANGELOG.md | 15 + packages/tp-ui-layout-input-row/README.mdx | 63 + .../__snapshots__/test.js.snap | 34 + packages/tp-ui-layout-input-row/_index.scss | 66 + packages/tp-ui-layout-input-row/package.json | 33 + packages/tp-ui-layout-input-row/test.js | 8 + packages/tp-ui-layout-longread/CHANGELOG.md | 9 + packages/tp-ui-layout-longread/README.mdx | 7 + .../__snapshots__/test.js.snap | 54 + packages/tp-ui-layout-longread/_index.scss | 10 + packages/tp-ui-layout-longread/_mixin.scss | 60 + packages/tp-ui-layout-longread/package.json | 35 + packages/tp-ui-layout-longread/test.js | 8 + packages/tp-ui-layout-wrap/CHANGELOG.md | 15 + packages/tp-ui-layout-wrap/README.mdx | 49 + .../__snapshots__/test.js.snap | 43 + packages/tp-ui-layout-wrap/_index.scss | 13 + packages/tp-ui-layout-wrap/_mixin.scss | 51 + packages/tp-ui-layout-wrap/package.json | 35 + packages/tp-ui-layout-wrap/test.js | 6 + scripts/should-build-package.js | 58 + stylelint.config.js | 8 + www/.eslintrc.js | 1 + www/.gitignore | 2 + www/gatsby-config.js | 83 + www/gatsby-node.js | 125 + www/package.json | 48 + .../gatsby-transformer-thumbprint-atomic | 1 + .../gatsby-transformer-thumbprint-components | 1 + .../gatsby-transformer-thumbprint-tokens | 1 + www/postcss.config.js | 5 + www/src/components/alert/index.jsx | 55 + www/src/components/alert/index.module.scss | 6 + www/src/components/container/doc-search.jsx | 51 + .../container/get-components-side-nav.js | 55 + www/src/components/container/index.jsx | 473 + .../components/container/index.module.scss | 11 + www/src/components/container/side-nav.jsx | 158 + .../components/container/side-nav.module.scss | 31 + .../components/container/thumbprintLogo.svg | 1 + www/src/components/dodont/index.jsx | 41 + www/src/components/dodont/index.module.scss | 19 + www/src/components/generate-slug/index.js | 31 + www/src/components/graveyard-entry/index.jsx | 24 + www/src/components/h2/index.jsx | 20 + www/src/components/h3/index.jsx | 19 + www/src/components/mdx/code-block/index.jsx | 61 + .../mdx/code-block/index.module.scss | 23 + .../mdx/code-block/react-code-block.jsx | 44 + www/src/components/mdx/code-block/styles.js | 16 + www/src/components/mdx/index.jsx | 252 + www/src/components/mdx/index.module.scss | 54 + www/src/components/package-table/index.jsx | 100 + www/src/components/page-header/index.jsx | 55 + www/src/components/prism-styles/index.scss | 141 + www/src/components/swatch/index.jsx | 24 + www/src/components/tag/index.jsx | 32 + .../thumbprint-atomic/get-classes/index.js | 9 + .../thumbprint-atomic/table/index.jsx | 57 + .../get-import-statement.js | 12 + .../thumbprint-components/page/index.jsx | 222 + .../platform-nav/index.jsx | 47 + .../platform-nav/index.module.scss | 10 + .../thumbprint-components/platform-order.js | 10 + .../props-table/index.jsx | 109 + .../thumbprint-guide/swatch-usage/index.jsx | 56 + .../thumbprint-guide/swatch/index.jsx | 49 + .../thumbprint-guide/swatch/index.module.scss | 8 + .../thumbprint-tokens/token-example/color.jsx | 22 + .../thumbprint-tokens/token-example/index.jsx | 30 + .../thumbprint-www/featured/index.jsx | 87 + .../thumbprint-www/featured/index.module.scss | 3 + .../thumbprint-www/featured/svg/about.svg | 20 + .../thumbprint-www/featured/svg/checklist.svg | 37 + .../thumbprint-www/featured/svg/color.svg | 24 + .../thumbprint-www/featured/svg/help.svg | 10 + .../thumbprint-www/intro/images/hero.png | Bin 0 -> 90778 bytes .../thumbprint-www/roadmap/index.jsx | 64 + .../thumbprint-www/roadmap/index.module.scss | 62 + www/src/components/wrap/index.jsx | 28 + www/src/components/wrap/index.module.scss | 6 + www/src/kits/alert/index.mdx | 5 + www/src/kits/avatar/index.mdx | 5 + www/src/kits/block-list/index.mdx | 5 + www/src/kits/body/index.mdx | 6 + www/src/kits/button-row/index.mdx | 5 + www/src/kits/button/index.mdx | 109 + www/src/kits/carousel/index.mdx | 5 + www/src/kits/checkbox/index.mdx | 5 + www/src/kits/date-picker/index.mdx | 5 + www/src/kits/fieldset/index.mdx | 5 + www/src/kits/font-face/index.mdx | 5 + www/src/kits/form-note/index.mdx | 5 + www/src/kits/form/index.mdx | 5 + www/src/kits/functions/index.mdx | 5 + www/src/kits/grid/grid-browser-2.png | Bin 0 -> 2778 bytes www/src/kits/grid/grid-browser.png | Bin 0 -> 2850 bytes www/src/kits/grid/index.mdx | 74 + www/src/kits/horizontal-rule/index.mdx | 5 + www/src/kits/image/index.mdx | 5 + www/src/kits/input-row/index.mdx | 5 + www/src/kits/input/index.mdx | 5 + www/src/kits/label/index.mdx | 5 + www/src/kits/link/index.mdx | 5 + www/src/kits/list/index.mdx | 5 + www/src/kits/loader-dots/index.mdx | 5 + www/src/kits/longread/index.mdx | 6 + www/src/kits/mixins/index.mdx | 5 + www/src/kits/modal-base/index.mdx | 6 + www/src/kits/modal-curtain/index.mdx | 6 + www/src/kits/modal-default/index.mdx | 195 + www/src/kits/modal-default/modal-anatomy.png | Bin 0 -> 29992 bytes www/src/kits/modal-default/modal-announce.png | Bin 0 -> 36262 bytes .../kits/modal-default/modal-break-1-red.png | Bin 0 -> 164818 bytes www/src/kits/modal-default/modal-break-1.png | Bin 0 -> 182384 bytes .../kits/modal-default/modal-break-2-red.png | Bin 0 -> 297347 bytes www/src/kits/modal-default/modal-break-2.png | Bin 0 -> 305167 bytes www/src/kits/modal-default/modal-do.png | Bin 0 -> 7304 bytes www/src/kits/modal-default/modal-dont.png | Bin 0 -> 6937 bytes www/src/kits/modal-default/modal-result.png | Bin 0 -> 60349 bytes www/src/kits/modal-default/modal-size-1.png | Bin 0 -> 58442 bytes www/src/kits/modal-default/modal-size-2.png | Bin 0 -> 56427 bytes www/src/kits/modal-default/modal-trigger.png | Bin 0 -> 44173 bytes www/src/kits/modal-standard/index.mdx | 5 + www/src/kits/progress-bar-base/index.mdx | 6 + www/src/kits/progress-bar/index.mdx | 5 + www/src/kits/radio/index.mdx | 5 + www/src/kits/reset/index.mdx | 6 + www/src/kits/select/index.mdx | 5 + www/src/kits/service-card/index.mdx | 67 + .../kits/service-card/service-card-icon.png | Bin 0 -> 80625 bytes .../kits/service-card/service-card-layout.png | Bin 0 -> 3179 bytes .../service-card/service-card-max-width.png | Bin 0 -> 60086 bytes .../service-card/service-card-min-width.png | Bin 0 -> 10111 bytes www/src/kits/service-card/service-card.png | Bin 0 -> 28370 bytes www/src/kits/star-rating/index.mdx | 5 + www/src/kits/table/index.mdx | 5 + www/src/kits/textarea/index.mdx | 5 + www/src/kits/tooltip/bottom.png | Bin 0 -> 15146 bytes www/src/kits/tooltip/dark.png | Bin 0 -> 11874 bytes www/src/kits/tooltip/default-2.png | Bin 0 -> 21166 bytes www/src/kits/tooltip/default.png | Bin 0 -> 10531 bytes www/src/kits/tooltip/do-1.png | Bin 0 -> 12989 bytes www/src/kits/tooltip/do-2.png | Bin 0 -> 20626 bytes www/src/kits/tooltip/dont-1.png | Bin 0 -> 21148 bytes www/src/kits/tooltip/dont-2.png | Bin 0 -> 40475 bytes www/src/kits/tooltip/dont-3.png | Bin 0 -> 32003 bytes www/src/kits/tooltip/index.mdx | 112 + www/src/kits/tooltip/light.png | Bin 0 -> 16082 bytes www/src/kits/tooltip/side.png | Bin 0 -> 22645 bytes www/src/kits/tooltip/top.png | Bin 0 -> 14400 bytes www/src/kits/type/index.mdx | 5 + www/src/kits/ui-action/index.mdx | 6 + www/src/kits/wrap/grid-browser-2.png | Bin 0 -> 2778 bytes www/src/kits/wrap/grid-browser.png | Bin 0 -> 2850 bytes www/src/kits/wrap/index.mdx | 30 + www/src/pages/atomic/index.mdx | 753 + www/src/pages/atomic/usage.mdx | 122 + .../product/aspect-ratio/avatar-customer.png | Bin 0 -> 4355 bytes .../guide/product/aspect-ratio/avatar-pro.png | Bin 0 -> 40687 bytes .../guide/product/aspect-ratio/custom.png | Bin 0 -> 133113 bytes .../product/aspect-ratio/customer-review.png | Bin 0 -> 21215 bytes .../guide/product/aspect-ratio/embed.png | Bin 0 -> 15087 bytes .../pages/guide/product/aspect-ratio/hero.png | Bin 0 -> 220827 bytes .../guide/product/aspect-ratio/index.mdx | 104 + .../product/aspect-ratio/pro-profile.png | Bin 0 -> 44118 bytes .../product/aspect-ratio/service-image.png | Bin 0 -> 34768 bytes .../brand-assets/assets/apple_appstore.svg | 8 + .../brand-assets/assets/apple_appstore.zip | Bin 0 -> 4173 bytes .../assets/apple_appstore_reverse.svg | 8 + .../assets/apple_appstore_reverse.zip | Bin 0 -> 4204 bytes .../brand-assets/assets/customer_app_icon.svg | 18 + .../brand-assets/assets/customer_app_icon.zip | Bin 0 -> 1244 bytes .../brand-assets/assets/google_playstore.svg | 25 + .../brand-assets/assets/google_playstore.zip | Bin 0 -> 3165 bytes .../assets/google_playstore_reverse.svg | 25 + .../assets/google_playstore_reverse.zip | Bin 0 -> 3194 bytes .../brand-assets/assets/logomark_black.svg | 4 + .../brand-assets/assets/logomark_black.zip | Bin 0 -> 892 bytes .../brand-assets/assets/logomark_blue.svg | 4 + .../brand-assets/assets/logomark_blue.zip | Bin 0 -> 889 bytes .../brand-assets/assets/logomark_grey.svg | 4 + .../brand-assets/assets/logomark_grey.zip | Bin 0 -> 889 bytes .../product/brand-assets/assets/logotype.svg | 3 + .../product/brand-assets/assets/logotype.zip | Bin 0 -> 2046 bytes .../brand-assets/assets/pro_app_icon.svg | 18 + .../brand-assets/assets/pro_app_icon.zip | Bin 0 -> 1223 bytes .../guide/product/brand-assets/index.mdx | 158 + .../pages/guide/product/breakpoints/index.mdx | 52 + www/src/pages/guide/product/color/index.mdx | 195 + .../guide/product/design-tokens/index.mdx | 30 + .../guide/product/design-tokens/tokens.png | Bin 0 -> 10734 bytes .../product/iconography/icons/add--medium.svg | 1 + .../iconography/icons/archive--medium.svg | 1 + .../iconography/icons/audio--medium.svg | 1 + .../iconography/icons/chart--medium.svg | 1 + .../icons/date-placeholder--medium.svg | 1 + .../product/iconography/icons/map--medium.svg | 1 + .../iconography/icons/phone-call--medium.svg | 1 + .../iconography/icons/phone-call--small.svg | 1 + .../iconography/icons/phone-call--tiny.svg | 1 + .../iconography/icons/share--medium.svg | 1 + .../iconography/icons/sort--medium.svg | 1 + .../iconography/icons/subtract--medium.svg | 1 + .../iconography/icons/trash--medium.svg | 1 + .../iconography/icons/upload--medium.svg | 1 + .../iconography/icons/video--medium.svg | 1 + .../pages/guide/product/iconography/index.mdx | 29 + www/src/pages/guide/product/spacers/index.mdx | 108 + .../guide/product/spacers/spacer-layout-1.png | Bin 0 -> 38702 bytes .../guide/product/spacers/spacer-layout-2.png | Bin 0 -> 12280 bytes .../guide/product/spacers/spacer-layout-3.png | Bin 0 -> 19392 bytes .../pages/guide/product/toolkits/index.mdx | 70 + .../guide/product/toolkits/toolkit-1.png | Bin 0 -> 68970 bytes .../guide/product/toolkits/toolkit-2.png | Bin 0 -> 147426 bytes .../guide/product/toolkits/toolkit-3.png | Bin 0 -> 90158 bytes .../guide/product/toolkits/toolkit-4.png | Bin 0 -> 84129 bytes .../pages/guide/product/typography/index.mdx | 104 + www/src/pages/help/icon-github.svg | 3 + www/src/pages/help/icon-slack.svg | 16 + www/src/pages/help/index.mdx | 50 + www/src/pages/icons/icon-field.png | Bin 0 -> 80351 bytes www/src/pages/icons/index.mdx | 23 + www/src/pages/index.jsx | 53 + www/src/pages/overview/aaron.jpg | Bin 0 -> 4496 bytes www/src/pages/overview/about.mdx | 96 + www/src/pages/overview/accessibility.mdx | 48 + www/src/pages/overview/contributing.mdx | 26 + www/src/pages/overview/dan.jpg | Bin 0 -> 10871 bytes www/src/pages/overview/introGroup.svg | 122 + www/src/pages/overview/jon.jpg | Bin 0 -> 8274 bytes www/src/pages/overview/tom.jpg | Bin 0 -> 4306 bytes www/src/pages/tokens.jsx | 200 + www/src/pages/updates/graveyard.mdx | 64 + www/src/pages/updates/notes/2018-08-16.mdx | 32 + www/src/pages/updates/notes/2018-08-28.mdx | 20 + www/src/pages/updates/notes/2018-09-11.mdx | 16 + www/src/pages/updates/notes/2018-09-25.mdx | 20 + www/src/pages/updates/notes/2018-10-09.mdx | 22 + www/src/pages/updates/notes/2018-10-23.mdx | 16 + www/src/pages/updates/notes/2018-11-06.mdx | 16 + www/src/pages/updates/notes/2018-12-18.mdx | 49 + www/src/pages/updates/notes/index.mdx | 41 + www/src/pages/updates/roadmap.mdx | 8 + www/static/_redirects | 223 + www/static/favicon.ico | Bin 0 -> 15086 bytes yarn.lock | 16325 ++++++++++++++++ 702 files changed, 84190 insertions(+) create mode 100644 .browserslistrc create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .jest.config.json create mode 100644 .jest.setup.js create mode 100644 .nvmrc create mode 100644 .prettierignore create mode 100644 .prettierrc.yaml create mode 100644 CONTRIBUTING.md create mode 100644 ISSUE_TEMPLATE.md create mode 100644 README.md create mode 100644 RELEASING.md create mode 100644 babel.config.js create mode 100644 lerna.json create mode 100644 package.json create mode 100644 packages/changelog-lint/CHANGELOG.md create mode 100644 packages/changelog-lint/README.md create mode 100755 packages/changelog-lint/index.js create mode 100644 packages/changelog-lint/package.json create mode 100644 packages/changelog-lint/rules/changelog-heading-1-first/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-1-first/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-1-first/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-1-num-occurrences/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-1-num-occurrences/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-1-num-occurrences/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-1-text/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-1-text/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-1-text/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-dash/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-2-dash/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-dash/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-valid-date/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-2-valid-date/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-valid-date/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-valid-semver/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-2-valid-semver/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-2-valid-semver/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/test.js create mode 100644 packages/changelog-lint/rules/changelog-heading-3-text-contents/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-heading-3-text-contents/index.js create mode 100644 packages/changelog-lint/rules/changelog-heading-3-text-contents/test.js create mode 100644 packages/changelog-lint/rules/changelog-list-semver-severity/__snapshots__/test.js.snap create mode 100644 packages/changelog-lint/rules/changelog-list-semver-severity/index.js create mode 100644 packages/changelog-lint/rules/changelog-list-semver-severity/test.js create mode 100644 packages/changelog-lint/test-utils/index.js create mode 100644 packages/gatsby-transformer-thumbprint-atomic/gatsby-node.js create mode 100644 packages/gatsby-transformer-thumbprint-atomic/package.json create mode 100644 packages/gatsby-transformer-thumbprint-atomic/parse-ast.js create mode 100644 packages/gatsby-transformer-thumbprint-components/create-package-json-node.js create mode 100644 packages/gatsby-transformer-thumbprint-components/gatsby-node.js create mode 100644 packages/gatsby-transformer-thumbprint-components/package.json create mode 100644 packages/gatsby-transformer-thumbprint-tokens/gatsby-node.js create mode 100644 packages/gatsby-transformer-thumbprint-tokens/package.json create mode 100644 packages/thumbprint-atomic/CHANGELOG.md create mode 100644 packages/thumbprint-atomic/__snapshots__/test.js.snap create mode 100644 packages/thumbprint-atomic/package.json create mode 100644 packages/thumbprint-atomic/src/atomic.scss create mode 100644 packages/thumbprint-atomic/src/packages/aspect-ratio.scss create mode 100644 packages/thumbprint-atomic/src/packages/background-position.scss create mode 100644 packages/thumbprint-atomic/src/packages/background-size.scss create mode 100644 packages/thumbprint-atomic/src/packages/border-color.scss create mode 100644 packages/thumbprint-atomic/src/packages/border-radius.scss create mode 100644 packages/thumbprint-atomic/src/packages/border-style.scss create mode 100644 packages/thumbprint-atomic/src/packages/border-width.scss create mode 100644 packages/thumbprint-atomic/src/packages/border.scss create mode 100644 packages/thumbprint-atomic/src/packages/color.scss create mode 100644 packages/thumbprint-atomic/src/packages/coordinates.scss create mode 100644 packages/thumbprint-atomic/src/packages/display.scss create mode 100644 packages/thumbprint-atomic/src/packages/flexbox.scss create mode 100644 packages/thumbprint-atomic/src/packages/font-weight.scss create mode 100644 packages/thumbprint-atomic/src/packages/grid.scss create mode 100644 packages/thumbprint-atomic/src/packages/height.scss create mode 100644 packages/thumbprint-atomic/src/packages/margin.scss create mode 100644 packages/thumbprint-atomic/src/packages/max-width.scss create mode 100644 packages/thumbprint-atomic/src/packages/overflow.scss create mode 100644 packages/thumbprint-atomic/src/packages/padding.scss create mode 100644 packages/thumbprint-atomic/src/packages/position.scss create mode 100644 packages/thumbprint-atomic/src/packages/text-align.scss create mode 100644 packages/thumbprint-atomic/src/packages/text-decoration.scss create mode 100644 packages/thumbprint-atomic/src/packages/text-transform.scss create mode 100644 packages/thumbprint-atomic/src/packages/truncate.scss create mode 100644 packages/thumbprint-atomic/src/packages/vertical-align.scss create mode 100644 packages/thumbprint-atomic/src/packages/visually-hidden.scss create mode 100644 packages/thumbprint-atomic/src/packages/white-space.scss create mode 100644 packages/thumbprint-atomic/src/packages/width.scss create mode 100644 packages/thumbprint-atomic/src/packages/word-break.scss create mode 100644 packages/thumbprint-atomic/src/packages/z-index.scss create mode 100644 packages/thumbprint-atomic/test.js create mode 100644 packages/thumbprint-react/CHANGELOG.md create mode 100644 packages/thumbprint-react/components/Avatar/README.mdx create mode 100644 packages/thumbprint-react/components/Avatar/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Avatar/index.jsx create mode 100644 packages/thumbprint-react/components/Avatar/index.module.scss create mode 100644 packages/thumbprint-react/components/Avatar/static/check.svg create mode 100644 packages/thumbprint-react/components/Avatar/subcomponents/badge.jsx create mode 100644 packages/thumbprint-react/components/Avatar/subcomponents/badge.module.scss create mode 100644 packages/thumbprint-react/components/Avatar/test.jsx create mode 100644 packages/thumbprint-react/components/Button/README.mdx create mode 100644 packages/thumbprint-react/components/Button/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Button/index.jsx create mode 100644 packages/thumbprint-react/components/Button/test.jsx create mode 100644 packages/thumbprint-react/components/ButtonRow/README.mdx create mode 100644 packages/thumbprint-react/components/ButtonRow/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ButtonRow/index.jsx create mode 100644 packages/thumbprint-react/components/ButtonRow/index.module.scss create mode 100644 packages/thumbprint-react/components/ButtonRow/test.jsx create mode 100644 packages/thumbprint-react/components/Carousel/README.mdx create mode 100644 packages/thumbprint-react/components/Carousel/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Carousel/base-carousel.jsx create mode 100644 packages/thumbprint-react/components/Carousel/base-carousel.module.scss create mode 100644 packages/thumbprint-react/components/Carousel/index.jsx create mode 100644 packages/thumbprint-react/components/Carousel/test.jsx create mode 100644 packages/thumbprint-react/components/Checkbox/README.mdx create mode 100644 packages/thumbprint-react/components/Checkbox/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Checkbox/index.jsx create mode 100644 packages/thumbprint-react/components/Checkbox/index.module.scss create mode 100644 packages/thumbprint-react/components/Checkbox/test.jsx create mode 100644 packages/thumbprint-react/components/DatePicker/README.mdx create mode 100644 packages/thumbprint-react/components/DatePicker/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/DatePicker/index.jsx create mode 100644 packages/thumbprint-react/components/DatePicker/index.module.scss create mode 100644 packages/thumbprint-react/components/DatePicker/test.jsx create mode 100644 packages/thumbprint-react/components/DatePicker/utilities.js create mode 100644 packages/thumbprint-react/components/DatePicker/utilities.test.js create mode 100644 packages/thumbprint-react/components/FormNote/README.mdx create mode 100644 packages/thumbprint-react/components/FormNote/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/FormNote/index.jsx create mode 100644 packages/thumbprint-react/components/FormNote/index.module.scss create mode 100644 packages/thumbprint-react/components/FormNote/test.jsx create mode 100644 packages/thumbprint-react/components/Grid/README.mdx create mode 100644 packages/thumbprint-react/components/Grid/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Grid/index.jsx create mode 100644 packages/thumbprint-react/components/Grid/index.module.scss create mode 100644 packages/thumbprint-react/components/Grid/test.jsx create mode 100644 packages/thumbprint-react/components/Input/README.mdx create mode 100644 packages/thumbprint-react/components/Input/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Input/index.jsx create mode 100644 packages/thumbprint-react/components/Input/index.module.scss create mode 100644 packages/thumbprint-react/components/Input/test.jsx create mode 100644 packages/thumbprint-react/components/InputRow/README.mdx create mode 100644 packages/thumbprint-react/components/InputRow/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/InputRow/index.jsx create mode 100644 packages/thumbprint-react/components/InputRow/index.module.scss create mode 100644 packages/thumbprint-react/components/InputRow/test.jsx create mode 100644 packages/thumbprint-react/components/Label/README.mdx create mode 100644 packages/thumbprint-react/components/Label/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Label/index.jsx create mode 100644 packages/thumbprint-react/components/Label/index.module.scss create mode 100644 packages/thumbprint-react/components/Label/test.jsx create mode 100644 packages/thumbprint-react/components/Link/README.mdx create mode 100644 packages/thumbprint-react/components/Link/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Link/index.jsx create mode 100644 packages/thumbprint-react/components/Link/test.jsx create mode 100644 packages/thumbprint-react/components/List/README.mdx create mode 100644 packages/thumbprint-react/components/List/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/List/index.jsx create mode 100644 packages/thumbprint-react/components/List/index.module.scss create mode 100644 packages/thumbprint-react/components/List/test.jsx create mode 100644 packages/thumbprint-react/components/LoaderDots/README.mdx create mode 100644 packages/thumbprint-react/components/LoaderDots/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/LoaderDots/index.jsx create mode 100644 packages/thumbprint-react/components/LoaderDots/index.module.scss create mode 100644 packages/thumbprint-react/components/LoaderDots/test.jsx create mode 100644 packages/thumbprint-react/components/ModalBase/README.mdx create mode 100644 packages/thumbprint-react/components/ModalBase/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ModalBase/_constants.scss create mode 100644 packages/thumbprint-react/components/ModalBase/index.jsx create mode 100644 packages/thumbprint-react/components/ModalBase/subcomponents/modal-contents/index.jsx create mode 100644 packages/thumbprint-react/components/ModalBase/subcomponents/modal-contents/index.module.scss create mode 100644 packages/thumbprint-react/components/ModalBase/subcomponents/modal-structure/index.jsx create mode 100644 packages/thumbprint-react/components/ModalBase/subcomponents/modal-structure/index.module.scss create mode 100644 packages/thumbprint-react/components/ModalBase/test.jsx create mode 100644 packages/thumbprint-react/components/ModalCurtain/README.mdx create mode 100644 packages/thumbprint-react/components/ModalCurtain/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ModalCurtain/components/esc-listener.jsx create mode 100644 packages/thumbprint-react/components/ModalCurtain/components/no-scroll.jsx create mode 100644 packages/thumbprint-react/components/ModalCurtain/index.jsx create mode 100644 packages/thumbprint-react/components/ModalCurtain/index.module.scss create mode 100644 packages/thumbprint-react/components/ModalCurtain/test.jsx create mode 100644 packages/thumbprint-react/components/ModalDefault/README.mdx create mode 100644 packages/thumbprint-react/components/ModalDefault/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ModalDefault/components/sticky-footer.jsx create mode 100644 packages/thumbprint-react/components/ModalDefault/components/sticky-footer.module.scss create mode 100644 packages/thumbprint-react/components/ModalDefault/components/transition.jsx create mode 100644 packages/thumbprint-react/components/ModalDefault/index.jsx create mode 100644 packages/thumbprint-react/components/ModalDefault/index.module.scss create mode 100644 packages/thumbprint-react/components/ModalDefault/test.jsx create mode 100644 packages/thumbprint-react/components/ModalStandard/README.mdx create mode 100644 packages/thumbprint-react/components/ModalStandard/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ModalStandard/index.jsx create mode 100644 packages/thumbprint-react/components/ModalStandard/index.module.scss create mode 100644 packages/thumbprint-react/components/ModalStandard/static/close-icon.svg create mode 100644 packages/thumbprint-react/components/ModalStandard/test.jsx create mode 100644 packages/thumbprint-react/components/ProgressBar/README.mdx create mode 100644 packages/thumbprint-react/components/ProgressBar/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ProgressBar/index.jsx create mode 100644 packages/thumbprint-react/components/ProgressBar/index.module.scss create mode 100644 packages/thumbprint-react/components/ProgressBar/test.jsx create mode 100644 packages/thumbprint-react/components/ProgressBarBase/README.mdx create mode 100644 packages/thumbprint-react/components/ProgressBarBase/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ProgressBarBase/index.jsx create mode 100644 packages/thumbprint-react/components/ProgressBarBase/index.module.scss create mode 100644 packages/thumbprint-react/components/ProgressBarBase/test.jsx create mode 100644 packages/thumbprint-react/components/Radio/README.mdx create mode 100644 packages/thumbprint-react/components/Radio/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Radio/index.jsx create mode 100644 packages/thumbprint-react/components/Radio/index.module.scss create mode 100644 packages/thumbprint-react/components/Radio/test.jsx create mode 100644 packages/thumbprint-react/components/Select/README.mdx create mode 100644 packages/thumbprint-react/components/Select/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Select/index.jsx create mode 100644 packages/thumbprint-react/components/Select/index.module.scss create mode 100644 packages/thumbprint-react/components/Select/test.jsx create mode 100644 packages/thumbprint-react/components/ServiceCard/README.mdx create mode 100644 packages/thumbprint-react/components/ServiceCard/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/ServiceCard/index.jsx create mode 100644 packages/thumbprint-react/components/ServiceCard/index.module.scss create mode 100644 packages/thumbprint-react/components/ServiceCard/test.jsx create mode 100644 packages/thumbprint-react/components/StarRating/README.mdx create mode 100644 packages/thumbprint-react/components/StarRating/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/StarRating/index.jsx create mode 100644 packages/thumbprint-react/components/StarRating/index.module.scss create mode 100644 packages/thumbprint-react/components/StarRating/static/star.svg create mode 100644 packages/thumbprint-react/components/StarRating/test.jsx create mode 100644 packages/thumbprint-react/components/Textarea/README.mdx create mode 100644 packages/thumbprint-react/components/Textarea/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Textarea/index.jsx create mode 100644 packages/thumbprint-react/components/Textarea/index.module.scss create mode 100644 packages/thumbprint-react/components/Textarea/test.jsx create mode 100644 packages/thumbprint-react/components/Tooltip/README.mdx create mode 100644 packages/thumbprint-react/components/Tooltip/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Tooltip/index.jsx create mode 100644 packages/thumbprint-react/components/Tooltip/index.module.scss create mode 100644 packages/thumbprint-react/components/Tooltip/test.jsx create mode 100644 packages/thumbprint-react/components/Type/README.mdx create mode 100644 packages/thumbprint-react/components/Type/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Type/index.jsx create mode 100644 packages/thumbprint-react/components/Type/index.module.scss create mode 100644 packages/thumbprint-react/components/Type/test.jsx create mode 100644 packages/thumbprint-react/components/UIAction/README.mdx create mode 100644 packages/thumbprint-react/components/UIAction/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/UIAction/get-anchor-props.js create mode 100644 packages/thumbprint-react/components/UIAction/get-button-props.js create mode 100644 packages/thumbprint-react/components/UIAction/index.jsx create mode 100644 packages/thumbprint-react/components/UIAction/is-thumbtack-url.js create mode 100644 packages/thumbprint-react/components/UIAction/is-thumbtack-url.test.js create mode 100644 packages/thumbprint-react/components/UIAction/plain.jsx create mode 100644 packages/thumbprint-react/components/UIAction/plain.module.scss create mode 100644 packages/thumbprint-react/components/UIAction/test.jsx create mode 100644 packages/thumbprint-react/components/UIAction/themed.jsx create mode 100644 packages/thumbprint-react/components/UIAction/themed.module.scss create mode 100644 packages/thumbprint-react/components/Wrap/README.mdx create mode 100644 packages/thumbprint-react/components/Wrap/__snapshots__/test.jsx.snap create mode 100644 packages/thumbprint-react/components/Wrap/index.jsx create mode 100644 packages/thumbprint-react/components/Wrap/index.module.scss create mode 100644 packages/thumbprint-react/components/Wrap/test.jsx create mode 100644 packages/thumbprint-react/icons/index.jsx create mode 100644 packages/thumbprint-react/index.js create mode 100644 packages/thumbprint-react/package.json create mode 100644 packages/thumbprint-react/rollup.config.js create mode 100644 packages/thumbprint-tokens/CHANGELOG.md create mode 100644 packages/thumbprint-tokens/package.json create mode 100644 packages/thumbprint-tokens/src/__snapshots__/index.test.js.snap create mode 100644 packages/thumbprint-tokens/src/formatters/javascript-cjs.js create mode 100644 packages/thumbprint-tokens/src/formatters/javascript-cjs.test.js create mode 100644 packages/thumbprint-tokens/src/formatters/javascript-es.js create mode 100644 packages/thumbprint-tokens/src/formatters/javascript-es.test.js create mode 100644 packages/thumbprint-tokens/src/formatters/scss.js create mode 100644 packages/thumbprint-tokens/src/formatters/scss.test.js create mode 100755 packages/thumbprint-tokens/src/index.js create mode 100644 packages/thumbprint-tokens/src/index.test.js create mode 100644 packages/thumbprint-tokens/src/tokens/border-radius.json create mode 100644 packages/thumbprint-tokens/src/tokens/breakpoint.json create mode 100644 packages/thumbprint-tokens/src/tokens/color.json create mode 100644 packages/thumbprint-tokens/src/tokens/deprecated.json create mode 100644 packages/thumbprint-tokens/src/tokens/font-family.json create mode 100644 packages/thumbprint-tokens/src/tokens/font-letter-spacing.json create mode 100644 packages/thumbprint-tokens/src/tokens/font-line-height.json create mode 100644 packages/thumbprint-tokens/src/tokens/font-weight.json create mode 100644 packages/thumbprint-tokens/src/tokens/font.json create mode 100644 packages/thumbprint-tokens/src/tokens/shadow.json create mode 100644 packages/thumbprint-tokens/src/tokens/space.json create mode 100644 packages/thumbprint-tokens/src/tokens/wrap.json create mode 100644 packages/thumbprint-tokens/src/tokens/z-index.json create mode 100644 packages/tp-ui-component-alert/CHANGELOG.md create mode 100644 packages/tp-ui-component-alert/README.mdx create mode 100644 packages/tp-ui-component-alert/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-component-alert/_index.scss create mode 100644 packages/tp-ui-component-alert/package.json create mode 100644 packages/tp-ui-component-alert/test.js create mode 100644 packages/tp-ui-component-avatar/CHANGELOG.md create mode 100644 packages/tp-ui-component-avatar/README.mdx create mode 100644 packages/tp-ui-component-avatar/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-component-avatar/_index.scss create mode 100644 packages/tp-ui-component-avatar/package.json create mode 100644 packages/tp-ui-component-avatar/test.js create mode 100644 packages/tp-ui-component-form-note/CHANGELOG.md create mode 100644 packages/tp-ui-component-form-note/README.mdx create mode 100644 packages/tp-ui-component-form-note/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-component-form-note/_index.scss create mode 100644 packages/tp-ui-component-form-note/package.json create mode 100644 packages/tp-ui-component-form-note/test.js create mode 100644 packages/tp-ui-component-loader/CHANGELOG.md create mode 100644 packages/tp-ui-component-loader/README.mdx create mode 100644 packages/tp-ui-component-loader/__snapshots__/test.js.snap create mode 100755 packages/tp-ui-component-loader/_index.scss create mode 100644 packages/tp-ui-component-loader/package.json create mode 100644 packages/tp-ui-component-loader/test.js create mode 100644 packages/tp-ui-core-font-face/CHANGELOG.md create mode 100644 packages/tp-ui-core-font-face/README.mdx create mode 100644 packages/tp-ui-core-font-face/__snapshots__/test.js.snap create mode 100755 packages/tp-ui-core-font-face/_index.scss create mode 100644 packages/tp-ui-core-font-face/package.json create mode 100644 packages/tp-ui-core-font-face/test.js create mode 100644 packages/tp-ui-core-function/CHANGELOG.md create mode 100644 packages/tp-ui-core-function/README.mdx create mode 100644 packages/tp-ui-core-function/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-core-function/_index.scss create mode 100644 packages/tp-ui-core-function/package.json create mode 100644 packages/tp-ui-core-function/test.js create mode 100644 packages/tp-ui-core-mixin/CHANGELOG.md create mode 100644 packages/tp-ui-core-mixin/README.mdx create mode 100644 packages/tp-ui-core-mixin/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-core-mixin/_index.scss create mode 100644 packages/tp-ui-core-mixin/package.json create mode 100644 packages/tp-ui-core-mixin/test.js create mode 100644 packages/tp-ui-core-reset/CHANGELOG.md create mode 100644 packages/tp-ui-core-reset/README.mdx create mode 100644 packages/tp-ui-core-reset/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-core-reset/_index.scss create mode 100644 packages/tp-ui-core-reset/package.json create mode 100644 packages/tp-ui-core-reset/test.js create mode 100644 packages/tp-ui-element-body/CHANGELOG.md create mode 100644 packages/tp-ui-element-body/README.mdx create mode 100644 packages/tp-ui-element-body/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-body/_index.scss create mode 100644 packages/tp-ui-element-body/package.json create mode 100644 packages/tp-ui-element-body/test.js create mode 100644 packages/tp-ui-element-button/CHANGELOG.md create mode 100644 packages/tp-ui-element-button/README.mdx create mode 100644 packages/tp-ui-element-button/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-button/_index.scss create mode 100644 packages/tp-ui-element-button/_mixin.scss create mode 100644 packages/tp-ui-element-button/package.json create mode 100644 packages/tp-ui-element-button/test.js create mode 100644 packages/tp-ui-element-checkbox/CHANGELOG.md create mode 100644 packages/tp-ui-element-checkbox/README.mdx create mode 100644 packages/tp-ui-element-checkbox/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-checkbox/_index.scss create mode 100644 packages/tp-ui-element-checkbox/package.json create mode 100644 packages/tp-ui-element-checkbox/test.js create mode 100644 packages/tp-ui-element-fieldset/CHANGELOG.md create mode 100644 packages/tp-ui-element-fieldset/README.mdx create mode 100644 packages/tp-ui-element-fieldset/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-fieldset/_index.scss create mode 100644 packages/tp-ui-element-fieldset/package.json create mode 100644 packages/tp-ui-element-fieldset/test.js create mode 100644 packages/tp-ui-element-hr/CHANGELOG.md create mode 100644 packages/tp-ui-element-hr/README.mdx create mode 100644 packages/tp-ui-element-hr/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-hr/_index.scss create mode 100644 packages/tp-ui-element-hr/package.json create mode 100644 packages/tp-ui-element-hr/test.js create mode 100644 packages/tp-ui-element-img/CHANGELOG.md create mode 100644 packages/tp-ui-element-img/README.mdx create mode 100644 packages/tp-ui-element-img/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-img/_index.scss create mode 100644 packages/tp-ui-element-img/package.json create mode 100644 packages/tp-ui-element-img/test.js create mode 100644 packages/tp-ui-element-input/CHANGELOG.md create mode 100644 packages/tp-ui-element-input/README.mdx create mode 100644 packages/tp-ui-element-input/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-input/_index.scss create mode 100644 packages/tp-ui-element-input/package.json create mode 100644 packages/tp-ui-element-input/test.js create mode 100644 packages/tp-ui-element-label/CHANGELOG.md create mode 100644 packages/tp-ui-element-label/README.mdx create mode 100644 packages/tp-ui-element-label/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-label/_index.scss create mode 100644 packages/tp-ui-element-label/package.json create mode 100644 packages/tp-ui-element-label/test.js create mode 100644 packages/tp-ui-element-link/CHANGELOG.md create mode 100644 packages/tp-ui-element-link/README.mdx create mode 100644 packages/tp-ui-element-link/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-link/_index.scss create mode 100644 packages/tp-ui-element-link/_mixin.scss create mode 100644 packages/tp-ui-element-link/package.json create mode 100644 packages/tp-ui-element-link/test.js create mode 100644 packages/tp-ui-element-list/CHANGELOG.md create mode 100644 packages/tp-ui-element-list/README.mdx create mode 100644 packages/tp-ui-element-list/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-list/_index.scss create mode 100644 packages/tp-ui-element-list/_mixin.scss create mode 100644 packages/tp-ui-element-list/package.json create mode 100644 packages/tp-ui-element-list/test.js create mode 100644 packages/tp-ui-element-radio/CHANGELOG.md create mode 100644 packages/tp-ui-element-radio/README.mdx create mode 100644 packages/tp-ui-element-radio/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-radio/_index.scss create mode 100644 packages/tp-ui-element-radio/package.json create mode 100644 packages/tp-ui-element-radio/test.js create mode 100644 packages/tp-ui-element-select/CHANGELOG.md create mode 100644 packages/tp-ui-element-select/README.mdx create mode 100644 packages/tp-ui-element-select/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-select/_index.scss create mode 100644 packages/tp-ui-element-select/package.json create mode 100644 packages/tp-ui-element-select/test.js create mode 100644 packages/tp-ui-element-table/CHANGELOG.md create mode 100644 packages/tp-ui-element-table/README.mdx create mode 100644 packages/tp-ui-element-table/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-table/_index.scss create mode 100644 packages/tp-ui-element-table/package.json create mode 100644 packages/tp-ui-element-table/test.js create mode 100644 packages/tp-ui-element-textarea/CHANGELOG.md create mode 100644 packages/tp-ui-element-textarea/README.mdx create mode 100644 packages/tp-ui-element-textarea/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-textarea/_index.scss create mode 100644 packages/tp-ui-element-textarea/package.json create mode 100644 packages/tp-ui-element-textarea/test.js create mode 100644 packages/tp-ui-element-type/CHANGELOG.md create mode 100644 packages/tp-ui-element-type/README.mdx create mode 100644 packages/tp-ui-element-type/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-element-type/_index.scss create mode 100644 packages/tp-ui-element-type/_mixin.scss create mode 100644 packages/tp-ui-element-type/package.json create mode 100644 packages/tp-ui-element-type/test.js create mode 100644 packages/tp-ui-layout-block-list/CHANGELOG.md create mode 100644 packages/tp-ui-layout-block-list/README.mdx create mode 100644 packages/tp-ui-layout-block-list/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-block-list/_index.scss create mode 100644 packages/tp-ui-layout-block-list/package.json create mode 100644 packages/tp-ui-layout-block-list/test.js create mode 100644 packages/tp-ui-layout-button-row/CHANGELOG.md create mode 100644 packages/tp-ui-layout-button-row/README.mdx create mode 100644 packages/tp-ui-layout-button-row/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-button-row/_index.scss create mode 100644 packages/tp-ui-layout-button-row/package.json create mode 100644 packages/tp-ui-layout-button-row/test.js create mode 100644 packages/tp-ui-layout-form/CHANGELOG.md create mode 100644 packages/tp-ui-layout-form/README.mdx create mode 100644 packages/tp-ui-layout-form/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-form/_index.scss create mode 100644 packages/tp-ui-layout-form/package.json create mode 100644 packages/tp-ui-layout-form/test.js create mode 100644 packages/tp-ui-layout-grid/CHANGELOG.md create mode 100644 packages/tp-ui-layout-grid/README.mdx create mode 100644 packages/tp-ui-layout-grid/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-grid/_index.scss create mode 100644 packages/tp-ui-layout-grid/package.json create mode 100644 packages/tp-ui-layout-grid/test.js create mode 100644 packages/tp-ui-layout-input-row/CHANGELOG.md create mode 100644 packages/tp-ui-layout-input-row/README.mdx create mode 100644 packages/tp-ui-layout-input-row/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-input-row/_index.scss create mode 100644 packages/tp-ui-layout-input-row/package.json create mode 100644 packages/tp-ui-layout-input-row/test.js create mode 100644 packages/tp-ui-layout-longread/CHANGELOG.md create mode 100644 packages/tp-ui-layout-longread/README.mdx create mode 100644 packages/tp-ui-layout-longread/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-longread/_index.scss create mode 100644 packages/tp-ui-layout-longread/_mixin.scss create mode 100644 packages/tp-ui-layout-longread/package.json create mode 100644 packages/tp-ui-layout-longread/test.js create mode 100644 packages/tp-ui-layout-wrap/CHANGELOG.md create mode 100644 packages/tp-ui-layout-wrap/README.mdx create mode 100644 packages/tp-ui-layout-wrap/__snapshots__/test.js.snap create mode 100644 packages/tp-ui-layout-wrap/_index.scss create mode 100644 packages/tp-ui-layout-wrap/_mixin.scss create mode 100644 packages/tp-ui-layout-wrap/package.json create mode 100644 packages/tp-ui-layout-wrap/test.js create mode 100755 scripts/should-build-package.js create mode 100644 stylelint.config.js create mode 120000 www/.eslintrc.js create mode 100644 www/.gitignore create mode 100644 www/gatsby-config.js create mode 100644 www/gatsby-node.js create mode 100644 www/package.json create mode 120000 www/plugins/gatsby-transformer-thumbprint-atomic create mode 120000 www/plugins/gatsby-transformer-thumbprint-components create mode 120000 www/plugins/gatsby-transformer-thumbprint-tokens create mode 100644 www/postcss.config.js create mode 100644 www/src/components/alert/index.jsx create mode 100644 www/src/components/alert/index.module.scss create mode 100644 www/src/components/container/doc-search.jsx create mode 100644 www/src/components/container/get-components-side-nav.js create mode 100644 www/src/components/container/index.jsx create mode 100644 www/src/components/container/index.module.scss create mode 100644 www/src/components/container/side-nav.jsx create mode 100644 www/src/components/container/side-nav.module.scss create mode 100644 www/src/components/container/thumbprintLogo.svg create mode 100644 www/src/components/dodont/index.jsx create mode 100644 www/src/components/dodont/index.module.scss create mode 100644 www/src/components/generate-slug/index.js create mode 100644 www/src/components/graveyard-entry/index.jsx create mode 100755 www/src/components/h2/index.jsx create mode 100755 www/src/components/h3/index.jsx create mode 100644 www/src/components/mdx/code-block/index.jsx create mode 100644 www/src/components/mdx/code-block/index.module.scss create mode 100644 www/src/components/mdx/code-block/react-code-block.jsx create mode 100644 www/src/components/mdx/code-block/styles.js create mode 100644 www/src/components/mdx/index.jsx create mode 100644 www/src/components/mdx/index.module.scss create mode 100644 www/src/components/package-table/index.jsx create mode 100644 www/src/components/page-header/index.jsx create mode 100644 www/src/components/prism-styles/index.scss create mode 100644 www/src/components/swatch/index.jsx create mode 100644 www/src/components/tag/index.jsx create mode 100644 www/src/components/thumbprint-atomic/get-classes/index.js create mode 100644 www/src/components/thumbprint-atomic/table/index.jsx create mode 100644 www/src/components/thumbprint-components/get-import-statement.js create mode 100644 www/src/components/thumbprint-components/page/index.jsx create mode 100644 www/src/components/thumbprint-components/platform-nav/index.jsx create mode 100644 www/src/components/thumbprint-components/platform-nav/index.module.scss create mode 100644 www/src/components/thumbprint-components/platform-order.js create mode 100644 www/src/components/thumbprint-components/props-table/index.jsx create mode 100644 www/src/components/thumbprint-guide/swatch-usage/index.jsx create mode 100644 www/src/components/thumbprint-guide/swatch/index.jsx create mode 100644 www/src/components/thumbprint-guide/swatch/index.module.scss create mode 100644 www/src/components/thumbprint-tokens/token-example/color.jsx create mode 100644 www/src/components/thumbprint-tokens/token-example/index.jsx create mode 100644 www/src/components/thumbprint-www/featured/index.jsx create mode 100644 www/src/components/thumbprint-www/featured/index.module.scss create mode 100644 www/src/components/thumbprint-www/featured/svg/about.svg create mode 100644 www/src/components/thumbprint-www/featured/svg/checklist.svg create mode 100644 www/src/components/thumbprint-www/featured/svg/color.svg create mode 100644 www/src/components/thumbprint-www/featured/svg/help.svg create mode 100644 www/src/components/thumbprint-www/intro/images/hero.png create mode 100644 www/src/components/thumbprint-www/roadmap/index.jsx create mode 100644 www/src/components/thumbprint-www/roadmap/index.module.scss create mode 100644 www/src/components/wrap/index.jsx create mode 100644 www/src/components/wrap/index.module.scss create mode 100644 www/src/kits/alert/index.mdx create mode 100644 www/src/kits/avatar/index.mdx create mode 100644 www/src/kits/block-list/index.mdx create mode 100644 www/src/kits/body/index.mdx create mode 100644 www/src/kits/button-row/index.mdx create mode 100644 www/src/kits/button/index.mdx create mode 100644 www/src/kits/carousel/index.mdx create mode 100644 www/src/kits/checkbox/index.mdx create mode 100644 www/src/kits/date-picker/index.mdx create mode 100644 www/src/kits/fieldset/index.mdx create mode 100644 www/src/kits/font-face/index.mdx create mode 100644 www/src/kits/form-note/index.mdx create mode 100644 www/src/kits/form/index.mdx create mode 100644 www/src/kits/functions/index.mdx create mode 100644 www/src/kits/grid/grid-browser-2.png create mode 100644 www/src/kits/grid/grid-browser.png create mode 100644 www/src/kits/grid/index.mdx create mode 100644 www/src/kits/horizontal-rule/index.mdx create mode 100644 www/src/kits/image/index.mdx create mode 100644 www/src/kits/input-row/index.mdx create mode 100644 www/src/kits/input/index.mdx create mode 100644 www/src/kits/label/index.mdx create mode 100644 www/src/kits/link/index.mdx create mode 100644 www/src/kits/list/index.mdx create mode 100644 www/src/kits/loader-dots/index.mdx create mode 100644 www/src/kits/longread/index.mdx create mode 100644 www/src/kits/mixins/index.mdx create mode 100644 www/src/kits/modal-base/index.mdx create mode 100644 www/src/kits/modal-curtain/index.mdx create mode 100644 www/src/kits/modal-default/index.mdx create mode 100644 www/src/kits/modal-default/modal-anatomy.png create mode 100644 www/src/kits/modal-default/modal-announce.png create mode 100644 www/src/kits/modal-default/modal-break-1-red.png create mode 100644 www/src/kits/modal-default/modal-break-1.png create mode 100644 www/src/kits/modal-default/modal-break-2-red.png create mode 100644 www/src/kits/modal-default/modal-break-2.png create mode 100644 www/src/kits/modal-default/modal-do.png create mode 100644 www/src/kits/modal-default/modal-dont.png create mode 100644 www/src/kits/modal-default/modal-result.png create mode 100644 www/src/kits/modal-default/modal-size-1.png create mode 100644 www/src/kits/modal-default/modal-size-2.png create mode 100644 www/src/kits/modal-default/modal-trigger.png create mode 100644 www/src/kits/modal-standard/index.mdx create mode 100644 www/src/kits/progress-bar-base/index.mdx create mode 100644 www/src/kits/progress-bar/index.mdx create mode 100644 www/src/kits/radio/index.mdx create mode 100644 www/src/kits/reset/index.mdx create mode 100644 www/src/kits/select/index.mdx create mode 100644 www/src/kits/service-card/index.mdx create mode 100644 www/src/kits/service-card/service-card-icon.png create mode 100644 www/src/kits/service-card/service-card-layout.png create mode 100644 www/src/kits/service-card/service-card-max-width.png create mode 100644 www/src/kits/service-card/service-card-min-width.png create mode 100644 www/src/kits/service-card/service-card.png create mode 100644 www/src/kits/star-rating/index.mdx create mode 100644 www/src/kits/table/index.mdx create mode 100644 www/src/kits/textarea/index.mdx create mode 100644 www/src/kits/tooltip/bottom.png create mode 100644 www/src/kits/tooltip/dark.png create mode 100644 www/src/kits/tooltip/default-2.png create mode 100644 www/src/kits/tooltip/default.png create mode 100644 www/src/kits/tooltip/do-1.png create mode 100644 www/src/kits/tooltip/do-2.png create mode 100644 www/src/kits/tooltip/dont-1.png create mode 100644 www/src/kits/tooltip/dont-2.png create mode 100644 www/src/kits/tooltip/dont-3.png create mode 100644 www/src/kits/tooltip/index.mdx create mode 100644 www/src/kits/tooltip/light.png create mode 100644 www/src/kits/tooltip/side.png create mode 100644 www/src/kits/tooltip/top.png create mode 100644 www/src/kits/type/index.mdx create mode 100644 www/src/kits/ui-action/index.mdx create mode 100644 www/src/kits/wrap/grid-browser-2.png create mode 100644 www/src/kits/wrap/grid-browser.png create mode 100644 www/src/kits/wrap/index.mdx create mode 100644 www/src/pages/atomic/index.mdx create mode 100644 www/src/pages/atomic/usage.mdx create mode 100644 www/src/pages/guide/product/aspect-ratio/avatar-customer.png create mode 100644 www/src/pages/guide/product/aspect-ratio/avatar-pro.png create mode 100644 www/src/pages/guide/product/aspect-ratio/custom.png create mode 100644 www/src/pages/guide/product/aspect-ratio/customer-review.png create mode 100644 www/src/pages/guide/product/aspect-ratio/embed.png create mode 100644 www/src/pages/guide/product/aspect-ratio/hero.png create mode 100644 www/src/pages/guide/product/aspect-ratio/index.mdx create mode 100644 www/src/pages/guide/product/aspect-ratio/pro-profile.png create mode 100644 www/src/pages/guide/product/aspect-ratio/service-image.png create mode 100644 www/src/pages/guide/product/brand-assets/assets/apple_appstore.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/apple_appstore.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/apple_appstore_reverse.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/apple_appstore_reverse.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/customer_app_icon.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/customer_app_icon.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/google_playstore.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/google_playstore.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/google_playstore_reverse.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/google_playstore_reverse.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/logomark_black.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/logomark_black.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/logomark_blue.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/logomark_blue.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/logomark_grey.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/logomark_grey.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/logotype.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/logotype.zip create mode 100644 www/src/pages/guide/product/brand-assets/assets/pro_app_icon.svg create mode 100644 www/src/pages/guide/product/brand-assets/assets/pro_app_icon.zip create mode 100644 www/src/pages/guide/product/brand-assets/index.mdx create mode 100755 www/src/pages/guide/product/breakpoints/index.mdx create mode 100644 www/src/pages/guide/product/color/index.mdx create mode 100644 www/src/pages/guide/product/design-tokens/index.mdx create mode 100644 www/src/pages/guide/product/design-tokens/tokens.png create mode 100644 www/src/pages/guide/product/iconography/icons/add--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/archive--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/audio--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/chart--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/date-placeholder--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/map--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/phone-call--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/phone-call--small.svg create mode 100644 www/src/pages/guide/product/iconography/icons/phone-call--tiny.svg create mode 100644 www/src/pages/guide/product/iconography/icons/share--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/sort--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/subtract--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/trash--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/upload--medium.svg create mode 100644 www/src/pages/guide/product/iconography/icons/video--medium.svg create mode 100644 www/src/pages/guide/product/iconography/index.mdx create mode 100644 www/src/pages/guide/product/spacers/index.mdx create mode 100644 www/src/pages/guide/product/spacers/spacer-layout-1.png create mode 100644 www/src/pages/guide/product/spacers/spacer-layout-2.png create mode 100644 www/src/pages/guide/product/spacers/spacer-layout-3.png create mode 100644 www/src/pages/guide/product/toolkits/index.mdx create mode 100644 www/src/pages/guide/product/toolkits/toolkit-1.png create mode 100644 www/src/pages/guide/product/toolkits/toolkit-2.png create mode 100644 www/src/pages/guide/product/toolkits/toolkit-3.png create mode 100644 www/src/pages/guide/product/toolkits/toolkit-4.png create mode 100644 www/src/pages/guide/product/typography/index.mdx create mode 100644 www/src/pages/help/icon-github.svg create mode 100644 www/src/pages/help/icon-slack.svg create mode 100644 www/src/pages/help/index.mdx create mode 100644 www/src/pages/icons/icon-field.png create mode 100644 www/src/pages/icons/index.mdx create mode 100644 www/src/pages/index.jsx create mode 100644 www/src/pages/overview/aaron.jpg create mode 100644 www/src/pages/overview/about.mdx create mode 100644 www/src/pages/overview/accessibility.mdx create mode 100644 www/src/pages/overview/contributing.mdx create mode 100644 www/src/pages/overview/dan.jpg create mode 100644 www/src/pages/overview/introGroup.svg create mode 100644 www/src/pages/overview/jon.jpg create mode 100644 www/src/pages/overview/tom.jpg create mode 100644 www/src/pages/tokens.jsx create mode 100644 www/src/pages/updates/graveyard.mdx create mode 100644 www/src/pages/updates/notes/2018-08-16.mdx create mode 100644 www/src/pages/updates/notes/2018-08-28.mdx create mode 100644 www/src/pages/updates/notes/2018-09-11.mdx create mode 100644 www/src/pages/updates/notes/2018-09-25.mdx create mode 100644 www/src/pages/updates/notes/2018-10-09.mdx create mode 100644 www/src/pages/updates/notes/2018-10-23.mdx create mode 100644 www/src/pages/updates/notes/2018-11-06.mdx create mode 100644 www/src/pages/updates/notes/2018-12-18.mdx create mode 100644 www/src/pages/updates/notes/index.mdx create mode 100644 www/src/pages/updates/roadmap.mdx create mode 100644 www/static/_redirects create mode 100644 www/static/favicon.ico create mode 100644 yarn.lock diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 000000000..945d1675f --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,4 @@ +> 1% in US +last 2 versions +ie 11 +not dead diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..ddab4f08c --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,31 @@ +module.exports = { + extends: [ + 'airbnb', + // Prettier must come last + 'prettier', + 'prettier/react', + ], + plugins: ['jest'], + env: { + browser: true, + node: true, + 'jest/globals': true, + }, + rules: { + // Has many false positives in monorepos + 'import/no-extraneous-dependencies': 'off', + // Disabled because some packages contain subcomponents. Our documentation system currently + // requires that they be defined in one file. + 'react/no-multi-comp': 'off', + }, + overrides: [ + { + files: ['packages/**/*'], + rules: { + // Disabled because rollup requires us to be explicit about the file extension. + // https://github.com/rollup/rollup/issues/1052#issuecomment-260065475 + 'import/extensions': 'off', + }, + }, + ], +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..4a79d8df1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,166 @@ +dist +tmp +aws.json +www/public +.cache +packages/thumbprint-icons/www + +# Created by https://www.gitignore.io/api/osx,node,intellij+all + +### Intellij+all ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 + +# User-specific stuff: +.idea/**/workspace.xml +.idea/**/tasks.xml +.idea/dictionaries + +# Sensitive or high-churn files: +.idea/**/dataSources/ +.idea/**/dataSources.ids +.idea/**/dataSources.xml +.idea/**/dataSources.local.xml +.idea/**/sqlDataSources.xml +.idea/**/dynamic.xml +.idea/**/uiDesigner.xml + +# Gradle: +.idea/**/gradle.xml +.idea/**/libraries + +# CMake +cmake-build-debug/ + +# Mongo Explorer plugin: +.idea/**/mongoSettings.xml + +## File-based project format: +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Cursive Clojure plugin +.idea/replstate.xml + +# Ruby plugin and RubyMine +/.rakeTasks + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + +### Intellij+all Patch ### +# Ignores the whole .idea folder and all .iml files +# See https://github.com/joeblau/gitignore.io/issues/186 and https://github.com/joeblau/gitignore.io/issues/360 + +.idea/ + +# Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-249601023 + +*.iml +modules.xml +.idea/misc.xml +*.ipr + +### Node ### +# 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 (http://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 + + +### OSX ### +*.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + + +# End of https://www.gitignore.io/api/osx,node,intellij+all diff --git a/.jest.config.json b/.jest.config.json new file mode 100644 index 000000000..b7452171a --- /dev/null +++ b/.jest.config.json @@ -0,0 +1,8 @@ +{ + "testMatch": ["/packages/**/?(*.)test.js?(x)"], + "setupTestFrameworkScriptFile": "./.jest.setup.js", + "snapshotSerializers": ["enzyme-to-json/serializer"], + "moduleNameMapper": { + "\\.(css|scss)$": "identity-obj-proxy" + } +} diff --git a/.jest.setup.js b/.jest.setup.js new file mode 100644 index 000000000..2c636cba9 --- /dev/null +++ b/.jest.setup.js @@ -0,0 +1,9 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); + +beforeAll(() => { + // Stub `window.scroll` since Jest will fail otherwise. This may change in the future. + global.scroll = () => true; +}); diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..5debbed21 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +lts/carbon diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..8415625e5 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,12 @@ +coverage +yarn.lock +dist +tmp +svg +.git +.cache +# Ignore `dist` files created by the Thumbprint documentation. +www/public +www/.cache +# Prevent Yarn and Prettier from conflicting. +package.json diff --git a/.prettierrc.yaml b/.prettierrc.yaml new file mode 100644 index 000000000..8b600340c --- /dev/null +++ b/.prettierrc.yaml @@ -0,0 +1,4 @@ +printWidth: 100 +tabWidth: 4 +trailingComma: all +singleQuote: true diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 000000000..3c91dc569 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,69 @@ +# Contributing to Thumbprint + +The Design Systems team welcomes contributions from all developers at Thumbtack. These contributions can range from small bug reports to brand new components and initiatives. + +Here are a few ways to get started: + +## File a bug or request a feature + +Providing feedback is the easiest way to contribute to Thumbprint. You can do this by [creating an issue on GitHub](https://github.com/thumbtack/thumbprint/issues). + +If you're a Thumbtack employee, you can also post on [#design-systems](https://teamsanfrancisco.slack.com/messages/C7FLM0ZGU/details/) for quick help. + +## Contribute code to Thumbprint + +There are two ways to contribute code back to Thumbprint: + +1. **Tackle open GitHub issues:** Issues labeled as “[good first issue](https://github.com/thumbtack/thumbprint/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)” or “[help wanted](https://github.com/thumbtack/thumbprint/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)” are perfect for contributors that want to tackle small tasks. +2. **Propose and create a new component:** Creating a component allows contributors to dive-deep into component API design, testing, accessibility, and documentation. Please [create a GitHub issue](https://github.com/thumbtack/thumbprint/issues) to propose a new component. If the component is a good candidate for Thumbprint, we’ll schedule a kick-off meeting to discuss next steps. + +Not sure if the component should be reusable? Take a look at the “[Where should a React component live](https://docs.google.com/a/thumbtack.com/document/d/1-EGijB_3mc49T_CSzWowNfhEKlwiTdZh8tqIx6URZys/edit?usp=sharing)” RFC (internal only). + +## Developing Thumbprint locally + +Use the following commands to run the Thumbprint documentation: + +```bash +git clone git@github.com:thumbtack/thumbprint.git +cd thumbprint +node -v # This must be 8.x +yarn -v # This must be >= 1.4.2 +yarn +yarn start +``` + +Then open http://localhost:8090/ to see the docs. We use the documentation the development environment for Thumbprint. + +### Submitting a pull request + +Here are a few things to keep in mind when creating a pull request: + +- **Testing:** Run `yarn test` locally to ensure that the build will pass. If the command fails because of [Jest snapshot tests](https://facebook.github.io/jest/docs/en/snapshot-testing.html), you will have to run `yarn test:jest -u` to update the snapshots. Review the changes to the snapshots to ensure that they are intended and include them in the code review. +- **Changelog:** + - Most changes within `packages/`require updates to the package's `CHANGELOG.md` file. You can skip modifying the changelog if your commit only modifies this [list of ignored files](https://github.com/thumbtack/thumbprint/blob/master/lerna.json). + - Our changelogs follow the “[Keep a Changelog](http://keepachangelog.com/en/1.0.0/)” specification. Our version numbers follow [Semantic Versioning](https://semver.org/). + - You should not include the package’s new version number as part of your commit. That is done in the release process. + +### Creating a new package + +Create a new folder in `packages` with the following structure: + +``` +├── CHANGELOG.md +├── README.mdx # Examples in documentation pages +├── index.jsx # Component definition (for React) +├── package.json +└── test.jsx +``` + +This is an example of a Thumbprint package that uses React. Thumbprint packages that ship SCSS contain a `_index.scss` file instead of `index.js`. + +Thumbprint follows a [traditional GitHub workflow](https://guides.github.com/introduction/flow/). This means that you should work in a feature branch and submit a pull request when ready for code review. + +**Tip:** Reference other packages to understand how each file works. + +### Releasing Thumbprint packages + +[Learn how to release the Thumbprint packages and documentation](https://github.com/thumbtack/thumbprint/blob/master/RELEASING.md). This process is done by [Thumbprint maintainers](https://github.com/orgs/thumbtack/teams/design-systems/members) after your code has merged into `master`. + +As always, reach out to [#design-systems](https://teamsanfrancisco.slack.com/messages/C7FLM0ZGU/details/) (internal to Thumbtack employees) if you have questions or feedback. diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 000000000..f4e2e5efa --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,7 @@ + diff --git a/README.md b/README.md new file mode 100644 index 000000000..353fc3601 --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# Thumbprint + +[Thumbprint](https://thumbprint.design/) is a collection of UI components, icons, and design tokens for use in Thumbtack projects. Though its primary purpose to support Thumbtack projects, we have open-sourced it for those interested in how we build and manage our documentation and code. + +![](https://raw.githubusercontent.com/dbader/readme-template/master/header.png) + +## Technology + +We have leaned on a variety of tools to build and maintain Thumbprint. Among those currently in use... + +- React and Sass for components. +- [Design tokens](https://thumbprint.design/tokens/) for UI consistency. +- Custom [functional CSS](https://www.mikecr.it/ramblings/functional-css/) library called [Atomic](https://thumbprint.design/atomic/) for layout. +- [lerna](https://lernajs.io/) for managing the packages +- [jest](https://jestjs.io/) for snapshot testing +- [npm](https://www.npmjs.com/) for publishing. +- [Gatsby](https://www.gatsbyjs.org/) with [mdx](https://github.com/mdx-js/mdx) for our documentation. + +## Contributing + +If you'd like to contribute to the design system, take at look at our (guidelines)[https://thumbprint.design/overview/contributing/]. If you work at thumbtack.com, please join the #design-system Slack channel and let us know what you'd like to work on. + +We also maintain a [CONTRIBUTING.md](CONTRIBUTING.md) file that contains developer-specific instructions for contributing code to Thumbprint. + +## Meta + +The primary maintainers of Thumbprint: + +- Dan O’Connor dan@thumbtack.com +- Tom Genoni tom@thumbtack.com diff --git a/RELEASING.md b/RELEASING.md new file mode 100644 index 000000000..0512d74ff --- /dev/null +++ b/RELEASING.md @@ -0,0 +1,38 @@ +# Releasing packages + +Thumbprint is a collection of small packages that are versioned independently and follow [Semantic Versioning](http://semver.org/). We use [Lerna](https://github.com/lerna/lerna) to automate most of the package release process, but there are still some manual steps. + +## Who can publish to NPM + +The following users have credentials to publish packages to NPM: + +1. [Daniel O’Connor](https://github.com/danoc) +2. [Tom Genoni](https://github.com/tomgenoni) + +This list ordered based on experience releasing packages and contributing to Thumbprint. + +## How to see if you have NPM credentials to publish + +Run `npm whoami`. You’ll be able to publish if the user NPM returns is a collaborator for the packages on [Thumbtack’s NPM org](https://www.npmjs.com/org/thumbtack). + +| | Command | Information | +| --- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 1 | `git checkout master && git pull` | Checks out `master` and pulls latest code. | +| 2 | `npm run updated` | Shows which packages have unreleased changes. | +| 3 | | Open the `CHANGELOG.md` files for each package with unreleased changes.

For each package, add the new version number and the date above the list of unreleased changes. Use the [Semantic Versioning specification](https://semver.org/) to determine the new version number. The new version number will be based on the highest severity unreleased change.

**What if one of these changelogs has no "Unreleased" changes?** It is possible that a developer forgot to add a changelog entry in their PR or, more likely, one of the package's dependencies is going to receive a version bump.

A change to the `@thumbtack/thumbprint-tokens` package, for example, will trigger a version bump in every Thumbprint package that uses it. In that case, add a new entry to the changelog that addresses the version bump in the dependency.

You should also look at the folder's git history to ensure that a developer did not forget to list their change in the changelog. If they did, you should go ahead and add the change to the changelog. | +| 4 | `git add .` | Stage all changes. | +| 5 | `git commit -m "Update CHANGELOG for package release"` | Commit all changes. | +| 6 | `npm run publish` | You'll be prompted to select the new version numbers for each package.

Use the version numbers that you chose in step #3. | + +## Deploying documentation + +The documentation is automatically deployed to Netlify when a PR is merged into the `master` branch. + +## Releasing beta versions of packages + +Run `npm whoami`. You’ll be able to publish if the user NPM returns is a collaborator for the packages on [Thumbtack’s NPM org](https://www.npmjs.com/org/thumbtack). + +1. Run `git checkout [branch-name]` to navigate to the branch that contains the changes you'd like to release. +2. Navigate to the package with `cd packages/[package-name]`. +3. Run `yarn publish --tag beta`. This will ask you for a version number. A package at `2.1.3` that includes a `Minor` beta change would become `2.2.0-beta.0`. If `2.2.0-beta.0` was already published, then increment the final digit. +4. Run `git reset --hard HEAD~1` to undo the changes to `package.json` that Yarn committed. We do not want to merge the new version number into `master`. diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 000000000..38a010094 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,26 @@ +module.exports = api => { + api.cache.forever(); + + const presets = ['@babel/preset-env', '@babel/preset-react']; + const plugins = [ + [ + 'inline-react-svg', + { + svgo: { + plugins: [ + { + removeAttrs: { + attrs: '(data-name)', + }, + }, + ], + }, + }, + ], + ]; + + return { + presets, + plugins, + }; +}; diff --git a/lerna.json b/lerna.json new file mode 100644 index 000000000..ee5bb3130 --- /dev/null +++ b/lerna.json @@ -0,0 +1,29 @@ +{ + "lerna": "2.0.0", + "packages": ["packages/*"], + "version": "independent", + "npmClient": "yarn", + "useWorkspaces": true, + "commands": { + "publish": { + "allowBranch": "master", + "ignore": [ + "README.mdx", + "README.md", + "CHANGELOG.md", + "CONTRIBUTING.md", + "yarn.lock", + "stories.jsx", + "*.test.js", + "test.js", + "*.test.jsx", + "test.jsx", + "*.test.js.snap", + "test.js.snap", + "*.test.jsx.snap", + "test.jsx.snap" + ], + "message": "" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..017528aa1 --- /dev/null +++ b/package.json @@ -0,0 +1,102 @@ +{ + "private": true, + "scripts": { + "start": "echo \"\n👋 New to Thumbprint? Take a look at our 'CONTRIBUTING.md' for tips!\n\" && yarn run bootstrap && cd www && echo \"\nℹ️ Need a hand? Reach out on #design-systems for help.\n\" && yarn start", + "updated": "lerna updated", + "bootstrap": "lerna run prepublishOnly", + "publish": "git checkout master && git pull && yarn test && yarn build:dist && lerna publish", + "build:docs": "yarn run bootstrap && cd www && yarn build", + "build:dist": "lerna exec -- rm -rf dist .cache && yarn run bootstrap", + "format": "prettier \"**/*.{js,jsx,css,scss,json,md,mdx,html}\" --write", + "test": "yarn run bootstrap && yarn run test:lint && yarn run test:jest && yarn run test:prettier", + "test:jest": "TZ=America/Los_Angeles jest --config .jest.config.json", + "test:jest:watch": "yarn run bootstrap && yarn test:jest --watch", + "test:prettier": "prettier \"**/*.{js,jsx,css,scss,json,md,mdx,html}\" --list-different || (c=$?; echo \"\n⚠️ Some files in this branch have not been formatted with Prettier. Please run 'yarn run format' to format them.\n\"; (exit $c))", + "test:lint": "yarn test:lint:md && yarn test:lint:css && yarn test:lint:js", + "test:lint:md": "remark \"packages/*/CHANGELOG.md\" --frail --quiet", + "test:lint:css": "stylelint --ignore-pattern **/*.module.scss **/*.scss", + "test:lint:js": "eslint . --ignore-path .gitignore --ext .jsx --ext .js" + }, + "devDependencies": { + "@babel/core": "^7.1.2", + "@babel/preset-env": "^7.1.0", + "@babel/preset-react": "^7.0.0", + "@thumbtack/changelog-lint": "^0.1.0", + "babel-core": "^7.0.0-bridge.0", + "babel-jest": "^23.6.0", + "babel-plugin-external-helpers": "^6.22.0", + "babel-plugin-inline-react-svg": "^0.5.2", + "enzyme": "^3.6.0", + "enzyme-adapter-react-16": "^1.7.0", + "enzyme-to-json": "^3.3.4", + "eslint": "^5.9.0", + "eslint-config-airbnb": "^17.1.0", + "eslint-config-prettier": "^3.0.1", + "eslint-plugin-import": "^2.14.0", + "eslint-plugin-jest": "^22.1.0", + "eslint-plugin-jsx-a11y": "^6.1.2", + "eslint-plugin-react": "^7.11.1", + "execa": "^0.10.0", + "folder-hash": "^2.1.1", + "fs-extra": "^7.0.0", + "husky": "^1.1.2", + "identity-obj-proxy": "^3.0.0", + "jest": "^23.6.0", + "lerna": "^2.2.0", + "node-sass": "^4.5.2", + "prettier": "1.15.3", + "pretty-quick": "^1.8.0", + "prop-types": "^15.6.1", + "react": "^16.4.0", + "react-dom": "^16.4.0", + "remark-cli": "^5.0.0", + "stylelint": "^9.9.0", + "stylelint-config-prettier": "^4.0.0", + "stylelint-config-recommended-scss": "^3.2.0", + "stylelint-scss": "^3.5.0" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/thumbtack/thumbprint.git" + }, + "keywords": [ + "thumbtack", + "thumbprint", + "ui-library", + "design-system" + ], + "author": { + "name": "Tom Genoni", + "email": "tom@atomeye.com", + "url": "http://atomeye.com/" + }, + "contributors": [ + { + "name": "Daniel O'Connor", + "email": "daniel@danoc.me", + "url": "https://danoc.me/" + } + ], + "license": "UNLICENSED", + "bugs": { + "url": "https://github.com/thumbtack/thumbprint/issues" + }, + "homepage": "https://github.com/thumbtack/thumbprint#readme", + "remarkConfig": { + "plugins": [ + "@thumbtack/changelog-lint" + ] + }, + "workspaces": [ + "packages/*", + "www" + ], + "resolutions": { + "react-docgen": "3.0.0-rc.2" + }, + "husky": { + "hooks": { + "pre-commit": "pretty-quick --staged" + } + } +} diff --git a/packages/changelog-lint/CHANGELOG.md b/packages/changelog-lint/CHANGELOG.md new file mode 100644 index 000000000..9d82d7b6a --- /dev/null +++ b/packages/changelog-lint/CHANGELOG.md @@ -0,0 +1,27 @@ +# Changelog + +## Unreleased + +## 0.1.3 - 2018-12-03 + +### Changed + +- [Patch] Upgrade to latest version of eslint. + +## 0.1.2 - 2018-11-27 + +### Changed + +- [Patch] Publish package to public NPM. + +## 0.1.1 - 2018-09-12 + +### Changed + +- [Patch] Upgrade version of Prettier. + +## 0.1.0 - 2018-05-04 + +### Added + +- [Minor] Created the `changelog-lint` package. (#776) diff --git a/packages/changelog-lint/README.md b/packages/changelog-lint/README.md new file mode 100644 index 000000000..281a0b500 --- /dev/null +++ b/packages/changelog-lint/README.md @@ -0,0 +1,17 @@ +# `changelog-lint` + +This linter ensures that changelogs are following the [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) specification. + +| Rule | Description | Status | +| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------ | +| `changelog-heading-1-first` | enforce that the changelog begins with a top-level heading | ✅ | +| `changelog-heading-1-num-occurences` | disallow more than one top-level heading | ✅ | +| `changelog-heading-1-text` | enforce that the top-level heading says “Changelog” | ✅ | +| `changelog-heading-2-dash` | enforce that the second-level heading contains a dash “-“ separated by one space on each side | ✅ | +| `changelog-heading-2-unreleased-num-occurrences` | enforce that there is one second-level heading that says “Unreleased“ | ✅ | +| `changelog-heading-2-valid-date` | enforce that second-level headings (that aren't “Unreleased“) contain a date formatted as `YYYY-MM-DD` | ✅ | +| `changelog-heading-2-valid-semver` | enforce that second-level headings (that aren't “Unreleased“) contain a version that follows Semantic Versioning | ✅ | +| `changelog-heading-3-duplicate-sections` | enforce that versions don't include duplicate third-level headings | ✅ | +| `changelog-heading-3-text-contents` | enforce that third-level headings contain a valid change type | ✅ | +| `changelog-list-semver-severity` | enforce that list items contain a valid severity label | ✅ | +| `changelog-list-has-change-type` | enforce that a change is part of a valid change type | ❌ | diff --git a/packages/changelog-lint/index.js b/packages/changelog-lint/index.js new file mode 100755 index 000000000..de5e6d0a6 --- /dev/null +++ b/packages/changelog-lint/index.js @@ -0,0 +1,15 @@ +/* eslint-disable global-require */ +const rules = [ + require('./rules/changelog-heading-1-first'), + require('./rules/changelog-heading-1-num-occurrences'), + require('./rules/changelog-heading-1-text'), + require('./rules/changelog-heading-2-dash'), + require('./rules/changelog-heading-2-unreleased-num-occurrences'), + require('./rules/changelog-heading-2-valid-date'), + require('./rules/changelog-heading-2-valid-semver'), + require('./rules/changelog-heading-3-duplicate-sections'), + require('./rules/changelog-heading-3-text-contents'), + require('./rules/changelog-list-semver-severity'), +]; + +module.exports.plugins = [require('remark-lint'), ...rules]; diff --git a/packages/changelog-lint/package.json b/packages/changelog-lint/package.json new file mode 100644 index 000000000..2fb93f761 --- /dev/null +++ b/packages/changelog-lint/package.json @@ -0,0 +1,27 @@ +{ + "name": "@thumbtack/changelog-lint", + "version": "0.1.3", + "scripts": { + "start": "./index.js" + }, + "bin": { + "version": "./index.js" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + }, + "author": "Daniel O'Connor ", + "license": "UNLICENSED", + "dependencies": { + "is-semver": "^1.0.8", + "lodash": "^4.17.10", + "nlcst-to-string": "^2.0.1", + "remark": "^9.0.0", + "remark-lint": "^6.0.1", + "unified-lint-rule": "^1.0.2", + "unist-util-select": "^1.5.0", + "unist-util-visit": "^1.3.0", + "vfile-reporter-json": "^1.0.1" + } +} diff --git a/packages/changelog-lint/rules/changelog-heading-1-first/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-1-first/__snapshots__/test.js.snap new file mode 100644 index 000000000..40cc0c7bc --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-first/__snapshots__/test.js.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "foo + +# Changelog", + "output": Array [ + Object { + "column": null, + "fatal": false, + "line": null, + "location": Object { + "end": Object { + "column": null, + "line": null, + }, + "start": Object { + "column": null, + "line": null, + }, + }, + "reason": "Changelog must start with a top level heading named “# Changelog”", + "ruleId": "changelog-heading-1-first", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "> Hi There! + +# Changelog", + "output": Array [ + Object { + "column": null, + "fatal": false, + "line": null, + "location": Object { + "end": Object { + "column": null, + "line": null, + }, + "start": Object { + "column": null, + "line": null, + }, + }, + "reason": "Changelog must start with a top level heading named “# Changelog”", + "ruleId": "changelog-heading-1-first", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-1-first/index.js b/packages/changelog-lint/rules/changelog-heading-1-first/index.js new file mode 100644 index 000000000..9e6c14d47 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-first/index.js @@ -0,0 +1,10 @@ +const rule = require('unified-lint-rule'); +const { get } = require('lodash'); + +const validate = (ast, file) => { + if (get(ast, 'children[0].type' !== 'heading') || get(ast, 'children[0].depth') !== 1) { + file.message('Changelog must start with a top level heading named “# Changelog”'); + } +}; + +module.exports = rule('remark-lint:changelog-heading-1-first', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-1-first/test.js b/packages/changelog-lint/rules/changelog-heading-1-first/test.js new file mode 100644 index 000000000..792c2fd63 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-first/test.js @@ -0,0 +1,18 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = ['# Changelog']; +const invalid = [ + `foo + +# Changelog`, + `> Hi There! + +# Changelog`, +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/__snapshots__/test.js.snap new file mode 100644 index 000000000..9085178b6 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/__snapshots__/test.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "# Changelog + +# Changelog", + "output": Array [ + Object { + "column": null, + "fatal": false, + "line": null, + "location": Object { + "end": Object { + "column": null, + "line": null, + }, + "start": Object { + "column": null, + "line": null, + }, + }, + "reason": "Change log must contain one top level heading (2 found).", + "ruleId": "changelog-heading-1-num-occurrences", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/index.js b/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/index.js new file mode 100644 index 000000000..643ec845a --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/index.js @@ -0,0 +1,12 @@ +const rule = require('unified-lint-rule'); +const select = require('unist-util-select'); + +const validate = (ast, file) => { + const numberOfNodes = select(ast, 'heading[depth=1]').length; + + if (numberOfNodes > 1) { + file.message(`Change log must contain one top level heading (${numberOfNodes} found).`); + } +}; + +module.exports = rule('remark-lint:changelog-heading-1-num-occurrences', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/test.js b/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/test.js new file mode 100644 index 000000000..5482d4cc7 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-num-occurrences/test.js @@ -0,0 +1,16 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = ['# Changelog']; + +const invalid = [ + `# Changelog + +# Changelog`, +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-1-text/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-1-text/__snapshots__/test.js.snap new file mode 100644 index 000000000..f14c06e37 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-text/__snapshots__/test.js.snap @@ -0,0 +1,91 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "# Change Log", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 13, + "line": 1, + "offset": 12, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Top level heading must say “Changelog” (“Change Log” found).", + "ruleId": "changelog-heading-1-text", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "# Change Log", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 14, + "line": 1, + "offset": 13, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Top level heading must say “Changelog” (“Change Log” found).", + "ruleId": "changelog-heading-1-text", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #2 fails 1`] = ` +Object { + "input": "# Changeee Log", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 16, + "line": 1, + "offset": 15, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Top level heading must say “Changelog” (“Changeee Log” found).", + "ruleId": "changelog-heading-1-text", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-1-text/index.js b/packages/changelog-lint/rules/changelog-heading-1-text/index.js new file mode 100644 index 000000000..497763c33 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-text/index.js @@ -0,0 +1,20 @@ +const rule = require('unified-lint-rule'); +const visit = require('unist-util-visit'); +const toString = require('nlcst-to-string'); + +const validate = (ast, file) => { + visit( + ast, + node => node.type === 'heading' && node.depth === 1, + node => { + const expected = 'Changelog'; + const actual = toString(node); + + if (actual !== expected) { + file.message(`Top level heading must say “${expected}” (“${actual}” found).`, node); + } + }, + ); +}; + +module.exports = rule('remark-lint:changelog-heading-1-text', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-1-text/test.js b/packages/changelog-lint/rules/changelog-heading-1-text/test.js new file mode 100644 index 000000000..1d40aceb8 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-1-text/test.js @@ -0,0 +1,11 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = ['# Changelog']; +const invalid = ['# Change Log', '# Change Log', '# Changeee Log']; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-2-dash/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-2-dash/__snapshots__/test.js.snap new file mode 100644 index 000000000..e8ea59068 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-dash/__snapshots__/test.js.snap @@ -0,0 +1,211 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "## 1.3.2 -2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 21, + "line": 1, + "offset": 20, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "## 1.3.2-2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 20, + "line": 1, + "offset": 19, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #2 fails 1`] = ` +Object { + "input": "## 1.3.2 - 2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 23, + "line": 1, + "offset": 22, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #3 fails 1`] = ` +Object { + "input": "## 1.3.2 - 2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 24, + "line": 1, + "offset": 23, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #4 fails 1`] = ` +Object { + "input": "## 1.3.2 — 2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 22, + "line": 1, + "offset": 21, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #5 fails 1`] = ` +Object { + "input": "## 1.3.2 -- 2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 23, + "line": 1, + "offset": 22, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #6 fails 1`] = ` +Object { + "input": "## 1.3.2 2010-02-02", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 20, + "line": 1, + "offset": 19, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Second level heading contains a dash “-“ separated by one space on each side.", + "ruleId": "changelog-heading-2-dash", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-2-dash/index.js b/packages/changelog-lint/rules/changelog-heading-2-dash/index.js new file mode 100644 index 000000000..be62d64d5 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-dash/index.js @@ -0,0 +1,32 @@ +const rule = require('unified-lint-rule'); +const visit = require('unist-util-visit'); +const toString = require('nlcst-to-string'); + +const isUnreleasedHeading = node => toString(node) === 'Unreleased'; + +const hasDash = node => { + const splitString = toString(node).split(' - '); + + const hasDashWithOneSpace = splitString.length === 2; + const version = splitString[0]; + const date = splitString[1]; + + return hasDashWithOneSpace && !version.endsWith(' ') && !date.startsWith(' '); +}; + +const validate = (ast, file) => { + visit( + ast, + node => node.type === 'heading' && node.depth === 2, + node => { + if (!isUnreleasedHeading(node) && !hasDash(node)) { + file.message( + 'Second level heading contains a dash “-“ separated by one space on each side.', + node, + ); + } + }, + ); +}; + +module.exports = rule('remark-lint:changelog-heading-2-dash', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-2-dash/test.js b/packages/changelog-lint/rules/changelog-heading-2-dash/test.js new file mode 100644 index 000000000..ca7e7c9e5 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-dash/test.js @@ -0,0 +1,26 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = [ + '## Unreleased', + '## 1.3.2 - 2010-02-02', + `## Unreleased + +## 1.3.2 - 2010-02-02`, +]; + +const invalid = [ + '## 1.3.2 -2010-02-02', + '## 1.3.2-2010-02-02', + '## 1.3.2 - 2010-02-02', + '## 1.3.2 - 2010-02-02', + '## 1.3.2 — 2010-02-02', + '## 1.3.2 -- 2010-02-02', + '## 1.3.2 2010-02-02', +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/__snapshots__/test.js.snap new file mode 100644 index 000000000..d15431b31 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/__snapshots__/test.js.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "## UNRELEASED", + "output": Array [ + Object { + "column": null, + "fatal": false, + "line": null, + "location": Object { + "end": Object { + "column": null, + "line": null, + }, + "start": Object { + "column": null, + "line": null, + }, + }, + "reason": "Changelog must contain one second level heading that says “Unreleased“ (0 found).", + "ruleId": "changelog-heading-2-unreleased-num-occurrences", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "## Unreleased + +## Unreleased", + "output": Array [ + Object { + "column": null, + "fatal": false, + "line": null, + "location": Object { + "end": Object { + "column": null, + "line": null, + }, + "start": Object { + "column": null, + "line": null, + }, + }, + "reason": "Changelog must contain one second level heading that says “Unreleased“ (2 found).", + "ruleId": "changelog-heading-2-unreleased-num-occurrences", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/index.js b/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/index.js new file mode 100644 index 000000000..d6a77db15 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/index.js @@ -0,0 +1,14 @@ +const rule = require('unified-lint-rule'); +const select = require('unist-util-select'); + +const validate = (ast, file) => { + const numberOfNodes = select(ast, 'heading[depth=2] > text[value="Unreleased"]').length; + + if (numberOfNodes !== 1) { + file.message( + `Changelog must contain one second level heading that says “Unreleased“ (${numberOfNodes} found).`, + ); + } +}; + +module.exports = rule('remark-lint:changelog-heading-2-unreleased-num-occurrences', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/test.js b/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/test.js new file mode 100644 index 000000000..5b5003a2d --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-unreleased-num-occurrences/test.js @@ -0,0 +1,17 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = ['## Unreleased']; + +const invalid = [ + '## UNRELEASED', + `## Unreleased + +## Unreleased`, +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-2-valid-date/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-2-valid-date/__snapshots__/test.js.snap new file mode 100644 index 000000000..1b9f2a543 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-valid-date/__snapshots__/test.js.snap @@ -0,0 +1,211 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "## 2012-03-90", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 14, + "line": 1, + "offset": 13, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“2012-03-90“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "## 1.1.1 - 20133-01-01", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 23, + "line": 1, + "offset": 22, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.1.1 - 20133-01-01“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #2 fails 1`] = ` +Object { + "input": "## 1.1.1 - 2013-13-01", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 22, + "line": 1, + "offset": 21, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.1.1 - 2013-13-01“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #3 fails 1`] = ` +Object { + "input": "## 1.1.1 - 2013-12-32", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 22, + "line": 1, + "offset": 21, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.1.1 - 2013-12-32“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #4 fails 1`] = ` +Object { + "input": "## 1.1.1 - 2013-1-20", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 21, + "line": 1, + "offset": 20, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.1.1 - 2013-1-20“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #5 fails 1`] = ` +Object { + "input": "## 1.1.1 - 2013-01-1", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 21, + "line": 1, + "offset": 20, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.1.1 - 2013-01-1“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #6 fails 1`] = ` +Object { + "input": "## 1.1.1 - 2013-1-1", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 20, + "line": 1, + "offset": 19, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.1.1 - 2013-1-1“ does not end with a valid date in the format YYYY-MM-DD.", + "ruleId": "changelog-heading-2-valid-date", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-2-valid-date/index.js b/packages/changelog-lint/rules/changelog-heading-2-valid-date/index.js new file mode 100644 index 000000000..d146c3d27 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-valid-date/index.js @@ -0,0 +1,41 @@ +const rule = require('unified-lint-rule'); +const visit = require('unist-util-visit'); +const toString = require('nlcst-to-string'); + +const isUnreleasedHeading = node => toString(node) === 'Unreleased'; + +const isValidDate = node => { + const date = toString(node).split('-'); + const len = date.length; + + const day = date[len - 1]; + const month = date[len - 2]; + const year = date[len - 3] && date[len - 3].trim(); + + return ( + parseInt(day, 10) >= 0 && + parseInt(day, 10) <= 31 && + parseInt(month, 10) >= 1 && + parseInt(month, 10) <= 12 && + day.length === 2 && + month.length === 2 && + year.length === 4 + ); +}; + +const validate = (ast, file) => { + visit( + ast, + node => node.type === 'heading' && node.depth === 2, + node => { + if (!isUnreleasedHeading(node) && !isValidDate(node)) { + file.message( + `“${toString(node)}“ does not end with a valid date in the format YYYY-MM-DD.`, + node, + ); + } + }, + ); +}; + +module.exports = rule('remark-lint:changelog-heading-2-valid-date', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-2-valid-date/test.js b/packages/changelog-lint/rules/changelog-heading-2-valid-date/test.js new file mode 100644 index 000000000..cf4f57ac9 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-valid-date/test.js @@ -0,0 +1,20 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = ['## 2012-03-03']; + +const invalid = [ + '## 2012-03-90', + '## 1.1.1 - 20133-01-01', + '## 1.1.1 - 2013-13-01', + '## 1.1.1 - 2013-12-32', + '## 1.1.1 - 2013-1-20', + '## 1.1.1 - 2013-01-1', + '## 1.1.1 - 2013-1-1', +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-2-valid-semver/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-2-valid-semver/__snapshots__/test.js.snap new file mode 100644 index 000000000..94462ce8c --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-valid-semver/__snapshots__/test.js.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "## 1.2 - ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 10, + "line": 1, + "offset": 9, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.2“ is not a valid SemVer version.", + "ruleId": "changelog-heading-2-valid-semver", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "## 1.a.0 -", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 11, + "line": 1, + "offset": 10, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "“1.a.0“ is not a valid SemVer version.", + "ruleId": "changelog-heading-2-valid-semver", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-2-valid-semver/index.js b/packages/changelog-lint/rules/changelog-heading-2-valid-semver/index.js new file mode 100644 index 000000000..4a46ff1d8 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-valid-semver/index.js @@ -0,0 +1,25 @@ +const rule = require('unified-lint-rule'); +const visit = require('unist-util-visit'); +const toString = require('nlcst-to-string'); +const isSemVer = require('is-semver'); + +const isUnreleasedHeading = node => toString(node) === 'Unreleased'; + +const getSemVerRange = node => + toString(node) + .split('-')[0] + .trim(); + +const validate = (ast, file) => { + visit( + ast, + node => node.type === 'heading' && node.depth === 2, + node => { + if (!isUnreleasedHeading(node) && !isSemVer(getSemVerRange(node))) { + file.message(`“${getSemVerRange(node)}“ is not a valid SemVer version.`, node); + } + }, + ); +}; + +module.exports = rule('remark-lint:changelog-heading-2-valid-semver', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-2-valid-semver/test.js b/packages/changelog-lint/rules/changelog-heading-2-valid-semver/test.js new file mode 100644 index 000000000..e1ba57409 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-2-valid-semver/test.js @@ -0,0 +1,19 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = [ + '## Unreleased', + '## 1.3.2 - ', + '## 1.3.2-alpha.0 - ', + `## Unreleased + +## 1.3.2 - `, +]; + +const invalid = ['## 1.2 - ', '## 1.a.0 -']; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/__snapshots__/test.js.snap new file mode 100644 index 000000000..35c1fdc49 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/__snapshots__/test.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "## 1.2.3 - 2010-02-02 + +### Foo + +### Bar + +### Foo", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 7, + "location": Object { + "end": Object { + "column": 8, + "line": 7, + "offset": 48, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 7, + "offset": 41, + }, + }, + "reason": "Third-level heading “Foo” appears twice within “1.2.3 - 2010-02-02”.", + "ruleId": "changelog-heading-3-duplicate-sections", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/index.js b/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/index.js new file mode 100644 index 000000000..e6912c61d --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/index.js @@ -0,0 +1,34 @@ +const rule = require('unified-lint-rule'); +const visit = require('unist-util-visit'); +const toString = require('nlcst-to-string'); + +const isHeading2 = node => node.type === 'heading' && node.depth === 2; +const isHeading3 = node => node.type === 'heading' && node.depth === 3; + +const validate = (ast, file) => { + visit(ast, isHeading2, (node, index) => { + const heading3List = {}; + let visitingIndex = index + 1; + let nodeToVisit = ast.children[visitingIndex]; + + while (nodeToVisit && !isHeading2(nodeToVisit)) { + if (isHeading3(nodeToVisit)) { + if (heading3List[toString(nodeToVisit)]) { + file.message( + `Third-level heading “${toString( + nodeToVisit, + )}” appears twice within “${toString(node)}”.`, + nodeToVisit, + ); + } else { + heading3List[toString(nodeToVisit)] = true; + } + } + + visitingIndex += 1; + nodeToVisit = ast.children[visitingIndex]; + } + }); +}; + +module.exports = rule('remark-lint:changelog-heading-3-duplicate-sections', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/test.js b/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/test.js new file mode 100644 index 000000000..5d22f5779 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-3-duplicate-sections/test.js @@ -0,0 +1,27 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = [ + '### Foo', + `### Foo + +### Bar + +### Baz`, +]; + +const invalid = [ + `## 1.2.3 - 2010-02-02 + +### Foo + +### Bar + +### Foo`, +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-heading-3-text-contents/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-heading-3-text-contents/__snapshots__/test.js.snap new file mode 100644 index 000000000..ffa1d0bac --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-3-text-contents/__snapshots__/test.js.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "### Add", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 8, + "line": 1, + "offset": 7, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Third level heading must say one of the following: “Added, Changed, Deprecated, Removed, Fixed, Security” (“Add” found).", + "ruleId": "changelog-heading-3-text-contents", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "### Foo", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 8, + "line": 1, + "offset": 7, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "Third level heading must say one of the following: “Added, Changed, Deprecated, Removed, Fixed, Security” (“Foo” found).", + "ruleId": "changelog-heading-3-text-contents", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-heading-3-text-contents/index.js b/packages/changelog-lint/rules/changelog-heading-3-text-contents/index.js new file mode 100644 index 000000000..073ed04d7 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-3-text-contents/index.js @@ -0,0 +1,23 @@ +const rule = require('unified-lint-rule'); +const select = require('unist-util-select'); +const toString = require('nlcst-to-string'); + +const validate = (ast, file) => { + const headings = select(ast, 'heading[depth=3]'); + + headings.forEach(node => { + const expected = ['Added', 'Changed', 'Deprecated', 'Removed', 'Fixed', 'Security']; + const actual = toString(node); + + if (!expected.includes(actual)) { + file.message( + `Third level heading must say one of the following: “${expected.join( + ', ', + )}” (“${actual}” found).`, + node, + ); + } + }); +}; + +module.exports = rule('remark-lint:changelog-heading-3-text-contents', validate); diff --git a/packages/changelog-lint/rules/changelog-heading-3-text-contents/test.js b/packages/changelog-lint/rules/changelog-heading-3-text-contents/test.js new file mode 100644 index 000000000..7ee71e153 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-heading-3-text-contents/test.js @@ -0,0 +1,19 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = [ + '### Added', + '### Changed', + '### Deprecated', + '### Removed', + '### Fixed', + '### Security', +]; + +const invalid = ['### Add', '### Foo']; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/rules/changelog-list-semver-severity/__snapshots__/test.js.snap b/packages/changelog-lint/rules/changelog-list-semver-severity/__snapshots__/test.js.snap new file mode 100644 index 000000000..e31890db8 --- /dev/null +++ b/packages/changelog-lint/rules/changelog-list-semver-severity/__snapshots__/test.js.snap @@ -0,0 +1,271 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`invalid case #0 fails 1`] = ` +Object { + "input": "* Major ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 9, + "line": 1, + "offset": 8, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #1 fails 1`] = ` +Object { + "input": "* Minor ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 9, + "line": 1, + "offset": 8, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #2 fails 1`] = ` +Object { + "input": "* Patch ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 9, + "line": 1, + "offset": 8, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #3 fails 1`] = ` +Object { + "input": "* [Majorr] ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 12, + "line": 1, + "offset": 11, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #4 fails 1`] = ` +Object { + "input": "* [Minorr] ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 12, + "line": 1, + "offset": 11, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #5 fails 1`] = ` +Object { + "input": "* [Patchh] ", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 12, + "line": 1, + "offset": 11, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #6 fails 1`] = ` +Object { + "input": "* [Major]", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 10, + "line": 1, + "offset": 9, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #7 fails 1`] = ` +Object { + "input": "* [Minor]", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 10, + "line": 1, + "offset": 9, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; + +exports[`invalid case #8 fails 1`] = ` +Object { + "input": "* [Patch]", + "output": Array [ + Object { + "column": 1, + "fatal": false, + "line": 1, + "location": Object { + "end": Object { + "column": 10, + "line": 1, + "offset": 9, + }, + "indent": Array [], + "start": Object { + "column": 1, + "line": 1, + "offset": 0, + }, + }, + "reason": "List items must start with \`[Major]\`, \`[Minor]\`, or \`[Patch]\`. There must be a space after the severity.", + "ruleId": "changelog-list-semver-severity", + "source": "remark-lint", + "stack": null, + }, + ], +} +`; diff --git a/packages/changelog-lint/rules/changelog-list-semver-severity/index.js b/packages/changelog-lint/rules/changelog-list-semver-severity/index.js new file mode 100644 index 000000000..4d643809e --- /dev/null +++ b/packages/changelog-lint/rules/changelog-list-semver-severity/index.js @@ -0,0 +1,27 @@ +const rule = require('unified-lint-rule'); +const select = require('unist-util-select'); +const toString = require('nlcst-to-string'); + +const includesSquareBrackets = node => select(node, 'linkReference').length > 0; + +const startsWithSemVer = node => { + const actual = toString(node); + return ( + actual.startsWith('Major ') || actual.startsWith('Minor ') || actual.startsWith('Patch ') + ); +}; + +const validate = (ast, file) => { + const headings = select(ast, 'listItem'); + + headings.forEach(node => { + if (!includesSquareBrackets(node) || !startsWithSemVer(node)) { + file.message( + 'List items must start with `[Major]`, `[Minor]`, or `[Patch]`. There must be a space after the severity.', + node, + ); + } + }); +}; + +module.exports = rule('remark-lint:changelog-list-semver-severity', validate); diff --git a/packages/changelog-lint/rules/changelog-list-semver-severity/test.js b/packages/changelog-lint/rules/changelog-list-semver-severity/test.js new file mode 100644 index 000000000..c8130ba5d --- /dev/null +++ b/packages/changelog-lint/rules/changelog-list-semver-severity/test.js @@ -0,0 +1,29 @@ +const test = require('../../test-utils'); +const rule = require('./'); + +const valid = [ + '* [Major] ', + '* [Minor] ', + '* [Patch] ', + '* [Major] Foo', + '* [Minor] Foo', + '* [Patch] Foo', +]; + +const invalid = [ + '* Major ', + '* Minor ', + '* Patch ', + '* [Majorr] ', + '* [Minorr] ', + '* [Patchh] ', + '* [Major]', + '* [Minor]', + '* [Patch]', +]; + +test({ + rule, + valid, + invalid, +}); diff --git a/packages/changelog-lint/test-utils/index.js b/packages/changelog-lint/test-utils/index.js new file mode 100644 index 000000000..8bcc860cb --- /dev/null +++ b/packages/changelog-lint/test-utils/index.js @@ -0,0 +1,59 @@ +const remark = require('remark'); +const reporterJSON = require('vfile-reporter-json'); + +module.exports = ({ rule, invalid, valid }) => { + const lint = contents => + JSON.parse( + reporterJSON( + remark() + .use(rule) + .processSync(contents), + ), + )[0]; + + expect.extend({ + toPassLint(received) { + const results = lint(received); + const passed = results.messages.length === 0; + + if (passed) { + return { + message: () => `Expected \`${received}\` not to pass the linter.`, + pass: true, + }; + } + + return { + message: () => `Expected the following to pass the linter: + +\`\`\`\ + +${received} +\`\`\` + +It failed with the following errors: + +${results.messages.map(error => `• [${error.ruleId}] ${error.reason}\n`)} + `, + pass: false, + }; + }, + }); + + invalid.forEach((scenario, i) => { + test(`invalid case #${i} fails`, () => { + expect(scenario).not.toPassLint(); + + expect({ + input: scenario, + output: lint(scenario).messages, + }).toMatchSnapshot(); + }); + }); + + valid.forEach((scenario, i) => { + test(`valid case #${i} passes`, () => { + expect(scenario).toPassLint(); + }); + }); +}; diff --git a/packages/gatsby-transformer-thumbprint-atomic/gatsby-node.js b/packages/gatsby-transformer-thumbprint-atomic/gatsby-node.js new file mode 100644 index 000000000..f38dd2812 --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-atomic/gatsby-node.js @@ -0,0 +1,50 @@ +const sass = require('node-sass'); +const crypto = require('crypto'); +const parseAst = require('./parse-ast'); + +const createCssNode = ({ node, actions }) => { + const { createNode, createParentChildLink } = actions; + + // We convert to CSS first since we prefer the real values over tokens. + const css = sass + .renderSync({ + file: node.absolutePath, + includePaths: ['../..'], + }) + .css.toString(); + + const cssNode = { + id: `${node.absolutePath} >>> ThumbprintAtomicClasses`, + parent: node.id, + atomicFileName: node.name, + atomicClasses: parseAst(css), + children: [], + internal: { + contentDigest: crypto + .createHash('md5') + .update(css) + .digest('hex'), + type: 'ThumbprintAtomicClasses', + }, + }; + + createNode(cssNode); + createParentChildLink({ parent: node, child: cssNode }); +}; + +exports.onCreateNode = ({ node, actions }) => { + // We only care about files within Thumbprint Atomic. + if ( + !node.extension || + !node.relativePath || + node.relativePath.startsWith('thumbprint-atomic/src/packages/') === false + ) { + return; + } + + // We only create nodes for the SCSS files because the Markdown files are handled by + // `gatsby-plugin-remark`. + if (node.extension === 'scss') { + createCssNode({ node, actions }); + } +}; diff --git a/packages/gatsby-transformer-thumbprint-atomic/package.json b/packages/gatsby-transformer-thumbprint-atomic/package.json new file mode 100644 index 000000000..d25ab1ca7 --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-atomic/package.json @@ -0,0 +1,13 @@ +{ + "name": "@thumbtack/gatsby-transformer-thumbprint-atomic", + "version": "0.0.6", + "private": true, + "dependencies": { + "gonzales-pe": "^4.2.3", + "lodash": "^4.17.10", + "prettier": "1.14.3" + }, + "peerDependencies": { + "node-sass": "^4.5.2" + } +} diff --git a/packages/gatsby-transformer-thumbprint-atomic/parse-ast.js b/packages/gatsby-transformer-thumbprint-atomic/parse-ast.js new file mode 100644 index 000000000..818bd9beb --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-atomic/parse-ast.js @@ -0,0 +1,108 @@ +const gonzales = require('gonzales-pe'); +const prettier = require('prettier'); +const { flatten } = require('lodash'); + +/** + * Ensures that the `atrule` node is for a media query. + */ +const isAtRuleAMediaQuery = atruleNode => + atruleNode.first('atkeyword').first('ident').content === 'media'; + +/** + * Returns an array of rules such as `[ 'background-color: red !important;' ]`. + */ +const getBlockContent = blockNode => { + const declarations = []; + + blockNode.traverseByType('declaration', n => { + // Run through prettier to unminify the source CSS. + // https://github.com/tonyganch/gonzales-pe/blob/dev/docs/node-types.md#declaration + declarations.push(prettier.format(n.toString(), { parser: 'css' }).replace('\n', '')); + }); + + return declarations; +}; + +const getRulesetContent = rulesetNode => { + const data = { + selectors: [], + declarations: [], + }; + + // A ruleset contains a class (`.foo`) and `block` contains the rules. + rulesetNode.traverse(n => { + switch (n.type) { + case 'selector': + // Regex changes `.s\:bg-right` to `.s:bg-right`. + // https://github.com/tonyganch/gonzales-pe/blob/dev/docs/node-types.md#class + data.selectors.push(n.toString().replace(/\\/g, '')); + break; + case 'block': + // https://github.com/tonyganch/gonzales-pe/blob/dev/docs/node-types.md#block + data.declarations = getBlockContent(n); + break; + default: + break; + } + }); + + return data; +}; + +/** + * `atrule` nodes are used for media queries (among other things). There are usually `ruleset` + * nodes within them. + * + * Returns an array of objects. + */ +const getAtruleContent = atruleNode => { + const classesWithinMediaQueries = []; + + if (isAtRuleAMediaQuery(atruleNode)) { + atruleNode.traverse(node => { + if (node.is('ruleset')) { + classesWithinMediaQueries.push({ + media: atruleNode.first('parentheses').toString(), + // Since this is a ruleset, we can reuse the function that is run for nodes + // that aren't within media queries. + ...getRulesetContent(node), + }); + } + }); + } + + return classesWithinMediaQueries; +}; + +/** + * Returns an array of objects that look like this: + * + * ``` + * { + * media: '(min-width: 701px)', + * selectors: ['.m:br-bottom'], + * declarations: [ + * 'border-top-left-radius: 0 !important;', + * 'border-top-right-radius: 0 !important;' + * ] + * } + * ``` + */ +module.exports = css => { + const classes = []; + const parseTree = gonzales.parse(css, { syntax: 'css' }); + + // Starting at the top node, we only care about `ruleset` and `atrule` nodes. These will give + // us a list of classes as well as information about media queries. + parseTree.forEach(node => { + if (node.is('ruleset')) { + // https://github.com/tonyganch/gonzales-pe/blob/dev/docs/node-types.md#ruleset + classes.push(getRulesetContent(node)); + } else if (node.is('atrule')) { + // https://github.com/tonyganch/gonzales-pe/blob/dev/docs/node-types.md#atrule + classes.push(getAtruleContent(node)); + } + }); + + return flatten(classes); +}; diff --git a/packages/gatsby-transformer-thumbprint-components/create-package-json-node.js b/packages/gatsby-transformer-thumbprint-components/create-package-json-node.js new file mode 100644 index 000000000..88424e9ae --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-components/create-package-json-node.js @@ -0,0 +1,22 @@ +const crypto = require('crypto'); + +module.exports = async ({ node, loadNodeContent }) => { + const content = await loadNodeContent(node); + const parsedContent = JSON.parse(content); + + const jsonNode = Object.assign({}, parsedContent, { + id: `${node.id} >>> ThumbprintComponentPackageJson`, + _dir: node.dir, + children: [], + parent: node.id, + internal: { + contentDigest: crypto + .createHash('md5') + .update(JSON.stringify(parsedContent)) + .digest('hex'), + type: 'ThumbprintComponentPackageJson', + }, + }); + + return jsonNode; +}; diff --git a/packages/gatsby-transformer-thumbprint-components/gatsby-node.js b/packages/gatsby-transformer-thumbprint-components/gatsby-node.js new file mode 100644 index 000000000..b8a4c989a --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-components/gatsby-node.js @@ -0,0 +1,26 @@ +const createPackageJsonNode = require('./create-package-json-node'); + +const isPackageJson = node => + node.internal.mediaType === 'application/json' && + node.name === 'package' && + node.extension === 'json' && + !node.relativePath.includes('/node_modules/'); + +exports.onCreateNode = async ({ node, loadNodeContent, actions }) => { + const { createNode, createParentChildLink } = actions; + + let newNode; + + // We only care about Thumbprint Components `package.json` and "kit" files. All `package.json` + // files point to a "Kit" Yaml file that contains platform-agnostic information about a + // component. Two `package.json` files that point to the same kit file will be grouped together + // in the documentation. + if (isPackageJson(node)) { + newNode = await createPackageJsonNode({ node, loadNodeContent }); + } else { + return; + } + + createNode(newNode); + createParentChildLink({ parent: node, child: newNode }); +}; diff --git a/packages/gatsby-transformer-thumbprint-components/package.json b/packages/gatsby-transformer-thumbprint-components/package.json new file mode 100644 index 000000000..41af61ab0 --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-components/package.json @@ -0,0 +1,5 @@ +{ + "name": "@thumbtack/gatsby-transformer-thumbprint-components", + "version": "0.0.6", + "private": true +} diff --git a/packages/gatsby-transformer-thumbprint-tokens/gatsby-node.js b/packages/gatsby-transformer-thumbprint-tokens/gatsby-node.js new file mode 100644 index 000000000..6180aa25e --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-tokens/gatsby-node.js @@ -0,0 +1,48 @@ +const { map, isNumber, toString } = require('lodash'); +const crypto = require('crypto'); +const slugify = require('slugify'); + +const onCreateNode = async ({ node, actions, loadNodeContent }) => { + const { createNode, createParentChildLink } = actions; + + // We only care about JSON content from Thumbprint Tokens. + if ( + node.internal.mediaType !== 'application/json' || + node.relativePath.startsWith('thumbprint-tokens/src/tokens/') === false + ) { + return; + } + + const content = await loadNodeContent(node); + const parsedContent = JSON.parse(content); + + parsedContent.slug = slugify(parsedContent.name, { lower: true }); + + // Convert the numerical token values to strings. This is needed because Gatsby isn't able + // to handle values of different types. https://github.com/gatsbyjs/gatsby/issues/2404 + parsedContent.tokens = map(parsedContent.tokens, token => { + const newToken = token; + if (isNumber(token.value)) { + newToken.value = toString(token.value); + } + return newToken; + }); + + const jsonNode = Object.assign({}, parsedContent, { + id: `${node.id} >>> ThumbprintTokens`, + children: [], + parent: node.id, + internal: { + contentDigest: crypto + .createHash('md5') + .update(JSON.stringify(content)) + .digest('hex'), + type: 'ThumbprintTokens', + }, + }); + + createNode(jsonNode); + createParentChildLink({ parent: node, child: jsonNode }); +}; + +exports.onCreateNode = onCreateNode; diff --git a/packages/gatsby-transformer-thumbprint-tokens/package.json b/packages/gatsby-transformer-thumbprint-tokens/package.json new file mode 100644 index 000000000..84740f471 --- /dev/null +++ b/packages/gatsby-transformer-thumbprint-tokens/package.json @@ -0,0 +1,10 @@ +{ + "name": "@thumbtack/gatsby-transformer-thumbprint-tokens", + "version": "0.0.5", + "private": true, + "license": "UNLICENSED", + "dependencies": { + "lodash": "^4.17.10", + "slugify": "^1.3.3" + } +} diff --git a/packages/thumbprint-atomic/CHANGELOG.md b/packages/thumbprint-atomic/CHANGELOG.md new file mode 100644 index 000000000..bc8b43105 --- /dev/null +++ b/packages/thumbprint-atomic/CHANGELOG.md @@ -0,0 +1,151 @@ +# Changelog + +## Unreleased + +## 3.1.1 - 2019-01-24 + +### Changed + +- [Patch] Internal shuffle of files. This does not affect consumers of Thumbprint Atomic. + +## 3.1.0 - 2019-01-04 + +### Added + +- [Minor] Add `color-inherit` class to `color` package in order to replace and deprecate `tp-link--inherit`. (#1412) + +## 3.0.0 - 2018-12-14 + +### Removed + +- [Major] Remove `manifest.json` from `dist`. This is a breaking change but only affects users that were importing the `manifest.json` file. + +## 2.2.5 - 2018-11-27 + +### Changed + +- [Patch] Upgrade version of Thumbprint Tokens. + +## 2.2.4 - 2018-11-14 + +### Changed + +- [Patch] Third attempt to publish to `@thumbtack` org on NPM. + +## 2.2.2 - 2018-11-14 + +### Changed + +- [Patch] Second attempt to publish to `@thumbtack` org on NPM. + +## 2.2.1 - 2018-11-14 + +### Changed + +- [Patch] Publish to `@thumbtack` org on NPM. + +## 2.2.0 - 2018-10-22 + +### Added + +- [Minor] Add aspect ratio classes and documentation. + +### Changed + +- [Patch] Add `%` to unitless `flex-basis` for IE 11 compatibility (#1273). + +## 2.1.1 - 2018-09-12 + +### Changed + +- [Patch] Upgrade version of Prettier and Thumbprint Tokens. + +## 2.1.0 - 2018-09-04 + +### Added + +- [Patch] Add snapshot testing to Thumbprint Atomic. (#1129) +- [Minor] Add redundant `*0` scale classes to `cooordinates` and `height` packages so that the `0` value is available to both the scale and literal value classes. (#1190) + +## 2.0.0 - 2018-08-28 + +### Changed + +- [Major] Changed 6 height classes and their responsive variations that were using the old `/` syntax, e.g., `h-1/4` is now `h-25`. This conversion aligns them with the syntax as other percentage classes. + +### Fixed + +- [Patch] Using `css-mqpacker` to group media queries together to prevent specificity overrides. (#1165) +- [Patch] Because `css-mqpacker` undoes any previously applied minification, `node-sass` options `--source-map true --output-style compressed` were removed and replaced with `cssnano` to minify along with the `--map` flag to generate the sourcemap. + +## 1.0.0 - 2018-08-22 + +### Changed + +- [Major] Changed responsive class syntax from colon to underscore due to incompatibility with the `composes` functionality in CSS Modules. For example, `s:pa3` is now `s_pa3`. + +### Added + +- [Patch] Added mising `%` sign from grid `col-7` classes. + +## 0.3.3 - 2018-08-17 + +### Added + +- [Patch] Swapped hard-coded values for spacer tokens in `coordinates`, `grid`, `height`, `margin`, `max-width`, `padding`, and `width` packages. +- [Patch] Swapped hard-coded values for border radius tokens in `border-radius`. + +### Changed + +- [Patch] Use font weights from Thumbprint Tokens. + +## 0.3.2 - 2018-08-07 + +### Changed + +- [Major] Removing fractions from width classes, using `w-N` instead, e.g. `w-30` for `30%`. + +## 0.3.1 - 2018-08-03 + +### Changed + +- [Patch] Separating hover styles into each line instead of two classes sharing declaration. + +## 0.3.0 - 2018-08-02 + +### Added + +- [Minor] Added `grid` package to atomic. + +### Changed + +- [Minor] Hardcode percentages in `grid` package because IE Edge doesn't properly calculate `calc`. + +### Fixed + +- [Patch] Add missing `!important` to `truncate` package. +- [Patch] Update examples with `grid` classes instead of `tp-grid`. +- [Patch] Re-add previously removed `min-width/height` properites, found situation where they are needed. + +## 0.2.1 - 2018-07-26 + +### Changed + +- [Patch] Added `@thumbprint` dependencies accidentally removed from `flexbox` package. +- [Patch] Remove extra space between `@thumbprint` dependencies in `display` package. + +## 0.2.0 - 2018-07-25 + +### Added + +- [Minor] Added `flex-1`, `flex-2`, and `flex-3` responsive classes. +- [Minor] Remove `min-width/height` properites, cannot reproduce bugs in browsers that previously required it. +- [Minor] Publish a manifest that can be consumed by other packages to get a list of the class names in each of the sub-packages. +- [Minor] Added Tachyons-style `hover-` classes for colors and backgrounds. +- [Minor] Remove items we don't support: `border-radius: 12px`, `border-width: 5px`, widest `max-width` uses token. + +## 0.1.0 - 2018-07-23 + +### Added + +- [Minor] Created package for Thumbprint Atomic. diff --git a/packages/thumbprint-atomic/__snapshots__/test.js.snap b/packages/thumbprint-atomic/__snapshots__/test.js.snap new file mode 100644 index 000000000..cd6d0d5b2 --- /dev/null +++ b/packages/thumbprint-atomic/__snapshots__/test.js.snap @@ -0,0 +1,5923 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`compiles correctly 1`] = ` +".aspect-ratio { + height: 0 !important; + position: relative !important; +} +.aspect-ratio-16x9 { + padding-bottom: 56.25% !important; +} +.aspect-ratio-8x5 { + padding-bottom: 62.5% !important; +} +.aspect-ratio-7x3 { + padding-bottom: 42.86% !important; +} +.aspect-ratio-1x1 { + padding-bottom: 100% !important; +} +.aspect-ratio-object { + position: absolute !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; +} +.bg-center { + background-position: 50% !important; +} +.bg-center, +.bg-top { + background-repeat: no-repeat !important; +} +.bg-top { + background-position: top !important; +} +.bg-right { + background-position: 100% !important; +} +.bg-bottom, +.bg-right { + background-repeat: no-repeat !important; +} +.bg-bottom { + background-position: bottom !important; +} +.bg-left { + background-repeat: no-repeat !important; + background-position: 0 !important; +} +.cover { + background-size: cover !important; +} +.contain { + background-size: contain !important; +} +.ba { + border-style: solid !important; + border-width: 1px !important; +} +.bt { + border-top-style: solid !important; + border-top-width: 1px !important; +} +.br { + border-right-style: solid !important; + border-right-width: 1px !important; +} +.bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; +} +.bl { + border-left-style: solid !important; + border-left-width: 1px !important; +} +.bn { + border-style: none !important; + border-width: 0 !important; +} +.b-black { + border-color: #2f3033 !important; +} +.b-black-300 { + border-color: #676d73 !important; +} +.b-white { + border-color: #fff !important; +} +.b-blue { + border-color: #009fd9 !important; +} +.b-indigo { + border-color: #5968e2 !important; +} +.b-purple { + border-color: #a97ff0 !important; +} +.b-green { + border-color: #2db783 !important; +} +.b-yellow { + border-color: #febe14 !important; +} +.b-red { + border-color: #ff5a5f !important; +} +.b-gray { + border-color: #d3d4d5 !important; +} +.b-gray-200 { + border-color: #fafafa !important; +} +.b-gray-300 { + border-color: #e9eced !important; +} +.br0 { + border-radius: 0 !important; +} +.br1 { + border-radius: 2px !important; +} +.br2 { + border-radius: 4px !important; +} +.br3 { + border-radius: 6px !important; +} +.br-100 { + border-radius: 50% !important; +} +.br-pill { + border-radius: 9999px !important; +} +.br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} +.br-top { + border-bottom-right-radius: 0 !important; +} +.br-right, +.br-top { + border-bottom-left-radius: 0 !important; +} +.br-right { + border-top-left-radius: 0 !important; +} +.br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} +.b-dotted { + border-style: dotted !important; +} +.b-dashed { + border-style: dashed !important; +} +.b-solid { + border-style: solid !important; +} +.b-none { + border-style: none !important; +} +.bw-0 { + border-width: 0 !important; +} +.bw-1 { + border-width: 1px !important; +} +.bw-2 { + border-width: 2px !important; +} +.bw-3 { + border-width: 3px !important; +} +.bw-4 { + border-width: 4px !important; +} +.bt-0 { + border-top-width: 0 !important; +} +.br-0 { + border-right-width: 0 !important; +} +.bb-0 { + border-bottom-width: 0 !important; +} +.bl-0 { + border-left-width: 0 !important; +} +.color-inherit { + color: inherit !important; +} +.white { + color: #fff !important; +} +.black { + color: #2f3033 !important; +} +.black-300 { + color: #676d73 !important; +} +.blue { + color: #009fd9 !important; +} +.indigo { + color: #5968e2 !important; +} +.purple { + color: #a97ff0 !important; +} +.green { + color: #2db783 !important; +} +.yellow { + color: #febe14 !important; +} +.red { + color: #ff5a5f !important; +} +.gray { + color: #d3d4d5 !important; +} +.gray-200 { + color: #fafafa !important; +} +.gray-300 { + color: #e9eced !important; +} +.bg-white { + background-color: #fff !important; +} +.bg-black { + background-color: #2f3033 !important; +} +.bg-black-300 { + background-color: #676d73 !important; +} +.bg-blue { + background-color: #009fd9 !important; +} +.bg-indigo { + background-color: #5968e2 !important; +} +.bg-purple { + background-color: #a97ff0 !important; +} +.bg-green { + background-color: #2db783 !important; +} +.bg-yellow { + background-color: #febe14 !important; +} +.bg-red { + background-color: #ff5a5f !important; +} +.bg-gray { + background-color: #d3d4d5 !important; +} +.bg-gray-200 { + background-color: #fafafa !important; +} +.bg-gray-300 { + background-color: #e9eced !important; +} +.hover-white:focus, +.hover-white:hover { + color: #fff !important; +} +.hover-black:focus, +.hover-black:hover { + color: #2f3033 !important; +} +.hover-black-300:focus, +.hover-black-300:hover { + color: #676d73 !important; +} +.hover-blue:focus, +.hover-blue:hover { + color: #009fd9 !important; +} +.hover-indigo:focus, +.hover-indigo:hover { + color: #5968e2 !important; +} +.hover-purple:focus, +.hover-purple:hover { + color: #a97ff0 !important; +} +.hover-green:focus, +.hover-green:hover { + color: #2db783 !important; +} +.hover-yellow:focus, +.hover-yellow:hover { + color: #febe14 !important; +} +.hover-red:focus, +.hover-red:hover { + color: #ff5a5f !important; +} +.hover-gray:focus, +.hover-gray:hover { + color: #d3d4d5 !important; +} +.hover-gray-200:focus, +.hover-gray-200:hover { + color: #fafafa !important; +} +.hover-gray-300:focus, +.hover-gray-300:hover { + color: #e9eced !important; +} +.hover-bg-white:focus, +.hover-bg-white:hover { + background-color: #fff !important; +} +.hover-bg-black:focus, +.hover-bg-black:hover { + background-color: #2f3033 !important; +} +.hover-bg-black-300:focus, +.hover-bg-black-300:hover { + background-color: #676d73 !important; +} +.hover-bg-blue:focus, +.hover-bg-blue:hover { + background-color: #009fd9 !important; +} +.hover-bg-indigo:focus, +.hover-bg-indigo:hover { + background-color: #5968e2 !important; +} +.hover-bg-purple:focus, +.hover-bg-purple:hover { + background-color: #a97ff0 !important; +} +.hover-bg-green:focus, +.hover-bg-green:hover { + background-color: #2db783 !important; +} +.hover-bg-yellow:focus, +.hover-bg-yellow:hover { + background-color: #febe14 !important; +} +.hover-bg-red:focus, +.hover-bg-red:hover { + background-color: #ff5a5f !important; +} +.hover-bg-gray:focus, +.hover-bg-gray:hover { + background-color: #d3d4d5 !important; +} +.hover-bg-gray-200:focus, +.hover-bg-gray-200:hover { + background-color: #fafafa !important; +} +.hover-bg-gray-300:focus, +.hover-bg-gray-300:hover { + background-color: #e9eced !important; +} +.top0 { + top: 0 !important; +} +.right0 { + right: 0 !important; +} +.bottom0 { + bottom: 0 !important; +} +.left0 { + left: 0 !important; +} +.top1 { + top: 8px !important; +} +.right1 { + right: 8px !important; +} +.bottom1 { + bottom: 8px !important; +} +.left1 { + left: 8px !important; +} +.top2 { + top: 16px !important; +} +.right2 { + right: 16px !important; +} +.bottom2 { + bottom: 16px !important; +} +.left2 { + left: 16px !important; +} +.-top1 { + top: -8px !important; +} +.-right1 { + right: -8px !important; +} +.-bottom1 { + bottom: -8px !important; +} +.-left1 { + left: -8px !important; +} +.-top2 { + top: -16px !important; +} +.-right2 { + right: -16px !important; +} +.-bottom2 { + bottom: -16px !important; +} +.-left2 { + left: -16px !important; +} +.absolute-fill { + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} +.absolute-fill, +.top-0 { + top: 0 !important; +} +.top-1 { + top: 1px !important; +} +.top-2 { + top: 2px !important; +} +.top-3 { + top: 3px !important; +} +.top-4 { + top: 4px !important; +} +.top-5 { + top: 5px !important; +} +.right-0 { + right: 0 !important; +} +.right-1 { + right: 1px !important; +} +.right-2 { + right: 2px !important; +} +.right-3 { + right: 3px !important; +} +.right-4 { + right: 4px !important; +} +.right-5 { + right: 5px !important; +} +.bottom-0 { + bottom: 0 !important; +} +.bottom-1 { + bottom: 1px !important; +} +.bottom-2 { + bottom: 2px !important; +} +.bottom-3 { + bottom: 3px !important; +} +.bottom-4 { + bottom: 4px !important; +} +.bottom-5 { + bottom: 5px !important; +} +.left-0 { + left: 0 !important; +} +.left-1 { + left: 1px !important; +} +.left-2 { + left: 2px !important; +} +.left-3 { + left: 3px !important; +} +.left-4 { + left: 4px !important; +} +.left-5 { + left: 5px !important; +} +.-top-1 { + top: -1px !important; +} +.-top-2 { + top: -2px !important; +} +.-top-3 { + top: -3px !important; +} +.-top-4 { + top: -4px !important; +} +.-top-5 { + top: -5px !important; +} +.-right-1 { + right: -1px !important; +} +.-right-2 { + right: -2px !important; +} +.-right-3 { + right: -3px !important; +} +.-right-4 { + right: -4px !important; +} +.-right-5 { + right: -5px !important; +} +.-bottom-1 { + bottom: -1px !important; +} +.-bottom-2 { + bottom: -2px !important; +} +.-bottom-3 { + bottom: -3px !important; +} +.-bottom-4 { + bottom: -4px !important; +} +.-bottom-5 { + bottom: -5px !important; +} +.-left-1 { + left: -1px !important; +} +.-left-2 { + left: -2px !important; +} +.-left-3 { + left: -3px !important; +} +.-left-4 { + left: -4px !important; +} +.-left-5 { + left: -5px !important; +} +.dn { + display: none !important; +} +.di { + display: inline !important; +} +.db { + display: block !important; +} +.dib { + display: inline-block !important; +} +.dit { + display: inline-table !important; +} +.dt { + display: table !important; +} +.dtc { + display: table-cell !important; +} +.dt-row { + display: table-row !important; +} +.dt-row-group { + display: table-row-group !important; +} +.dt-column { + display: table-column !important; +} +.dt-column-group { + display: table-column-group !important; +} +.dt-fixed { + table-layout: fixed !important; + width: 100% !important; +} +.flex { + display: flex !important; +} +.inline-flex { + display: inline-flex !important; +} +.flex-auto { + flex: 1 1 auto !important; +} +.flex-1, +.flex-auto { + min-width: 0 !important; + min-height: 0 !important; +} +.flex-1 { + flex: 1 1 0% !important; +} +.flex-2 { + flex: 2 1 0% !important; +} +.flex-2, +.flex-3 { + min-width: 0 !important; + min-height: 0 !important; +} +.flex-3 { + flex: 3 1 0% !important; +} +.flex-none { + flex: none !important; +} +.flex-column { + flex-direction: column !important; +} +.flex-row { + flex-direction: row !important; +} +.flex-wrap { + flex-wrap: wrap !important; +} +.flex-nowrap { + flex-wrap: nowrap !important; +} +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} +.flex-column-reverse { + flex-direction: column-reverse !important; +} +.flex-row-reverse { + flex-direction: row-reverse !important; +} +.items-start { + align-items: flex-start !important; +} +.items-end { + align-items: flex-end !important; +} +.items-center { + align-items: center !important; +} +.items-baseline { + align-items: baseline !important; +} +.items-stretch { + align-items: stretch !important; +} +.self-start { + align-self: flex-start !important; +} +.self-end { + align-self: flex-end !important; +} +.self-center { + align-self: center !important; +} +.self-baseline { + align-self: baseline !important; +} +.self-stretch { + align-self: stretch !important; +} +.justify-start { + justify-content: flex-start !important; +} +.justify-end { + justify-content: flex-end !important; +} +.justify-center { + justify-content: center !important; +} +.justify-between { + justify-content: space-between !important; +} +.justify-around { + justify-content: space-around !important; +} +.content-start { + align-content: flex-start !important; +} +.content-end { + align-content: flex-end !important; +} +.content-center { + align-content: center !important; +} +.content-between { + align-content: space-between !important; +} +.content-around { + align-content: space-around !important; +} +.content-stretch { + align-content: stretch !important; +} +.order-0 { + order: 0 !important; +} +.order-1 { + order: 1 !important; +} +.order-2 { + order: 2 !important; +} +.order-3 { + order: 3 !important; +} +.order-4 { + order: 4 !important; +} +.order-5 { + order: 5 !important; +} +.order-6 { + order: 6 !important; +} +.order-7 { + order: 7 !important; +} +.order-8 { + order: 8 !important; +} +.order-last { + order: 99999 !important; +} +.flex-grow-0 { + flex-grow: 0 !important; +} +.flex-grow-1 { + flex-grow: 1 !important; +} +.flex-shrink-0 { + flex-shrink: 0 !important; +} +.flex-shrink-1 { + flex-shrink: 1 !important; +} +.normal { + font-weight: 400 !important; +} +.b { + font-weight: 700 !important; +} +.grid { + margin-left: -16px !important; + display: flex !important; + flex-wrap: wrap !important; +} +.grid > * { + padding-left: 16px !important; + width: 100% !important; +} +.grid-wide { + margin-left: -32px !important; +} +.grid-wide > * { + padding-left: 32px !important; +} +.grid-flush { + margin-left: 0 !important; +} +.grid-flush > * { + padding-left: 0 !important; +} +.col-1 { + width: 8.333333% !important; +} +.col-2 { + width: 16.666666% !important; +} +.col-3 { + width: 25% !important; +} +.col-4 { + width: 33.333333% !important; +} +.col-5 { + width: 41.666666% !important; +} +.col-6 { + width: 50% !important; +} +.col-7 { + width: 58.333333% !important; +} +.col-8 { + width: 66.666666% !important; +} +.col-9 { + width: 75% !important; +} +.col-10 { + width: 83.333333% !important; +} +.col-11 { + width: 91.666666% !important; +} +.col-12 { + width: 100% !important; +} +.h0 { + height: 0 !important; +} +.h1 { + height: 16px !important; +} +.h2 { + height: 24px !important; +} +.h3 { + height: 32px !important; +} +.h4 { + height: 64px !important; +} +.h5 { + height: 128px !important; +} +.h6 { + height: 256px !important; +} +.h-0 { + height: 0 !important; +} +.h-25 { + height: 25% !important; +} +.h-50 { + height: 50% !important; +} +.h-75 { + height: 75% !important; +} +.h-100 { + height: 100% !important; +} +.min-h-100 { + min-height: 100% !important; +} +.vh-25 { + height: 25vh !important; +} +.vh-50 { + height: 50vh !important; +} +.vh-75 { + height: 75vh !important; +} +.vh-100 { + height: 100vh !important; +} +.min-vh-100 { + min-height: 100vh !important; +} +.h-auto { + height: auto !important; +} +.h-inherit { + height: inherit !important; +} +.mw-100 { + max-width: 100% !important; +} +.mw1 { + max-width: 16px !important; +} +.mw2 { + max-width: 24px !important; +} +.mw3 { + max-width: 32px !important; +} +.mw4 { + max-width: 64px !important; +} +.mw5 { + max-width: 128px !important; +} +.mw6 { + max-width: 256px !important; +} +.mw7 { + max-width: 512px !important; +} +.mw8 { + max-width: 736px !important; +} +.mw9 { + max-width: 946px !important; +} +.mw-none { + max-width: none !important; +} +.ma0 { + margin: 0 !important; +} +.ma1 { + margin: 4px !important; +} +.ma2 { + margin: 8px !important; +} +.ma3 { + margin: 16px !important; +} +.ma4 { + margin: 24px !important; +} +.ma5 { + margin: 32px !important; +} +.ma6 { + margin: 64px !important; +} +.ma7 { + margin: 128px !important; +} +.ma8 { + margin: 256px !important; +} +.ml0 { + margin-left: 0 !important; +} +.ml1 { + margin-left: 4px !important; +} +.ml2 { + margin-left: 8px !important; +} +.ml3 { + margin-left: 16px !important; +} +.ml4 { + margin-left: 24px !important; +} +.ml5 { + margin-left: 32px !important; +} +.ml6 { + margin-left: 64px !important; +} +.ml7 { + margin-left: 128px !important; +} +.ml8 { + margin-left: 256px !important; +} +.mr0 { + margin-right: 0 !important; +} +.mr1 { + margin-right: 4px !important; +} +.mr2 { + margin-right: 8px !important; +} +.mr3 { + margin-right: 16px !important; +} +.mr4 { + margin-right: 24px !important; +} +.mr5 { + margin-right: 32px !important; +} +.mr6 { + margin-right: 64px !important; +} +.mr7 { + margin-right: 128px !important; +} +.mr8 { + margin-right: 256px !important; +} +.mb0 { + margin-bottom: 0 !important; +} +.mb1 { + margin-bottom: 4px !important; +} +.mb2 { + margin-bottom: 8px !important; +} +.mb3 { + margin-bottom: 16px !important; +} +.mb4 { + margin-bottom: 24px !important; +} +.mb5 { + margin-bottom: 32px !important; +} +.mb6 { + margin-bottom: 64px !important; +} +.mb7 { + margin-bottom: 128px !important; +} +.mb8 { + margin-bottom: 256px !important; +} +.mt0 { + margin-top: 0 !important; +} +.mt1 { + margin-top: 4px !important; +} +.mt2 { + margin-top: 8px !important; +} +.mt3 { + margin-top: 16px !important; +} +.mt4 { + margin-top: 24px !important; +} +.mt5 { + margin-top: 32px !important; +} +.mt6 { + margin-top: 64px !important; +} +.mt7 { + margin-top: 128px !important; +} +.mt8 { + margin-top: 256px !important; +} +.mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.mv1 { + margin-top: 4px !important; + margin-bottom: 4px !important; +} +.mv2 { + margin-top: 8px !important; + margin-bottom: 8px !important; +} +.mv3 { + margin-top: 16px !important; + margin-bottom: 16px !important; +} +.mv4 { + margin-top: 24px !important; + margin-bottom: 24px !important; +} +.mv5 { + margin-top: 32px !important; + margin-bottom: 32px !important; +} +.mv6 { + margin-top: 64px !important; + margin-bottom: 64px !important; +} +.mv7 { + margin-top: 128px !important; + margin-bottom: 128px !important; +} +.mv8 { + margin-top: 256px !important; + margin-bottom: 256px !important; +} +.mh0 { + margin-left: 0 !important; + margin-right: 0 !important; +} +.mh1 { + margin-left: 4px !important; + margin-right: 4px !important; +} +.mh2 { + margin-left: 8px !important; + margin-right: 8px !important; +} +.mh3 { + margin-left: 16px !important; + margin-right: 16px !important; +} +.mh4 { + margin-left: 24px !important; + margin-right: 24px !important; +} +.mh5 { + margin-left: 32px !important; + margin-right: 32px !important; +} +.mh6 { + margin-left: 64px !important; + margin-right: 64px !important; +} +.mh7 { + margin-left: 128px !important; + margin-right: 128px !important; +} +.mh8 { + margin-left: 256px !important; + margin-right: 256px !important; +} +.-ma1 { + margin: -4px !important; +} +.-ma2 { + margin: -8px !important; +} +.-ma3 { + margin: -16px !important; +} +.-ma4 { + margin: -24px !important; +} +.-ma5 { + margin: -32px !important; +} +.-ma6 { + margin: -64px !important; +} +.-ma7 { + margin: -128px !important; +} +.-ma8 { + margin: -256px !important; +} +.-ml1 { + margin-left: -4px !important; +} +.-ml2 { + margin-left: -8px !important; +} +.-ml3 { + margin-left: -16px !important; +} +.-ml4 { + margin-left: -24px !important; +} +.-ml5 { + margin-left: -32px !important; +} +.-ml6 { + margin-left: -64px !important; +} +.-ml7 { + margin-left: -128px !important; +} +.-ml8 { + margin-left: -256px !important; +} +.-mr1 { + margin-right: -4px !important; +} +.-mr2 { + margin-right: -8px !important; +} +.-mr3 { + margin-right: -16px !important; +} +.-mr4 { + margin-right: -24px !important; +} +.-mr5 { + margin-right: -32px !important; +} +.-mr6 { + margin-right: -64px !important; +} +.-mr7 { + margin-right: -128px !important; +} +.-mr8 { + margin-right: -256px !important; +} +.-mb1 { + margin-bottom: -4px !important; +} +.-mb2 { + margin-bottom: -8px !important; +} +.-mb3 { + margin-bottom: -16px !important; +} +.-mb4 { + margin-bottom: -24px !important; +} +.-mb5 { + margin-bottom: -32px !important; +} +.-mb6 { + margin-bottom: -64px !important; +} +.-mb7 { + margin-bottom: -128px !important; +} +.-mb8 { + margin-bottom: -256px !important; +} +.-mt1 { + margin-top: -4px !important; +} +.-mt2 { + margin-top: -8px !important; +} +.-mt3 { + margin-top: -16px !important; +} +.-mt4 { + margin-top: -24px !important; +} +.-mt5 { + margin-top: -32px !important; +} +.-mt6 { + margin-top: -64px !important; +} +.-mt7 { + margin-top: -128px !important; +} +.-mt8 { + margin-top: -256px !important; +} +.center { + margin-right: auto !important; + margin-left: auto !important; +} +.ma-auto { + margin: auto !important; +} +.mr-auto { + margin-right: auto !important; +} +.ml-auto { + margin-left: auto !important; +} +.mt-auto { + margin-top: auto !important; +} +.mb-auto { + margin-bottom: auto !important; +} +.overflow-visible { + overflow: visible !important; +} +.overflow-hidden { + overflow: hidden !important; +} +.overflow-scroll { + overflow: scroll !important; +} +.overflow-auto { + overflow: auto !important; +} +.overflow-x-visible { + overflow-x: visible !important; +} +.overflow-x-hidden { + overflow-x: hidden !important; +} +.overflow-x-scroll { + overflow-x: scroll !important; +} +.overflow-x-auto { + overflow-x: auto !important; +} +.overflow-y-visible { + overflow-y: visible !important; +} +.overflow-y-hidden { + overflow-y: hidden !important; +} +.overflow-y-scroll { + overflow-y: scroll !important; +} +.overflow-y-auto { + overflow-y: auto !important; +} +.pa0 { + padding: 0 !important; +} +.pa1 { + padding: 4px !important; +} +.pa2 { + padding: 8px !important; +} +.pa3 { + padding: 16px !important; +} +.pa4 { + padding: 24px !important; +} +.pa5 { + padding: 32px !important; +} +.pa6 { + padding: 64px !important; +} +.pa7 { + padding: 128px !important; +} +.pa8 { + padding: 256px !important; +} +.pl0 { + padding-left: 0 !important; +} +.pl1 { + padding-left: 4px !important; +} +.pl2 { + padding-left: 8px !important; +} +.pl3 { + padding-left: 16px !important; +} +.pl4 { + padding-left: 24px !important; +} +.pl5 { + padding-left: 32px !important; +} +.pl6 { + padding-left: 64px !important; +} +.pl7 { + padding-left: 128px !important; +} +.pl8 { + padding-left: 256px !important; +} +.pr0 { + padding-right: 0 !important; +} +.pr1 { + padding-right: 4px !important; +} +.pr2 { + padding-right: 8px !important; +} +.pr3 { + padding-right: 16px !important; +} +.pr4 { + padding-right: 24px !important; +} +.pr5 { + padding-right: 32px !important; +} +.pr6 { + padding-right: 64px !important; +} +.pr7 { + padding-right: 128px !important; +} +.pr8 { + padding-right: 256px !important; +} +.pb0 { + padding-bottom: 0 !important; +} +.pb1 { + padding-bottom: 4px !important; +} +.pb2 { + padding-bottom: 8px !important; +} +.pb3 { + padding-bottom: 16px !important; +} +.pb4 { + padding-bottom: 24px !important; +} +.pb5 { + padding-bottom: 32px !important; +} +.pb6 { + padding-bottom: 64px !important; +} +.pb7 { + padding-bottom: 128px !important; +} +.pb8 { + padding-bottom: 256px !important; +} +.pt0 { + padding-top: 0 !important; +} +.pt1 { + padding-top: 4px !important; +} +.pt2 { + padding-top: 8px !important; +} +.pt3 { + padding-top: 16px !important; +} +.pt4 { + padding-top: 24px !important; +} +.pt5 { + padding-top: 32px !important; +} +.pt6 { + padding-top: 64px !important; +} +.pt7 { + padding-top: 128px !important; +} +.pt8 { + padding-top: 256px !important; +} +.pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.pv1 { + padding-top: 4px !important; + padding-bottom: 4px !important; +} +.pv2 { + padding-top: 8px !important; + padding-bottom: 8px !important; +} +.pv3 { + padding-top: 16px !important; + padding-bottom: 16px !important; +} +.pv4 { + padding-top: 24px !important; + padding-bottom: 24px !important; +} +.pv5 { + padding-top: 32px !important; + padding-bottom: 32px !important; +} +.pv6 { + padding-top: 64px !important; + padding-bottom: 64px !important; +} +.pv7 { + padding-top: 128px !important; + padding-bottom: 128px !important; +} +.pv8 { + padding-top: 256px !important; + padding-bottom: 256px !important; +} +.ph0 { + padding-left: 0 !important; + padding-right: 0 !important; +} +.ph1 { + padding-left: 4px !important; + padding-right: 4px !important; +} +.ph2 { + padding-left: 8px !important; + padding-right: 8px !important; +} +.ph3 { + padding-left: 16px !important; + padding-right: 16px !important; +} +.ph4 { + padding-left: 24px !important; + padding-right: 24px !important; +} +.ph5 { + padding-left: 32px !important; + padding-right: 32px !important; +} +.ph6 { + padding-left: 64px !important; + padding-right: 64px !important; +} +.ph7 { + padding-left: 128px !important; + padding-right: 128px !important; +} +.ph8 { + padding-left: 256px !important; + padding-right: 256px !important; +} +.static { + position: static !important; +} +.relative { + position: relative !important; +} +.absolute { + position: absolute !important; +} +.fixed { + position: fixed !important; +} +.tl { + text-align: left !important; +} +.tr { + text-align: right !important; +} +.tc { + text-align: center !important; +} +.tj { + text-align: justify !important; +} +.strike { + text-decoration: line-through !important; +} +.underline { + text-decoration: underline !important; +} +.no-underline { + text-decoration: none !important; +} +.ttc { + text-transform: capitalize !important; +} +.ttl { + text-transform: lowercase !important; +} +.ttu { + text-transform: uppercase !important; +} +.ttn { + text-transform: none !important; +} +.truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} +.v-base { + vertical-align: baseline !important; +} +.v-mid { + vertical-align: middle !important; +} +.v-top { + vertical-align: top !important; +} +.v-btm { + vertical-align: bottom !important; +} +.visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; +} +.ws-normal { + white-space: normal !important; +} +.nowrap { + white-space: nowrap !important; +} +.pre { + white-space: pre !important; +} +.w1 { + width: 16px !important; +} +.w2 { + width: 24px !important; +} +.w3 { + width: 32px !important; +} +.w4 { + width: 64px !important; +} +.w5 { + width: 128px !important; +} +.w6 { + width: 256px !important; +} +.w-10 { + width: 10% !important; +} +.w-20 { + width: 20% !important; +} +.w-25 { + width: 25% !important; +} +.w-30 { + width: 30% !important; +} +.w-33 { + width: 33.333333% !important; +} +.w-40 { + width: 40% !important; +} +.w-50 { + width: 50% !important; +} +.w-60 { + width: 60% !important; +} +.w-66 { + width: 66.666666% !important; +} +.w-70 { + width: 70% !important; +} +.w-75 { + width: 75% !important; +} +.w-80 { + width: 80% !important; +} +.w-90 { + width: 90% !important; +} +.w-100 { + width: 100% !important; +} +.w-auto { + width: auto !important; +} +.word-normal { + word-break: normal !important; +} +.word-wrap { + word-break: break-all !important; +} +.word-nowrap { + word-break: keep-all !important; +} +.z-0 { + z-index: 0 !important; +} +.z-1 { + z-index: 1 !important; +} +.z-2 { + z-index: 2 !important; +} +.z-3 { + z-index: 3 !important; +} +.z-4 { + z-index: 4 !important; +} +.z-5 { + z-index: 5 !important; +} +.z-inherit { + z-index: inherit !important; +} +.z-initial { + z-index: auto !important; +} +.z-unset { + z-index: unset !important; +} +@media (min-width: 482px) { + .s_bg-center { + background-position: 50% !important; + } + .s_bg-center, + .s_bg-top { + background-repeat: no-repeat !important; + } + .s_bg-top { + background-position: top !important; + } + .s_bg-right { + background-position: 100% !important; + } + .s_bg-bottom, + .s_bg-right { + background-repeat: no-repeat !important; + } + .s_bg-bottom { + background-position: bottom !important; + } + .s_bg-left { + background-repeat: no-repeat !important; + background-position: 0 !important; + } + .s_cover { + background-size: cover !important; + } + .s_contain { + background-size: contain !important; + } + .s_ba { + border-style: solid !important; + border-width: 1px !important; + } + .s_bt { + border-top-style: solid !important; + border-top-width: 1px !important; + } + .s_br { + border-right-style: solid !important; + border-right-width: 1px !important; + } + .s_bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; + } + .s_bl { + border-left-style: solid !important; + border-left-width: 1px !important; + } + .s_bn { + border-style: none !important; + border-width: 0 !important; + } + .s_br0 { + border-radius: 0 !important; + } + .s_br1 { + border-radius: 2px !important; + } + .s_br2 { + border-radius: 4px !important; + } + .s_br3 { + border-radius: 6px !important; + } + .s_br-100 { + border-radius: 50% !important; + } + .s_br-pill { + border-radius: 9999px !important; + } + .s_br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + .s_br-top { + border-bottom-right-radius: 0 !important; + } + .s_br-right, + .s_br-top { + border-bottom-left-radius: 0 !important; + } + .s_br-right { + border-top-left-radius: 0 !important; + } + .s_br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + .s_b-dotted { + border-style: dotted !important; + } + .s_b-dashed { + border-style: dashed !important; + } + .s_b-solid { + border-style: solid !important; + } + .s_b-none { + border-style: none !important; + } + .s_bw-0 { + border-width: 0 !important; + } + .s_bw-1 { + border-width: 1px !important; + } + .s_bw-2 { + border-width: 2px !important; + } + .s_bw-3 { + border-width: 3px !important; + } + .s_bw-4 { + border-width: 4px !important; + } + .s_bt-0 { + border-top-width: 0 !important; + } + .s_br-0 { + border-right-width: 0 !important; + } + .s_bb-0 { + border-bottom-width: 0 !important; + } + .s_bl-0 { + border-left-width: 0 !important; + } + .s_top0 { + top: 0 !important; + } + .s_right0 { + right: 0 !important; + } + .s_bottom0 { + bottom: 0 !important; + } + .s_left0 { + left: 0 !important; + } + .s_top1 { + top: 8px !important; + } + .s_right1 { + right: 8px !important; + } + .s_bottom1 { + bottom: 8px !important; + } + .s_left1 { + left: 8px !important; + } + .s_top2 { + top: 16px !important; + } + .s_right2 { + right: 16px !important; + } + .s_bottom2 { + bottom: 16px !important; + } + .s_left2 { + left: 16px !important; + } + .s_-top1 { + top: -8px !important; + } + .s_-right1 { + right: -8px !important; + } + .s_-bottom1 { + bottom: -8px !important; + } + .s_-left1 { + left: -8px !important; + } + .s_-top2 { + top: -16px !important; + } + .s_-right2 { + right: -16px !important; + } + .s_-bottom2 { + bottom: -16px !important; + } + .s_-left2 { + left: -16px !important; + } + .s_absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + } + .s_top-0 { + top: 0 !important; + } + .s_top-1 { + top: 1px !important; + } + .s_top-2 { + top: 2px !important; + } + .s_top-3 { + top: 3px !important; + } + .s_top-4 { + top: 4px !important; + } + .s_top-5 { + top: 5px !important; + } + .s_right-0 { + right: 0 !important; + } + .s_right-1 { + right: 1px !important; + } + .s_right-2 { + right: 2px !important; + } + .s_right-3 { + right: 3px !important; + } + .s_right-4 { + right: 4px !important; + } + .s_right-5 { + right: 5px !important; + } + .s_bottom-0 { + bottom: 0 !important; + } + .s_bottom-1 { + bottom: 1px !important; + } + .s_bottom-2 { + bottom: 2px !important; + } + .s_bottom-3 { + bottom: 3px !important; + } + .s_bottom-4 { + bottom: 4px !important; + } + .s_bottom-5 { + bottom: 5px !important; + } + .s_left-0 { + left: 0 !important; + } + .s_left-1 { + left: 1px !important; + } + .s_left-2 { + left: 2px !important; + } + .s_left-3 { + left: 3px !important; + } + .s_left-4 { + left: 4px !important; + } + .s_left-5 { + left: 5px !important; + } + .s_-top-1 { + top: -1px !important; + } + .s_-top-2 { + top: -2px !important; + } + .s_-top-3 { + top: -3px !important; + } + .s_-top-4 { + top: -4px !important; + } + .s_-top-5 { + top: -5px !important; + } + .s_-right-1 { + right: -1px !important; + } + .s_-right-2 { + right: -2px !important; + } + .s_-right-3 { + right: -3px !important; + } + .s_-right-4 { + right: -4px !important; + } + .s_-right-5 { + right: -5px !important; + } + .s_-bottom-1 { + bottom: -1px !important; + } + .s_-bottom-2 { + bottom: -2px !important; + } + .s_-bottom-3 { + bottom: -3px !important; + } + .s_-bottom-4 { + bottom: -4px !important; + } + .s_-bottom-5 { + bottom: -5px !important; + } + .s_-left-1 { + left: -1px !important; + } + .s_-left-2 { + left: -2px !important; + } + .s_-left-3 { + left: -3px !important; + } + .s_-left-4 { + left: -4px !important; + } + .s_-left-5 { + left: -5px !important; + } + .s_dn { + display: none !important; + } + .s_di { + display: inline !important; + } + .s_db { + display: block !important; + } + .s_dib { + display: inline-block !important; + } + .s_dit { + display: inline-table !important; + } + .s_dt { + display: table !important; + } + .s_dtc { + display: table-cell !important; + } + .s_dt-row { + display: table-row !important; + } + .s_dt-row-group { + display: table-row-group !important; + } + .s_dt-column { + display: table-column !important; + } + .s_dt-column-group { + display: table-column-group !important; + } + .s_dt-fixed { + table-layout: fixed !important; + width: 100% !important; + } + .s_flex { + display: flex !important; + } + .s_inline-flex { + display: inline-flex !important; + } + .s_flex-auto { + flex: 1 1 auto !important; + } + .s_flex-1, + .s_flex-auto { + min-width: 0 !important; + min-height: 0 !important; + } + .s_flex-1 { + flex: 1 1 0% !important; + } + .s_flex-2 { + flex: 2 1 0% !important; + } + .s_flex-2, + .s_flex-3 { + min-width: 0 !important; + min-height: 0 !important; + } + .s_flex-3 { + flex: 3 1 0% !important; + } + .s_flex-none { + flex: none !important; + } + .s_flex-column { + flex-direction: column !important; + } + .s_flex-row { + flex-direction: row !important; + } + .s_flex-wrap { + flex-wrap: wrap !important; + } + .s_flex-nowrap { + flex-wrap: nowrap !important; + } + .s_flex-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .s_flex-column-reverse { + flex-direction: column-reverse !important; + } + .s_flex-row-reverse { + flex-direction: row-reverse !important; + } + .s_items-start { + align-items: flex-start !important; + } + .s_items-end { + align-items: flex-end !important; + } + .s_items-center { + align-items: center !important; + } + .s_items-baseline { + align-items: baseline !important; + } + .s_items-stretch { + align-items: stretch !important; + } + .s_self-start { + align-self: flex-start !important; + } + .s_self-end { + align-self: flex-end !important; + } + .s_self-center { + align-self: center !important; + } + .s_self-baseline { + align-self: baseline !important; + } + .s_self-stretch { + align-self: stretch !important; + } + .s_justify-start { + justify-content: flex-start !important; + } + .s_justify-end { + justify-content: flex-end !important; + } + .s_justify-center { + justify-content: center !important; + } + .s_justify-between { + justify-content: space-between !important; + } + .s_justify-around { + justify-content: space-around !important; + } + .s_content-start { + align-content: flex-start !important; + } + .s_content-end { + align-content: flex-end !important; + } + .s_content-center { + align-content: center !important; + } + .s_content-between { + align-content: space-between !important; + } + .s_content-around { + align-content: space-around !important; + } + .s_content-stretch { + align-content: stretch !important; + } + .s_order-0 { + order: 0 !important; + } + .s_order-1 { + order: 1 !important; + } + .s_order-2 { + order: 2 !important; + } + .s_order-3 { + order: 3 !important; + } + .s_order-4 { + order: 4 !important; + } + .s_order-5 { + order: 5 !important; + } + .s_order-6 { + order: 6 !important; + } + .s_order-7 { + order: 7 !important; + } + .s_order-8 { + order: 8 !important; + } + .s_order-last { + order: 99999 !important; + } + .s_flex-grow-0 { + flex-grow: 0 !important; + } + .s_flex-grow-1 { + flex-grow: 1 !important; + } + .s_flex-shrink-0 { + flex-shrink: 0 !important; + } + .s_flex-shrink-1 { + flex-shrink: 1 !important; + } + .s_normal { + font-weight: 400 !important; + } + .s_b { + font-weight: 700 !important; + } + .s_grid { + margin-left: -16px !important; + display: flex !important; + flex-wrap: wrap !important; + } + .s_grid > * { + padding-left: 16px !important; + width: 100% !important; + } + .s_grid-wide { + margin-left: -32px !important; + } + .s_grid-wide > * { + padding-left: 32px !important; + } + .s_grid-flush { + margin-left: 0 !important; + } + .s_grid-flush > * { + padding-left: 0 !important; + } + .s_col-1 { + width: 8.333333% !important; + } + .s_col-2 { + width: 16.666666% !important; + } + .s_col-3 { + width: 25% !important; + } + .s_col-4 { + width: 33.333333% !important; + } + .s_col-5 { + width: 41.666666% !important; + } + .s_col-6 { + width: 50% !important; + } + .s_col-7 { + width: 58.333333% !important; + } + .s_col-8 { + width: 66.666666% !important; + } + .s_col-9 { + width: 75% !important; + } + .s_col-10 { + width: 83.333333% !important; + } + .s_col-11 { + width: 91.666666% !important; + } + .s_col-12 { + width: 100% !important; + } + .s_h0 { + height: 0 !important; + } + .s_h1 { + height: 16px !important; + } + .s_h2 { + height: 24px !important; + } + .s_h3 { + height: 32px !important; + } + .s_h4 { + height: 64px !important; + } + .s_h5 { + height: 128px !important; + } + .s_h6 { + height: 256px !important; + } + .s_h-0 { + height: 0 !important; + } + .s_h-25 { + height: 25% !important; + } + .s_h-50 { + height: 50% !important; + } + .s_h-75 { + height: 75% !important; + } + .s_h-100 { + height: 100% !important; + } + .s_min-h-100 { + min-height: 100% !important; + } + .s_vh-25 { + height: 25vh !important; + } + .s_vh-50 { + height: 50vh !important; + } + .s_vh-75 { + height: 75vh !important; + } + .s_vh-100 { + height: 100vh !important; + } + .s_min-vh-100 { + min-height: 100vh !important; + } + .s_h-auto { + height: auto !important; + } + .s_h-inherit { + height: inherit !important; + } + .s_mw-100 { + max-width: 100% !important; + } + .s_mw1 { + max-width: 16px !important; + } + .s_mw2 { + max-width: 24px !important; + } + .s_mw3 { + max-width: 32px !important; + } + .s_mw4 { + max-width: 64px !important; + } + .s_mw5 { + max-width: 128px !important; + } + .s_mw6 { + max-width: 256px !important; + } + .s_mw7 { + max-width: 512px !important; + } + .s_mw8 { + max-width: 736px !important; + } + .s_mw9 { + max-width: 946px !important; + } + .s_mw-none { + max-width: none !important; + } + .s_ma0 { + margin: 0 !important; + } + .s_ma1 { + margin: 4px !important; + } + .s_ma2 { + margin: 8px !important; + } + .s_ma3 { + margin: 16px !important; + } + .s_ma4 { + margin: 24px !important; + } + .s_ma5 { + margin: 32px !important; + } + .s_ma6 { + margin: 64px !important; + } + .s_ma7 { + margin: 128px !important; + } + .s_ma8 { + margin: 256px !important; + } + .s_ml0 { + margin-left: 0 !important; + } + .s_ml1 { + margin-left: 4px !important; + } + .s_ml2 { + margin-left: 8px !important; + } + .s_ml3 { + margin-left: 16px !important; + } + .s_ml4 { + margin-left: 24px !important; + } + .s_ml5 { + margin-left: 32px !important; + } + .s_ml6 { + margin-left: 64px !important; + } + .s_ml7 { + margin-left: 128px !important; + } + .s_ml8 { + margin-left: 256px !important; + } + .s_mr0 { + margin-right: 0 !important; + } + .s_mr1 { + margin-right: 4px !important; + } + .s_mr2 { + margin-right: 8px !important; + } + .s_mr3 { + margin-right: 16px !important; + } + .s_mr4 { + margin-right: 24px !important; + } + .s_mr5 { + margin-right: 32px !important; + } + .s_mr6 { + margin-right: 64px !important; + } + .s_mr7 { + margin-right: 128px !important; + } + .s_mr8 { + margin-right: 256px !important; + } + .s_mb0 { + margin-bottom: 0 !important; + } + .s_mb1 { + margin-bottom: 4px !important; + } + .s_mb2 { + margin-bottom: 8px !important; + } + .s_mb3 { + margin-bottom: 16px !important; + } + .s_mb4 { + margin-bottom: 24px !important; + } + .s_mb5 { + margin-bottom: 32px !important; + } + .s_mb6 { + margin-bottom: 64px !important; + } + .s_mb7 { + margin-bottom: 128px !important; + } + .s_mb8 { + margin-bottom: 256px !important; + } + .s_mt0 { + margin-top: 0 !important; + } + .s_mt1 { + margin-top: 4px !important; + } + .s_mt2 { + margin-top: 8px !important; + } + .s_mt3 { + margin-top: 16px !important; + } + .s_mt4 { + margin-top: 24px !important; + } + .s_mt5 { + margin-top: 32px !important; + } + .s_mt6 { + margin-top: 64px !important; + } + .s_mt7 { + margin-top: 128px !important; + } + .s_mt8 { + margin-top: 256px !important; + } + .s_mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .s_mv1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .s_mv2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .s_mv3 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .s_mv4 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .s_mv5 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .s_mv6 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .s_mv7 { + margin-top: 128px !important; + margin-bottom: 128px !important; + } + .s_mv8 { + margin-top: 256px !important; + margin-bottom: 256px !important; + } + .s_mh0 { + margin-left: 0 !important; + margin-right: 0 !important; + } + .s_mh1 { + margin-left: 4px !important; + margin-right: 4px !important; + } + .s_mh2 { + margin-left: 8px !important; + margin-right: 8px !important; + } + .s_mh3 { + margin-left: 16px !important; + margin-right: 16px !important; + } + .s_mh4 { + margin-left: 24px !important; + margin-right: 24px !important; + } + .s_mh5 { + margin-left: 32px !important; + margin-right: 32px !important; + } + .s_mh6 { + margin-left: 64px !important; + margin-right: 64px !important; + } + .s_mh7 { + margin-left: 128px !important; + margin-right: 128px !important; + } + .s_mh8 { + margin-left: 256px !important; + margin-right: 256px !important; + } + .s_-ma1 { + margin: -4px !important; + } + .s_-ma2 { + margin: -8px !important; + } + .s_-ma3 { + margin: -16px !important; + } + .s_-ma4 { + margin: -24px !important; + } + .s_-ma5 { + margin: -32px !important; + } + .s_-ma6 { + margin: -64px !important; + } + .s_-ma7 { + margin: -128px !important; + } + .s_-ma8 { + margin: -256px !important; + } + .s_-ml1 { + margin-left: -4px !important; + } + .s_-ml2 { + margin-left: -8px !important; + } + .s_-ml3 { + margin-left: -16px !important; + } + .s_-ml4 { + margin-left: -24px !important; + } + .s_-ml5 { + margin-left: -32px !important; + } + .s_-ml6 { + margin-left: -64px !important; + } + .s_-ml7 { + margin-left: -128px !important; + } + .s_-ml8 { + margin-left: -256px !important; + } + .s_-mr1 { + margin-right: -4px !important; + } + .s_-mr2 { + margin-right: -8px !important; + } + .s_-mr3 { + margin-right: -16px !important; + } + .s_-mr4 { + margin-right: -24px !important; + } + .s_-mr5 { + margin-right: -32px !important; + } + .s_-mr6 { + margin-right: -64px !important; + } + .s_-mr7 { + margin-right: -128px !important; + } + .s_-mr8 { + margin-right: -256px !important; + } + .s_-mb1 { + margin-bottom: -4px !important; + } + .s_-mb2 { + margin-bottom: -8px !important; + } + .s_-mb3 { + margin-bottom: -16px !important; + } + .s_-mb4 { + margin-bottom: -24px !important; + } + .s_-mb5 { + margin-bottom: -32px !important; + } + .s_-mb6 { + margin-bottom: -64px !important; + } + .s_-mb7 { + margin-bottom: -128px !important; + } + .s_-mb8 { + margin-bottom: -256px !important; + } + .s_-mt1 { + margin-top: -4px !important; + } + .s_-mt2 { + margin-top: -8px !important; + } + .s_-mt3 { + margin-top: -16px !important; + } + .s_-mt4 { + margin-top: -24px !important; + } + .s_-mt5 { + margin-top: -32px !important; + } + .s_-mt6 { + margin-top: -64px !important; + } + .s_-mt7 { + margin-top: -128px !important; + } + .s_-mt8 { + margin-top: -256px !important; + } + .s_center { + margin-right: auto !important; + margin-left: auto !important; + } + .s_ma-auto { + margin: auto !important; + } + .s_mr-auto { + margin-right: auto !important; + } + .s_ml-auto { + margin-left: auto !important; + } + .s_mt-auto { + margin-top: auto !important; + } + .s_mb-auto { + margin-bottom: auto !important; + } + .s_overflow-visible { + overflow: visible !important; + } + .s_overflow-hidden { + overflow: hidden !important; + } + .s_overflow-scroll { + overflow: scroll !important; + } + .s_overflow-auto { + overflow: auto !important; + } + .s_overflow-x-visible { + overflow-x: visible !important; + } + .s_overflow-x-hidden { + overflow-x: hidden !important; + } + .s_overflow-x-scroll { + overflow-x: scroll !important; + } + .s_overflow-x-auto { + overflow-x: auto !important; + } + .s_overflow-y-visible { + overflow-y: visible !important; + } + .s_overflow-y-hidden { + overflow-y: hidden !important; + } + .s_overflow-y-scroll { + overflow-y: scroll !important; + } + .s_overflow-y-auto { + overflow-y: auto !important; + } + .s_pa0 { + padding: 0 !important; + } + .s_pa1 { + padding: 4px !important; + } + .s_pa2 { + padding: 8px !important; + } + .s_pa3 { + padding: 16px !important; + } + .s_pa4 { + padding: 24px !important; + } + .s_pa5 { + padding: 32px !important; + } + .s_pa6 { + padding: 64px !important; + } + .s_pa7 { + padding: 128px !important; + } + .s_pa8 { + padding: 256px !important; + } + .s_pl0 { + padding-left: 0 !important; + } + .s_pl1 { + padding-left: 4px !important; + } + .s_pl2 { + padding-left: 8px !important; + } + .s_pl3 { + padding-left: 16px !important; + } + .s_pl4 { + padding-left: 24px !important; + } + .s_pl5 { + padding-left: 32px !important; + } + .s_pl6 { + padding-left: 64px !important; + } + .s_pl7 { + padding-left: 128px !important; + } + .s_pl8 { + padding-left: 256px !important; + } + .s_pr0 { + padding-right: 0 !important; + } + .s_pr1 { + padding-right: 4px !important; + } + .s_pr2 { + padding-right: 8px !important; + } + .s_pr3 { + padding-right: 16px !important; + } + .s_pr4 { + padding-right: 24px !important; + } + .s_pr5 { + padding-right: 32px !important; + } + .s_pr6 { + padding-right: 64px !important; + } + .s_pr7 { + padding-right: 128px !important; + } + .s_pr8 { + padding-right: 256px !important; + } + .s_pb0 { + padding-bottom: 0 !important; + } + .s_pb1 { + padding-bottom: 4px !important; + } + .s_pb2 { + padding-bottom: 8px !important; + } + .s_pb3 { + padding-bottom: 16px !important; + } + .s_pb4 { + padding-bottom: 24px !important; + } + .s_pb5 { + padding-bottom: 32px !important; + } + .s_pb6 { + padding-bottom: 64px !important; + } + .s_pb7 { + padding-bottom: 128px !important; + } + .s_pb8 { + padding-bottom: 256px !important; + } + .s_pt0 { + padding-top: 0 !important; + } + .s_pt1 { + padding-top: 4px !important; + } + .s_pt2 { + padding-top: 8px !important; + } + .s_pt3 { + padding-top: 16px !important; + } + .s_pt4 { + padding-top: 24px !important; + } + .s_pt5 { + padding-top: 32px !important; + } + .s_pt6 { + padding-top: 64px !important; + } + .s_pt7 { + padding-top: 128px !important; + } + .s_pt8 { + padding-top: 256px !important; + } + .s_pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .s_pv1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .s_pv2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .s_pv3 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .s_pv4 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .s_pv5 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .s_pv6 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .s_pv7 { + padding-top: 128px !important; + padding-bottom: 128px !important; + } + .s_pv8 { + padding-top: 256px !important; + padding-bottom: 256px !important; + } + .s_ph0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + .s_ph1 { + padding-left: 4px !important; + padding-right: 4px !important; + } + .s_ph2 { + padding-left: 8px !important; + padding-right: 8px !important; + } + .s_ph3 { + padding-left: 16px !important; + padding-right: 16px !important; + } + .s_ph4 { + padding-left: 24px !important; + padding-right: 24px !important; + } + .s_ph5 { + padding-left: 32px !important; + padding-right: 32px !important; + } + .s_ph6 { + padding-left: 64px !important; + padding-right: 64px !important; + } + .s_ph7 { + padding-left: 128px !important; + padding-right: 128px !important; + } + .s_ph8 { + padding-left: 256px !important; + padding-right: 256px !important; + } + .s_static { + position: static !important; + } + .s_relative { + position: relative !important; + } + .s_absolute { + position: absolute !important; + } + .s_fixed { + position: fixed !important; + } + .s_tl { + text-align: left !important; + } + .s_tr { + text-align: right !important; + } + .s_tc { + text-align: center !important; + } + .s_tj { + text-align: justify !important; + } + .s_strike { + text-decoration: line-through !important; + } + .s_underline { + text-decoration: underline !important; + } + .s_no-underline { + text-decoration: none !important; + } + .s_ttc { + text-transform: capitalize !important; + } + .s_ttl { + text-transform: lowercase !important; + } + .s_ttu { + text-transform: uppercase !important; + } + .s_ttn { + text-transform: none !important; + } + .s_truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } + .s_v-base { + vertical-align: baseline !important; + } + .s_v-mid { + vertical-align: middle !important; + } + .s_v-top { + vertical-align: top !important; + } + .s_v-btm { + vertical-align: bottom !important; + } + .s_visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; + } + .s_ws-normal { + white-space: normal !important; + } + .s_nowrap { + white-space: nowrap !important; + } + .s_pre { + white-space: pre !important; + } + .s_w1 { + width: 16px !important; + } + .s_w2 { + width: 24px !important; + } + .s_w3 { + width: 32px !important; + } + .s_w4 { + width: 64px !important; + } + .s_w5 { + width: 128px !important; + } + .s_w6 { + width: 256px !important; + } + .s_w-10 { + width: 10% !important; + } + .s_w-20 { + width: 20% !important; + } + .s_w-25 { + width: 25% !important; + } + .s_w-30 { + width: 30% !important; + } + .s_w-33 { + width: 33.333333% !important; + } + .s_w-40 { + width: 40% !important; + } + .s_w-50 { + width: 50% !important; + } + .s_w-60 { + width: 60% !important; + } + .s_w-66 { + width: 66.666666% !important; + } + .s_w-70 { + width: 70% !important; + } + .s_w-75 { + width: 75% !important; + } + .s_w-80 { + width: 80% !important; + } + .s_w-90 { + width: 90% !important; + } + .s_w-100 { + width: 100% !important; + } + .s_w-auto { + width: auto !important; + } + .s_word-normal { + word-break: normal !important; + } + .s_word-wrap { + word-break: break-all !important; + } + .s_word-nowrap { + word-break: keep-all !important; + } +} +@media (min-width: 701px) { + .m_bg-center { + background-position: 50% !important; + } + .m_bg-center, + .m_bg-top { + background-repeat: no-repeat !important; + } + .m_bg-top { + background-position: top !important; + } + .m_bg-right { + background-position: 100% !important; + } + .m_bg-bottom, + .m_bg-right { + background-repeat: no-repeat !important; + } + .m_bg-bottom { + background-position: bottom !important; + } + .m_bg-left { + background-repeat: no-repeat !important; + background-position: 0 !important; + } + .m_cover { + background-size: cover !important; + } + .m_contain { + background-size: contain !important; + } + .m_ba { + border-style: solid !important; + border-width: 1px !important; + } + .m_bt { + border-top-style: solid !important; + border-top-width: 1px !important; + } + .m_br { + border-right-style: solid !important; + border-right-width: 1px !important; + } + .m_bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; + } + .m_bl { + border-left-style: solid !important; + border-left-width: 1px !important; + } + .m_bn { + border-style: none !important; + border-width: 0 !important; + } + .m_br0 { + border-radius: 0 !important; + } + .m_br1 { + border-radius: 2px !important; + } + .m_br2 { + border-radius: 4px !important; + } + .m_br3 { + border-radius: 6px !important; + } + .m_br-100 { + border-radius: 50% !important; + } + .m_br-pill { + border-radius: 9999px !important; + } + .m_br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + .m_br-top { + border-bottom-right-radius: 0 !important; + } + .m_br-right, + .m_br-top { + border-bottom-left-radius: 0 !important; + } + .m_br-right { + border-top-left-radius: 0 !important; + } + .m_br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + .m_b-dotted { + border-style: dotted !important; + } + .m_b-dashed { + border-style: dashed !important; + } + .m_b-solid { + border-style: solid !important; + } + .m_b-none { + border-style: none !important; + } + .m_bw-0 { + border-width: 0 !important; + } + .m_bw-1 { + border-width: 1px !important; + } + .m_bw-2 { + border-width: 2px !important; + } + .m_bw-3 { + border-width: 3px !important; + } + .m_bw-4 { + border-width: 4px !important; + } + .m_bt-0 { + border-top-width: 0 !important; + } + .m_br-0 { + border-right-width: 0 !important; + } + .m_bb-0 { + border-bottom-width: 0 !important; + } + .m_bl-0 { + border-left-width: 0 !important; + } + .m_top0 { + top: 0 !important; + } + .m_right0 { + right: 0 !important; + } + .m_bottom0 { + bottom: 0 !important; + } + .m_left0 { + left: 0 !important; + } + .m_top1 { + top: 8px !important; + } + .m_right1 { + right: 8px !important; + } + .m_bottom1 { + bottom: 8px !important; + } + .m_left1 { + left: 8px !important; + } + .m_top2 { + top: 16px !important; + } + .m_right2 { + right: 16px !important; + } + .m_bottom2 { + bottom: 16px !important; + } + .m_left2 { + left: 16px !important; + } + .m_-top1 { + top: -8px !important; + } + .m_-right1 { + right: -8px !important; + } + .m_-bottom1 { + bottom: -8px !important; + } + .m_-left1 { + left: -8px !important; + } + .m_-top2 { + top: -16px !important; + } + .m_-right2 { + right: -16px !important; + } + .m_-bottom2 { + bottom: -16px !important; + } + .m_-left2 { + left: -16px !important; + } + .m_absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + } + .m_top-0 { + top: 0 !important; + } + .m_top-1 { + top: 1px !important; + } + .m_top-2 { + top: 2px !important; + } + .m_top-3 { + top: 3px !important; + } + .m_top-4 { + top: 4px !important; + } + .m_top-5 { + top: 5px !important; + } + .m_right-0 { + right: 0 !important; + } + .m_right-1 { + right: 1px !important; + } + .m_right-2 { + right: 2px !important; + } + .m_right-3 { + right: 3px !important; + } + .m_right-4 { + right: 4px !important; + } + .m_right-5 { + right: 5px !important; + } + .m_bottom-0 { + bottom: 0 !important; + } + .m_bottom-1 { + bottom: 1px !important; + } + .m_bottom-2 { + bottom: 2px !important; + } + .m_bottom-3 { + bottom: 3px !important; + } + .m_bottom-4 { + bottom: 4px !important; + } + .m_bottom-5 { + bottom: 5px !important; + } + .m_left-0 { + left: 0 !important; + } + .m_left-1 { + left: 1px !important; + } + .m_left-2 { + left: 2px !important; + } + .m_left-3 { + left: 3px !important; + } + .m_left-4 { + left: 4px !important; + } + .m_left-5 { + left: 5px !important; + } + .m_-top-1 { + top: -1px !important; + } + .m_-top-2 { + top: -2px !important; + } + .m_-top-3 { + top: -3px !important; + } + .m_-top-4 { + top: -4px !important; + } + .m_-top-5 { + top: -5px !important; + } + .m_-right-1 { + right: -1px !important; + } + .m_-right-2 { + right: -2px !important; + } + .m_-right-3 { + right: -3px !important; + } + .m_-right-4 { + right: -4px !important; + } + .m_-right-5 { + right: -5px !important; + } + .m_-bottom-1 { + bottom: -1px !important; + } + .m_-bottom-2 { + bottom: -2px !important; + } + .m_-bottom-3 { + bottom: -3px !important; + } + .m_-bottom-4 { + bottom: -4px !important; + } + .m_-bottom-5 { + bottom: -5px !important; + } + .m_-left-1 { + left: -1px !important; + } + .m_-left-2 { + left: -2px !important; + } + .m_-left-3 { + left: -3px !important; + } + .m_-left-4 { + left: -4px !important; + } + .m_-left-5 { + left: -5px !important; + } + .m_dn { + display: none !important; + } + .m_di { + display: inline !important; + } + .m_db { + display: block !important; + } + .m_dib { + display: inline-block !important; + } + .m_dit { + display: inline-table !important; + } + .m_dt { + display: table !important; + } + .m_dtc { + display: table-cell !important; + } + .m_dt-row { + display: table-row !important; + } + .m_dt-row-group { + display: table-row-group !important; + } + .m_dt-column { + display: table-column !important; + } + .m_dt-column-group { + display: table-column-group !important; + } + .m_dt-fixed { + table-layout: fixed !important; + width: 100% !important; + } + .m_flex { + display: flex !important; + } + .m_inline-flex { + display: inline-flex !important; + } + .m_flex-auto { + flex: 1 1 auto !important; + } + .m_flex-1, + .m_flex-auto { + min-width: 0 !important; + min-height: 0 !important; + } + .m_flex-1 { + flex: 1 1 0% !important; + } + .m_flex-2 { + flex: 2 1 0% !important; + } + .m_flex-2, + .m_flex-3 { + min-width: 0 !important; + min-height: 0 !important; + } + .m_flex-3 { + flex: 3 1 0% !important; + } + .m_flex-none { + flex: none !important; + } + .m_flex-column { + flex-direction: column !important; + } + .m_flex-row { + flex-direction: row !important; + } + .m_flex-wrap { + flex-wrap: wrap !important; + } + .m_flex-nowrap { + flex-wrap: nowrap !important; + } + .m_flex-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .m_flex-column-reverse { + flex-direction: column-reverse !important; + } + .m_flex-row-reverse { + flex-direction: row-reverse !important; + } + .m_items-start { + align-items: flex-start !important; + } + .m_items-end { + align-items: flex-end !important; + } + .m_items-center { + align-items: center !important; + } + .m_items-baseline { + align-items: baseline !important; + } + .m_items-stretch { + align-items: stretch !important; + } + .m_self-start { + align-self: flex-start !important; + } + .m_self-end { + align-self: flex-end !important; + } + .m_self-center { + align-self: center !important; + } + .m_self-baseline { + align-self: baseline !important; + } + .m_self-stretch { + align-self: stretch !important; + } + .m_justify-start { + justify-content: flex-start !important; + } + .m_justify-end { + justify-content: flex-end !important; + } + .m_justify-center { + justify-content: center !important; + } + .m_justify-between { + justify-content: space-between !important; + } + .m_justify-around { + justify-content: space-around !important; + } + .m_content-start { + align-content: flex-start !important; + } + .m_content-end { + align-content: flex-end !important; + } + .m_content-center { + align-content: center !important; + } + .m_content-between { + align-content: space-between !important; + } + .m_content-around { + align-content: space-around !important; + } + .m_content-stretch { + align-content: stretch !important; + } + .m_order-0 { + order: 0 !important; + } + .m_order-1 { + order: 1 !important; + } + .m_order-2 { + order: 2 !important; + } + .m_order-3 { + order: 3 !important; + } + .m_order-4 { + order: 4 !important; + } + .m_order-5 { + order: 5 !important; + } + .m_order-6 { + order: 6 !important; + } + .m_order-7 { + order: 7 !important; + } + .m_order-8 { + order: 8 !important; + } + .m_order-last { + order: 99999 !important; + } + .m_flex-grow-0 { + flex-grow: 0 !important; + } + .m_flex-grow-1 { + flex-grow: 1 !important; + } + .m_flex-shrink-0 { + flex-shrink: 0 !important; + } + .m_flex-shrink-1 { + flex-shrink: 1 !important; + } + .m_normal { + font-weight: 400 !important; + } + .m_b { + font-weight: 700 !important; + } + .m_grid { + margin-left: -16px !important; + display: flex !important; + flex-wrap: wrap !important; + } + .m_grid > * { + padding-left: 16px !important; + width: 100% !important; + } + .m_grid-wide { + margin-left: -32px !important; + } + .m_grid-wide > * { + padding-left: 32px !important; + } + .m_grid-flush { + margin-left: 0 !important; + } + .m_grid-flush > * { + padding-left: 0 !important; + } + .m_col-1 { + width: 8.333333% !important; + } + .m_col-2 { + width: 16.666666% !important; + } + .m_col-3 { + width: 25% !important; + } + .m_col-4 { + width: 33.333333% !important; + } + .m_col-5 { + width: 41.666666% !important; + } + .m_col-6 { + width: 50% !important; + } + .m_col-7 { + width: 58.333333% !important; + } + .m_col-8 { + width: 66.666666% !important; + } + .m_col-9 { + width: 75% !important; + } + .m_col-10 { + width: 83.333333% !important; + } + .m_col-11 { + width: 91.666666% !important; + } + .m_col-12 { + width: 100% !important; + } + .m_h0 { + height: 0 !important; + } + .m_h1 { + height: 16px !important; + } + .m_h2 { + height: 24px !important; + } + .m_h3 { + height: 32px !important; + } + .m_h4 { + height: 64px !important; + } + .m_h5 { + height: 128px !important; + } + .m_h6 { + height: 256px !important; + } + .m_h-0 { + height: 0 !important; + } + .m_h-25 { + height: 25% !important; + } + .m_h-50 { + height: 50% !important; + } + .m_h-75 { + height: 75% !important; + } + .m_h-100 { + height: 100% !important; + } + .m_min-h-100 { + min-height: 100% !important; + } + .m_vh-25 { + height: 25vh !important; + } + .m_vh-50 { + height: 50vh !important; + } + .m_vh-75 { + height: 75vh !important; + } + .m_vh-100 { + height: 100vh !important; + } + .m_min-vh-100 { + min-height: 100vh !important; + } + .m_h-auto { + height: auto !important; + } + .m_h-inherit { + height: inherit !important; + } + .m_mw-100 { + max-width: 100% !important; + } + .m_mw1 { + max-width: 16px !important; + } + .m_mw2 { + max-width: 24px !important; + } + .m_mw3 { + max-width: 32px !important; + } + .m_mw4 { + max-width: 64px !important; + } + .m_mw5 { + max-width: 128px !important; + } + .m_mw6 { + max-width: 256px !important; + } + .m_mw7 { + max-width: 512px !important; + } + .m_mw8 { + max-width: 736px !important; + } + .m_mw9 { + max-width: 946px !important; + } + .m_mw-none { + max-width: none !important; + } + .m_ma0 { + margin: 0 !important; + } + .m_ma1 { + margin: 4px !important; + } + .m_ma2 { + margin: 8px !important; + } + .m_ma3 { + margin: 16px !important; + } + .m_ma4 { + margin: 24px !important; + } + .m_ma5 { + margin: 32px !important; + } + .m_ma6 { + margin: 64px !important; + } + .m_ma7 { + margin: 128px !important; + } + .m_ma8 { + margin: 256px !important; + } + .m_ml0 { + margin-left: 0 !important; + } + .m_ml1 { + margin-left: 4px !important; + } + .m_ml2 { + margin-left: 8px !important; + } + .m_ml3 { + margin-left: 16px !important; + } + .m_ml4 { + margin-left: 24px !important; + } + .m_ml5 { + margin-left: 32px !important; + } + .m_ml6 { + margin-left: 64px !important; + } + .m_ml7 { + margin-left: 128px !important; + } + .m_ml8 { + margin-left: 256px !important; + } + .m_mr0 { + margin-right: 0 !important; + } + .m_mr1 { + margin-right: 4px !important; + } + .m_mr2 { + margin-right: 8px !important; + } + .m_mr3 { + margin-right: 16px !important; + } + .m_mr4 { + margin-right: 24px !important; + } + .m_mr5 { + margin-right: 32px !important; + } + .m_mr6 { + margin-right: 64px !important; + } + .m_mr7 { + margin-right: 128px !important; + } + .m_mr8 { + margin-right: 256px !important; + } + .m_mb0 { + margin-bottom: 0 !important; + } + .m_mb1 { + margin-bottom: 4px !important; + } + .m_mb2 { + margin-bottom: 8px !important; + } + .m_mb3 { + margin-bottom: 16px !important; + } + .m_mb4 { + margin-bottom: 24px !important; + } + .m_mb5 { + margin-bottom: 32px !important; + } + .m_mb6 { + margin-bottom: 64px !important; + } + .m_mb7 { + margin-bottom: 128px !important; + } + .m_mb8 { + margin-bottom: 256px !important; + } + .m_mt0 { + margin-top: 0 !important; + } + .m_mt1 { + margin-top: 4px !important; + } + .m_mt2 { + margin-top: 8px !important; + } + .m_mt3 { + margin-top: 16px !important; + } + .m_mt4 { + margin-top: 24px !important; + } + .m_mt5 { + margin-top: 32px !important; + } + .m_mt6 { + margin-top: 64px !important; + } + .m_mt7 { + margin-top: 128px !important; + } + .m_mt8 { + margin-top: 256px !important; + } + .m_mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .m_mv1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .m_mv2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .m_mv3 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .m_mv4 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .m_mv5 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .m_mv6 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .m_mv7 { + margin-top: 128px !important; + margin-bottom: 128px !important; + } + .m_mv8 { + margin-top: 256px !important; + margin-bottom: 256px !important; + } + .m_mh0 { + margin-left: 0 !important; + margin-right: 0 !important; + } + .m_mh1 { + margin-left: 4px !important; + margin-right: 4px !important; + } + .m_mh2 { + margin-left: 8px !important; + margin-right: 8px !important; + } + .m_mh3 { + margin-left: 16px !important; + margin-right: 16px !important; + } + .m_mh4 { + margin-left: 24px !important; + margin-right: 24px !important; + } + .m_mh5 { + margin-left: 32px !important; + margin-right: 32px !important; + } + .m_mh6 { + margin-left: 64px !important; + margin-right: 64px !important; + } + .m_mh7 { + margin-left: 128px !important; + margin-right: 128px !important; + } + .m_mh8 { + margin-left: 256px !important; + margin-right: 256px !important; + } + .m_-ma1 { + margin: -4px !important; + } + .m_-ma2 { + margin: -8px !important; + } + .m_-ma3 { + margin: -16px !important; + } + .m_-ma4 { + margin: -24px !important; + } + .m_-ma5 { + margin: -32px !important; + } + .m_-ma6 { + margin: -64px !important; + } + .m_-ma7 { + margin: -128px !important; + } + .m_-ma8 { + margin: -256px !important; + } + .m_-ml1 { + margin-left: -4px !important; + } + .m_-ml2 { + margin-left: -8px !important; + } + .m_-ml3 { + margin-left: -16px !important; + } + .m_-ml4 { + margin-left: -24px !important; + } + .m_-ml5 { + margin-left: -32px !important; + } + .m_-ml6 { + margin-left: -64px !important; + } + .m_-ml7 { + margin-left: -128px !important; + } + .m_-ml8 { + margin-left: -256px !important; + } + .m_-mr1 { + margin-right: -4px !important; + } + .m_-mr2 { + margin-right: -8px !important; + } + .m_-mr3 { + margin-right: -16px !important; + } + .m_-mr4 { + margin-right: -24px !important; + } + .m_-mr5 { + margin-right: -32px !important; + } + .m_-mr6 { + margin-right: -64px !important; + } + .m_-mr7 { + margin-right: -128px !important; + } + .m_-mr8 { + margin-right: -256px !important; + } + .m_-mb1 { + margin-bottom: -4px !important; + } + .m_-mb2 { + margin-bottom: -8px !important; + } + .m_-mb3 { + margin-bottom: -16px !important; + } + .m_-mb4 { + margin-bottom: -24px !important; + } + .m_-mb5 { + margin-bottom: -32px !important; + } + .m_-mb6 { + margin-bottom: -64px !important; + } + .m_-mb7 { + margin-bottom: -128px !important; + } + .m_-mb8 { + margin-bottom: -256px !important; + } + .m_-mt1 { + margin-top: -4px !important; + } + .m_-mt2 { + margin-top: -8px !important; + } + .m_-mt3 { + margin-top: -16px !important; + } + .m_-mt4 { + margin-top: -24px !important; + } + .m_-mt5 { + margin-top: -32px !important; + } + .m_-mt6 { + margin-top: -64px !important; + } + .m_-mt7 { + margin-top: -128px !important; + } + .m_-mt8 { + margin-top: -256px !important; + } + .m_center { + margin-right: auto !important; + margin-left: auto !important; + } + .m_ma-auto { + margin: auto !important; + } + .m_mr-auto { + margin-right: auto !important; + } + .m_ml-auto { + margin-left: auto !important; + } + .m_mt-auto { + margin-top: auto !important; + } + .m_mb-auto { + margin-bottom: auto !important; + } + .m_overflow-visible { + overflow: visible !important; + } + .m_overflow-hidden { + overflow: hidden !important; + } + .m_overflow-scroll { + overflow: scroll !important; + } + .m_overflow-auto { + overflow: auto !important; + } + .m_overflow-x-visible { + overflow-x: visible !important; + } + .m_overflow-x-hidden { + overflow-x: hidden !important; + } + .m_overflow-x-scroll { + overflow-x: scroll !important; + } + .m_overflow-x-auto { + overflow-x: auto !important; + } + .m_overflow-y-visible { + overflow-y: visible !important; + } + .m_overflow-y-hidden { + overflow-y: hidden !important; + } + .m_overflow-y-scroll { + overflow-y: scroll !important; + } + .m_overflow-y-auto { + overflow-y: auto !important; + } + .m_pa0 { + padding: 0 !important; + } + .m_pa1 { + padding: 4px !important; + } + .m_pa2 { + padding: 8px !important; + } + .m_pa3 { + padding: 16px !important; + } + .m_pa4 { + padding: 24px !important; + } + .m_pa5 { + padding: 32px !important; + } + .m_pa6 { + padding: 64px !important; + } + .m_pa7 { + padding: 128px !important; + } + .m_pa8 { + padding: 256px !important; + } + .m_pl0 { + padding-left: 0 !important; + } + .m_pl1 { + padding-left: 4px !important; + } + .m_pl2 { + padding-left: 8px !important; + } + .m_pl3 { + padding-left: 16px !important; + } + .m_pl4 { + padding-left: 24px !important; + } + .m_pl5 { + padding-left: 32px !important; + } + .m_pl6 { + padding-left: 64px !important; + } + .m_pl7 { + padding-left: 128px !important; + } + .m_pl8 { + padding-left: 256px !important; + } + .m_pr0 { + padding-right: 0 !important; + } + .m_pr1 { + padding-right: 4px !important; + } + .m_pr2 { + padding-right: 8px !important; + } + .m_pr3 { + padding-right: 16px !important; + } + .m_pr4 { + padding-right: 24px !important; + } + .m_pr5 { + padding-right: 32px !important; + } + .m_pr6 { + padding-right: 64px !important; + } + .m_pr7 { + padding-right: 128px !important; + } + .m_pr8 { + padding-right: 256px !important; + } + .m_pb0 { + padding-bottom: 0 !important; + } + .m_pb1 { + padding-bottom: 4px !important; + } + .m_pb2 { + padding-bottom: 8px !important; + } + .m_pb3 { + padding-bottom: 16px !important; + } + .m_pb4 { + padding-bottom: 24px !important; + } + .m_pb5 { + padding-bottom: 32px !important; + } + .m_pb6 { + padding-bottom: 64px !important; + } + .m_pb7 { + padding-bottom: 128px !important; + } + .m_pb8 { + padding-bottom: 256px !important; + } + .m_pt0 { + padding-top: 0 !important; + } + .m_pt1 { + padding-top: 4px !important; + } + .m_pt2 { + padding-top: 8px !important; + } + .m_pt3 { + padding-top: 16px !important; + } + .m_pt4 { + padding-top: 24px !important; + } + .m_pt5 { + padding-top: 32px !important; + } + .m_pt6 { + padding-top: 64px !important; + } + .m_pt7 { + padding-top: 128px !important; + } + .m_pt8 { + padding-top: 256px !important; + } + .m_pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .m_pv1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .m_pv2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .m_pv3 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .m_pv4 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .m_pv5 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .m_pv6 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .m_pv7 { + padding-top: 128px !important; + padding-bottom: 128px !important; + } + .m_pv8 { + padding-top: 256px !important; + padding-bottom: 256px !important; + } + .m_ph0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + .m_ph1 { + padding-left: 4px !important; + padding-right: 4px !important; + } + .m_ph2 { + padding-left: 8px !important; + padding-right: 8px !important; + } + .m_ph3 { + padding-left: 16px !important; + padding-right: 16px !important; + } + .m_ph4 { + padding-left: 24px !important; + padding-right: 24px !important; + } + .m_ph5 { + padding-left: 32px !important; + padding-right: 32px !important; + } + .m_ph6 { + padding-left: 64px !important; + padding-right: 64px !important; + } + .m_ph7 { + padding-left: 128px !important; + padding-right: 128px !important; + } + .m_ph8 { + padding-left: 256px !important; + padding-right: 256px !important; + } + .m_static { + position: static !important; + } + .m_relative { + position: relative !important; + } + .m_absolute { + position: absolute !important; + } + .m_fixed { + position: fixed !important; + } + .m_tl { + text-align: left !important; + } + .m_tr { + text-align: right !important; + } + .m_tc { + text-align: center !important; + } + .m_tj { + text-align: justify !important; + } + .m_strike { + text-decoration: line-through !important; + } + .m_underline { + text-decoration: underline !important; + } + .m_no-underline { + text-decoration: none !important; + } + .m_ttc { + text-transform: capitalize !important; + } + .m_ttl { + text-transform: lowercase !important; + } + .m_ttu { + text-transform: uppercase !important; + } + .m_ttn { + text-transform: none !important; + } + .m_truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } + .m_v-base { + vertical-align: baseline !important; + } + .m_v-mid { + vertical-align: middle !important; + } + .m_v-top { + vertical-align: top !important; + } + .m_v-btm { + vertical-align: bottom !important; + } + .m_visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; + } + .m_ws-normal { + white-space: normal !important; + } + .m_nowrap { + white-space: nowrap !important; + } + .m_pre { + white-space: pre !important; + } + .m_w1 { + width: 16px !important; + } + .m_w2 { + width: 24px !important; + } + .m_w3 { + width: 32px !important; + } + .m_w4 { + width: 64px !important; + } + .m_w5 { + width: 128px !important; + } + .m_w6 { + width: 256px !important; + } + .m_w-10 { + width: 10% !important; + } + .m_w-20 { + width: 20% !important; + } + .m_w-25 { + width: 25% !important; + } + .m_w-30 { + width: 30% !important; + } + .m_w-33 { + width: 33.333333% !important; + } + .m_w-40 { + width: 40% !important; + } + .m_w-50 { + width: 50% !important; + } + .m_w-60 { + width: 60% !important; + } + .m_w-66 { + width: 66.666666% !important; + } + .m_w-70 { + width: 70% !important; + } + .m_w-75 { + width: 75% !important; + } + .m_w-80 { + width: 80% !important; + } + .m_w-90 { + width: 90% !important; + } + .m_w-100 { + width: 100% !important; + } + .m_w-auto { + width: auto !important; + } + .m_word-normal { + word-break: normal !important; + } + .m_word-wrap { + word-break: break-all !important; + } + .m_word-nowrap { + word-break: keep-all !important; + } +} +@media (min-width: 1026px) { + .l_bg-center { + background-position: 50% !important; + } + .l_bg-center, + .l_bg-top { + background-repeat: no-repeat !important; + } + .l_bg-top { + background-position: top !important; + } + .l_bg-right { + background-position: 100% !important; + } + .l_bg-bottom, + .l_bg-right { + background-repeat: no-repeat !important; + } + .l_bg-bottom { + background-position: bottom !important; + } + .l_bg-left { + background-repeat: no-repeat !important; + background-position: 0 !important; + } + .l_cover { + background-size: cover !important; + } + .l_contain { + background-size: contain !important; + } + .l_ba { + border-style: solid !important; + border-width: 1px !important; + } + .l_bt { + border-top-style: solid !important; + border-top-width: 1px !important; + } + .l_br { + border-right-style: solid !important; + border-right-width: 1px !important; + } + .l_bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; + } + .l_bl { + border-left-style: solid !important; + border-left-width: 1px !important; + } + .l_bn { + border-style: none !important; + border-width: 0 !important; + } + .l_br0 { + border-radius: 0 !important; + } + .l_br1 { + border-radius: 2px !important; + } + .l_br2 { + border-radius: 4px !important; + } + .l_br3 { + border-radius: 6px !important; + } + .l_br-100 { + border-radius: 50% !important; + } + .l_br-pill { + border-radius: 9999px !important; + } + .l_br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + .l_br-top { + border-bottom-right-radius: 0 !important; + } + .l_br-right, + .l_br-top { + border-bottom-left-radius: 0 !important; + } + .l_br-right { + border-top-left-radius: 0 !important; + } + .l_br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + .l_b-dotted { + border-style: dotted !important; + } + .l_b-dashed { + border-style: dashed !important; + } + .l_b-solid { + border-style: solid !important; + } + .l_b-none { + border-style: none !important; + } + .l_bw-0 { + border-width: 0 !important; + } + .l_bw-1 { + border-width: 1px !important; + } + .l_bw-2 { + border-width: 2px !important; + } + .l_bw-3 { + border-width: 3px !important; + } + .l_bw-4 { + border-width: 4px !important; + } + .l_bt-0 { + border-top-width: 0 !important; + } + .l_br-0 { + border-right-width: 0 !important; + } + .l_bb-0 { + border-bottom-width: 0 !important; + } + .l_bl-0 { + border-left-width: 0 !important; + } + .l_top0 { + top: 0 !important; + } + .l_right0 { + right: 0 !important; + } + .l_bottom0 { + bottom: 0 !important; + } + .l_left0 { + left: 0 !important; + } + .l_top1 { + top: 8px !important; + } + .l_right1 { + right: 8px !important; + } + .l_bottom1 { + bottom: 8px !important; + } + .l_left1 { + left: 8px !important; + } + .l_top2 { + top: 16px !important; + } + .l_right2 { + right: 16px !important; + } + .l_bottom2 { + bottom: 16px !important; + } + .l_left2 { + left: 16px !important; + } + .l_-top1 { + top: -8px !important; + } + .l_-right1 { + right: -8px !important; + } + .l_-bottom1 { + bottom: -8px !important; + } + .l_-left1 { + left: -8px !important; + } + .l_-top2 { + top: -16px !important; + } + .l_-right2 { + right: -16px !important; + } + .l_-bottom2 { + bottom: -16px !important; + } + .l_-left2 { + left: -16px !important; + } + .l_absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + } + .l_top-0 { + top: 0 !important; + } + .l_top-1 { + top: 1px !important; + } + .l_top-2 { + top: 2px !important; + } + .l_top-3 { + top: 3px !important; + } + .l_top-4 { + top: 4px !important; + } + .l_top-5 { + top: 5px !important; + } + .l_right-0 { + right: 0 !important; + } + .l_right-1 { + right: 1px !important; + } + .l_right-2 { + right: 2px !important; + } + .l_right-3 { + right: 3px !important; + } + .l_right-4 { + right: 4px !important; + } + .l_right-5 { + right: 5px !important; + } + .l_bottom-0 { + bottom: 0 !important; + } + .l_bottom-1 { + bottom: 1px !important; + } + .l_bottom-2 { + bottom: 2px !important; + } + .l_bottom-3 { + bottom: 3px !important; + } + .l_bottom-4 { + bottom: 4px !important; + } + .l_bottom-5 { + bottom: 5px !important; + } + .l_left-0 { + left: 0 !important; + } + .l_left-1 { + left: 1px !important; + } + .l_left-2 { + left: 2px !important; + } + .l_left-3 { + left: 3px !important; + } + .l_left-4 { + left: 4px !important; + } + .l_left-5 { + left: 5px !important; + } + .l_-top-1 { + top: -1px !important; + } + .l_-top-2 { + top: -2px !important; + } + .l_-top-3 { + top: -3px !important; + } + .l_-top-4 { + top: -4px !important; + } + .l_-top-5 { + top: -5px !important; + } + .l_-right-1 { + right: -1px !important; + } + .l_-right-2 { + right: -2px !important; + } + .l_-right-3 { + right: -3px !important; + } + .l_-right-4 { + right: -4px !important; + } + .l_-right-5 { + right: -5px !important; + } + .l_-bottom-1 { + bottom: -1px !important; + } + .l_-bottom-2 { + bottom: -2px !important; + } + .l_-bottom-3 { + bottom: -3px !important; + } + .l_-bottom-4 { + bottom: -4px !important; + } + .l_-bottom-5 { + bottom: -5px !important; + } + .l_-left-1 { + left: -1px !important; + } + .l_-left-2 { + left: -2px !important; + } + .l_-left-3 { + left: -3px !important; + } + .l_-left-4 { + left: -4px !important; + } + .l_-left-5 { + left: -5px !important; + } + .l_dn { + display: none !important; + } + .l_di { + display: inline !important; + } + .l_db { + display: block !important; + } + .l_dib { + display: inline-block !important; + } + .l_dit { + display: inline-table !important; + } + .l_dt { + display: table !important; + } + .l_dtc { + display: table-cell !important; + } + .l_dt-row { + display: table-row !important; + } + .l_dt-row-group { + display: table-row-group !important; + } + .l_dt-column { + display: table-column !important; + } + .l_dt-column-group { + display: table-column-group !important; + } + .l_dt-fixed { + table-layout: fixed !important; + width: 100% !important; + } + .l_flex { + display: flex !important; + } + .l_inline-flex { + display: inline-flex !important; + } + .l_flex-auto { + flex: 1 1 auto !important; + } + .l_flex-1, + .l_flex-auto { + min-width: 0 !important; + min-height: 0 !important; + } + .l_flex-1 { + flex: 1 1 0% !important; + } + .l_flex-2 { + flex: 2 1 0% !important; + } + .l_flex-2, + .l_flex-3 { + min-width: 0 !important; + min-height: 0 !important; + } + .l_flex-3 { + flex: 3 1 0% !important; + } + .l_flex-none { + flex: none !important; + } + .l_flex-column { + flex-direction: column !important; + } + .l_flex-row { + flex-direction: row !important; + } + .l_flex-wrap { + flex-wrap: wrap !important; + } + .l_flex-nowrap { + flex-wrap: nowrap !important; + } + .l_flex-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .l_flex-column-reverse { + flex-direction: column-reverse !important; + } + .l_flex-row-reverse { + flex-direction: row-reverse !important; + } + .l_items-start { + align-items: flex-start !important; + } + .l_items-end { + align-items: flex-end !important; + } + .l_items-center { + align-items: center !important; + } + .l_items-baseline { + align-items: baseline !important; + } + .l_items-stretch { + align-items: stretch !important; + } + .l_self-start { + align-self: flex-start !important; + } + .l_self-end { + align-self: flex-end !important; + } + .l_self-center { + align-self: center !important; + } + .l_self-baseline { + align-self: baseline !important; + } + .l_self-stretch { + align-self: stretch !important; + } + .l_justify-start { + justify-content: flex-start !important; + } + .l_justify-end { + justify-content: flex-end !important; + } + .l_justify-center { + justify-content: center !important; + } + .l_justify-between { + justify-content: space-between !important; + } + .l_justify-around { + justify-content: space-around !important; + } + .l_content-start { + align-content: flex-start !important; + } + .l_content-end { + align-content: flex-end !important; + } + .l_content-center { + align-content: center !important; + } + .l_content-between { + align-content: space-between !important; + } + .l_content-around { + align-content: space-around !important; + } + .l_content-stretch { + align-content: stretch !important; + } + .l_order-0 { + order: 0 !important; + } + .l_order-1 { + order: 1 !important; + } + .l_order-2 { + order: 2 !important; + } + .l_order-3 { + order: 3 !important; + } + .l_order-4 { + order: 4 !important; + } + .l_order-5 { + order: 5 !important; + } + .l_order-6 { + order: 6 !important; + } + .l_order-7 { + order: 7 !important; + } + .l_order-8 { + order: 8 !important; + } + .l_order-last { + order: 99999 !important; + } + .l_flex-grow-0 { + flex-grow: 0 !important; + } + .l_flex-grow-1 { + flex-grow: 1 !important; + } + .l_flex-shrink-0 { + flex-shrink: 0 !important; + } + .l_flex-shrink-1 { + flex-shrink: 1 !important; + } + .l_normal { + font-weight: 400 !important; + } + .l_b { + font-weight: 700 !important; + } + .l_grid { + margin-left: -16px !important; + display: flex !important; + flex-wrap: wrap !important; + } + .l_grid > * { + padding-left: 16px !important; + width: 100% !important; + } + .l_grid-wide { + margin-left: -32px !important; + } + .l_grid-wide > * { + padding-left: 32px !important; + } + .l_grid-flush { + margin-left: 0 !important; + } + .l_grid-flush > * { + padding-left: 0 !important; + } + .l_col-1 { + width: 8.333333% !important; + } + .l_col-2 { + width: 16.666666% !important; + } + .l_col-3 { + width: 25% !important; + } + .l_col-4 { + width: 33.333333% !important; + } + .l_col-5 { + width: 41.666666% !important; + } + .l_col-6 { + width: 50% !important; + } + .l_col-7 { + width: 58.333333% !important; + } + .l_col-8 { + width: 66.666666% !important; + } + .l_col-9 { + width: 75% !important; + } + .l_col-10 { + width: 83.333333% !important; + } + .l_col-11 { + width: 91.666666% !important; + } + .l_col-12 { + width: 100% !important; + } + .l_h0 { + height: 0 !important; + } + .l_h1 { + height: 16px !important; + } + .l_h2 { + height: 24px !important; + } + .l_h3 { + height: 32px !important; + } + .l_h4 { + height: 64px !important; + } + .l_h5 { + height: 128px !important; + } + .l_h6 { + height: 256px !important; + } + .l_h-0 { + height: 0 !important; + } + .l_h-25 { + height: 25% !important; + } + .l_h-50 { + height: 50% !important; + } + .l_h-75 { + height: 75% !important; + } + .l_h-100 { + height: 100% !important; + } + .l_min-h-100 { + min-height: 100% !important; + } + .l_vh-25 { + height: 25vh !important; + } + .l_vh-50 { + height: 50vh !important; + } + .l_vh-75 { + height: 75vh !important; + } + .l_vh-100 { + height: 100vh !important; + } + .l_min-vh-100 { + min-height: 100vh !important; + } + .l_h-auto { + height: auto !important; + } + .l_h-inherit { + height: inherit !important; + } + .l_mw-100 { + max-width: 100% !important; + } + .l_mw1 { + max-width: 16px !important; + } + .l_mw2 { + max-width: 24px !important; + } + .l_mw3 { + max-width: 32px !important; + } + .l_mw4 { + max-width: 64px !important; + } + .l_mw5 { + max-width: 128px !important; + } + .l_mw6 { + max-width: 256px !important; + } + .l_mw7 { + max-width: 512px !important; + } + .l_mw8 { + max-width: 736px !important; + } + .l_mw9 { + max-width: 946px !important; + } + .l_mw-none { + max-width: none !important; + } + .l_ma0 { + margin: 0 !important; + } + .l_ma1 { + margin: 4px !important; + } + .l_ma2 { + margin: 8px !important; + } + .l_ma3 { + margin: 16px !important; + } + .l_ma4 { + margin: 24px !important; + } + .l_ma5 { + margin: 32px !important; + } + .l_ma6 { + margin: 64px !important; + } + .l_ma7 { + margin: 128px !important; + } + .l_ma8 { + margin: 256px !important; + } + .l_ml0 { + margin-left: 0 !important; + } + .l_ml1 { + margin-left: 4px !important; + } + .l_ml2 { + margin-left: 8px !important; + } + .l_ml3 { + margin-left: 16px !important; + } + .l_ml4 { + margin-left: 24px !important; + } + .l_ml5 { + margin-left: 32px !important; + } + .l_ml6 { + margin-left: 64px !important; + } + .l_ml7 { + margin-left: 128px !important; + } + .l_ml8 { + margin-left: 256px !important; + } + .l_mr0 { + margin-right: 0 !important; + } + .l_mr1 { + margin-right: 4px !important; + } + .l_mr2 { + margin-right: 8px !important; + } + .l_mr3 { + margin-right: 16px !important; + } + .l_mr4 { + margin-right: 24px !important; + } + .l_mr5 { + margin-right: 32px !important; + } + .l_mr6 { + margin-right: 64px !important; + } + .l_mr7 { + margin-right: 128px !important; + } + .l_mr8 { + margin-right: 256px !important; + } + .l_mb0 { + margin-bottom: 0 !important; + } + .l_mb1 { + margin-bottom: 4px !important; + } + .l_mb2 { + margin-bottom: 8px !important; + } + .l_mb3 { + margin-bottom: 16px !important; + } + .l_mb4 { + margin-bottom: 24px !important; + } + .l_mb5 { + margin-bottom: 32px !important; + } + .l_mb6 { + margin-bottom: 64px !important; + } + .l_mb7 { + margin-bottom: 128px !important; + } + .l_mb8 { + margin-bottom: 256px !important; + } + .l_mt0 { + margin-top: 0 !important; + } + .l_mt1 { + margin-top: 4px !important; + } + .l_mt2 { + margin-top: 8px !important; + } + .l_mt3 { + margin-top: 16px !important; + } + .l_mt4 { + margin-top: 24px !important; + } + .l_mt5 { + margin-top: 32px !important; + } + .l_mt6 { + margin-top: 64px !important; + } + .l_mt7 { + margin-top: 128px !important; + } + .l_mt8 { + margin-top: 256px !important; + } + .l_mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + .l_mv1 { + margin-top: 4px !important; + margin-bottom: 4px !important; + } + .l_mv2 { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + .l_mv3 { + margin-top: 16px !important; + margin-bottom: 16px !important; + } + .l_mv4 { + margin-top: 24px !important; + margin-bottom: 24px !important; + } + .l_mv5 { + margin-top: 32px !important; + margin-bottom: 32px !important; + } + .l_mv6 { + margin-top: 64px !important; + margin-bottom: 64px !important; + } + .l_mv7 { + margin-top: 128px !important; + margin-bottom: 128px !important; + } + .l_mv8 { + margin-top: 256px !important; + margin-bottom: 256px !important; + } + .l_mh0 { + margin-left: 0 !important; + margin-right: 0 !important; + } + .l_mh1 { + margin-left: 4px !important; + margin-right: 4px !important; + } + .l_mh2 { + margin-left: 8px !important; + margin-right: 8px !important; + } + .l_mh3 { + margin-left: 16px !important; + margin-right: 16px !important; + } + .l_mh4 { + margin-left: 24px !important; + margin-right: 24px !important; + } + .l_mh5 { + margin-left: 32px !important; + margin-right: 32px !important; + } + .l_mh6 { + margin-left: 64px !important; + margin-right: 64px !important; + } + .l_mh7 { + margin-left: 128px !important; + margin-right: 128px !important; + } + .l_mh8 { + margin-left: 256px !important; + margin-right: 256px !important; + } + .l_-ma1 { + margin: -4px !important; + } + .l_-ma2 { + margin: -8px !important; + } + .l_-ma3 { + margin: -16px !important; + } + .l_-ma4 { + margin: -24px !important; + } + .l_-ma5 { + margin: -32px !important; + } + .l_-ma6 { + margin: -64px !important; + } + .l_-ma7 { + margin: -128px !important; + } + .l_-ma8 { + margin: -256px !important; + } + .l_-ml1 { + margin-left: -4px !important; + } + .l_-ml2 { + margin-left: -8px !important; + } + .l_-ml3 { + margin-left: -16px !important; + } + .l_-ml4 { + margin-left: -24px !important; + } + .l_-ml5 { + margin-left: -32px !important; + } + .l_-ml6 { + margin-left: -64px !important; + } + .l_-ml7 { + margin-left: -128px !important; + } + .l_-ml8 { + margin-left: -256px !important; + } + .l_-mr1 { + margin-right: -4px !important; + } + .l_-mr2 { + margin-right: -8px !important; + } + .l_-mr3 { + margin-right: -16px !important; + } + .l_-mr4 { + margin-right: -24px !important; + } + .l_-mr5 { + margin-right: -32px !important; + } + .l_-mr6 { + margin-right: -64px !important; + } + .l_-mr7 { + margin-right: -128px !important; + } + .l_-mr8 { + margin-right: -256px !important; + } + .l_-mb1 { + margin-bottom: -4px !important; + } + .l_-mb2 { + margin-bottom: -8px !important; + } + .l_-mb3 { + margin-bottom: -16px !important; + } + .l_-mb4 { + margin-bottom: -24px !important; + } + .l_-mb5 { + margin-bottom: -32px !important; + } + .l_-mb6 { + margin-bottom: -64px !important; + } + .l_-mb7 { + margin-bottom: -128px !important; + } + .l_-mb8 { + margin-bottom: -256px !important; + } + .l_-mt1 { + margin-top: -4px !important; + } + .l_-mt2 { + margin-top: -8px !important; + } + .l_-mt3 { + margin-top: -16px !important; + } + .l_-mt4 { + margin-top: -24px !important; + } + .l_-mt5 { + margin-top: -32px !important; + } + .l_-mt6 { + margin-top: -64px !important; + } + .l_-mt7 { + margin-top: -128px !important; + } + .l_-mt8 { + margin-top: -256px !important; + } + .l_center { + margin-right: auto !important; + margin-left: auto !important; + } + .l_ma-auto { + margin: auto !important; + } + .l_mr-auto { + margin-right: auto !important; + } + .l_ml-auto { + margin-left: auto !important; + } + .l_mt-auto { + margin-top: auto !important; + } + .l_mb-auto { + margin-bottom: auto !important; + } + .l_overflow-visible { + overflow: visible !important; + } + .l_overflow-hidden { + overflow: hidden !important; + } + .l_overflow-scroll { + overflow: scroll !important; + } + .l_overflow-auto { + overflow: auto !important; + } + .l_overflow-x-visible { + overflow-x: visible !important; + } + .l_overflow-x-hidden { + overflow-x: hidden !important; + } + .l_overflow-x-scroll { + overflow-x: scroll !important; + } + .l_overflow-x-auto { + overflow-x: auto !important; + } + .l_overflow-y-visible { + overflow-y: visible !important; + } + .l_overflow-y-hidden { + overflow-y: hidden !important; + } + .l_overflow-y-scroll { + overflow-y: scroll !important; + } + .l_overflow-y-auto { + overflow-y: auto !important; + } + .l_pa0 { + padding: 0 !important; + } + .l_pa1 { + padding: 4px !important; + } + .l_pa2 { + padding: 8px !important; + } + .l_pa3 { + padding: 16px !important; + } + .l_pa4 { + padding: 24px !important; + } + .l_pa5 { + padding: 32px !important; + } + .l_pa6 { + padding: 64px !important; + } + .l_pa7 { + padding: 128px !important; + } + .l_pa8 { + padding: 256px !important; + } + .l_pl0 { + padding-left: 0 !important; + } + .l_pl1 { + padding-left: 4px !important; + } + .l_pl2 { + padding-left: 8px !important; + } + .l_pl3 { + padding-left: 16px !important; + } + .l_pl4 { + padding-left: 24px !important; + } + .l_pl5 { + padding-left: 32px !important; + } + .l_pl6 { + padding-left: 64px !important; + } + .l_pl7 { + padding-left: 128px !important; + } + .l_pl8 { + padding-left: 256px !important; + } + .l_pr0 { + padding-right: 0 !important; + } + .l_pr1 { + padding-right: 4px !important; + } + .l_pr2 { + padding-right: 8px !important; + } + .l_pr3 { + padding-right: 16px !important; + } + .l_pr4 { + padding-right: 24px !important; + } + .l_pr5 { + padding-right: 32px !important; + } + .l_pr6 { + padding-right: 64px !important; + } + .l_pr7 { + padding-right: 128px !important; + } + .l_pr8 { + padding-right: 256px !important; + } + .l_pb0 { + padding-bottom: 0 !important; + } + .l_pb1 { + padding-bottom: 4px !important; + } + .l_pb2 { + padding-bottom: 8px !important; + } + .l_pb3 { + padding-bottom: 16px !important; + } + .l_pb4 { + padding-bottom: 24px !important; + } + .l_pb5 { + padding-bottom: 32px !important; + } + .l_pb6 { + padding-bottom: 64px !important; + } + .l_pb7 { + padding-bottom: 128px !important; + } + .l_pb8 { + padding-bottom: 256px !important; + } + .l_pt0 { + padding-top: 0 !important; + } + .l_pt1 { + padding-top: 4px !important; + } + .l_pt2 { + padding-top: 8px !important; + } + .l_pt3 { + padding-top: 16px !important; + } + .l_pt4 { + padding-top: 24px !important; + } + .l_pt5 { + padding-top: 32px !important; + } + .l_pt6 { + padding-top: 64px !important; + } + .l_pt7 { + padding-top: 128px !important; + } + .l_pt8 { + padding-top: 256px !important; + } + .l_pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .l_pv1 { + padding-top: 4px !important; + padding-bottom: 4px !important; + } + .l_pv2 { + padding-top: 8px !important; + padding-bottom: 8px !important; + } + .l_pv3 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } + .l_pv4 { + padding-top: 24px !important; + padding-bottom: 24px !important; + } + .l_pv5 { + padding-top: 32px !important; + padding-bottom: 32px !important; + } + .l_pv6 { + padding-top: 64px !important; + padding-bottom: 64px !important; + } + .l_pv7 { + padding-top: 128px !important; + padding-bottom: 128px !important; + } + .l_pv8 { + padding-top: 256px !important; + padding-bottom: 256px !important; + } + .l_ph0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + .l_ph1 { + padding-left: 4px !important; + padding-right: 4px !important; + } + .l_ph2 { + padding-left: 8px !important; + padding-right: 8px !important; + } + .l_ph3 { + padding-left: 16px !important; + padding-right: 16px !important; + } + .l_ph4 { + padding-left: 24px !important; + padding-right: 24px !important; + } + .l_ph5 { + padding-left: 32px !important; + padding-right: 32px !important; + } + .l_ph6 { + padding-left: 64px !important; + padding-right: 64px !important; + } + .l_ph7 { + padding-left: 128px !important; + padding-right: 128px !important; + } + .l_ph8 { + padding-left: 256px !important; + padding-right: 256px !important; + } + .l_static { + position: static !important; + } + .l_relative { + position: relative !important; + } + .l_absolute { + position: absolute !important; + } + .l_fixed { + position: fixed !important; + } + .l_tl { + text-align: left !important; + } + .l_tr { + text-align: right !important; + } + .l_tc { + text-align: center !important; + } + .l_tj { + text-align: justify !important; + } + .l_strike { + text-decoration: line-through !important; + } + .l_underline { + text-decoration: underline !important; + } + .l_no-underline { + text-decoration: none !important; + } + .l_ttc { + text-transform: capitalize !important; + } + .l_ttl { + text-transform: lowercase !important; + } + .l_ttu { + text-transform: uppercase !important; + } + .l_ttn { + text-transform: none !important; + } + .l_truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } + .l_v-base { + vertical-align: baseline !important; + } + .l_v-mid { + vertical-align: middle !important; + } + .l_v-top { + vertical-align: top !important; + } + .l_v-btm { + vertical-align: bottom !important; + } + .l_visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; + } + .l_ws-normal { + white-space: normal !important; + } + .l_nowrap { + white-space: nowrap !important; + } + .l_pre { + white-space: pre !important; + } + .l_w1 { + width: 16px !important; + } + .l_w2 { + width: 24px !important; + } + .l_w3 { + width: 32px !important; + } + .l_w4 { + width: 64px !important; + } + .l_w5 { + width: 128px !important; + } + .l_w6 { + width: 256px !important; + } + .l_w-10 { + width: 10% !important; + } + .l_w-20 { + width: 20% !important; + } + .l_w-25 { + width: 25% !important; + } + .l_w-30 { + width: 30% !important; + } + .l_w-33 { + width: 33.333333% !important; + } + .l_w-40 { + width: 40% !important; + } + .l_w-50 { + width: 50% !important; + } + .l_w-60 { + width: 60% !important; + } + .l_w-66 { + width: 66.666666% !important; + } + .l_w-70 { + width: 70% !important; + } + .l_w-75 { + width: 75% !important; + } + .l_w-80 { + width: 80% !important; + } + .l_w-90 { + width: 90% !important; + } + .l_w-100 { + width: 100% !important; + } + .l_w-auto { + width: auto !important; + } + .l_word-normal { + word-break: normal !important; + } + .l_word-wrap { + word-break: break-all !important; + } + .l_word-nowrap { + word-break: keep-all !important; + } +} +/*# sourceMappingURL=atomic.css.map */ +" +`; diff --git a/packages/thumbprint-atomic/package.json b/packages/thumbprint-atomic/package.json new file mode 100644 index 000000000..fb413ca56 --- /dev/null +++ b/packages/thumbprint-atomic/package.json @@ -0,0 +1,31 @@ +{ + "name": "@thumbtack/thumbprint-atomic", + "description": "Atomic classes for building Thumbtack UI", + "version": "3.1.1", + "author": "Tom Genoni ", + "main": "dist/atomic.css", + "style": "dist/atomic.css", + "files": [ + "dist" + ], + "publishConfig": { + "registry": "https://registry.npmjs.org/", + "access": "public" + }, + "license": "UNLICENSED", + "scripts": { + "start": "yarn clear && yarn generateCss", + "clear": "rm -rf dist", + "generateCss": "mkdir -p dist && node-sass -q src/atomic.scss dist/atomic.css && postcss dist/atomic.css --map --use autoprefixer css-mqpacker cssnano --replace", + "prepublishOnly": "../../scripts/should-build-package.js -- yarn start" + }, + "devDependencies": { + "@thumbtack/thumbprint-tokens": "^6.2.3", + "@thumbtack/tp-ui-core-mixin": "^3.0.3", + "autoprefixer": "^9.0.1", + "css-mqpacker": "^7.0.0", + "cssnano": "^4.1.0", + "node-sass": "^4.9.2", + "postcss-cli": "^6.1.1" + } +} diff --git a/packages/thumbprint-atomic/src/atomic.scss b/packages/thumbprint-atomic/src/atomic.scss new file mode 100644 index 000000000..b30c699b3 --- /dev/null +++ b/packages/thumbprint-atomic/src/atomic.scss @@ -0,0 +1,30 @@ +@import 'packages/aspect-ratio.scss'; +@import 'packages/background-position.scss'; +@import 'packages/background-size.scss'; +@import 'packages/border.scss'; +@import 'packages/border-color.scss'; +@import 'packages/border-radius.scss'; +@import 'packages/border-style.scss'; +@import 'packages/border-width.scss'; +@import 'packages/color.scss'; +@import 'packages/coordinates.scss'; +@import 'packages/display.scss'; +@import 'packages/flexbox.scss'; +@import 'packages/font-weight.scss'; +@import 'packages/grid.scss'; +@import 'packages/height.scss'; +@import 'packages/max-width.scss'; +@import 'packages/margin.scss'; +@import 'packages/overflow.scss'; +@import 'packages/padding.scss'; +@import 'packages/position.scss'; +@import 'packages/text-align.scss'; +@import 'packages/text-decoration.scss'; +@import 'packages/text-transform.scss'; +@import 'packages/truncate.scss'; +@import 'packages/vertical-align.scss'; +@import 'packages/visually-hidden.scss'; +@import 'packages/white-space.scss'; +@import 'packages/width.scss'; +@import 'packages/word-break.scss'; +@import 'packages/z-index.scss'; diff --git a/packages/thumbprint-atomic/src/packages/aspect-ratio.scss b/packages/thumbprint-atomic/src/packages/aspect-ratio.scss new file mode 100644 index 000000000..a42916afa --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/aspect-ratio.scss @@ -0,0 +1,30 @@ +.aspect-ratio { + height: 0 !important; + position: relative !important; +} + +.aspect-ratio-16x9 { + padding-bottom: 56.25% !important; +} + +.aspect-ratio-8x5 { + padding-bottom: 62.5% !important; +} + +.aspect-ratio-7x3 { + padding-bottom: 42.86% !important; +} + +.aspect-ratio-1x1 { + padding-bottom: 100% !important; +} + +.aspect-ratio-object { + position: absolute !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; +} diff --git a/packages/thumbprint-atomic/src/packages/background-position.scss b/packages/thumbprint-atomic/src/packages/background-position.scss new file mode 100644 index 000000000..277faa100 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/background-position.scss @@ -0,0 +1,108 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.bg-center { + background-repeat: no-repeat !important; + background-position: center center !important; +} + +.bg-top { + background-repeat: no-repeat !important; + background-position: top center !important; +} + +.bg-right { + background-repeat: no-repeat !important; + background-position: center right !important; +} + +.bg-bottom { + background-repeat: no-repeat !important; + background-position: bottom center !important; +} + +.bg-left { + background-repeat: no-repeat !important; + background-position: center left !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_bg-center { + background-repeat: no-repeat !important; + background-position: center center !important; + } + + .s_bg-top { + background-repeat: no-repeat !important; + background-position: top center !important; + } + + .s_bg-right { + background-repeat: no-repeat !important; + background-position: center right !important; + } + + .s_bg-bottom { + background-repeat: no-repeat !important; + background-position: bottom center !important; + } + + .s_bg-left { + background-repeat: no-repeat !important; + background-position: center left !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_bg-center { + background-repeat: no-repeat !important; + background-position: center center !important; + } + + .m_bg-top { + background-repeat: no-repeat !important; + background-position: top center !important; + } + + .m_bg-right { + background-repeat: no-repeat !important; + background-position: center right !important; + } + + .m_bg-bottom { + background-repeat: no-repeat !important; + background-position: bottom center !important; + } + + .m_bg-left { + background-repeat: no-repeat !important; + background-position: center left !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_bg-center { + background-repeat: no-repeat !important; + background-position: center center !important; + } + + .l_bg-top { + background-repeat: no-repeat !important; + background-position: top center !important; + } + + .l_bg-right { + background-repeat: no-repeat !important; + background-position: center right !important; + } + + .l_bg-bottom { + background-repeat: no-repeat !important; + background-position: bottom center !important; + } + + .l_bg-left { + background-repeat: no-repeat !important; + background-position: center left !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/background-size.scss b/packages/thumbprint-atomic/src/packages/background-size.scss new file mode 100644 index 000000000..dd6ee37c3 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/background-size.scss @@ -0,0 +1,40 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.cover { + background-size: cover !important; +} + +.contain { + background-size: contain !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_cover { + background-size: cover !important; + } + + .s_contain { + background-size: contain !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_cover { + background-size: cover !important; + } + + .m_contain { + background-size: contain !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_cover { + background-size: cover !important; + } + + .l_contain { + background-size: contain !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/border-color.scss b/packages/thumbprint-atomic/src/packages/border-color.scss new file mode 100644 index 000000000..1312fb30f --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/border-color.scss @@ -0,0 +1,49 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; + +.b-black { + border-color: $tp-color__black !important; +} + +.b-black-300 { + border-color: $tp-color__black-300 !important; +} + +.b-white { + border-color: $tp-color__white !important; +} + +.b-blue { + border-color: $tp-color__blue !important; +} + +.b-indigo { + border-color: $tp-color__indigo !important; +} + +.b-purple { + border-color: $tp-color__purple !important; +} + +.b-green { + border-color: $tp-color__green !important; +} + +.b-yellow { + border-color: $tp-color__yellow !important; +} + +.b-red { + border-color: $tp-color__red !important; +} + +.b-gray { + border-color: $tp-color__gray !important; +} + +.b-gray-200 { + border-color: $tp-color__gray-200 !important; +} + +.b-gray-300 { + border-color: $tp-color__gray-300 !important; +} diff --git a/packages/thumbprint-atomic/src/packages/border-radius.scss b/packages/thumbprint-atomic/src/packages/border-radius.scss new file mode 100644 index 000000000..883d3cf20 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/border-radius.scss @@ -0,0 +1,184 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.br0 { + border-radius: 0 !important; +} + +.br1 { + border-radius: 2px !important; +} + +.br2 { + border-radius: $tp-border__radius__base !important; +} + +.br3 { + border-radius: $tp-border__radius__big !important; +} + +.br-100 { + border-radius: $tp-border__radius__full !important; +} + +.br-pill { + border-radius: $tp-border__radius__sides !important; +} + +.br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} + +.br-top { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.br-right { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + +.br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_br0 { + border-radius: 0 !important; + } + + .s_br1 { + border-radius: 2px !important; + } + + .s_br2 { + border-radius: $tp-border__radius__base !important; + } + + .s_br3 { + border-radius: $tp-border__radius__big !important; + } + + .s_br-100 { + border-radius: $tp-border__radius__full !important; + } + + .s_br-pill { + border-radius: $tp-border__radius__sides !important; + } + + .s_br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + + .s_br-top { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + + .s_br-right { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + .s_br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_br0 { + border-radius: 0 !important; + } + + .m_br1 { + border-radius: 2px !important; + } + + .m_br2 { + border-radius: $tp-border__radius__base !important; + } + + .m_br3 { + border-radius: $tp-border__radius__big !important; + } + + .m_br-100 { + border-radius: $tp-border__radius__full !important; + } + + .m_br-pill { + border-radius: $tp-border__radius__sides !important; + } + + .m_br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + + .m_br-top { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + + .m_br-right { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + .m_br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_br0 { + border-radius: 0 !important; + } + + .l_br1 { + border-radius: 2px !important; + } + + .l_br2 { + border-radius: $tp-border__radius__base !important; + } + + .l_br3 { + border-radius: $tp-border__radius__big !important; + } + + .l_br-100 { + border-radius: $tp-border__radius__full !important; + } + + .l_br-pill { + border-radius: $tp-border__radius__sides !important; + } + + .l_br-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + } + + .l_br-top { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + + .l_br-right { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; + } + + .l_br-left { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/border-style.scss b/packages/thumbprint-atomic/src/packages/border-style.scss new file mode 100644 index 000000000..7f58846d4 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/border-style.scss @@ -0,0 +1,72 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.b-dotted { + border-style: dotted !important; +} + +.b-dashed { + border-style: dashed !important; +} + +.b-solid { + border-style: solid !important; +} + +.b-none { + border-style: none !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_b-dotted { + border-style: dotted !important; + } + + .s_b-dashed { + border-style: dashed !important; + } + + .s_b-solid { + border-style: solid !important; + } + + .s_b-none { + border-style: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_b-dotted { + border-style: dotted !important; + } + + .m_b-dashed { + border-style: dashed !important; + } + + .m_b-solid { + border-style: solid !important; + } + + .m_b-none { + border-style: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_b-dotted { + border-style: dotted !important; + } + + .l_b-dashed { + border-style: dashed !important; + } + + .l_b-solid { + border-style: solid !important; + } + + .l_b-none { + border-style: none !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/border-width.scss b/packages/thumbprint-atomic/src/packages/border-width.scss new file mode 100644 index 000000000..3fb2f4bf6 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/border-width.scss @@ -0,0 +1,153 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.bw-0 { + border-width: 0 !important; +} + +.bw-1 { + border-width: 1px !important; +} + +.bw-2 { + border-width: 2px !important; +} + +.bw-3 { + border-width: 3px !important; +} + +.bw-4 { + border-width: 4px !important; +} + +/* Resets */ +.bt-0 { + border-top-width: 0 !important; +} + +.br-0 { + border-right-width: 0 !important; +} + +.bb-0 { + border-bottom-width: 0 !important; +} + +.bl-0 { + border-left-width: 0 !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_bw-0 { + border-width: 0 !important; + } + + .s_bw-1 { + border-width: 1px !important; + } + + .s_bw-2 { + border-width: 2px !important; + } + + .s_bw-3 { + border-width: 3px !important; + } + + .s_bw-4 { + border-width: 4px !important; + } + + .s_bt-0 { + border-top-width: 0 !important; + } + + .s_br-0 { + border-right-width: 0 !important; + } + + .s_bb-0 { + border-bottom-width: 0 !important; + } + + .s_bl-0 { + border-left-width: 0 !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_bw-0 { + border-width: 0 !important; + } + + .m_bw-1 { + border-width: 1px !important; + } + + .m_bw-2 { + border-width: 2px !important; + } + + .m_bw-3 { + border-width: 3px !important; + } + + .m_bw-4 { + border-width: 4px !important; + } + + .m_bt-0 { + border-top-width: 0 !important; + } + + .m_br-0 { + border-right-width: 0 !important; + } + + .m_bb-0 { + border-bottom-width: 0 !important; + } + + .m_bl-0 { + border-left-width: 0 !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_bw-0 { + border-width: 0 !important; + } + + .l_bw-1 { + border-width: 1px !important; + } + + .l_bw-2 { + border-width: 2px !important; + } + + .l_bw-3 { + border-width: 3px !important; + } + + .l_bw-4 { + border-width: 4px !important; + } + + .l_bt-0 { + border-top-width: 0 !important; + } + + .l_br-0 { + border-right-width: 0 !important; + } + + .l_bb-0 { + border-bottom-width: 0 !important; + } + + .l_bl-0 { + border-left-width: 0 !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/border.scss b/packages/thumbprint-atomic/src/packages/border.scss new file mode 100644 index 000000000..25ec95e97 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/border.scss @@ -0,0 +1,128 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.ba { + border-style: solid !important; + border-width: 1px !important; +} + +.bt { + border-top-style: solid !important; + border-top-width: 1px !important; +} + +.br { + border-right-style: solid !important; + border-right-width: 1px !important; +} + +.bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; +} + +.bl { + border-left-style: solid !important; + border-left-width: 1px !important; +} + +.bn { + border-style: none !important; + border-width: 0 !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_ba { + border-style: solid !important; + border-width: 1px !important; + } + + .s_bt { + border-top-style: solid !important; + border-top-width: 1px !important; + } + + .s_br { + border-right-style: solid !important; + border-right-width: 1px !important; + } + + .s_bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; + } + + .s_bl { + border-left-style: solid !important; + border-left-width: 1px !important; + } + + .s_bn { + border-style: none !important; + border-width: 0 !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_ba { + border-style: solid !important; + border-width: 1px !important; + } + + .m_bt { + border-top-style: solid !important; + border-top-width: 1px !important; + } + + .m_br { + border-right-style: solid !important; + border-right-width: 1px !important; + } + + .m_bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; + } + + .m_bl { + border-left-style: solid !important; + border-left-width: 1px !important; + } + + .m_bn { + border-style: none !important; + border-width: 0 !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_ba { + border-style: solid !important; + border-width: 1px !important; + } + + .l_bt { + border-top-style: solid !important; + border-top-width: 1px !important; + } + + .l_br { + border-right-style: solid !important; + border-right-width: 1px !important; + } + + .l_bb { + border-bottom-style: solid !important; + border-bottom-width: 1px !important; + } + + .l_bl { + border-left-style: solid !important; + border-left-width: 1px !important; + } + + .l_bn { + border-style: none !important; + border-width: 0 !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/color.scss b/packages/thumbprint-atomic/src/packages/color.scss new file mode 100644 index 000000000..3c653da1f --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/color.scss @@ -0,0 +1,294 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.color-inherit { + color: inherit !important; +} + +.white { + color: $tp-color__white !important; +} + +.black { + color: $tp-color__black !important; +} + +.black-300 { + color: $tp-color__black-300 !important; +} + +.blue { + color: $tp-color__blue !important; +} + +.indigo { + color: $tp-color__indigo !important; +} + +.purple { + color: $tp-color__purple !important; +} + +.green { + color: $tp-color__green !important; +} + +.yellow { + color: $tp-color__yellow !important; +} + +.red { + color: $tp-color__red !important; +} + +.gray { + color: $tp-color__gray !important; +} + +.gray-200 { + color: $tp-color__gray-200 !important; +} + +.gray-300 { + color: $tp-color__gray-300 !important; +} + +.bg-white { + background-color: $tp-color__white !important; +} + +.bg-black { + background-color: $tp-color__black !important; +} + +.bg-black-300 { + background-color: $tp-color__black-300 !important; +} + +.bg-blue { + background-color: $tp-color__blue !important; +} + +.bg-indigo { + background-color: $tp-color__indigo !important; +} + +.bg-purple { + background-color: $tp-color__purple !important; +} + +.bg-green { + background-color: $tp-color__green !important; +} + +.bg-yellow { + background-color: $tp-color__yellow !important; +} + +.bg-red { + background-color: $tp-color__red !important; +} + +.bg-gray { + background-color: $tp-color__gray !important; +} + +.bg-gray-200 { + background-color: $tp-color__gray-200 !important; +} + +.bg-gray-300 { + background-color: $tp-color__gray-300 !important; +} + +.hover-white:hover { + color: $tp-color__white !important; +} + +.hover-white:focus { + color: $tp-color__white !important; +} + +.hover-black:hover { + color: $tp-color__black !important; +} + +.hover-black:focus { + color: $tp-color__black !important; +} + +.hover-black-300:hover { + color: $tp-color__black-300 !important; +} + +.hover-black-300:focus { + color: $tp-color__black-300 !important; +} + +.hover-blue:hover { + color: $tp-color__blue !important; +} + +.hover-blue:focus { + color: $tp-color__blue !important; +} + +.hover-indigo:hover { + color: $tp-color__indigo !important; +} + +.hover-indigo:focus { + color: $tp-color__indigo !important; +} + +.hover-purple:hover { + color: $tp-color__purple !important; +} + +.hover-purple:focus { + color: $tp-color__purple !important; +} + +.hover-green:hover { + color: $tp-color__green !important; +} + +.hover-green:focus { + color: $tp-color__green !important; +} + +.hover-yellow:hover { + color: $tp-color__yellow !important; +} + +.hover-yellow:focus { + color: $tp-color__yellow !important; +} + +.hover-red:hover { + color: $tp-color__red !important; +} + +.hover-red:focus { + color: $tp-color__red !important; +} + +.hover-gray:hover { + color: $tp-color__gray !important; +} + +.hover-gray:focus { + color: $tp-color__gray !important; +} + +.hover-gray-200:hover { + color: $tp-color__gray-200 !important; +} + +.hover-gray-200:focus { + color: $tp-color__gray-200 !important; +} + +.hover-gray-300:hover { + color: $tp-color__gray-300 !important; +} + +.hover-gray-300:focus { + color: $tp-color__gray-300 !important; +} + +.hover-bg-white:hover { + background-color: $tp-color__white !important; +} + +.hover-bg-white:focus { + background-color: $tp-color__white !important; +} + +.hover-bg-black:hover { + background-color: $tp-color__black !important; +} + +.hover-bg-black:focus { + background-color: $tp-color__black !important; +} + +.hover-bg-black-300:hover { + background-color: $tp-color__black-300 !important; +} + +.hover-bg-black-300:focus { + background-color: $tp-color__black-300 !important; +} + +.hover-bg-blue:hover { + background-color: $tp-color__blue !important; +} + +.hover-bg-blue:focus { + background-color: $tp-color__blue !important; +} + +.hover-bg-indigo:hover { + background-color: $tp-color__indigo !important; +} + +.hover-bg-indigo:focus { + background-color: $tp-color__indigo !important; +} + +.hover-bg-purple:hover { + background-color: $tp-color__purple !important; +} + +.hover-bg-purple:focus { + background-color: $tp-color__purple !important; +} + +.hover-bg-green:hover { + background-color: $tp-color__green !important; +} + +.hover-bg-green:focus { + background-color: $tp-color__green !important; +} + +.hover-bg-yellow:hover { + background-color: $tp-color__yellow !important; +} + +.hover-bg-yellow:focus { + background-color: $tp-color__yellow !important; +} + +.hover-bg-red:hover { + background-color: $tp-color__red !important; +} + +.hover-bg-red:focus { + background-color: $tp-color__red !important; +} + +.hover-bg-gray:hover { + background-color: $tp-color__gray !important; +} + +.hover-bg-gray:focus { + background-color: $tp-color__gray !important; +} + +.hover-bg-gray-200:hover { + background-color: $tp-color__gray-200 !important; +} + +.hover-bg-gray-200:focus { + background-color: $tp-color__gray-200 !important; +} + +.hover-bg-gray-300:hover { + background-color: $tp-color__gray-300 !important; +} + +.hover-bg-gray-300:focus { + background-color: $tp-color__gray-300 !important; +} diff --git a/packages/thumbprint-atomic/src/packages/coordinates.scss b/packages/thumbprint-atomic/src/packages/coordinates.scss new file mode 100644 index 000000000..5092cf552 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/coordinates.scss @@ -0,0 +1,1060 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.top0 { + top: 0 !important; +} + +.right0 { + right: 0 !important; +} + +.bottom0 { + bottom: 0 !important; +} + +.left0 { + left: 0 !important; +} + +.top1 { + top: $tp-space__2 !important; +} + +.right1 { + right: $tp-space__2 !important; +} + +.bottom1 { + bottom: $tp-space__2 !important; +} + +.left1 { + left: $tp-space__2 !important; +} + +.top2 { + top: $tp-space__3 !important; +} + +.right2 { + right: $tp-space__3 !important; +} + +.bottom2 { + bottom: $tp-space__3 !important; +} + +.left2 { + left: $tp-space__3 !important; +} + +.-top1 { + top: -$tp-space__2 !important; +} + +.-right1 { + right: -$tp-space__2 !important; +} + +.-bottom1 { + bottom: -$tp-space__2 !important; +} + +.-left1 { + left: -$tp-space__2 !important; +} + +.-top2 { + top: -$tp-space__3 !important; +} + +.-right2 { + right: -$tp-space__3 !important; +} + +.-bottom2 { + bottom: -$tp-space__3 !important; +} + +.-left2 { + left: -$tp-space__3 !important; +} + +.absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} + +.top-0 { + top: 0 !important; +} + +.top-1 { + top: 1px !important; +} + +.top-2 { + top: 2px !important; +} + +.top-3 { + top: 3px !important; +} + +.top-4 { + top: 4px !important; +} + +.top-5 { + top: 5px !important; +} + +.right-0 { + right: 0 !important; +} + +.right-1 { + right: 1px !important; +} + +.right-2 { + right: 2px !important; +} + +.right-3 { + right: 3px !important; +} + +.right-4 { + right: 4px !important; +} + +.right-5 { + right: 5px !important; +} + +.bottom-0 { + bottom: 0 !important; +} + +.bottom-1 { + bottom: 1px !important; +} + +.bottom-2 { + bottom: 2px !important; +} + +.bottom-3 { + bottom: 3px !important; +} + +.bottom-4 { + bottom: 4px !important; +} + +.bottom-5 { + bottom: 5px !important; +} + +.left-0 { + left: 0 !important; +} + +.left-1 { + left: 1px !important; +} + +.left-2 { + left: 2px !important; +} + +.left-3 { + left: 3px !important; +} + +.left-4 { + left: 4px !important; +} + +.left-5 { + left: 5px !important; +} + +.-top-1 { + top: -1px !important; +} + +.-top-2 { + top: -2px !important; +} + +.-top-3 { + top: -3px !important; +} + +.-top-4 { + top: -4px !important; +} + +.-top-5 { + top: -5px !important; +} + +.-right-1 { + right: -1px !important; +} + +.-right-2 { + right: -2px !important; +} + +.-right-3 { + right: -3px !important; +} + +.-right-4 { + right: -4px !important; +} + +.-right-5 { + right: -5px !important; +} + +.-bottom-1 { + bottom: -1px !important; +} + +.-bottom-2 { + bottom: -2px !important; +} + +.-bottom-3 { + bottom: -3px !important; +} + +.-bottom-4 { + bottom: -4px !important; +} + +.-bottom-5 { + bottom: -5px !important; +} + +.-left-1 { + left: -1px !important; +} + +.-left-2 { + left: -2px !important; +} + +.-left-3 { + left: -3px !important; +} + +.-left-4 { + left: -4px !important; +} + +.-left-5 { + left: -5px !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_top0 { + top: 0 !important; + } + + .s_right0 { + right: 0 !important; + } + + .s_bottom0 { + bottom: 0 !important; + } + + .s_left0 { + left: 0 !important; + } + + .s_top1 { + top: $tp-space__2 !important; + } + + .s_right1 { + right: $tp-space__2 !important; + } + + .s_bottom1 { + bottom: $tp-space__2 !important; + } + + .s_left1 { + left: $tp-space__2 !important; + } + + .s_top2 { + top: $tp-space__3 !important; + } + + .s_right2 { + right: $tp-space__3 !important; + } + + .s_bottom2 { + bottom: $tp-space__3 !important; + } + + .s_left2 { + left: $tp-space__3 !important; + } + + .s_-top1 { + top: -$tp-space__2 !important; + } + + .s_-right1 { + right: -$tp-space__2 !important; + } + + .s_-bottom1 { + bottom: -$tp-space__2 !important; + } + + .s_-left1 { + left: -$tp-space__2 !important; + } + + .s_-top2 { + top: -$tp-space__3 !important; + } + + .s_-right2 { + right: -$tp-space__3 !important; + } + + .s_-bottom2 { + bottom: -$tp-space__3 !important; + } + + .s_-left2 { + left: -$tp-space__3 !important; + } + + .s_absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + } + + .s_top-0 { + top: 0 !important; + } + + .s_top-1 { + top: 1px !important; + } + + .s_top-2 { + top: 2px !important; + } + + .s_top-3 { + top: 3px !important; + } + + .s_top-4 { + top: 4px !important; + } + + .s_top-5 { + top: 5px !important; + } + + .s_right-0 { + right: 0 !important; + } + + .s_right-1 { + right: 1px !important; + } + + .s_right-2 { + right: 2px !important; + } + + .s_right-3 { + right: 3px !important; + } + + .s_right-4 { + right: 4px !important; + } + + .s_right-5 { + right: 5px !important; + } + + .s_bottom-0 { + bottom: 0 !important; + } + + .s_bottom-1 { + bottom: 1px !important; + } + + .s_bottom-2 { + bottom: 2px !important; + } + + .s_bottom-3 { + bottom: 3px !important; + } + + .s_bottom-4 { + bottom: 4px !important; + } + + .s_bottom-5 { + bottom: 5px !important; + } + + .s_left-0 { + left: 0 !important; + } + + .s_left-1 { + left: 1px !important; + } + + .s_left-2 { + left: 2px !important; + } + + .s_left-3 { + left: 3px !important; + } + + .s_left-4 { + left: 4px !important; + } + + .s_left-5 { + left: 5px !important; + } + + .s_-top-1 { + top: -1px !important; + } + + .s_-top-2 { + top: -2px !important; + } + + .s_-top-3 { + top: -3px !important; + } + + .s_-top-4 { + top: -4px !important; + } + + .s_-top-5 { + top: -5px !important; + } + + .s_-right-1 { + right: -1px !important; + } + + .s_-right-2 { + right: -2px !important; + } + + .s_-right-3 { + right: -3px !important; + } + + .s_-right-4 { + right: -4px !important; + } + + .s_-right-5 { + right: -5px !important; + } + + .s_-bottom-1 { + bottom: -1px !important; + } + + .s_-bottom-2 { + bottom: -2px !important; + } + + .s_-bottom-3 { + bottom: -3px !important; + } + + .s_-bottom-4 { + bottom: -4px !important; + } + + .s_-bottom-5 { + bottom: -5px !important; + } + + .s_-left-1 { + left: -1px !important; + } + + .s_-left-2 { + left: -2px !important; + } + + .s_-left-3 { + left: -3px !important; + } + + .s_-left-4 { + left: -4px !important; + } + + .s_-left-5 { + left: -5px !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_top0 { + top: 0 !important; + } + + .m_right0 { + right: 0 !important; + } + + .m_bottom0 { + bottom: 0 !important; + } + + .m_left0 { + left: 0 !important; + } + + .m_top1 { + top: $tp-space__2 !important; + } + + .m_right1 { + right: $tp-space__2 !important; + } + + .m_bottom1 { + bottom: $tp-space__2 !important; + } + + .m_left1 { + left: $tp-space__2 !important; + } + + .m_top2 { + top: $tp-space__3 !important; + } + + .m_right2 { + right: $tp-space__3 !important; + } + + .m_bottom2 { + bottom: $tp-space__3 !important; + } + + .m_left2 { + left: $tp-space__3 !important; + } + + .m_-top1 { + top: -$tp-space__2 !important; + } + + .m_-right1 { + right: -$tp-space__2 !important; + } + + .m_-bottom1 { + bottom: -$tp-space__2 !important; + } + + .m_-left1 { + left: -$tp-space__2 !important; + } + + .m_-top2 { + top: -$tp-space__3 !important; + } + + .m_-right2 { + right: -$tp-space__3 !important; + } + + .m_-bottom2 { + bottom: -$tp-space__3 !important; + } + + .m_-left2 { + left: -$tp-space__3 !important; + } + + .m_absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + } + + .m_top-0 { + top: 0 !important; + } + + .m_top-1 { + top: 1px !important; + } + + .m_top-2 { + top: 2px !important; + } + + .m_top-3 { + top: 3px !important; + } + + .m_top-4 { + top: 4px !important; + } + + .m_top-5 { + top: 5px !important; + } + + .m_right-0 { + right: 0 !important; + } + + .m_right-1 { + right: 1px !important; + } + + .m_right-2 { + right: 2px !important; + } + + .m_right-3 { + right: 3px !important; + } + + .m_right-4 { + right: 4px !important; + } + + .m_right-5 { + right: 5px !important; + } + + .m_bottom-0 { + bottom: 0 !important; + } + + .m_bottom-1 { + bottom: 1px !important; + } + + .m_bottom-2 { + bottom: 2px !important; + } + + .m_bottom-3 { + bottom: 3px !important; + } + + .m_bottom-4 { + bottom: 4px !important; + } + + .m_bottom-5 { + bottom: 5px !important; + } + + .m_left-0 { + left: 0 !important; + } + + .m_left-1 { + left: 1px !important; + } + + .m_left-2 { + left: 2px !important; + } + + .m_left-3 { + left: 3px !important; + } + + .m_left-4 { + left: 4px !important; + } + + .m_left-5 { + left: 5px !important; + } + + .m_-top-1 { + top: -1px !important; + } + + .m_-top-2 { + top: -2px !important; + } + + .m_-top-3 { + top: -3px !important; + } + + .m_-top-4 { + top: -4px !important; + } + + .m_-top-5 { + top: -5px !important; + } + + .m_-right-1 { + right: -1px !important; + } + + .m_-right-2 { + right: -2px !important; + } + + .m_-right-3 { + right: -3px !important; + } + + .m_-right-4 { + right: -4px !important; + } + + .m_-right-5 { + right: -5px !important; + } + + .m_-bottom-1 { + bottom: -1px !important; + } + + .m_-bottom-2 { + bottom: -2px !important; + } + + .m_-bottom-3 { + bottom: -3px !important; + } + + .m_-bottom-4 { + bottom: -4px !important; + } + + .m_-bottom-5 { + bottom: -5px !important; + } + + .m_-left-1 { + left: -1px !important; + } + + .m_-left-2 { + left: -2px !important; + } + + .m_-left-3 { + left: -3px !important; + } + + .m_-left-4 { + left: -4px !important; + } + + .m_-left-5 { + left: -5px !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_top0 { + top: 0 !important; + } + + .l_right0 { + right: 0 !important; + } + + .l_bottom0 { + bottom: 0 !important; + } + + .l_left0 { + left: 0 !important; + } + + .l_top1 { + top: $tp-space__2 !important; + } + + .l_right1 { + right: $tp-space__2 !important; + } + + .l_bottom1 { + bottom: $tp-space__2 !important; + } + + .l_left1 { + left: $tp-space__2 !important; + } + + .l_top2 { + top: $tp-space__3 !important; + } + + .l_right2 { + right: $tp-space__3 !important; + } + + .l_bottom2 { + bottom: $tp-space__3 !important; + } + + .l_left2 { + left: $tp-space__3 !important; + } + + .l_-top1 { + top: -$tp-space__2 !important; + } + + .l_-right1 { + right: -$tp-space__2 !important; + } + + .l_-bottom1 { + bottom: -$tp-space__2 !important; + } + + .l_-left1 { + left: -$tp-space__2 !important; + } + + .l_-top2 { + top: -$tp-space__3 !important; + } + + .l_-right2 { + right: -$tp-space__3 !important; + } + + .l_-bottom2 { + bottom: -$tp-space__3 !important; + } + + .l_-left2 { + left: -$tp-space__3 !important; + } + + .l_absolute-fill { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + } + + .l_top-0 { + top: 0 !important; + } + + .l_top-1 { + top: 1px !important; + } + + .l_top-2 { + top: 2px !important; + } + + .l_top-3 { + top: 3px !important; + } + + .l_top-4 { + top: 4px !important; + } + + .l_top-5 { + top: 5px !important; + } + + .l_right-0 { + right: 0 !important; + } + + .l_right-1 { + right: 1px !important; + } + + .l_right-2 { + right: 2px !important; + } + + .l_right-3 { + right: 3px !important; + } + + .l_right-4 { + right: 4px !important; + } + + .l_right-5 { + right: 5px !important; + } + + .l_bottom-0 { + bottom: 0 !important; + } + + .l_bottom-1 { + bottom: 1px !important; + } + + .l_bottom-2 { + bottom: 2px !important; + } + + .l_bottom-3 { + bottom: 3px !important; + } + + .l_bottom-4 { + bottom: 4px !important; + } + + .l_bottom-5 { + bottom: 5px !important; + } + + .l_left-0 { + left: 0 !important; + } + + .l_left-1 { + left: 1px !important; + } + + .l_left-2 { + left: 2px !important; + } + + .l_left-3 { + left: 3px !important; + } + + .l_left-4 { + left: 4px !important; + } + + .l_left-5 { + left: 5px !important; + } + + .l_-top-1 { + top: -1px !important; + } + + .l_-top-2 { + top: -2px !important; + } + + .l_-top-3 { + top: -3px !important; + } + + .l_-top-4 { + top: -4px !important; + } + + .l_-top-5 { + top: -5px !important; + } + + .l_-right-1 { + right: -1px !important; + } + + .l_-right-2 { + right: -2px !important; + } + + .l_-right-3 { + right: -3px !important; + } + + .l_-right-4 { + right: -4px !important; + } + + .l_-right-5 { + right: -5px !important; + } + + .l_-bottom-1 { + bottom: -1px !important; + } + + .l_-bottom-2 { + bottom: -2px !important; + } + + .l_-bottom-3 { + bottom: -3px !important; + } + + .l_-bottom-4 { + bottom: -4px !important; + } + + .l_-bottom-5 { + bottom: -5px !important; + } + + .l_-left-1 { + left: -1px !important; + } + + .l_-left-2 { + left: -2px !important; + } + + .l_-left-3 { + left: -3px !important; + } + + .l_-left-4 { + left: -4px !important; + } + + .l_-left-5 { + left: -5px !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/display.scss b/packages/thumbprint-atomic/src/packages/display.scss new file mode 100644 index 000000000..2ea78a898 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/display.scss @@ -0,0 +1,204 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.dn { + display: none !important; +} + +.di { + display: inline !important; +} + +.db { + display: block !important; +} + +.dib { + display: inline-block !important; +} + +.dit { + display: inline-table !important; +} + +.dt { + display: table !important; +} + +.dtc { + display: table-cell !important; +} + +.dt-row { + display: table-row !important; +} + +.dt-row-group { + display: table-row-group !important; +} + +.dt-column { + display: table-column !important; +} + +.dt-column-group { + display: table-column-group !important; +} + +.dt-fixed { + table-layout: fixed !important; + width: 100% !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_dn { + display: none !important; + } + + .s_di { + display: inline !important; + } + + .s_db { + display: block !important; + } + + .s_dib { + display: inline-block !important; + } + + .s_dit { + display: inline-table !important; + } + + .s_dt { + display: table !important; + } + + .s_dtc { + display: table-cell !important; + } + + .s_dt-row { + display: table-row !important; + } + + .s_dt-row-group { + display: table-row-group !important; + } + + .s_dt-column { + display: table-column !important; + } + + .s_dt-column-group { + display: table-column-group !important; + } + + .s_dt-fixed { + table-layout: fixed !important; + width: 100% !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_dn { + display: none !important; + } + + .m_di { + display: inline !important; + } + + .m_db { + display: block !important; + } + + .m_dib { + display: inline-block !important; + } + + .m_dit { + display: inline-table !important; + } + + .m_dt { + display: table !important; + } + + .m_dtc { + display: table-cell !important; + } + + .m_dt-row { + display: table-row !important; + } + + .m_dt-row-group { + display: table-row-group !important; + } + + .m_dt-column { + display: table-column !important; + } + + .m_dt-column-group { + display: table-column-group !important; + } + + .m_dt-fixed { + table-layout: fixed !important; + width: 100% !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_dn { + display: none !important; + } + + .l_di { + display: inline !important; + } + + .l_db { + display: block !important; + } + + .l_dib { + display: inline-block !important; + } + + .l_dit { + display: inline-table !important; + } + + .l_dt { + display: table !important; + } + + .l_dtc { + display: table-cell !important; + } + + .l_dt-row { + display: table-row !important; + } + + .l_dt-row-group { + display: table-row-group !important; + } + + .l_dt-column { + display: table-column !important; + } + + .l_dt-column-group { + display: table-column-group !important; + } + + .l_dt-fixed { + table-layout: fixed !important; + width: 100% !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/flexbox.scss b/packages/thumbprint-atomic/src/packages/flexbox.scss new file mode 100644 index 000000000..f266d2de9 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/flexbox.scss @@ -0,0 +1,824 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.flex { + display: flex !important; +} + +.inline-flex { + display: inline-flex !important; +} + +.flex-auto { + flex: 1 1 auto !important; + min-width: 0 !important; + min-height: 0 !important; +} + +.flex-1 { + flex: 1 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; +} + +.flex-2 { + flex: 2 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; +} + +.flex-3 { + flex: 3 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; +} + +.flex-none { + flex: none !important; +} + +.flex-column { + flex-direction: column !important; +} + +.flex-row { + flex-direction: row !important; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.flex-nowrap { + flex-wrap: nowrap !important; +} + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} + +.flex-column-reverse { + flex-direction: column-reverse !important; +} + +.flex-row-reverse { + flex-direction: row-reverse !important; +} + +.items-start { + align-items: flex-start !important; +} + +.items-end { + align-items: flex-end !important; +} + +.items-center { + align-items: center !important; +} + +.items-baseline { + align-items: baseline !important; +} + +.items-stretch { + align-items: stretch !important; +} + +.self-start { + align-self: flex-start !important; +} + +.self-end { + align-self: flex-end !important; +} + +.self-center { + align-self: center !important; +} + +.self-baseline { + align-self: baseline !important; +} + +.self-stretch { + align-self: stretch !important; +} + +.justify-start { + justify-content: flex-start !important; +} + +.justify-end { + justify-content: flex-end !important; +} + +.justify-center { + justify-content: center !important; +} + +.justify-between { + justify-content: space-between !important; +} + +.justify-around { + justify-content: space-around !important; +} + +.content-start { + align-content: flex-start !important; +} + +.content-end { + align-content: flex-end !important; +} + +.content-center { + align-content: center !important; +} + +.content-between { + align-content: space-between !important; +} + +.content-around { + align-content: space-around !important; +} + +.content-stretch { + align-content: stretch !important; +} + +.order-0 { + order: 0 !important; +} + +.order-1 { + order: 1 !important; +} + +.order-2 { + order: 2 !important; +} + +.order-3 { + order: 3 !important; +} + +.order-4 { + order: 4 !important; +} + +.order-5 { + order: 5 !important; +} + +.order-6 { + order: 6 !important; +} + +.order-7 { + order: 7 !important; +} + +.order-8 { + order: 8 !important; +} + +.order-last { + order: 99999 !important; +} + +.flex-grow-0 { + flex-grow: 0 !important; +} + +.flex-grow-1 { + flex-grow: 1 !important; +} + +.flex-shrink-0 { + flex-shrink: 0 !important; +} + +.flex-shrink-1 { + flex-shrink: 1 !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_flex { + display: flex !important; + } + + .s_inline-flex { + display: inline-flex !important; + } + + .s_flex-auto { + flex: 1 1 auto !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .s_flex-1 { + flex: 1 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .s_flex-2 { + flex: 2 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .s_flex-3 { + flex: 3 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .s_flex-none { + flex: none !important; + } + + .s_flex-column { + flex-direction: column !important; + } + + .s_flex-row { + flex-direction: row !important; + } + + .s_flex-wrap { + flex-wrap: wrap !important; + } + + .s_flex-nowrap { + flex-wrap: nowrap !important; + } + + .s_flex-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .s_flex-column-reverse { + flex-direction: column-reverse !important; + } + + .s_flex-row-reverse { + flex-direction: row-reverse !important; + } + + .s_items-start { + align-items: flex-start !important; + } + + .s_items-end { + align-items: flex-end !important; + } + + .s_items-center { + align-items: center !important; + } + + .s_items-baseline { + align-items: baseline !important; + } + + .s_items-stretch { + align-items: stretch !important; + } + + .s_self-start { + align-self: flex-start !important; + } + + .s_self-end { + align-self: flex-end !important; + } + + .s_self-center { + align-self: center !important; + } + + .s_self-baseline { + align-self: baseline !important; + } + + .s_self-stretch { + align-self: stretch !important; + } + + .s_justify-start { + justify-content: flex-start !important; + } + + .s_justify-end { + justify-content: flex-end !important; + } + + .s_justify-center { + justify-content: center !important; + } + + .s_justify-between { + justify-content: space-between !important; + } + + .s_justify-around { + justify-content: space-around !important; + } + + .s_content-start { + align-content: flex-start !important; + } + + .s_content-end { + align-content: flex-end !important; + } + + .s_content-center { + align-content: center !important; + } + + .s_content-between { + align-content: space-between !important; + } + + .s_content-around { + align-content: space-around !important; + } + + .s_content-stretch { + align-content: stretch !important; + } + + .s_order-0 { + order: 0 !important; + } + + .s_order-1 { + order: 1 !important; + } + + .s_order-2 { + order: 2 !important; + } + + .s_order-3 { + order: 3 !important; + } + + .s_order-4 { + order: 4 !important; + } + + .s_order-5 { + order: 5 !important; + } + + .s_order-6 { + order: 6 !important; + } + + .s_order-7 { + order: 7 !important; + } + + .s_order-8 { + order: 8 !important; + } + + .s_order-last { + order: 99999 !important; + } + + .s_flex-grow-0 { + flex-grow: 0 !important; + } + + .s_flex-grow-1 { + flex-grow: 1 !important; + } + + .s_flex-shrink-0 { + flex-shrink: 0 !important; + } + + .s_flex-shrink-1 { + flex-shrink: 1 !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_flex { + display: flex !important; + } + + .m_inline-flex { + display: inline-flex !important; + } + + .m_flex-auto { + flex: 1 1 auto !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .m_flex-1 { + flex: 1 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .m_flex-2 { + flex: 2 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .m_flex-3 { + flex: 3 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .m_flex-none { + flex: none !important; + } + + .m_flex-column { + flex-direction: column !important; + } + + .m_flex-row { + flex-direction: row !important; + } + + .m_flex-wrap { + flex-wrap: wrap !important; + } + + .m_flex-nowrap { + flex-wrap: nowrap !important; + } + + .m_flex-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .m_flex-column-reverse { + flex-direction: column-reverse !important; + } + + .m_flex-row-reverse { + flex-direction: row-reverse !important; + } + + .m_items-start { + align-items: flex-start !important; + } + + .m_items-end { + align-items: flex-end !important; + } + + .m_items-center { + align-items: center !important; + } + + .m_items-baseline { + align-items: baseline !important; + } + + .m_items-stretch { + align-items: stretch !important; + } + + .m_self-start { + align-self: flex-start !important; + } + + .m_self-end { + align-self: flex-end !important; + } + + .m_self-center { + align-self: center !important; + } + + .m_self-baseline { + align-self: baseline !important; + } + + .m_self-stretch { + align-self: stretch !important; + } + + .m_justify-start { + justify-content: flex-start !important; + } + + .m_justify-end { + justify-content: flex-end !important; + } + + .m_justify-center { + justify-content: center !important; + } + + .m_justify-between { + justify-content: space-between !important; + } + + .m_justify-around { + justify-content: space-around !important; + } + + .m_content-start { + align-content: flex-start !important; + } + + .m_content-end { + align-content: flex-end !important; + } + + .m_content-center { + align-content: center !important; + } + + .m_content-between { + align-content: space-between !important; + } + + .m_content-around { + align-content: space-around !important; + } + + .m_content-stretch { + align-content: stretch !important; + } + + .m_order-0 { + order: 0 !important; + } + + .m_order-1 { + order: 1 !important; + } + + .m_order-2 { + order: 2 !important; + } + + .m_order-3 { + order: 3 !important; + } + + .m_order-4 { + order: 4 !important; + } + + .m_order-5 { + order: 5 !important; + } + + .m_order-6 { + order: 6 !important; + } + + .m_order-7 { + order: 7 !important; + } + + .m_order-8 { + order: 8 !important; + } + + .m_order-last { + order: 99999 !important; + } + + .m_flex-grow-0 { + flex-grow: 0 !important; + } + + .m_flex-grow-1 { + flex-grow: 1 !important; + } + + .m_flex-shrink-0 { + flex-shrink: 0 !important; + } + + .m_flex-shrink-1 { + flex-shrink: 1 !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_flex { + display: flex !important; + } + + .l_inline-flex { + display: inline-flex !important; + } + + .l_flex-auto { + flex: 1 1 auto !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .l_flex-1 { + flex: 1 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .l_flex-2 { + flex: 2 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .l_flex-3 { + flex: 3 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; + } + + .l_flex-none { + flex: none !important; + } + + .l_flex-column { + flex-direction: column !important; + } + + .l_flex-row { + flex-direction: row !important; + } + + .l_flex-wrap { + flex-wrap: wrap !important; + } + + .l_flex-nowrap { + flex-wrap: nowrap !important; + } + + .l_flex-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .l_flex-column-reverse { + flex-direction: column-reverse !important; + } + + .l_flex-row-reverse { + flex-direction: row-reverse !important; + } + + .l_items-start { + align-items: flex-start !important; + } + + .l_items-end { + align-items: flex-end !important; + } + + .l_items-center { + align-items: center !important; + } + + .l_items-baseline { + align-items: baseline !important; + } + + .l_items-stretch { + align-items: stretch !important; + } + + .l_self-start { + align-self: flex-start !important; + } + + .l_self-end { + align-self: flex-end !important; + } + + .l_self-center { + align-self: center !important; + } + + .l_self-baseline { + align-self: baseline !important; + } + + .l_self-stretch { + align-self: stretch !important; + } + + .l_justify-start { + justify-content: flex-start !important; + } + + .l_justify-end { + justify-content: flex-end !important; + } + + .l_justify-center { + justify-content: center !important; + } + + .l_justify-between { + justify-content: space-between !important; + } + + .l_justify-around { + justify-content: space-around !important; + } + + .l_content-start { + align-content: flex-start !important; + } + + .l_content-end { + align-content: flex-end !important; + } + + .l_content-center { + align-content: center !important; + } + + .l_content-between { + align-content: space-between !important; + } + + .l_content-around { + align-content: space-around !important; + } + + .l_content-stretch { + align-content: stretch !important; + } + + .l_order-0 { + order: 0 !important; + } + + .l_order-1 { + order: 1 !important; + } + + .l_order-2 { + order: 2 !important; + } + + .l_order-3 { + order: 3 !important; + } + + .l_order-4 { + order: 4 !important; + } + + .l_order-5 { + order: 5 !important; + } + + .l_order-6 { + order: 6 !important; + } + + .l_order-7 { + order: 7 !important; + } + + .l_order-8 { + order: 8 !important; + } + + .l_order-last { + order: 99999 !important; + } + + .l_flex-grow-0 { + flex-grow: 0 !important; + } + + .l_flex-grow-1 { + flex-grow: 1 !important; + } + + .l_flex-shrink-0 { + flex-shrink: 0 !important; + } + + .l_flex-shrink-1 { + flex-shrink: 1 !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/font-weight.scss b/packages/thumbprint-atomic/src/packages/font-weight.scss new file mode 100644 index 000000000..13f368be4 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/font-weight.scss @@ -0,0 +1,40 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.normal { + font-weight: $tp-font__weight__normal !important; +} + +.b { + font-weight: $tp-font__weight__bold !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_normal { + font-weight: $tp-font__weight__normal !important; + } + + .s_b { + font-weight: $tp-font__weight__bold !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_normal { + font-weight: $tp-font__weight__normal !important; + } + + .m_b { + font-weight: $tp-font__weight__bold !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_normal { + font-weight: $tp-font__weight__normal !important; + } + + .l_b { + font-weight: $tp-font__weight__bold !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/grid.scss b/packages/thumbprint-atomic/src/packages/grid.scss new file mode 100644 index 000000000..eb5bfc8b4 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/grid.scss @@ -0,0 +1,308 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.grid { + margin-left: -$tp-space__3 !important; + display: flex !important; + flex-wrap: wrap !important; +} + +.grid > * { + padding-left: $tp-space__3 !important; + width: 100% !important; +} + +.grid-wide { + margin-left: -$tp-space__5 !important; +} + +.grid-wide > * { + padding-left: $tp-space__5 !important; +} + +.grid-flush { + margin-left: 0 !important; +} + +.grid-flush > * { + padding-left: 0 !important; +} + +.col-1 { + width: 8.333333% !important; +} + +.col-2 { + width: 16.666666% !important; +} + +.col-3 { + width: 25% !important; +} + +.col-4 { + width: 33.333333% !important; +} + +.col-5 { + width: 41.666666% !important; +} + +.col-6 { + width: 50% !important; +} + +.col-7 { + width: 58.333333% !important; +} + +.col-8 { + width: 66.666666% !important; +} + +.col-9 { + width: 75% !important; +} + +.col-10 { + width: 83.333333% !important; +} + +.col-11 { + width: 91.666666% !important; +} + +.col-12 { + width: 100% !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_grid { + margin-left: -$tp-space__3 !important; + display: flex !important; + flex-wrap: wrap !important; + } + + .s_grid > * { + padding-left: $tp-space__3 !important; + width: 100% !important; + } + + .s_grid-wide { + margin-left: -$tp-space__5 !important; + } + + .s_grid-wide > * { + padding-left: $tp-space__5 !important; + } + + .s_grid-flush { + margin-left: 0 !important; + } + + .s_grid-flush > * { + padding-left: 0 !important; + } + + .s_col-1 { + width: 8.333333% !important; + } + + .s_col-2 { + width: 16.666666% !important; + } + + .s_col-3 { + width: 25% !important; + } + + .s_col-4 { + width: 33.333333% !important; + } + + .s_col-5 { + width: 41.666666% !important; + } + + .s_col-6 { + width: 50% !important; + } + + .s_col-7 { + width: 58.333333% !important; + } + + .s_col-8 { + width: 66.666666% !important; + } + + .s_col-9 { + width: 75% !important; + } + + .s_col-10 { + width: 83.333333% !important; + } + + .s_col-11 { + width: 91.666666% !important; + } + + .s_col-12 { + width: 100% !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_grid { + margin-left: -$tp-space__3 !important; + display: flex !important; + flex-wrap: wrap !important; + } + + .m_grid > * { + padding-left: $tp-space__3 !important; + width: 100% !important; + } + + .m_grid-wide { + margin-left: -$tp-space__5 !important; + } + + .m_grid-wide > * { + padding-left: $tp-space__5 !important; + } + + .m_grid-flush { + margin-left: 0 !important; + } + + .m_grid-flush > * { + padding-left: 0 !important; + } + + .m_col-1 { + width: 8.333333% !important; + } + + .m_col-2 { + width: 16.666666% !important; + } + + .m_col-3 { + width: 25% !important; + } + + .m_col-4 { + width: 33.333333% !important; + } + + .m_col-5 { + width: 41.666666% !important; + } + + .m_col-6 { + width: 50% !important; + } + + .m_col-7 { + width: 58.333333% !important; + } + + .m_col-8 { + width: 66.666666% !important; + } + + .m_col-9 { + width: 75% !important; + } + + .m_col-10 { + width: 83.333333% !important; + } + + .m_col-11 { + width: 91.666666% !important; + } + + .m_col-12 { + width: 100% !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_grid { + margin-left: -$tp-space__3 !important; + display: flex !important; + flex-wrap: wrap !important; + } + + .l_grid > * { + padding-left: $tp-space__3 !important; + width: 100% !important; + } + + .l_grid-wide { + margin-left: -$tp-space__5 !important; + } + + .l_grid-wide > * { + padding-left: $tp-space__5 !important; + } + + .l_grid-flush { + margin-left: 0 !important; + } + + .l_grid-flush > * { + padding-left: 0 !important; + } + + .l_col-1 { + width: 8.333333% !important; + } + + .l_col-2 { + width: 16.666666% !important; + } + + .l_col-3 { + width: 25% !important; + } + + .l_col-4 { + width: 33.333333% !important; + } + + .l_col-5 { + width: 41.666666% !important; + } + + .l_col-6 { + width: 50% !important; + } + + .l_col-7 { + width: 58.333333% !important; + } + + .l_col-8 { + width: 66.666666% !important; + } + + .l_col-9 { + width: 75% !important; + } + + .l_col-10 { + width: 83.333333% !important; + } + + .l_col-11 { + width: 91.666666% !important; + } + + .l_col-12 { + width: 100% !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/height.scss b/packages/thumbprint-atomic/src/packages/height.scss new file mode 100644 index 000000000..e80f6c556 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/height.scss @@ -0,0 +1,328 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.h0 { + height: 0 !important; +} + +.h1 { + height: $tp-space__3 !important; +} + +.h2 { + height: $tp-space__4 !important; +} + +.h3 { + height: $tp-space__5 !important; +} + +.h4 { + height: $tp-space__6 !important; +} + +.h5 { + height: $tp-space__7 !important; +} + +.h6 { + height: $tp-space__8 !important; +} + +.h-0 { + height: 0 !important; +} + +.h-25 { + height: 25% !important; +} + +.h-50 { + height: 50% !important; +} + +.h-75 { + height: 75% !important; +} + +.h-100 { + height: 100% !important; +} + +.min-h-100 { + min-height: 100% !important; +} + +.vh-25 { + height: 25vh !important; +} + +.vh-50 { + height: 50vh !important; +} + +.vh-75 { + height: 75vh !important; +} + +.vh-100 { + height: 100vh !important; +} + +.min-vh-100 { + min-height: 100vh !important; +} + +.h-auto { + height: auto !important; +} + +.h-inherit { + height: inherit !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_h0 { + height: 0 !important; + } + + .s_h1 { + height: $tp-space__3 !important; + } + + .s_h2 { + height: $tp-space__4 !important; + } + + .s_h3 { + height: $tp-space__5 !important; + } + + .s_h4 { + height: $tp-space__6 !important; + } + + .s_h5 { + height: $tp-space__7 !important; + } + + .s_h6 { + height: $tp-space__8 !important; + } + + .s_h-0 { + height: 0 !important; + } + + .s_h-25 { + height: 25% !important; + } + + .s_h-50 { + height: 50% !important; + } + + .s_h-75 { + height: 75% !important; + } + + .s_h-100 { + height: 100% !important; + } + + .s_min-h-100 { + min-height: 100% !important; + } + + .s_vh-25 { + height: 25vh !important; + } + + .s_vh-50 { + height: 50vh !important; + } + + .s_vh-75 { + height: 75vh !important; + } + + .s_vh-100 { + height: 100vh !important; + } + + .s_min-vh-100 { + min-height: 100vh !important; + } + + .s_h-auto { + height: auto !important; + } + + .s_h-inherit { + height: inherit !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_h0 { + height: 0 !important; + } + + .m_h1 { + height: $tp-space__3 !important; + } + + .m_h2 { + height: $tp-space__4 !important; + } + + .m_h3 { + height: $tp-space__5 !important; + } + + .m_h4 { + height: $tp-space__6 !important; + } + + .m_h5 { + height: $tp-space__7 !important; + } + + .m_h6 { + height: $tp-space__8 !important; + } + + .m_h-0 { + height: 0 !important; + } + + .m_h-25 { + height: 25% !important; + } + + .m_h-50 { + height: 50% !important; + } + + .m_h-75 { + height: 75% !important; + } + + .m_h-100 { + height: 100% !important; + } + + .m_min-h-100 { + min-height: 100% !important; + } + + .m_vh-25 { + height: 25vh !important; + } + + .m_vh-50 { + height: 50vh !important; + } + + .m_vh-75 { + height: 75vh !important; + } + + .m_vh-100 { + height: 100vh !important; + } + + .m_min-vh-100 { + min-height: 100vh !important; + } + + .m_h-auto { + height: auto !important; + } + + .m_h-inherit { + height: inherit !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_h0 { + height: 0 !important; + } + + .l_h1 { + height: $tp-space__3 !important; + } + + .l_h2 { + height: $tp-space__4 !important; + } + + .l_h3 { + height: $tp-space__5 !important; + } + + .l_h4 { + height: $tp-space__6 !important; + } + + .l_h5 { + height: $tp-space__7 !important; + } + + .l_h6 { + height: $tp-space__8 !important; + } + + .l_h-0 { + height: 0 !important; + } + + .l_h-25 { + height: 25% !important; + } + + .l_h-50 { + height: 50% !important; + } + + .l_h-75 { + height: 75% !important; + } + + .l_h-100 { + height: 100% !important; + } + + .l_min-h-100 { + min-height: 100% !important; + } + + .l_vh-25 { + height: 25vh !important; + } + + .l_vh-50 { + height: 50vh !important; + } + + .l_vh-75 { + height: 75vh !important; + } + + .l_vh-100 { + height: 100vh !important; + } + + .l_min-vh-100 { + min-height: 100vh !important; + } + + .l_h-auto { + height: auto !important; + } + + .l_h-inherit { + height: inherit !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/margin.scss b/packages/thumbprint-atomic/src/packages/margin.scss new file mode 100644 index 000000000..889b8e048 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/margin.scss @@ -0,0 +1,1828 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.ma0 { + margin: 0 !important; +} + +.ma1 { + margin: $tp-space__1 !important; +} + +.ma2 { + margin: $tp-space__2 !important; +} + +.ma3 { + margin: $tp-space__3 !important; +} + +.ma4 { + margin: $tp-space__4 !important; +} + +.ma5 { + margin: $tp-space__5 !important; +} + +.ma6 { + margin: $tp-space__6 !important; +} + +.ma7 { + margin: $tp-space__7 !important; +} + +.ma8 { + margin: $tp-space__8 !important; +} + +.ml0 { + margin-left: 0 !important; +} + +.ml1 { + margin-left: $tp-space__1 !important; +} + +.ml2 { + margin-left: $tp-space__2 !important; +} + +.ml3 { + margin-left: $tp-space__3 !important; +} + +.ml4 { + margin-left: $tp-space__4 !important; +} + +.ml5 { + margin-left: $tp-space__5 !important; +} + +.ml6 { + margin-left: $tp-space__6 !important; +} + +.ml7 { + margin-left: $tp-space__7 !important; +} + +.ml8 { + margin-left: $tp-space__8 !important; +} + +.mr0 { + margin-right: 0 !important; +} + +.mr1 { + margin-right: $tp-space__1 !important; +} + +.mr2 { + margin-right: $tp-space__2 !important; +} + +.mr3 { + margin-right: $tp-space__3 !important; +} + +.mr4 { + margin-right: $tp-space__4 !important; +} + +.mr5 { + margin-right: $tp-space__5 !important; +} + +.mr6 { + margin-right: $tp-space__6 !important; +} + +.mr7 { + margin-right: $tp-space__7 !important; +} + +.mr8 { + margin-right: $tp-space__8 !important; +} + +.mb0 { + margin-bottom: 0 !important; +} + +.mb1 { + margin-bottom: $tp-space__1 !important; +} + +.mb2 { + margin-bottom: $tp-space__2 !important; +} + +.mb3 { + margin-bottom: $tp-space__3 !important; +} + +.mb4 { + margin-bottom: $tp-space__4 !important; +} + +.mb5 { + margin-bottom: $tp-space__5 !important; +} + +.mb6 { + margin-bottom: $tp-space__6 !important; +} + +.mb7 { + margin-bottom: $tp-space__7 !important; +} + +.mb8 { + margin-bottom: $tp-space__8 !important; +} + +.mt0 { + margin-top: 0 !important; +} + +.mt1 { + margin-top: $tp-space__1 !important; +} + +.mt2 { + margin-top: $tp-space__2 !important; +} + +.mt3 { + margin-top: $tp-space__3 !important; +} + +.mt4 { + margin-top: $tp-space__4 !important; +} + +.mt5 { + margin-top: $tp-space__5 !important; +} + +.mt6 { + margin-top: $tp-space__6 !important; +} + +.mt7 { + margin-top: $tp-space__7 !important; +} + +.mt8 { + margin-top: $tp-space__8 !important; +} + +.mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.mv1 { + margin-top: $tp-space__1 !important; + margin-bottom: $tp-space__1 !important; +} + +.mv2 { + margin-top: $tp-space__2 !important; + margin-bottom: $tp-space__2 !important; +} + +.mv3 { + margin-top: $tp-space__3 !important; + margin-bottom: $tp-space__3 !important; +} + +.mv4 { + margin-top: $tp-space__4 !important; + margin-bottom: $tp-space__4 !important; +} + +.mv5 { + margin-top: $tp-space__5 !important; + margin-bottom: $tp-space__5 !important; +} + +.mv6 { + margin-top: $tp-space__6 !important; + margin-bottom: $tp-space__6 !important; +} + +.mv7 { + margin-top: $tp-space__7 !important; + margin-bottom: $tp-space__7 !important; +} + +.mv8 { + margin-top: $tp-space__8 !important; + margin-bottom: $tp-space__8 !important; +} + +.mh0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.mh1 { + margin-left: $tp-space__1 !important; + margin-right: $tp-space__1 !important; +} + +.mh2 { + margin-left: $tp-space__2 !important; + margin-right: $tp-space__2 !important; +} + +.mh3 { + margin-left: $tp-space__3 !important; + margin-right: $tp-space__3 !important; +} + +.mh4 { + margin-left: $tp-space__4 !important; + margin-right: $tp-space__4 !important; +} + +.mh5 { + margin-left: $tp-space__5 !important; + margin-right: $tp-space__5 !important; +} + +.mh6 { + margin-left: $tp-space__6 !important; + margin-right: $tp-space__6 !important; +} + +.mh7 { + margin-left: $tp-space__7 !important; + margin-right: $tp-space__7 !important; +} + +.mh8 { + margin-left: $tp-space__8 !important; + margin-right: $tp-space__8 !important; +} + +.-ma1 { + margin: -4px !important; +} + +.-ma2 { + margin: -$tp-space__2 !important; +} + +.-ma3 { + margin: -$tp-space__3 !important; +} + +.-ma4 { + margin: -$tp-space__4 !important; +} + +.-ma5 { + margin: -$tp-space__5 !important; +} + +.-ma6 { + margin: -$tp-space__6 !important; +} + +.-ma7 { + margin: -$tp-space__7 !important; +} + +.-ma8 { + margin: -$tp-space__8 !important; +} + +.-ml1 { + margin-left: -4px !important; +} + +.-ml2 { + margin-left: -$tp-space__2 !important; +} + +.-ml3 { + margin-left: -$tp-space__3 !important; +} + +.-ml4 { + margin-left: -$tp-space__4 !important; +} + +.-ml5 { + margin-left: -$tp-space__5 !important; +} + +.-ml6 { + margin-left: -$tp-space__6 !important; +} + +.-ml7 { + margin-left: -$tp-space__7 !important; +} + +.-ml8 { + margin-left: -$tp-space__8 !important; +} + +.-mr1 { + margin-right: -4px !important; +} + +.-mr2 { + margin-right: -$tp-space__2 !important; +} + +.-mr3 { + margin-right: -$tp-space__3 !important; +} + +.-mr4 { + margin-right: -$tp-space__4 !important; +} + +.-mr5 { + margin-right: -$tp-space__5 !important; +} + +.-mr6 { + margin-right: -$tp-space__6 !important; +} + +.-mr7 { + margin-right: -$tp-space__7 !important; +} + +.-mr8 { + margin-right: -$tp-space__8 !important; +} + +.-mb1 { + margin-bottom: -4px !important; +} + +.-mb2 { + margin-bottom: -$tp-space__2 !important; +} + +.-mb3 { + margin-bottom: -$tp-space__3 !important; +} + +.-mb4 { + margin-bottom: -$tp-space__4 !important; +} + +.-mb5 { + margin-bottom: -$tp-space__5 !important; +} + +.-mb6 { + margin-bottom: -$tp-space__6 !important; +} + +.-mb7 { + margin-bottom: -$tp-space__7 !important; +} + +.-mb8 { + margin-bottom: -$tp-space__8 !important; +} + +.-mt1 { + margin-top: -4px !important; +} + +.-mt2 { + margin-top: -$tp-space__2 !important; +} + +.-mt3 { + margin-top: -$tp-space__3 !important; +} + +.-mt4 { + margin-top: -$tp-space__4 !important; +} + +.-mt5 { + margin-top: -$tp-space__5 !important; +} + +.-mt6 { + margin-top: -$tp-space__6 !important; +} + +.-mt7 { + margin-top: -$tp-space__7 !important; +} + +.-mt8 { + margin-top: -$tp-space__8 !important; +} + +.center { + margin-right: auto !important; + margin-left: auto !important; +} + +.ma-auto { + margin: auto !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_ma0 { + margin: 0 !important; + } + + .s_ma1 { + margin: $tp-space__1 !important; + } + + .s_ma2 { + margin: $tp-space__2 !important; + } + + .s_ma3 { + margin: $tp-space__3 !important; + } + + .s_ma4 { + margin: $tp-space__4 !important; + } + + .s_ma5 { + margin: $tp-space__5 !important; + } + + .s_ma6 { + margin: $tp-space__6 !important; + } + + .s_ma7 { + margin: $tp-space__7 !important; + } + + .s_ma8 { + margin: $tp-space__8 !important; + } + + .s_ml0 { + margin-left: 0 !important; + } + + .s_ml1 { + margin-left: $tp-space__1 !important; + } + + .s_ml2 { + margin-left: $tp-space__2 !important; + } + + .s_ml3 { + margin-left: $tp-space__3 !important; + } + + .s_ml4 { + margin-left: $tp-space__4 !important; + } + + .s_ml5 { + margin-left: $tp-space__5 !important; + } + + .s_ml6 { + margin-left: $tp-space__6 !important; + } + + .s_ml7 { + margin-left: $tp-space__7 !important; + } + + .s_ml8 { + margin-left: $tp-space__8 !important; + } + + .s_mr0 { + margin-right: 0 !important; + } + + .s_mr1 { + margin-right: $tp-space__1 !important; + } + + .s_mr2 { + margin-right: $tp-space__2 !important; + } + + .s_mr3 { + margin-right: $tp-space__3 !important; + } + + .s_mr4 { + margin-right: $tp-space__4 !important; + } + + .s_mr5 { + margin-right: $tp-space__5 !important; + } + + .s_mr6 { + margin-right: $tp-space__6 !important; + } + + .s_mr7 { + margin-right: $tp-space__7 !important; + } + + .s_mr8 { + margin-right: $tp-space__8 !important; + } + + .s_mb0 { + margin-bottom: 0 !important; + } + + .s_mb1 { + margin-bottom: $tp-space__1 !important; + } + + .s_mb2 { + margin-bottom: $tp-space__2 !important; + } + + .s_mb3 { + margin-bottom: $tp-space__3 !important; + } + + .s_mb4 { + margin-bottom: $tp-space__4 !important; + } + + .s_mb5 { + margin-bottom: $tp-space__5 !important; + } + + .s_mb6 { + margin-bottom: $tp-space__6 !important; + } + + .s_mb7 { + margin-bottom: $tp-space__7 !important; + } + + .s_mb8 { + margin-bottom: $tp-space__8 !important; + } + + .s_mt0 { + margin-top: 0 !important; + } + + .s_mt1 { + margin-top: $tp-space__1 !important; + } + + .s_mt2 { + margin-top: $tp-space__2 !important; + } + + .s_mt3 { + margin-top: $tp-space__3 !important; + } + + .s_mt4 { + margin-top: $tp-space__4 !important; + } + + .s_mt5 { + margin-top: $tp-space__5 !important; + } + + .s_mt6 { + margin-top: $tp-space__6 !important; + } + + .s_mt7 { + margin-top: $tp-space__7 !important; + } + + .s_mt8 { + margin-top: $tp-space__8 !important; + } + + .s_mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .s_mv1 { + margin-top: $tp-space__1 !important; + margin-bottom: $tp-space__1 !important; + } + + .s_mv2 { + margin-top: $tp-space__2 !important; + margin-bottom: $tp-space__2 !important; + } + + .s_mv3 { + margin-top: $tp-space__3 !important; + margin-bottom: $tp-space__3 !important; + } + + .s_mv4 { + margin-top: $tp-space__4 !important; + margin-bottom: $tp-space__4 !important; + } + + .s_mv5 { + margin-top: $tp-space__5 !important; + margin-bottom: $tp-space__5 !important; + } + + .s_mv6 { + margin-top: $tp-space__6 !important; + margin-bottom: $tp-space__6 !important; + } + + .s_mv7 { + margin-top: $tp-space__7 !important; + margin-bottom: $tp-space__7 !important; + } + + .s_mv8 { + margin-top: $tp-space__8 !important; + margin-bottom: $tp-space__8 !important; + } + + .s_mh0 { + margin-left: 0 !important; + margin-right: 0 !important; + } + + .s_mh1 { + margin-left: $tp-space__1 !important; + margin-right: $tp-space__1 !important; + } + + .s_mh2 { + margin-left: $tp-space__2 !important; + margin-right: $tp-space__2 !important; + } + + .s_mh3 { + margin-left: $tp-space__3 !important; + margin-right: $tp-space__3 !important; + } + + .s_mh4 { + margin-left: $tp-space__4 !important; + margin-right: $tp-space__4 !important; + } + + .s_mh5 { + margin-left: $tp-space__5 !important; + margin-right: $tp-space__5 !important; + } + + .s_mh6 { + margin-left: $tp-space__6 !important; + margin-right: $tp-space__6 !important; + } + + .s_mh7 { + margin-left: $tp-space__7 !important; + margin-right: $tp-space__7 !important; + } + + .s_mh8 { + margin-left: $tp-space__8 !important; + margin-right: $tp-space__8 !important; + } + + .s_-ma1 { + margin: -4px !important; + } + + .s_-ma2 { + margin: -$tp-space__2 !important; + } + + .s_-ma3 { + margin: -$tp-space__3 !important; + } + + .s_-ma4 { + margin: -$tp-space__4 !important; + } + + .s_-ma5 { + margin: -$tp-space__5 !important; + } + + .s_-ma6 { + margin: -$tp-space__6 !important; + } + + .s_-ma7 { + margin: -$tp-space__7 !important; + } + + .s_-ma8 { + margin: -$tp-space__8 !important; + } + + .s_-ml1 { + margin-left: -4px !important; + } + + .s_-ml2 { + margin-left: -$tp-space__2 !important; + } + + .s_-ml3 { + margin-left: -$tp-space__3 !important; + } + + .s_-ml4 { + margin-left: -$tp-space__4 !important; + } + + .s_-ml5 { + margin-left: -$tp-space__5 !important; + } + + .s_-ml6 { + margin-left: -$tp-space__6 !important; + } + + .s_-ml7 { + margin-left: -$tp-space__7 !important; + } + + .s_-ml8 { + margin-left: -$tp-space__8 !important; + } + + .s_-mr1 { + margin-right: -4px !important; + } + + .s_-mr2 { + margin-right: -$tp-space__2 !important; + } + + .s_-mr3 { + margin-right: -$tp-space__3 !important; + } + + .s_-mr4 { + margin-right: -$tp-space__4 !important; + } + + .s_-mr5 { + margin-right: -$tp-space__5 !important; + } + + .s_-mr6 { + margin-right: -$tp-space__6 !important; + } + + .s_-mr7 { + margin-right: -$tp-space__7 !important; + } + + .s_-mr8 { + margin-right: -$tp-space__8 !important; + } + + .s_-mb1 { + margin-bottom: -4px !important; + } + + .s_-mb2 { + margin-bottom: -$tp-space__2 !important; + } + + .s_-mb3 { + margin-bottom: -$tp-space__3 !important; + } + + .s_-mb4 { + margin-bottom: -$tp-space__4 !important; + } + + .s_-mb5 { + margin-bottom: -$tp-space__5 !important; + } + + .s_-mb6 { + margin-bottom: -$tp-space__6 !important; + } + + .s_-mb7 { + margin-bottom: -$tp-space__7 !important; + } + + .s_-mb8 { + margin-bottom: -$tp-space__8 !important; + } + + .s_-mt1 { + margin-top: -4px !important; + } + + .s_-mt2 { + margin-top: -$tp-space__2 !important; + } + + .s_-mt3 { + margin-top: -$tp-space__3 !important; + } + + .s_-mt4 { + margin-top: -$tp-space__4 !important; + } + + .s_-mt5 { + margin-top: -$tp-space__5 !important; + } + + .s_-mt6 { + margin-top: -$tp-space__6 !important; + } + + .s_-mt7 { + margin-top: -$tp-space__7 !important; + } + + .s_-mt8 { + margin-top: -$tp-space__8 !important; + } + + .s_center { + margin-right: auto !important; + margin-left: auto !important; + } + + .s_ma-auto { + margin: auto !important; + } + + .s_mr-auto { + margin-right: auto !important; + } + + .s_ml-auto { + margin-left: auto !important; + } + + .s_mt-auto { + margin-top: auto !important; + } + + .s_mb-auto { + margin-bottom: auto !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_ma0 { + margin: 0 !important; + } + + .m_ma1 { + margin: $tp-space__1 !important; + } + + .m_ma2 { + margin: $tp-space__2 !important; + } + + .m_ma3 { + margin: $tp-space__3 !important; + } + + .m_ma4 { + margin: $tp-space__4 !important; + } + + .m_ma5 { + margin: $tp-space__5 !important; + } + + .m_ma6 { + margin: $tp-space__6 !important; + } + + .m_ma7 { + margin: $tp-space__7 !important; + } + + .m_ma8 { + margin: $tp-space__8 !important; + } + + .m_ml0 { + margin-left: 0 !important; + } + + .m_ml1 { + margin-left: $tp-space__1 !important; + } + + .m_ml2 { + margin-left: $tp-space__2 !important; + } + + .m_ml3 { + margin-left: $tp-space__3 !important; + } + + .m_ml4 { + margin-left: $tp-space__4 !important; + } + + .m_ml5 { + margin-left: $tp-space__5 !important; + } + + .m_ml6 { + margin-left: $tp-space__6 !important; + } + + .m_ml7 { + margin-left: $tp-space__7 !important; + } + + .m_ml8 { + margin-left: $tp-space__8 !important; + } + + .m_mr0 { + margin-right: 0 !important; + } + + .m_mr1 { + margin-right: $tp-space__1 !important; + } + + .m_mr2 { + margin-right: $tp-space__2 !important; + } + + .m_mr3 { + margin-right: $tp-space__3 !important; + } + + .m_mr4 { + margin-right: $tp-space__4 !important; + } + + .m_mr5 { + margin-right: $tp-space__5 !important; + } + + .m_mr6 { + margin-right: $tp-space__6 !important; + } + + .m_mr7 { + margin-right: $tp-space__7 !important; + } + + .m_mr8 { + margin-right: $tp-space__8 !important; + } + + .m_mb0 { + margin-bottom: 0 !important; + } + + .m_mb1 { + margin-bottom: $tp-space__1 !important; + } + + .m_mb2 { + margin-bottom: $tp-space__2 !important; + } + + .m_mb3 { + margin-bottom: $tp-space__3 !important; + } + + .m_mb4 { + margin-bottom: $tp-space__4 !important; + } + + .m_mb5 { + margin-bottom: $tp-space__5 !important; + } + + .m_mb6 { + margin-bottom: $tp-space__6 !important; + } + + .m_mb7 { + margin-bottom: $tp-space__7 !important; + } + + .m_mb8 { + margin-bottom: $tp-space__8 !important; + } + + .m_mt0 { + margin-top: 0 !important; + } + + .m_mt1 { + margin-top: $tp-space__1 !important; + } + + .m_mt2 { + margin-top: $tp-space__2 !important; + } + + .m_mt3 { + margin-top: $tp-space__3 !important; + } + + .m_mt4 { + margin-top: $tp-space__4 !important; + } + + .m_mt5 { + margin-top: $tp-space__5 !important; + } + + .m_mt6 { + margin-top: $tp-space__6 !important; + } + + .m_mt7 { + margin-top: $tp-space__7 !important; + } + + .m_mt8 { + margin-top: $tp-space__8 !important; + } + + .m_mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .m_mv1 { + margin-top: $tp-space__1 !important; + margin-bottom: $tp-space__1 !important; + } + + .m_mv2 { + margin-top: $tp-space__2 !important; + margin-bottom: $tp-space__2 !important; + } + + .m_mv3 { + margin-top: $tp-space__3 !important; + margin-bottom: $tp-space__3 !important; + } + + .m_mv4 { + margin-top: $tp-space__4 !important; + margin-bottom: $tp-space__4 !important; + } + + .m_mv5 { + margin-top: $tp-space__5 !important; + margin-bottom: $tp-space__5 !important; + } + + .m_mv6 { + margin-top: $tp-space__6 !important; + margin-bottom: $tp-space__6 !important; + } + + .m_mv7 { + margin-top: $tp-space__7 !important; + margin-bottom: $tp-space__7 !important; + } + + .m_mv8 { + margin-top: $tp-space__8 !important; + margin-bottom: $tp-space__8 !important; + } + + .m_mh0 { + margin-left: 0 !important; + margin-right: 0 !important; + } + + .m_mh1 { + margin-left: $tp-space__1 !important; + margin-right: $tp-space__1 !important; + } + + .m_mh2 { + margin-left: $tp-space__2 !important; + margin-right: $tp-space__2 !important; + } + + .m_mh3 { + margin-left: $tp-space__3 !important; + margin-right: $tp-space__3 !important; + } + + .m_mh4 { + margin-left: $tp-space__4 !important; + margin-right: $tp-space__4 !important; + } + + .m_mh5 { + margin-left: $tp-space__5 !important; + margin-right: $tp-space__5 !important; + } + + .m_mh6 { + margin-left: $tp-space__6 !important; + margin-right: $tp-space__6 !important; + } + + .m_mh7 { + margin-left: $tp-space__7 !important; + margin-right: $tp-space__7 !important; + } + + .m_mh8 { + margin-left: $tp-space__8 !important; + margin-right: $tp-space__8 !important; + } + + .m_-ma1 { + margin: -4px !important; + } + + .m_-ma2 { + margin: -$tp-space__2 !important; + } + + .m_-ma3 { + margin: -$tp-space__3 !important; + } + + .m_-ma4 { + margin: -$tp-space__4 !important; + } + + .m_-ma5 { + margin: -$tp-space__5 !important; + } + + .m_-ma6 { + margin: -$tp-space__6 !important; + } + + .m_-ma7 { + margin: -$tp-space__7 !important; + } + + .m_-ma8 { + margin: -$tp-space__8 !important; + } + + .m_-ml1 { + margin-left: -4px !important; + } + + .m_-ml2 { + margin-left: -$tp-space__2 !important; + } + + .m_-ml3 { + margin-left: -$tp-space__3 !important; + } + + .m_-ml4 { + margin-left: -$tp-space__4 !important; + } + + .m_-ml5 { + margin-left: -$tp-space__5 !important; + } + + .m_-ml6 { + margin-left: -$tp-space__6 !important; + } + + .m_-ml7 { + margin-left: -$tp-space__7 !important; + } + + .m_-ml8 { + margin-left: -$tp-space__8 !important; + } + + .m_-mr1 { + margin-right: -4px !important; + } + + .m_-mr2 { + margin-right: -$tp-space__2 !important; + } + + .m_-mr3 { + margin-right: -$tp-space__3 !important; + } + + .m_-mr4 { + margin-right: -$tp-space__4 !important; + } + + .m_-mr5 { + margin-right: -$tp-space__5 !important; + } + + .m_-mr6 { + margin-right: -$tp-space__6 !important; + } + + .m_-mr7 { + margin-right: -$tp-space__7 !important; + } + + .m_-mr8 { + margin-right: -$tp-space__8 !important; + } + + .m_-mb1 { + margin-bottom: -4px !important; + } + + .m_-mb2 { + margin-bottom: -$tp-space__2 !important; + } + + .m_-mb3 { + margin-bottom: -$tp-space__3 !important; + } + + .m_-mb4 { + margin-bottom: -$tp-space__4 !important; + } + + .m_-mb5 { + margin-bottom: -$tp-space__5 !important; + } + + .m_-mb6 { + margin-bottom: -$tp-space__6 !important; + } + + .m_-mb7 { + margin-bottom: -$tp-space__7 !important; + } + + .m_-mb8 { + margin-bottom: -$tp-space__8 !important; + } + + .m_-mt1 { + margin-top: -4px !important; + } + + .m_-mt2 { + margin-top: -$tp-space__2 !important; + } + + .m_-mt3 { + margin-top: -$tp-space__3 !important; + } + + .m_-mt4 { + margin-top: -$tp-space__4 !important; + } + + .m_-mt5 { + margin-top: -$tp-space__5 !important; + } + + .m_-mt6 { + margin-top: -$tp-space__6 !important; + } + + .m_-mt7 { + margin-top: -$tp-space__7 !important; + } + + .m_-mt8 { + margin-top: -$tp-space__8 !important; + } + + .m_center { + margin-right: auto !important; + margin-left: auto !important; + } + + .m_ma-auto { + margin: auto !important; + } + + .m_mr-auto { + margin-right: auto !important; + } + + .m_ml-auto { + margin-left: auto !important; + } + + .m_mt-auto { + margin-top: auto !important; + } + + .m_mb-auto { + margin-bottom: auto !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_ma0 { + margin: 0 !important; + } + + .l_ma1 { + margin: $tp-space__1 !important; + } + + .l_ma2 { + margin: $tp-space__2 !important; + } + + .l_ma3 { + margin: $tp-space__3 !important; + } + + .l_ma4 { + margin: $tp-space__4 !important; + } + + .l_ma5 { + margin: $tp-space__5 !important; + } + + .l_ma6 { + margin: $tp-space__6 !important; + } + + .l_ma7 { + margin: $tp-space__7 !important; + } + + .l_ma8 { + margin: $tp-space__8 !important; + } + + .l_ml0 { + margin-left: 0 !important; + } + + .l_ml1 { + margin-left: $tp-space__1 !important; + } + + .l_ml2 { + margin-left: $tp-space__2 !important; + } + + .l_ml3 { + margin-left: $tp-space__3 !important; + } + + .l_ml4 { + margin-left: $tp-space__4 !important; + } + + .l_ml5 { + margin-left: $tp-space__5 !important; + } + + .l_ml6 { + margin-left: $tp-space__6 !important; + } + + .l_ml7 { + margin-left: $tp-space__7 !important; + } + + .l_ml8 { + margin-left: $tp-space__8 !important; + } + + .l_mr0 { + margin-right: 0 !important; + } + + .l_mr1 { + margin-right: $tp-space__1 !important; + } + + .l_mr2 { + margin-right: $tp-space__2 !important; + } + + .l_mr3 { + margin-right: $tp-space__3 !important; + } + + .l_mr4 { + margin-right: $tp-space__4 !important; + } + + .l_mr5 { + margin-right: $tp-space__5 !important; + } + + .l_mr6 { + margin-right: $tp-space__6 !important; + } + + .l_mr7 { + margin-right: $tp-space__7 !important; + } + + .l_mr8 { + margin-right: $tp-space__8 !important; + } + + .l_mb0 { + margin-bottom: 0 !important; + } + + .l_mb1 { + margin-bottom: $tp-space__1 !important; + } + + .l_mb2 { + margin-bottom: $tp-space__2 !important; + } + + .l_mb3 { + margin-bottom: $tp-space__3 !important; + } + + .l_mb4 { + margin-bottom: $tp-space__4 !important; + } + + .l_mb5 { + margin-bottom: $tp-space__5 !important; + } + + .l_mb6 { + margin-bottom: $tp-space__6 !important; + } + + .l_mb7 { + margin-bottom: $tp-space__7 !important; + } + + .l_mb8 { + margin-bottom: $tp-space__8 !important; + } + + .l_mt0 { + margin-top: 0 !important; + } + + .l_mt1 { + margin-top: $tp-space__1 !important; + } + + .l_mt2 { + margin-top: $tp-space__2 !important; + } + + .l_mt3 { + margin-top: $tp-space__3 !important; + } + + .l_mt4 { + margin-top: $tp-space__4 !important; + } + + .l_mt5 { + margin-top: $tp-space__5 !important; + } + + .l_mt6 { + margin-top: $tp-space__6 !important; + } + + .l_mt7 { + margin-top: $tp-space__7 !important; + } + + .l_mt8 { + margin-top: $tp-space__8 !important; + } + + .l_mv0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + .l_mv1 { + margin-top: $tp-space__1 !important; + margin-bottom: $tp-space__1 !important; + } + + .l_mv2 { + margin-top: $tp-space__2 !important; + margin-bottom: $tp-space__2 !important; + } + + .l_mv3 { + margin-top: $tp-space__3 !important; + margin-bottom: $tp-space__3 !important; + } + + .l_mv4 { + margin-top: $tp-space__4 !important; + margin-bottom: $tp-space__4 !important; + } + + .l_mv5 { + margin-top: $tp-space__5 !important; + margin-bottom: $tp-space__5 !important; + } + + .l_mv6 { + margin-top: $tp-space__6 !important; + margin-bottom: $tp-space__6 !important; + } + + .l_mv7 { + margin-top: $tp-space__7 !important; + margin-bottom: $tp-space__7 !important; + } + + .l_mv8 { + margin-top: $tp-space__8 !important; + margin-bottom: $tp-space__8 !important; + } + + .l_mh0 { + margin-left: 0 !important; + margin-right: 0 !important; + } + + .l_mh1 { + margin-left: $tp-space__1 !important; + margin-right: $tp-space__1 !important; + } + + .l_mh2 { + margin-left: $tp-space__2 !important; + margin-right: $tp-space__2 !important; + } + + .l_mh3 { + margin-left: $tp-space__3 !important; + margin-right: $tp-space__3 !important; + } + + .l_mh4 { + margin-left: $tp-space__4 !important; + margin-right: $tp-space__4 !important; + } + + .l_mh5 { + margin-left: $tp-space__5 !important; + margin-right: $tp-space__5 !important; + } + + .l_mh6 { + margin-left: $tp-space__6 !important; + margin-right: $tp-space__6 !important; + } + + .l_mh7 { + margin-left: $tp-space__7 !important; + margin-right: $tp-space__7 !important; + } + + .l_mh8 { + margin-left: $tp-space__8 !important; + margin-right: $tp-space__8 !important; + } + + .l_-ma1 { + margin: -4px !important; + } + + .l_-ma2 { + margin: -$tp-space__2 !important; + } + + .l_-ma3 { + margin: -$tp-space__3 !important; + } + + .l_-ma4 { + margin: -$tp-space__4 !important; + } + + .l_-ma5 { + margin: -$tp-space__5 !important; + } + + .l_-ma6 { + margin: -$tp-space__6 !important; + } + + .l_-ma7 { + margin: -$tp-space__7 !important; + } + + .l_-ma8 { + margin: -$tp-space__8 !important; + } + + .l_-ml1 { + margin-left: -4px !important; + } + + .l_-ml2 { + margin-left: -$tp-space__2 !important; + } + + .l_-ml3 { + margin-left: -$tp-space__3 !important; + } + + .l_-ml4 { + margin-left: -$tp-space__4 !important; + } + + .l_-ml5 { + margin-left: -$tp-space__5 !important; + } + + .l_-ml6 { + margin-left: -$tp-space__6 !important; + } + + .l_-ml7 { + margin-left: -$tp-space__7 !important; + } + + .l_-ml8 { + margin-left: -$tp-space__8 !important; + } + + .l_-mr1 { + margin-right: -4px !important; + } + + .l_-mr2 { + margin-right: -$tp-space__2 !important; + } + + .l_-mr3 { + margin-right: -$tp-space__3 !important; + } + + .l_-mr4 { + margin-right: -$tp-space__4 !important; + } + + .l_-mr5 { + margin-right: -$tp-space__5 !important; + } + + .l_-mr6 { + margin-right: -$tp-space__6 !important; + } + + .l_-mr7 { + margin-right: -$tp-space__7 !important; + } + + .l_-mr8 { + margin-right: -$tp-space__8 !important; + } + + .l_-mb1 { + margin-bottom: -4px !important; + } + + .l_-mb2 { + margin-bottom: -$tp-space__2 !important; + } + + .l_-mb3 { + margin-bottom: -$tp-space__3 !important; + } + + .l_-mb4 { + margin-bottom: -$tp-space__4 !important; + } + + .l_-mb5 { + margin-bottom: -$tp-space__5 !important; + } + + .l_-mb6 { + margin-bottom: -$tp-space__6 !important; + } + + .l_-mb7 { + margin-bottom: -$tp-space__7 !important; + } + + .l_-mb8 { + margin-bottom: -$tp-space__8 !important; + } + + .l_-mt1 { + margin-top: -4px !important; + } + + .l_-mt2 { + margin-top: -$tp-space__2 !important; + } + + .l_-mt3 { + margin-top: -$tp-space__3 !important; + } + + .l_-mt4 { + margin-top: -$tp-space__4 !important; + } + + .l_-mt5 { + margin-top: -$tp-space__5 !important; + } + + .l_-mt6 { + margin-top: -$tp-space__6 !important; + } + + .l_-mt7 { + margin-top: -$tp-space__7 !important; + } + + .l_-mt8 { + margin-top: -$tp-space__8 !important; + } + + .l_center { + margin-right: auto !important; + margin-left: auto !important; + } + + .l_ma-auto { + margin: auto !important; + } + + .l_mr-auto { + margin-right: auto !important; + } + + .l_ml-auto { + margin-left: auto !important; + } + + .l_mt-auto { + margin-top: auto !important; + } + + .l_mb-auto { + margin-bottom: auto !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/max-width.scss b/packages/thumbprint-atomic/src/packages/max-width.scss new file mode 100644 index 000000000..84ca2357e --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/max-width.scss @@ -0,0 +1,184 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.mw-100 { + max-width: 100% !important; +} + +.mw1 { + max-width: $tp-space__3 !important; +} + +.mw2 { + max-width: $tp-space__4 !important; +} + +.mw3 { + max-width: $tp-space__5 !important; +} + +.mw4 { + max-width: $tp-space__6 !important; +} + +.mw5 { + max-width: $tp-space__7 !important; +} + +.mw6 { + max-width: $tp-space__8 !important; +} + +.mw7 { + max-width: 512px !important; +} + +.mw8 { + max-width: 736px !important; +} + +.mw9 { + max-width: $tp-wrap__max-width !important; +} + +.mw-none { + max-width: none !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_mw-100 { + max-width: 100% !important; + } + + .s_mw1 { + max-width: $tp-space__3 !important; + } + + .s_mw2 { + max-width: $tp-space__4 !important; + } + + .s_mw3 { + max-width: $tp-space__5 !important; + } + + .s_mw4 { + max-width: $tp-space__6 !important; + } + + .s_mw5 { + max-width: $tp-space__7 !important; + } + + .s_mw6 { + max-width: $tp-space__8 !important; + } + + .s_mw7 { + max-width: 512px !important; + } + + .s_mw8 { + max-width: 736px !important; + } + + .s_mw9 { + max-width: $tp-wrap__max-width !important; + } + + .s_mw-none { + max-width: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_mw-100 { + max-width: 100% !important; + } + + .m_mw1 { + max-width: $tp-space__3 !important; + } + + .m_mw2 { + max-width: $tp-space__4 !important; + } + + .m_mw3 { + max-width: $tp-space__5 !important; + } + + .m_mw4 { + max-width: $tp-space__6 !important; + } + + .m_mw5 { + max-width: $tp-space__7 !important; + } + + .m_mw6 { + max-width: $tp-space__8 !important; + } + + .m_mw7 { + max-width: 512px !important; + } + + .m_mw8 { + max-width: 736px !important; + } + + .m_mw9 { + max-width: $tp-wrap__max-width !important; + } + + .m_mw-none { + max-width: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_mw-100 { + max-width: 100% !important; + } + + .l_mw1 { + max-width: $tp-space__3 !important; + } + + .l_mw2 { + max-width: $tp-space__4 !important; + } + + .l_mw3 { + max-width: $tp-space__5 !important; + } + + .l_mw4 { + max-width: $tp-space__6 !important; + } + + .l_mw5 { + max-width: $tp-space__7 !important; + } + + .l_mw6 { + max-width: $tp-space__8 !important; + } + + .l_mw7 { + max-width: 512px !important; + } + + .l_mw8 { + max-width: 736px !important; + } + + .l_mw9 { + max-width: $tp-wrap__max-width !important; + } + + .l_mw-none { + max-width: none !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/overflow.scss b/packages/thumbprint-atomic/src/packages/overflow.scss new file mode 100644 index 000000000..1784e5926 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/overflow.scss @@ -0,0 +1,200 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.overflow-visible { + overflow: visible !important; +} + +.overflow-hidden { + overflow: hidden !important; +} + +.overflow-scroll { + overflow: scroll !important; +} + +.overflow-auto { + overflow: auto !important; +} + +.overflow-x-visible { + overflow-x: visible !important; +} + +.overflow-x-hidden { + overflow-x: hidden !important; +} + +.overflow-x-scroll { + overflow-x: scroll !important; +} + +.overflow-x-auto { + overflow-x: auto !important; +} + +.overflow-y-visible { + overflow-y: visible !important; +} + +.overflow-y-hidden { + overflow-y: hidden !important; +} + +.overflow-y-scroll { + overflow-y: scroll !important; +} + +.overflow-y-auto { + overflow-y: auto !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_overflow-visible { + overflow: visible !important; + } + + .s_overflow-hidden { + overflow: hidden !important; + } + + .s_overflow-scroll { + overflow: scroll !important; + } + + .s_overflow-auto { + overflow: auto !important; + } + + .s_overflow-x-visible { + overflow-x: visible !important; + } + + .s_overflow-x-hidden { + overflow-x: hidden !important; + } + + .s_overflow-x-scroll { + overflow-x: scroll !important; + } + + .s_overflow-x-auto { + overflow-x: auto !important; + } + + .s_overflow-y-visible { + overflow-y: visible !important; + } + + .s_overflow-y-hidden { + overflow-y: hidden !important; + } + + .s_overflow-y-scroll { + overflow-y: scroll !important; + } + + .s_overflow-y-auto { + overflow-y: auto !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_overflow-visible { + overflow: visible !important; + } + + .m_overflow-hidden { + overflow: hidden !important; + } + + .m_overflow-scroll { + overflow: scroll !important; + } + + .m_overflow-auto { + overflow: auto !important; + } + + .m_overflow-x-visible { + overflow-x: visible !important; + } + + .m_overflow-x-hidden { + overflow-x: hidden !important; + } + + .m_overflow-x-scroll { + overflow-x: scroll !important; + } + + .m_overflow-x-auto { + overflow-x: auto !important; + } + + .m_overflow-y-visible { + overflow-y: visible !important; + } + + .m_overflow-y-hidden { + overflow-y: hidden !important; + } + + .m_overflow-y-scroll { + overflow-y: scroll !important; + } + + .m_overflow-y-auto { + overflow-y: auto !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_overflow-visible { + overflow: visible !important; + } + + .l_overflow-hidden { + overflow: hidden !important; + } + + .l_overflow-scroll { + overflow: scroll !important; + } + + .l_overflow-auto { + overflow: auto !important; + } + + .l_overflow-x-visible { + overflow-x: visible !important; + } + + .l_overflow-x-hidden { + overflow-x: hidden !important; + } + + .l_overflow-x-scroll { + overflow-x: scroll !important; + } + + .l_overflow-x-auto { + overflow-x: auto !important; + } + + .l_overflow-y-visible { + overflow-y: visible !important; + } + + .l_overflow-y-hidden { + overflow-y: hidden !important; + } + + .l_overflow-y-scroll { + overflow-y: scroll !important; + } + + .l_overflow-y-auto { + overflow-y: auto !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/padding.scss b/packages/thumbprint-atomic/src/packages/padding.scss new file mode 100644 index 000000000..5fabf5237 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/padding.scss @@ -0,0 +1,1088 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.pa0 { + padding: 0 !important; +} + +.pa1 { + padding: $tp-space__1 !important; +} + +.pa2 { + padding: $tp-space__2 !important; +} + +.pa3 { + padding: $tp-space__3 !important; +} + +.pa4 { + padding: $tp-space__4 !important; +} + +.pa5 { + padding: $tp-space__5 !important; +} + +.pa6 { + padding: $tp-space__6 !important; +} + +.pa7 { + padding: $tp-space__7 !important; +} + +.pa8 { + padding: $tp-space__8 !important; +} + +.pl0 { + padding-left: 0 !important; +} + +.pl1 { + padding-left: $tp-space__1 !important; +} + +.pl2 { + padding-left: $tp-space__2 !important; +} + +.pl3 { + padding-left: $tp-space__3 !important; +} + +.pl4 { + padding-left: $tp-space__4 !important; +} + +.pl5 { + padding-left: $tp-space__5 !important; +} + +.pl6 { + padding-left: $tp-space__6 !important; +} + +.pl7 { + padding-left: $tp-space__7 !important; +} + +.pl8 { + padding-left: $tp-space__8 !important; +} + +.pr0 { + padding-right: 0 !important; +} + +.pr1 { + padding-right: $tp-space__1 !important; +} + +.pr2 { + padding-right: $tp-space__2 !important; +} + +.pr3 { + padding-right: $tp-space__3 !important; +} + +.pr4 { + padding-right: $tp-space__4 !important; +} + +.pr5 { + padding-right: $tp-space__5 !important; +} + +.pr6 { + padding-right: $tp-space__6 !important; +} + +.pr7 { + padding-right: $tp-space__7 !important; +} + +.pr8 { + padding-right: $tp-space__8 !important; +} + +.pb0 { + padding-bottom: 0 !important; +} + +.pb1 { + padding-bottom: $tp-space__1 !important; +} + +.pb2 { + padding-bottom: $tp-space__2 !important; +} + +.pb3 { + padding-bottom: $tp-space__3 !important; +} + +.pb4 { + padding-bottom: $tp-space__4 !important; +} + +.pb5 { + padding-bottom: $tp-space__5 !important; +} + +.pb6 { + padding-bottom: $tp-space__6 !important; +} + +.pb7 { + padding-bottom: $tp-space__7 !important; +} + +.pb8 { + padding-bottom: $tp-space__8 !important; +} + +.pt0 { + padding-top: 0 !important; +} + +.pt1 { + padding-top: $tp-space__1 !important; +} + +.pt2 { + padding-top: $tp-space__2 !important; +} + +.pt3 { + padding-top: $tp-space__3 !important; +} + +.pt4 { + padding-top: $tp-space__4 !important; +} + +.pt5 { + padding-top: $tp-space__5 !important; +} + +.pt6 { + padding-top: $tp-space__6 !important; +} + +.pt7 { + padding-top: $tp-space__7 !important; +} + +.pt8 { + padding-top: $tp-space__8 !important; +} + +.pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pv1 { + padding-top: $tp-space__1 !important; + padding-bottom: $tp-space__1 !important; +} + +.pv2 { + padding-top: $tp-space__2 !important; + padding-bottom: $tp-space__2 !important; +} + +.pv3 { + padding-top: $tp-space__3 !important; + padding-bottom: $tp-space__3 !important; +} + +.pv4 { + padding-top: $tp-space__4 !important; + padding-bottom: $tp-space__4 !important; +} + +.pv5 { + padding-top: $tp-space__5 !important; + padding-bottom: $tp-space__5 !important; +} + +.pv6 { + padding-top: $tp-space__6 !important; + padding-bottom: $tp-space__6 !important; +} + +.pv7 { + padding-top: $tp-space__7 !important; + padding-bottom: $tp-space__7 !important; +} + +.pv8 { + padding-top: $tp-space__8 !important; + padding-bottom: $tp-space__8 !important; +} + +.ph0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.ph1 { + padding-left: $tp-space__1 !important; + padding-right: $tp-space__1 !important; +} + +.ph2 { + padding-left: $tp-space__2 !important; + padding-right: $tp-space__2 !important; +} + +.ph3 { + padding-left: $tp-space__3 !important; + padding-right: $tp-space__3 !important; +} + +.ph4 { + padding-left: $tp-space__4 !important; + padding-right: $tp-space__4 !important; +} + +.ph5 { + padding-left: $tp-space__5 !important; + padding-right: $tp-space__5 !important; +} + +.ph6 { + padding-left: $tp-space__6 !important; + padding-right: $tp-space__6 !important; +} + +.ph7 { + padding-left: $tp-space__7 !important; + padding-right: $tp-space__7 !important; +} + +.ph8 { + padding-left: $tp-space__8 !important; + padding-right: $tp-space__8 !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_pa0 { + padding: 0 !important; + } + + .s_pa1 { + padding: $tp-space__1 !important; + } + + .s_pa2 { + padding: $tp-space__2 !important; + } + + .s_pa3 { + padding: $tp-space__3 !important; + } + + .s_pa4 { + padding: $tp-space__4 !important; + } + + .s_pa5 { + padding: $tp-space__5 !important; + } + + .s_pa6 { + padding: $tp-space__6 !important; + } + + .s_pa7 { + padding: $tp-space__7 !important; + } + + .s_pa8 { + padding: $tp-space__8 !important; + } + + .s_pl0 { + padding-left: 0 !important; + } + + .s_pl1 { + padding-left: $tp-space__1 !important; + } + + .s_pl2 { + padding-left: $tp-space__2 !important; + } + + .s_pl3 { + padding-left: $tp-space__3 !important; + } + + .s_pl4 { + padding-left: $tp-space__4 !important; + } + + .s_pl5 { + padding-left: $tp-space__5 !important; + } + + .s_pl6 { + padding-left: $tp-space__6 !important; + } + + .s_pl7 { + padding-left: $tp-space__7 !important; + } + + .s_pl8 { + padding-left: $tp-space__8 !important; + } + + .s_pr0 { + padding-right: 0 !important; + } + + .s_pr1 { + padding-right: $tp-space__1 !important; + } + + .s_pr2 { + padding-right: $tp-space__2 !important; + } + + .s_pr3 { + padding-right: $tp-space__3 !important; + } + + .s_pr4 { + padding-right: $tp-space__4 !important; + } + + .s_pr5 { + padding-right: $tp-space__5 !important; + } + + .s_pr6 { + padding-right: $tp-space__6 !important; + } + + .s_pr7 { + padding-right: $tp-space__7 !important; + } + + .s_pr8 { + padding-right: $tp-space__8 !important; + } + + .s_pb0 { + padding-bottom: 0 !important; + } + + .s_pb1 { + padding-bottom: $tp-space__1 !important; + } + + .s_pb2 { + padding-bottom: $tp-space__2 !important; + } + + .s_pb3 { + padding-bottom: $tp-space__3 !important; + } + + .s_pb4 { + padding-bottom: $tp-space__4 !important; + } + + .s_pb5 { + padding-bottom: $tp-space__5 !important; + } + + .s_pb6 { + padding-bottom: $tp-space__6 !important; + } + + .s_pb7 { + padding-bottom: $tp-space__7 !important; + } + + .s_pb8 { + padding-bottom: $tp-space__8 !important; + } + + .s_pt0 { + padding-top: 0 !important; + } + + .s_pt1 { + padding-top: $tp-space__1 !important; + } + + .s_pt2 { + padding-top: $tp-space__2 !important; + } + + .s_pt3 { + padding-top: $tp-space__3 !important; + } + + .s_pt4 { + padding-top: $tp-space__4 !important; + } + + .s_pt5 { + padding-top: $tp-space__5 !important; + } + + .s_pt6 { + padding-top: $tp-space__6 !important; + } + + .s_pt7 { + padding-top: $tp-space__7 !important; + } + + .s_pt8 { + padding-top: $tp-space__8 !important; + } + + .s_pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .s_pv1 { + padding-top: $tp-space__1 !important; + padding-bottom: $tp-space__1 !important; + } + + .s_pv2 { + padding-top: $tp-space__2 !important; + padding-bottom: $tp-space__2 !important; + } + + .s_pv3 { + padding-top: $tp-space__3 !important; + padding-bottom: $tp-space__3 !important; + } + + .s_pv4 { + padding-top: $tp-space__4 !important; + padding-bottom: $tp-space__4 !important; + } + + .s_pv5 { + padding-top: $tp-space__5 !important; + padding-bottom: $tp-space__5 !important; + } + + .s_pv6 { + padding-top: $tp-space__6 !important; + padding-bottom: $tp-space__6 !important; + } + + .s_pv7 { + padding-top: $tp-space__7 !important; + padding-bottom: $tp-space__7 !important; + } + + .s_pv8 { + padding-top: $tp-space__8 !important; + padding-bottom: $tp-space__8 !important; + } + + .s_ph0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .s_ph1 { + padding-left: $tp-space__1 !important; + padding-right: $tp-space__1 !important; + } + + .s_ph2 { + padding-left: $tp-space__2 !important; + padding-right: $tp-space__2 !important; + } + + .s_ph3 { + padding-left: $tp-space__3 !important; + padding-right: $tp-space__3 !important; + } + + .s_ph4 { + padding-left: $tp-space__4 !important; + padding-right: $tp-space__4 !important; + } + + .s_ph5 { + padding-left: $tp-space__5 !important; + padding-right: $tp-space__5 !important; + } + + .s_ph6 { + padding-left: $tp-space__6 !important; + padding-right: $tp-space__6 !important; + } + + .s_ph7 { + padding-left: $tp-space__7 !important; + padding-right: $tp-space__7 !important; + } + + .s_ph8 { + padding-left: $tp-space__8 !important; + padding-right: $tp-space__8 !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_pa0 { + padding: 0 !important; + } + + .m_pa1 { + padding: $tp-space__1 !important; + } + + .m_pa2 { + padding: $tp-space__2 !important; + } + + .m_pa3 { + padding: $tp-space__3 !important; + } + + .m_pa4 { + padding: $tp-space__4 !important; + } + + .m_pa5 { + padding: $tp-space__5 !important; + } + + .m_pa6 { + padding: $tp-space__6 !important; + } + + .m_pa7 { + padding: $tp-space__7 !important; + } + + .m_pa8 { + padding: $tp-space__8 !important; + } + + .m_pl0 { + padding-left: 0 !important; + } + + .m_pl1 { + padding-left: $tp-space__1 !important; + } + + .m_pl2 { + padding-left: $tp-space__2 !important; + } + + .m_pl3 { + padding-left: $tp-space__3 !important; + } + + .m_pl4 { + padding-left: $tp-space__4 !important; + } + + .m_pl5 { + padding-left: $tp-space__5 !important; + } + + .m_pl6 { + padding-left: $tp-space__6 !important; + } + + .m_pl7 { + padding-left: $tp-space__7 !important; + } + + .m_pl8 { + padding-left: $tp-space__8 !important; + } + + .m_pr0 { + padding-right: 0 !important; + } + + .m_pr1 { + padding-right: $tp-space__1 !important; + } + + .m_pr2 { + padding-right: $tp-space__2 !important; + } + + .m_pr3 { + padding-right: $tp-space__3 !important; + } + + .m_pr4 { + padding-right: $tp-space__4 !important; + } + + .m_pr5 { + padding-right: $tp-space__5 !important; + } + + .m_pr6 { + padding-right: $tp-space__6 !important; + } + + .m_pr7 { + padding-right: $tp-space__7 !important; + } + + .m_pr8 { + padding-right: $tp-space__8 !important; + } + + .m_pb0 { + padding-bottom: 0 !important; + } + + .m_pb1 { + padding-bottom: $tp-space__1 !important; + } + + .m_pb2 { + padding-bottom: $tp-space__2 !important; + } + + .m_pb3 { + padding-bottom: $tp-space__3 !important; + } + + .m_pb4 { + padding-bottom: $tp-space__4 !important; + } + + .m_pb5 { + padding-bottom: $tp-space__5 !important; + } + + .m_pb6 { + padding-bottom: $tp-space__6 !important; + } + + .m_pb7 { + padding-bottom: $tp-space__7 !important; + } + + .m_pb8 { + padding-bottom: $tp-space__8 !important; + } + + .m_pt0 { + padding-top: 0 !important; + } + + .m_pt1 { + padding-top: $tp-space__1 !important; + } + + .m_pt2 { + padding-top: $tp-space__2 !important; + } + + .m_pt3 { + padding-top: $tp-space__3 !important; + } + + .m_pt4 { + padding-top: $tp-space__4 !important; + } + + .m_pt5 { + padding-top: $tp-space__5 !important; + } + + .m_pt6 { + padding-top: $tp-space__6 !important; + } + + .m_pt7 { + padding-top: $tp-space__7 !important; + } + + .m_pt8 { + padding-top: $tp-space__8 !important; + } + + .m_pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .m_pv1 { + padding-top: $tp-space__1 !important; + padding-bottom: $tp-space__1 !important; + } + + .m_pv2 { + padding-top: $tp-space__2 !important; + padding-bottom: $tp-space__2 !important; + } + + .m_pv3 { + padding-top: $tp-space__3 !important; + padding-bottom: $tp-space__3 !important; + } + + .m_pv4 { + padding-top: $tp-space__4 !important; + padding-bottom: $tp-space__4 !important; + } + + .m_pv5 { + padding-top: $tp-space__5 !important; + padding-bottom: $tp-space__5 !important; + } + + .m_pv6 { + padding-top: $tp-space__6 !important; + padding-bottom: $tp-space__6 !important; + } + + .m_pv7 { + padding-top: $tp-space__7 !important; + padding-bottom: $tp-space__7 !important; + } + + .m_pv8 { + padding-top: $tp-space__8 !important; + padding-bottom: $tp-space__8 !important; + } + + .m_ph0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .m_ph1 { + padding-left: $tp-space__1 !important; + padding-right: $tp-space__1 !important; + } + + .m_ph2 { + padding-left: $tp-space__2 !important; + padding-right: $tp-space__2 !important; + } + + .m_ph3 { + padding-left: $tp-space__3 !important; + padding-right: $tp-space__3 !important; + } + + .m_ph4 { + padding-left: $tp-space__4 !important; + padding-right: $tp-space__4 !important; + } + + .m_ph5 { + padding-left: $tp-space__5 !important; + padding-right: $tp-space__5 !important; + } + + .m_ph6 { + padding-left: $tp-space__6 !important; + padding-right: $tp-space__6 !important; + } + + .m_ph7 { + padding-left: $tp-space__7 !important; + padding-right: $tp-space__7 !important; + } + + .m_ph8 { + padding-left: $tp-space__8 !important; + padding-right: $tp-space__8 !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_pa0 { + padding: 0 !important; + } + + .l_pa1 { + padding: $tp-space__1 !important; + } + + .l_pa2 { + padding: $tp-space__2 !important; + } + + .l_pa3 { + padding: $tp-space__3 !important; + } + + .l_pa4 { + padding: $tp-space__4 !important; + } + + .l_pa5 { + padding: $tp-space__5 !important; + } + + .l_pa6 { + padding: $tp-space__6 !important; + } + + .l_pa7 { + padding: $tp-space__7 !important; + } + + .l_pa8 { + padding: $tp-space__8 !important; + } + + .l_pl0 { + padding-left: 0 !important; + } + + .l_pl1 { + padding-left: $tp-space__1 !important; + } + + .l_pl2 { + padding-left: $tp-space__2 !important; + } + + .l_pl3 { + padding-left: $tp-space__3 !important; + } + + .l_pl4 { + padding-left: $tp-space__4 !important; + } + + .l_pl5 { + padding-left: $tp-space__5 !important; + } + + .l_pl6 { + padding-left: $tp-space__6 !important; + } + + .l_pl7 { + padding-left: $tp-space__7 !important; + } + + .l_pl8 { + padding-left: $tp-space__8 !important; + } + + .l_pr0 { + padding-right: 0 !important; + } + + .l_pr1 { + padding-right: $tp-space__1 !important; + } + + .l_pr2 { + padding-right: $tp-space__2 !important; + } + + .l_pr3 { + padding-right: $tp-space__3 !important; + } + + .l_pr4 { + padding-right: $tp-space__4 !important; + } + + .l_pr5 { + padding-right: $tp-space__5 !important; + } + + .l_pr6 { + padding-right: $tp-space__6 !important; + } + + .l_pr7 { + padding-right: $tp-space__7 !important; + } + + .l_pr8 { + padding-right: $tp-space__8 !important; + } + + .l_pb0 { + padding-bottom: 0 !important; + } + + .l_pb1 { + padding-bottom: $tp-space__1 !important; + } + + .l_pb2 { + padding-bottom: $tp-space__2 !important; + } + + .l_pb3 { + padding-bottom: $tp-space__3 !important; + } + + .l_pb4 { + padding-bottom: $tp-space__4 !important; + } + + .l_pb5 { + padding-bottom: $tp-space__5 !important; + } + + .l_pb6 { + padding-bottom: $tp-space__6 !important; + } + + .l_pb7 { + padding-bottom: $tp-space__7 !important; + } + + .l_pb8 { + padding-bottom: $tp-space__8 !important; + } + + .l_pt0 { + padding-top: 0 !important; + } + + .l_pt1 { + padding-top: $tp-space__1 !important; + } + + .l_pt2 { + padding-top: $tp-space__2 !important; + } + + .l_pt3 { + padding-top: $tp-space__3 !important; + } + + .l_pt4 { + padding-top: $tp-space__4 !important; + } + + .l_pt5 { + padding-top: $tp-space__5 !important; + } + + .l_pt6 { + padding-top: $tp-space__6 !important; + } + + .l_pt7 { + padding-top: $tp-space__7 !important; + } + + .l_pt8 { + padding-top: $tp-space__8 !important; + } + + .l_pv0 { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + + .l_pv1 { + padding-top: $tp-space__1 !important; + padding-bottom: $tp-space__1 !important; + } + + .l_pv2 { + padding-top: $tp-space__2 !important; + padding-bottom: $tp-space__2 !important; + } + + .l_pv3 { + padding-top: $tp-space__3 !important; + padding-bottom: $tp-space__3 !important; + } + + .l_pv4 { + padding-top: $tp-space__4 !important; + padding-bottom: $tp-space__4 !important; + } + + .l_pv5 { + padding-top: $tp-space__5 !important; + padding-bottom: $tp-space__5 !important; + } + + .l_pv6 { + padding-top: $tp-space__6 !important; + padding-bottom: $tp-space__6 !important; + } + + .l_pv7 { + padding-top: $tp-space__7 !important; + padding-bottom: $tp-space__7 !important; + } + + .l_pv8 { + padding-top: $tp-space__8 !important; + padding-bottom: $tp-space__8 !important; + } + + .l_ph0 { + padding-left: 0 !important; + padding-right: 0 !important; + } + + .l_ph1 { + padding-left: $tp-space__1 !important; + padding-right: $tp-space__1 !important; + } + + .l_ph2 { + padding-left: $tp-space__2 !important; + padding-right: $tp-space__2 !important; + } + + .l_ph3 { + padding-left: $tp-space__3 !important; + padding-right: $tp-space__3 !important; + } + + .l_ph4 { + padding-left: $tp-space__4 !important; + padding-right: $tp-space__4 !important; + } + + .l_ph5 { + padding-left: $tp-space__5 !important; + padding-right: $tp-space__5 !important; + } + + .l_ph6 { + padding-left: $tp-space__6 !important; + padding-right: $tp-space__6 !important; + } + + .l_ph7 { + padding-left: $tp-space__7 !important; + padding-right: $tp-space__7 !important; + } + + .l_ph8 { + padding-left: $tp-space__8 !important; + padding-right: $tp-space__8 !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/position.scss b/packages/thumbprint-atomic/src/packages/position.scss new file mode 100644 index 000000000..37130037f --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/position.scss @@ -0,0 +1,72 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.static { + position: static !important; +} + +.relative { + position: relative !important; +} + +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_static { + position: static !important; + } + + .s_relative { + position: relative !important; + } + + .s_absolute { + position: absolute !important; + } + + .s_fixed { + position: fixed !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_static { + position: static !important; + } + + .m_relative { + position: relative !important; + } + + .m_absolute { + position: absolute !important; + } + + .m_fixed { + position: fixed !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_static { + position: static !important; + } + + .l_relative { + position: relative !important; + } + + .l_absolute { + position: absolute !important; + } + + .l_fixed { + position: fixed !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/text-align.scss b/packages/thumbprint-atomic/src/packages/text-align.scss new file mode 100644 index 000000000..82a9854bb --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/text-align.scss @@ -0,0 +1,72 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.tl { + text-align: left !important; +} + +.tr { + text-align: right !important; +} + +.tc { + text-align: center !important; +} + +.tj { + text-align: justify !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_tl { + text-align: left !important; + } + + .s_tr { + text-align: right !important; + } + + .s_tc { + text-align: center !important; + } + + .s_tj { + text-align: justify !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_tl { + text-align: left !important; + } + + .m_tr { + text-align: right !important; + } + + .m_tc { + text-align: center !important; + } + + .m_tj { + text-align: justify !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_tl { + text-align: left !important; + } + + .l_tr { + text-align: right !important; + } + + .l_tc { + text-align: center !important; + } + + .l_tj { + text-align: justify !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/text-decoration.scss b/packages/thumbprint-atomic/src/packages/text-decoration.scss new file mode 100644 index 000000000..94a3f66e6 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/text-decoration.scss @@ -0,0 +1,56 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.strike { + text-decoration: line-through !important; +} + +.underline { + text-decoration: underline !important; +} + +.no-underline { + text-decoration: none !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_strike { + text-decoration: line-through !important; + } + + .s_underline { + text-decoration: underline !important; + } + + .s_no-underline { + text-decoration: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_strike { + text-decoration: line-through !important; + } + + .m_underline { + text-decoration: underline !important; + } + + .m_no-underline { + text-decoration: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_strike { + text-decoration: line-through !important; + } + + .l_underline { + text-decoration: underline !important; + } + + .l_no-underline { + text-decoration: none !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/text-transform.scss b/packages/thumbprint-atomic/src/packages/text-transform.scss new file mode 100644 index 000000000..26309304e --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/text-transform.scss @@ -0,0 +1,72 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.ttc { + text-transform: capitalize !important; +} + +.ttl { + text-transform: lowercase !important; +} + +.ttu { + text-transform: uppercase !important; +} + +.ttn { + text-transform: none !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_ttc { + text-transform: capitalize !important; + } + + .s_ttl { + text-transform: lowercase !important; + } + + .s_ttu { + text-transform: uppercase !important; + } + + .s_ttn { + text-transform: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_ttc { + text-transform: capitalize !important; + } + + .m_ttl { + text-transform: lowercase !important; + } + + .m_ttu { + text-transform: uppercase !important; + } + + .m_ttn { + text-transform: none !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_ttc { + text-transform: capitalize !important; + } + + .l_ttl { + text-transform: lowercase !important; + } + + .l_ttu { + text-transform: uppercase !important; + } + + .l_ttn { + text-transform: none !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/truncate.scss b/packages/thumbprint-atomic/src/packages/truncate.scss new file mode 100644 index 000000000..ac8a3a4ae --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/truncate.scss @@ -0,0 +1,32 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_truncate { + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/vertical-align.scss b/packages/thumbprint-atomic/src/packages/vertical-align.scss new file mode 100644 index 000000000..e728066ef --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/vertical-align.scss @@ -0,0 +1,72 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.v-base { + vertical-align: baseline !important; +} + +.v-mid { + vertical-align: middle !important; +} + +.v-top { + vertical-align: top !important; +} + +.v-btm { + vertical-align: bottom !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_v-base { + vertical-align: baseline !important; + } + + .s_v-mid { + vertical-align: middle !important; + } + + .s_v-top { + vertical-align: top !important; + } + + .s_v-btm { + vertical-align: bottom !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_v-base { + vertical-align: baseline !important; + } + + .m_v-mid { + vertical-align: middle !important; + } + + .m_v-top { + vertical-align: top !important; + } + + .m_v-btm { + vertical-align: bottom !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_v-base { + vertical-align: baseline !important; + } + + .l_v-mid { + vertical-align: middle !important; + } + + .l_v-top { + vertical-align: top !important; + } + + .l_v-btm { + vertical-align: bottom !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/visually-hidden.scss b/packages/thumbprint-atomic/src/packages/visually-hidden.scss new file mode 100644 index 000000000..3abc81ac0 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/visually-hidden.scss @@ -0,0 +1,28 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_visually-hidden { + position: fixed !important; + clip: rect(1px, 1px, 1px, 1px) !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/white-space.scss b/packages/thumbprint-atomic/src/packages/white-space.scss new file mode 100644 index 000000000..d13d7a2a9 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/white-space.scss @@ -0,0 +1,56 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.ws-normal { + white-space: normal !important; +} + +.nowrap { + white-space: nowrap !important; +} + +.pre { + white-space: pre !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_ws-normal { + white-space: normal !important; + } + + .s_nowrap { + white-space: nowrap !important; + } + + .s_pre { + white-space: pre !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_ws-normal { + white-space: normal !important; + } + + .m_nowrap { + white-space: nowrap !important; + } + + .m_pre { + white-space: pre !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_ws-normal { + white-space: normal !important; + } + + .l_nowrap { + white-space: nowrap !important; + } + + .l_pre { + white-space: pre !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/width.scss b/packages/thumbprint-atomic/src/packages/width.scss new file mode 100644 index 000000000..6e0fa47d3 --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/width.scss @@ -0,0 +1,344 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.w1 { + width: $tp-space__3 !important; +} + +.w2 { + width: $tp-space__4 !important; +} + +.w3 { + width: $tp-space__5 !important; +} + +.w4 { + width: $tp-space__6 !important; +} + +.w5 { + width: $tp-space__7 !important; +} + +.w6 { + width: $tp-space__8 !important; +} + +.w-10 { + width: 10% !important; +} + +.w-20 { + width: 20% !important; +} + +.w-25 { + width: 25% !important; +} + +.w-30 { + width: 30% !important; +} + +.w-33 { + width: 33.333333% !important; +} + +.w-40 { + width: 40% !important; +} + +.w-50 { + width: 50% !important; +} + +.w-60 { + width: 60% !important; +} + +.w-66 { + width: 66.666666% !important; +} + +.w-70 { + width: 70% !important; +} + +.w-75 { + width: 75% !important; +} + +.w-80 { + width: 80% !important; +} + +.w-90 { + width: 90% !important; +} + +.w-100 { + width: 100% !important; +} + +.w-auto { + width: auto !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_w1 { + width: $tp-space__3 !important; + } + + .s_w2 { + width: $tp-space__4 !important; + } + + .s_w3 { + width: $tp-space__5 !important; + } + + .s_w4 { + width: $tp-space__6 !important; + } + + .s_w5 { + width: $tp-space__7 !important; + } + + .s_w6 { + width: $tp-space__8 !important; + } + + .s_w-10 { + width: 10% !important; + } + + .s_w-20 { + width: 20% !important; + } + + .s_w-25 { + width: 25% !important; + } + + .s_w-30 { + width: 30% !important; + } + + .s_w-33 { + width: 33.333333% !important; + } + + .s_w-40 { + width: 40% !important; + } + + .s_w-50 { + width: 50% !important; + } + + .s_w-60 { + width: 60% !important; + } + + .s_w-66 { + width: 66.666666% !important; + } + + .s_w-70 { + width: 70% !important; + } + + .s_w-75 { + width: 75% !important; + } + + .s_w-80 { + width: 80% !important; + } + + .s_w-90 { + width: 90% !important; + } + + .s_w-100 { + width: 100% !important; + } + + .s_w-auto { + width: auto !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_w1 { + width: $tp-space__3 !important; + } + + .m_w2 { + width: $tp-space__4 !important; + } + + .m_w3 { + width: $tp-space__5 !important; + } + + .m_w4 { + width: $tp-space__6 !important; + } + + .m_w5 { + width: $tp-space__7 !important; + } + + .m_w6 { + width: $tp-space__8 !important; + } + + .m_w-10 { + width: 10% !important; + } + + .m_w-20 { + width: 20% !important; + } + + .m_w-25 { + width: 25% !important; + } + + .m_w-30 { + width: 30% !important; + } + + .m_w-33 { + width: 33.333333% !important; + } + + .m_w-40 { + width: 40% !important; + } + + .m_w-50 { + width: 50% !important; + } + + .m_w-60 { + width: 60% !important; + } + + .m_w-66 { + width: 66.666666% !important; + } + + .m_w-70 { + width: 70% !important; + } + + .m_w-75 { + width: 75% !important; + } + + .m_w-80 { + width: 80% !important; + } + + .m_w-90 { + width: 90% !important; + } + + .m_w-100 { + width: 100% !important; + } + + .m_w-auto { + width: auto !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_w1 { + width: $tp-space__3 !important; + } + + .l_w2 { + width: $tp-space__4 !important; + } + + .l_w3 { + width: $tp-space__5 !important; + } + + .l_w4 { + width: $tp-space__6 !important; + } + + .l_w5 { + width: $tp-space__7 !important; + } + + .l_w6 { + width: $tp-space__8 !important; + } + + .l_w-10 { + width: 10% !important; + } + + .l_w-20 { + width: 20% !important; + } + + .l_w-25 { + width: 25% !important; + } + + .l_w-30 { + width: 30% !important; + } + + .l_w-33 { + width: 33.333333% !important; + } + + .l_w-40 { + width: 40% !important; + } + + .l_w-50 { + width: 50% !important; + } + + .l_w-60 { + width: 60% !important; + } + + .l_w-66 { + width: 66.666666% !important; + } + + .l_w-70 { + width: 70% !important; + } + + .l_w-75 { + width: 75% !important; + } + + .l_w-80 { + width: 80% !important; + } + + .l_w-90 { + width: 90% !important; + } + + .l_w-100 { + width: 100% !important; + } + + .l_w-auto { + width: auto !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/word-break.scss b/packages/thumbprint-atomic/src/packages/word-break.scss new file mode 100644 index 000000000..a3e76a74e --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/word-break.scss @@ -0,0 +1,56 @@ +@import '../../node_modules/@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '../../node_modules/@thumbtack/tp-ui-core-mixin/_index'; + +.word-normal { + word-break: normal !important; +} + +.word-wrap { + word-break: break-all !important; +} + +.word-nowrap { + word-break: keep-all !important; +} + +@include tp-respond-above($tp-breakpoint__small) { + .s_word-normal { + word-break: normal !important; + } + + .s_word-wrap { + word-break: break-all !important; + } + + .s_word-nowrap { + word-break: keep-all !important; + } +} + +@include tp-respond-above($tp-breakpoint__medium) { + .m_word-normal { + word-break: normal !important; + } + + .m_word-wrap { + word-break: break-all !important; + } + + .m_word-nowrap { + word-break: keep-all !important; + } +} + +@include tp-respond-above($tp-breakpoint__large) { + .l_word-normal { + word-break: normal !important; + } + + .l_word-wrap { + word-break: break-all !important; + } + + .l_word-nowrap { + word-break: keep-all !important; + } +} diff --git a/packages/thumbprint-atomic/src/packages/z-index.scss b/packages/thumbprint-atomic/src/packages/z-index.scss new file mode 100644 index 000000000..bdd65af4d --- /dev/null +++ b/packages/thumbprint-atomic/src/packages/z-index.scss @@ -0,0 +1,35 @@ +.z-0 { + z-index: 0 !important; +} + +.z-1 { + z-index: 1 !important; +} + +.z-2 { + z-index: 2 !important; +} + +.z-3 { + z-index: 3 !important; +} + +.z-4 { + z-index: 4 !important; +} + +.z-5 { + z-index: 5 !important; +} + +.z-inherit { + z-index: inherit !important; +} + +.z-initial { + z-index: initial !important; +} + +.z-unset { + z-index: unset !important; +} diff --git a/packages/thumbprint-atomic/test.js b/packages/thumbprint-atomic/test.js new file mode 100644 index 000000000..728407216 --- /dev/null +++ b/packages/thumbprint-atomic/test.js @@ -0,0 +1,12 @@ +const prettier = require('prettier'); +const fs = require('fs'); + +it('compiles correctly', () => { + const css = fs.readFileSync('packages/thumbprint-atomic/dist/atomic.css', 'utf-8'); + // Format the CSS to make it easier to read the diff. + const formattedCSS = prettier.format(css, { + parser: 'css', + }); + + expect(formattedCSS).toMatchSnapshot(); +}); diff --git a/packages/thumbprint-react/CHANGELOG.md b/packages/thumbprint-react/CHANGELOG.md new file mode 100644 index 000000000..857a26dbc --- /dev/null +++ b/packages/thumbprint-react/CHANGELOG.md @@ -0,0 +1,28 @@ +# Changelog + +## Unreleased + +## 0.1.3 - 2019-01-25 + +### Changed + +- [Patch] Update links to GitHub Issues/PRs so that they point to our archived repo. + +## 0.1.2 - 2019-01-24 + +### Changed + +- [Patch] Change comments in source files to point to new documentation URLs. This does not affect consumers of Thumbprint React. +- [Patch] Move close icon into the repo. + +## 0.1.1 - 2019-01-10 + +### Added + +- [Patch] Move all React component source files into this package. + +## 0.1.0 - 2019-01-09 + +### Added + +- [Minor] Created package for Thumbprint React. (#1050) diff --git a/packages/thumbprint-react/components/Avatar/README.mdx b/packages/thumbprint-react/components/Avatar/README.mdx new file mode 100644 index 000000000..fd55fde5b --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/README.mdx @@ -0,0 +1,101 @@ +--- +package: '@thumbtack/thumbprint-react' +kit: avatar/index.mdx +platform: react +url: /components/avatar/react/ +mdxType: componentApi +--- + +## Avatar Sizes + +### Extra Large + +```jsx + +``` + +### Large + +```jsx + +``` + +### Medium + +```jsx + +``` + +### Small + +```jsx + +``` + +### Extra Small + +```jsx + +``` + +## Avatars without images + +When a user does not have an image, an `Avatar` can display the user’s initials instead. + +```jsx + +``` + +## EntityAvatar + +### Extra Large + +```jsx + +``` + +### Large + +```jsx + +``` + +### Medium + +```jsx + +``` + +### Small + +```jsx + +``` + +### Initial + +```jsx + +``` + +## Avatar Badges + +Badges can be added to avatars to denote information including hired status and unread notifications. These badges cannot be used on the `xsmall` variation. + +### Checked + +```jsx + +``` + +### Notification + +```jsx + +``` + +### Online + +```jsx + +``` diff --git a/packages/thumbprint-react/components/Avatar/__snapshots__/test.jsx.snap b/packages/thumbprint-react/components/Avatar/__snapshots__/test.jsx.snap new file mode 100644 index 000000000..5aa25a31a --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/__snapshots__/test.jsx.snap @@ -0,0 +1,634 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EntityAvatar renders an image when the user has one 1`] = ` + +
+ +
+ +`; + +exports[`EntityAvatar renders the initials when the user has no image 1`] = ` + +
+ + N + +
+ +`; + +exports[`adds lazyload class for lazysizes to work 1`] = ` + +
+ +
+ +`; + +exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = ` + +
+ Avatar for Duck Goose +
+ +`; + +exports[`adds the \`fullName\` as \`title\` text 1`] = ` + +
+ +
+ +`; + +exports[`adds the \`fullName\` as \`title\` text 2`] = ` + +
+ Avatar for Duck Goose +
+ +`; + +exports[`adds the \`fullName\` as \`title\` text 3`] = ` + +
+ +
+ +`; + +exports[`does not add lazyload class if an image is not provided 1`] = ` + +
+ + NC + +
+ +`; + +exports[`does not add the \`fullName\` as \`alt\` text when no image is provided 1`] = ` + +
+ +
+ +`; + +exports[`does not render a badge by default 1`] = ` + +
+ + DK + +
+ +`; + +exports[`does not render a badge by default 2`] = ` + +
+ + DK + +
+ +`; + +exports[`does not render a badge when \`size\` is \`xsmall\` 1`] = ` + +
+ + DK + +
+ +`; + +exports[`does not render a badge when \`size\` is \`xsmall\` 2`] = ` + +
+ + DK + +
+ +`; + +exports[`does not render a badge when \`size\` is \`xsmall\` 3`] = ` + +
+ + DK + +
+ +`; + +exports[`does not render a badge when \`size\` is \`xsmall\` 4`] = ` + +
+ + DK + +
+ +`; + +exports[`renders \`isOnline\` when \`isOnline\` is true 1`] = ` + +
+ +
+ + +
+ +`; + +exports[`renders a badge if size is larger than \`xsmall\` and valid badge prop is supplied 1`] = ` + +
+ +
+ + + + + +
+ + + DK + +
+ +`; + +exports[`renders a badge if size is larger than \`xsmall\` and valid badge prop is supplied 2`] = ` + +
+ +
+ + + + + +
+ + + DK + +
+ +`; + +exports[`renders a badge if size is larger than \`xsmall\` and valid badge prop is supplied 3`] = ` + +
+ +
+ + + DK + +
+ +`; + +exports[`renders a badge if size is larger than \`xsmall\` and valid badge prop is supplied 4`] = ` + +
+ +
+ + + DK + +
+ +`; + +exports[`renders an SVG when \`isChecked\` is true 1`] = ` + +
+ +
+ + + + + +
+ + + DK + +
+ +`; + +exports[`renders an SVG when \`isChecked\` is true 2`] = ` + +
+ +
+ + + + + +
+ + + DK + +
+ +`; + +exports[`renders an image when the user has one 1`] = ` + +
+ +
+ +`; + +exports[`renders checkmark SVG when \`isChecked\` and \`isOnline\` are true 1`] = ` + +
+ +
+ + + + + +
+ + +
+ +`; + +exports[`renders notification dot without checkmark SVG when \`isChecked\` and \`hasUnreadNotifications\` are true 1`] = ` + +
+ +
+ + +
+ +`; + +exports[`renders the initials when the user has no image 1`] = ` + +
+ + NC + +
+ +`; diff --git a/packages/thumbprint-react/components/Avatar/index.jsx b/packages/thumbprint-react/components/Avatar/index.jsx new file mode 100644 index 000000000..f50fb499c --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/index.jsx @@ -0,0 +1,203 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import CheckIcon from './static/check.svg'; +import Badge from './subcomponents/badge.jsx'; +import styles from './index.module.scss'; + +const getBadgeProps = ({ size, hasUnreadNotifications, isChecked, isOnline }) => { + const props = { + size, + }; + + if (hasUnreadNotifications) { + props.background = 'red'; + } else if (isChecked) { + props.children = ; + props.background = 'green'; + } else if (isOnline) { + props.background = 'green'; + } + + return props; +}; + +const shouldShowBadge = ({ size, hasUnreadNotifications, isChecked, isOnline }) => + size !== 'xsmall' && (hasUnreadNotifications || isChecked || isOnline); + +class EntityAvatar extends React.Component { + componentDidMount() { + // These imports are only needed client-side and allow for lazy-loading images. They should + // be changed to `import()` once Gatsby 2 launches. We're currently limited by the version + // of Webpack that Gatsby uses. + // https://github.com/gatsbyjs/gatsby/issues/461 + // https://github.com/thumbtack/thumbprint-archive/issues/960 + /* eslint-disable global-require */ + require('lazysizes'); + // `ls.attrchange.js` re-renders the image when the props change: + // https://github.com/aFarkas/lazysizes/issues/339 + require('lazysizes/plugins/attrchange/ls.attrchange.js'); + // `ls.object-fit.js` polyfills the object-fit and the object-position property + // in non supporting browsers i.e. IE 11. + require('lazysizes/plugins/object-fit/ls.object-fit.js'); + /* eslint-enable */ + } + + render() { + const { imageUrl, size, initial, fullName } = this.props; + + return ( +
+ {imageUrl ? ( + {fullName + ) : ( + + {initial} + + )} +
+ ); + } +} + +EntityAvatar.propTypes = { + /** + * HTTPS URL that points a user's avatar. The `imageURL` will take + * precendence over `initials` if both are supplied. + */ + imageUrl: PropTypes.string, + /** + * The entity's initial. This should be passed in as a one character string. + */ + initial: PropTypes.string, + /** + * The user's full name. This is used as `title` and `alt` text. + */ + fullName: PropTypes.string, + /** + * The set of avatar sizes that we support. + */ + size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']), +}; + +EntityAvatar.defaultProps = { + imageUrl: undefined, + initial: undefined, + fullName: undefined, + size: 'medium', +}; + +/** + * @default + */ +export default class Avatar extends React.Component { + componentDidMount() { + // These imports are only needed client-side and allow for lazy-loading images. They should + // be changed to `import()` once Gatsby 2 launches. We're currently limited by the version + // of Webpack that Gatsby uses. + // https://github.com/gatsbyjs/gatsby/issues/461 + // https://github.com/thumbtack/thumbprint-archive/issues/960 + /* eslint-disable global-require */ + require('lazysizes'); + // `ls.attrchange.js` re-renders the image when the props change: + // https://github.com/aFarkas/lazysizes/issues/339 + require('lazysizes/plugins/attrchange/ls.attrchange.js'); + // `ls.object-fit.js` polyfills the object-fit and the object-position property + // in non supporting browsers i.e. IE 11. + require('lazysizes/plugins/object-fit/ls.object-fit.js'); + /* eslint-enable */ + } + + render() { + const { props } = this; + return ( +
+ {shouldShowBadge(props) && } + {props.imageUrl ? ( + {props.fullName + ) : ( + + {props.initials} + + )} +
+ ); + } +} + +Avatar.propTypes = { + /** + * HTTPS URL that points a user's avatar. The `imageURL` will take + * precendence over `initials` if both are supplied. + */ + imageUrl: PropTypes.string, + /** + * The user's initials. This should be passed in as a two character string + * for best results. + */ + initials: PropTypes.string, + /** + * The user's full name. This is used as `title` and `alt` text. + */ + fullName: PropTypes.string, + /** + * The set of avatar sizes that we support. + */ + size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']), + /** + * Displays a badge of a checkmark next to the `Avatar`. + */ + isChecked: PropTypes.bool, + /** + * Should be true if the user has unread notifications. Displays a badge + * as an indication. + */ + hasUnreadNotifications: PropTypes.bool, + /** + * Displays a badge if the user is online. + */ + isOnline: PropTypes.bool, +}; + +Avatar.defaultProps = { + imageUrl: undefined, + initials: undefined, + fullName: undefined, + size: 'medium', + isChecked: false, + hasUnreadNotifications: false, + isOnline: undefined, +}; + +export { EntityAvatar }; diff --git a/packages/thumbprint-react/components/Avatar/index.module.scss b/packages/thumbprint-react/components/Avatar/index.module.scss new file mode 100644 index 000000000..23913e1ac --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/index.module.scss @@ -0,0 +1,67 @@ +@import '~@thumbtack/thumbprint-tokens/dist/scss/_index'; + +.root { + position: relative; +} + +.rootXsmall { + width: $tp-avatar__size__xsmall; + height: $tp-avatar__size__xsmall; + font-size: 8px; +} + +.rootSmall { + width: $tp-avatar__size__small; + height: $tp-avatar__size__small; + font-size: $tp-font__text__4__size; +} + +.rootMedium { + width: $tp-avatar__size__medium; + height: $tp-avatar__size__medium; + font-size: $tp-font__text__4__size; +} + +.rootLarge { + width: $tp-avatar__size__large; + height: $tp-avatar__size__large; + font-size: $tp-font__text__3__size; +} + +.rootXlarge { + width: $tp-avatar__size__xlarge; + height: $tp-avatar__size__xlarge; + font-size: $tp-font__text__1__size; +} + +// baseAvatar is a collection of styles common to all avatars. +.baseAvatar { + height: 100%; + width: 100%; + object-fit: cover; + // ls.object-fit requires us to store this attribute somewhere IE can read it + // see: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/object-fit + font-family: 'object-fit: cover'; +} + +// initialsAvatar is used when there is no image available. +.initialsAvatar { + height: 100%; + width: 100%; + + background: linear-gradient(0deg, $tp-color__black-300, $tp-color__gray); + display: flex; + justify-content: space-around; + align-items: center; + line-height: initial; + color: $tp-color__white; + font-weight: 700; +} + +.circleAvatar { + border-radius: 50%; +} + +.squareAvatar { + border-radius: 4px; +} diff --git a/packages/thumbprint-react/components/Avatar/static/check.svg b/packages/thumbprint-react/components/Avatar/static/check.svg new file mode 100644 index 000000000..c273ad88b --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/static/check.svg @@ -0,0 +1,12 @@ + + + diff --git a/packages/thumbprint-react/components/Avatar/subcomponents/badge.jsx b/packages/thumbprint-react/components/Avatar/subcomponents/badge.jsx new file mode 100644 index 000000000..b050ec4f6 --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/subcomponents/badge.jsx @@ -0,0 +1,64 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import styles from './badge.module.scss'; + +const sizeClasses = { + small: { + small: styles.smallAvatarSmallBadge, + large: styles.smallAvatarLargeBadge, + }, + medium: { + small: styles.mediumAvatarSmallBadge, + large: styles.mediumAvatarLargeBadge, + }, + large: { + small: styles.largeAvatarSmallBadge, + large: styles.largeAvatarLargeBadge, + }, + xlarge: { + small: styles.xlargeAvatarSmallBadge, + large: styles.xlargeAvatarLargeBadge, + }, +}; + +const getBadgeSize = children => { + if (children) { + return 'large'; + } + + return 'small'; +}; + +const propTypes = { + background: PropTypes.oneOf(['red', 'green']).isRequired, + size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']).isRequired, + children: PropTypes.node, +}; + +const defaultProps = { + children: undefined, +}; + +/** + * `Badge` appears on the top-right corner of an `Avatar`. It is used to either + * show a checkmark or an indicator that there are unread notifications. + */ +export default function Badge({ background, size, children }) { + return ( +
+ {children} +
+ ); +} +Badge.propTypes = propTypes; +Badge.defaultProps = defaultProps; diff --git a/packages/thumbprint-react/components/Avatar/subcomponents/badge.module.scss b/packages/thumbprint-react/components/Avatar/subcomponents/badge.module.scss new file mode 100644 index 000000000..bf716aebe --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/subcomponents/badge.module.scss @@ -0,0 +1,131 @@ +@import '~@thumbtack/thumbprint-tokens/dist/scss/_index'; + +.badge { + color: $tp-color__white; + position: absolute; + border-radius: 50%; + border: 2px solid $tp-color__white; + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + + svg { + fill: currentColor; + } +} + +.badgeRed { + background-color: $tp-color__red; +} + +.badgeGreen { + background-color: $tp-color__green; +} + +// Ideally we'd use fewer hard-coded pixels here in favor of percentage-based +// units. More context on GitHub: +// https://github.com/thumbtack/thumbprint-archive/pull/272/files/41f6e09f6ff75d4aaf529c739c725ba101c812b5#diff-529d3da96dee7012bfd704a87a88ad33 +.smallAvatarSmallBadge { + $diameter: 12px; + right: -2px; + top: 0; + width: $diameter; + height: $diameter; + + svg { + width: 0; + height: 0; + } +} + +.smallAvatarLargeBadge { + $diameter: 17px; + width: $diameter; + height: $diameter; + top: -2px; + right: -4px; + + svg { + width: 7px; + height: 9px; + } +} + +.mediumAvatarSmallBadge { + $diameter: 14px; + width: $diameter; + height: $diameter; + top: 0; + right: 1px; + + svg { + width: 0; + height: 0; + } +} + +.mediumAvatarLargeBadge { + $diameter: 20px; + width: $diameter; + height: $diameter; + top: -2px; + right: -2px; + + svg { + width: 8px; + height: 10px; + } +} + +.largeAvatarSmallBadge { + $diameter: 18px; + width: $diameter; + height: $diameter; + top: 0; + right: 5px; + + svg { + width: 0; + height: 0; + } +} + +.largeAvatarLargeBadge { + $diameter: 24px; + width: $diameter; + height: $diameter; + top: 0; + right: 0; + + svg { + width: 10px; + height: 13px; + } +} + +.xlargeAvatarSmallBadge { + $diameter: 24px; + width: $diameter; + height: $diameter; + top: 0; + right: 14px; + + svg { + width: 0; + height: 0; + } +} + +.xlargeAvatarLargeBadge { + $diameter: 30px; + width: $diameter; + height: $diameter; + top: 0; + right: 6px; + + svg { + width: 12px; + height: 16px; + } +} diff --git a/packages/thumbprint-react/components/Avatar/test.jsx b/packages/thumbprint-react/components/Avatar/test.jsx new file mode 100644 index 000000000..073f3b732 --- /dev/null +++ b/packages/thumbprint-react/components/Avatar/test.jsx @@ -0,0 +1,161 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Avatar, { EntityAvatar } from './index'; + +test('renders an image when the user has one', () => { + const wrapper = mount(); + expect(wrapper.find('.baseAvatar').prop('data-src')).toBe('//www.placecage.com/130/130'); + expect(wrapper).toMatchSnapshot(); +}); + +test('adds lazyload class for lazysizes to work', () => { + const wrapper = mount(); + expect(wrapper.find('.lazyload')).toHaveLength(1); + expect(wrapper).toMatchSnapshot(); +}); + +test('does not add lazyload class if an image is not provided', () => { + const wrapper = mount(); + expect(wrapper.find('.lazyload')).toHaveLength(0); + expect(wrapper).toMatchSnapshot(); +}); + +test('renders the initials when the user has no image', () => { + const wrapper = mount(); + expect(wrapper.find('.initialsAvatar').text()).toBe('NC'); + expect(wrapper).toMatchSnapshot(); +}); + +test('adds the `fullName` as `title` text', () => { + const wrapper = mount(); + const wrapperWithImage = mount( + , + ); + const wrapperWithInitials = mount(); + + expect(wrapper.find('.initialsAvatar').prop('title')).toContain('Duck Goose'); + expect(wrapperWithImage.find('.baseAvatar').prop('title')).toContain('Duck Goose'); + expect(wrapperWithInitials.find('.initialsAvatar').prop('title')).toContain('Duck Goose'); + + expect(wrapper).toMatchSnapshot(); + expect(wrapperWithImage).toMatchSnapshot(); + expect(wrapperWithInitials).toMatchSnapshot(); +}); + +test('adds the `fullName` as `alt` text when image is provided', () => { + const wrapper = mount(); + expect(wrapper.find('.baseAvatar').prop('alt')).toContain('Duck Goose'); + expect(wrapper).toMatchSnapshot(); +}); + +test('does not add the `fullName` as `alt` text when no image is provided', () => { + const wrapper = mount(); + expect(wrapper.find('.initialsAvatar').prop('alt')).toBeUndefined(); + expect(wrapper).toMatchSnapshot(); +}); + +test('does not render a badge when `size` is `xsmall`', () => { + const wrapperA = mount(); + const wrapperB = mount(); + const wrapperC = mount(); + const wrapperD = mount(); + + expect(wrapperA.find('.badge').exists()).toBe(false); + expect(wrapperB.find('.badge').exists()).toBe(false); + expect(wrapperC.find('.badge').exists()).toBe(false); + expect(wrapperD.find('.badge').exists()).toBe(false); + expect(wrapperA).toMatchSnapshot(); + expect(wrapperB).toMatchSnapshot(); + expect(wrapperC).toMatchSnapshot(); + expect(wrapperD).toMatchSnapshot(); +}); + +test('does not render a badge by default', () => { + const wrapperNoSize = mount(); + expect(wrapperNoSize.find('.badge').exists()).toBe(false); + expect(wrapperNoSize).toMatchSnapshot(); + + const wrapperWithSize = mount(); + expect(wrapperWithSize.find('.badge').exists()).toBe(false); + expect(wrapperWithSize).toMatchSnapshot(); +}); + +test('renders a badge if size is larger than `xsmall` and valid badge prop is supplied', () => { + const wrapperA = mount(); + const wrapperB = mount(); + const wrapperC = mount(); + const wrapperD = mount(); + + expect(wrapperA.find('.badge').exists()).toBe(true); + expect(wrapperB.find('.badge').exists()).toBe(true); + expect(wrapperC.find('.badge').exists()).toBe(true); + expect(wrapperD.find('.badge').exists()).toBe(true); + expect(wrapperA).toMatchSnapshot(); + expect(wrapperB).toMatchSnapshot(); + expect(wrapperC).toMatchSnapshot(); + expect(wrapperD).toMatchSnapshot(); +}); + +test('renders an SVG when `isChecked` is true', () => { + const wrapper = mount(); + expect( + wrapper + .find('.badge') + .find('svg') + .exists(), + ).toBe(true); + expect(wrapper).toMatchSnapshot(); +}); + +test('renders an SVG when `isChecked` is true', () => { + const wrapper = mount(); + expect( + wrapper + .find('.badge') + .find('svg') + .exists(), + ).toBe(true); + expect(wrapper).toMatchSnapshot(); +}); + +test('renders `isOnline` when `isOnline` is true', () => { + const wrapper = mount(); + expect(wrapper.find('.badge').exists()).toBe(true); + expect(wrapper).toMatchSnapshot(); +}); + +test('renders notification dot without checkmark SVG when `isChecked` and `hasUnreadNotifications` are true', () => { + const wrapper = mount(); + expect(wrapper.find('.badge').exists()).toBe(true); + expect( + wrapper + .find('.badge') + .find('svg') + .exists(), + ).toBe(false); + expect(wrapper).toMatchSnapshot(); +}); + +test('renders checkmark SVG when `isChecked` and `isOnline` are true', () => { + const wrapper = mount(); + expect(wrapper.find('.badge').exists()).toBe(true); + expect( + wrapper + .find('.badge') + .find('svg') + .exists(), + ).toBe(true); + expect(wrapper).toMatchSnapshot(); +}); + +test('EntityAvatar renders an image when the user has one', () => { + const wrapper = mount(); + expect(wrapper.find('.baseAvatar').prop('data-src')).toBe('//www.placecage.com/130/130'); + expect(wrapper).toMatchSnapshot(); +}); + +test('EntityAvatar renders the initials when the user has no image', () => { + const wrapper = mount(); + expect(wrapper.find('.initialsAvatar').text()).toBe('N'); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/thumbprint-react/components/Button/README.mdx b/packages/thumbprint-react/components/Button/README.mdx new file mode 100644 index 000000000..844f5ea57 --- /dev/null +++ b/packages/thumbprint-react/components/Button/README.mdx @@ -0,0 +1,147 @@ +--- +package: '@thumbtack/thumbprint-react' +kit: button/index.mdx +platform: react +url: /components/button/react/ +mdxType: componentApi +--- + +## Button themes + +These are the available `Button` styles for use on light background colors. + +```jsx + + + + + +``` + +### Use on dark backgrounds + +The `solid` theme works well on dark backgrounds. + +```jsx theme=dark + +``` + +## Small buttons + +Buttons are `large` by default. The `size` prop allows you to render a `small` button. + +```jsx + + + + + +``` + +## Disabled buttons + +The `isDisabled` prop visually and functionally disables the button. + +```jsx + + + + + +``` + +```jsx theme=dark + + + +``` + +## Full width buttons + +```jsx + +``` + +### Full width on small screens + +This button becomes full width on viewports that are smaller than [our `small` breakpoint](/tokens/#section-breakpoint). The width is `auto` on larger screens. + +```jsx + +``` + +## Icon within a button + +The `icon` prop accepts any small icon from [Thumbprint Icons](/icons/). + +```jsx + +``` + +## Button with loading indicator + +These loading indicators should be used when buttons are processing. They are avialble in the `primary` and `secondary` button themes. + +```jsx + + + + +``` + +## Buttons that look like links + +The `TextButton` component renders button elements that visually appear as text links. These buttons accept an `onClick` and render as inline elements. + +```jsx + + The Pro exceeded our expectations and did a fantastic… Read more + +``` + +### Adding an icon with text + +The `TextButton` component provides a `iconLeft` prop to help vertically position icons alongside text. + +```jsx + + }>Back + +``` + +### Icon that inherits color of parent + +This icon inherits the color of its parent with `theme="inherit"`. + +```jsx theme=dark +
+ } accessibilityLabel="Close" /> +
+``` + +### Changing the font size and weight + +These buttons inherit the font size and font weight of their container. + +```jsx + + The Pro exceeded our expectations and did a fantastic…{' '} + + Read more + + +``` diff --git a/packages/thumbprint-react/components/Button/__snapshots__/test.jsx.snap b/packages/thumbprint-react/components/Button/__snapshots__/test.jsx.snap new file mode 100644 index 000000000..df4fa538e --- /dev/null +++ b/packages/thumbprint-react/components/Button/__snapshots__/test.jsx.snap @@ -0,0 +1,328 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`adds \`dataTest\` prop 1`] = ` + + + + + +`; + +exports[`adds \`dataTest\` prop 2`] = ` + + + + + +`; + +exports[`renders button of type \`button\` by default 1`] = ` + + + + + +`; + +exports[`renders button of type \`button\` by default 2`] = ` + + + + + +`; + +exports[`renders button of type \`submit\` when \`type\` is set 1`] = ` + + + + + +`; + +exports[`renders button of type \`submit\` when \`type\` is set 2`] = ` + + + + + +`; + +exports[`renders children passed in 1`] = ` + + + + + +`; + +exports[`renders children passed in 2`] = ` + + + + + +`; + +exports[`renders icon that is passed in 1`] = ` + + Duck + + } + isDisabled={false} + isLoading={false} + size="large" + theme="primary" + type="button" + width="auto" +> + + Duck + + } + isDisabled={false} + isLoading={false} + onClick={null} + shouldOpenInNewTab={false} + size="large" + theme="primary" + to={null} + type="button" + width="auto" + > + + + +`; diff --git a/packages/thumbprint-react/components/Button/index.jsx b/packages/thumbprint-react/components/Button/index.jsx new file mode 100644 index 000000000..aea0cecab --- /dev/null +++ b/packages/thumbprint-react/components/Button/index.jsx @@ -0,0 +1,194 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Themed, Plain } from '../UIAction/index.jsx'; + +const getCommonProps = props => ({ + onClick: props.onClick, + isDisabled: props.isDisabled, + type: props.type, + children: props.children, + onMouseEnter: props.onMouseEnter, + onFocus: props.onFocus, + onMouseLeave: props.onMouseLeave, + onBlur: props.onBlur, + accessibilityLabel: props.accessibilityLabel, + dataTest: props.dataTest, +}); + +const TextButton = React.forwardRef((props, ref) => ( + +)); + +TextButton.propTypes = { + /** + * Contents displayed within the button. + */ + children: PropTypes.node, + /** + * Icon from [Thumbprint Icons](/icons/) to render left of the text within `TextButton`. + */ + iconLeft: PropTypes.node, + /** + * Visually and functionally disables the button. We discourage the use of this prop since it + * is difficult to visually indicate that a link is disabled. Consider not rendering the + * `TextButton` if it is not interactive. + */ + isDisabled: PropTypes.bool, + /** + * Function that will run when the button is clicked on. + */ + onClick: PropTypes.func, + /** + * Function that runs when the user hovers on the button. + */ + onMouseEnter: PropTypes.func, + /** + * Function that runs when the button receives focus. + */ + onFocus: PropTypes.func, + /** + * Function that runs when the user hovers away from the button. + */ + onMouseLeave: PropTypes.func, + /** + * Function that runs when the button loses focus. + */ + onBlur: PropTypes.func, + /** + * Description of the button’s content. It is required if the button has an icon and no + * descriptive text. + */ + accessibilityLabel: PropTypes.string, + /** + * Controls the button’s background, text, and border color. + * `inherit` will make the button inherit `color` from its parent. + */ + theme: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'inherit']), + /** + * Button’s of type `submit` will submit a form when used within a `form` element. + */ + type: PropTypes.oneOf(['button', 'submit']), + /** + * A selector hook into the React component for use in automated testing environments. + */ + dataTest: PropTypes.string, +}; + +TextButton.defaultProps = { + children: undefined, + isDisabled: false, + iconLeft: null, + theme: 'primary', + onClick: null, + onMouseEnter: undefined, + onFocus: undefined, + onMouseLeave: undefined, + onBlur: undefined, + type: 'button', + accessibilityLabel: undefined, + dataTest: undefined, +}; + +/** + * @default + */ +const Button = React.forwardRef((props, ref) => ( + +)); + +Button.propTypes = { + /** + * Contents displayed within the button. + */ + children: PropTypes.node, + /** + * Visually and functionally disables the button. + */ + isDisabled: PropTypes.bool, + /** + * Boolean determining whether the button is in a loading state. When `true` the text will + * we replaced with a loading animation and interaction will be disabled. + */ + isLoading: PropTypes.bool, + /** + * Icon from [Thumbprint Icons](/icons/) to render within the button. It must be one of the + * `small` icons. + */ + icon: PropTypes.node, + /** + * Description of the button’s content. It is required if the button has an icon and no + * descriptive text. + */ + accessibilityLabel: PropTypes.string, + /** + * Button’s of type `submit` will submit a form when used within a `form` element. + */ + type: PropTypes.oneOf(['button', 'submit']), + /** + * Function that will run when the button is clicked on. + */ + onClick: PropTypes.func, + /** + * Function that runs when the user hovers on the button. + */ + onMouseEnter: PropTypes.func, + /** + * Function that runs when the button receives focus. + */ + onFocus: PropTypes.func, + /** + * Function that runs when the user hovers away from the button. + */ + onMouseLeave: PropTypes.func, + /** + * Function that runs when the button loses focus. + */ + onBlur: PropTypes.func, + /** + * Controls the button’s background, text, and border color. + */ + theme: PropTypes.oneOf(['primary', 'secondary', 'caution', 'solid']), + /** + * Changes the button's `line-height`, `padding`, `border-radius`, and `font-size`. + */ + size: PropTypes.oneOf(['small', 'large']), + /** + * `Button` components are as wide as the content that is passed in. The `full` option will + * expand the width to `100%` on all screens. `full-below-small` will expand the width to 100% + * on devices smaller than [our `small` breakpoint](/tokens/#section-breakpoint). + */ + width: PropTypes.oneOf(['auto', 'full', 'full-below-small']), + /** + * A selector hook into the React component for use in automated testing environments. + */ + dataTest: PropTypes.string, +}; + +Button.defaultProps = { + children: undefined, + type: 'button', + isDisabled: false, + isLoading: false, + icon: undefined, + onClick: undefined, + onMouseEnter: undefined, + onFocus: undefined, + onMouseLeave: undefined, + onBlur: undefined, + theme: 'primary', + size: 'large', + width: 'auto', + accessibilityLabel: undefined, + dataTest: undefined, +}; + +export default Button; +export { TextButton }; diff --git a/packages/thumbprint-react/components/Button/test.jsx b/packages/thumbprint-react/components/Button/test.jsx new file mode 100644 index 000000000..51ec8e8a9 --- /dev/null +++ b/packages/thumbprint-react/components/Button/test.jsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Button, { TextButton } from './index'; + +test('renders children passed in', () => { + const testComponent = Component => { + const wrapper = mount(Goose); + expect(wrapper.text()).toEqual('Goose'); + expect(wrapper).toMatchSnapshot(); + }; + + testComponent(Button); + testComponent(TextButton); +}); + +test('renders button of type `button` by default', () => { + const testComponent = Component => { + const wrapper = mount(Goose); + expect(wrapper.find('button').prop('type')).toEqual('button'); + expect(wrapper).toMatchSnapshot(); + }; + + testComponent(Button); + testComponent(TextButton); +}); + +test('renders button of type `submit` when `type` is set', () => { + const testComponent = Component => { + const wrapper = mount(Goose); + expect(wrapper.find('button').prop('type')).toEqual('submit'); + expect(wrapper).toMatchSnapshot(); + }; + + testComponent(Button); + testComponent(TextButton); +}); + +test('`onClick` runs when button is clicked on', () => { + const testComponent = Component => { + const onClick = jest.fn(); + const wrapper = mount(Goose); + + expect(onClick).toHaveBeenCalledTimes(0); + wrapper.simulate('click'); + expect(onClick).toHaveBeenCalledTimes(1); + }; + + testComponent(Button); + testComponent(TextButton); +}); + +test('`onClick` runs when button is clicked on', () => { + const testComponent = Component => { + const onClick = jest.fn(); + const wrapper = mount(Goose); + + expect(onClick).toHaveBeenCalledTimes(0); + wrapper.simulate('click'); + expect(onClick).toHaveBeenCalledTimes(1); + }; + + testComponent(Button); + testComponent(TextButton); +}); + +test('renders icon that is passed in', () => { + const wrapper = mount(); + expect(wrapper.find('svg')).toHaveLength(1); + expect(wrapper.text()).toBe('DuckGoose'); + expect(wrapper).toMatchSnapshot(); +}); + +test('adds `dataTest` prop', () => { + const wrapperA = mount(); + expect(wrapperA.find('button').prop('data-test')).toEqual('Duck'); + expect(wrapperA).toMatchSnapshot(); + + const wrapperB = mount(Goose); + expect(wrapperB.find('button').prop('data-test')).toEqual('Duck'); + expect(wrapperB).toMatchSnapshot(); +}); diff --git a/packages/thumbprint-react/components/ButtonRow/README.mdx b/packages/thumbprint-react/components/ButtonRow/README.mdx new file mode 100644 index 000000000..b81d5e628 --- /dev/null +++ b/packages/thumbprint-react/components/ButtonRow/README.mdx @@ -0,0 +1,49 @@ +--- +package: '@thumbtack/thumbprint-react' +kit: button-row/index.mdx +platform: react +url: /components/button-row/react/ +mdxType: componentApi +--- + +## Button placement + +### Default (Left) + +```jsx + + + + +``` + +### Center + +```jsx + + + + +``` + +### Right + +```jsx + + + + +``` + +### Stacked at Small + +Best used with `"full-below-small"` on the children. + +```jsx + + + + +``` diff --git a/packages/thumbprint-react/components/ButtonRow/__snapshots__/test.jsx.snap b/packages/thumbprint-react/components/ButtonRow/__snapshots__/test.jsx.snap new file mode 100644 index 000000000..ebf39f0ac --- /dev/null +++ b/packages/thumbprint-react/components/ButtonRow/__snapshots__/test.jsx.snap @@ -0,0 +1,65 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`adds \`dataTest\` prop 1`] = ` + +
+ +`; + +exports[`placement center 1`] = ` + +
+ +`; + +exports[`placement default (left) 1`] = ` + +
+ +`; + +exports[`placement right 1`] = ` + +
+ +`; + +exports[`renders content that is passed in 1`] = ` + +
+
+ goose +
+
+ +`; diff --git a/packages/thumbprint-react/components/ButtonRow/index.jsx b/packages/thumbprint-react/components/ButtonRow/index.jsx new file mode 100644 index 000000000..3ffa2df88 --- /dev/null +++ b/packages/thumbprint-react/components/ButtonRow/index.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import styles from './index.module.scss'; + +const ButtonRow = ({ children, justify, dataTest, isStackedBelowSmall }) => ( +
+ {React.Children.map(children, child => ( +
{child}
+ ))} +
+); + +ButtonRow.propTypes = { + /** + * `Button` components to render. + */ + children: PropTypes.node, + /** + * Controls the horizontal alignment of buttons within the container. + */ + justify: PropTypes.oneOf(['center', 'left', 'right']), + /** + * Stack items below the small breakpoint. This pairs well with `width="full-below-small"` + * for buttons + */ + isStackedBelowSmall: PropTypes.bool, + /** + * A selector hook into the React component for use in automated testing environments. + */ + dataTest: PropTypes.string, +}; + +ButtonRow.defaultProps = { + children: null, + justify: 'left', + isStackedBelowSmall: false, + dataTest: undefined, +}; + +export default ButtonRow; diff --git a/packages/thumbprint-react/components/ButtonRow/index.module.scss b/packages/thumbprint-react/components/ButtonRow/index.module.scss new file mode 100644 index 000000000..a57d8a38b --- /dev/null +++ b/packages/thumbprint-react/components/ButtonRow/index.module.scss @@ -0,0 +1,35 @@ +@import '~@thumbtack/thumbprint-tokens/dist/scss/_index'; +@import '~@thumbtack/tp-ui-core-mixin/_index'; + +.root { + display: flex; + align-items: center; +} + +.item + .item { + margin-left: $tp-space__2; +} + +.justifyCenter { + justify-content: center; +} + +.justifyLeft { + justify-content: flex-start; +} + +.justifyRight { + justify-content: flex-end; +} + +.stackBelowSmall { + @include tp-respond-below($tp-breakpoint__small) { + flex-direction: column; + align-items: stretch; + + .item + .item { + margin-top: $tp-space__2; + margin-left: 0; + } + } +} diff --git a/packages/thumbprint-react/components/ButtonRow/test.jsx b/packages/thumbprint-react/components/ButtonRow/test.jsx new file mode 100644 index 000000000..3715ee028 --- /dev/null +++ b/packages/thumbprint-react/components/ButtonRow/test.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import ButtonRow from './index'; + +test('renders content that is passed in', () => { + const wrapper = mount(goose); + expect(wrapper.text()).toBe('goose'); + expect(wrapper).toMatchSnapshot(); +}); + +describe('placement', () => { + test('default (left)', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); + + test('center', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); + + test('right', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); +}); + +test('adds `dataTest` prop', () => { + const wrapper = mount(); + expect(wrapper.find('div').prop('data-test')).toEqual('Duck'); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/thumbprint-react/components/Carousel/README.mdx b/packages/thumbprint-react/components/Carousel/README.mdx new file mode 100644 index 000000000..febf00f99 --- /dev/null +++ b/packages/thumbprint-react/components/Carousel/README.mdx @@ -0,0 +1,67 @@ +--- +package: '@thumbtack/thumbprint-react' +kit: carousel/index.mdx +platform: react +url: /components/carousel/react/ +mdxType: componentApi +--- + +## How the carousel works + +The `Carousel` component is a low-level controlled component. It displays multiple items in a row and animates when the `selectedIndex` changes. It is infinite by default and the contents are draggable by touch devices. + +```jsx +class CarouselDemo extends React.Component { + constructor() { + this.state = { + selectedIndex: 0, + }; + + this.onSelectedIndexChange = this.onSelectedIndexChange.bind(this); + } + + onSelectedIndexChange(newIndex) { + this.setState({ selectedIndex: Math.round(newIndex) }); + } + + render() { + return ( + + + + Personal Training + + + + Dog Training + + + + Local Moving (under 50 miles) + + + + Massage Therapy + + + ); + } +} +``` diff --git a/packages/thumbprint-react/components/Carousel/__snapshots__/test.jsx.snap b/packages/thumbprint-react/components/Carousel/__snapshots__/test.jsx.snap new file mode 100644 index 000000000..42da6d5b2 --- /dev/null +++ b/packages/thumbprint-react/components/Carousel/__snapshots__/test.jsx.snap @@ -0,0 +1,980 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`\`selectedIndex\` supports decimal \`selectedIndex\` values 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`selectedIndex\` supports negative \`selectedIndex\` 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`spacing\` no spacing 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`spacing\` spacing in ems 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`spacing\` spacing in pixels 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`visibleCount\` one and a half visible items 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`visibleCount\` one visible item 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`\`visibleCount\` three visible items 1`] = ` + +
+ +
+ +
+
    +
  • +
    + 1 +
    +
    • +
  • +
    + 2 +
    +
    • +
  • +
    + 3 +
    +
    • +
  • +
    + 4 +
    +
    • +
+
+ +
+ +
+ +`; + +exports[`renders a carousel 1`] = ` + +
+ +
+ +
+
    +
  • + gooose +
    • +
+
+ +
+ +
+ +`; diff --git a/packages/thumbprint-react/components/Carousel/base-carousel.jsx b/packages/thumbprint-react/components/Carousel/base-carousel.jsx new file mode 100644 index 000000000..7b1725c16 --- /dev/null +++ b/packages/thumbprint-react/components/Carousel/base-carousel.jsx @@ -0,0 +1,186 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import rotate from 'rotate-array'; +import range from 'lodash/range'; +import styles from './base-carousel.module.scss'; + +/** + * This carousel is purposely as minimal as possible. + */ +class BaseCarousel extends React.Component { + constructor(props) { + super(props); + + this.state = { + /** + * When animating, `prevSelectedIndex` is the value of `props.selectedIndex` before the + * animation began. Once the animation is complete, it becomes the same as + * `props.selectedIndex`. + */ + prevSelectedIndex: props.selectedIndex, + isAnimating: false, + }; + + this.setAnimating = this.setAnimating.bind(this); + } + + componentDidUpdate(prevProps) { + const { selectedIndex } = this.props; + + // Typical usage (don't forget to compare props): + if (selectedIndex !== prevProps.selectedIndex) { + this.setAnimating(); + } + } + + setAnimating() { + const { selectedIndex, animationDuration } = this.props; + + this.setState( + { + isAnimating: true, + }, + () => { + setTimeout(() => { + this.setState({ + isAnimating: false, + prevSelectedIndex: selectedIndex, + }); + }, animationDuration); + }, + ); + } + + reorder(items) { + const { prevSelectedIndex } = this.state; + + // The `prevSelectedIndex` doesn't update until the animation is done, so we want to + // use that ordering until the animation is complete. + return rotate(items, -1 * Math.floor(prevSelectedIndex)); + } + + render() { + const { children, selectedIndex, animationDuration, visibleCount, spacing } = this.props; + const { isAnimating, prevSelectedIndex } = this.state; + + const itemWidth = 1 / visibleCount; + + // If `selectedIndex` is `1.5`, this value is `0.5`. This is used when the consumer wants + // to partially display children. + const fractionalIndexOffset = Math.abs(prevSelectedIndex - Math.floor(prevSelectedIndex)); + + // The `adjustedIndex`, when animating, is the number of items to slide. If the value is + // negative it means that we should slide to the left. It gets reset to `0` when the + // animation is complete. + const adjustedIndex = selectedIndex - prevSelectedIndex; + + // This is equal to `fractionalIndexOffset` in the resting state but changes while the + // transition is occuring. + const translateX = itemWidth * (adjustedIndex + fractionalIndexOffset) * -100; + + // An array of the flex order of the items. + const orderedChildren = this.reorder(range(children.length)); + + // Sometimes we need to duplicate the children so that the carousel can display properly. + // This is especially needed when animating. Imagine that a 4-item card with 3 visible + // items wants to animate 2 items to the right. Normally, this would require 5 items to + // animate without displaying an empty spot. Since there are only 4 items, we temporarily + // duplicate the `children` until the animation is complete. + const shouldRenderDuplicateChildren = isAnimating; + + return ( +
+
    + {React.Children.map(children, (child, i) => ( +
  • + {child} +
    • + ))} + + {/* Temporary elements that appear to the left. */} + {shouldRenderDuplicateChildren && + React.Children.map(children, (child, i) => ( +
  • + {child} +
    • + ))} + + {/* Temporary elements that appear to the right. */} + {shouldRenderDuplicateChildren && + React.Children.map(children, (child, i) => ( +
  • + {child} +
    • + ))} +
+
+ ); + } +} + +BaseCarousel.propTypes = { + /** + * The items that render horizontally within the carousel. + */ + children: PropTypes.node.isRequired, + /** + * The index of the left-most item to display in the carousel. Supports whole numbers and + * decimals. + */ + selectedIndex: PropTypes.number, + /** + * The number of items that are visible at once. + */ + visibleCount: PropTypes.number, + /** + * The amount space separating each item. + */ + spacing: PropTypes.string, + /** + * The duration of the animation (in milliseconds). + */ + animationDuration: PropTypes.number, +}; + +BaseCarousel.defaultProps = { + selectedIndex: 0, + visibleCount: 1, + spacing: '0px', + animationDuration: 400, +}; + +export default BaseCarousel; diff --git a/packages/thumbprint-react/components/Carousel/base-carousel.module.scss b/packages/thumbprint-react/components/Carousel/base-carousel.module.scss new file mode 100644 index 000000000..acbb628aa --- /dev/null +++ b/packages/thumbprint-react/components/Carousel/base-carousel.module.scss @@ -0,0 +1,14 @@ +@import '~@thumbtack/thumbprint-tokens/dist/scss/_index'; + +.root { + overflow: hidden; +} + +.wrapper { + display: flex; + position: relative; +} + +.item { + flex: none; +} diff --git a/packages/thumbprint-react/components/Carousel/index.jsx b/packages/thumbprint-react/components/Carousel/index.jsx new file mode 100644 index 000000000..9af7a59a1 --- /dev/null +++ b/packages/thumbprint-react/components/Carousel/index.jsx @@ -0,0 +1,106 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Swipeable from 'react-swipeable'; +import BaseCarousel from './base-carousel.jsx'; + +class Carousel extends React.Component { + constructor(props) { + super(props); + + this.state = { + dragIndexOffset: 0, + }; + + this.onDrag = this.onDrag.bind(this); + this.onDragEnd = this.onDragEnd.bind(this); + + this.containerRef = React.createRef(); + } + + onDrag(deltaX) { + const size = this.containerRef.current && this.containerRef.current.getBoundingClientRect(); + + const { visibleCount } = this.props; + + // Set the `dragIndexOffset` so that the carousel can visually move before we send + // the new index to the parent. + const dragIndexOffset = (deltaX / size.width) * visibleCount; + + this.setState({ + dragIndexOffset, + }); + } + + onDragEnd() { + const { selectedIndex, onSelectedIndexChange } = this.props; + const { dragIndexOffset } = this.state; + + const newSelectedIndex = selectedIndex + dragIndexOffset; + + onSelectedIndexChange(newSelectedIndex); + + this.setState({ + dragIndexOffset: 0, + }); + } + + render() { + const { children, spacing, visibleCount, selectedIndex } = this.props; + const { dragIndexOffset } = this.state; + + const isDragging = dragIndexOffset !== 0; + + return ( +
+ { + this.onDrag(deltaX); + }} + onSwiped={this.onDragEnd} + > + + {children} + + +
+ ); + } +} + +Carousel.propTypes = { + /** + * The items in the carousel that appear horizontally. + */ + children: PropTypes.node.isRequired, + /** + * The index of the left-most item to display in the carousel. Supports all numbers. + */ + selectedIndex: PropTypes.number.isRequired, + /** + * This function is called while a user is dragging the carousel and receives the new index. + * This should update the `selectedIndex` prop similarly to an `onChange` in a controlled + * input. + */ + onSelectedIndexChange: PropTypes.func.isRequired, + /** + * The number of items that are visible at once. + */ + visibleCount: PropTypes.number, + /** + * The amount space separating each item. Supports CSS values such as `8px` or `0.5em`. + */ + spacing: PropTypes.string, +}; + +Carousel.defaultProps = { + visibleCount: 1, + spacing: '0px', +}; + +export default Carousel; diff --git a/packages/thumbprint-react/components/Carousel/test.jsx b/packages/thumbprint-react/components/Carousel/test.jsx new file mode 100644 index 000000000..a89db4e8d --- /dev/null +++ b/packages/thumbprint-react/components/Carousel/test.jsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { noop } from 'lodash'; +import Carousel from './index'; + +test('renders a carousel', () => { + const wrapper = mount( + + gooose + , + ); + expect(wrapper).toMatchSnapshot(); +}); + +describe('`selectedIndex`', () => { + test('supports decimal `selectedIndex` values', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('supports negative `selectedIndex`', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); + +describe('`visibleCount`', () => { + test('one visible item', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('one and a half visible items', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('three visible items', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); + +describe('`spacing`', () => { + test('no spacing', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('spacing in pixels', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); + + test('spacing in ems', () => { + const wrapper = mount( + +
1
+
2
+
3
+
4
+ , + ); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/packages/thumbprint-react/components/Checkbox/README.mdx b/packages/thumbprint-react/components/Checkbox/README.mdx new file mode 100644 index 000000000..79e030363 --- /dev/null +++ b/packages/thumbprint-react/components/Checkbox/README.mdx @@ -0,0 +1,254 @@ +--- +package: '@thumbtack/thumbprint-react' +kit: checkbox/index.mdx +platform: react +url: /components/checkbox/react/ +mdxType: componentApi +--- + +## Basic checkbox + +Checkboxes can be checked, unchecked, or in an indeterminate state. + +The `isChecked` prop determines if a checkbox is checked. + +```jsx +class CheckboxExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + isChecked: undefined, + }; + + this.onChange = this.onChange.bind(this); + } + + onChange(isChecked) { + this.setState({ + isChecked, + }); + } + + render() { + const { isChecked } = this.state; + + return ( + + Send me promotional emails + + ); + } +} +``` + +### Multiple checkboxes + +This an example of how to use many `Checkbox` components at once. + +Here are a few points to note: + +- Each `Checkbox` receives an `id`. This `id` is then passed as the second argument to `onChange`. The first argument is whether the checkbox should be checked or unchecked. +- The checked checkboxes are stored within `this.state`. +- `isChecked` checks to see if the `id` exists within `this.state` and is `true`. + +```jsx +class CheckboxExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + morning: true, + afternoon: true, + }; + + this.onChange = this.onChange.bind(this); + } + + onChange(isChecked, newValue) { + this.setState({ + [newValue]: isChecked, + }); + } + + render() { + return ( +
+ + Morning + + + Afternoon + + + Evening + +
+ ); + } +} +``` + +## Indeterminate checkboxes + +[Indeterminate checkboxes](https://css-tricks.com/indeterminate-checkboxes/) are used when not all items in a field are selected. + +```jsx +class CheckboxExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + isChecked: undefined, + }; + + this.onChange = this.onChange.bind(this); + } + + onChange(isChecked) { + this.setState({ + isChecked, + }); + } + + render() { + const { isChecked } = this.state; + + return ( + + Select all cities + + ); + } +} +``` + +## Disabled checkboxes + +The `isDisabled` prop visually and functionally disabled the radio button. It also visually disables the related label. + +```jsx + + {}} labelPadding="4px 0"> + Morning + + {}} labelPadding="4px 0"> + Afternoon + + {}} labelPadding="4px 0"> + Evening + + +``` + +## Checkbox with an error + +The `hasError` prop can be used to visually represent an error. + +This prop only changes the checkbox’s color. It should be used alongside an error message that helps users advance through the form. + +```jsx +class CheckboxExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + isChecked: undefined, + }; + + this.onChange = this.onChange.bind(this); + } + + onChange(isChecked) { + this.setState({ + isChecked, + }); + } + + render() { + const { isChecked } = this.state; + + return ( + + I accept the Terms of Service + + ); + } +} +``` + +## Multi-column content + +It’s possible to provide complex UIs to the `children` prop. Clicking on the content will select the related checkbox. + +This example puts the label content within `children`. It’s also possible to not provide `children` as `undefined` and use a custom `label` instead. In that case, you must use `Checkbox`’s `id` prop. + +```jsx +class CheckboxExample extends React.Component { + constructor(props) { + super(props); + + this.state = { + isChecked: undefined, + }; + + this.onChange = this.onChange.bind(this); + } + + onChange(isChecked) { + this.setState({ + isChecked, + }); + } + + render() { + const { isChecked } = this.state; + + return ( + +
+
+ +
+
+
+ Austin Entertainment LLC. +

DJs, photo booths, and photography for all of your event needs.

+
+
$120/hr
+
+
+ + ); + } +} +``` diff --git a/packages/thumbprint-react/components/Checkbox/__snapshots__/test.jsx.snap b/packages/thumbprint-react/components/Checkbox/__snapshots__/test.jsx.snap new file mode 100644 index 000000000..10928b151 --- /dev/null +++ b/packages/thumbprint-react/components/Checkbox/__snapshots__/test.jsx.snap @@ -0,0 +1,738 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`adds \`dataTest\` prop 1`] = ` + +