-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add @sb1/ scope to all packages
BREAKING CHANGE: All packages have been renamed to add the @sb1 scope. See links [1] and [2] to read more about package scopes. Unfortunately this requires you update both your dependencies in `package.json` and all `import` or `require` statements in your code. Also, you unfortunately have to upgrade all FFE packages at once due to dependency between packages. If you are on the latest version prior to this breaking change the upgrade should be a matter of updating `package.json` with new package names and versions, and updating your imports. To help find the proper package versions you can either browse to the packages you need or check out the list of Git tags either on Github [3] or by cloning the repository and running the `git tag` command. All package versions get a tag in the format _package@version_. Update your `package.json` with the latest package version and add the @sb1 scope to the package name: ```diff - "ffe-core": "11.0.2", + "@sb1/ffe-core": "11.0.2", ``` Scoped packages all get put in a subdirectory in `node_modules/`. In our case packages will be put in the `node_modules/@sb1/` directory. If your build depends on file paths (for instance for copying fonts) you need to update that path to include the scope. The directory structure also means you have to update your imports, both in Less and in JavaScript. Using `less-plugin-npm-import`: ```diff - @import 'npm://ffe-core/less/ffe'; + @import 'npm://@sb1/ffe-core/less/ffe'; ``` Using Webpack: ```diff - @import '~ffe-core/less/ffe'; + @import '~@sb1/ffe-core/less/ffe'; ``` Using plain old paths: ```diff - @import '../path/to/node_modules/ffe-core/less/ffe'; + @import '../path/to/node_modules/@sb1/ffe-core/less/ffe'; ``` JavaScript `import`: ```diff - import { ActionButton } from 'ffe-buttons-react'; + import { ActionButton } from '@sb1/ffe-buttons-react'; ``` JavaScript `require`: ```diff - const { ActionButton } = require('ffe-buttons-react').default; + const { ActionButton } = require('@sb1/ffe-buttons-react').default; ``` [1]: https://docs.npmjs.com/misc/scope [2]: https://docs.npmjs.com/getting-started/scoped-packages [3]: https://github.com/sparebank1/designsystem/tags
- Loading branch information
Showing
97 changed files
with
514 additions
and
1,563 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,21 @@ | ||
| # eslint-config-ffe-base | ||
| # @sb1/eslint-config-ffe-base | ||
|
|
||
| Recommended eslint-config used for ffe-components. Based on eslint-config-airbnb, but without any styling rules. | ||
| Recommended eslint config used for FFE components. Based on eslint-config-airbnb, but without any styling rules. | ||
|
|
||
| If you create react-components your should use eslint-config-ffe | ||
|
|
||
| ## Usage | ||
|
|
||
| Install npm module | ||
| ## Install | ||
|
|
||
| ```bash | ||
| npm i -D eslint eslint-config-ffe-base eslint-plugin-import | ||
| npm install --save-dev eslint @sb1/eslint-config-ffe-base eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y | ||
| ``` | ||
|
|
||
| Create .eslintsrc and extend this config. | ||
| ## Usage | ||
|
|
||
| Create `.eslintsrc` in the same directory as your `package.json` and extend this config: | ||
|
|
||
| ```json | ||
| { | ||
| "extends": "ffe-base" | ||
| "extends": "@sb1/ffe-base" | ||
| } | ||
| ``` | ||
|
|
||
| ## Utvikling og bidrag | ||
|
|
||
| For informasjon om utvikling og bidrag, vennligst se | ||
| [CONTRIBUTE.md](***REMOVED***) | ||
| NB: If you are using React see `@sb1/eslint-config-ffe`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,21 @@ | ||
| # ffe-eslint-config | ||
| # @sb1/eslint-config-ffe | ||
|
|
||
| Recommended eslint-config used for ffe-components. Based on eslint-config-airbnb, but without any styling rules. | ||
| Recommended eslint config used for FFE components. Based on eslint-config-airbnb, but without any styling rules. | ||
|
|
||
| ## Usage | ||
|
|
||
| Install npm module | ||
| ## Install | ||
|
|
||
| ```bash | ||
| npm i -D eslint eslint-config-ffe eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y | ||
| npm install --save-dev eslint @sb1/eslint-config-ffe eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y | ||
| ``` | ||
|
|
||
| Create .eslintsrc and extend this config. | ||
| ## Usage | ||
|
|
||
| Create `.eslintsrc` in the same directory as your `package.json` and extend this config: | ||
|
|
||
| ```json | ||
| { | ||
| "extends": "ffe" | ||
| "extends": "@sb1/ffe" | ||
| } | ||
| ``` | ||
|
|
||
| If you are not using React see eslint-config-ffe-base. | ||
|
|
||
| ## Utvikling og bidrag | ||
|
|
||
| For informasjon om utvikling og bidrag, vennligst se | ||
| [CONTRIBUTE.md](***REMOVED***) | ||
| NB: If you are not using React see `@sb1/eslint-config-ffe-base`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,19 @@ | ||
| # FFE Stylelint Config | ||
| # @sb1/stylelint-config-ffe | ||
|
|
||
| A shareable stylelint configuration object for FFE components | ||
|
|
||
| ## Usage | ||
| ## Install | ||
|
|
||
| ```bash | ||
| npm install --save-dev stylelint @sb1/stylelint-config-ffe | ||
| ``` | ||
| $ npm install stylelint-config-ffe --save-dev | ||
| ``` | ||
|
|
||
| or | ||
|
|
||
| ``` | ||
| $ yarn add stylelint-config-ffe --dev | ||
| ``` | ||
| ## Usage | ||
|
|
||
| Your project's `.stylelintrc`: | ||
| Create `.stylelintrc` in the same directory as your `package.json` and extend this config: | ||
|
|
||
| ``` | ||
| ```json | ||
| { | ||
| "extends": "stylelint-config-ffe" | ||
| "extends": "@sb1/stylelint-config-ffe" | ||
| } | ||
| ``` | ||
|
|
||
| ## Utvikling og bidrag | ||
|
|
||
| For informasjon om utvikling og bidrag, vennligst se | ||
| [CONTRIBUTE.md](***REMOVED***) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,12 @@ | ||
| # ffe-accordion-react | ||
| # @sb1/ffe-accordion-react | ||
|
|
||
| ## Install | ||
|
|
||
| ```bash | ||
| npm install --save @sb1/ffe-accordion-react | ||
| ``` | ||
| $ npm install --save ffe-accordion-react | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
| ```javascript | ||
| import { WhiteAccordion, AccordionItem } from 'ffe-accordion-react'; | ||
|
|
||
| <WhiteAccordion> | ||
| <AccordionItem title="Some header text, always visible"> | ||
| <p>Some more content, only shown when expanded.</p> | ||
| </AccordionItem> | ||
| </WhiteAccordion> | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| #### `Accordion` | ||
|
|
||
| * `children` (AccordionItem) | ||
|
|
||
| The AccordionItems contained by the Accordion. | ||
|
|
||
| #### `AccordionItem` | ||
|
|
||
| * `title` (renderable - string | component | array of components) | ||
|
|
||
| The accordion header content. May be a simple string or a more complex construction of components. | ||
|
|
||
| * `children` (renderable - string | component | array of components) | ||
|
|
||
| The content shown when the accordion is expanded. May be a simple string or a more complex construction of components. | ||
|
|
||
| * `isOpen` (boolean) | ||
|
|
||
| Enables you to override whether an item is open by default | ||
|
|
||
| * `onOpen` (function) | ||
| ## Usage | ||
|
|
||
| Callback function when accordion opens | ||
|
|
||
| * `onClose` (function) | ||
|
|
||
| Callback function when accordion close | ||
|
|
||
| * `ignoredNodeNames` (array of strings) | ||
|
|
||
| Some scenarios might involve having a form element (e.g a checkbox) inside the accordion item. In these cases you don't | ||
| want a click event on the checkbox to propagate to the underlying element and thus cause the accordion to expand. Avoid | ||
| this by passing the HTML node names you want to ignore clicks on (e.g. ['INPUT', 'LABEL']) | ||
|
|
||
| * `hasNestedCollapse` (boolean) | ||
|
|
||
| Set this property to true if you're sending in children that contains (or may contain) `react-collapse/Collapse` | ||
| element(s). Defaults to false. | ||
|
|
||
| ## Test | ||
|
|
||
| Use npm linking to test local changes in your own project | ||
|
|
||
| ``` | ||
| sudo npm link | ||
| ``` | ||
|
|
||
| and in your own project: | ||
|
|
||
| ``` | ||
| npm link ffe-accordion-react | ||
| ``` | ||
| Run Styleguidist from the repository root to see live examples and documentation, | ||
| or see the markdown files next to the component code in `src/`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,15 @@ | ||
| # ffe-accordion | ||
| # @sb1/ffe-accordion | ||
|
|
||
| ## Intro | ||
| ## Install | ||
|
|
||
| Et klassisk trekkspillelement for bruk i SpareBank1. | ||
|
|
||
| Kommer i to varianter - se dokumentasjon på [***REMOVED***](***REMOVED***) | ||
|
|
||
| Denne komponenten inneholder ikke vendorprefixes, og krever at konsumentapplikasjonen bruker et verktøy for å automatisk tillegge disse i byggesteget. | ||
|
|
||
| ## Bruk | ||
|
|
||
| `@import ../node_modules/ffe-accordion/less/ffe-accordion` i en less-fil i ditt prosjekt. | ||
|
|
||
| Merk at ffe-core er en avhengighet for ffe-accordion (se peerDependencies i package.json). | ||
|
|
||
| Se readme for ffe-core for øvrig informasjon. | ||
|
|
||
| ## React-komponent | ||
| ```bash | ||
| npm install --save @sb1/ffe-accordion | ||
| ``` | ||
|
|
||
| Det finnes en ferdig React-implementasjon av denne komponenten i pakka [`ffe-accordion-react`](***REMOVED***) | ||
| ## Usage | ||
|
|
||
| ## Oppgradering til versjon 3 | ||
| ### Version 2.x | ||
| ```javascript | ||
| <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue"> | ||
| <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue" | ||
| viewBox="0 0 200 200" width="150" height="150" x="150" y="600"> | ||
| <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path> | ||
| </svg> | ||
| <span>What is Lorem Ipsum?</span> | ||
| </button> | ||
| ``` | ||
| ### Version 3 | ||
| Versjon 3 har nå en wrapper rundt innholdet til knappen. Dette er fordi Firefox ikke støtter flexbox(flex) på knapper direkte(https://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox#24319292). | ||
| Wrapperen har klassenavn `ffe-accordion-item__toggler-content` og er satt opp med horisontal flexbox. | ||
| ```javascript | ||
| <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue"> | ||
| <span class="ffe-accordion-item__toggler-content"> | ||
| <span class="ffe-accordion-item__title">What is Lorem Ipsum?</span> | ||
| <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--blue" | ||
| viewBox="0 0 200 200" width="150" height="150" x="150" y="600"> | ||
| <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| ``` | ||
| #### Multiline | ||
| Hvis du har behov for flere linjer i knappen er `ffe-accordion-item__title` satt opp med vertikal flexbox. | ||
| ```javascript | ||
| <button class="ffe-accordion-item__toggler ffe-accordion-item__toggler--blue"> | ||
| <span class="ffe-accordion-item__toggler-content"> | ||
| <span class="ffe-accordion-item__title"> | ||
| <span>Where does it come from?</span> | ||
| <span class="ffe-small-text">Pluto is not a planet they said...</span> | ||
| </span> | ||
| <svg class="ffe-accordion-item__icon ffe-accordion-item__icon--open" | ||
| viewBox="0 0 200 200" width="150" height="150" x="150" y="600"> | ||
| <path d="M16.171 42c-4.143 0-8.285 1.575-11.427 4.706-6.325 6.284-6.325 16.5 0 22.804l84.028 83.762c6.305 6.304 16.55 6.304 22.875 0l83.61-83.264c6.324-6.283 6.324-16.5 0-22.803-6.306-6.303-16.556-6.303-22.881 0L100.238 119.1 27.624 46.725C24.482 43.573 20.334 42 16.19 42h-.019z"></path> | ||
| </svg> | ||
| </span> | ||
| </button> | ||
| ```less | ||
| @import 'path/to/node_modules/@sb1/ffe-accordion/less/ffe-accordion'; | ||
| ``` | ||
|
|
||
| See also `@sb1/ffe-accordion-react`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.