✨ feat: [email protected] - underline, padding/margin=auto, responsive button

package.json

@@ -97,7 +97,7 @@
     "babel-jest": "26.6.3",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "babel-runtime": "6.26.0",
-    "bulma": "0.9.2",
+    "bulma": "0.9.4",
     "chai": "4.3.4",
     "coveralls": "3.1.0",
     "emotion": "11.0.0",

src/components/button/__test__/__snapshots__/button.test.js.snap

@@ -102,13 +102,27 @@ exports[`Button component Should be a Large Primary Button 1`] = `
 />
 `;
 
+exports[`Button component Should be a Normal Primary Button 1`] = `
+<button
+  className="is-primary is-normal button"
+  tabIndex={0}
+/>
+`;
+
 exports[`Button component Should be a Primary Button 1`] = `
 <button
   className="is-primary button"
   tabIndex={0}
 />
 `;
 
+exports[`Button component Should be a Responsive Primary Button 1`] = `
+<button
+  className="is-primary is-responsive button"
+  tabIndex={0}
+/>
+`;
+
 exports[`Button component Should be a default Button 1`] = `
 <button
   className="button"

src/components/button/__test__/button.test.js

@@ -39,6 +39,14 @@ describe('Button component', () => {
     const component = renderer.create(<Button color="primary" size="large" />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should be a Normal Primary Button', () => {
+    const component = renderer.create(<Button color="primary" size="normal" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should be a Responsive Primary Button', () => {
+    const component = renderer.create(<Button color="primary" responsive />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should render as a static Button', () => {
     const component = renderer.create(<Button isStatic color="primary" />);
     expect(component.toJSON()).toMatchSnapshot();

src/components/button/button.js

@@ -11,6 +11,7 @@ const Button = ({
   renderAs,
   color,
   size,
+  responsive,
   outlined,
   inverted,
   submit,
@@ -58,6 +59,7 @@ const Button = ({
       className={classnames(className, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
+        'is-responsive': responsive,
         'is-selected': isSelected,
         'is-static': isStatic,
         'is-rounded': rounded,
@@ -101,9 +103,10 @@ Button.propTypes = {
     PropTypes.string,
   ]),
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
+  responsive: PropTypes.bool,
   /**
    * Whether Button should have an outline.
    */

src/components/button/button.story.js

@@ -74,7 +74,16 @@ Default.argTypes = {
     },
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
+    },
+  },
+  responsive: {
+    table: {
+      category: 'Button',
+    },
+    description: 'Whether the button should adjust size based on breakpoints',
+    control: {
+      type: 'boolean',
     },
   },
   colorVariant: {

src/components/button/index.d.ts

@@ -1,18 +1,19 @@
-import { BulmaComponent } from '..';
-import { Color, Size } from '..';
+import { BulmaComponent, Color, Size } from '..';
 
 interface ButtonProps {
-  color?: Color
-  | 'ghost'
-  | 'black-bis'
-  | 'black-ter'
-  | 'white-bis'
-  | 'white-ter'
-  | 'grey-darker'
-  | 'grey-dark'
-  | 'grey-light'
-  | 'grey-lighter';
-  size?: Size;
+  color?:
+    | Color
+    | 'ghost'
+    | 'black-bis'
+    | 'black-ter'
+    | 'white-bis'
+    | 'white-ter'
+    | 'grey-darker'
+    | 'grey-dark'
+    | 'grey-light'
+    | 'grey-lighter';
+  size?: Size & 'normal';
+  responsive?: boolean;
   state?: 'hover' | 'focus' | 'active';
   outlined?: boolean;
   inverted?: boolean;
@@ -38,4 +39,4 @@ declare const Button: BulmaComponent<ButtonProps, 'button'> & {
   Group: BulmaComponent<ButtonGroupProps, 'div'>;
 };
 
-export default Button
+export default Button

src/components/content/__test__/__snapshots__/content.test.js.snap

@@ -16,3 +16,20 @@ exports[`Content component Should have content classname 1`] = `
   </p>
 </div>
 `;
+
+exports[`Content component Should have content classname with normal size 1`] = `
+<div
+  className="content is-normal"
+>
+  <p
+    className="bd-notification is-success"
+  >
+    <p>
+      Default
+    </p>
+    <p>
+      Container
+    </p>
+  </p>
+</div>
+`;

src/components/content/__test__/content.test.js

@@ -14,4 +14,15 @@ describe('Content component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should have content classname with normal size', () => {
+    const component = renderer.create(
+      <Content size="normal">
+        <p className="bd-notification is-success">
+          <p>Default</p>
+          <p>Container</p>
+        </p>
+      </Content>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });

src/components/content/content.js

@@ -19,7 +19,7 @@ const Content = ({ children, className, size, ...props }) => {
 
 Content.propTypes = {
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['small', 'medium', 'large']),
+    PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
     PropTypes.string,
   ]),
 };

src/components/content/content.story.js

@@ -164,7 +164,7 @@ Default.argTypes = {
   size: {
     control: {
       type: 'select',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['default', 'small', 'normal', 'medium', 'large'],
     },
   },
 };

src/components/content/index.d.ts

@@ -1,10 +1,9 @@
-import { BulmaComponent } from '..';
-import { Size } from '..';
+import { BulmaComponent, Size } from '..';
 
 interface ContentProps {
-  size?: Size;
+  size?: Size & 'normal';
 }
 
 declare const Content: BulmaComponent<ContentProps, 'div'>;
 
-export default Content;
+export default Content;

src/components/dropdown/__test__/__snapshots__/dropdown.test.js.snap

@@ -12,6 +12,8 @@ exports[`Dropdown component Should appear above the dropdown button 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -59,6 +61,8 @@ exports[`Dropdown component Should be right-aligned when using "right" prop 1`]
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -106,6 +110,8 @@ exports[`Dropdown component Should concat Bulma class with classes in props 1`]
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -150,6 +156,8 @@ exports[`Dropdown component Should have custom inline styles 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -194,6 +202,8 @@ exports[`Dropdown component Should have divider 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -244,6 +254,8 @@ exports[`Dropdown component Should have dropdown classname 1`] = `
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -273,6 +285,8 @@ exports[`Dropdown component Should have dropdown classname 1`] = `
 </div>
 `;
 
+exports[`Dropdown component Should pass specified ID to the menu component 1`] = `ShallowWrapper {}`;
+
 exports[`Dropdown component Should show custom label passed to the label prop 1`] = `
 <div
   className="dropdown"
@@ -283,6 +297,8 @@ exports[`Dropdown component Should show custom label passed to the label prop 1`
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -322,6 +338,8 @@ exports[`Dropdown component Should show the label of the first dropdown item whe
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >
@@ -361,6 +379,8 @@ exports[`Dropdown component should also be right-aligned when using "align" prop
     role="presentation"
   >
     <button
+      aria-controls="dropdown-menu"
+      aria-haspopup={true}
       className="button"
       tabIndex={0}
     >

src/components/element/__test__/__snapshots__/element.test.js.snap

@@ -11,7 +11,7 @@ exports[`Element component Should accept a react Element as renderAs prop 1`] =
 
 exports[`Element component Should have helpers classnames 1`] = `
 <div
-  className="has-text-white is-pulled-left"
+  className="has-text-white is-pulled-left is-underline"
 >
   Facebook
 </div>

src/components/element/__test__/element.test.js

@@ -9,15 +9,15 @@ describe('Element component', () => {
   });
   it('Should have helpers classnames', () => {
     const component = renderer.create(
-      <Element textColor="white" pull="left">
+      <Element textColor="white" pull="left" underline>
         Facebook
       </Element>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should accept a react Element as renderAs prop', () => {
     // eslint-disable-next-line react/prop-types
-    const Custom = props => (
+    const Custom = (props) => (
       <p {...props}>
         Custom
         {props.children}