{"id":49453775,"url":"https://github.com/IBM/capital-components","last_synced_at":"2026-06-18T22:01:10.606Z","repository":{"id":56240778,"uuid":"195840871","full_name":"IBM/capital-components","owner":"IBM","description":null,"archived":true,"fork":false,"pushed_at":"2020-11-18T22:17:47.000Z","size":3322,"stargazers_count":2,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-20T12:58:11.811Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IBM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-08T15:33:40.000Z","updated_at":"2025-07-29T15:58:57.000Z","dependencies_parsed_at":"2022-08-15T15:20:15.717Z","dependency_job_id":null,"html_url":"https://github.com/IBM/capital-components","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/IBM/capital-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fcapital-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fcapital-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fcapital-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fcapital-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IBM","download_url":"https://codeload.github.com/IBM/capital-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fcapital-components/sbom","scorecard":{"id":64341,"data":{"date":"2025-08-11","repo":{"name":"github.com/IBM/capital-components","commit":"dc6dbf3e12313f0439cd522f5efc8509fb381463"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":1,"reason":"Found 3/26 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: github.com/IBM/.github/SECURITY.md:1","Info: Found linked content: github.com/IBM/.github/SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/IBM/.github/SECURITY.md:1","Info: Found text in security policy: github.com/IBM/.github/SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 7 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"169 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-2mj8-pj3j-h362","Warn: Project is vulnerable to: GHSA-gqf6-75v8-vr26","Warn: Project is vulnerable to: GHSA-v45m-2wcp-gg98","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-897m-rjf5-jp39","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp","Warn: Project is vulnerable to: GHSA-x55w-vjjp-222r","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-ch52-vgq2-943f","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-c497-v8pv-ch6x","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-m6cx-g6qm-p2cx","Warn: Project is vulnerable to: GHSA-x8qc-rrcw-4r46","Warn: Project is vulnerable to: GHSA-4328-8hgf-7wjr","Warn: Project is vulnerable to: GHSA-93f3-23rq-pjfp","Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv","Warn: Project is vulnerable to: GHSA-pw54-mh39-w3hc","Warn: Project is vulnerable to: GHSA-xgh6-85xh-479p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-r2j6-p67h-q639","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg","Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8","Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2","Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-v4rh-8p82-6h5w","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T02:18:01.289Z","repository_id":56240778,"created_at":"2025-08-15T02:18:01.290Z","updated_at":"2025-08-15T02:18:01.290Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34508867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-30T04:01:03.704Z","updated_at":"2026-06-18T22:01:10.600Z","avatar_url":"https://github.com/IBM.png","language":"JavaScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Capital Components\n\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nComponents to support the Watson Financial Services [Capital Design System](https://ibm.biz/capital-design-system).\n\nThis library makes the assumption that you already have carbon-components installed and behaves as an addon to that project. Currently we are using carbon v9 with plans to upgrade to v10.\n\n## Libraries\n\n### 🛠 Component Library\n\n- [Storybook](https://ibm.github.io/capital-components/)\n- [Repo](https://github.com/ibm/capital-components/)\n\n## Setup\n\n```sh\nyarn add capital-components\n```\n\nNote: There are additional required dependencies like emotion and icons that should also be installed. Check the package.json for all required peer dependencies.\n\n## General Styling\n\nThis repo provides a small set of SASS files that can be used for styling components.\n\n```scss\n@import \"~capital-components/styles/scss/carbon-components.scss\";\n@import \"~capital-components/styles/scss/styles.scss\";\n@import \"~capital-components/styles/css/cap-grid-legacy.css\";\n```\n\n```js\nimport \"capital-components/styles/css/carbon-components.css\";\nimport \"capital-components/styles/css/styles.css\";\nimport \"capital-components/styles/css/cap-grid-legacy.css\";\n```\n\nWe use CSS styling for a few elements (grid, font sizing, base carbon styles) for the sake of a shared reference point with\nother projects.\n\n## Emotion Styling\n\nWe use the emotion library to provide dynamic styling combined with low configuration support. Using emotion allows anyone using\nthis library to only have the emotion dependency but not worry about webpack config or loader specifics. It also allows our\npackage to be relatively small and prevent including a lot of unused CSS.\n\nUsing emotion also allows developers to control scope like no other CSS framework.\n\nLearn more [here](https://emotion.sh)\n\n### Some Classes\n\n| Class             | Use                |\n| ----------------- | ------------------ |\n| cap--type-alpha   | header 1 type face |\n| cap--type-beta    | header 2 type face |\n| cap--type-gamma   | header 3 type face |\n| cap--type-delta   | header 4 type face |\n| cap--type-epsilon | header 5 type face |\n\nSee the styles.scss files for other useful styles. Note that we did not make this apply to all `h1` (`h2`, etc) elements intentionally, as it conflicts with carbon's styling.\n\n## Theming\n\nOur themes are based on carbon themes, so you can import your custom theme file prior to our styles file. We've provided some example theme files.\n\n```scss\n@import \"~capital-components/styles/scss/themes/regulatory-compliance.scss\";\n@import \"~capital-components/styles/scss/styles.scss\";\n```\n\nHowever, we also use emotion theming to get dynamic theme colors (or other theme properties). To take advantage of many of our components,\nyou need to wrap your app with the Theme Provider:\n\n```js\nimport { ThemeProvider } from 'capital-components/lib/support/theme';\nimport theme from 'capital-components/lib/support/themes/other-products';\n\n...\n\n\u003cThemeProvider theme={theme}\u003e\n    \u003cApp /\u003e\n\u003c/ThemeProvider\u003e\n```\n\n## Spacing\n\nWe use a standardized spacing scheme built (details in [src/layout/spacing](https://github.com/ibm/capital-components/blob/master/src/layout/spacing.ts))\n\nThe suggestion is to use the `buildSpacingFromString` method to determine how much padding an element should have. This method works on a string\nlike \"top md bottom md\" which replaces the `md`s with the appropriate spacing size and applies that to the associated direction.\n\nPlease see the [test](https://github.com/ibm/capital-components/blob/master/src/layout/spacing.test.ts) file for more detailed use cases.\n\n## Grid\n\nWe provide some utility components that are built upon [css-gridish](https://github.com/IBM/css-gridish)\n\n### React Component Usage\n\n```js\nimport { Grid, Col } from \"capital-components\";\n```\n\n### Vertical Spacing\n\nGrid (and Col) elements control their horizontal spacing because they are grid elements. Sometimes you do want to specify padding on the vertical axis.\nLike spacing, we provide a prop on Grid/Col elements called `verticalPadding` which takes a string and translates that to standard padding.\n\nUnlike the spacing function, this prop can only apply padding to top or bottom. Please see the [test](https://github.com/ibm/capital-components/blob/master/src/layout/grid.test.ts) file for more detailed use cases.\n\n## Media queries\n\nThis library exposes some useful media query helpers that can be used inside javascript. They are located here:\n\n```js\nimport { breakpoints } from \"capital-components/lib/layout/mediaQueries\";\n```\n\nSupported breakpoint sizes can be found [here](https://ibm.github.io/capital-components/?selectedKind=Layout%7CMedia%20Queries\u0026selectedStory=Scales\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Fstories%2Fstories-panel)\n\n### With React\n\nWe also suggest using the package [react-media](https://www.npmjs.com/package/react-media) to supplement this functionality.\n\nWith react-media, we can build a component that changes it's rendering based on the media queries:\n\n```jsx\nimport Media from \"react-media\";\nimport { breakpoints } from \"capital-components/lib/layout/mediaQueries\";\n\nconst Comp = () =\u003e (\n  \u003cMedia query={{ maxWidth: breakpoints.s - 1 }}\u003e\n    {matches =\u003e (matches ? \u003cComp1 /\u003e : \u003cComp2 /\u003e)}\n  \u003c/Media\u003e\n);\n```\n\nThis component would render Comp1 if the screen size is less than the `small` breakpoint.\n\nNote: We subtract 1 from the breakpoint for consistency. These breakpoints are designed for `min-width` in mind, so max-width needs\nsome minor adjustments to keep in sync with all the mediaqueries in emotion.\n\nAlternatively, you can use the helper component:\n\n```jsx\nimport { Mobile } from \"capital-components\";\n\nconst Comp = () =\u003e \u003cMobile\u003e{isMobile =\u003e (isMobile ? \u003cComp1 /\u003e : \u003cComp2 /\u003e)}\u003c/Mobile\u003e;\n```\n\n### With Emotion\n\nEmotion css also works really well with our media queries package. You can see some of the examples inside the media query\nsection of [storybook](https://ibm.github.io/capital-components/?selectedKind=Layout%7CMedia%20Queries\u0026selectedStory=Base%20Elements\u0026full=0\u0026addons=1\u0026stories=1\u0026panelRight=0\u0026addonPanel=storybook%2Factions%2Factions-panel)\n\n#### mq\n\nUsed instead of `css` function from emotion. The following will generate a div that has the\nbackground color of `red` on screens smaller than the `s` breakpoint:\n\n```jsx\nimport { mq } from \"capital-components/lib/layout/mediaQueries\";\n\nconst Comp = () =\u003e \u003cdiv className={mq.s(\"background-color: red;\")}\u003eHello World\u003c/div\u003e;\n```\n\n#### mqStringsMax\n\nAnother way to do it is to use some media query helpers within another `css` call. So something like the following would\nwork. This is useful when combined with non-media query related css. The following will generate a div with display flex and that has the background color of `red` on screens smaller than the `s` breakpoint:\n\n```jsx\nimport { css } from \"emotion\";\nimport { mqStringsMax as mediaQuery } from \"capital-components/lib/layout/mediaQueries\";\n\nconst Comp = () =\u003e (\n  \u003cdiv\n    className={css`\n      display: flex;\n      ${mediaQuery.s(\"background-color: red;\")};\n    `}\n  \u003e\n    Hello World\n  \u003c/div\u003e\n);\n```\n\n#### buildStringForMediaQuery\n\nThis helper is useful for building a map of media query sizes to a specific css combination. The following will generate a div that has the background color of `blue` when screen is larger than `s` breakpoint and `yellow` when screen is larger than `s` and `xl`:\n\n```jsx\nimport { css } from \"emotion\";\nimport { buildStringForMediaQueries } from \"capital-components/lib/layout/mediaQueries\";\n\nconst mediaQueryString = buildStringForMediaQueries({\n  s: \"background-color: blue;\",\n  xl: \"background-color: yellow;\"\n});\n\nconst Comp = () =\u003e \u003cdiv className={css(mediaQueryString)}\u003eHello World\u003c/div\u003e;\n```\n\n### Visualization Colors\n\nCurrently we include a palette of 20 colors, importable like so:\n\n```javascript\nimport { paletteSet20 } from \"capital-components/lib/support/vizColors\";\n```\n\nIt comes out as an array of 20 items, randomized, and based on b-splines: http://jsfiddle.net/frj3tb6a/11/\n\n### Importing library\n\nYou can import the generated bundle to use the whole library:\n\n```javascript\nimport { Grid } from \"capital-components\";\n```\n\n### NPM scripts\n\n- `npm t`: Run test suite\n- `npm start`: Run `npm run build` in watch mode\n- `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)\n- `npm run test:prod`: Run linting and generate coverage\n- `npm run build`: Generate bundles and typings, create docs\n- `npm run lint`: Lints code\n- `npm run commit`: Commit using conventional commit style ([husky](https://github.com/typicode/husky) will tell you to use it if you haven't :wink:)\n\n### Git Hooks\n\nThere is already set a `precommit` hook for formatting your code with Prettier :nail_care:\n\n### FAQ\n\n#### `Array.prototype.from`, `Promise`, `Map`... is undefined?\n\nTypeScript or Babel only provides down-emits on syntactical features (`class`, `let`, `async/await`...), but not on functional features (`Array.prototype.find`, `Set`, `Promise`...), . For that, you need Polyfills, such as [`core-js`](https://github.com/zloirock/core-js) or [`babel-polyfill`](https://babeljs.io/docs/usage/polyfill/) (which extends `core-js`).\n\nFor a library, `core-js` plays very nicely, since you can import just the polyfills you need:\n\n```javascript\nimport \"core-js/fn/array/find\"\nimport \"core-js/fn/string/includes\"\nimport \"core-js/fn/promise\"\n...\n```\n\n#### What if I don't want git-hooks, automatic releases or semantic-release?\n\nThen you may want to:\n\n- Remove `commitmsg`, `postinstall` scripts from `package.json`. That will not use those git hooks to make sure you make a conventional commit\n\n## Credits\n\nBuilt based on this startkit: https://github.com/alexjoverm/typescript-library-starter.git\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIBM%2Fcapital-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIBM%2Fcapital-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIBM%2Fcapital-components/lists"}