amber components
v1.2 - still work in progress(bar)
琥珀設計系統的Web組件實現。
該存儲庫主要針對開發人員和貢獻者，以提供適當的文檔和StyleGuide，請參閱https://amber.bitrock.it。
您可以在現場故事書中預覽/嘗試組件。
$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/components可選地，您可能需要添加Web組件polyfills來支持Firefox和Edge的先前版本。
$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjs您可以根據環境以不同的方式導入項目中的組件：
作為帶有捆綁器的JavaScript文件（例如WebPack）
// myfile.js
// import the whole components library
import AmberComponents from '@amber-ds/components' ;
// import a single component (button for instance)
import '@amber-ds/components/button' ,作為JavaScript從HTML提交的，沒有捆綁
<!-- mypage.html -->
<!-- import the whole components library -->
< script type =" module " src =" ./node_modules/@amber-ds/components/index.js " > </ script >
<!-- import a single component (button for instance) -->
< script type =" module " src =" ./node_modules/@amber-ds/components/button.js " > </ script >然後在.html文件或產生HTML輸出的模板：
<!-- myfile.html -->
< amber-button priority =" primary " >
Get ready!
< amber-button > 簡要說明開發體系結構，堆棧以及如何處理代碼：
WebComponents規範是一個傘術語，用於將自定義元素V1和Shadow dom V1規範分組。這些瀏覽器API可讓您編寫W3C符合W3C的自定義HTML標籤，其功能，範圍的樣式和標記在瀏覽器和前端框架上工作。
為了獲得更好的代碼彈性，所有組件均以打字稿編寫，以利用靜態類型檢查和裝飾器語法。它也用於將代碼轉移到ES-2015。
由於Web組件作為標準，無法處理渲染機制和數據結合，因此我們採用LIT-HTML及其Web組件類別限製作為本庫中每個comoponent的基礎層。
triggerEvent(element, name, ?detail) - 創建新自定義事件並使用可選detail對象派遣的包裝器。冒泡已經打開。為了快速為新的琥珀色組件創建所需（但最少）的樣板，我們包括一個小的CLI實用程序：
$ yarn create:component [name]
--- or ---
$ npm run create:component [name]這將在./src/components文件夾中創建一個子文件夾，並使用兩個必需的啟動文件index.ts和style.scss創建一個子文件夾。
您只需要在./src/components/library.ts文件中導入新組件即可將其鏈接到Dev＆Build Processess中。
您可以使用SASS定義每個組件的樣式，組件文件夾中的主index.scss文件由編譯器處理，然後將其註入Shadow dom中。
如果您需要共享樣式，混音或組件之間的其他任何內容，則應創建一個分離的文件，然後將其導入需要的地方。
目前，僅通過Jest測試了核心庫（ src/libs文件夾中的普通.ts文件）。
通過現場重新加載故事書以開發模式啟動項目
$ yarn start使用簡單的HTML頁面以開發模式啟動項目
$ yarn dev在./dist文件夾中創建靜態故事書構建
$ yarn build:storybook運行單元測試
$ yarn test:unit該項目遵循一個簡單的分支政策：
master只包含穩定的代碼，不應直接更新developmentgh-pages ，部署了分散的靜態故事書構建文件不要將development直接合併到master中（它是管理員鎖... ），請始終發送PR進行審查。
在嘗試在NPM上發布新版本的新版本之前，首先通過此清單運行：
package.json中的增量版本號。 JSON文件以下SEMVER指南如果版本包含一個新組件：
webpack.config.js ，這是創建獨立模塊所必需的/src/components/library.ts文件中，這樣，當用戶導入整個庫時，它將可以訪問/src/elements.ts數組中添加組件標籤名稱，這在某些情況下可以幫助vue.js兼容性當將新的顛簸版本推向master分支時，它將使用Bitrock-Admin帳戶自動在NPM上觸發部署（所有自動支票通過）。
此存儲庫中的代碼和Amber Design Sytem徽標是由MIT許可證發布的Bitrock UI工程團隊分發的。
