From d9ebea7c15a7a557f1036d849e28e0225b308751 Mon Sep 17 00:00:00 2001 From: mishevong Date: Tue, 20 Jul 2021 16:22:10 -0700 Subject: [PATCH 1/8] feat #396 - add plausible --- src/__snapshots__/storybook.test.ts.snap | 338 ++++--- .../Plausible/Plausible.stories.tsx | 12 + src/components/Plausible/index.tsx | 104 +++ .../Plausible/plausible-exclusion.css | 828 ++++++++++++++++++ src/components/index.ts | 1 + 5 files changed, 1142 insertions(+), 141 deletions(-) create mode 100644 src/components/Plausible/Plausible.stories.tsx create mode 100644 src/components/Plausible/index.tsx create mode 100644 src/components/Plausible/plausible-exclusion.css diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index ce303573..5c9c2883 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -4579,6 +4579,62 @@ exports[`Storyshots PageLoader Default 1`] = ` `; +exports[`Storyshots Plausible Disable Plausible 1`] = ` +
+
+
+

+ Plausible Exclude +

+
+ Click the button below to toggle your exclusion in analytics for this site +
+
+ You currently + + + are not + + + + + are + + + excluding your visits. +
+ +
+
+
+`; + exports[`Storyshots Popover Default 1`] = `
@@ -4773,31 +4829,31 @@ exports[`Storyshots Radio Group Loading 1`] = ` className="light storyWrapper-0-2-2" >
 
 
  @@ -4923,29 +4979,29 @@ exports[`Storyshots ScrollableSection Multiple 1`] = ` >
