fix: components colors and csp (#42)

Basis-Theory · Jan 26, 2023 · bf96b25 · bf96b25 · vercel · Jan 26, 2023
1 parent b9d703e
commit bf96b25
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 28 deletions.
diff --git a/docs/expressions/filters.mdx b/docs/expressions/filters.mdx
@@ -10,11 +10,11 @@ but you wish to only use a single piece of that data within a Proxy or Reactor r
 or you may wish to reformat the data before indexing it for search (e.g. use only the last name, but normalize by uppercasing it).
 
 To allow you complete flexibility, transformation functions called **filters** can be applied within any expression.
-Generally, a variable's value can be transformed by specifying a filter after the `|` symbol:  
+Generally, a variable's value can be transformed by specifying a filter after the `|` symbol:
 `{{ <variable> | <filter> }}`
 
 You can effectively think of this as "piping" a variable into the filter in the same way you may be familiar with the "pipe" operator from Unix-like systems.
-Multiple filters can be chained together by "piping" the result of each filter into the next, applying in order from left to right:  
+Multiple filters can be chained together by "piping" the result of each filter into the next, applying in order from left to right:
 `{{ <variable> | <filter1> | <filter2> | ... }}`
 
 All standard [Liquid filters](https://shopify.github.io/liquid/filters/) are supported within expressions.
@@ -162,6 +162,7 @@ Given a token with the data:
 | --------------------------------------------------------------------- | ------------------------------------ |
 | <code>{{ data.bicycle.color }}</code>                                 | `"red"`                              |
 | <code>{{ data &#124; json: '$.bicycle.color' }}</code>                | `"red"`                              |
+| <code>{{ data &#124; json: '$.bicycle.price' }}</code>                | `"19.95"`                            |
 | <code>{{ data.bicycle }}</code>                                       | `{ "color": "red", "price": 19.95 }` |
 | <code>{{ data &#124; json: '$.books[0].author' }}</code>              | `"Herman Melville"`                  |
 | <code>{{ data &#124; json: '$.books[?(@.price < 10)].title' }}</code> | `"Moby Dick"`                        |

diff --git a/docs/sdks/web/javascript/content-security-policy.mdx b/docs/sdks/web/javascript/content-security-policy.mdx
@@ -5,17 +5,23 @@ import { Alert, Alerts } from "@site/src/components/shared/Alert";
 If you have a [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) deployed in your website, you must include the following directives:
 
 - `script-src` - _https://js.basistheory.com_
-- `frame-src` - _https://elements.basistheory.com_ 
-
-If you are using [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for), you must allow dynamic script loading from the _https://js.basistheory.com_ origin. This should be done **BEFORE** [initialization](/docs/sdks/web/javascript#initialization).
+- `frame-src` - _https://elements.basistheory.com_
 
 ```html showLineNumbers title="CSP"
 <head>
-  <meta http-equiv="Content-Security-Policy" 
+  <meta http-equiv="Content-Security-Policy"
     content="frame-src https://elements.basistheory.com; script-src https://js.basistheory.com" />
 </head>
 ```
 
+<Alert type={Alerts.INFO}>
+  It is strongly recommended to implement a CSP in your website to help <a href="https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#context" target="_blank">mitigate attacks</a> such as Cross Site Scripting (XSS).
+</Alert>
+
+## Trusted Types
+
+If you are using [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for), you must allow dynamic script loading from the _https://js.basistheory.com_ origin. This should be done **BEFORE** [initialization](/docs/sdks/web/javascript#initialization).
+
 ```javascript showLineNumbers title="Trusted Types"
 trustedTypes.createPolicy("default", {
   createScriptURL: (input) => {
@@ -32,7 +38,7 @@ trustedTypes.createPolicy("default", {
 The setup above is recommended to avoid errors similar to these:
 
 <Alert type={Alerts.WARNING}>
-  Refused to load the script '&lt;URL&gt;' because it violates the following Content Security Policy directive: (...).
+  Refused to load the script '&lt;URL&gt;' because it violates the following Content Security Policy directive: (...).```
 </Alert>
 
 <Alert type={Alerts.WARNING}>
@@ -41,4 +47,4 @@ The setup above is recommended to avoid errors similar to these:
 
 <Alert type={Alerts.WARNING}>
   Failed to set the 'src' property on 'HTMLScriptElement': This document requires 'TrustedScriptURL' assignment.
-</Alert>
+</Alert>
diff --git a/docs/sdks/web/javascript/types.mdx b/docs/sdks/web/javascript/types.mdx
@@ -2,7 +2,7 @@
 sidebar_label: Types
 ---
 
-import { 
+import {
   CardElement,
   CardExpirationDateElement,
   CardNumberElement,
@@ -34,7 +34,7 @@ The `"card"` element type features a one-liner credit card collector containing
       window.addEventListener('load', () => {
         const cardElement = BasisTheory.createElement('card');
 
-        cardElement.mount('#card-element');  
+        cardElement.mount('#card-element');
       });
     </script>
   </body>
@@ -61,7 +61,7 @@ The `"text"` element type is a secure replacement for the `<input>` tag and enab
           placeholder: 'John Doe',
         });
 
-        textElement.mount('#text-element'); 
+        textElement.mount('#text-element');
       });
     </script>
   </body>
@@ -118,7 +118,7 @@ The `"cardExpirationDate"` element type features a month/year formatted input wi
           targetId: 'elementTypesCardExpirationDateElement',
         });
 
-        cardExpirationDateElement.mount('#card-expiration-date-element');  
+        cardExpirationDateElement.mount('#card-expiration-date-element');
       });
     </script>
   </body>
@@ -144,9 +144,9 @@ The `"cardVerificationCode"` element type is used to collect the card security c
           targetId: 'elementTypesCardVerificationCodeElement',
         });
 
-        cardVerificationCodeElement.mount('#card-verification-code-element');  
+        cardVerificationCodeElement.mount('#card-verification-code-element');
       });
     </script>
   </body>
 </html>
