Merge pull request #1468 from Royal-Navy/feat/timeline-styled-components

feat(Timeline): Migrate to styled-components
Royal-Navy · Sep 25, 2020 · 09cad68 · 09cad68
2 parents bd19837 + 273f1ca
commit 09cad68
Show file tree

Hide file tree

Showing 25 changed files with 608 additions and 511 deletions.
diff --git a/packages/css-framework/index.scss b/packages/css-framework/index.scss
@@ -76,7 +76,6 @@
 @use "src/components/tab-nav";
 @use "src/components/tab-set";
 @use "src/components/textinput";
-@use "src/components/timeline";
 @use "src/components/toast";
 @use "src/components/toggle";
 @use "src/components/tooltip";

diff --git a/packages/css-framework/src/components/_timeline.scss b/packages/css-framework/src/components/_timeline.scss
diff --git a/packages/docs-site/src/library/pages/timeline/index.md b/packages/docs-site/src/library/pages/timeline/index.md
@@ -1245,11 +1245,12 @@ Here you will find comprehensive API documentation for the Timeline Components.
 ## Roadmap
 
 - Migrate to independent package within monorepo
-- Adopt [styled-components](https://github.com/styled-components/styled-components) for default presentation
+- ~~Adopt [styled-components](https://github.com/styled-components/styled-components) for default presentation~~
 - Expose `TimelineSide` render prop
 - Add demos to sandbox
 - Iterate upon default presentation (user research and design)
 - Investigate support for advanced features:
+  - ~~Hours display~~
   - Infinite scroll
   - Lazy loading
   - View scaling (micro to macro / hours to years)

diff --git a/packages/react-component-library/.babelrc b/packages/react-component-library/.babelrc
diff --git a/packages/react-component-library/babel.config.js b/packages/react-component-library/babel.config.js
@@ -0,0 +1,29 @@
+module.exports = {
+  presets: ['@babel/preset-react', '@babel/typescript'],
+  plugins: [
+    '@babel/proposal-class-properties',
+    '@babel/proposal-object-rest-spread',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-proposal-optional-chaining',
+  ],
+  env: {
+    es: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+      plugins: ['babel-plugin-jsx-remove-data-test-id'],
+    },
+    cjs: {
+      presets: [['@babel/preset-env']],
+      plugins: ['babel-plugin-jsx-remove-data-test-id'],
+    },
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+  },
+}
diff --git a/packages/react-component-library/jest.config.js b/packages/react-component-library/jest.config.js
@@ -8,4 +8,7 @@ module.exports = {
   testMatch: ['**/?(*.)(spec|test).ts?(x)'],
   setupFiles: ['<rootDir>/jest/setupTests.js'],
   globalSetup: '<rootDir>/jest/globalSetup.js',
+  transformIgnorePatterns: [
+    '/node_modules/(?!@royalnavy/design-tokens).+\\.js$',
+  ],
 }