@sps-woodland/cards 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/cards](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/cards#readme)
+
+SPS Woodland Design System card, insight card, and scrollable container components

package/lib/card/Card.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const CardExamples: ComponentManifestEntry;

package/lib/card/card/Card.css.d.ts

@@ -0,0 +1 @@
+export declare const card: string;

package/lib/card/card/Card.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function Card({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/card/card-footer/CardFooter.css.d.ts

@@ -0,0 +1 @@
+export declare const cardFooter: string;

package/lib/card/card-footer/CardFooter.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function CardFooter({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/card/card-header/CardHeader.css.d.ts

@@ -0,0 +1 @@
+export declare const cardHeader: string;

package/lib/card/card-header/CardHeader.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function CardHeader({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/card/card-title/CardTitle.css.d.ts

@@ -0,0 +1 @@
+export declare const cardTitle: string;

package/lib/card/card-title/CardTitle.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+export declare function CardTitle({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/index.cjs.js

@@ -0,0 +1,539 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@sps-woodland/core"),w=require("react"),s=require("@spscommerce/utils");function B(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=B(w);var q="_1gxcp3j0";function p({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(q,n),...i},t)}a.Metadata.set(p,{name:"CardFooter"});var E="mxozo50";function g({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(E,n),...i},t)}a.Metadata.set(g,{name:"CardHeader"});var N="jyyttb0";function C({children:t,className:n,...i}){const[r,[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(N,n),...i},r,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var _="_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(_,n),...i},t)}a.Metadata.set(b,{name:"CardTitle"});const T=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:r,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[v,S,k]=(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")},r?e.createElement("i",{className:`sps-icon sps-icon-${r}`,...o("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${T[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,v),e.createElement("div",null,S),e.createElement("div",null,k)),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="_7b9vus0";function x({children:t,className:n,maxHeight:i,style:r,...l}){return e.createElement("div",{className:a.cl(F,n),style:{...r,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:s.code`
+            import { Card } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <Card>
+                  <p>Business is changing... changing at the speed of information.</p>
+                </Card>
+              );
+            }
+          `},sections:{react:s.code`
+            import { Card } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <Card>
+                  <section>
+                    <h3>Description</h3>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+                      ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                      aliquip ex ea commodo consequat. Duis aute irure dolor in
+                      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                      culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                  </section>
+                  <section>
+                    <h3>Usage Guidelines</h3>
+                    <p>
+                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                      accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                      quae ab illo inventore veritatis et quasi architecto beatae vitae
+                      dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+                      aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+                      eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+                      qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+                      sed quia non numquam eius modi tempora incidunt ut labore et dolore
+                      magnam aliquam quaerat voluptatem.
+                    </p>
+                  </section>
+                </Card>
+              );
+            }
+          `},nestedSections:{react:s.code`
+            import { Card } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <Card>
+                  <section>
+                    <p>Section 1</p>
+                  </section>
+                  <section>
+                    <section>
+                      <p>Section 2</p>
+                    </section>
+                    <section>
+                      <p>Section 3</p>
+                    </section>
+                    <section>
+                      <p>Section 4</p>
+                    </section>
+                  </section>
+                </Card>
+              );
+            }
+          `}}},headers:{label:"Card + Header",description:()=>e.createElement("p",null,"Headers can be attached to a Card to display a title (that describes the content inside the card) or add actions (buttons or links) that relate directly to the content inside of the card. Content is restricted to the left side (for titles) and right side (for actions) of the Header."),examples:{title:{react:s.code`
+            import { SpsButton } from "@spscommerce/ds-react";
+            import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
+            import { Icon } from "@sps-woodland/core";
+            import { sprinkles } from "@sps-woodland/tokens";
+            function Component() {
+              return (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>
+                      <Icon icon="lightbulb" className={sprinkles({ mr: "xs" })} />
+                      Jabberwocky
+                    </CardTitle>
+                    <div>
+                      <SpsButton kind="link" className={sprinkles({ mr: "sm" })}>
+                        Redefine
+                      </SpsButton>
+                      <SpsButton kind="icon" icon="printer" />
+                      <SpsButton kind="icon" icon="download-cloud" />
+                      <SpsButton className={sprinkles({ ml: "sm" })}>Innovate</SpsButton>
+                    </div>
+                  </CardHeader>
+                  <p>
+                    Whoever adapts first wins. In order to compete, we innovate; in order
+                    to innovate, we redefine; and how do we redefine? With a new
+                    definition!
+                  </p>
+                </Card>
+              );
+            }
+          `}}},footers:{label:"Card + Footer",description:()=>e.createElement("p",null,"Footers can be attached to a Card to add secondary actions (buttons or links) that relate directly to the content inside of it, or other types of general content that may be applicable. Content can be placed in the middle or either side of the Footer."),examples:{basicFooter:{react:s.code`
+            import { SpsButton } from "@spscommerce/ds-react";
+            import { Card, CardFooter } from "@sps-woodland/cards";
+            import { Box } from "@sps-woodland/core";
+            function Component() {
+              return (
+                <Card>
+                  <p>
+                    Imagine a new way to do business that's faster than a cheetah. More
+                    powerful than... another cheetah! A way of doing business more
+                    magnificent than... a fish! Or a whale!
+                  </p>
+                  <CardFooter>
+                    <Box marginLeft="sm">
+                      <SpsButton kind="link">Manage Settings</SpsButton>
+                    </Box>
+                    <Box marginX="auto">
+                      Whales are not fish, but mammals like a cheetah.
+                    </Box>
+                    <SpsButton>Buy This</SpsButton>
+                  </CardFooter>
+                </Card>
+              );
+            }
+          `}}},tabbed:{label:"Card + Tabs",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use Tabs to combine multiple cards with unique but related content. Tabs can include optional details such as icons or tags."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabsOnly:{react:s.code`
+            import { Card } from "@sps-woodland/cards";
+            import { Box, Icon } from "@sps-woodland/core";
+            import { Tabs } from "@sps-woodland/tabs";
+            import { SpsTag } from "@spscommerce/ds-react";
+            import { Item } from "@react-stately/collections";
+            function Component() {
+              return (
+                <Card>
+                  <Tabs>
+                    <Item key="tab1" title="Trust">
+                      <p>
+                        So, what is it? What is it exactly that's going to revolutionize
+                        the way we do business?
+                      </p>
+                    </Item>
+                    <Item
+                      key="tab2"
+                      title={
+                        <>
+                          <Box mr="xs">Reliability</Box>
+                          <SpsTag kind="key">00</SpsTag>
+                        </>
+                      }
+                    >
+                      <p>Card with tabs, pane 2.</p>
+                    </Item>
+                    <Item
+                      key="tab3"
+                      title={
+                        <>
+                          <Icon icon="heart"/>
+                          <Box ml="xs">The Future</Box>
+                        </>
+                      }
+                    >
+                      <p>Card with tabs, pane 3.</p>
+                    </Item>
+                    <Item
+                      key="tab4"
+                      title={
+                        <>
+                          <Icon icon="heart"/>
+                          <Box mx="xs">Bold</Box>
+                          <SpsTag kind="key">00</SpsTag>
+                        </>
+                      }
+                    >
+                      <p>Card with tabs, pane 4.</p>
+                    </Item>
+                  </Tabs>
+                </Card>
+              );
+            }
+          `},activeTabInput:{react:s.code`
+            import { Card } from "@sps-woodland/cards";
+            import { Tabs } from "@sps-woodland/tabs";
+            import { Item } from "@react-stately/collections";
+            function Component() {
+              return (
+                <Card>
+                  <Tabs disabledKeys={["tab2", "tab3"]}>
+                    <Item key="tab1" title="Tab 1">
+                      <p>Card with disabled tabs, pane 1.</p>
+                    </Item>
+                    <Item key="tab2" title="Tab 2">
+                      <p>Card with disabled tabs, pane 2.</p>
+                    </Item>
+                    <Item key="tab3" title="Tab 3">
+                      <p>Card with disabled tabs, pane 3.</p>
+                    </Item>
+                  </Tabs>
+                </Card>
+              );
+            }
+          `}}},everything:{label:"Card + Header + Footer + Tabs",description:()=>e.createElement("p",null,"Headers, Footers, and Tabs can be attached to Cards in any combination."),examples:{everything:{react:s.code`
+            import { SpsButton, SpsTag } from "@spscommerce/ds-react";
+            import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
+            import { Box, Icon } from "@sps-woodland/core";
+            import { Tabs } from "@sps-woodland/tabs";
+            import { sp } from "@sps-woodland/tokens";
+            import { Item } from "@react-stately/collections";
+            function Component() {
+              return (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>
+                      <Icon icon="status-ok" />
+                      <Box ml="xs">Panel With Header</Box>
+                    </CardTitle>
+                    <div>
+                      <SpsButton className={sp({ mr: "sm" })} kind="link">
+                        Redefine
+                      </SpsButton>
+                      <SpsButton kind="icon" icon="printer" />
+                      <SpsButton kind="icon" icon="download-cloud" />
+                      <SpsButton className={sp({ ml: "sm" })}>Innovate</SpsButton>
+                    </div>
+                  </CardHeader>
+                  <Tabs>
+                    <Item key="tab1" title="Trust">
+                      <p>Simple... it's Jabberwocky.</p>
+                      <p>The game is changing right now.</p>
+                      <p>Coming in 2012.</p>
+                    </Item>
+                    <Item
+                      key="tab2"
+                      title={
+                        <>
+                          <Box mr="xs">Reliability</Box>
+                          <SpsTag kind="key">00</SpsTag>
+                        </>
+                      }
+                    >
+                      <p>Card with tabs, pane 2.</p>
+                    </Item>
+                    <Item
+                      key="tab3"
+                      title={
+                        <>
+                          <Icon icon="heart"/>
+                          <Box ml="xs">The Future</Box>
+                        </>
+                      }
+                    >
+                      <p>Card with tabs, pane 3.</p>
+                    </Item>
+                    <Item
+                      key="tab4"
+                      title={
+                        <>
+                          <Icon icon="heart"/>
+                          <Box mx="xs">Bold</Box>
+                          <SpsTag kind="key">00</SpsTag>
+                        </>
+                      }
+                    >
+                      <p>Card with tabs, pane 4.</p>
+                    </Item>
+                  </Tabs>
+                  <CardFooter>
+                    <Box ml="auto">
+                      <SpsButton className={sp({ mr: "sm" })} kind="link">
+                        Redefine
+                      </SpsButton>
+                      <SpsButton kind="icon" icon="printer" />
+                      <SpsButton kind="icon" icon="download-cloud" />
+                      <SpsButton className={sp({ ml: "sm" })}>Innovate</SpsButton>
+                    </Box>
+                  </CardFooter>
+                </Card>
+              );
+            }
+          `}}}}},H={components:[I,f],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:s.code`
+            import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <InsightCardSet>
+                  <InsightCard
+                      kind="general"
+                      metric="1234"
+                      title="Insight Card Title"
+                  />
+                  <InsightCard
+                      kind="processing"
+                      metric="1234"
+                      title="Insight Card Title"
+                  />
+                  <InsightCard
+                      kind="success"
+                      metric="1234"
+                      title="Insight Card Title"
+                  />
+                  <InsightCard
+                      kind="warning"
+                      metric="1234"
+                      title="Insight Card Title"
+                  />
+                  <InsightCard
+                      kind="error"
+                      metric="1234"
+                      title="Insight Card Title"
+                  />
+                </InsightCardSet>
+              );
+            }
+          `}}},details:{label:"With Details",examples:{details:{react:s.code`
+            import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
+            import { Box } from "@sps-woodland/core";
+            function Component() {
+              return (
+                <InsightCardSet>
+                  <InsightCard kind="general" metric="1234" title="Insight Card Title">
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard
+                    kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                  >
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard kind="success" metric="1234" title="Insight Card Title">
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard kind="warning" metric="1234" title="Insight Card Title">
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard kind="error" metric="1234" title="Insight Card Title">
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard kind="success" metric="1234" title="Insight Card Title">
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard kind="error" metric="1234" title="Insight Card Title">
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                </InsightCardSet>
+              );
+            }
+          `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:s.code`
+            import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <InsightCardSet>
+                  <InsightCard
+                    kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={250}
+                    totalPartners={250}
+                  />
+                  <InsightCard
+                    kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={122}
+                    totalPartners={250}
+                  />
+                  <InsightCard
+                    kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={207}
+                    totalPartners={250}
+                  />
+                  <InsightCard
+                    kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={12}
+                    totalPartners={250}
+                  />
+                  <InsightCard
+                    kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={94}
+                    totalPartners={250}
+                  />
+                </InsightCardSet>
+              );
+            }
+          `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:s.code`
+            import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <InsightCardSet>
+                  <InsightCard
+                    kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    icon="user"
+                  />
+                  <InsightCard
+                    kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    icon="asterisk"
+                  />
+                  <InsightCard
+                    kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    icon="dollar-sign"
+                  />
+                  <InsightCard
+                    kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    icon="folder-open"
+                  />
+                  <InsightCard
+                    kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    icon="ban"
+                  />
+                </InsightCardSet>
+              );
+            }
+          `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:s.code`
+            import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <InsightCardSet>
+                  <InsightCard
+                    kind="general"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={100}
+                    totalPartners={200}
+                    horizontal
+                  >
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard
+                    kind="processing"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={100}
+                    totalPartners={200}
+                    horizontal
+                  />
+                  <InsightCard
+                    kind="success"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={100}
+                    totalPartners={200}
+                    horizontal
+                  >
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                  <InsightCard
+                    kind="warning"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={100}
+                    totalPartners={200}
+                    horizontal
+                  />
+                  <InsightCard
+                    kind="error"
+                    metric="1234"
+                    title="Insight Card Title"
+                    partnerCount={100}
+                    totalPartners={200}
+                    horizontal
+                  >
+                    <Box inline color="grey-dark" fw="bold">Detail:</Box> 792 units
+                  </InsightCard>
+                </InsightCardSet>
+              );
+            }
+          `}}}}},D={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:s.code`
+            import { Card, ScrollableContainer } from "@sps-woodland/cards";
+            function Component() {
+              return (
+                <Card>
+                  <ScrollableContainer maxHeight="6.25rem">
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit
+                      amet molestie metus. Phasellus dignissim interdum arcu. Sed in nunc id
+                      sapien porta mollis eleifend nec mauris. Nulla molestie pulvinar velit
+                      eget fringilla. Pellentesque habitant morbi tristique senectus et
+                      netus et malesuada fames ac turpis egestas. Nam eu sem ut neque
+                      condimentum tempor. Integer bibendum in velit at consectetur. Nunc ut
+                      velit ac magna sodales tempor. Ut tempor rhoncus mi, eget feugiat nisi
+                      finibus at. Pellentesque habitant morbi tristique senectus et netus et
+                      malesuada fames ac turpis egestas. Vestibulum nunc ipsum, elementum
+                      consectetur urna a, sodales pellentesque nibh. Nullam in dui dolor.
+                      Vivamus sapien enim, tristique accumsan finibus nec, fringilla eget
+                      tellus. Duis sed pulvinar ipsum. Donec convallis aliquet dui, nec
+                      ullamcorper nulla tincidunt ac. Fusce tempus neque sit amet libero
+                      vestibulum maximus. Praesent id dui sed diam scelerisque pretium id
+                      vitae ante. Sed ullamcorper ligula quis mi vehicula, in interdum purus
+                      suscipit. Pellentesque venenatis velit nunc, quis tincidunt ligula
+                      egestas id. Praesent sollicitudin et mauris et auctor. Nullam diam
+                      erat, tincidunt at odio non, tincidunt laoreet quam. In consequat
+                      pulvinar sapien vel varius. Suspendisse potenti. Aenean pharetra felis
+                      sit amet tempus consequat. Donec eu molestie mauris. Nunc scelerisque
+                      ex id vehicula semper. Nunc eu interdum ante. Etiam in metus ante.
+                      Nulla ac turpis vel sem fermentum mattis. Nam elit mi, pretium a
+                      tristique vitae, vestibulum id tellus. In vitae nisl lectus. Sed
+                      fringilla eget velit quis aliquet. Vestibulum euismod, leo ut egestas
+                      dictum, mi quam euismod velit, nec iaculis elit mi a orci. Duis
+                      volutpat purus lacus. Ut sit amet semper ipsum. Sed aliquam, quam ac
+                      placerat facilisis, nulla odio vulputate erat, id condimentum sem arcu
+                      vel turpis. Fusce finibus tortor ac viverra semper. Pellentesque
+                      convallis mi sed metus finibus molestie. Duis vehicula dolor consequat
+                      placerat sollicitudin. Phasellus sed sagittis ligula, in molestie
+                      velit. In scelerisque maximus metus, ac convallis nisi dignissim non.
+                    </p>
+                  </ScrollableContainer>
+                </Card>
+              );
+            }
+          `},components:{react:s.code`
+            import { Card, ScrollableContainer } from "@sps-woodland/cards";
+            import { SpsClickableTag } from "@spscommerce/ds-react";
+            function Component() {
+              // generate a long list we can map over to create a ton of tags
+              // in order to show a scrollable container with tags in it
+              const tagNames = (new Array(150)).fill(0).map((_, index) => \`tagName \${index}\`);
+              return (
+                <Card>
+                  <ScrollableContainer maxHeight="8.5rem">
+                    {tagNames.map((name) => {
+                      return (
+                        <SpsClickableTag key={name} className="mt-xs ml-xs">
+                          {name}
+                        </SpsClickableTag>
+                      );
+                    })}
+                  </ScrollableContainer>
+                </Card>
+              );
+            }
+          `}}}}},M={Cards:P,"Insight Cards":H,"Scrollable Container":D};exports.Card=C;exports.CardFooter=p;exports.CardHeader=g;exports.CardTitle=b;exports.InsightCard=I;exports.InsightCardIcons=T;exports.InsightCardSet=f;exports.MANIFEST=M;exports.ScrollableContainer=x;

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./card/card/Card";
+export * from "./card/card-footer/CardFooter";
+export * from "./card/card-header/CardHeader";
+export * from "./card/card-title/CardTitle";
+export * from "./insight-card/InsightCard";
+export * from "./insight-card/InsightCardSet";
+export * from "./scrollable-container/ScrollableContainer";
+export * from "./manifest";