-```
+```
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "release": "semantic-release"
   },
   "dependencies": {
-    "@basis-theory/basis-theory-react": "^1.7.0",
+    "@basis-theory/basis-theory-react": "^1.7.1",
     "@cmfcmf/docusaurus-search-local": "^0.11.0",
     "@docusaurus/core": "2.2.0",
     "@docusaurus/plugin-client-redirects": "^2.2.0",

diff --git a/src/components/sdks/BasisTheoryComponentDisplay.module.css b/src/components/sdks/BasisTheoryComponentDisplay.module.css
@@ -73,6 +73,10 @@
   background-color: #ff605c;
 }
 
+.window .action:hover {
+  background-color: #FDB730;
+}
+
 .window .action:last-of-type:hover {
   background-color: #00ca4e;
 }
@@ -89,8 +93,9 @@
   margin-bottom: 0;
   padding-right: 16px;
   padding-left: 16px;
-  border: 1px solid var(--bt-default-border-color);
+  border: 1px solid var(--bt-component-border-color);
   border-radius: var(--ifm-global-radius);
+  background-color: white;
 }
 
 .element > div {

diff --git a/src/components/sdks/BasisTheoryComponentDisplay.tsx b/src/components/sdks/BasisTheoryComponentDisplay.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { 
+import {
   BasisTheoryProvider,
   useBasisTheory
 } from '@basis-theory/basis-theory-react';
@@ -11,7 +11,7 @@ interface ComponentDisplay {
 }
 
 export const BasisTheoryComponentDisplay = ({ title, children }: PropsWithChildren<ComponentDisplay>) => {
-  const { bt } = useBasisTheory('key_XVB48UzHJ57TdPtmLhJa9e', { elements: true });
+  const { bt } = useBasisTheory( '.', { elements: true });
 
   return (
     <BasisTheoryProvider bt={bt}>
@@ -34,4 +34,4 @@ export const BasisTheoryComponentDisplay = ({ title, children }: PropsWithChildr
       </div>
     </BasisTheoryProvider>
   )
-};
+};
diff --git a/src/css/bt-variables.scss b/src/css/bt-variables.scss
@@ -3,6 +3,7 @@
   --bt-heading-letter-spacing: -1px;
   --bt-code-font-family: "Source Code Pro";
   --bt-tabs-border-color: #d1d7ff;
+  --bt-component-border-color: #cacddb;
 
   /* Sidebar */
   --bt-sidebar-background-color: #f3f5fd;

diff --git a/src/typings.d.ts b/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '*.module.scss';
diff --git a/yarn.lock b/yarn.lock
@@ -1210,10 +1210,10 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@basis-theory/basis-theory-js@^1.55.0":
-  version "1.57.0"
-  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-1.57.0.tgz#0df84d1e8f6dacace3f41f4d3f46f51b7a45d81a"
-  integrity sha512-hawBsSgRTN44NJ+e7jRLpi5om3crHWf/+yjAuRkHbAV9Dek/MI7XqSJgan69KKhKoACh6fHsyY1Hx7BLJnWgTA==
+"@basis-theory/basis-theory-js@^1.62.1":
+  version "1.63.0"
+  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-js/-/basis-theory-js-1.63.0.tgz#b2873c48e49e28a13494ec40a5e3a84aa088e079"
+  integrity sha512-Bpmj3NQ2pThHo3g5JxNmKei/MmQc2XzLU7fSZQsEDMAo5rQozNMMA2Q21hYCmZCl7BXwN1YvW+nWcjAd+vjDAQ==
   dependencies:
     axios "^0.21.2"
     camelcase-keys "^6.2.2"
@@ -1223,12 +1223,12 @@
     snake-case "^3.0.4"
     snakecase-keys "^3.2.1"
 
-"@basis-theory/basis-theory-react@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-react/-/basis-theory-react-1.7.0.tgz#58366b70bdb4f034900e9cafbd63162e7d58135d"
-  integrity sha512-XfgbV/J9jhUuM72gWsLZX88QYd9Tdkt0I+l/knW2FsC9ezDGj7w4Wy41VSolJRnffg4ijz/Y+gPt1lyDLPTn6g==
+"@basis-theory/basis-theory-react@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@basis-theory/basis-theory-react/-/basis-theory-react-1.7.1.tgz#7a1fdff44739730bbc556e2228b19e701a44a4b3"
+  integrity sha512-dbjagROp/ZhG0u1DXZ++LeJSgzgRJqQxSQ+RxyanEPq3bpXSu0UOiJeysOl1AGf8qrzZI2EPawLN/g73JrotQg==
   dependencies:
-    "@basis-theory/basis-theory-js" "^1.55.0"
+    "@basis-theory/basis-theory-js" "^1.62.1"
 
 "@cmfcmf/docusaurus-search-local@^0.11.0":
   version "0.11.0"