feat(PPDSC-2005): rename NewskitProvider to NewsKitProvider

.storybook/preview.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
 import {withPerformance} from 'storybook-addon-performance';
 
-import {NewskitProvider, styled, getColorCssFromTheme} from '../src';
+import {NewsKitProvider, styled, getColorCssFromTheme} from '../src';
 import {getThemeObject} from '../src/test/theme-select-object';
 
 const unlimitedScenarios = [
@@ -103,13 +103,13 @@ export const decorators = [
   },
   (Story, context) => {
     return (
-      <NewskitProvider
+      <NewsKitProvider
         theme={getThemeObject(context?.globals?.backgrounds?.value)}
       >
         <Background>
           <Story />
         </Background>
-      </NewskitProvider>
+      </NewsKitProvider>
     );
   },
   withPerformance,

e2e/index.tsx

@@ -2,12 +2,12 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import tests from './tests';
-import {newskitLightTheme, compileTheme, NewskitProvider} from '../src';
+import {newskitLightTheme, compileTheme, NewsKitProvider} from '../src';
 
 const app = (
-  <NewskitProvider theme={compileTheme(newskitLightTheme)}>
+  <NewsKitProvider theme={compileTheme(newskitLightTheme)}>
     {tests()}
-  </NewskitProvider>
+  </NewsKitProvider>
 );
 
 ReactDOM.render(app, document.getElementById('root'));

site/pages/_app.tsx

@@ -3,7 +3,7 @@ import {
   createEventInstrumentation,
   instrumentationHandlers,
   UncompiledTheme,
-  NewskitProvider,
+  NewsKitProvider,
 } from 'newskit';
 import App, {AppContext} from 'next/app';
 import {HeadNextSeo} from '../components/head-next-seo/head-next-seo';
@@ -135,7 +135,7 @@ export default class MyApp extends App<Props, State> {
           }}
         />
 
