diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap index 417a91c3d9..ef131f93d7 100644 --- a/src/__snapshots__/storyshots.spec.js.snap +++ b/src/__snapshots__/storyshots.spec.js.snap @@ -236,109 +236,6 @@ HTMLCollection [ ] `; -exports[`Storyshots Components/Blockquote Base 1`] = ` -.circuit-0 { - font-weight: 400; - margin-bottom: 16px; - font-size: 13px; - line-height: 20px; - font-style: italic; - padding-left: 12px; - border-left: 2px solid #3388FF; -} - -@media (min-width:480px) { - .circuit-0 { - font-size: 13px; - line-height: 20px; - } -} - -
- -Lorem ipsum dolor amet echo park activated charcoal banjo deep -crucifix pinterest yr af tumeric literally. Tbh four loko tattooed -kickstarter artisan. Lumbersexual tote bag selfies truffaut, tofu vape -tbh adaptogen green juice lo-fi kombucha. - -
-`; - -exports[`Storyshots Components/Blockquote Size 1`] = ` -HTMLCollection [ - .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - font-size: 13px; - line-height: 20px; - font-style: italic; - padding-left: 12px; - border-left: 2px solid #3388FF; -} - -@media (min-width:480px) { - .circuit-0 { - font-size: 13px; - line-height: 20px; - } -} - -
- Kilo - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that. -
, - .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; - line-height: 24px; - font-style: italic; - padding-left: 12px; - border-left: 2px solid #3388FF; -} - -@media (min-width:480px) { - .circuit-0 { - font-size: 16px; - line-height: 24px; - } -} - -
- Mega - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that. -
, - .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; - line-height: 24px; - font-style: italic; - padding-left: 12px; - border-left: 2px solid #3388FF; - padding-left: 16px; - border-left: 3px solid #3388FF; -} - -@media (min-width:480px) { - .circuit-0 { - font-size: 18px; - line-height: 28px; - } -} - -
- Giga - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that. -
, -] -`; - exports[`Storyshots Components/Button Base 1`] = ` .circuit-0 { background-color: #FAFBFC; @@ -7224,301 +7121,112 @@ exports[`Storyshots Components/Image Base 1`] = ` /> `; -exports[`Storyshots Components/List Base 1`] = ` +exports[`Storyshots Components/Modal Base 1`] = ` .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - padding-left: 12px; - font-size: 13px; - line-height: 20px; + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; + font-weight: 700; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; + line-height: 24px; + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0 li { - margin-bottom: 12px; - margin-left: 4px; +.circuit-0:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-0 ul, -.circuit-0 ol { - margin-left: 4px; +.circuit-0:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } - -`; +.circuit-0:hover { + background-color: #D8DDE1; +} -exports[`Storyshots Components/List Nested 1`] = ` -.circuit-0 { - font-weight: 400; - margin-bottom: 16px; - padding-left: 12px; - font-size: 13px; - line-height: 20px; +.circuit-0:hover, +.circuit-0:active { + border-color: #9DA7B1; + border-width: 1px; + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0 li { - margin-bottom: 12px; - margin-left: 4px; +.circuit-0[href] { + display: inline-block; } -.circuit-0 ul, -.circuit-0 ol { - margin-left: 4px; +.circuit-0:disabled, +.circuit-0[disabled] { + opacity: 0.4; + pointer-events: none; + -webkit-user-selectable: none; + -moz-user-selectable: none; + -ms-user-selectable: none; + user-selectable: none; } - + Open modal + `; -exports[`Storyshots Components/List Ordered 1`] = ` +exports[`Storyshots Components/Modal With Custom Styles 1`] = ` .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - padding-left: 12px; - font-size: 13px; - line-height: 20px; + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; + font-weight: 700; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; + line-height: 24px; + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0 li { - margin-bottom: 12px; - margin-left: 4px; +.circuit-0:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-0 ul, -.circuit-0 ol { - margin-left: 4px; +.circuit-0:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } -
    -
  1. - This is a list -
    2. -
  2. - A very fine list -
    3. -
-`; - -exports[`Storyshots Components/List Size 1`] = ` -HTMLCollection [ - .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - padding-left: 12px; - font-size: 13px; - line-height: 20px; -} - -.circuit-0 li { - margin-bottom: 12px; - margin-left: 4px; -} - -.circuit-0 ul, -.circuit-0 ol { - margin-left: 4px; -} - -, - .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - padding-left: 12px; - font-size: 16px; - line-height: 24px; -} - -.circuit-0 li { - margin-bottom: 8px; - margin-left: 12px; -} - -.circuit-0 ul, -.circuit-0 ol { - margin-left: 12px; -} - -, - .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - padding-left: 16px; - font-size: 18px; - line-height: 28px; -} - -.circuit-0 li { - margin-bottom: 12px; - margin-left: 12px; -} - -.circuit-0 ul, -.circuit-0 ol { - margin-left: 12px; -} - -, -] -`; - -exports[`Storyshots Components/Modal Base 1`] = ` -.circuit-0 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-0:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-0:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-0:hover { - background-color: #D8DDE1; -} - -.circuit-0:hover, -.circuit-0:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-0[href] { - display: inline-block; -} - -.circuit-0:disabled, -.circuit-0[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - - -`; - -exports[`Storyshots Components/Modal With Custom Styles 1`] = ` -.circuit-0 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-0:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); -} - -.circuit-0:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} - -.circuit-0:hover { - background-color: #D8DDE1; -} +.circuit-0:hover { + background-color: #D8DDE1; +} .circuit-0:hover, .circuit-0:active { @@ -24599,6 +24307,109 @@ exports[`Storyshots Typography/Anchor As Link 1`] = ` `; +exports[`Storyshots Typography/Blockquote Base 1`] = ` +.circuit-0 { + font-weight: 400; + margin-bottom: 16px; + font-size: 13px; + line-height: 20px; + font-style: italic; + padding-left: 12px; + border-left: 2px solid #3388FF; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 13px; + line-height: 20px; + } +} + +
+ +Lorem ipsum dolor amet echo park activated charcoal banjo deep +crucifix pinterest yr af tumeric literally. Tbh four loko tattooed +kickstarter artisan. Lumbersexual tote bag selfies truffaut, tofu vape +tbh adaptogen green juice lo-fi kombucha. + +
+`; + +exports[`Storyshots Typography/Blockquote Size 1`] = ` +HTMLCollection [ + .circuit-0 { + font-weight: 400; + margin-bottom: 16px; + font-size: 13px; + line-height: 20px; + font-style: italic; + padding-left: 12px; + border-left: 2px solid #3388FF; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 13px; + line-height: 20px; + } +} + +
+ Kilo - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that. +
, + .circuit-0 { + font-weight: 400; + margin-bottom: 16px; + font-size: 16px; + line-height: 24px; + font-style: italic; + padding-left: 12px; + border-left: 2px solid #3388FF; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 16px; + line-height: 24px; + } +} + +
+ Mega - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that. +
, + .circuit-0 { + font-weight: 400; + margin-bottom: 16px; + font-size: 16px; + line-height: 24px; + font-style: italic; + padding-left: 12px; + border-left: 2px solid #3388FF; + padding-left: 16px; + border-left: 3px solid #3388FF; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 18px; + line-height: 28px; + } +} + +
+ Giga - The ability to accept credit card payments that are EMV-compliant is essentially an insurance policy against fraud and an impressively economical one at that. +
, +] +`; + exports[`Storyshots Typography/Heading Base 1`] = ` .circuit-0 { font-weight: 700; @@ -24773,6 +24584,195 @@ HTMLCollection [ ] `; +exports[`Storyshots Typography/List Base 1`] = ` +.circuit-0 { + font-weight: 400; + margin-bottom: 16px; + padding-left: 12px; + font-size: 13px; + line-height: 20px; +} + +.circuit-0 li { + margin-bottom: 12px; + margin-left: 4px; +} + +.circuit-0 ul, +.circuit-0 ol { + margin-left: 4px; +} + + +`; + +exports[`Storyshots Typography/List Nested 1`] = ` +.circuit-0 { + font-weight: 400; + margin-bottom: 16px; + padding-left: 12px; + font-size: 13px; + line-height: 20px; +} + +.circuit-0 li { + margin-bottom: 12px; + margin-left: 4px; +} + +.circuit-0 ul, +.circuit-0 ol { + margin-left: 4px; +} + + +`; + +exports[`Storyshots Typography/List Ordered 1`] = ` +.circuit-0 { + font-weight: 400; + margin-bottom: 16px; + padding-left: 12px; + font-size: 13px; + line-height: 20px; +} + +.circuit-0 li { + margin-bottom: 12px; + margin-left: 4px; +} + +.circuit-0 ul, +.circuit-0 ol { + margin-left: 4px; +} + +
    +
  1. + This is a list +
    2. +
  2. + A very fine list +
    3. +
+`; + +exports[`Storyshots Typography/List Size 1`] = ` +HTMLCollection [ + .circuit-0 { + font-weight: 400; + margin-bottom: 16px; + padding-left: 12px; + font-size: 13px; + line-height: 20px; +} + +.circuit-0 li { + margin-bottom: 12px; + margin-left: 4px; +} + +.circuit-0 ul, +.circuit-0 ol { + margin-left: 4px; +} + +, + .circuit-0 { + font-weight: 400; + margin-bottom: 16px; + padding-left: 12px; + font-size: 16px; + line-height: 24px; +} + +.circuit-0 li { + margin-bottom: 8px; + margin-left: 12px; +} + +.circuit-0 ul, +.circuit-0 ol { + margin-left: 12px; +} + +, + .circuit-0 { + font-weight: 400; + margin-bottom: 16px; + padding-left: 16px; + font-size: 18px; + line-height: 28px; +} + +.circuit-0 li { + margin-bottom: 12px; + margin-left: 12px; +} + +.circuit-0 ul, +.circuit-0 ol { + margin-left: 12px; +} + +, +] +`; + exports[`Storyshots Typography/SubHeading Base 1`] = ` .circuit-0 { text-transform: uppercase; diff --git a/src/components/Blockquote/Blockquote.story.js b/src/components/Blockquote/Blockquote.story.js index c5d9bbbc11..9db7758d6a 100644 --- a/src/components/Blockquote/Blockquote.story.js +++ b/src/components/Blockquote/Blockquote.story.js @@ -29,7 +29,7 @@ tbh adaptogen green juice lo-fi kombucha. const sizes = [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]; export default { - title: 'Components/Blockquote', + title: 'Typography/Blockquote', component: Blockquote, parameters: { docs: { page: docs }, diff --git a/src/components/List/List.story.js b/src/components/List/List.story.js index 9a5d6daeb9..eb9686542f 100644 --- a/src/components/List/List.story.js +++ b/src/components/List/List.story.js @@ -22,7 +22,7 @@ import List from './List'; const sizes = [List.KILO, List.MEGA, List.GIGA]; export default { - title: 'Components/List', + title: 'Typography/List', component: List, parameters: { docs: { page: docs }, diff --git a/src/index.js b/src/index.js index e20b54f794..b523cceef6 100644 --- a/src/index.js +++ b/src/index.js @@ -29,10 +29,10 @@ const currencyAmountUtils = { // Typography export { default as Heading } from './components/Heading'; -export { default as List } from './components/List'; - export { default as SubHeading } from './components/SubHeading'; export { default as Text } from './components/Text'; +export { default as Anchor } from './components/Anchor'; +export { default as List } from './components/List'; export { default as Blockquote } from './components/Blockquote'; // Forms