@sps-woodland/buttons 8.53.21 → 8.53.23
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/lib/index.js +2 -2
- package/lib/index.umd.cjs +3 -3
- package/lib/style.css +1 -1
- package/package.json +3 -3
package/lib/index.js
CHANGED
|
@@ -344,7 +344,7 @@ const i = {
|
|
|
344
344
|
return (
|
|
345
345
|
<>
|
|
346
346
|
<Button className={sprinkles({ mr: "sm" })} kind="link">Default</Button>
|
|
347
|
-
<Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link">Delete</Button>
|
|
347
|
+
<Button className={sprinkles({ mr: "sm", color: { default: "red-medium", hover: "red-dark" } })} kind="link">Delete</Button>
|
|
348
348
|
<Button className={sprinkles({ mr: "sm" })} kind="link" disabled>Disabled</Button>
|
|
349
349
|
</>
|
|
350
350
|
)
|
|
@@ -361,7 +361,7 @@ const i = {
|
|
|
361
361
|
return (
|
|
362
362
|
<>
|
|
363
363
|
<Button className={sprinkles({ mr: "sm" })} kind="link" icon="download-cloud">Default</Button>
|
|
364
|
-
<Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link" icon="trash">Delete</Button>
|
|
364
|
+
<Button className={sprinkles({ mr: "sm", color: { default: "red-medium", hover: "red-dark" } })} kind="link" icon="trash">Delete</Button>
|
|
365
365
|
<Button className={sprinkles({ mr: "sm" })} kind="link" icon="gear" disabled>Disabled</Button>
|
|
366
366
|
</>
|
|
367
367
|
)
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@sps-woodland/core/button"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/button","react","@spscommerce/utils"],s):(e=typeof globalThis<"u"?globalThis:e||self,s(e.Buttons={},e.spsWoodlandCoreButton,e.react,e.spscommerceUtils))})(this,(function(e,s,a,n){"use strict";function p(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const
|
|
1
|
+
(function(e,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@sps-woodland/core/button"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/button","react","@spscommerce/utils"],s):(e=typeof globalThis<"u"?globalThis:e||self,s(e.Buttons={},e.spsWoodlandCoreButton,e.react,e.spscommerceUtils))})(this,(function(e,s,a,n){"use strict";function p(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>t[r]})}}return i.default=t,Object.freeze(i)}const o=p(a),c={Buttons:{components:[s.Button],description:()=>o.createElement(o.Fragment,null,o.createElement("div",{className:"sps-body-14"},"Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."),o.createElement("br",null),o.createElement("h5",null,"Variants"),o.createElement("div",{className:"sps-body-14"},o.createElement("span",{className:"sps-text-semibold"},"Default: "),"For tertiary actions or actions of lower importance on a page."),o.createElement("div",{className:"sps-body-14"},o.createElement("span",{className:"sps-text-semibold"},"Key: "),"For primary or important actions on a page."),o.createElement("div",{className:"sps-body-14"},o.createElement("span",{className:"sps-text-semibold"},"Confirm: "),"For the main call to action on a page. There should only be one Confirm button per screen."),o.createElement("div",{className:"sps-body-14"},o.createElement("span",{className:"sps-text-semibold"},"Delete: "),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),o.createElement("div",{className:"sps-body-14"},o.createElement("span",{className:"sps-text-semibold"},"Disabled: "),"For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it’s disabled."),o.createElement("div",{className:"sps-body-14"},o.createElement("span",{className:"sps-text-semibold"},"With an Icon: "),"For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),examples:{basic:{label:"Basic Buttons",description:({NavigateTo:t})=>o.createElement(o.Fragment,null,o.createElement("p",null,"The most common type of button that can be used in most cases. Example: Basic Buttons in a ",o.createElement(t,{to:"modals"},"Modal"),".")),examples:{withoutIcons:{description:"Without Icons",react:n.code`
|
|
2
2
|
import { Button } from "@sps-woodland/buttons";
|
|
3
3
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
4
4
|
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
return (
|
|
263
263
|
<>
|
|
264
264
|
<Button className={sprinkles({ mr: "sm" })} kind="link">Default</Button>
|
|
265
|
-
<Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link">Delete</Button>
|
|
265
|
+
<Button className={sprinkles({ mr: "sm", color: { default: "red-medium", hover: "red-dark" } })} kind="link">Delete</Button>
|
|
266
266
|
<Button className={sprinkles({ mr: "sm" })} kind="link" disabled>Disabled</Button>
|
|
267
267
|
</>
|
|
268
268
|
)
|
|
@@ -275,7 +275,7 @@
|
|
|
275
275
|
return (
|
|
276
276
|
<>
|
|
277
277
|
<Button className={sprinkles({ mr: "sm" })} kind="link" icon="download-cloud">Default</Button>
|
|
278
|
-
<Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link" icon="trash">Delete</Button>
|
|
278
|
+
<Button className={sprinkles({ mr: "sm", color: { default: "red-medium", hover: "red-dark" } })} kind="link" icon="trash">Delete</Button>
|
|
279
279
|
<Button className={sprinkles({ mr: "sm" })} kind="link" icon="gear" disabled>Disabled</Button>
|
|
280
280
|
</>
|
|
281
281
|
)
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq0{border-width:.0625rem;border-style:solid;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:.75rem;font-weight:600;line-height:.875rem;padding:0;position:relative;vertical-align:middle}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq3{background:#e9e9ea;border-color:#d2d4d4;color:#4b5356}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq3:hover{background:#d2d4d4}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq4{background:none transparent;border:0;color:#007db8}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq4:hover{background:none transparent;color:#09638d;text-decoration:none}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq5{background:#007db8;border-color:#09638d;color:#fff}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq5:hover{background:#09638d}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq6{background:#de002e;border-color:#a30d2d;color:#fff}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq6:hover{background:#a30d2d}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq7{background:#4b5356;border-color:#1f282c;color:#fff}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq7:hover{background:#1f282c}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq8{background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq8:hover{background-color:#d2d4d4;border-color:#d2d4d4}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq9{color:transparent!important;cursor:not-allowed}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqb{background:#e9e9ea;border-color:#d2d4d4}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqb:hover,.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqc:hover{background:#e9e9ea}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqd:hover{background:#007db8}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqe:hover{background:#de002e}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqf:hover{background:#4b5356}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqg{background:#fff!important;border-color:#d2d4d4!important;color:#717779!important;cursor:not-allowed}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqg:hover{background:#fff}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqh{background:none transparent!important}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqi{background:none transparent;border:0 none;color:inherit;display:inline-flex;align-items:center;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;text-decoration:none;padding:.5rem 1rem}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqi:hover{text-decoration:none}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqj{cursor:not-allowed!important}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieql{padding:.5rem}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqq{padding-top:.5rem;padding-bottom:.5rem;padding-right:0;padding-left:0}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqr{cursor:not-allowed!important}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqt{background:none transparent;border:0 none;color:inherit;cursor:inherit;display:inline-flex;align-items:center;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:.5rem 1rem;text-decoration:none}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqt:hover{text-decoration:none;color:inherit}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqiequ{cursor:not-allowed}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieqw{padding:.5rem}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq11{padding-top:.5rem;padding-bottom:.5rem;padding-right:0;padding-left:0}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq12:not(:last-child){margin-right:.5rem}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq13{left:50%;margin:-.875rem -.4375rem;position:absolute}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq14{cursor:not-allowed}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq15{display:none}.pkg_sps-woodland_core__family_buttons__version_8_53_23__hash_1flqieq13>i{border-width:.125rem;height:.875rem;width:.875rem;display:block}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/buttons",
|
|
3
3
|
"description": "SPS Woodland Design System button components",
|
|
4
|
-
"version": "8.53.
|
|
4
|
+
"version": "8.53.23",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/buttons",
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
30
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/core": "8.53.
|
|
32
|
+
"@sps-woodland/core": "8.53.23"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@spscommerce/utils": "9.1.1",
|
|
36
36
|
"react": "16.14.0",
|
|
37
37
|
"react-dom": "16.14.0",
|
|
38
|
-
"@sps-woodland/core": "8.53.
|
|
38
|
+
"@sps-woodland/core": "8.53.23"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|