@pnx-mixtape/mxds 0.0.1

package/src/Component/HeroBanner/HeroBanner.tsx

@@ -0,0 +1,50 @@
+import {
+  ComponentPropsWithoutRef,
+  JSX,
+  PropsWithChildren,
+  ReactNode,
+} from "react"
+import classNames from "classnames"
+import Section from "../../Layout/Section/Section"
+import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
+import { HeadingStyles, SectionStyles, TextStyles } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+type HeroBannerProps = PropsWithChildren &
+  ComponentPropsWithoutRef<"div"> & {
+    title: string | ReactNode
+    subtitle?: string
+    hero?: boolean
+    center?: boolean
+    headingLevel?: HeadingTypes
+  }
+
+const HeroBanner = ({
+  title,
+  hero = false,
+  center = false,
+  headingLevel = HeadingTypes.ONE,
+  subtitle,
+  children,
+  className,
+  ...props
+}: HeroBannerProps): JSX.Element => (
+  <Section sizes={SectionStyles.XL} className={className} containing>
+    <div
+      className={classNames("hero-banner", "vertical-flow", {
+        "hero-banner--hero": hero,
+        "text--center": center,
+      })}
+      {...props}
+    >
+      <Heading as={headingLevel} modifier={HeadingStyles.HEADLINE}>
+        {title}
+      </Heading>
+      {subtitle && <Text modifier={TextStyles.XL}>{subtitle}</Text>}
+      {children}
+    </div>
+  </Section>
+)
+
+export default HeroBanner

package/src/Component/HeroBanner/__snapshots__/PageTitle.stories.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/HeroBanner/HeroBanner Hero smoke-test 1`] = `
+<section class="section section--dark">
+  <figure class="background--image section__full"
+          role="presentation"
+  >
+    <img src="https://picsum.photos/id/56/1642/560?grayscale"
+         alt
+    >
+  </figure>
+  <div class="section--xl">
+    <div class="page-title vertical-flow page-title--hero">
+      <h1 class="headline">
+        Prudential and Reporting Standards for Authorised deposit-taking institutions
+      </h1>
+    </div>
+  </div>
+</section>
+`;
+
+exports[`Components/HeroBanner/HeroBanner HeroBanner smoke-test 1`] = `
+<div class="page-title vertical-flow ">
+  <h1 class="headline">
+    Prudential and Reporting Standards for Authorised deposit-taking institutions
+  </h1>
+  <p class="text--m">
+    Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
+  </p>
+</div>
+`;

package/src/Component/HeroBanner/__snapshots__/PageTitle.stories.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/HeroBanner/HeroBanner Hero smoke-test 1`] = `
+<div class="page section--xl">
+  <div class="page-title vertical-flow page-title--hero">
+    <h1 class="headline"
+        id="always-put-your-best-"
+    >
+      Always put your best foot forward.
+    </h1>
+    <p class="text--xl">
+      Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
+    </p>
+    <button class="button button--dark"
+            type="button"
+    >
+      Button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Components/HeroBanner/HeroBanner HeroBanner smoke-test 1`] = `
+<div class="page section--xl">
+  <div class="page-title vertical-flow">
+    <h1 class="headline"
+        id="always-put-your-best-"
+    >
+      Always put your best foot forward.
+    </h1>
+    <p class="text--xl">
+      Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
+    </p>
+  </div>
+</div>
+`;

package/src/Component/HeroBanner/hero-banner.css

