Skip to content

Commit

Permalink
chore(codesandbox): update examples (carbon-design-system#6165)
Browse files Browse the repository at this point in the history 
### Related Ticket(s)

carbon-design-system#6140 

### Description
![5a7kvs](https://user-images.githubusercontent.com/909118/119373929-f95a0d00-bc86-11eb-9a66-7b045895027c.png)


### Changelog


**Changed**

- all web component example `package.json` and HTML examples
- fixes broken/missing imports

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
  • Loading branch information
@kennylam
kennylam authored May 26, 2021
1 parent 4520af3 commit cc1f169
Show file tree
Hide file tree
Showing 246 changed files with 4,080 additions and 19,448 deletions.
142 changes: 94 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,54 +6,100 @@
-->

<html>
<head>
<title>Carbon for IBM.com Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="//unpkg.com/carbon-components@latest/css/carbon-components.min.css"
/>
<link rel="stylesheet" href="src/styles.css" />
</head>

<head>
<title>Carbon for IBM.com Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="//unpkg.com/carbon-components@latest/css/carbon-components.min.css">
<link rel="stylesheet" href="src/styles.css">
</head>

<body>
<h1>Hello World! 👋</h1>
<div id="app">
<ul id="my-dropdown" data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">
Dropdown label </li>
<svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
<path d="M10 0L5 5 0 0z"></path>
</svg>
<li>
<ul class="bx--dropdown-list">
<li data-option data-value="all" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
</li>
</ul>
</li>
</ul>

<button class="bx--btn bx--btn--secondary" type="button">
Secondary
<svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
<title>add a new connection to your instance</title>
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
</svg>
</button>

</div>
<script src="src/index.js"></script>
</body>
<body>
<h1>Hello World! 👋</h1>
<div id="app">
<ul
id="my-dropdown"
data-dropdown
data-value
class="bx--dropdown"
tabindex="0"
>
<li class="bx--dropdown-text">
Dropdown label
</li>
<svg
class="bx--dropdown__arrow"
width="10"
height="5"
viewBox="0 0 10 5"
fill-rule="evenodd"
>
<path d="M10 0L5 5 0 0z"></path>
</svg>
<li>
<ul class="bx--dropdown-list">
<li data-option data-value="all" class="bx--dropdown-item">
<a
class="bx--dropdown-link"
href="javascript:void(0)"
tabindex="-1"
>Option 1</a
>
</li>
<li data-option data-value="cloudFoundry" class="bx--dropdown-item">
<a
class="bx--dropdown-link"
href="javascript:void(0)"
tabindex="-1"
>Option 2</a
>
</li>
<li data-option data-value="staging" class="bx--dropdown-item">
<a
class="bx--dropdown-link"
href="javascript:void(0)"
tabindex="-1"
>Option 3</a
>
</li>
<li data-option data-value="dea" class="bx--dropdown-item">
<a
class="bx--dropdown-link"
href="javascript:void(0)"
tabindex="-1"
>Option 4</a
>
</li>
<li data-option data-value="router" class="bx--dropdown-item">
<a
class="bx--dropdown-link"
href="javascript:void(0)"
tabindex="-1"
>Option 5</a
>
</li>
</ul>
</li>
</ul>

<button class="bx--btn bx--btn--secondary" type="button">
Secondary
<svg
class="bx--btn__icon"
width="16"
height="16"
viewBox="0 0 16 16"
fill-rule="evenodd"
>
<title>add a new connection to your instance</title>
<path
d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"
></path>
</svg>
</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
"node": "12 || 14"
},
"workspaces": {
"packages": ["packages/*"]
"packages": [
"packages/*"
]
},
"scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
Expand Down
9 changes: 6 additions & 3 deletions packages/react/.storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,19 @@
font-weight: 400;
font-family: 'IBM Plex Sans';
font-style: normal;
src:
local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) format('woff');
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff)
format('woff');
font-display: auto;
}

@font-face {
font-weight: 600;
font-family: 'IBM Plex Sans';
font-style: normal;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) format('woff');
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff)
format('woff');
font-display: auto;
}
</style>
10 changes: 8 additions & 2 deletions packages/styles/.storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,14 @@
/>

<!-- Open Graph -->
<meta property="og:title" content="Carbon Components React with Expressive Theme" />
<meta property="og:site_name" content="Carbon Components React with Expressive Theme" />
<meta
property="og:title"
content="Carbon Components React with Expressive Theme"
/>
<meta
property="og:site_name"
content="Carbon Components React with Expressive Theme"
/>
<meta
property="og:description"
content="A collection of React components from the Carbon Design System, with the expressive theme applied"
Expand Down
25 changes: 13 additions & 12 deletions packages/web-components/.storybook/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
LICENSE file in the root directory of this source tree.
-->

<meta name="keywords" content="ibm.com, design, system, design system, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements">
<meta name="description" content="This is the Web Components (custom elements) implementation of Carbon for IBM.com.">

<!-- Open Graph -->
<meta property="og:title" content="Carbon for IBM.com Web Components">
<meta property="og:site_name" content="Carbon for IBM.com Web Components">
<meta property="og:description" content="This is the Web Components (custom elements) implementation of Carbon for IBM.com.">
<meta
property="og:image"
content="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/i/carbon-for-ibmcom-wc.png"
name="keywords"
content="ibm.com, design, system, design system, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements"
/>
<meta name="description" content="This is the Web Components (custom elements) implementation of Carbon for IBM.com." />

<!-- Open Graph -->
<meta property="og:title" content="Carbon for IBM.com Web Components" />
<meta property="og:site_name" content="Carbon for IBM.com Web Components" />
<meta property="og:description" content="This is the Web Components (custom elements) implementation of Carbon for IBM.com." />
<meta property="og:image" content="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/i/carbon-for-ibmcom-wc.png" />
<!-- Storybook override -->
<script>
document.title = 'Carbon for IBM.com Web Components';
Expand All @@ -29,16 +29,17 @@
font-weight: 400;
font-family: 'IBM Plex Sans';
font-style: normal;
src:
local('IBM Plex Sans'), local('IBMPlexSans'), url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) format('woff');
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) format('woff');
font-display: auto;
}

@font-face {
font-weight: 600;
font-family: 'IBM Plex Sans';
font-style: normal;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'), url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) format('woff');
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) format('woff');
font-display: auto;
}
</style>
Loading

0 comments on commit cc1f169

Please sign in to comment.