@digigov/ui 0.35.5 → 1.0.0-7c9716da

package/src/typography/Heading/__stories__/Default.tsx

@@ -4,15 +4,15 @@ import { Heading } from '@digigov/ui/typography/Heading';
 export const Default = () => (
   <>
     <Heading> govgr-heading-xl </Heading>
-    <Heading size="l" element="h2">
+    <Heading size="lg" element="h2">
       {' '}
       govgr-heading-lg{' '}
     </Heading>
-    <Heading size="m" element="h3">
+    <Heading size="md" element="h3">
       {' '}
       govgr-heading-md{' '}
     </Heading>
-    <Heading size="s" element="h4">
+    <Heading size="sm" element="h4">
       {' '}
       govgr-heading-sm{' '}
     </Heading>

package/src/typography/Heading/index.mdx

@@ -9,7 +9,11 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="typography/Heading" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/Heading"
+  story="Default.tsx"
+/>
 
 ## API
 

package/src/typography/HeadingCaption/__stories__/Default.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
-import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 import { Heading } from '@digigov/ui/typography/Heading';
+import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export const Default = () => (
   <>
     <HeadingCaption size="xl">caption for govgr-heading-xl </HeadingCaption>
-    <Heading size="l" element="h2">
+    <Heading size="lg" element="h2">
       {' '}
       govgr-heading-xl{' '}
     </Heading>
-    <HeadingCaption size="l">caption for govgr-heading-lg </HeadingCaption>
-    <Heading size="l" element="h2">
+    <HeadingCaption size="lg">caption for govgr-heading-lg </HeadingCaption>
+    <Heading size="lg" element="h2">
       {' '}
       govgr-heading-lg{' '}
     </Heading>
-    <HeadingCaption size="m">caption for govgr-heading-md </HeadingCaption>
-    <Heading size="m" element="h3">
+    <HeadingCaption size="md">caption for govgr-heading-md </HeadingCaption>
+    <Heading size="md" element="h3">
       {' '}
       govgr-heading-md{' '}
     </Heading>

package/src/typography/HeadingCaption/__stories__/NestedToTitle.tsx

@@ -3,7 +3,7 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export const NestedToTitle = () => (
-  <Heading size="l" element="h2">
+  <Heading size="lg" element="h2">
     <HeadingCaption size="xl">caption for govgr-heading-xl </HeadingCaption>
     govgr-heading-xl
   </Heading>

package/src/typography/HeadingCaption/index.mdx

@@ -9,11 +9,14 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="typography/HeadingCaption" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/HeadingCaption"
+  story="Default.tsx"
+/>
 
 ### Nested caption to title
 
-
 ## API
 
 <PropTypes packageName="@digigov/ui" component="HeadingCaption" />

package/src/typography/Hint/index.mdx

@@ -9,11 +9,14 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="typography/Hint" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/Hint"
+  story="Default.tsx"
+/>
 
 ### Font sizes
 
-
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Hint" />

package/src/typography/NormalText/__stories__/FontSizes.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { NormalText } from '@digigov/ui/typography/NormalText';
-import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
 export const FontSizes = () => (
   <>

package/src/typography/NormalText/__stories__/FontWeight.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { NormalText } from '@digigov/ui/typography/NormalText';
-import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
 export const FontWeight = () => (
   <>

package/src/typography/NormalText/__stories__/Variants.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
+import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { NormalText } from '@digigov/ui/typography/NormalText';
-import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
 export const Variants = () => (
   <>
-    <NormalText variant="small"> govgr-variant-small </NormalText>
+    <NormalText variant={'sm'}> govgr-variant-small </NormalText>
     <SectionBreak visible={false} />
-    <NormalText variant="lead"> govgr-variant-lead </NormalText>
+    <NormalText variant={'lg'}> govgr-variant-lead </NormalText>
   </>
 );
 

package/src/typography/NormalText/index.mdx

@@ -9,21 +9,32 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="typography/NormalText" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/NormalText"
+  story="Default.tsx"
+/>
 
 ### Variants
 
-<Story packageName="@digigov/ui" component="typography/NormalText" story="Variants.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/NormalText"
+  story="Variants.tsx"
+/>
 
 ## Font override classes
 
 ### Font size
 
-<Story packageName="@digigov/ui" component="typography/NormalText" story="FontSizes.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/NormalText"
+  story="FontSizes.tsx"
+/>
 
 ### Font weight
 
-
 ## API
 
 <PropTypes packageName="@digigov/ui" component="NormalText" />

package/src/typography/Paragraph/__stories__/LeadVariant.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const LeadVariant = () => (
-  <Paragraph variant="lead">govgr-body</Paragraph>
+  <Paragraph variant={'lg'}>govgr-body</Paragraph>
 );
 
 export default LeadVariant;

package/src/typography/Paragraph/__stories__/SmallVariant.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const SmallVariant = () => (
-  <Paragraph variant="small">govgr-body</Paragraph>
+  <Paragraph variant={'sm'}>govgr-body</Paragraph>
 );
 
 export default SmallVariant;

package/src/typography/Paragraph/index.mdx

@@ -17,21 +17,32 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ### Lead paragraph
 
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/Paragraph"
+  story="LeadVariant.tsx"
+/>
 
 ### Small paragraph
 
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/Paragraph"
+  story="SmallVariant.tsx"
+/>
 
 ## Font override classes
 
 ### Font size
 
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/Paragraph"
+  story="FontSizes.tsx"
+/>
 
 ### Font weight
 
-
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Paragraph" />

package/src/typography/Title/index.tsx

@@ -7,18 +7,11 @@ export interface TitleProps extends Omit<HeadingProps, 'size'> {
   component?: 'h1' | 'h2' | 'h3' | 'h4';
   ref?: React.Ref<HTMLHeadingElement>;
 }
-const sizeMappings: Record<string, HeadingProps['size']> = {
-  xl: 'xl',
-  lg: 'l',
-  md: 'm',
-  sm: 's',
-};
 
 export const Title: React.FC<TitleProps> = withDeprecation(
   ({ size = 'xl', component, children, ...props }) => {
-    const newSize = sizeMappings[size];
     return (
-      <Heading size={newSize} element={component} {...props}>
+      <Heading size={size} element={component} {...props}>
         {children}
       </Heading>
     );

package/src/utils/Kitchensink/AllComponents.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
 import { stories } from '@digigov/ui/registry';
-import { KitchensinkDashboard } from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
+import { KitchenSinkDashboard } from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
 
-export const AllComponents = () => <KitchensinkDashboard stories={stories} />;
+export const AllComponents = () => <KitchenSinkDashboard stories={stories} />;

package/src/utils/Kitchensink/KitchensinkByCategory.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import Heading from '@digigov/react-core/Heading';
-
+import {
+  KitchenSinkCategory,
+  KitchenSinkHeading,
+} from '@digigov/ui/misc/KitchenSink';
 import { KitchensinkByLetter } from '@digigov/ui/utils/Kitchensink/KitchensinkByLetter';
 
 export interface KitchensinkByCategoryInterface {
@@ -34,11 +36,9 @@ export const KitchensinkByCategory = ({
     {}
   );
   return (
-    <>
-      <Heading className="govgr-kitchensink-category__heading">
-        {category}
-      </Heading>
-      <div className="govgr-kitchensink-category">
+    <div>
+      <KitchenSinkHeading>{category}</KitchenSinkHeading>
+      <KitchenSinkCategory>
         {Object.keys(alphabeticalOrder)
           .sort()
           .map((letter, index) => {
@@ -50,7 +50,7 @@ export const KitchensinkByCategory = ({
               />
             );
           })}
-      </div>
-    </>
+      </KitchenSinkCategory>
+    </div>
   );
 };

package/src/utils/Kitchensink/KitchensinkByLetter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Heading from '@digigov/react-core/Heading';
-
+import { KitchenSinkLetterContent } from '@digigov/react-core/KitchenSinkLetterContent';
 import { KitchensinkComponent } from '@digigov/ui/utils/Kitchensink/KitchensinkComponent';
 
 export interface KitchensinkByLetterInterface {
@@ -15,7 +15,7 @@ export const KitchensinkByLetter = ({
   return (
     <div>
       <Heading>{letter}</Heading>
-      <div className="govgr-kitchensink-letter-content">
+      <KitchenSinkLetterContent>
         {stories.map((story, index) => {
           return (
             <KitchensinkComponent
@@ -29,7 +29,7 @@ export const KitchensinkByLetter = ({
             />
           );
         })}
-      </div>
+      </KitchenSinkLetterContent>
     </div>
   );
 };

package/src/utils/Kitchensink/KitchensinkComponent.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import clsx from 'clsx';
-import Heading from '@digigov/ui/typography/Heading';
-import Link from '@digigov/ui/core/Link';
-import SectionBreak from '@digigov/ui/core/SectionBreak';
-import { Card, ServiceBadge } from '@digigov/ui/core';
+import { KitchenSinkCard } from '@digigov/react-core/KitchenSinkCard';
+import { KitchenSinkContent } from '@digigov/react-core/KitchenSinkContent';
+import { KitchenSinkContentInfo } from '@digigov/react-core/KitchenSinkContentInfo';
+import { KitchenSinkContentTags } from '@digigov/react-core/KitchenSinkContentTags';
+import { ServiceBadge } from '@digigov/ui/feedback/ServiceBadge';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import Link from '@digigov/ui/navigation/Link';
 import { Paragraph } from '@digigov/ui/typography';
+import Heading from '@digigov/ui/typography/Heading';
 
 export interface KitchensinkComponentInterface {
   tags?: string[]; // ex. Experimental
@@ -12,7 +15,7 @@ export interface KitchensinkComponentInterface {
   description?: string;
   link?: string;
   stories: React.ReactElement[];
-  width?: 'm' | 'l';
+  width?: 'md' | 'lg';
 }
 export const KitchensinkComponent = ({
   tags = [],
@@ -20,25 +23,20 @@ export const KitchensinkComponent = ({
   description,
   link,
   stories,
-  width = 'm',
+  width = 'md',
 }: KitchensinkComponentInterface) => {
   return (
-    <div
-      className={clsx({
-        'govgr-kitchensink-content-wide': width === 'l',
-        'govgr-kitchensink-content': true,
-      })}
-    >
-      <div className="govgr-kitchensink-content__info">
-        <div className="govgr-firma-tags">
+    <KitchenSinkContent wide={width === 'lg'}>
+      <KitchenSinkContentInfo>
+        <KitchenSinkContentTags>
           {tags &&
             tags.map((tag, index) => <ServiceBadge label={tag} key={index} />)}
-        </div>
-        <Heading size="l">{title}</Heading>
+        </KitchenSinkContentTags>
+        <Heading size="lg">{title}</Heading>
         <Paragraph>{description}</Paragraph>
         {link && <Link href={link}>View on GOV.GR Design System</Link>}
         <SectionBreak />
-      </div>
+      </KitchenSinkContentInfo>
       {Object.keys(stories)
         .filter((story) => story !== 'default')
         .map((story, index) => {
@@ -46,17 +44,13 @@ export const KitchensinkComponent = ({
           return (
             <div key={index}>
               <SectionBreak />
-              <Heading size="s">{story}</Heading>
-              <Card
-                variant="border"
-                borderColor="gray"
-                className="govgr-kitchensink-card"
-              >
+              <Heading size="sm">{story}</Heading>
+              <KitchenSinkCard>
                 <Component />
-              </Card>
+              </KitchenSinkCard>
             </div>
           );
         })}
-    </div>
+    </KitchenSinkContent>
   );
 };

package/src/utils/Kitchensink/KitchensinkDashboard.tsx

@@ -1,14 +1,15 @@
-import Paragraph from '@digigov/react-core/Paragraph';
 import React from 'react';
+import { KitchenSinkAllComponents } from '@digigov/react-core/KitchenSinkAllComponents';
+import Paragraph from '@digigov/react-core/Paragraph';
 import { KitchensinkByCategory } from '@digigov/ui/utils/Kitchensink/KitchensinkByCategory';
 
-export interface KitchensinkDashboardInterface {
+export interface KitchenSinkDashboardInterface {
   stories: any;
 }
 
-export const KitchensinkDashboard = ({
+export const KitchenSinkDashboard = ({
   stories,
-}: KitchensinkDashboardInterface) => {
+}: KitchenSinkDashboardInterface) => {
   const categoryOrder = Object.keys(stories).reduce(
     (catStories, componentStoriesKey) => {
       const componentStories = stories[componentStoriesKey];
@@ -37,7 +38,7 @@ export const KitchensinkDashboard = ({
       <Paragraph fontSize="72" fontWeight="bold">
         Components
       </Paragraph>
-      <div className="govgr-kitchensink-all-components">
+      <KitchenSinkAllComponents>
         {Object.keys(categoryOrder)
           .sort((a, b) => (a > b ? -1 : 1))
           .map((category, index) => {
@@ -49,7 +50,7 @@ export const KitchensinkDashboard = ({
               />
             );
           })}
-      </div>
+      </KitchenSinkAllComponents>
     </div>
   );
 };

package/src/utils/SvgIcon/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-core/SvgIcon';
+export * from '@digigov/react-icons';
+
+import SvgIcon from '@digigov/react-core/SvgIcon';
+export default SvgIcon;

package/src/utils/VisuallyHidden/VisuallyHidden.stories.js

@@ -0,0 +1,7 @@
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
+export default {
+  title: 'Digigov UI/utils/VisuallyHidden',
+  component: VisuallyHidden,
+  displayName: 'VisuallyHidden',
+};
+export * from '@digigov/ui/utils/VisuallyHidden/__stories__/Default';

package/src/utils/VisuallyHidden/__stories__/Default.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+
+import { Link } from '@digigov/ui/navigation/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export const Default = () => (
+  <>
+    <Paragraph>
+      Κάποιο στοιχείο παρακάτω είναι οπτικά κρυμμένο. 
+      Είναι προσβάσιμο μόνο για προγράμματα ανάγνωσης οθόνης και οποιαδήποτε εργαλεία αναλύουν το DOM.
+    </Paragraph>
+    <ButtonGroup>
+      <Button> Δοκιμή</Button>
+      <Link href="#">
+        Αλλαγή<VisuallyHidden> Διεύθυνσης</VisuallyHidden>
+      </Link>
+    </ButtonGroup>
+  </>
+);
+
+export default Default;

package/src/utils/VisuallyHidden/index.mdx

@@ -0,0 +1,19 @@
+---
+id: visually-hidden
+title: VisuallyHidden
+---
+
+Use this component to convey meaning to people using screen readers, helping
+them access information and context.
+
+VisuallyHidden is a web accessibility technique used to hide content from the visual client, but keep it readable for screen readers.
+
+```bash
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
+```
+
+## How to use
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="VisuallyHidden" />

package/src/utils/hooks/useDebounce.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import useLatest from '@digigov/ui/utils/hooks/useLatest';
+
+export const useDebounceCallback = <CallbackArgs extends any[]>(
+  callback: (...args: CallbackArgs) => void,
+  wait = 100,
+  leading = false
+): ((...args: CallbackArgs) => void) => {
+  const storedCallback = useLatest(callback);
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const deps = [wait, leading, storedCallback];
+  // Cleans up pending timeouts when the deps change
+  React.useEffect(
+    () => () => {
+      timeout.current && clearTimeout(timeout.current);
+      timeout.current = void 0;
+    },
+    deps
+  );
+
+  return React.useCallback(function () {
+    // eslint-disable-next-line prefer-rest-params
+    const args = arguments;
+    const { current } = timeout;
+    // Calls on leading edge
+    if (current === void 0 && leading) {
+      timeout.current = setTimeout(() => {
+        timeout.current = void 0;
+      }, wait);
+      // eslint-disable-next-line prefer-spread
+      return storedCallback.current.apply(null, args as any);
+    }
+    // Clear the timeout every call and start waiting again
+    current && clearTimeout(current);
+    // Waits for `wait` before invoking the callback
+    timeout.current = setTimeout(() => {
+      timeout.current = void 0;
+      storedCallback.current.apply(null, args as any);
+    }, wait);
+  }, deps);
+};
+
+export const useDebounce = <State extends any>(
+  initialState: State | (() => State),
+  wait?: number,
+  leading?: boolean
+): [State, React.Dispatch<React.SetStateAction<State>>] => {
+  const state = React.useState(initialState);
+  return [state[0], useDebounceCallback(state[1], wait, leading)];
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from '@digigov/ui/utils/Base';
+export * from '@digigov/ui/utils/SvgIcon';
+export * from '@digigov/ui/utils/VisuallyHidden';

package/typography/Caption/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import HeadingCaption, { HeadingCaptionProps } from '@digigov/ui/typography/HeadingCaption';
-export declare const Caption: import("react").ForwardRefExoticComponent<Pick<HeadingCaptionProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Caption: import("react").ForwardRefExoticComponent<Pick<HeadingCaptionProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & import("react").RefAttributes<HTMLSpanElement>>;
 export interface CaptionProps extends HeadingCaptionProps {
     ref?: React.Ref<HTMLSpanElement>;
 }

package/typography/Heading/__stories__/Default.js

@@ -14,17 +14,17 @@ var _Heading = require("@digigov/ui/typography/Heading");
 var _ref = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, null, " govgr-heading-xl ");
 
 var _ref2 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
-  size: "l",
+  size: "lg",
   element: "h2"
 }, ' ', "govgr-heading-lg", ' ');
 
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
-  size: "m",
+  size: "md",
   element: "h3"
 }, ' ', "govgr-heading-md", ' ');
 
 var _ref4 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
-  size: "s",
+  size: "sm",
   element: "h4"
 }, ' ', "govgr-heading-sm", ' ');
 

package/typography/Heading/index.mdx

@@ -9,7 +9,11 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="typography/Heading" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="typography/Heading"
+  story="Default.tsx"
+/>
 
 ## API