Merge pull request #305 from sharidas/component_library

[doc] Migrate component library

Author: andrewnicols

data/migratedPages.yml

@@ -70,6 +70,9 @@ Community_credits:
 Component_Lead_Review:
 - filePath: "/general/development/process/integration/clr.md"
   slug: "/general/development/process/integration/clr"
+Component_library:
+- filePath: "/general/development/tools/component-library.md"
+  slug: "/general/development/tools/component-library"
 Contributing_a_translation:
 - filePath: "/general/development/process/translation/contributing.md"
   slug: "/general/development/process/translation/contributing"
@@ -1197,9 +1200,6 @@ Moodle_4.0_developer_update:
 Moodle_4.0_release_notes:
 - filePath: "/general/releases/4.0.md"
   slug: "/general/releases/4.0"
-Moodle_and_PHP:
-- filePath: "/general/development/policies/php.md"
-  slug: "/general/development/php"
 Moodle_App:
 - filePath: "/general/app.md"
   slug: "/general/app"
@@ -1392,6 +1392,9 @@ Moodle_Mobile_3.9.5_release_notes:
 Moodle_Penetration_Testing:
 - filePath: "/general/development/process/security/penetration-testing.md"
   slug: "/general/development/process/security/penetration-testing"
+Moodle_and_PHP:
+- filePath: "/general/development/policies/php.md"
+  slug: "/general/development/php"
 Moodle_libraries_credits:
 - filePath: "/general/community/credits/thirdpartylibs.md"
   slug: "/general/community/credits/thirdpartylibs"

general/development/policies.md

@@ -114,7 +114,7 @@ It includes components from both Twitter Bootstrap, and from Moodle, and it disp
 
 :::info
 
-For more about this, see [Component library](https://docs.moodle.org/dev/Component_library).
+For more about this, see [Component library](./tools/component-library.md).
 
 :::
 

general/development/process/peer-review.md

@@ -69,7 +69,7 @@ Ensure that:
 
 ### Component library
 
-Any improvement or new feature that introduces UI features to Moodle core from Moodle 4.0 onwards must be documented within the [Component library](https://docs.moodle.org/dev/Component_library).
+Any improvement or new feature that introduces UI features to Moodle core from Moodle 4.0 onwards must be documented within the [Component library](../tools/component-library.md).
 
 This applies to any feature introduced or updated from Moodle 4.0 onwards, which:
 
@@ -80,7 +80,7 @@ This applies to any feature introduced or updated from Moodle 4.0 onwards, which
 
 Ensure that any new User Interface feature in Moodle 4.0 or later which matches the above criteria:
 
-- Is documented in the [Component library](https://docs.moodle.org/dev/Component_library)
+- Is documented in the [Component library](../tools/component-library.md)
 - Includes examples of usage
 - Has appropriate descriptions
 - Respects all Moodle-supplied themes

general/development/tools/component-library.md

@@ -0,0 +1,60 @@
+---
+title: Component library
+tags:
+  - Coding_guidelines
+  - Core_development
+  - Developer_tools
+  - Guidelines_for_contributors
+  - Interfaces
+  - Moodle_User_Interface_Guidelines
+  - Processes
+  - Themes
+  - Usability
+---
+
+The Component Library is a developer tool provided to help identify frequently-used user interface components, and encourage their re-use.
+
+It includes components from both Twitter Bootstrap, and from Moodle, and it displays these features using your current Moodle theme.
+
+This should help you to work on your theme features, bringing together most of Moodle into one convenient location.
+
+The library is a tool for visual designers, front-end developers, UX developers and anybody creating core Moodle code or Moodle extensions. Its use will allow you to create user interfaces more efficiently.
+
+## Getting started
+
+### Where is the Component Library?
+
+The library is built right into Moodle, but is only shown to developers. You can find it in your site by navigating to Site administration -> Development -> UI Component library.
+
+If you cannot see "UI Component library" then you will need to build it first - see below.
+
+You can also browse the Component Library online http://componentlibrary.moodle.com/admin/tool/componentlibrary/docspage.php/library/getting-started/
+
+### Building the Component Library
+
+The Component Library is written using the same Hugo tooling that the Twitter Bootstrap framework uses. It also includes the Bootstrap libraries for the version of Bootstrap used in Moodle.
+
+The library is built from your console, and you will need to install the same NodeJS dependencies that we use for many of our other development features.
+
+See our [Grunt](https://docs.moodle.org/dev/Grunt) documentation for information on how to install these dependencies.
+
+Once you have installed the NodeJS dependencies you can then use the [grunt](http://gruntjs.com/) tooling to build the library.:
+
+```console title="Building the component library"
+grunt componentlibrary
+```
+
+Simples! What could be easier!?
+
+### What should be documented
+
+The main aim of this library is to improve consistency of the user interface to provide a better user (and developer) experience by re-using components across Moodle.
+
+Whenever a new Moodle feature is created or updated, the building blocks for the UI of the feature should be documented in this library.
+
+The initial aim is to document any new UI feature which:
+
+- is made available in the `core` component, or any core subsystem
+- is made available for re-use in a plugin which offers sub-plugins
+
+The documentation of other features will also be welcomed.