@pnx-mixtape/ids-shape 0.0.22 → 0.0.24

package/enums.ts

@@ -199,3 +199,18 @@ export enum FooterModifier {
   DARK = "dark",
   LIGHT = "light",
 }
+
+export enum PopoverPlacementModifier {
+  TOP = "top",
+  TOP_START = "top-start",
+  TOP_END = "top-end",
+  RIGHT = "right",
+  RIGHT_START = "right-start",
+  RIGHT_END = "right-end",
+  LEFT = "left",
+  LEFT_START = "left-start",
+  LEFT_END = "left-end",
+  BOTTOM = "bottom",
+  BOTTOM_START = "bottom-start",
+  BOTTOM_END = "bottom-end",
+}

package/index.ts

@@ -19,12 +19,28 @@ import {
   LoadingTypes,
   MastheadModifier,
   MediaAlignmentTypes,
+  PopoverPlacementModifier,
   SectionModifiers,
   SectionTypes,
   StepsModifier,
   TagTypes
 } from "./enums"
 
+/**
+ * Flag certain slots as accepting a collection of items, which should generally be ignored by the type system,
+ * as they are often passed as a string of HTML or HTMLElements.
+ *
+ * This is not ideal, but it is a pragmatic solution to allow for flexibility in content management without requiring
+ * strict typing on every piece of content.
+ */
+export type Collection = string | HTMLElement
+
+/**
+ * Flag certain slots as accepting WYSIWYG content, which is the same as Collection, but semantically indicates that
+ * the content is expected to be rich text, which may include HTML elements, rather than plain text or a simple string.
+ */
+export type WysiwygText = Collection
+
 /**
  * Base.
  */
