Feat: Add spacing CSS variables

CHANGELOG.md

@@ -1,3 +1,61 @@
+# v4.0.0 (Wed Jan 15 2025)
+
+#### 💥 Breaking Change
+
+- `@ukho/admiralty-angular`, `@ukho/admiralty-core`, `@ukho/admiralty-react`
+  - Version 4 release [#335](https://github.com/UKHO/admiralty-design-system/pull/335) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow) [@lstevens98](https://github.com/lstevens98))
+  - Feat: Update autocomplete to hide chevron and removed typeahead [#292](https://github.com/UKHO/admiralty-design-system/pull/292) ([@developernm](https://github.com/developernm))
+- `@ukho/admiralty-core`
+  - Feat: Remake typographic scale [#286](https://github.com/UKHO/admiralty-design-system/pull/286) ([@developernm](https://github.com/developernm))
+
+#### 🚀 Enhancement
+
+- `@ukho/admiralty-core`
+  - Feat: Updated card component stories to display customisable cards using the pill component. [#328](https://github.com/UKHO/admiralty-design-system/pull/328) ([@UKHOGreg](https://github.com/UKHOGreg) [@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+  - Fix: Update missing typographic sizes [#315](https://github.com/UKHO/admiralty-design-system/pull/315) ([@developernm](https://github.com/developernm))
+- `@ukho/admiralty-angular`, `@ukho/admiralty-core`, `@ukho/admiralty-react`
+  - Fix: Input to behave correctly with aria-describedby [#326](https://github.com/UKHO/admiralty-design-system/pull/326) ([@developernm](https://github.com/developernm) [@lstevens98](https://github.com/lstevens98))
+  - Feat: New Pill style component [#287](https://github.com/UKHO/admiralty-design-system/pull/287) ([@UKHOGreg](https://github.com/UKHOGreg) [@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- `@ukho/admiralty-angular`, `@ukho/admiralty-core`
+  - Feat: New Minified Footer component [#284](https://github.com/UKHO/admiralty-design-system/pull/284) ([@developernm](https://github.com/developernm))
+
+#### 🐛 Bug Fix
+
+- 332 Add link component to Documentation Website [#333](https://github.com/UKHO/admiralty-design-system/pull/333) ([@lstevens98](https://github.com/lstevens98))
+- `@ukho/admiralty-core`
+  - Fix theme typo for font-size-7 [#313](https://github.com/UKHO/admiralty-design-system/pull/313) ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+  - Fix: Readmore component needs refining [#289](https://github.com/UKHO/admiralty-design-system/pull/289) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+  - Docs: updated documentation for admiralty select [#295](https://github.com/UKHO/admiralty-design-system/pull/295) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+  - Fix: disabled checkbox [#294](https://github.com/UKHO/admiralty-design-system/pull/294) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+  - Feat: Include documentation to demonstrate a placeholder option [#271](https://github.com/UKHO/admiralty-design-system/pull/271) ([@developernm](https://github.com/developernm))
+
+#### 🔩 Dependency Updates
+
+- `@ukho/admiralty-angular`, `@ukho/admiralty-core`, `@ukho/admiralty-react`
+  - Upgrade yarn to v4 [#311](https://github.com/UKHO/admiralty-design-system/pull/311) ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+#### Authors: 4
+
+- [@developernm](https://github.com/developernm)
+- Greg Williams ([@UKHOGreg](https://github.com/UKHOGreg))
+- Lewis Stevens ([@lstevens98](https://github.com/lstevens98))
+- Tom Barham ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+---
+
+# v3.1.3 (Mon Jan 06 2025)
+
+#### 🐛 Bug Fix
+
+- `@ukho/admiralty-core`
+  - Fix: Cannot use a number type in the admiralty-autocomplete-option value property [#325](https://github.com/UKHO/admiralty-design-system/pull/325) ([@developernm](https://github.com/developernm))
+
+#### Authors: 1
+
+- [@developernm](https://github.com/developernm)
+
+---
+
 # v3.1.2 (Tue Dec 17 2024)
 
 #### 🐛 Bug Fix

lerna.json

@@ -4,6 +4,6 @@
     "packages/*"
   ],
   "npmClient": "yarn",
-  "version": "4.5.3",
+  "version": "4.0.0",
   "useNx": true
-}
+}

packages/angular/CHANGELOG.md

@@ -1,3 +1,36 @@
+# v4.0.0 (Wed Jan 15 2025)
+
+#### 💥 Breaking Change
+
+- Version 4 release [#335](https://github.com/UKHO/admiralty-design-system/pull/335) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow) [@lstevens98](https://github.com/lstevens98))
+- Feat: Update autocomplete to hide chevron and removed typeahead [#292](https://github.com/UKHO/admiralty-design-system/pull/292) ([@developernm](https://github.com/developernm))
+
+#### 🚀 Enhancement
+
+- Fix: Input to behave correctly with aria-describedby [#326](https://github.com/UKHO/admiralty-design-system/pull/326) ([@developernm](https://github.com/developernm) [@lstevens98](https://github.com/lstevens98))
+- Feat: New Pill style component [#287](https://github.com/UKHO/admiralty-design-system/pull/287) ([@UKHOGreg](https://github.com/UKHOGreg) [@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Feat: New Minified Footer component [#284](https://github.com/UKHO/admiralty-design-system/pull/284) ([@developernm](https://github.com/developernm))
+
+#### 🐛 Bug Fix
+
+- Merge branch 'main' into merge-next-into-main ([@developernm](https://github.com/developernm))
+- merge: main ([@developernm](https://github.com/developernm))
+- Merge remote-tracking branch 'origin/main' into next ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Merge main into next ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+#### 🔩 Dependency Updates
+
+- Upgrade yarn to v4 [#311](https://github.com/UKHO/admiralty-design-system/pull/311) ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+#### Authors: 4
+
+- [@developernm](https://github.com/developernm)
+- Greg Williams ([@UKHOGreg](https://github.com/UKHOGreg))
+- Lewis Stevens ([@lstevens98](https://github.com/lstevens98))
+- Tom Barham ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+---
+
 # v3.0.1 (Fri Oct 04 2024)
 
 #### 🐛 Bug Fix

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-angular",
-  "version": "3.1.2",
+  "version": "4.0.0",
   "module": "dist/fesm2022/ukho-admiralty-angular.mjs",
   "typings": "dist/index.d.ts",
   "scripts": {
@@ -17,7 +17,7 @@
     "@angular/core": ">=16.2.12"
   },
   "dependencies": {
-    "@ukho/admiralty-core": "workspace:*",
+    "@ukho/admiralty-core": "^4.0.0",
     "tslib": "^2.7.0"
   },
   "devDependencies": {

packages/core/CHANGELOG.md

@@ -1,3 +1,56 @@
+# v4.0.0 (Wed Jan 15 2025)
+
+#### 💥 Breaking Change
+
+- Version 4 release [#335](https://github.com/UKHO/admiralty-design-system/pull/335) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow) [@lstevens98](https://github.com/lstevens98))
+- Feat: Update autocomplete to hide chevron and removed typeahead [#292](https://github.com/UKHO/admiralty-design-system/pull/292) ([@developernm](https://github.com/developernm))
+- Feat: Remake typographic scale [#286](https://github.com/UKHO/admiralty-design-system/pull/286) ([@developernm](https://github.com/developernm))
+
+#### 🚀 Enhancement
+
+- Feat: Updated card component stories to display customisable cards using the pill component. [#328](https://github.com/UKHO/admiralty-design-system/pull/328) ([@UKHOGreg](https://github.com/UKHOGreg) [@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Fix: Input to behave correctly with aria-describedby [#326](https://github.com/UKHO/admiralty-design-system/pull/326) ([@developernm](https://github.com/developernm) [@lstevens98](https://github.com/lstevens98))
+- Feat: New Pill style component [#287](https://github.com/UKHO/admiralty-design-system/pull/287) ([@UKHOGreg](https://github.com/UKHOGreg) [@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Feat: New Minified Footer component [#284](https://github.com/UKHO/admiralty-design-system/pull/284) ([@developernm](https://github.com/developernm))
+- Fix: Update missing typographic sizes [#315](https://github.com/UKHO/admiralty-design-system/pull/315) ([@developernm](https://github.com/developernm))
+
+#### 🐛 Bug Fix
+
+- Merge branch 'main' into merge-next-into-main ([@developernm](https://github.com/developernm))
+- merge: main ([@developernm](https://github.com/developernm))
+- Fix theme typo for font-size-7 [#313](https://github.com/UKHO/admiralty-design-system/pull/313) ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Merge remote-tracking branch 'origin/main' into next ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Fix: Readmore component needs refining [#289](https://github.com/UKHO/admiralty-design-system/pull/289) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Docs: updated documentation for admiralty select [#295](https://github.com/UKHO/admiralty-design-system/pull/295) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Fix: disabled checkbox [#294](https://github.com/UKHO/admiralty-design-system/pull/294) ([@developernm](https://github.com/developernm) [@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Merge main into next ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+- Feat: Include documentation to demonstrate a placeholder option [#271](https://github.com/UKHO/admiralty-design-system/pull/271) ([@developernm](https://github.com/developernm))
+
+#### 🔩 Dependency Updates
+
+- Upgrade yarn to v4 [#311](https://github.com/UKHO/admiralty-design-system/pull/311) ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+#### Authors: 4
+
+- [@developernm](https://github.com/developernm)
+- Greg Williams ([@UKHOGreg](https://github.com/UKHOGreg))
+- Lewis Stevens ([@lstevens98](https://github.com/lstevens98))
+- Tom Barham ([@ecstaticrainbow](https://github.com/ecstaticrainbow))
+
+---
+
+# v3.1.3 (Mon Jan 06 2025)
+
+#### 🐛 Bug Fix
+
+- Fix: Cannot use a number type in the admiralty-autocomplete-option value property [#325](https://github.com/UKHO/admiralty-design-system/pull/325) ([@developernm](https://github.com/developernm))
+
+#### Authors: 1
+
+- [@developernm](https://github.com/developernm)
+
+---
+
 # v3.1.2 (Tue Dec 17 2024)
 
 #### 🐛 Bug Fix

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukho/admiralty-core",
-  "version": "3.1.2",
+  "version": "4.0.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

packages/core/src/components/autocomplete/autocomplete.scss

@@ -11,7 +11,7 @@
   border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
   box-sizing: border-box;
   color: $autocomplete-text-colour;
-  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  margin-bottom: $autocomplete-input-margin-bottom; // Prev: 0px /* BUG: Safari 10 on macOS seems to add an implicit margin. */
   line-height: 1.5;
   width: 100%;
 }
@@ -37,7 +37,7 @@
 }
 
 .autocomplete__input--default {
-  padding: 12px;
+  padding: $autocomplete-input-padding;
 }
 
 .autocomplete__input--focused {
@@ -47,7 +47,7 @@
 }
 
 .autocomplete__input--show-all-values {
-  padding: 12px 35px 12px 12px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+  padding: $autocomplete-input-display-all-padding; /* Space for arrow. Other padding should match .autocomplete__input--default. */
   cursor: pointer;
 }
 
@@ -64,7 +64,7 @@
   border: 2px solid $autocomplete-input-border-colour;
   border-top: 0;
   color: $autocomplete-text-colour;
-  margin: 0;
+  margin: $autocomplete-input-menu-margin;
   max-height: 342px;
   overflow-x: hidden;
   padding: 0;
@@ -99,7 +99,7 @@
   cursor: pointer;
   display: block;
   position: relative;
-  margin-bottom: 0;
+  margin-bottom: $autocomplete-input-option-margin-bottom;
 }
 
 .autocomplete__option:before {
@@ -130,19 +130,15 @@
   background-color: $autocomplete-option-no-results-background-colour;
   color: $autocomplete-option-no-results-text-colour;
   text-align: center;
-
-  margin-top: 50px;
-  margin-bottom: 50px;
+  margin: $autocomplete-input-option-no-results-margin;
   cursor: not-allowed;
 }
 .autocomplete__option--no-results:hover {
   background-color: $autocomplete-option-no-results-background-colour;
   border-color: $autocomplete-option-no-results-background-colour;
   color: $autocomplete-option-no-results-text-colour;
   text-align: center;
-
-  margin-top: 50px;
-  margin-bottom: 50px;
+  margin: $autocomplete-option-no-results-hover-margin;
   cursor: not-allowed;
 }
 
@@ -155,7 +151,7 @@
 
 .autocomplete__hint,
 .autocomplete__option {
-  padding: 10px;
+  padding: $autocomplete-option-padding;
 }
 
 .autocomplete-down-icon {

packages/core/src/components/autocomplete/autocomplete.stories.ts

@@ -72,6 +72,18 @@ export const Countries: Story = {
     </admiralty-autocomplete>`,
   args: { label: 'Country', hint: 'Select a country' },
 };
+export const NoResults: Story = {
+  render: args =>
+    html` <admiralty-autocomplete
+      label="${args.label}"
+      hint="${args.hint}"
+      ?invalid="${args.invalid}"
+      invalid-message="${args.invalidMessage}"
+      ?disabled="${args.disabled}"
+      value="${args.value}">
+    </admiralty-autocomplete>`,
+  args: { label: 'No Results' },
+};
 
 export const CountriesPreSelected: Story = {
   render: args =>

packages/core/src/components/autocomplete/autocomplete.tsx

@@ -40,7 +40,7 @@ function filterOptions(options: Option[], searchTerm: string) {
 }
 
 function filterOptionsByValue(options: Option[], searchTerm: string) {
-  return options.filter(({ value }) => value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);
+  return options.filter(({ value }) => value.toString().toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1);
 }
 
 @Component({

packages/core/src/components/autocomplete/autocomplete.vars.scss

@@ -7,6 +7,17 @@
  * @prop --admiralty-autocomplete-icon-font-weight: Font weight for the autocompletes icon
 
  * @prop --admiralty-autocomplete-option-font-weight: Font weight for the autocompletes option
+
+ * @prop --admiralty-autocomplete-input-padding: Padding for autocomplete
+ * @prop --admiralty-autocomplete-input-display-all-padding: Padding for autocomplete when displaying all options
+ * @prop --admiralty-autocomplete-option-padding: Padding for autocomplete options
+
+ * @prop --admiralty-autocomplete-input-margin-bottom: Margin bottom for the autocomplete
+ * @prop --admiralty-autocomplete-input-menu-margin: Margin for the menu of the autocomplete
+ * @prop --admiralty-autocomplete-input-option-margin-bottom: Margin bottom for the options of the autocomplete
+ * @prop --admiralty-autocomplete-option-no-results-margin: Autocomplete no results margin top and bottom
+ * @prop --admiralty-autocomplete-option-no-results-hover-margin: Autocomplete no results hover margin top and bottom
+
 **/
 
 $autocomplete-background-colour: var(--admiralty-background-colour) !default;
@@ -31,3 +42,16 @@ $autocomplete-icon-font-size: var(--admiralty-autocomplete-icon-font-size, var(-
 $autocomplete-icon-font-weight: var(--admiralty-autocomplete-icon-font-weight, var(--admiralty-font-weight-normal));
 
 $autocomplete-option-font-weight: var(--admiralty-autocomplete-option-font-weight, var(--admiralty-font-weight-normal));
+
+// Padding
+$autocomplete-input-padding: var(--admiralty-autocomplete-input-padding, var(--admiralty-spacing-3));
+$autocomplete-input-display-all-padding: var(--admiralty-autocomplete-input-display-all-padding, 12px 35px 12px 12px);
+$autocomplete-option-padding: var(--admiralty-autocomplete-option-padding, var(--admiralty-spacing-2)); // Prev: 10px | Now: 8px
+
+// Margins
+$autocomplete-input-margin-bottom: var(--autocomplete-input-margin-bottom, var(--admiralty-spacing-0));
+$autocomplete-input-menu-margin: var(--autocomplete-input-menu-margin, var(--admiralty-spacing-0));
+$autocomplete-input-option-margin-bottom: var(--admiralty-autocomplete-input-option-margin-bottom, var(--admiralty-spacing-0));
+
+$autocomplete-input-option-no-results-margin: var(--admiralty-autocomplete-option-no-results-margin, 50px 0);
+$autocomplete-option-no-results-hover-margin: var(--admiralty-autocomplete-option-no-results-hover-margin, 50px 0);

packages/core/src/components/autocomplete/readme.md

@@ -40,13 +40,21 @@
 
 ## CSS Custom Properties
 
-| Name                                          | Description                              |
-| --------------------------------------------- | ---------------------------------------- |
-| `--admiralty-autocomplete-icon-font-size`     | Font size for the autocompletes icon     |
-| `--admiralty-autocomplete-icon-font-weight`   | Font weight for the autocompletes icon   |
-| `--admiralty-autocomplete-label-font-size`    | Font size for the autocompletes label    |
-| `--admiralty-autocomplete-option-font-size`   | Font size for the autocompletes option   |
-| `--admiralty-autocomplete-option-font-weight` | Font weight for the autocompletes option |
+| Name                                                      | Description                                          |
+| --------------------------------------------------------- | ---------------------------------------------------- |
+| `--admiralty-autocomplete-icon-font-size`                 | Font size for the autocompletes icon                 |
+| `--admiralty-autocomplete-icon-font-weight`               | Font weight for the autocompletes icon               |
+| `--admiralty-autocomplete-input-display-all-padding`      | Padding for autocomplete when displaying all options |
+| `--admiralty-autocomplete-input-margin-bottom`            | Margin bottom for the autocomplete                   |
+| `--admiralty-autocomplete-input-menu-margin`              | Margin for the menu of the autocomplete              |
+| `--admiralty-autocomplete-input-option-margin-bottom`     | Margin bottom for the options of the autocomplete    |
+| `--admiralty-autocomplete-input-padding`                  | Padding for autocomplete                             |
+| `--admiralty-autocomplete-label-font-size`                | Font size for the autocompletes label                |
+| `--admiralty-autocomplete-option-font-size`               | Font size for the autocompletes option               |
+| `--admiralty-autocomplete-option-font-weight`             | Font weight for the autocompletes option             |
+| `--admiralty-autocomplete-option-no-results-hover-margin` | Autocomplete no results hover margin top and bottom  |
+| `--admiralty-autocomplete-option-no-results-margin`       | Autocomplete no results margin top and bottom        |
+| `--admiralty-autocomplete-option-padding`                 | Padding for autocomplete options                     |
 
 
 ## Dependencies

packages/core/src/components/breadcrumb/breadcrumb.scss

@@ -6,7 +6,7 @@
 }
 
 .breadcrumb-icon {
-  margin: 0 10px;
+  margin: $breadcrumb-icon-margin;
   font-size: $breadcrumb-icon-font-size;
   color: $breadcrumb-separator-colour;
 }
@@ -17,7 +17,7 @@ a {
   font-weight: $breadcrumb-font-weight;
   text-decoration: none;
   color: $breadcrumb-font-colour;
-  margin: 10px 2px;
+  margin: $breadcrumb-href-margin;
 
   &:hover {
     color: $breadcrumb-font-colour-hover;

packages/core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -3,6 +3,9 @@
  * @prop --admiralty-breadcrumb-font-size: Font size for the breadcrumb
  * @prop --admiralty-breadcrumb-font-weight: Font weight for the breadcrumb
  * @prop --admiralty-breadcrumb-font-weight-active: Font weight for the breadcrumb active
+
+ * @prop --admiralty-breadcrumb-icon-margin: Margin for the breadcrumb icon
+ * @prop --admiralty-breadcrumb-href-margin: Margin for the hyperlink
 **/
 
 $breadcrumb-font-colour: var(--admiralty-text-colour) !default;
@@ -14,3 +17,6 @@ $breadcrumb-font-size: var(--admiralty-breadcrumb-font-size, var(--admiralty-fon
 $breadcrumb-icon-font-size: var(--admiralty-breadcrumb-icon-font-size, var(--admiralty-font-size--2));
 $breadcrumb-font-weight: var(--admiralty-breadcrumb-font-weight, var(--admiralty-font-weight-normal));
 $breadcrumb-font-weight-active: var(--admiralty-breadcrumb-font-weight-active, var(--admiralty-font-weight-medium));
+
+$breadcrumb-icon-margin: var(--admiralty-breadcrumb-icon-margin, 0 10px);
+$breadcrumb-href-margin: var(--admiralty-breadcrumb-href-margin, 10px 2px);