apple
pineapple
mango
@@ -5081,17 +5137,17 @@ exports[`Storyshots ScrollableSection Scroll Without Arrow 1`] = ` className="light storyWrapper-0-2-2" >
pineapple @@ -5160,20 +5216,20 @@ exports[`Storyshots ScrollableSection Single 1`] = ` className="light storyWrapper-0-2-2" >
hello
Lorem @@ -5446,7 +5502,7 @@ exports[`Storyshots Select Icon 1`] = ` className="decorator-0-2-3" >
AWS @@ -5567,7 +5623,7 @@ exports[`Storyshots Select Search 1`] = ` className="decorator-0-2-3" >
press enter ↵ @@ -5795,19 +5851,19 @@ exports[`Storyshots ShortcutMicrocopy Icon Only 1`] = ` className="light storyWrapper-0-2-2" >
press ⌘ @@ -5821,24 +5877,24 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` className="light storyWrapper-0-2-2" >
press cmd ⌘ @@ -5846,12 +5902,12 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` + Enter
press cmd ⌘ @@ -5908,12 +5964,12 @@ exports[`Storyshots ShortcutMicrocopy Predefined Keys 1`] = ` + enter ↵ @@ -5927,7 +5983,7 @@ exports[`Storyshots Skeleton Circle 1`] = ` className="light storyWrapper-0-2-2" >   @@ -5939,27 +5995,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="light storyWrapper-0-2-2" >           @@ -5971,7 +6027,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="light storyWrapper-0-2-2" >   @@ -5983,21 +6039,21 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` className="light storyWrapper-0-2-2" >
vpc-flow-logs-are-disabled @@ -6329,7 +6385,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
FlowLog @@ -6364,10 +6420,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
visibility @@ -6376,7 +6432,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
instance-is-exposed-to-internet @@ -6405,7 +6461,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
instance @@ -6440,10 +6496,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6452,7 +6508,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
default-security-group-should-not-allow-traffic @@ -6481,7 +6537,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6516,10 +6572,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
networking @@ -6528,7 +6584,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ssh-from-internet @@ -6557,7 +6613,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6592,10 +6648,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6604,7 +6660,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ebs-volume-is-not-encrypted @@ -6633,7 +6689,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
volume @@ -6668,10 +6724,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
cryptography @@ -6934,7 +6990,7 @@ exports[`Storyshots TimeInput Error 1`] = ` className="light storyWrapper-0-2-2" >
Foo
+
+

+ Plausible Exclude +

+
+ Click the button below to toggle your exclusion in analytics + for this site +
+
+ You currently + + are not + + + are + + excluding your visits. +
+ +
+
+ ) +} diff --git a/src/components/Plausible/plausible-exclusion.css b/src/components/Plausible/plausible-exclusion.css new file mode 100644 index 00000000..c5ef43a9 --- /dev/null +++ b/src/components/Plausible/plausible-exclusion.css @@ -0,0 +1,828 @@ +/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */ + +/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/** +Use a more readable tab size (opinionated). +*/ + +:root { + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +/** +1. Correct the line height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +*/ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* +Sections +======== +*/ + +/** +Remove the margin in all browsers. +*/ + +body { + margin: 0; +} + +/** +Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +*/ + +body { + font-family: system-ui, -apple-system, + /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, + Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', + Menlo, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +1. Remove the inheritance of text transform in Firefox. +*/ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +/** +Restore the focus styles unset by the previous rule. +*/ + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/** + * Manually forked from SUIT CSS Base: https://github.com/suitcss/base + * A thin layer on top of normalize.css that provides a starting point more + * suitable for web applications. + */ + +/** + * Removes the default spacing and border for appropriate elements. + */ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +button { + background-color: transparent; + background-image: none; +} + +/** + * Work around a Firefox/IE bug where the transparent `button` background + * results in a loss of the default `button` focus styles. + */ + +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} + +fieldset { + margin: 0; + padding: 0; +} + +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} + +/** + * Tailwind custom reset styles + */ + +/** + * 1. Use the user's configured `sans` font-family (with Tailwind's default + * sans-serif font stack as a fallback) as a sane default. + * 2. Use Tailwind's default "normal" line-height so the user isn't forced + * to override it to ensure consistency even when using the default theme. + */ + +html { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; /* 1 */ + line-height: 1.5; /* 2 */ +} + +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + +/** + * 1. Prevent padding and border from affecting element width. + * + * We used to set this in the html element and inherit from + * the parent element for everything else. This caused issues + * in shadow-dom-enhanced elements like
where the content + * is wrapped by a div with box-sizing set to `content-box`. + * + * https://github.com/mozdevs/cssremedy/issues/4 + * + * + * 2. Allow adding a border to an element by just adding a border-width. + * + * By default, the way the browser specifies that an element should have no + * border is by setting it's border-style to `none` in the user-agent + * stylesheet. + * + * In order to easily add borders to elements by just setting the `border-width` + * property, we change the default border-style for all elements to `solid`, and + * use border-width to hide them instead. This way our `border` utilities only + * need to set the `border-width` property instead of the entire `border` + * shorthand, making our border utilities much more straightforward to compose. + * + * https://github.com/tailwindcss/tailwindcss/pull/116 + */ + +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #e5e7eb; /* 2 */ +} + +/* + * Ensure horizontal rules are visible by default + */ + +hr { + border-top-width: 1px; +} + +/** + * Undo the `border-style: none` reset that Normalize applies to images so that + * our `border-{width}` utilities have the expected effect. + * + * The Normalize reset is unnecessary for us since we default the border-width + * to 0 on all elements. + * + * https://github.com/tailwindcss/tailwindcss/issues/362 + */ + +img { + border-style: solid; +} + +textarea { + resize: vertical; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + opacity: 1; + color: #9ca3af; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + opacity: 1; + color: #9ca3af; +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #9ca3af; +} + +button { + cursor: pointer; +} + +table { + border-collapse: collapse; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/** + * Reset links to optimize for opt-in styling instead of + * opt-out. + */ + +a { + color: inherit; + text-decoration: inherit; +} + +/** + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. + */ + +button, +input, +optgroup, +select, +textarea { + padding: 0; + line-height: inherit; + color: inherit; +} + +/** + * Use the configured 'mono' font family for elements that + * are expected to be rendered with a monospace font, falling + * back to the system monospace stack if there is no configured + * 'mono' font family. + */ + +pre, +code, +kbd, +samp { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; +} + +/** + * Make replaced elements `display: block` by default as that's + * the behavior you want almost all of the time. Inspired by + * CSS Remedy, with `svg` added as well. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} + +/** + * Constrain images and videos to the parent width and preserve + * their instrinsic aspect ratio. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +video { + max-width: 100%; + height: auto; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); +} + +.bg-indigo-600 { + --tw-bg-opacity: 1; + background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); +} + +.hover\:bg-indigo-700:hover { + --tw-bg-opacity: 1; + background-color: rgba(67, 56, 202, var(--tw-bg-opacity)); +} + +.dark .dark\:bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgba(17, 24, 39, var(--tw-bg-opacity)); +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + +.table { + display: table; +} + +.hidden { + display: none; +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.font-semibold { + font-weight: 600; +} + +.font-bold { + font-weight: 700; +} + +.font-black { + font-weight: 900; +} + +.h-full { + height: 100%; +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-5xl { + font-size: 3rem; + line-height: 1; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.mt-24 { + margin-top: 6rem; +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +* { + --tw-shadow: 0 0 #0000; +} + +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +* { + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; +} + +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-offset-indigo-200:focus { + --tw-ring-offset-color: #c7d2fe; +} + +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + +.focus\:ring-indigo-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); +} + +.text-center { + text-align: center; +} + +.text-white { + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); +} + +.text-red-600 { + --tw-text-opacity: 1; + color: rgba(220, 38, 38, var(--tw-text-opacity)); +} + +.text-green-600 { + --tw-text-opacity: 1; + color: rgba(5, 150, 105, var(--tw-text-opacity)); +} + +.dark .dark\:text-gray-100 { + --tw-text-opacity: 1; + color: rgba(243, 244, 246, var(--tw-text-opacity)); +} + +.dark .dark\:text-red-400 { + --tw-text-opacity: 1; + color: rgba(248, 113, 113, var(--tw-text-opacity)); +} + +.dark .dark\:text-green-400 { + --tw-text-opacity: 1; + color: rgba(52, 211, 153, var(--tw-text-opacity)); +} + +.w-full { + width: 100%; +} + +.transition { + transition-property: background-color, border-color, color, fill, stroke, + opacity, box-shadow, transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + +.duration-200 { + transition-duration: 200ms; +} + +@-webkit-keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@-webkit-keyframes ping { + 75%, + 100% { + transform: scale(2); + opacity: 0; + } +} + +@keyframes ping { + 75%, + 100% { + transform: scale(2); + opacity: 0; + } +} + +@-webkit-keyframes pulse { + 50% { + opacity: 0.5; + } +} + +@keyframes pulse { + 50% { + opacity: 0.5; + } +} + +@-webkit-keyframes bounce { + 0%, + 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } +} + +@keyframes bounce { + 0%, + 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } +} + +@media (min-width: 640px) { +} + +@media (min-width: 768px) { +} + +@media (min-width: 1024px) { +} + +@media (min-width: 1280px) { +} + +@media (min-width: 1536px) { +} diff --git a/src/components/index.ts b/src/components/index.ts index c7e4d7fb..b3397995 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -30,6 +30,7 @@ export * from './PageContainer' export * from './PageLoader' export * from './Pages/MadeWithLove' export * from './Pages/Error404' +export * from './Plausible' export * from './Popover' export * from './ProgressBar' export * from './RadioGroup' From 551b7972c8a78dc6fe723494d2f59d6ff7be9dff Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 14:16:00 -0700 Subject: [PATCH 2/8] feat #396 - update stories --- .../Plausible/Plausible.stories.tsx | 19 ++++++++++++++++++- src/components/Plausible/index.tsx | 5 ++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/Plausible/Plausible.stories.tsx b/src/components/Plausible/Plausible.stories.tsx index c63f8045..adc506c3 100644 --- a/src/components/Plausible/Plausible.stories.tsx +++ b/src/components/Plausible/Plausible.stories.tsx @@ -1,3 +1,4 @@ +import { createUseStyles } from 'react-jss' import { Plausible } from '.' import React from 'react' import { Meta, Story } from '@storybook/react' @@ -7,6 +8,22 @@ export default { title: 'Plausible' } as Meta -const Template: Story = () => +const useStyles = createUseStyles({ + container: { + height: '100vh' + } +}) + +const DecoratedTemplate = () => { + const decoratedStyles = useStyles() + + return ( +
+ +
+ ) +} + +const Template: Story = () => export const DisablePlausible = Template.bind({}) diff --git a/src/components/Plausible/index.tsx b/src/components/Plausible/index.tsx index dccdb492..f1eaaaa5 100644 --- a/src/components/Plausible/index.tsx +++ b/src/components/Plausible/index.tsx @@ -6,6 +6,9 @@ import React, { FC, useEffect } from 'react' const { spacing } = styleguide const useStyles = createUseStyles({ + container: { + height: '100%' + }, exclude: { padding: `0 ${spacing.xs}px` } @@ -64,7 +67,7 @@ export const Plausible: FC = () => { } return ( -
+

Plausible Exclude From 21e53f1b15f009d97f141bf98a17d62e3c4ed4fd Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 14:21:29 -0700 Subject: [PATCH 3/8] feat #396 - update storybook --- src/__snapshots__/storybook.test.ts.snap | 358 ++++++++++++----------- 1 file changed, 182 insertions(+), 176 deletions(-) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 5c9c2883..3b6d83cc 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -4583,53 +4583,59 @@ exports[`Storyshots Plausible Disable Plausible 1`] = `
-
+
-

