New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@puppet/react-components

Package Overview
Dependencies
Maintainers
2
Versions
134
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@puppet/react-components - npm Package Compare versions

Comparing version 5.9.3 to 5.9.4

10

CHANGELOG.md

@@ -0,1 +1,6 @@

# 5.9.4
- Internal: use PropTypes.elementType over custom renderableElement type
- Docs Updates
- Add minus-circle icon
# 5.9.3

@@ -34,3 +39,6 @@

- NOTICE: Packages are now being published to npm instead of Artifactory, so `.npmrc` files with lines ending in `/npm__local/` should replace those instances with `/npm/` (which combines Artifactory with an npm mirror) or remove them if Artifactory is no longer needed.
- NOTICE: Packages are now being published to npm instead of Artifactory, so `.npmrc` files with lines ending in `/npm__local/` should replace those instances with `/npm/` (which combines Artifactory with an npm mirror) or remove them if Artifactory is no longer needed. For your per-user `~/.npmrc` file, it's okay to have this line (without `/npm__local/`), but we recommend removing it entirely so that each project can have its own `.npmrc` file to manage dependencies per-project:
```
@puppet:registry=https://artifactory.delivery.puppetlabs.net/artifactory/api/npm/npm/
```
- Import core-js as single dependency without @babel/preset-env's useBuiltIns option to add compatibility with Gatsby.

@@ -37,0 +45,0 @@

8

package.json
{
"name": "@puppet/react-components",
"version": "5.9.3",
"version": "5.9.4",
"author": "Puppet, Inc.",

@@ -19,3 +19,3 @@ "license": "UNLICENSED",

"format": "eslint --fix 'source/**/*.{js,jsx}'; prettier --write 'source/**/*.{js,jsx,json,md}'",
"start": "cd ../design-system-website && npm i && npx styleguidist server"
"start": "cd ../design-system-website && styleguidist server"
},

@@ -80,3 +80,3 @@ "publishConfig": {

"dependencies": {
"@puppet/sass-variables": "^1.1.1",
"@puppet/sass-variables": "^1.1.2",
"classnames": "^2.2.6",

@@ -93,3 +93,3 @@ "core-js": "^3.1.4",

},
"gitHead": "c7ee67af75247ab9024c12ebc8fb7984843f56dd"
"gitHead": "4a6c41ff75aabb2ec705588e6ab757fc69ac9f97"
}

10

source/react/helpers/customPropTypes.js
import PropTypes from 'prop-types';
/**
* PropType for anything that can be rendered as a JSX element. Most often this
* will be used for the flexible element rendering 'as' prop. See library/card/Card.js
* for an example.
*/
export const renderableElement = PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
]);
/**
* Design system available element elevations

@@ -15,0 +5,0 @@ */

3

source/react/internal/action-menu-list/ActionMenuList.js

@@ -5,3 +5,2 @@ import React, { Component } from 'react';

import scrollIntoView from 'scroll-into-view-if-needed';
import { renderableElement } from '../../helpers/customPropTypes';
import {

@@ -29,3 +28,3 @@ UP_KEY_CODE,

onClick: PropTypes.func,
as: renderableElement,
as: PropTypes.elementType,
}),

@@ -32,0 +31,0 @@ ),

3

source/react/internal/action-menu-list/ActionMenuListItem.js
import React, { forwardRef } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { renderableElement } from '../../helpers/customPropTypes';

@@ -9,3 +8,3 @@ import Icon from '../../library/icon';

const propTypes = {
as: renderableElement,
as: PropTypes.elementType,
id: PropTypes.string.isRequired,

@@ -12,0 +11,0 @@ children: PropTypes.node.isRequired,

7

source/react/library/action-select/ActionSelect.js

@@ -6,6 +6,3 @@ import React, { Component } from 'react';

import ActionMenuList from '../../internal/action-menu-list';
import {
renderableElement,
anchorOrientation,
} from '../../helpers/customPropTypes';
import { anchorOrientation } from '../../helpers/customPropTypes';
import Icon from '../icon';

@@ -33,3 +30,3 @@ import { getDropdownPosition, focus } from '../../helpers/statics';

/** Custom action element. Useful for creating navigation actions with as: 'a' or as: Link. Additionally, extra props not listed here are passed through to the action element. This allows custom props such as `href` or `to` to be passed to the inner action element. */
as: renderableElement,
as: PropTypes.elementType,
}),

@@ -36,0 +33,0 @@ ),

15

source/react/library/action-select/ActionSelect.md

@@ -9,3 +9,3 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Menu</small>

Specific use cases and interactions can be found in the Sketch Styleguide file (under Components / Dialogues / Menu, Menu triggers).
Specific use cases and interactions can be found in the Sketch Styleguide file (under Components / Dialogues / Menu, Menu triggers).

