@pnx-mixtape/ids-shape 0.0.10 → 0.0.12

package/enums.ts

@@ -158,3 +158,13 @@ export enum ListItemModifiers {
   BLOCK = "block",
   REVERSE = "reverse"
 }
+
+export enum MastheadModifier {
+  DARK = "dark",
+  LIGHT = "light",
+}
+
+export enum FooterModifier {
+  DARK = "dark",
+  LIGHT = "light",
+}

package/index.ts

@@ -4,6 +4,7 @@ import {
   ButtonModifiers,
   ButtonTypes,
   CardModifier,
+  FooterModifier,
   GlobalAlertTypes,
   GridModifiers,
   HeadingTypes,
@@ -11,11 +12,14 @@ import {
   IconColourModifier,
   IconRotateModifier,
   IconSizeModifier,
-  InPageAlertTypes, ListItemModifiers,
+  InPageAlertTypes,
+  ListItemModifiers,
   LoadingTypes,
+  MastheadModifier,
   MediaAlignmentTypes,
   SectionModifiers,
-  SectionTypes, StepsModifier,
+  SectionTypes,
+  StepsModifier,
   TagTypes
 } from "./enums"
 
@@ -101,6 +105,30 @@ export type Media = {
   align?: MediaAlignmentTypes
 }
 
+export type InlineSvg = {
+  className?: string
+  height?: string
+  width?: string
+  viewBox?: string
+  content?: string
+  title?: string
+}
+
+export type LinkedImage = {
+  image: Image | InlineSvg
+  href: string
+}
+
+export type FormItem = {
+  id: string
+  label: string
+  fields?: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[]
+  status?: "default" | "valid" | "invalid"
+  description?: string
+  error?: string
+  as?: "div" | "fieldset"
+}
+
 export type FormControl = {
   id: string
   name: string
@@ -109,6 +137,12 @@ export type FormControl = {
   checked?: boolean
 }
 
+export type Form = {
+  action: string
+  items: FormItem | FormItem[]
+  actions?: Button | Button[]
+}
+
 export type WysiwygText = HTMLElement[] // just an example.
 
 /**
@@ -121,30 +155,6 @@ export type WayfindingBlock = {
   link?: Link | Button
 }
 
-/**
- * Layout.
- */
-
-export type GridItem = {
-  item: string | HTMLElement
-  container?: boolean
-  modifiers?: GridModifiers[]
-  as?: AsTypes
-}
-
-export type Grid = {
-  items: GridItem[]
-  modifiers?: GridModifiers[]
-  as?: SectionTypes
-}
-
-export type Section = WayfindingBlock & {
-  background?: string
-  container?: boolean
-  as?: SectionTypes
-  modifiers?: SectionModifiers[]
-}
-
 /**
  * Navigation.
  */
@@ -156,6 +166,7 @@ export type Breadcrumbs = {
 export type InPageNavigation = {
   title?: Heading
   levels?: HeadingTypes[]
+  items?: Link[]
 }
 
 export type PaginationItem = {
@@ -184,6 +195,54 @@ export type SideNavigation = Navigation & {
   parent: Link
 }
 
+/**
+ * Layout.
+ */
+
+export type GridItem = {
+  item: string | HTMLElement
+  container?: boolean
+  modifiers?: GridModifiers[]
+  as?: AsTypes
+}
+
+export type Grid = {
+  items: GridItem[]
+  modifiers?: GridModifiers[]
+  as?: SectionTypes
+}
+
+export type Section = WayfindingBlock & {
+  background?: string
+  container?: boolean
+  as?: SectionTypes
+  modifiers?: SectionModifiers[]
+}
+
+export type Masthead = {
+  content?: string
+  links?: Link[]
+  skipLinks?: Link[]
+  background?: MastheadModifier[]
+}
+
+export type Header = {
+  logo: LinkedImage | LinkedImage[]
+  title?: string
+  description?: string
+  search?: Form
+  navigation?: Navigation
+  controls?: Button[]
+}
+
+export type Footer = {
+  navigation?: Navigation
+  aoc?: string
+  links?: Link[]
+  socials?: SocialLinks
+  background?: FooterModifier[]
+}
+
 /**
  * Components.
  */
@@ -281,7 +340,7 @@ export type InPageAlert = {
 export type ListItem = {
   link: Link
   content: string | WysiwygText
-  tags?: string[]
+  tags?: Tags
   label?: string
   info?: string
   infoBefore?: boolean
@@ -313,13 +372,8 @@ export type Steps = {
   counters?: boolean
 }
 
-export type Logo = {
-  link: Link
-  image: Image
-}
-
 export type SupportList = {
-  logos: Logo[]
+  logos: LinkedImage[]
   title?: Heading
   links?: Link[]
   showBrand?: boolean
@@ -327,13 +381,18 @@ export type SupportList = {
 
 export type TabItem = {
   id: string
-  title: string
   content: string | WysiwygText
+}
+
+export type TabListItem = {
+  id: string
+  title: string
   active?: boolean
 }
 
 export type Tabs = {
   items: TabItem[]
+  listItems?: TabListItem[]
   id?: string
   title?: Heading
 }
@@ -345,7 +404,7 @@ export type Tags = {
 
 export type SocialLinks = {
   title?: Heading
-  items: Link[]
+  items: Link[] | LinkedImage[]
 }
 
 export type SocialShare = {
@@ -383,4 +442,6 @@ export {
   StepsModifier,
   TagTypes,
   ListItemModifiers,
+  MastheadModifier,
+  FooterModifier,
 }

package/package.json

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