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`] = ` + +