@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/card/html

@@ -0,0 +1,254 @@
+import './Card.css'
+
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### With image and action
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### With title in head
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### With only actions in head (no title/footer)
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Card with header that wraps
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Actions with no offset
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### With only image in head
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### With no footer
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### With no title
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### With only a content section
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### With multiple body sections
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### With only one body that fills
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Compact
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Large
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Selectable
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### Selectable secondary style
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Single selectable
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+### Actionable (button)
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Actionable (link)
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+### Actionable secondary style
+
+
+import Example20 from './Example20.html?raw'
+
+<LiveExample html={Example20} />
+
+### Actionable and selectable
+
+
+import Example21 from './Example21.html?raw'
+
+<LiveExample html={Example21} />
+
+### Actionable and selectable secondary style
+
+
+import Example22 from './Example22.html?raw'
+
+<LiveExample html={Example22} />
+
+### Secondary
+
+
+import Example23 from './Example23.html?raw'
+
+<LiveExample html={Example23} />
+
+### Plain
+
+
+import Example24 from './Example24.html?raw'
+
+<LiveExample html={Example24} />
+
+### Expandable
+
+
+import Example25 from './Example25.html?raw'
+
+<LiveExample html={Example25} />
+
+### Expandable with image
+
+
+import Example26 from './Example26.html?raw'
+
+<LiveExample html={Example26} />
+
+### Expanded
+
+
+import Example27 from './Example27.html?raw'
+
+<LiveExample html={Example27} />
+
+### Full height card
+
+
+import Example28 from './Example28.html?raw'
+
+<LiveExample html={Example28} />
+
+### Expandable toggle on right
+
+
+import Example29 from './Example29.html?raw'
+
+<LiveExample html={Example29} />
+
+### Card with dividers between sections
+
+
+import Example30 from './Example30.html?raw'
+
+<LiveExample html={Example30} />
+
+## Documentation
+
+### Overview
+
+A card is a generic rectangular container that can be used to build other components. Use a default card for regular page content and the compact variation for dashboard or small cards.
+
+### Usage
+
+| Class | Applied | Outcome |
+| ---- | ---- | ---- |
+| `.pf-v6-c-card` | `<div>` | Creates a card component.  **Required** |
+| `.pf-v6-c-card__title` | `<div>` | Creates a card title container. |
+| `.pf-v6-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
+| `.pf-v6-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements. |
+| `.pf-v6-c-card__footer` | `<div>` | Creates the footer of a card. |
+| `.pf-v6-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
+| `.pf-v6-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
+| `.pf-v6-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
+| `.pf-v6-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
+| `.pf-v6-c-card__selectable-actions` | `<div>` | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
+| `.pf-v6-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-v6-c-card__header` has content outside of a card header toggle or card header actions** |
+| `.pf-v6-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
+| `.pf-v6-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused. |
+| `.pf-m-compact` | `.pf-v6-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
+| `.pf-m-display-lg` | `.pf-v6-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-wrap` | `.pf-v6-c-card__header` | Modifies the card header to wrap its children. |
+| `.pf-m-no-fill` | `.pf-v6-c-card__body` | Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
+| `.pf-m-selectable` | `.pf-v6-c-card` | Modifies a card to be selectable.  |
+| `.pf-m-clickable` | `.pf-v6-c-card` | Modifies a card to be clickable. |
+| `.pf-m-selected` | `.pf-v6-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v6-c-card__input`. |
+| `.pf-m-current` | `.pf-v6-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
+| `.pf-m-disabled` | `.pf-v6-c-card` | Modifies a card so it is not selectable or clickable.  |
+| `.pf-m-secondary` | `.pf-v6-c-card` | Modifies the card to have secondary styling. |
+| `.pf-m-flat` | `.pf-v6-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
+| `.pf-m-rounded` | `.pf-v6-c-card` | Modifies the card to have rounded corners. |
+| `.pf-m-plain` | `.pf-v6-c-card` | Modifies the card to have no box shadow and no background color. |
+| `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
+| `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
+| `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
+| `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |

package/dist/docs/api/v6/components/card/html-demos

@@ -0,0 +1,143 @@
+import './Card.css'
+
+## Demos
+
+### Horizontal grid collapsed
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Horizontal grid expanded
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Horizontal split
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Details card
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Aggregate status card
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Status, tabbed card
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Status card
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Status card expanded notifications
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Status card expanded with popover
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Utilization card 1
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Utilization card 2
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Utilization card 3
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Utilization card 4
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Nested cards with expand toggle on the right
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Nested cards with expand toggle
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+### With accordion
+
+
+import Example16 from './Example16.html?raw'
+
+<LiveExample html={Example16} />
+
+### Trend card 1
+
+
+import Example17 from './Example17.html?raw'
+
+<LiveExample html={Example17} />
+
+### Trend card 2
+
+
+import Example18 from './Example18.html?raw'
+
+<LiveExample html={Example18} />
+
+### Log view
+
+
+import Example19 from './Example19.html?raw'
+
+<LiveExample html={Example19} />
+
+### Events view
+
+
+import Example20 from './Example20.html?raw'
+
+<LiveExample html={Example20} />

package/dist/docs/api/v6/components/card/react

@@ -0,0 +1,198 @@
+## Examples
+
+### Basic cards
+
+Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
+
+
+import CardBasic from "./CardBasic.tsx?raw"
+
+<LiveExample src={CardBasic} />
+
+### Secondary cards
+
+You can apply secondary background color styling to a card by setting the `variant` property to `secondary`.
+
+
+import CardSecondary from "./CardSecondary.tsx?raw"
+
+<LiveExample src={CardSecondary} />
+
+### Modifiers
+
+You can further modify the styling of the card's content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.
+
+Most modifiers can be used in combination with each other, except for `isCompact` and `isLarge`, since they are contradictory.
+
+
+import CardWithModifiers from "./CardWithModifiers.tsx?raw"
+
+<LiveExample src={CardWithModifiers} />
+
+| Modifier     | Description                                                                          |
+| ------------ | ------------------------------------------------------------------------------------ |
+| isCompact    | Modifies the card to include compact styling. Should not be used with isLarge.       |
+| isLarge      | Modifies the card to be large. Should not be used with isCompact.                    |
+| isFullHeight | Modifies the card so that it fills the total available height of its container.      |
+| isPlain      | Modifies the card to include plain styling, which removes the border and background. |
+
+### Header images and actions
+
+You can include header actions with the `actions` property of `<CardHeader>` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardHeader>` actions.
+
+The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions.
+
+You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example.
+
+Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
+
+
+import CardWithImageAndActions from "./CardWithImageAndActions.tsx?raw"
+
+<LiveExample src={CardWithImageAndActions} />
+
+### Title inline with images and actions
+
+Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.
+
+
+import CardHeaderInCardHead from "./CardHeaderInCardHead.tsx?raw"
+
+<LiveExample src={CardHeaderInCardHead} />
+
+### Card header without title
+
+Card actions can be placed in the card header even without a `<CardTitle>`.
+
+Images can also be placed in the card header without a `<CardTitle>`.
+
+
+import CardOnlyActionsInCardHead from "./CardOnlyActionsInCardHead.tsx?raw"
+
+<LiveExample src={CardOnlyActionsInCardHead} />
+
+### With HTML heading element
+
+You may use the `component` property to place the card's title within an HTML heading element.
+
+
+import CardWithHeadingElement from "./CardWithHeadingElement.tsx?raw"
+
+<LiveExample src={CardWithHeadingElement} />
+
+### With multiple body sections
+
+You may use multiple body sections to visually separate blocks of content.
+
+
+import CardWithMultipleBodySections from "./CardWithMultipleBodySections.tsx?raw"
+
+<LiveExample src={CardWithMultipleBodySections} />
+
+### With a primary body section that fills
+
+`<CardBody>` sections will fill the available height of the card when `isFilled` equals `{true}`, which is the default value. Set `isFilled` to `{false}` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `<CardBody>` section that does not set `isFilled` to `{false}`.
+
+A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card.
+
+
+import CardWithBodySectionFills from "./CardWithBodySectionFills.tsx?raw"
+
+<LiveExample src={CardWithBodySectionFills} />
+
+### Selectable
+
+A selectable card can be selected by clicking anywhere within the card.
+
+You must avoid rendering any other interactive content within the `<Card>` when it is meant to be selectable only. Refer to our [actionable and selectable example](#clickable-and-selectable-cards) if you need a card that is both selectable and has other interactive, actionable content.
+
+
+import CardSelectable from "./CardSelectable.tsx?raw"
+
+<LiveExample src={CardSelectable} />
+
+### Single selectable
+
+When a group of single selectable cards are related, you must pass the same `name` property to each card's `selectableActions` property.
+
+
+import CardSingleSelectable from "./CardSingleSelectable.tsx?raw"
+
+<LiveExample src={CardSingleSelectable} />
+
+### Actionable
+
+An actionable card can perform an action or navigate to a link by clicking anywhere within the card. To open a link in a new tab or window, pass the `isExternalLink` property to `selectableActions`.
+
+You can pass the `isClicked` property to `<Card>` to convey that a card is the currently clicked one, such as when clicking a card would open a [primary-detail view](/patterns/primary-detail). This must not be used simply for "selection" of a card, and you should instead use our [selectable card](#selectable) or [single selectable card](#single-selectable).
+
+When a card is meant to be actionable only, you must avoid rendering any other interactive content within the `<Card>`, similar to selectable cards.
+
+
+import CardClickable from "./CardClickable.tsx?raw"
+
+<LiveExample src={CardClickable} />
+
+### Actionable and selectable
+
+A card can be selectable and have additional interactive content by passing both the `isClickable` and `isSelectable` properties to `<Card>`. The following example shows how the actionable functionality can be rendered anywhere within a selectable card.
+
+When passing interactive content to an actionable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.
+
+
+import CardClickableSelectable from "./CardClickableSelectable.tsx?raw"
+
+<LiveExample src={CardClickableSelectable} />
+
+### Expandable cards
+
+A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.
+
+Place any content that you want to be hidden within the `<CardExpandableContent>` component.
+
+
+import CardExpandable from "./CardExpandable.tsx?raw"
+
+<LiveExample src={CardExpandable} />
+
+### Expandable with icon
+
+An image can be placed in the card header to show users an icon beside the expansion caret.
+
+
+import CardExpandableWithIcon from "./CardExpandableWithIcon.tsx?raw"
+
+<LiveExample src={CardExpandableWithIcon} />
+
+### Card with dividers
+
+Dividers can be placed between sections of the card.
+
+
+import CardWithDividers from "./CardWithDividers.tsx?raw"
+
+<LiveExample src={CardWithDividers} />
+
+## Cards as tiles
+
+Sets of selectable cards can be used as tiles, which are static options that users can select.
+
+They can be either single selectable or multi selectable, by passing the `variant` property to the `selectableActions` object. You can also toggle the visibility of the radio or checkbox by passing the `isHidden` property to the `selectableActions` object.
+
+### Single selectable tiles
+
+To prevent users from selecting more than 1 tile in a set, set `variant` to "single" within the `selectableActions` object of `<CardHeader>`.
+
+
+import CardTile from "./CardTile.tsx?raw"
+
+<LiveExample src={CardTile} />
+
+### Multi selectable tiles
+
+To allow users to select more than 1 tile in a set, do not set `variant` within the `selectableActions` object of `<CardHeader>`.
+
+
+import CardTileMulti from "./CardTileMulti.tsx?raw"
+
+<LiveExample src={CardTileMulti} />

package/dist/docs/api/v6/components/checkbox/html

@@ -0,0 +1,100 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Required
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Checked
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Label wrapping input
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Reversed
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Disabled
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### With description
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### With body
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### With description and body
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Standalone input
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+## Documentation
+
+### Overview
+
+The Check component is provided for use cases outside of forms. If it is used without label text ensure some sort of label for assistive technologies. (for example: `aria-label`)
+
+If you extend this component or modify the styles of this component, then make sure any hover styles defined are applied to the clickable elements, like `<input>` or `<label>` since hover styles are used to convey the clickable target area of an element. To maximize the target area, use the example html where the `<label>` is the wrapping element.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `disabled` | `.pf-v6-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
+| `required` | `.pf-v6-c-check__input` | Indicates that the element is required. |
+| `aria-describedby` | `.pf-v6-c-check__input` |  When using `.pf-v6-c-check__description` make use of this on the input. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-check` | `<div>`, `<label>` |  Initiates the check component. **Required**  |
+| `.pf-v6-c-check__input` | `<input type="checkbox">` |  Initiates a check input. **Required**  |
+| `.pf-v6-c-check__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-v6-c-check__label-required` | `<span>` |  Initiates a required indicator. |
+| `.pf-v6-c-check__description` | `<span>` |  Initiates a check description. |
+| `.pf-v6-c-check__body` | `<span>` |  Initiates a check body. |
+| `.pf-m-standalone` | `.pf-v6-c-check` |  Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-v6-c-check__label` |  Modifies the check component for the disabled state. **Required when input is disabled** |