amber components

琥珀色组件

琥珀设计系统的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

WebComponents规范是一个伞术语，用于将自定义元素V1和Shadow dom V1规范分组。这些浏览器API可让您编写W3C符合W3C的自定义HTML标签，其功能，范围的样式和标记在浏览器和前端框架上工作。

打字稿

为了获得更好的代码弹性，所有组件均以打字稿编写，以利用静态类型检查和装饰器语法。它也用于将代码转移到ES-2015。

基于lit-html＆litelemt

由于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文件）。

可用的NPM任务

通过现场重新加载故事书以开发模式启动项目

$ yarn start

使用简单的HTML页面以开发模式启动项目

$ yarn dev

在./dist文件夹中创建静态故事书构建

$ yarn build:storybook

运行单元测试

$ yarn test:unit

分支政策

该项目遵循一个简单的分支政策：

• master只包含稳定的代码，不应直接更新
• 编写进化或实验代码的development
• gh-pages ，部署了分散的静态故事书构建文件

不要将development直接合并到master中（它是管理员锁... ），请始终发送PR进行审查。

发布新版本

在尝试在NPM上发布新版本的新版本之前，首先通过此清单运行：

• 测试通过（PRS需要）
• 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工程团队分发的。