feat: update blockquote styling and examples. Ref. has now display: b…

…lock to wrap in newline. Also graphic alignment on left side is possible with `dnb-blockquote--left`
dnbexperience · Feb 11, 2019 · 07fda7c · 07fda7c
1 parent 0014916
commit 07fda7c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/blockquote.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/blockquote.md
@@ -6,8 +6,20 @@ import CodeBlock from 'Tags/CodeBlock'
 
 ## Blockquote
 
-<CodeBlock reactLive hideCode>
+<CodeBlock reactLive hideCode caption="Default Blockquote">
 {`
-<blockquote>Dis leo aliquam neque aptent nascetur metus ad ut eu</blockquote>
+<blockquote>
+  Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo.
+  <cite>Cite Referance</cite>
+</blockquote>
+`}
+</CodeBlock>
+
+<CodeBlock reactLive hideCode caption="Blockquote with graphics on left side">
+{`
+<blockquote class="dnb-blockquote--left">
+  Dis leo aliquam neque aptent nascetur metus ad ut eu Choro vivendum tractatos ei quo.
+  <cite>Cite Referance</cite>
+</blockquote>
 `}
 </CodeBlock>
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/blockquote.scss
@@ -3,13 +3,15 @@
  *
  */
 
-blockquote {
+blockquote,
+.dnb-blockquote {
   display: inline-block;
   width: auto;
 
   margin: 0;
   padding: 1.5rem;
   padding-top: 6rem;
+  padding-bottom: 2rem;
 
   color: var(--color-mint-green);
   background-color: var(--color-ocean-green);
@@ -30,10 +32,17 @@ blockquote {
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==);
   }
 
+  &.dnb-blockquote--left {
+    padding: 1.5rem;
+    padding-left: 6rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
   cite,
   footer,
   figcaption {
-    display: inline-block;
+    display: block;
     margin-top: 1rem;
 
     font-weight: var(--font-weight-demi);