@pnx-mixtape/ids-shape 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# Interchangeable DS
+
+An internal PreviousNext project, to create set of PINTO objects that can be used with 
+either Mixtape or the NSW Design system.
+
+Slack channel: #ids
+Backlog: https://previousnext.atlassian.net/browse/PNXI-178

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pnx-mixtape/ids-shape",
+  "version": "0.0.1",
+  "description": "shape details for ids project",
+  "main": "shape/index.ts",
+  "type": "module",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "rikki-iki",
+  "license": "ISC"
+}

package/shape/README.md

@@ -0,0 +1,3 @@
+# IDS shape
+
+Initial shape.

package/shape/enums.ts

@@ -0,0 +1,154 @@
+export enum AlignmentTypes {
+  START = "start",
+  END = "end",
+}
+
+export enum MediaAlignmentTypes {
+  LEFT = "left",
+  RIGHT = "right",
+  CENTER = "center"
+}
+
+export enum IconColourModifier {
+  INFO = "info",
+  ERROR = "error",
+  WARNING = "warning",
+  SUCCESS = "success",
+}
+
+export enum IconRotateModifier {
+  NINETY = "rotate-90",
+  ONEEIGHTY = "rotate-180",
+  TWOSEVENTY = "rotate-270",
+}
+
+export enum IconSizeModifier {
+  SMALL = "sm",
+  MEDIUM = "md",
+  LARGE = "lg",
+  XLARGE = "xl",
+}
+
+export enum ButtonTypes {
+  INPUT = "input",
+  BUTTON = "button",
+  LINK = "link",
+}
+
+export enum ButtonModifiers {
+  DARK = "dark",
+  LIGHT = "light",
+  WHITE = "white",
+  DESTRUCTIVE = "destructive",
+  WIDE = "wide",
+  OUTLINE = "outline",
+}
+
+export enum LoadingTypes {
+  LAZY = "lazy",
+  EAGER = "eager"
+}
+
+export enum AsTypes {
+  DIV = "div",
+  LI = "li",
+  ARTICLE = "article",
+  ASIDE = "aside",
+  SECTION = "section",
+}
+
+export enum SectionTypes {
+  DIV = "div",
+  SECTION = "section",
+  HEADER = "header",
+  FOOTER = "footer",
+  ASIDE = "aside",
+  LIST = "ul",
+}
+
+export enum SectionModifiers {
+  S = "s",
+  M = "m",
+  L = "l",
+  XL = "xl",
+  TOP_S = "top-s",
+  TOP_M = "top-m",
+  TOP_L = "top-l",
+  TOP_XL = "top-xl",
+  BOTTOM_S = "bottom-s",
+  BOTTOM_M = "bottom-m",
+  BOTTOM_L = "bottom-l",
+  BOTTOM_XL = "bottom-xl",
+}
+
+export enum HeadingTypes {
+  ONE = "h1",
+  TWO = "h2",
+  THREE = "h3",
+  FOUR = "h4",
+  FIVE = "h5",
+}
+
+export enum TextModifiers {
+  INTRO = "intro",
+  SMALL = "small",
+  ONE = "h1",
+  TWO = "h2",
+  THREE = "h3",
+  FOUR = "h4",
+  FIVE = "h5",
+}
+
+export enum GlobalAlertTypes {
+  LIGHT  = "light",
+  CRITICAL = "critical",
+}
+
+export enum InPageAlertTypes {
+  INFO = "info",
+  ERROR = "error",
+  WARNING = "warning",
+  SUCCESS = "success",
+}
+
+export enum TagTypes {
+  TEXT = "text",
+  LINK = "link",
+  CHECKBOX = "checkbox"
+}
+
+export enum GridItemModifiers {
+  SPAN_2 = "span-2",
+  SPAN_3 = "span-3",
+  SPAN_4 = "span-4"
+}
+
+export enum GridModifiers {
+  XS_2 = "xs-2-cols",
+  SM_2 = "sm-2-cols",
+  MD_2 = "md-2-cols",
+  MD_3 = "md-3-cols",
+  LG_3 = "lg-3-cols",
+  MD_4 = "md-4-cols",
+  LG_4 = "lg-4-cols",
+  XL_4 = "xl-4-cols",
+}
+
+export enum CardModifier {
+  DARK = "dark",
+  LIGHT = "light",
+  SUPPLEMENTARY = "supplementary"
+}
+
+export enum HeroBannerModifier {
+  DARK = "dark",
+  LIGHT = "light",
+  WHITE = "white",
+  GREY = "off-white"
+}
+
+export enum StepsModifier {
+  DARK = "dark",
+  LIGHT = "light",
+  SUPPLEMENTARY = "supplementary"
+}

