Add ComponentExample component + mobile version for SideNav

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "locales"
+    ]
+}

README.md

@@ -2,7 +2,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 # Features/ideas
 
-## Folder structure idea by Ilkka
+## Folder structure
 
 ### Components
 
@@ -24,6 +24,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 - Contains global CSS classes which can be used anywhere (like `.container`)
 - Also contains utility CSS classes like margin helpers. Created from suomifi-tokens
+- Breakpoints and their helper mixins
 
 ### Utils
 
@@ -41,10 +42,10 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 # Development
 
-First, run the development server:
+Run the development server:
 
 ```bash
 yarn dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser

components/ComponentExample/ComponentCode.tsx

@@ -0,0 +1,62 @@
+import React, { ReactNode, CSSProperties } from "react";
+import reactElementToJSXString from "react-element-to-jsx-string";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+
+const Highlighter = ({
+  style,
+  children,
+}: {
+  style?: CSSProperties;
+  children: (string | string[]) & ReactNode;
+}): JSX.Element => (
+  <SyntaxHighlighter
+    language="jsx"
+    customStyle={{
+      margin: 0,
+      padding: 0,
+      background: "none",
+      fontSize: "1rem",
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      overflow: "hidden",
+      ...style,
+    }}
+    // clear default styles to allow e.g. wrap
+    codeTagProps={{ style: {} }}
+  >
+    {children}
+  </SyntaxHighlighter>
+);
+
+interface ComponentCodeProps {
+  style?: CSSProperties;
+  filterProps?: string[];
+  children?: ReactNode;
+  codeString?: string;
+}
+
+const ComponentCode = ({
+  style,
+  filterProps,
+  children,
+  codeString,
+}: ComponentCodeProps): JSX.Element => (
+  <div className="py-s" style={style}>
+    {!!codeString && (
+      <Highlighter style={{ marginBottom: !children ? 0 : "1rem" }}>
+        {codeString}
+      </Highlighter>
+    )}
+    {!!children && (
+      <Highlighter>
+        {reactElementToJSXString(children, {
+          filterProps: filterProps || ["id", "style", "aria-label"],
+          showFunctions: true,
+          functionValue: () => "...",
+        })}
+      </Highlighter>
+    )}
+  </div>
+);
+
+export default ComponentCode;

components/ComponentExample/ComponentExample.tsx

@@ -0,0 +1,70 @@
+import { ReactNode } from "react";
+import {
+  Button,
+  Expander,
+  ExpanderContent,
+  ExpanderTitleButton,
+} from "suomifi-ui-components";
+import MobileDevice from "../MobileDevice/MobileDevice";
+import ShowcaseBox from "../ShowcaseBox/ShowcaseBox";
+import React from "react";
+import ComponentCode from "./ComponentCode";
+
+type ComponentExampleVariant = "normal" | "mobile_device";
+
+interface ComponentExampleProps {
+  filterPropsInExample?: string[];
+  variant?: ComponentExampleVariant;
+  children: ReactNode[] | ReactNode;
+  codeString?: string;
+}
+
+const getWithoutWrappers = (children: any): ReactNode[] =>
+  React.Children.map(children, (child) =>
+    !!child.type && (child.type === "div" || child.type.displayName === "div")
+      ? getWithoutWrappers(child.props.children)
+      : child
+  );
+
+const ComponentExample: React.FunctionComponent<ComponentExampleProps> = ({
+  children,
+  variant,
+  filterPropsInExample,
+  codeString,
+}) => {
+  const showcase =
+    variant === "mobile_device" ? (
+      <ShowcaseBox style={{ paddingBottom: 0 }}>
+        <MobileDevice>{children}</MobileDevice>
+      </ShowcaseBox>
+    ) : (
+      <ShowcaseBox>{children}</ShowcaseBox>
+    );
+  return (
+    <>
+      {showcase}
+      <Expander className="mt-l">
+        <ExpanderTitleButton>Koodiesimerkki (React)</ExpanderTitleButton>
+        <ExpanderContent>
+          {codeString ? (
+            <ComponentCode codeString={codeString} />
+          ) : (
+            getWithoutWrappers(children).map((child, index) => (
+              <ComponentCode
+                key={index}
+                filterProps={filterPropsInExample}
+                style={{
+                  paddingTop: index === 0 && !codeString ? "1rem" : 0,
+                }}
+              >
+                {child}
+              </ComponentCode>
+            ))
+          )}
+        </ExpanderContent>
+      </Expander>
+    </>
+  );
+};
+
+export default ComponentExample;

components/Header/Header.module.scss

@@ -1,4 +1,5 @@
 @import '~suomifi-design-tokens/dist/tokens';
+@import '../../styles/breakpoints';
 
 .header {
     border-top: 4px solid $fi-color-brand-base;
@@ -10,4 +11,11 @@
     width: auto;
     margin: $fi-spacing-m 0;
     cursor: pointer;
+}
+
+.desktopNavContainer {
+    display: none;
+    @include from-lg {
+        display: block;
+    }
 }

components/Header/Header.tsx

@@ -15,7 +15,9 @@ const Header: React.FunctionComponent = () => {
           />
         </Link>
       </Block>
-      <Navbar />
+      <div className={styles.desktopNavContainer}>
+        <Navbar />
+      </div>
     </Block>
   );
 };

components/SideNav/SideNav.module.scss

@@ -0,0 +1,104 @@
+@import '~suomifi-design-tokens/dist/tokens';
+
+.sideNav {
+    .navHeader {
+        display: flex;
+        align-items: center;
+        padding: $fi-spacing-xs;
+
+        .navHeadertext {
+            font-weight: bold;
+            margin-left: $fi-spacing-xs;
+        }
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        li {
+            border-top: 1px solid $fi-color-depth-secondary;
+
+            &.active {
+                background: $fi-color-depth-secondary;
+                border-left: 4px solid $fi-color-brand-base;
+
+                a {
+                    color: $fi-color-brand-base;
+                    font-weight: bold;
+                    padding-left: calc($fi-spacing-inset-xl - 4px);
+                }
+            }
+
+            &:hover, &:active {
+                background: $fi-color-depth-secondary;
+            }
+
+            a {
+                text-decoration: none;
+                color: $fi-color-highlight-base;
+                display: flex;
+                padding: $fi-spacing-inset-l $fi-spacing-inset-xl;
+                &:hover, &:active {
+                    text-decoration: none;
+                    color: $fi-color-brand-base;
+                }
+            }
+        }
+    }
+}
+
+.sideNavSmallScreen {
+    cursor: pointer;
+    .navHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: $fi-spacing-m;
+
+        .icon {
+            width: 25px;
+            height: 25px;
+        }
+
+        .navHeadertext {
+            font-weight: bold;
+            margin-left: $fi-spacing-xs;
+        }
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        li {
+            border-top: 1px solid $fi-color-depth-secondary;
+
+            &.active {
+                background: $fi-color-depth-secondary;
+                border-left: 4px solid $fi-color-brand-base;
+
+                a {
+                    color: $fi-color-brand-base;
+                    font-weight: bold;
+                    padding-left: calc($fi-spacing-inset-xl - 4px);
+                }
+            }
+
+            &:hover, &:active {
+                background: $fi-color-depth-secondary;
+            }
+
+            a {
+                text-decoration: none;
+                color: $fi-color-highlight-base;
+                display: flex;
+                padding: $fi-spacing-inset-l $fi-spacing-inset-xl;
+                &:hover, &:active {
+                    text-decoration: none;
+                    color: $fi-color-brand-base;
+                }
+            }
+        }
+    }
+}