Correcting paths

MetaMask · Nov 9, 2022 · f4c9c20 · f4c9c20
1 parent 0dda7c3
commit f4c9c20
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 55 deletions.
diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js
@@ -4,7 +4,7 @@
  * Reads all the icon svg files in app/images/icons
  * and returns an object of icon name key value pairs
  * stored in the environment variable ICON_NAMES
- * Used with the Icon component in ./ui/component-library/icon
+ * Used with the Icon component in ./ui/components/component-library/icon/icon.js
  */
 const fs = require('fs');
 const path = require('path');

diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
@@ -37,7 +37,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase size={SIZES.AUTO} />
 <ButtonBase size={SIZES.SM} />
@@ -55,7 +55,7 @@ Use boolean `block` prop to quickly enable a full width block button
 
 ```jsx
 import { DISPLAY } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase>Default Button</ButtonBase>
 <ButtonBase block>Block Button</ButtonBase>
@@ -77,7 +77,7 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 
 <ButtonBase as="button">Button Element</ButtonBase>
@@ -95,7 +95,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase href="/metamask">Anchor Element</ButtonBase>;
 ```
@@ -109,7 +109,7 @@ Use the boolean `disabled` prop to disable button
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase disabled>Disabled Button</ButtonBase>;
 ```
@@ -123,7 +123,7 @@ Use the boolean `loading` prop to set loading spinner
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase loading>Loading Button</ButtonBase>;
 ```
@@ -137,7 +137,7 @@ Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 import { ICON_NAMES } from '../icon';
 
 <ButtonBase icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</ButtonBase>;

diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx
@@ -35,7 +35,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonLink } from '../../ui/component-library';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink size={SIZES.AUTO} />
 <ButtonLink size={SIZES.SM} />
@@ -52,7 +52,7 @@ Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/d
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../../ui/component-library';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink>Normal</ButtonLink>
 <ButtonLink danger>Danger</ButtonLink>
@@ -67,7 +67,7 @@ When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../../ui/component-library';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink href="/">Href Example</ButtonLink>;
 ```
diff --git a/ui/components/component-library/button-primary/README.mdx b/ui/components/component-library/button-primary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonPrimary } from '../../ui/component-library';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary size={SIZES.SM} />
 <ButtonPrimary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/d
 </Canvas>
 
 ```jsx
-import { ButtonPrimary } from '../../ui/component-library';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary>Normal</ButtonPrimary>
 <ButtonPrimary danger>Danger</ButtonPrimary>

diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonSecondary } from '../../ui/component-library';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary size={SIZES.SM} />
 <ButtonSecondary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `type` prop and the `BUTTON_TYPES` object from `./ui/helpers/constants/d
 </Canvas>
 
 ```jsx
-import { ButtonSecondary } from '../../ui/component-library';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary>Normal</ButtonSecondary>
 <ButtonSecondary danger>Danger</ButtonSecondary>

diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx
@@ -26,8 +26,8 @@ The `children` of the `HelpText` can be plain text or react nodes.
 
 ```jsx
 import { SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
-import { HelpText } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <HelpText>Plain text</HelpText>
 <HelpText>
@@ -50,7 +50,7 @@ Use the `error` prop to show the `HelpText` in error state.
 </Canvas>
 
 ```jsx
-import { HelpText } from '../../ui/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <HelpText error>This HelpText in error state</HelpText>;
 ```
@@ -65,7 +65,7 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { HelpText } from '../../ui/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
   <HelpText color={COLORS.TEXT_DEFAULT}>

diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
@@ -23,7 +23,7 @@ Use the `name` prop and the `ICON_NAMES` object to change the icon.
 Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
 
 ```jsx
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
 <Icon name={ICON_NAMES.BANK_FILLED} />
@@ -55,7 +55,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
@@ -79,7 +79,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />

diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx
@@ -26,9 +26,9 @@ The `children` of the label can be text or a react node.
 
 ```jsx
 import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library;
-import { Label } from '../../ui/component-library;
-import { TextFieldBase } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <Label>Plain text</Label>
 <Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
@@ -59,8 +59,8 @@ Use the `htmlFor` prop to allow the `Label` to focus on an input with the same i
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library;
-import { Label } from '../../ui/component-library;
+import { TextFieldBase } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
 
 <Label htmlFor="add-network">Add network</Label>
 <TextFieldBase  id="add-network" placeholder="Enter network name" />
@@ -75,7 +75,7 @@ Use the `required` prop to add a required red asterisk next to the `children` of
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/component-library;
+import { Label } from '../../ui/components/component-library';
 
 <Label required>Label</Label>;
 ```
@@ -89,7 +89,7 @@ Use the `disabled` prop to set the `Label` in disabled state
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/component-library;
+import { Label } from '../../ui/components/component-library';
 
 <Label disabled>Label</Label>;
 ```
diff --git a/ui/components/component-library/text-field-base/README.mdx b/ui/components/component-library/text-field-base/README.mdx
@@ -35,7 +35,7 @@ Defaults to `md`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 import { SIZES } from '../../../helpers/constants/design-system';
 
 <TextFieldBase size={SIZES.SM} />
@@ -60,7 +60,7 @@ Defaults to `text`.
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="text" /> // (Default)
 <TextFieldBase type="number" />
@@ -76,7 +76,7 @@ Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Default
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase truncate />; // truncate is set to `true` by default
 <TextFieldBase truncate={false} />;
@@ -92,9 +92,9 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
 
 ```jsx
 import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase
   placeholder="Search"
@@ -156,7 +156,7 @@ Use the `inputRef` prop to access the ref of the `<input />` html element of `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 const inputRef = useRef(null);
 const [value, setValue] = useState('');
@@ -197,7 +197,7 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="password" autoComplete />;
 ```
@@ -211,7 +211,7 @@ Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase autoFocus />;
 ```
@@ -225,7 +225,7 @@ Use the `defaultValue` prop to set the default value of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase defaultValue="default value" />;
 ```
@@ -239,7 +239,7 @@ Use the `disabled` prop to set the disabled state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase disabled />;
 ```
@@ -253,7 +253,7 @@ Use the `error` prop to set the error state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase error />;
 ```
@@ -267,7 +267,7 @@ Use the `maxLength` prop to set the maximum allowed input characters for the `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase maxLength={10} />;
 ```
@@ -281,7 +281,7 @@ Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase readOnly />;
 ```
@@ -295,7 +295,7 @@ Use the `required` prop to set the `TextFieldBase` to required. Currently there
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 // Currently no visual difference
 <TextFieldBase required />;

diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx
@@ -26,7 +26,7 @@ You can also attach an `onClear` handler to the `TextField` to perform additiona
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/component-library';
+import { TextField } from '../../ui/components/component-library';
 
 <TextField showClear />;
 ```
@@ -40,7 +40,7 @@ Use the `onClear` prop to perform additional actions when the clear button is cl
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/component-library';
+import { TextField } from '../../ui/components/component-library';
 
 <TextField showClear onClear={() => console.log('cleared input')} />;
 ```
@@ -59,7 +59,7 @@ import {
   COLORS,
   BORDER_RADIUS,
 } from '../../../helpers/constants/design-system';
-import { TextField } from '../../ui/component-library';
+import { TextField } from '../../ui/components/component-library';
 
 <TextField
   showClear