-        <NewskitProvider
+        <NewsKitProvider
           theme={theme}
           layer={{zIndex: 1000}}
           instrumentation={createEventInstrumentation(handlers, {
@@ -151,7 +151,7 @@ export default class MyApp extends App<Props, State> {
               themeMode={themeMode}
             />
           </ThemeMode.Provider>
-        </NewskitProvider>
+        </NewsKitProvider>
       </>
     );
   }

site/pages/getting-started/code/engineering-quickstart.tsx

@@ -167,7 +167,7 @@ const EngineeringQuickstart = (layoutProps: LayoutProps) => (
                 react components
               </Link>
               . One thing to bear in mind is that they will need to be
-              descendants of a <InlineCode>NewskitProvider</InlineCode> which
+              descendants of a <InlineCode>NewsKitProvider</InlineCode> which
               provides a single wrapper to configure your application. It adds a{' '}
               <Link href="/theme/theming/using-a-theme/">ThemeProvider</Link>,{' '}
               <Link href="/components/utils/hooks/#usemediaqueryobject">
@@ -184,18 +184,18 @@ const EngineeringQuickstart = (layoutProps: LayoutProps) => (
               The following example shows the &quot;Hello World!&quot; example
               of using a NewsKit{' '}
               <Link href="/components/tag/">Tag component</Link> with the
-              NewskitProvider.
+              NewsKitProvider.
             </>
           }
           showSeparator
         >
           <Code>
-            {`import {NewskitProvider, Tag, TagSize, newskitLightTheme} from 'newskit';
+            {`import {NewsKitProvider, Tag, TagSize, newskitLightTheme} from 'newskit';
 import React from 'react';
 export default class App extends React.Component {
   render() {
     return (
-      <NewskitProvider 
+      <NewsKitProvider 
         theme={newskitLightTheme}
         instrumentation={'instrumentation provider props'}
         layer={'layer organizer props'}
@@ -205,7 +205,7 @@ export default class App extends React.Component {
           size={TagSize.Medium}>
             Tag Content
         </Tag>
-      </NewskitProvider>
+      </NewsKitProvider>
     )
   }
 }`}

site/pages/getting-started/code/instrumentation.tsx

@@ -190,7 +190,7 @@ const InstrumentationSetup = (layoutProps: LayoutProps) => (
               <br />
               <InlineMessage>
                 {' '}
-                Keep in mind that <InlineCode>NewskitProvider</InlineCode>{' '}
+                Keep in mind that <InlineCode>NewsKitProvider</InlineCode>{' '}
                 already contains{' '}
                 <InlineCode>InstrumentationProvider</InlineCode> so use it only
                 when want to create a new context for part of your application.
@@ -444,17 +444,17 @@ const Rail: React.FC<{
 );
 
 const App = () => (
-  <NewskitProvider theme={newskitLightTheme} instrumentation={instrumentation}>
+  <NewsKitProvider theme={newskitLightTheme} instrumentation={instrumentation}>
     <Rail railName="Some great rail" />
-  </ThemeProvider>
+  </NewsKitProvider>
 );`}
           </Code>
         </ContentSecondary>
         <ContentSecondary
           description={
             <>
               In this example, we have a root{' '}
-              <InlineCode>NewskitProvider</InlineCode> providing the page URL.
+              <InlineCode>NewsKitProvider</InlineCode> providing the page URL.
               Inside the <InlineCode>Rail</InlineCode> component, we have{' '}
               <InlineCode>InstrumentationProvider</InlineCode>; this provides
               any child events with rail specifics, like the rail name. The{' '}

site/pages/theme/theming/creating-a-theme.mdx

@@ -18,7 +18,7 @@ You can switch between these two themes on this documentation site by clicking t
 
 ## createTheme Function
 
-To create a theme you use the `createTheme` function exported from NewsKit. The createTheme function returns an `UncompiledTheme` object which can be passed to the `NewskitProvider` or `ThemeProvider` component. When the provider is passed an uncompiled theme object, it will compile it automatically. If you wish to pre-compile your theme, you can do this by passing your theme to the `compileTheme` function exported from NewsKit. It is recommended you let the provider compile your theme automatically - you should not need to compile your theme yourself. More information on theme compilation is below.
+To create a theme you use the `createTheme` function exported from NewsKit. The createTheme function returns an `UncompiledTheme` object which can be passed to the `NewsKitProvider` or `ThemeProvider` component. When the provider is passed an uncompiled theme object, it will compile it automatically. If you wish to pre-compile your theme, you can do this by passing your theme to the `compileTheme` function exported from NewsKit. It is recommended you let the provider compile your theme automatically - you should not need to compile your theme yourself. More information on theme compilation is below.
 
 `createTheme` takes one argument - an object - with the following properties:
 
@@ -85,10 +85,7 @@ Note that the keywords will be removed from the object as they are interpreted.
 
 Please note as of NewsKit V5, stylePresets are no longer global, instead they are under each component. You will need to import the component to use the style presets.
 
-<Code>
-  {`import { Button } from "newskit"`}
-</Code>
-
+<Code>{`import { Button } from "newskit"`}</Code>
 
 #### \_\_extends
 
@@ -248,20 +245,24 @@ Changing the default border radius of NewsKit elements, such as buttons, to shar
 
 #### Setting custom font cropping config
 
-For cropping your font you can use the fontMetrics. This approach is precise, easy to implement, takes into account the fontWeight and fontSize of your font. 
-You can find the font metrics by loading your font file in the <a href='https://seek-oss.github.io/capsize/'>Capsize docs</a>. 
+For cropping your font you can use the fontMetrics. This approach is precise, easy to implement, takes into account the fontWeight and fontSize of your font.
+You can find the font metrics by loading your font file in the <a href='https://seek-oss.github.io/capsize/'>Capsize docs</a>.
 
-As outlined in the link, choose your font (point 1). If you are uploading your own font file, as general approach, 
+As outlined in the link, choose your font (point 1). If you are uploading your own font file, as general approach,
 start adjusting the font metrics by clicking on the icon highlighted with the red circle (image below). Adjust it so that H is within the capHeight lines and the font has
 homogeneous space at the top and the bottom of the Em Square(green lines in the image below.)
 
 e.g
-<img height='200px' src="static/capsize-adustement.png" alt="Capsize adjustement suggestions"/>
 
-Once satisfied, find and retrieve the metrics (point 3). 
-Generally, adding the fontMetrics in your theme for a weight of 400 is enough for the majority of our users. However, if in your case you see the need to use more precise metrics for different font weights you can specify them; 
-400 will be always the fallback.
+<img
+  height="200px"
+  src="static/capsize-adustement.png"
+  alt="Capsize adjustement suggestions"
+/>
 
+Once satisfied, find and retrieve the metrics (point 3).
+Generally, adding the fontMetrics in your theme for a weight of 400 is enough for the majority of our users. However, if in your case you see the need to use more precise metrics for different font weights you can specify them;
+400 will be always the fallback.
 
 <CodeFromFile path="examples/theming/font-crop-config.tsx" />
 

site/pages/theme/theming/using-a-theme.mdx

@@ -13,9 +13,9 @@ To render NewsKit components you must have a theme available for them to utilise
 
 ## Setting a theme
 
-### NewskitProvider & ThemeProvider components
+### NewsKitProvider & ThemeProvider components
 
-NewskitProvider provides a single wrapper to configure your application which includes ThemeProvider, <Link href="/components/utils/hooks/#usemediaqueryobject">MediaQueryProvider</Link>, <Link href="/getting-started/code/instrumentation/">InstrumentationProvider</Link> and LayerOrganizer.
+NewsKitProvider provides a single wrapper to configure your application which includes ThemeProvider, <Link href="/components/utils/hooks/#usemediaqueryobject">MediaQueryProvider</Link>, <Link href="/getting-started/code/instrumentation/">InstrumentationProvider</Link> and LayerOrganizer.
 
 A ThemeProvider utilises a React Context to provide a theme to all NewsKit components descended under it. You pass your theme (or a NewsKit default) to the `theme` prop. This will typically be an uncompiled theme, but you can pass a pre-compiled theme if you wish.
 
@@ -29,7 +29,7 @@ ThemeProvider's can also be nested - allowing the child to override the parent t
 
 <InlineMessage>
   ThemeProvider can be nested, however, we do NOT recommend nesting
-  NewskitProviders, as it can lead to unexpected behaviour. NewskitProvider
+  NewskitProviders, as it can lead to unexpected behaviour. NewsKitProvider
   should only be used once per application on a very top level.
 </InlineMessage>
 

site/public/static/examples/theming/nested-theme-provider.tsx

@@ -1,8 +1,8 @@
-import { NewskitProvider, ThemeProvider, newskitDarkTheme, newskitLightTheme } from 'newskit';
+import { NewsKitProvider, ThemeProvider, newskitDarkTheme, newskitLightTheme } from 'newskit';
 
 render() {
   return (
-    <NewskitProvider theme={newskitLightTheme}>
+    <NewsKitProvider theme={newskitLightTheme}>
       <Component>Light theme style!</Component>
 
       <ThemeProvider theme={newskitDarkTheme}>
@@ -13,6 +13,6 @@ render() {
         </ThemeProvider>
 
       </ThemeProvider>
-    </NewskitProvider>
+    </NewsKitProvider>
   )
 }

site/public/static/examples/theming/newskit-provider.tsx

@@ -1,9 +1,9 @@
-import { NewskitProvider, newskitLightTheme } from 'newskit';
+import { NewsKitProvider, newskitLightTheme } from 'newskit';
 
 render() {
     return (
-        <NewskitProvider theme={newskitLightTheme}>
+        <NewsKitProvider theme={newskitLightTheme}>
             <MyApp />
-        </NewskitProvider>
+        </NewsKitProvider>
     )
 }

site/public/static/examples/theming/styled.tsx

@@ -1,15 +1,15 @@
-import { NewskitProvider, newskitLightTheme, styled } from 'newskit';
+import { NewsKitProvider, newskitLightTheme, styled } from 'newskit';
 
 const MyAppContainer = styled.div`
   max-width: ${({ theme }) => theme.sizing.sizing110};
 `;
 
 render() {
   return (
-    <NewskitProvider theme={newskitLightTheme}>
+    <NewsKitProvider theme={newskitLightTheme}>
       <MyAppContainer>
         <MyApp />
       </MyAppContainer>
-    </NewskitProvider>
+    </NewsKitProvider>
   )
 }

src/__tests__/__snapshots__/index.test.ts.snap

@@ -92,7 +92,7 @@ Array [
   "MenuGroup",
   "MenuItem",
   "Modal",
-  "NewskitProvider",
+  "NewsKitProvider",
   "OrderedList",
   "P",
   "Paragraph",

src/newskit-provider/__tests__/__snapshots__/newskitprovider.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NewskitProvider renders as default 1`] = `
+exports[`NewsKitProvider renders as default 1`] = `
 <DocumentFragment>
   app
 </DocumentFragment>

src/newskit-provider/__tests__/newskitprovider.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {render} from '@testing-library/react';
-import {NewskitProvider} from '..';
+import {NewsKitProvider} from '..';
 import {newskitLightTheme} from '../../theme';
 
-describe('NewskitProvider', () => {
+describe('NewsKitProvider', () => {
   it('renders as default', () => {
     const {asFragment} = render(
-      <NewskitProvider theme={newskitLightTheme}>app</NewskitProvider>,
+      <NewsKitProvider theme={newskitLightTheme}>app</NewsKitProvider>,
     );
     expect(asFragment()).toMatchSnapshot();
   });

src/newskit-provider/context.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-// This provider is internal and is used only to detect when NewskitProvider is used inside NewskitProvider
-// On the very first Provider we set value of {initialized: true} based on that we know if NewskitProvider is already used
-export const NewskitInternalContext = React.createContext({});
+// This provider is internal and is used only to detect when NewsKitProvider is used inside NewsKitProvider
+// On the very first Provider we set value of {initialized: true} based on that we know if NewsKitProvider is already used
+export const NewsKitInternalContext = React.createContext({});
 
-export const useNewskitContext = () => React.useContext(NewskitInternalContext);
+export const useNewsKitContext = () => React.useContext(NewsKitInternalContext);

src/newskit-provider/index.tsx

@@ -1,2 +1,2 @@
-export {NewskitProvider} from './newskit-provider';
-export type {NewskitProviderProps} from './newskit-provider';
+export {NewsKitProvider} from './newskit-provider';
+export type {NewsKitProviderProps} from './newskit-provider';

src/newskit-provider/newskit-provider.tsx

@@ -7,41 +7,41 @@ import {
   EventInstrumentation,
   InstrumentationProvider,
 } from '../instrumentation';
-import {NewskitInternalContext, useNewskitContext} from './context';
+import {NewsKitInternalContext, useNewsKitContext} from './context';
 
-export type NewskitProviderProps = ThemeProviderProps & {
+export type NewsKitProviderProps = ThemeProviderProps & {
   children: React.ReactNode;
   layer?: LayerOrganizerProps;
   instrumentation?: Partial<EventInstrumentation>;
 };
 
-export const NewskitProvider = ({
+export const NewsKitProvider = ({
   children,
   theme,
   /* istanbul ignore next */
   layer: layerProps = {},
   instrumentation: instrumentationProps = {},
-}: NewskitProviderProps) => {
-  const NKContext = useNewskitContext();
+}: NewsKitProviderProps) => {
+  const NKContext = useNewsKitContext();
   /* istanbul ignore if */
   if (
     process.env.NODE_ENV !== 'production' &&
     Object.keys(NKContext).length > 0
   ) {
     console.warn(
-      'You are using NewskitProvider inside NewskitProvider, this might cause unexpected behavior',
+      'You are using NewsKitProvider inside NewsKitProvider, this might cause unexpected behavior',
     );
   }
 
   return (
-    <NewskitInternalContext.Provider value={{initialized: true}}>
+    <NewsKitInternalContext.Provider value={{initialized: true}}>
       <ThemeProvider theme={theme}>
         <InstrumentationProvider {...instrumentationProps}>
           <MediaQueryProvider>
             <LayerOrganizer {...layerProps}>{children}</LayerOrganizer>
           </MediaQueryProvider>
         </InstrumentationProvider>
       </ThemeProvider>
-    </NewskitInternalContext.Provider>
+    </NewsKitInternalContext.Provider>
   );
 };

src/test/test-utils.tsx

@@ -8,7 +8,7 @@ import {
 } from '@testing-library/react';
 import {newskitLightTheme, ThemeProviderProps, UncompiledTheme} from '../theme';
 import {InstrumentationEvent} from '../instrumentation';
-import {NewskitProvider} from '../newskit-provider';
+import {NewsKitProvider} from '../newskit-provider';
 
 export const renderToFragment = (
   ui: React.ReactElement,
@@ -24,9 +24,9 @@ export const renderWithImplementation = <T extends {}>(
   renderer(<Component {...(props as T)} />, {
     ...options,
     wrapper: ({children}) => (
-      <NewskitProvider theme={newskitLightTheme} instrumentation={{fireEvent}}>
+      <NewsKitProvider theme={newskitLightTheme} instrumentation={{fireEvent}}>
         {children}
-      </NewskitProvider>
+      </NewsKitProvider>
     ),
   });
 
@@ -41,7 +41,7 @@ export const renderWithThemeFactory = (
   renderer(<Component {...(props as T)} />, {
     ...options,
     wrapper: ({children}) => (
-      <NewskitProvider theme={theme}>{children}</NewskitProvider>
+      <NewsKitProvider theme={theme}>{children}</NewsKitProvider>
     ),
   });