diff --git a/src/components/Button/README.md b/src/components/Button/README.md index 1627276..e1e1476 100644 --- a/src/components/Button/README.md +++ b/src/components/Button/README.md @@ -12,3 +12,8 @@ Different styles: ``` + +Full width: +```js + +``` diff --git a/src/components/Button/__snapshots__/index.spec.js.snap b/src/components/Button/__snapshots__/index.spec.js.snap index 0562b2f..1a03e21 100644 --- a/src/components/Button/__snapshots__/index.spec.js.snap +++ b/src/components/Button/__snapshots__/index.spec.js.snap @@ -11,6 +11,16 @@ exports[`Button renders correctly as link 1`] = ` `; +exports[`Button renders correctly fullwidth button 1`] = ` + +`; + exports[`Button renders correctly with a children 1`] = ` , + ); + expect(component.toJSON()).toMatchSnapshot(); +}); + test('Button renders correctly as link', () => { const component = renderer.create( , diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss index e8f0f72..e0dda66 100644 --- a/src/components/Button/styles.scss +++ b/src/components/Button/styles.scss @@ -5,3 +5,8 @@ // import wds-button @import "~design-system/dist/scss/wds-components/_buttons.scss"; + +.wds-button.wds-is-fullwidth { + box-sizing: border-box; + width: 100%; +}