feat(css): add css-overrides to cssMap (#18)

add css-overrides to cssMap\
Pickra · Jan 30, 2020 · 80af789 · 80af789
1 parent 145e11b
commit 80af789
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -70,6 +70,24 @@ These are the colors used for `color`, `backgroundColor`, and `borderColor` for
 
 You can find all the defaults [here](./src/utils.js#L58).
 
+You may also override the CSS classes by passing a template literal into the `cssOverrides` option. Such as:
+```
+{
+  cssOverrides: `
+    .container {
+      display: block;
+      padding: 1rem;
+      margin-bottom: 2rem;
+    }
+
+    .container code {
+      padding: 1.5rem;
+    }
+  `
+}
+```
+Examples for CSS overrides are included in the stories for each of the languages.
+
 ### Syntax highlighting
 If you want syntax highlighting, you'll need to `npm install highlight.js`.
 Then you need to initialize your language:

diff --git a/examples/1html.stories.js b/examples/1html.stories.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html';
 import copyCodeBlock from '../src/copyCodeBlock';
-import { customStyles, customHtml, opts } from './customHtml';
+import { customStyles, customHtml, opts, cssOverrides } from './customHtml';
 import { usageExample, usageExampleJsHighlight } from './helpers';
 import * as htmlExample from './html-example.html';
 import hljs from 'highlight.js/lib/highlight';
@@ -61,6 +61,14 @@ storiesOf('HTML', module)
         <h2>Usage</h2>
         ${copyCodeBlock(usageExample(opts), usageExampleJsHighlight)}
     `)
+    .add('CSS overrides for copy button', () => `
+        <link rel="stylesheet" href="${a11yLightStyle}">
+        <h1>CSS overrides for copy button</h1>
+        <h2>Example Code</h2>
+        ${customHtml(htmlExample, cssOverrides) /* Run through hljs, w/custom css overrides */}
+        <h2>Usage</h2>
+        ${copyCodeBlock(usageExample(cssOverrides), usageExampleJsHighlight)}
+    `)
     .add('Return DOM element', () => {
         const options = {shouldReturnDomEl: true};
         const container = document.createElement('div');

diff --git a/examples/css.stories.js b/examples/css.stories.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html';
 import copyCodeBlock from '../src/copyCodeBlock';
-import { customStyles } from './customHtml';
+import { customStyles, cssOverrides } from './customHtml';
 import { usageExample, usageExampleJsHighlight } from './helpers';
 import hljs from 'highlight.js/lib/highlight';
 
@@ -90,6 +90,14 @@ storiesOf('CSS', module)
         <h2>Usage</h2>
         ${copyCodeBlock(usageExample(opts), usageExampleJsHighlight)}
     `)
+    .add('CSS overrides for copy button', () => `
+        <link rel="stylesheet" href="${a11yLightStyle}">
+        <h1>CSS overrides for copy button</h1>
+        <h2>Example Code</h2>
+        ${copyCodeBlock(cssExample, cssOverrides) /* Run through hljs, w/ css overrides */}
+        <h2>Usage</h2>
+        ${copyCodeBlock(usageExample(cssOverrides), usageExampleJsHighlight)}
+    `)
     .add('Return DOM element', () => {
         const options = {shouldReturnDomEl: true};
         const container = document.createElement('div');

diff --git a/examples/customHtml.js b/examples/customHtml.js
@@ -12,11 +12,34 @@ export const opts = {
     }
 };
 
+export const cssOverrides = {
+    cssOverrides: `
+        .container {
+            position: relative;
+        }
+        .displayCode {
+            max-width: 100%;
+        }
+        .copyButton {
+            padding: 0.5rem;
+            outline: none;
+            border: 1px solid #fff;
+            border-top: 0;
+            border-right: 0;
+            border-radius: 0 0 0 2px;
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-size: 0.75rem;
+        }
+    `
+};
+
 export const customStyles = {
     // no hljs
     colors: { background: "#fa8072", textColor: "#4e2576"},
     displayCodeWidth: "50%",
     copyButtonWidth: "50%"
 };
 
-export const customHtml = string => copyCodeBlock(string, opts);
+export const customHtml = (string, customOpts = opts) => copyCodeBlock(string, customOpts);
diff --git a/examples/javascript.stories.js b/examples/javascript.stories.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html';
 import copyCodeBlock from '../src/copyCodeBlock';
-import { customStyles } from './customHtml';
+import { customStyles, cssOverrides } from './customHtml';
 import { usageExample, usageExampleJsHighlight } from './helpers';
 import hljs from 'highlight.js/lib/highlight';
 
@@ -74,6 +74,14 @@ storiesOf('Javascript', module)
         <h2>Usage</h2>
         ${copyCodeBlock(usageExample(usageExampleJsHighlight), usageExampleJsHighlight)}
     `)
+    .add('CSS overrides for copy button', () => `
+        <link rel="stylesheet" href="${a11yLightStyle}">
+        <h1>CSS overrides for copy button</h1>
+        <h2>Example Code</h2>
+        ${copyCodeBlock(jsExample, cssOverrides) /* Run through hljs, w/ css overrides */}
+        <h2>Usage</h2>
+        ${copyCodeBlock(usageExample(cssOverrides), usageExampleJsHighlight)}
+    `)
     .add('Return DOM element', () => {
         const options = {shouldReturnDomEl: true};
         const container = document.createElement('div');

diff --git a/examples/rust.stories.js b/examples/rust.stories.js
@@ -1,6 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import copyCodeBlock from '../src/copyCodeBlock';
 import { usageExample, usageExampleJsHighlight } from './helpers';
+import { cssOverrides } from './customHtml';
 import hljs from 'highlight.js/lib/highlight';
 
 // Register languages for hljs
@@ -90,6 +91,14 @@ storiesOf('Rust', module)
     <h2>Usage</h2>
     ${copyCodeBlock(usageExample(hljsOpts), usageExampleJsHighlight)}
   `)
+  .add('CSS overrides for copy button', () => `
+    <link rel="stylesheet" href="${draculaStyle}">
+    <h1>Syntax highlighting, css overrides</h1>
+    <h2>Example Code</h2>
+    ${copyCodeBlock(rustExample, cssOverrides)}
+    <h2>Usage</h2>
+    ${copyCodeBlock(usageExample(cssOverrides), usageExampleJsHighlight)}
+  `)
   .add('Return DOM element', () => {
     const options = {shouldReturnDomEl: true};
     const container = document.createElement('div');

diff --git a/src/styles.js b/src/styles.js
@@ -14,7 +14,7 @@ export default customOptions => {
 
     const {
         containerPadding, containerMarginBottom, displayCodeWidth,
-        copyButtonPadding, copyButtonWidth, copyButtonFontSize, copyButtonOutline
+        copyButtonPadding, copyButtonWidth, copyButtonFontSize, copyButtonOutline, cssOverrides
     } = getMergedOptions(customOptions);
 
     const cssMap = csjs`
@@ -69,6 +69,8 @@ export default customOptions => {
             color: ${colors.buttonBackground || colors.background};
             background-color: ${colors.buttonTextColor || colors.textColor};
         }
+
+        ${cssOverrides}
     `;
 
     const hljsStyles = Object.keys(colors)

diff --git a/src/utils.js b/src/utils.js
@@ -65,7 +65,8 @@ const defaultOptions = {
     copyButtonWidth: '20%',
     copyButtonPadding: '1rem 0',
     copyButtonOutline: `2px solid`,
-    copyButtonFontSize: '1rem'
+    copyButtonFontSize: '1rem',
+    cssOverrides: ''
 };
 
 const defaultColors = {