@comicrelief/component-library 8.6.2 → 8.8.0

package/dist/components/Atoms/Button/Button.js

@@ -12,7 +12,7 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 const StyledButton = _styledComponents.default.button.withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1gm5vj0-0"
-})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:auto;}@media ", "{width:auto;padding:", " ", ";margin:0 auto ", ";}"], _ref => {
+})(["display:inline-flex;position:relative;padding:0.5rem 1.25rem;text-decoration:none;font-weight:700;font-size:", ";border-radius:2rem;transition:all 0.3s;height:3.125rem;width:100%;justify-content:center;align-items:center;border:none;cursor:pointer;> a{text-decoration:none;}", ";@media ", "{width:", ";}@media ", "{width:", ";padding:", " ", ";margin:0 auto ", ";}"], _ref => {
   let {
     theme
   } = _ref;
@@ -30,23 +30,37 @@ const StyledButton = _styledComponents.default.button.withConfig({
   return theme.allBreakpoints('M');
 }, _ref4 => {
   let {
-    theme
+    fullWidth
   } = _ref4;
+  return fullWidth ? '100%' : 'auto';
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.allBreakpoints('L');
+}, _ref6 => {
+  let {
+    fullWidth
+  } = _ref6;
+  return fullWidth ? '100%' : 'auto';
 }, (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
-const Button = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     children,
     wrapper = false,
+    fullWidth = false,
     ...rest
-  } = _ref5;
+  } = _ref7;
   return /*#__PURE__*/_react.default.createElement(StyledButton, Object.assign({}, rest, {
     as: wrapper ? 'span' : 'button',
-    ref: ref
+    ref: ref,
+    fullWidth: fullWidth
   }), children);
 });
 Button.propTypes = {
   children: _propTypes.default.node.isRequired,
-  wrapper: _propTypes.default.bool // Buttons as span
+  wrapper: _propTypes.default.bool,
+  // Buttons as span
+  fullWidth: _propTypes.default.bool
 };
 var _default = exports.default = Button;

package/dist/components/Atoms/Button/Button.md

@@ -5,3 +5,7 @@
 ```js
 <Button wrapper>My button as a span</Button>
 ```
+
+```js
+<Button type="button" fullWidth>Full-width button</Button>
+```

package/dist/components/Molecules/Accordion/Accordion.js

@@ -43,19 +43,21 @@ const Copy = _styledComponents.default.div.withConfig({
   return theme.allBreakpoints('M');
 }, (0, _spacing.default)('lg'), _ref4 => {
   let {
-    isOpen
+    isOpen,
+    contentBottomPadding
   } = _ref4;
-  return isOpen && (0, _styledComponents.css)(["height:auto;visibility:visible;transition:all 0.2s cubic-bezier(0.21,1.7,0.83,0.68) 0s;padding:0 ", " ", ";@media ", "{padding:0 ", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref5 => {
+  return isOpen && (0, _styledComponents.css)(["height:auto;visibility:visible;transition:all 0.2s cubic-bezier(0.21,1.7,0.83,0.68) 0s;padding:0 ", " ", ";@media ", "{padding:0 ", " ", ";}"], (0, _spacing.default)('lg'), contentBottomPadding || (0, _spacing.default)('l'), _ref5 => {
     let {
       theme
     } = _ref5;
     return theme.allBreakpoints('M');
-  }, (0, _spacing.default)('lg'), (0, _spacing.default)('l'));
+  }, (0, _spacing.default)('lg'), contentBottomPadding || (0, _spacing.default)('l'));
 });
 const Accordion = _ref6 => {
   let {
     children,
     title,
+    contentBottomPadding,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -71,7 +73,8 @@ const Accordion = _ref6 => {
     colour: "black",
     direction: isOpen ? 'up' : 'down'
   }))), /*#__PURE__*/_react.default.createElement(Copy, {
-    isOpen: isOpen
+    isOpen: isOpen,
+    contentBottomPadding: contentBottomPadding
   }, children));
 };
 var _default = exports.default = Accordion;

package/dist/components/Molecules/Accordion/Accordion.md

