@pnx-mixtape/mxds 0.0.2 → 0.0.4

package/README.md

@@ -19,7 +19,7 @@ It's like our greatest hits.
 ## Installation
 
 ```
-npm install @pnx-mixtape/mxds/ --save
+npm install @pnx-mixtape/mxds --save
 ```
 
 ## Usage
@@ -35,10 +35,10 @@ Dependencies:
 Add the [tokens](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/tokens.js)
 and override the values or just copy/paste from Mixtape and update;
 
-_eg. project-tokens.js_
+_eg. project-tokens.mjs_
 
 ```js
-const tokens = require("@pnx-mixtape/mxds/c/src/tokens")
+import tokens from "@pnx-mixtape/mxds/tokens"
 
 // Override existing ones;
 tokens.colour.brand.primary = "rgb(0, 92, 250)"
@@ -46,7 +46,7 @@ tokens.colour.brand.primary = "rgb(0, 92, 250)"
 //Add new ones;
 tokens.newThing = "somethingNew"
 
-module.exports = tokens
+export default tokens
 ```
 
 The [custom properties](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/_constants.css)
@@ -57,7 +57,7 @@ This file should be included in the browser.
 _eg. project-constants.css_
 
 ```css
-@import "@pnx-mixtape/mxds/constants.css";
+@import "@pnx-mixtape/mxds/src/constants.css";
 
 :root {
   --my-colour-primary: rgb(0, 92, 250);
@@ -72,7 +72,7 @@ so there is no need to worry about duplication.
 _eg. project-breakpoints.css_
 
 ```css
-@import "@pnx-mixtape/mxds/_custom-media.css";
+@import "@pnx-mixtape/mxds/src/_custom-media.css";
 
 @custom-media --my-breakpoint (width >= "200px");
 ```
@@ -83,7 +83,7 @@ _eg. buttons.css_
 
 ```css
 @import "../project-breakpoints.css";
-@import "@pnx-mixtape/mxds/button.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/button.css";
 ```
 
 Or partially imported;
@@ -92,8 +92,8 @@ _eg. buttons.css_
 
 ```css
 @import "../project-breakpoints.css";
-@import "@pnx-mixtape/mxds/src/Atom/_buttons.css";
-@import "@pnx-mixtape/mxds/src/Atom/_buttons-styles.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/_buttons.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/_buttons-styles.css";
 
 .button--primary {
   --border-radius: 0;
@@ -125,13 +125,13 @@ custom property before a mixtape fallback, you can set it in you project. eg.
 #### Cascade layers
 
 [@layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are used in Mixtape to ensure ease in overriding CSS on a project
-level. If you are importing `@pnx-mixtape/mxds/Atom/base` CSS then the layers are included.
+level. If you are importing `@pnx-mixtape/mxds/src/Atom/base.css` CSS then the layers are included.
 
 If you are only partially importing the base CSS files, then you'll need to manually
 include the layers at the start of your CSS;
 
 ```css
-@layer defaults, layout, elements, components, utilities;
+@layer design-system.defaults, design-system.atoms, design-system.layout, design-system.components, design-system.utilities;
 ```
 
 Any CSS not wrapped in a layer will have higher specificity to Mixtape's CSS.
@@ -149,13 +149,13 @@ setup to run through a bundler like Rollup).
 _eg. project-init.entry.js_
 
 ```js
-import "@pnx-mixtape/mxds/"
+import "@pnx-mixtape/mxds/src/Component/Accordion/Elements/Accordion"
 ```
 
 To customise this javascript we recommend importing and then extending the Class;
 
 ```js
-import Accordion from "@pnx-mixtape/mxds/"
+import Accordion from "@pnx-mixtape/mxds/src/Component/Accordion/Elements/Accordion"
 
 class FancyAccordion extends Accordion {
   constructor(element) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "scripts": {
     "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run dev-vite\" \"npm run dev-storybook\"",
     "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run build-vite\" \"npm run build-storybook\"",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
     "@oddbird/popover-polyfill": "^0.4.3",
-    "@pnx-mixtape/ids-shape": "^0.0.7",
+    "@pnx-mixtape/ids-shape": "^0.0.8",
     "classnames": "^2.5.1",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
@@ -125,7 +125,8 @@
   "exports": {
     ".": "./src/elements.ts",
     "./react": "./src/react.ts",
-    "./*.css": "./dist/*.css",
-    "./tokens": "./src/tokens.js"
+    "./tokens": "./src/tokens.js",
+    "./dist/*": "./dist/build/*",
+    "./src/*": "./src/*"
   }
 }

package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Backgrounds Alt smoke-test 1`] = `
+exports[`Atom/Backgrounds Alt smoke-test 1`] = `
 <div class="spacing--m rich-text vertical-flow  background--alt">
   <blockquote>
     <p>
