@nice-digital/nds-button 2.0.2-alpha.0 → 2.0.5-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -15
- package/es/Button.js.map +1 -1
- package/lib/Button.js.map +1 -1
- package/package.json +3 -3
- package/scss/button.scss +10 -10
package/README.md
CHANGED
|
@@ -2,20 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
> Button component for the NICE Design System
|
|
4
4
|
|
|
5
|
-
- [
|
|
6
|
-
|
|
7
|
-
- [
|
|
8
|
-
- [
|
|
9
|
-
- [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
- [HTML](#html)
|
|
5
|
+
- [Installation](#installation)
|
|
6
|
+
- [Usage](#usage)
|
|
7
|
+
- [React](#react)
|
|
8
|
+
- [Props](#props)
|
|
9
|
+
- [children](#children)
|
|
10
|
+
- [variant](#variant)
|
|
11
|
+
- [buttonType](#buttontype)
|
|
12
|
+
- [to](#to)
|
|
13
|
+
- [elementType](#elementtype)
|
|
14
|
+
- [method](#method)
|
|
15
|
+
- [className](#classname)
|
|
16
|
+
- [SCSS](#scss)
|
|
17
|
+
- [HTML](#html)
|
|
19
18
|
|
|
20
19
|
## Installation
|
|
21
20
|
|
|
@@ -117,7 +116,7 @@ Additional CSS classes to apply to the button, e.g. `mt--e` to add a top margin.
|
|
|
117
116
|
If you're not using [React](#react), then import the SCSS directly into your application by:
|
|
118
117
|
|
|
119
118
|
```scss
|
|
120
|
-
@
|
|
119
|
+
@forward '@nice-digital/nds-button/scss/button';
|
|
121
120
|
```
|
|
122
121
|
|
|
123
122
|
### HTML
|
package/es/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","PropTypes","classnames","Button","props","variant","to","elementType","children","buttonType","className","method","attributes","possibleVariants","Object","keys","variants","some","m","Error","join","ButtonTagType","buttonProps","type","types","button","btn","primary","submit","reset","cta","secondary","inverse","propTypes","string","oneOf","oneOfType","arrayOf","node","isRequired"],"sources":["../src/Button.js"],"sourcesContent":["import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\n\nimport \"../scss/button.scss\";\n\nexport const Button = (props) => {\n\tconst {\n\t\tvariant = \"primary\",\n\t\tto,\n\t\telementType,\n\t\tchildren,\n\t\tbuttonType,\n\t\tclassName,\n\t\tmethod,\n\t\t...attributes\n\t} = props;\n\n\tconst possibleVariants = Object.keys(Button.variants);\n\tif (variant && !possibleVariants.some((m) => m === variant)) {\n\t\tthrow new Error(\n\t\t\t`Expected variant to be one of '${possibleVariants.join(\n\t\t\t\t\"', '\"\n\t\t\t)}' but found '${variant}'`\n\t\t);\n\t}\n\n\tconst ButtonTagType = elementType || (to ? \"a\" : \"button\");\n\tconst buttonProps = {};\n\n\tif (to) {\n\t\tbuttonProps[method || (ButtonTagType === \"a\" && \"href\") || \"to\"] = to;\n\t} else if (ButtonTagType === \"button\") {\n\t\tbuttonProps.type = buttonType || Button.types.button;\n\t}\n\n\tbuttonProps.className = classnames({\n\t\tbtn: true,\n\t\t[`btn--${variant}`]: variant !== Button.variants.primary,\n\t\t[className]: !!className\n\t});\n\n\treturn (\n\t\t<ButtonTagType {...buttonProps} {...attributes}>\n\t\t\t{children}\n\t\t</ButtonTagType>\n\t);\n};\n\nButton.types = {\n\tbutton: \"button\",\n\tsubmit: \"submit\",\n\treset: \"reset\"\n};\n\nButton.variants = {\n\tcta: \"cta\",\n\tprimary: \"primary\",\n\tsecondary: \"secondary\",\n\tinverse: \"inverse\"\n};\n\nButton.propTypes = {\n\tto: PropTypes.string,\n\tvariant: PropTypes.oneOf([\n\t\tButton.variants.primary,\n\t\tButton.variants.cta,\n\t\tButton.variants.secondary,\n\t\tButton.variants.inverse\n\t]),\n\tbuttonType: PropTypes.oneOf([\n\t\tButton.types.button,\n\t\tButton.types.submit,\n\t\tButton.types.reset\n\t]),\n\telementType: PropTypes.elementType,\n\tclassName: PropTypes.string,\n\tchildren: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tmethod: PropTypes.string\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAO,qBAAP;AAEA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD,EAAW;EAAA;;EAChC,qBASIA,KATJ,CACCC,OADD;EAAA,IACCA,OADD,+BACW,SADX;EAAA,IAECC,EAFD,GASIF,KATJ,CAECE,EAFD;EAAA,IAGCC,WAHD,GASIH,KATJ,CAGCG,WAHD;EAAA,IAICC,QAJD,GASIJ,KATJ,CAICI,QAJD;EAAA,IAKCC,UALD,GASIL,KATJ,CAKCK,UALD;EAAA,IAMCC,SAND,GASIN,KATJ,CAMCM,SAND;EAAA,IAOCC,MAPD,GASIP,KATJ,CAOCO,MAPD;EAAA,IAQIC,UARJ,iCASIR,KATJ;;EAWA,IAAMS,gBAAgB,GAAGC,MAAM,CAACC,IAAP,CAAYZ,MAAM,CAACa,QAAnB,CAAzB;;EACA,IAAIX,OAAO,IAAI,CAACQ,gBAAgB,CAACI,IAAjB,CAAsB,UAACC,CAAD;IAAA,OAAOA,CAAC,KAAKb,OAAb;EAAA,CAAtB,CAAhB,EAA6D;IAC5D,MAAM,IAAIc,KAAJ,qCAC6BN,gBAAgB,CAACO,IAAjB,CACjC,MADiC,CAD7B,qBAGYf,OAHZ,OAAN;EAKA;;EAED,IAAMgB,aAAa,GAAGd,WAAW,KAAKD,EAAE,GAAG,GAAH,GAAS,QAAhB,CAAjC;EACA,IAAMgB,WAAW,GAAG,EAApB;;EAEA,IAAIhB,EAAJ,EAAQ;IACPgB,WAAW,CAACX,MAAM,IAAKU,aAAa,KAAK,GAAlB,IAAyB,MAApC,IAA+C,IAAhD,CAAX,GAAmEf,EAAnE;EACA,CAFD,MAEO,IAAIe,aAAa,KAAK,QAAtB,EAAgC;IACtCC,WAAW,CAACC,IAAZ,GAAmBd,UAAU,IAAIN,MAAM,CAACqB,KAAP,CAAaC,MAA9C;EACA;;EAEDH,WAAW,CAACZ,SAAZ,GAAwBR,UAAU;IACjCwB,GAAG,EAAE;EAD4B,yBAExBrB,OAFwB,IAEZA,OAAO,KAAKF,MAAM,CAACa,QAAP,CAAgBW,OAFhB,cAGhCjB,SAHgC,IAGpB,CAAC,CAACA,SAHkB,eAAlC;EAMA,oBACC,oBAAC,aAAD,eAAmBY,WAAnB,EAAoCV,UAApC,GACEJ,QADF,CADD;AAKA,CAzCM;AA2CPL,MAAM,CAACqB,KAAP,GAAe;EACdC,MAAM,EAAE,QADM;EAEdG,MAAM,EAAE,QAFM;EAGdC,KAAK,EAAE;AAHO,CAAf;AAMA1B,MAAM,CAACa,QAAP,GAAkB;EACjBc,GAAG,EAAE,KADY;EAEjBH,OAAO,EAAE,SAFQ;EAGjBI,SAAS,EAAE,WAHM;EAIjBC,OAAO,EAAE;AAJQ,CAAlB;AAOA7B,MAAM,CAAC8B,SAAP,GAAmB;EAClB3B,EAAE,EAAEL,SAAS,CAACiC,MADI;EAElB7B,OAAO,EAAEJ,SAAS,CAACkC,KAAV,CAAgB,CACxBhC,MAAM,CAACa,QAAP,CAAgBW,OADQ,EAExBxB,MAAM,CAACa,QAAP,CAAgBc,GAFQ,EAGxB3B,MAAM,CAACa,QAAP,CAAgBe,SAHQ,EAIxB5B,MAAM,CAACa,QAAP,CAAgBgB,OAJQ,CAAhB,CAFS;EAQlBvB,UAAU,EAAER,SAAS,CAACkC,KAAV,CAAgB,CAC3BhC,MAAM,CAACqB,KAAP,CAAaC,MADc,EAE3BtB,MAAM,CAACqB,KAAP,CAAaI,MAFc,EAG3BzB,MAAM,CAACqB,KAAP,CAAaK,KAHc,CAAhB,CARM;EAalBtB,WAAW,EAAEN,SAAS,CAACM,WAbL;EAclBG,SAAS,EAAET,SAAS,CAACiC,MAdH;EAelB1B,QAAQ,EAAEP,SAAS,CAACmC,SAAV,CAAoB,CAC7BnC,SAAS,CAACoC,OAAV,CAAkBpC,SAAS,CAACqC,IAA5B,CAD6B,EAE7BrC,SAAS,CAACqC,IAFmB,CAApB,EAGPC,UAlBe;EAmBlB5B,MAAM,EAAEV,SAAS,CAACiC;AAnBA,CAAnB"}
|
package/lib/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","props","variant","to","elementType","children","buttonType","className","method","attributes","possibleVariants","Object","keys","variants","some","m","Error","join","ButtonTagType","buttonProps","type","types","button","classnames","btn","primary","submit","reset","cta","secondary","inverse","propTypes","PropTypes","string","oneOf","oneOfType","arrayOf","node","isRequired"],"sources":["../src/Button.js"],"sourcesContent":["import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nimport classnames from \"classnames\";\n\nimport \"../scss/button.scss\";\n\nexport const Button = (props) => {\n\tconst {\n\t\tvariant = \"primary\",\n\t\tto,\n\t\telementType,\n\t\tchildren,\n\t\tbuttonType,\n\t\tclassName,\n\t\tmethod,\n\t\t...attributes\n\t} = props;\n\n\tconst possibleVariants = Object.keys(Button.variants);\n\tif (variant && !possibleVariants.some((m) => m === variant)) {\n\t\tthrow new Error(\n\t\t\t`Expected variant to be one of '${possibleVariants.join(\n\t\t\t\t\"', '\"\n\t\t\t)}' but found '${variant}'`\n\t\t);\n\t}\n\n\tconst ButtonTagType = elementType || (to ? \"a\" : \"button\");\n\tconst buttonProps = {};\n\n\tif (to) {\n\t\tbuttonProps[method || (ButtonTagType === \"a\" && \"href\") || \"to\"] = to;\n\t} else if (ButtonTagType === \"button\") {\n\t\tbuttonProps.type = buttonType || Button.types.button;\n\t}\n\n\tbuttonProps.className = classnames({\n\t\tbtn: true,\n\t\t[`btn--${variant}`]: variant !== Button.variants.primary,\n\t\t[className]: !!className\n\t});\n\n\treturn (\n\t\t<ButtonTagType {...buttonProps} {...attributes}>\n\t\t\t{children}\n\t\t</ButtonTagType>\n\t);\n};\n\nButton.types = {\n\tbutton: \"button\",\n\tsubmit: \"submit\",\n\treset: \"reset\"\n};\n\nButton.variants = {\n\tcta: \"cta\",\n\tprimary: \"primary\",\n\tsecondary: \"secondary\",\n\tinverse: \"inverse\"\n};\n\nButton.propTypes = {\n\tto: PropTypes.string,\n\tvariant: PropTypes.oneOf([\n\t\tButton.variants.primary,\n\t\tButton.variants.cta,\n\t\tButton.variants.secondary,\n\t\tButton.variants.inverse\n\t]),\n\tbuttonType: PropTypes.oneOf([\n\t\tButton.types.button,\n\t\tButton.types.submit,\n\t\tButton.types.reset\n\t]),\n\telementType: PropTypes.elementType,\n\tclassName: PropTypes.string,\n\tchildren: PropTypes.oneOfType([\n\t\tPropTypes.arrayOf(PropTypes.node),\n\t\tPropTypes.node\n\t]).isRequired,\n\tmethod: PropTypes.string\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice-digital/nds-button",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.5-alpha.0",
|
|
4
4
|
"description": "Button component for the NICE Design System",
|
|
5
5
|
"author": "Ian Routledge <ian.routledge@nice.org.uk>",
|
|
6
6
|
"homepage": "https://design-system.nice.org.uk/",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"url": "https://github.com/nice-digital/nice-design-system/issues"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@nice-digital/nds-core": "^2.0.
|
|
37
|
+
"@nice-digital/nds-core": "^2.0.5-alpha.0",
|
|
38
38
|
"classnames": "^2.2.6",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@babel/cli": "^7.5.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "c560cb90c31f1c8d2e3085df9b32bc4e47a37929"
|
|
49
49
|
}
|
package/scss/button.scss
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@use '@nice-digital/nds-core/scss/utils';
|
|
10
10
|
|
|
11
11
|
$button-shadow-colour: rgb(0 0 0 / 20%);
|
|
12
|
-
$button-border-radius: utils.
|
|
12
|
+
$button-border-radius: utils.rem(3px);
|
|
13
13
|
|
|
14
14
|
/// Button
|
|
15
15
|
/// @since 0.1.0
|
|
@@ -17,17 +17,17 @@ $button-border-radius: utils.em(3px);
|
|
|
17
17
|
@include typography.font-size(0);
|
|
18
18
|
appearance: none;
|
|
19
19
|
background: colours.$btn-primary;
|
|
20
|
-
border: utils.
|
|
20
|
+
border: utils.rem(1px) solid colours.$btn-primary-text;
|
|
21
21
|
border-radius: $button-border-radius;
|
|
22
|
-
box-shadow: 0 utils.
|
|
22
|
+
box-shadow: 0 utils.rem(3px) utils.rem(6px) 0 $button-shadow-colour;
|
|
23
23
|
color: colours.$btn-primary-text;
|
|
24
24
|
cursor: pointer;
|
|
25
25
|
display: inline-block;
|
|
26
26
|
font-family: inherit;
|
|
27
|
-
margin: utils.
|
|
27
|
+
margin: utils.rem(
|
|
28
28
|
0 spacing.$small spacing.$small -4px
|
|
29
29
|
); // Negative left margin to combat inline-block gaps
|
|
30
|
-
padding: utils.
|
|
30
|
+
padding: utils.rem(spacing.$small spacing.$medium);
|
|
31
31
|
position: relative;
|
|
32
32
|
text-align: left;
|
|
33
33
|
text-decoration: none !important;
|
|
@@ -47,7 +47,7 @@ $button-border-radius: utils.em(3px);
|
|
|
47
47
|
|
|
48
48
|
&:hover {
|
|
49
49
|
background: colours.$btn-primary-hover;
|
|
50
|
-
box-shadow: 0 utils.
|
|
50
|
+
box-shadow: 0 utils.rem(5px) utils.rem(8px) 0 $button-shadow-colour;
|
|
51
51
|
color: colours.$btn-primary-text;
|
|
52
52
|
text-decoration: none;
|
|
53
53
|
}
|
|
@@ -62,7 +62,7 @@ $button-border-radius: utils.em(3px);
|
|
|
62
62
|
&:active {
|
|
63
63
|
background: colours.$btn-primary-hover;
|
|
64
64
|
text-decoration: none;
|
|
65
|
-
top: utils.
|
|
65
|
+
top: utils.rem(2px);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
// Disabled button styles
|
|
@@ -84,7 +84,7 @@ $button-border-radius: utils.em(3px);
|
|
|
84
84
|
/// @since 0.2.0
|
|
85
85
|
.btn--cta {
|
|
86
86
|
background: colours.$btn-cta;
|
|
87
|
-
border: utils.
|
|
87
|
+
border: utils.rem(1px) solid colours.$btn-cta-border;
|
|
88
88
|
box-shadow: 4px 4px 8px $button-shadow-colour;
|
|
89
89
|
color: colours.$btn-cta-text;
|
|
90
90
|
|
|
@@ -111,7 +111,7 @@ $button-border-radius: utils.em(3px);
|
|
|
111
111
|
/// @since 0.2.0
|
|
112
112
|
.btn--secondary {
|
|
113
113
|
background: colours.$btn-secondary;
|
|
114
|
-
border: utils.
|
|
114
|
+
border: utils.rem(1px) solid colours.$btn-secondary-text;
|
|
115
115
|
color: colours.$btn-secondary-text;
|
|
116
116
|
|
|
117
117
|
&:visited {
|
|
@@ -136,7 +136,7 @@ $button-border-radius: utils.em(3px);
|
|
|
136
136
|
/// @since 0.2.0
|
|
137
137
|
.btn--inverse {
|
|
138
138
|
background: colours.$btn-inverse;
|
|
139
|
-
border: utils.
|
|
139
|
+
border: utils.rem(1px) solid colours.$btn-inverse-text;
|
|
140
140
|
color: colours.$btn-inverse-text !important;
|
|
141
141
|
|
|
142
142
|
&:visited {
|