Add ContentWell and FandomContentWell components

components.json

@@ -37,6 +37,13 @@
       "VideoPlayIcon"
     ]
   },
+  {
+    "name": "Design System Flow",
+    "components": [
+      "ContentWell",
+      "FandomContentWell"
+    ]
+  },
   {
     "name": "Other",
     "components": [

src/components/ContentWell/README.md

@@ -0,0 +1,6 @@
+Open this example in the new page to see the difference:
+```js
+<ContentWell>
+	<div style={{width: "100%", height: "100%", background: "#aaa"}}>ContentWell</div>
+</ContentWell>
+```

src/components/ContentWell/__snapshots__/index.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentWell renders correctly with a children 1`] = `
+<div
+  className="wds-content-well "
+>
+  <strong>
+    bold
+  </strong>
+   text
+</div>
+`;
+
+exports[`ContentWell renders correctly with default values 1`] = `
+<div
+  className="wds-content-well "
+/>
+`;
+
+exports[`ContentWell renders correctly with extra class name 1`] = `
+<div
+  className="wds-content-well extra-class-name"
+/>
+`;

src/components/ContentWell/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.scss';
+
+/**
+ * ContentWell wraps `children` in `wds-content-well` CSS mixin.
+ */
+const ContentWell = ({className, children}) => (
+  <div className={`wds-content-well ${className}`}>
+    {children}
+  </div>
+);
+
+ContentWell.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Additional class name
+   */
+  className: PropTypes.string,
+};
+
+ContentWell.defaultProps = {
+  children: null,
+  className: '',
+};
+
+export default ContentWell;

src/components/ContentWell/index.spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import ContentWell from './index';
+
+test('ContentWell renders correctly with default values', () => {
+  const component = renderer.create(
+    <ContentWell />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('ContentWell renders correctly with extra class name', () => {
+  const component = renderer.create(
+    <ContentWell className="extra-class-name" />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('ContentWell renders correctly with a children', () => {
+  const component = renderer.create(
+    <ContentWell>
+      <strong>bold</strong>&nbsp;text
+    </ContentWell>,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/ContentWell/styles.scss

@@ -0,0 +1,6 @@
+@import "~design-system/dist/scss/wds-mixins/index.scss";
+@import "~design-system/dist/scss/wds-variables/index.scss";
+
+.wds-content-well {
+	@include wds-content-well;
+}

src/components/FandomContentWell/README.md

@@ -0,0 +1,6 @@
+Open this example in the new page to see the difference:
+```js
+<FandomContentWell>
+	<div style={{width: "100%", height: "100%", background: "#aaa"}}>FandomContentWell</div>
+</FandomContentWell>
+```

src/components/FandomContentWell/__snapshots__/index.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FandomContentWell renders correctly with a children 1`] = `
+<div
+  className="wds-fandom-content-well "
+>
+  <strong>
+    bold
+  </strong>
+   text
+</div>
+`;
+
+exports[`FandomContentWell renders correctly with default values 1`] = `
+<div
+  className="wds-fandom-content-well "
+/>
+`;
+
+exports[`FandomContentWell renders correctly with extra class name 1`] = `
+<div
+  className="wds-fandom-content-well extra-class-name"
+/>
+`;

src/components/FandomContentWell/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './styles.scss';
+
+/**
+ * FandomContentWell wraps `children` in `wds-content-well($use-xxlarge-breakpoint: false)` CSS mixin.
+ */
+const FandomContentWell = ({className, children}) => (
+  <div className={`wds-fandom-content-well ${className}`}>
+    {children}
+  </div>
+);
+
+FandomContentWell.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Additional class name
+   */
+  className: PropTypes.string,
+};
+
+FandomContentWell.defaultProps = {
+  children: null,
+  className: '',
+};
+
+export default FandomContentWell;

src/components/FandomContentWell/index.spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import FandomContentWell from './index';
+
+test('FandomContentWell renders correctly with default values', () => {
+  const component = renderer.create(
+    <FandomContentWell />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('FandomContentWell renders correctly with extra class name', () => {
+  const component = renderer.create(
+    <FandomContentWell className="extra-class-name" />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('FandomContentWell renders correctly with a children', () => {
+  const component = renderer.create(
+    <FandomContentWell>
+      <strong>bold</strong>&nbsp;text
+    </FandomContentWell>,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/FandomContentWell/styles.scss

@@ -0,0 +1,6 @@
+@import "~design-system/dist/scss/wds-mixins/index.scss";
+@import "~design-system/dist/scss/wds-variables/index.scss";
+
+.wds-fandom-content-well {
+	@include wds-content-well($use-xxlarge-breakpoint: false);
+}

src/components/Fieldset/__snapshots__/index.spec.js.snap

@@ -16,3 +16,9 @@ exports[`Fieldset renders correctly with default values 1`] = `
   className="wds-fieldset "
 />
 `;
+
+exports[`Fieldset renders correctly with extra class name 1`] = `
+<div
+  className="wds-fieldset extra-class-name"
+/>
+`;

src/components/Fieldset/index.spec.js

@@ -3,15 +3,20 @@ import renderer from 'react-test-renderer';
 
 import Fieldset from './index';
 
-/* eslint-disable no-alert */
-
 test('Fieldset renders correctly with default values', () => {
   const component = renderer.create(
     <Fieldset />,
   );
   expect(component.toJSON()).toMatchSnapshot();
 });
 
+test('Fieldset renders correctly with extra class name', () => {
+  const component = renderer.create(
+    <Fieldset className="extra-class-name" />,
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
 test('Fieldset renders correctly with a children', () => {
   const component = renderer.create(
     <Fieldset>

src/index.js

@@ -7,6 +7,9 @@ export {default as Spinner} from './components/Spinner';
 export {default as BannerNotifications} from './components/BannerNotifications';
 // Icons
 export {default as VideoPlayIcon} from './components/VideoPlayIcon';
+// Usefull flow components
+export {default as ContentWell} from './components/ContentWell';
+export {default as FandomContentWell} from './components/FandomContentWell';
 // Other UI
 export {default as ExpandableText} from './components/ExpandableText';
 export {default as Vignette} from './components/Vignette';