@oaknational/oak-components 1.175.0 → 1.177.0

package/dist/types.d.ts

@@ -165,7 +165,7 @@ declare const oakSpaceBetweenTokens: {
     "spacing-80": string;
 };
 type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
-type AdditionalSpacingTypes = "100%" | 0 | "100vh" | "100vw" | "auto" | "fit-content" | "max-content" | "min-content" | "inherit" | "initial" | "unset";
+type AdditionalSpacingTypes = "100%" | "-50%" | "50%" | 0 | "100vh" | "100vw" | "auto" | "fit-content" | "max-content" | "min-content" | "inherit" | "initial" | "unset";
 type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
 
 type PaddingValues = ResponsiveValues<OakInnerPaddingToken | null | undefined>;
@@ -316,7 +316,7 @@ type ColorStyleProps = {
     $background?: ColorToken;
 };
 
-type PositionSpacing = OakAllSpacingToken | OakSpaceBetweenToken | null | undefined;
+type PositionSpacing = OakAllSpacingToken | OakSpaceBetweenToken | "-50%" | "50%" | null | undefined;
 type PositionStyleProps = {
     /**
      * Sets the `position` CSS property of the element.
@@ -327,31 +327,40 @@ type PositionStyleProps = {
     /**
      * Sets the `top` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $top?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `right` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $right?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `bottom` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $bottom?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `left` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - `50%` or `-50%` may be used to center an absolutely positioned element within its parent.
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $left?: ResponsiveValues<PositionSpacing>;
     /**
      * Sets the `inset` CSS property of the element.
      *
-     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     * - Accepts a spacing token or a responsive array of spacing tokens. E.g. `['spacing-4', 'spacing-8']`
+     * - Can be `null` at a breakpoint E.g. `[null, 'spacing-8']`.
      */
     $inset?: ResponsiveValues<PositionSpacing>;
     /**
@@ -3186,11 +3195,20 @@ type OakSaveButtonProps = {
 declare const OakSaveButton: (props: OakSaveButtonProps) => React__default.JSX.Element;
 
 type OakSaveCountProps = {
-    count: number;
+    /**
+     * The number of saved items.
+     *
+     * Setting this will show the count inline with the label.
+     */
+    count?: number;
+    /**
+     * The label to display inline with the count.
+     */
+    label?: string;
     href: string;
     loading: boolean;
 };
-declare const OakSaveCount: ({ count, href, loading }: OakSaveCountProps) => React__default.JSX.Element;
+declare const OakSaveCount: ({ count, href, loading, label, }: OakSaveCountProps) => React__default.JSX.Element;
 
 type OakScaleImageButtonProps = Omit<InternalShadowRectButtonProps, "defaultTextColor" | "hoverTextColor" | "disabledTextColor" | "defaultBackground" | "defaultBorderColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "iconGap" | "pv" | "ph" | "$bblr" | "$btlr" | "width" | "onClick"> & {
     onImageScaleCallback: (event: React__default.MouseEvent<HTMLButtonElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "1.175.0",
+  "version": "1.177.0",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",