Merge pull request #2 from MAPC/Theming

Theming

.storybook/Theme.js

@@ -0,0 +1,43 @@
+import { create } from "@storybook/theming/create";
+import mapclogo from "../src/assets/mapc-fullcolor.png";
+import * as theme from "../src/themes/colors";
+
+export default create({
+  base: "light",
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "MAPC Components",
+  brandUrl: "https://www.mapc.org/",
+  brandImage: mapclogo,
+  brandTarget: "_self",
+
+  colorPrimary: theme.mapc_blue["MAPC Blue"],
+  //   colorSecondary: "#004b24",
+  //   colorSecondary: "#c8e2ae",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#585C6D",
+  appBorderRadius: 4,
+
+  //   // Text colors
+  textColor: "#10162F",
+  textInverseColor: "#ffffff",
+
+  //   // Toolbar default and active colors
+  barTextColor: "#10162F",
+  barSelectedColor: "#585C6D",
+  textMutedColor: "#104c90",
+  //   barHoverColor: "#585C6D",
+  //   barBg: "#ffffff",
+
+  //   // Form colors
+  //   inputBg: "#ffffff",
+  //   inputBorder: "#10162F",
+  //   inputTextColor: "#10162F",
+  //   inputBorderRadius: 2,
+});

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import Theme from "./Theme";
+
+addons.setConfig({
+  theme: Theme,
+});

.storybook/preview.tsx

@@ -1,23 +1,35 @@
 import React from "react";
 
