diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md index 6311bd4733..d0e436b633 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/clipboard-copy.md @@ -3,10 +3,14 @@ id: Clipboard copy section: components --- +import '../components.css'; + ## Elements Clipboard copy has 3 main components. -Elements of the clipboard copy component +
+![Elements of the clipboard copy component.](./img/clipboard-copy-elements.svg) +
1. **Copy content:** the content that will be copied to the user’s clipboard. 2. **Clipboard button:** completes the copy action when clicked. @@ -22,45 +26,57 @@ The clipboard copy component can be editable or read-only and both types can opt An editable clipboard copy allows users to copy an editable text input box. -Example of an editable clipboard copy component +
+![Example of an editable clipboard copy component.](./img/clipboard-copy-editable.svg) +
**Read-only** A read-only clipboard copy only allows the user to copy a predefined line of text that is not editable by the user. -Example of a read-only clipboard copy component +
+![Example of a read-only clipboard copy component.](./img/clipboard-copy-readonly.svg) +
**Expandable** An expandable clipboard copy allows for long lines of text to be stored in an expansion panel. Expanding the clipboard copy allows the user to view the full string that they can copy. -Example of an expandable clipboard copy component +
+![Example of an expandable clipboard copy component.](./img/clipboard-copy-expandable.svg) +
**Inline compact** An inline compact clipboard copy is placed directly inline with other text or used on its own when you want a lighter weight clipboard copy treatment. -Example of an inline compact clipboard copy component with one action +
+![Example of an inline clipboard copy component with one action.](./img/clipboard-copy-inline-compact-1.svg) +
An inline compact clipboard copy can include one or two action buttons next to it. The second action is customizable and optional. -Example of an inline compact clipboard copy component with two actions +
+![Example of an inline clipboard copy component with two actions.](./img/clipboard-copy-inline-compact-2.svg) +
### Clipboard copy in context Clipboard copy can be used almost anywhere in a UI. It is commonly used in forms and definition lists. **Clipboard copy in a form** -Example of clipboard copy in a form +
+![Example of clipboard copy in a form.](./img/clipboard-copy-form.svg) +
**Clipboard copy in a description list** -Example of clipboard copy in a description list - -**Inline compact clipboard copy for URLs** - -Example of an inline compact clipboard copy next to a URL +
+![Example of clipboard copy in a description list.](./img/clipboard-copy-description-list.svg) +
**Inline compact clipboard copy in context** -Example of an inline compact clipboard copy in context +
+![Example of an inline compact clipboard copy in context.](./img/clipboard-copy-inline-compact-4.svg) +
\ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-description-list.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-description-list.svg new file mode 100644 index 0000000000..eef55c6747 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-description-list.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-editable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-editable.svg new file mode 100644 index 0000000000..24b2fe7a81 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-editable.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-elements.svg new file mode 100644 index 0000000000..2567720a87 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-elements.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-expandable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-expandable.svg new file mode 100644 index 0000000000..f1a4572155 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-expandable.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-form.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-form.svg new file mode 100644 index 0000000000..8d03b67c4b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-form.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-1.svg new file mode 100644 index 0000000000..a61079f90f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-2.svg new file mode 100644 index 0000000000..209434001b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-4.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-4.svg new file mode 100644 index 0000000000..19165bc956 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-inline-compact-4.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-readonly.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-readonly.svg new file mode 100644 index 0000000000..bbdfdf25d0 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/clipboard-copy/img/clipboard-copy-readonly.svg @@ -0,0 +1,9 @@ + + + + + + + + +