From 698742e8ef734e422e217f0e3cbc139a6070cfa2 Mon Sep 17 00:00:00 2001
From: Jamie Mason <jamie@foldleft.io>
Date: Sat, 30 Dec 2023 11:03:33 +0000
Subject: [PATCH] docs(site): tidy layout of required/optional pills

---
 site/src/components/pill/optional.astro       | 42 +++++++++-------
 site/src/components/pill/required.astro       | 36 +++++++------
 .../docs/command/lint-semver-ranges.mdx       |  5 --
 .../docs/config/version-groups/banned.mdx     | 50 +++++++++++--------
 .../docs/config/version-groups/ignored.mdx    | 50 +++++++++++--------
 .../config/version-groups/lowest-version.mdx  | 50 +++++++++++--------
 .../docs/config/version-groups/pinned.mdx     | 50 +++++++++++--------
 .../docs/config/version-groups/same-range.mdx | 50 +++++++++++--------
 .../docs/config/version-groups/snapped-to.mdx | 50 +++++++++++--------
 .../docs/config/version-groups/standard.mdx   | 50 +++++++++++--------
 .../partials/group-config/_dependencies.mdx   |  2 +-
 .../group-config/_dependency-types.mdx        |  2 +-
 site/src/partials/group-config/_label.mdx     |  2 +-
 site/src/partials/group-config/_packages.mdx  |  2 +-
 .../group-config/_specifier-types.mdx         |  2 +-
 15 files changed, 248 insertions(+), 195 deletions(-)

diff --git a/site/src/components/pill/optional.astro b/site/src/components/pill/optional.astro
index d63f4aef..57a9fdb6 100644
--- a/site/src/components/pill/optional.astro
+++ b/site/src/components/pill/optional.astro
@@ -1,20 +1,28 @@
 <style>
