@ssa-ui-kit/core 0.0.26-alpha → 0.0.27-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "0.0.26-alpha",
+  "version": "0.0.27-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -41,8 +41,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.2-alpha"
+    "@ssa-ui-kit/hooks": "^0.0.2-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/WithVisibleLG/WithVisibleLG.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleLG } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleLG(TestComponent);
+
+describe('HOC: withVisibleLG', () => {
+  // TODO: additional test to test display: block
+  it('Should not displayed (less than LG)', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-lg');
+    expect(wrapper).toHaveStyle('display: none');
+  });
+});

package/src/components/WithVisibleLG/WithVisibleLG.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const VisibleLG = styled.div`
+  display: none;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: block;
+  }
+`;
+
+export const WithVisibleLG = <T extends object>(
+  Component: React.ComponentType<T>,
+  rest?: Parameters<typeof VisibleLG>[0],
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleLG data-testid="with-visible-lg" {...rest}>
+      <Component {...props} />
+    </VisibleLG>
+  );
+
+  decoratedComp.displayName = `WithVisibleLG(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleLG/index.ts

@@ -0,0 +1 @@
+export * from './WithVisibleLG';

package/src/components/WithVisibleMD/WithVisibleMD.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleMD } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleMD(TestComponent);
+
+describe('HOC: WithVisibleMD', () => {
+  // TODO: additional test to test display: block
+  it('Should not displayed (less than MD)', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-md');
+    expect(wrapper).toHaveStyle('display: none');
+  });
+});

package/src/components/WithVisibleMD/WithVisibleMD.tsx

@@ -0,0 +1,23 @@
+import { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const VisibleMD = styled.div`
+  display: none;
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: block;
+  }
+`;
+
+export const WithVisibleMD = <T extends object>(
+  Component: React.ComponentType<T>,
+  styles?: SerializedStyles,
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleMD data-testid="with-visible-md" css={styles}>
+      <Component {...props} />
+    </VisibleMD>
+  );
+
+  decoratedComp.displayName = `WithVisibleMD(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleMD/index.ts

@@ -0,0 +1 @@
+export * from './WithVisibleMD';

package/src/components/WithVisibleSM/WithVisibleSM.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleSM } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleSM(TestComponent);
+
+describe('HOC: WithVisibleSM', () => {
+  // TODO: additional test to test display: none
+  it('Should be displayed', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-sm');
+    expect(wrapper).toHaveStyle('display: block');
+  });
+});

package/src/components/WithVisibleSM/WithVisibleSM.tsx

@@ -0,0 +1,22 @@
+import { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const VisibleSM = styled.div`
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const WithVisibleSM = <T extends object>(
+  Component: React.ComponentType<T>,
+  styles?: SerializedStyles,
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleSM data-testid="with-visible-sm" css={styles}>
+      <Component {...props} />
+    </VisibleSM>
+  );
+
+  decoratedComp.displayName = `WithVisibleSM(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleSM/index.ts

@@ -0,0 +1 @@
+export * from './WithVisibleSM';

package/src/components/WithVisibleUpToLG/WithVisibleUpToLG.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeProvider } from '@emotion/react';
+import { WithVisibleUpToLG } from '.';
+import { mainTheme } from '../..';
+
+jest.mock('d3-color', () => ({}));
+
+const TestComponent = () => {
+  return <p>Test</p>;
+};
+
+const TestComponentWithVisible = WithVisibleUpToLG(TestComponent);
+
+describe('HOC: WithVisibleUpToLG', () => {
+  // TODO: additional test to test display: block
+  it('Should not displayed (less than LG)', () => {
+    render(
+      <ThemeProvider theme={mainTheme}>
+        <TestComponentWithVisible />
+      </ThemeProvider>,
+    );
+
+    const wrapper = screen.getByTestId('with-visible-up-to-lg');
+    expect(wrapper).toHaveStyle('display: none');
+  });
+});

package/src/components/WithVisibleUpToLG/WithVisibleUpToLG.tsx

@@ -0,0 +1,24 @@
+import { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const VisibleUpToLG = styled.div`
+  display: none;
+
+  @media screen and (max-width: 1439px) {
+    display: block;
+  }
+`;
+
+export const WithVisibleUpToLG = <T extends object>(
+  Component: React.ComponentType<T>,
+  styles?: SerializedStyles,
+) => {
+  const decoratedComp = (props: T) => (
+    <VisibleUpToLG data-testid="with-visible-up-to-lg" css={styles}>
+      <Component {...props} />
+    </VisibleUpToLG>
+  );
+
+  decoratedComp.displayName = `WithVisibleUpToLG(${Component.displayName})`;
+  return decoratedComp;
+};

package/src/components/WithVisibleUpToLG/index.ts

@@ -0,0 +1 @@
+export * from './WithVisibleUpToLG';

package/src/components/index.ts

@@ -80,3 +80,7 @@ export { default as FormHelperText } from './FormHelperText';
 export { default as Indicator } from './Indicator';
 export * from './ButtonGroup';
 export { default as Link } from './Link';
+export * from './WithVisibleLG';
+export * from './WithVisibleMD';
+export * from './WithVisibleSM';
+export * from './WithVisibleUpToLG';