Merge pull request #46 from doug-wade/factor-out-themes

factor out themes into their own files

code-examples/initial-data-table.example

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <DataChart :data="data" :error="error" :loading-state="loadingState" />
+    <DataTable :data="data" :error="error" :loading-state="loadingState">
+      <template #paginator>
+        <Paginator v-model="paginator" />
+      </template>
+      <template #csv>
+        <CSVDownloadButton @click="downloadCSV" />
+      </template>
+    </DataTable>
+  </div>
+</template>
+
+<script setup>
+import { useDataTablePaginator, useDataTableApiMethod } from '@/composables/DataTable';
+
+const { paginator } = useDataTablePagination({
+  perPageOptions: [10, 25, 50, 75, 100]
+});
+
+const { data, error, loadingState, downloadCSV } = useDataTableMethod({ 
+  method: ApiService.Example.dataTable
+});
+</script>

code-examples/redesign-data-table.example

@@ -0,0 +1,15 @@
+<template>
+    <ApiDataProvider endpoint="/foo" namespace="namespace">
+        <div class="row">
+            <CSVDownloadButton namespace="namespace" />
+        </div>
+        <DataTable namespace="namespace" />
+        <div class="row">
+            <Paginator namespace="namespace" options={[10, 25, 50, 75, 100]} />
+        </div>
+    </ApiDataProvider>
+</template>
+
+<script setup>
+const namespace = "example-namespace"
+</script>

presentation/core-web-vitals.js

@@ -17,12 +17,7 @@ import {
   UnorderedList,
 } from "spectacle";
 
-const theme = {
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif'
-  }
-};
+import theme from "../themes/default";
 
 import cypressWebVitalsTest from "../code-examples/cypress-web-vitals-test.example";
 

presentation/course-platform-vnext.js

@@ -13,28 +13,10 @@ import {
   UnorderedList,
 } from "spectacle";
 
-import nightOwl from "react-syntax-highlighter/dist/esm/styles/prism/night-owl.js";
-
 import "normalize.css";
 
-const theme = {
-  colors: {
-    primary: "#4D94DB",
-    secondary: "#CCE0F5",
-    orange: "#FB7544",
-    purple: "#6150AC",
-    white: "#ffffff",
-    yellow: "#F4C050",
-    green: "#63CE9A",
-    turquoise: "#47C1BF",
-    red: "#FB4451",
-    tertiary: "#001429",
-  },
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-  },
-};
+import theme from "../themes/skilljar";
+import tinyCodeTheme from "../themes/tiny-code";
 
 import butWhy from "../assets/but-why.gif";
 import cssBoxModel from "../assets/css-box-model.png";
@@ -57,18 +39,6 @@ import legacyAnnouncementBanner from "../code-examples/legacy-announcement-banne
 import searchBoxHtml from "../code-examples/search-box-html.example";
 import styledButtonComponent from "../code-examples/styled-button-component.example";
 
-const tinyCodeTheme = {
-  ...nightOwl,
-  'code[class*="language-"]': {
-    ...nightOwl['code[class*="language-"]'],
-    fontSize: ".5em",
-  },
-  'pre[class*="language-"]': {
-    ...nightOwl['pre[class*="language-"]'],
-    lineHeight: ".5",
-  },
-};
-
 const Presentation = () => (
   <Deck theme={theme}>
     <Slide>

presentation/css-the-future-parts.js

@@ -16,12 +16,7 @@ import {
 
 import "normalize.css";
 
-const theme = {
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-  },
-};
+import theme from "../themes/default";
 
 import cssModularModel from "../assets/css-modular-model.png";
 import newCssFeatures from "../assets/new-css-features.png";

presentation/data-table-strawman.js

@@ -12,6 +12,8 @@ import {
 
 import "normalize.css";
 
+import theme from "../themes/default";
+
 import csvDownloadButton from "../code-examples/csv-download-button.example";
 import customCellComponent from "../code-examples/custom-cell-component.example";
 import customCellUsage from "../code-examples/custom-cell-usage.example";
@@ -22,13 +24,6 @@ import sharingStateWithCharts from "../code-examples/sharing-state-with-charts.e
 import useDataTableApiMethod from "../code-examples/use-data-table-api-method.example";
 import useDataTablePaginator from "../code-examples/use-data-table-paginator.example";
 
-const theme = {
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-  },
-};
-
 const Presentation = () =>(
   <Deck theme={theme}>
     <Slide>

presentation/debugging-javascript.js

@@ -13,6 +13,8 @@ import {
 
 import "normalize.css";
 
+import theme from "../themes/default";
+
 import breakpoint from "../assets/breakpoint.png";
 import breakpointRebinds from "../assets/const-rebinds-in-console.png";
 import debuggerSidebar from "../assets/debugger-sidebar.png";
@@ -21,13 +23,6 @@ import overridesTab from "../assets/overrides-tab.png";
 import saveForOverrides from "../assets/save-for-overrides.png";
 import selectFolderForOverrides from "../assets/select-folder-for-overrides.png";
 
-const theme = {
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-  },
-};
-
 const Presentation = () => (
   <Deck theme={theme}>
     <Slide>

presentation/dual-publish-node-deno.js

@@ -29,19 +29,7 @@ import dntTypeCheckFailure from "../code-examples/dnt-build-type-check-failure.e
 import dntPublishAction from "../code-examples/dnt-publish-action.example";
 
 import "normalize.css";
-
-const theme = {
-  colors: {
-    primary: '#f4f1de',
-    secondary: '#e07a5f',
-    tertiary: '#3d405b',
-    quaternary: '#c5e478',
-  },
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-  },
-};
+import theme from "../themes/electrique";
 
 const Presentation = () => (
 <Deck theme={theme}>

presentation/getting-git.js

@@ -11,7 +11,7 @@ import {
   Text
 } from "spectacle";
 
-import theme from "react-syntax-highlighter/dist/esm/styles/prism/night-owl.js";
+import theme from "../themes/night-owl";
 
 import "normalize.css";
 

presentation/glue-and-campsite-work.js

@@ -14,6 +14,8 @@ import {
 
 import "normalize.css";
 
+import theme from "../themes/default";
+
 import supportingRun from "../assets/supporting-run.png";
 import glueWork from "../assets/glue-work.png";
 import problemContinuum from "../assets/problem-continuum.png";
@@ -23,13 +25,6 @@ import wingers from "../assets/4-3-3-formation.png";
 import pieCharts from "../assets/pie-charts.png";
 import tent from "../assets/tent.jpg";
 
-const theme = {
-  fonts: {
-    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
-  },
-};
-
 const Presentation = () => (
   <Deck theme={theme}>
     <Slide>

presentation/index.js

@@ -10,7 +10,7 @@ import {
   Text
 } from "spectacle";
 
-import theme from "react-syntax-highlighter/dist/esm/styles/prism/night-owl.js";
+import theme from "../themes/night-owl";
 
 import "normalize.css";