@@ -33,7 +33,7 @@ exports[`Base/Backgrounds Alt smoke-test 1`] = `
 </div>
 `;
 
-exports[`Base/Backgrounds Backgrounds smoke-test 1`] = `
+exports[`Atom/Backgrounds Backgrounds smoke-test 1`] = `
 <div class="spacing--m rich-text vertical-flow ">
   <blockquote>
     <p>
@@ -66,7 +66,7 @@ exports[`Base/Backgrounds Backgrounds smoke-test 1`] = `
 </div>
 `;
 
-exports[`Base/Backgrounds Reverse smoke-test 1`] = `
+exports[`Atom/Backgrounds Reverse smoke-test 1`] = `
 <div class="spacing--m rich-text vertical-flow  background--reverse">
   <blockquote>
     <p>

package/src/Atom/Background/_background.css

@@ -1,28 +1,7 @@
-/**
- * Colors
- *
- * Colors are defined in the constants package. View the [Constants package](https://github.com/previousnext/mixtape/tree/master/packages/constants) on github.
- *
- * Markup: colors.twig
- *
- * Style guide: base.colors
- */
-
 /**
  * Backgrounds
- *
- * Colors are defined in the constants package. View the [Constants package](https://github.com/previousnext/mixtape/tree/master/packages/constants) on github.
- *
- * .background--alt - Alternative
- * .background--reverse - Reverse
- *
- * Default: false
- *
- * Markup: backgrounds.twig
- *
- * Style guide: base.colors.backgrounds
  */