package/shape/index.ts

@@ -0,0 +1,385 @@
+import {
+  AlignmentTypes,
+  AsTypes,
+  ButtonModifiers,
+  ButtonTypes,
+  CardModifier,
+  GlobalAlertTypes,
+  GridItemModifiers,
+  GridModifiers,
+  HeadingTypes,
+  HeroBannerModifier,
+  IconColourModifier,
+  IconRotateModifier,
+  IconSizeModifier,
+  InPageAlertTypes,
+  LoadingTypes,
+  MediaAlignmentTypes,
+  SectionModifiers,
+  SectionTypes, StepsModifier,
+  TagTypes
+} from "./enums"
+
+/**
+ * Base.
+ */
+
+type Icon = {
+  icon: string
+  text?: string
+  align?: AlignmentTypes
+  color?: IconColourModifier
+  rotate?: IconRotateModifier
+  size?: IconSizeModifier
+  customClasses?: string[]
+}
+
+type Link = {
+  title: string
+  href: string
+  more?: boolean
+  external?: boolean
+  current?: boolean
+  download?: boolean
+  icon?: Icon
+  customClasses?: string[]
+}
+
+type Button = {
+  title: string
+  as: ButtonTypes
+  modifiers?: ButtonModifiers[]
+  icon?: Icon
+  href?: string
+  disabled?: boolean
+  customClasses?: string[]
+}
+
+type Heading = {
+  title: string
+  as: HeadingTypes
+  modifiers?: HeadingTypes[]
+  excluded?: boolean
+  srOnly?: boolean
+  icon?: Icon
+  customClasses?: string[]
+}
+
+type DefinitionListItem = {
+  title: string
+  content: string | WysiwygText
+}
+
+type DefinitionList = {
+  items: DefinitionListItem[]
+  title?: Heading
+  customClasses?: string[]
+}
+
+type Video = {
+  src: string
+  title: string
+  duration?: string
+}
+
+type ImageSource = {
+  srcset: string
+  media: string
+  type: string
+}
+
+type Image = {
+  src: string
+  alt: string
+  height?: string
+  width?: string
+  sources?: ImageSource[]
+  loading?: LoadingTypes
+}
+
+type Media = {
+  item: Image | Video
+  caption?: string
+  attribution?: string
+  align?: MediaAlignmentTypes
+  customClasses?: string[]
+}
+
+type FormControl = {
+  id: string
+  name: string
+  label: string
+  value: string
+  checked?: boolean
+}
+
+type WysiwygText = HTMLElement[] // just an example.
+
+/**
+ * Extendable.
+ */
+
+type WayfindingBlock = {
+  title?: Heading
+  content?: string | WysiwygText
+  link?: Link | Button
+  customClasses?: string[]
+}
+
+/**
+ * Layout.
+ */
+
+type GridItem = {
+  item: HTMLElement
+  container?: boolean
+  modifiers?: GridItemModifiers[]
+  as?: AsTypes
+  customClasses?: string[]
+}
+
+type Grid = {
+  items: GridItem[]
+  modifiers?: GridModifiers[]
+  as?: SectionTypes
+  customClasses?: string[]
+}
+
+type Section = WayfindingBlock & {
+  background?: string
+  container?: boolean
+  as?: SectionTypes
+  modifiers?: SectionModifiers[]
+}
+
+/**
+ * Navigation.
+ */
+
+type Breadcrumbs = {
+  items: Link[] | string
+  modifier?: string
+}
+
+type InPageNavigation = {
+  title?: Heading
+  levels?: HeadingTypes[]
+}
+
+type PaginationItem = {
+  link?: Link
+  ellipsis?: boolean
+}
+
+type Pagination = {
+  previous?: Link
+  next?: Link
+  pages?: PaginationItem[]
+  customClasses?: string[]
+}
+
+type MenuTree = {
+  link: Link
+  items: MenuTree[]
+}
+
+type Navigation = {
+  id: string
+  items: MenuTree[]
+  title?: string
+  customClasses?: string[]
+}
+
+type SideNavigation = Navigation & {
+  parent: Link
+  customClasses?: string[]
+}
+
+/**
+ * Components.
+ */
+
+type LinkList = {
+  items: Link[]
+  customClasses?: string[]
+}
+
+type AccordionItem = {
+  title: string
+  content: string | WysiwygText
+  open?: boolean
+  id?: string
+}
+
+type Accordion = {
+  items: AccordionItem[]
+  title?: Heading
+  toggleAll?: boolean
+  customClasses?: string[]
+}
+
+type Callout = {
+  title: Heading
+  content: string
+  customClasses?: string[]
+}
+
+type Card = WayfindingBlock & {
+  image?: Image
+  icon?: Icon
+  tags?: string[]
+  date?: string
+  linkList?: LinkList
+  modifier?: CardModifier
+}
+
+type CardGrid = WayfindingBlock & {
+  items: Card[]
+  container?: boolean
+  modifiers?: GridModifiers[]
+  as?: SectionTypes
+}
+
+type CardCarousel = WayfindingBlock & {
+  items: Card[]
+  loop: boolean
+  pagination: boolean
+  counter: boolean
+}
+
+type ContentBlock = WayfindingBlock & {
+  image?: Image
+  icon?: Icon
+  linkList?: LinkList
+}
+
+type ContactDetails = {
+  title?: Heading
+  name?: string
+  phone?: string
+  email?: string
+  website?: string
+  address?: WysiwygText
+  customClasses?: string[]
+}
+
+type Dialog = WayfindingBlock & {
+  open: boolean
+  id: string
+  modal: boolean
+}
+
+type GlobalAlert = {
+  id: string
+  type: GlobalAlertTypes
+  dismissible: boolean
+  title: Heading
+  content: string | WysiwygText
+  link?: Link
+  customClasses?: string[]
+}
+
+type HeroBanner = WayfindingBlock & {
+  subtitle?: string
+  image?: Image
+  linkList?: LinkList
+  highlight?: boolean
+  modifier: HeroBannerModifier
+}
+
+type InPageAlert = {
+  type: InPageAlertTypes
+  title: Heading
+  content: string | WysiwygText
+  link?: Link
+  customClasses?: string[]
+}
+
+type ListItem = WayfindingBlock & {
+  tags?: string[]
+  label?: string
+  info?: string
+  infoBefore?: boolean
+  image?: Image
+}
+
+type Popover = WayfindingBlock & {
+  id: string
+}
+
+type ResultsBar = {
+  number?: number
+  pageCount?: number
+  total?: number
+  sort?: string[]
+  empty?: boolean
+  customClasses?: string[]
+}
+
+type StepItem = {
+  content: WysiwygText[]
+  status: boolean
+}
+
+type Steps = {
+  items: StepItem[],
+  modifier?: StepsModifier
+  fill?: boolean
+  counters?: boolean
+  progress?: boolean
+  customClasses?: string[]
+}
+
+type Logo = {
+  link: Link
+  image: Image
+}
+
+type SupportList = {
+  logos: Logo[]
+  title?: Heading
+  links?: Link[]
+  showBrand?: boolean
+  customClasses?: string[]
+}
+
+type TabItem = {
+  id: string
+  title: string
+  content: string | WysiwygText
+  active?: boolean
+}
+
+type Tabs = {
+  items: TabItem[]
+  modifier?: string
+  customClasses?: string[]
+}
+
+type Tags = {
+  items: Link[] | string[] | FormControl[]
+  type: TagTypes
+  customClasses?: string[]
+}
+
+type SocialLinks = {
+  title?: Heading
+  items: Link[]
+  customClasses?: string[]
+}
+
+type SocialShare = {
+  facebook?: boolean
+  linkedin?: boolean
+  twitter?: boolean
+  email?: boolean
+  customClasses?: string[]
+}
+
+type UtilityList = {
+  copy?: boolean
+  print?: boolean
+  pdf?: boolean
+  share?: SocialShare
+  customClasses?: string[]
+}