{"_rev":"6-a441b01bb8c63855059d446e4ff19a35","time":{"created":"2023-03-16T16:04:06.597Z","0.0.1":"2023-03-14T10:58:20.632Z","modified":"2023-03-16T16:04:06.994Z","0.0.2":"2023-03-14T12:03:48.258Z","0.0.3":"2023-03-14T12:08:55.757Z","0.0.5":"2023-03-16T16:04:06.831Z"},"_id":"@alexandre_m/design-system_button","name":"@alexandre_m/design-system_button","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.5":{"name":"@alexandre_m/design-system_button","version":"0.0.5","description":"Reusable and customizable react button component","main":"index.js","scripts":{},"keywords":["react","typescript","button"],"repository":{"type":"git","url":"https://github.com/Alex-mant/design-system/Button"},"author":{"name":"Mantione Alexandre"},"license":"ISC","devDependencies":{"@types/react":"^18.0.28","@types/styled-components":"^5.1.26","css-loader":"6.7.3","react-dom":"^18.2.0","style-loader":"3.3.2","typescript":"^4.9.5"},"dependencies":{"styled-components":"^5.3.5"},"types":"./index.d.ts","gitHead":"2d6278b2be9ac5ec3473392f3877b5ade96840a8","_id":"@alexandre_m/design-system_button@0.0.5","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-XeV+HXXYu12iUKEBr50KS3V2uMBAnTkLeSsrVkz1MV57DjJQYfMl2RMStrfeT39SLBR+s65hwI5y2KAUjiL79g==","shasum":"7857f3ba47b2f5dfe7f79ab5b9f3aab5d5039c85","tarball":"https://registry.npmjs.org/@alexandre_m/design-system_button/-/design-system_button-0.0.5.tgz","fileCount":9,"unpackedSize":6585,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVr1PUOVHY9EEG5wZFGWh5wA4tKnHAr7fIERjOpceLeAIgEchepO7llYk4j6k+VT6bMCsYnXj3dMMD35E8iUqYF3c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEz32ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpiyg/+LsNTcm4ufXwKEJLH2YZyhgZ8dklNdMJYtgsJWqTV6I0M2aRs\r\niG7v+nHoDxGuwF1coDfUy8MNn6BNUWeAMj4MHcOSOt2lCrglR8skKL5zFsmX\r\n63w3F+/mDoEzia4dG8mPld14CNohqblEpde74Pb8rphYde/nJkYQYpZhbtIq\r\nLvNK70jHc6xLEtgE+dlDx6PAsGFlND4dt2SVLlm3CjbzPW4mdfk0yMeLZYEM\r\nmCt5694VYevMPU313Mv1r3Oi9YpTa+8TB7iCIC08XEg2rQuCL+XOwycVE5Eo\r\nLe1pNO35LTAKmbm0GelRGhwWTXYnVb8tf0pYio5oeXCGb//boVAFYqitlwCV\r\nMK0z+U7TfOjYffpIIKOfdYwLqxP5YupRqaid+UttZ3y/OZGyEJSKlruYP2lE\r\nm29PYSxPge9UQDFpyUdkJP/t6MzhZPlO/5Tsfdjbkr4L1CkoFNU8Vdo7Pys1\r\nQZmwC4FTYjrHvoBxTwBBK78vqk5qfVYbBdbfX19vSgUeOaDuGG0VtLx/wxHd\r\nQ29BoOEifViBEIiQ8MGes2sXqLy7Zrr6rMwlnK9UYdCjJ1s40aESGl5c/7Nz\r\nAedv/dcvR7u9e0C3OnfIKzyytJbClS6xeCvHi4SFXalaCmuUp36XWmU+s/yF\r\nqfSz37YxRF8mZ4lYMKDPfYKx2PpzjvrtiGk=\r\n=uEBf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexandre_m","email":"alx.mantione@gmail.com"},"directories":{},"maintainers":[{"name":"alexandre_m","email":"alx.mantione@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system_button_0.0.5_1678982646668_0.12058289371850606"},"_hasShrinkwrap":false}},"maintainers":[{"name":"alexandre_m","email":"alx.mantione@gmail.com"}],"description":"Reusable and customizable react button component","keywords":["react","typescript","button"],"repository":{"type":"git","url":"https://github.com/Alex-mant/design-system/Button"},"author":{"name":"Mantione Alexandre"},"license":"ISC","readme":"# React Button Customizable\r\n\r\nA simple and reusable Button component for REACT\r\n\r\n![](https://raw.githubusercontent.com/Alex-mant/design-system/master/Button/src/assets/buttonModels.jpg?raw=true)\r\n\r\n## Installation\r\n\r\nThe package can be installed via [npm](https://github.com/npm/cli):\r\n\r\n```\r\nnpm install @alexandre_m/design-system_button --save\r\n```\r\n\r\nOr via [yarn](https://github.com/yarnpkg/yarn):\r\n\r\n```\r\nyarn add @alexandre_m/design-system_button\r\n```\r\n#### dependencies\r\n    styled-components: ^5.3.5\r\n    \r\n#### devDependencies\r\n    @types/react: ^18.0.28,\r\n    @types/styled-components: ^5.1.26,\r\n    css-loader: 6.7.3,\r\n    react-dom: ^18.2.0,\r\n    style-loader: 3.3.2,\r\n    typescript: ^4.9.5\r\n\r\n## Configuration\r\n### You can call the button as a usual component\r\n#### Change the component style easily with the parameters.\r\n#### /!\\ The component waits for an object containing the parameters to be modified.\r\n```js\r\n  // Example of object\r\n  const buttonParams = {\r\n    color: \"#FF4554\",\r\n    hoverColor: \"#000\",\r\n  }\r\n\r\n  const component = () => {\r\n    return(\r\n      <Button text={\"Click Here\"} options={buttonsParams}/>\r\n    )\r\n  }\r\n```\r\n#### You can find all the modifiable parameters in the \"Type of props\" section below in the \"IStyledProps\" interface !\r\n\r\n### Type of props\r\n```ts\r\n  interface IStyledProps {\r\n    display?: string,\r\n    background?: string,\r\n    color?: string,\r\n    hoverColor?: string,\r\n    hoverBackground?: string, \r\n    disabled?: boolean,\r\n    iconSide?: string,\r\n    fontFamily?: string,\r\n    fontSize?: string,\r\n    fontStyle?: string,\r\n    fontWeight?: number,\r\n    lineHeight?: string,\r\n    border?: string,\r\n    padding?: string,\r\n  }\r\n\r\n  interface IProps {\r\n    text: string,\r\n    options?: IStyledProps & {\r\n      icon?: string,\r\n      iconAltText?: string,\r\n    }\r\n  }\r\n```\r\n\r\n## License\r\n\r\nCopyright (c) 2022 Lych Inc. and individual contributors. Licensed under ISC license, see [LICENSE](LICENSE) for the full license.","readmeFilename":"README.md"}