diff --git a/content/components/banner.mdx b/content/components/banner.mdx index 2dcbbae50..e4e8cfe6a 100644 --- a/content/components/banner.mdx +++ b/content/components/banner.mdx @@ -3,7 +3,7 @@ title: Banner description: Banner is used to highlight important information. componentId: banner reactId: banner -railsIds: +railsIds: - Primer::Alpha::Banner tags: - flash, alert, notification @@ -13,20 +13,23 @@ import {Box} from '@primer/react' import ComponentLayout from '~/src/layouts/component-layout' export default ComponentLayout import {AccessibilityLink} from '~/src/components/accessibility-link' +import {FigmaImage} from '~/src/components/figma-image' -Image displaying each variant of banner, from top: critical, warning, success, info, upsell. ## Usage Banner can be used in one of two ways: + 1. To highlight prominent information on a page. 2. To communicate feedback in response to a user action. ### Best practices + Use banners sparingly and only when necessary. Banners can disrupt the user experience and should only be used when and where relevant. Keep the message concise and direct. Don't use heading styling or multiple type sizes in banners, rely on the default paragraph size and use the title when appropriate. @@ -35,10 +38,10 @@ Don't show more than one banner at a time. For more information, see this articl ## Anatomy -Anatomy of a banner, including the message, title, icon, dismiss button, primary, and secondary action ## Options @@ -46,6 +49,7 @@ Don't show more than one banner at a time. For more information, see this articl ### Variant #### Critical + -Use critical banners to signal critical errors, system failures, or necessary destructive actions. Examples: form validation error summary, repo deletion confirmations. -Text within a box that has a light red outline and a lighter red background. There is a vibrant red stop icon with an exclamation point inside that comes before the text within the banner. + Use critical banners to signal critical errors, system failures, or necessary destructive actions. Examples: form + validation error summary, repo deletion confirmations. + Text within a box that has a light red outline and a lighter red background. There is a vibrant red stop icon with an exclamation point inside that comes before the text within the banner. #### Warning @@ -70,12 +75,13 @@ Use critical banners to signal critical errors, system failures, or necessary de flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 4}} > -Use warning banners to alert users about potential issues or impactful changes. For example possible connectivity concerns or hidden items due to active filters. -Text within a box that has a yellow outline and a lighter yellow background. There is a dark yellow triangle icon with an exclamation point inside that comes before the text within the banner. + Use warning banners to alert users about potential issues or impactful changes. For example possible connectivity + concerns or hidden items due to active filters. + Text within a box that has a yellow outline and a lighter yellow background. There is a dark yellow triangle icon with an exclamation point inside that comes before the text within the banner. #### Success @@ -87,12 +93,13 @@ Use warning banners to alert users about potential issues or impactful changes. flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 4}} > -Use success banners to indicate task completion or successful actions. For example, a successful issue transfer when the user is not brought to the new page. Only use success messages if the success is not easily apparent in the UI. -Text within a box that has a green outline and a lighter green background. There is a vibrant green circle icon with a check icon inside the circle that comes before the text within the banner. + Use success banners to indicate task completion or successful actions. For example, a successful issue transfer when + the user is not brought to the new page. Only use success messages if the success is not easily apparent in the UI. + Text within a box that has a green outline and a lighter green background. There is a vibrant green circle icon with a check icon inside the circle that comes before the text within the banner. #### Info @@ -104,15 +111,15 @@ Use success banners to indicate task completion or successful actions. For examp flexDirection={['column', 'column', 'column', 'column', 'row']} sx={{gap: 4}} > -Use info banners to inform about non-critical context and information. For example feature prompts or ongoing processes. -Text within a box that has a light blue outline and a lighter blue background. There is a vibrant blue circle icon with the letter i inside that comes before the text within the banner. + Use info banners to inform about non-critical context and information. For example feature prompts or ongoing + processes. + Text within a box that has a light blue outline and a lighter blue background. There is a vibrant blue circle icon with the letter i inside that comes before the text within the banner. - #### Upsell
- Use a title to concisely present the topic of the banner when the message of the banner is complex and too long to scan. +Use a title to concisely present the topic of the banner when the message of the banner is complex and too long to scan. - A title is required and will be used as a semantic page heading. However, you can visually hide the title. It is recommended to hide the title if the body of the banner is short and easily scannable. +A title is required and will be used as a semantic page heading. However, you can visually hide the title. It is recommended to hide the title if the body of the banner is short and easily scannable. - Use the built-in accessibility annotations in the Figma components to define the heading level and text relevant to its context. +Use the built-in accessibility annotations in the Figma components to define the heading level and text relevant to its context.
-
  • If you're on a page in which you can do other tasks, and the banner is not blocking / does not have to be addressed, then you should be able to have a close button.
    • -
  • If accidental closure of the banner would leave the user confused or missing something critical, it should not have a close button.
    • +
  • + If you're on a page in which you can do other tasks, and the banner is not blocking / does not have to be addressed, + then you should be able to have a close button. +
    • +
  • + If accidental closure of the banner would leave the user confused or missing something critical, it should not have + a close button. +
    • @@ -200,9 +213,9 @@ Use the following as a guideline: >
    - Critical banners can't be dismissable. They are mostly used for errors which need to be resolved. As a result you can only get rid of a critical banner by resolving the error. If used to warn about destructive actions, the banner should also not be dismissable. +Critical banners can't be dismissable. They are mostly used for errors which need to be resolved. As a result you can only get rid of a critical banner by resolving the error. If used to warn about destructive actions, the banner should also not be dismissable. - If the error must be resolved on a different page, use an action that directs the user to the page where the error can be resolved. +If the error must be resolved on a different page, use an action that directs the user to the page where the error can be resolved.
    @@ -225,11 +238,11 @@ Use the following as a guideline: >
    - A maximum of 2 actions can be added to a banner. Whenever possible it is recommended to only add a single action to better direct the users attention. +A maximum of 2 actions can be added to a banner. Whenever possible it is recommended to only add a single action to better direct the users attention. - For banners with a single action, you can choose between adding a primary or secondary action depending on how much attention you want to draw to the action. +For banners with a single action, you can choose between adding a primary or secondary action depending on how much attention you want to draw to the action. - For banners with two actions, one of them must be primary and the other must be secondary. In this case, use the primary action for the recommended action. For example, the primary action enables a feature and the secondary action links more information. +For banners with two actions, one of them must be primary and the other must be secondary. In this case, use the primary action for the recommended action. For example, the primary action enables a feature and the secondary action links more information.
    Three banners with leading icons. Success banner has its standard circle and check icon, upsell banner has a custom computer icon, and the info banner has a custom shield icon with a keyhole inside of the lock. +Three banners with leading icons. Success banner has its standard circle and check icon, upsell banner has a custom computer icon, and the info banner has a custom shield icon with a keyhole inside of the lock.     - ## Layouts - + + The internal banner layout changes for large banners depending on its content. @@ -275,6 +284,7 @@ The internal banner layout changes for large banners depending on its content. 4. A banner with a title, a dismiss button and one or two actions has the dismiss button aligned to the top right corner and the actions below the content aligned to the left ### Responsive Design + One banner at full width, with all of the content in one row, the second banner is shrunk to a smaller width, the icon, wrapped text, and dismiss button all in one row, with the action item in the second row. + diff --git a/content/images/figma/GCvY3Qv8czRgZgvl1dG6lp-37174-89080.png b/content/images/figma/GCvY3Qv8czRgZgvl1dG6lp-37174-89080.png new file mode 100644 index 000000000..38bd98a00 Binary files /dev/null and b/content/images/figma/GCvY3Qv8czRgZgvl1dG6lp-37174-89080.png differ diff --git a/content/images/figma/GCvY3Qv8czRgZgvl1dG6lp-37174-89086.png b/content/images/figma/GCvY3Qv8czRgZgvl1dG6lp-37174-89086.png new file mode 100644 index 000000000..4702ae234 Binary files /dev/null and b/content/images/figma/GCvY3Qv8czRgZgvl1dG6lp-37174-89086.png differ diff --git a/src/components/figma-image.tsx b/src/components/figma-image.tsx new file mode 100644 index 000000000..bab175f40 --- /dev/null +++ b/src/components/figma-image.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {parseFigmaNodeUrl} from '@primer/figma-images/src/utils'; +import { Link, StyledOcticon } from '@primer/react'; +import {PencilIcon} from '@primer/octicons-react' + +type FigmaImageProps = React.ImgHTMLAttributes & { + src: string + caption?: string +} + +const cssStyles = { + width: "100%", + maxWidth: "100%", + margin: "0", + "& img": { + width: '100%' + } +} + +const FigmaImageDir = '/images/figma'; + +export const FigmaImage: React.FC = ({src, caption, ...props}) => { + // check for missing prop + if(src === undefined) throw new Error("src is required on FigmaImage component"); + // get real image url + const {nodeId, fileId} = parseFigmaNodeUrl(src); + const imagePath = `${FigmaImageDir}/${fileId}-${nodeId}.png` + // return image component + return (
    + +
    + {caption} + Edit in Figma +
    +
    ) +} \ No newline at end of file