diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsTabs.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsTabs.jsx
index b505c0201c3c4da523c4e20a22030c493505fec5..4b5c7840dc1996c69fe870bae31072f037033b4f 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsTabs.jsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsTabs.jsx
@@ -15,7 +15,7 @@ const PermissionsTabs = ({ tab, onChangeTab }) => (
]}
onChange={onChangeTab}
underlined
- py={1}
+ py={2}
/>
</div>
);
diff --git a/frontend/src/metabase/components/Radio.jsx b/frontend/src/metabase/components/Radio.jsx
index 487efe0ef8754b14e98ea3264dfcdc5979d2b174..f6ea8736a3e8ab5bac9884fcdcba292e235b698f 100644
--- a/frontend/src/metabase/components/Radio.jsx
+++ b/frontend/src/metabase/components/Radio.jsx
@@ -134,8 +134,7 @@ BaseItem.defaultProps = {
// NORMAL
const NormalList = styled(BaseList).attrs({
- className: props =>
- cx(props.className, { "h3 text-bold": !props.showButtons }), // TODO: better way to merge classname?
+ className: props => cx(props.className, { "text-bold": !props.showButtons }), // TODO: better way to merge classname?
})``;
const NormalItem = styled(BaseItem)`
color: ${props => (props.selected ? color("brand") : null)};
diff --git a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
index 0ef243c5489705fcfd0c231924b2cf86683bb47e..d42b8fdfe1183f688440a4e570929d0c738ed30f 100644
--- a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
+++ b/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
@@ -447,6 +447,73 @@ exports[`CheckBox should render "Yellow" correctly 1`] = `
</div>
`;
+exports[`ClampedText should render "Default" correctly 1`] = `
+<div
+ className="clamped-text"
+>
+ <div
+ className="clamped-text--clamp ClampedText__ClampedDiv-sc-1i5vub8-0 kpOVj"
+ >
+ <div
+ className="clamped-text--text"
+ >
+ Lorem ipsum
+
+ dolor sit amet, consectetur adipiscing elit. Cras sit amet sagittis dui. Morbi in odio laoreet, finibus erat vitae, sagittis dui. Ut at mauris eget ligula volutpat pellentesque. Integer non faucibus urna. Maecenas faucibus ornare gravida. Aliquam orci tortor, ullamcorper et vehicula accumsan, malesuada in ipsum. Nullam auctor, justo et mattis fringilla, enim ipsum aliquet nunc, quis posuere odio erat in nulla. Suspendisse elementum, est et rutrum volutpat, purus mi placerat odio, sit amet blandit nulla diam at lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies placerat mollis. Curabitur vestibulum semper turpis, id cursus ex dignissim id. Cras efficitur sed ligula ac dictum. Curabitur hendrerit metus eget vestibulum bibendum. Cras nulla arcu, condimentum in rhoncus eu, interdum ut sapien. Cras sed molestie tellus, quis aliquet nunc. Nulla nec est eu est condimentum facilisis sit amet et ex.
+ </div>
+ </div>
+ <div
+ className="clamped-text--footer"
+ />
+</div>
+`;
+
+exports[`ClampedText should render "No 'See more' button when all text visible" correctly 1`] = `
+Array [
+ <strong>
+ A single line of text:
+</strong>,
+ <div
+ className="clamped-text"
+>
+ <div
+ className="clamped-text--clamp ClampedText__ClampedDiv-sc-1i5vub8-0 kpOVj"
+ >
+ <div
+ className="clamped-text--text"
+ >
+ foo
+ </div>
+ </div>
+ <div
+ className="clamped-text--footer"
+ />
+</div>,
+ <br />,
+ <strong>
+ Many lines of text, but an unset \`visibleLines\` prop:
+</strong>,
+ <div
+ className="clamped-text"
+>
+ <div
+ className="clamped-text--clamp ClampedText__ClampedDiv-sc-1i5vub8-0 MvTAX"
+ >
+ <div
+ className="clamped-text--text"
+ >
+ Lorem ipsum
+
+ dolor sit amet, consectetur adipiscing elit. Cras sit amet sagittis dui. Morbi in odio laoreet, finibus erat vitae, sagittis dui. Ut at mauris eget ligula volutpat pellentesque. Integer non faucibus urna. Maecenas faucibus ornare gravida. Aliquam orci tortor, ullamcorper et vehicula accumsan, malesuada in ipsum. Nullam auctor, justo et mattis fringilla, enim ipsum aliquet nunc, quis posuere odio erat in nulla. Suspendisse elementum, est et rutrum volutpat, purus mi placerat odio, sit amet blandit nulla diam at lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies placerat mollis. Curabitur vestibulum semper turpis, id cursus ex dignissim id. Cras efficitur sed ligula ac dictum. Curabitur hendrerit metus eget vestibulum bibendum. Cras nulla arcu, condimentum in rhoncus eu, interdum ut sapien. Cras sed molestie tellus, quis aliquet nunc. Nulla nec est eu est condimentum facilisis sit amet et ex.
+ </div>
+ </div>
+ <div
+ className="clamped-text--footer"
+ />
+</div>,
+]
+`;
+
exports[`CollapseSection should render "Collapsed by default" correctly 1`] = `
<div
aria-expanded={false}
@@ -1073,7 +1140,7 @@ exports[`Radio should render "bubble" correctly 1`] = `
exports[`Radio should render "default" correctly 1`] = `
<ul
- className="Radio__NormalList-sc-1y1p5xd-2 h3 text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
+ className="Radio__NormalList-sc-1y1p5xd-2 text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
>
<li
aria-selected={true}
@@ -1173,7 +1240,7 @@ exports[`Radio should render "show buttons" correctly 1`] = `
exports[`Radio should render "underlined" correctly 1`] = `
<ul
- className="Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp Radio__NormalList-sc-1y1p5xd-2 Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp h3 text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
+ className="Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp Radio__NormalList-sc-1y1p5xd-2 Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
>
<li
aria-selected={true}
@@ -1659,6 +1726,348 @@ exports[`StackedCheckBox should render "Off - Default" correctly 1`] = `
</div>
`;
+exports[`Timeline should render "Constrained width" correctly 1`] = `
+<div
+ className="Timelineinfo__Container-g32h45-0 hGzZmq"
+>
+ <div
+ className="Timeline__TimelineContainer-sc-1c86koa-0 cNPqnV"
+ >
+ <div
+ className="Timeline__Border-sc-1c86koa-2 kmWXSN"
+ />
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="verified icon"
+ className="Icon Icon-verified text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M32 16.64a6.397 6.397 0 0 0-3.15-5.514 6.4 6.4 0 0 0-7.42-8.115A6.396 6.396 0 0 0 16 0a6.396 6.396 0 0 0-5.43 3.01 6.4 6.4 0 0 0-7.42 8.115A6.397 6.397 0 0 0 0 16.64c0 2.25 1.162 4.23 2.919 5.371a6.4 6.4 0 0 0 7.652 6.979A6.396 6.396 0 0 0 16 32a6.396 6.396 0 0 0 5.429-3.01 6.4 6.4 0 0 0 7.652-6.979A6.395 6.395 0 0 0 32 16.64z\\" fill=\\"#D3E7F8\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8.32 16.852l2.392-2.485 3.649 3.769 7.312-7.576 2.4 2.584-9.71 10.02-6.043-6.312z\\" fill=\\"#509EE3\\"/>",
+ }
+ }
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ />
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ John Someone verified this
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ a day ago
+ </div>
+ <div>
+ idk lol
+ </div>
+ </div>
+ </div>
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="pencil icon"
+ className="Icon Icon-pencil text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ >
+ <path
+ d="M21.187 4.359L24.71.835c1.363-1.362 3.912-1.022 5.694.76 1.783 1.783 2.123 4.332.761 5.695l-3.523 3.523-6.455-6.454zM19.425 6.12L1.455 24.091C.091 25.453-.47 30.625.452 31.547c.922.922 6.094.361 7.456-1.001l17.97-17.971-6.454-6.455z"
+ />
+ </svg>
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ Foo edited this
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ 7 days ago
+ </div>
+ <div>
+ Did a thing.
+ </div>
+ </div>
+ </div>
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="warning_colorized icon"
+ className="Icon Icon-warning_colorized text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.764 4.36c1.957-3.146 6.535-3.146 8.492 0l11.002 17.687c2.072 3.33-.323 7.64-4.246 7.64H5.008c-3.922 0-6.317-4.31-4.246-7.64L11.765 4.359zm6.414 19.002v.019c0 .309-.059.601-.175.874-.117.272-.28.509-.488.709a2.269 2.269 0 0 1-.723.465 2.336 2.336 0 0 1-.887.168c-.322 0-.623-.056-.898-.168a2.179 2.179 0 0 1-1.2-1.174 2.199 2.199 0 0 1-.175-.874c0-.31.059-.601.176-.87.116-.268.276-.501.48-.7a2.279 2.279 0 0 1 1.617-.646c.316 0 .614.058.89.174.273.116.513.272.72.47a2.153 2.153 0 0 1 .663 1.535v.018zm-.32-15.083v5.735c0 .711-.042 1.416-.127 2.115a31.535 31.535 0 0 1-.334 2.124l-.041.214h-2.834l-.04-.214a31.537 31.537 0 0 1-.335-2.124c-.085-.699-.127-1.404-.127-2.115V8.28h3.838z\\" fill=\\"#F2A86F\\"/>",
+ }
+ }
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ />
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ Someone McSomeone thinks something looks wrong
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ 2 months ago
+ </div>
+ <div>
+ Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not
+ </div>
+ </div>
+ </div>
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="clarification icon"
+ className="Icon Icon-clarification text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "<rect width=\\"32\\" height=\\"32\\" rx=\\"16\\" fill=\\"#E1D9E8\\"/><path d=\\"M11.2 8.307a9.244 9.244 0 0 1 1.024-.742c.375-.23.777-.431 1.203-.602.427-.179.883-.316 1.37-.41a7.894 7.894 0 0 1 1.6-.153c.802 0 1.523.107 2.163.32.649.213 1.199.52 1.651.922.452.392.798.87 1.037 1.433.247.555.371 1.174.371 1.856 0 .649-.09 1.212-.269 1.69-.179.47-.405.879-.678 1.229-.273.35-.576.652-.909.908a40.2 40.2 0 0 1-.934.717c-.29.214-.546.427-.768.64a1.46 1.46 0 0 0-.41.717l-.358 1.792h-2.714l-.281-2.06c-.069-.419-.026-.782.128-1.089.153-.316.362-.597.627-.845.273-.256.576-.495.909-.716.332-.23.644-.474.934-.73a4.12 4.12 0 0 0 .73-.87c.204-.325.307-.709.307-1.152 0-.512-.17-.918-.512-1.216-.333-.308-.794-.461-1.383-.461-.452 0-.832.047-1.139.14-.298.094-.559.201-.78.32-.214.112-.402.214-.564.308a.963.963 0 0 1-.486.14.881.881 0 0 1-.82-.473L11.2 8.307zm2.355 14.938c0-.307.056-.593.167-.858.119-.264.277-.495.473-.691.205-.196.444-.35.717-.46.273-.12.572-.18.896-.18.316 0 .61.06.883.18.273.11.512.264.717.46.205.196.363.427.474.691.119.265.179.55.179.858 0 .307-.06.597-.18.87a2.038 2.038 0 0 1-.473.691c-.205.197-.444.35-.717.461a2.323 2.323 0 0 1-.883.167c-.324 0-.623-.056-.896-.167a2.245 2.245 0 0 1-.717-.46 2.31 2.31 0 0 1-.473-.692 2.289 2.289 0 0 1-.167-.87z\\" fill=\\"#A989C5\\"/>",
+ }
+ }
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ />
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ Someone is confused
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ a year ago
+ </div>
+ <div>
+ Something something something something something something something something something something something something?
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`Timeline should render "Optional footer" correctly 1`] = `
+<div
+ className="Timeline__TimelineContainer-sc-1c86koa-0 cNPqnV"
+>
+ <div
+ className="Timeline__Border-sc-1c86koa-2 kmWXSN"
+ />
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="verified icon"
+ className="Icon Icon-verified text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M32 16.64a6.397 6.397 0 0 0-3.15-5.514 6.4 6.4 0 0 0-7.42-8.115A6.396 6.396 0 0 0 16 0a6.396 6.396 0 0 0-5.43 3.01 6.4 6.4 0 0 0-7.42 8.115A6.397 6.397 0 0 0 0 16.64c0 2.25 1.162 4.23 2.919 5.371a6.4 6.4 0 0 0 7.652 6.979A6.396 6.396 0 0 0 16 32a6.396 6.396 0 0 0 5.429-3.01 6.4 6.4 0 0 0 7.652-6.979A6.395 6.395 0 0 0 32 16.64z\\" fill=\\"#D3E7F8\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8.32 16.852l2.392-2.485 3.649 3.769 7.312-7.576 2.4 2.584-9.71 10.02-6.043-6.312z\\" fill=\\"#509EE3\\"/>",
+ }
+ }
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ />
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ John Someone verified this
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ a day ago
+ </div>
+ <div>
+ idk lol
+ </div>
+ <div>
+ <a
+ className="text-underline"
+ href="/_internal/components/timeline"
+ >
+ 5 comments
+ </a>
+ </div>
+ </div>
+ </div>
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="pencil icon"
+ className="Icon Icon-pencil text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ >
+ <path
+ d="M21.187 4.359L24.71.835c1.363-1.362 3.912-1.022 5.694.76 1.783 1.783 2.123 4.332.761 5.695l-3.523 3.523-6.455-6.454zM19.425 6.12L1.455 24.091C.091 25.453-.47 30.625.452 31.547c.922.922 6.094.361 7.456-1.001l17.97-17.971-6.454-6.455z"
+ />
+ </svg>
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ Foo edited this
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ 7 days ago
+ </div>
+ <div>
+ Did a thing.
+ </div>
+ <div>
+
+ </div>
+ </div>
+ </div>
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="warning_colorized icon"
+ className="Icon Icon-warning_colorized text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.764 4.36c1.957-3.146 6.535-3.146 8.492 0l11.002 17.687c2.072 3.33-.323 7.64-4.246 7.64H5.008c-3.922 0-6.317-4.31-4.246-7.64L11.765 4.359zm6.414 19.002v.019c0 .309-.059.601-.175.874-.117.272-.28.509-.488.709a2.269 2.269 0 0 1-.723.465 2.336 2.336 0 0 1-.887.168c-.322 0-.623-.056-.898-.168a2.179 2.179 0 0 1-1.2-1.174 2.199 2.199 0 0 1-.175-.874c0-.31.059-.601.176-.87.116-.268.276-.501.48-.7a2.279 2.279 0 0 1 1.617-.646c.316 0 .614.058.89.174.273.116.513.272.72.47a2.153 2.153 0 0 1 .663 1.535v.018zm-.32-15.083v5.735c0 .711-.042 1.416-.127 2.115a31.535 31.535 0 0 1-.334 2.124l-.041.214h-2.834l-.04-.214a31.537 31.537 0 0 1-.335-2.124c-.085-.699-.127-1.404-.127-2.115V8.28h3.838z\\" fill=\\"#F2A86F\\"/>",
+ }
+ }
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ />
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ Someone McSomeone thinks something looks wrong
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ 2 months ago
+ </div>
+ <div>
+ Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct.
+ Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not
+ </div>
+ <div>
+
+ </div>
+ </div>
+ </div>
+ <div
+ className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
+ >
+ <svg
+ aria-label="clarification icon"
+ className="Icon Icon-clarification text-light Icon-sc-1x67v3y-1 hFNRPZ"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "<rect width=\\"32\\" height=\\"32\\" rx=\\"16\\" fill=\\"#E1D9E8\\"/><path d=\\"M11.2 8.307a9.244 9.244 0 0 1 1.024-.742c.375-.23.777-.431 1.203-.602.427-.179.883-.316 1.37-.41a7.894 7.894 0 0 1 1.6-.153c.802 0 1.523.107 2.163.32.649.213 1.199.52 1.651.922.452.392.798.87 1.037 1.433.247.555.371 1.174.371 1.856 0 .649-.09 1.212-.269 1.69-.179.47-.405.879-.678 1.229-.273.35-.576.652-.909.908a40.2 40.2 0 0 1-.934.717c-.29.214-.546.427-.768.64a1.46 1.46 0 0 0-.41.717l-.358 1.792h-2.714l-.281-2.06c-.069-.419-.026-.782.128-1.089.153-.316.362-.597.627-.845.273-.256.576-.495.909-.716.332-.23.644-.474.934-.73a4.12 4.12 0 0 0 .73-.87c.204-.325.307-.709.307-1.152 0-.512-.17-.918-.512-1.216-.333-.308-.794-.461-1.383-.461-.452 0-.832.047-1.139.14-.298.094-.559.201-.78.32-.214.112-.402.214-.564.308a.963.963 0 0 1-.486.14.881.881 0 0 1-.82-.473L11.2 8.307zm2.355 14.938c0-.307.056-.593.167-.858.119-.264.277-.495.473-.691.205-.196.444-.35.717-.46.273-.12.572-.18.896-.18.316 0 .61.06.883.18.273.11.512.264.717.46.205.196.363.427.474.691.119.265.179.55.179.858 0 .307-.06.597-.18.87a2.038 2.038 0 0 1-.473.691c-.205.197-.444.35-.717.461a2.323 2.323 0 0 1-.883.167c-.324 0-.623-.056-.896-.167a2.245 2.245 0 0 1-.717-.46 2.31 2.31 0 0 1-.473-.692 2.289 2.289 0 0 1-.167-.87z\\" fill=\\"#A989C5\\"/>",
+ }
+ }
+ fill="currentcolor"
+ height={20}
+ role="img"
+ viewBox="0 0 32 32"
+ width={20}
+ />
+ <div
+ className="ml1"
+ >
+ <div
+ className="text-bold"
+ >
+ Someone is confused
+ </div>
+ <div
+ className="text-medium text-small"
+ >
+ a year ago
+ </div>
+ <div>
+ Something something something something something something something something something something something something?
+ </div>
+ <div>
+ <a
+ className="text-underline"
+ href="/_internal/components/timeline"
+ >
+ 123 comments
+ </a>
+ </div>
+ </div>
+ </div>
+</div>
+`;
+
exports[`Toggle should render "off" correctly 1`] = `
<a
className="no-decoration"