@oaknational/oak-components 0.32.0 → 0.32.2

package/dist/types.d.ts

@@ -58,8 +58,9 @@ declare const oakColorTokens: {
     transparent: string;
 };
 type OakColorToken = keyof typeof oakColorTokens;
-declare const oakUiRoleTokens: string[];
-type OakUiRoleToken = (typeof oakUiRoleTokens)[number];
+declare const oakUiRoleTokensConst: readonly ["text-primary", "text-subdued", "text-error", "text-disabled", "text-link-active", "text-link-hover", "text-link-visited", "text-link-pressed", "text-inverted", "text-success", "text-warning", "bg-primary", "bg-neutral", "bg-neutral-stronger", "bg-btn-primary", "bg-btn-primary-hover", "bg-btn-primary-disabled", "bg-btn-secondary", "bg-btn-secondary-hover", "bg-btn-secondary-disabled", "bg-icon", "bg-icon-hover", "bg-decorative1-main", "bg-decorative1-subdued", "bg-decorative1-very-subdued", "bg-decorative2-main", "bg-decorative2-subdued", "bg-decorative2-very-subdued", "bg-decorative3-main", "bg-decorative3-subdued", "bg-decorative3-very-subdued", "bg-decorative4-main", "bg-decorative4-subdued", "bg-decorative4-very-subdued", "bg-decorative5-main", "bg-decorative5-subdued", "bg-decorative5-very-subdued", "bg-correct", "bg-incorrect", "icon-main", "icon-inverted", "icon-disabled", "icon-brand", "icon-success", "icon-error", "icon-warning", "border-primary", "border-inverted", "border-neutral", "border-neutral-lighter", "border-brand", "border-success", "border-error", "border-warning", "border-decorative1", "border-decorative1-stronger", "border-decorative2", "border-decorative2-stronger", "border-decorative3", "border-decorative3-stronger", "border-decorative4", "border-decorative4-stronger", "border-decorative5", "border-decorative5-stronger", "border-decorative6", "border-decorative6-stronger", "transparent"];
+type OakUiRoleToken = (typeof oakUiRoleTokensConst)[number];
+declare const oakUiRoleTokens: ("transparent" | "text-primary" | "text-subdued" | "text-error" | "text-disabled" | "text-link-active" | "text-link-hover" | "text-link-visited" | "text-link-pressed" | "text-inverted" | "text-success" | "text-warning" | "bg-primary" | "bg-neutral" | "bg-neutral-stronger" | "bg-btn-primary" | "bg-btn-primary-hover" | "bg-btn-primary-disabled" | "bg-btn-secondary" | "bg-btn-secondary-hover" | "bg-btn-secondary-disabled" | "bg-icon" | "bg-icon-hover" | "bg-decorative1-main" | "bg-decorative1-subdued" | "bg-decorative1-very-subdued" | "bg-decorative2-main" | "bg-decorative2-subdued" | "bg-decorative2-very-subdued" | "bg-decorative3-main" | "bg-decorative3-subdued" | "bg-decorative3-very-subdued" | "bg-decorative4-main" | "bg-decorative4-subdued" | "bg-decorative4-very-subdued" | "bg-decorative5-main" | "bg-decorative5-subdued" | "bg-decorative5-very-subdued" | "bg-correct" | "bg-incorrect" | "icon-main" | "icon-inverted" | "icon-disabled" | "icon-brand" | "icon-success" | "icon-error" | "icon-warning" | "border-primary" | "border-inverted" | "border-neutral" | "border-neutral-lighter" | "border-brand" | "border-success" | "border-error" | "border-warning" | "border-decorative1" | "border-decorative1-stronger" | "border-decorative2" | "border-decorative2-stronger" | "border-decorative3" | "border-decorative3-stronger" | "border-decorative4" | "border-decorative4-stronger" | "border-decorative5" | "border-decorative5-stronger" | "border-decorative6" | "border-decorative6-stronger")[];
 type UiRoleMap = Record<OakUiRoleToken, OakColorToken | null | undefined>;
 type OakCombinedColorToken = OakColorToken | OakUiRoleToken;
 