@@ -0,0 +1,51 @@
+/**
+ * Page Title
+ */
+
+@layer components {
+  .hero-banner {
+    position: relative;
+    z-index: 1;
+
+    &.hero-banner--hero {
+      min-block-size: var(--hero-height, 400px);
+      place-content: center;
+    }
+
+    & :is(h1, h2, p) {
+      max-inline-size: var(--container-max-width-narrow);
+      text-wrap: balance;
+    }
+  }
+
+  .hero-banner__inner {
+    display: grid;
+    grid-template-areas: "content" "aside";
+
+    @media (--large-up) {
+      grid-template-areas: "content aside";
+      grid-template-columns: var(--hero-columns, 50% 50%);
+    }
+  }
+
+  .hero-banner__content {
+    align-content: center;
+  }
+
+  .hero-banner__aside {
+    align-content: center;
+
+    &.hero-banner__aside-image {
+      overflow: hidden;
+      position: relative;
+      border-radius: var(--hero-image-radius, var(--border-radius));
+    }
+
+    & img {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+}

package/src/Component/HeroBanner/hero-banner.twig

@@ -0,0 +1,41 @@
+{% set baseClass = 'hero-banner' %}
+{% set background = null %}
+{% for modifier in modifiers %}
+  {% if modifier == "dark" %}
+    {% set background = 'background--reverse' %}
+  {% endif %}
+  {% if modifier == "off-white" %}
+    {% set background = 'background--alt' %}
+  {% endif %}
+  {% if modifier == "light" %}
+    {% set background = 'background--primary' %}
+  {% endif %}
+{% endfor %}
+{% set classes = [
+  baseClass,
+  'page',
+  highlight ? baseClass~'--hero' : null,
+  background ? background : null,
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<div{{ attributes }}>
+  <div class="hero-banner__inner">
+    <div class="hero-banner__content vertical-flow section--xl">
+      {{ title }}
+      {% if subtitle %}
+        <div class="text--lede">{{ subtitle }}</div>
+      {% endif %}
+      {{ link }}
+    </div>
+    {% if linkList %}
+      <div class="hero-banner__aside">
+        {{ linkList }}
+      </div>
+    {% elseif image %}
+      <div class="hero-banner__aside hero-banner__aside-image">
+        {{ image }}
+      </div>
+    {% endif %}
+  </div>
+</div>

package/src/Component/HeroBanner/twig/hero-banner-story.twig

@@ -0,0 +1,19 @@
+{%  extends "../hero-banner.twig" %}
+{% set title %}
+  {% include '@mixtape/Atom/Heading/heading.twig' with { title: title.title, as: "h1" } only %}
+{% endset %}
+{% if link %}
+  {% set link %}
+    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title, more: true } only %}
+  {% endset %}
+{% endif %}
+{% if linkList %}
+  {% set linkList %}
+    {% include '@mixtape/Component/LinkList/link-list.twig' with { items: linkList.items } only %}
+  {% endset %}
+{% endif %}
+{% if image %}
+  {% set image %}
+    {% include '@mixtape/Atom/Image/image.twig' with { src: image.src } only %}
+  {% endset %}
+{% endif %}

package/src/Component/InPageAlert/Elements/InPageAlert.ts

@@ -0,0 +1,87 @@
+/**
+ * @file InPageAlerts
+ *
+ * When a InPageAlert is closed the id is written to local storage.
+ * This is checked as the page is re-rendered, if a InPageAlert with the same ID is
+ * created it will be removed from the dom.
+ */
+
+import { makeAnchor, createElement } from "../../../Utility/utilities"
+
+export default class InPageAlert extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+  }
+
+  connectedCallback(): void {
+    this.id = this.id || this.generatedId()
+    if (this.localStorage) {
+      this.controller.abort()
+      this.remove()
+      return
+    }
+    const { signal }: AbortController = this.controller
+    this.close?.addEventListener("click", this.handleClose, { signal })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+    this.close.remove()
+  }
+
+  /**
+   * Handle close button click event.
+   */
+  handleClose = (): void => {
+    this.controller.abort()
+    this.remove()
+    this.localStorage = "true"
+    const newEvent: CustomEvent<{ id: string; target: InPageAlert }> =
+      new CustomEvent("InPageAlert-close", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          id: this.id,
+          target: this,
+        },
+      })
+    this.dispatchEvent(newEvent)
+  }
+
+  get localStorage(): string {
+    return localStorage.getItem(this.id)
+  }
+
+  set localStorage(value: string) {
+    localStorage.setItem(this.id, value)
+  }
+
+  get close(): HTMLButtonElement {
+    let closeBtn: HTMLButtonElement = this.querySelector(".icon--close")
+    if (!closeBtn) {
+      closeBtn = createElement(
+        `<button class="icon icon--close" aria-controls="${this.id}" aria-label="Close InPageAlert" type="button"></button>`,
+      ) as HTMLButtonElement
+      this.appendChild(closeBtn)
+    }
+    return closeBtn
+  }
+
+  generatedId(): string {
+    const id = `mx-alert-${Math.floor(Math.random() * Math.floor(10000))}`
+    return makeAnchor(id, 20)
+  }
+}
+
+customElements.define("mx-closable-alert", InPageAlert)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-closable-alert": InPageAlert
+  }
+}

