Skip to content

Commit

Permalink
Component library adding global index and other housekeeping (#16441)
Browse files Browse the repository at this point in the history
* Adding global index.js file

* Removing style prop from button base

* Fixing comment on generate-icon-names.js file

* Re-ordering sass imports to atomic structure

* Updating component paths code examples of MDX docs
  • Loading branch information
georgewrmarshall authored Nov 16, 2022
1 parent a5b70c3 commit 23b412c
Show file tree
Hide file tree
Showing 14 changed files with 93 additions and 65 deletions.
2 changes: 1 addition & 1 deletion development/generate-icon-names.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
16 changes: 8 additions & 8 deletions ui/components/component-library/button-base/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>;
```
Expand All @@ -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>;
```
Expand All @@ -123,21 +123,21 @@ 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>;
```

### Icon

Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon.

<Canvas>
<Story id="ui-components-component-library-button-base-button-base-stories-js--icon" />
</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>;
Expand Down
4 changes: 0 additions & 4 deletions ui/components/component-library/button-base/button-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,6 @@ ButtonBase.propTypes = {
* Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
*/
size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
/**
* Addition style properties to apply to the button.
*/
style: PropTypes.object,
/**
* ButtonBase accepts all the props from Box
*/
Expand Down
6 changes: 3 additions & 3 deletions ui/components/component-library/button-link/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Possible sizes include:

```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
import { ButtonLink } from '../../ui/components/component-library';

<ButtonLink size={SIZES.AUTO} />
<ButtonLink size={SIZES.SM} />
Expand All @@ -52,7 +52,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
</Canvas>

```jsx
import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
import { ButtonLink } from '../../ui/components/component-library';

<ButtonLink>Normal</ButtonLink>
<ButtonLink danger>Danger</ButtonLink>
Expand All @@ -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/button/button-link/button-link';
import { ButtonLink } from '../../ui/components/component-library';

<ButtonLink href="/">Href Example</ButtonLink>;
```
4 changes: 2 additions & 2 deletions ui/components/component-library/button-primary/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Possible sizes include:

```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
import { ButtonPrimary } from '../../ui/components/component-library';

<ButtonPrimary size={SIZES.SM} />
<ButtonPrimary size={SIZES.MD} />
Expand All @@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
</Canvas>

```jsx
import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
import { ButtonPrimary } from '../../ui/components/component-library';

<ButtonPrimary>Normal</ButtonPrimary>
<ButtonPrimary danger>Danger</ButtonPrimary>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/component-library/button-secondary/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Possible sizes include:

```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
import { ButtonSecondary } from '../../ui/components/component-library';

<ButtonSecondary size={SIZES.SM} />
<ButtonSecondary size={SIZES.MD} />
Expand All @@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
</Canvas>

```jsx
import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
import { ButtonSecondary } from '../../ui/components/component-library';

<ButtonSecondary>Normal</ButtonSecondary>
<ButtonSecondary danger>Danger</ButtonSecondary>
Expand Down
19 changes: 13 additions & 6 deletions ui/components/component-library/component-library-components.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,28 @@
/** Please import your files in alphabetical order **/
/**
* Please import your styles in order of atomicity.
* The most atomic styles should be imported first.
* This will help improve specificity and reduce the chance of
* unintended overrides.
**/
// Atoms
@import 'text/text';
@import 'icon/icon';
@import 'label/label';
@import 'tag/tag';
@import 'base-avatar/base-avatar';
@import 'avatar-account/avatar-account';
@import 'avatar-favicon/avatar-favicon';
@import 'avatar-network/avatar-network';
@import 'avatar-token/avatar-token';
@import 'avatar-with-badge/avatar-with-badge';
@import 'base-avatar/base-avatar';
@import 'button-base/button-base';
@import 'button-icon/button-icon';
@import 'button-link/button-link';
@import 'button-primary/button-primary';
@import 'button-secondary/button-secondary';
@import 'icon/icon';
@import 'label/label';
// Molecules
@import 'picker-network/picker-network';
@import 'tag/tag';
@import 'tag-url/tag-url';
@import 'text/text';
@import 'text-field/text-field';
@import 'text-field-base/text-field-base';
@import 'text-field-search/text-field-search';
8 changes: 4 additions & 4 deletions ui/components/component-library/help-text/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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/icon';
import { HelpText } from '../../ui/component-library/help-text';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { HelpText } from '../../ui/components/component-library';

<HelpText>Plain text</HelpText>
<HelpText>
Expand All @@ -50,7 +50,7 @@ Use the `error` prop to show the `HelpText` in error state.
</Canvas>

```jsx
import { HelpText } from '../../ui/component-library/help-text';
import { HelpText } from '../../ui/components/component-library';

<HelpText error>This HelpText in error state</HelpText>;
```
Expand All @@ -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/help-text';
import { HelpText } from '../../ui/components/component-library';

<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={COLORS.TEXT_DEFAULT}>
Expand Down
6 changes: 3 additions & 3 deletions ui/components/component-library/icon/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down Expand Up @@ -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} />
Expand All @@ -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} />
Expand Down
25 changes: 25 additions & 0 deletions ui/components/component-library/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export { AvatarAccount } from './avatar-account';
export { AvatarFavicon } from './avatar-favicon';
export { AvatarNetwork } from './avatar-network';
export { AvatarToken } from './avatar-token';
export { AvatarWithBadge } from './avatar-with-badge';
export { BaseAvatar } from './base-avatar';
export { Button } from './button';
export { ButtonBase } from './button-base';
export { ButtonIcon } from './button-icon';
export { ButtonLink } from './button-link';
export { ButtonPrimary } from './button-primary';
export { ButtonSecondary } from './button-secondary';
export { HelpText } from './help-text';
export { Icon, ICON_NAMES } from './icon';
export { Label } from './label';
export { PickerNetwork } from './picker-network';
export { Tag } from './tag';
export { TagUrl } from './tag-url';
export { Text } from './text';
export { TextField } from './text-field';
export {
TextFieldBase,
TEXT_FIELD_BASE_SIZES,
TEXT_FIELD_BASE_TYPES,
} from './text-field-base';
14 changes: 7 additions & 7 deletions ui/components/component-library/label/README.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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/icon';
import { Label } from '../../ui/component-library/label';
import { TextFieldBase } from '../../ui/component-library/text-field-base'
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}>
Expand Down Expand Up @@ -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/text-field-base';
import { Label } from '../../ui/component-library/label';
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" />
Expand All @@ -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/label';
import { Label } from '../../ui/components/component-library';

<Label required>Label</Label>;
```
Expand All @@ -89,7 +89,7 @@ Use the `disabled` prop to set the `Label` in disabled state
</Canvas>

```jsx
import { Label } from '../../ui/component-library/label';
import { Label } from '../../ui/components/component-library';

<Label disabled>Label</Label>;
```
Loading

0 comments on commit 23b412c

Please sign in to comment.