- Plausible Exclude -

-
- Click the button below to toggle your exclusion in analytics for this site -
- You currently - + Plausible Exclude +

+
+ Click the button below to toggle your exclusion in analytics for this site +
+
+ You currently - are not + + are not + - - - are + + are + - - excluding your visits. + excluding your visits. +
+
-
@@ -4709,17 +4715,17 @@ exports[`Storyshots ProgressBar Default 1`] = ` } >
@@ -4829,31 +4835,31 @@ exports[`Storyshots Radio Group Loading 1`] = ` className="light storyWrapper-0-2-2" >
 
 
  @@ -4979,29 +4985,29 @@ exports[`Storyshots ScrollableSection Multiple 1`] = ` >
apple
pineapple
mango
@@ -5137,17 +5143,17 @@ exports[`Storyshots ScrollableSection Scroll Without Arrow 1`] = ` className="light storyWrapper-0-2-2" >
pineapple @@ -5216,20 +5222,20 @@ exports[`Storyshots ScrollableSection Single 1`] = ` className="light storyWrapper-0-2-2" >
hello
Lorem @@ -5502,7 +5508,7 @@ exports[`Storyshots Select Icon 1`] = ` className="decorator-0-2-3" >
AWS @@ -5623,7 +5629,7 @@ exports[`Storyshots Select Search 1`] = ` className="decorator-0-2-3" >
press enter ↵ @@ -5851,19 +5857,19 @@ exports[`Storyshots ShortcutMicrocopy Icon Only 1`] = ` className="light storyWrapper-0-2-2" >
press ⌘ @@ -5877,24 +5883,24 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` className="light storyWrapper-0-2-2" >
press cmd ⌘ @@ -5902,12 +5908,12 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` + Enter
press cmd ⌘ @@ -5964,12 +5970,12 @@ exports[`Storyshots ShortcutMicrocopy Predefined Keys 1`] = ` + enter ↵ @@ -5983,7 +5989,7 @@ exports[`Storyshots Skeleton Circle 1`] = ` className="light storyWrapper-0-2-2" >   @@ -5995,27 +6001,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="light storyWrapper-0-2-2" >           @@ -6027,7 +6033,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="light storyWrapper-0-2-2" >   @@ -6039,21 +6045,21 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` className="light storyWrapper-0-2-2" >
vpc-flow-logs-are-disabled @@ -6385,7 +6391,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
FlowLog @@ -6420,10 +6426,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
visibility @@ -6432,7 +6438,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
instance-is-exposed-to-internet @@ -6461,7 +6467,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
instance @@ -6496,10 +6502,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6508,7 +6514,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
default-security-group-should-not-allow-traffic @@ -6537,7 +6543,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6572,10 +6578,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
networking @@ -6584,7 +6590,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ssh-from-internet @@ -6613,7 +6619,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6648,10 +6654,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6660,7 +6666,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ebs-volume-is-not-encrypted @@ -6689,7 +6695,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
volume @@ -6724,10 +6730,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
cryptography @@ -6990,7 +6996,7 @@ exports[`Storyshots TimeInput Error 1`] = ` className="light storyWrapper-0-2-2" >
Foo
-

