diff --git a/packages/react/.env.example b/packages/react/.env.example index 4c38847ff57..7c96d265cca 100644 --- a/packages/react/.env.example +++ b/packages/react/.env.example @@ -32,6 +32,7 @@ KALTURA_UICONF_ID= DDS_FLAGS_ALL= DDS_MASTHEAD_L1= DDS_CARD_WITH_PICTOGRAM= +DDS_PROMO_BANNER= # Selenium SELENIUM_HOST= diff --git a/packages/react/src/components/PromoBanner/PromoBanner.js b/packages/react/src/components/PromoBanner/PromoBanner.js new file mode 100644 index 00000000000..b0ea5871b90 --- /dev/null +++ b/packages/react/src/components/PromoBanner/PromoBanner.js @@ -0,0 +1,65 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { DDS_PROMO_BANNER } from '../../internal/FeatureFlags'; +import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings'; +import featureFlag from '@carbon/ibmdotcom-utilities/es/utilities/featureflag/featureflag'; +import LinkWithIcon from '../LinkWithIcon/LinkWithIcon'; +import markdownToHtml from '@carbon/ibmdotcom-utilities/es/utilities/markdownToHtml/markdownToHtml'; +import PropTypes from 'prop-types'; +import React from 'react'; +import settings from 'carbon-components/es/globals/js/settings'; + +const { stablePrefix } = ddsSettings; +const { prefix } = settings; + +const PromoBanner = ({ banner, copy, cta }) => + featureFlag( + DDS_PROMO_BANNER, + banner && copy && cta ? ( +
+
+
{banner}
+
+
+ + {cta.copy} + {cta.icon} + +
+
+
+ ) : null + ); + +PromoBanner.propTypes = { + /** + * The banner positioned on the left side of the section. It is required, otherwise, the section will not render. + */ + banner: PropTypes.node.isRequired, + /** + * The promo-banner description. Enabled for markdown to HTML utility. It is required, otherwise, the section will not render. + */ + copy: PropTypes.string.isRequired, + /** + * Call to Action of the section. See [LinkWithIcon]('../LinkWithIcon/README.stories.mdx'). It is required, otherwise, the section will not render. + */ + cta: PropTypes.shape({ + href: PropTypes.string, + copy: PropTypes.string, + icon: PropTypes.node, + }).isRequired, +}; + +export default PromoBanner; diff --git a/packages/react/src/components/PromoBanner/README.stories.mdx b/packages/react/src/components/PromoBanner/README.stories.mdx new file mode 100644 index 00000000000..ec27ddb87c7 --- /dev/null +++ b/packages/react/src/components/PromoBanner/README.stories.mdx @@ -0,0 +1,104 @@ +import { Props, Description } from '@storybook/addon-docs/blocks'; +import contributing from '../../../../../docs/contributing-license.md'; +import PromoBanner from './PromoBanner'; + +# Promo Banner + +> Use this section to highlight some content in a horizontal orientation. ⚠️ This component is behind a feature flag ⚠️ + +## Getting started + +Here's a quick example to get you started. + +##### CSS + +```css +// yourapplication.scss +@import '@carbon/type/scss/font-face/mono'; +@import '@carbon/type/scss/font-face/sans'; +@include carbon--font-face-mono(); +@include carbon--font-face-sans(); + +@import '@carbon/ibmdotcom-styles/scss/components/promo-banner/index'; +``` + +> 💡 Only import fonts once per usage. Don't forget to import the +> promo-banner styles from +> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/ibm-dotcom-library/blob/master/packages/styles). + +##### JS + +```javascript +import React from 'react'; +import ReactDOM from 'react-dom'; +import { ArrowRight20 } from '@carbon/icons-react'; +import { PromoBanner } from '@carbon/ibmdotcom-react'; +import 'yourapplication.scss'; + +function App() { + const banner = ( + + {'Red_Hat'} + + + + + + ); + const copy = + 'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.'; + const cta = { + icon: + copy: 'External link text', + href: 'https://example.com', + }; + + return ( + + ); +} + +ReactDOM.render(, document.querySelector('#app')); +``` + +## Feature Flag + +This pattern is currently behind a feature flag, in order to use it you'll need +to add the following into your `.env` file. + +``` + DDS_PROMO_BANNER=true +``` + +Add the following line in your `.env` file at the root of your project. +[See more details](https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/styles#usage).. + +``` + SASS_PATH=node_modules:src +``` + +## Props + + + +## Stable selectors + +| Name | Description | +|---------------------------------|-----------------------------------------------------------------| +| `bx--promo-banner` | The section wrapper | +| `bx--promo-banner__row` | Section row (helper for Carbon Grid) | +| `bx--promo-banner__left-column` | Left portion of the section. | +| `bx--promo-banner__content` | Right portion of the section. Wrapper for the copy and the CTA. | +| `bx--promo-banner__copy` | The section description. Enabled for `htmlToMarkdown` utility. | + + diff --git a/packages/react/src/components/PromoBanner/__stories__/PromoBanner.stories.js b/packages/react/src/components/PromoBanner/__stories__/PromoBanner.stories.js new file mode 100644 index 00000000000..bbbd269e90e --- /dev/null +++ b/packages/react/src/components/PromoBanner/__stories__/PromoBanner.stories.js @@ -0,0 +1,64 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { ArrowRight20 } from '@carbon/icons-react'; +import { DDS_PROMO_BANNER } from '../../../internal/FeatureFlags'; +import PromoBanner from '../PromoBanner'; +import React from 'react'; +import Readme from '../README.stories.mdx'; +import { text } from '@storybook/addon-knobs'; + +export default !DDS_PROMO_BANNER + ? undefined + : { + title: 'Components|PromoBanner', + parameters: { + ...Readme.parameters, + knobs: { + PromoBanner: ({ groupId }) => ({ + copy: text( + 'Copy (copy):', + "We've joined forces with Red Hat, but your support provider won't change.", + groupId + ), + cta: { + href: text('Href (cta.href):', 'https://example.com', groupId), + copy: text('CTA copy (cta.copy):', 'Learn more', groupId), + icon: , + }, + }), + }, + }, + }; + +export const Default = !DDS_PROMO_BANNER + ? undefined + : ({ parameters }) => { + const { copy, cta } = parameters?.props?.PromoBanner ?? {}; + + return ( + + {'Red_Hat'} + + + + + + } + copy={copy} + cta={cta} + /> + ); + }; diff --git a/packages/react/src/components/PromoBanner/index.js b/packages/react/src/components/PromoBanner/index.js new file mode 100644 index 00000000000..dc4af5a86c5 --- /dev/null +++ b/packages/react/src/components/PromoBanner/index.js @@ -0,0 +1,8 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export { default as PromoBanner } from './PromoBanner'; diff --git a/packages/react/src/internal/FeatureFlags.js b/packages/react/src/internal/FeatureFlags.js index 93e153c248b..ae4545a2c17 100644 --- a/packages/react/src/internal/FeatureFlags.js +++ b/packages/react/src/internal/FeatureFlags.js @@ -63,3 +63,11 @@ export const DDS_CALLOUT_DATA = */ export const DDS_CONTENTBLOCK_HEADLINES = process.env.DDS_CONTENTBLOCK_HEADLINES === 'true' || DDS_FLAGS_ALL || false; + +/** + * This determines if Promo Banner will be rendered or not + * + * @type {string | boolean} + */ +export const DDS_PROMO_BANNER = + process.env.DDS_PROMO_BANNER === 'true' || DDS_FLAGS_ALL || false; diff --git a/packages/styles/scss/components/promo-banner/index.scss b/packages/styles/scss/components/promo-banner/index.scss new file mode 100644 index 00000000000..ce447b597e3 --- /dev/null +++ b/packages/styles/scss/components/promo-banner/index.scss @@ -0,0 +1,10 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@import '../../globals/imports'; +@import '../link-with-icon/link-with-icon'; +@import './promo-banner'; diff --git a/packages/styles/scss/components/promo-banner/promo-banner.scss b/packages/styles/scss/components/promo-banner/promo-banner.scss new file mode 100644 index 00000000000..a23fb525598 --- /dev/null +++ b/packages/styles/scss/components/promo-banner/promo-banner.scss @@ -0,0 +1,43 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@mixin promo-banner { + .#{$prefix}--promo-banner { + padding-top: $layout-03; + padding-bottom: $layout-05; + @include carbon--make-container; + &__row { + @include carbon--make-row; + } + &__left-column { + margin-bottom: $layout-02; + @include carbon--make-col-ready; + @include carbon--make-col(4, 4); + @include carbon--breakpoint('lg') { + @include carbon--make-col(3, 16); + } + } + &__content { + @include carbon--make-col(4, 4); + @include carbon--make-col-ready; + @include carbon--breakpoint('md') { + @include carbon--make-col(8, 8); + } + @include carbon--breakpoint('lg') { + @include carbon--make-col-offset(1, 16); + @include carbon--make-col(8, 16); + } + } + &__copy { + margin-bottom: $layout-02; + } + } +} + +@include exports('promo-banner') { + @include promo-banner; +} diff --git a/packages/styles/scss/ibm-dotcom-styles.scss b/packages/styles/scss/ibm-dotcom-styles.scss index d38a315f0d7..53e967eb107 100644 --- a/packages/styles/scss/ibm-dotcom-styles.scss +++ b/packages/styles/scss/ibm-dotcom-styles.scss @@ -55,6 +55,7 @@ @import 'components/simplebenefits/simplebenefits'; @import 'components/tableofcontents/tableofcontents'; @import 'components/video-player/video-player'; +@import 'components/promo-banner/index'; // Expressive Theme @import 'themes/expressive/index';