@@ -180,7 +180,8 @@ See also: [Button Select](#/React%20Components/ButtonSelect), [Select](#/React%20Components/Select)

## Related
* [ButtonSelect](#/React%20Components/ButtonSelect)
* [Button](#/React%20Components/Button)
* [CardAction](#/React%20Components/CardAction)
* [FormField](#/React%20Components/FormField)
* [Modal](#/React%20Components/Modal)
* [Select](#/React%20Components/Select)
- [ButtonSelect](#/React%20Components/ButtonSelect)
- [Button](#/React%20Components/Button)
- [CardAction](#/React%20Components/CardAction)
- [FormField](#/React%20Components/FormField)
- [Modal](#/React%20Components/Modal)
- [Select](#/React%20Components/Select)

43

source/react/library/alert/Alert.md

@@ -11,3 +11,3 @@ ## Alert actions

>
Did you know this alert can be dismissed?
Did you know this alert can be dismissed?
</Alert>

@@ -21,3 +21,3 @@ ```

```jsx
<Alert type="success" >Success! Things seem to have gone well afterall.</Alert>
<Alert type="success">Success! Things seem to have gone well afterall.</Alert>
```

@@ -49,3 +49,3 @@

<Alert elevated type="danger">
This alert is elevated. Are you ready for that?
This alert is elevated. Are you ready for that?
</Alert>

@@ -59,8 +59,11 @@ ```

```jsx
<Alert type="warning"
closeable
onClose={() => console.log('theoretically at least')}
<Alert
type="warning"
closeable
onClose={() => console.log('theoretically at least')}
>
Warning! Something did not complete.
<Alert.Message>This will give the user more information on what the alert is about.</Alert.Message>
Warning! Something did not complete.
<Alert.Message>
This will give the user more information on what the alert is about.
</Alert.Message>
</Alert>

@@ -71,17 +74,23 @@ ```

``` jsx
```jsx
import Button from '../button';
<Alert type="warning"
closeable
onClose={() => console.log('theoretically at least')}
<Alert
type="warning"
closeable
onClose={() => console.log('theoretically at least')}
>
Warning! Something did not complete.
<Alert.Message>This will give the user more information on what the alert is about.</Alert.Message>
<Alert.Message>
This will give the user more information on what the alert is about.
</Alert.Message>
<Alert.Actions>
<Button type="primary" onClick={() => console.log('clicked')}>Button</Button>
<Button type="transparent" onClick={() => console.log('clicked')}>Cancel</Button>
<Button type="primary" onClick={() => console.log('clicked')}>
Button
</Button>
<Button type="transparent" onClick={() => console.log('clicked')}>
Cancel
</Button>
</Alert.Actions>
</Alert>
</Alert>;
```

3

source/react/library/alert/IconButton.js
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { renderableElement } from '../../helpers/customPropTypes';
import Icon, { AVAILABLE_ICONS } from '../icon/Icon';

@@ -10,3 +9,3 @@ import Loading from '../loading';

/** React component / element to render. Useful in cases where a button is used for navigation, so that it can be rendered as an anchor tag with the same styling */
as: renderableElement,
as: PropTypes.elementType,
/** Main visual variant */

@@ -13,0 +12,0 @@ type: PropTypes.oneOf(['neutral', 'info', 'danger', 'success', 'warning']),

12

source/react/library/badge/Badge.md

@@ -1,3 +0,9 @@

### Bold badges (default)
## Overview
Badges are persistent informational components. They give the user context for what they’re looking at, providing metadata or additional info on elements in the ui. Badges can have inherent meaning conveyed by color, but must be understandable based solely on the string of text that they contain for accessibility. The component defaults to the bold, neutral colored square badge, which can be changed to suit the desired meaning or effect.
## Type
### Default Badges
```jsx

@@ -11,2 +17,4 @@ <Badge type="danger">Danger</Badge>

### Pill badges
```jsx

@@ -20,2 +28,4 @@ <Badge pill type="danger">12</Badge>

## Variations
### Subtle badges

@@ -22,0 +32,0 @@

10

source/react/library/breadcrumb/Breadcrumb.md

@@ -5,5 +5,5 @@ ## Overview

Breadcrumbs give the user a sense of place, and an understanding of both where they are and the path they took to get there. If they were deep-linked to the page, the breadcrumb helps them understand the context of what’s on the page, and how they might return there later.
Breadcrumbs give the user a sense of place, and an understanding of both where they are and the path they took to get there. If they were deep-linked to the page, the breadcrumb helps them understand the context of what’s on the page, and how they might return there later.
Place breadcrumbs at the top of the page. Don’t link the name of the current page. Reference the Sketch Styleguide file, under Components / Subnavigation / Breadcrumb.
Place breadcrumbs at the top of the page. Don’t link the name of the current page. Reference the Sketch Styleguide file, under Components / Subnavigation / Breadcrumb.

@@ -26,3 +26,3 @@ ## Basic Use

</Breadcrumb.Section>
<Breadcrumb.Section>details</Breadcrumb.Section>
<Breadcrumb.Section>Details</Breadcrumb.Section>
</Breadcrumb>;

@@ -33,3 +33,3 @@ ```

* [Link](#/React%20Components/Link)
* [Text](#/React%20Components/Text)
- [Link](#/React%20Components/Link)
- [Text](#/React%20Components/Text)

3

source/react/library/button/Button.js
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { renderableElement } from '../../helpers/customPropTypes';
import Icon, { AVAILABLE_ICONS } from '../icon/Icon';

@@ -10,3 +9,3 @@ import Loading from '../loading';

/** React component / element to render. Useful in cases where a button is used for navigation, so that it can be rendered as an anchor tag with the same styling */
as: renderableElement,
as: PropTypes.elementType,
/** Prop to use for a `ref` passed to the inner element. */

@@ -13,0 +12,0 @@ forwardRefAs: PropTypes.string,

74

source/react/library/button/Button.md

@@ -9,5 +9,5 @@ ## Overview

* When providing a label for a button, use an imperative verb and a noun, for example: Add group. The verb-plus-noun construction increases usability and eliminates ambiguity for localization.
* Rarely, just the imperative verb is ok (Apply, Add, Remove) if the context is crystal clear.
* Use sentence-case capitalization: Capitalize the first word, and lowercase all other words except proper nouns.
- When providing a label for a button, use an imperative verb and a noun, for example: Add group. The verb-plus-noun construction increases usability and eliminates ambiguity for localization.
- Rarely, just the imperative verb is ok (Apply, Add, Remove) if the context is crystal clear.
- Use sentence-case capitalization: Capitalize the first word, and lowercase all other words except proper nouns.

@@ -31,3 +31,5 @@ ### States and interaction

<Button style={buttonStyle}>Primary</Button>
<Button style={buttonStyle} icon="pencil">Primary with icon</Button>
<Button style={buttonStyle} icon="pencil">
Primary with icon
</Button>
<Button loading style={buttonStyle}>

@@ -135,2 +137,3 @@ Primary

#### Danger subtle
For actions with less severe implications, or when many destructive actions are visible, use the subtle style.

@@ -185,3 +188,3 @@

*Note*: Indicating states (danger, success, warning) with icon colors is reserved for specific use cases within alerts and messages. Do not use color on icon buttons arbitrarily.
_Note_: Indicating states (danger, success, warning) with icon colors is reserved for specific use cases within alerts and messages. Do not use color on icon buttons arbitrarily.

@@ -212,47 +215,71 @@ #### Example: Transparent buttons with only icons

<Button type="secondary" icon="plus" />
<Button type="secondary" icon="plus">Add</Button>
<Button type="secondary" icon="plus">
Add
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="pencil" />
<Button type="secondary" icon="pencil">Attach</Button>
<Button type="secondary" icon="pencil">
Attach
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="area-chart" />
<Button type="secondary" icon="area-chart">Chart</Button>
<Button type="secondary" icon="area-chart">
Chart
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="pencil" />
<Button type="secondary" icon="pencil">Edit</Button>
<Button type="secondary" icon="pencil">
Edit
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="question-circle" />
<Button type="secondary" icon="question-circle">Help</Button>
<Button type="secondary" icon="question-circle">
Help
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="hamburger" />
<Button type="secondary" icon="hamburger">Menu</Button>
<Button type="secondary" icon="hamburger">
Menu
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="kebab" />
<Button type="secondary" icon="kebab">More</Button>
<Button type="secondary" icon="kebab">
More
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="profile" />
<Button type="secondary" icon="profile">Profile</Button>
<Button type="secondary" icon="profile">
Profile
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="trash" />
<Button type="secondary" icon="trash">Remove</Button>
<Button type="secondary" icon="trash">
Remove
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="gear" />
<Button type="secondary" icon="gear">Settings</Button>
<Button type="secondary" icon="gear">
Settings
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="zoom-in" />
<Button type="secondary" icon="zoom-in">Zoom In</Button>
<Button type="secondary" icon="zoom-in">
Zoom In
</Button>
</div>
<div style={divStyle}>
<Button type="secondary" icon="zoom-out" />
<Button type="secondary" icon="zoom-out">Zoom Out</Button>
<Button type="secondary" icon="zoom-out">
Zoom Out
</Button>
</div>

@@ -263,7 +290,8 @@ </div>;

## Related
* [ButtonSelect](#/React%20Components/ButtonSelect)
* [ActionSelect](#/React%20Components/ActionSelect)
* [Icon](#/React%20Components/Icon)
* [Loading](#/React%20Components/Loading)
* [Form](#/React%20Components/Form)
* [TooltipHoverArea](#/React%20Components/TooltipHoverArea)
- [ButtonSelect](#/React%20Components/ButtonSelect)
- [ActionSelect](#/React%20Components/ActionSelect)
- [Icon](#/React%20Components/Icon)
- [Loading](#/React%20Components/Loading)
- [Form](#/React%20Components/Form)
- [TooltipHoverArea](#/React%20Components/TooltipHoverArea)

7

source/react/library/card/Card.js
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {
renderableElement,
elementElevation,
} from '../../helpers/customPropTypes';
import { elementElevation } from '../../helpers/customPropTypes';

@@ -15,3 +12,3 @@ import CardActionSelect from './CardActionSelect';

/** Html element or react component to render */
as: renderableElement,
as: PropTypes.elementType,
/** Main visual variant */

@@ -18,0 +15,0 @@ type: PropTypes.oneOf(['primary', 'secondary']),

8

source/react/library/card/Card.md

@@ -1,3 +0,5 @@

Cards provide flexible containers for related pieces of UI content. There are primary and secondary variants available at multiple elevations. Each may become 'selectable' for use in a selectable list.
### Overview
Cards provide flexible containers for related pieces of UI content. There are primary and secondary variants available at multiple elevations. Each may become 'selectable' for use in a selectable list and can contain standardized card content such as a title, an action, or selection of actions.
### Primary Cards

@@ -114,2 +116,4 @@

#### Card with action select
```jsx

@@ -146,2 +150,4 @@ const cardActions = [

#### Card with single action
```jsx

@@ -148,0 +154,0 @@ <Card>

29

source/react/library/checkbox/Checkbox.md

@@ -47,6 +47,6 @@ The Checkbox component is a lightly styled wrapper around an html checkbox input. It leaves most auxiliary functionality to the [FormField](#form) wrapper. We recommend that in most cases the Checkbox is used through the FormField component be used to ensure complete design consistency, but there may be some cases in which a pure Checkbox element is desired.

constructor() {
super()
super();
this.state = {
checkBoxes : [{ checked: false}, { checked: false}, { checked: false}],
}
checkBoxes: [{ checked: false }, { checked: false }, { checked: false }],
};
this.onClick = this.onClick.bind(this);

@@ -63,3 +63,3 @@ this.onSelectAll = this.onSelectAll.bind(this);

checkBoxes,
})
});
}

@@ -72,3 +72,3 @@

checkBoxes: checkBoxes,
})
});
}

@@ -93,15 +93,16 @@

/>
{checkBoxes.map((box, i) => <Checkbox
name={`Box ${i}`}
label={`Box ${i}`}
checked={box.checked}
onChange={(checked) => this.onClick(checked, i)}
/>)}
{checkBoxes.map((box, i) => (
<Checkbox
name={`Box ${i}`}
label={`Box ${i}`}
checked={box.checked}
onChange={checked => this.onClick(checked, i)}
/>
))}
</div>
)
);
}
}
<IndeterminateExample />
<IndeterminateExample />;
```

11

source/react/library/colors/Colors.md
## Overview
Puppet’s color palettes have various themes that associate a particular color and its tonal range with a particular functional role. Don’t introduce new colors into your products without consulting the UX team. To ensure accessibility for the greatest number of users, use the color contrast ratios recommended here.
### Palettes
Each hue is made up of a gradient of colors from light to dark, broken up into individual swatches. We use a numbering scheme of 50 to 950, with 50 representing the lightest shade and 950 representing the darkest. 0 is reserved for white and 1000 for black. 500 represents the base tone from which the rest of the palette is created. These tones are mapped to specific uses, e.g. 50 and 100 are primarily used for light backgrounds, 700 and above for text.
### Interactions
We follow a consistent process for creating interactions. Our base color tone begins at 500. Hover states use a lighter color, typically 400. Pressed or active states are typically 600. 300 is used for focus.

@@ -23,3 +26,5 @@

```
## UI palette
Use the UI palette use neutral colors for product chrome: trim, backgrounds, containers, content zones, and other foundational parts.

@@ -51,2 +56,3 @@

## Action palette
Use the actions palette for only the most important actions a user can take on a page — often buttons or links. B500 is also used to indicate "on", whenever a component begins as transparent or a neutral color, e.g. the border of input fields change from grey to blue.

@@ -74,5 +80,7 @@

## Stoplight palette
We use red, yellow, and green to indicate status, similar to a stop light and other traffic signals. We can not rely on color alone to assist all users. Red and green can be hard to distinguish by users afflicted with a common form of color blindness. Because of this always use another method such as icons or text to supplement the status.
### Reds
Use red to indicate destructive actions, errors and failures.

@@ -98,2 +106,3 @@

#### Yellows
Use yellow to indicate warnings. Yellow is a particularly troublesome color to work with when testing for accessibility. Consult a UX designer when using yellow.

@@ -121,2 +130,3 @@

#### Greens
Use green to indicate success or to indicate approval actions.

@@ -142,2 +152,3 @@

#### Purples
Purple is still under consideration for its particular use case. It is being considered to indicate instructions or information.

@@ -144,0 +155,0 @@

22

source/react/library/content/Content.md
## Overview
The Content component allows you to place formatted text within your application.

@@ -7,8 +8,2 @@ This provides a reasonable default for text formatting in text-heavy pages, such as documentation, legal documents, and inline help.

If we move to support all html elements, the following should also be implemented:
1. `header + description` spacing
1. `caption` color and spacing
1. `label` color and spacing
`Base styles:`

@@ -23,10 +18,8 @@

<ul>
<li>{highlight('ul')} has 24px bottom margin and 0 left padding.</li>
<li>{highlight('ul li')} has 8px bottom margin and a yellow bullet.</li>
<li>{highlight('last ul li')} has 0 bottom margin.</li>
<li>{highlight('ul')} has 24px of space below it 0 left padding.</li>
<li>{highlight('ul li')} uses yellow bullets.</li>
</ul>
<ol>
<li>{highlight('ol')} has 24px bottom margin and 0 left padding.</li>
<li>{highlight('ol li')} has 8px bottom margin and a yellow number.</li>
<li>{highlight('last ol li')} has 0 bottom margin.</li>
<li>{highlight('ol')} has 24px of space below it 0 left padding.</li>
<li>{highlight('ol li')} uses black numbers.</li>
</ol>

@@ -44,3 +37,4 @@ <p>{highlight('p + h#')} has 24px top margin (applied to h#).</p>

## Related
* [Content writing](#/Foundations/ContentWriting) : guidance and examples for writing content
* [Typography](#/Foundations/Typography) : rules and definitions for typefaces and fonts
- [Content writing](#/Foundations/ContentWriting) : guidance and examples for writing content
- [Typography](#/Foundations/Typography) : rules and definitions for typefaces and fonts

3

source/react/library/form/FormField.js
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import { renderableElement } from '../../helpers/customPropTypes';
import { omit } from '../../helpers/statics';

@@ -26,3 +25,3 @@ import Input, {

PropTypes.oneOf(supportedTypes),
renderableElement,
PropTypes.elementType,
]).isRequired,

@@ -29,0 +28,0 @@ /** A unique identifier for this field */

16

source/react/library/heading/Heading.md

@@ -11,6 +11,6 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Text</small>

The following 2 font families are utilized in the Heading component.
The following 2 font families are utilized in the Heading component.
* <strong>Calibre</strong>: Titles (hero's), heading (sizes 1-4), and labels
* <strong>Open Sans</strong>: Heading (sizes 5 & 6)
- <strong>Calibre</strong>: Titles (hero's), heading (sizes 1-4), and labels
- <strong>Open Sans</strong>: Heading (sizes 5 & 6)

@@ -23,3 +23,3 @@ See also: [Text](#/React%20Components/Text) and [Content](#/React%20Components/Content)

The primary (default) header style is in the color Neutral 900 (base), in various weights and sizes.
The primary (default) header style is in the color Neutral 900 (base), in various weights and sizes.

@@ -39,3 +39,3 @@ ```jsx

Another option for the header color is Neutral 700 (medium).
Another option for the header color is Neutral 700 (medium).

@@ -68,4 +68,4 @@ ```jsx

* [Colors](#/React%20Components/Colors)
* [Content](#/React%20Components/Content)
* [Text](#/React%20Components/Text)
- [Colors](#/React%20Components/Colors)
- [Content](#/React%20Components/Content)
- [Text](#/React%20Components/Text)

22

source/react/library/icon/Icon.md

@@ -13,9 +13,9 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Icons</small>

* Provide a type and a size (size optional)
* Provide an svg and a viewBox
- Provide a type and a size (size optional)
- Provide an svg and a viewBox
The specific svg rendered is decided by the following:
The specific SVG rendered is decided by the following:
1. If there is a unique svg for the type and size provided, we render it. Unique svgs are indicated by a colored background below.
2. Otherwise, we scale down the next largest svg, or if unavailable, scale up the next smallest svg
1. If there is a unique SVG for the type and size provided, it will be rendered. Unique SVGs are indicated by a green background below.
2. Otherwise, we scale down the next largest SVG, or if unavailable, scale up the next smallest SVG.

@@ -28,4 +28,2 @@ See also: [Button](#/React%20Components/Button) and [Button Select](#/React%20Components/ButtonSelect)

Icons with a green background have been approved by Design. Scaled svgs (white background) should be approved before using.
```jsx

@@ -82,4 +80,5 @@ import Alert from '../alert';

<Alert type="success">
Icons with a green background have been approved by Design. Scaled svgs
(white background) should be OK'd before using.
Icons with a <em>green</em> background are the unique SVGs created by
the UX team. Scaled SVGs with a <em>white</em> background should be
approved before using.
</Alert>

@@ -104,5 +103,6 @@ <br />

```
## Related
* [Button](#/React%20Components/Button) : buttons are able to render an icon as part of the component
* [Button Select](#/React%20Components/ButtonSelect)
- [Button](#/React%20Components/Button) : buttons are able to render an icon as part of the component
- [Button Select](#/React%20Components/ButtonSelect)

3

source/react/library/link/Link.js
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { renderableElement } from '../../helpers/customPropTypes';
const propTypes = {
/** Html element or react component to render */
as: renderableElement,
as: PropTypes.elementType,
/** Text Size */

@@ -10,0 +9,0 @@ size: PropTypes.oneOf(['medium', 'small', 'tiny']),

21

source/react/library/link/Link.md

@@ -10,16 +10,19 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Button / 2 Action</small>

For links that drill into item details:
* Use the most clearly identifiable piece of information about the item being drilled into; for example, the node name or event time stamp.
* Use capitalization appropriate to the item that the link is named after.
Consider these 3 states for links: hover, focused and pressed (similar to [Button](#/React%20Components/Button) states).
- Use the most clearly identifiable piece of information about the item being drilled into; for example, the node name or event time stamp.
- Use capitalization appropriate to the item that the link is named after.
Consider these 3 states for links: hover, focused and pressed (similar to [Button](#/React%20Components/Button) states).
## Types
### Primary Links
Primary inline links are blue (B500), to differentiate from the text around them. There are two sizes for inline links: The default size, and a small size.
Primary inline links are blue (B500), to differentiate from the text around them. There are two sizes for inline links: The default size, and a small size.
[Insert example for link]\
[Insert example for small link]
### Secondary Links
### Secondary Links
Secondary links use the color of the text around them. In order to meet WCAG AA 2.0 standards, the initial state must be underlined. Hover, focus, and pressed states are the same as blue inline links.

@@ -30,3 +33,5 @@

## Variations
### Link as a Button
This variation is a link that acts like a [Button](#/React%20Components/Button), in that they carry out a specified action when clicked. These are styled the same as primary links.

@@ -36,5 +41,5 @@

# Related
# Related
* [Button](#/React%20Components/Button)
* [Text](#/React%20Components/Text)
- [Button](#/React%20Components/Button)
- [Text](#/React%20Components/Text)

9

source/react/library/loading/Loading.md

@@ -8,5 +8,6 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Loader</small>

Use the loading indicator when:
* A process is taking long enough that you want the user to know that they system isn’t hung.
* The load time is greater than 1 second. (Do not use the loading indicator when the load time is 1 second or shorter).
- A process is taking long enough that you want the user to know that they system isn’t hung.
- The load time is greater than 1 second. (Do not use the loading indicator when the load time is 1 second or shorter).
See also: [Icon](#/React%20Components/Icon) and [Form](#/React%20Components/Form)

@@ -49,3 +50,3 @@

* [Form](#/React%20Components/Form)
* [Icon](#/React%20Components/Icon)
- [Form](#/React%20Components/Form)
- [Icon](#/React%20Components/Icon)

1

source/react/library/logo/Logo.md
## Overview
The logo component provides easy access to marketing-approved logos in our applications. A full set of official product logos may be specified by strings, in both full and bug variations. Additionally, an arbitrary logo may be rendered with the default puppet bug and a custom product name. Other components in the react component library, most prominently, the [Sidebar](#sidebar) are designed to work out-of-the-box with this component.

@@ -3,0 +4,0 @@

9

source/react/library/modal/Modal.md

@@ -42,3 +42,5 @@ A `Modal` is a container with arbitrary content that opens above other page

<>
<Button onClick={() => setState({ open: true })}>Open modal with sub-components</Button>
<Button onClick={() => setState({ open: true })}>
Open modal with sub-components
</Button>

@@ -137,3 +139,6 @@ {state.open && (

{state.open && (
<Modal closeOnEscapeAndOverlay={false} onClose={() => setState({ open: false })}>
<Modal
closeOnEscapeAndOverlay={false}
onClose={() => setState({ open: false })}
>
This modal can only be closed by clicking the "×" button in the

@@ -140,0 +145,0 @@ upper-right of the modal, but not by hitting the escape key or by clicking

2

source/react/library/select/Select.md

@@ -71,3 +71,3 @@ The Select component is a form element allowing for selection of a value from a set of options.

onBlur={() => {
console.log('onBlur')
console.log('onBlur');
}}

@@ -74,0 +74,0 @@ type="autocomplete"

2

source/react/library/sidebar/SidebarFooter.js

@@ -9,3 +9,3 @@ import React from 'react';

/** The root HTML element */
as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
as: PropTypes.elementType,
/** Displays the name of the user in the sidebar's footer */

@@ -12,0 +12,0 @@ username: PropTypes.string,

2

source/react/library/sidebar/SidebarHeader.js

@@ -6,3 +6,3 @@ import React from 'react';

const propTypes = {
as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
as: PropTypes.elementType,
minimized: PropTypes.bool,

@@ -9,0 +9,0 @@ logo: PropTypes.string,

2

source/react/library/sidebar/SidebarItem.js

@@ -9,3 +9,3 @@ import React from 'react';

const propTypes = {
as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
as: PropTypes.elementType,
title: PropTypes.string.isRequired,

@@ -12,0 +12,0 @@ icon: PropTypes.string,

6

source/react/library/switch/Switch.md

@@ -35,2 +35,3 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Toggle</small>

```
Event Handling

@@ -49,5 +50,6 @@

```
## Related
* [FormField](#/React%20Components/FormField)
* [Input](#/React%20Components/Input)
- [FormField](#/React%20Components/FormField)
- [Input](#/React%20Components/Input)

6

source/react/library/table/Table.md

@@ -5,9 +5,7 @@ ## Overview

### Microcopy
* Use headings to eliminate redundant words in columns. For example, instead of Version 3.8.4 and Version 3.8.5, title the column Version, and use only the version numbers in the table cells. This makes it easier for users to scan the options and reduces word count for Localization. Use sentence case capitalization.
* Use capitalization appropriate to the item named in the cell. For example, if the cell lists an environment, use the same capitalization as the environment name.
- Use headings to eliminate redundant words in columns. For example, instead of Version 3.8.4 and Version 3.8.5, title the column Version, and use only the version numbers in the table cells. This makes it easier for users to scan the options and reduces word count for Localization. Use sentence case capitalization.
- Use capitalization appropriate to the item named in the cell. For example, if the cell lists an environment, use the same capitalization as the environment name.
### Basic use

@@ -14,0 +12,0 @@

3

source/react/library/tabs/Tab.js
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { renderableElement } from '../../helpers/customPropTypes';

@@ -13,3 +12,3 @@ import Button from '../button';

/** html element to render tab button as */
as: renderableElement,
as: PropTypes.elementType,
/** Currently controls bg color of active tab & panel */

@@ -16,0 +15,0 @@ type: PropTypes.oneOf(['primary', 'secondary']),

2

source/react/library/tabs/Tabs.md

@@ -9,3 +9,3 @@ ## Overview

* Use a single noun or noun phrase that describes the content of the tab, for example, Facts, Reports, or Activity Log.
- Use a single noun or noun phrase that describes the content of the tab, for example, Facts, Reports, or Activity Log.

@@ -12,0 +12,0 @@ ## Types

3

source/react/library/text/Text.js
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { renderableElement } from '../../helpers/customPropTypes';
const propTypes = {
/** Html element or react component to render */
as: renderableElement,
as: PropTypes.elementType,
/** Text Size */

@@ -10,0 +9,0 @@ size: PropTypes.oneOf(['medium', 'small', 'tiny']),

22

source/react/library/text/Text.md

@@ -15,5 +15,5 @@ <small class="rsg--pathline-29">Sketch symbol: puppet-ui-library / Text</small>

* <strong>Calibre</strong>: Headings, titles, navigation, visualizations, and other primary elements (See [Heading](#/React%20Components/Heading))
* <strong>Open Sans</strong>: Body copy and general UI elements and content (like this `Text` component)
* <strong>Inconsolata</strong>: Code samples
- <strong>Calibre</strong>: Headings, titles, navigation, visualizations, and other primary elements (See [Heading](#/React%20Components/Heading))
- <strong>Open Sans</strong>: Body copy and general UI elements and content (like this `Text` component)
- <strong>Inconsolata</strong>: Code samples

@@ -28,5 +28,5 @@ See also: [Heading](#/React%20Components/Heading) and [Content](#/React%20Components/Content)

* Font Family: Open Sans
* Font weight: 400 Regular
* Size / line height: 14px / 20px
- Font Family: Open Sans
- Font weight: 400 Regular
- Size / line height: 14px / 20px

@@ -51,3 +51,3 @@ ```jsx

Take into account expected behavior and accessibility guidelines when using text colors.
Take into account expected behavior and accessibility guidelines when using text colors.

@@ -76,5 +76,5 @@ #### Neutral colors

* [Color](#/React%20Components/Colors)
* [Content](#/React%20Components/Content)
* [Heading](#/React%20Components/Heading)
* [Link](#/React%20Components/Link)
- [Color](#/React%20Components/Colors)
- [Content](#/React%20Components/Content)
- [Heading](#/React%20Components/Heading)
- [Link](#/React%20Components/Link)

5

source/react/library/tooltips/TooltipHoverArea.md

@@ -9,6 +9,5 @@ _Note: Aria attributes to be set on Tooltip and TooltipHoverArea components post-1.0_

* Use complete sentences with appropriate capitalization and punctuation.
* Be concise. Use short words and sentences, and don’t explain more than the user needs to know to complete the task at hand. - If necessary, link to docs for more information.
- Use complete sentences with appropriate capitalization and punctuation.
- Be concise. Use short words and sentences, and don’t explain more than the user needs to know to complete the task at hand. - If necessary, link to docs for more information.
### Example: Basic tooltip

@@ -15,0 +14,0 @@ 

.nyc_output/9f62c6ee-a839-41c2-8cd1-5afec54a491d.json
.nyc_output/processinfo/9f62c6ee-a839-41c2-8cd1-5afec54a491d.json
.nyc_output/processinfo/index.json
CODEOWNERS
coverage/base.css
coverage/block-navigation.js
coverage/index.html
coverage/prettify.css
coverage/prettify.js
coverage/react/constants.js.html
coverage/react/helpers/customPropTypes.js.html
coverage/react/helpers/index.html
coverage/react/helpers/statics.js.html
coverage/react/helpers/withId.js.html
coverage/react/index.html
coverage/react/internal/action-menu-list/ActionMenuList.js.html
coverage/react/internal/action-menu-list/ActionMenuListItem.js.html
coverage/react/internal/action-menu-list/index.html
coverage/react/internal/action-menu-list/index.js.html
coverage/react/internal/option-menu-list/index.html
coverage/react/internal/option-menu-list/index.js.html
coverage/react/internal/option-menu-list/OptionMenuList.js.html
coverage/react/internal/option-menu-list/OptionMenuListItem.js.html
coverage/react/library/action-select/ActionSelect.js.html
coverage/react/library/action-select/index.html
coverage/react/library/action-select/index.js.html
coverage/react/library/alert/Alert.js.html
coverage/react/library/alert/AlertActions.js.html
coverage/react/library/alert/AlertMessage.js.html
coverage/react/library/alert/IconButton.js.html
coverage/react/library/alert/index.html
coverage/react/library/alert/index.js.html
coverage/react/library/badge/Badge.js.html
coverage/react/library/badge/index.html
coverage/react/library/badge/index.js.html
coverage/react/library/breadcrumb/Breadcrumb.js.html
coverage/react/library/breadcrumb/BreadcrumbSection.js.html
coverage/react/library/breadcrumb/index.html
coverage/react/library/button/Button.js.html
coverage/react/library/button/index.html
coverage/react/library/button/index.js.html
coverage/react/library/card/Card.js.html
coverage/react/library/card/CardAction.js.html
coverage/react/library/card/CardActionSelect.js.html
coverage/react/library/card/CardTitle.js.html
coverage/react/library/card/index.html
coverage/react/library/checkbox/Checkbox.js.html
coverage/react/library/checkbox/index.html
coverage/react/library/checkbox/index.js.html
coverage/react/library/content/Content.js.html
coverage/react/library/content/index.html
coverage/react/library/FadeInAndOut.js.html
coverage/react/library/filters/FilterForm.js.html
coverage/react/library/filters/FilterItem.js.html
coverage/react/library/filters/Filters.js.html
coverage/react/library/filters/index.html
coverage/react/library/filters/List.js.html
coverage/react/library/filters/ListItem.js.html
coverage/react/library/form/Form.js.html
coverage/react/library/form/FormField.js.html
coverage/react/library/form/FormSection.js.html
coverage/react/library/form/index.html
coverage/react/library/form/index.js.html
coverage/react/library/heading/Heading.js.html
coverage/react/library/heading/index.html
coverage/react/library/heading/index.js.html
coverage/react/library/icon/Icon.js.html
coverage/react/library/icon/icons.js.html
coverage/react/library/icon/index.html
coverage/react/library/icon/index.js.html
coverage/react/library/index.html
coverage/react/library/input/index.html
coverage/react/library/input/index.js.html
coverage/react/library/input/Input.js.html
coverage/react/library/link/index.html
coverage/react/library/link/index.js.html
coverage/react/library/link/Link.js.html
coverage/react/library/loading/index.html
coverage/react/library/loading/index.js.html
coverage/react/library/loading/Loading.js.html
coverage/react/library/logo/index.html
coverage/react/library/logo/index.js.html
coverage/react/library/logo/Logo.js.html
coverage/react/library/logo/logos.js.html
coverage/react/library/modal/index.html
coverage/react/library/modal/Modal.js.html
coverage/react/library/modal/ModalActions.js.html
coverage/react/library/modal/ModalTitle.js.html
coverage/react/library/select/index.html
coverage/react/library/select/index.js.html
coverage/react/library/select/Select.js.html
coverage/react/library/select/SelectTarget.js.html
coverage/react/library/sidebar/helper.js.html
coverage/react/library/sidebar/index.html
coverage/react/library/sidebar/Sidebar.js.html
coverage/react/library/sidebar/SidebarFooter.js.html
coverage/react/library/sidebar/SidebarHeader.js.html
coverage/react/library/sidebar/SidebarItem.js.html
coverage/react/library/sidebar/SidebarNavigation.js.html
coverage/react/library/sidebar/SidebarSection.js.html
coverage/react/library/switch/index.html
coverage/react/library/switch/index.js.html
coverage/react/library/switch/Switch.js.html
coverage/react/library/table/index.html
coverage/react/library/table/Table.js.html
coverage/react/library/tabs/getPanelId.js.html
coverage/react/library/tabs/getTabId.js.html
coverage/react/library/tabs/index.html
coverage/react/library/tabs/Panel.js.html
coverage/react/library/tabs/Tab.js.html
coverage/react/library/tabs/Tabs.js.html
coverage/react/library/text/index.html
coverage/react/library/text/index.js.html
coverage/react/library/text/Text.js.html
coverage/react/library/tooltips/index.html
coverage/react/library/tooltips/Tooltip.js.html
coverage/react/library/tooltips/TooltipHoverArea.js.html
coverage/sort-arrow-sprite.png
coverage/sorter.js
source/react/library/action-select/ActionSelect.json
source/react/library/badge/Badge.json
source/react/library/breadcrumb/Breadcrumb.json
source/react/library/button-select/ButtonSelect.json
source/react/library/button/Button.json
source/react/library/checkbox/Checkbox.json
source/react/library/content/Content.json
source/react/library/form/Form.json
source/react/library/form/FormField.json
source/react/library/heading/Heading.json
source/react/library/icon/Icon.json
source/react/library/input/Input.json
source/react/library/link/Link.json
source/react/library/loading/Loading.json
source/react/library/logo/Logo.json
source/react/library/select/Select.json
source/react/library/switch/Switch.json
source/react/library/text/Text.json
source/react/library/tooltips/TooltipHoverArea.json
build/library.js

Sorry, the diff of this file is too big to display

source/react/library/icon/icons.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc