Feature/expander title checkbox

.styleguidist/styleguidist.sections.js

@@ -114,6 +114,7 @@ module.exports = {
                 'Expander/Expander',
                 'ExpanderGroup/ExpanderGroup',
                 'ExpanderTitle/ExpanderTitle',
+                'ExpanderTitleButton/ExpanderTitleButton',
                 'ExpanderContent/ExpanderContent',
               ]),
             },

package.json

@@ -46,7 +46,7 @@
     "test:updatesnapshots": "tsdx test --u",
     "lint": "npm-run-all lint:tsdx-lint lint:stylelint",
     "lint:tsdx-lint": "tsdx lint src",
-    "lint:stylelint": "stylelint ./src/**/*.{ts,tsx}",
+    "lint:stylelint": "stylelint \"./src/**/*.{ts,tsx}\"",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "prettier:check": "prettier-check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "validate": "npm-run-all test lint prettier:check",

src/core/Expander/Expander/Expander.baseStyles.tsx

@@ -17,7 +17,6 @@ export const baseStyles = withSuomifiTheme(
       display: block;
       width: 100%;
       max-width: 100%;
-      overflow: hidden;
 
       &:before {
         background-color: ${theme.colors.highlightLight4};

src/core/Expander/Expander/Expander.md

@@ -11,6 +11,25 @@ import {
 </Expander>;
 ```
 
+```jsx
+import {
+  Expander,
+  ExpanderTitle,
+  ExpanderContent,
+  Checkbox
+} from 'suomifi-ui-components';
+
+<Expander className="expander-test" defaultOpen={true}>
+  <ExpanderTitle
+    ariaOpenText="open expander"
+    ariaCloseText="close expander"
+  >
+    <Checkbox hintText="Checkbox hint text">Checkbox label</Checkbox>
+  </ExpanderTitle>
+  <ExpanderContent>Test expander</ExpanderContent>
+</Expander>;
+```
+
 ```jsx
 import {
   Expander,
@@ -59,16 +78,7 @@ const [expanderThreeOpen, setExpanderThreeOpen] = React.useState(
   false
 );
 
-const [showExpander, setShowExpander] = React.useState(false);
-
 <>
-  <button
-    onClick={() => {
-      setShowExpander(!showExpander);
-    }}
-  >
-    {showExpander ? 'Hide' : 'Show'}
-  </button>
   <ExpanderGroup
     OpenAllText="Open all"
     AriaOpenAllText="Open all expanders"
@@ -83,12 +93,6 @@ const [showExpander, setShowExpander] = React.useState(false);
       <ExpanderTitleButton>Test expander 2</ExpanderTitleButton>
       <ExpanderContent>Test expander content 2</ExpanderContent>
     </Expander>
-    {!!showExpander && (
-      <Expander>
-        <ExpanderTitleButton>Test expander X</ExpanderTitleButton>
-        <ExpanderContent>Test expander content X</ExpanderContent>
-      </Expander>
-    )}
     <Expander
       open={expanderThreeOpen}
       onOpenChange={(open) => {

src/core/Expander/Expander/Expander.test.tsx

@@ -55,33 +55,6 @@ describe('Basic expander', () => {
   it('should not have basic accessibility issues', axeTest(TestExpander));
 });
 
-describe('ExpanderTitleButton Aria attributes', () => {
-  const TestExpanderWithProps = (titleProps: ExpanderTitleButtonProps) => {
-    return (
-      <Expander className="expander-test">
-        <ExpanderTitleButton
-          {...titleProps}
-          {...{ 'data-testid': 'expander-title' }}
-        />
-        <ExpanderContent>Test expander content</ExpanderContent>
-      </Expander>
-    );
-  };
-
-  it('should be passed to title button', () => {
-    const TestExpander = TestExpanderWithProps({
-      ariaCloseText: 'click to close expander',
-      ariaOpenText: 'click to open expander',
-      children: 'Test expander',
-    });
-    const { getByText, getByRole } = render(TestExpander);
-    const button = getByRole('button');
-    expect(getByText('click to open expander')).toBeTruthy();
-    fireEvent.click(button);
-    expect(getByText('click to close expander')).toBeTruthy();
-  });
-});
-
 describe('Custom id', () => {
   const ExpanderWithCustomId = (
     <Expander id="test-id" {...{ 'data-testid': 'expander-custom-id' }}>
@@ -101,18 +74,6 @@ describe('Custom id', () => {
     const div = getByTestId('expander-custom-id');
     expect(div).toHaveAttribute('id', 'test-id');
   });
-
-  it('is passed on to title', () => {
-    const { getByTestId } = render(ExpanderWithCustomId);
-    const div = getByTestId('expander-custom-id-title');
-    expect(div).toHaveAttribute('id', 'test-id_title');
-  });
-
-  it('is passed on to content', () => {
-    const { getByTestId } = render(ExpanderWithCustomId);
-    const div = getByTestId('expander-custom-id-content');
-    expect(div).toHaveAttribute('id', 'test-id_content');
-  });
 });
 
 describe('defaultOpen', () => {
@@ -127,15 +88,6 @@ describe('defaultOpen', () => {
     </Expander>
   );
 
-  it('gives the classname to expander title and icon', () => {
-    const { getByTestId } = render(DefaultOpenExpander());
-    const div = getByTestId('expander-open-by-default-title');
-    expect(div).toHaveClass('fi-expander_title--open');
-    expect(div.querySelector('svg')).toHaveClass(
-      'fi-expander_title-icon--open',
-    );
-  });
-
   it('classnames will be removed when clicked', () => {
     const mockClickHandler = jest.fn();
     const { getByTestId, getByRole } = render(
@@ -144,11 +96,8 @@ describe('defaultOpen', () => {
     const buttonToClick = getByRole('button');
     const titleDiv = getByTestId('expander-open-by-default-title');
     fireEvent.click(buttonToClick);
-    expect(titleDiv).toHaveClass('fi-expander_title');
-    expect(titleDiv).not.toHaveClass('fi-expander_title--open');
-    expect(buttonToClick.querySelector('svg')).not.toHaveClass(
-      'fi-expander_title-icon--open',
-    );
+    expect(titleDiv).toHaveClass('fi-expander_title-button');
+    expect(titleDiv).not.toHaveClass('fi-expander_title-button--open');
   });
 });
 
@@ -180,11 +129,7 @@ describe('open', () => {
   it('open-classnames should be found ', async () => {
     const { getByTestId } = render(ControlledExpander());
     const div = getByTestId('expander-title-id');
-    expect(div).toHaveClass('fi-expander_title--open');
-
-    expect(div.querySelector('svg')).toHaveClass(
-      'fi-expander_title-icon--open',
-    );
+    expect(div).toHaveClass('fi-expander_title-button--open');
   });
 
   it('is clicked. Should not change as it is controlled outside', async () => {
@@ -196,10 +141,6 @@ describe('open', () => {
     fireEvent.click(button);
     expect(mockClickHandler).toHaveBeenCalledTimes(1);
     const div = getByTestId('expander-title-id');
-    expect(div).toHaveClass('fi-expander_title--open');
-
-    expect(button.querySelector('svg')).toHaveClass(
-      'fi-expander_title-icon--open',
-    );
+    expect(div).toHaveClass('fi-expander_title-button--open');
   });
 });

src/core/Expander/Expander/Expander.tsx

@@ -222,4 +222,4 @@ export class Expander extends Component<ExpanderProps> {
   }
 }
 
-export { ExpanderConsumer };
+export { ExpanderConsumer, ExpanderProvider };

src/core/Expander/Expander/__snapshots__/Expander.test.tsx.snap

@@ -132,7 +132,6 @@ exports[`Basic expander shoud match snapshot 1`] = `
   display: block;
   width: 100%;
   max-width: 100%;
-  overflow: hidden;
 }
 
 .c1:before {
@@ -156,6 +155,7 @@ exports[`Basic expander shoud match snapshot 1`] = `
   line-height: 1.5;
   font-weight: 400;
   background-color: hsl(0,0%,100%);
+  border-radius: inherit;
   position: relative;
   visibility: hidden;
   display: block;
@@ -181,6 +181,8 @@ exports[`Basic expander shoud match snapshot 1`] = `
   visibility: visible;
   height: 10%;
   overflow: visible;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   -webkit-animation: fi-expander_content-anim 50ms cubic-bezier(0.28,0.84,0.42,1) 1 forwards;
   animation: fi-expander_content-anim 50ms cubic-bezier(0.28,0.84,0.42,1) 1 forwards;
 }
@@ -205,13 +207,16 @@ exports[`Basic expander shoud match snapshot 1`] = `
   max-width: 100%;
   min-height: 60px;
   background-color: hsl(212,63%,98%);
+  border-radius: inherit;
 }
 
-.c2.fi-expander_title--open {
+.c2.fi-expander_title-button--open {
   background-color: hsl(0,0%,100%);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.c2 .fi-expander_title-button {
+.c2 .fi-expander_title-button_button {
   color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -241,27 +246,27 @@ exports[`Basic expander shoud match snapshot 1`] = `
   font-size: 18px;
   line-height: 1.5;
   font-weight: 400;
-  color: hsl(212,63%,45%);
-  display: block;
   font-size: font-family:'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
   font-size: 18px;
   line-height: 1.5;
   font-weight: 600;
+  color: hsl(212,63%,45%);
+  display: inline-block;
   width: 100%;
   max-width: 100%;
   min-height: 60px;
   padding: 17px 60px 16px 20px;
 }
 
-.c2 .fi-expander_title-button:focus {
+.c2 .fi-expander_title-button_button:focus {
   outline: 0;
 }
 
-.c2 .fi-expander_title-button:focus-within {
+.c2 .fi-expander_title-button_button:focus-within {
   outline: 0;
 }
 
-.c2 .fi-expander_title-button:focus-within:after {
+.c2 .fi-expander_title-button_button:focus-within:after {
   content: '';
   position: absolute;
   pointer-events: none;
@@ -277,37 +282,36 @@ exports[`Basic expander shoud match snapshot 1`] = `
   z-index: 9999;
 }
 
-.c2 .fi-expander_title-button:not(:focus-visible) {
+.c2 .fi-expander_title-button_button:not(:focus-visible) {
   outline: 0;
 }
 
-.c2 .fi-expander_title-button:not(:focus-visible):after {
+.c2 .fi-expander_title-button_button:not(:focus-visible):after {
   content: none;
 }
 
-.c2 .fi-expander_title-button,
-.c2 .fi-expander_title-button * {
+.c2 .fi-expander_title-button_button * {
   cursor: pointer;
 }
 
-.c2 .fi-expander_title-button:hover,
-.c2 .fi-expander_title-button:active,
-.c2 .fi-expander_title-button:focus,
-.c2 .fi-expander_title-button:focus-within {
+.c2 .fi-expander_title-button_button:hover,
+.c2 .fi-expander_title-button_button:active,
+.c2 .fi-expander_title-button_button:focus,
+.c2 .fi-expander_title-button_button:focus-within {
   cursor: pointer;
 }
 
-.c2 .fi-expander_title-icon {
+.c2 .fi-expander_title-button-icon {
   position: absolute;
-  height: 20px;
-  width: 20px;
   top: 0;
   right: 0;
+  height: 20px;
+  width: 20px;
   margin: 20px;
 }
 
-.c2 .fi-expander_title--open .fi-expander_title-icon,
-.c2 .fi-expander_title-icon--open {
+.c2 .fi-expander_title-button--open .fi-expander_title-button-icon,
+.c2 .fi-expander_title-button-icon--open {
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
@@ -318,13 +322,13 @@ exports[`Basic expander shoud match snapshot 1`] = `
   id="4"
 >
   <div
-    class="c0 c2 fi-expander_title"
+    class="c0 c2 fi-expander_title-button"
     data-testid="expander-title"
   >
     <button
       aria-controls="4_content"
       aria-expanded="false"
-      class="c3 fi-expander_title-button"
+      class="c3 fi-expander_title-button_button"
       id="4_title"
       type="button"
     >
@@ -336,7 +340,7 @@ exports[`Basic expander shoud match snapshot 1`] = `
       </span>
       <svg
         aria-hidden="true"
-        class="fi-icon c6 fi-expander_title-icon"
+        class="fi-icon c6 fi-expander_title-button-icon"
         fill="currentColor"
         focusable="false"
         height="1em"
@@ -354,6 +358,7 @@ exports[`Basic expander shoud match snapshot 1`] = `
     aria-labelledby="4_title"
     class="c0 c7 fi-expander_content"
     id="4_content"
+    role="region"
   >
     Test expander content
   </div>

src/core/Expander/ExpanderContent/ExpanderContent.baseStyles.tsx

@@ -11,24 +11,30 @@ export const baseStyles = withSuomifiTheme(
       ${element({ theme })}
       ${font({ theme })('bodyText')}
       background-color: ${theme.colors.whiteBase};
+      border-radius: inherit;
       position: relative;
       visibility: hidden;
       display: block;
       height: 0;
       overflow: hidden;
       word-break: break-word;
+
       transform: scaleY(0);
       transform-origin: top;
       transition: all ${`${theme.transitions.basicTime}
         ${theme.transitions.basicTimingFunction}`};
       will-change: transition, height;
+
       &:not(.fi-expander_content--no-padding) {
         padding: 0 ${theme.spacing.insetXl};
       }
+
       &.fi-expander_content--open {
         visibility: visible;
         height: 10%;
         overflow: visible;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
         /* This is very robust - cannot animate dynamic height with height-definition */
         animation: fi-expander_content-anim ${theme.transitions.basicTime}
           ${theme.transitions.basicTimingFunction} 1 forwards;