diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Noncollapsible.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Noncollapsible.png
new file mode 100644
index 0000000000..2cae3afec4
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Noncollapsible.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Without_Title.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Without_Title.png
new file mode 100644
index 0000000000..bec3451dbe
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Without_Title.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Noncollapsible.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Noncollapsible.png
new file mode 100644
index 0000000000..d43001fb1f
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Noncollapsible.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Without_Title.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Without_Title.png
new file mode 100644
index 0000000000..f019e0de51
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Without_Title.png differ
diff --git a/packages/fuselage/.storybook/jest-results.json b/packages/fuselage/.storybook/jest-results.json
index 57868f097a..d300349c76 100644
--- a/packages/fuselage/.storybook/jest-results.json
+++ b/packages/fuselage/.storybook/jest-results.json
@@ -1 +1 @@
-{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":27,"numPassedTests":33,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":27,"numTotalTests":33,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1571350165296,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169217,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Text/spec.js","startTime":1571350167721,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169242,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Headline/spec.js","startTime":1571350167725,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169411,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Paragraph/spec.js","startTime":1571350167743,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169455,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Subtitle/spec.js","startTime":1571350167749,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169462,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/InputBox/spec.js","startTime":1571350167721,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169485,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/TelephoneInput/spec.js","startTime":1571350167744,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Accordion.Item"],"failureMessages":[],"fullName":"Accordion.Item renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350169461,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Accordion/spec.js","startTime":1571350167721,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170049,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/SearchInput/spec.js","startTime":1571350169366,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170096,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Callout/spec.js","startTime":1571350169646,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170141,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/PasswordInput/spec.js","startTime":1571350169484,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170146,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/SelectInput/spec.js","startTime":1571350169341,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170151,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/EmailInput/spec.js","startTime":1571350169567,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170155,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/TextAreaInput/spec.js","startTime":1571350169612,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170165,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/UrlInput/spec.js","startTime":1571350169580,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170543,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1571350170201,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170572,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1571350170181,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170601,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/TextInput/spec.js","startTime":1571350170064,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170615,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Label/spec.js","startTime":1571350170206,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170625,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Field/spec.js","startTime":1571350170118,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170630,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/InputControl/spec.js","startTime":1571350170206,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170708,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Box/spec.js","startTime":1571350170254,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170986,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/FieldGroup/spec.js","startTime":1571350170691,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170989,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1571350170660,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350170992,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1571350170653,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350171016,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1571350170567,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350171024,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1571350170664,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571350171031,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Hint/spec.js","startTime":1571350170606,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
+{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":27,"numPassedTests":33,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":27,"numTotalTests":33,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1571683143757,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154534,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1571683146758,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154608,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Text/spec.js","startTime":1571683146829,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Accordion.Item"],"failureMessages":[],"fullName":"Accordion.Item renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154657,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Accordion/spec.js","startTime":1571683146804,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154716,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/TextAreaInput/spec.js","startTime":1571683146904,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154751,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/TextInput/spec.js","startTime":1571683146795,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154794,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/TelephoneInput/spec.js","startTime":1571683146769,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683154871,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/InputBox/spec.js","startTime":1571683146809,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155440,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1571683154667,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155514,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Label/spec.js","startTime":1571683154763,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155579,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Hint/spec.js","startTime":1571683154847,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155583,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/PasswordInput/spec.js","startTime":1571683154687,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155662,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Subtitle/spec.js","startTime":1571683154933,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155712,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/SearchInput/spec.js","startTime":1571683154894,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683155749,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Callout/spec.js","startTime":1571683155005,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156150,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/FieldGroup/spec.js","startTime":1571683155544,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156220,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Field/spec.js","startTime":1571683155595,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156227,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/InputControl/spec.js","startTime":1571683155455,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156302,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1571683155719,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156378,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/EmailInput/spec.js","startTime":1571683155714,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156390,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Headline/spec.js","startTime":1571683155742,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156444,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1571683155870,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156903,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/UrlInput/spec.js","startTime":1571683156273,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"},{"ancestorTitles":["Skeleton"],"failureMessages":[],"fullName":"Skeleton renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156909,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Paragraph/spec.js","startTime":1571683156254,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156944,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1571683156379,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156956,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/Box/spec.js","startTime":1571683156472,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156957,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/SelectInput/spec.js","startTime":1571683156185,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1571683156988,"message":"","name":"/Users/tasso/Projetos/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1571683156463,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
diff --git a/packages/fuselage/src/components/Accordion/Item.js b/packages/fuselage/src/components/Accordion/Item.js
index a72d27341f..81460041a9 100644
--- a/packages/fuselage/src/components/Accordion/Item.js
+++ b/packages/fuselage/src/components/Accordion/Item.js
@@ -15,6 +15,7 @@ export const Item = React.forwardRef(function Item({
expanded,
tabIndex = 0,
title,
+ noncollapsible = !title,
onToggle,
onToggleEnabled,
...props
@@ -33,6 +34,8 @@ export const Item = React.forwardRef(function Item({
return;
}
+ event.currentTarget.blur();
+
if (onToggle) {
return onToggle.call(event.currentTarget, event);
}
@@ -65,24 +68,27 @@ export const Item = React.forwardRef(function Item({
};
return
-
{title}
- {(disabled || onToggleEnabled)
+ {!noncollapsible && <>
+ {(disabled || onToggleEnabled)
&& }
-
-
-
+
+ >}
+ }
+
{children}
;
@@ -100,7 +106,7 @@ Item.propTypes = {
disabled: PropTypes.bool,
expanded: PropTypes.bool,
tabIndex: PropTypes.number,
- title: PropTypes.string.isRequired,
+ title: PropTypes.string,
onToggle: PropTypes.func,
onToggleEnabled: PropTypes.func,
};
diff --git a/packages/fuselage/src/components/Accordion/Item.stories.mdx b/packages/fuselage/src/components/Accordion/Item.stories.mdx
index 7f7e411267..b74e63675f 100644
--- a/packages/fuselage/src/components/Accordion/Item.stories.mdx
+++ b/packages/fuselage/src/components/Accordion/Item.stories.mdx
@@ -1,5 +1,6 @@
import { action } from '@storybook/addon-actions';
import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import LinkTo from '@storybook/addon-links/react';
import { Accordion, Paragraph } from '../..';
@@ -33,6 +34,34 @@ A collapsible panel.
+## Noncollapsible
+
+
+
+
+
+ Content
+
+
+
+
+
+### Without title
+
+When the `title` prop is omitted, its implied that
+the `Accordion.Item`
+is noncollapsible too.
+
+
+
+
+
+ Content
+
+
+
+
+
## With togglable state
### Enabled
diff --git a/packages/fuselage/src/components/Accordion/styles.js b/packages/fuselage/src/components/Accordion/styles.js
index 37a6dd9225..08301e7494 100644
--- a/packages/fuselage/src/components/Accordion/styles.js
+++ b/packages/fuselage/src/components/Accordion/styles.js
@@ -40,7 +40,7 @@ export const Bar = styled.div`
text-align: left;
- ${ ({ disabled }) => !disabled && css`
+ ${ ({ disabled, noncollapsible }) => !disabled && !noncollapsible && css`
${ clickable }
` }
@@ -56,16 +56,20 @@ export const Bar = styled.div`
` }
}
- &.hover,
- &:hover {
- background-color: ${ colors.dark100 };
- }
-
- &.focus,
- &:focus {
- border-color: ${ colors.blue500 };
- box-shadow: 0 0 0 ${ toRem(6) } ${ colors.blue100 };
- }
+ ${ ({ disabled, noncollapsible }) => !disabled && !noncollapsible && css`
+ &.focus,
+ &:focus {
+ border-color: ${ colors.blue500 };
+ box-shadow: 0 0 0 ${ toRem(6) } ${ colors.blue100 };
+ }
+
+ &.hover,
+ &:hover {
+ border-color: ${ colors.dark300 } transparent transparent;
+ background-color: ${ colors.dark100 };
+ box-shadow: none;
+ }
+ ` }
${ ({ disabled, theme }) => disabled && css`
color: ${ theme.textColors.disabled };