@pnx-mixtape/mxds 0.0.1

package/src/enums.ts

@@ -0,0 +1,260 @@
+/* eslint-disable no-unused-vars */
+
+export enum Alignment {
+  LEFT = "left",
+  RIGHT = "right",
+}
+
+export enum IconAlignment {
+  START = "start",
+  END = "end",
+}
+
+export enum AsTags {
+  DIV = "div",
+  LI = "li",
+  ARTICLE = "article",
+  ASIDE = "aside",
+  SECTION = "section",
+}
+
+export enum SectionTags {
+  DIV = "div",
+  SECTION = "section",
+  HEADER = "header",
+  FOOTER = "footer",
+  ASIDE = "aside",
+  LIST = "ul",
+}
+
+export enum TextTags {
+  P = "p",
+  DIV = "div",
+  STRONG = "strong",
+  ITALIC = "em",
+}
+
+export enum HeadingLevels {
+  ONE = "h1",
+  TWO = "h2",
+  THREE = "h3",
+  FOUR = "h4",
+  FIVE = "h5",
+  P = "p",
+  DIV = "div",
+}
+
+export enum HeadingStyles {
+  HEADLINE = "headline",
+  SECTION = "text--section-headline",
+  EMBELLISHED = "text--embellished-headline",
+  TEXT = "text--l",
+  XXL = "heading--xxl",
+  XL = "heading--xl",
+  L = "heading--l",
+  M = "heading--m",
+  S = "heading--s",
+  XS = "heading--xs",
+  RESET = "spacing--top",
+  RESETTOP = "spacing--top-reset",
+  RESETBOTTOM = "spacing--bottom-reset",
+}
+
+export enum TextStyles {
+  HEADLINE = "headline",
+  SECTION = "text--section-headline",
+  EMBELLISHED = "text--embellished-headline",
+  XL = "text--xl",
+  L = "text--l",
+  M = "text--m",
+  S = "text--s",
+  XS = "text--xs",
+}
+
+export enum LinkStyles {
+  EXTERNAL = "external",
+  MORE = "more",
+}
+
+export enum AccordionStyles {
+  DIVIDED = "divided",
+}
+
+export enum AccordionTypes {
+  DEFAULT = "base",
+  MOBILE = "mobile",
+  DIV = "div",
+}
+
+export enum IconStyles {
+  PRIMARY = "primary",
+}
+
+export enum ButtonStyles {
+  PRIMARY = "primary",
+  TEXT = "text",
+}
+
+export enum ButtonSizes {
+  LARGE = "large",
+  MEDIUM = "medium",
+  SMALL = "small",
+}
+
+export enum Icons {
+  ARROW_DOWN = "arrow-down",
+  ARROW_LEFT = "arrow-left",
+  ARROW_UP = "arrow-up",
+  ARROW_RIGHT = "arrow-right",
+  CHEVRON_DOWN = "chevron-down",
+  CHEVRON_LEFT = "chevron-left",
+  CHEVRON_RIGHT = "chevron-right",
+  CHEVRON_UP = "chevron-up",
+  CLOSE = "close",
+  COLLAPSE = "collapse",
+  DOWNLOAD = "download",
+  DRUPAL = "drupal",
+  ERROR = "error",
+  EXPAND = "expand",
+  EXTERNAL = "external-link",
+  FACEBOOK = "facebook",
+  GOOGLE = "google",
+  INFO = "info",
+  INSTAGRAM = "instagram",
+  LINKEDIN = "linkedin",
+  MASTODON = "mastodon",
+  MENU = "menu",
+  SEARCH = "search",
+  SUCCESS = "success",
+  TWITTER = "twitter",
+  WARNING = "warning",
+  YOUTUBE = "youtube",
+  EMAIL = "email",
+  HEART = "heart-selected",
+  EMPTY_HEART = "heart-unselected",
+  LINK = "link",
+  LOCK = "lock",
+  LOGIN = "login",
+  MORE = "more",
+  EDIT = "pencil",
+  PHONE = "phone",
+  PIN = "pin",
+  PRINT = "print",
+  RESTART = "restart",
+  STAR = "star-selected",
+  EMPTY_STAR = "star-unselected",
+  TICK = "tick",
+  TRASH = "trash",
+  USER = "user",
+}
+
+export enum GridColumns {
+  DYNAMIC = "dynamic",
+  XS_2 = "xs-2-cols",
+  S_2 = "sm-2-cols",
+  M_2 = "md-2-cols",
+  M_3 = "md-3-cols",
+  L_3 = "lg-3-cols",
+  M_4 = "md-4-cols",
+  L_4 = "lg-4-cols",
+  XL_4 = "xl-4-cols",
+}
+
+export enum GridWidths {
+  ONE = "1",
+  TWO = "2",
+  THREE = "3",
+  FOUR = "4",
+  FIVE = "5",
+  SIX = "6",
+  SEVEN = "7",
+  EIGHT = "8",
+  NINE = "9",
+  TEN = "10",
+  ELEVEN = "11",
+  TWELVE = "12",
+}
+
+export enum SectionStyles {
+  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 PageWidths {
+  NARROW = "narrow",
+  FEATURE = "feature",
+  FULL = "full",
+}
+
+export enum SectionFlow {
+  FLOW = "flow",
+  GROUP = "group",
+}
+
+export enum MessageTypes {
+  INFO = "info",
+  WARNING = "warning",
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+export enum SidebarOrder {
+  DEFAULT = "",
+  REVERSE = "sidebar-rev",
+  REVERSE_L = "sidebar-rev-lg",
+}
+
+export enum TileSizes {
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+}
+
+export enum DialogStyles {
+  CENTER = "center",
+  FULL = "fullwidth",
+}
+
+export enum BackgroundStyles {
+  PRIMARY = "primary",
+  ACCENT = "accent",
+  ALT = "alt",
+  REVERSE = "reverse",
+  RESET = "reset",
+}
+
+export enum TableStyles {
+  FLUSH = "flush",
+  STRIPED = "striped",
+  SMALL = "small",
+  RESPONSIVE = "responsive",
+}
+
+export enum FormStatus {
+  DEFAULT = "default",
+  VALID = "valid",
+  INVALID = "invalid",
+}
+
+export enum TabStyles {
+  DEFAULT = "default",
+  CENTERED = "centered",
+  LINED = "lined",
+  SAME_HEIGHT = "same-height",
+}
+
+export enum SocialShareTypes {
+  TWITTER = "twitter",
+  FACEBOOK = "facebook",
+  LINKEDIN = "linkedin",
+}

package/src/index.css

@@ -0,0 +1,27 @@
+@import "constants.css";
+@import "./Atom/base.css";
+@import "./Layout/Section/section.css";
+@import "./Layout/Grid/grid.css";
+@import "./Layout/Page/page.css";
+@import "./Component/Accordion/accordion.css";
+@import "./Atom/Button/button.css";
+@import "./Atom/Icon/icon.css";
+@import "./Form/form.css";
+@import "./Layout/Masthead/masthead.css";
+@import "./Layout/Header/header.css";
+@import "./Layout/Footer/footer.css";
+@import "./Component/Navigation/navigation.css";
+@import "./Component/Tile/tiles.css";
+@import "./Component/Pagination/pagination.css";
+@import "./Component/InPageNavigation/in-page-navigation.css";
+@import "./Component/Sticky/sticky.css";
+@import "./Component/Tag/tag.css";
+@import "./Component/Card/card.css";
+@import "./Component/Dialog/dialog.css";
+@import "./Component/DropMenu/drop-menu.css";
+@import "./Component/ContentBlock/content-block.css";
+@import "./Component/LinkList/link-list.css";
+@import "./Component/Tabs/tabs.css";
+@import "./Component/InPageAlert/in-page-alert.css";
+@import "./Component/Callout/callout.css";
+@import "./Utility/utilities.css";

package/src/react.ts

@@ -0,0 +1,68 @@
+export {
+  default as ImageComponentProvider,
+  useImageComponent,
+} from "./Utility/Context/ImageComponent"
+export {
+  default as LinkComponentProvider,
+  useLinkComponent,
+} from "./Utility/Context/LinkComponent"
+export { default as Accordion } from "./Component/Accordion/Accordion"
+export { default as Heading } from "./Atom/Heading/Heading"
+export { default as Media } from "./Atom/Media/Media"
+export { default as Link } from "./Atom/Link/Link"
+export { default as Text } from "./Atom/Text/Text"
+export { default as Video } from "./Atom/Video/Video"
+export { default as Button } from "./Atom/Button/Button"
+export { default as Card } from "./Component/Card/Card"
+export { default as ContentBlock } from "./Component/ContentBlock/ContentBlock"
+export { default as Dialog } from "./Component/Dialog/Dialog"
+export { default as InPageNavigation } from "./Component/InPageNavigation/InPageNavigation"
+export { default as useInPageNavigation } from "./Component/InPageNavigation/Hooks/useInPageNavigation"
+export {
+  default as FormCheckbox,
+  Checkbox,
+  SingleCheckbox,
+} from "./Form/Checkbox/FormCheckbox"
+export { default as FormDescription } from "./Form/Description/FormDescription"
+export { default as FormLabel } from "./Form/Label/FormLabel"
+export { default as FormRadio, Radio } from "./Form/Radio/FormRadio"
+export { default as FormSelect, Option } from "./Form/Select/FormSelect"
+export { default as FormText } from "./Form/TextInput/FormText"
+export { default as FormTitle } from "./Form/Form/FormTitle"
+export { default as Form } from "./Form/Form/Form"
+export { default as Icon } from "./Atom/Icon/Icon"
+export { default as Grid } from "./Layout/Grid/Grid"
+export { default as Page } from "./Layout/Page/Page"
+export { default as HeroBanner } from "./Component/HeroBanner/HeroBanner"
+export { default as Section } from "./Layout/Section/Section"
+export { default as SectionGrid } from "./Layout/Section/SectionGrid"
+export {
+  default as LinkList,
+  LinkListItem,
+} from "./Component/LinkList/LinkList"
+export { default as Message } from "./Component/InPageAlert/InPageAlert"
+export {
+  default as Pagination,
+  PaginationItem,
+} from "./Component/Pagination/Pagination"
+export {
+  default as PaginationProvider,
+  usePagination,
+} from "./Component/Pagination/Components/PaginationContext"
+export { default as Tabs, useTabContext } from "./Component/Tabs/Tabs"
+export { default as Tag } from "./Component/Tag/Tag"
+export { default as Teaser } from "./Component/ListItem/Teaser"
+export { default as Tile } from "./Component/Tile/Tile"
+export { default as Navigation } from "./Component/Navigation/Navigation"
+export { default as NavigationDropdown } from "./Component/Navigation/Dropdown"
+export { default as Author } from "./Component/Author/Author"
+export { default as DropMenu } from "./Component/DropMenu/DropMenu"
+export { default as DropMenuItem } from "./Component/DropMenu/Components/DropMenuItem"
+export {
+  default as DropMenuProvider,
+  useDropMenuContext,
+} from "./Component/DropMenu/Components/DropMenuContext"
+export { default as useLocalStorage } from "./Utility/Hooks/useLocalStorage"
+export { default as useMediaQuery } from "./Utility/Hooks/useMediaQuery"
+export { default as useToggle } from "./Utility/Hooks/useToggle"
+export { default as useUrlParams } from "./Utility/Hooks/useUrlParams"

package/src/tokens.js

@@ -0,0 +1,119 @@
+export const global = {
+  size: {
+    xxxxs: "0.25em",
+    xxxs: "0.5em",
+    xxs: "0.75em",
+    xs: "0.875em",
+    s: "1em",
+    m: "1.5em",
+    l: "2em",
+    xl: "2.5em",
+    xxl: "3em",
+    xxxl: "3.5em",
+    xxxxl: "4em",
+    ul: "4.5em",
+    uul: "5em",
+    uuul: "5.5em",
+  },
+}
+
+export default {
+  breakpoint: {
+    xs: "420px",
+    s: "540px",
+    m: "720px",
+    l: "946px",
+    xl: "1100px",
+    globalNav: "720px",
+    contentCard: "720px",
+    dropMenu: "420px",
+  },
+  colour: {
+    primary: "288",
+    accent: "328",
+    main: {
+      fg: "lch(0% 0 0)",
+      bg: "lch(100% 0 0)",
+      fgAlt: "lch(25% 0 0)",
+      bgAlt: "lch(95% 0 0)",
+      border: "lch(90% 0 0)",
+    },
+    reverse: {
+      fg: "lch(100% 0 0)",
+      bg: "lch(0% 0 0)",
+      fgAlt: "lch(95% 0 0)",
+      bgAlt: "lch(25% 0 0)",
+      border: "lch(10% 0 0)",
+    },
+    info: "288",
+    warning: "70",
+    success: "134",
+    error: "34",
+  },
+  font: {
+    family: "system-ui, sans-serif",
+    lineHeight: {
+      main: "1.6",
+      heading: "1.2",
+      ui: "0.9rem",
+    },
+    weight: {
+      main: 400,
+      bold: 700,
+    },
+    size: {
+      ratioSmall: 1.125,
+      ratio: 1.25,
+      base: "1rem",
+      diff: 0.3,
+    },
+  },
+  size: {
+    spacing: {
+      xxxxs: global.size.xxxxs,
+      xxxs: global.size.xxxs,
+      xxs: global.size.xxs,
+      xs: global.size.xs,
+      s: global.size.s,
+      m: global.size.m,
+      l: global.size.l,
+      xl: global.size.xl,
+      xxl: global.size.xxl,
+      xxxl: global.size.xxxl,
+      xxxxl: global.size.xxxxl,
+      ul: global.size.ul,
+      uul: global.size.uul,
+      uuul: global.size.uuul,
+    },
+    gap: {
+      s: global.size.s,
+      m: global.size.m,
+      l: global.size.l,
+      xl: global.size.xl,
+    },
+    container: {
+      plus: "12rem",
+      minus: "8rem",
+      aligned: "76ch",
+      narrow: "58ch",
+    },
+  },
+  utility: {
+    outline: {
+      width: "2px",
+      offset: "0",
+      style: "solid",
+      hue: "288",
+    },
+    radius: {
+      m: "3px",
+      l: global.size.l,
+      round: "50%",
+    },
+    shadow: {
+      colour: "lch(25% 0 0)",
+      size: global.size.xs,
+    },
+    ratio: "16 / 9",
+  },
+}