@oaknational/oak-components 0.6.2 → 0.8.0

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, ComponentPropsWithRef, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, ReactElement, ComponentProps } from 'react';
+import React__default, { CSSProperties, MouseEventHandler, ElementType, ComponentPropsWithoutRef, FC, ReactNode, ComponentPropsWithRef, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, ReactElement, ComponentProps, HTMLAttributes } from 'react';
 import * as csstype from 'csstype';
 import * as Image from 'next/image';
 import Image__default, { ImageProps as ImageProps$1 } from 'next/image';
@@ -57,7 +57,7 @@ declare const oakColorTokens: {
     transparent: string;
 };
 type OakColorToken = keyof typeof oakColorTokens;
-declare const oakUiRoleTokens: 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-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"];
+declare const oakUiRoleTokens: 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 oakUiRoleTokens)[number];
 type UiRoleMap = Record<OakUiRoleToken, OakColorToken | null | undefined>;
 type OakCombinedColorToken = OakColorToken | OakUiRoleToken;
@@ -1653,7 +1653,14 @@ type BaseCheckBoxProps = {
     id: string;
     disabled?: boolean;
     value: string;
+    /**
+     * Uncontrolled checked state
+     */
     defaultChecked?: boolean;
+    /**
+     * Controlled checked state
+     */
+    checked?: boolean;
     onHovered?: (value: string, id: string, duration: number) => void;
     onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
     onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
@@ -2012,6 +2019,84 @@ type OakDraggableFeedbackProps = ComponentPropsWithoutRef<typeof OakDraggable> &
  */
 declare const OakDraggableFeedback: ({ feedback, ...props }: OakDraggableFeedbackProps) => React__default.JSX.Element;
 
+type OakAccordionProps = {
+    /**
+     * The header of the accordion
+     */
+    header: ReactNode;
+    /**
+     * Slot to place content after the header and outside the button
+     */
+    headerAfterSlot?: ReactNode;
+    /**
+     * Whether the accordion should be open initially
+     */
+    initialOpen?: boolean;
+    /**
+     * The content of the accordion
+     */
+    children: ReactNode;
+    /**
+     * The id of the accordion
+     */
+    id: string;
+};
+/**
+ * An accordion component that can be used to show/hide content
+ */
+declare const OakAccordion: ({ header, headerAfterSlot, children, initialOpen, id, }: OakAccordionProps) => React__default.JSX.Element;
+
+type OakModalProps = {
+    /**
+     * The content of the modal.
+     * Use with `<OakModalBody>` for best results.
+     */
+    children: ReactNode;
+    /**
+     * Slot for the footer of the modal.
+     * Use with `<OakModalFooter>` for best results.
+     */
+    footerSlot?: ReactNode;
+    /**
+     * Indicates whether the modal is open or closed
+     */
+    isOpen: boolean;
+    /**
+     * Called when the modal is closed
+     */
+    onClose: () => void;
+    /**
+     * The DOM container to render the modal portal into.
+     *
+     * @default document.body
+     */
+    domContainer?: Element;
+} & Pick<HTMLAttributes<Element>, "aria-label" | "aria-description" | "aria-labelledby" | "aria-describedby">;
+/**
+ * Modal dialog with trapped focus and a close button.
+ */
+declare const OakModal: ({ children, footerSlot, domContainer, isOpen, onClose, ...rest }: OakModalProps) => React__default.ReactPortal;
+
+type OakModalBodyProps = {
+    children: ReactNode;
+};
+/**
+ * Intended to be used in the `children` slot of `OakModal`
+ * it applies some padding and margin to ensure that the contents
+ * line up with the modal's header and footer
+ */
+declare const OakModalBody: (props: OakModalBodyProps) => React__default.JSX.Element;
+
+type OakModalFooterProps = {
+    children: ReactNode;
+};
+/**
+ * Intended to be used in the `footer` slot of `OakModal`
+ * it is ideal as a container for one or more buttons.
+ * It switches from a horizontal to vertical layout on smaller screens
+ */
+declare const OakModalFooter: (props: OakModalFooterProps) => React__default.JSX.Element;
+
 type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
     feedback?: "correct" | "incorrect" | null;
     image?: React__default.JSX.Element;
@@ -2351,4 +2436,4 @@ 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, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, 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, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInfoCardProps, 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, 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, OakQuizMatch, type OakQuizMatchProps, OakQuizOrder, type OakQuizOrderProps, 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 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 };
+export { HeadingTagComponent, OakAccordion, type OakAccordionProps, 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, 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, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInfoCardProps, 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, 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, OakSecondaryButton, type OakSecondaryButtonProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",
@@ -53,6 +53,7 @@
     "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/blocks": "^7.6.7",
     "@storybook/nextjs": "^7.6.7",
+    "@storybook/preview-api": "^8.0.4",
     "@storybook/react": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.2.0",
@@ -61,6 +62,7 @@
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.47",
     "@types/react-test-renderer": "^18.0.7",
+    "@types/react-transition-group": "^4.4.10",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
@@ -80,7 +82,9 @@
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-focus-on": "^3.9.2",
     "react-test-renderer": "^18.2.0",
+    "react-transition-group": "^4.4.5",
     "rollup": "^4.9.4",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",