{"_id":"@coopdigital/coop-frontend-components","_rev":"39-e8acc240db598899624e8f9dc8fe3735","name":"@coopdigital/coop-frontend-components","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@coopdigital/coop-frontend-components","version":"0.1.0","author":{"name":"Matt Tyas"},"license":"MIT","_id":"@coopdigital/coop-frontend-components@0.1.0","maintainers":[{"name":"matt-tyas","email":"matt@matthewtyas.com"}],"homepage":"https://github.com/coopdigital/coop-frontend-components#readme","bugs":{"url":"https://github.com/coopdigital/coop-frontend-components/issues"},"dist":{"shasum":"f0225c1bf08fd9ddfe84aa9071fca2352595a653","tarball":"https://registry.npmjs.org/@coopdigital/coop-frontend-components/-/coop-frontend-components-0.1.0.tgz","fileCount":395,"integrity":"sha512-QsMA7oJ5LsLgfexKGgNdG7JoVV2q4fASN+QqNGbPQan3Q2JLS6BfeW/uCc3JD7lObleXfuxPQHAN9qII0t/AXg==","signatures":[{"sig":"MEUCIQCDvVPrRcO6Qi4K+7lfE4f5JfRZaY014TmXbJuC8Qf0XQIgZrCHfnmae8XRjT2yCKGYttF89gMdD+Ryhb8Rh9EvEL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdUV4CRA9TVsSAnZWagAAiYoP/jG8qsmCJgE1jfAB/0tX\nIZt7rR/gLzKpyra5grZW2PDQtxaQ/DqWe7E5bXXAZ+axw6LTDZn3yYhIC3C0\nfQkQkpbKDxMhRxPSLnG777D430f1h02GIGbseuhatXHxTCi9wgjy9tj4BnhF\nxpfLOm9p+lylsMEAPW6mu1CLAFT4f3NESnVjTkPoykoCnIhWxk8HMyZyNDbl\n81nfOAvt/9JNwmn9PzW+mZDhixMFHCyByoeJxVvSoGjSYQ4BTuWvXxjnFlQd\nmwmCGJ3a2bKAiAtxLTi0cdvFPu1C1/DFXOlPjksm6g2SZRwdVXQQIceqcQp4\nrnyhjSPzy5pIMvLe5rF/GiIygRQhJMYdCplLMw9JL6AqGmgkzguoreH6miU1\nJdcrDM8j5wam1++bRHq3x9/XdxBHo1BFPApxirNI9Zg7zToXe8lwVnCc/2pK\nMW1gGgxQoQvM15UZbxfSC65TzafU5hHmcYzrnN3fRzB8ce7QRx7ikCavBJQ4\nkYmRypQCj+Uhu7/lSFuQ+NMDy/2MQETgzRm7qKE61kft1mLPPw2hLFddHFRn\nWT+CmWiyZMo1zo3YfVm51zaWrZT6NC9Ibejc+wHToIOHU8irU23hl+S1vM5+\npcjdLQDDl8jtdySSfVP1pa3+WUgjFgWp8bG6ZKj2i/kkXysZKvaHfgiKSUhn\nfT8V\r\n=ba/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"postcss.config.js","gitHead":"6c455fb9e534139261aa9d4b06a072dfc46bfa3e","scripts":{"lint":"stylelint **/*.scss","build":"postcss _coop-components.css --output dist/coop-components.css","format":"stylelint **/*.scss --fix"},"_npmUser":{"name":"matt-tyas","email":"matt@matthewtyas.com"},"repository":{"url":"git+https://github.com/coopdigital/coop-frontend-components.git","type":"git"},"_npmVersion":"6.0.0","description":"Components contains styles for using the Co-op components from the design system","directories":{"example":"examples"},"_nodeVersion":"8.9.4","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"cssnano":"^4.0.5","stylelint":"^9.4.0","postcss-cli":"^6.0.0","postcss-preset-env":"^5.3.0","@csstools/postcss-sass":"^2.0.0","stylelint-config-standard":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/coop-frontend-components_0.1.0_1534412151453_0.39401761909001864","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@coopdigital/coop-frontend-components","version":"0.1.1","author":"","license":"MIT","_id":"@coopdigital/coop-frontend-components@0.1.1","maintainers":[{"name":"matt-tyas","email":"matt@matthewtyas.com"}],"homepage":"https://github.com/coopdigital/coop-frontend-components#readme","bugs":{"url":"https://github.com/coopdigital/coop-frontend-components/issues"},"dist":{"shasum":"78655e18d0f801e7abfa803f074f27d492c08417","tarball":"https://registry.npmjs.org/@coopdigital/coop-frontend-components/-/coop-frontend-components-0.1.1.tgz","fileCount":330,"integrity":"sha512-Ji6KUC94/ohUCJVYPGKFA3OLP49EBiOi8rkJ55jkHSAWfA5wQkxcZbx5UKQSAhm4ikQ+aAkoJG/1X2SYFHe+pg==","signatures":[{"sig":"MEYCIQCn/mXgOKS/ukxkaXntGDQcNwjEa1YsK4TQmFwATGGIMQIhALelmKovqZF2A5Dz3pFrkNETT8zdaiMIaAplScakCr0B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiUkDCRA9TVsSAnZWagAAhawP/iHsgQ1zlzwss0VhSCxm\nDvSQAKBP7sXyVS5YXgCVYEcXflsSq/DwFkp/o8sPWiQAN/NjHLv9Fy4F8R5V\n0ZyE6CeyHY8/nQ7VSzn7jFdUe9AIcvocSkIM62jM8QSgHFY9yTqENrVMooAB\n/9YKdjcZ4AS+eGdny2KoCutDv0ju5uqD8AGAfMUJjegLqHqJO7KmGlQO/O1L\n7NPLnUFggLcqSIGkL7cpDzDnRIBqcHA3OTGptx+PL9jhCk79gDvXfms7FUQ2\nHtWoprC3adeuoi9UIUWreXTDE63xfFFjyJbZ+E4BOsU1dLHq6TQWb8etVT85\nD1+gjoHTxT8kZb8KJCq219pBKqAtsl59VQKhlxt8G+JfDKi17ILozo6LeVf0\nN+QXamp2N8f4KQHwTS5mryTFSeoJOMYGG3Ov/gBQCMR/9HzDTW5H49wQv22N\nQ28FJrCIDa39rfe20xYQ/e31a/crEd+nCvhu8P1N+wWhjN9L92fApePY4ukz\n4PWvtJujiNZ/yHVxbywCrBVGB+3Y7XTiqx/LF/uJu9OJLx/8CFKba8qxc0lc\ncKqS9Ziae9niaDdBiyEVFPjsnaXCHQyuHvCbIxyg+52bZpi8dSYY2l3d1TDA\n7F8mUGa/ejZTYgMo7XliFBGhDcEUKZtiWF+xf66CSnduUje/sSZfkpGcmkTx\nrYBb\r\n=qNXK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"","gitHead":"ffcf244659fc329240a298376c78a9022217eb70","scripts":{"lint":"stylelint **/*.scss","build":"postcss _coop-components.css --output dist/coop-components.css","format":"stylelint **/*.scss --fix"},"_npmUser":{"name":"matt-tyas","email":"matt@matthewtyas.com"},"repository":{"url":"git+https://github.com/coopdigital/coop-frontend-components.git","type":"git"},"_npmVersion":"6.0.0","description":"Components contains styles for using the Co-op components from the design system","directories":{},"_nodeVersion":"8.9.4","_hasShrinkwrap":false,"devDependencies":{"cssnano":"^4.0.5","stylelint":"^9.4.0","postcss-cli":"^6.0.0","postcss-preset-env":"^5.3.0","@csstools/postcss-sass":"^2.0.0","stylelint-config-standard":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/coop-frontend-components_0.1.1_1535723778817_0.436222680432808","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@coopdigital/coop-frontend-components","version":"0.1.2","author":"","license":"MIT","_id":"@coopdigital/coop-frontend-components@0.1.2","maintainers":[{"name":"kylewelsby","email":"kyle@mekyle.com"},{"name":"matt-tyas","email":"matt@matthewtyas.com"},{"name":"matthewmorek","email":"me@matthewmorek.com"}],"homepage":"https://github.com/coopdigital/coop-frontend-components#readme","bugs":{"url":"https://github.com/coopdigital/coop-frontend-components/issues"},"dist":{"shasum":"444969a6ce4f3e52626783958f1dfb69ab202b02","tarball":"https://registry.npmjs.org/@coopdigital/coop-frontend-components/-/coop-frontend-components-0.1.2.tgz","fileCount":351,"integrity":"sha512-AE1/Es8wuZrhl4xFzBGdh71MUGHEfDvHT7L7wAyJYAM0LQCRawdFl8CWTGs538u3ST1Ig5CyelstAjp/4u1HFQ==","signatures":[{"sig":"MEUCIQDoZwNWcOUIK3iB5Sw4/0K/LJW446wiw2SDNah/ajIcIgIgbatwAVaQaYEWL/FoPJWkIwL6cZKidiO5z1BHVkgCY3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwKPoCRA9TVsSAnZWagAAaxkP/1NDqC1AiMq+GY7YcoWi\nzwFwyHc8WSny3wiObFWHB8dvU14UAB9olI4N5LV29U436pTb99BezP123oRn\nCAjWvEovTBopAKgIRTji0upFsCTTzbW6lrILQ+4NHGQp8MX+fSvt+xFC5Q7+\ncUYrOgwSGUQMuAOWAQ1ffcHiop8fso2QAoKpMcfhN769QPgO5pWFoNzjz/NU\nynEfqkN8UfprW/8EL7p+Wb4Wa74ETu/QlLsmdWibS2QfD9VM4KIsZy1s6QFi\nbQ5w0yA9CCyvU+c/bpnJ0GoA4+KgRFJV8eg/guaYqNfYFReBIwU8bOGI6Iqk\nzg64KZCDQ5E+EcjQvI6FNL8/ss8y5RHYhT5hDJ5Srip9uCayNZ5QTStjYlHE\nahCYZNkCZ7+0YTyGdBhrKlBY62XNTvP01eq/LmzSLBVoaftBK1zw+L4VDhKt\n9HCly7+pN9ANJvWeR9ekjnN0cPQ4hzUcr7hwHA3ALTgW/005bS9vCUUT3PCT\n+A3SIAhmbH+cY/KQ9+clSfaH/FsYpyZ7go8kVdbd3vrnXWoGpIX8ed+30kfE\nduMLu8JbSg4P4BiWWBtLJ/sTIRv5/mtT4baUPDRqAu5oEU43EyRklJumwnXa\nsjXxTKJleDRBHI2CCGA6vr9fXH9WjFYFe+G+Vt5NVpBKXHX0RU3SDCFBLEVV\n8hNf\r\n=vXA/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"","_from":"@coopdigital/coop-frontend-components","_spec":"@coopdigital/coop-frontend-components","_where":"/Applications/MAMP/htdocs/design-system","_shasum":"78655e18d0f801e7abfa803f074f27d492c08417","gitHead":"0459a142532a2354c82d567eb5ded9bd0d116f6f","scripts":{"lint":"stylelint **/*.scss","build":"postcss _coop-components.css --output dist/coop-components.css","format":"stylelint **/*.scss --fix"},"_npmUser":{"name":"matt-tyas","email":"matt@matthewtyas.com"},"_inBundle":false,"_location":"/@coopdigital/coop-frontend-components","_resolved":"https://registry.npmjs.org/@coopdigital/coop-frontend-components/-/coop-frontend-components-0.1.1.tgz","_integrity":"sha512-Ji6KUC94/ohUCJVYPGKFA3OLP49EBiOi8rkJ55jkHSAWfA5wQkxcZbx5UKQSAhm4ikQ+aAkoJG/1X2SYFHe+pg==","_requested":{"raw":"@coopdigital/coop-frontend-components","name":"@coopdigital/coop-frontend-components","type":"tag","scope":"@coopdigital","rawSpec":"","registry":true,"saveSpec":null,"fetchSpec":"latest","escapedName":"@coopdigital%2fcoop-frontend-components"},"deprecated":false,"repository":{"url":"git+https://github.com/coopdigital/coop-frontend-components.git","type":"git"},"_npmVersion":"6.2.0","_requiredBy":["#USER","/"],"description":"Components contains styles for using the Co-op components from the design system","directories":{},"_nodeVersion":"8.9.4","_hasShrinkwrap":false,"devDependencies":{"cssnano":"^4.0.5","stylelint":"^9.4.0","postcss-cli":"^6.0.0","postcss-preset-env":"^5.3.0","@csstools/postcss-sass":"^2.0.0","stylelint-config-standard":"^18.2.0"},"_phantomChildren":{},"bundleDependencies":false,"_npmOperationalInternal":{"tmp":"tmp/coop-frontend-components_0.1.2_1539351527360_0.7645017997336878","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-08-16T09:35:51.321Z","modified":"2026-09-24T15:16:47.743Z","0.1.0":"2018-08-16T09:35:51.599Z","0.1.1":"2018-08-31T13:56:18.938Z","0.1.2":"2018-10-12T13:38:47.538Z"},"bugs":{"url":"https://github.com/coopdigital/coop-frontend-components/issues"},"license":"MIT","homepage":"https://github.com/coopdigital/coop-frontend-components#readme","repository":{"url":"git+https://github.com/coopdigital/coop-frontend-components.git","type":"git"},"description":"Components contains styles for using the Co-op components from the design system","maintainers":[{"email":"experiencelibrary@coop.co.uk","name":"coopexperience"},{"email":"omid@antilong.com","name":"omidantilong"},{"email":"theodore.kouzelis@coop.co.uk","name":"theokouzelis"}],"readme":"# Co-op front-end components\n\nAll components are dependant on the [foundations base styles](https://github.com/coopdigital/coop-frontend-foundations).\n\n## Using the components\nComponents and their usage are documented in the [design system pattern library](https://coop-design-system.herokuapp.com/).\n\n## Building components\n\nAll components are name spaced with:\n\n`.coop-c-[name]`\n\nWe build our components based on the [BEM style](http://getbem.com/). This combination of name spacing and BEM allows us to build flexible components that can be shared across the Co-op easily - avoiding clashing styles or the need to create complex overrides when developing services.\n\nIf you are building a component for the design system you would name space your component with `coop-c-[name]`.\n\nWhen developing components for specific services choose a sensible namespace for your service. For example funeral care components would be named `fc-c-`.\n\nFor example the card component:\n\n```SCSS\n/* ===============================================\nCards - Co-op components\n=============================================== */\n\n.coop-c-card {\n  @include spacing('margin', 'bottom', 'base');\n}\n\n.coop-c-card__content {\n  padding: 12px;\n  color: $text;\n  background: $page;\n  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.05);\n\n  > :last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n  }\n\n  @include media(medium) {\n    padding: 24px;\n  }\n}\n\n.coop-c-card__image {\n  display: block;\n  width: 100%;\n}\n\n// Only apply the content offset if an image is present\n.coop-c-card__image + .coop-c-card__content {\n  position: relative;\n  z-index: 101;\n  margin: -32px $eighth-spacing-unit 0 0;\n\n  @include media(small) {\n    margin-right: $quarter-spacing-unit;\n  }\n\n  @include media(medium) {\n    margin: -50px $half-spacing-unit 0 0;\n  }\n}\n\n.coop-c-card__title {\n  color: $text;\n}\n\n.coop-c-card-heading {\n  position: absolute;\n  top: -20px;\n  left: 20px;\n  z-index: 110;\n  display: block;\n  background: $page;\n  font-family: $medium;\n  font-size: em-calc(16px);\n  padding: 8px 12px;\n\n  @include media(medium) {\n    top: -24px;\n    left: 40px;\n    padding: 8px 12px;\n    font-size: em-calc(20px);\n  }\n\n  @include media(large) {\n    top: -35px;\n    padding: 18px 24px;\n  }\n}\n\n.coop-c-card-heading__link {\n  display: block;\n  color: $text;\n  text-decoration: underline;\n  border-bottom: 0;\n}\n\n.coop-c-card-heading__link:hover {\n  color: $text;\n  text-decoration: none;\n}\n\n// Some styles are only applied if the card is a link\n.coop-c-card__link {\n  display: block;\n  border-bottom: 0;\n\n  .coop-c-card__title {\n    text-decoration: underline;\n  }\n\n  .coop-c-card__content {\n    &:hover {\n      .coop-c-card__title {\n        text-decoration: none;\n      }\n    }\n  }\n}\n\n@mixin cardBackground($link, $backgroundColour) {\n  background-color: $backgroundColour;\n  box-shadow: none;\n\n  a {\n    color: $link;\n    border-color: $link;\n  }\n}\n\n.coop-c-card__content--background {\n  @include cardBackground($text, $yellow-mid);\n}\n```\n\n## Extending components\n\nIf you use a global component but want to change it's styling, use extra classes to extend it. For example if you wanted to centre align the text in card, you would add a modifier class (as per BEM) to change the alignment. This SCSS would be written within a `cards.scss` file in your project - do not directly edit the component SCSS unless you are amending styles to be included within the design system. Note that the override class uses the name space from the fictional funeral care service built on top of the base components.\n\n```SCSS\n.fc-c-card__content--centre {\n  text-align: center;\n}\n```\n","readmeFilename":"README.md"}