Update styling in the component library and Storybook to use emotion 10

[bradfordjanice]

Currently styles are written in multiple ways in the component library, Storybook.

For example: civic/packages/component-library/assets/global.styles.css is CSS.

For consistency, update styles in the component library and Storybook to use css-in-js emotion v.10. Check to make sure all changes to build dependencies are complete before working on this.

• Run emotion code-mod Run Emotion 10 code-mod #544
• Replace styled-components with emotion Replace styled-components with emotion #546
• Replace css usage with css prop Replace emotion className and cx usage with css prop #548
• Replace global.styles.css with emotion Global styles? #TBD

[DingoEatingFuzz]

This ticket could use a break down of all the offending components. That way contributors can chip away at the list one by one with smaller PRs.

[bradfordjanice]

Incremental Migration to Emotion 10

Upgrading to Emotion 10 is described on the Emotion website; you will find code examples and more details here: https://emotion.sh/docs/migrating-to-emotion-10

The upgrades to emotion 10 are split into two parts.

1. Automatically: The first part can be done automatically by using eslint-plugin-emotion at https://emotion.sh/docs/eslint-plugin-emotion#emotion-10-codemods. This will make the following changes:
   a. Change all react-emotion imports so that styled is imported from @emotion/styled and all the emotion exports are split into a second import.
   b. Add a css call to the css prop when a template literal is used.
   c. Add a jsx import and set jsx pragma

2. Manually (after step 1 is complete): These changes can be made incrementally, by component or story, over time.
   a. Add compat cache with provider.
   b. Change css usage to css prop.

   Update these components in the directory component-library/src:
   BaseMap
   Button
   ChartContainer
   ChartTitle
   CivicCardStack
   CivicSandboxDashboard
   CivicSandboxMap
   CivicStoryCard
   Collapsable
   DataTable
   Dropdown
   Footer
   HeatMap
   Hero
   HexOverlay
   IconMap
   LandingPage
   Logo
   MapOverlay
   MapTooltip
   Media
   Navigation
   PackageSelectorBox
   PageLayout
   PathMap
   PDF
   Placeholder
   PullQuote
   RechartsPie
   Sandbox
   Sankey
   ScatterPlotMap
   ScrollToTop
   SimpleLegend
   Slider
   StoryCard
   Tag
   VictoryTheme
   Note: Research the following components to see whether they need to be updated:
   ?AreaChart
   ?BarChart
   ?BoundaryMap
   ?Chart
   ?ChartData
   ?GradientBox
   ?HorizontalBarChart
   ?Icon
   ?LeafletMap
   ?LineChart
   ?PieChart
   ?Scatterplot
   ?ScreenGridMap
   ?StackedAreaChart

   Update all the style guideline stories in the directory component-library/stories/styleGuideStories
   In addition, update these stories in the directory component-library/stories:
   Button
   CivicSandboxDashboard
   DropdownMenu
   LineChart
   PackageSelectorBox
   PageLayout
   Sandbox
   Scatterplot
   Slider
   StackedAreaChart
   storyStyles

[jaronheard]

Merged into #556