diff --git a/.gitignore b/.gitignore index 2da4b51240..613a49c80c 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,7 @@ lerna-debug.log coverage/ /badges packages/*/*.tgz -samples/ \ No newline at end of file +samples/ + +.idea +.next diff --git a/CHANGELOG.md b/CHANGELOG.md index ba11937ff6..49d48c1329 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,35 @@ # Changelog All notable changes to this project will be documented in this file. The format (starting with 18.0.0) is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). -This project does NOT adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), and major versions of this project denote compatibility with Sitecore Platform versions. Refer to the "Headless Services" section in the [Sitecore modules compatibility table](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB0541788) or the [Headless Rendering download page](https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering.aspx) for more details on versioning. +This project does NOT adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), and major versions of this project denote compatibility with Sitecore Platform versions. Refer to the "Headless Services" section in the [Sitecore modules compatibility table](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB1000576) or the [Headless Rendering download page](https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering.aspx) for more details on versioning. + +## 20.1.0 + +### 🎉 New Features & Improvements + +* `[template/nextjs]` `[sitecore-jss-nextjs]` New `NextImage` component, a Sitecore `Image` field helper component for `next/image` ([#978](https://github.com/Sitecore/jss/pull/978)) +* `[template/nextjs-sxa]` New `nextjs` initializer add-on `nextjs-sxa` for SXA Headless support (currently compatible with _XM Cloud only_) +* `[template/nextjs]` `[sitecore-jss-nextjs]` Upgrade to Next.js 12.2 ([#1093](https://github.com/Sitecore/jss/pull/1093)) +* `[sitecore-jss-react]` Support SXA Rendering Variants inside the React `Placeholder` component ([#931](https://github.com/Sitecore/jss/pull/931)) +* `[template/nextjs]` Add a friendly message when building nextjs app and site items are missing ([#1066](https://github.com/Sitecore/jss/pull/1066)) +* `[create-sitecore-jss]` Add descriptions to add-on list ([#935](https://github.com/Sitecore/jss/pull/935)) +* `[template/nextjs]` Introduced plugins approach for Next.js Middleware ([#945](https://github.com/Sitecore/jss/pull/945)) +* `[sitecore-jss]` Make it clear that `isEditorActive` only works in browser ([#1089](https://github.com/Sitecore/jss/pull/1089)) +* `[template/nextjs]` `[template/nextjs-styleguide]` `[template/nextjs-sxa]` Specify AppProps generic type in _app.tsx to align with latest changes from Next 12.3.0 ([#1155](https://github.com/Sitecore/jss/pull/1155)) + +### 🧹 Chores + +* `[template/nextjs]` Update obsolete `jss create` related info on the home page ([#1009](https://github.com/Sitecore/jss/pull/1009)) + +### 🐛 Bug Fixes + +* `[sitecore-jss-react]` Refactored withComponentFactory ([#1086](https://github.com/Sitecore/jss/pull/1086)) and withSitecoreContext ([#1100](https://github.com/Sitecore/jss/pull/1100)) HOCs to fix Next.js SSR production issue on React 17 +* `[sitecore-jss-react]` Fix Placeholder key is not defined error in Sitecore editors ([#970](https://github.com/Sitecore/jss/pull/970)) +* `[sitecore-jss-react]` Make Image handle 'class' prop when it's passed down ([#971](https://github.com/Sitecore/jss/pull/971)) +* `[template/nextjs]` Dynamic components markup is missing in Experience Editor after adding new rendering ([#1019](https://github.com/Sitecore/jss/pull/1019)) +* `[sitecore-jss-vue]` Fix Sitecore querystring property in Link component ([#974](https://github.com/Sitecore/jss/pull/974)) +* `[node-headless-ssr-exp-edge]` `[sitecore-jss-angular]` Danish language is not rendered when refreshing the page ([#1003](https://github.com/Sitecore/jss/pull/1003)) +* `[sitecore-jss-nextjs]` RichText component not forwarding query params ([#1015](https://github.com/Sitecore/jss/pull/1015)) ## 20.0.0 diff --git a/lerna.json b/lerna.json index 64bd9bb63c..330abac4bd 100644 --- a/lerna.json +++ b/lerna.json @@ -4,7 +4,7 @@ "packages/*", "samples/*" ], - "version": "20.0.3", + "version": "20.1.0-canary.25", "npmClient": "yarn", "useWorkspaces": true } diff --git a/package.json b/package.json index 2319476c18..e3fb6e73e9 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "coverage-packages": "lerna run coverage", "install-git-hooks": "node ./scripts/install-hooks.js", "generate-docs": "lerna run generate-docs", - "version": "yarn install && git stage yarn.lock" + "version": "yarn install --no-immutable && git stage yarn.lock" }, "author": { "name": "Sitecore Corporation", diff --git a/packages/create-sitecore-jss/package.json b/packages/create-sitecore-jss/package.json index 3349852162..5838a6ebec 100644 --- a/packages/create-sitecore-jss/package.json +++ b/packages/create-sitecore-jss/package.json @@ -1,6 +1,6 @@ { "name": "create-sitecore-jss", - "version": "20.0.3", + "version": "20.1.0-canary.25", "description": "Sitecore JSS initializer", "bin": "./dist/index.js", "scripts": { diff --git a/packages/create-sitecore-jss/src/common/Initializer.ts b/packages/create-sitecore-jss/src/common/Initializer.ts index b7a67c6ebb..2f9c44a5db 100644 --- a/packages/create-sitecore-jss/src/common/Initializer.ts +++ b/packages/create-sitecore-jss/src/common/Initializer.ts @@ -1,5 +1,4 @@ import { BaseArgs } from './args/base'; - export type InitializerResults = { appName: string; initializers?: string[]; diff --git a/packages/create-sitecore-jss/src/common/processes/transform.ts b/packages/create-sitecore-jss/src/common/processes/transform.ts index 10d7dd6a34..7986cc6302 100644 --- a/packages/create-sitecore-jss/src/common/processes/transform.ts +++ b/packages/create-sitecore-jss/src/common/processes/transform.ts @@ -14,7 +14,7 @@ import { import { diffLines, diffJson, Change } from 'diff'; import { BaseArgs } from '../args/base'; -const FILE_FOR_COPY_REGEXP = /(index\.html)$|\.(gif|jpg|jpeg|tiff|png|svg|ashx|ico|pdf|jar)$/; +const FILE_FOR_COPY_REGEXP = /(index\.html)$|\.(gif|jpg|jpeg|tiff|png|svg|ashx|ico|pdf|jar|eot|woff|ttf|woff2)$/; export type JsonPropertyType = number | string | (number | string)[] | JsonObjectType; export type JsonObjectType = { diff --git a/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts new file mode 100644 index 0000000000..26c679e8f2 --- /dev/null +++ b/packages/create-sitecore-jss/src/initializers/nextjs-sxa/index.ts @@ -0,0 +1,39 @@ +import path from 'path'; +import { + Initializer, + openPackageJson, + transform, + DEFAULT_APPNAME, + ClientAppArgs, +} from '../../common'; + +export default class NextjsSxaInitializer implements Initializer { + get isBase(): boolean { + return false; + } + + async init(args: ClientAppArgs) { + const pkg = openPackageJson(`${args.destination}\\package.json`); + + // TODO: prompts for SXA + // const answers = await prompt(styleguidePrompts, args); + + const mergedArgs = { + ...args, + appName: args.appName || pkg?.config?.appName || DEFAULT_APPNAME, + appPrefix: args.appPrefix || pkg?.config?.prefix || false, + }; + + const templatePath = path.resolve(__dirname, '../../templates/nextjs-sxa'); + + await transform(templatePath, mergedArgs); + + const response = { + // TODO: next steps + nextSteps: [], + appName: mergedArgs.appName, + }; + + return response; + } +} diff --git a/packages/create-sitecore-jss/src/initializers/nextjs/index.ts b/packages/create-sitecore-jss/src/initializers/nextjs/index.ts index 5c23d17bfc..84efdb8749 100644 --- a/packages/create-sitecore-jss/src/initializers/nextjs/index.ts +++ b/packages/create-sitecore-jss/src/initializers/nextjs/index.ts @@ -42,6 +42,10 @@ export default class NextjsInitializer implements Initializer { 'nextjs-styleguide - Includes example components and setup for working disconnected', value: 'nextjs-styleguide', }, + { + name: 'nextjs-sxa - Includes example components and setup for working using SXA', + value: 'nextjs-sxa', + }, ], }); addInitializers = addInitAnswer.addInitializers; diff --git a/packages/create-sitecore-jss/src/templates/angular/package.json b/packages/create-sitecore-jss/src/templates/angular/package.json index 1690bc9e6c..70f786bb49 100644 --- a/packages/create-sitecore-jss/src/templates/angular/package.json +++ b/packages/create-sitecore-jss/src/templates/angular/package.json @@ -1,6 +1,6 @@ { "name": "<%- appName %>", - "version": "20.0.3", + "version": "20.1.0-canary", "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).", "config": { "appName": "<%- appName %>", @@ -63,8 +63,8 @@ "@apollo/client": "^3.3.12", "@ngx-translate/core": "~13.0.0", "@ngx-translate/http-loader": "~6.0.0", - "@sitecore-jss/sitecore-jss": "^20.0.1", - "@sitecore-jss/sitecore-jss-angular": "^20.0.1", + "@sitecore-jss/sitecore-jss": "^20.1.0-canary", + "@sitecore-jss/sitecore-jss-angular": "^20.1.0-canary", "apollo-angular": "~2.4.0", "bootstrap": "^4.3.1", "core-js": "~3.9.1", @@ -86,9 +86,9 @@ "@angular/cli": "~11.2.5", "@angular/compiler-cli": "~11.2.6", "@angular/language-service": "~11.2.6", - "@sitecore-jss/sitecore-jss-angular-schematics": "^20.0.1", - "@sitecore-jss/sitecore-jss-cli": "^20.0.1", - "@sitecore-jss/sitecore-jss-dev-tools": "^20.0.1", + "@sitecore-jss/sitecore-jss-angular-schematics": "^20.1.0-canary", + "@sitecore-jss/sitecore-jss-cli": "^20.1.0-canary", + "@sitecore-jss/sitecore-jss-dev-tools": "^20.1.0-canary", "@types/isomorphic-fetch": "0.0.35", "@types/jasmine": "~3.6.7", "@types/jasminewd2": "~2.0.8", diff --git a/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts b/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts index 41cf941746..d64180eb9c 100644 --- a/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts +++ b/packages/create-sitecore-jss/src/templates/angular/server.bundle.ts @@ -52,13 +52,17 @@ function renderView( if (parsedData) { state.sitecore = parsedData.sitecore; + state.language = parsedData.sitecore.context.language; } // parse the URL that's being handled by Sitecore so we can pass in the initial state to the app const routeParser = new JssRouteBuilderService(); const jssRoute = routeParser.parseRouteUrl(path.split('/').filter((segment) => segment)); state.serverRoute = jssRoute.serverRoute; - state.language = parsedViewBag.language || jssRoute.language; + + if (!state.language) { + state.language = jssRoute.language; + } const transferState = { ...state }; delete transferState.viewBag; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/data/routes/en.yml b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/data/routes/en.yml index a02d64b593..2002fd4903 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/data/routes/en.yml +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/data/routes/en.yml @@ -49,7 +49,7 @@ placeholders:

How to start with an empty app

-

To start with a fresh app with no boilerplate, run jss create {name of your app} nextjs --empty. Note, disconnected mode is not supported this way

+

To start with a fresh app with no boilerplate, run npx create-sitecore-jss and don't select any add-ons. Note, disconnected mode is not supported this way

To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:

  1. Delete /data/dictionary/*.yml
    2. diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json index 65e41767a2..39adc0f537 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json @@ -4,7 +4,7 @@ "nprogress": "~0.2.0" }, "devDependencies": { - "@sitecore-jss/sitecore-jss-dev-tools": "^20.0.1", + "@sitecore-jss/sitecore-jss-dev-tools": "^20.1.0-canary", "@types/nprogress": "^0.2.0" }, "scripts": { diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx index d80bb9c618..0e6e410eb8 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/fields/Styleguide-FieldUsage-Image.tsx @@ -1,4 +1,4 @@ -import { Image, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs'; +import { NextImage, ImageField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs'; import StyleguideSpecimen from 'components/styleguide/Styleguide-Specimen'; import { ComponentProps } from 'lib/component-props'; import { StyleguideSpecimenFields } from 'lib/component-props/styleguide'; @@ -14,24 +14,28 @@ type StyleguideFieldUsageImageProps = ComponentProps & /** * Demonstrates usage of an Image content field within JSS. * Image field data is uploaded into the Sitecore Media Library. + * These samples focus on utilizing the next image. + * However, you can also use the regular image component i.e. import { Image } from '@sitecore-jss/sitecore-jss-nextjs'; */ const StyleguideFieldUsageImage = (props: StyleguideFieldUsageImageProps): JSX.Element => (

    Plain image

    - + {/* Advanced image usage example editable: controls whether image can be edited in Sitecore Experience Editor - imageParams: parameters that are passed to Sitecore to perform server-side resizing of the image. + unoptimized: disables next/image source optimization in favor of imageParams + imageParams: parameters that are passed to Sitecore to perform server-side resizing of the image Sample rescales image to max 100x50 dimensions on the server, respecting aspect ratio IMPORTANT: imageParams must be whitelisted for resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams') any other attributes: pass through to img tag */}

    Advanced image (not editable)

    - {/* - Srcset adaptive image usage example - Adaptive srcsets are supported using Sitecore server-side resizing. - The `srcSet` can use Sitecore image resizing parameters (i.e. w, h, mw, mh). - Sample create a srcset using two sizes (server resizing), 300 and 100px max widths, respecting aspect ratio. - IMPORTANT: srcSet params must be whitelisted for adaptive resizing to occur. See /sitecore/config/*.config (search for 'allowedMediaParams') + You can use any of the props available in the next/image. + E.g. we have used 'priority' to demonstrate how an image could be considered high priority and preload. + Lazy loading is automatically disabled for images using priority. + See here for all the features provided by next/image: https://nextjs.org/docs/api-reference/next/image + next/image generates responsive srcSet automatically based on layout. See https://nextjs.org/docs/api-reference/next/image#layout. + IMPORTANT: The generated sizes should match your Sitecore server-side allowlist. See /sitecore/config/*.config (search for 'allowedMediaParams') */}

    Srcset responsive image

    -     ); diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx index f04719e6b3..44af181900 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx @@ -111,11 +111,15 @@ export const getStaticProps: GetStaticComponentProps = async (rendering, layoutD apiKey: config.sitecoreApiKey, }); - const result = await graphQLClient.request(ConnectedDemoQueryDocument, { - datasource: rendering.dataSource, - contextItem: layoutData?.sitecore?.route?.itemId, - language: layoutData?.sitecore?.context?.language, - }); + const result = await graphQLClient.request( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ConnectedDemoQueryDocument as any, + { + datasource: rendering.dataSource, + contextItem: layoutData?.sitecore?.route?.itemId, + language: layoutData?.sitecore?.context?.language, + } + ); return result; }; @@ -135,11 +139,15 @@ export const getServerSideProps: GetServerSideComponentProps = async (rendering, apiKey: config.sitecoreApiKey, }); - const result = await graphQLClient.request(ConnectedDemoQueryDocument, { - datasource: rendering.dataSource, - contextItem: layoutData?.sitecore?.route?.itemId, - language: layoutData?.sitecore?.context?.language, - }); + const result = await graphQLClient.request( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ConnectedDemoQueryDocument as any, + { + datasource: rendering.dataSource, + contextItem: layoutData?.sitecore?.route?.itemId, + language: layoutData?.sitecore?.context?.language, + } + ); return result; }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts index a0a059bec8..446b54e9bc 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/component-props/styleguide.ts @@ -3,7 +3,7 @@ import { Field } from '@sitecore-jss/sitecore-jss-nextjs'; /** * Shared styleguide specimen fields */ - export type StyleguideSpecimenFields = { +export type StyleguideSpecimenFields = { fields: { description: Field; heading: Field; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js index 57db70d284..e271979ff0 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/disconnected.js @@ -3,6 +3,9 @@ const { constants } = require('@sitecore-jss/sitecore-jss-nextjs'); const disconnectedServerUrl = `http://localhost:${process.env.PROXY_PORT || 3042}/`; const isDisconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED; +/** + * @param {import('next').NextConfig} nextConfig + */ const disconnectedPlugin = (nextConfig = {}) => { if (!isDisconnected) { return nextConfig; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/styleguide.js b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/styleguide.js index 61b5989c51..4fa624a9ff 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/styleguide.js +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/lib/next-config/plugins/styleguide.js @@ -1,3 +1,6 @@ +/** + * @param {import('next').NextConfig} nextConfig + */ const styleguidePlugin = (nextConfig = {}) => { return Object.assign({}, nextConfig, { i18n: { diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/pages/_app.tsx b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/pages/_app.tsx index a440db6348..36fa2b36ef 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/pages/_app.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/pages/_app.tsx @@ -2,6 +2,7 @@ import type { AppProps } from 'next/app'; import Router from 'next/router'; import { I18nProvider } from 'next-localization'; import NProgress from 'nprogress'; +import { SitecorePageProps } from 'lib/page-props'; // Using bootstrap and nprogress are completely optional. // bootstrap is used here to provide a clean layout for samples, without needing extra CSS in the sample app @@ -17,7 +18,7 @@ Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done()); -function App({ Component, pageProps }: AppProps): JSX.Element { +function App({ Component, pageProps }: AppProps): JSX.Element { const { dictionary, ...rest } = pageProps; return ( diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/package.json b/packages/create-sitecore-jss/src/templates/nextjs-sxa/package.json new file mode 100644 index 0000000000..6629829ecc --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/package.json @@ -0,0 +1,10 @@ +{ + "dependencies": { + "bootstrap": "^5.1.3", + "font-awesome": "^4.7.0" + }, + "devDependencies": { + "sass-alias": "^1.0.5", + "sass": "^1.52.3" + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx new file mode 100644 index 0000000000..db3b7f4808 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/Layout.tsx @@ -0,0 +1,65 @@ +/** + * This Layout needs for SXA example. + */ +import React from 'react'; +import Head from 'next/head'; +import { + Placeholder, + VisitorIdentification, + getPublicUrl, + LayoutServiceData, + Field, +} from '@sitecore-jss/sitecore-jss-nextjs'; + +// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor. +// If you're not supporting the Experience Editor, you can remove this. +const publicUrl = getPublicUrl(); + +interface LayoutProps { + layoutData: LayoutServiceData; +} + +interface RouteFields { + [key: string]: unknown; + Title?: Field; +} + +const Layout = ({ layoutData }: LayoutProps): JSX.Element => { + const { route } = layoutData.sitecore; + const fields = route?.fields as RouteFields; + const isPageEditing = layoutData.sitecore.context.pageEditing; + const mainClassPageEditing = isPageEditing ? 'editing-mode' : 'prod-mode'; + + return ( + <> + + {fields?.Title?.value || 'Page'} + + + + {/* + VisitorIdentification is necessary for Sitecore Analytics to determine if the visitor is a robot. + If Sitecore XP (with xConnect/xDB) is used, this is required or else analytics will not be collected for the JSS app. + For XM (CMS-only) apps, this should be removed. + + VI detection only runs once for a given analytics ID, so this is not a recurring operation once cookies are established. + */} + + + {/* root placeholder for the app, which we add components to using route data */} +
    +
    + +
    +
    +
    {route && }
    +
    +
    + +
    +
    + + ); +}; + +export default Layout; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss new file mode 100644 index 0000000000..6081809a40 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss @@ -0,0 +1,18 @@ +.component-content { + @include respond-to(mobile-large) { + .row { + padding: 0; + margin: 0; + } + } +} +@include respond-to(mobile-large) { + .row { + margin: 0; + padding: 0; + > * { + padding: 0; + margin: 0; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss new file mode 100644 index 0000000000..3194662fd4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss @@ -0,0 +1,80 @@ +@import "@sass/abstracts/mixins"; +@import "variables"; + +body { + font-family: Roboto; + color: $main-color; +} + + +@media (min-width: 1400px) { + .container { + max-width: 1250px; + } +} + +/**** START STYLE MAX HEIGHT ****/ +.prod-mode { + display: flex; + flex-direction: column; + height: 100vh; + + main { + flex: 1 0 auto; + } + + footer { + flex-shrink: 0; + } +} +/**** END STYLE MAX HEIGHT ****/ + +main { + .main-header { + margin-top: 55px; + margin-bottom: 30px; + + @include respond-to(mobile-large) { + margin-bottom: 0; + } + + h4 { + font-size: $text-size-50; + font-weight: 500; + line-height: 70px; + } + } + + .main-news-header { + margin-top: 60px; + + h2 { + font-size: $text-size-36; + line-height: 43px; + } + } + + @include respond-to(mobile-large) { + padding-top: 0; + margin-bottom: 0; + + .main-header { + margin-top: 10px; + + h4 { + font-size: $text-size-24; + line-height: 32px; + } + } + + .main-news-header { + padding-bottom: 35px; + + h2 { + margin-top: 0; + font-size: $text-size-18; + line-height: 22px; + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_fonts.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_fonts.scss new file mode 100644 index 0000000000..d383a9572f --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss new file mode 100644 index 0000000000..eb83fb7614 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss @@ -0,0 +1,43 @@ +@import "@sass/abstracts/mixins"; +@import "variables"; + +.prod-mode { + #footer { + padding-top: 80px; + + @include respond-to(mobile-large) { + padding-top: 0; + } + } +} + +footer { + @include respond-to(mobile-large) { + padding-top: 0; + } + .container-dark-background { + background-color: #262626; + } + + .contacts { + font-size: $text-size-14; + + a { + color: $text-white; + } + + p { + span { + color: $text-white; + } + } + } + + .indent-inner { + padding: 65px; + + @include respond-to(mobile-large) { + padding: 40px 0; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss new file mode 100644 index 0000000000..bc90737965 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss @@ -0,0 +1,50 @@ +@import "@sass/abstracts/vars/colors"; +@import "@sass/abstracts/mixins"; +@import "variables"; + +.prod-mode { + #header { + display: flex; + flex-direction: column; + + @include respond-to(mobile-large) { + padding-bottom: 0; + flex-direction: column-reverse; + } + } +} + +header { + #header { + .title { + padding-left: 50px; + + h1 { + font-size: $text-size-24; + font-weight: 600; + line-height: 18px; + padding-top: 40px; + margin: 0; + } + } + + @include respond-to(mobile-large) { + padding-bottom: 0; + padding-top: 0; + flex-direction: column-reverse; + + .title { + padding-left: 0; + text-align: center; + margin-top: -5px; + + h1 { + font-weight: 500; + line-height: 29px; + padding-top: 0; + margin-bottom: 10px; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss new file mode 100644 index 0000000000..6d2de123c1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss @@ -0,0 +1,150 @@ +@import "@sass/abstracts/vars"; +@import "variables"; + +$hamburger-width: 28px; +$hamburger-height: 18px; +$border-size: 6px; +$hamburger-margin: 18px; + +.navigation { + .menu-mobile-navigate-wrapper { + width: 100%; + } +} + +.navigation.navigation-horizontal { + width: 100%; + padding-right: 70px; + margin-top: -15px; + + .menu-mobile-navigate { + display: none; + } + + @include respond-to(mobile-large) { + padding-right: 0; + } + + .component-content { + display: inline-block; + + @include respond-to(mobile-large) { + display: none; + } + + ul.clearfix { + list-style: none; + } + .level0 { + display: flex; + } + + .level0, .level1 { + float: left; + margin-left: 30px; + + >.navigation-title { + >a { + border-width: 0; + font-size: $text-size-14; + font-weight: 400; + } + } + } + } + + @include respond-to(mobile-large) { + .component-content { + display: none; + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background-color: $bg-black-active; + z-index: 1; + + * { + text-align: center !important; + } + + nav { + padding-top: 110px; + + .level0 { + display: block; + } + } + + ul { + margin: 0; + padding: 0; + } + + .level0, .level1 { + float: unset; + margin-left: 0; + >.navigation-title { + >a { + font-size: $text-size-30; + line-height: 90px; + >span { + color: $text-white; + } + } + } + } + } + + .menu-mobile-navigate-wrapper { + .menu-mobile-navigate { + display: inline-block; + z-index: 2; + position: absolute; + right: $hamburger-margin; + top: $hamburger-margin; + height: $hamburger-width; + width: $hamburger-width; + opacity: 0; + + &:checked ~ { + .menu-humburger { + &::before { + content: "\00d7"; + color: $text-basic-active; + font-size: $text-size-48; + position: fixed; + top: 0; + right: 0; + margin-top: calc($hamburger-margin + ($hamburger-margin / 2)); + margin-right: $hamburger-margin; + line-height: 0; + border: 0; + } + } + + .component-content { + position: fixed; + display: inline-block; + } + } + } + + .menu-humburger { + &::before { + content: ""; + width: $hamburger-width; + height: $hamburger-height; + margin-right: $hamburger-margin; + margin-top: calc($hamburger-margin + ($hamburger-margin / 2)) + 8px; + display: block; + border-top: 6px solid $bg-black; + border-bottom: 6px solid $bg-black; + float: right; + z-index: 99; + cursor: pointer; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss new file mode 100644 index 0000000000..6e6291c8ec --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss @@ -0,0 +1,51 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; +/**PROMO**/ + +.promo { + &.main-promo-no-border { + padding-left: 0; + padding-right: 0; + padding-bottom: 0; + + >.component-content { + border: 0; + max-width: 583px; + + > div { + padding-bottom: 0; + } + + @include respond-to(mobile-large) { + max-width: 100%; + } + + .promo-text { + .field-promotext { + font-size: 14px; + + h3 { + font-size: $text-size-18; + margin: 15px 0; + + @include respond-to(mobile-large) { + margin: 10px 0; + } + } + p { + margin: 10px 0; + } + } + } + @include respond-to(mobile-large) { + > div { + padding: 0; + } + + .promo-text { + padding: 15px 30px 5px 30px; + } + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss new file mode 100644 index 0000000000..3bf6fbb156 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss @@ -0,0 +1,11 @@ +@import "@sass/abstracts/vars"; +@import "variables"; + +.rich-text { + font-size: $text-size-16; + + @include respond-to(mobile-large) { + padding: 0 30px 10px 30px; + font-size: $text-size-14; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss new file mode 100644 index 0000000000..2bff4a88ee --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss @@ -0,0 +1,10 @@ +$text-size-14: 14px; +$text-size-16: 16px; +$text-size-18: 18px; +$text-size-24: 24px; +$text-size-30: 30px; +$text-size-36: 36px; +$text-size-48: 48px; +$text-size-50: 50px; + +$main-color: #27272A; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss new file mode 100644 index 0000000000..37318b8ce1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss @@ -0,0 +1,8 @@ +@import "fonts"; +@import "container"; +@import "header"; +@import "promo"; +@import "navigation"; +@import "component"; +@import "rich-text"; +@import "footer"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/main.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/main.scss new file mode 100644 index 0000000000..782e492b96 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/main.scss @@ -0,0 +1,5 @@ +@import "basic/fonts"; +@import "font-awesome/scss/font-awesome"; +@import "bootstrap/scss/bootstrap"; +@import "sass/main.scss"; +@import "basic/main.scss"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss new file mode 100644 index 0000000000..22ded5b85d --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/_app.scss @@ -0,0 +1,102 @@ +html { + font-size: 62.5%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin-bottom: 0px; + height: auto !important; +} + +body { + @include opensans-font-stack(); + position: relative; + overflow: auto; + color: $text-basic; + font-size: 16px; + line-height: 1.5; + background: $page-bg; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + height: auto !important; + &.on-page-editor { + background: $page-bg-editor !important; + } +} + +a { + color: $text-basic; + cursor: pointer; + font-size: 0.85em; + &:hover { + color: $text-basic-active; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.2em; +} + +h4 { + font-size: 1em; +} + +h5 { + font-size: 0.83em; +} + +h6 { + font-size: 0.67em; +} + +ul li { + list-style-type: none; +} + +.xa-variable { + border: 0px; + padding: 1px; + margin: 0px; + background-color: #ebebe4; + color: #545454; + user-select: none; + pointer-events: none; +} + +//Navigation Bar fix +#breadcrumbMenuSubcontrol_context_menu * { + box-sizing: initial; +} + +//End navigation bar fix +.menu-mobile-navigate { + display: none; +} + +#header, #content, #footer, .sc-jss-empty-placeholder { + width: 100%; + display: flex; + flex-wrap: wrap; +} + +.sc-jss-placeholder-error { + background: #ff0000; + outline: 5px solid #e36565; + padding: 10px; + color:#fff; + max-width: 500px; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_functions.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_functions.scss new file mode 100644 index 0000000000..9c094af710 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_functions.scss @@ -0,0 +1,8 @@ +@function headings($from:1, $to:6) { + @if $from==$to { + @return 'h#{$from}'; + } + @else { + @return 'h#{$from},'+headings($from+1, $to); + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_mixins.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_mixins.scss new file mode 100644 index 0000000000..46524483b9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_mixins.scss @@ -0,0 +1,121 @@ +@import "vars"; + +/* breakpoints */ + +$break-desktop: 1100px; +$break-mobile: 380px; +$break-mobile-horizontal: 640px; +$break-mobile-large: 992px; +@mixin wrapper() { + max-width: 960px; + margin: 0 auto !important; +} +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} +@mixin headings($from: 1, $to: 6) { + @for $i from $from through $to { + h#{$i} { + @content + } + } +} +@mixin font-size($sizeValue: 1.6) { + font-size: ($sizeValue * 10) + px; + font-size: $sizeValue + rem; +} + @mixin proxima-font($weight:semibold) { + @if($weight==semibold) { + font-family: "ProximaNova-Semibold", arial, helvetica, sans-serif; + } + @else if($weight==light) { + font-family: "ProximaNova-Light", arial, helvetica, sans-serif; + } + } +@mixin opensans-font-stack() { + font-family: "Open Sans", Helvetica, Verdana, Tahoma, sans-serif; +} +@mixin loading-gif() { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJibGFjayI+DQogIDxwYXRoICBvcGFjaXR5PSIuMjUiIGQ9Ik0xNiAwIEExNiAxNiAwIDAgMCAxNiAzMiBBMTYgMTYgMCAwIDAgMTYgMCBNMTYgNCBBMTIgMTIgMCAwIDEgMTYgMjggQTEyIDEyIDAgMCAxIDE2IDQiLz4NCiAgPHBhdGggZmlsbD0nIzFhODBiNicgZD0iTTE2IDAgQTE2IDE2IDAgMCAxIDMyIDE2IEwyOCAxNiBBMTIgMTIgMCAwIDAgMTYgNHoiPg0KICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE2IDE2IiB0bz0iMzYwIDE2IDE2IiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICA8L3BhdGg+DQo8L3N2Zz4NCg==); + background-position: center center; + background-repeat: no-repeat; +} +@mixin respond-to($media) { + @if $media==mobile { + @media only screen and (max-width: $break-mobile) { + @content; + } + } + @else if $media==mobile-horizontal { + @media only screen and (max-width: $break-mobile-horizontal - 1) { + @content; + } + } + @else if $media==mobile-large { + @media only screen and (max-width: $break-mobile-large) { + @content; + } + } + @else if $media==tablet { + @media only screen and (min-width: $break-mobile + 1) and (max-width: $break-desktop - 1) { + @content; + } + } + @else if $media==all-mobile { + @media only screen and (max-width: $break-desktop - 1) { + @content; + } + } + @else if $media==desktop { + @media only screen and (min-width: $break-desktop) { + @content; + } + } +} +@mixin border-basic($position:all, $border-color:$border-gray, $border-width:1px) { + @if($position!=all) { + border-#{$position}-width: $border-width; + border-#{$position}-style: solid; + border-#{$position}-color: $border-color; + } + @else { + border-width: $border-width; + border-style: solid; + border-color: $border-color; + } +} +@mixin fixed-bg($pos, $min-height:240px) { + background-position: $pos; + background-attachment: fixed; + min-height: $min-height; +} +@mixin linear-gradient($direction, $color-stops...) { + // Direction has been omitted and happens to be a color-stop + @if is-direction($direction)==false { + $color-stops: $direction, $color-stops; + $direction: 180deg; + } + background: nth(nth($color-stops, 1), 1); + background: -webkit-linear-gradient(legacy-direction($direction), $color-stops); + background: linear-gradient($direction, $color-stops); +} +@mixin default-link-button { + @include border-basic(); + @include font-size(1.2); + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + margin: 5px 0; + padding: 10px 15px; + text-align: center; + text-decoration: none; + font-weight: bold; + &:hover { + color: $text-basic; + background: $bg-light-gray; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_vars.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_vars.scss new file mode 100644 index 0000000000..8d3e66eec4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_vars.scss @@ -0,0 +1,3 @@ +@import "vars/colors"; +@import "vars/margins"; +@import "vars/fontSizes"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_colors.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_colors.scss new file mode 100644 index 0000000000..b08847d7b0 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_colors.scss @@ -0,0 +1,283 @@ +//Backgrounds colors +$bg-transparent:transparent !default; +$bg-basic-color:#FFFFFF !default; +$bg-basic-color-active: #cccccc !default; +$bg-light-gray: #f7f7f7 !default; +$bg-light-gray-active: #dadada !default; +$bg-blue:#89C6CC; +$bg-blue-active: #15909c !default; +$bg-submenu:#edebeb !default; +$bg-submenu-active:#f6f6f6 !default; +$bg-black:#000; +$bg-black-active:#3d3d3d; +$bg-dark-gray: #262626; +//Text colors +$text-white:#fff !default; +$text-heading-color: #222 !default; +$text-basic:#747474 !default; +$text-basic-active:#878787 !default; +$text-blue:#89C6CC !default; +$text-blue-active:#15909c !default; +$text-submenu-active: #222 !default; +$text-disabled: #aaa !default; +$text-black: #000 !default; +$text-red:#de232f; +$text-gray: #262626; +//Border colors +$border-gray: #d2d2d2 !default; +$border-white: #ffffff !default; +$border-basic-color: #89C6CC !default; +$border-basic-active:#15909c !default; +$border-nav-submenu:#e1e1e1; +//Styles for each component separately +//Accordion +$accordion-header-bg: transparent; +$accordion-header-bg-active: transparent; +$accordion-toggled-bg: transparent; +$accordion-header-border: $border-gray; +//Breadcrumb +$breadcrumb-dropdown-bg:$bg-basic-color; +$breadcrumb-dropdown-bg-active:$bg-blue; +$breadcrumb-dropdown-text-active:$text-white; +$breadcrumb-bg:transparent; +$breadcrumb-color:$text-basic; +$breadcrumb-color-active:$text-blue-active; +//Buttons colors +$btn-green-light: #a0ce4e; +$btn-green: #92be43; +$btn-red-active: #c34e30; +$btn-red: #bc4526; +//Carousel +$carousel-bg:$bg-basic-color; +$carousel-nav:$text-black; +$carousel-nav-active:$text-basic-active; +$carousel-nav-border:$border-basic-color; +//Container component +$container-title-row-bg: $bg-light-gray; +//Event List +$event-list-bg:transparent; +$event-list-item-bg:$bg-basic-color; +$event-list-item-color:$text-basic; +$event-list-title-border:$border-basic-color; +//Calendar +$calendar-bg:$bg-basic-color; +$calendar-header-bg:$bg-basic-color-active; +$calendar-day-color-active:$text-white; +$calendar-title-color:$text-white; +//Feed +$feed-bg:transparent; +$feed-item-bg:transparent; +//Field Editor +$field-editor-bg:transparent; +$field-editor-table-border:$bg-light-gray; +$field-editor-text-header:$text-black; +$field-editor-text-header-active:$text-red; +$field-editor-text:$text-basic; +//File List +$file-list-bg:transparent; +$file-list-item-bg:transparent; +$file-list-title-color:$text-basic; +$file-list-title-border:transparent; +$file-list-item-color:$text-basic; +$file-list-item-color-active:$text-basic-active; +$file-list-item-size:$text-basic; +$file-list-item-borer:$border-basic-color; +$file-list-link-btn-color-active:$text-white; +$file-list-link-btn-color:$text-basic; +$file-list-link-btn-bg:$bg-blue-active; +$file-list-link-btn-bg-active:$bg-blue; +//Flip +$flip-bg:transparent; +$flip-slides-bg:$bg-basic-color; +$flip-slides0-bg:#f6f6f6; +$flip-slides1-bg:$bg-blue-active; +$flip-slides1-color:$text-white; +$flip-border:$border-gray; +//Gallery +$galleria-container-bg:transparent; +$gallery-info-bg:$bg-basic-color; +$gallery-info-border:$border-gray; +$gallery-info-text:$text-basic; +$gallery-nav-active:$text-white; +$gallery-nav:$text-basic; +$gallery-counter-color:$text-white; +//Language selector +$lang-selector-bg:$bg-basic-color; +$lang-selector-border:$border-basic-color; +$lang-selector-item-bg-active:$bg-basic-color; +$lang-selector-item-border:$border-white; +$lang-selector-item-border-active:$border-basic-active; +//Site selector +$site-selector-color:$text-basic; +//Link List +$link-list-bg:transparent; +$link-list-header-border:$border-basic-color; +$link-list-items-bg:transparent; +$link-list-item-bg:transparent; +$link-list-item-color:$text-basic; +$link-list-item-color-active:$text-basic-active; +$link-list-item-border-active:$border-basic-color; +//Login +$login-bg:transparent; +//Logout +$logout-bg:transparent; +$logout-link-text-color:$text-basic; +$logout-link-text-color-active:$text-basic-active; +$logout-link-border:$border-basic-color; +//Map +$map-bg:transparent; +$map-border:none; +//Page List +$page-list-bg:$bg-transparent; +$page-list-item-bg:$bg-transparent; +$page-list-item-title-text:$text-black; +$page-list-item-border:$border-basic-color; +//Pagination +$list-pagination-bg:transparent; +$list-pagination-active-bg:$bg-blue; +$list-pagination-active-color:$text-white; +$list-pagination-active-color:$text-blue; +$list-pagination-active-bg:$bg-submenu-active; +$list-pagination-active-border:$border-basic-active; +//Play list +$play-list-bg:transparent; +$play-list-item-bg:transparent; +$play-list-item-color:$text-basic; +$play-list-item-color-active:$text-white; +$play-list-nav-active:$text-blue; +$play-list-item-bg:$bg-light-gray; +$play-list-item-active-bg:$bg-blue; +$play-list-border:$border-basic-color; +$play-list-title-border:$border-basic-color; +//Promo +$promo-bg:$bg-basic-color; +$promo-bg-hero:rgba(0, 0, 0, 0.5); +$promo-border:$border-gray; +$promo-hero-text-color:$text-white; +$promo-shadow-border:$border-basic-color; +//Rich Text Content +$rich-content-bg:transparent; +$rich-content-color:$text-basic; +$rich-content-border:transparent; +$rich-content-link-color:$text-red; +$rich-content-link-color-active:$text-basic-active; +//Search +$search-filter:$text-basic; +$search-filter-border:$border-basic-color; +//Menu colors +$menu-hover-color:#1b809e; +$menu-active-color:#176f89; +//Navigation +$nav-bg:transparent; +$nav-color-root:$text-basic; +$nav-color-root-active:$text-basic; +$nav-border-root:$border-basic-color; +$nav-border-root-active:$border-basic-color; +$nav-color-submenu:$text-submenu-active; +$nav-color-submenu-active:$text-submenu-active; +$nav-bg-root:$bg-submenu-active; +$nav-bg-submenu:$bg-submenu-active; +$nav-bg-submenu-active:$bg-submenu-active; +$nav-border-submenu:$border-basic-color; +$nav-submenu-item-border:$border-gray; +$nav-submenu-border-active:$border-basic-color; +//Social Media Share +$social-media-share-bg:transparent; +//Tabs +$tab-heading-bg:$bg-light-gray; +$tab-heading-active-bg:$bg-basic-color; +$tab-heading-color:$text-heading-color; +$tab-heading-active-color:$text-black; +$tab-container-bg:transparent; +$tab-container-border:$border-basic-color; +//Title +$title-bg:transparent; +$title-color:$text-basic; +$title-color-active:$text-basic-active; +//Toggle +$toggle-header-bg:$bg-basic-color; +$toggle-content-bg:$bg-basic-color; +$toggle-show-color:$text-basic-active; +//Search Components +$search-btn-bg:transparent; +$search-btn-active-bg:#e0e0e0; +$search-btn-active-border:#adadad; +//Image component +$image-caption-color:$text-basic; +//Media Link Component +$media-link-bg:transparent; +$media-link-border:$border-basic-color; +$media-link-color:$text-basic; +$media-link-color-active:$text-basic-active; +//Tag Component +$tag-color:$text-basic; +$tag-color-active:$text-basic-active; +$tag-border-active:$border-basic-active; +$tag-link-bg :$bg-blue; +$tag-link-bg-active :$bg-blue-active; +$tag-link-color :$text-white; +//Link Component +$link-bg:transparent; +$link-text-color:$text-basic; +$link-text-color-active:$text-basic-active; +$link-border:$border-basic-color; +//Overlay +$overlay-bg:$bg-light-gray; +//Search Components +$search-title-border:$border-basic-color; +$search-title-color:$text-basic; +$search-item-color:$text-basic; +$search-item-color-active:$text-basic; +$search-item-border:$border-basic-color; +$search-item-border-active:$border-basic-active; +// +//Search Facet Summary +$search-facet-summary-border:transparent; +$search-facet-summary-background:transparent; +$search-facet-summary-item-color:$text-basic; +$search-facet-summary-item-color-horizontal:$text-basic; +$search-facet-summary-item-border:$border-gray; +$search-facet-summary-item-border-horizontal:$border-basic-color; +$search-facet-summary-item-shadow:$border-gray; +$search-facet-summary-clear-border-horizontal:$btn-red; +$search-facet-summary-clear-color:$text-red; +$search-facet-summary-clear-color-horizontal:$text-blue; +// +$search-filter-radius-active:$text-blue; +$search-filter-radius-border:$border-gray; +$search-filter-radius-bg:$border-gray; +// +$search-filter-slider-border-active:$border-basic-color; +$search-filter-slider-bg-active:$bg-blue; +$search-filter-slider-btn-border:$border-gray; +$search-filter-slider-btn-bg:$bg-light-gray; +$search-filter-slider-btn-bg-active:$bg-light-gray-active; +//Serach Pagination +$search-pagination-bg:transparent; +$search-pagination-active-bg:$bg-blue; +$search-pagination-active-color:$text-white; +$search-pagination-hover-color:$text-blue; +$search-pagination-hover-bg:$bg-submenu-active; +$search-pagination-hover-border:$border-basic-active; +//Search selector +$serach-selector-variant-color-active: $text-blue-active; +//Typehead +$tt-color:$text-basic; +$tt-color-active:$text-blue; +$tt-price-color:$text-blue; +$tt-dropdown-bg:$bg-light-gray; +$tt-suggestion-bg-active:$bg-light-gray-active; +$tt-dropdown-border:$border-gray; +//Video +$video-control-bg:$bg-basic-color; +$video-time-color:$text-basic; +$video-time-total-bg:$bg-black; +$video-time-handle-border:$border-gray; +$video-time-handle-bg:$bg-black; +//Form component +$form-bg: transparent; +$form-border: transparent; +$form-color: $text-basic; +//Main +$page-bg: $bg-basic-color; +$page-bg-editor:none; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_fontSizes.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_fontSizes.scss new file mode 100644 index 0000000000..fd8ed4b3a4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_fontSizes.scss @@ -0,0 +1,16 @@ +$font-small:11px; +$font-normal:13px; +$font-medium:16px; +$font-big:20px; +$font-extrabig:24px; +//Navigation +$navigation-font-basic:18px; +$navigation-font-basic-submenu:14px; +//Tabs +$tab-font-header:16px; +//Accordion +$accordion-header:16px; +//Breadcrumb +$breadcrumb-font:15px; +// Link List +$link-list-title-font:15px; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_margins.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_margins.scss new file mode 100644 index 0000000000..d03c751776 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/vars/_margins.scss @@ -0,0 +1,11 @@ +$default-padding:5px; +$default-inputs-padding:12px 10px; + +$extrasmall-margin-bottom: 2px; +$extrasmall-margin:5px; +$small-margin:10px; +$middle-margin:20px; +$large-margin:30px; +$extralarge-margin:40px; + +$small-padding:10px; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/_fonts.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/_fonts.scss new file mode 100644 index 0000000000..49d54e9f19 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/index.scss new file mode 100644 index 0000000000..dd68bcb81c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/fonts/index.scss @@ -0,0 +1 @@ +@import "fonts"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/index.scss new file mode 100644 index 0000000000..aa58842dee --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/index.scss @@ -0,0 +1,3 @@ +@import "fonts"; +@import "links"; +@import "reset/ui-datepicker"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/links/_link-button.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/links/_link-button.scss new file mode 100644 index 0000000000..ec9a121a46 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/links/_link-button.scss @@ -0,0 +1,26 @@ +@import "@sass/abstracts/vars/colors"; +@import "@sass/abstracts/mixins"; + +.button-default, .default { + @include default-link-button(); + background: #f6f6f6; + color: $text-basic; +} +.button-success, .success { + @include default-link-button(); + background: $btn-green-light; + color: $text-white; + &:hover { + color: $text-white; + background: $btn-green; + } +} +.button-warning, .warning { + @include default-link-button(); + background: $btn-red; + color: $text-white; + &:hover { + color: $text-white; + background: $btn-red-active; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/links/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/links/index.scss new file mode 100644 index 0000000000..56627622c1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/links/index.scss @@ -0,0 +1 @@ +@import "link-button"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_inputs.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_inputs.scss new file mode 100644 index 0000000000..5c1ca3e1f5 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_inputs.scss @@ -0,0 +1,58 @@ +@import "@sass/abstracts/mixins"; +@import "@sass/abstracts/vars"; + +label { + background: transparent; + color: $text-basic; +} +input, button { + display: inline-block; + box-sizing: border-box; + background: $bg-basic-color !important; + border: 1px solid $border-gray; + border-radius: 0 !important; + color: $text-basic; + font-weight: normal; + padding: 8px 2%; + clear: both; + height: auto; + font-size: $font-normal; +} +input:focus { + border: 1px solid $border-gray; +} +input[type="submit"], input[type="reset"], input[type="button"], button { + border: 1px solid $border-basic-color; + padding: 5px 20px; + &:hover { + background: $bg-light-gray !important; + } +} +input::-moz-focus-inner, button::-moz-focus-inner { + border: 0; + padding: 0; +} +input[type="text"] { + font-size: 13px; +} +input[type="text"], input[type="email"], input[type="password"], textarea, select { + box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); + color: $text-basic; + width: 100%; + background: #fff; + border: 1px solid $border-gray; +} + +select { + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + *zoom: 1; + *display: inline; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + cursor: pointer; + padding: 5px; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_links.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_links.scss new file mode 100644 index 0000000000..f36718cbec --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_links.scss @@ -0,0 +1,14 @@ +@import "@sass/abstracts/mixins"; +@import "@sass/abstracts/vars"; + +a { + background-color: transparent; + text-decoration: none; + font-size: 1em; + color: $text-basic; + border-bottom: 1px solid $border-basic-color; + &:hover { + color: $text-basic-active; + text-decoration: none; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_ui-datepicker.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_ui-datepicker.scss new file mode 100644 index 0000000000..9305794899 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/reset/_ui-datepicker.scss @@ -0,0 +1,7 @@ +@import '@sass/abstracts/vars'; + +.ui-datepicker-title { + select { + color: $text-basic; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/_richtext-files-icons.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/_richtext-files-icons.scss new file mode 100644 index 0000000000..56a7dcbf62 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/_richtext-files-icons.scss @@ -0,0 +1,86 @@ +@import '@fontawesome/scss/mixins'; +@import '@fontawesome/scss/variables'; +@import "@sass/abstracts/mixins"; + +//files icons +.field-filetypeicon>a>span, .pdf, .xls, .xlsx, .pptx, .ppt, .docx, .doc, .bmp, .png, .jpg, .jpeg, .psd, .gif, .avi, .mp4, .wmv, .mov, .mp3, .wma, .txt, .zip { + display: inline-block; + box-sizing: border-box; + font-weight: normal; + width: 15px; + height: 21px; + margin: 0; + padding: 0; + position: relative; + &:before { + @include fa-icon(); + font-size: 16px !important; + position: absolute; + display: block; + top: 50%; + margin: 0; + padding: 0; + transform: translateY(-50%); + } +} +.field-filetypeicon span:before { + content: $fa-var-file-o; +} +.field-filetypeicon { + .pdf:before { + content: $fa-var-file-pdf-o; + } + .xlsx, .xls { + &:before { + content: $fa-var-file-excel-o; + } + } + .pptx, .ppt { + &:before { + content: $fa-var-file-powerpoint-o; + } + } + .docx, .doc { + &:before { + content: $fa-var-file-word-o; + } + } + .bmp, .png, .jpg, .jpeg, .psd, .gif, .tif { + &:before { + content: $fa-var-file-image-o; + } + } + .avi, .mp4, .wmv, .mov, .mpg, .mkv, .vp6, .vid, .rv, .webm, .swf, .flv, .m4v, .h264, .mk3d, .gifv, .oggv, .movie, .divx { + &:before { + content: $fa-var-file-video-o; + } + } + .mp3, .wma, .wav, .fla, .flac, .ra, .rma, .aif, .aiff, .aa, .aac, .mid, .midi, .aax, .ac3, .au, .ogg, .avr, .m4a, .mp4a, .amz, .mka, .asx, .pcm, .m3u, .xwma { + &:before { + content: $fa-var-file-audio-o; + } + } + .txt:before { + content: $fa-var-file-text-o; + } + .zip, .zipx, .rar, .tar, .gz, .dmg, .iso { + &:before { + content: $fa-var-file-archive-o; + } + } + .css, .js, .py, .git, .py, .cpp, .h, .ini, .config { + &:before { + content: $fa-var-file-code-o; + } + } + .exe, .jar, .dll, .bat, .pl, .scr, .msi, .app, .deb, .apk, .jar, .vb, .prg, .sh { + &:before { + content: $fa-var-cogs; + } + } + .com, .net, .org, .edu, .gov, .mil, .html, .htm, .xhtml, .jhtml, .php, .php3, .php4, .php5, .phtmle, .asp, .aspx, .cfm { + &:before { + content: $fa-var-link; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/_richtext.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/_richtext.scss new file mode 100644 index 0000000000..7d5ec31386 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/_richtext.scss @@ -0,0 +1,101 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + color: $text-heading-color; +} +h1, +h2 { + margin: $small-margin 0; +} +h3, +h4, +p { + margin: $extrasmall-margin 0; +} +h5, +h6 { + margin: $extrasmall-margin 0 0; +} +strong { + font-weight: 700; +} +ul, +ol { + padding-bottom: $extrasmall-margin; + padding-top: $extrasmall-margin; + margin-left: $small-margin; +} +li { + font-size: $font-normal; + margin-left: 15px; +} +ul { + li { + list-style: disc; + list-style-position: inside; + } +} +ol { + li { + list-style: decimal; + list-style-position: inside; + } +} +a { + color: $rich-content-link-color; + text-decoration: underline; + font-size: 1em; + &:hover { + color: $rich-content-link-color-active; + } +} +table { + height: auto !important; + border: 2px solid $border-gray; + &, + tr, + th, + td { + border: solid 2px $border-gray; + background: $bg-basic-color; + border-collapse: collapse; + vertical-align: middle; + } + tr, + th, + td { + padding: 5px; + } + caption { + background-color: $bg-light-gray; + overflow: hidden; + padding: 10px; + font-size: $font-big; + font-weight: bold; + margin-left: 0; + } + tr { + border: none; + } + th, + td { + border-width: 2px 0 0 2px; + } + th { + background-color: lighten($bg-light-gray, 5%); + font-size: $font-normal; + font-weight: bold; + padding: 7px; + &:first-child { + border-left: 0; + } + } + td { + &:first-child { + border-left: 0; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/index.scss new file mode 100644 index 0000000000..f3d8b32b4b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/richtext/index.scss @@ -0,0 +1,2 @@ +@import "richtext"; +@import "richtext-files-icons"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/typehead/_typehead.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/typehead/_typehead.scss new file mode 100644 index 0000000000..0365acda25 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/typehead/_typehead.scss @@ -0,0 +1,95 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; + +.twitter-typeahead { + display: inline-block; + vertical-align: middle; + max-width: 100%; + width: 100%; +} +.tt-menu { + background: $bg-basic-color; + width: 100%; + border: 1px solid $border-gray; +} +.tt-hint { + color: $tt-color; +} +.tt-dropdown-menu { + width: 250px; + margin-top: 5px; + background-color: $tt-dropdown-bg; + border: 1px solid $tt-dropdown-border; + max-height: 300px; + overflow-y: auto; + box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08); +} +.tt-suggestion { + padding: 4px 10px; + color: $tt-color; + overflow: hidden; + a { + text-decoration: none; + } + &:last-child { + border: none; + } + .field-image { + width: 100px; + float: left; + margin-right: 10px; + } + .field-make { + font-size: 15px; + float: left; + margin-right: 5px; + } + .field-model { + margin-left: 4px; + font-size: 15px; + font-weight: bold; + width: 100%; + } + .field-priceformatted { + float: right; + font-size: 15px; + color: $tt-price-color; + margin-top: -20px; + } +} +.tt-suggestion.tt-cursor { + color: $tt-color-active; + background-color: $tt-suggestion-bg-active; + cursor: pointer; +} +.loading-in-progress { + .tt-dropdown-menu { + display: block !important; + min-height: 50px; + position: relative; + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; + height: 40px; + width: 50px; + display: block; + @include loading-gif(); + z-index: 11; + } + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $tt-dropdown-bg; + opacity: 0.8; + z-index: 10; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/typehead/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/typehead/index.scss new file mode 100644 index 0000000000..dc8dc6ba07 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/base/typehead/index.scss @@ -0,0 +1 @@ +@import "typehead"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-column-splitter.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-column-splitter.scss new file mode 100644 index 0000000000..bb537e1b54 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-column-splitter.scss @@ -0,0 +1,9 @@ +.row.column-splitter { + margin-left: 0; + margin-right: 0; + max-width: none; + >div { + padding-left: 0; + padding-right: 0 + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-container.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-container.scss new file mode 100644 index 0000000000..1c42b64476 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-container.scss @@ -0,0 +1,13 @@ +@import '@sass/abstracts/mixins'; + +.container { + padding: 0; + + &.fullwidth-container { + max-width: unset; + } + .component-content { + @include clearfix(); + } +} + diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-image.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-image.scss new file mode 100644 index 0000000000..aa19d6901e --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-image.scss @@ -0,0 +1,18 @@ +@import "@sass/abstracts/vars"; + +.image { + img { + max-width: 100%; + height: auto; + } + a { + display: inline-block; + max-width: 100%; + } + .image-caption { + display: block; + font-style: italic; + font-size: $font-small; + color: $image-caption-color; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss new file mode 100644 index 0000000000..20defac47c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-navigation.scss @@ -0,0 +1,51 @@ +@import "@sass/abstracts/mixins"; +@import "@sass/abstracts/vars"; + +.navigation { + background: $nav-bg; + ul { + padding-left: 0; + } + .level0, .level1 { + >.navigation-title>a { + font-size: $navigation-font-basic; + border-color: $nav-border-root; + border-style: solid; + border-width: 0 0 2px 0; + padding-right: 10px; + margin-right: 5px; + &:hover { + text-decoration: none; + } + } + } + a { + color: $nav-color-root; + .lt-ie9 &, .lt-ie9 & span { + color: $nav-color-root; + } + &:focus, &:hover { + color: $nav-color-root-active; + } + } + li { + &.submenu { + margin-bottom: 0; + } + >.navigation-title { + >a { + padding: 3px 5px 3px 0; + display: block; + color: $nav-color-root; + text-decoration: none; + } + } + >ul a { + font-size: $navigation-font-basic-submenu; + } + } + .submenu>ul { + padding-left: 10px; + } +} +@import "@sass/components/navigation/"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-promo.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-promo.scss new file mode 100644 index 0000000000..9575a3ecff --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-promo.scss @@ -0,0 +1,42 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.promo { + background: $promo-bg; + padding: 15px; + overflow: hidden; + box-sizing: border-box; + >.component-content { + position: relative; + @include clearfix(); + @include border-basic(all, $promo-border); + + >div { + padding: 5px; + } + } + .zg-height-fix { + .field-promoicon { + margin-top: 100px; + } + } + .field-promoicon { + overflow: hidden; + width: 100%; + img { + width: 100%; + height: auto; + } + } + .field-promolink { + margin-top: 5px; + padding-bottom: 10px; + } + &.image-full-size { + img { + margin-bottom: 10px; + } + } + @import "@sass/variants/promo"; + @import "@sass/base/richtext/richtext"; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-richtext-content.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-richtext-content.scss new file mode 100644 index 0000000000..724523219f --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/_component-richtext-content.scss @@ -0,0 +1,19 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.content, .rich-text { + border: $rich-content-border; + line-height: 1.5; + font-size: 12px; + overflow: hidden; + * { + max-width: 100%; + } + @import "@sass/base/richtext"; +} +.rich-text { + @import "@sass/variants/rich-text"; +} +.content { + @import "@sass/variants/page-content"; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_alignment.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_alignment.scss new file mode 100644 index 0000000000..7ecc31b308 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_alignment.scss @@ -0,0 +1,26 @@ +.position-left, +.position-left * { + text-align: left !important; +} + +.position-right, +.position-right * { + text-align: right !important; +} + +.position-center, +.position-center * { + text-align: center !important; +} + +.position-left select { + direction: ltr !important; +} + +.position-right select { + direction: rtl !important; +} + +.position-center select { + text-align-last: center !important; +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_boxed.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_boxed.scss new file mode 100644 index 0000000000..e54a544aa5 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_boxed.scss @@ -0,0 +1,16 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.boxed { + box-sizing: border-box; + margin: 20px 0; + @include respond-to(tablet) { + padding: 10px; + } + @include respond-to(mobile) { + padding: 10px; + } + >div { + @include wrapper(); + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_clearfix.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_clearfix.scss new file mode 100644 index 0000000000..a9acd0b520 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_clearfix.scss @@ -0,0 +1,11 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.component-content-clearfix { + .component-content { + @include clearfix; + } +} +.component-clearfix { + @include clearfix; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_highlighted.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_highlighted.scss new file mode 100644 index 0000000000..9a2ae545b0 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_highlighted.scss @@ -0,0 +1,63 @@ +.highlighted-top { + background: #ffffff; + border-top-width: 3px; + border-top-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-top h1, +.highlighted-top h2, +.highlighted-top h3, +.highlighted-top h4 { + margin: 0 0 10px 0; +} + +.highlighted-bottom { + background: #ffffff; + border-bottom-width: 3px; + border-bottom-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-bottom h1, +.highlighted-bottom h2, +.highlighted-bottom h3, +.highlighted-bottom h4 { + margin: 0 0 10px 0; +} + +.highlighted-left { + background: #ffffff; + border-left-width: 3px; + border-left-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-left h1, +.highlighted-left h2, +.highlighted-left h3, +.highlighted-left h4 { + margin: 0 0 10px 0; +} + +.highlighted-right { + background: #ffffff; + border-right-width: 3px; + border-right-color: #15909c; + border-style: solid; + padding: 25px; + margin: 0; +} + +.highlighted-right h1, +.highlighted-right h2, +.highlighted-right h3, +.highlighted-right h4 { + margin: 0 0 10px 0; +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_link-button.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_link-button.scss new file mode 100644 index 0000000000..a3b6671424 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_link-button.scss @@ -0,0 +1,16 @@ +@import "@sass/abstracts/mixins"; + +.link-button { + @import "@sass/base/links/"; +} +// Promo button +.promo.link-button { + a { + @extend .button-default; + } +} +.link.link-button { + .is-empty-hint, .field-link span, a { + @include default-link-button(); + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_promoted-box.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_promoted-box.scss new file mode 100644 index 0000000000..b8773f4af4 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/_promoted-box.scss @@ -0,0 +1,3 @@ +.promoted-box { + border: none !important; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/index.scss new file mode 100644 index 0000000000..132ec2ee77 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/common/index.scss @@ -0,0 +1,6 @@ +@import "alignment"; +@import "boxed"; +@import "clearfix"; +@import "highlighted"; +@import "link-button"; +@import "promoted-box"; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/_bordered.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/_bordered.scss new file mode 100644 index 0000000000..d07716dab9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/_bordered.scss @@ -0,0 +1,24 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.sxa-bordered { + box-sizing: border-box; + >.component-content { + padding: 0; + @include border-basic(); + border-radius: 5px; + } +} + +.column-splitter, +.row-splitter { + box-sizing: border-box; + .sxa-bordered { + padding: $default-padding !important; + >.component, + .scEmptyPlaceholder { + @include border-basic(); + border-radius: 5px; + } + } +} \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/_title-row-box.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/_title-row-box.scss new file mode 100644 index 0000000000..156cea3aab --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/_title-row-box.scss @@ -0,0 +1,66 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.title-row-box { + @include border-basic(); + box-sizing: border-box; + width: 100%; + height: 87px; + margin: 0; + padding: 0; + background: $container-title-row-bg; + >.component-content { + @include wrapper(); + .title { + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + margin: 23px 0 0 0; + padding: 0; + h1 { + @include font-size(2.2); + border: none; + } + @include respond-to(all-mobile) { + margin: 23px 0 0 20px; + } + } + .rich-text { + margin: 0; + h1, h2, h3, h4 { + margin: 0; + padding: 0; + } + } + .breadcrumb { + display: inline-block; + vertical-align: middle; + box-sizing: border-box; + @include font-size(1.4); + margin: 23px 0 0 0; + padding: 0; + float: right; + clear: both; + @include respond-to(tablet) { + margin: 23px 20px 0 0; + } + @include respond-to(mobile) { + display: none; + } + } + } + @include respond-to(all-mobile) { + .alpha { + vertical-align: middle; + box-sizing: border-box; + width: auto !important; //overrides grid + float: left; + } + .omega { + vertical-align: middle; + box-sizing: border-box; + width: auto !important; //overrides grid + float: right; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/index.scss new file mode 100644 index 0000000000..3feb29f6bc --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/container/index.scss @@ -0,0 +1 @@ +@import "bordered"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image-alignment/_image-left.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image-alignment/_image-left.scss new file mode 100644 index 0000000000..dec94f0a88 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image-alignment/_image-left.scss @@ -0,0 +1,3 @@ +.image-left .component-content>div>img { + float: left; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image-alignment/_image-right.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image-alignment/_image-right.scss new file mode 100644 index 0000000000..bbdfabe4a9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image-alignment/_image-right.scss @@ -0,0 +1,3 @@ +.image-right .component-content>div>img { + float: right; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-default-size.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-default-size.scss new file mode 100644 index 0000000000..0c77894832 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/_image-default-size.scss @@ -0,0 +1,6 @@ +.image-default-size { + img { + max-width: none; + width: auto !important; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/index.scss new file mode 100644 index 0000000000..60a0f25666 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/image/index.scss @@ -0,0 +1 @@ +@import "image-default-size"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss new file mode 100644 index 0000000000..76f359e5b9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/index.scss @@ -0,0 +1,17 @@ +@import "component-column-splitter"; +@import "component-container"; +@import "component-image"; +@import "component-navigation"; +@import "component-promo"; +@import "_component-richtext-content"; + +@import "common"; +@import "container"; +@import "layout"; +@import "spacing"; +@import "promo"; +@import "spacing"; +@import "title"; +@import "image"; +@import "link-list"; +@import "rich-text"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/_acaindent.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/_acaindent.scss new file mode 100644 index 0000000000..2cf67240dd --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/_acaindent.scss @@ -0,0 +1,5 @@ +@import "@sass/abstracts/vars"; + +.alan-indent { + margin: 0 $extralarge-margin; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/_background.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/_background.scss new file mode 100644 index 0000000000..c71207ba94 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/_background.scss @@ -0,0 +1,27 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +%cover-bg { + background-repeat: no-repeat; + background-size: cover; +} +.cover-background { + >.component-content { + @extend %cover-bg; + } +} +.fix-background { + >.component-content { + @extend %cover-bg; + @include fixed-bg(left top); + } +} +.parallax-background { + >.component-content { + @extend %cover-bg; + @include fixed-bg(50% 0); + @include respond-to(mobile-large) { + background-attachment: scroll; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/index.scss new file mode 100644 index 0000000000..a7477ec3c9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/layout/index.scss @@ -0,0 +1 @@ +@import "background"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_component-link-list.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_component-link-list.scss new file mode 100644 index 0000000000..be8e366009 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_component-link-list.scss @@ -0,0 +1,45 @@ +@import "@sass/abstracts/mixins"; +@import "@sass/abstracts/vars"; +@import '@fontawesome/scss/mixins'; +@import "@fontawesome/scss/variables"; + +.link-list { + background: $link-list-bg; + h1, h2, h3, h4, h5, h6 { + @include border-basic(bottom, $link-list-header-border); + } + >.component-content { + ul { + background: $link-list-items-bg; + } + li { + background: $link-list-item-bg; + display: block; + font-size: $font-normal; + a { + display: inline; + color: $link-list-item-color; + position: relative; + padding-left: 10px; + font-size: 1em; + text-decoration: none; + &:before { + @include fa-icon(); + content: $fa-var-chevron-right; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + font-size: 10px; + } + &:hover { + color: $link-list-item-color-active; + text-decoration: none; + border-bottom: 1px solid $link-list-item-border-active; + } + } + } + } + @import "../../base/links"; + @import "../../variants/link-list"; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_list-vertical.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_list-vertical.scss new file mode 100644 index 0000000000..6e7e270d86 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/_list-vertical.scss @@ -0,0 +1,20 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; + +.link-list.list-vertical { + h3 { + background: $bg-basic-color; + width: 100%; + display: inline-block; + padding: 3px 5px; + @include border-basic(); + } + a { + border: none; + } + li { + display: block; + margin-left: $middle-margin; + } +} + diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/index.scss new file mode 100644 index 0000000000..85cbda239a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/link-list/index.scss @@ -0,0 +1,2 @@ +@import "component-link-list"; +@import "list-vertical"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-fat.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-fat.scss new file mode 100644 index 0000000000..a144352f26 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-fat.scss @@ -0,0 +1,58 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; +@import '@fontawesome/scss/mixins'; +@import '@fontawesome/scss/variables'; + +.navigation.navigation-fat { + background: $bg-basic-color; + @include border-basic(); + + a { + text-decoration: none; + } + + nav > ul { + list-style: none; + padding: 10px 0; + overflow: hidden; + } + + .rel-level1 { + margin: $small-margin; + padding: 0; + display: inline-block; + vertical-align: top; + + &.submenu ul a { + position: relative; + &:before { + @include fa-icon(); + transform: translateY(-50%); + position: absolute; + content: $fa-var-chevron-right; + top: 50%; + left: -9px; + font-size: 10px; + } + } + > .navigation-title > a { + @include border-basic(top, $border-basic-color, 2px); + border-bottom: 0; + background: $nav-bg-root; + padding: 5px 10px; + display: block; + width: auto; + &:hover { + border-color: $menu-hover-color; + } + } + > ul { + padding: 0; + } + } + .rel-level2 { + padding-left: $small-margin; + display: block; + } +} + diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss new file mode 100644 index 0000000000..e27302550b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-main-horizontal-vertical.scss @@ -0,0 +1,152 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; +@import '@fontawesome/scss/mixins'; +@import '@fontawesome/scss/variables'; + +$borderSize: 2px; + +//Drop Down Navigation Common Part +.navigation.navigation-main { + .component-content>nav { + position: relative; + ul { + @include clearfix(); + } + } + .rel-level1 { + float: left; + &.active { + >.navigation-title>a { + border-color: $nav-border-root; + } + } + >.navigation-title>a { + border-width: 2px 0 0 0; + border-color: transparent; + &:hover { + border-color: $nav-border-root; + } + } + &.submenu { + >.navigation-title a { + position: relative; + padding-right: 15px; + &:after { + @include fa-icon(); + font-size: 10px; + content: $fa-var-chevron-down; + position: absolute; + transform: translateY(-50%); + top: 50%; + right: 0; + } + } + } + //submenu + >ul { + overflow: hidden; + display: none; + z-index: 10; + position: absolute; + top: 100%; + background: $nav-bg-submenu; + margin-left: 0; + margin-top: -$borderSize; + border-top: $borderSize solid $nav-border-submenu; + border-left: 1px solid $nav-submenu-item-border; + border-bottom: 1px solid $nav-submenu-item-border; + } + &:active, &:hover { + >a { + &+ul { + display: block !important; + } + } + >ul { + display: block !important; + min-width: 60px; + } + } + &.active { + >.navigation-title>a:link, >.navigation-title>a:visited { + color: $text-basic-active; + } + >span { + display: block; + padding: 10px 20px; + color: $text-white; + } + } + &.submenu.active { + border-color: $menu-active-color; + } + } + .rel-level2 { + &:hover, &:focus { + transition: background .2s ease-in; + background: $nav-bg-submenu-active; + } + div>a { + display: block; + font-weight: normal; + font-size: $navigation-font-basic-submenu; + text-align: center; + &:hover, &:focus { + color: $nav-color-submenu; + } + } + &.submenu { + box-sizing: border-box; + &.navigation-image { + text-align: center; + >a, .field-navigationtext { + text-align: left; + } + } + } + } + // Additional styles fot drop down horizontal navigation + &.navigation-main-horizontal { + .submenu>ul { + padding-left: 0; + } + .rel-level1 { + &:active, &:hover { + >a { + &+ul { + display: inline-flex !important; + flex-wrap: wrap; + } + } + >ul { + display: inline-flex !important; + flex-wrap: wrap; + } + } + >ul { + width: 100%; + clear: both; + left: 0; + } + } + .rel-level2 { + float: left; + padding: 10px; + @include border-basic(right, $nav-submenu-item-border, 1px); + flex-grow: 1; + flex-basis: 23%; + } + } + // Additional styles fot drop down vertical navigation + &.navigation-main-vertical { + .rel-level1>ul { + padding-left: 0; + width: auto; + left: auto; + @include border-basic(right, $nav-submenu-item-border, 1px); + >li { + padding: 5px 10px; + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss new file mode 100644 index 0000000000..33b534c557 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-mobile.scss @@ -0,0 +1,89 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; +@import '@fontawesome/scss/mixins'; +@import '@fontawesome/scss/variables'; + +.navigation.navigation-mobile { + nav > ul { + border: none; + @include border-basic(); + } + .rel-level1 { + cursor: pointer; + margin: 0; + background: $bg-basic-color; + > ul { + li { + position: relative; + a:before { + @include fa-icon(); + content: $fa-var-chevron-right; + display: block; + position: absolute; + left: 0; + font-size: 10px; + top: 20px; + transform: translateY(-50%); + } + } + padding-left: 25px; + display: none; + background: $nav-bg-submenu; + } + &.submenu { + > ul { + display: none; + } + &:focus { + > .navigation-title:before { + transform: rotate(180deg); + transition: 0.6s; + transform-style: preserve-3d; + } + > ul { + display: block; + } + } + > .navigation-title { + position: relative; + &:before { + @include fa-icon(); + content: $fa-var-chevron-down; + display: block; + position: absolute; + right: 10px; + font-size: 10px; + top: 20px; + transform: translateY(-50%); + transform: rotate(0); + transition: 0.6s; + transform-style: preserve-3d; + } + } + } + > .navigation-title { + border-bottom: 1px solid $border-basic-color; + margin: 0; + &:last-child { + border-bottom: none; + } + } + .navigation-title { + padding: 10px; + > a { + text-decoration: none; + color: $text-basic; + display: inline; + } + } + } + .rel-level2 { + display: list-item; + .navigation-title > a { + font-weight: 500; + } + ul { + display: none; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-sidebar.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-sidebar.scss new file mode 100644 index 0000000000..9110cd717e --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_navigation-sidebar.scss @@ -0,0 +1,29 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.navigation.navigation-sidebar { + a { + text-decoration: none; + } + nav>ul { + .rel-level1 { + >.navigation-title { + margin-bottom: 0; + >a { + padding: 5px 10px; + display: block; + position: relative; + z-index: 1; + margin-right: 0; + } + } + >ul { + margin-left: $small-margin; + margin-top: $extrasmall-margin; + } + } + .rel-level2 { + display: block; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_sitemap-navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_sitemap-navigation.scss new file mode 100644 index 0000000000..95725b9164 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/_sitemap-navigation.scss @@ -0,0 +1,20 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; +@import '@fontawesome/scss/mixins'; +@import '@fontawesome/scss/variables'; + +.navigation.sitemap-navigation { + .level2 a { + position: relative; + padding-left: 10px; + &:before { + @include font-size(1.4); + @include fa-icon(); + transform: translateY(-50%) scale(1, -1); + position: absolute; + content: $fa-var-share; + top: 50%; + left: -8px; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/index.scss new file mode 100644 index 0000000000..abd702aa65 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/navigation/index.scss @@ -0,0 +1,5 @@ +@import "navigation-main-horizontal-vertical"; +@import "navigation-mobile"; +@import "navigation-sidebar"; +@import "sitemap-navigation"; +@import "navigation-fat"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_absolute-bottom-link.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_absolute-bottom-link.scss new file mode 100644 index 0000000000..9d6fec1b4c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_absolute-bottom-link.scss @@ -0,0 +1,8 @@ +.promo.absolute-bottom-link { + position: relative; + .field-promolink { + position: absolute; + bottom: 10px; + right: 10px; + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-hero.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-hero.scss new file mode 100644 index 0000000000..365e59a69e --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-hero.scss @@ -0,0 +1,40 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.promo.promo-hero { + position: relative; + text-align: center; + &.promo-hero-half { + float: left; + width: 50%; + @include respond-to(all-mobile) { + float: none; + width: 100%; + } + } + .field-promotext { + display: inline-block; + transform: translateY(-50%); + position: absolute; + top: 50%; + left: 0; + right: 0; + padding: 20px; + color: $promo-hero-text-color; + background: $promo-bg-hero; + >a { + color: inherit; + text-decoration: none; + } + @include respond-to(all-mobile) { + width: 100%; + margin: 0; + h1 { + @include font-size(2.4); + } + h2, h3, h4 { + @include font-size(2.0); + } + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-shadow.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-shadow.scss new file mode 100644 index 0000000000..01fe32b147 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/_promo-shadow.scss @@ -0,0 +1,42 @@ +@import "@sass/abstracts/vars"; +@import "@sass/abstracts/mixins"; + +.promo-shadow { + max-width: 960px; + padding: 0; + border-top-width: 3px; + border-top-color: $promo-shadow-border; + border-style: solid; + overflow: visible; + position: relative; + &.promo { + float: left; + } + >.component-content { + @include respond-to(all-mobile) { + margin: 0 10px 30px 10px; + } + padding: 15px; + margin: 0 0 30px 0; + &:before, &:after { + opacity: 0.7; + box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7); + position: absolute; + z-index: -1; + height: 20%; + max-height: 100px; + max-width: 460px; + width: 47%; + content: ""; + bottom: 10px; + } + &:before { + left: 2%; + transform: rotate(-3deg); + } + &:after { + right: 2%; + transform: rotate(3deg); + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/index.scss new file mode 100644 index 0000000000..337235b99a --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/promo/index.scss @@ -0,0 +1,3 @@ +@import "absolute-bottom-link"; +@import "promo-hero"; +@import "promo-shadow"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/_rich-text-lists.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/_rich-text-lists.scss new file mode 100644 index 0000000000..9d7b3bc88b --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/_rich-text-lists.scss @@ -0,0 +1,63 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; + +.rich-text-lists, +.field-featurelist { + ul { + box-sizing: border-box; + margin: 0; + padding: 0; + li { + @include font-size(1.3); + position: relative; + line-height: 21px; + list-style: none; + margin: 0; + padding: 5px 0 5px 25px; + &:before { + display: inline-block; + vertical-align: middle; + @include font-size(1.2); + font-family: 'FontAwesome', sans-serif; + position: absolute; + top: 3px; + left: 0; + color: $text-basic; + text-align: center; + content: '\f00c'; + width: 20px; + margin: 0 5px 0 0; + padding: 0; + } + } + } +} +.field-featurelist { + ul { + li { + &:before { + display: inline-block; + vertical-align: middle; + @include font-size(1.2); + font-family: 'FontAwesome', sans-serif; + position: absolute; + top: 3px; + left: 0; + color: $text-basic; + text-align: center; + content: '\f046'; + width: 20px; + margin: 0 5px 0 0; + padding: 0; + } + } + } +} +.media-link { + &.file-type-icon-media-link { + float: left; + .field-filetypeicon { + text-align: center; + } + } +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/index.scss new file mode 100644 index 0000000000..767bfc1cd6 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/rich-text/index.scss @@ -0,0 +1 @@ +@import "rich-text-lists"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/_background-colors.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/_background-colors.scss new file mode 100644 index 0000000000..30afeef82e --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/_background-colors.scss @@ -0,0 +1,14 @@ +@import '@sass/abstracts/vars'; + +.container-gray-background { + background: $bg-light-gray; +} +.container-clean-background { + background: $bg-basic-color; +} +.container-dark-background { + background: $bg-black-active; +} +.container-color-background { + background: $bg-blue; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/_indent.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/_indent.scss new file mode 100644 index 0000000000..9d2f599e66 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/_indent.scss @@ -0,0 +1,10 @@ +@import '@sass/abstracts/vars'; +.indent { + margin: 0 $extralarge-margin; +} +.indent-top { + margin-top: $middle-margin; +} +.indent-bottom { + margin-bottom: $middle-margin; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/index.scss new file mode 100644 index 0000000000..c8292402bb --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/spacing/index.scss @@ -0,0 +1,2 @@ +@import "background-colors"; +@import "indent"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/_component-title.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/_component-title.scss new file mode 100644 index 0000000000..1f21cb4536 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/_component-title.scss @@ -0,0 +1,24 @@ +@import '@sass/abstracts/vars'; +@import '@sass/abstracts/mixins'; + +.title { + background: $title-bg; + h1, + .field-title { + a, span { + @include border-basic(bottom, $border-basic-color); + font-size: $font-extrabig; + margin-bottom: $small-margin; + color: $title-color; + line-height: normal; + padding-bottom: 10px; + display: block; + text-decoration: none; + cursor: pointer; + &:hover { + color: $title-color-active; + } + } +} + @import '@sass/variants/title'; +} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/index.scss new file mode 100644 index 0000000000..6045d0642d --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/components/title/index.scss @@ -0,0 +1 @@ +@import "component-title"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/main.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/main.scss new file mode 100644 index 0000000000..ee7d1dfc81 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/main.scss @@ -0,0 +1,4 @@ +@import "base"; +@import "components"; +@import "variants"; +@import "app"; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/index.scss new file mode 100644 index 0000000000..32b1028843 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/index.scss @@ -0,0 +1,6 @@ +@import "link-list"; +@import "navigation"; +@import "page-content"; +@import "promo"; +@import "rich-text"; +@import "title"; \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/link-list/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/link-list/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/navigation/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/navigation/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/page-content/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/page-content/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/promo/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/promo/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/rich-text/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/rich-text/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/title/index.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/variants/title/index.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/ColumnSplitter.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/ColumnSplitter.tsx new file mode 100644 index 0000000000..aa871e4796 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/ColumnSplitter.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { + ComponentParams, + ComponentRendering, + Placeholder, +} from '@sitecore-jss/sitecore-jss-nextjs'; + +interface ComponentProps { + rendering: ComponentRendering & { params: ComponentParams }; + params: ComponentParams; +} + +export const Default = (props: ComponentProps): JSX.Element => { + const styles = `${props.params.GridParameters ?? ''} ${props.params.Styles ?? ''}`.trimEnd(); + const columnWidths = [ + props.params.ColumnWidth1, + props.params.ColumnWidth2, + props.params.ColumnWidth3, + props.params.ColumnWidth4, + props.params.ColumnWidth5, + props.params.ColumnWidth6, + props.params.ColumnWidth7, + props.params.ColumnWidth8, + ]; + const columnStyles = [ + props.params.Styles1, + props.params.Styles2, + props.params.Styles3, + props.params.Styles4, + props.params.Styles5, + props.params.Styles6, + props.params.Styles7, + props.params.Styles8, + ]; + const enabledPlaceholders = props.params.EnabledPlaceholders.split(','); + + return ( +
    + {enabledPlaceholders.map((ph, index) => { + const phKey = `column-${ph}-{*}`; + const phStyles = `${columnWidths[+ph - 1]} ${columnStyles[+ph - 1] ?? ''}`.trimEnd(); + + return ( +
    +
    + +
    +
    + ); + })} +
    + ); +}; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx new file mode 100644 index 0000000000..98df13ac0c --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { + ComponentParams, + ComponentRendering, + Placeholder, + useSitecoreContext, +} from '@sitecore-jss/sitecore-jss-nextjs'; +import config from 'temp/config'; + +const BACKGROUND_REG_EXP = new RegExp( + /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi +); + +interface ComponentProps { + rendering: ComponentRendering & { params: ComponentParams }; + params: ComponentParams; +} + +export const Default = (props: ComponentProps): JSX.Element => { + const { sitecoreContext } = useSitecoreContext(); + const containerStyles = props.params && props.params.Styles ? props.params.Styles : ''; + const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd(); + const phKey = `container-${props.params.DynamicPlaceholderId}`; + let backgroundImage = props.params.BackgroundImage as string; + let backgroundStyle: { [key: string]: string } = {}; + + if (backgroundImage) { + const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`; + backgroundImage = `${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()?.replace(/-/gi, '')}`; + + // TODO: here uses ${config.sitecoreApiHost} it's temporary solutions - it will be removed when be fix bug - UNABLE_TO_VERIFY_LEAF_SIGNATUE + // TODO: this fix https://doc.sitecore.com/xp/en/developers/hd/200/sitecore-headless-development/walkthrough--configuring-sitecore-ca-certificates-for-node-js.html doesn't help + backgroundStyle = { + backgroundImage: `url('${config.sitecoreApiHost}${prefix}${backgroundImage}')`, + }; + } + + return ( +
    +
    +
    + +
    +
    +
    + ); +}; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx new file mode 100644 index 0000000000..a911be7e37 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { + Image as JssImage, + Link as JssLink, + ImageField, + Field, + LinkField, + Text, + useSitecoreContext, +} from '@sitecore-jss/sitecore-jss-nextjs'; + +interface Fields { + Image: ImageField; + ImageCaption: Field; + TargetUrl: LinkField; +} + +type ImageProps = { + params: { [key: string]: string }; + fields: Fields; +}; + +const ImageDefault = (props: ImageProps): JSX.Element => ( +
    +
    + Image +
    +
    +); + +export const Default = (props: ImageProps): JSX.Element => { + const { sitecoreContext } = useSitecoreContext(); + + if (props.fields) { + const Image = () => ; + + return ( +
    +
    + {sitecoreContext.pageState === 'edit' ? ( + + ) : ( + + + + )} + +
    +
    + ); + } + + return ; +}; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx new file mode 100644 index 0000000000..15034d9b27 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/LinkList.tsx @@ -0,0 +1,86 @@ +import React from 'react'; +import { Link as JssLink, Text, LinkField, TextField } from '@sitecore-jss/sitecore-jss-nextjs'; + +type ResultsFieldLink = { + field: { + link: LinkField; + }; +}; + +interface Fields { + data: { + datasource: { + children: { + results: ResultsFieldLink[]; + }; + field: { + title: TextField; + }; + }; + }; +} + +type LinkListProps = { + params: { [key: string]: string }; + fields: Fields; +}; + +type LinkListItemProps = { + key: string; + index: number; + total: number; + field: LinkField; +}; + +const LinkListItem = (props: LinkListItemProps) => { + let className = `item${props.index}`; + className += (props.index + 1) % 2 == 0 ? ' even' : ' odd'; + if (props.index == 0) { + className += ' first'; + } + if (props.index + 1 == props.total) { + className += ' last'; + } + return ( +
  2. +
    + +
    +
    3. + ); +}; + +export const Default = (props: LinkListProps): JSX.Element => { + const datasource = props.fields?.data?.datasource; + const styles = `component link-list ${props.params.styles}`.trimEnd(); + + if (datasource) { + const list = datasource.children.results + .filter((element: ResultsFieldLink) => element?.field?.link) + .map((element: ResultsFieldLink, key: number) => ( + + )); + + return ( +
    +
    + +
      {list}
    +
    +
    + ); + } + + return ( +
    +
    +

    Link List

    +
    +
    + ); +}; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx new file mode 100644 index 0000000000..5417334086 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Navigation.tsx @@ -0,0 +1,153 @@ +import React, { useState } from 'react'; +import { + Link, + LinkField, + Text, + TextField, + useSitecoreContext, +} from '@sitecore-jss/sitecore-jss-nextjs'; + +interface Fields { + Id: string; + DisplayName: string; + Title: TextField; + NavigationTitle: TextField; + Href: string; + Querystring: string; + Children: Array; + Styles: string[]; +} + +type NavigationProps = { + params?: { [key: string]: string }; + fields: Fields; + handleClick: (event?: React.MouseEvent) => void; + relativeLevel: number; +}; + +const getNavigationText = function (props: NavigationProps): JSX.Element | string { + let text; + + if (props.fields.NavigationTitle) { + text = ; + } else if (props.fields.Title) { + text = ; + } else { + text = props.fields.DisplayName; + } + + return text; +}; + +const getLinkField = (props: NavigationProps): LinkField => ({ + value: { + href: props.fields.Href, + title: getLinkTitle(props), + querystring: props.fields.Querystring, + }, +}); + +export const Default = (props: NavigationProps): JSX.Element => { + const [isOpenMenu, openMenu] = useState(false); + const { sitecoreContext } = useSitecoreContext(); + + if (!Object.values(props.fields).length) { + return ( +
    +
    [Navigation]
    +
    + ); + } + + const handleToggleMenu = (event?: React.MouseEvent, flag?: boolean): void => { + if (event && sitecoreContext?.pageEditing) { + event.preventDefault(); + } + + if (flag !== undefined) { + return openMenu(flag); + } + + openMenu(!isOpenMenu); + }; + + const list = Object.values(props.fields) + .filter((element) => element) + .map((element: Fields, key: number) => ( + ) => handleToggleMenu(event, false)} + relativeLevel={1} + /> + )); + const styles = + props.params != null ? `${props.params.GridParameters} ${props.params.Styles}` : null; + + return ( +
    +