-import type {Preview} from "@storybook/react";
+import type { Preview } from "@storybook/react";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 
 const preview: Preview = {
   parameters: {
-    actions: {argTypesRegex: "^on[A-Z].*"},
+    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: [
+          "Overview",
+          ["Introduction", "Get Started", "Principles", "Themes", "Resources & Tools", "Examples"],
+          "Media",
+          "Components",
+          "Misc",
+          ["Contributing", "Templates"],
+        ],
+      },
+    },
     decorators: [
       (Story) => (
         <div
           className="test"
-          style={{margin: "2em"}}
+          style={{ margin: "1em" }}
         >
           <Story />
         </div>

bin/fontface-script.py

@@ -0,0 +1,30 @@
+#!/usr/bin/env python3
+
+fonts = [
+"Calibre-Black",
+"Calibre-BlackItalic",
+"Calibre-Bold",
+"Calibre-BoldItalic",
+"Calibre-Light",
+"Calibre-LightItalic",
+"Calibre-Medium",
+"Calibre-MediumItalic",
+"Calibre-Regular",
+"Calibre-SemiboldItalic",
+"Calibre-Thin",
+"Calibre-ThinItalic",
+"SwiftNeueLTPro-Italic",
+"SwiftNeueLTPro-Regular",
+"OpenSans",
+"OpenSans-Italic",
+]
+
+for font in fonts:
+    print('''
+          @font-face {
+            font-family: "%s";
+            src:
+                url(../assets/fonts/%s.woff2) format("woff2"),
+                url(../assets/fonts/%s.woff) format("woff");
+          }   
+          ''' % (font, font, font))

src/assets/index.js

@@ -0,0 +1,9 @@
+import fullColorLogo from "./mapc-fullcolor.png";
+import duotoneLogo from "./mapc-duotone.svg";
+import semitransparentLogo from "./mapc-semitransparent.svg";
+
+export const assets = {
+  fullColorLogo: fullColorLogo,
+  duoToneLogo: duotoneLogo,
+  semiTransparentLogo: semitransparentLogo,
+};

src/components/ContentCards/ContentCards.jsx

@@ -0,0 +1,103 @@
+import styled, { ThemeProvider } from "styled-components";
+import React, { useEffect, useState } from "react";
+
+import * as style_theme from "../../themes/styles";
+
+const CardsContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: ${(props) => {
+    props.height ? props.height : "400px";
+  }};
+  /* padding: 1rem 1rem; */
+`;
+
+const CardsSection = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: ${(props) => `calc((100% / ${props.numSections}) - ${props.numSections} * 1%)`};
+  margin: ${(props) => `calc(${props.numSections} * 0.5%)`};
+
+  padding: ${(props) => `calc(2rem) calc(4rem / ${props.numSections})`};
+  border-radius: 5px;
+
+  border-style: solid;
+  border-width: 3px;
+  border-color: ${(props) => props.theme.primary};
+  background-color: ${(props) => props.theme.tertiary};
+`;
+
+const CardsSectionTitle = styled.h3`
+  margin-bottom: 1rem;
+  color: ${(props) => props.theme.secondary};
+`;
+
+const CardsSectionText = styled.span`
+  margin-bottom: 1rem;
+`;
+
+const CardsSectionLinkUl = styled.ul`
+  list-style-type: "⭐ ";
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  justify-content: end;
+`;
+
+const CardsSectionLinkLi = styled.li`
+  color:;
+`;
+
+const CardsSectionLink = styled.a`
+  font-family: sans-serif;
+`;
+
+// CardsData structure: [{title:string, text:string, links: string[]}, ...]
+export const ContentCards = ({ CardsData, Themes, Height }) => {
+  const [CardsSections, setCardsSections] = useState([]);
+
+  useEffect(() => {
+    const generateCards = (data) => {
+      const tempCards = [];
+
+      Object.values(data).forEach((section) => {
+        const tempLinks = [];
+
+        section.links.forEach((link) => {
+          tempLinks.push(
+            <CardsSectionLinkLi>
+              <CardsSectionLink
+                href={window.location.origin + "/" + link.link}
+                style={style_theme.themed_link(Themes)}
+              >
+                {link.name}
+              </CardsSectionLink>
+            </CardsSectionLinkLi>
+          );
+        });
+        tempCards.push(
+          <CardsSection numSections={Object.values(data).length}>
+            <CardsSectionTitle>{section.title}</CardsSectionTitle>
+            <CardsSectionText>{section.text}</CardsSectionText>
+            <CardsSectionLinkUl>{tempLinks}</CardsSectionLinkUl>
+          </CardsSection>
+        );
+      });
+
+      setCardsSections(tempCards);
+    };
+
+    generateCards(CardsData);
+  }, [CardsData]);
+  console.log(Themes);
+  return (
+    <CardsContainer height={Height}>
+      <ThemeProvider theme={Themes}>{CardsSections}</ThemeProvider>
+    </CardsContainer>
+  );
+};
+
+export default ContentCards;

src/components/ContentCards/ContentCards.stories.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import { ContentCards } from "./ContentCards";
+
+import * as theme from "../../themes/colors";
+
+const meta = {
+  component: ContentCards,
+  title: "Components/ContentCards",
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+};
+export default meta;
+
+export const IntroductionCards = (args) => <ContentCards {...args} />;
+IntroductionCards.args = {
+  CardsData: [
+    {
+      title: "Principles",
+      text: "Design principles by which we structure and format our design system. Additionally defining development styles and considerations for relevant components and projects.",
+      links: [
+        { link: "?path=/docs/overview-principles--docs#core-considerations", name: "Core Considerations" },
+        { link: "?path=/docs/overview-principles--docs#structure-and-formatting", name: "Structure and Formatting" },
+      ],
+    },
+    {
+      title: "Get Started",
+      text: "Guide on how to download, use, and contribute to MAPC Components components!",
+      links: [
+        { link: "?path=/docs/overview-get-started--docs#how-to-use-mapc-components", name: "How to use" },
+        { link: "?path=/docs/overview-get-started--docs#contributing", name: "Contributing" },
+      ],
+    },
+    {
+      title: "Themes",
+      text: "Set of style definition to standardize color palettes, type fonts, and various associated interaction stylings; Theme sets for streamlining MAPC compliant styling of MAPC Components and custom elements",
+      links: [
+        { link: "?path=/docs/overview-themes--docs#color-palettes", name: "Color Palettes" },
+        { link: "?path=/docs/overview-themes--docs#general-color-family", name: "Font Typesets" },
+      ],
+    },
+  ],
+  Themes: theme.blueTheme,
+  Height: "500px",
+};

src/components/ContentCards/index.ts

@@ -0,0 +1 @@
+export { ContentCards } from "./ContentCards";

src/components/NavHeader/NavHeader.stories.tsx

@@ -5,7 +5,7 @@ import NavHeader from "./NavHeader";
 
 const meta: Meta<typeof NavHeader> = {
   component: NavHeader,
-  title: "MAPC/NavHeader",
+  title: "Components/NavHeader",
   decorators: [
     (Story) => (
       <MemoryRouter>

src/components/index.ts

@@ -1,2 +1,3 @@
 export { NavHeader } from "./NavHeader";
 export { RouterNavHeader } from "./NavHeader";
+export { TableOfContents } from "./TableOfContents";

src/media/Media.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, IconGallery, IconItem } from "@storybook/blocks";
+
+import { assets } from "../assets";
+
+<Meta title="Media/Assets" />
+
+# Assets
+
+Set of commonly included assets in MAPC projects, can be imported from this list:
+
+<IconGallery>
+  <IconItem name="full_color_logo">
+    <img src={assets.full_color_logo} />
+  </IconItem>
+  <IconItem name="duo_tone_logo">
+    <img src={assets.duo_tone_logo} />
+  </IconItem>
+  <IconItem name="semi_transparent_logo">
+    <img src={assets.semi_transparent_logo} />
+  </IconItem>
+</IconGallery>

src/misc/Contributing.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta } from "@storybook/blocks";
+
+<Meta title="Misc/Contributing" />
+
+# Contributing
+
+To contribute to `mapc-components`:
+
+- Create new branch for your component!
+
+```
+git checkout -b 'branch name'
+```
+
+- Add your component's code to ./src/components/'your component name'
+
+  - Make sure your code integrates well with our theming!
+
+- Push your code and create a PR for your branch!
+- The contribution will be reviewed and hopefully it will be added to the library!