Release react-components

CHANGELOG.md

@@ -1,3 +1,9 @@
+# react-components 5.24.0 (2020-10-12)
+
+- [Popover] Add Popover component (by [melcherry98](https://github.com/melcherry98) in [#333](https://github.com/puppetlabs/design-system/pull/333))
+- [SidePanel] Add `closeButtonIcon` and `hideCloseButton` props to SidePanel (by [@jilliankeenan](https://github.com/jilliankeenan) in [#336](https://github.com/puppetlabs/design-system/pull/336))
+- [Logo] Fix logo for Comply (by [vine77](https://github.com/vine77) in [#332](https://github.com/puppetlabs/design-system/pull/332))
+
 # react-components 5.23.1 (2020-10-07)
 
 - [Logo] Add "comply" logo (by [Ioannis-Karasavvaidis](https://github.com/Ioannis-Karasavvaidis) in [#327](https://github.com/puppetlabs/design-system/pull/327))

packages/design-system-website/foundations/Iconography.md

@@ -4,7 +4,6 @@ Icon design sits squarely within a venn diagram between illustration and product
 
 A list of available icons are available in the [icon component](#/React%20Components/Icon).
 
-
 ## Icon construction
 
 ### Grid
@@ -64,7 +63,6 @@ The vast majority of icons do not provide enough information by themselves for a
 
 ![Ellipsis and kebab icons are ok to use without text](./icon-kebabs.svg)
 
-
 **Consider**
 
 - Is this an icon with broad use - eg. House for homepage, gears for settings, kebabs for menus...
@@ -132,3 +130,4 @@ Test that the icon:
 ## Related
 
 - [Icon component](#/React%20Components/Icon): a list of available icons and guidelines for using them
+- [Logo component](#/React%20Components/Logo): the Puppet product logos

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.23.1",
+  "version": "5.24.0",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",

packages/react-components/source/index.js

@@ -22,6 +22,7 @@ import Link from './react/library/link';
 import Loading from './react/library/loading';
 import Logo from './react/library/logo';
 import Modal from './react/library/modal';
+import Popover from './react/library/popover';
 import RadioButton from './react/library/radiobutton';
 import Select from './react/library/select';
 import Sidebar from './react/library/sidebar';
@@ -56,6 +57,7 @@ export {
   Loading,
   Logo,
   Modal,
+  Popover,
   RadioButton,
   Select,
   Sidebar,

packages/react-components/source/react/library/content/Content.md

@@ -281,7 +281,8 @@ The `Content` component is a wrapper for simple HTML content, which provides def
         <li>
           <p>
             For more information on our curated step specifications, see{' '}
-            <a href="/documentation/step-specifications">Step specifications</a>.
+            <a href="/documentation/step-specifications">Step specifications</a>
+            .
           </p>
         </li>
         <li>

packages/react-components/source/react/library/copy/Copy.md

@@ -13,34 +13,45 @@ See also: [Code](#/React%20Components/Code) and [FormField](#/React%20Components
 ```
 
 ```jsx
-<Copy writeToClipboard={(value) => {console.log(`overwritten writeToClipboard: '${value}'`)}} onCopy={(value) => {console.log(`copied: '${value}'`)}}>Overwritten copy-to-clipboard with callback</Copy>
+<Copy
+  writeToClipboard={value => {
+    console.log(`overwritten writeToClipboard: '${value}'`);
+  }}
+  onCopy={value => {
+    console.log(`copied: '${value}'`);
+  }}
+>
+  Overwritten copy-to-clipboard with callback
+</Copy>
 ```
 
 ```jsx
-<Copy value="areallyreallylongstringthatyouaren'tdisplayinginfull">areallyreally...</Copy>
+<Copy value="areallyreallylongstringthatyouaren'tdisplayinginfull">
+  areallyreally...
+</Copy>
 ```
 
 ```jsx
 import Code from '../code';
 
-<Code type='block'>
+<Code type="block">
   <Copy>mod 'puppetlabs-stdlib', '6.3.0'</Copy>
-</Code>
+</Code>;
 ```
 
 ```jsx
 import Form from '../form';
 
-<Copy align='flex-end'>
+<Copy align="flex-end">
   <Form.Field
-    type='text'
-    name='label'
-    labelType='primary'
-    id='Trigger Workflow'
-    value='/v3/events/workflow'
-    label='Trigger Workflow'
+    type="text"
+    name="label"
+    labelType="primary"
+    id="Trigger Workflow"
+    value="/v3/events/workflow"
+    label="Trigger Workflow"
   />
-</Copy>
+</Copy>;
 ```
 
 ## Related

packages/react-components/source/react/library/icon/Icon.md

@@ -124,18 +124,19 @@ const Renderer = () => {
 
 ## Adding icons to the Design System
 
-1. _Design_: Create a new icon following the checklist and naming conventions on the [Iconography](#/Foundations/Iconography) Foundations page.
-2. _Engineering_: Run the SVG through [svgo](https://github.com/svg/svgo) to minify and remove redundant data.
-3. _Engineering_: Strip out the wrapping `svg` element, usually (but not always) leaving just a `path`.
-4. _Engineering_: Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
-5. _Engineering_: Rename dasherized attributes like `fill-rule` with React-compatible properties like `fillRule`.
-6. _Engineering_: Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/master/packages/react-components/source/react/library/icon/icons.js) in alphabetical order, specifying the icon name and native SVG sizes (usually "medium" for 16px but optionally also "tiny" for 8px, "small" for 12px, or "large" for 24px).
+1. Run the SVG through [svgo](https://github.com/svg/svgo) to minify and remove redundant data.
+2. Note the viewBox dimensions and choose the appropriate size: tiny (8px x 8px), small (12px x 12px), medium (16px x 16px), or large (24px x 24px). Most icons only use a single base size of medium.
+3. Strip out the wrapping `svg` element, usually (but not always) leaving just a `path`.
+4. Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
+5. Rename dasherized attributes like `fill-rule` with React-compatible properties like `fillRule`.
+6. Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/development/packages/react-components/source/react/library/icon/icons.js) in alphabetical order, specifying the icon name and native SVG sizes (from step 2).
 
 ## Disclaimer
-These icons include material from third parties and may be protected by their own, independent trademarks. Use of these materials is for illustrative purposes only and is not intended to infringe on the copyright or trademark of any of these third parties. Use of these materials does not imply endorsement by Puppet of the trademark holders. 
+
+These icons include material from third parties and may be protected by their own, independent trademarks. Use of these materials is for illustrative purposes only and is not intended to infringe on the copyright or trademark of any of these third parties. Use of these materials does not imply endorsement by Puppet of the trademark holders.
 
 ## Related
 
-- [Button](#/React%20Components/Button): Buttons are able to render an icon as part of the component
-- [ButtonSelect](#/React%20Components/ButtonSelect)
-- [Iconography](#/Foundations/Iconography) (Foundations)
+- [Logo](#/React%20Components/Logo)
+- [Button](#/React%20Components/Button) Buttons are able to render an icon as part of the component)
+- [Iconography](#/Foundations/Iconography) (in Foundations)

packages/react-components/source/react/library/input/Input.js

@@ -167,14 +167,11 @@ const Input = ({
         id={name}
         name={name}
         type={isMultiline ? undefined : type}
-        className={classNames(
-          'rc-input',
-          {
-            'rc-input-error': error,
-            'rc-input-simple': simple,
-            'rc-input-multiline': isMultiline,
-          },
-        )}
+        className={classNames('rc-input', {
+          'rc-input-error': error,
+          'rc-input-simple': simple,
+          'rc-input-multiline': isMultiline,
+        })}
         ref={inputRef}
         onChange={e => onChange(parseValue(e.target.value), e)}
         {...otherProps}

packages/react-components/source/react/library/logo/Logo.md

@@ -70,3 +70,17 @@ There are times when you might need to use only the graphical icon for a Puppet
   <Logo type="bug" product="My Product" style={{ margin: 5 }} />
 </div>
 ```
+
+## Adding icons to the Design System
+
+1. Run the SVG through [svgo](https://github.com/svg/svgo) to minify and remove redundant data.
+2. Note the viewBox dimensions.
+3. Strip out the wrapping `svg` element, usually (but not always) leaving just a `path`.
+4. Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
+5. Rename dasherized attributes like `fill-rule` with React-compatible properties like `fillRule`.
+6. Add class names to the different `path` segments (so the component can add the correct colors on light and dark backgrounds) for `rc-logo-bug`, `rc-logo-puppet`, and `rc-logo-product`.
+7. Add the icon to [logos.js](https://github.com/puppetlabs/design-system/blob/development/packages/react-components/source/react/library/logo/logos.js), using the same format with viewBox dimensions (from step 2) in a separate property.
+
+## Related
+
+- [Icon](#/React%20Components/Icon)

packages/react-components/source/react/library/popover/Popover.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { elementElevation } from '../../helpers/customPropTypes';
+import Button from '../button';
+
+const propTypes = {
+  /** Optional additional className */
+  className: PropTypes.string,
+  /** Function to call when the close button is clicked */
+  onClose: PropTypes.func,
+  /** Component children */
+  children: PropTypes.node,
+  /** Side the arrow appears on */
+  side: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /** Popover 'elevation' visually indicated with box-shadow */
+  elevation: elementElevation,
+};
+
+const defaultProps = {
+  className: '',
+  onClose: () => {},
+  children: null,
+  side: 'left',
+  elevation: 0,
+};
+
+const Popover = ({
+  className,
+  onClose,
+  children,
+  side,
+  elevation,
+  ...rest
+}) => {
+  return (
+    <div
+      className={classNames(
+        'rc-popover',
+        `rc-popover-${side}`,
+        `rc-popover-elevation-${elevation}`,
+        className,
+      )}
+      {...rest}
+    >
+      <Button
+        className="rc-popover-close"
+        icon="x"
+        onClick={onClose}
+        type="transparent"
+      />
+      {children}
+    </div>
+  );
+};
+
+Popover.propTypes = propTypes;
+Popover.defaultProps = defaultProps;
+
+export default Popover;