diff --git a/data/migratedPages.yml b/data/migratedPages.yml index b1e7f3d10e..5e93063fa2 100644 --- a/data/migratedPages.yml +++ b/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" diff --git a/general/development/policies.md b/general/development/policies.md index 46ffaf49cf..8b9d29761d 100644 --- a/general/development/policies.md +++ b/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). ::: diff --git a/general/development/process/peer-review.md b/general/development/process/peer-review.md index c81b304029..257b2cd5b9 100644 --- a/general/development/process/peer-review.md +++ b/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 diff --git a/general/development/tools/component-library.md b/general/development/tools/component-library.md new file mode 100644 index 0000000000..fa34f24d83 --- /dev/null +++ b/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.