Docs(web): Link feature flags documentation to the web package readme

lmc-eu · Jun 24, 2024 · eb904d6 · eb904d6
1 parent 9603889
commit eb904d6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 34 deletions.
diff --git a/docs/contributtion/feature-flags.md b/docs/contributtion/feature-flags.md
@@ -10,19 +10,18 @@ flags enable new behavior and styling, allowing you to opt-in to new (and
 sometimes breaking) changes while using the current version. A feature flag may
 be configured in React, SASS, or both.
 
-This section in the Storybook documents each feature flag that is available and
-how to configure it. Folders and stories within this section in Storybook show
-components with all feature flags turned on.
+This section documents each feature flag that is available and how to configure it.
+Folders and stories within this section in Storybook show components with all feature flags turned on.
 
-## Current feature flags
+## Current Feature Flags
 
 Feature flags prefixed with `enable-*` contain features we'd like consuming projects to
 test and give us feedback on. It will be made by default in the version specified in the name.
 In most of the cases these features will be breaking changes - logically or visually.
 They're generally stable and unlikely to change but may change based on your feedback.
 We just do not want to break your application or design without your consent.
 
-Flags prefixed with `enable-v#-*` will be marked as `true` or "on" by default in the next major version.
+Flags prefixed with `enable-v#-*` will be removed in the next major version and their behavior will be made the default.
 
 For more details on this approach, see the
 [feature flag documentation][feature-flag-documentation]
@@ -31,10 +30,15 @@ in the Spirit Design System monorepo.
 | Flag | Description | Default | SASS flag |
 | ---- | ----------- | ------- | --------- |
 
-## Turning on feature flags in SASS
+## Turning on Feature Flags in SASS
 
 In SASS, you can enable feature flags in any of your stylesheets. Most often
 this is done at the root/entrypoint stylesheet.
+You can enable or disable them by loading
+the `feature-flags` module with a configuration.
+You have to do this **before** loading any other Spirit Web SCSS file.
+
+Example with fictional feature flag to enable fullscreen modal:
 
 ```sass
 @use '~@lmc-eu/spirit-web/scss/settings/feature-flags' with (
@@ -44,4 +48,19 @@ this is done at the root/entrypoint stylesheet.
 @use '~@lmc-eu/spirit-web/scss/foundation';
 ```
 
+Every feature flag should also provide a class selector that can be used to enable or disable the feature.
+You can use this class if you want to limit the usage of the feature to a specific part of your application.
+Place the class on any parent element of the component you want to enable the feature for.
+
+Example:
+
+```html
+<body class="spirit-modal-enable-fullscreen">
+  <!-- … -->
+  <div class="Modal">
+    <!-- … -->
+  </div>
+</body>
+```
+
 [feature-flag-documentation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/contributting/experimental-code.md#feature-flags
diff --git a/packages/web/README.md b/packages/web/README.md
@@ -182,34 +182,7 @@ Check your browser console to see if you are using any of the deprecated functio
 
 ## Feature Flags
 
-This package uses feature flags to enable or disable some functionality. You can enable or disable them by loading
-the `feature-flags` module with a configuration. You have to do this **before** loading any other Spirit Web SCSS file.
-
-Example with fictional feature flag to enable fullscreen modal:
-
-```scss
-@use '~@lmc-eu/spirit-web/scss/settings/feature-flags' with (
-  $modal-enable-fullscreen: true
-);
-
-@use '~@lmc-eu/spirit-web/scss/foundation';
-// …
-```
-
-Every feature flag should also provide a class selector that can be used to enable or disable the feature.
-You can use this class if you want to limit the usage of the feature to a specific part of your application.
-Place the class on any parent element of the component you want to enable the feature for.
-
-Example:
-
-```html
-<body class="spirit-modal-enable-fullscreen">
-  <!-- … -->
-  <div class="Modal">
-    <!-- … -->
-  </div>
-</body>
-```
+👀 See [Feature Flags documentation][feature-flags-docs] for how to use them.
 
 ## Examples
 
@@ -220,6 +193,7 @@ Example:
 See the [LICENSE](LICENSE.md) file for information.
 
 [configuring-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#configuring-load-path
+[feature-flags-docs]: ../../docs/contributtion/feature-flags.md
 [tokens-api]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#tokens-api
 [rebranding]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#b-via-load-path
 [examples]: https://spirit-design-system.netlify.app/packages/web/