package/src/Component/InPageAlert/InPageAlert.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./in-page-alert.twig"
+import "./in-page-alert.css"
+import "./Elements/InPageAlert"
+import { MessageTypes } from "../../enums"
+
+type InPageAlertArgs = {
+  type?: MessageTypes
+  id?: string
+  closable?: boolean
+}
+
+const meta: Meta<InPageAlertArgs> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    type: { options: Object.values(MessageTypes), control: "radio" },
+    id: {
+      control: "text",
+      description: "Set an id to get stable localStorage entry.",
+    },
+    closable: { control: "boolean" },
+  },
+}
+
+export default meta
+type Story = StoryObj<InPageAlertArgs>
+
+export const InPageAlert: Story = {}
+
+export const Closable: Story = {
+  args: {
+    closable: true,
+  },
+}

package/src/Component/InPageAlert/InPageAlert.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./InPageAlert"
+import "./in-page-alert.css"
+import { MessageTypes } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: (
+      <p>
+        <b>Something happened.</b> And if you&apos;d like to know what,{" "}
+        <a href="#">Click here</a>.
+      </p>
+    ),
+  },
+  argTypes: {
+    type: { options: Object.values(MessageTypes), control: "radio" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const InPageAlert: Story = {}
+
+export const Warning: Story = {
+  args: {
+    type: MessageTypes.WARNING,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    type: MessageTypes.ERROR,
+  },
+}
+
+export const Success: Story = {
+  args: {
+    type: MessageTypes.SUCCESS,
+  },
+}

package/src/Component/InPageAlert/InPageAlert.tsx

@@ -0,0 +1,50 @@
+import { JSX, PropsWithChildren, useId } from "react"
+import classNames from "classnames"
+import useLocalStorage from "../../Utility/Hooks/useLocalStorage"
+import { MessageTypes } from "../../enums"
+
+type InPageAlertProps = PropsWithChildren & {
+  type?: MessageTypes
+  id?: string
+  closable?: boolean
+}
+
+const InPageAlert = ({
+  children,
+  id,
+  type = MessageTypes.INFO,
+  closable,
+}: InPageAlertProps): JSX.Element => {
+  const uniqueId: string = id || useId()
+  const [messageVisible, setMessageVisible] = useLocalStorage({
+    key: uniqueId,
+    initialValue: true,
+  })
+
+  return (
+    <>
+      {messageVisible && (
+        <div
+          id={uniqueId}
+          className={classNames("message", {
+            [`message--${type}`]: type,
+            icon: type,
+            [`icon--${type}`]: type,
+          })}
+        >
+          {children}
+          {closable && (
+            <button
+              className={classNames("icon", "icon--close")}
+              onClick={() => setMessageVisible(false)}
+              aria-label={`Close ${type} message`}
+              type="button"
+            ></button>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+export default InPageAlert

package/src/Component/InPageAlert/README.md

@@ -0,0 +1,27 @@
+# In Page Alert
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/in-page-alert.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Components/InPageAlert/in-page-alert.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+JSX components are available for use with React.
+
+- JSX import: `import { InPageAlert } from 'pnx-mixtape/InPageAlert';`
+
+**Custom Element**
+
+This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.
+
+- ES6 import: `import '@pnx-mixtape/mxds/InPageAlert/Elements/InPageAlert';`

package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.ts.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/InPageAlert Closable smoke-test 1`] = `
+<mx-closable-alert class="message message--"
+                   id="unique-0"
+>
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
+  <button class="icon icon--close"
+          aria-controls="unique-0"
+          aria-label="Close InPageAlert"
+          type="button"
+  >
+  </button>
+</mx-closable-alert>
+`;
+
+exports[`Components/InPageAlert InPageAlert smoke-test 1`] = `
+<div class="message message--">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
+</div>
+`;

package/src/Component/InPageAlert/__snapshots__/InPageAlert.stories.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/InPageAlert Error smoke-test 1`] = `
+<div id=":r2:"
+     class="message message--error icon icon--error"
+>
+  <p>
+    <b>
+      Something happened.
+    </b>
+    And if you'd like to know what,
+    <a href="#">
+      Click here
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`Components/InPageAlert InPageAlert smoke-test 1`] = `
+<div id=":r0:"
+     class="message message--info icon icon--info"
+>
+  <p>
+    <b>
+      Something happened.
+    </b>
+    And if you'd like to know what,
+    <a href="#">
+      Click here
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`Components/InPageAlert Success smoke-test 1`] = `
+<div id=":r3:"
+     class="message message--success icon icon--success"
+>
+  <p>
+    <b>
+      Something happened.
+    </b>
+    And if you'd like to know what,
+    <a href="#">
+      Click here
+    </a>
+    .
+  </p>
+</div>
+`;
+
+exports[`Components/InPageAlert Warning smoke-test 1`] = `
+<div id=":r1:"
+     class="message message--warning icon icon--warning"
+>
+  <p>
+    <b>
+      Something happened.
+    </b>
+    And if you'd like to know what,
+    <a href="#">
+      Click here
+    </a>
+    .
+  </p>
+</div>
+`;

package/src/Component/InPageAlert/in-page-alert.css

@@ -0,0 +1,89 @@
+/**
+ * Messages
+ */
+
+@layer defaults {
+  mx-closable-alert {
+    display: block;
+  }
+}
+
+@layer elements {
+  .message {
+    display: grid;
+    gap: var(--gap-s);
+    padding-block: var(--spacing-xxs);
+    padding-inline: var(--spacing-s);
+    border: 1px solid;
+    background-color: var(--background, var(--colour-background-alt));
+    color: var(--foreground, var(--colour-foreground));
+    border-radius: var(--border-radius);
+
+    &:has(.icon--close) {
+      grid-template-columns: auto min-content;
+      grid-template-areas: "content close";
+    }
+
+    &:is(.icon, :has(.icon--close)) {
+      --icon-size: 1.25rem;
+
+      & .message__content {
+        grid-area: content;
+      }
+    }
+
+    &.icon {
+      grid-template-columns: min-content auto;
+      grid-template-areas: "icon content";
+
+      &::before {
+        grid-area: icon;
+        background-size: contain;
+      }
+
+      &:has(.icon--close) {
+        grid-template-columns: min-content auto min-content;
+        grid-template-areas: "icon content close";
+      }
+    }
+
+    & a {
+      color: inherit;
+    }
+
+    &.message--status,
+    &.message--info {
+      --foreground: var(--colour-info-foreground);
+      --background: var(--colour-info-background);
+    }
+
+    &.message--success {
+      --foreground: var(--colour-success-foreground);
+      --background: var(--colour-success-background);
+    }
+
+    &.message--error {
+      --foreground: var(--colour-error-foreground);
+      --background: var(--colour-error-background);
+    }
+
+    &.message--warning {
+      --foreground: var(--colour-warning-foreground);
+      --background: var(--colour-warning-background);
+    }
+
+    & .icon--close {
+      --icon-size: 1rem;
+
+      grid-area: close;
+      appearance: none;
+      inline-size: var(--spacing-l);
+      block-size: var(--spacing-l);
+      padding: 0;
+      border: 0;
+      background-color: transparent;
+      justify-content: end;
+      color: inherit;
+    }
+  }
+}

package/src/Component/InPageAlert/in-page-alert.twig

@@ -0,0 +1,18 @@
+{% if closable %}
+<mx-closable-alert class="message message--{{ type }}{% if type %} icon icon--{{ type }}{% endif %}"{% if id %} id="{{ id ~ type }}"{% endif %}>
+  <div class="message__content">
+    {% block content %}
+      <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
+    {% endblock %}
+  </div>
+</mx-closable-alert>
+{% else %}
+  <div class="message message--{{ type }}{% if type %} icon icon--{{ type }}{% endif %}"{% if id %} id="{{ id ~ type }}"{% endif %}>
+    <div class="message__content">
+      {% block content %}
+        <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
+      {% endblock %}
+    </div>
+  </div>
+{% endif %}
+