@oaknational/oak-components 0.0.30 → 0.0.32

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import * as styled_components from 'styled-components';
 import { CSSProperties as CSSProperties$1 } from 'styled-components';
 import * as React$1 from 'react';
-import React__default, { CSSProperties, MouseEventHandler, ElementType, ComponentPropsWithoutRef, FC, ReactNode, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, ReactElement } from 'react';
+import React__default, { CSSProperties, MouseEventHandler, ElementType, ComponentPropsWithoutRef, FC, ReactNode, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, ReactElement, ComponentProps } from 'react';
 import * as Image from 'next/image';
 import Image__default, { ImageProps as ImageProps$1 } from 'next/image';
 import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
@@ -536,6 +536,7 @@ type OakLabelProps = TypographyStyleProps & ColorStyleProps;
 declare const OakLabel: styled_components.StyledComponent<"label", styled_components.DefaultTheme, TypographyStyleProps & ColorStyleProps, never>;
 
 declare const icons: {
+    readonly "question-mark": "v1706872277/icons/question-mark.svg";
     readonly home: "v1699887218/icons/gvqxjxcw07ei2kkmwnes.svg";
     readonly send: "v1699893673/icons/rmvytilpjgvh3pgwc8ph.svg";
     readonly rocket: "v1699894015/icons/u26xm5hteot875ozfnk9.svg";
@@ -547,9 +548,9 @@ declare const icons: {
     readonly worksheet: "v1699895300/icons/ez1s6mtpe5jkunnxzvlw.svg";
     readonly facebook: "v1699895330/icons/iojlvh3o5lshy2jupyph.svg";
     readonly share: "v1699895363/icons/agcmduftef3wcla6gzec.svg";
-    readonly "arrow-right": "v1699895398/icons/fv0z57zerrioft52dd9n.svg";
+    readonly "arrow-right": "v1707149070/icons/fv0z57zerrioft52dd9n.svg";
     readonly "worksheet-3": "v1699895429/icons/bzhojpjxp9rukdvh7daz.svg";
-    readonly "chevron-right": "v1699895475/icons/rhzft6wnpdp3nvsmlyei.svg";
+    readonly "chevron-right": "v1707146553/icons/rhzft6wnpdp3nvsmlyei.svg";
     readonly save: "v1699895505/icons/rh1ahwwtbemvz0ihluew.svg";
     readonly "quiz-3": "v1699895534/icons/zoayhgtrotv32fad7d3k.svg";
     readonly "chevron-down": "v1699953557/icons/botfld6brychmttwtv6u.svg";
@@ -558,13 +559,13 @@ declare const icons: {
     readonly books: "v1699953657/icons/hz4l3iq6i68kazvkvorq.svg";
     readonly "supervision-level": "v1699953696/icons/cwqhknapp3maa4g0t3lj.svg";
     readonly "quiz-white": "v1699953730/icons/gpcehpgr9mqoumsa25xe.svg";
-    readonly "arrow-left": "v1699953763/icons/ejrm9dpgpzb7ddbo8z2i.svg";
+    readonly "arrow-left": "v1707149179/icons/ejrm9dpgpzb7ddbo8z2i.svg";
     readonly "additional-material": "v1699953798/icons/ntoq4tqvcm2uj1pajubt.svg";
     readonly "slide-deck-3": "v1699953830/icons/sm92moja9d5utu3cj16c.svg";
     readonly "sign-language": "v1699953861/icons/ns94ozvozzi22enxkx0x.svg";
     readonly external: "v1699953892/icons/hlxmejse3mcr4tqo6t8u.svg";
     readonly "equipment-required": "v1699953925/icons/pw22bdhj2vrzfv2ogi4e.svg";
-    readonly "chevron-left": "v1699953962/icons/xpp10hijwzhyeqt6ylqf.svg";
+    readonly "chevron-left": "v1707146774/icons/xpp10hijwzhyeqt6ylqf.svg";
     readonly download: "v1699953991/icons/dk0f6a6hdpzxftjosngn.svg";
     readonly search: "v1704901279/icons/canbi3fuz5fanzom2hvi.svg";
     readonly "chevron-up": "v1699954058/icons/pay71thmhhylj7z28sj1.svg";
@@ -624,7 +625,7 @@ declare const icons: {
 };
 type IconName = keyof typeof icons;
 
-declare const oakIconNames: ("search" | "video" | "download" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-physical-development" | "subject-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-rshe-pshe" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-therapy" | "subject-understanding-the-world")[];
+declare const oakIconNames: ("search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-physical-development" | "subject-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-rshe-pshe" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-therapy" | "subject-understanding-the-world")[];
 type OakIconName = IconName;
 type OakIconProps = Omit<OakImageProps, "alt" | "src"> & {
     iconName: OakIconName;
@@ -833,7 +834,7 @@ declare const OakTertiaryButton: <C extends React__default.ElementType = "button
     iconBackground?: OakRoundIconProps["$background"];
     iconColorFilter?: OakRoundIconProps["$colorFilter"];
     isTrailingIcon?: boolean | undefined;
-    iconName?: "search" | "video" | "download" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-physical-development" | "subject-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-rshe-pshe" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-therapy" | "subject-understanding-the-world" | undefined;
+    iconName?: "search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-physical-development" | "subject-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-rshe-pshe" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-therapy" | "subject-understanding-the-world" | undefined;
 } & {
     element?: C | undefined;
 } & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
@@ -1038,14 +1039,17 @@ type OakTextInputProps = {
     readOnlyBorderColor?: OakCombinedColorToken;
     disabledColor?: OakCombinedColorToken;
     readOnlyColor?: OakCombinedColorToken;
-    width?: SizeStyleProps["$width"];
-    maxWidth?: SizeStyleProps["$maxWidth"];
+    /**
+     * The width of the surrounding div - the input and icon will fill this
+     */
+    wrapperWidth?: SizeStyleProps["$width"];
+    wrapperMaxWidth?: SizeStyleProps["$maxWidth"];
     iconAlt?: string;
 } & InternalTextInputProps;
 /**
  * Default input which can be extended to create specialised inputs.
  */
-declare const OakTextInput: ({ type, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, color, disabledColor, readOnlyColor, validity, iconColor, validBorderColor, invalidBorderColor, validIconColor, invalidIconColor, iconName, iconAlt, isTrailingIcon, width, maxWidth, ...props }: OakTextInputProps) => React__default.JSX.Element;
+declare const OakTextInput: ({ type, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, color, disabledColor, readOnlyColor, validity, iconColor, validBorderColor, invalidBorderColor, validIconColor, invalidIconColor, iconName, iconAlt, isTrailingIcon, wrapperWidth, wrapperMaxWidth, ...props }: OakTextInputProps) => React__default.JSX.Element;
 
 type InternalTooltipProps = OakFlexProps & {
     isOpen: boolean;
@@ -1120,6 +1124,30 @@ declare const OakHandDrawnCardWithIcon: ({ iconName, iconColor, iconWidth, iconH
  */
 declare const OakPromoTag: () => React__default.JSX.Element;
 
+type OakInfoCardProps = {
+    children: React__default.ReactNode;
+};
+type OakCardHeaderprops = {
+    iconName: OakIconName;
+    tag: OakHeadingTag;
+    children: string;
+};
+declare const OakCardHeader: (props: OakCardHeaderprops) => React__default.JSX.Element;
+declare const OakLessonInfoCard: (props: OakInfoCardProps) => React__default.JSX.Element;
+declare const OakStaticMessageCard: (props: OakInfoCardProps) => React__default.JSX.Element;
+
+type OakCollapsibleContentProps = ComponentProps<typeof OakFlex> & {
+    /**
+     * Whether the content is displayed or not
+     */
+    isOpen: boolean;
+};
+/**
+ * A filled scrollable box that can be hidden with the `isOpen` prop.
+ * Useful for hiding content that is not immediately relevant
+ */
+declare const OakCollapsibleContent: ({ isOpen, children, id, ...rest }: OakCollapsibleContentProps) => React__default.JSX.Element;
+
 type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
     feedback?: "correct" | "incorrect" | null;
     image?: React__default.JSX.Element;
@@ -1323,4 +1351,23 @@ type OakPrimaryNavProps = {
 };
 declare const OakPrimaryNav: ({ ariaLabel, navItems }: OakPrimaryNavProps) => React__default.JSX.Element;
 
-export { HeadingTagComponent, type OakAllSpacingToken, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, type OakDropShadowToken, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInnerPaddingToken, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSecondaryButton, type OakSecondaryButtonProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, 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 };
+type OakLessonVideoTranscriptProps = {
+    /**
+     * The transcript content
+     */
+    children: ReactNode;
+    /**
+     * The id of the collapsible content element. This is used to link the button to the content
+     */
+    id: string;
+    /**
+     * A control to toggle the video to display sign language
+     */
+    signLanguageControl?: ReactNode;
+};
+/**
+ * Display a togglable video transcript with a slot to display a sign language control
+ */
+declare const OakLessonVideoTranscript: ({ children, id, signLanguageControl, }: OakLessonVideoTranscriptProps) => React__default.JSX.Element;
+
+export { HeadingTagComponent, type OakAllSpacingToken, 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, type OakDropShadowToken, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInfoCardProps, type OakInnerPaddingToken, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSecondaryButton, type OakSecondaryButtonProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, 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 };

package/package.json

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