-.pill {
-  display: inline-flex;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  align-items: center;
-  border-radius: 9999px;
-}
-.gray {
-  background-color: #f3f4f6;
-  color: #1f2937;
-}
+  .cols {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .pill {
+    display: inline-flex;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    align-items: center;
+    border-radius: 9999px;
+  }
+  .gray {
+    background-color: #f3f4f6;
+    color: #1f2937;
+  }
 </style>
 
-<span class='pill gray'>Optional</span>
+<div class="cols">
+  <slot />
+  <span class="pill gray">Optional</span>
+</div>
diff --git a/site/src/components/pill/required.astro b/site/src/components/pill/required.astro
index b5a0a17a..273011df 100644
--- a/site/src/components/pill/required.astro
+++ b/site/src/components/pill/required.astro
@@ -1,20 +1,28 @@
 <style>
-.pill {
-  display: inline-flex;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  align-items: center;
-  border-radius: 9999px;
-}
-.red {
+  .cols {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .pill {
+    display: inline-flex;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    align-items: center;
+    border-radius: 9999px;
+  }
+  .red {
   background-color: #fee2e2;
   color: #991b1b;
 }
 </style>
 
-<span class='pill red'>Required</span>
+<div class="cols">
+  <slot />
+  <span class='pill red'>Required</span>
+</div>
diff --git a/site/src/content/docs/command/lint-semver-ranges.mdx b/site/src/content/docs/command/lint-semver-ranges.mdx
index 9735ae6b..16deee62 100644
--- a/site/src/content/docs/command/lint-semver-ranges.mdx
+++ b/site/src/content/docs/command/lint-semver-ranges.mdx
@@ -5,7 +5,6 @@ title: lint-semver-ranges
 import ConfigOption from '@site/partials/option/_config.mdx';
 import FilterOption from '@site/partials/option/_filter.mdx';
 import HelpOption from '@site/partials/option/_help.mdx';
-import IndentOption from '@site/partials/option/_indent.mdx';
 import SourceOption from '@site/partials/option/_source.mdx';
 import SpecsOption from '@site/partials/option/_specs.mdx';
 import TypesOption from '@site/partials/option/_types.mdx';
@@ -35,10 +34,6 @@ Check whether dependency versions used within "dependencies", "devDependencies"
 
 <TypesOption command="lint-semver-ranges" />
 
-### indent
-
-<IndentOption command="lint-semver-ranges" />
-
 ### help
 
 <HelpOption command="lint-semver-ranges" />
diff --git a/site/src/content/docs/config/version-groups/banned.mdx b/site/src/content/docs/config/version-groups/banned.mdx
index 5ee1c5c0..f02056c2 100644
--- a/site/src/content/docs/config/version-groups/banned.mdx
+++ b/site/src/content/docs/config/version-groups/banned.mdx
@@ -28,9 +28,10 @@ Find and remove dependencies which you've decided should never be used.
 
 ## Configuration
 
-### isBanned
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### isBanned
+</RequiredPill>
 
 This property activates this behaviour for a given Version Group.
 
@@ -45,22 +46,27 @@ This property activates this behaviour for a given Version Group.
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/ignored.mdx b/site/src/content/docs/config/version-groups/ignored.mdx
index 059ddede..d3921c8e 100644
--- a/site/src/content/docs/config/version-groups/ignored.mdx
+++ b/site/src/content/docs/config/version-groups/ignored.mdx
@@ -22,9 +22,10 @@ Have syncpack ignore the versions of these dependencies completely.
 
 ## Configuration
 
-### isIgnored
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### isIgnored
+</RequiredPill>
 
 This property activates this behaviour for a given Version Group.
 
@@ -39,22 +40,27 @@ This property activates this behaviour for a given Version Group.
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/lowest-version.mdx b/site/src/content/docs/config/version-groups/lowest-version.mdx
index 8e1d3538..f1d2e850 100644
--- a/site/src/content/docs/config/version-groups/lowest-version.mdx
+++ b/site/src/content/docs/config/version-groups/lowest-version.mdx
@@ -28,28 +28,34 @@ Fix mismatched versions in this group by choosing the lowest/oldest semver versi
 
 ## Configuration
 
-### preferVersion
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### preferVersion
+</RequiredPill>
 
 Defaults to `highestSemver` but can be optionally changed to `lowestSemver`.
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/pinned.mdx b/site/src/content/docs/config/version-groups/pinned.mdx
index 01b83a5e..06eb5883 100644
--- a/site/src/content/docs/config/version-groups/pinned.mdx
+++ b/site/src/content/docs/config/version-groups/pinned.mdx
@@ -22,9 +22,10 @@ Pin the version of all dependencies in this group to match a specific version yo
 
 ## Configuration
 
-### pinVersion
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### pinVersion
+</RequiredPill>
 
 The version specifier you would like to use, this can be anything supported by a package manager.
 
@@ -39,22 +40,27 @@ The version specifier you would like to use, this can be anything supported by a
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/same-range.mdx b/site/src/content/docs/config/version-groups/same-range.mdx
index 41a91b69..866404e9 100644
--- a/site/src/content/docs/config/version-groups/same-range.mdx
+++ b/site/src/content/docs/config/version-groups/same-range.mdx
@@ -23,9 +23,10 @@ Relax syncpack to ensure that all versions have semver ranges which all satisfy
 
 ## Configuration
 
-### policy
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### policy
+</RequiredPill>
 
 Currently the only custom policy in syncpack is "sameRange", which is what causes this behaviour to be applied to a Version Group.
 
@@ -40,22 +41,27 @@ Currently the only custom policy in syncpack is "sameRange", which is what cause
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/snapped-to.mdx b/site/src/content/docs/config/version-groups/snapped-to.mdx
index 78f1dd49..8f982e19 100644
--- a/site/src/content/docs/config/version-groups/snapped-to.mdx
+++ b/site/src/content/docs/config/version-groups/snapped-to.mdx
@@ -23,9 +23,10 @@ Pin the version of all dependencies in this group to follow the versions used by
 
 ## Configuration
 
-### snapTo
-
-<RequiredPill />
+<RequiredPill>
+  {/**/}
+  ### snapTo
+</RequiredPill>
 
 - The values refer to the `name` property of the package.json files developed in your monorepo.
 - Multiple values can be added to provide fallback packages to try in the event that the dependency is not present in the earlier packages in the array.
@@ -41,22 +42,27 @@ Pin the version of all dependencies in this group to follow the versions used by
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/content/docs/config/version-groups/standard.mdx b/site/src/content/docs/config/version-groups/standard.mdx
index 2f3f5e6d..f84d0ed4 100644
--- a/site/src/content/docs/config/version-groups/standard.mdx
+++ b/site/src/content/docs/config/version-groups/standard.mdx
@@ -11,9 +11,10 @@ import Label from '@site/partials/group-config/_label.mdx';
 
 ## Configuration
 
-### preferVersion
-
-<OptionalPill />
+<OptionalPill>
+  {/**/}
+  ### preferVersion
+</OptionalPill>
 
 Defaults to `highestSemver` but can be optionally changed to `lowestSemver`.
 
@@ -29,22 +30,27 @@ To set this as your standard policy, create a version group which applies to eve
 }
 ```
 
-### dependencies
-
-<Dependencies />
-
-### dependencyTypes
-
-<DependencyTypes />
-
-### specifierTypes
-
-<SpecifierTypes />
-
-### label
-
-<Label />
-
-### packages
-
-<Packages />
+<Dependencies>
+  {/**/}
+  ### dependencies
+</Dependencies>
+
+<DependencyTypes>
+  {/**/}
+  ### dependencyTypes
+</DependencyTypes>
+
+<SpecifierTypes>
+  {/**/}
+  ### specifierTypes
+</SpecifierTypes>
+
+<Label>
+  {/**/}
+  ### label
+</Label>
+
+<Packages>
+  {/**/}
+  ### packages
+</Packages>
diff --git a/site/src/partials/group-config/_dependencies.mdx b/site/src/partials/group-config/_dependencies.mdx
index 4196d0a1..5480c7c1 100644
--- a/site/src/partials/group-config/_dependencies.mdx
+++ b/site/src/partials/group-config/_dependencies.mdx
@@ -1,6 +1,6 @@
 import OptionalPill from '@site/components/pill/optional.astro';
 
-<OptionalPill />
+<OptionalPill>{props.children}</OptionalPill>
 
 - An array of names of dependencies you've installed or otherwise reference in your package.json files.
 - If omitted, the default behaviour is to match every dependency.
diff --git a/site/src/partials/group-config/_dependency-types.mdx b/site/src/partials/group-config/_dependency-types.mdx
index 08c0e58b..eb3e4abb 100644
--- a/site/src/partials/group-config/_dependency-types.mdx
+++ b/site/src/partials/group-config/_dependency-types.mdx
@@ -2,7 +2,7 @@ import OptionalPill from '@site/components/pill/optional.astro';
 import DefaultDependencyTypes from '@site/partials/_default-dependency-types.mdx';
 import CustomTypesTip from '@site/partials/tips/_custom-types.mdx';
 
-<OptionalPill />
+<OptionalPill>{props.children}</OptionalPill>
 <CustomTypesTip />
 
 - When set, only dependencies present in the named locations will be assigned to this group.
diff --git a/site/src/partials/group-config/_label.mdx b/site/src/partials/group-config/_label.mdx
index 45b9bac0..20daf76b 100644
--- a/site/src/partials/group-config/_label.mdx
+++ b/site/src/partials/group-config/_label.mdx
@@ -1,6 +1,6 @@
 import OptionalPill from '@site/components/pill/optional.astro';
 
-<OptionalPill />
+<OptionalPill>{props.children}</OptionalPill>
 
 - A short name or description displayed as a header in syncpack's output.
 - If a label is not set then eg. "Version Group 3" will be used instead.
diff --git a/site/src/partials/group-config/_packages.mdx b/site/src/partials/group-config/_packages.mdx
index a9471c16..ad0b46d5 100644
--- a/site/src/partials/group-config/_packages.mdx
+++ b/site/src/partials/group-config/_packages.mdx
@@ -1,6 +1,6 @@
 import OptionalPill from '@site/components/pill/optional.astro';
 
-<OptionalPill />
+<OptionalPill>{props.children}</OptionalPill>
 
 - An array of strings which should match the `name` properties of your package.json files.
 - If omitted, the default behaviour is to match every package.
diff --git a/site/src/partials/group-config/_specifier-types.mdx b/site/src/partials/group-config/_specifier-types.mdx
index d0204eb2..e3e51125 100644
--- a/site/src/partials/group-config/_specifier-types.mdx
+++ b/site/src/partials/group-config/_specifier-types.mdx
@@ -1,7 +1,7 @@
 import OptionalPill from '@site/components/pill/optional.astro';
 import SpecifierTypes from '@site/partials/_specifier-types.mdx';
 
-<OptionalPill />
+<OptionalPill>{props.children}</OptionalPill>
 
 - When set, only dependencies whose version specifier matches the named formats will be assigned to this group.
 - If omitted, the default behaviour is to match all dependencies.