@iamproperty/components 5.7.0 → 5.7.1-beta3

package/README.md

@@ -1,105 +1,4 @@
 
 # Getting started
 
-## Using the component library or assets
-
-### Install
-```
-npm install @iamproperty/components --save
-```
-
-### Usage
-
-#### Static assets
-The assets folder can be used independently from the Vue components so that they can be used with other frameworks. With the compiled files available to use out of the box alongside the source files that can be configured.
-```
-<link href="./node_modules/@iamproperty/components/assets/css/style.min.css" as="style" />
-<script src="./node_modules/@iamproperty/components/assets/js/scripts.bundle.min.js"></script>
-```
-
-##### Sass files
-```
-@import './node_modules/@iamproperty/components/assets/sass/_func.scss';
-@import './node_modules/@iamproperty/components/assets/sass/_corefiles_.scss';
-```
-##### JS modules
-```
-import navbar from @iamproperty/components/assets/js/modules/navbar.js
-```
-
-#### Vue application
-```
-import '@iamproperty/components/assets/css/core.min.css'
-import '@iamproperty/components/dist/style.css'
-
-import * as iamkey from '@iamproperty/components'
-for (const [key, value] of Object.entries(iamkey)) {
-  Vue.component(key, value)
-}
-```
-Components then can be used as described in the design system documentation.
-```
-<Header title="Page title" image="../../assets/image.jpeg"><p>Page description</p></Header>
-```
-
-## Contributing to iam key
-
-### Create code branch
-Firstly the clone the [repo](https://github.com/iamproperty/iamproperty.github.io) from GitHub and create a new branch from the develop branch using the agreed naming convention (FEG-99/feature/task-title).
-
-### Commands
-
-#### Install node packages
-```
-npm install --force
-```
-
-#### Development local web server
-
-Setup a local web server to run the documentation site this will allow you to modify the code and check it.
-
-```
-npm run dev 
-```
-OR
-```
-npm run watch
-```
-The second command will run dev but will also watch for sass and typescript files being changed which would then update the CSS and JavaScript files.
-
-#### Run unit tests
-Unit tests should be ran after changing any code to make sure it has no unwanted side effects.
-```
-npm run test
-```
-**This command is ran when a PR is created to give the reviewer confidence that their hasn't been any unforeseen side effects**
- 
-#### Run visual regression test
-**This command should be ran while the local web server is still running. The localURL variable in package.json file needs to match the local web server.**
-```
-npm run visual
-```
-The visual regression tests may differ greatly if the tests are running on a windows when the the snapshots where created on Mac.
-  
-#### Prepare for pull request
-**This command should be ran while the local web server is still running. The localURL variable in package.json file needs to match the local web server.**
-
-Before creating a pull request we want to make sure assets get re-compiled and audited so that we can keep an eye on file sizes. We also want to recreate visual regression snapshots. This will create a number of files that will be added to the pull request to help the reviewers make judgement on the changes.
-
-```
-npm run pull-request
-```
-
-### Create Pull request into develop
-You will not have the ability to commit changes directly to the main or develop branches and a pull request will have to be created. This pull request should follow the format dictated in the .github/pull_request_template.md file. The pull reguest should always be into develop unless you are doing a hotfix in a release branch. At least one approver is needed but for more complex bits of work more can be added. The pull request will run the unit tests and create a test environment in netlify for the reviewer to help complete the review. Once the pull request is closed the netlify development environment will get updated.
-
-https://iamproperty-dev.netlify.app/ 
-
-## Create release
-The creation of an npm package is done through GitHub actions when a GitHub release is created. Releases can be made from any branch but it should come from the master branch.
-<a  href="https://www.npmjs.com/package/@iamproperty/components"  target="_blank">npm registry package</a>.
-
-## Update the documentation site
-To update the documentation site you need to create a pull request from develop or a release branch into master. Once the PR is approved an automatic build and deploy process using GitHub actions will be created.
-
-https://iamproperty.github.io/
+The iamkey design system is a collection of assets, rules and guidelines to follow. These rules and guidelines are not designed to be restrictive but are there to help the developer/designer. The main aim is to increase the consistency across the digital estate while also lifting the design standards to a higher level.

package/assets/css/components/tabs.css

@@ -1 +1 @@
-*:has(>iam-tabs){container-type:inline-size}iam-tabs details:not([open]){padding-bottom:0}iam-tabs::part(next-button){display:none}@container (width > 62em){iam-tabs.tabs--guided::part(next-button){position:absolute;top:9.375rem;right:0;display:block}}iam-tabs.tabs--guided::part(next-button):not(:hover){background:var(--colour-success)}.tabs:not(.admin-panel){position:relative}.tabs:not(.admin-panel) .tabs__links__wrapper{position:relative;margin:0 auto 2rem}.tabs:not(.admin-panel) .tabs__links__wrapper:before{content:"";display:block;position:absolute;left:auto;right:-1.5rem;top:0;bottom:1px;width:2.5rem;background:var(--tabs-gradient, linear-gradient(90deg, color(from var(--colour-canvas) a98-rgb r g b/0), color(from var(--colour-canvas) a98-rgb r g b/1)));z-index:1000;pointer-events:none}.tabs:not(.admin-panel) .tabs__links__wrapper:after{content:"";left:50%;position:relative;height:1px;width:100vw;background-color:var(--colour-border);transform:translate(-50%, 0);display:block;clear:both}.tabs.admin-panel .tabs__links__wrapper:after{display:none}.tabs__links{scroll-snap-type:x mandatory}.tabs__links{padding-bottom:3px;position:relative;display:flex;flex-wrap:nowrap;width:auto;margin:0 -1.5rem;overflow-y:clip;overflow-x:auto}.tabs__links::-webkit-scrollbar{display:none}.tabs__links .link{white-space:nowrap;scroll-snap-align:start;scroll-margin-left:var(--container-padding)}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:bold;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0;padding:1.5rem 1.5rem .5rem 1.5rem;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn).disabled{cursor:not-allowed;opacity:.4}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";bottom:0;left:50%;height:3px;width:100%;transform:translate(-50%, 0) scale(0, 0);background:var(--colour-info);transition:transform .4s}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled).focus:after{transform:translate(-50%, 0) scale(0.6, 1)}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true],:active,.current):after{transform:translate(-50%, 0) scale(1, 1)}.tabs__links .link:not(.text-decoration-none):not(.btn):is([aria-pressed=true],.current){pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important}@media(min-width: 576px){.tabs__links .link:not(.text-decoration-none):not(.btn){padding:2rem 2rem .5rem 2rem}.tabs__links__wrapper{margin:0 auto 2.5rem}}.admin-panel :is(.admin-panel__links,.tabs__links){padding:0;margin:calc(var(--padding-top)*-1) calc(var(--padding-x)*-1) var(--padding-top) calc(var(--padding-x)*-1);border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;display:flex;flex-direction:column;border-bottom:1px solid var(--colour-border);overflow:hidden;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}.admin-panel :is(.admin-panel__links,.tabs__links):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links){flex-direction:row}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0;padding:1rem var(--padding-x);width:100%;position:relative;text-align:left;flex-grow:1;--gradient-direction: -90deg;background-color:var(--colour-success)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not([class*=bg-]){background-image:linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):is(.current,[aria-pressed=true]){color:var(--colour-primary-theme)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(.current,[aria-pressed=true]){background:var(--colour-canvas-2) !important}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(:first-child){border-left:1px solid var(--colour-border) !important}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:is(.current,[aria-pressed=true]){pointer-events:none}@media screen and (min-width: 36em){:host(.tabs--inline) .tabs__links{margin:0;justify-content:center}:host(.tabs--inline) .tabs__links__wrapper:after{width:100%}}/*# sourceMappingURL=tabs.css.map */
+*:has(>iam-tabs){container-type:inline-size}iam-tabs details:not([open]){padding-bottom:0}iam-tabs::part(next-button){display:none}@container (width > 62em){iam-tabs.tabs--guided::part(next-button){position:absolute;top:9.375rem;right:0;display:block}}iam-tabs.tabs--guided::part(next-button):not(:hover){background:var(--colour-success)}.tabs:not(.admin-panel){position:relative}.tabs:not(.admin-panel) .tabs__links__wrapper{position:relative;margin:0 auto 2rem}.tabs:not(.admin-panel) .tabs__links__wrapper:after{content:"";left:50%;position:relative;height:1px;width:100vw;background-color:var(--colour-border);transform:translate(-50%, 0);display:block;clear:both}.tabs.admin-panel .tabs__links__wrapper:after{display:none}.tabs__links{scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(to right, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);mask-image:linear-gradient(to right, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)}.tabs__links{padding-bottom:3px;position:relative;display:flex;flex-wrap:nowrap;width:auto;margin:0 -1.5rem;overflow-y:clip;overflow-x:auto}.tabs__links::-webkit-scrollbar{display:none}.tabs__links .link{white-space:nowrap;scroll-snap-align:start;scroll-margin-left:var(--container-padding)}.tabs__links .link:not(.text-decoration-none):not(.btn){--is-current: 0;font-weight:bold;font-family:var(--font-heading);font-size:1.125rem;cursor:pointer;margin:0;padding:1.5rem 1.5rem .5rem 1.5rem;display:inline-block}.tabs__links .link:not(.text-decoration-none):not(.btn).disabled{cursor:not-allowed;opacity:.4}.tabs__links .link:not(.text-decoration-none):not(.btn):last-child{margin-inline-end:0}.tabs__links .link:not(.text-decoration-none):not(.btn):after{position:absolute;content:"";bottom:0;left:50%;height:3px;width:100%;transform:translate(-50%, 0) scale(0, 0);background:var(--colour-info);transition:transform .4s}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):hover:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):focus:after,.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled).focus:after{transform:translate(-50%, 0) scale(0.6, 1)}.tabs__links .link:not(.text-decoration-none):not(.btn):not(.disabled):is([aria-pressed=true],:active,.current):after{transform:translate(-50%, 0) scale(1, 1)}.tabs__links .link:not(.text-decoration-none):not(.btn):is([aria-pressed=true],.current){pointer-events:none;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary-theme) !important}@media(min-width: 576px){.tabs__links .link:not(.text-decoration-none):not(.btn){padding:2rem 2rem .5rem 2rem}.tabs__links__wrapper{margin:0 auto 2.5rem}}.admin-panel :is(.admin-panel__links,.tabs__links){padding:0;margin:calc(var(--padding-top)*-1) calc(var(--padding-x)*-1) var(--padding-top) calc(var(--padding-x)*-1);border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;display:flex;flex-direction:column;border-bottom:1px solid var(--colour-border);overflow:hidden;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary)}.admin-panel :is(.admin-panel__links,.tabs__links):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links){flex-direction:row}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0;padding:1rem var(--padding-x);width:100%;position:relative;text-align:left;flex-grow:1;--gradient-direction: -90deg;background-color:var(--colour-success)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not([class*=bg-]){background-image:linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):is(.current,[aria-pressed=true]){color:var(--colour-primary-theme)}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(.current,[aria-pressed=true]){background:var(--colour-canvas-2) !important}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):after{display:none}@media screen and (min-width: 36em){.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn){margin:0}.admin-panel :is(.admin-panel__links,.tabs__links) .link:not(.text-decoration-none):not(.btn):not(:first-child){border-left:1px solid var(--colour-border) !important}}.admin-panel :is(.admin-panel__links,.tabs__links) .link:is(.current,[aria-pressed=true]){pointer-events:none}@media screen and (min-width: 36em){:host(.tabs--inline) .tabs__links{margin:0;justify-content:center}:host(.tabs--inline) .tabs__links__wrapper:after{width:100%}}/*# sourceMappingURL=tabs.css.map */