-@layer defaults {
+@layer design-system.atoms {
   :where([class*="background--"]) {
     background-color: var(--background, var(--colour-background));
     color: var(--foreground, var(--colour-foreground));

package/src/Atom/Blockquote/_blockquote.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   blockquote {
     padding-inline-start: var(--line-gap, var(--gap));
     border-inline-start: var(--line-width, 6px) solid

package/src/Atom/Button/Button.stories.ts

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./button.twig"
+import Component from "./twig/story-button.twig"
 import "./button.css"
 import {
-  AlignmentTypes,
   Button as ButtonType,
   ButtonModifiers,
   ButtonTypes,
@@ -30,8 +29,8 @@ const meta: Meta<ButtonType> = {
     href: { control: "text" },
     disabled: { control: "boolean" },
     // @ts-expect-error The controls follow the shape
-    "icon.icon": { options: Object.values(Icons), control: "select" },
-    "icon.align": { options: Object.values(AlignmentTypes), control: "select" },
+    "iconStart.icon": { options: Object.values(Icons), control: "select" },
+    "iconEnd.icon": { options: Object.values(Icons), control: "select" },
     iconOnly: { control: "boolean" },
   },
 }
@@ -63,9 +62,8 @@ export const Link: Story = {
 
 export const IconButton: Story = {
   args: {
-    icon: {
+    iconEnd: {
       icon: Icons.ARROW_RIGHT,
-      align: AlignmentTypes.END,
     },
   },
 }

package/src/Atom/Button/README.md

@@ -6,13 +6,13 @@
 
 For everything;
 
-`@import '@pnx-mixtape/mxds/button.css';`
+`@import '@pnx-mixtape/mxds/src/Atom/Button/button.css';`
 
 For specifics;
 
 ```css
-@import "@pnx-mixtape/mxds/src/Atom/_buttons.css";
-@import "@pnx-mixtape/mxds/src/Atom/_buttons-styles.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/_buttons.css";
+@import "@pnx-mixtape/mxds/src/Atom/Button/_buttons-styles.css";
 
 .button--primary {
   --border-radius: 0;

package/src/Atom/Button/__snapshots__/Button.stories.ts.snap

@@ -1,41 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Button Button smoke-test 1`] = `
+exports[`Atom/Button Button smoke-test 1`] = `
 <button class="button "
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
 </button>
 `;
 
-exports[`Base/Button IconButton smoke-test 1`] = `
-<button class="button icon icon--arrow-right  icon--end"
+exports[`Atom/Button IconButton smoke-test 1`] = `
+<button class="button "
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
+  <span class="icon icon--arrow-right ">
+  </span>
 </button>
 `;
 
-exports[`Base/Button Link smoke-test 1`] = `
+exports[`Atom/Button Link smoke-test 1`] = `
 <a class="button "
    href="#"
 >
-  Button
+  <span>
+    Button
+  </span>
 </a>
 `;
 
-exports[`Base/Button Primary smoke-test 1`] = `
+exports[`Atom/Button Primary smoke-test 1`] = `
 <button class="button  button--dark"
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
 </button>
 `;
 
-exports[`Base/Button Text smoke-test 1`] = `
+exports[`Atom/Button Text smoke-test 1`] = `
 <button class="button  button--light"
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
 </button>
 `;

package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Button Button smoke-test 1`] = `
+exports[`Atom/Button Button smoke-test 1`] = `
 <button class="button"
         type="button"
 >
@@ -8,7 +8,7 @@ exports[`Base/Button Button smoke-test 1`] = `
 </button>
 `;
 
-exports[`Base/Button Primary smoke-test 1`] = `
+exports[`Atom/Button Primary smoke-test 1`] = `
 <button class="button button--dark"
         type="button"
 >

package/src/Atom/Button/_buttons-styles.css

@@ -2,7 +2,7 @@
  * Buttons
  */
 
-@layer elements {
+@layer design-system.atoms {
   .button--dark {
     --button-line-colour: var(--colour-primary);
     --background: var(--colour-primary);

package/src/Atom/Button/_buttons.css

@@ -2,7 +2,7 @@
  * Buttons
  */
 
-@layer elements {
+@layer design-system.atoms {
   .button {
     --outline-offset: 1px;
     --outline-width: 4px;
@@ -67,5 +67,9 @@
       block-size: 100%;
       mask-size: var(--spacing-s);
     }
+
+    &:has(.icon) {
+      place-content: center;
+    }
   }
 }

package/src/Atom/Button/button.twig

@@ -1,9 +1,7 @@
 {% set baseClass = 'button' %}
 {% set classes = [
   baseClass,
-  icon ? "icon icon--"~icon.icon : null,
   iconOnly ? baseClass~"--icon-only" : null,
-  icon.align ? "icon--"~icon.align : null
 ] %}
 {% for modifier in modifiers %}
   {% set classes = classes|merge([baseClass~"--"~modifier]) %}
@@ -12,12 +10,16 @@
 
 {% if href %}
   <a{{ attributes}} href="{{ href }}">
-   {{ title }}
+    {{ iconStart }}
+    <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
+    {{ iconEnd }}
   </a>
 {% elseif as == 'input' %}
   <input{{ attributes}} type="button" value="{{ title }}"{% if disabled %} disabled{% endif %}>
 {% else %}
   <button{{ attributes}} type="{{ as|default("button") }}"{% if disabled %} disabled{% endif %}>
-    {{ title }}
+    {{ iconStart }}
+    <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
+    {{ iconEnd }}
   </button>
 {% endif %}

package/src/Atom/Button/twig/story-button.twig

@@ -0,0 +1,11 @@
+{% extends "../button.twig" %}
+{% if iconStart %}
+  {% set iconStart %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconStart.icon } only %}
+  {% endset %}
+{% endif %}
+{% if iconEnd %}
+  {% set iconEnd %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconEnd.icon } only %}
+  {% endset %}
+{% endif %}

package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Definition List DefinitionList smoke-test 1`] = `
+exports[`Atom/Definition List DefinitionList smoke-test 1`] = `
 <dl>
   <div>
     <dt>

package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Headings Headings smoke-test 1`] = `
-<h2 class=" ">
+exports[`Atom/Heading Headings smoke-test 1`] = `
+<h2 class>
   Heading
 </h2>
 `;

package/src/Atom/Heading/__snapshots__/Heading.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Heading Heading smoke-test 1`] = `
+exports[`Atom/Typography/Heading Heading smoke-test 1`] = `
 <h2 class
     id="heading"
 >

package/src/Atom/Heading/_headings.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   :is(
       .headline,
       h1,

package/src/Atom/Heading/heading.twig

@@ -1,7 +1,25 @@
+{% set style = null %}
+{% for modifier in modifiers %}
+  {% if modifier == "h1" %}
+    {% set style = 'xxl' %}
+  {% endif %}
+  {% if modifier == "h2" %}
+    {% set style = 'xl' %}
+  {% endif %}
+  {% if modifier == "h3" %}
+    {% set style = 'l' %}
+  {% endif %}
+  {% if modifier == "h4" %}
+    {% set style = 'm' %}
+  {% endif %}
+  {% if modifier == "h5" %}
+    {% set style = 's' %}
+  {% endif %}
+{% endfor %}
 {% set classes = [
-  modifier ? modifier : null,
   excluded ? 'is-excluded' : null,
   srOnly ? 'sr-only' : null,
+  style ? 'heading--'~style : null,
 ] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 

package/src/Atom/Icon/README.md

@@ -4,4 +4,4 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/icon.css';`
+`@import '@pnx-mixtape/mxds/src/Atom/icon/icon.css';`

package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Icon Alignment smoke-test 1`] = `
+exports[`Atom/Icon Alignment smoke-test 1`] = `
 <span class="icon icon--arrow-left icon--end ">
   Message with icon
 </span>
 `;
 
-exports[`Base/Icon Icon smoke-test 1`] = `
+exports[`Atom/Icon Icon smoke-test 1`] = `
 <span class="icon icon--arrow-right ">
 </span>
 `;
 
-exports[`Base/Icon WithText smoke-test 1`] = `
+exports[`Atom/Icon WithText smoke-test 1`] = `
 <span class="icon icon--arrow-right ">
   Message with icon
 </span>

package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Icon Alignment smoke-test 1`] = `
+exports[`Atom/Icon Alignment smoke-test 1`] = `
 <span class="icon icon--arrow-left icon--end">
   Message with icon
 </span>
 `;
 
-exports[`Base/Icon Icon smoke-test 1`] = `
+exports[`Atom/Icon Icon smoke-test 1`] = `
 <span class="icon icon--arrow-right">
 </span>
 `;
 
-exports[`Base/Icon WithText smoke-test 1`] = `
+exports[`Atom/Icon WithText smoke-test 1`] = `
 <span class="icon icon--arrow-right">
   Message with icon
 </span>

package/src/Atom/Icon/_extended-set.css

@@ -3,7 +3,7 @@
 /**
  * Icon - Extended
  */
-@layer elements {
+@layer design-system.atoms {
   @mixin icon attachment;
   @mixin icon blockquote;
   @mixin icon building;

package/src/Atom/Icon/_icon.css

@@ -4,7 +4,7 @@
  * Icon
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon {
     display: inline-flex;
     align-items: center;
@@ -74,7 +74,7 @@
  * Icon - Colours
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon--color-info::before {
     color: var(--colour-info-foreground);
   }
@@ -104,7 +104,7 @@
  * Icon - alignment
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon.icon--end::before {
     order: 2;
   }
@@ -114,7 +114,7 @@
  * Icon - rotate
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon.icon--rotate-90::before {
     rotate: 90deg;
   }
@@ -132,7 +132,7 @@
  * Icon - size
  */
 
-@layer elements {
+@layer design-system.atoms {
   .icon.icon--size-sm::before {
     --icon-size: var(--spacing-s);
   }

package/src/Atom/Image/__snapshots__/Image.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Image Image smoke-test 1`] = `
+exports[`Atom/Image Image smoke-test 1`] = `
 <picture>
   <img src="https://picsum.photos/id/56/558/418?grayscale"
        alt="A picsum image"

package/src/Atom/Image/_image.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   figure {
     margin: 0;
     display: table;

package/src/Atom/Link/Link.stories.ts

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./link.twig"
+import Component from "./twig/story-link.twig"
 import "../_base.css"
-import { AlignmentTypes, Link as LinkType } from "@pnx-mixtape/ids-shape"
+import { Link as LinkType } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
 const meta: Meta<LinkType> = {
@@ -17,8 +17,8 @@ const meta: Meta<LinkType> = {
     download: { control: "boolean" },
     current: { control: "boolean" },
     // @ts-expect-error The controls follow the shape
-    "icon.icon": { options: Object.values(Icons), control: "select" },
-    "icon.align": { options: Object.values(AlignmentTypes), control: "select" },
+    "iconStart.icon": { options: Object.values(Icons), control: "select" },
+    "iconEnd.icon": { options: Object.values(Icons), control: "select" },
   },
 }
 
@@ -27,11 +27,35 @@ type Story = StoryObj<LinkType>
 
 export const Link: Story = {}
 
-export const IconLink: Story = {
+export const More: Story = {
   args: {
-    icon: {
+    more: true,
+    iconEnd: {
       icon: Icons.ARROW_RIGHT,
-      align: AlignmentTypes.END,
+    },
+  },
+}
+
+export const External: Story = {
+  args: {
+    external: true,
+  },
+}
+
+export const Download: Story = {
+  args: {
+    download: true,
+    title: "Download (PDF 12kb)",
+    iconStart: {
+      icon: Icons.DOWNLOAD,
+    },
+  },
+}
+
+export const IconLink: Story = {
+  args: {
+    iconStart: {
+      icon: Icons.LINK,
     },
   },
 }