diff --git a/docs/first_use_installing_and_configuring.md b/docs/first_use_installing_and_configuring.md index 2a16c9f..c89473a 100644 --- a/docs/first_use_installing_and_configuring.md +++ b/docs/first_use_installing_and_configuring.md @@ -1,3 +1,49 @@ # Installing and configuring -> TODO +The easiest way to install this bundle is using Composer +```bash +$ composer require lin3s/pattern-library-builder +``` +Register the Bundle in your AppKernel +```php +$bundles = [ + ... + new Lin3sPatternLibraryBuilderBundle(), + ... +]; +``` +Configure the basic settings in your `config.yml`: +```yaml +lin3s_pattern_library_builder: + theme: + title: "My title" + description: "My description" + custom_styles: + color_primary: "#000" + logo: ~ + javascripts: [] + stylesheets: [] + templates_config_files_path: "%kernel.root_dir%/PatternLibrary" +``` +Add routes to access the Design System in your routing file: +```yaml +_pattern_library: + resource: "@Lin3sPatternLibraryBuilderBundle/Resources/config/routing.yml" +``` +Create a folder in your AppBundle kernel root named `PatternLibrary` to store the Pattern Library configuration +and create an index configuration file. +```yaml +status: 0 +description: '

This is the icon card component description.

' +renderer: + type: homepage + options: + sections: [] +``` + +Install assets +```bash +$ bin/console assets:install --symlink +``` + +Now you can navigate to `http://localhost:8000/design-system` and see the index page. diff --git a/docs/first_use_your_first_page.md b/docs/first_use_your_first_page.md index c695fff..d481b1b 100644 --- a/docs/first_use_your_first_page.md +++ b/docs/first_use_your_first_page.md @@ -1,3 +1,41 @@ # Your first page -For this example we are showing +For rendering components in the Pattern Library first you should create a YAML in your `PatternLibrary` folder for the +desired item to render. It is recommended to have separated folders inside PatternLibrary folder for separating +different kind of components. + +For example: +```yaml +status: 2 +description: '

This is the button atom description.

' +renderer: + type: twig + options: + template: 'atoms/button.html.twig' + preview_parameters: + primary: + content: Hola + link: + content: Hola 2 + modifier: orange + href: test + tag: a +``` + +Then, reference it in `index.yml` on the desired section with the corresponding slug based on directory structure: +```yaml +status: 0 +description: '

This is the icon card component description.

' +renderer: + type: homepage + options: + sections: + - + title: 'Atoms' + description: 'These are the atoms' + items: + - + slug: 'architecture/atoms/button' +``` + +The component to render must exists in the current views folder of your application. diff --git a/docs/symfony_configuration_reference.md b/docs/symfony_configuration_reference.md index db0f495..525e6a6 100644 --- a/docs/symfony_configuration_reference.md +++ b/docs/symfony_configuration_reference.md @@ -1,3 +1,18 @@ # Symfony Configuration reference -> TODO +These are the parameters accepted by Pattern Library Builder + +```yaml +lin3s_pattern_library_builder: + theme: + title: "My title" + description: "My description" + custom_styles: + color_primary: "#000" + logo: ~ + # Javascript files to be injected to the pattern library + javascripts: [] + # CSS files to be injected to the pattern library + stylesheets: [] + templates_config_files_path: "%kernel.root_dir%/PatternLibrary" +```