package/assets/css/components/tabs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/components/tabs.scss","../../sass/_functions/mixins.scss"],"names":[],"mappings":"AAEA,iBAEE,2BAIA,6BACE,iBAIJ,4BACE,aAIA,0BADF,yCAEI,kBACA,aACA,QACA,eAGJ,qDACE,iCAGF,wBACE,kBAEA,8CACE,kBACA,mBAEA,qDACE,WACA,cACA,kBACA,UACA,cACA,MACA,WACA,aACA,4JACA,aACA,oBAGF,oDACE,WACA,SACA,kBACA,WACA,YACA,sCACA,6BACA,cACA,WAQF,8CACE,aAMN,aAEE,6BAGF,aACE,mBACA,kBACA,aACA,iBACA,WACA,iBACA,gBACA,gBAEA,gCACE,aAGF,mBACE,mBACA,wBACA,4CAGF,wDACE,gBACA,iBACA,gCACA,mBACA,eACA,SACA,mCACA,qBAEA,iEACE,mBACA,WAGF,mEACE,oBAGF,8DACE,kBACA,WACA,SACA,SACA,WACA,WACA,yCACA,8BACA,yBAIA,yPAGE,2CAKF,sHACE,yCAIJ,yFACE,oBACA,wFAKN,yBAEI,wDACE,6BAIJ,sBACE,sBAMJ,mDAEE,UACA,0GAEA,8BACA,+BACA,aACA,sBACA,6CACA,gBACA,uEAEA,yDACE,aC7KA,oCD+JJ,mDAmBI,oBAGF,8FACE,SAEA,8BACA,WACA,kBACA,gBACA,YACA,6BACA,uCAEA,gHACE,oGAGF,+HACE,kCAGF,gIACE,6CAGF,oGACE,aC7MF,oCDqLF,8FA6BI,SAEA,gHAEE,uDAKN,0FACE,oBC5NA,oCDiOF,kCACE,SACA,uBAEF,iDACE","file":"tabs.css"}
+{"version":3,"sourceRoot":"","sources":["../../sass/components/tabs.scss","../../sass/_functions/mixins.scss"],"names":[],"mappings":"AAEA,iBAEE,2BAIA,6BACE,iBAIJ,4BACE,aAIA,0BADF,yCAEI,kBACA,aACA,QACA,eAGJ,qDACE,iCAGF,wBACE,kBAEA,8CACE,kBACA,mBAEA,oDACE,WACA,SACA,kBACA,WACA,YACA,sCACA,6BACA,cACA,WAQF,8CACE,aAMN,aAEE,6BAEA,sFACA,8EAGF,aACE,mBACA,kBACA,aACA,iBACA,WACA,iBACA,gBACA,gBAEA,gCACE,aAGF,mBACE,mBACA,wBACA,4CAGF,wDACE,gBACA,iBACA,gCACA,mBACA,eACA,SACA,mCACA,qBAEA,iEACE,mBACA,WAGF,mEACE,oBAGF,8DACE,kBACA,WACA,SACA,SACA,WACA,WACA,yCACA,8BACA,yBAIA,yPAGE,2CAKF,sHACE,yCAIJ,yFACE,oBACA,wFAKN,yBAEI,wDACE,6BAIJ,sBACE,sBAMJ,mDAEE,UACA,0GAEA,8BACA,+BACA,aACA,sBACA,6CACA,gBACA,uEAEA,yDACE,aClKA,oCDoJJ,mDAmBI,oBAGF,8FACE,SAEA,8BACA,WACA,kBACA,gBACA,YACA,6BACA,uCAEA,gHACE,oGAGF,+HACE,kCAGF,gIACE,6CAGF,oGACE,aClMF,oCD0KF,8FA6BI,SAEA,gHAEE,uDAKN,0FACE,oBCjNA,oCDsNF,kCACE,SACA,uBAEF,iDACE","file":"tabs.css"}