@@ -13,3 +13,18 @@ import Text from '../../Atoms/Text/Text';
  <Text tag="p">Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information</Text>
 </Accordion>
 ```
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<Accordion
+  contentBottomPadding="15px"
+  title={
+    <Text family="Anton" size="l" uppercase>
+      I am the title
+    </Text>
+  }
+  >
+ <Text tag="p">Customised bottom padding here!</Text>
+</Accordion>
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.6.2",
+  "version": "8.8.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/playwright/components/molecules/accordian.spec.js

@@ -2,18 +2,17 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('accordian component', () => {
   test('accordian', async ({ page, context }) => {
-
     await page.goto('/#accordion');
 
     // accordian elements should be visible
     await expect(page.locator('[data-testid="Accordion-example-1"]')).toBeVisible();
-    await expect(page.locator('[data-preview="Accordion"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Accordion-example-1"] [data-preview="Accordion"]')).toBeVisible();
     // dropdown svg icon should be visible
-    await expect(page.locator('[data-preview="Accordion"] svg')).toBeVisible();
+    await expect(page.locator('[data-testid="Accordion-example-1"] [data-preview="Accordion"] svg')).toBeVisible();
 
     // clicking the accordian should show the paragraph
-    await page.locator('[data-preview="Accordion"] svg').click();
-    await expect(page.locator('[data-preview="Accordion"] p')).toBeVisible();
+    await page.locator('[data-testid="Accordion-example-1"] [data-preview="Accordion"] svg').click();
+    await expect(page.locator('[data-testid="Accordion-example-1"] [data-preview="Accordion"] p')).toBeVisible();
 
     await page.close();
   });

package/src/components/Atoms/Button/Button.js

@@ -22,26 +22,30 @@ const StyledButton = styled.button`
     text-decoration: none;
   }
   ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+
   @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
   }
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     padding: ${spacing('md')} ${spacing('l')};
     margin: 0 auto ${spacing('l')};
   }
 `;
 
-const Button = React.forwardRef(({ children, wrapper = false, ...rest }, ref) => (
-  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref}>
+const Button = React.forwardRef(({
+  children, wrapper = false, fullWidth = false, ...rest
+}, ref) => (
+  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} fullWidth={fullWidth}>
     {children}
   </StyledButton>
 ));
 
 Button.propTypes = {
   children: PropTypes.node.isRequired,
-  wrapper: PropTypes.bool // Buttons as span
+  wrapper: PropTypes.bool, // Buttons as span
+  fullWidth: PropTypes.bool
 };
 
 export default Button;

package/src/components/Atoms/Button/Button.md

@@ -5,3 +5,7 @@
 ```js
 <Button wrapper>My button as a span</Button>
 ```
+
+```js
+<Button type="button" fullWidth>Full-width button</Button>
+```

package/src/components/Molecules/Accordion/Accordion.js

@@ -60,20 +60,20 @@ const Copy = styled.div`
     padding: 0 ${spacing('lg')};
   }
 
-  ${({ isOpen }) => (isOpen && css`
+  ${({ isOpen, contentBottomPadding }) => (isOpen && css`
     height: auto;
     visibility: visible;
     transition: all 0.2s cubic-bezier(0.21, 1.7, 0.83, 0.68) 0s;
-    padding: 0 ${spacing('l')} ${spacing('l')};
+    padding: 0 ${spacing('lg')} ${contentBottomPadding || spacing('l')};
 
     @media ${({ theme }) => theme.allBreakpoints('M')} {
-      padding: 0 ${spacing('lg')} ${spacing('l')};
+      padding: 0 ${spacing('lg')} ${contentBottomPadding || spacing('l')};
     }
   `)}
 `;
 
 const Accordion = ({
-  children, title, ...rest
+  children, title, contentBottomPadding, ...rest
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -89,7 +89,7 @@ const Accordion = ({
           <Chevron colour="black" direction={isOpen ? 'up' : 'down'} />
         </Icon>
       </Button>
-      <Copy isOpen={isOpen}>
+      <Copy isOpen={isOpen} contentBottomPadding={contentBottomPadding}>
         {children}
       </Copy>
     </Container>
@@ -97,6 +97,7 @@ const Accordion = ({
 };
 
 Accordion.propTypes = {
+  contentBottomPadding: PropTypes.string,
   children: PropTypes.node.isRequired,
   title: PropTypes.oneOfType([
     PropTypes.string,

package/src/components/Molecules/Accordion/Accordion.md

@@ -13,3 +13,18 @@ import Text from '../../Atoms/Text/Text';
  <Text tag="p">Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information</Text>
 </Accordion>
 ```
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<Accordion
+  contentBottomPadding="15px"
+  title={
+    <Text family="Anton" size="l" uppercase>
+      I am the title
+    </Text>
+  }
+  >
+ <Text tag="p">Customised bottom padding here!</Text>
+</Accordion>
+```