@uob-web-and-digital/component-library 2.7.2 → 2.7.4

package/README.md

@@ -1,111 +1,111 @@
-# University of Birmingham Component Library
-
-This is the frontend component library for the University of Birmingham website built using Storybook 7 and SASS.
-
-## Contents
-
-- [Installation and setup](#installation-and-setup)
-- [Working locally on the project](#working-locally-on-the-project)
-- [Creating Components](#creating-components)
-- [Deploying changes to the public Storybook](#deploying-project-changes-to-the-public-storybook)
-- [Publishing changes to the NPMJS package library](#publishing-changes-to-the-npmjs-package-library)
-- [Using the NPMJS package library](#using-the-component-package-library)
-
-## Installation and setup
-
-### Compatibility
-
-- **Node:** ^18.18.0
-- **React:** ^18.3.1
-
-### Setting up the project locally
-
-1. Clone the repo from Github: `git clone git@github.com:uob-itservices/component-library.git`
-2. Install NPM Node Modules by running `npm install` from the project root
-
-## Working locally on the project
-
-Run `npm run storybook` from the project root. This will run a new instance of [Storybook](https://storybook.js.org/) that can be accessed from `localhost:6006`.
-
-Changes made locally are automatically compiled and the browser instance of Storybook will automaticaly refresh, hot-loading changes very quickly where possible.
-
-## Creating components
-
-Components should always be created within the `src/components` folder.
-
-### Naming component folders
-
-You can create a new folder within `src/components` that is based on the chosen name for your component. The format of this folder name, react component and story should always be PascalCase i.e. `MyNewComponent`. SASS files should always be camelCase i.e. `myNewComponent`
-
-### Component file structure
-
-Within the component folder you must create the following 3 files:
-
-```
-ComponentName
- |_ {ComponentName}.tsx
- |_ {ComponentName}.stories.ts
- |_ {componentName}.scss
-```
-
-#### {ComponentName}.tsx
-
-This file is where the Component Structure is defined.
-
-#### {ComponentName}.stories.ts
-
-This file allows developers to pass in mockup content to the component that will render within Storybook. More information is available in the Storybook docs [Storybook JS - Defining Stories](https://storybook.js.org/docs/react/writing-stories/introduction#defining-stories)
-
-#### {componentName}.scss
-
-This is where component styling is defined using SASS/CSS.
-
-## Deploying project changes to the public Storybook
-
-The visible Storybook for sharing changes is private and is accessed at [https://stunning-invention-1w42em5.pages.github.io/](https://stunning-invention-1w42em5.pages.github.io/) you will need to be a member of the uob-itservices GitHub organisation and have access to the repository.
-
-This is automatically deployed and built when changes are pushed to the `develop` branch of the GitHub repository.
-
-## Linting Before Committing
-
-Before pushing a new commit to this component-library, please ensure that you run the following ES Lint command in your terminal:
-
-`npm run lint`
-
-This will highlight any linting issues that may arise when making file changes that will need to be fixed.
-
-To adhere to the commit message best practice commitlint is used. More information on commit message linting can be found here at [https://github.com/conventional-changelog/commitlint/#what-is-commitlint](https://github.com/conventional-changelog/commitlint/#what-is-commitlint)
-
-## Publishing changes to the NPMJS package library
-
-The repository will need publishing to the NPMJS package library [https://www.npmjs.com/package/@uob-web-and-digital/component-library](https://www.npmjs.com/package/@uob-web-and-digital/component-library) before it can be used in the UoB website.
-
-This is a private package so a read-only NPM access token will need be created in order to install the package.
-
-When the library in ready for a new release of the NPM package, you will need to increase the version number in the package.json and run a `npm install` to ensure the project gets updated with this version. After this you will need to create a pull request into the `develop` branch and then another pull request from the `develop` branch into `main`
-
-As this is a manual process, ensure that the `main` branch of the repository is always in sync with the currently published package.
-
-Releasing to the NPM registry are managed by GitHub Actions. You will need to create a new release and use the new release version as the tag. Once the release is published a GitHub Action will automatically run all the steps to publish the package on NPM.
-
-## Using the component package library
-
-In order to use the package you must have a NPM Access Token with read-only access to `@uob-web-and-digital/component-library`.
-
-To install the package run `npm install @uob-web-and-digital/component-library`.
-
-After installation you will need to add the following to your layout file;
-
-```
-import '@uob-web-and-digital/component-library/dist/main.css';
-```
-
-## Base64 fonts
-
-Fonts are base64 encoded so they are not hosted on a third party.
-
-To encode fonts to base64 you can run;
-
-```
-base64 -i Font.woff2 -o Font64txt
-```
+# University of Birmingham Component Library
+
+This is the frontend component library for the University of Birmingham website built using Storybook 7 and SASS.
+
+## Contents
+
+- [Installation and setup](#installation-and-setup)
+- [Working locally on the project](#working-locally-on-the-project)
+- [Creating Components](#creating-components)
+- [Deploying changes to the public Storybook](#deploying-project-changes-to-the-public-storybook)
+- [Publishing changes to the NPMJS package library](#publishing-changes-to-the-npmjs-package-library)
+- [Using the NPMJS package library](#using-the-component-package-library)
+
+## Installation and setup
+
+### Compatibility
+
+- **Node:** ^18.18.0
+- **React:** ^18.3.1
+
+### Setting up the project locally
+
+1. Clone the repo from Github: `git clone git@github.com:uob-itservices/component-library.git`
+2. Install NPM Node Modules by running `npm install` from the project root
+
+## Working locally on the project
+
+Run `npm run storybook` from the project root. This will run a new instance of [Storybook](https://storybook.js.org/) that can be accessed from `localhost:6006`.
+
+Changes made locally are automatically compiled and the browser instance of Storybook will automaticaly refresh, hot-loading changes very quickly where possible.
+
+## Creating components
+
+Components should always be created within the `src/components` folder.
+
+### Naming component folders
+
+You can create a new folder within `src/components` that is based on the chosen name for your component. The format of this folder name, react component and story should always be PascalCase i.e. `MyNewComponent`. SASS files should always be camelCase i.e. `myNewComponent`
+
+### Component file structure
+
+Within the component folder you must create the following 3 files:
+
+```
+ComponentName
+ |_ {ComponentName}.tsx
+ |_ {ComponentName}.stories.ts
+ |_ {componentName}.scss
+```
+
+#### {ComponentName}.tsx
+
+This file is where the Component Structure is defined.
+
+#### {ComponentName}.stories.ts
+
+This file allows developers to pass in mockup content to the component that will render within Storybook. More information is available in the Storybook docs [Storybook JS - Defining Stories](https://storybook.js.org/docs/react/writing-stories/introduction#defining-stories)
+
+#### {componentName}.scss
+
+This is where component styling is defined using SASS/CSS.
+
+## Deploying project changes to the public Storybook
+
+The visible Storybook for sharing changes is private and is accessed at [https://stunning-invention-1w42em5.pages.github.io/](https://stunning-invention-1w42em5.pages.github.io/) you will need to be a member of the uob-itservices GitHub organisation and have access to the repository.
+
+This is automatically deployed and built when changes are pushed to the `develop` branch of the GitHub repository.
+
+## Linting Before Committing
+
+Before pushing a new commit to this component-library, please ensure that you run the following ES Lint command in your terminal:
+
+`npm run lint`
+
+This will highlight any linting issues that may arise when making file changes that will need to be fixed.
+
+To adhere to the commit message best practice commitlint is used. More information on commit message linting can be found here at [https://github.com/conventional-changelog/commitlint/#what-is-commitlint](https://github.com/conventional-changelog/commitlint/#what-is-commitlint)
+
+## Publishing changes to the NPMJS package library
+
+The repository will need publishing to the NPMJS package library [https://www.npmjs.com/package/@uob-web-and-digital/component-library](https://www.npmjs.com/package/@uob-web-and-digital/component-library) before it can be used in the UoB website.
+
+This is a private package so a read-only NPM access token will need be created in order to install the package.
+
+When the library in ready for a new release of the NPM package, you will need to increase the version number in the package.json and run a `npm install` to ensure the project gets updated with this version. After this you will need to create a pull request into the `develop` branch and then another pull request from the `develop` branch into `main`
+
+As this is a manual process, ensure that the `main` branch of the repository is always in sync with the currently published package.
+
+Releasing to the NPM registry are managed by GitHub Actions. You will need to create a new release and use the new release version as the tag. Once the release is published a GitHub Action will automatically run all the steps to publish the package on NPM.
+
+## Using the component package library
+
+In order to use the package you must have a NPM Access Token with read-only access to `@uob-web-and-digital/component-library`.
+
+To install the package run `npm install @uob-web-and-digital/component-library`.
+
+After installation you will need to add the following to your layout file;
+
+```
+import '@uob-web-and-digital/component-library/dist/main.css';
+```
+
+## Base64 fonts
+
+Fonts are base64 encoded so they are not hosted on a third party.
+
+To encode fonts to base64 you can run;
+
+```
+base64 -i Font.woff2 -o Font64txt
+```

package/dist/components/atoms/BreadcrumbLink/BreadcrumbLink.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './breadcrumbLink.scss';
+export interface BreadcrumbLinkProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    url: string;
+    title: string;
+}
+export default function BreadcrumbLink({ theme, inverse, url, title }: BreadcrumbLinkProps): ReactElement;

package/dist/components/atoms/BreadcrumbLink/BreadcrumbLink.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import BreadcrumbLink from './BreadcrumbLink';
+declare const meta: {
+    title: string;
+    component: typeof BreadcrumbLink;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Dark: Story;
+export declare const Light: Story;

package/dist/components/atoms/CalendarGraphic/CalendarGraphic.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './calendarGraphic.scss';
+export interface CalendarGraphicProps {
+    theme: ThemeProps;
+    status: 'Upcoming' | 'Recorded' | 'More';
+    day?: string;
+    month?: string;
+}
+export default function CalendarGraphic({ theme, status, day, month }: CalendarGraphicProps): ReactElement;

package/dist/components/atoms/CalendarGraphic/CalendarGraphic.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import CalendarGraphic from './CalendarGraphic';
+declare const meta: {
+    title: string;
+    component: typeof CalendarGraphic;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CalendarGraphicUpcomingEvent: Story;
+export declare const CalendarGraphicRecordedEvent: Story;
+export declare const CalendarGraphicMoreDatesEvent: Story;

package/dist/components/atoms/CampusSelectorLink/CampusSelectorLink.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './campusSelectorLink.scss';
+export interface CampusSelectorLinkProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    label: string;
+    url: string;
+    externalLink?: boolean;
+    active?: boolean;
+}
+export default function CampusSelectorLink({ theme, label, url, externalLink, active }: CampusSelectorLinkProps): ReactElement;

package/dist/components/atoms/CampusSelectorLink/CampusSelectorLink.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import CampusSelectorLink from './CampusSelectorLink';
+declare const meta: {
+    title: string;
+    component: typeof CampusSelectorLink;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof CampusSelectorLink>;
+export declare const Default: Story;
+export declare const Active: Story;

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ChangeEvent } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './checkbox.scss';
+export interface CheckboxProps {
+    theme: ThemeProps;
+    name: string;
+    value: string;
+    defaultChecked?: boolean;
+    label: string;
+    id: string;
+    onChange?: (e: ChangeEvent) => void;
+}
+export default function Checkbox({ theme, name, defaultChecked, label, id, value, onChange }: CheckboxProps): ReactElement;

package/dist/components/atoms/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;

package/dist/components/atoms/CourseDeliveryPill/CourseDeliveryPill.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { IconType } from '../Icons/Icons';
+import './courseDeliveryPill.scss';
+export interface CourseDeliveryPillProps {
+    theme: ThemeProps;
+    label: string;
+    iconType?: IconType;
+}
+export default function CourseDeliveryPill({ theme, label, iconType }: CourseDeliveryPillProps): ReactElement;

package/dist/components/atoms/CourseDeliveryPill/CourseDeliveryPill.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import CourseDeliveryPill from './CourseDeliveryPill';
+declare const meta: {
+    title: string;
+    component: typeof CourseDeliveryPill;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof CourseDeliveryPill>;
+export declare const Default: Story;
+export declare const NoIcon: Story;

package/dist/components/atoms/CourseIcon/CourseIcon.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { IconType } from '../Icons/Icons';
+import './courseIcon.scss';
+export interface CourseIconProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    icon: IconType;
+    backgroundColor?: 'pale' | 'dark';
+}
+export default function CourseIcon({ theme, inverse, icon, backgroundColor }: CourseIconProps): ReactElement;

package/dist/components/atoms/CourseIcon/CourseIcon.stories.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+    };
+};
+export default meta;
+export declare const allCourseIconsExample: () => ReactElement;

package/dist/components/atoms/DateInput/DateInput.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './dateInput.scss';
+export interface DateInputProps {
+    theme: ThemeProps;
+    name: string;
+    id: string;
+    label: string;
+    defaultValue?: string;
+    onChange?: (e: ChangeEvent) => void;
+}
+export default function DateInput({ theme, name, id, label, defaultValue, onChange }: DateInputProps): ReactElement;

package/dist/components/atoms/DateInput/DateInput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DateInput from './DateInput';
+declare const meta: Meta<typeof DateInput>;
+export default meta;
+type Story = StoryObj<typeof DateInput>;
+export declare const Default: Story;

package/dist/components/atoms/ExampleTheming/ExampleTheming.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './exampleTheming.scss';
+export interface ExampleThemingProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const ExampleTheming: ({ theme, inverse }: ExampleThemingProps) => ReactElement;

package/dist/components/atoms/ExampleTheming/ExampleTheming.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { ExampleTheming } from './ExampleTheming';
+declare const meta: {
+    title: string;
+    component: ({ theme, inverse }: import("./ExampleTheming").ExampleThemingProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof ExampleTheming>;
+export declare const Dark: Story;
+export declare const Light: Story;

package/dist/components/atoms/FormInput/FormInput.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './formInput.scss';
+export interface FormInputProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    /**
+     * Whether to inverse the colours
+     */
+    inverse?: boolean;
+    fieldName: string;
+    hiddenLabel?: boolean;
+    defaultValue?: string;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const FormInput: ({ theme, inverse, fieldName, hiddenLabel, defaultValue, placeholder, required, onChange }: FormInputProps) => ReactElement;

package/dist/components/atoms/FormInput/FormInput.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { FormInput } from './FormInput';
+declare const meta: {
+    title: string;
+    component: ({ theme, inverse, fieldName, hiddenLabel, defaultValue, placeholder, required, onChange }: import("./FormInput").FormInputProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof FormInput>;
+export declare const FormInputExample: Story;

package/dist/components/atoms/FormInput/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { FormInputProps } from './FormInput';
+export declare const formInputProps: FormInputProps;

package/dist/components/atoms/FormSelect/FormSelect.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './formSelect.scss';
+export interface SelectOptionsProps {
+    label: string;
+    value: string;
+    selected?: boolean;
+}
+export interface FormSelectProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    fieldName: string;
+    title: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    ariaControls?: string;
+    autoFocus?: boolean;
+    selectOptions: SelectOptionsProps[];
+    defaultValue: string;
+    value?: string;
+    hiddenLabel?: boolean;
+    customLabel?: string;
+}
+export declare const FormSelect: ({ theme, inverse, fieldName, selectOptions, defaultValue, hiddenLabel, customLabel, title, onChange, value }: FormSelectProps) => ReactElement;

package/dist/components/atoms/FormSelect/FormSelect.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { FormSelect } from './FormSelect';
+declare const meta: {
+    title: string;
+    component: ({ theme, inverse, fieldName, selectOptions, defaultValue, hiddenLabel, customLabel, title, onChange, value }: import("./FormSelect").FormSelectProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof FormSelect>;
+export declare const Dark: Story;
+export declare const Light: Story;

package/dist/components/atoms/FormSelect/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { FormSelectProps } from './FormSelect';
+export declare const formSelectProps: FormSelectProps;

package/dist/components/atoms/Heading/Heading.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from 'react';
+export interface HeadingProps {
+    htmlTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+    classNames?: string;
+    children?: ReactNode;
+}
+export default function Heading({ htmlTag, classNames, children }: HeadingProps): ReactElement;

package/dist/components/atoms/Heading/Heading.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import Heading from './Heading';
+declare const meta: {
+    title: string;
+    component: typeof Heading;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Default: Story;
+export declare const h3: Story;
+export declare const h4: Story;

package/dist/components/atoms/IconButton/IconButton.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconType } from '../Icons/Icons';
+import { ThemeProps } from '../../../themeProps';
+import './iconButton.scss';
+export interface IconButtonProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    url?: string;
+    title: string;
+    icon: IconType;
+    externalLink?: boolean;
+    onClick?: () => void;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    isSubmit?: boolean;
+    disabled?: boolean;
+}
+type Ref = HTMLButtonElement | null;
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<Ref>>;
+export {};

package/dist/components/atoms/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement | null>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FacebookDark: Story;
+export declare const FacebookLight: Story;
+export declare const TwitterDark: Story;
+export declare const TwitterLight: Story;
+export declare const InstagramDark: Story;
+export declare const InstagramLight: Story;
+export declare const WeiboDark: Story;
+export declare const WeiboLight: Story;
+export declare const WechatDark: Story;
+export declare const WechatLight: Story;
+export declare const YoutubeDark: Story;
+export declare const YoutubeLight: Story;
+export declare const LinkedInDark: Story;
+export declare const HamburgerLight: Story;
+export declare const ArrowRightDark: Story;
+export declare const ArrowRightLight: Story;
+export declare const ArrowLeftDark: Story;
+export declare const ArrowLeftLight: Story;
+export declare const EmailDark: Story;
+export declare const EmailLight: Story;

package/dist/components/atoms/IconButton/defaultProps.d.ts

@@ -0,0 +1,12 @@
+import { IconButtonProps } from './IconButton';
+export declare const FaceBookProps: IconButtonProps;
+export declare const TwitterProps: IconButtonProps;
+export declare const InstagramProps: IconButtonProps;
+export declare const WeiboProps: IconButtonProps;
+export declare const WeChatProps: IconButtonProps;
+export declare const YouTubeProps: IconButtonProps;
+export declare const LinkedInProps: IconButtonProps;
+export declare const ArrowLeftProps: IconButtonProps;
+export declare const ArrowRightProps: IconButtonProps;
+export declare const HamburgerProps: IconButtonProps;
+export declare const EmailProps: IconButtonProps;

package/dist/components/atoms/IconControl/IconControl.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IconType } from '../Icons/Icons';
+import { ThemeProps } from '../../../themeProps';
+import './iconControl.scss';
+export interface IconControlProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    icon: IconType;
+    onClick?: () => void;
+    ariaControls?: string;
+    isSubmit?: boolean;
+    disabled?: boolean;
+}
+type Ref = HTMLButtonElement | null;
+export declare const IconControl: React.ForwardRefExoticComponent<IconControlProps & React.RefAttributes<Ref>>;
+export {};

package/dist/components/atoms/IconControl/IconControl.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./IconControl").IconControlProps & React.RefAttributes<HTMLButtonElement | null>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CloseControlDarkBackground: Story;
+export declare const CloseControlLightBackground: Story;
+export declare const DownControlDarkBackground: Story;
+export declare const DownControlLightBackground: Story;

package/dist/components/atoms/IconControl/defaultProps.d.ts

@@ -0,0 +1,3 @@
+import { IconControlProps } from './IconControl';
+export declare const CloseControlProps: IconControlProps;
+export declare const DownControlProps: IconControlProps;