@pnx-mixtape/ids-shape 0.0.12 → 0.0.14

package/enums.ts

@@ -3,6 +3,37 @@ export enum AlignmentTypes {
   END = "end",
 }
 
+export enum FormStatusTypes {
+  DEFAULT = "default",
+  VALID = "valid",
+  INVALID = "invalid"
+}
+
+export enum InputTypeTypes {
+  BUTTON = "button",
+  CHECKBOX = "checkbox",
+  COLOR = "color",
+  DATE = "date",
+  DATETIMELOCAL = "datetime-local",
+  EMAIL = "email",
+  FILE = "file",
+  HIDDEN = "hidden",
+  IMAGE = "image",
+  MONTH = "month",
+  NUMBER = "number",
+  PASSWORD = "password",
+  RADIO = "radio",
+  RANGE = "range",
+  RESET = "reset",
+  SEARCH = "search",
+  SUBMIT = "submit",
+  TEL = "tel",
+  TEXT = "text",
+  TIME = "time",
+  URL = "url",
+  WEEK = "week"
+}
+
 export enum MediaAlignmentTypes {
   LEFT = "left",
   RIGHT = "right",

package/index.ts

@@ -5,6 +5,7 @@ import {
   ButtonTypes,
   CardModifier,
   FooterModifier,
+  FormStatusTypes,
   GlobalAlertTypes,
   GridModifiers,
   HeadingTypes,
@@ -13,6 +14,7 @@ import {
   IconRotateModifier,
   IconSizeModifier,
   InPageAlertTypes,
+  InputTypeTypes,
   ListItemModifiers,
   LoadingTypes,
   MastheadModifier,
@@ -45,6 +47,7 @@ export type Link = {
   download?: boolean
   iconStart?: Icon
   iconEnd?: Icon
+  iconOnly?: boolean
 }
 
 export type Button = {
@@ -55,6 +58,7 @@ export type Button = {
   disabled?: boolean
   iconStart?: Icon
   iconEnd?: Icon
+  iconOnly?: boolean
 }
 
 export type Heading = {
@@ -119,31 +123,103 @@ export type LinkedImage = {
   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 WysiwygText = HTMLElement[] // just an example.
+
+/**
+ * Forms
+ */
 
-export type FormControl = {
+export type InputBase = {
   id: string
   name: string
+  required?: boolean
+}
+
+export type FormControl = InputBase & {
   label: string
   value: string
   checked?: boolean
+  status?: FormStatusTypes
+  hasDescription?: boolean
+}
+
+export type FormOption = {
+  label: string
+  value: string
+  selected?: boolean
+}
+
+export type FormSelect = InputBase & {
+  options: FormOption[]
+  status?: FormStatusTypes
+  hasDescription?: boolean
+  label?: string,
+}
+
+export type FormText = InputBase & {
+  type: InputTypeTypes
+  value?: string
+  status?: FormStatusTypes
+  hasDescription?: boolean
+  label?: string,
+  placeholder?: string;
+}
+
+export type FormTextArea = InputBase & {
+  value?: string
+  status?: FormStatusTypes
+  hasDescription?: boolean
+  label?: string,
+}
+
+export type FormInput = {
+  fieldType: "text" | "textarea" | "select" | "checkbox" | "radio"
+  input: FormText | FormTextArea | FormSelect | FormControl
+}
+
+export type FormDescription = {
+  id: string
+  description: string
+}
+
+export type FormStatus = {
+  id: string
+  type: FormStatusTypes
+  message?: string
+}
+
+export type FormLabel = {
+  id?: string
+  title: string
+  inline?: boolean
+  as?: "label" | "legend"
+}
+
+export type FormItem = {
+  id: string
+  label?: FormLabel
+  fields?: FormInput | FormInput[]
+  status?: FormStatus
+  descriptionStart?: FormDescription
+  descriptionEnd?: FormDescription
+  as?: "div" | "fieldset"
+  inline?: boolean
 }
 
 export type Form = {
   action: string
   items: FormItem | FormItem[]
   actions?: Button | Button[]
+  title?: string
+  id?: string
+}
+
+export type SearchForm = {
+  action: string
+  input: FormInput
+  button: Button
 }
 
-export type WysiwygText = HTMLElement[] // just an example.
 
 /**
  * Extendable.
@@ -223,14 +299,14 @@ export type Masthead = {
   content?: string
   links?: Link[]
   skipLinks?: Link[]
-  background?: MastheadModifier[]
+  background?: MastheadModifier
 }
 
 export type Header = {
   logo: LinkedImage | LinkedImage[]
   title?: string
   description?: string
-  search?: Form
+  search?: SearchForm
   navigation?: Navigation
   controls?: Button[]
 }
@@ -240,7 +316,7 @@ export type Footer = {
   aoc?: string
   links?: Link[]
   socials?: SocialLinks
-  background?: FooterModifier[]
+  background?: FooterModifier
 }
 
 /**
@@ -382,6 +458,7 @@ export type SupportList = {
 export type TabItem = {
   id: string
   content: string | WysiwygText
+  title?: string
 }
 
 export type TabListItem = {
@@ -429,12 +506,14 @@ export {
   CardModifier,
   GlobalAlertTypes,
   GridModifiers,
+  FormStatusTypes,
   HeadingTypes,
   HeroBannerModifier,
   IconColourModifier,
   IconRotateModifier,
   IconSizeModifier,
   InPageAlertTypes,
+  InputTypeTypes,
   LoadingTypes,
   MediaAlignmentTypes,
   SectionModifiers,

package/package.json

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