@@ -580,39 +581,39 @@ declare const oakFontSizeTokens: {
 };
 type OakFontSizeToken = keyof typeof oakFontSizeTokens;
 declare const oakFontTokens: {
-    "heading-1": ["font-size-10", number, number, string];
-    "heading-2": ["font-size-9", number, number, string];
-    "heading-3": ["font-size-8", number, number, string];
-    "heading-4": ["font-size-7", number, number, string];
-    "heading-5": ["font-size-6", number, number, string];
-    "heading-6": ["font-size-5", number, number, string];
-    "heading-7": ["font-size-3", number, number, string];
-    "heading-light-1": ["font-size-10", number, number, string];
-    "heading-light-2": ["font-size-9", number, number, string];
-    "heading-light-3": ["font-size-8", number, number, string];
-    "heading-light-4": ["font-size-7", number, number, string];
-    "heading-light-5": ["font-size-6", number, number, string];
-    "heading-light-6": ["font-size-5", number, number, string];
-    "heading-light-7": ["font-size-3", number, number, string];
-    "body-1": ["font-size-4", number, number, string];
-    "body-2": ["font-size-3", number, number, string];
-    "body-3": ["font-size-2", number, number, string];
-    "body-4": ["font-size-1", number, number, string];
-    "body-1-bold": ["font-size-4", number, number, string];
-    "body-2-bold": ["font-size-3", number, number, string];
-    "body-3-bold": ["font-size-2", number, number, string];
-    "list-item-1": ["font-size-4", number, number, string];
-    "list-item-2": ["font-size-3", number, number, string];
+    "heading-1": ["font-size-10", 64, 600, "0.0115rem"];
+    "heading-2": ["font-size-9", 56, 600, "0.0115rem"];
+    "heading-3": ["font-size-8", 48, 600, "0.0115rem"];
+    "heading-4": ["font-size-7", 40, 600, "0.0115rem"];
+    "heading-5": ["font-size-6", 32, 600, "0.0115rem"];
+    "heading-6": ["font-size-5", 24, 600, "0.0115rem"];
+    "heading-7": ["font-size-3", 20, 600, "0.0115rem"];
+    "heading-light-1": ["font-size-10", 64, 400, "0.0115rem"];
+    "heading-light-2": ["font-size-9", 56, 400, "0.0115rem"];
+    "heading-light-3": ["font-size-8", 48, 400, "0.0115rem"];
+    "heading-light-4": ["font-size-7", 40, 400, "0.0115rem"];
+    "heading-light-5": ["font-size-6", 32, 400, "0.0115rem"];
+    "heading-light-6": ["font-size-5", 24, 400, "0.0115rem"];
+    "heading-light-7": ["font-size-3", 20, 400, "0.0115rem"];
+    "body-1": ["font-size-4", 28, 300, "-0.005rem"];
+    "body-2": ["font-size-3", 24, 300, "-0.005rem"];
+    "body-3": ["font-size-2", 20, 300, "-0.005rem"];
+    "body-4": ["font-size-1", 16, 300, "-0.005rem"];
+    "body-1-bold": ["font-size-4", 28, 700, "-0.005rem"];
+    "body-2-bold": ["font-size-3", 24, 700, "-0.005rem"];
+    "body-3-bold": ["font-size-2", 20, 700, "-0.005rem"];
+    "list-item-1": ["font-size-4", 32, 300, "-0.005rem"];
+    "list-item-2": ["font-size-3", 24, 300, "-0.005rem"];
 };
 type OakFontToken = keyof typeof oakFontTokens;
