@sps-woodland/cards
Advanced tools
Comparing version 8.20.17 to 8.21.0
@@ -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_17__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_17__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_17__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_17__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_17__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_21_0__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_21_0__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_21_0__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_21_0__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_21_0__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_17__hash_1gxcp3j0"; | ||
var P = "pkg_sps-woodland_cards__version_8_21_0__hash_1gxcp3j0"; | ||
function g({ | ||
@@ -13,3 +13,3 @@ children: t, | ||
s.set(g, { name: "CardFooter" }); | ||
var H = "pkg_sps-woodland_cards__version_8_20_17__hash_mxozo50"; | ||
var H = "pkg_sps-woodland_cards__version_8_21_0__hash_mxozo50"; | ||
function C({ | ||
@@ -23,3 +23,3 @@ children: t, | ||
s.set(C, { name: "CardHeader" }); | ||
var D = "pkg_sps-woodland_cards__version_8_20_17__hash_jyyttb0"; | ||
var D = "pkg_sps-woodland_cards__version_8_21_0__hash_jyyttb0"; | ||
function x({ | ||
@@ -45,3 +45,3 @@ children: t, | ||
s.set(x, { name: "Card" }); | ||
var z = "pkg_sps-woodland_cards__version_8_20_17__hash_1f11ubh0"; | ||
var z = "pkg_sps-woodland_cards__version_8_21_0__hash_1f11ubh0"; | ||
function k({ | ||
@@ -125,3 +125,3 @@ children: t, | ||
s.set(y, { name: "InsightCardSet" }); | ||
var A = "pkg_sps-woodland_cards__version_8_20_17__hash_7b9vus0"; | ||
var A = "pkg_sps-woodland_cards__version_8_21_0__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.17", | ||
"version": "8.21.0", | ||
"author": "SPS Commerce", | ||
@@ -32,4 +32,4 @@ "license": "UNLICENSED", | ||
"react-dom": "^16.14.0", | ||
"@sps-woodland/core": "8.20.17", | ||
"@sps-woodland/tokens": "8.20.17" | ||
"@sps-woodland/core": "8.21.0", | ||
"@sps-woodland/tokens": "8.21.0" | ||
}, | ||
@@ -42,5 +42,5 @@ "devDependencies": { | ||
"react-dom": "^16.14.0", | ||
"@sps-woodland/tabs": "8.20.17", | ||
"@sps-woodland/tokens": "8.20.17", | ||
"@sps-woodland/core": "8.20.17" | ||
"@sps-woodland/core": "8.21.0", | ||
"@sps-woodland/tabs": "8.21.0", | ||
"@sps-woodland/tokens": "8.21.0" | ||
}, | ||
@@ -47,0 +47,0 @@ "scripts": { |
Sorry, the diff of this file is not supported yet
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
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
70984