@pnx-mixtape/ids-shape 0.0.13 → 0.0.14

package/enums.ts

@@ -9,6 +9,31 @@ export enum FormStatusTypes {
   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

@@ -14,6 +14,7 @@ import {
   IconRotateModifier,
   IconSizeModifier,
   InPageAlertTypes,
+  InputTypeTypes,
   ListItemModifiers,
   LoadingTypes,
   MastheadModifier,
@@ -46,6 +47,7 @@ export type Link = {
   download?: boolean
   iconStart?: Icon
   iconEnd?: Icon
+  iconOnly?: boolean
 }
 
 export type Button = {
@@ -56,6 +58,7 @@ export type Button = {
   disabled?: boolean
   iconStart?: Icon
   iconEnd?: Icon
+  iconOnly?: boolean
 }
 
 export type Heading = {
@@ -126,12 +129,52 @@ 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 = {
@@ -146,16 +189,10 @@ export type FormStatus = {
 }
 
 export type FormLabel = {
-  id: string
+  id?: string
   title: string
   inline?: boolean
-}
-
-export type FormInput = {
-  id: string
-  input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-  status?: FormStatusTypes
-  label?: string,
+  as?: "label" | "legend"
 }
 
 export type FormItem = {
@@ -173,6 +210,14 @@ export type Form = {
   action: string
   items: FormItem | FormItem[]
   actions?: Button | Button[]
+  title?: string
+  id?: string
+}
+
+export type SearchForm = {
+  action: string
+  input: FormInput
+  button: Button
 }
 
 
@@ -261,7 +306,7 @@ export type Header = {
   logo: LinkedImage | LinkedImage[]
   title?: string
   description?: string
-  search?: Form
+  search?: SearchForm
   navigation?: Navigation
   controls?: Button[]
 }
@@ -413,6 +458,7 @@ export type SupportList = {
 export type TabItem = {
   id: string
   content: string | WysiwygText
+  title?: string
 }
 
 export type TabListItem = {
@@ -467,6 +513,7 @@ export {
   IconRotateModifier,
   IconSizeModifier,
   InPageAlertTypes,
+  InputTypeTypes,
   LoadingTypes,
   MediaAlignmentTypes,
   SectionModifiers,

package/package.json

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