Independant Material Button from Material Design built from 0. 

Independant Material Button from Material Design built from 0

jin_ssj3

@unlimited-react-components/material-button

import MaterialButton from "./MaterialButton/MaterialButton";

import { MaterialButtonProps, MaterialButtonDefaultProps } from "./MaterialButton/MaterialButtonProps";

export { MaterialButton, MaterialButtonProps, MaterialButtonDefaultProps };

  const style = document.createElement('style');

  style.setAttribute('type', 'text/css');

import React, { useState, useEffect, useRef } from 'react';

/*! *****************************************************************************

Permission to use, copy, modify, and/or distribute this software for any

purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH

REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY

AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,

INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM

LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR

OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR

***************************************************************************** */

function __awaiter(thisArg, _arguments, P, generator) {

    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }

    return new (P || (P = Promise))(function (resolve, reject) {

        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }

        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }

        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }

        step((generator = generator.apply(thisArg, _arguments || [])).next());

    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;

    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;

    function verb(n) { return function (v) { return step([n, v]); }; }

        if (f) throw new TypeError("Generator is already executing.");

            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;

            if (y = 0, t) op = [op[0] & 2, t.value];

                case 0: case 1: t = op; break;

                case 4: _.label++; return { value: op[1], done: false };

                case 5: _.label++; y = op[1]; op = [0]; continue;

                case 7: op = _.ops.pop(); _.trys.pop(); continue;

                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }

                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }

                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }

                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }

                    if (t[2]) _.ops.pop();

                    _.trys.pop(); continue;

        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }

        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };

___$insertStyle("@import url(\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\");\n.material-button-root {\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  outline: 0;\n  position: relative;\n  align-items: center;\n  vertical-align: middle;\n  justify-content: center;\n  text-decoration: none;\n  text-transform: none;\n}\n\n.material-button {\n  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  overflow: hidden;\n  min-width: 64px;\n  box-sizing: border-box;\n  border-radius: 4px;\n  font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.75;\n  letter-spacing: 0.02857em;\n}\n\n.material-button.uppercase {\n  text-transform: uppercase;\n}\n\n.material-button.lowercase {\n  text-transform: lowercase;\n}\n\n.material-button.capitalize {\n  text-transform: capitalize;\n}\n\n.material-button.contained {\n  padding: 6px 16px;\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n\n.material-button.outlined {\n  padding: 5px 15px;\n}\n\n.material-button.text {\n  padding: 5px 15px;\n}\n\n.material-button-root.contained:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n}\n\n.material-button span.label {\n  width: 100%;\n  display: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n}\n\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 500ms linear;\n  background-color: rgba(255, 255, 255, 0.7);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n}\n.material-button-root.disabled {\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n  background-color: rgba(0, 0, 0, 0.12);\n  color: rgba(0, 0, 0, 0.26);\n  padding: 6px 16px;\n}\n\n@media screen and (max-width: 600px) {\n  .material-button {\n    min-width: 30px;\n    font-size: 0.78rem;\n    line-height: 1.5;\n    letter-spacing: 0.025em;\n  }\n\n  .material-button.contained {\n    padding: 4px 13px;\n  }\n\n  .material-button.outlined {\n    padding: 4px 12px;\n  }\n}");

    __assign = Object.assign || function __assign(t) {

        for (var s, i = 1, n = arguments.length; i < n; i++) {

            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];

    return __assign.apply(this, arguments);

export { MaterialButton, MaterialButtonDefaultProps };

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

exports.MaterialButtonDefaultProps = MaterialButtonDefaultProps;

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [2.0.0](https://github.com/JinSSJ3/dynamicss) (2021-09-08)

## [1.2.5](https://github.com/unlimited-react-components/material-button) (2021-11-08)

* added function for checking whether a stylesheet exists or not in the DOM

* added function for making a StyleSheet object

* Expose  `MaterialButtonProps`, `MaterialButtonDefaultProps` in index.ts 

## [1.0.8](https://github.com/JinSSJ3/dynamicss) (2021-09-08)

* added function for inserting dynamically a stylesheet exists or not in the DOM

* added function for editing a StyleSheet that exists on the DOM given an id

* added function for removing a StyleSheet that exists on the DOM given an id

# [1.0.0](https://github.com/JinSSJ3/dynamicss) (2021-09-08)

  "name": "@unlimited-react-components/material-button",

  "description": "Independant Material Button from Material Design built from 0",

    "url": "git+https://github.com/unlimited-react-components/material-button.git"

    "url": "https://github.com/unlimited-react-components/material-button/issues"

  "homepage": "https://github.com/unlimited-react-components/material-button#readme",

    "@unlimited-react-components/kernel": "^1.0.2"

    "@rollup/plugin-commonjs": "^20.0.0",

    "@rollup/plugin-node-resolve": "^13.0.4",

    "@storybook/addon-actions": "^6.0.22",

    "@testing-library/jest-dom": "^5.11.4",

    "@types/testing-library__jest-dom": "^5.9.3",

    "@types/testing-library__react": "^10.2.0",

    "@typescript-eslint/eslint-plugin": "^4.3.0",

    "@typescript-eslint/parser": "^4.3.0",

    "fork-ts-checker-webpack-plugin": "^6.2.0",

    "rollup-plugin-peer-deps-external": "^2.2.3",

    "rollup-plugin-typescript2": "^0.30.0",

    "storybook": "start-storybook -p 6006",

    "build-storybook": "build-storybook",

    "lint": "eslint src/*.tsx --quiet --fix",

    "test:coveralls": "jest --coverage && coveralls < coverage/lcov.info",

    "postinstall": "node postinstallSSJ.js"

		@@ -856,3 +856,3 @@ function ___$insertStyle(css) {

		export { MaterialButton };
		export { MaterialButton, MaterialButtonDefaultProps };
		//# sourceMappingURL=index.es.js.map

		@@ -867,2 +867,3 @@ 'use strict';
		exports.MaterialButton = MaterialButton;
		exports.MaterialButtonDefaultProps = MaterialButtonDefaultProps;
		//# sourceMappingURL=index.js.map

		{
		"name": "@unlimited-react-components/material-button",
		"version": "1.2.4",
		"version": "1.2.5",
		"description": "Independant Material Button from Material Design built from 0",
		@@ -5,0 +5,0 @@ "main": "./build/index.js",

Improved metrics

Worsened metrics

		@@ -5,23 +5,12 @@ # Change Log

		<a name="2.0.0"></a>
		## [2.0.0](https://github.com/JinSSJ3/dynamicss) (2021-09-08)
		<a name="1.2.5"></a>
		## [1.2.5](https://github.com/unlimited-react-components/material-button) (2021-11-08)

		### Features

		* updated readme status badges
		* added function for checking whether a stylesheet exists or not in the DOM
		* added function for making a StyleSheet object
		* Expose `MaterialButtonProps`, `MaterialButtonDefaultProps` in index.ts


		<a name="1.0.7"></a>
		## [1.0.8](https://github.com/JinSSJ3/dynamicss) (2021-09-08)

		### Features

		* added readme status badges
		* added function for inserting dynamically a stylesheet exists or not in the DOM
		* added function for editing a StyleSheet that exists on the DOM given an id
		* added function for removing a StyleSheet that exists on the DOM given an id
		<a name="1.0.0"></a>
		# [1.0.0](https://github.com/JinSSJ3/dynamicss) (2021-09-08)