From 287fc4288377d9fb63503e137cf63856657d7ca8 Mon Sep 17 00:00:00 2001 From: Kenny Lam Date: Thu, 4 Feb 2021 08:06:18 -0500 Subject: [PATCH] chore(masthead): update codesandbox example --- .../components/masthead-search/.gitignore | 2 - .../components/masthead-search/index.html | 104 ------------------ .../components/masthead-search/package.json | 24 ---- .../masthead-search/sandbox.config.json | 3 - .../masthead-search/snowpack.config.json | 3 - .../components/masthead-search/src/index.js | 38 ------- .../components/masthead-search/src/index.scss | 37 ------- .../codesandbox/components/masthead/.sassrc | 5 + .../components/masthead/package.json | 2 +- 9 files changed, 6 insertions(+), 212 deletions(-) delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/.gitignore delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/index.html delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/package.json delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/sandbox.config.json delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/snowpack.config.json delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/src/index.js delete mode 100644 packages/web-components/examples/codesandbox/components/masthead-search/src/index.scss create mode 100644 packages/web-components/examples/codesandbox/components/masthead/.sassrc diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/.gitignore b/packages/web-components/examples/codesandbox/components/masthead-search/.gitignore deleted file mode 100644 index 7d5b7a94f4d..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -/build -/node_modules diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/index.html b/packages/web-components/examples/codesandbox/components/masthead-search/index.html deleted file mode 100644 index 19ddca76f23..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/index.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - @carbon/ibmdotcom-web-components example - - - - - - - - - - Products - Analytics - Blockchain - - - Services - Financing - Training and skills - - Industries - - - - - My IBM - Profile - - Log out - - - - - - - Products - Analytics - Blockchain - - - Services - Financing - Training and skills - - Industries - - -
-
-
-
-

- Purpose and function -

-

- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework - for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The - shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move - between pages. -
-
- The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. - Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great - user experiences. All IBM products built with Carbon are required to use the shell’s header. -
-
- To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the Apple - menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal dock - along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of the Mac - UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. -

-

- Header responsive behavior -

-

- As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav - collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. -

-

- Secondary navigation -

-

- The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width or - flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav and - may be mixed together. There are several configurations of the side-nav, but only one configuration should be used per - product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the - side-nav. -

-
-
-
-
- - diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/package.json b/packages/web-components/examples/codesandbox/components/masthead-search/package.json deleted file mode 100644 index fa1368c1130..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "ibmdotcom-web-components-masthead-search-example", - "version": "0.1.0", - "private": true, - "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.", - "license": "Apache-2", - "scripts": { - "start": "snowpack dev", - "build": "snowpack build" - }, - "dependencies": { - "@carbon/ibmdotcom-web-components": "canary", - "carbon-components": "~10.17.0", - "lit-element": "~2.4.0", - "lit-html": "~1.3.0", - "lodash-es": "^4.17.0" - }, - "devDependencies": { - "@snowpack/plugin-dotenv": "^2.0.0", - "@types/lodash-es": "^4.17.0", - "snowpack": "2.10.1", - "snowpack-plugin-sass": "^1.0.0" - } -} diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/sandbox.config.json b/packages/web-components/examples/codesandbox/components/masthead-search/sandbox.config.json deleted file mode 100644 index a4df8557d7b..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/sandbox.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "template": "node" -} diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/snowpack.config.json b/packages/web-components/examples/codesandbox/components/masthead-search/snowpack.config.json deleted file mode 100644 index 7416ebbc7d5..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/snowpack.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "plugins": ["@snowpack/plugin-dotenv", "snowpack-plugin-sass"] -} diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/src/index.js b/packages/web-components/examples/codesandbox/components/masthead-search/src/index.js deleted file mode 100644 index fd195a83fd9..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/src/index.js +++ /dev/null @@ -1,38 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-menu-button.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-logo.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/top-nav.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/top-nav-item.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/top-nav-menu.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/top-nav-menu-item.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/left-nav.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/left-nav-item.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/left-nav-menu.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/left-nav-menu-item.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/left-nav-overlay.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-global-bar.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-profile.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-profile-item.js'; -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-search-container.js'; -import './index.scss'; - -window.digitalData = { - page: { - pageInfo: { - language: 'en-US', - ibm: { - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/codesandbox/components/masthead-search/src/index.scss b/packages/web-components/examples/codesandbox/components/masthead-search/src/index.scss deleted file mode 100644 index c081c586bee..00000000000 --- a/packages/web-components/examples/codesandbox/components/masthead-search/src/index.scss +++ /dev/null @@ -1,37 +0,0 @@ -// -// @license -// -// Copyright IBM Corp. 2020 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles -$feature-flags: ( - enable-css-custom-properties: true, - grid-columns-16: true, -); - -@import 'carbon-components/scss/globals/grid/grid'; -@import 'carbon-components/scss/components/ui-shell/content'; - -body { - padding: calc(#{$spacing-09} + #{mini-units(6)} + 1px) $spacing-09 $spacing-09 $spacing-09; -} - -@media (min-width: 66rem) { - .bx--offset-lg-3 { - margin-left: 0; - } -} - -.bx--content.dds-ce-demo--ui-shell-content { - h2 { - margin: 30px 0; - - &:first-of-type { - margin-top: 0; - } - } -} diff --git a/packages/web-components/examples/codesandbox/components/masthead/.sassrc b/packages/web-components/examples/codesandbox/components/masthead/.sassrc new file mode 100644 index 00000000000..386e3a39700 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/masthead/.sassrc @@ -0,0 +1,5 @@ +{ + "includePaths": [ + "node_modules" + ], +} diff --git a/packages/web-components/examples/codesandbox/components/masthead/package.json b/packages/web-components/examples/codesandbox/components/masthead/package.json index e857df69a73..763fa0d55f9 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/package.json +++ b/packages/web-components/examples/codesandbox/components/masthead/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@carbon/ibmdotcom-web-components": "canary", - "carbon-components": "^10.15.0", + "carbon-components": "latest", "lit-element": "~2.4.0", "lit-html": "~1.3.0" },