@digigov/ui 2.0.0-a402a664 → 2.0.0-a64dc016

package/src/content/Table/index.test.tsx

@@ -13,6 +13,7 @@ import { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDa
 import { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
 import { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
 import { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
+import { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
 import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
 import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
 import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
@@ -62,6 +63,9 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="TableCaptions">
       <TableCaptions />
     </TestVariant>
+    <TestVariant title="UsingHighlights">
+      <UsingHighlights />
+    </TestVariant>
     <TestVariant title="VerticalBorders">
       <VerticalBorders />
     </TestVariant>

package/src/content/TaskList/doc.mdx

@@ -9,11 +9,11 @@ TaskList is a component that displays number of steps required to complete a pro
 
 ## How to use
 
-<code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/TaskList/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
-<code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/TaskList/__stories__/Dense.tsx" />
 
 ## API
 

package/src/content/Timeline/doc.mdx

@@ -11,11 +11,11 @@ User can better understand what has happened and also understand what the next s
 
 ## How to use
 
-<code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Timeline/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
-<code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/Timeline/__stories__/Dense.tsx" />
 
 ## API
 

package/src/feedback/CopyToClipboard/doc.mdx

@@ -7,18 +7,18 @@ title: CopyToClipboard
 
 ## How to use
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Default.tsx" />
 
 ### As banner
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Banner.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Dense.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}
+<ComponentProps componentName={['CopyToClipboardContainer']} />

package/src/feedback/ErrorSummary/doc.mdx

@@ -11,7 +11,7 @@ When a user makes an error, you must show both an error summary and an error mes
 
 ## How to use
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -19,20 +19,20 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
+<code src="@digigov/ui/src/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-{/* <ComponentProps componentName={["ErrorSummary"]} />  */}
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -15,16 +15,23 @@ export default {
 
 export const WithControls = {
   args: {
+    variant: 'info',
+    dense: false,
     title: 'Ειδοποίηση',
     children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
     link: {
       label: 'Προβολή αίτησης',
       href: '#',
     },
-    variant: 'info',
-    dense: false,
   },
   argTypes: {
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
     title: {
       control: { type: 'text' },
     },
@@ -34,13 +41,6 @@ export const WithControls = {
     link: {
       control: { type: 'object' },
     },
-    variant: {
-      options: ['info', 'success', 'error'],
-      control: { type: 'select' },
-    },
-    dense: {
-      control: { type: 'boolean' },
-    },
   },
   parameters: {
     controls: { exclude: ['ref'] },
@@ -50,3 +50,4 @@ export const WithControls = {
 export { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 export { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+export { Expanded } from '@digigov/ui/feedback/NotificationBanner/__stories__/Expanded';

package/src/feedback/NotificationBanner/__stories__/Expanded.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  NotificationBannerContainer,
+  NotificationBannerHeader,
+  NotificationBannerContent,
+  NotificationBannerHeading,
+  NotificationBannerLink,
+} from '@digigov/ui/feedback/NotificationBanner';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const Expanded = (_: any) => (
+  <NotificationBannerContainer>
+    <NotificationBannerHeader>Ειδοποίηση</NotificationBannerHeader>
+    <NotificationBannerContent>
+      <NotificationBannerHeading>
+        Μπορείτε να συμβάλλετε στη βελτίωση των δημοσίων υπηρεσιών.
+      </NotificationBannerHeading>
+      <Paragraph>
+        Συμπληρώστε έως 24/5 το ερωτηματολόγιο στο{' '}
+        <NotificationBannerLink> axiologisi.ypes.gov.gr</NotificationBannerLink>
+        .
+      </Paragraph>
+    </NotificationBannerContent>
+  </NotificationBannerContainer>
+);
+
+export default Expanded;

package/src/feedback/NotificationBanner/doc.mdx

@@ -13,24 +13,33 @@ Use a notification banner to tell the user about something they need to know abo
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
-Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
-## How to use
-
-<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Default.tsx" />
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
 ### With success style
 
-<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Success.tsx" />
+<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Success.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
-## API
+### Expanded
 
-See below for a complete reference to all of the props  available to the components mentioned here.
+<code src="@digigov/ui/src/feedback/NotificationBanner/__stories__/Expanded.tsx" />
+
+## API
 
-<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'NotificationBannerContainer',
+    'NotificationBannerContent',
+    'NotificationBannerHeader',
+    'NotificationBannerHeading',
+    'NotificationBannerLink',
+  ]}
+/>

package/src/feedback/NotificationBanner/index.test.tsx

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 import { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+import { Expanded } from '@digigov/ui/feedback/NotificationBanner/__stories__/Expanded';
 import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 
 test('renders the All NotificationBanner variants', async ({ mount, page }) => {
@@ -15,6 +16,9 @@ test('renders the All NotificationBanner variants', async ({ mount, page }) => {
     <TestVariant title="Dense">
       <Dense />
     </TestVariant>
+    <TestVariant title="Expanded">
+      <Expanded />
+    </TestVariant>
     <TestVariant title="Success">
       <Success />
     </TestVariant>

package/src/feedback/PhaseBanner/PhaseBanner.stories.jsx

@@ -31,8 +31,8 @@ export const WithControls = {
     );
   },
   args: {
-    tag: 'ALPHA',
     underline: true,
+    tag: 'ALPHA',
   },
   argTypes: {
     underline: {

package/src/feedback/PhaseBanner/doc.mdx

@@ -11,11 +11,11 @@ Use the phase banner component to show users your service is still being worked
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/PhaseBanner/__stories__/Default.tsx" />
 
 ### Underlined
 
-<code src="@digigov/ui/feedback/PhaseBanner/__stories__/Underlined.tsx" />
+<code src="@digigov/ui/src/feedback/PhaseBanner/__stories__/Underlined.tsx" />
 
 ## API
 

package/src/feedback/WarningText/doc.mdx

@@ -10,15 +10,15 @@ title: WarningText
 You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context.
 This will be used by screen-readers.
 
-<code src="@digigov/ui/feedback/WarningText/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/WarningText/__stories__/Default.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/WarningText/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/feedback/WarningText/__stories__/Dense.tsx" />
 
 ### With assistive text
 
-<code src="@digigov/ui/feedback/WarningText/__stories__/AssistiveText.tsx" />
+<code src="@digigov/ui/src/feedback/WarningText/__stories__/AssistiveText.tsx" />
 
 ## API
 

package/src/form/AutoComplete/doc.mdx

@@ -10,29 +10,29 @@ through, select from large collections of options and help services get more con
 
 ## How to use
 
-<code src="@digigov/ui/form/AutoComplete/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/AutoComplete/__stories__/Default.tsx" />
 
 ### With auto select
 
-<code src="@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect.tsx" />
+<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithAutoSelect.tsx" />
 
 ### With default value
 
-<code src="@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue.tsx" />
+<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithDefaultValue.tsx" />
 
 ### With placeholder
 
-<code src="@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />
+<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithPlaceHolder.tsx" />
 
 ### With all option's values
 
-<code src="@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues.tsx" />
+<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithShowAllValues.tsx" />
 
 ### With min length
 
-This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2)
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2).
 
-<code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
+<code src="@digigov/ui/src/form/AutoComplete/__stories__/WithMinLength.tsx" />
 
 ## API
 
@@ -48,4 +48,4 @@ See below for a complete reference to all of the props available to the componen
     'AutoCompleteResultListItem',
     'AutoCompleteAssistiveHint',
   ]}
-/>{' '}
+/>

package/src/form/Button/doc.mdx

@@ -10,45 +10,56 @@ application or saving their information.
 
 ## How to use
 
-### Default buttons
 
 Use a default button for the main call to action on a page.
 
-<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/Primary.tsx" />
 
-### Start buttons
+Avoid using multiple default buttons on a single page. Having more than on main
+call to action reduces their impact, and makes it harder for users to know what
+to do next.
+
+### Start button - Call To Action
 
 Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
 
-<code src="@digigov/ui/form/Button/__stories__/CallToActionButton.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/CallToActionButton.tsx" />
 
-### Secondary buttons
+### Secondary color
 
 Use secondary buttons for secondary calls to action on a page.
 
-<code src="@digigov/ui/form/Button/__stories__/Secondary.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/Secondary.tsx" />
 
-### Warning buttons
+### Warning color
 
 Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
 
-<code src="@digigov/ui/form/Button/__stories__/Warning.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/Warning.tsx" />
 
-### Disable buttons
+### Link variant
+
+<code src="@digigov/ui/src/form/Button/__stories__/WithVariantLink.tsx" />
+
+### Disabled
 
 Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
 
-<code src="@digigov/ui/form/Button/__stories__/Disabled.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/Disabled.tsx" />
+
+### Dense 
+
+<code src="@digigov/ui/src/form/Button/__stories__/Dense.tsx" />
 
 ### Grouping buttons
 
 Use a button group when two or more buttons are placed together.
 
-<code src="@digigov/ui/form/Button/__stories__/GroupingButtons.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/GroupingButtons.tsx" />
 
 Any links within a button group will automatically align with the buttons.
 
-<code src="@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
 example:
@@ -71,15 +82,17 @@ For example, `Add another address` and `Accept and claim a tax refund`.
 
 Align the primary action button to the left edge of your form.
 
-## Default buttons
+## More buttons
 
-Use a default button for the main call to action on a page.
+### Back link button
 
-<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
+<code src="@digigov/ui/src/form/Button/__stories__/Back.tsx" />
+
+
+### Theme toggle button
+
+<code src="@digigov/ui/src/form/Button/__stories__/ThemeToggle.tsx" />
 
-Avoid using multiple default buttons on a single page. Having more than on main
-call to action reduces their impact, and makes it harder for users to know what
-to do next.
 
 ## Accessibility
 
@@ -88,9 +101,7 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-Read more about [how to use the React types](/docs/api/Button).
-
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
 <ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 
 

package/src/form/Checkbox/doc.mdx

@@ -7,43 +7,43 @@ title: Checkbox
 
 ## How to use
 
-<code src="@digigov/ui/form/Checkbox/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/Default.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
 
-<code src="@digigov/ui/form/Checkbox/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/MultipleQuestions.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<code src="@digigov/ui/form/Checkbox/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/WithHint.tsx" />
 
 ### Add an option for ‘none’
 
 When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
 
-<code src="@digigov/ui/form/Checkbox/__stories__/NoneAnswer.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/NoneAnswer.tsx" />
 
 If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
 
-<code src="@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/NoneAnswerWithError.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/Checkbox/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/WithErrorMessage.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<code src="@digigov/ui/form/Checkbox/__stories__/ConditionalReveal.tsx" />
+<code src="@digigov/ui/src/form/Checkbox/__stories__/ConditionalReveal.tsx" />
 
 ## Accessibility
 

package/src/form/DateInputContainer/doc.mdx

@@ -7,23 +7,23 @@ title: DateInputContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/DateInputContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/DateInputContainer/__stories__/Default.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
 
-<code src="@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/DateInputContainer/__stories__/MultipleQuestions.tsx" />
 
 ### Error message
 
 If you’re highlighting the whole date, style all the fields like this:
 
-<code src="@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/DateInputContainer/__stories__/WithErrorMessage.tsx" />
 
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
-<code src="@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField.tsx" />
+<code src="@digigov/ui/src/form/DateInputContainer/__stories__/WithErrorMessageForSingleField.tsx" />
 
 ## API
 

package/src/form/ErrorMessage/doc.mdx

@@ -10,7 +10,7 @@ In the error message explain what went wrong and how to fix it.
 
 ## How to use
 
-<code src="@digigov/ui/form/ErrorMessage/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/ErrorMessage/__stories__/Default.tsx" />
 
 ## API
 

package/src/form/FileUpload/doc.mdx

@@ -7,13 +7,13 @@ title: FileUpload
 
 ## How to use
 
-<code src="@digigov/ui/form/FileUpload/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/FileUpload/__stories__/Default.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/FileUpload/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/FileUpload/__stories__/WithErrorMessage.tsx" />
 
 ## API
 

package/src/form/RadioContainer/doc.mdx

@@ -7,44 +7,44 @@ title: RadioContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/Default.tsx" />
 
 ### For multiple questions
 
 If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/Inline.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/Inline.tsx" />
 
-### Checkbox items with hints
+### Radio items with hints
 
-You can add hints to checkbox items to provide additional information about the options.
+You can add hints to radio items to provide additional information about the options.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/WithHints.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/WithHints.tsx" />
 
-### RadioContainer items with a text divider
+### Radio items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/NoneAnswer.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/NoneAnswer.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage.tsx" />
+<code src="@digigov/ui/src/form/RadioContainer/__stories__/WithErrorMessage.tsx" />
 
 ## Accessibility
 

package/src/form/SearchContainer/doc.mdx

@@ -7,7 +7,7 @@ title: SearchContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/SearchContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/SearchContainer/__stories__/Default.tsx" />
 
 ## API
 

package/src/form/SelectContainer/doc.mdx

@@ -7,19 +7,19 @@ title: SelectContainer
 
 ## How to use
 
-<code src="@digigov/ui/form/SelectContainer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/form/SelectContainer/__stories__/Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<code src="@digigov/ui/form/SelectContainer/__stories__/WithHint.tsx" />
+<code src="@digigov/ui/src/form/SelectContainer/__stories__/WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<code src="@digigov/ui/form/SelectContainer/__stories__/DisabledInput.tsx" />
+<code src="@digigov/ui/src/form/SelectContainer/__stories__/DisabledInput.tsx" />
 
 ## Accessibility