- Plausible Exclude -

-
- Click the button below to toggle your exclusion in analytics for this site -
-
- You currently - - - are not - - - - - are - - - excluding your visits. -
- + are not + + excluding your visits.
+
@@ -4715,17 +4701,17 @@ exports[`Storyshots ProgressBar Default 1`] = ` } >
@@ -4835,31 +4821,31 @@ exports[`Storyshots Radio Group Loading 1`] = ` className="light storyWrapper-0-2-2" >
 
 
  @@ -4985,29 +4971,29 @@ exports[`Storyshots ScrollableSection Multiple 1`] = ` >
apple
pineapple
mango
@@ -5143,17 +5129,17 @@ exports[`Storyshots ScrollableSection Scroll Without Arrow 1`] = ` className="light storyWrapper-0-2-2" >
pineapple @@ -5222,20 +5208,20 @@ exports[`Storyshots ScrollableSection Single 1`] = ` className="light storyWrapper-0-2-2" >
hello
Lorem @@ -5508,7 +5494,7 @@ exports[`Storyshots Select Icon 1`] = ` className="decorator-0-2-3" >
AWS @@ -5629,7 +5615,7 @@ exports[`Storyshots Select Search 1`] = ` className="decorator-0-2-3" >
press enter ↵ @@ -5857,19 +5843,19 @@ exports[`Storyshots ShortcutMicrocopy Icon Only 1`] = ` className="light storyWrapper-0-2-2" >
press ⌘ @@ -5883,24 +5869,24 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` className="light storyWrapper-0-2-2" >
press cmd ⌘ @@ -5908,12 +5894,12 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` + Enter
press cmd ⌘ @@ -5970,12 +5956,12 @@ exports[`Storyshots ShortcutMicrocopy Predefined Keys 1`] = ` + enter ↵ @@ -5989,7 +5975,7 @@ exports[`Storyshots Skeleton Circle 1`] = ` className="light storyWrapper-0-2-2" >   @@ -6001,27 +5987,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="light storyWrapper-0-2-2" >           @@ -6033,7 +6019,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="light storyWrapper-0-2-2" >   @@ -6045,21 +6031,21 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` className="light storyWrapper-0-2-2" >
vpc-flow-logs-are-disabled @@ -6391,7 +6377,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
FlowLog @@ -6426,10 +6412,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
visibility @@ -6438,7 +6424,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
instance-is-exposed-to-internet @@ -6467,7 +6453,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
instance @@ -6502,10 +6488,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6514,7 +6500,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
default-security-group-should-not-allow-traffic @@ -6543,7 +6529,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6578,10 +6564,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
networking @@ -6590,7 +6576,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ssh-from-internet @@ -6619,7 +6605,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6654,10 +6640,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6666,7 +6652,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ebs-volume-is-not-encrypted @@ -6695,7 +6681,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
volume @@ -6730,10 +6716,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
cryptography @@ -6996,7 +6982,7 @@ exports[`Storyshots TimeInput Error 1`] = ` className="light storyWrapper-0-2-2" >
Foo
-
-

