README

简介

Alpaca 设计系统的组件库，旨在加快在 Magento 2 商店中进行设计工作的流程，通过在简化的、前端开发者友好的环境中创建每个 UI 元素、模块和视图。

此组件库建立在 Fractal.js 之上。

使用此代码不需要具备 Magento 2 的经验。

演示/预览

https://alpaca-components.now.sh/

安装

• 使用 yarn 安装依赖
• 运行 gulp fractal:start 以启动 Fractal.js 开发服务器
• 如果需要生成静态文件（例如部署），则运行 gulp fractal:build

如何在 Alpaca 之上创建组件库

只需在 Magento 之外工作即可。

1. 将 package.json、gulpfile.js、.eslintignore、.eslintrc、.sass-lint.yml、.stylelintrc、.gitignore 文件复制粘贴到新项目
2. 创建一个包含指向父组件库路径的数组的 modules.json 文件。在大多数情况下，它将看起来像这样

   ["../../snowdog/module-alpaca-components"]

3. 根据 Alpaca 组件库中的结构自定义或添加新文件
4. 运行 gulp fractal:start

目录结构

• components 目录是您将导入到 Magento 2 主题中的目录。
• docs 和 public 仅用于本地环境，您将找到示例图像、测试库、实用样式等。

核心概念

组件架构

组件分为 4 组

1. 全局
   • 包含其他组件可以在任何地方使用的代码，例如，字体、图标或 SASS 变量。
2. 元素
   • 最小的 UI 部分，例如，按钮
   • 元素不能依赖于其他元素
   • 元素不应有任何布局
3. 模块
   • 更复杂的 UI 部分，如搜索表单或页眉
   • 通过添加布局和上下文将元素或模块组合在一起
4. 视图
   • 将元素或模块组合在一起，添加最终布局和上下文
   • 您应该能够将其展示给客户/产品经理，作为可用商店的预览
   • 不应创建任何新的 UI 元素，所有内容都需要可重复使用。

命名

• 组名需要是复数
• 组件名需要是单数
• 组件名不应与任何项目或布局中的位置相关
  • 不好：filters
  • 好：dropdown-list 或 collapsible-list
• 避免使用 box、block、item、info、text、cms，尤其是组合在一起，例如 info-box
• 避免以类似的方式命名两个组件，例如 cms-subcategories 和 cms-subcategory

颜色

• 默认情况下，Alpaca 组件使用最多 7 级灰度

SASS 变量命名

遵循类似 BEM 的命名约定，即当您的组件名称为 button 时，您正在创建一个用于 padding 的变量，它应该是 $button__padding。

与 BEM 一样，您不允许构建像 $button__icon__padding 这样的结构，它应该是 $button__icon-padding。

与伪类和伪选择器相关的变量应被视为BEM元素 $button__color-hover。

此外，变量中允许使用BEM修饰符 $button__padding--secondary，甚至可以像这样堆叠它们 $button__padding--secondary--dark。

要将变量针对特定断点，请在变量名称末尾添加 \@breakpoint，例如 $button__padding\@medium。始终使用 small、medium、large 等来描述断点。

正确的变量命名示例

$swatch__option-border
$swatch__option-border-color-hover

$swatch__option-image-height\@large

$swatch__option-size--small
$swatch__option-image-width--small
$swatch__option-image-width--small\@large

无障碍性

您可以通过运行 gulp a11y 来启用无障碍性测试运行开发服务器。

如果在某些视图中没有无障碍性消息，请转到组件配置并在其中取消注释 preview: '@docs-only-styles'。