Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(inlinenotification): re-enable inline links #1231

Merged
merged 1 commit into from
Mar 8, 2022
Merged

fix(inlinenotification): re-enable inline links #1231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/example/src/pages/components/Aside.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ It should only be used within a `<Column>` component with specific parameters.
**Warning:** If you use more than one `<Aside>` component on a single page, you
need to provide an accessibility label so that someone using assistive
technology can quickly understand the purpose of the landmark. See
Mozilla Developer Network’s documentation for more information. Props for accessibility labels are described in the
props below.
[Mozilla Developer Network’s documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role#Labeling_landmarks)
for more information. Props for accessibility labels are described in the
[Props section](#props) below.

</InlineNotification>

Expand Down
3 changes: 2 additions & 1 deletion packages/example/src/pages/components/DoDontExample.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ description: Usage instructions for the DoDontExample component
<InlineNotification kind="warning">

**Warning:** This component will be deprecated in a future release. Please use
the `<DoDontRow>` and `<DoDont>`component instead.
the [DoDontRow](/components/DoDontRow) and [DoDont](/components/DoDontRow)
component instead.

</InlineNotification>

Expand Down
26 changes: 17 additions & 9 deletions packages/example/src/pages/components/InlineNotification.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: Usage instructions for the Inline notification component
<PageDescription>

The `<InlineNotification>` component is used to communicate important
information to a user. For accessibility reasons, `<InlineNotification>` content cannot include interactive elements, just text.
information to a user.

</PageDescription>

Expand All @@ -16,7 +16,8 @@ information to a user. For accessibility reasons, `<InlineNotification>` content

<InlineNotification>

**Lorem ipsum:** dolor sit amet elit. Curabitur ac odio
**Lorem ipsum:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -28,7 +29,8 @@ non vel quam.

<InlineNotification kind="error">

**Error:** dolor sit amet elit. Curabitur ac odio
**Error:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -40,7 +42,8 @@ non vel quam.

<InlineNotification kind="success">

**Success:** dolor sit amet elit. Curabitur ac odio
**Success:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -52,7 +55,8 @@ non vel quam.

<InlineNotification kind="warning">

**Warning:** dolor sit amet, elit. Curabitur ac odio
**Warning:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -67,7 +71,8 @@ non vel quam.

<InlineNotification>

**Lorem ipsum:** dolor sit amet, elit. Curabitur ac odio
**Lorem ipsum:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -79,7 +84,8 @@ non vel quam.

<InlineNotification kind="error">

**Error:** dolor sit amet, elit. Curabitur ac odio
**Error:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -91,7 +97,8 @@ non vel quam.

<InlineNotification kind="success">

**Success:** dolor sit amet, elit. Curabitur ac odio
**Success:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand All @@ -103,7 +110,8 @@ non vel quam.

<InlineNotification kind="warning">

**Warning:** dolor sit amet, elit. Curabitur ac odio
**Warning:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
Expand Down
45 changes: 38 additions & 7 deletions packages/gatsby-theme-carbon/src/components/InlineNotification/InlineNotification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,58 @@ import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { InlineNotification as CarbonInlineNotification } from '@carbon/react';
import {
ErrorFilled,
CheckmarkFilled,
WarningFilled,
InformationFilled,
} from '@carbon/react/icons';
import { Row, Column } from '../Grid';
import useMetadata from '../../util/hooks/useMetadata';

import * as styles from './InlineNotification.module.scss';

const iconTypes = {
error: ErrorFilled,
success: CheckmarkFilled,
warning: WarningFilled,
info: InformationFilled,
};

const InlineNotification = ({ children, className, kind = 'info' }) => {
const { interiorTheme } = useMetadata();
const containerClassName = cx(className, {
[`cds--inline-notification`]: true,
[`cds--inline-notification--low-contrast`]: true,
[`cds--inline-notification--${kind}`]: kind,
[`cds--inline-notification--hide-close-button`]: true,
[styles.darkMode]: interiorTheme === 'dark',
});
const IconForKind = iconTypes[kind];
if (!IconForKind) {
return null;
}

return (
<Row>
<Column
colLg={8}
colMd={6}
className={cx(styles.notification, className)}>
<CarbonInlineNotification
lowContrast
hideCloseButton
kind={kind}
className={interiorTheme === 'dark' && styles.darkMode}>
{children}
</CarbonInlineNotification>
<div className={containerClassName}>
<div className="cds--inline-notification__details">
{IconForKind ? (
<IconForKind className="cds--inline-notification__icon">
<title>{`${kind} icon`}</title>
</IconForKind>
) : null}
<div className="cds--inline-notification__text-wrapper">
<div className="cds--inline-notification__content">
{children}
</div>
</div>
</div>
</div>
</Column>
</Row>
);
Expand Down
4 changes: 2 additions & 2 deletions ...ages/gatsby-theme-carbon/src/components/InlineNotification/InlineNotification.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
margin-top: 0;
}

.notification :global(.cds--inline-notification__subtitle p) {
.notification :global(.cds--inline-notification__content p) {
@include type-style('body-short-01');
}

.notification :global(.cds--inline-notification__subtitle .cds--row) {
.notification :global(.cds--inline-notification__content .cds--row) {
margin: 0;
}

Expand Down