Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@sps-woodland/cards
Advanced tools
@sps-woodland/cards - npm Package Compare versions
Comparing version 8.20.6 to 8.20.7
@@ -1,2 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@sps-woodland/core"),B=require("react"),r=require("@spscommerce/utils");function _(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,s.get?s:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=_(B);var S="pkg_sps-woodland_cards__version_8_20_6__hash_1gxcp3j0";function p({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(S,n),...i},t)}a.Metadata.set(p,{name:"CardFooter"});var q="pkg_sps-woodland_cards__version_8_20_6__hash_mxozo50";function g({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(q,n),...i},t)}a.Metadata.set(g,{name:"CardHeader"});var E="pkg_sps-woodland_cards__version_8_20_6__hash_jyyttb0";function C({children:t,className:n,...i}){const[s,[l],m,u]=a.selectChildren(t,[{type:g},{custom:c=>a.Metadata.isWoodlandComponent(c)&&a.Metadata.get(c).name==="Tabs"},{type:p}]),d=a.useChildTestIdAttrBuilder(i);return e.createElement("div",{className:a.cl(E,n),...i},s,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var N="pkg_sps-woodland_cards__version_8_20_6__hash_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(N,n),...i},t)}a.Metadata.set(b,{name:"CardTitle"});const k=Object.freeze({general:"status-new",success:"status-ok",error:"status-error",warning:"status-warning",processing:"status-in-process"});function I({children:t,className:n,horizontal:i=!1,icon:s,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[w,T,v]=(d?h("design-system:insightTile.partnerCount",{count:d,total:c}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:a.cl("sps-insight-tile",`sps-insight-tile--${l}`,i&&"sps-insight-tile--horizontal",t&&"sps-insight-tile--has-detail",n),...y},e.createElement("div",{className:"sps-insight-tile__body",...o("body")},s?e.createElement("i",{className:`sps-icon sps-icon-${s}`,...o("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${k[l]}`,...o("icon")}),u&&e.createElement("div",{className:"sps-insight-tile__metric-count",...o("metric")},u),m&&e.createElement("div",{className:"sps-insight-tile__description",...o("description")},e.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"},...o("title")},m),e.createElement("div",{className:"sps-insight-tile__detail",...o("detail")},t))),d&&e.createElement("div",{className:"sps-insight-tile__partner-count",...o("partner-count")},d===c?e.createElement("div",null,h("design-system:insightTile.all")):e.createElement(e.Fragment,null,e.createElement("div",null,w),e.createElement("div",null,T),e.createElement("div",null,v)),e.createElement("div",{className:"sps-insight-tile__partners-text"},h("design-system:insightTile.partners")))))}a.Metadata.set(I,{name:"InsightCard",props:{horizontal:{type:"boolean",default:"false"},icon:"IconName",kind:{type:"InsightCardKind",default:'"general"'},title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"}});function f({children:t,...n}){return e.createElement("div",{className:"insight-tile-wrapper",...n},t)}a.Metadata.set(f,{name:"InsightCardSet"});var F="pkg_sps-woodland_cards__version_8_20_6__hash_7b9vus0";function x({children:t,className:n,maxHeight:i,style:s,...l}){return e.createElement("div",{className:a.cl(F,n),style:{...s,maxHeight:i},...l},t)}a.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const P={description:()=>e.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[C,p,g,b],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:n})=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Sizing and Layout"),e.createElement("p",null,"All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",e.createElement(t,{to:"/style-and-layout/grid"},"Woodland Grid")," and"," ",e.createElement(t,{to:"/style-and-layout/page-types"},"Page Layouts")," sections for more guidance on appropriate usage."),e.createElement("p",null,"The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),e.createElement("h5",null,"Text Content"),e.createElement("p",null,"The only text content that can exist outside of a Card is the"," ",e.createElement(n,{to:"page-title"},"Page Title")," component."),e.createElement("p",null,"All other content should exist inside of a Card and should adhere to the Woodland Design System ",e.createElement(t,{to:"/style-and-layout/typography"},"Typography")," rules."),e.createElement("h5",null,"Nesting"),e.createElement("p",null,"Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))},basic:{label:"Basic card",description:()=>e.createElement("p",null,"Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),examples:{basic:{react:r.code` | ||
| "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@sps-woodland/core"),B=require("react"),r=require("@spscommerce/utils");function _(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,s.get?s:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=_(B);var S="pkg_sps-woodland_cards__version_8_20_7__hash_1gxcp3j0";function p({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(S,n),...i},t)}a.Metadata.set(p,{name:"CardFooter"});var q="pkg_sps-woodland_cards__version_8_20_7__hash_mxozo50";function g({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(q,n),...i},t)}a.Metadata.set(g,{name:"CardHeader"});var E="pkg_sps-woodland_cards__version_8_20_7__hash_jyyttb0";function C({children:t,className:n,...i}){const[s,[l],m,u]=a.selectChildren(t,[{type:g},{custom:c=>a.Metadata.isWoodlandComponent(c)&&a.Metadata.get(c).name==="Tabs"},{type:p}]),d=a.useChildTestIdAttrBuilder(i);return e.createElement("div",{className:a.cl(E,n),...i},s,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var N="pkg_sps-woodland_cards__version_8_20_7__hash_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(N,n),...i},t)}a.Metadata.set(b,{name:"CardTitle"});const k=Object.freeze({general:"status-new",success:"status-ok",error:"status-error",warning:"status-warning",processing:"status-in-process"});function I({children:t,className:n,horizontal:i=!1,icon:s,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[w,T,v]=(d?h("design-system:insightTile.partnerCount",{count:d,total:c}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:a.cl("sps-insight-tile",`sps-insight-tile--${l}`,i&&"sps-insight-tile--horizontal",t&&"sps-insight-tile--has-detail",n),...y},e.createElement("div",{className:"sps-insight-tile__body",...o("body")},s?e.createElement("i",{className:`sps-icon sps-icon-${s}`,...o("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${k[l]}`,...o("icon")}),u&&e.createElement("div",{className:"sps-insight-tile__metric-count",...o("metric")},u),m&&e.createElement("div",{className:"sps-insight-tile__description",...o("description")},e.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"},...o("title")},m),e.createElement("div",{className:"sps-insight-tile__detail",...o("detail")},t))),d&&e.createElement("div",{className:"sps-insight-tile__partner-count",...o("partner-count")},d===c?e.createElement("div",null,h("design-system:insightTile.all")):e.createElement(e.Fragment,null,e.createElement("div",null,w),e.createElement("div",null,T),e.createElement("div",null,v)),e.createElement("div",{className:"sps-insight-tile__partners-text"},h("design-system:insightTile.partners")))))}a.Metadata.set(I,{name:"InsightCard",props:{horizontal:{type:"boolean",default:"false"},icon:"IconName",kind:{type:"InsightCardKind",default:'"general"'},title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"}});function f({children:t,...n}){return e.createElement("div",{className:"insight-tile-wrapper",...n},t)}a.Metadata.set(f,{name:"InsightCardSet"});var F="pkg_sps-woodland_cards__version_8_20_7__hash_7b9vus0";function x({children:t,className:n,maxHeight:i,style:s,...l}){return e.createElement("div",{className:a.cl(F,n),style:{...s,maxHeight:i},...l},t)}a.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const P={description:()=>e.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[C,p,g,b],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:n})=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Sizing and Layout"),e.createElement("p",null,"All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",e.createElement(t,{to:"/style-and-layout/grid"},"Woodland Grid")," and"," ",e.createElement(t,{to:"/style-and-layout/page-types"},"Page Layouts")," sections for more guidance on appropriate usage."),e.createElement("p",null,"The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),e.createElement("h5",null,"Text Content"),e.createElement("p",null,"The only text content that can exist outside of a Card is the"," ",e.createElement(n,{to:"page-title"},"Page Title")," component."),e.createElement("p",null,"All other content should exist inside of a Card and should adhere to the Woodland Design System ",e.createElement(t,{to:"/style-and-layout/typography"},"Typography")," rules."),e.createElement("h5",null,"Nesting"),e.createElement("p",null,"Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))},basic:{label:"Basic card",description:()=>e.createElement("p",null,"Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),examples:{basic:{react:r.code` | ||
| import { Card } from "@sps-woodland/cards"; | ||
@@ -3,0 +3,0 @@ function Component() { |
| import { Metadata as s, CapContent as I, cl as c, selectChildren as S, useChildTestIdAttrBuilder as f, addProps as E, Content as q, CapContentTitle as N, I18nContext as F } from "@sps-woodland/core"; | ||
| import * as e from "react"; | ||
| import { code as n } from "@spscommerce/utils"; | ||
| var P = "pkg_sps-woodland_cards__version_8_20_6__hash_1gxcp3j0"; | ||
| var P = "pkg_sps-woodland_cards__version_8_20_7__hash_1gxcp3j0"; | ||
| function g({ | ||
@@ -13,3 +13,3 @@ children: t, | ||
| s.set(g, { name: "CardFooter" }); | ||
| var H = "pkg_sps-woodland_cards__version_8_20_6__hash_mxozo50"; | ||
| var H = "pkg_sps-woodland_cards__version_8_20_7__hash_mxozo50"; | ||
| function C({ | ||
@@ -23,3 +23,3 @@ children: t, | ||
| s.set(C, { name: "CardHeader" }); | ||
| var D = "pkg_sps-woodland_cards__version_8_20_6__hash_jyyttb0"; | ||
| var D = "pkg_sps-woodland_cards__version_8_20_7__hash_jyyttb0"; | ||
| function x({ | ||
@@ -45,3 +45,3 @@ children: t, | ||
| s.set(x, { name: "Card" }); | ||
| var z = "pkg_sps-woodland_cards__version_8_20_6__hash_1f11ubh0"; | ||
| var z = "pkg_sps-woodland_cards__version_8_20_7__hash_1f11ubh0"; | ||
| function k({ | ||
@@ -125,3 +125,3 @@ children: t, | ||
| s.set(y, { name: "InsightCardSet" }); | ||
| var A = "pkg_sps-woodland_cards__version_8_20_6__hash_7b9vus0"; | ||
| var A = "pkg_sps-woodland_cards__version_8_20_7__hash_7b9vus0"; | ||
| function v({ | ||
@@ -128,0 +128,0 @@ children: t, |
| { | ||
| "name": "@sps-woodland/cards", | ||
| "description": "SPS Woodland Design System card, insight card, and scrollable container components", | ||
| "version": "8.20.6", | ||
| "version": "8.20.7", | ||
| "author": "SPS Commerce", | ||
@@ -32,4 +32,4 @@ "license": "UNLICENSED", | ||
| "react-dom": "^16.14.0", | ||
| "@sps-woodland/core": "8.20.6", | ||
| "@sps-woodland/tokens": "8.20.6" | ||
| "@sps-woodland/core": "8.20.7", | ||
| "@sps-woodland/tokens": "8.20.7" | ||
| }, | ||
@@ -42,5 +42,5 @@ "devDependencies": { | ||
| "react-dom": "^16.14.0", | ||
| "@sps-woodland/core": "8.20.6", | ||
| "@sps-woodland/tabs": "8.20.6", | ||
| "@sps-woodland/tokens": "8.20.6" | ||
| "@sps-woodland/core": "8.20.7", | ||
| "@sps-woodland/tabs": "8.20.7", | ||
| "@sps-woodland/tokens": "8.20.7" | ||
| }, | ||
@@ -47,0 +47,0 @@ "scripts": { |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No metric changes
No dependency changes