- Plausible Exclude -

-
- Click the button below to toggle your exclusion in analytics - for this site -
-
- You currently - - are not - - - are - - excluding your visits. -
- +
Plausible Exclude
+
+ Click the button below to toggle your exclusion in analytics for + this site +
+
+ You currently + + {isExcluded ? 'are' : 'are not'} + + excluding your visits.
+
) } From 6f522dccb91f9920cc55716a27972d78f6338f67 Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 15:13:09 -0700 Subject: [PATCH 5/8] feat #396 - add styles --- src/__snapshots__/storybook.test.ts.snap | 310 +++---- src/components/Plausible/index.tsx | 36 +- .../Plausible/plausible-exclusion.css | 828 ------------------ 3 files changed, 176 insertions(+), 998 deletions(-) delete mode 100644 src/components/Plausible/plausible-exclusion.css diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index ddcc6f49..8d045880 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -4587,32 +4587,32 @@ exports[`Storyshots Plausible Disable Plausible 1`] = ` className="container-0-2-232" >
Plausible Exclude
Click the button below to toggle your exclusion in analytics for this site -
-
- You currently - - are not - - excluding your visits. + You currently + + are not + + excluding your visits. +
pineapple @@ -5208,20 +5208,20 @@ exports[`Storyshots ScrollableSection Single 1`] = ` className="light storyWrapper-0-2-2" >
hello
Lorem @@ -5494,7 +5494,7 @@ exports[`Storyshots Select Icon 1`] = ` className="decorator-0-2-3" >
AWS @@ -5615,7 +5615,7 @@ exports[`Storyshots Select Search 1`] = ` className="decorator-0-2-3" >
press enter ↵ @@ -5843,19 +5843,19 @@ exports[`Storyshots ShortcutMicrocopy Icon Only 1`] = ` className="light storyWrapper-0-2-2" >
press ⌘ @@ -5869,24 +5869,24 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` className="light storyWrapper-0-2-2" >
press cmd ⌘ @@ -5894,12 +5894,12 @@ exports[`Storyshots ShortcutMicrocopy Mixed 1`] = ` + Enter
press cmd ⌘ @@ -5956,12 +5956,12 @@ exports[`Storyshots ShortcutMicrocopy Predefined Keys 1`] = ` + enter ↵ @@ -5975,7 +5975,7 @@ exports[`Storyshots Skeleton Circle 1`] = ` className="light storyWrapper-0-2-2" >   @@ -5987,27 +5987,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="light storyWrapper-0-2-2" >           @@ -6019,7 +6019,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="light storyWrapper-0-2-2" >   @@ -6031,21 +6031,21 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` className="light storyWrapper-0-2-2" >
vpc-flow-logs-are-disabled @@ -6377,7 +6377,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
FlowLog @@ -6412,10 +6412,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
visibility @@ -6424,7 +6424,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
instance-is-exposed-to-internet @@ -6453,7 +6453,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
instance @@ -6488,10 +6488,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6500,7 +6500,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
default-security-group-should-not-allow-traffic @@ -6529,7 +6529,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6564,10 +6564,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
networking @@ -6576,7 +6576,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ssh-from-internet @@ -6605,7 +6605,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
security-group @@ -6640,10 +6640,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
network @@ -6652,7 +6652,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
ebs-volume-is-not-encrypted @@ -6681,7 +6681,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
volume @@ -6716,10 +6716,10 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` style={Object {}} >
cryptography @@ -6982,7 +6982,7 @@ exports[`Storyshots TimeInput Error 1`] = ` className="light storyWrapper-0-2-2" >
Foo
Click the button below to toggle your exclusion in analytics for this site +
+ You currently + + {isExcluded ? 'are' : 'are not'} + + excluding your visits. +
-
- You currently - - {isExcluded ? 'are' : 'are not'} - - excluding your visits. -
-
diff --git a/src/components/Plausible/plausible-exclusion.css b/src/components/Plausible/plausible-exclusion.css deleted file mode 100644 index c5ef43a9..00000000 --- a/src/components/Plausible/plausible-exclusion.css +++ /dev/null @@ -1,828 +0,0 @@ -/*! tailwindcss v2.0.3 | MIT License | https://tailwindcss.com */ - -/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ - -/* -Document -======== -*/ - -/** -Use a better box model (opinionated). -*/ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -:root { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; -} - -/** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -*/ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* -Sections -======== -*/ - -/** -Remove the margin in all browsers. -*/ - -body { - margin: 0; -} - -/** -Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - -body { - font-family: system-ui, -apple-system, - /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, - Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -} - -/* -Grouping content -================ -*/ - -/** -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -*/ - -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ -} - -/* -Text-level semantics -==================== -*/ - -/** -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/** -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', - Menlo, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -Tabular data -============ -*/ - -/** -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -*/ - -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ -} - -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** -Remove the inheritance of text transform in Edge and Firefox. -1. Remove the inheritance of text transform in Firefox. -*/ - -button, -select { - /* 1 */ - text-transform: none; -} - -/** -Correct the inability to style clickable types in iOS and Safari. -*/ - -button { - -webkit-appearance: button; -} - -/** -Remove the inner border and padding in Firefox. -*/ - -/** -Restore the focus styles unset by the previous rule. -*/ - -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 -*/ - -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -button { - background-color: transparent; - background-image: none; -} - -/** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - -fieldset { - margin: 0; - padding: 0; -} - -ol, -ul { - list-style: none; - margin: 0; - padding: 0; -} - -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, - 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; /* 1 */ - line-height: 1.5; /* 2 */ -} - -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} - -/* - * Ensure horizontal rules are visible by default - */ - -hr { - border-top-width: 1px; -} - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -img { - border-style: solid; -} - -textarea { - resize: vertical; -} - -input::-moz-placeholder, -textarea::-moz-placeholder { - opacity: 1; - color: #9ca3af; -} - -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { - opacity: 1; - color: #9ca3af; -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - color: #9ca3af; -} - -button { - cursor: pointer; -} - -table { - border-collapse: collapse; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button, -input, -optgroup, -select, -textarea { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -pre, -code, -kbd, -samp { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; -} - -/** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - vertical-align: middle; -} - -/** - * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -video { - max-width: 100%; - height: auto; -} - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); -} - -.bg-indigo-600 { - --tw-bg-opacity: 1; - background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); -} - -.hover\:bg-indigo-700:hover { - --tw-bg-opacity: 1; - background-color: rgba(67, 56, 202, var(--tw-bg-opacity)); -} - -.dark .dark\:bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgba(17, 24, 39, var(--tw-bg-opacity)); -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.table { - display: table; -} - -.hidden { - display: none; -} - -.flex-col { - flex-direction: column; -} - -.items-center { - align-items: center; -} - -.font-semibold { - font-weight: 600; -} - -.font-bold { - font-weight: 700; -} - -.font-black { - font-weight: 900; -} - -.h-full { - height: 100%; -} - -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - -.text-5xl { - font-size: 3rem; - line-height: 1; -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - -.mt-24 { - margin-top: 6rem; -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -* { - --tw-shadow: 0 0 #0000; -} - -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), - 0 2px 4px -1px rgba(0, 0, 0, 0.06); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), - var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -* { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; -} - -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 - var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 - calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), - var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-offset-indigo-200:focus { - --tw-ring-offset-color: #c7d2fe; -} - -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} - -.focus\:ring-indigo-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity)); -} - -.text-center { - text-align: center; -} - -.text-white { - --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); -} - -.text-red-600 { - --tw-text-opacity: 1; - color: rgba(220, 38, 38, var(--tw-text-opacity)); -} - -.text-green-600 { - --tw-text-opacity: 1; - color: rgba(5, 150, 105, var(--tw-text-opacity)); -} - -.dark .dark\:text-gray-100 { - --tw-text-opacity: 1; - color: rgba(243, 244, 246, var(--tw-text-opacity)); -} - -.dark .dark\:text-red-400 { - --tw-text-opacity: 1; - color: rgba(248, 113, 113, var(--tw-text-opacity)); -} - -.dark .dark\:text-green-400 { - --tw-text-opacity: 1; - color: rgba(52, 211, 153, var(--tw-text-opacity)); -} - -.w-full { - width: 100%; -} - -.transition { - transition-property: background-color, border-color, color, fill, stroke, - opacity, box-shadow, transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.ease-in { - transition-timing-function: cubic-bezier(0.4, 0, 1, 1); -} - -.duration-200 { - transition-duration: 200ms; -} - -@-webkit-keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@-webkit-keyframes ping { - 75%, - 100% { - transform: scale(2); - opacity: 0; - } -} - -@keyframes ping { - 75%, - 100% { - transform: scale(2); - opacity: 0; - } -} - -@-webkit-keyframes pulse { - 50% { - opacity: 0.5; - } -} - -@keyframes pulse { - 50% { - opacity: 0.5; - } -} - -@-webkit-keyframes bounce { - 0%, - 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} - -@keyframes bounce { - 0%, - 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} - -@media (min-width: 640px) { -} - -@media (min-width: 768px) { -} - -@media (min-width: 1024px) { -} - -@media (min-width: 1280px) { -} - -@media (min-width: 1536px) { -} From 470c80991ba7615faa818339f408b2293920faae Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 15:16:17 -0700 Subject: [PATCH 6/8] feat #400 - update link targets to blank --- src/__snapshots__/storybook.test.ts.snap | 18 ++++++++++++------ src/components/Pages/MadeWithLove.tsx | 2 ++ 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 8d045880..dc2a9efc 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -3129,12 +3129,13 @@ exports[`Storyshots Made With Love With Love 1`] = ` className="ant-typography hiringLink-0-2-225" data-test="link" href="http://www.linkedin.com" + rel="noopener noreferrer" style={ Object { "WebkitLineClamp": undefined, } } - target="_self" + target="_blank" > We’re hiring! @@ -3152,12 +3153,13 @@ exports[`Storyshots Made With Love With Love 1`] = ` className="ant-typography footerIcon-0-2-221" data-test="link" href="http://www.twitter.com" + rel="noopener noreferrer" style={ Object { "WebkitLineClamp": undefined, } } - target="_self" + target="_blank" > = ({ We’re hiring! @@ -223,6 +224,7 @@ export const MadeWithLove: FC = ({ classes={[compClasses.footerIcon]} href={href} key={i} + target='_blank' > From ec583c4134de3651b15604298d7d636932319b28 Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 15:35:52 -0700 Subject: [PATCH 7/8] feat #400 - rebased with dev --- src/components/Plausible/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Plausible/index.tsx b/src/components/Plausible/index.tsx index 71654d8a..a94ec621 100644 --- a/src/components/Plausible/index.tsx +++ b/src/components/Plausible/index.tsx @@ -43,7 +43,7 @@ const useStyles = createUseStyles({ paddingTop: spacing.s }, title: { - fontSize: spacing['m+'] * 3, + fontSize: spacing.l * 2, fontWeight: fontWeight.bold } }) From 73c15b6cf27a725915c2e47b9010de69716426e6 Mon Sep 17 00:00:00 2001 From: mishevong Date: Wed, 21 Jul 2021 15:49:16 -0700 Subject: [PATCH 8/8] feat #396 - remove window from localStorage --- src/components/Plausible/index.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Plausible/index.tsx b/src/components/Plausible/index.tsx index a94ec621..6378fd8f 100644 --- a/src/components/Plausible/index.tsx +++ b/src/components/Plausible/index.tsx @@ -49,20 +49,18 @@ const useStyles = createUseStyles({ }) export const Plausible: FC = () => { - const [isExcluded, setIsExcluded] = useState( - window.localStorage.plausible_ignore - ) + const [isExcluded, setIsExcluded] = useState(localStorage.plausible_ignore) const classes = useStyles({ isExcluded }) const toggleExclusion = () => { - const exclusionState = window.localStorage.plausible_ignore === 'true' + const exclusionState = localStorage.plausible_ignore === 'true' if (exclusionState) { setIsExcluded(false) - delete window.localStorage.plausible_ignore + delete localStorage.plausible_ignore } else { setIsExcluded(true) - window.localStorage.plausible_ignore = 'true' + localStorage.plausible_ignore = 'true' } } @@ -80,7 +78,7 @@ export const Plausible: FC = () => { excluding your visits.
-