-declare const oakTextDecorations: string[];
-declare const oakWhiteSpaces: string[];
-declare const oakWordWraps: string[];
-declare const oakTextOverflows: string[];
-type OakTextDecoration = (typeof oakTextDecorations)[number];
-type OakWhiteSpace = (typeof oakWhiteSpaces)[number];
-type OakWordWrap = (typeof oakWordWraps)[number];
-type OakTextOverflow = (typeof oakTextOverflows)[number];
+declare const oakTextDecorationsConst: readonly ["underline", "overline", "line-through", "none"];
+declare const oakWhiteSpacesConst: readonly ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"];
+declare const oakWordWrapsConst: readonly ["normal", "break-word", "initial", "inherit"];
+declare const oakTextOverflowsConst: readonly ["clip", "ellipsis"];
+type OakTextDecoration = (typeof oakTextDecorationsConst)[number];
+type OakWhiteSpace = (typeof oakWhiteSpacesConst)[number];
+type OakWordWrap = (typeof oakWordWrapsConst)[number];
+type OakTextOverflow = (typeof oakTextOverflowsConst)[number];
 
 type TypographyStyleProps = {
     /**
@@ -904,8 +905,9 @@ declare const OakTypography: styled_components.StyledComponent<"div", styled_com
     onClick?: React$1.MouseEventHandler | undefined;
 }, never>;
 
-declare const oakHeadingTags: string[];
-type OakHeadingTag = (typeof oakHeadingTags)[number];
+declare const oakHeadingTagsConst: readonly ["div", "h1", "h2", "h3", "h4", "h5", "h6"];
+type OakHeadingTag = (typeof oakHeadingTagsConst)[number];
+declare const oakHeadingTags: ("div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6")[];
 type OakHeadingTagProps = {
     children?: React__default.ReactNode;
     id?: string;
@@ -1650,7 +1652,7 @@ declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
     /**
      * Allows the background color of the radio button to be customized.
      */
-    radioBackground?: string | undefined;
+    radioBackground?: OakCombinedColorToken | undefined;
     /**
      * Allows the width of the radio button border to be customized when the radio button is checked.
      */
@@ -1946,6 +1948,18 @@ type OakHandDrawnBoxWithIconProps = Omit<OakHandDrawnCardProps, "children"> & {
  */
 declare const OakHandDrawnCardWithIcon: ({ iconName, iconColor, iconWidth, iconHeight, alt, $width, $height, $alignItems, $justifyContent, ...props }: OakHandDrawnBoxWithIconProps) => React__default.JSX.Element;
 
+type OakHandDrawnHRProps = {
+    hrColor?: InternalStyledSvgProps["$fill"];
+} & SpacingStyleProps & SizeStyleProps;
+/**
+ * A Drawn HR svg inside a flex container
+ *
+ * use prop hrColor to change the color of the HR
+ *
+ * change the sizeProps of the flex container to change the size and dimentions of the HR
+ */
+declare const OakHandDrawnHR: (props: OakHandDrawnHRProps) => React__default.JSX.Element;
+
 /**
  * Renders a tag with the text "New"
  */
@@ -2572,7 +2586,7 @@ type OakPupilJourneyYearButtonProps = {
  */
 declare const OakPupilJourneyYearButton: <C extends React__default.ElementType = "button">({ phase, element, ...rest }: {
     phase: "primary" | "secondary";
-} & Omit<InternalShadowRectButtonProps, "defaultBackground" | "defaultBorderColor" | "defaultTextColor" | "disabledTextColor" | "hoverTextColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "pv" | "ph" | "font"> & {
+} & Omit<InternalShadowRectButtonProps, "font" | "defaultBackground" | "defaultBorderColor" | "defaultTextColor" | "disabledTextColor" | "hoverTextColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "pv" | "ph"> & {
     element?: C | undefined;
 } & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
 
@@ -2597,7 +2611,7 @@ type OakPupilJourneySubjectButtonProps = {
 declare const OakPupilJourneySubjectButton: <C extends React__default.ElementType = "button">({ phase, element, subjectIconName, ...rest }: {
     phase: "primary" | "secondary";
     subjectIconName: OakIconName;
-} & Omit<InternalShadowRectButtonProps, "defaultBackground" | "defaultBorderColor" | "defaultTextColor" | "disabledTextColor" | "hoverTextColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "pv" | "ph" | "font"> & {
+} & Omit<InternalShadowRectButtonProps, "font" | "defaultBackground" | "defaultBorderColor" | "defaultTextColor" | "disabledTextColor" | "hoverTextColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "pv" | "ph"> & {
     element?: C | undefined;
 } & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
 
@@ -2976,4 +2990,4 @@ type OakHeaderHeroProps = {
  */
 declare const OakHeaderHero: styled_components.StyledComponent<(props: OakHeaderHeroProps) => React__default.JSX.Element, styled_components.DefaultTheme, {}, never>;
 
-export { HeadingTagComponent, OakAccordion, type OakAccordionProps, type OakAllSpacingToken, OakAnchorTarget, type OakAnchorTargetProps, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, OakCookieBanner, type OakCookieBannerProps, OakCookieConsent, type OakCookieConsentProps, OakCookieConsentProvider, OakCookieSettingsModal, type OakCookieSettingsModalProps, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, type OakDropShadowToken, OakDroppable, type OakDroppableProps, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGlobalStyle, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeaderHero, type OakHeaderHeroProps, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, OakInfo, OakInfoButton, type OakInfoButtonProps, type OakInfoCardProps, type OakInfoProps, type OakInnerPaddingToken, OakKbd, type OakKbdProps, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLink, type OakLinkProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakModal, OakModalBody, type OakModalBodyProps, OakModalFooter, type OakModalFooterProps, type OakModalProps, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakPupilJourneyHeader, type OakPupilJourneyHeaderProps, OakPupilJourneyLayout, type OakPupilJourneyLayoutProps, OakPupilJourneyList, OakPupilJourneyListCounter, OakPupilJourneyListItem, type OakPupilJourneyListProps, OakPupilJourneyPreviousLessons, type OakPupilJourneyPreviousLessonsProps, OakPupilJourneySubjectButton, type OakPupilJourneySubjectButtonProps, OakPupilJourneyYearButton, type OakPupilJourneyYearButtonProps, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizMatch, type OakQuizMatchProps, OakQuizOrder, type OakQuizOrderProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSearchFilterCheckBox, type OakSearchFilterCheckBoxProps, OakSecondaryButton, type OakSecondaryButtonProps, OakSecondaryLink, type OakSecondaryLinkProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTertiaryOLNav, type OakTertiaryOLNavProps, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTooltipProps, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens, useCookieConsent };
+export { HeadingTagComponent, OakAccordion, type OakAccordionProps, type OakAllSpacingToken, OakAnchorTarget, type OakAnchorTargetProps, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, OakCookieBanner, type OakCookieBannerProps, OakCookieConsent, type OakCookieConsentProps, OakCookieConsentProvider, OakCookieSettingsModal, type OakCookieSettingsModalProps, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, type OakDropShadowToken, OakDroppable, type OakDroppableProps, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGlobalStyle, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHandDrawnHR, type OakHandDrawnHRProps, OakHeaderHero, type OakHeaderHeroProps, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, OakInfo, OakInfoButton, type OakInfoButtonProps, type OakInfoCardProps, type OakInfoProps, type OakInnerPaddingToken, OakKbd, type OakKbdProps, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLink, type OakLinkProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakModal, OakModalBody, type OakModalBodyProps, OakModalFooter, type OakModalFooterProps, type OakModalProps, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakPupilJourneyHeader, type OakPupilJourneyHeaderProps, OakPupilJourneyLayout, type OakPupilJourneyLayoutProps, OakPupilJourneyList, OakPupilJourneyListCounter, OakPupilJourneyListItem, type OakPupilJourneyListProps, OakPupilJourneyPreviousLessons, type OakPupilJourneyPreviousLessonsProps, OakPupilJourneySubjectButton, type OakPupilJourneySubjectButtonProps, OakPupilJourneyYearButton, type OakPupilJourneyYearButtonProps, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizMatch, type OakQuizMatchProps, OakQuizOrder, type OakQuizOrderProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSearchFilterCheckBox, type OakSearchFilterCheckBoxProps, OakSecondaryButton, type OakSecondaryButtonProps, OakSecondaryLink, type OakSecondaryLinkProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTertiaryOLNav, type OakTertiaryOLNavProps, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTooltipProps, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens, useCookieConsent };

package/package.json

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