@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/README.md

@@ -2,6 +2,11 @@
 
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
+> [!NOTE]
+> This is taken from the 3.x branch of [mixtape (monorepo)](https://github.com/previousnext/mixtape).
+> Refer to that repo if you need to make changes the original packages. This repo is dedicated to
+> the `@pnx-mixtape/mxds` package.
+
 ### The PreviousNext Design System: [mixtape.pnx.io](https://mixtape.pnx.io/)
 
 A design system helps align teams around how products are designed and built.
@@ -32,7 +37,7 @@ Dependencies:
 
 - [postcss-design-tokens](https://www.npmjs.com/package/postcss-design-tokens)
 
-Add the [tokens](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/tokens.js)
+Add the [tokens](https://github.com/previousnext/mxds/blob/main/src/tokens.js)
 and override the values or just copy/paste from Mixtape and update;
 
 _eg. project-tokens.mjs_
@@ -49,7 +54,7 @@ tokens.newThing = "somethingNew"
 export default tokens
 ```
 
-The [custom properties](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/_constants.css)
+The [custom properties](https://github.com/previousnext/mxds/blob/main/src/constants.css)
 can also be included via @import or just copy/paste if you only need a limited set.
 
 This file should be included in the browser.
@@ -65,7 +70,7 @@ _eg. project-constants.css_
 }
 ```
 
-The [custom media](https://github.com/previousnext/mixtape/blob/master/packages/constants/src/_custom-media.css)
+The [custom media](https://github.com/previousnext/mxds/blob/main/src/_custom-media.css)
 should also be included, and is required in EVERY css file that uses them. PostCSS replaces this,
 so there is no need to worry about duplication.
 
@@ -140,6 +145,8 @@ similar result.
 
 ### Importing React components
 
+TODO
+
 ### Importing and extending javascript Elements
 
 Some packages also provide vanilla javascript to manage simple user interactions. You can include
@@ -216,24 +223,39 @@ This project uses Docker to manage node versions and build tasks.
 First clone this repository;
 
 ```
-git clone git@github.com:previousnext/mixtape.git
-cd mixtape
+git clone git@github.com:previousnext/mxds.git
+cd mxds
 ```
 
 Install project dependcencies:
 
 ```
-make install
+nvm install
+npm install
 ```
 
-Then you can up the Docker container and start watching for changes with;
+Then you can start watching for changes with;
 
 ```
-make up
+npm run dev
 ```
 
 From here you can access the Storybook instance and get started.
 
+### Linting and Test coverage
+
+Before pushing a PR make sure your changes are linted and pass the test coverage.
+
+```
+npm run format
+npm run lint
+npm run test-storybook
+```
+
+These will all run by Github Actions on the PR but it's better to catch issues first.
+
+Integration testing with Vitest will be added in a future release.
+
 ### Publishing changes
 
 When you are ready to publish your change, commit your work and
@@ -248,27 +270,19 @@ commit messages and versioning. You will be walked through an interactive
 questionnaire.
 
 Select the type of change from Feat (Feature), Fix, Docs, Style, Refactor,
-Perf, Test, and Chore. This will be used in the commitizen changelog and helps
-to determine the version when publishing to npm.
+Perf, Test, and Chore. This will be used in the commitizen changelog.
 
 Then create a pull request, wait for builds to pass, and get the code reviewed.
 
 Once approved, merge the PR.
 
-CircleCI will go through and bump the version number to a "prerelease" version.
-It will change the version number in package.json, commit the change to git and publish to NPM.
-
-When you are ready for a full release, merge the `master` branch into `releases`.
-This will trigger a deploy in CircleCI to update [mixtape.pnx.io](https://mixtape.pnx.io/).
-Approval is then required to publish to the [NPM registry](https://www.npmjs.com/org/pnx-mixtape).
-
-### Test coverage
-
-Jest tests cover basic functionality and accessibility. They are run on
-all Pull Requests and Master/Releases merges. You can run locally with;
+When you are ready for a full release, from `main`, run;
 
 ```
-make test
+npm version patch -m 'chore: tag %s'
 ```
 
-Any package that adds javascript requires test coverage.
+To bump the version number in `package.json`, then tag the commit and push to `origin`.
+
+This will trigger a deploy in CircleCI to update [mixtape.pnx.io](https://mixtape.pnx.io/).
+Approval is then required to publish to the [NPM registry](https://www.npmjs.com/package/@pnx-mixtape/mxds).

package/dist/build/accordion.css

@@ -1,98 +1 @@
-/**
- * Accordion
- */
-
-@layer design-system.defaults {
-    details summary {
-      list-style-type: none;
-    }
-
-      details summary:is(::-webkit-details-marker, ::marker) {
-        display: none;
-        content: "";
-      }
-
-  :is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
-    display: block;
-  }
-    :where(:is(div.mx-accordion, mx-accordiondiv)) .mx-accordion__toggle {
-      -webkit-appearance: none;
-         -moz-appearance: none;
-              appearance: none;
-      color: inherit;
-      font-size: inherit;
-      background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-      background: initial;
-      border: medium none currentcolor;
-      border: initial;
-      padding: 0;
-      padding: initial;
-    }
-
-    :where(:is(div.mx-accordion, mx-accordiondiv)) .mx-accordion__content[inert] {
-      display: none;
-    }
-}
-
-@layer design-system.components {
-  .mx-accordion__title {
-    margin-block-end: var(--spacing-m);
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--spacing-s);
-    align-items: center;
-  }
-
-  .mx-accordions__toggle-all {
-    margin-inline-start: auto;
-  }
-    .mx-accordion .mx-accordion__toggle {
-      cursor: pointer;
-      inline-size: 100%;
-    }
-
-    .mx-accordion:is(> h2, > h3, > h4, > h5, > h6) {
-      all: unset;
-    }
-        .mx-accordion:is([open], [data-open="true"]) > .mx-accordion__toggle .mx-icon--chevron-down {
-          transform: rotate(180deg);
-        }
-
-  .mx-accordion--divided {
-    border-block-end: 1px solid
-      var(--line-colour, var(--colour-border));
-    border-block-end: var(--line-width, 1px) solid
-      var(--line-colour, var(--colour-border));
-  }
-
-    .mx-accordion--divided .mx-accordion__toggle {
-      padding-block: var(--vertical-padding, var(--spacing-xxs));
-      padding-inline: 0;
-      padding-inline: var(--horizontal-padding, 0);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: var(--spacing-xxs);
-    }
-      .mx-accordion--divided:is([open], [data-open="true"]) > .mx-accordion__content {
-        border-block-start: 1px solid
-          var(--line-colour, var(--colour-border));
-        border-block-start: var(--line-width, 1px) solid
-          var(--line-colour, var(--colour-border));
-        padding-block: var(--vertical-padding, var(--spacing-xxs));
-        padding-inline: 0;
-        padding-inline: var(--horizontal-padding, 0);
-      }
-}
-
-/**
- * Print stylesheet
- */
-
-@media print {
-    .mx-accordion .mx-accordion__content {
-      display: block !important;
-    }
-}
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCOztJQUVBO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7SUFHRTtNQUNFLGVBQWU7TUFDZixpQkFBaUI7SUFDbkI7O0lBRUE7TUFDRSxVQUFVO0lBQ1o7UUFJSTtVQUNFLHlCQUF5QjtRQUMzQjs7RUFLTjtJQUNFOzhDQUMwQztJQUQxQzs4Q0FDMEM7RUFtQjVDOztJQWpCRTtNQUNFLDBEQUEwRDtNQUMxRCxpQkFBNEM7TUFBNUMsNENBQTRDO01BQzVDLGFBQWE7TUFDYiw4QkFBOEI7TUFDOUIsbUJBQW1CO01BQ25CLHVCQUF1QjtJQUN6QjtNQUdFO1FBQ0U7a0RBQzBDO1FBRDFDO2tEQUMwQztRQUMxQywwREFBMEQ7UUFDMUQsaUJBQTRDO1FBQTVDLDRDQUE0QztNQUM5QztBQUdOOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJhY2NvcmRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBBY2NvcmRpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIGRldGFpbHMge1xuICAgICYgc3VtbWFyeSB7XG4gICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG5cbiAgICAgICY6aXMoOjotd2Via2l0LWRldGFpbHMtbWFya2VyLCA6Om1hcmtlcikge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIDppcyhteC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdiwgbXgtYWNjb3JkaW9ubW9iaWxlKSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICA6d2hlcmUoOmlzKGRpdi5teC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdikpIHtcbiAgICAmIC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xuICAgICAgYm9yZGVyOiBpbml0aWFsO1xuICAgICAgcGFkZGluZzogaW5pdGlhbDtcbiAgICB9XG5cbiAgICAmIC5teC1hY2NvcmRpb25fX2NvbnRlbnRbaW5lcnRdIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtYWNjb3JkaW9uX190aXRsZSB7XG4gICAgbWFyZ2luLWJsb2NrLWVuZDogdmFyKC0tc3BhY2luZy1tKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZmxvdzogcm93IHdyYXA7XG4gICAgZ2FwOiB2YXIoLS1zcGFjaW5nLXMpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtYWNjb3JkaW9uc19fdG9nZ2xlLWFsbCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxuXG4gIC5teC1hY2NvcmRpb24ge1xuICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIH1cblxuICAgICY6aXMoPiBoMiwgPiBoMywgPiBoNCwgPiBoNSwgPiBoNikge1xuICAgICAgYWxsOiB1bnNldDtcbiAgICB9XG5cbiAgICAmOmlzKFtvcGVuXSwgW2RhdGEtb3Blbj1cInRydWVcIl0pIHtcbiAgICAgICYgPiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgICAmIC5teC1pY29uLS1jaGV2cm9uLWRvd24ge1xuICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAubXgtYWNjb3JkaW9uLS1kaXZpZGVkIHtcbiAgICBib3JkZXItYmxvY2stZW5kOiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgJiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1ob3Jpem9udGFsLXBhZGRpbmcsIDApO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBnYXA6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICB9XG5cbiAgICAmOmlzKFtvcGVuXSwgW2RhdGEtb3Blbj1cInRydWVcIl0pIHtcbiAgICAgICYgPiAubXgtYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgICAgYm9yZGVyLWJsb2NrLXN0YXJ0OiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1hY2NvcmRpb24ge1xuICAgICYgLm14LWFjY29yZGlvbl9fY29udGVudCB7XG4gICAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxufVxuIl19 */
+@layer design-system.defaults{details summary{list-style-type:none}:is(details summary):is(::-webkit-details-marker,::marker){display:none;content:""}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile){display:block}:where(:is(div.mx-accordion,mx-accordiondiv)) .mx-accordion__toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;font-size:inherit;background:transparent none repeat 0 0 / auto auto padding-box border-box scroll;background:initial;border:medium none currentcolor;border:initial;padding:0;padding:initial}}@layer design-system.components{.mx-accordion__title{margin-block-end:var(--spacing-m);display:flex;flex-flow:row wrap;gap:var(--spacing-s);align-items:center}.mx-accordions__toggle-all{margin-inline-start:auto}.mx-accordion .mx-accordion__toggle{cursor:pointer;inline-size:100%}.mx-accordion:is(>h2,>h3,>h4,>h5,>h6){all:unset}.mx-accordion>.mx-accordion__content{display:none;opacity:0;overflow:hidden}:is(.mx-accordion:is([open],[data-open=true])>.mx-accordion__toggle) .mx-icon--chevron-down{transform:rotate(180deg)}.mx-accordion:is([open],[data-open=true])>.mx-accordion__content{opacity:1;display:block}@starting-style{.mx-accordion:is([open],[data-open=true])>.mx-accordion__content{opacity:0;display:block}}.mx-accordion--divided{border-block-end:1px solid var(--line-colour, var(--colour-border));border-block-end:var(--line-width, 1px) solid var(--line-colour, var(--colour-border))}.mx-accordion--divided .mx-accordion__toggle{padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:0;padding-inline:var(--horizontal-padding, 0);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xxs)}.mx-accordion--divided:is([open],[data-open=true])>.mx-accordion__content{border-block-start:1px solid var(--line-colour, var(--colour-border));border-block-start:var(--line-width, 1px) solid var(--line-colour, var(--colour-border));padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:0;padding-inline:var(--horizontal-padding, 0)}}@media print{.mx-accordion .mx-accordion__content{display:block!important}}

package/dist/build/accordion.entry.js

@@ -1,83 +1 @@
-import "./chunks/Accordion-DSze7pxN.js";
-class AccordionGroup extends HTMLElement {
-  constructor() {
-    super();
-    this.handleClick = ({ target }) => {
-      if (target === this.expandTrigger) {
-        this.handleExpand();
-      }
-      if (target === this.collapseTrigger) {
-        this.handleCollapse();
-      }
-    };
-    this.handleExpand = () => {
-      this.accordions.forEach((detail) => detail.open = true);
-      this.expandTrigger.disabled = true;
-      this.collapseTrigger.disabled = false;
-    };
-    this.handleCollapse = () => {
-      this.accordions.forEach((detail) => detail.open = false);
-      this.expandTrigger.disabled = false;
-      this.collapseTrigger.disabled = true;
-    };
-    this.handleToggle = () => {
-      this.expandTrigger.disabled = [...this.accordions].every(
-        (details) => details.open === true
-      );
-      this.collapseTrigger.disabled = [...this.accordions].every(
-        (details) => details.open !== true
-      );
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return;
-    this.collapseTrigger.disabled = true;
-    const { signal } = this.controller;
-    this.addEventListener("click", this.handleClick, {
-      signal
-    });
-    this.accordions.forEach(
-      (details) => details.addEventListener("toggle", this.handleToggle, {
-        signal
-      })
-    );
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  get accordions() {
-    const accordions = this.querySelectorAll("details");
-    if (!accordions.length) {
-      throw new Error(
-        `${this.localName} must contain at least one <details> element.`
-      );
-    }
-    return accordions;
-  }
-  get expandTrigger() {
-    const trigger = this.querySelector(
-      "button[data-expand]"
-    );
-    if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button data-expand> element.`
-      );
-    }
-    return trigger;
-  }
-  get collapseTrigger() {
-    const trigger = this.querySelector(
-      "button[data-collapse]"
-    );
-    if (!trigger) {
-      throw new Error(
-        `${this.localName} must contain a <button data-collapse> element.`
-      );
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-accordion-group", AccordionGroup);
-//# sourceMappingURL=accordion.entry.js.map
+import"./chunks/Accordion-RtUfbsTy.js";class e extends HTMLElement{constructor(){super(),this.handleClick=({target:e})=>{e===this.expandTrigger&&this.handleExpand(),e===this.collapseTrigger&&this.handleCollapse()},this.handleExpand=()=>{this.accordions.forEach((e=>e.open=!0)),this.expandTrigger.disabled=!0,this.collapseTrigger.disabled=!1},this.handleCollapse=()=>{this.accordions.forEach((e=>e.open=!1)),this.expandTrigger.disabled=!1,this.collapseTrigger.disabled=!0},this.handleToggle=()=>{this.expandTrigger.disabled=[...this.accordions].every((e=>!0===e.open)),this.collapseTrigger.disabled=[...this.accordions].every((e=>!0!==e.open))},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.accordions||!this.expandTrigger||!this.collapseTrigger)return;this.collapseTrigger.disabled=!0;const{signal:e}=this.controller;this.addEventListener("click",this.handleClick,{signal:e}),this.accordions.forEach((t=>t.addEventListener("toggle",this.handleToggle,{signal:e})))}disconnectedCallback(){this.controller.abort()}get accordions(){const e=this.querySelectorAll("details");if(!e.length)throw new Error(`${this.localName} must contain at least one <details> element.`);return e}get expandTrigger(){const e=this.querySelector("button[data-expand]");if(!e)throw new Error(`${this.localName} must contain a <button data-expand> element.`);return e}get collapseTrigger(){const e=this.querySelector("button[data-collapse]");if(!e)throw new Error(`${this.localName} must contain a <button data-collapse> element.`);return e}}customElements.define("mx-accordion-group",e);