@@ -72,11 +88,11 @@ export type Heading = {
 
 export type DefinitionListItem = {
   title: string
-  content: string | WysiwygText
+  content: WysiwygText
 }
 
 export type DefinitionList = {
-  items: DefinitionListItem[]
+  items: DefinitionListItem[] | Collection
   title?: Heading
 }
 
@@ -126,8 +142,6 @@ export type LinkedImage = {
 
 export type Logo = InlineSvg | Image
 
-export type WysiwygText = string[] | HTMLElement[] // just an example.
-
 /**
  * Forms
  */
@@ -208,7 +222,7 @@ export type FormItem = {
 
 export type Form = {
   action: string
-  items: FormItem[]
+  items: FormItem[] | Collection
   actions?: Button[]
   title?: string
   id?: string
@@ -226,7 +240,7 @@ export type SearchForm = {
 
 export type WayfindingBlock = {
   title?: Heading
-  content?: string | WysiwygText
+  content?: WysiwygText
   link?: Link | Button
 }
 
@@ -235,13 +249,13 @@ export type WayfindingBlock = {
  */
 
 export type Breadcrumbs = {
-  items: Link[] | string
+  items: Link[] | Collection
 }
 
 export type InPageNavigation = {
-  title?: Heading
+  title?: string | Heading
   levels?: HeadingTypes[]
-  items?: Link[]
+  items?: Link[] | Collection
 }
 
 export type PaginationItem = {
@@ -275,14 +289,14 @@ export type SideNavigation = Navigation & {
  */
 
 export type GridItem = {
-  item: string | HTMLElement
+  item: Collection
   container?: boolean
   modifiers?: GridModifiers[]
   as?: AsTypes
 }
 
 export type Grid = {
-  items: GridItem[]
+  items: GridItem[] | Collection
   modifiers?: GridModifiers[]
   as?: SectionTypes
 }
@@ -292,11 +306,12 @@ export type Section = WayfindingBlock & {
   container?: boolean
   as?: SectionTypes
   modifiers?: SectionModifiers[]
+  linkBefore?: boolean
 }
 
 export type Masthead = {
-  content?: string
-  links?: Link[]
+  content?: Collection
+  links?: Link[] | Collection
   skipLinks?: Link[]
   background?: MastheadModifier
 }
@@ -312,7 +327,7 @@ export type Header = {
 
 export type Footer = {
   navigation?: Navigation
-  aoc?: string
+  aoc?: WysiwygText
   links?: Link[]
   socials?: SocialLinks
   background?: FooterModifier
@@ -326,38 +341,38 @@ export type Footer = {
 
 export type LinkList = {
   title?: Heading
-  items: Link[]
+  items: Link[] | Collection
 }
 
 export type AccordionItem = {
   title: string
-  content: string | WysiwygText
+  content: WysiwygText
   open?: boolean
   id?: string
 }
 
 export type Accordion = {
-  items: AccordionItem[]
+  items: AccordionItem[] | Collection
   title?: Heading
   toggleAll?: boolean
 }
 
 export type Callout = {
-  title: Heading
-  content: string
+  title?: Heading
+  content: WysiwygText
 }
 
 export type Card = WayfindingBlock & {
   image?: Image
   icon?: Icon
-  tags?: Tags
+  tags?: Tags | string
   date?: string
   linkList?: LinkList
   modifiers?: CardModifier[]
 }
 
 export type Carousel = {
-  items: GridItem[]
+  items: GridItem[] | Collection
   loop?: boolean
   pagination: boolean
   counter: boolean
@@ -389,7 +404,7 @@ export type GlobalAlert = {
   type: GlobalAlertTypes
   dismissible: boolean
   title: Heading
-  content: string | WysiwygText
+  content: WysiwygText
   link?: Link
 }
 
@@ -408,13 +423,13 @@ export type HeroSearch = HeroBanner & {
 export type InPageAlert = {
   type: InPageAlertTypes
   title: Heading
-  content: string | WysiwygText
+  content: WysiwygText
   link?: Link
 }
 
 export type ListItem = {
   link: Link
-  content: string | WysiwygText
+  content: WysiwygText
   tags?: Tags
   label?: string
   info?: string
@@ -424,7 +439,10 @@ export type ListItem = {
 }
 
 export type Popover = WayfindingBlock & {
+  trigger: Button
   id: string
+  name?: string
+  placement?: PopoverPlacementModifier
 }
 
 export type ResultsBar = {
@@ -436,27 +454,27 @@ export type ResultsBar = {
 }
 
 export type StepItem = {
-  content: string | WysiwygText
+  content: WysiwygText
   status?: boolean
 }
 
 export type Steps = {
-  items: StepItem[],
+  items: StepItem[] | Collection,
   modifiers?: StepsModifier[]
   fill?: boolean
   counters?: boolean
 }
 
 export type SupportList = {
-  logos: LinkedImage[]
+  logos: LinkedImage[] | Collection
   title?: Heading
-  links?: Link[]
+  links?: Link[] | Collection
   showBrand?: boolean
 }
 
 export type TabItem = {
   id: string
-  content: string | WysiwygText
+  content: WysiwygText
   title?: string
 }
 
@@ -467,27 +485,28 @@ export type TabListItem = {
 }
 
 export type Tabs = {
-  items: TabItem[]
-  listItems?: TabListItem[]
+  items: TabItem[] | Collection
+  listItems?: TabListItem[] | Collection
   id?: string
   title?: Heading
 }
 
 export type Tags = {
-  items: Link[] | string[] | FormControl[]
+  items: Link[] | string[] | FormControl[] | Collection
   type: TagTypes
 }
 
 export type SocialLinks = {
   title?: Heading
-  items: Link[] | LinkedImage[]
+  items: Link[] | LinkedImage[] | Collection
 }
 
 export type SocialShare = {
-  facebook?: boolean
-  linkedin?: boolean
-  twitter?: boolean
-  email?: boolean
+  facebook?: string
+  linkedin?: string
+  twitter?: string
+  bluesky?: string
+  email?: string
 }
 
 export type UtilityList = {
@@ -495,6 +514,7 @@ export type UtilityList = {
   print?: boolean
   pdf?: boolean
   share?: SocialShare
+  horizontal?: boolean
 }
 
 export type Collapsible = {
@@ -511,8 +531,8 @@ export type FilterItem = FormItem & {
 export type Filters = {
   action: string
   title: string
-  items: FilterItem[]
-  actions?: Button[]
+  items: FilterItem[] | Collection
+  actions?: Button[] | Collection
   direction: "right" | "down"
   instant?: boolean
   collapsible?: boolean // down in nswds - but that name is too vague, when true it's open on desktop and closed on mobile.
@@ -520,6 +540,11 @@ export type Filters = {
   counter?: boolean
 }
 
+export type Tooltip = {
+  text: string
+  content: string
+}
+
 export {
   AlignmentTypes,
   AsTypes,
@@ -545,4 +570,5 @@ export {
   ListItemModifiers,
   MastheadModifier,
   FooterModifier,
+  PopoverPlacementModifier,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pnx-mixtape/ids-shape",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "shape details for ids project",
   "main": "./index.ts",
   "type": "module",