From 58a967d61fdf4ac859b4d07078a1a5a9a2eaf1dd Mon Sep 17 00:00:00 2001 From: Karol Kozer Date: Fri, 9 Sep 2022 13:41:37 +0200 Subject: [PATCH] Add globalStyles prop --- README.md | 20 +++ package.json | 2 +- src/Epg/Epg.tsx | 8 +- src/Epg/hooks/useEpg.tsx | 3 + src/Epg/styles/Program.styles.ts | 1 - src/Epg/styles/global.styles.ts | 272 +------------------------------ 6 files changed, 32 insertions(+), 274 deletions(-) diff --git a/README.md b/README.md index b90c02b..cdbc9cf 100644 --- a/README.md +++ b/README.md @@ -203,11 +203,31 @@ Available options in useEpg | `isLine` | `boolean` | optional | Show/hide line | | `isRTL` | `boolean` | optional | Change direction to RTL or LTR. Default value is false | | `theme` | `object` | optional | Object with theme schema | +| `globalStyles` | `string` | optional | Inject custom global styles and font. Font weight: 400,500,600. Default font is "Inter" | #### Note about width and height props Without declaring the `width` and `length` properties, the component takes the dimensions of the parent element. +#### globalStyles + +Inject own custom font and other global styles. + +```tsx +const globalStyles = ` + @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); + + .planby { + font-family: "Inter", system-ui, -apple-system, + "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji"; + } + + // Other styles + ... +`; +``` + #### Instance Properties Properties returned from useEpg diff --git a/package.json b/package.json index 810ba68..dcb21d1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "planby", "author": "Karol Kozer", - "version": "0.4.0", + "version": "1.1.0", "license": "MIT", "repository": { "type": "git", diff --git a/src/Epg/Epg.tsx b/src/Epg/Epg.tsx index 325cc59..4130709 100644 --- a/src/Epg/Epg.tsx +++ b/src/Epg/Epg.tsx @@ -23,6 +23,7 @@ interface EpgProps { children: React.ReactNode; loader?: React.ReactNode; theme: Theme; + globalStyles?: string; sidebarWidth: number; } @@ -34,8 +35,9 @@ export const Epg = React.forwardRef( children, width, height, - theme, sidebarWidth, + theme, + globalStyles: customGlobalStyles, isRTL = false, isSidebar = true, isTimeline = true, @@ -46,10 +48,12 @@ export const Epg = React.forwardRef( containerRef ) => { const renderLoader = () => LoaderComponent ?? ; + const epgGlobalStyles = customGlobalStyles ?? globalStyles; return ( - + ({ diff --git a/src/Epg/styles/Program.styles.ts b/src/Epg/styles/Program.styles.ts index 9a47231..cda9df6 100644 --- a/src/Epg/styles/Program.styles.ts +++ b/src/Epg/styles/Program.styles.ts @@ -48,7 +48,6 @@ const Elipsis = ` export const ProgramTitle = styled.p<{ theme?: Theme }>` font-size: 14px; - font-weight: 400; text-align: left; margin-top: 0; margin-bottom: 5px; diff --git a/src/Epg/styles/global.styles.ts b/src/Epg/styles/global.styles.ts index 15a98d0..e995107 100644 --- a/src/Epg/styles/global.styles.ts +++ b/src/Epg/styles/global.styles.ts @@ -1,279 +1,11 @@ import { css } from "@emotion/react"; export const globalStyles = css` - @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Work+Sans:ital,wght@0,200;0,400;0,500;0,600;1,300&display=swap"); + @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); - /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ - - /* -Document -======== -*/ - - /** -Use a better box model (opinionated). -*/ - - *, - ::before, - ::after { - box-sizing: border-box; - } - - /** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size (opinionated). -*/ - - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - } - - /* -Sections -======== -*/ - - /** -1. Remove the margin in all browsers. -2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - - body { - margin: 0; /* 1 */ + .planby { font-family: "Inter", 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"; /* 2 */ } - - /* -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] { - 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. -*/ - - button, - select { - text-transform: none; - } - - /** -Correct the inability to style clickable types in iOS and Safari. -*/ - - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } - - /** -Remove the inner border and padding in Firefox. -*/ - - ::-moz-focus-inner { - border-style: none; - padding: 0; - } - - /** -Restore the focus styles unset by the previous rule. -*/ - - :-moz-focusring { - outline: 1px dotted ButtonText; - } - - /** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 -*/ - - :-moz-ui-invalid { - box-shadow: none; - } - - /** -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. -*/ - - ::-webkit-inner-spin-button, - ::-webkit-outer-spin-button { - height: auto; - } - - /** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - - [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ - } - - /** -Remove the inner padding in Chrome and Safari on macOS. -*/ - - ::-webkit-search-decoration { - -webkit-appearance: none; - } - - /** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ - } - - /* -Interactive -=========== -*/ - - /* -Add the correct display in Chrome and Safari. -*/ - - summary { - display: list-item; - } `;